diff --git a/src/caretogether-pwa/package-lock.json b/src/caretogether-pwa/package-lock.json
index 8cb13b3b8..4bb0d2aab 100644
--- a/src/caretogether-pwa/package-lock.json
+++ b/src/caretogether-pwa/package-lock.json
@@ -20,10 +20,10 @@
         "@hookform/resolvers": "^5.2.2",
         "@microsoft/applicationinsights-react-js": "^17.3.0",
         "@microsoft/applicationinsights-web": "^3.3.0",
-        "@mui/icons-material": "6.5.0",
-        "@mui/lab": "6.0.1-beta.36",
-        "@mui/material": "6.5.0",
-        "@mui/system": "6.5.0",
+        "@mui/icons-material": "7.3.11",
+        "@mui/lab": "7.0.1-beta.25",
+        "@mui/material": "7.3.11",
+        "@mui/system": "7.3.11",
         "@mui/x-date-pickers": "7.29.4",
         "@testing-library/jest-dom": "^6.4.6",
         "@testing-library/react": "^14.3.1",
@@ -766,44 +766,6 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
-    "node_modules/@floating-ui/core": {
-      "version": "1.7.5",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
-      "integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/utils": "^0.2.11"
-      }
-    },
-    "node_modules/@floating-ui/dom": {
-      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
-      "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/core": "^1.7.5",
-        "@floating-ui/utils": "^0.2.11"
-      }
-    },
-    "node_modules/@floating-ui/react-dom": {
-      "version": "2.1.8",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.8.tgz",
-      "integrity": "sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/dom": "^1.7.6"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
-    "node_modules/@floating-ui/utils": {
-      "version": "0.2.11",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
-      "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
-      "license": "MIT"
-    },
     "node_modules/@fullcalendar/core": {
       "version": "6.1.20",
       "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.20.tgz",
@@ -1164,43 +1126,10 @@
         "@nevware21/ts-utils": ">= 0.10.4 < 2.x"
       }
     },
-    "node_modules/@mui/base": {
-      "version": "5.0.0-beta.70",
-      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.70.tgz",
-      "integrity": "sha512-Tb/BIhJzb0pa5zv/wu7OdokY9ZKEDqcu1BDFnohyvGCoHuSXbEr90rPq1qeNW3XvTBIbNWHEF7gqge+xpUo6tQ==",
-      "deprecated": "This package has been replaced by @base-ui/react",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.26.0",
-        "@floating-ui/react-dom": "^2.1.1",
-        "@mui/types": "~7.2.24",
-        "@mui/utils": "^6.4.8",
-        "@popperjs/core": "^2.11.8",
-        "clsx": "^2.1.1",
-        "prop-types": "^15.8.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.5.0.tgz",
-      "integrity": "sha512-LGb8t8i6M2ZtS3Drn3GbTI1DVhDY6FJ9crEey2lZ0aN2EMZo8IZBZj9wRf4vqbZHaWjsYgtbOnJw5V8UWbmK2Q==",
+      "version": "7.3.11",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.3.11.tgz",
+      "integrity": "sha512-a7I/b/nBTdXYz2cOSlEmkQ9WWE1x8FHpqMhFPp+Y1VPFxcOw91G5ELOHARQAGSPy5V+UCgJua6K/1x70bAtQPw==",
       "license": "MIT",
       "funding": {
         "type": "opencollective",
@@ -1208,12 +1137,12 @@
       }
     },
     "node_modules/@mui/icons-material": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.5.0.tgz",
-      "integrity": "sha512-VPuPqXqbBPlcVSA0BmnoE4knW4/xG6Thazo8vCLWkOKusko6DtwFV6B665MMWJ9j0KFohTIf3yx2zYtYacvG1g==",
+      "version": "7.3.11",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-7.3.11.tgz",
+      "integrity": "sha512-+hz5ilwHZ3djd5es3sCErLioqe/NhZcYTsV/TNXZAMdJdb23F4xzJjqnnZdnurc3S1+ietcssRNqieOhPQLZ7Q==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.26.0"
+        "@babel/runtime": "^7.28.6"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -1223,7 +1152,7 @@
         "url": "https://opencollective.com/mui-org"
       },
       "peerDependencies": {
-        "@mui/material": "^6.5.0",
+        "@mui/material": "^7.3.11",
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
       },
@@ -1234,16 +1163,15 @@
       }
     },
     "node_modules/@mui/lab": {
-      "version": "6.0.1-beta.36",
-      "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-6.0.1-beta.36.tgz",
-      "integrity": "sha512-af9lDmA9SZGEWF1XXk0EVBpfCITk9IKsvh9lLOZGdYaaHfQeCsqxGEDMvNO66j0P8EYoxpyry84LFCJYuLVtVw==",
+      "version": "7.0.1-beta.25",
+      "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-7.0.1-beta.25.tgz",
+      "integrity": "sha512-itd2o0dKv8/1ZhAWTOkP+ZxiztC2dJ6rY0ECZFt3l3ylinShOfhgjbuqgS98M4UFIVzVLM5ynn+WhkEIp/5CMg==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.26.0",
-        "@mui/base": "5.0.0-beta.70",
-        "@mui/system": "^6.5.0",
-        "@mui/types": "~7.2.24",
-        "@mui/utils": "^6.4.9",
+        "@babel/runtime": "^7.28.6",
+        "@mui/system": "^7.3.11",
+        "@mui/types": "^7.4.12",
+        "@mui/utils": "^7.3.11",
         "clsx": "^2.1.1",
         "prop-types": "^15.8.1"
       },
@@ -1257,8 +1185,8 @@
       "peerDependencies": {
         "@emotion/react": "^11.5.0",
         "@emotion/styled": "^11.3.0",
-        "@mui/material": "^6.5.0",
-        "@mui/material-pigment-css": "^6.5.0",
+        "@mui/material": "^7.3.11",
+        "@mui/material-pigment-css": "^7.3.11",
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -1279,22 +1207,22 @@
       }
     },
     "node_modules/@mui/material": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.5.0.tgz",
-      "integrity": "sha512-yjvtXoFcrPLGtgKRxFaH6OQPtcLPhkloC0BML6rBG5UeldR0nPULR/2E2BfXdo5JNV7j7lOzrrLX2Qf/iSidow==",
+      "version": "7.3.11",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-7.3.11.tgz",
+      "integrity": "sha512-yq8bPc3LxOwKRWpcjRgDkYFmpM6aKlARfESTmOQcvLYFeJwtHte2tw6hJDrb8sk8wcvpDprHEHVaoUU0MslIkw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.26.0",
-        "@mui/core-downloads-tracker": "^6.5.0",
-        "@mui/system": "^6.5.0",
-        "@mui/types": "~7.2.24",
-        "@mui/utils": "^6.4.9",
+        "@babel/runtime": "^7.28.6",
+        "@mui/core-downloads-tracker": "^7.3.11",
+        "@mui/system": "^7.3.11",
+        "@mui/types": "^7.4.12",
+        "@mui/utils": "^7.3.11",
         "@popperjs/core": "^2.11.8",
         "@types/react-transition-group": "^4.4.12",
         "clsx": "^2.1.1",
-        "csstype": "^3.1.3",
+        "csstype": "^3.2.3",
         "prop-types": "^15.8.1",
-        "react-is": "^19.0.0",
+        "react-is": "^19.2.3",
         "react-transition-group": "^4.4.5"
       },
       "engines": {
@@ -1307,7 +1235,7 @@
       "peerDependencies": {
         "@emotion/react": "^11.5.0",
         "@emotion/styled": "^11.3.0",
-        "@mui/material-pigment-css": "^6.5.0",
+        "@mui/material-pigment-css": "^7.3.11",
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -1328,13 +1256,13 @@
       }
     },
     "node_modules/@mui/private-theming": {
-      "version": "6.4.9",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.4.9.tgz",
-      "integrity": "sha512-LktcVmI5X17/Q5SkwjCcdOLBzt1hXuc14jYa7NPShog0GBDCDvKtcnP0V7a2s6EiVRlv7BzbWEJzH6+l/zaCxw==",
+      "version": "7.3.11",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-7.3.11.tgz",
+      "integrity": "sha512-9B+YKms0fRHbNrqp9tOT/DNbNnU5gyvJ1o3qAGXfq8GmZcbJnE3At9x07Zr/o0pkhzg4aDdwXVqe4+AcgtOCPA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.26.0",
-        "@mui/utils": "^6.4.9",
+        "@babel/runtime": "^7.28.6",
+        "@mui/utils": "^7.3.11",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -1355,16 +1283,16 @@
       }
     },
     "node_modules/@mui/styled-engine": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.5.0.tgz",
-      "integrity": "sha512-8woC2zAqF4qUDSPIBZ8v3sakj+WgweolpyM/FXf8jAx6FMls+IE4Y8VDZc+zS805J7PRz31vz73n2SovKGaYgw==",
+      "version": "7.3.10",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-7.3.10.tgz",
+      "integrity": "sha512-WxE9SiF8xskAQqGjsp0poXCkCqsoXFEsSr0HBXfApmGHR+DBnXRp+z46Vsltg4gpPM4Z96DeAQRpeAOnhNg7Ng==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.26.0",
-        "@emotion/cache": "^11.13.5",
+        "@babel/runtime": "^7.28.6",
+        "@emotion/cache": "^11.14.0",
         "@emotion/serialize": "^1.3.3",
         "@emotion/sheet": "^1.4.0",
