diff --git a/website/package-lock.json b/website/package-lock.json
index 81b0e130..c70a304b 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -10,7 +10,7 @@
         "@material-ui/core": "^4.12.4",
         "@material-ui/icons": "^4.11.3",
         "@material-ui/lab": "^4.0.0-alpha.61",
-        "@mui/icons-material": "^5.14.3",
+        "@mui/icons-material": "^5.14.6",
         "@mui/material": "^5.14.5",
         "common-tags": "^1.8.2",
         "date-fns": "^2.30.0",
@@ -3305,11 +3305,11 @@
       }
     },
     "node_modules/@mui/icons-material": {
-      "version": "5.14.3",
-      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.14.3.tgz",
-      "integrity": "sha512-XkxWPhageu1OPUm2LWjo5XqeQ0t2xfGe8EiLkRW9oz2LHMMZmijvCxulhgquUVTF1DnoSh+3KoDLSsoAFtVNVw==",
+      "version": "5.14.9",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.14.9.tgz",
+      "integrity": "sha512-xTRQbDsogsJo7tY5Og8R9zbuG2q+KIPVIM6JQoKxtJlz9DPOw1u0T2fGrvwD+XAOVifQf6epNMcGCDLfJAz4Nw==",
       "dependencies": {
-        "@babel/runtime": "^7.22.6"
+        "@babel/runtime": "^7.22.15"
       },
       "engines": {
         "node": ">=12.0.0"
@@ -20356,11 +20356,11 @@
       "integrity": "sha512-8V7ZOC/lKkM03TRHqaThQFIq6bWPnj7L/ZWPh0ymldYFFyh8XdF0ywTgafsofDNYT4StlNknbaTjVHBma3SNjQ=="
     },
     "@mui/icons-material": {
-      "version": "5.14.3",
-      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.14.3.tgz",
-      "integrity": "sha512-XkxWPhageu1OPUm2LWjo5XqeQ0t2xfGe8EiLkRW9oz2LHMMZmijvCxulhgquUVTF1DnoSh+3KoDLSsoAFtVNVw==",
+      "version": "5.14.9",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.14.9.tgz",
+      "integrity": "sha512-xTRQbDsogsJo7tY5Og8R9zbuG2q+KIPVIM6JQoKxtJlz9DPOw1u0T2fGrvwD+XAOVifQf6epNMcGCDLfJAz4Nw==",
       "requires": {
-        "@babel/runtime": "^7.22.6"
+        "@babel/runtime": "^7.22.15"
       }
     },
     "@mui/material": {
diff --git a/website/package.json b/website/package.json
index 3120a374..b73c82c9 100644
--- a/website/package.json
+++ b/website/package.json
@@ -13,7 +13,7 @@
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
-    "@mui/icons-material": "^5.14.3",
+    "@mui/icons-material": "^5.14.6",
     "@mui/material": "^5.14.5",
     "common-tags": "^1.8.2",
     "date-fns": "^2.30.0",
diff --git a/website/src/App.tsx b/website/src/App.tsx
index f41b4526..5492d560 100644
--- a/website/src/App.tsx
+++ b/website/src/App.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import Box from '@material-ui/core/Box';
 import Navigation from './components/Navigation';
-import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { observer } from 'mobx-react';
 import { grpc } from './Api';
 import { AppState } from './AppState';
@@ -23,14 +23,14 @@ export const App = observer(class App extends React.Component {
         <CssBaseline />
         <Navigation />
         <Box component="div" m={2}>
-          <Switch>
-            <Route exact path="/" component={YourDevices} />
+          <Routes>
+            <Route path="/" element={<YourDevices />} />
             {AppState.info.isAdmin && (
               <>
-                <Route exact path="/admin/all-devices" component={AllDevices} />
+                <Route path="/admin/all-devices" element={<AllDevices />} />
               </>
             )}
-          </Switch>
+          </Routes>
         </Box>
       </Router>
     );
diff --git a/website/src/components/AddDevice.tsx b/website/src/components/AddDevice.tsx
index cc2098d1..814703ba 100644
--- a/website/src/components/AddDevice.tsx
+++ b/website/src/components/AddDevice.tsx
@@ -141,6 +141,19 @@ export const AddDevice = observer(class AddDevice extends React.Component<Props>
   }
 
   render() {
+
+    const handleClose = (event: any, reason: string) => {
+      if (reason === "backdropClick") {
+        return false;
+      }
+
+      if (reason === "escapeKeyDown") {
+        return false;
+      }
+
+      return true
+    };
+
     return (
       <>
         <Card>
@@ -206,7 +219,7 @@ export const AddDevice = observer(class AddDevice extends React.Component<Props>
             </form>
           </CardContent>
         </Card>
-        <Dialog disableBackdropClick disableEscapeKeyDown maxWidth="xl" open={this.dialogOpen}>
+        <Dialog disableEscapeKeyDown maxWidth="xl" open={this.dialogOpen} onClose={handleClose}>
           <DialogTitle>
             Get Connected
             <Info>
diff --git a/website/src/components/Devices.tsx b/website/src/components/Devices.tsx
index 25597713..681a840e 100644
--- a/website/src/components/Devices.tsx
+++ b/website/src/components/Devices.tsx
@@ -29,7 +29,7 @@ export const Devices = observer(class Devices extends React.Component {
       return <p>loading...</p>;
     }
     return (
-      <Grid container spacing={3} justify="center">
+      <Grid container spacing={3} justifyContent="center">
         <Grid item xs={12}>
           <Grid container spacing={3}>
             {this.devices.current.map((device, i) => (
diff --git a/website/src/components/GetConnected.tsx b/website/src/components/GetConnected.tsx
index c1009ecb..61354537 100644
--- a/website/src/components/GetConnected.tsx
+++ b/website/src/components/GetConnected.tsx
@@ -63,7 +63,7 @@ export class GetConnected extends Component<PropsWithChildren<Props>, any> {
         </Paper>
 
         <TabPanel for="desktop" value={this.state.currentTab}>
-          <Grid container direction="row" justify="space-around" alignItems="center">
+          <Grid container direction="row" justifyContent="space-around" alignItems="center">
             <List>
               <ListItem>
                 <ListItemText style={{ width: 300 }} primary="1. Install the WireGuard App" />
@@ -96,7 +96,7 @@ export class GetConnected extends Component<PropsWithChildren<Props>, any> {
 
         {this.props.showMobile && 
         <TabPanel for="mobile" value={this.state.currentTab}>
-          <Grid container direction="row" justify="space-around" alignItems="center">
+          <Grid container direction="row" justifyContent="space-around" alignItems="center">
             <Grid item>
               <List>
                 <ListItem>