Can delete a device relay from UI

central_frontend/src/routes/LoginRoute.tsx

@@ -4,7 +4,6 @@ import Avatar from "@mui/material/Avatar";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import CssBaseline from "@mui/material/CssBaseline";
-import Grid from "@mui/material/Grid";
 import Link from "@mui/material/Link";
 import Paper from "@mui/material/Paper";
 import TextField from "@mui/material/TextField";
@@ -12,6 +11,7 @@ import Typography from "@mui/material/Typography";
 import * as React from "react";
 import { useLoadingMessage } from "../hooks/context_providers/LoadingMessageProvider";
 import { AuthApi } from "../api/AuthApi";
+import Grid from "@mui/material/Grid2";
 
 function Copyright(props: any) {
   return (
@@ -60,10 +60,7 @@ export function LoginRoute() {
     <Grid container component="main" sx={{ height: "100vh" }}>
       <CssBaseline />
       <Grid
-        item
-        xs={false}
-        sm={4}
-        md={7}
+        size={{ sm: 4, md: 7, xs: false }}
         sx={{
           backgroundImage: 'url("/sun.jpg")',
           backgroundColor: (t) =>
@@ -74,7 +71,12 @@ export function LoginRoute() {
           backgroundPosition: "left",
         }}
       />
-      <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
+      <Grid
+        size={{ xs: 12, sm: 8, md: 5 }}
+        component={Paper}
+        elevation={6}
+        square
+      >
         <Box
           sx={{
             my: 8,