-        "csstype": "^3.1.3",
+        "csstype": "^3.2.3",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -1389,18 +1317,18 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.5.0.tgz",
-      "integrity": "sha512-XcbBYxDS+h/lgsoGe78ExXFZXtuIlSBpn/KsZq8PtZcIkUNJInkuDqcLd2rVBQrDC1u+rvVovdaWPf2FHKJf3w==",
+      "version": "7.3.11",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-7.3.11.tgz",
+      "integrity": "sha512-7izwGWdNawAKpBKcRlx7f2gFnAAjmASBWvMcyX4YYEeLOFsbfGRbUYGInvnAcUeql3rPxI7F9Ft4oY2OLRz44g==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.26.0",
-        "@mui/private-theming": "^6.4.9",
-        "@mui/styled-engine": "^6.5.0",
-        "@mui/types": "~7.2.24",
-        "@mui/utils": "^6.4.9",
+        "@babel/runtime": "^7.28.6",
+        "@mui/private-theming": "^7.3.11",
+        "@mui/styled-engine": "^7.3.10",
+        "@mui/types": "^7.4.12",
+        "@mui/utils": "^7.3.11",
         "clsx": "^2.1.1",
-        "csstype": "^3.1.3",
+        "csstype": "^3.2.3",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -1429,10 +1357,13 @@
       }
     },
     "node_modules/@mui/types": {
-      "version": "7.2.24",
-      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.24.tgz",
-      "integrity": "sha512-3c8tRt/CbWZ+pEg7QpSwbdxOk36EfmhbKf6AGZsD1EcLDLTSZoxxJ86FVtcjxvjuhdyBiWKSTGZFaXCnidO2kw==",
+      "version": "7.4.12",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.12.tgz",
+      "integrity": "sha512-iKNAF2u9PzSIj40CjvKJWxFXJo122jXVdrmdh0hMYd+FR+NuJMkr/L88XwWLCRiJ5P1j+uyac25+Kp6YC4hu6w==",
       "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.6"
+      },
       "peerDependencies": {
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
       },
@@ -1443,17 +1374,17 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "6.4.9",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.4.9.tgz",
-      "integrity": "sha512-Y12Q9hbK9g+ZY0T3Rxrx9m2m10gaphDuUMgWxyV5kNJevVxXYCLclYUCC9vXaIk1/NdNDTcW2Yfr2OGvNFNmHg==",
+      "version": "7.3.11",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.3.11.tgz",
+      "integrity": "sha512-XTjGnifwteg71/ij+0e7Y7d+hwyntMYP5wPoA/g2drdGH+Flkvjwy0OfrVpKBbaOvofq4zU/LIyUZyKgmWu18g==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.26.0",
-        "@mui/types": "~7.2.24",
-        "@types/prop-types": "^15.7.14",
+        "@babel/runtime": "^7.28.6",
+        "@mui/types": "^7.4.12",
+        "@types/prop-types": "^15.7.15",
         "clsx": "^2.1.1",
         "prop-types": "^15.8.1",
-        "react-is": "^19.0.0"
+        "react-is": "^19.2.3"
       },
       "engines": {
         "node": ">=14.0.0"
diff --git a/src/caretogether-pwa/package.json b/src/caretogether-pwa/package.json
index 307775d16..a06c97ba3 100644
--- a/src/caretogether-pwa/package.json
+++ b/src/caretogether-pwa/package.json
@@ -16,10 +16,10 @@
     "@hookform/resolvers": "^5.2.2",
     "@microsoft/applicationinsights-react-js": "^17.3.0",
     "@microsoft/applicationinsights-web": "^3.3.0",
-    "@mui/icons-material": "6.5.0",
-    "@mui/lab": "6.0.1-beta.36",
-    "@mui/material": "6.5.0",
-    "@mui/system": "6.5.0",
+    "@mui/icons-material": "7.3.11",
+    "@mui/lab": "7.0.1-beta.25",
+    "@mui/material": "7.3.11",
+    "@mui/system": "7.3.11",
     "@mui/x-date-pickers": "7.29.4",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^14.3.1",
diff --git a/src/caretogether-pwa/src/Communities/AddEditCommunity.tsx b/src/caretogether-pwa/src/Communities/AddEditCommunity.tsx
index 5ab0b8608..431878695 100644
--- a/src/caretogether-pwa/src/Communities/AddEditCommunity.tsx
+++ b/src/caretogether-pwa/src/Communities/AddEditCommunity.tsx
@@ -1,4 +1,5 @@
-import { Button, Grid, TextField } from '@mui/material';
+import { Button, TextField } from '@mui/material';
+import Grid from '@mui/material/Grid';
 import {
   Community,
   CreateCommunity,
@@ -69,10 +70,10 @@ export function AddEditCommunity({
 
   return (
     <Grid container spacing={2} maxWidth={500}>
-      <Grid item xs={12}>
+      <Grid size={12}>
         <h3>{community ? 'Edit Community' : 'Add New Community'}</h3>
       </Grid>
-      <Grid item xs={12}>
+      <Grid size={12}>
         <TextField
           type="text"
           fullWidth
@@ -84,7 +85,7 @@ export function AddEditCommunity({
           onChange={(e) => setName(e.target.value)}
         />
       </Grid>
-      <Grid item xs={12}>
+      <Grid size={12}>
         <TextField
           type="text"
           fullWidth
@@ -96,7 +97,7 @@ export function AddEditCommunity({
           onChange={(e) => setDescription(e.target.value)}
         />
       </Grid>
-      <Grid item xs={12} sx={{ textAlign: 'right' }}>
+      <Grid size={12} sx={{ textAlign: 'right' }}>
         <Button
           color="secondary"
           variant="contained"
diff --git a/src/caretogether-pwa/src/Communities/AddMemberFamiliesForm.tsx b/src/caretogether-pwa/src/Communities/AddMemberFamiliesForm.tsx
index 8a84cd5f7..1caae5b5b 100644
--- a/src/caretogether-pwa/src/Communities/AddMemberFamiliesForm.tsx
+++ b/src/caretogether-pwa/src/Communities/AddMemberFamiliesForm.tsx
@@ -1,8 +1,8 @@
+import Grid from '@mui/material/GridLegacy';
 import {
   Autocomplete,
   Button,
   FormControl,
-  Grid,
   TextField,
 } from '@mui/material';
 import { AddCommunityMemberFamily, Community } from '../GeneratedClient';
diff --git a/src/caretogether-pwa/src/Communities/AddRoleAssignmentForm.tsx b/src/caretogether-pwa/src/Communities/AddRoleAssignmentForm.tsx
index ed3172df6..707ef41bb 100644
--- a/src/caretogether-pwa/src/Communities/AddRoleAssignmentForm.tsx
+++ b/src/caretogether-pwa/src/Communities/AddRoleAssignmentForm.tsx
@@ -1,3 +1,4 @@
+import Grid from '@mui/material/GridLegacy';
 import {
   Alert,
   Autocomplete,
@@ -5,7 +6,6 @@ import {
   FormControl,
   FormControlLabel,
   FormLabel,
-  Grid,
   Radio,
   RadioGroup,
   TextField,
diff --git a/src/caretogether-pwa/src/Communities/CommunitiesList.tsx b/src/caretogether-pwa/src/Communities/CommunitiesList.tsx
index bc7174aef..f4226cb9e 100644
--- a/src/caretogether-pwa/src/Communities/CommunitiesList.tsx
+++ b/src/caretogether-pwa/src/Communities/CommunitiesList.tsx
@@ -103,10 +103,12 @@ export function CommunitiesList() {
           anchor="right"
           open={addDrawerOpen}
           onClose={() => setAddDrawerOpen(false)}
-          sx={{
-            '.MuiDrawer-paper': {
-              padding: 2,
-              paddingTop: { xs: 7, sm: 8, md: 6 },
+          slotProps={{
+            paper: {
+              sx: {
+                padding: 2,
+                paddingTop: { xs: 7, sm: 8, md: 6 },
+              },
             },
           }}
         >
diff --git a/src/caretogether-pwa/src/Communities/CommunityDocumentUploadForm.tsx b/src/caretogether-pwa/src/Communities/CommunityDocumentUploadForm.tsx
index 13fb12a20..1c11e0e62 100644
--- a/src/caretogether-pwa/src/Communities/CommunityDocumentUploadForm.tsx
+++ b/src/caretogether-pwa/src/Communities/CommunityDocumentUploadForm.tsx
@@ -1,4 +1,5 @@
-import { Button, Grid, List, ListItem, ListItemText } from '@mui/material';
+import { Button, List, ListItem, ListItemText } from '@mui/material';
+import Grid from '@mui/material/Grid';
 import { Community, UploadCommunityDocument } from '../GeneratedClient';
 import { useCommunityCommand } from '../Model/DirectoryModel';
 import { uploadCommunityFileToTenant } from '../Model/FilesModel';
@@ -68,13 +69,13 @@ export function CommunityDocumentUpload({
 
   return (
     <Grid container spacing={2} maxWidth={500}>
-      <Grid item xs={12}>
+      <Grid size={12}>
         <h3>Upload Community Documents</h3>
       </Grid>
-      <Grid item xs={12}>
+      <Grid size={12}>
         <p>Select one or more documents to upload for this community.</p>
       </Grid>
-      <Grid item xs={12}>
+      <Grid size={12}>
         <input
           accept="*/*"
           multiple={true}
@@ -85,7 +86,7 @@ export function CommunityDocumentUpload({
           }}
         />
       </Grid>
-      <Grid item xs={12}>
+      <Grid size={12}>
         <List dense disablePadding>
           {documentFiles &&
             Array.from(documentFiles).map((documentFile, i) => (
@@ -98,7 +99,7 @@ export function CommunityDocumentUpload({
             ))}
         </List>
       </Grid>
-      <Grid item xs={12} sx={{ textAlign: 'right' }}>
+      <Grid size={12} sx={{ textAlign: 'right' }}>
         <Button
           color="secondary"
           variant="contained"
diff --git a/src/caretogether-pwa/src/Communities/CommunityDocuments.tsx b/src/caretogether-pwa/src/Communities/CommunityDocuments.tsx
index d282bfdc4..dc0a16e7e 100644
--- a/src/caretogether-pwa/src/Communities/CommunityDocuments.tsx
+++ b/src/caretogether-pwa/src/Communities/CommunityDocuments.tsx
@@ -113,7 +113,9 @@ export function CommunityDocuments({ communityInfo }: CommunityDocumentsProps) {
               </ListItemIcon>
               <ListItemText
                 primary={doc.document.uploadedFileName}
-                primaryTypographyProps={{ color: theme.palette.primary.main }}
+                slotProps={{
+                  primary: { color: theme.palette.primary.main },
+                }}
                 secondary={`${format(doc.document.timestampUtc!, 'PPp')} — ${personNameString(doc.uploader)}`}
               ></ListItemText>
             </ListItemButton>
diff --git a/src/caretogether-pwa/src/Communities/CommunityScreen.tsx b/src/caretogether-pwa/src/Communities/CommunityScreen.tsx
index f19ce8c15..4c1d7551a 100644
--- a/src/caretogether-pwa/src/Communities/CommunityScreen.tsx
+++ b/src/caretogether-pwa/src/Communities/CommunityScreen.tsx
@@ -1,8 +1,8 @@
+import Grid from '@mui/material/GridLegacy';
 import {
   Button,
   Box,
   Container,
-  Grid,
   Toolbar,
   Typography,
   useMediaQuery,
diff --git a/src/caretogether-pwa/src/Dashboard/DashboardCalendar.tsx b/src/caretogether-pwa/src/Dashboard/DashboardCalendar.tsx
index da0d85d2f..cd5e03132 100644
--- a/src/caretogether-pwa/src/Dashboard/DashboardCalendar.tsx
+++ b/src/caretogether-pwa/src/Dashboard/DashboardCalendar.tsx
@@ -1,4 +1,5 @@
-import { Grid, Typography } from '@mui/material';
+import Grid from '@mui/material/GridLegacy';
+import { Typography } from '@mui/material';
 import FullCalendar from '@fullcalendar/react';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import listPlugin from '@fullcalendar/list';
diff --git a/src/caretogether-pwa/src/Families/AddAdultDialog.tsx b/src/caretogether-pwa/src/Families/AddAdultDialog.tsx
index 9b0d2503a..df508b40c 100644
--- a/src/caretogether-pwa/src/Families/AddAdultDialog.tsx
+++ b/src/caretogether-pwa/src/Families/AddAdultDialog.tsx
@@ -1,4 +1,6 @@
-import { useState } from 'react';
+import Grid from '@mui/material/GridLegacy';
+import {
+  useState } from 'react';
 import {
   Button,
   Checkbox,
@@ -11,7 +13,6 @@ import {
   FormControlLabel,
   FormGroup,
   FormLabel,
-  Grid,
   InputAdornment,
   InputLabel,
   MenuItem,
@@ -411,12 +412,14 @@ export function AddAdultDialog({ onClose }: AddAdultDialogProps) {
                 minRows={2}
                 maxRows={5}
                 size="small"
-                InputProps={{
-                  startAdornment: (
-                    <InputAdornment position="start">
-                      <WarningIcon />
-                    </InputAdornment>
-                  ),
+                slotProps={{
+                  input: {
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <WarningIcon />
+                      </InputAdornment>
+                    ),
+                  },
                 }}
                 value={concerns == null ? '' : concerns}
                 onChange={(e) =>
diff --git a/src/caretogether-pwa/src/Families/AddChildDialog.tsx b/src/caretogether-pwa/src/Families/AddChildDialog.tsx
index 70957bf7a..e888f46f0 100644
--- a/src/caretogether-pwa/src/Families/AddChildDialog.tsx
+++ b/src/caretogether-pwa/src/Families/AddChildDialog.tsx
@@ -1,4 +1,6 @@
-import { useState } from 'react';
+import Grid from '@mui/material/GridLegacy';
+import {
+  useState } from 'react';
 import {
   Button,
   Dialog,
@@ -9,7 +11,6 @@ import {
   FormControl,
   FormControlLabel,
   FormLabel,
-  Grid,
   InputAdornment,
   InputLabel,
   MenuItem,
@@ -320,12 +321,14 @@ export function AddChildDialog({ onClose }: AddChildDialogProps) {
                 minRows={2}
                 maxRows={5}
                 size="small"
-                InputProps={{
-                  startAdornment: (
-                    <InputAdornment position="start">
-                      <WarningIcon />
-                    </InputAdornment>
-                  ),
+                slotProps={{
+                  input: {
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <WarningIcon />
+                      </InputAdornment>
+                    ),
+                  },
                 }}
                 value={concerns == null ? '' : concerns}
                 onChange={(e) =>
diff --git a/src/caretogether-pwa/src/Families/AddressEditor.tsx b/src/caretogether-pwa/src/Families/AddressEditor.tsx
index 43979b670..0d4c9fd9d 100644
--- a/src/caretogether-pwa/src/Families/AddressEditor.tsx
+++ b/src/caretogether-pwa/src/Families/AddressEditor.tsx
@@ -1,9 +1,9 @@
+import Grid from '@mui/material/GridLegacy';
 import {
   Button,
   Checkbox,
   Divider,
   FormControlLabel,
-  Grid,
   TextField,
 } from '@mui/material';
 import {
diff --git a/src/caretogether-pwa/src/Families/AdultCard.tsx b/src/caretogether-pwa/src/Families/AdultCard.tsx
index 7d08dc96d..2124d0a1c 100644
--- a/src/caretogether-pwa/src/Families/AdultCard.tsx
+++ b/src/caretogether-pwa/src/Families/AdultCard.tsx
@@ -1,3 +1,4 @@
+import Grid from '@mui/material/GridLegacy';
 import {
   Card,
   CardHeader,
@@ -12,7 +13,6 @@ import {
   AccordionSummary,
   AccordionDetails,
   Badge,
-  Grid,
   Tooltip,
 } from '@mui/material';
 import { useState } from 'react';
diff --git a/src/caretogether-pwa/src/Families/AdultFamilyRelationshipEditor.tsx b/src/caretogether-pwa/src/Families/AdultFamilyRelationshipEditor.tsx
index 844054ee5..7c2cb328e 100644
--- a/src/caretogether-pwa/src/Families/AdultFamilyRelationshipEditor.tsx
+++ b/src/caretogether-pwa/src/Families/AdultFamilyRelationshipEditor.tsx
@@ -1,9 +1,9 @@
+import Grid from '@mui/material/GridLegacy';
 import {
   Checkbox,
   FormControl,
   FormControlLabel,
   FormGroup,
-  Grid,
   InputLabel,
   MenuItem,
   Select,
diff --git a/src/caretogether-pwa/src/Families/AgeEditor.tsx b/src/caretogether-pwa/src/Families/AgeEditor.tsx
index b3a0f005e..082d77c3e 100644
--- a/src/caretogether-pwa/src/Families/AgeEditor.tsx
+++ b/src/caretogether-pwa/src/Families/AgeEditor.tsx
@@ -1,4 +1,4 @@
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/GridLegacy';
 import { useDirectoryModel } from '../Model/DirectoryModel';
 import { useInlineEditor } from '../Hooks/useInlineEditor';
 import { PersonEditorProps } from './PersonEditorProps';
diff --git a/src/caretogether-pwa/src/Families/AssignmentsSection.tsx b/src/caretogether-pwa/src/Families/AssignmentsSection.tsx
index b7b6bcdac..057131ce9 100644
--- a/src/caretogether-pwa/src/Families/AssignmentsSection.tsx
+++ b/src/caretogether-pwa/src/Families/AssignmentsSection.tsx
@@ -1,4 +1,5 @@
-import { Grid, Typography, Button } from '@mui/material';
+import Grid from '@mui/material/GridLegacy';
+import { Typography, Button } from '@mui/material';
 import { CombinedFamilyInfo } from '../GeneratedClient';
 import { AssignmentCard } from '../Families/AssignmentCard';
 import { useState } from 'react';
diff --git a/src/caretogether-pwa/src/Families/ChildCustodyRelationshipEditor.tsx b/src/caretogether-pwa/src/Families/ChildCustodyRelationshipEditor.tsx
index 4b0abcc2d..150ef8691 100644
--- a/src/caretogether-pwa/src/Families/ChildCustodyRelationshipEditor.tsx
+++ b/src/caretogether-pwa/src/Families/ChildCustodyRelationshipEditor.tsx
@@ -1,4 +1,5 @@
-import { FormControl, Grid, MenuItem, Select } from '@mui/material';
+import Grid from '@mui/material/GridLegacy';
+import { FormControl, MenuItem, Select } from '@mui/material';
 import { useDirectoryModel } from '../Model/DirectoryModel';
 import { useInlineEditor } from '../Hooks/useInlineEditor';
 import { PersonEditorProps } from './PersonEditorProps';
diff --git a/src/caretogether-pwa/src/Families/ConcernsEditor.tsx b/src/caretogether-pwa/src/Families/ConcernsEditor.tsx
index 5e6ab7b2e..d8727e5fe 100644
--- a/src/caretogether-pwa/src/Families/ConcernsEditor.tsx
+++ b/src/caretogether-pwa/src/Families/ConcernsEditor.tsx
@@ -1,4 +1,5 @@
-import { Grid, InputAdornment, TextField } from '@mui/material';
+import Grid from '@mui/material/GridLegacy';
+import { InputAdornment, TextField } from '@mui/material';
 import { Permission } from '../GeneratedClient';
 import { useDirectoryModel } from '../Model/DirectoryModel';
 import { useInlineEditor } from '../Hooks/useInlineEditor';
@@ -36,12 +37,14 @@ export function ConcernsEditor({ familyId, person }: PersonEditorProps) {
               minRows={2}
               maxRows={5}
               size="small"
-              InputProps={{
-                startAdornment: (
-                  <InputAdornment position="start">
-                    <WarningIcon />
-                  </InputAdornment>
-                ),
+              slotProps={{
+                input: {
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <WarningIcon />
+                    </InputAdornment>
+                  ),
+                },
               }}
               value={editor.value == null ? '' : editor.value}
               onChange={(e) => editor.setValue(e.target.value)}
diff --git a/src/caretogether-pwa/src/Families/EmailAddressEditor.tsx b/src/caretogether-pwa/src/Families/EmailAddressEditor.tsx
index 3e2c82e7d..c9717b1d7 100644
--- a/src/caretogether-pwa/src/Families/EmailAddressEditor.tsx
+++ b/src/caretogether-pwa/src/Families/EmailAddressEditor.tsx
@@ -1,3 +1,4 @@
+import Grid from '@mui/material/GridLegacy';
 import {
   Button,
   Checkbox,
@@ -5,7 +6,6 @@ import {
   FormControl,
   FormControlLabel,
   FormLabel,
-  Grid,
   Radio,
   RadioGroup,
   TextField,
diff --git a/src/caretogether-pwa/src/Families/EthnicityEditor.tsx b/src/caretogether-pwa/src/Families/EthnicityEditor.tsx
index a04bb0a4b..98a2b202a 100644
--- a/src/caretogether-pwa/src/Families/EthnicityEditor.tsx
+++ b/src/caretogether-pwa/src/Families/EthnicityEditor.tsx
@@ -1,4 +1,5 @@
-import { FormControl, Grid, InputLabel, MenuItem, Select } from '@mui/material';
+import Grid from '@mui/material/GridLegacy';
+import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
 import { useDirectoryModel } from '../Model/DirectoryModel';
 import { useInlineEditor } from '../Hooks/useInlineEditor';
 import { PersonEditorProps } from './PersonEditorProps';
diff --git a/src/caretogether-pwa/src/Families/FamilyScreen.tsx b/src/caretogether-pwa/src/Families/FamilyScreen.tsx
index 3d6cce03f..c9f042218 100644
--- a/src/caretogether-pwa/src/Families/FamilyScreen.tsx
+++ b/src/caretogether-pwa/src/Families/FamilyScreen.tsx
@@ -1,8 +1,9 @@
-import { useReactToPrint } from 'react-to-print';
+import Grid from '@mui/material/GridLegacy';
+import {
+  useReactToPrint } from 'react-to-print';
 import {
   Container,
   Toolbar,
-  Grid,
   Button,
   useMediaQuery,
   useTheme,
@@ -806,8 +807,10 @@ export function FamilyScreen() {
                     <ListItemText
                       sx={{ alignSelf: 'baseline' }}
                       primary={communityInfo.community?.name}
-                      primaryTypographyProps={{
-                        color: theme.palette.primary.main,
+                      slotProps={{
+                        primary: {
+                          color: theme.palette.primary.main,
+                        },
                       }}
                     ></ListItemText>
                   </ListItemButton>
diff --git a/src/caretogether-pwa/src/Families/GenderEditor.tsx b/src/caretogether-pwa/src/Families/GenderEditor.tsx
index f8e6bb19d..3a5faa00a 100644
--- a/src/caretogether-pwa/src/Families/GenderEditor.tsx
+++ b/src/caretogether-pwa/src/Families/GenderEditor.tsx
@@ -1,8 +1,8 @@
+import Grid from '@mui/material/GridLegacy';
 import {
   FormControl,
   FormControlLabel,
   FormLabel,
-  Grid,
   Radio,
   RadioGroup,
 } from '@mui/material';
diff --git a/src/caretogether-pwa/src/Families/ManageUserDrawer.tsx b/src/caretogether-pwa/src/Families/ManageUserDrawer.tsx
index 1ae696811..361336ca3 100644
--- a/src/caretogether-pwa/src/Families/ManageUserDrawer.tsx
+++ b/src/caretogether-pwa/src/Families/ManageUserDrawer.tsx
@@ -1,5 +1,5 @@
+import Grid from '@mui/material/GridLegacy';
 import {
-  Grid,
   Button,
   Icon,
   useTheme,
diff --git a/src/caretogether-pwa/src/Families/NameEditor.tsx b/src/caretogether-pwa/src/Families/NameEditor.tsx
index 31684cd92..e9f500691 100644
--- a/src/caretogether-pwa/src/Families/NameEditor.tsx
+++ b/src/caretogether-pwa/src/Families/NameEditor.tsx
@@ -1,4 +1,5 @@
-import { Grid, TextField } from '@mui/material';
+import Grid from '@mui/material/GridLegacy';
+import { TextField } from '@mui/material';
 import { useDirectoryModel } from '../Model/DirectoryModel';
 import { useInlineEditor } from '../Hooks/useInlineEditor';
 import { PersonName } from './PersonName';
diff --git a/src/caretogether-pwa/src/Families/NotesEditor.tsx b/src/caretogether-pwa/src/Families/NotesEditor.tsx
index b5d9cab4b..8fa8a9df9 100644
--- a/src/caretogether-pwa/src/Families/NotesEditor.tsx
+++ b/src/caretogether-pwa/src/Families/NotesEditor.tsx
@@ -1,4 +1,5 @@
-import { Grid, TextField } from '@mui/material';
+import Grid from '@mui/material/GridLegacy';
+import { TextField } from '@mui/material';
 import { Permission } from '../GeneratedClient';
 import { useDirectoryModel } from '../Model/DirectoryModel';
 import { useFamilyIdPermissions } from '../Model/SessionModel';
diff --git a/src/caretogether-pwa/src/Families/PhoneNumberEditor.tsx b/src/caretogether-pwa/src/Families/PhoneNumberEditor.tsx
index 849d97376..c68ff44d5 100644
--- a/src/caretogether-pwa/src/Families/PhoneNumberEditor.tsx
+++ b/src/caretogether-pwa/src/Families/PhoneNumberEditor.tsx
@@ -1,3 +1,4 @@
+import Grid from '@mui/material/GridLegacy';
 import {
   Button,
   Checkbox,
@@ -5,7 +6,6 @@ import {
   FormControl,
   FormControlLabel,
   FormLabel,
-  Grid,
   Radio,
   RadioGroup,
   TextField,
diff --git a/src/caretogether-pwa/src/Generic/CustomFieldsFilter/CustomFieldsFilterSelect.tsx b/src/caretogether-pwa/src/Generic/CustomFieldsFilter/CustomFieldsFilterSelect.tsx
index 492b5f32a..a732ecde5 100644
--- a/src/caretogether-pwa/src/Generic/CustomFieldsFilter/CustomFieldsFilterSelect.tsx
+++ b/src/caretogether-pwa/src/Generic/CustomFieldsFilter/CustomFieldsFilterSelect.tsx
@@ -65,7 +65,7 @@ export function CustomFieldsFilterSelect({
         width: fullWidth ? '100%' : 'auto',
       }}
     >
-      <Select
+      <Select<string[]>
         labelId={`customField${label}Filter`}
         displayEmpty
         sx={{
diff --git a/src/caretogether-pwa/src/Generic/ShellDrawer.tsx b/src/caretogether-pwa/src/Generic/ShellDrawer.tsx
index e8c54ba0a..ae805968d 100644
--- a/src/caretogether-pwa/src/Generic/ShellDrawer.tsx
+++ b/src/caretogether-pwa/src/Generic/ShellDrawer.tsx
@@ -12,10 +12,12 @@ export function useDrawer() {
         anchor="right"
         open={open}
         onClose={() => setOpen(false)}
-        sx={{
-          '.MuiDrawer-paper': {
-            padding: 2,
-            paddingTop: { xs: 7, sm: 8, md: 6 },
+        slotProps={{
+          paper: {
+            sx: {
+              padding: 2,
+              paddingTop: { xs: 7, sm: 8, md: 6 },
+            },
           },
         }}
       >
diff --git a/src/caretogether-pwa/src/Hooks/useSidePanel.tsx b/src/caretogether-pwa/src/Hooks/useSidePanel.tsx
index 3c4addf60..def9375b4 100644
--- a/src/caretogether-pwa/src/Hooks/useSidePanel.tsx
+++ b/src/caretogether-pwa/src/Hooks/useSidePanel.tsx
@@ -14,10 +14,12 @@ export function useSidePanel() {
       anchor="right"
       open={open}
       onClose={() => setOpen(false)}
-      sx={{
-        '.MuiDrawer-paper': {
-          padding: 2,
-          paddingTop: { xs: 7, sm: 8, md: 6 },
+      slotProps={{
+        paper: {
+          sx: {
+            padding: 2,
+            paddingTop: { xs: 7, sm: 8, md: 6 },
+          },
         },
       }}
     >
diff --git a/src/caretogether-pwa/src/Notes/AddEditNoteDialog.tsx b/src/caretogether-pwa/src/Notes/AddEditNoteDialog.tsx
index 446cc7a68..9a963fa09 100644
--- a/src/caretogether-pwa/src/Notes/AddEditNoteDialog.tsx
+++ b/src/caretogether-pwa/src/Notes/AddEditNoteDialog.tsx
@@ -1,8 +1,9 @@
-import { useState } from 'react';
+import Grid from '@mui/material/GridLegacy';
+import {
+  useState } from 'react';
 import {
   FormControl,
   FormHelperText,
-  Grid,
   InputLabel,
   MenuItem,
   Select,
diff --git a/src/caretogether-pwa/src/Requirements/MissingRequirementDialog.tsx b/src/caretogether-pwa/src/Requirements/MissingRequirementDialog.tsx
index 83fc4e2d8..8c77faf58 100644
--- a/src/caretogether-pwa/src/Requirements/MissingRequirementDialog.tsx
+++ b/src/caretogether-pwa/src/Requirements/MissingRequirementDialog.tsx
@@ -1,3 +1,4 @@
+import Grid from '@mui/material/GridLegacy';
 import {
   Checkbox,
   DialogContentText,
@@ -6,7 +7,6 @@ import {
   FormControlLabel,
   FormGroup,
   FormLabel,
-  Grid,
   InputLabel,
   Link,
   MenuItem,
diff --git a/src/caretogether-pwa/src/Settings/Locations/AddLocationSidePanel.tsx b/src/caretogether-pwa/src/Settings/Locations/AddLocationSidePanel.tsx
index 431e06771..66021ec3f 100644
--- a/src/caretogether-pwa/src/Settings/Locations/AddLocationSidePanel.tsx
+++ b/src/caretogether-pwa/src/Settings/Locations/AddLocationSidePanel.tsx
@@ -1,4 +1,5 @@
-import { Button, Grid, TextField, Typography } from '@mui/material';
+import Grid from '@mui/material/GridLegacy';
+import { Button, TextField, Typography } from '@mui/material';
 import { useBackdrop } from '../../Hooks/useBackdrop';
 import { api } from '../../Api/Api';
 import {
diff --git a/src/caretogether-pwa/src/Settings/Locations/Tabs/AccessLevels/AccessLevels.tsx b/src/caretogether-pwa/src/Settings/Locations/Tabs/AccessLevels/AccessLevels.tsx
index a827015b7..a686adc10 100644
--- a/src/caretogether-pwa/src/Settings/Locations/Tabs/AccessLevels/AccessLevels.tsx
+++ b/src/caretogether-pwa/src/Settings/Locations/Tabs/AccessLevels/AccessLevels.tsx
@@ -84,12 +84,14 @@ export default function AccessLevels({ locationConfiguration }: Props) {
         size="small"
         fullWidth
         sx={{ maxWidth: 300 }}
-        InputProps={{
-          startAdornment: (
-            <InputAdornment position="start">
-              <SearchIcon />
-            </InputAdornment>
-          ),
+        slotProps={{
+          input: {
+            startAdornment: (
+              <InputAdornment position="start">
+                <SearchIcon />
+              </InputAdornment>
+            ),
+          },
         }}
         value={searchTerm}
         onChange={(e) => setSearchTerm(e.target.value)}
diff --git a/src/caretogether-pwa/src/Settings/Locations/Tabs/AccessLevels/AddAccessLevel.tsx b/src/caretogether-pwa/src/Settings/Locations/Tabs/AccessLevels/AddAccessLevel.tsx
index 317521236..c11f02f8f 100644
--- a/src/caretogether-pwa/src/Settings/Locations/Tabs/AccessLevels/AddAccessLevel.tsx
+++ b/src/caretogether-pwa/src/Settings/Locations/Tabs/AccessLevels/AddAccessLevel.tsx
@@ -1,4 +1,5 @@
-import { Button, Grid, TextField } from '@mui/material';
+import Grid from '@mui/material/GridLegacy';
+import { Button, TextField } from '@mui/material';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { api } from '../../../../Api/Api';
 import {
diff --git a/src/caretogether-pwa/src/Settings/Roles/AddRole.tsx b/src/caretogether-pwa/src/Settings/Roles/AddRole.tsx
index 0825bb0ac..2a25e29cf 100644
--- a/src/caretogether-pwa/src/Settings/Roles/AddRole.tsx
+++ b/src/caretogether-pwa/src/Settings/Roles/AddRole.tsx
@@ -1,6 +1,6 @@
+import Grid from '@mui/material/GridLegacy';
 import {
   Button,
-  Grid,
   TextField,
   Checkbox,
   FormControlLabel,
diff --git a/src/caretogether-pwa/src/Settings/SettingsScreen.tsx b/src/caretogether-pwa/src/Settings/SettingsScreen.tsx
index 89d3c09cc..a5c67ecbb 100644
--- a/src/caretogether-pwa/src/Settings/SettingsScreen.tsx
+++ b/src/caretogether-pwa/src/Settings/SettingsScreen.tsx
@@ -1,9 +1,9 @@
+import Grid from '@mui/material/GridLegacy';
 import {
   Box,
   Card,
   CardActionArea,
   CardContent,
-  Grid,
   Typography,
 } from '@mui/material';
 import { ProgressBackdrop } from '../Shell/ProgressBackdrop';
diff --git a/src/caretogether-pwa/src/Shell/ShellBottomNavigation.tsx b/src/caretogether-pwa/src/Shell/ShellBottomNavigation.tsx
index 35d071398..d279559e7 100644
--- a/src/caretogether-pwa/src/Shell/ShellBottomNavigation.tsx
+++ b/src/caretogether-pwa/src/Shell/ShellBottomNavigation.tsx
@@ -114,9 +114,13 @@ export function ShellBottomNavigation() {
       <Drawer
         sx={{
           zIndex: theme.zIndex.drawer + 2,
-          '& .MuiDrawer-paper': {
+        }}
+        slotProps={{
+          paper: {
+            sx: {
             padding: 2,
             width: 200,
+            },
           },
         }}
         open={drawerOpen}
diff --git a/src/caretogether-pwa/src/Shell/ShellSideNavigation.tsx b/src/caretogether-pwa/src/Shell/ShellSideNavigation.tsx
index 4f4a1ac92..3a596f07a 100644
--- a/src/caretogether-pwa/src/Shell/ShellSideNavigation.tsx
+++ b/src/caretogether-pwa/src/Shell/ShellSideNavigation.tsx
@@ -208,15 +208,19 @@ export function ShellSideNavigation({ open, width }: ShellSideNavigationProps) {
         flexShrink: 0,
         whiteSpace: 'nowrap',
         overflowX: 'hidden',
-        '& .MuiDrawer-paper': {
-          width: width, // Force fixed width
-          minWidth: width, // Prevent shrinking
-          maxWidth: width, // Prevent expanding
-          backgroundColor: theme.palette.primary.dark,
-          color: theme.palette.primary.contrastText,
-          overflowX: 'hidden',
-          display: 'flex',
-          flexDirection: 'column',
+      }}
+      slotProps={{
+        paper: {
+          sx: {
+            width: width, // Force fixed width
+            minWidth: width, // Prevent shrinking
+            maxWidth: width, // Prevent expanding
+            backgroundColor: theme.palette.primary.dark,
+            color: theme.palette.primary.contrastText,
+            overflowX: 'hidden',
+            display: 'flex',
+            flexDirection: 'column',
+          },
         },
       }}
     >
diff --git a/src/caretogether-pwa/src/Support.tsx b/src/caretogether-pwa/src/Support.tsx
index ea8731ad5..995c76174 100644
--- a/src/caretogether-pwa/src/Support.tsx
+++ b/src/caretogether-pwa/src/Support.tsx
@@ -1,3 +1,4 @@
+import Grid from '@mui/material/GridLegacy';
 import {
   Box,
   Button,
@@ -5,7 +6,6 @@ import {
   CardActions,
   CardContent,
   Container,
-  Grid,
   Typography,
 } from '@mui/material';
 import {
diff --git a/src/caretogether-pwa/src/V1Cases/Arrangements/ArrangementCardDetailsSection.tsx b/src/caretogether-pwa/src/V1Cases/Arrangements/ArrangementCardDetailsSection.tsx
index 82f88fff6..1060c5232 100644
--- a/src/caretogether-pwa/src/V1Cases/Arrangements/ArrangementCardDetailsSection.tsx
+++ b/src/caretogether-pwa/src/V1Cases/Arrangements/ArrangementCardDetailsSection.tsx
@@ -1,10 +1,10 @@
+import Grid from '@mui/material/GridLegacy';
 import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
   Badge,
   Divider,
-  Grid,
   Table,
   TableBody,
   TableContainer,
diff --git a/src/caretogether-pwa/src/V1Cases/Arrangements/ArrangementPlannedDuration.tsx b/src/caretogether-pwa/src/V1Cases/Arrangements/ArrangementPlannedDuration.tsx
index d5a2c4d94..0e3617973 100644
--- a/src/caretogether-pwa/src/V1Cases/Arrangements/ArrangementPlannedDuration.tsx
+++ b/src/caretogether-pwa/src/V1Cases/Arrangements/ArrangementPlannedDuration.tsx
@@ -1,4 +1,5 @@
-import { Box, Grid, Stack } from '@mui/material';
+import Grid from '@mui/material/GridLegacy';
+import { Box, Stack } from '@mui/material';
 import { useFamilyIdPermissions } from '../../Model/SessionModel';
 import {
   Arrangement,
diff --git a/src/caretogether-pwa/src/V1Cases/Arrangements/ArrangementsSection/ArrangementsSection.tsx b/src/caretogether-pwa/src/V1Cases/Arrangements/ArrangementsSection/ArrangementsSection.tsx
index 413ddde23..9140fb089 100644
--- a/src/caretogether-pwa/src/V1Cases/Arrangements/ArrangementsSection/ArrangementsSection.tsx
+++ b/src/caretogether-pwa/src/V1Cases/Arrangements/ArrangementsSection/ArrangementsSection.tsx
@@ -1,6 +1,7 @@
 import { Masonry } from '@mui/lab';
 import { AddCircle as AddCircleIcon } from '@mui/icons-material';
-import { Grid, Typography, Button, useTheme } from '@mui/material';
+import Grid from '@mui/material/GridLegacy';
+import { Typography, Button, useTheme } from '@mui/material';
 import { Box, useMediaQuery } from '@mui/system';
 import {
   ArrangementPolicy,
diff --git a/src/caretogether-pwa/src/V1Cases/Arrangements/AssignArrangementFunctionDialog.tsx b/src/caretogether-pwa/src/V1Cases/Arrangements/AssignArrangementFunctionDialog.tsx
index 4b16905dd..bfe9322fc 100644
--- a/src/caretogether-pwa/src/V1Cases/Arrangements/AssignArrangementFunctionDialog.tsx
+++ b/src/caretogether-pwa/src/V1Cases/Arrangements/AssignArrangementFunctionDialog.tsx
@@ -1,4 +1,6 @@
-import { useState } from 'react';
+import Grid from '@mui/material/GridLegacy';
+import {
+  useState } from 'react';
 import {
   Autocomplete,
   Button,
@@ -9,7 +11,6 @@ import {
   FormControl,
   FormControlLabel,
   FormLabel,
-  Grid,
   Radio,
   RadioGroup,
   TextField,
diff --git a/src/caretogether-pwa/src/V1Cases/Arrangements/CancelArrangementDialog.tsx b/src/caretogether-pwa/src/V1Cases/Arrangements/CancelArrangementDialog.tsx
index 3e0534305..b09c34142 100644
--- a/src/caretogether-pwa/src/V1Cases/Arrangements/CancelArrangementDialog.tsx
+++ b/src/caretogether-pwa/src/V1Cases/Arrangements/CancelArrangementDialog.tsx
@@ -1,4 +1,4 @@
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/GridLegacy';
 import { useState } from 'react';
 import { useParams } from 'react-router';
 import { Arrangement, Person } from '../../GeneratedClient';
diff --git a/src/caretogether-pwa/src/V1Cases/Arrangements/CreateArrangementDialog.tsx b/src/caretogether-pwa/src/V1Cases/Arrangements/CreateArrangementDialog.tsx
index 1b13a8bf1..55d4fb463 100644
--- a/src/caretogether-pwa/src/V1Cases/Arrangements/CreateArrangementDialog.tsx
+++ b/src/caretogether-pwa/src/V1Cases/Arrangements/CreateArrangementDialog.tsx
@@ -1,4 +1,6 @@
-import { useState } from 'react';
+import Grid from '@mui/material/GridLegacy';
+import {
+  useState } from 'react';
 import {
   Button,
   Dialog,
@@ -8,7 +10,6 @@ import {
   FormControl,
   FormControlLabel,
   FormLabel,
-  Grid,
   InputLabel,
   MenuItem,
   Radio,
diff --git a/src/caretogether-pwa/src/V1Cases/Arrangements/EditDateDialog.tsx b/src/caretogether-pwa/src/V1Cases/Arrangements/EditDateDialog.tsx
index 7a041f0ad..08846e14a 100644
--- a/src/caretogether-pwa/src/V1Cases/Arrangements/EditDateDialog.tsx
+++ b/src/caretogether-pwa/src/V1Cases/Arrangements/EditDateDialog.tsx
@@ -1,4 +1,4 @@
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/GridLegacy';
 import { ValidateDatePicker } from '../../Generic/Forms/ValidateDatePicker';
 import { useState } from 'react';
 import { UpdateDialog } from '../../Generic/UpdateDialog';
diff --git a/src/caretogether-pwa/src/V1Cases/Arrangements/EndArrangementDialog.tsx b/src/caretogether-pwa/src/V1Cases/Arrangements/EndArrangementDialog.tsx
index 717b0b225..8a4d4a7a8 100644
--- a/src/caretogether-pwa/src/V1Cases/Arrangements/EndArrangementDialog.tsx
+++ b/src/caretogether-pwa/src/V1Cases/Arrangements/EndArrangementDialog.tsx
@@ -1,4 +1,4 @@
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/GridLegacy';
 import { ValidateDatePicker } from '../../Generic/Forms/ValidateDatePicker';
 import { useState } from 'react';
 import { useParams } from 'react-router';
diff --git a/src/caretogether-pwa/src/V1Cases/Arrangements/ReopenArrangementDialog.tsx b/src/caretogether-pwa/src/V1Cases/Arrangements/ReopenArrangementDialog.tsx
index fa94a3b99..f11ffe8da 100644
--- a/src/caretogether-pwa/src/V1Cases/Arrangements/ReopenArrangementDialog.tsx
+++ b/src/caretogether-pwa/src/V1Cases/Arrangements/ReopenArrangementDialog.tsx
@@ -1,4 +1,5 @@
-import { Grid, TextField } from '@mui/material';
+import Grid from '@mui/material/GridLegacy';
+import { TextField } from '@mui/material';
 import { useState } from 'react';
 import { useParams } from 'react-router';
 import { Arrangement, Person } from '../../GeneratedClient';
diff --git a/src/caretogether-pwa/src/V1Cases/Arrangements/StartArrangementDialog.tsx b/src/caretogether-pwa/src/V1Cases/Arrangements/StartArrangementDialog.tsx
index e0c232370..bb83f7cff 100644
--- a/src/caretogether-pwa/src/V1Cases/Arrangements/StartArrangementDialog.tsx
+++ b/src/caretogether-pwa/src/V1Cases/Arrangements/StartArrangementDialog.tsx
@@ -1,4 +1,4 @@
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/GridLegacy';
 import { ValidateDatePicker } from '../../Generic/Forms/ValidateDatePicker';
 import { useState } from 'react';
 import { useParams } from 'react-router';
diff --git a/src/caretogether-pwa/src/V1Cases/Arrangements/TrackChildLocationDialog.tsx b/src/caretogether-pwa/src/V1Cases/Arrangements/TrackChildLocationDialog.tsx
index 9595a1803..84d9cc19e 100644
--- a/src/caretogether-pwa/src/V1Cases/Arrangements/TrackChildLocationDialog.tsx
+++ b/src/caretogether-pwa/src/V1Cases/Arrangements/TrackChildLocationDialog.tsx
@@ -1,4 +1,6 @@
-import { useState } from 'react';
+import Grid from '@mui/material/GridLegacy';
+import {
+  useState } from 'react';
 import {
   Button,
   Dialog,
@@ -9,7 +11,6 @@ import {
   FormControl,
   FormControlLabel,
   FormLabel,
-  Grid,
   IconButton,
   InputLabel,
   MenuItem,
diff --git a/src/caretogether-pwa/src/V1Cases/CloseV1CaseDialog.tsx b/src/caretogether-pwa/src/V1Cases/CloseV1CaseDialog.tsx
index c17f006b7..26fe13267 100644
--- a/src/caretogether-pwa/src/V1Cases/CloseV1CaseDialog.tsx
+++ b/src/caretogether-pwa/src/V1Cases/CloseV1CaseDialog.tsx
@@ -1,9 +1,10 @@
-import { useState } from 'react';
+import Grid from '@mui/material/GridLegacy';
+import {
+  useState } from 'react';
 import {
   FormControl,
   FormControlLabel,
   FormLabel,
-  Grid,
   Radio,
   RadioGroup,
 } from '@mui/material';
diff --git a/src/caretogether-pwa/src/V1Cases/CreatePartneringFamilyDrawer.tsx b/src/caretogether-pwa/src/V1Cases/CreatePartneringFamilyDrawer.tsx
index 1f9a99e40..02bacdb75 100644
--- a/src/caretogether-pwa/src/V1Cases/CreatePartneringFamilyDrawer.tsx
+++ b/src/caretogether-pwa/src/V1Cases/CreatePartneringFamilyDrawer.tsx
@@ -1,4 +1,6 @@
-import { useState } from 'react';
+import Grid from '@mui/material/GridLegacy';
+import {
+  useState } from 'react';
 import {
   Button,
   Checkbox,
@@ -7,7 +9,6 @@ import {
   FormControlLabel,
   FormGroup,
   FormLabel,
-  Grid,
   InputAdornment,
   InputLabel,
   MenuItem,
@@ -135,11 +136,13 @@ export function CreatePartneringFamilyDrawer({
       anchor="right"
       open
       onClose={() => onClose()}
-      PaperProps={{
-        sx: {
-          width: 600,
-          p: 3,
-          top: 45,
+      slotProps={{
+        paper: {
+          sx: {
+            width: 600,
+            p: 3,
+            top: 45,
+          },
         },
       }}
     >
@@ -313,12 +316,14 @@ export function CreatePartneringFamilyDrawer({
             fullWidth
             minRows={2}
             size="small"
-            InputProps={{
-              startAdornment: (
-                <InputAdornment position="start">
-                  <WarningIcon />
-                </InputAdornment>
-              ),
+            slotProps={{
+              input: {
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <WarningIcon />
+                  </InputAdornment>
+                ),
+              },
             }}
             value={concerns ?? ''}
             onChange={(e) => setFields({ ...fields, concerns: e.target.value })}
diff --git a/src/caretogether-pwa/src/V1Cases/OpenNewV1CaseDialog.tsx b/src/caretogether-pwa/src/V1Cases/OpenNewV1CaseDialog.tsx
index 682733ada..21fd04b49 100644
--- a/src/caretogether-pwa/src/V1Cases/OpenNewV1CaseDialog.tsx
+++ b/src/caretogether-pwa/src/V1Cases/OpenNewV1CaseDialog.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/GridLegacy';
 import { UpdateDialog } from '../Generic/UpdateDialog';
 import { useV1CasesModel } from '../Model/V1CasesModel';
 import { ValidateDatePicker } from '../Generic/Forms/ValidateDatePicker';
diff --git a/src/caretogether-pwa/src/V1Cases/PartneringFamilies.tsx b/src/caretogether-pwa/src/V1Cases/PartneringFamilies.tsx
index 8debf9512..5bc334ae0 100644
--- a/src/caretogether-pwa/src/V1Cases/PartneringFamilies.tsx
+++ b/src/caretogether-pwa/src/V1Cases/PartneringFamilies.tsx
@@ -1,7 +1,7 @@
+import Grid from '@mui/material/GridLegacy';
 import {
   Button,
   FormControl,
-  Grid,
   InputBase,
   InputLabel,
   MenuItem,
diff --git a/src/caretogether-pwa/src/V1Cases/PartneringFamilies/PartneringFamilyCustomFieldFiltersSidePanel.tsx b/src/caretogether-pwa/src/V1Cases/PartneringFamilies/PartneringFamilyCustomFieldFiltersSidePanel.tsx
index 71d05f19a..f6728e367 100644
--- a/src/caretogether-pwa/src/V1Cases/PartneringFamilies/PartneringFamilyCustomFieldFiltersSidePanel.tsx
+++ b/src/caretogether-pwa/src/V1Cases/PartneringFamilies/PartneringFamilyCustomFieldFiltersSidePanel.tsx
@@ -1,4 +1,5 @@
-import { Button, Grid, Typography } from '@mui/material';
+import Grid from '@mui/material/GridLegacy';
+import { Button, Typography } from '@mui/material';
 import { CustomField } from '../../GeneratedClient';
 import { CustomFieldsFilter } from '../../Generic/CustomFieldsFilter/CustomFieldsFilter';
 import {
diff --git a/src/caretogether-pwa/src/V1Cases/PartneringFamilies/PartneringFamilyTableItem.tsx b/src/caretogether-pwa/src/V1Cases/PartneringFamilies/PartneringFamilyTableItem.tsx
index a547e352c..37acd00ad 100644
--- a/src/caretogether-pwa/src/V1Cases/PartneringFamilies/PartneringFamilyTableItem.tsx
+++ b/src/caretogether-pwa/src/V1Cases/PartneringFamilies/PartneringFamilyTableItem.tsx
@@ -1,4 +1,5 @@
-import { Box, Grid, TableCell, TableRow } from '@mui/material';
+import Grid from '@mui/material/GridLegacy';
+import { Box, TableCell, TableRow } from '@mui/material';
 import { format } from 'date-fns';
 import { useState } from 'react';
 import { Phone as PhoneIcon } from '@mui/icons-material';
diff --git a/src/caretogether-pwa/src/V1Referrals/AddNewReferralDrawer.tsx b/src/caretogether-pwa/src/V1Referrals/AddNewReferralDrawer.tsx
index c31c62af8..8d315c83b 100644
--- a/src/caretogether-pwa/src/V1Referrals/AddNewReferralDrawer.tsx
+++ b/src/caretogether-pwa/src/V1Referrals/AddNewReferralDrawer.tsx
@@ -1,4 +1,5 @@
-import { Button, Drawer, Grid, TextField, Typography } from '@mui/material';
+import Grid from '@mui/material/GridLegacy';
+import { Button, Drawer, TextField, Typography } from '@mui/material';
 import { Controller, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useRecoilValue } from 'recoil';
@@ -69,11 +70,13 @@ export function AddNewReferralDrawer({ onClose }: AddNewReferralDrawerProps) {
       anchor="right"
       open
       onClose={onClose}
-      PaperProps={{
-        sx: {
-          width: 500,
-          p: 3,
-          top: 45,
+      slotProps={{
+        paper: {
+          sx: {
+            width: 500,
+            p: 3,
+            top: 45,
+          },
         },
       }}
     >
diff --git a/src/caretogether-pwa/src/V1Referrals/CloseV1ReferralDrawer.tsx b/src/caretogether-pwa/src/V1Referrals/CloseV1ReferralDrawer.tsx
index 8d4d53746..43dc58fff 100644
--- a/src/caretogether-pwa/src/V1Referrals/CloseV1ReferralDrawer.tsx
+++ b/src/caretogether-pwa/src/V1Referrals/CloseV1ReferralDrawer.tsx
@@ -1,11 +1,12 @@
-import { useState } from 'react';
+import Grid from '@mui/material/GridLegacy';
+import {
+  useState } from 'react';
 import {
   Button,
   Drawer,
   FormControl,
   FormControlLabel,
   FormLabel,
-  Grid,
   Radio,
   RadioGroup,
   Typography,
@@ -50,7 +51,7 @@ export function CloseV1ReferralDrawer({
       anchor="right"
       open
       onClose={onClose}
-      PaperProps={{ sx: { width: 500, p: 3, top: 45 } }}
+      slotProps={{ paper: { sx: { width: 500, p: 3, top: 45 } } }}
     >
       <form noValidate>
         <Grid container spacing={2}>
diff --git a/src/caretogether-pwa/src/V1Referrals/EditReferralDrawer.tsx b/src/caretogether-pwa/src/V1Referrals/EditReferralDrawer.tsx
index a8a326618..6ce050b3f 100644
--- a/src/caretogether-pwa/src/V1Referrals/EditReferralDrawer.tsx
+++ b/src/caretogether-pwa/src/V1Referrals/EditReferralDrawer.tsx
@@ -1,4 +1,5 @@
-import { Button, Drawer, Grid, TextField, Typography } from '@mui/material';
+import Grid from '@mui/material/GridLegacy';
+import { Button, Drawer, TextField, Typography } from '@mui/material';
 import { Controller, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useRecoilValue } from 'recoil';
@@ -74,11 +75,13 @@ export function EditReferralDrawer({
       anchor="right"
       open
       onClose={onClose}
-      PaperProps={{
-        sx: {
-          width: 500,
-          p: 3,
-          top: 45,
+      slotProps={{
+        paper: {
+          sx: {
+            width: 500,
+            p: 3,
+            top: 45,
+          },
         },
       }}
     >
diff --git a/src/caretogether-pwa/src/V1Referrals/ReferralCustomFieldsSection.tsx b/src/caretogether-pwa/src/V1Referrals/ReferralCustomFieldsSection.tsx
index 314c94f1b..5a0d7197f 100644
--- a/src/caretogether-pwa/src/V1Referrals/ReferralCustomFieldsSection.tsx
+++ b/src/caretogether-pwa/src/V1Referrals/ReferralCustomFieldsSection.tsx
@@ -1,4 +1,5 @@
-import { Grid, Typography } from '@mui/material';
+import Grid from '@mui/material/GridLegacy';
+import { Typography } from '@mui/material';
 import { Controller, Control, FieldValues, Path } from 'react-hook-form';
 import { CustomField } from '../GeneratedClient';
 import { CustomFieldInput } from '../Generic/CustomFieldInput';
diff --git a/src/caretogether-pwa/src/V1Referrals/ReferralDetailsPage.tsx b/src/caretogether-pwa/src/V1Referrals/ReferralDetailsPage.tsx
index 121cfb56e..dd1676255 100644
--- a/src/caretogether-pwa/src/V1Referrals/ReferralDetailsPage.tsx
+++ b/src/caretogether-pwa/src/V1Referrals/ReferralDetailsPage.tsx
@@ -1,11 +1,13 @@
-import { useMemo, useState } from 'react';
+import Grid from '@mui/material/GridLegacy';
+import {
+  useMemo,
+  useState } from 'react';
 import { useParams } from 'react-router-dom';
 import {
   Box,
   Button,
   CircularProgress,
   Divider,
-  Grid,
   Stack,
   Typography,
   Snackbar,
diff --git a/src/caretogether-pwa/src/V1Referrals/SelectReferralFamilyDrawer.tsx b/src/caretogether-pwa/src/V1Referrals/SelectReferralFamilyDrawer.tsx
index 5ea568a5f..c1a60dba0 100644
--- a/src/caretogether-pwa/src/V1Referrals/SelectReferralFamilyDrawer.tsx
+++ b/src/caretogether-pwa/src/V1Referrals/SelectReferralFamilyDrawer.tsx
@@ -1,9 +1,12 @@
-import { useEffect, useMemo, useState } from 'react';
+import Grid from '@mui/material/GridLegacy';
+import {
+  useEffect,
+  useMemo,
+  useState } from 'react';
 import {
   Autocomplete,
   Button,
   Drawer,
-  Grid,
   TextField,
   Typography,
 } from '@mui/material';
@@ -46,7 +49,7 @@ export function SelectReferralFamilyDrawer({
       anchor="right"
       open={open}
       onClose={onCancel}
-      PaperProps={{ sx: { width: 500, p: 3, top: 45 } }}
+      slotProps={{ paper: { sx: { width: 500, p: 3, top: 45 } } }}
     >
       <form
         onSubmit={(e) => {
diff --git a/src/caretogether-pwa/src/V1Referrals/V1Referrals.tsx b/src/caretogether-pwa/src/V1Referrals/V1Referrals.tsx
index 834d05eb5..848201c44 100644
--- a/src/caretogether-pwa/src/V1Referrals/V1Referrals.tsx
+++ b/src/caretogether-pwa/src/V1Referrals/V1Referrals.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
+import Grid from '@mui/material/GridLegacy';
 import {
-  Grid,
   Table,
   TableBody,
   TableCell,
@@ -289,7 +289,7 @@ function V1ReferralsContent() {
               anchor="right"
               open={openNewReferral}
               onClose={() => setOpenNewReferral(false)}
-              PaperProps={{ sx: { width: 500, p: 3 } }}
+              slotProps={{ paper: { sx: { width: 500, p: 3 } } }}
             >
               <AddNewReferralDrawer onClose={() => setOpenNewReferral(false)} />
             </Drawer>
diff --git a/src/caretogether-pwa/src/Volunteers/BulkSmsSideSheet.tsx b/src/caretogether-pwa/src/Volunteers/BulkSmsSideSheet.tsx
index 908cf5edf..028465dd7 100644
--- a/src/caretogether-pwa/src/Volunteers/BulkSmsSideSheet.tsx
+++ b/src/caretogether-pwa/src/Volunteers/BulkSmsSideSheet.tsx
@@ -111,11 +111,13 @@ export function BulkSmsSideSheet({
       variant="persistent"
       anchor={isMobile ? 'bottom' : 'right'}
       open
-      PaperProps={{
-        sx: {
-          padding: isMobile ? 1 : 2,
-          width: isMobile ? null : 400,
-          height: isMobile ? 500 : null,
+      slotProps={{
+        paper: {
+          sx: {
+            padding: isMobile ? 1 : 2,
+            width: isMobile ? null : 400,
+            height: isMobile ? 500 : null,
+          },
         },
       }}
     >
diff --git a/src/caretogether-pwa/src/Volunteers/CreateVolunteerFamilyDialog.tsx b/src/caretogether-pwa/src/Volunteers/CreateVolunteerFamilyDialog.tsx
index 14afee043..868b0bc0f 100644
--- a/src/caretogether-pwa/src/Volunteers/CreateVolunteerFamilyDialog.tsx
+++ b/src/caretogether-pwa/src/Volunteers/CreateVolunteerFamilyDialog.tsx
@@ -1,4 +1,6 @@
-import { useState } from 'react';
+import Grid from '@mui/material/GridLegacy';
+import {
+  useState } from 'react';
 import {
   Button,
   Checkbox,
@@ -12,7 +14,6 @@ import {
   FormControlLabel,
   FormGroup,
   FormLabel,
-  Grid,
   InputAdornment,
   InputLabel,
   MenuItem,
@@ -410,12 +411,14 @@ export function CreateVolunteerFamilyDialog({
                 minRows={2}
                 maxRows={5}
                 size="small"
-                InputProps={{
-                  startAdornment: (
-                    <InputAdornment position="start">
-                      <WarningIcon />
-                    </InputAdornment>
-                  ),
+                slotProps={{
+                  input: {
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <WarningIcon />
+                      </InputAdornment>
+                    ),
+                  },
                 }}
                 value={concerns == null ? '' : concerns}
                 onChange={(e) =>
diff --git a/src/caretogether-pwa/src/Volunteers/RemoveFamilyRoleDialog.tsx b/src/caretogether-pwa/src/Volunteers/RemoveFamilyRoleDialog.tsx
index 19d41a98d..e2c92fd3d 100644
--- a/src/caretogether-pwa/src/Volunteers/RemoveFamilyRoleDialog.tsx
+++ b/src/caretogether-pwa/src/Volunteers/RemoveFamilyRoleDialog.tsx
@@ -1,9 +1,10 @@
-import { useState } from 'react';
+import Grid from '@mui/material/GridLegacy';
+import {
+  useState } from 'react';
 import {
   FormControl,
   FormControlLabel,
   FormLabel,
-  Grid,
   Radio,
   RadioGroup,
   TextField,
diff --git a/src/caretogether-pwa/src/Volunteers/RemoveIndividualRoleDialog.tsx b/src/caretogether-pwa/src/Volunteers/RemoveIndividualRoleDialog.tsx
index 88d63ac13..9aae97daa 100644
--- a/src/caretogether-pwa/src/Volunteers/RemoveIndividualRoleDialog.tsx
+++ b/src/caretogether-pwa/src/Volunteers/RemoveIndividualRoleDialog.tsx
@@ -1,9 +1,10 @@
-import { useState } from 'react';
+import Grid from '@mui/material/GridLegacy';
+import {
+  useState } from 'react';
 import {
   FormControl,
   FormControlLabel,
   FormLabel,
-  Grid,
   Radio,
   RadioGroup,
   TextField,
diff --git a/src/caretogether-pwa/src/Volunteers/ResetFamilyRoleDialog.tsx b/src/caretogether-pwa/src/Volunteers/ResetFamilyRoleDialog.tsx
index 856556b9a..2df9de150 100644
--- a/src/caretogether-pwa/src/Volunteers/ResetFamilyRoleDialog.tsx
+++ b/src/caretogether-pwa/src/Volunteers/ResetFamilyRoleDialog.tsx
@@ -2,7 +2,7 @@ import { RoleRemovalReason } from '../GeneratedClient';
 import { useVolunteersModel } from '../Model/VolunteersModel';
 import { UpdateDialog } from '../Generic/UpdateDialog';
 import { useState } from 'react';
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/GridLegacy';
 import { ValidateDatePicker } from '../Generic/Forms/ValidateDatePicker';
 
 interface ResetFamilyRoleDialogProps {
diff --git a/src/caretogether-pwa/src/Volunteers/ResetIndividualRoleDialog.tsx b/src/caretogether-pwa/src/Volunteers/ResetIndividualRoleDialog.tsx
index a8f2fdeb3..ba4b8d8c0 100644
--- a/src/caretogether-pwa/src/Volunteers/ResetIndividualRoleDialog.tsx
+++ b/src/caretogether-pwa/src/Volunteers/ResetIndividualRoleDialog.tsx
@@ -1,7 +1,7 @@
 import { Person, RoleRemovalReason } from '../GeneratedClient';
 import { useVolunteersModel } from '../Model/VolunteersModel';
 import { UpdateDialog } from '../Generic/UpdateDialog';
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/GridLegacy';
 import { ValidateDatePicker } from '../Generic/Forms/ValidateDatePicker';
 import { useState } from 'react';
 
diff --git a/src/caretogether-pwa/src/Volunteers/VolunteerApprovalTab/VolunteerApproval.tsx b/src/caretogether-pwa/src/Volunteers/VolunteerApprovalTab/VolunteerApproval.tsx
index 82b0cc1a2..dfdf0d5b4 100644
--- a/src/caretogether-pwa/src/Volunteers/VolunteerApprovalTab/VolunteerApproval.tsx
+++ b/src/caretogether-pwa/src/Volunteers/VolunteerApprovalTab/VolunteerApproval.tsx
@@ -1,5 +1,5 @@
+import Grid from '@mui/material/GridLegacy';
 import {
-  Grid,
   Table,
   TableContainer,
   TableBody,
diff --git a/src/caretogether-pwa/src/Volunteers/VolunteerApprovalTab/VolunteerApprovalTableItem.tsx b/src/caretogether-pwa/src/Volunteers/VolunteerApprovalTab/VolunteerApprovalTableItem.tsx
index a4645afc5..aa742a697 100644
--- a/src/caretogether-pwa/src/Volunteers/VolunteerApprovalTab/VolunteerApprovalTableItem.tsx
+++ b/src/caretogether-pwa/src/Volunteers/VolunteerApprovalTab/VolunteerApprovalTableItem.tsx
@@ -1,8 +1,8 @@
+import Grid from '@mui/material/GridLegacy';
 import {
   Box,
   Checkbox,
   Chip,
-  Grid,
   TableCell,
   TableRow,
   Typography,
diff --git a/src/caretogether-pwa/src/Volunteers/VolunteerApprovalTab/VolunteerCustomFieldFiltersSidePanel.tsx b/src/caretogether-pwa/src/Volunteers/VolunteerApprovalTab/VolunteerCustomFieldFiltersSidePanel.tsx
index 7ae8d67f0..17ba109a8 100644
--- a/src/caretogether-pwa/src/Volunteers/VolunteerApprovalTab/VolunteerCustomFieldFiltersSidePanel.tsx
+++ b/src/caretogether-pwa/src/Volunteers/VolunteerApprovalTab/VolunteerCustomFieldFiltersSidePanel.tsx
@@ -1,4 +1,5 @@
-import { Button, Grid, Typography } from '@mui/material';
+import Grid from '@mui/material/GridLegacy';
+import { Button, Typography } from '@mui/material';
 import { CustomField } from '../../GeneratedClient';
 import { CustomFieldsFilter } from '../../Generic/CustomFieldsFilter/CustomFieldsFilter';
 import {
diff --git a/src/caretogether-pwa/src/Volunteers/VolunteerProgressTab/VolunteerProgress.tsx b/src/caretogether-pwa/src/Volunteers/VolunteerProgressTab/VolunteerProgress.tsx
index ed5a0e8cb..2e4e6867c 100644
--- a/src/caretogether-pwa/src/Volunteers/VolunteerProgressTab/VolunteerProgress.tsx
+++ b/src/caretogether-pwa/src/Volunteers/VolunteerProgressTab/VolunteerProgress.tsx
@@ -1,5 +1,5 @@
+import Grid from '@mui/material/GridLegacy';
 import {
-  Grid,
   Table,
   TableContainer,
   TableBody,