From daaa63b763693a6a5e93dd239b35348bc2e97d26 Mon Sep 17 00:00:00 2001
From: Forfold <nathaniel.cook@target.com>
Date: Mon, 20 Apr 2026 08:03:21 -0700
Subject: [PATCH 01/26] migrate mui from v5 to v6

---
 bun.lock                                      | 49 +++++--------
 package.json                                  | 14 ++--
 web/src/app/admin/AdminSection.tsx            |  2 +-
 .../admin/switchover/AdminSWOStatusCard.tsx   | 10 +--
 .../StepContent/CreateAlertServiceSelect.tsx  |  6 +-
 web/src/app/details/DetailsPage.tsx           |  7 +-
 web/src/app/lists/FlatList.tsx                |  6 +-
 web/src/app/lists/FlatListItem.tsx            | 17 ++---
 web/src/app/lists/PaginatedList.tsx           | 69 ++++++++++++-------
 web/src/app/main/NavBarLink.tsx               | 10 +--
 10 files changed, 96 insertions(+), 94 deletions(-)

diff --git a/bun.lock b/bun.lock
index 87abf85f30..fdafbdcdff 100644
--- a/bun.lock
+++ b/bun.lock
@@ -1,6 +1,5 @@
 {
   "lockfileVersion": 1,
-  "configVersion": 0,
   "workspaces": {
     "": {
       "devDependencies": {
@@ -24,11 +23,10 @@
         "@lezer/highlight": "1.2.1",
         "@lezer/lr": "1.4.2",
         "@material/material-color-utilities": "0.3.0",
-        "@mui/icons-material": "5.16.7",
-        "@mui/lab": "5.0.0-alpha.170",
-        "@mui/material": "5.16.7",
-        "@mui/styles": "5.16.7",
-        "@mui/system": "5.16.7",
+        "@mui/icons-material": "6.5.0",
+        "@mui/material": "6.5.0",
+        "@mui/styles": "6.5.0",
+        "@mui/system": "6.5.0",
         "@mui/x-data-grid": "6.20.4",
         "@playwright/test": "1.55.1",
         "@storybook/addon-links": "9.1.8",
@@ -127,6 +125,9 @@
       },
     },
   },
+  "overrides": {
+    "react-is": "^18.3.1",
+  },
   "packages": {
     "@0no-co/graphql.web": ["@0no-co/graphql.web@1.2.0", "", { "peerDependencies": { "graphql": "^14.0.0 || ^15.0.0 || ^16.0.0" }, "optionalPeers": ["graphql"] }, "sha512-/1iHy9TTr63gE1YcR5idjx8UREz1s0kFhydf3bBLCXyqjhkIc6igAzTOx3zPifCwFR87tsh/4Pa9cNts6d2otw=="],
 
@@ -492,27 +493,23 @@
 
     "@mswjs/interceptors": ["@mswjs/interceptors@0.39.6", "", { "dependencies": { "@open-draft/deferred-promise": "^2.2.0", "@open-draft/logger": "^0.3.0", "@open-draft/until": "^2.0.0", "is-node-process": "^1.2.0", "outvariant": "^1.4.3", "strict-event-emitter": "^0.5.1" } }, "sha512-bndDP83naYYkfayr/qhBHMhk0YGwS1iv6vaEGcr0SQbO0IZtbOPqjKjds/WcG+bJA+1T5vCx6kprKOzn5Bg+Vw=="],
 
-    "@mui/base": ["@mui/base@5.0.0-beta.40", "", { "dependencies": { "@babel/runtime": "^7.23.9", "@floating-ui/react-dom": "^2.0.8", "@mui/types": "^7.2.14", "@mui/utils": "^5.15.14", "@popperjs/core": "^2.11.8", "clsx": "^2.1.0", "prop-types": "^15.8.1" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0", "react": "^17.0.0 || ^18.0.0", "react-dom": "^17.0.0 || ^18.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ=="],
-
-    "@mui/core-downloads-tracker": ["@mui/core-downloads-tracker@5.18.0", "", {}, "sha512-jbhwoQ1AY200PSSOrNXmrFCaSDSJWP7qk6urkTmIirvRXDROkqe+QwcLlUiw/PrREwsIF/vm3/dAXvjlMHF0RA=="],
-
-    "@mui/icons-material": ["@mui/icons-material@5.16.7", "", { "dependencies": { "@babel/runtime": "^7.23.9" }, "peerDependencies": { "@mui/material": "^5.0.0", "@types/react": "^17.0.0 || ^18.0.0", "react": "^17.0.0 || ^18.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-UrGwDJCXEszbDI7yV047BYU5A28eGJ79keTCP4cc74WyncuVrnurlmIRxaHL8YK+LI1Kzq+/JM52IAkNnv4u+Q=="],
+    "@mui/core-downloads-tracker": ["@mui/core-downloads-tracker@6.5.0", "", {}, "sha512-LGb8t8i6M2ZtS3Drn3GbTI1DVhDY6FJ9crEey2lZ0aN2EMZo8IZBZj9wRf4vqbZHaWjsYgtbOnJw5V8UWbmK2Q=="],
 
-    "@mui/lab": ["@mui/lab@5.0.0-alpha.170", "", { "dependencies": { "@babel/runtime": "^7.23.9", "@mui/base": "5.0.0-beta.40", "@mui/system": "^5.15.15", "@mui/types": "^7.2.14", "@mui/utils": "^5.15.14", "clsx": "^2.1.0", "prop-types": "^15.8.1" }, "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", "@mui/material": ">=5.15.0", "@types/react": "^17.0.0 || ^18.0.0", "react": "^17.0.0 || ^18.0.0", "react-dom": "^17.0.0 || ^18.0.0" }, "optionalPeers": ["@emotion/react", "@emotion/styled", "@types/react"] }, "sha512-0bDVECGmrNjd3+bLdcLiwYZ0O4HP5j5WSQm5DV6iA/Z9kr8O6AnvZ1bv9ImQbbX7Gj3pX4o43EKwCutj3EQxQg=="],
+    "@mui/icons-material": ["@mui/icons-material@6.5.0", "", { "dependencies": { "@babel/runtime": "^7.26.0" }, "peerDependencies": { "@mui/material": "^6.5.0", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-VPuPqXqbBPlcVSA0BmnoE4knW4/xG6Thazo8vCLWkOKusko6DtwFV6B665MMWJ9j0KFohTIf3yx2zYtYacvG1g=="],
 
-    "@mui/material": ["@mui/material@5.16.7", "", { "dependencies": { "@babel/runtime": "^7.23.9", "@mui/core-downloads-tracker": "^5.16.7", "@mui/system": "^5.16.7", "@mui/types": "^7.2.15", "@mui/utils": "^5.16.6", "@popperjs/core": "^2.11.8", "@types/react-transition-group": "^4.4.10", "clsx": "^2.1.0", "csstype": "^3.1.3", "prop-types": "^15.8.1", "react-is": "^18.3.1", "react-transition-group": "^4.4.5" }, "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", "@types/react": "^17.0.0 || ^18.0.0", "react": "^17.0.0 || ^18.0.0", "react-dom": "^17.0.0 || ^18.0.0" }, "optionalPeers": ["@emotion/react", "@emotion/styled", "@types/react"] }, "sha512-cwwVQxBhK60OIOqZOVLFt55t01zmarKJiJUWbk0+8s/Ix5IaUzAShqlJchxsIQ4mSrWqgcKCCXKtIlG5H+/Jmg=="],
+    "@mui/material": ["@mui/material@6.5.0", "", { "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", "@popperjs/core": "^2.11.8", "@types/react-transition-group": "^4.4.12", "clsx": "^2.1.1", "csstype": "^3.1.3", "prop-types": "^15.8.1", "react-is": "^19.0.0", "react-transition-group": "^4.4.5" }, "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", "@mui/material-pigment-css": "^6.5.0", "@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" }, "optionalPeers": ["@emotion/react", "@emotion/styled", "@mui/material-pigment-css", "@types/react"] }, "sha512-yjvtXoFcrPLGtgKRxFaH6OQPtcLPhkloC0BML6rBG5UeldR0nPULR/2E2BfXdo5JNV7j7lOzrrLX2Qf/iSidow=="],
 
-    "@mui/private-theming": ["@mui/private-theming@5.17.1", "", { "dependencies": { "@babel/runtime": "^7.23.9", "@mui/utils": "^5.17.1", "prop-types": "^15.8.1" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-XMxU0NTYcKqdsG8LRmSoxERPXwMbp16sIXPcLVgLGII/bVNagX0xaheWAwFv8+zDK7tI3ajllkuD3GZZE++ICQ=="],
+    "@mui/private-theming": ["@mui/private-theming@6.4.9", "", { "dependencies": { "@babel/runtime": "^7.26.0", "@mui/utils": "^6.4.9", "prop-types": "^15.8.1" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-LktcVmI5X17/Q5SkwjCcdOLBzt1hXuc14jYa7NPShog0GBDCDvKtcnP0V7a2s6EiVRlv7BzbWEJzH6+l/zaCxw=="],
 
-    "@mui/styled-engine": ["@mui/styled-engine@5.18.0", "", { "dependencies": { "@babel/runtime": "^7.23.9", "@emotion/cache": "^11.13.5", "@emotion/serialize": "^1.3.3", "csstype": "^3.1.3", "prop-types": "^15.8.1" }, "peerDependencies": { "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/react", "@emotion/styled"] }, "sha512-BN/vKV/O6uaQh2z5rXV+MBlVrEkwoS/TK75rFQ2mjxA7+NBo8qtTAOA4UaM0XeJfn7kh2wZ+xQw2HAx0u+TiBg=="],
+    "@mui/styled-engine": ["@mui/styled-engine@6.5.0", "", { "dependencies": { "@babel/runtime": "^7.26.0", "@emotion/cache": "^11.13.5", "@emotion/serialize": "^1.3.3", "@emotion/sheet": "^1.4.0", "csstype": "^3.1.3", "prop-types": "^15.8.1" }, "peerDependencies": { "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/react", "@emotion/styled"] }, "sha512-8woC2zAqF4qUDSPIBZ8v3sakj+WgweolpyM/FXf8jAx6FMls+IE4Y8VDZc+zS805J7PRz31vz73n2SovKGaYgw=="],
 
-    "@mui/styles": ["@mui/styles@5.16.7", "", { "dependencies": { "@babel/runtime": "^7.23.9", "@emotion/hash": "^0.9.1", "@mui/private-theming": "^5.16.6", "@mui/types": "^7.2.15", "@mui/utils": "^5.16.6", "clsx": "^2.1.0", "csstype": "^3.1.3", "hoist-non-react-statics": "^3.3.2", "jss": "^10.10.0", "jss-plugin-camel-case": "^10.10.0", "jss-plugin-default-unit": "^10.10.0", "jss-plugin-global": "^10.10.0", "jss-plugin-nested": "^10.10.0", "jss-plugin-props-sort": "^10.10.0", "jss-plugin-rule-value-function": "^10.10.0", "jss-plugin-vendor-prefixer": "^10.10.0", "prop-types": "^15.8.1" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0", "react": "^17.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-FfXhHP/2MlqH+vLs2tIHMeCChmqSRgkOALVNLKkPrDsvtoq5J8OraOutCn1scpvRjr9mO8ZhW6jKx2t/vUDxtQ=="],
+    "@mui/styles": ["@mui/styles@6.5.0", "", { "dependencies": { "@babel/runtime": "^7.26.0", "@emotion/hash": "^0.9.2", "@mui/private-theming": "^6.4.9", "@mui/types": "~7.2.24", "@mui/utils": "^6.4.9", "clsx": "^2.1.1", "csstype": "^3.1.3", "hoist-non-react-statics": "^3.3.2", "jss": "^10.10.0", "jss-plugin-camel-case": "^10.10.0", "jss-plugin-default-unit": "^10.10.0", "jss-plugin-global": "^10.10.0", "jss-plugin-nested": "^10.10.0", "jss-plugin-props-sort": "^10.10.0", "jss-plugin-rule-value-function": "^10.10.0", "jss-plugin-vendor-prefixer": "^10.10.0", "prop-types": "^15.8.1" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-DeE/S/l6adnMpKfgx6l7UaQwYuf+gD4FCp6En3Vdg2Er+CTArj4DcHNFVzb8HZ2nNqACwmSm16/P08m1vAxv2w=="],
 
-    "@mui/system": ["@mui/system@5.16.7", "", { "dependencies": { "@babel/runtime": "^7.23.9", "@mui/private-theming": "^5.16.6", "@mui/styled-engine": "^5.16.6", "@mui/types": "^7.2.15", "@mui/utils": "^5.16.6", "clsx": "^2.1.0", "csstype": "^3.1.3", "prop-types": "^15.8.1" }, "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", "@types/react": "^17.0.0 || ^18.0.0", "react": "^17.0.0 || ^18.0.0" }, "optionalPeers": ["@emotion/react", "@emotion/styled", "@types/react"] }, "sha512-Jncvs/r/d/itkxh7O7opOunTqbbSSzMTHzZkNLM+FjAOg+cYAZHrPDlYe1ZGKUYORwwb2XexlWnpZp0kZ4AHuA=="],
+    "@mui/system": ["@mui/system@6.5.0", "", { "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", "clsx": "^2.1.1", "csstype": "^3.1.3", "prop-types": "^15.8.1" }, "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/react", "@emotion/styled", "@types/react"] }, "sha512-XcbBYxDS+h/lgsoGe78ExXFZXtuIlSBpn/KsZq8PtZcIkUNJInkuDqcLd2rVBQrDC1u+rvVovdaWPf2FHKJf3w=="],
 
-    "@mui/types": ["@mui/types@7.4.6", "", { "dependencies": { "@babel/runtime": "^7.28.3" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-NVBbIw+4CDMMppNamVxyTccNv0WxtDb7motWDlMeSC8Oy95saj1TIZMGynPpFLePt3yOD8TskzumeqORCgRGWw=="],
+    "@mui/types": ["@mui/types@7.2.24", "", { "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-3c8tRt/CbWZ+pEg7QpSwbdxOk36EfmhbKf6AGZsD1EcLDLTSZoxxJ86FVtcjxvjuhdyBiWKSTGZFaXCnidO2kw=="],
 
-    "@mui/utils": ["@mui/utils@5.17.1", "", { "dependencies": { "@babel/runtime": "^7.23.9", "@mui/types": "~7.2.15", "@types/prop-types": "^15.7.12", "clsx": "^2.1.1", "prop-types": "^15.8.1", "react-is": "^19.0.0" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-jEZ8FTqInt2WzxDV8bhImWBqeQRD99c/id/fq83H0ER9tFl+sfZlaAoCdznGvbSQQ9ividMxqSV2c7cC1vBcQg=="],
+    "@mui/utils": ["@mui/utils@6.4.9", "", { "dependencies": { "@babel/runtime": "^7.26.0", "@mui/types": "~7.2.24", "@types/prop-types": "^15.7.14", "clsx": "^2.1.1", "prop-types": "^15.8.1", "react-is": "^19.0.0" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-Y12Q9hbK9g+ZY0T3Rxrx9m2m10gaphDuUMgWxyV5kNJevVxXYCLclYUCC9vXaIk1/NdNDTcW2Yfr2OGvNFNmHg=="],
 
     "@mui/x-data-grid": ["@mui/x-data-grid@6.20.4", "", { "dependencies": { "@babel/runtime": "^7.23.2", "@mui/utils": "^5.14.16", "clsx": "^2.0.0", "prop-types": "^15.8.1", "reselect": "^4.1.8" }, "peerDependencies": { "@mui/material": "^5.4.1", "@mui/system": "^5.4.1", "react": "^17.0.0 || ^18.0.0", "react-dom": "^17.0.0 || ^18.0.0" } }, "sha512-I0JhinVV4e25hD2dB+R6biPBtpGeFrXf8RwlMPQbr9gUggPmPmNtWKo8Kk2PtBBMlGtdMAgHWe7PqhmucUxU1w=="],
 
@@ -2970,21 +2967,15 @@
 
     "@joshwooding/vite-plugin-react-docgen-typescript/glob": ["glob@10.4.5", "", { "dependencies": { "foreground-child": "^3.1.0", "jackspeak": "^3.1.2", "minimatch": "^9.0.4", "minipass": "^7.1.2", "package-json-from-dist": "^1.0.0", "path-scurry": "^1.11.1" }, "bin": { "glob": "dist/esm/bin.mjs" } }, "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg=="],
 
-    "@mui/base/clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
-
-    "@mui/lab/clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
-
     "@mui/material/clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
 
     "@mui/styles/clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
 
     "@mui/system/clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
 
-    "@mui/utils/@mui/types": ["@mui/types@7.2.24", "", { "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-3c8tRt/CbWZ+pEg7QpSwbdxOk36EfmhbKf6AGZsD1EcLDLTSZoxxJ86FVtcjxvjuhdyBiWKSTGZFaXCnidO2kw=="],
-
     "@mui/utils/clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
 
-    "@mui/utils/react-is": ["react-is@19.1.1", "", {}, "sha512-tr41fA15Vn8p4X9ntI+yCyeGSf1TlYaY5vlTZfQmeLBrFo3psOPX6HhTDnFNL9uj3EhP0KAQ80cugCl4b4BERA=="],
+    "@mui/x-data-grid/@mui/utils": ["@mui/utils@5.17.1", "", { "dependencies": { "@babel/runtime": "^7.23.9", "@mui/types": "~7.2.15", "@types/prop-types": "^15.7.12", "clsx": "^2.1.1", "prop-types": "^15.8.1", "react-is": "^19.0.0" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-jEZ8FTqInt2WzxDV8bhImWBqeQRD99c/id/fq83H0ER9tFl+sfZlaAoCdznGvbSQQ9ividMxqSV2c7cC1vBcQg=="],
 
     "@mui/x-data-grid/clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
 
@@ -3134,8 +3125,6 @@
 
     "hasha/type-fest": ["type-fest@0.8.1", "", {}, "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA=="],
 
-    "hoist-non-react-statics/react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
-
     "htmlparser2/entities": ["entities@1.1.2", "", {}, "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="],
 
     "import-fresh/resolve-from": ["resolve-from@4.0.0", "", {}, "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="],
@@ -3268,8 +3257,6 @@
 
     "pretty-format/@jest/schemas": ["@jest/schemas@30.0.5", "", { "dependencies": { "@sinclair/typebox": "^0.34.0" } }, "sha512-DmdYgtezMkh3cpU8/1uyXakv3tJRcmcXxBOcO0tbaozPwpmh4YMsnWrQm9ZmZMfa5ocbxzbFk6O4bDPEc/iAnA=="],
 
-    "prop-types/react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
-
     "rc/ini": ["ini@1.3.8", "", {}, "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="],
 
     "rc/strip-json-comments": ["strip-json-comments@2.0.1", "", {}, "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ=="],
@@ -3458,8 +3445,6 @@
 
     "@storybook/test-runner/jest/jest-cli": ["jest-cli@29.7.0", "", { "dependencies": { "@jest/core": "^29.7.0", "@jest/test-result": "^29.7.0", "@jest/types": "^29.6.3", "chalk": "^4.0.0", "create-jest": "^29.7.0", "exit": "^0.1.2", "import-local": "^3.0.2", "jest-config": "^29.7.0", "jest-util": "^29.7.0", "jest-validate": "^29.7.0", "yargs": "^17.3.1" }, "peerDependencies": { "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0" }, "optionalPeers": ["node-notifier"], "bin": { "jest": "bin/jest.js" } }, "sha512-OVVobw2IubN/GSYsxETi+gOe7Ka59EFMR/twOU3Jb2GnKKeMGJB5SGUUrEz3SFVmJASUdZUzy83sLNNQ2gZslg=="],
 
-    "@testing-library/dom/pretty-format/react-is": ["react-is@17.0.2", "", {}, "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="],
-
     "@types/glob/glob/minimatch": ["minimatch@10.0.3", "", { "dependencies": { "@isaacs/brace-expansion": "^5.0.0" } }, "sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw=="],
 
     "@typescript-eslint/typescript-estree/minimatch/brace-expansion": ["brace-expansion@2.0.2", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ=="],
diff --git a/package.json b/package.json
index cd5a4af150..1a1d80318e 100644
--- a/package.json
+++ b/package.json
@@ -52,11 +52,10 @@
     "@lezer/highlight": "1.2.1",
     "@lezer/lr": "1.4.2",
     "@material/material-color-utilities": "0.3.0",
-    "@mui/icons-material": "5.16.7",
-    "@mui/lab": "5.0.0-alpha.170",
-    "@mui/material": "5.16.7",
-    "@mui/styles": "5.16.7",
-    "@mui/system": "5.16.7",
+    "@mui/icons-material": "6.5.0",
+    "@mui/material": "6.5.0",
+    "@mui/styles": "6.5.0",
+    "@mui/system": "6.5.0",
     "@mui/x-data-grid": "6.20.4",
     "@playwright/test": "1.55.1",
     "@storybook/addon-links": "9.1.8",
@@ -153,7 +152,10 @@
     "wonka": "6.3.5",
     "wouter": "3.7.1"
   },
+  "overrides": {
+    "react-is": "^18.3.1"
+  },
   "msw": {
     "workerDirectory": ".storybook/static"
   }
-}
+}
\ No newline at end of file
diff --git a/web/src/app/admin/AdminSection.tsx b/web/src/app/admin/AdminSection.tsx
index f0c9bab71d..12a676ee03 100644
--- a/web/src/app/admin/AdminSection.tsx
+++ b/web/src/app/admin/AdminSection.tsx
@@ -85,7 +85,7 @@ export default function AdminSection(
               key={f.id}
               className={classes.listItem}
               divider={idx !== fields.length - 1}
-              selected={_.has(value, f.id)}
+              sx={_.has(value, f.id) ? { bgcolor: 'action.selected' } : {}}
             >
               <ListItemText
                 className={classes.listItemText}
diff --git a/web/src/app/admin/switchover/AdminSWOStatusCard.tsx b/web/src/app/admin/switchover/AdminSWOStatusCard.tsx
index 035f8baacf..21ee5afa14 100644
--- a/web/src/app/admin/switchover/AdminSWOStatusCard.tsx
+++ b/web/src/app/admin/switchover/AdminSWOStatusCard.tsx
@@ -12,7 +12,7 @@ import ErrorIcon from 'mdi-material-ui/DatabaseAlert'
 import IdleIcon from 'mdi-material-ui/DatabaseSettings'
 import InProgressIcon from 'mdi-material-ui/DatabaseEdit'
 import { SWOStatus } from '../../../schema'
-import LoadingButton from '@mui/lab/LoadingButton'
+import Button from '@mui/material/Button'
 import { toTitle } from './util'
 import { AdminSwitchoverGuideButton } from './AdminSwitchoverGuide'
 
@@ -90,7 +90,7 @@ export function AdminSWOStatusCard(
           orientation={theme.breakpoints.up('md') ? 'vertical' : 'horizontal'}
           sx={{ width: '100%', pb: '16px', pt: '16px' }}
         >
-          <LoadingButton
+          <Button
             startIcon={<ResetIcon />}
             // disabled={mutationStatus.fetching}
             variant='outlined'
@@ -103,8 +103,8 @@ export function AdminSWOStatusCard(
             }}
           >
             {state === 'resetting' ? 'Resetting...' : 'Reset'}
-          </LoadingButton>
-          <LoadingButton
+          </Button>
+          <Button
             startIcon={state !== 'idle' ? <NoExecuteIcon /> : <ExecuteIcon />}
             disabled={state !== 'idle'}
             variant='outlined'
@@ -116,7 +116,7 @@ export function AdminSWOStatusCard(
             }}
           >
             {isExec ? 'Executing...' : 'Execute'}
-          </LoadingButton>
+          </Button>
         </ButtonGroup>
         <AdminSwitchoverGuideButton />
       </CardContent>
diff --git a/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertServiceSelect.tsx b/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertServiceSelect.tsx
index 21bfb89a60..376127069c 100644
--- a/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertServiceSelect.tsx
+++ b/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertServiceSelect.tsx
@@ -5,6 +5,7 @@ import {
   InputAdornment,
   List,
   ListItem,
+  ListItemButton,
   ListItemText,
   ListItemIcon,
   Paper,
@@ -234,8 +235,7 @@ export function CreateAlertServiceSelect(
               </ListItem>
             )}
             {searchResults.map((service: Service) => (
-              <ListItem
-                button
+              <ListItemButton
                 data-cy='service-select-item'
                 key={service.id}
                 disabled={value.length >= CREATE_ALERT_LIMIT}
@@ -252,7 +252,7 @@ export function CreateAlertServiceSelect(
                     <FavoriteIcon />
                   </ListItemIcon>
                 )}
-              </ListItem>
+              </ListItemButton>
             ))}
 
             {Boolean(placeholderMsg) && (
diff --git a/web/src/app/details/DetailsPage.tsx b/web/src/app/details/DetailsPage.tsx
index ace9f628b0..2ef270b2e6 100644
--- a/web/src/app/details/DetailsPage.tsx
+++ b/web/src/app/details/DetailsPage.tsx
@@ -6,7 +6,7 @@ import Grid from '@mui/material/Grid'
 import Typography from '@mui/material/Typography'
 import { ChevronRight } from '@mui/icons-material'
 import List from '@mui/material/List'
-import ListItem from '@mui/material/ListItem'
+import ListItemButton from '@mui/material/ListItemButton'
 import ListItemText from '@mui/material/ListItemText'
 
 import Notices, { Notice } from './Notices'
@@ -178,7 +178,7 @@ export default function DetailsPage(p: DetailsPageProps): React.JSX.Element {
             />
             <List data-cy='route-links' className={classes.quickLinks} dense>
               {links.map((li, idx) => (
-                <ListItem
+                <ListItemButton
                   key={idx}
                   sx={{
                     borderLeft: `3px solid ${borderColor(
@@ -187,7 +187,6 @@ export default function DetailsPage(p: DetailsPageProps): React.JSX.Element {
                   }}
                   component={LIApplink}
                   to={li.url}
-                  button
                 >
                   <ListItemText
                     primary={li.label}
@@ -197,7 +196,7 @@ export default function DetailsPage(p: DetailsPageProps): React.JSX.Element {
                     secondary={li.subText}
                   />
                   <ChevronRight />
-                </ListItem>
+                </ListItemButton>
               ))}
             </List>
           </Card>
diff --git a/web/src/app/lists/FlatList.tsx b/web/src/app/lists/FlatList.tsx
index fdd74c8c12..e1d0f431a5 100644
--- a/web/src/app/lists/FlatList.tsx
+++ b/web/src/app/lists/FlatList.tsx
@@ -7,7 +7,7 @@ import React, {
 } from 'react'
 import ButtonBase from '@mui/material/ButtonBase'
 import List, { ListProps } from '@mui/material/List'
-import MUIListItem, { ListItemProps } from '@mui/material/ListItem'
+import MUIListItem from '@mui/material/ListItem'
 import ListItemText from '@mui/material/ListItemText'
 import Typography from '@mui/material/Typography'
 import ListSubheader from '@mui/material/ListSubheader'
@@ -101,10 +101,11 @@ export interface FlatListNotice extends Notice {
   handleOnClick?: (event: MouseEvent) => void
   'data-cy'?: string
 }
-export interface FlatListItemOptions extends Omit<ListItemProps, 'title'> {
+export interface FlatListItemOptions {
   title?: React.ReactNode
   primaryText?: React.ReactNode
   highlight?: boolean
+  selected?: boolean
   subText?: React.JSX.Element | string
   icon?: React.JSX.Element | null
   section?: string | number
@@ -116,6 +117,7 @@ export interface FlatListItemOptions extends Omit<ListItemProps, 'title'> {
   draggable?: boolean // set by DraggableListItem
   disabled?: boolean
   disableTypography?: boolean
+  onClick?: () => void
 }
 
 export interface SectionTitle {
diff --git a/web/src/app/lists/FlatListItem.tsx b/web/src/app/lists/FlatListItem.tsx
index 27b4a15e09..8ec6be7fde 100644
--- a/web/src/app/lists/FlatListItem.tsx
+++ b/web/src/app/lists/FlatListItem.tsx
@@ -1,8 +1,6 @@
 import React, { useLayoutEffect } from 'react'
 import classnames from 'classnames'
-import MUIListItem, {
-  ListItemProps as MUIListItemProps,
-} from '@mui/material/ListItem'
+import ListItemButton from '@mui/material/ListItemButton'
 import ListItemIcon from '@mui/material/ListItemIcon'
 import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'
 import ListItemText from '@mui/material/ListItemText'
@@ -29,7 +27,7 @@ const useStyles = makeStyles(() => ({
   },
 }))
 
-export interface FlatListItemProps extends MUIListItemProps {
+export interface FlatListItemProps {
   item: FlatListItemOptions
   index: number
 }
@@ -41,6 +39,7 @@ export default function FlatListItem(
 
   const {
     highlight,
+    selected,
     icon,
     secondaryAction,
     scrollIntoView,
@@ -52,6 +51,7 @@ export default function FlatListItem(
     disableTypography,
     onClick,
     primaryText,
+    section,
     ...muiListItemProps
   } = props.item
 
@@ -68,20 +68,15 @@ export default function FlatListItem(
       // if you render a link with a secondary action, MUI will render the <a> tag without an <li> around it
       component: secondaryAction ? AppLink : AppLinkListItem,
       to: url,
-      button: true,
     }
   }
 
   const onClickProps = onClick && {
     onClick,
-
-    // NOTE: needed for error: button: false? not assignable to type 'true'
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    button: true as any,
   }
 
   return (
-    <MUIListItem
+    <ListItemButton
       {...linkProps}
       {...onClickProps}
       {...muiListItemProps}
@@ -109,6 +104,6 @@ export default function FlatListItem(
       {secondaryAction && (
         <ListItemSecondaryAction>{secondaryAction}</ListItemSecondaryAction>
       )}
-    </MUIListItem>
+    </ListItemButton>
   )
 }
diff --git a/web/src/app/lists/PaginatedList.tsx b/web/src/app/lists/PaginatedList.tsx
index 800ac0348a..4d3f755952 100644
--- a/web/src/app/lists/PaginatedList.tsx
+++ b/web/src/app/lists/PaginatedList.tsx
@@ -2,6 +2,7 @@ import React, { ReactNode, ReactElement } from 'react'
 import Avatar from '@mui/material/Avatar'
 import List from '@mui/material/List'
 import ListItem from '@mui/material/ListItem'
+import ListItemButton from '@mui/material/ListItemButton'
 import ListItemText from '@mui/material/ListItemText'
 import Typography from '@mui/material/Typography'
 import ListItemAvatar from '@mui/material/ListItemAvatar'
@@ -129,33 +130,22 @@ export function PaginatedList(props: PaginatedListProps): React.JSX.Element {
     }
 
     // must be explicitly set when using, in accordance with TS definitions
-    const urlProps = item.url && {
-      component: AppLinkListItem,
+    const urlProps = item.url
+      ? {
+          component: AppLinkListItem,
+          to: item.url,
+        }
+      : {}
+    const onClickProps = item.onClick
+      ? {
+          onClick: item.onClick,
+        }
+      : {}
 
-      // NOTE: needed for error: button: false? not assignable to type 'true'
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      button: true as any,
-      to: item.url,
-    }
-    const onClickProps = item.onClick && {
-      onClick: item.onClick,
+    const isInteractive = !!(item.url || item.onClick)
 
-      // NOTE: needed for error: button: false? not assignable to type 'true'
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      button: true as any,
-    }
-
-    return (
-      <ListItem
-        sx={{
-          borderLeft: `3px solid ${borderColor(item.status)}`,
-        }}
-        dense={!fullScreen}
-        key={'list_' + idx}
-        selected={item.selected}
-        {...urlProps}
-        {...onClickProps}
-      >
+    const content = (
+      <React.Fragment>
         {item.icon && <ListItemAvatar>{item.icon}</ListItemAvatar>}
         <ListItemText
           className={classes.itemText}
@@ -167,6 +157,35 @@ export function PaginatedList(props: PaginatedListProps): React.JSX.Element {
         />
         {favIcon}
         {item.action && <div className={classes.itemAction}>{item.action}</div>}
+      </React.Fragment>
+    )
+
+    if (isInteractive) {
+      return (
+        <ListItemButton
+          sx={{
+            borderLeft: `3px solid ${borderColor(item.status)}`,
+          }}
+          dense={!fullScreen}
+          key={'list_' + idx}
+          selected={item.selected}
+          {...urlProps}
+          {...onClickProps}
+        >
+          {content}
+        </ListItemButton>
+      )
+    }
+
+    return (
+      <ListItem
+        sx={{
+          borderLeft: `3px solid ${borderColor(item.status)}`,
+        }}
+        dense={!fullScreen}
+        key={'list_' + idx}
+      >
+        {content}
       </ListItem>
     )
   }
diff --git a/web/src/app/main/NavBarLink.tsx b/web/src/app/main/NavBarLink.tsx
index ad4e004f7c..d7cd71ab6c 100644
--- a/web/src/app/main/NavBarLink.tsx
+++ b/web/src/app/main/NavBarLink.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { useLocation } from 'wouter'
 import List from '@mui/material/List'
 import makeStyles from '@mui/styles/makeStyles'
-import ListItem from '@mui/material/ListItem'
+import ListItemButton from '@mui/material/ListItemButton'
 import ListItemText from '@mui/material/ListItemText'
 import ListItemIcon from '@mui/material/ListItemIcon'
 import Typography from '@mui/material/Typography'
@@ -58,14 +58,14 @@ export function NavBarSubLink({
       to={to}
       newTab={newTab}
     >
-      <ListItem button tabIndex={-1}>
+      <ListItemButton tabIndex={-1}>
         <ListItemText className={subMenuLinkText}>
           {title}
           {newTab && (
             <OpenInNew fontSize='small' style={{ paddingLeft: '1em' }} />
           )}
         </ListItemText>
-      </ListItem>
+      </ListItemButton>
     </AppLink>
   )
 }
@@ -93,7 +93,7 @@ export default function NavBarLink({
         to={to}
         className={!children && isRoute ? classes.navSelected : classes.nav}
       >
-        <ListItem button tabIndex={-1}>
+        <ListItemButton tabIndex={-1}>
           <ListItemIcon>{icon}</ListItemIcon>
           <ListItemText
             disableTypography
@@ -113,7 +113,7 @@ export default function NavBarLink({
               }
             />
           )}
-        </ListItem>
+        </ListItemButton>
       </AppLink>
       {children && (
         <Collapse in={isRoute} mountOnEnter>

From c4980ce48dad547318f1980c78fd24ecad658894 Mon Sep 17 00:00:00 2001
From: Forfold <nathaniel.cook@target.com>
Date: Mon, 20 Apr 2026 08:13:15 -0700
Subject: [PATCH 02/26] npm run fmt

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1a1d80318e..fd397764ec 100644
--- a/package.json
+++ b/package.json
@@ -158,4 +158,4 @@
   "msw": {
     "workerDirectory": ".storybook/static"
   }
-}
\ No newline at end of file
+}

From 57a867bc4ba24624a743713f14411f33b11e3c78 Mon Sep 17 00:00:00 2001
From: Forfold <nathaniel.cook@target.com>
Date: Mon, 20 Apr 2026 08:19:26 -0700
Subject: [PATCH 03/26] fix lint failure

---
 search/render.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/search/render.go b/search/render.go
index 6dfba9c5ae..41e6f4ec2f 100644
--- a/search/render.go
+++ b/search/render.go
@@ -41,7 +41,7 @@ func Helpers() template.FuncMap {
 				if i > 0 {
 					buf.WriteString(" OR ")
 				}
-				buf.WriteString(fmt.Sprintf("to_tsvector('english', replace(lower(%s), '.', ' ')) @@ plainto_tsquery('english', replace(lower(:%s),'.',' '))", columnName, argName))
+				fmt.Fprintf(&buf, "to_tsvector('english', replace(lower(%s), '.', ' ')) @@ plainto_tsquery('english', replace(lower(:%s),'.',' '))", columnName, argName)
 			}
 
 			buf.WriteRune(')')

From 54d3d71be7182491e4397a251e8414e13ead0fc7 Mon Sep 17 00:00:00 2001
From: Forfold <nathaniel.cook@target.com>
Date: Mon, 20 Apr 2026 08:47:06 -0700
Subject: [PATCH 04/26] revert bun.lock

---
 bun.lock | 49 ++++++++++++++++++++++++++++++++-----------------
 1 file changed, 32 insertions(+), 17 deletions(-)

diff --git a/bun.lock b/bun.lock
index fdafbdcdff..87abf85f30 100644
--- a/bun.lock
+++ b/bun.lock
@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "devDependencies": {
@@ -23,10 +24,11 @@
         "@lezer/highlight": "1.2.1",
         "@lezer/lr": "1.4.2",
         "@material/material-color-utilities": "0.3.0",
-        "@mui/icons-material": "6.5.0",
-        "@mui/material": "6.5.0",
-        "@mui/styles": "6.5.0",
-        "@mui/system": "6.5.0",
+        "@mui/icons-material": "5.16.7",
+        "@mui/lab": "5.0.0-alpha.170",
+        "@mui/material": "5.16.7",
+        "@mui/styles": "5.16.7",
+        "@mui/system": "5.16.7",
         "@mui/x-data-grid": "6.20.4",
         "@playwright/test": "1.55.1",
         "@storybook/addon-links": "9.1.8",
@@ -125,9 +127,6 @@
       },
     },
   },
-  "overrides": {
-    "react-is": "^18.3.1",
-  },
   "packages": {
     "@0no-co/graphql.web": ["@0no-co/graphql.web@1.2.0", "", { "peerDependencies": { "graphql": "^14.0.0 || ^15.0.0 || ^16.0.0" }, "optionalPeers": ["graphql"] }, "sha512-/1iHy9TTr63gE1YcR5idjx8UREz1s0kFhydf3bBLCXyqjhkIc6igAzTOx3zPifCwFR87tsh/4Pa9cNts6d2otw=="],
 
@@ -493,23 +492,27 @@
 
     "@mswjs/interceptors": ["@mswjs/interceptors@0.39.6", "", { "dependencies": { "@open-draft/deferred-promise": "^2.2.0", "@open-draft/logger": "^0.3.0", "@open-draft/until": "^2.0.0", "is-node-process": "^1.2.0", "outvariant": "^1.4.3", "strict-event-emitter": "^0.5.1" } }, "sha512-bndDP83naYYkfayr/qhBHMhk0YGwS1iv6vaEGcr0SQbO0IZtbOPqjKjds/WcG+bJA+1T5vCx6kprKOzn5Bg+Vw=="],
 
-    "@mui/core-downloads-tracker": ["@mui/core-downloads-tracker@6.5.0", "", {}, "sha512-LGb8t8i6M2ZtS3Drn3GbTI1DVhDY6FJ9crEey2lZ0aN2EMZo8IZBZj9wRf4vqbZHaWjsYgtbOnJw5V8UWbmK2Q=="],
+    "@mui/base": ["@mui/base@5.0.0-beta.40", "", { "dependencies": { "@babel/runtime": "^7.23.9", "@floating-ui/react-dom": "^2.0.8", "@mui/types": "^7.2.14", "@mui/utils": "^5.15.14", "@popperjs/core": "^2.11.8", "clsx": "^2.1.0", "prop-types": "^15.8.1" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0", "react": "^17.0.0 || ^18.0.0", "react-dom": "^17.0.0 || ^18.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ=="],
+
+    "@mui/core-downloads-tracker": ["@mui/core-downloads-tracker@5.18.0", "", {}, "sha512-jbhwoQ1AY200PSSOrNXmrFCaSDSJWP7qk6urkTmIirvRXDROkqe+QwcLlUiw/PrREwsIF/vm3/dAXvjlMHF0RA=="],
+
+    "@mui/icons-material": ["@mui/icons-material@5.16.7", "", { "dependencies": { "@babel/runtime": "^7.23.9" }, "peerDependencies": { "@mui/material": "^5.0.0", "@types/react": "^17.0.0 || ^18.0.0", "react": "^17.0.0 || ^18.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-UrGwDJCXEszbDI7yV047BYU5A28eGJ79keTCP4cc74WyncuVrnurlmIRxaHL8YK+LI1Kzq+/JM52IAkNnv4u+Q=="],
 
-    "@mui/icons-material": ["@mui/icons-material@6.5.0", "", { "dependencies": { "@babel/runtime": "^7.26.0" }, "peerDependencies": { "@mui/material": "^6.5.0", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-VPuPqXqbBPlcVSA0BmnoE4knW4/xG6Thazo8vCLWkOKusko6DtwFV6B665MMWJ9j0KFohTIf3yx2zYtYacvG1g=="],
+    "@mui/lab": ["@mui/lab@5.0.0-alpha.170", "", { "dependencies": { "@babel/runtime": "^7.23.9", "@mui/base": "5.0.0-beta.40", "@mui/system": "^5.15.15", "@mui/types": "^7.2.14", "@mui/utils": "^5.15.14", "clsx": "^2.1.0", "prop-types": "^15.8.1" }, "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", "@mui/material": ">=5.15.0", "@types/react": "^17.0.0 || ^18.0.0", "react": "^17.0.0 || ^18.0.0", "react-dom": "^17.0.0 || ^18.0.0" }, "optionalPeers": ["@emotion/react", "@emotion/styled", "@types/react"] }, "sha512-0bDVECGmrNjd3+bLdcLiwYZ0O4HP5j5WSQm5DV6iA/Z9kr8O6AnvZ1bv9ImQbbX7Gj3pX4o43EKwCutj3EQxQg=="],
 
-    "@mui/material": ["@mui/material@6.5.0", "", { "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", "@popperjs/core": "^2.11.8", "@types/react-transition-group": "^4.4.12", "clsx": "^2.1.1", "csstype": "^3.1.3", "prop-types": "^15.8.1", "react-is": "^19.0.0", "react-transition-group": "^4.4.5" }, "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", "@mui/material-pigment-css": "^6.5.0", "@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" }, "optionalPeers": ["@emotion/react", "@emotion/styled", "@mui/material-pigment-css", "@types/react"] }, "sha512-yjvtXoFcrPLGtgKRxFaH6OQPtcLPhkloC0BML6rBG5UeldR0nPULR/2E2BfXdo5JNV7j7lOzrrLX2Qf/iSidow=="],
+    "@mui/material": ["@mui/material@5.16.7", "", { "dependencies": { "@babel/runtime": "^7.23.9", "@mui/core-downloads-tracker": "^5.16.7", "@mui/system": "^5.16.7", "@mui/types": "^7.2.15", "@mui/utils": "^5.16.6", "@popperjs/core": "^2.11.8", "@types/react-transition-group": "^4.4.10", "clsx": "^2.1.0", "csstype": "^3.1.3", "prop-types": "^15.8.1", "react-is": "^18.3.1", "react-transition-group": "^4.4.5" }, "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", "@types/react": "^17.0.0 || ^18.0.0", "react": "^17.0.0 || ^18.0.0", "react-dom": "^17.0.0 || ^18.0.0" }, "optionalPeers": ["@emotion/react", "@emotion/styled", "@types/react"] }, "sha512-cwwVQxBhK60OIOqZOVLFt55t01zmarKJiJUWbk0+8s/Ix5IaUzAShqlJchxsIQ4mSrWqgcKCCXKtIlG5H+/Jmg=="],
 
-    "@mui/private-theming": ["@mui/private-theming@6.4.9", "", { "dependencies": { "@babel/runtime": "^7.26.0", "@mui/utils": "^6.4.9", "prop-types": "^15.8.1" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-LktcVmI5X17/Q5SkwjCcdOLBzt1hXuc14jYa7NPShog0GBDCDvKtcnP0V7a2s6EiVRlv7BzbWEJzH6+l/zaCxw=="],
+    "@mui/private-theming": ["@mui/private-theming@5.17.1", "", { "dependencies": { "@babel/runtime": "^7.23.9", "@mui/utils": "^5.17.1", "prop-types": "^15.8.1" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-XMxU0NTYcKqdsG8LRmSoxERPXwMbp16sIXPcLVgLGII/bVNagX0xaheWAwFv8+zDK7tI3ajllkuD3GZZE++ICQ=="],
 
-    "@mui/styled-engine": ["@mui/styled-engine@6.5.0", "", { "dependencies": { "@babel/runtime": "^7.26.0", "@emotion/cache": "^11.13.5", "@emotion/serialize": "^1.3.3", "@emotion/sheet": "^1.4.0", "csstype": "^3.1.3", "prop-types": "^15.8.1" }, "peerDependencies": { "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/react", "@emotion/styled"] }, "sha512-8woC2zAqF4qUDSPIBZ8v3sakj+WgweolpyM/FXf8jAx6FMls+IE4Y8VDZc+zS805J7PRz31vz73n2SovKGaYgw=="],
+    "@mui/styled-engine": ["@mui/styled-engine@5.18.0", "", { "dependencies": { "@babel/runtime": "^7.23.9", "@emotion/cache": "^11.13.5", "@emotion/serialize": "^1.3.3", "csstype": "^3.1.3", "prop-types": "^15.8.1" }, "peerDependencies": { "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/react", "@emotion/styled"] }, "sha512-BN/vKV/O6uaQh2z5rXV+MBlVrEkwoS/TK75rFQ2mjxA7+NBo8qtTAOA4UaM0XeJfn7kh2wZ+xQw2HAx0u+TiBg=="],
 
-    "@mui/styles": ["@mui/styles@6.5.0", "", { "dependencies": { "@babel/runtime": "^7.26.0", "@emotion/hash": "^0.9.2", "@mui/private-theming": "^6.4.9", "@mui/types": "~7.2.24", "@mui/utils": "^6.4.9", "clsx": "^2.1.1", "csstype": "^3.1.3", "hoist-non-react-statics": "^3.3.2", "jss": "^10.10.0", "jss-plugin-camel-case": "^10.10.0", "jss-plugin-default-unit": "^10.10.0", "jss-plugin-global": "^10.10.0", "jss-plugin-nested": "^10.10.0", "jss-plugin-props-sort": "^10.10.0", "jss-plugin-rule-value-function": "^10.10.0", "jss-plugin-vendor-prefixer": "^10.10.0", "prop-types": "^15.8.1" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-DeE/S/l6adnMpKfgx6l7UaQwYuf+gD4FCp6En3Vdg2Er+CTArj4DcHNFVzb8HZ2nNqACwmSm16/P08m1vAxv2w=="],
+    "@mui/styles": ["@mui/styles@5.16.7", "", { "dependencies": { "@babel/runtime": "^7.23.9", "@emotion/hash": "^0.9.1", "@mui/private-theming": "^5.16.6", "@mui/types": "^7.2.15", "@mui/utils": "^5.16.6", "clsx": "^2.1.0", "csstype": "^3.1.3", "hoist-non-react-statics": "^3.3.2", "jss": "^10.10.0", "jss-plugin-camel-case": "^10.10.0", "jss-plugin-default-unit": "^10.10.0", "jss-plugin-global": "^10.10.0", "jss-plugin-nested": "^10.10.0", "jss-plugin-props-sort": "^10.10.0", "jss-plugin-rule-value-function": "^10.10.0", "jss-plugin-vendor-prefixer": "^10.10.0", "prop-types": "^15.8.1" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0", "react": "^17.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-FfXhHP/2MlqH+vLs2tIHMeCChmqSRgkOALVNLKkPrDsvtoq5J8OraOutCn1scpvRjr9mO8ZhW6jKx2t/vUDxtQ=="],
 
-    "@mui/system": ["@mui/system@6.5.0", "", { "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", "clsx": "^2.1.1", "csstype": "^3.1.3", "prop-types": "^15.8.1" }, "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/react", "@emotion/styled", "@types/react"] }, "sha512-XcbBYxDS+h/lgsoGe78ExXFZXtuIlSBpn/KsZq8PtZcIkUNJInkuDqcLd2rVBQrDC1u+rvVovdaWPf2FHKJf3w=="],
+    "@mui/system": ["@mui/system@5.16.7", "", { "dependencies": { "@babel/runtime": "^7.23.9", "@mui/private-theming": "^5.16.6", "@mui/styled-engine": "^5.16.6", "@mui/types": "^7.2.15", "@mui/utils": "^5.16.6", "clsx": "^2.1.0", "csstype": "^3.1.3", "prop-types": "^15.8.1" }, "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", "@types/react": "^17.0.0 || ^18.0.0", "react": "^17.0.0 || ^18.0.0" }, "optionalPeers": ["@emotion/react", "@emotion/styled", "@types/react"] }, "sha512-Jncvs/r/d/itkxh7O7opOunTqbbSSzMTHzZkNLM+FjAOg+cYAZHrPDlYe1ZGKUYORwwb2XexlWnpZp0kZ4AHuA=="],
 
-    "@mui/types": ["@mui/types@7.2.24", "", { "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-3c8tRt/CbWZ+pEg7QpSwbdxOk36EfmhbKf6AGZsD1EcLDLTSZoxxJ86FVtcjxvjuhdyBiWKSTGZFaXCnidO2kw=="],
+    "@mui/types": ["@mui/types@7.4.6", "", { "dependencies": { "@babel/runtime": "^7.28.3" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-NVBbIw+4CDMMppNamVxyTccNv0WxtDb7motWDlMeSC8Oy95saj1TIZMGynPpFLePt3yOD8TskzumeqORCgRGWw=="],
 
-    "@mui/utils": ["@mui/utils@6.4.9", "", { "dependencies": { "@babel/runtime": "^7.26.0", "@mui/types": "~7.2.24", "@types/prop-types": "^15.7.14", "clsx": "^2.1.1", "prop-types": "^15.8.1", "react-is": "^19.0.0" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-Y12Q9hbK9g+ZY0T3Rxrx9m2m10gaphDuUMgWxyV5kNJevVxXYCLclYUCC9vXaIk1/NdNDTcW2Yfr2OGvNFNmHg=="],
+    "@mui/utils": ["@mui/utils@5.17.1", "", { "dependencies": { "@babel/runtime": "^7.23.9", "@mui/types": "~7.2.15", "@types/prop-types": "^15.7.12", "clsx": "^2.1.1", "prop-types": "^15.8.1", "react-is": "^19.0.0" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-jEZ8FTqInt2WzxDV8bhImWBqeQRD99c/id/fq83H0ER9tFl+sfZlaAoCdznGvbSQQ9ividMxqSV2c7cC1vBcQg=="],
 
     "@mui/x-data-grid": ["@mui/x-data-grid@6.20.4", "", { "dependencies": { "@babel/runtime": "^7.23.2", "@mui/utils": "^5.14.16", "clsx": "^2.0.0", "prop-types": "^15.8.1", "reselect": "^4.1.8" }, "peerDependencies": { "@mui/material": "^5.4.1", "@mui/system": "^5.4.1", "react": "^17.0.0 || ^18.0.0", "react-dom": "^17.0.0 || ^18.0.0" } }, "sha512-I0JhinVV4e25hD2dB+R6biPBtpGeFrXf8RwlMPQbr9gUggPmPmNtWKo8Kk2PtBBMlGtdMAgHWe7PqhmucUxU1w=="],
 
@@ -2967,15 +2970,21 @@
 
     "@joshwooding/vite-plugin-react-docgen-typescript/glob": ["glob@10.4.5", "", { "dependencies": { "foreground-child": "^3.1.0", "jackspeak": "^3.1.2", "minimatch": "^9.0.4", "minipass": "^7.1.2", "package-json-from-dist": "^1.0.0", "path-scurry": "^1.11.1" }, "bin": { "glob": "dist/esm/bin.mjs" } }, "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg=="],
 
+    "@mui/base/clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
+
+    "@mui/lab/clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
+
     "@mui/material/clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
 
     "@mui/styles/clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
 
     "@mui/system/clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
 
+    "@mui/utils/@mui/types": ["@mui/types@7.2.24", "", { "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-3c8tRt/CbWZ+pEg7QpSwbdxOk36EfmhbKf6AGZsD1EcLDLTSZoxxJ86FVtcjxvjuhdyBiWKSTGZFaXCnidO2kw=="],
+
     "@mui/utils/clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
 
-    "@mui/x-data-grid/@mui/utils": ["@mui/utils@5.17.1", "", { "dependencies": { "@babel/runtime": "^7.23.9", "@mui/types": "~7.2.15", "@types/prop-types": "^15.7.12", "clsx": "^2.1.1", "prop-types": "^15.8.1", "react-is": "^19.0.0" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-jEZ8FTqInt2WzxDV8bhImWBqeQRD99c/id/fq83H0ER9tFl+sfZlaAoCdznGvbSQQ9ividMxqSV2c7cC1vBcQg=="],
+    "@mui/utils/react-is": ["react-is@19.1.1", "", {}, "sha512-tr41fA15Vn8p4X9ntI+yCyeGSf1TlYaY5vlTZfQmeLBrFo3psOPX6HhTDnFNL9uj3EhP0KAQ80cugCl4b4BERA=="],
 
     "@mui/x-data-grid/clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
 
@@ -3125,6 +3134,8 @@
 
     "hasha/type-fest": ["type-fest@0.8.1", "", {}, "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA=="],
 
+    "hoist-non-react-statics/react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
+
     "htmlparser2/entities": ["entities@1.1.2", "", {}, "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="],
 
     "import-fresh/resolve-from": ["resolve-from@4.0.0", "", {}, "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="],
@@ -3257,6 +3268,8 @@
 
     "pretty-format/@jest/schemas": ["@jest/schemas@30.0.5", "", { "dependencies": { "@sinclair/typebox": "^0.34.0" } }, "sha512-DmdYgtezMkh3cpU8/1uyXakv3tJRcmcXxBOcO0tbaozPwpmh4YMsnWrQm9ZmZMfa5ocbxzbFk6O4bDPEc/iAnA=="],
 
+    "prop-types/react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
+
     "rc/ini": ["ini@1.3.8", "", {}, "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="],
 
     "rc/strip-json-comments": ["strip-json-comments@2.0.1", "", {}, "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ=="],
@@ -3445,6 +3458,8 @@
 
     "@storybook/test-runner/jest/jest-cli": ["jest-cli@29.7.0", "", { "dependencies": { "@jest/core": "^29.7.0", "@jest/test-result": "^29.7.0", "@jest/types": "^29.6.3", "chalk": "^4.0.0", "create-jest": "^29.7.0", "exit": "^0.1.2", "import-local": "^3.0.2", "jest-config": "^29.7.0", "jest-util": "^29.7.0", "jest-validate": "^29.7.0", "yargs": "^17.3.1" }, "peerDependencies": { "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0" }, "optionalPeers": ["node-notifier"], "bin": { "jest": "bin/jest.js" } }, "sha512-OVVobw2IubN/GSYsxETi+gOe7Ka59EFMR/twOU3Jb2GnKKeMGJB5SGUUrEz3SFVmJASUdZUzy83sLNNQ2gZslg=="],
 
+    "@testing-library/dom/pretty-format/react-is": ["react-is@17.0.2", "", {}, "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="],
+
     "@types/glob/glob/minimatch": ["minimatch@10.0.3", "", { "dependencies": { "@isaacs/brace-expansion": "^5.0.0" } }, "sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw=="],
 
     "@typescript-eslint/typescript-estree/minimatch/brace-expansion": ["brace-expansion@2.0.2", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ=="],

From 242aafb777830f62d36ff1257159aa60e829c86d Mon Sep 17 00:00:00 2001
From: Forfold <nathaniel.cook@target.com>
Date: Mon, 20 Apr 2026 08:53:22 -0700
Subject: [PATCH 05/26] bun install

---
 bun.lock     | 49 +++++++++++++++++--------------------------------
 package.json |  2 +-
 2 files changed, 18 insertions(+), 33 deletions(-)

diff --git a/bun.lock b/bun.lock
index 87abf85f30..fdafbdcdff 100644
--- a/bun.lock
+++ b/bun.lock
@@ -1,6 +1,5 @@
 {
   "lockfileVersion": 1,
-  "configVersion": 0,
   "workspaces": {
     "": {
       "devDependencies": {
@@ -24,11 +23,10 @@
         "@lezer/highlight": "1.2.1",
         "@lezer/lr": "1.4.2",
         "@material/material-color-utilities": "0.3.0",
-        "@mui/icons-material": "5.16.7",
-        "@mui/lab": "5.0.0-alpha.170",
-        "@mui/material": "5.16.7",
-        "@mui/styles": "5.16.7",
-        "@mui/system": "5.16.7",
+        "@mui/icons-material": "6.5.0",
+        "@mui/material": "6.5.0",
+        "@mui/styles": "6.5.0",
+        "@mui/system": "6.5.0",
         "@mui/x-data-grid": "6.20.4",
         "@playwright/test": "1.55.1",
         "@storybook/addon-links": "9.1.8",
@@ -127,6 +125,9 @@
       },
     },
   },
+  "overrides": {
+    "react-is": "^18.3.1",
+  },
   "packages": {
     "@0no-co/graphql.web": ["@0no-co/graphql.web@1.2.0", "", { "peerDependencies": { "graphql": "^14.0.0 || ^15.0.0 || ^16.0.0" }, "optionalPeers": ["graphql"] }, "sha512-/1iHy9TTr63gE1YcR5idjx8UREz1s0kFhydf3bBLCXyqjhkIc6igAzTOx3zPifCwFR87tsh/4Pa9cNts6d2otw=="],
 
@@ -492,27 +493,23 @@
 
     "@mswjs/interceptors": ["@mswjs/interceptors@0.39.6", "", { "dependencies": { "@open-draft/deferred-promise": "^2.2.0", "@open-draft/logger": "^0.3.0", "@open-draft/until": "^2.0.0", "is-node-process": "^1.2.0", "outvariant": "^1.4.3", "strict-event-emitter": "^0.5.1" } }, "sha512-bndDP83naYYkfayr/qhBHMhk0YGwS1iv6vaEGcr0SQbO0IZtbOPqjKjds/WcG+bJA+1T5vCx6kprKOzn5Bg+Vw=="],
 
-    "@mui/base": ["@mui/base@5.0.0-beta.40", "", { "dependencies": { "@babel/runtime": "^7.23.9", "@floating-ui/react-dom": "^2.0.8", "@mui/types": "^7.2.14", "@mui/utils": "^5.15.14", "@popperjs/core": "^2.11.8", "clsx": "^2.1.0", "prop-types": "^15.8.1" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0", "react": "^17.0.0 || ^18.0.0", "react-dom": "^17.0.0 || ^18.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ=="],
-
-    "@mui/core-downloads-tracker": ["@mui/core-downloads-tracker@5.18.0", "", {}, "sha512-jbhwoQ1AY200PSSOrNXmrFCaSDSJWP7qk6urkTmIirvRXDROkqe+QwcLlUiw/PrREwsIF/vm3/dAXvjlMHF0RA=="],
-
-    "@mui/icons-material": ["@mui/icons-material@5.16.7", "", { "dependencies": { "@babel/runtime": "^7.23.9" }, "peerDependencies": { "@mui/material": "^5.0.0", "@types/react": "^17.0.0 || ^18.0.0", "react": "^17.0.0 || ^18.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-UrGwDJCXEszbDI7yV047BYU5A28eGJ79keTCP4cc74WyncuVrnurlmIRxaHL8YK+LI1Kzq+/JM52IAkNnv4u+Q=="],
+    "@mui/core-downloads-tracker": ["@mui/core-downloads-tracker@6.5.0", "", {}, "sha512-LGb8t8i6M2ZtS3Drn3GbTI1DVhDY6FJ9crEey2lZ0aN2EMZo8IZBZj9wRf4vqbZHaWjsYgtbOnJw5V8UWbmK2Q=="],
 
-    "@mui/lab": ["@mui/lab@5.0.0-alpha.170", "", { "dependencies": { "@babel/runtime": "^7.23.9", "@mui/base": "5.0.0-beta.40", "@mui/system": "^5.15.15", "@mui/types": "^7.2.14", "@mui/utils": "^5.15.14", "clsx": "^2.1.0", "prop-types": "^15.8.1" }, "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", "@mui/material": ">=5.15.0", "@types/react": "^17.0.0 || ^18.0.0", "react": "^17.0.0 || ^18.0.0", "react-dom": "^17.0.0 || ^18.0.0" }, "optionalPeers": ["@emotion/react", "@emotion/styled", "@types/react"] }, "sha512-0bDVECGmrNjd3+bLdcLiwYZ0O4HP5j5WSQm5DV6iA/Z9kr8O6AnvZ1bv9ImQbbX7Gj3pX4o43EKwCutj3EQxQg=="],
+    "@mui/icons-material": ["@mui/icons-material@6.5.0", "", { "dependencies": { "@babel/runtime": "^7.26.0" }, "peerDependencies": { "@mui/material": "^6.5.0", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-VPuPqXqbBPlcVSA0BmnoE4knW4/xG6Thazo8vCLWkOKusko6DtwFV6B665MMWJ9j0KFohTIf3yx2zYtYacvG1g=="],
 
-    "@mui/material": ["@mui/material@5.16.7", "", { "dependencies": { "@babel/runtime": "^7.23.9", "@mui/core-downloads-tracker": "^5.16.7", "@mui/system": "^5.16.7", "@mui/types": "^7.2.15", "@mui/utils": "^5.16.6", "@popperjs/core": "^2.11.8", "@types/react-transition-group": "^4.4.10", "clsx": "^2.1.0", "csstype": "^3.1.3", "prop-types": "^15.8.1", "react-is": "^18.3.1", "react-transition-group": "^4.4.5" }, "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", "@types/react": "^17.0.0 || ^18.0.0", "react": "^17.0.0 || ^18.0.0", "react-dom": "^17.0.0 || ^18.0.0" }, "optionalPeers": ["@emotion/react", "@emotion/styled", "@types/react"] }, "sha512-cwwVQxBhK60OIOqZOVLFt55t01zmarKJiJUWbk0+8s/Ix5IaUzAShqlJchxsIQ4mSrWqgcKCCXKtIlG5H+/Jmg=="],
+    "@mui/material": ["@mui/material@6.5.0", "", { "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", "@popperjs/core": "^2.11.8", "@types/react-transition-group": "^4.4.12", "clsx": "^2.1.1", "csstype": "^3.1.3", "prop-types": "^15.8.1", "react-is": "^19.0.0", "react-transition-group": "^4.4.5" }, "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", "@mui/material-pigment-css": "^6.5.0", "@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" }, "optionalPeers": ["@emotion/react", "@emotion/styled", "@mui/material-pigment-css", "@types/react"] }, "sha512-yjvtXoFcrPLGtgKRxFaH6OQPtcLPhkloC0BML6rBG5UeldR0nPULR/2E2BfXdo5JNV7j7lOzrrLX2Qf/iSidow=="],
 
-    "@mui/private-theming": ["@mui/private-theming@5.17.1", "", { "dependencies": { "@babel/runtime": "^7.23.9", "@mui/utils": "^5.17.1", "prop-types": "^15.8.1" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-XMxU0NTYcKqdsG8LRmSoxERPXwMbp16sIXPcLVgLGII/bVNagX0xaheWAwFv8+zDK7tI3ajllkuD3GZZE++ICQ=="],
+    "@mui/private-theming": ["@mui/private-theming@6.4.9", "", { "dependencies": { "@babel/runtime": "^7.26.0", "@mui/utils": "^6.4.9", "prop-types": "^15.8.1" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-LktcVmI5X17/Q5SkwjCcdOLBzt1hXuc14jYa7NPShog0GBDCDvKtcnP0V7a2s6EiVRlv7BzbWEJzH6+l/zaCxw=="],
 
-    "@mui/styled-engine": ["@mui/styled-engine@5.18.0", "", { "dependencies": { "@babel/runtime": "^7.23.9", "@emotion/cache": "^11.13.5", "@emotion/serialize": "^1.3.3", "csstype": "^3.1.3", "prop-types": "^15.8.1" }, "peerDependencies": { "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/react", "@emotion/styled"] }, "sha512-BN/vKV/O6uaQh2z5rXV+MBlVrEkwoS/TK75rFQ2mjxA7+NBo8qtTAOA4UaM0XeJfn7kh2wZ+xQw2HAx0u+TiBg=="],
+    "@mui/styled-engine": ["@mui/styled-engine@6.5.0", "", { "dependencies": { "@babel/runtime": "^7.26.0", "@emotion/cache": "^11.13.5", "@emotion/serialize": "^1.3.3", "@emotion/sheet": "^1.4.0", "csstype": "^3.1.3", "prop-types": "^15.8.1" }, "peerDependencies": { "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/react", "@emotion/styled"] }, "sha512-8woC2zAqF4qUDSPIBZ8v3sakj+WgweolpyM/FXf8jAx6FMls+IE4Y8VDZc+zS805J7PRz31vz73n2SovKGaYgw=="],
 
-    "@mui/styles": ["@mui/styles@5.16.7", "", { "dependencies": { "@babel/runtime": "^7.23.9", "@emotion/hash": "^0.9.1", "@mui/private-theming": "^5.16.6", "@mui/types": "^7.2.15", "@mui/utils": "^5.16.6", "clsx": "^2.1.0", "csstype": "^3.1.3", "hoist-non-react-statics": "^3.3.2", "jss": "^10.10.0", "jss-plugin-camel-case": "^10.10.0", "jss-plugin-default-unit": "^10.10.0", "jss-plugin-global": "^10.10.0", "jss-plugin-nested": "^10.10.0", "jss-plugin-props-sort": "^10.10.0", "jss-plugin-rule-value-function": "^10.10.0", "jss-plugin-vendor-prefixer": "^10.10.0", "prop-types": "^15.8.1" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0", "react": "^17.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-FfXhHP/2MlqH+vLs2tIHMeCChmqSRgkOALVNLKkPrDsvtoq5J8OraOutCn1scpvRjr9mO8ZhW6jKx2t/vUDxtQ=="],
+    "@mui/styles": ["@mui/styles@6.5.0", "", { "dependencies": { "@babel/runtime": "^7.26.0", "@emotion/hash": "^0.9.2", "@mui/private-theming": "^6.4.9", "@mui/types": "~7.2.24", "@mui/utils": "^6.4.9", "clsx": "^2.1.1", "csstype": "^3.1.3", "hoist-non-react-statics": "^3.3.2", "jss": "^10.10.0", "jss-plugin-camel-case": "^10.10.0", "jss-plugin-default-unit": "^10.10.0", "jss-plugin-global": "^10.10.0", "jss-plugin-nested": "^10.10.0", "jss-plugin-props-sort": "^10.10.0", "jss-plugin-rule-value-function": "^10.10.0", "jss-plugin-vendor-prefixer": "^10.10.0", "prop-types": "^15.8.1" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-DeE/S/l6adnMpKfgx6l7UaQwYuf+gD4FCp6En3Vdg2Er+CTArj4DcHNFVzb8HZ2nNqACwmSm16/P08m1vAxv2w=="],
 
-    "@mui/system": ["@mui/system@5.16.7", "", { "dependencies": { "@babel/runtime": "^7.23.9", "@mui/private-theming": "^5.16.6", "@mui/styled-engine": "^5.16.6", "@mui/types": "^7.2.15", "@mui/utils": "^5.16.6", "clsx": "^2.1.0", "csstype": "^3.1.3", "prop-types": "^15.8.1" }, "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", "@types/react": "^17.0.0 || ^18.0.0", "react": "^17.0.0 || ^18.0.0" }, "optionalPeers": ["@emotion/react", "@emotion/styled", "@types/react"] }, "sha512-Jncvs/r/d/itkxh7O7opOunTqbbSSzMTHzZkNLM+FjAOg+cYAZHrPDlYe1ZGKUYORwwb2XexlWnpZp0kZ4AHuA=="],
+    "@mui/system": ["@mui/system@6.5.0", "", { "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", "clsx": "^2.1.1", "csstype": "^3.1.3", "prop-types": "^15.8.1" }, "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/react", "@emotion/styled", "@types/react"] }, "sha512-XcbBYxDS+h/lgsoGe78ExXFZXtuIlSBpn/KsZq8PtZcIkUNJInkuDqcLd2rVBQrDC1u+rvVovdaWPf2FHKJf3w=="],
 
-    "@mui/types": ["@mui/types@7.4.6", "", { "dependencies": { "@babel/runtime": "^7.28.3" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-NVBbIw+4CDMMppNamVxyTccNv0WxtDb7motWDlMeSC8Oy95saj1TIZMGynPpFLePt3yOD8TskzumeqORCgRGWw=="],
+    "@mui/types": ["@mui/types@7.2.24", "", { "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-3c8tRt/CbWZ+pEg7QpSwbdxOk36EfmhbKf6AGZsD1EcLDLTSZoxxJ86FVtcjxvjuhdyBiWKSTGZFaXCnidO2kw=="],
 
-    "@mui/utils": ["@mui/utils@5.17.1", "", { "dependencies": { "@babel/runtime": "^7.23.9", "@mui/types": "~7.2.15", "@types/prop-types": "^15.7.12", "clsx": "^2.1.1", "prop-types": "^15.8.1", "react-is": "^19.0.0" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-jEZ8FTqInt2WzxDV8bhImWBqeQRD99c/id/fq83H0ER9tFl+sfZlaAoCdznGvbSQQ9ividMxqSV2c7cC1vBcQg=="],
+    "@mui/utils": ["@mui/utils@6.4.9", "", { "dependencies": { "@babel/runtime": "^7.26.0", "@mui/types": "~7.2.24", "@types/prop-types": "^15.7.14", "clsx": "^2.1.1", "prop-types": "^15.8.1", "react-is": "^19.0.0" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-Y12Q9hbK9g+ZY0T3Rxrx9m2m10gaphDuUMgWxyV5kNJevVxXYCLclYUCC9vXaIk1/NdNDTcW2Yfr2OGvNFNmHg=="],
 
     "@mui/x-data-grid": ["@mui/x-data-grid@6.20.4", "", { "dependencies": { "@babel/runtime": "^7.23.2", "@mui/utils": "^5.14.16", "clsx": "^2.0.0", "prop-types": "^15.8.1", "reselect": "^4.1.8" }, "peerDependencies": { "@mui/material": "^5.4.1", "@mui/system": "^5.4.1", "react": "^17.0.0 || ^18.0.0", "react-dom": "^17.0.0 || ^18.0.0" } }, "sha512-I0JhinVV4e25hD2dB+R6biPBtpGeFrXf8RwlMPQbr9gUggPmPmNtWKo8Kk2PtBBMlGtdMAgHWe7PqhmucUxU1w=="],
 
@@ -2970,21 +2967,15 @@
 
     "@joshwooding/vite-plugin-react-docgen-typescript/glob": ["glob@10.4.5", "", { "dependencies": { "foreground-child": "^3.1.0", "jackspeak": "^3.1.2", "minimatch": "^9.0.4", "minipass": "^7.1.2", "package-json-from-dist": "^1.0.0", "path-scurry": "^1.11.1" }, "bin": { "glob": "dist/esm/bin.mjs" } }, "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg=="],
 
-    "@mui/base/clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
-
-    "@mui/lab/clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
-
     "@mui/material/clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
 
     "@mui/styles/clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
 
     "@mui/system/clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
 
-    "@mui/utils/@mui/types": ["@mui/types@7.2.24", "", { "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-3c8tRt/CbWZ+pEg7QpSwbdxOk36EfmhbKf6AGZsD1EcLDLTSZoxxJ86FVtcjxvjuhdyBiWKSTGZFaXCnidO2kw=="],
-
     "@mui/utils/clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
 
-    "@mui/utils/react-is": ["react-is@19.1.1", "", {}, "sha512-tr41fA15Vn8p4X9ntI+yCyeGSf1TlYaY5vlTZfQmeLBrFo3psOPX6HhTDnFNL9uj3EhP0KAQ80cugCl4b4BERA=="],
+    "@mui/x-data-grid/@mui/utils": ["@mui/utils@5.17.1", "", { "dependencies": { "@babel/runtime": "^7.23.9", "@mui/types": "~7.2.15", "@types/prop-types": "^15.7.12", "clsx": "^2.1.1", "prop-types": "^15.8.1", "react-is": "^19.0.0" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-jEZ8FTqInt2WzxDV8bhImWBqeQRD99c/id/fq83H0ER9tFl+sfZlaAoCdznGvbSQQ9ividMxqSV2c7cC1vBcQg=="],
 
     "@mui/x-data-grid/clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
 
@@ -3134,8 +3125,6 @@
 
     "hasha/type-fest": ["type-fest@0.8.1", "", {}, "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA=="],
 
-    "hoist-non-react-statics/react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
-
     "htmlparser2/entities": ["entities@1.1.2", "", {}, "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="],
 
     "import-fresh/resolve-from": ["resolve-from@4.0.0", "", {}, "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="],
@@ -3268,8 +3257,6 @@
 
     "pretty-format/@jest/schemas": ["@jest/schemas@30.0.5", "", { "dependencies": { "@sinclair/typebox": "^0.34.0" } }, "sha512-DmdYgtezMkh3cpU8/1uyXakv3tJRcmcXxBOcO0tbaozPwpmh4YMsnWrQm9ZmZMfa5ocbxzbFk6O4bDPEc/iAnA=="],
 
-    "prop-types/react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
-
     "rc/ini": ["ini@1.3.8", "", {}, "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="],
 
     "rc/strip-json-comments": ["strip-json-comments@2.0.1", "", {}, "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ=="],
@@ -3458,8 +3445,6 @@
 
     "@storybook/test-runner/jest/jest-cli": ["jest-cli@29.7.0", "", { "dependencies": { "@jest/core": "^29.7.0", "@jest/test-result": "^29.7.0", "@jest/types": "^29.6.3", "chalk": "^4.0.0", "create-jest": "^29.7.0", "exit": "^0.1.2", "import-local": "^3.0.2", "jest-config": "^29.7.0", "jest-util": "^29.7.0", "jest-validate": "^29.7.0", "yargs": "^17.3.1" }, "peerDependencies": { "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0" }, "optionalPeers": ["node-notifier"], "bin": { "jest": "bin/jest.js" } }, "sha512-OVVobw2IubN/GSYsxETi+gOe7Ka59EFMR/twOU3Jb2GnKKeMGJB5SGUUrEz3SFVmJASUdZUzy83sLNNQ2gZslg=="],
 
-    "@testing-library/dom/pretty-format/react-is": ["react-is@17.0.2", "", {}, "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="],
-
     "@types/glob/glob/minimatch": ["minimatch@10.0.3", "", { "dependencies": { "@isaacs/brace-expansion": "^5.0.0" } }, "sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw=="],
 
     "@typescript-eslint/typescript-estree/minimatch/brace-expansion": ["brace-expansion@2.0.2", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ=="],
diff --git a/package.json b/package.json
index fd397764ec..1a1d80318e 100644
--- a/package.json
+++ b/package.json
@@ -158,4 +158,4 @@
   "msw": {
     "workerDirectory": ".storybook/static"
   }
-}
+}
\ No newline at end of file

From c71ae5a3802bc44fa7a6265606f76081bd99ab7a Mon Sep 17 00:00:00 2001
From: Forfold <nathaniel.cook@target.com>
Date: Mon, 20 Apr 2026 09:19:01 -0700
Subject: [PATCH 06/26] make node_modules

---
 bun.lock | 1 +
 1 file changed, 1 insertion(+)

diff --git a/bun.lock b/bun.lock
index fdafbdcdff..d17a72774d 100644
--- a/bun.lock
+++ b/bun.lock
@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "devDependencies": {

From 7db31afcea4fd274a84c51259a35b2880add0880 Mon Sep 17 00:00:00 2001
From: Forfold <nathaniel.cook@target.com>
Date: Mon, 20 Apr 2026 09:32:34 -0700
Subject: [PATCH 07/26] format

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1a1d80318e..fd397764ec 100644
--- a/package.json
+++ b/package.json
@@ -158,4 +158,4 @@
   "msw": {
     "workerDirectory": ".storybook/static"
   }
-}
\ No newline at end of file
+}

From 69efaa4031367515a84e3a650b71d8275762ed3f Mon Sep 17 00:00:00 2001
From: Forfold <nathaniel.cook@target.com>
Date: Mon, 20 Apr 2026 12:36:03 -0700
Subject: [PATCH 08/26] fix test from new dom typings

---
 web/src/app/lists/FlatListItem.tsx | 33 +++++++++++++++++++++++-------
 1 file changed, 26 insertions(+), 7 deletions(-)

diff --git a/web/src/app/lists/FlatListItem.tsx b/web/src/app/lists/FlatListItem.tsx
index 8ec6be7fde..e4e07138fd 100644
--- a/web/src/app/lists/FlatListItem.tsx
+++ b/web/src/app/lists/FlatListItem.tsx
@@ -1,5 +1,6 @@
 import React, { useLayoutEffect } from 'react'
 import classnames from 'classnames'
+import ListItem from '@mui/material/ListItem'
 import ListItemButton from '@mui/material/ListItemButton'
 import ListItemIcon from '@mui/material/ListItemIcon'
 import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'
@@ -62,26 +63,30 @@ export default function FlatListItem(
     }
   }, [scrollIntoView])
 
+  const onClickProps = onClick && {
+    onClick,
+  }
+
+  // When a URL is provided without a secondaryAction, AppLinkListItem renders
+  // an <li> wrapper. In all other cases we need an explicit <ListItem> wrapper
+  // so that children of a <ul>/<List> are valid <li> elements.
+  const needsLiWrapper = !url || !!secondaryAction
+
   let linkProps = {}
   if (url) {
     linkProps = {
-      // if you render a link with a secondary action, MUI will render the <a> tag without an <li> around it
       component: secondaryAction ? AppLink : AppLinkListItem,
       to: url,
     }
   }
 
-  const onClickProps = onClick && {
-    onClick,
-  }
-
-  return (
+  const button = (
     <ListItemButton
       {...linkProps}
       {...onClickProps}
       {...muiListItemProps}
       className={classnames({
-        [classes.listItem]: true,
+        [classes.listItem]: !needsLiWrapper,
         [classes.listItemDisabled]: disabled,
         [classes.listItemDraggable]: draggable,
       })}
@@ -106,4 +111,18 @@ export default function FlatListItem(
       )}
     </ListItemButton>
   )
+
+  if (!needsLiWrapper) return button
+
+  return (
+    <ListItem
+      ref={ref}
+      disablePadding
+      className={classnames({
+        [classes.listItem]: true,
+      })}
+    >
+      {button}
+    </ListItem>
+  )
 }

From a84118c37eb5a94b384cfb6bc7c42ac4050570a6 Mon Sep 17 00:00:00 2001
From: Forfold <nathaniel.cook@target.com>
Date: Tue, 21 Apr 2026 08:25:39 -0700
Subject: [PATCH 09/26] update flatlistitem to v6 mui

---
 web/src/app/lists/FlatListItem.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/web/src/app/lists/FlatListItem.tsx b/web/src/app/lists/FlatListItem.tsx
index e4e07138fd..8e50c9b21f 100644
--- a/web/src/app/lists/FlatListItem.tsx
+++ b/web/src/app/lists/FlatListItem.tsx
@@ -3,7 +3,6 @@ import classnames from 'classnames'
 import ListItem from '@mui/material/ListItem'
 import ListItemButton from '@mui/material/ListItemButton'
 import ListItemIcon from '@mui/material/ListItemIcon'
-import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'
 import ListItemText from '@mui/material/ListItemText'
 import makeStyles from '@mui/styles/makeStyles'
 import AppLink, { AppLinkListItem } from '../util/AppLink'
@@ -106,9 +105,6 @@ export default function FlatListItem(
           component: typeof subText === 'string' ? 'p' : 'div',
         }}
       />
-      {secondaryAction && (
-        <ListItemSecondaryAction>{secondaryAction}</ListItemSecondaryAction>
-      )}
     </ListItemButton>
   )
 
@@ -118,6 +114,7 @@ export default function FlatListItem(
     <ListItem
       ref={ref}
       disablePadding
+      secondaryAction={secondaryAction}
       className={classnames({
         [classes.listItem]: true,
       })}

From 121ba5c7d76d8b53ab228192fa3f43e67df326d4 Mon Sep 17 00:00:00 2001
From: Forfold <nathaniel.cook@target.com>
Date: Tue, 21 Apr 2026 11:03:48 -0700
Subject: [PATCH 10/26] Disable scrollIntoView on the confirmation step

---
 web/src/app/schedules/temp-sched/TempSchedShiftsList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/app/schedules/temp-sched/TempSchedShiftsList.tsx b/web/src/app/schedules/temp-sched/TempSchedShiftsList.tsx
index 1b21844a13..7bac80ca74 100644
--- a/web/src/app/schedules/temp-sched/TempSchedShiftsList.tsx
+++ b/web/src/app/schedules/temp-sched/TempSchedShiftsList.tsx
@@ -224,7 +224,7 @@ export default function TempSchedShiftsList({
           }
 
           return {
-            scrollIntoView: true,
+            scrollIntoView: !confirmationStep,
             id: DateTime.fromISO(s.start).toISO() + s.userID + index.toString(),
             title: s.user?.name,
             subText: (

From 3aded1fa9f4238783a1f82ec321485754272d01d Mon Sep 17 00:00:00 2001
From: Forfold <nathaniel.cook@target.com>
Date: Fri, 24 Apr 2026 10:48:04 -0700
Subject: [PATCH 11/26] prep for mui v7: drop Hidden component and deep imports

Replace <Hidden> with sx display rules (Hidden is removed in v7) and
collapse the @mui/material/styles/createPalette deep import into the
public entry point.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 web/src/app/alerts/AlertsList.tsx             |   6 +-
 .../alerts/components/AlertsListFilter.tsx    |  10 +-
 web/src/app/main/App.tsx                      |  10 +-
 web/src/app/main/components/ToolbarAction.tsx |   6 +-
 web/src/app/schedules/ScheduleRuleForm.tsx    | 116 +++++++++---------
 web/src/app/theme/themeConfig.tsx             |   2 +-
 web/src/app/util/FilterContainer.jsx          |  10 +-
 web/src/app/util/OtherActions.jsx             |  10 +-
 web/src/app/util/Search.jsx                   |   8 +-
 9 files changed, 88 insertions(+), 90 deletions(-)

diff --git a/web/src/app/alerts/AlertsList.tsx b/web/src/app/alerts/AlertsList.tsx
index 1a4338864b..67ebbb0fd7 100644
--- a/web/src/app/alerts/AlertsList.tsx
+++ b/web/src/app/alerts/AlertsList.tsx
@@ -1,7 +1,7 @@
 import React, { ReactElement, useState, useContext, useEffect } from 'react'
 import { useMutation } from '@apollo/client'
 import { useQuery, gql } from 'urql'
-import { Grid, Hidden, ListItemText } from '@mui/material'
+import { Box, Grid, ListItemText } from '@mui/material'
 import makeStyles from '@mui/styles/makeStyles'
 import {
   ArrowUpward as EscalateIcon,
@@ -341,9 +341,9 @@ export default function AlertsList(props: AlertsListProps): React.JSX.Element {
             )}
             createLabel='Alert'
             cardHeader={
-              <Hidden lgDown>
+              <Box sx={{ display: { xs: 'none', lg: 'block' } }}>
                 <AlertsListControls />
-              </Hidden>
+              </Box>
             }
             checkboxActions={getActions()}
           />
diff --git a/web/src/app/alerts/components/AlertsListFilter.tsx b/web/src/app/alerts/components/AlertsListFilter.tsx
index b08f01ecf5..dfc3a8c4fb 100644
--- a/web/src/app/alerts/components/AlertsListFilter.tsx
+++ b/web/src/app/alerts/components/AlertsListFilter.tsx
@@ -3,7 +3,7 @@ import Button from '@mui/material/Button'
 import IconButton from '@mui/material/IconButton'
 import Popover from '@mui/material/Popover'
 import FilterList from '@mui/icons-material/FilterList'
-import Hidden from '@mui/material/Hidden'
+import Box from '@mui/material/Box'
 import SwipeableDrawer from '@mui/material/SwipeableDrawer'
 import Switch from '@mui/material/Switch'
 import Grid from '@mui/material/Grid'
@@ -148,7 +148,7 @@ function AlertsListFilter(props: AlertsListFilterProps): React.JSX.Element {
     // renders a popover on desktop, and a swipeable drawer on mobile devices
     return (
       <React.Fragment>
-        <Hidden mdDown>
+        <Box sx={{ display: { xs: 'none', md: 'block' } }}>
           <Popover
             anchorEl={anchorEl}
             open={!!anchorEl && show}
@@ -164,8 +164,8 @@ function AlertsListFilter(props: AlertsListFilterProps): React.JSX.Element {
           >
             {content}
           </Popover>
-        </Hidden>
-        <Hidden mdUp>
+        </Box>
+        <Box sx={{ display: { xs: 'block', md: 'none' } }}>
           <SwipeableDrawer
             anchor='top'
             disableDiscovery
@@ -179,7 +179,7 @@ function AlertsListFilter(props: AlertsListFilterProps): React.JSX.Element {
           >
             {content}
           </SwipeableDrawer>
-        </Hidden>
+        </Box>
       </React.Fragment>
     )
   }
diff --git a/web/src/app/main/App.tsx b/web/src/app/main/App.tsx
index 9a28a6e486..b1138bb7ef 100644
--- a/web/src/app/main/App.tsx
+++ b/web/src/app/main/App.tsx
@@ -1,6 +1,6 @@
 import React, { Suspense, useEffect, useLayoutEffect, useState } from 'react'
 import AppBar from '@mui/material/AppBar'
-import Hidden from '@mui/material/Hidden'
+import Box from '@mui/material/Box'
 import Toolbar from '@mui/material/Toolbar'
 import ToolbarPageTitle from './components/ToolbarPageTitle'
 import ToolbarAction from './components/ToolbarAction'
@@ -100,12 +100,12 @@ export default function App(): React.JSX.Element {
               </Toolbar>
             </AppBar>
 
-            <Hidden mdDown>
+            <Box sx={{ display: { xs: 'none', md: 'block' } }}>
               <LazyWideSideBar>
                 <NavBar />
               </LazyWideSideBar>
-            </Hidden>
-            <Hidden mdUp>
+            </Box>
+            <Box sx={{ display: { xs: 'block', md: 'none' } }}>
               <SwipeableDrawer
                 disableDiscovery={isIOS}
                 open={showMobile}
@@ -117,7 +117,7 @@ export default function App(): React.JSX.Element {
               >
                 <NavBar />
               </SwipeableDrawer>
-            </Hidden>
+            </Box>
 
             <main
               id='content'
diff --git a/web/src/app/main/components/ToolbarAction.tsx b/web/src/app/main/components/ToolbarAction.tsx
index 04a1505323..cbca66df91 100644
--- a/web/src/app/main/components/ToolbarAction.tsx
+++ b/web/src/app/main/components/ToolbarAction.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import Hidden from '@mui/material/Hidden'
+import Box from '@mui/material/Box'
 import { Theme } from '@mui/material/styles'
 import IconButton from '@mui/material/IconButton'
 import { Menu as MenuIcon, ChevronLeft } from '@mui/icons-material'
@@ -46,7 +46,7 @@ function ToolbarAction(props: ToolbarActionProps): React.JSX.Element {
 
   function renderToolbarMenu(): React.JSX.Element {
     return (
-      <Hidden mdUp>
+      <Box sx={{ display: { xs: 'block', md: 'none' } }}>
         <IconButton
           aria-label='Open Navigation Menu'
           aria-expanded={props.showMobileSidebar}
@@ -59,7 +59,7 @@ function ToolbarAction(props: ToolbarActionProps): React.JSX.Element {
         >
           <MenuIcon />
         </IconButton>
-      </Hidden>
+      </Box>
     )
   }
 
diff --git a/web/src/app/schedules/ScheduleRuleForm.tsx b/web/src/app/schedules/ScheduleRuleForm.tsx
index a99969cde5..9b508a725b 100644
--- a/web/src/app/schedules/ScheduleRuleForm.tsx
+++ b/web/src/app/schedules/ScheduleRuleForm.tsx
@@ -8,7 +8,6 @@ import {
   TableHead,
   TableRow,
   TableCell,
-  Hidden,
   IconButton,
   TableBody,
   MenuItem,
@@ -162,61 +161,57 @@ export default function ScheduleRuleForm(
             hint={isLocalZone ? '' : fmtLocal(value.rules[idx].end)}
           />
         </TableCell>
-        <Hidden mdDown>
-          {days.map((day, dayIdx) => (
-            <TableCell
-              key={dayIdx}
-              padding='checkbox'
-              className={classes.noBorder}
-            >
-              <FormField
-                noError
-                className={classes.noPadding}
-                component={Checkbox}
-                checkbox
-                disabled={disabled}
-                fieldName={`rules[${idx}].weekdayFilter[${dayIdx}]`}
-                name={day}
-              />
-              <Spacer />
-            </TableCell>
-          ))}
-        </Hidden>
-        <Hidden mdUp>
+        {days.map((day, dayIdx) => (
           <TableCell
-            className={classNames(classes.dayFilter, classes.noBorder)}
+            key={dayIdx}
+            padding='checkbox'
+            className={classes.noBorder}
+            sx={{ display: { xs: 'none', md: 'table-cell' } }}
           >
             <FormField
-              fullWidth
-              component={TextField}
-              select
               noError
-              required
+              className={classes.noPadding}
+              component={Checkbox}
+              checkbox
               disabled={disabled}
-              SelectProps={{
-                renderValue: renderDaysValue,
-                multiple: true,
-              }}
-              label=''
-              name={`rules[${idx}].weekdayFilter`}
-              aria-label='Weekday Filter'
-              multiple
-              mapValue={(value: string[]) =>
-                days.filter((d, idx) => value[idx])
-              }
-              mapOnChangeValue={(value: string[]) =>
-                days.map((day) => value.includes(day))
-              }
-            >
-              {days.map((day) => (
-                <MenuItem value={day} key={day}>
-                  {day}
-                </MenuItem>
-              ))}
-            </FormField>
+              fieldName={`rules[${idx}].weekdayFilter[${dayIdx}]`}
+              name={day}
+            />
             <Spacer />
           </TableCell>
-        </Hidden>
+        ))}
+        <TableCell
+          className={classNames(classes.dayFilter, classes.noBorder)}
+          sx={{ display: { xs: 'table-cell', md: 'none' } }}
+        >
+          <FormField
+            fullWidth
+            component={TextField}
+            select
+            noError
+            required
+            disabled={disabled}
+            SelectProps={{
+              renderValue: renderDaysValue,
+              multiple: true,
+            }}
+            label=''
+            name={`rules[${idx}].weekdayFilter`}
+            aria-label='Weekday Filter'
+            multiple
+            mapValue={(value: string[]) => days.filter((d, idx) => value[idx])}
+            mapOnChangeValue={(value: string[]) =>
+              days.map((day) => value.includes(day))
+            }
+          >
+            {days.map((day) => (
+              <MenuItem value={day} key={day}>
+                {day}
+              </MenuItem>
+            ))}
+          </FormField>
+          <Spacer />
+        </TableCell>
         <TableCell padding='none' className={classes.noBorder}>
           {props.value.rules.length > 1 && (
             <IconButton
@@ -276,20 +271,21 @@ export default function ScheduleRuleForm(
                 >
                   End
                 </TableCell>
-                <Hidden mdDown>
-                  {days.map((d) => (
-                    <TableCell key={d} padding='checkbox'>
-                      {d.slice(0, 3)}
-                    </TableCell>
-                  ))}
-                </Hidden>
-                <Hidden mdUp>
+                {days.map((d) => (
                   <TableCell
-                    className={classNames(classes.dayFilter, classes.noBorder)}
+                    key={d}
+                    padding='checkbox'
+                    sx={{ display: { xs: 'none', md: 'table-cell' } }}
                   >
-                    Days
+                    {d.slice(0, 3)}
                   </TableCell>
-                </Hidden>
+                ))}
+                <TableCell
+                  className={classNames(classes.dayFilter, classes.noBorder)}
+                  sx={{ display: { xs: 'table-cell', md: 'none' } }}
+                >
+                  Days
+                </TableCell>
                 <TableCell
                   padding='none'
                   className={classNames({ [classes.noBorder]: isMobile })}
diff --git a/web/src/app/theme/themeConfig.tsx b/web/src/app/theme/themeConfig.tsx
index b1c678f56b..54c2d0fd91 100644
--- a/web/src/app/theme/themeConfig.tsx
+++ b/web/src/app/theme/themeConfig.tsx
@@ -5,10 +5,10 @@ import React, {
   useMemo,
   useState,
 } from 'react'
-import { PaletteOptions } from '@mui/material/styles/createPalette'
 import { isCypress } from '../env'
 import {
   createTheme,
+  PaletteOptions,
   Theme,
   ThemeProvider as MUIThemeProvider,
 } from '@mui/material/styles'
diff --git a/web/src/app/util/FilterContainer.jsx b/web/src/app/util/FilterContainer.jsx
index 84ddf8f50f..60073f7eab 100644
--- a/web/src/app/util/FilterContainer.jsx
+++ b/web/src/app/util/FilterContainer.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import p from 'prop-types'
 import {
-  Hidden,
+  Box,
   Popover,
   SwipeableDrawer,
   IconButton,
@@ -78,7 +78,7 @@ export default function FilterContainer(props) {
       >
         {icon}
       </IconButton>
-      <Hidden mdDown>
+      <Box sx={{ display: { xs: 'none', md: 'block' } }}>
         <Popover
           anchorEl={anchorEl}
           classes={{
@@ -92,8 +92,8 @@ export default function FilterContainer(props) {
         >
           {renderContent()}
         </Popover>
-      </Hidden>
-      <Hidden mdUp>
+      </Box>
+      <Box sx={{ display: { xs: 'block', md: 'none' } }}>
         <SwipeableDrawer
           anchor='top'
           classes={{
@@ -110,7 +110,7 @@ export default function FilterContainer(props) {
         >
           {renderContent()}
         </SwipeableDrawer>
-      </Hidden>
+      </Box>
     </React.Fragment>
   )
 }
diff --git a/web/src/app/util/OtherActions.jsx b/web/src/app/util/OtherActions.jsx
index 8190ee2305..0164781cf6 100644
--- a/web/src/app/util/OtherActions.jsx
+++ b/web/src/app/util/OtherActions.jsx
@@ -2,7 +2,7 @@ import React, { useRef, useState } from 'react'
 import p from 'prop-types'
 import IconButton from '@mui/material/IconButton'
 import { MoreHoriz as OptionsIcon } from '@mui/icons-material'
-import Hidden from '@mui/material/Hidden'
+import Box from '@mui/material/Box'
 import OtherActionsDesktop from './OtherActionsDesktop'
 import OtherActionsMobile from './OtherActionsMobile'
 
@@ -42,7 +42,7 @@ export default function OtherActions({
       >
         <IconComponent style={{ color }} />
       </IconButton>
-      <Hidden mdDown>
+      <Box sx={{ display: { xs: 'none', md: 'block' } }}>
         <OtherActionsDesktop
           isOpen={Boolean(anchorEl)}
           onClose={onClose}
@@ -50,14 +50,14 @@ export default function OtherActions({
           anchorEl={anchorEl}
           placement={placement}
         />
-      </Hidden>
-      <Hidden mdUp>
+      </Box>
+      <Box sx={{ display: { xs: 'block', md: 'none' } }}>
         <OtherActionsMobile
           isOpen={Boolean(anchorEl)}
           onClose={onClose}
           actions={actions}
         />
-      </Hidden>
+      </Box>
     </React.Fragment>
   )
 }
diff --git a/web/src/app/util/Search.jsx b/web/src/app/util/Search.jsx
index ce1867281c..e6b03d525d 100644
--- a/web/src/app/util/Search.jsx
+++ b/web/src/app/util/Search.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react'
 import p from 'prop-types'
 import makeStyles from '@mui/styles/makeStyles'
 import AppBar from '@mui/material/AppBar'
-import Hidden from '@mui/material/Hidden'
+import Box from '@mui/material/Box'
 import IconButton from '@mui/material/IconButton'
 import InputAdornment from '@mui/material/InputAdornment'
 import Slide from '@mui/material/Slide'
@@ -159,8 +159,10 @@ export default function Search(props) {
 
   return (
     <React.Fragment>
-      <Hidden mdDown>{renderTextField()}</Hidden>
-      <Hidden mdUp>{renderMobile()}</Hidden>
+      <Box sx={{ display: { xs: 'none', md: 'block' } }}>
+        {renderTextField()}
+      </Box>
+      <Box sx={{ display: { xs: 'block', md: 'none' } }}>{renderMobile()}</Box>
     </React.Fragment>
   )
 }

From fe0478ff294b265f70897672f130d0cf75a823f4 Mon Sep 17 00:00:00 2001
From: Forfold <nathaniel.cook@target.com>
Date: Fri, 24 Apr 2026 11:11:05 -0700
Subject: [PATCH 12/26] migrate makeStyles to sx: icons, lists, util, styles

Remove @mui/styles makeStyles usage from Icons, CreateFAB, FlatList,
FlatListItem, ListHeader, PageControls, ClickableText, CopyText,
SkipToContentLink, SpeedDial, AlertCountLineGraph, and materialStyles.

Replace with inline sx props, local const classes objects, and a plain
CSS file for CSSTransition class names (flatListTransitions.css).
---
 .../AlertCountLineGraph.tsx                   | 24 ++----
 web/src/app/icons/components/Icons.tsx        | 17 +---
 web/src/app/lists/CreateFAB.tsx               | 53 +++++-------
 web/src/app/lists/FlatList.tsx                | 86 ++++++-------------
 web/src/app/lists/FlatListItem.tsx            | 27 ++----
 web/src/app/lists/ListHeader.tsx              | 10 +--
 web/src/app/lists/PageControls.tsx            | 33 +++----
 web/src/app/lists/flatListTransitions.css     | 25 ++++++
 web/src/app/styles/materialStyles.ts          |  6 +-
 web/src/app/util/ClickableText.tsx            | 16 ++--
 web/src/app/util/CopyText.tsx                 | 26 +++---
 web/src/app/util/SkipToContentLink.tsx        | 39 ++++-----
 web/src/app/util/SpeedDial.tsx                | 38 +++-----
 13 files changed, 159 insertions(+), 241 deletions(-)
 create mode 100644 web/src/app/lists/flatListTransitions.css

diff --git a/web/src/app/admin/admin-alert-counts/AlertCountLineGraph.tsx b/web/src/app/admin/admin-alert-counts/AlertCountLineGraph.tsx
index 98c7eed28f..289423381f 100644
--- a/web/src/app/admin/admin-alert-counts/AlertCountLineGraph.tsx
+++ b/web/src/app/admin/admin-alert-counts/AlertCountLineGraph.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 import { Grid, Paper, Typography } from '@mui/material'
-import makeStyles from '@mui/styles/makeStyles/makeStyles'
-import { Theme, useTheme } from '@mui/material/styles'
+import { useTheme } from '@mui/material/styles'
 import { DateTime, DateTimeUnit } from 'luxon'
 import {
   blueGrey,
@@ -34,18 +33,6 @@ interface AlertCountLineGraphProps {
   unit: DateTimeUnit
 }
 
-const useStyles = makeStyles((theme: Theme) => ({
-  graphContent: {
-    height: '500px',
-    fontFamily: theme.typography.body2.fontFamily,
-  },
-  bar: {
-    '&:hover': {
-      cursor: 'pointer',
-    },
-  },
-}))
-
 // Symbol used to store the timestamp in the payload without
 // interfering with the data keys.
 const TIMESTAMP_SYM = Symbol('timestamp')
@@ -79,7 +66,6 @@ export default function AlertCountLineGraph(
   props: AlertCountLineGraphProps,
 ): React.JSX.Element {
   const [active, setActive] = useState('')
-  const classes = useStyles()
   const theme = useTheme()
 
   function chooseColor(idx: number): string {
@@ -143,7 +129,13 @@ export default function AlertCountLineGraph(
   const data = React.useMemo(() => flattenData(props.data), [props.data])
 
   return (
-    <Grid container className={classes.graphContent}>
+    <Grid
+      container
+      sx={{
+        height: '500px',
+        fontFamily: (theme) => theme.typography.body2.fontFamily,
+      }}
+    >
       <Grid item xs={12} data-cy='alert-count-graph'>
         {props.loading && <Spinner />}
         <AutoSizer>
diff --git a/web/src/app/icons/components/Icons.tsx b/web/src/app/icons/components/Icons.tsx
index 6b314046e0..8be8ef8066 100644
--- a/web/src/app/icons/components/Icons.tsx
+++ b/web/src/app/icons/components/Icons.tsx
@@ -6,23 +6,11 @@ import WarningIcon from '@mui/icons-material/Warning'
 import slackIcon from '../../public/icons/slack.svg'
 import slackIconBlack from '../../public/icons/slack_monochrome_black.svg'
 import slackIconWhite from '../../public/icons/slack_monochrome_white.svg'
-import makeStyles from '@mui/styles/makeStyles'
 import { useTheme } from '@mui/material'
 import { Webhook } from '@mui/icons-material'
 
-const useStyles = makeStyles({
-  trashIcon: {
-    cursor: 'pointer',
-    float: 'right',
-  },
-  warningColor: {
-    color: '#FFD602',
-  },
-})
-
 export function Trash(): React.JSX.Element {
-  const classes = useStyles()
-  return <TrashIcon className={classes.trashIcon} />
+  return <TrashIcon sx={{ cursor: 'pointer', float: 'right' }} />
 }
 
 interface WarningProps {
@@ -44,10 +32,9 @@ interface WarningProps {
 
 export function Warning(props: WarningProps): React.JSX.Element {
   const { message, placement } = props
-  const classes = useStyles()
 
   const warningIcon = (
-    <WarningIcon data-cy='warning-icon' className={classes.warningColor} />
+    <WarningIcon data-cy='warning-icon' sx={{ color: '#FFD602' }} />
   )
 
   if (!message) {
diff --git a/web/src/app/lists/CreateFAB.tsx b/web/src/app/lists/CreateFAB.tsx
index 5c1f0b7c95..8aa9edb49a 100644
--- a/web/src/app/lists/CreateFAB.tsx
+++ b/web/src/app/lists/CreateFAB.tsx
@@ -1,32 +1,6 @@
 import React from 'react'
-import classnames from 'classnames'
 import AddIcon from '@mui/icons-material/Add'
 import { Fab, Tooltip, FabProps } from '@mui/material'
-import makeStyles from '@mui/styles/makeStyles'
-import { Theme } from '@mui/material/styles'
-
-const useStyles = makeStyles((theme: Theme) => ({
-  fab: {
-    position: 'fixed',
-    bottom: '16px',
-    right: '16px',
-    zIndex: 9001,
-  },
-  transitionUp: {
-    transform: 'translate3d(0, -62px, 0)',
-    transition: theme.transitions.create('transform', {
-      duration: theme.transitions.duration.enteringScreen,
-      easing: theme.transitions.easing.easeOut,
-    }),
-  },
-  transitionDown: {
-    transform: 'translate3d(0, 0, 0)',
-    transition: theme.transitions.create('transform', {
-      duration: theme.transitions.duration.leavingScreen,
-      easing: theme.transitions.easing.sharp,
-    }),
-  },
-}))
 
 interface CreateFabProps extends Omit<FabProps, 'children'> {
   title: string
@@ -35,11 +9,6 @@ interface CreateFabProps extends Omit<FabProps, 'children'> {
 
 export default function CreateFAB(props: CreateFabProps): React.JSX.Element {
   const { title, transition, ...fabProps } = props
-  const classes = useStyles()
-
-  const transitionClass = transition
-    ? classes.transitionUp
-    : classes.transitionDown
 
   return (
     <Tooltip title={title} aria-label={title} placement='left'>
@@ -47,7 +16,27 @@ export default function CreateFAB(props: CreateFabProps): React.JSX.Element {
         aria-label={title}
         data-cy='page-fab'
         color='secondary'
-        className={classnames(classes.fab, transitionClass)}
+        sx={(theme) => ({
+          position: 'fixed',
+          bottom: '16px',
+          right: '16px',
+          zIndex: 9001,
+          ...(transition
+            ? {
+                transform: 'translate3d(0, -62px, 0)',
+                transition: theme.transitions.create('transform', {
+                  duration: theme.transitions.duration.enteringScreen,
+                  easing: theme.transitions.easing.easeOut,
+                }),
+              }
+            : {
+                transform: 'translate3d(0, 0, 0)',
+                transition: theme.transitions.create('transform', {
+                  duration: theme.transitions.duration.leavingScreen,
+                  easing: theme.transitions.easing.sharp,
+                }),
+              }),
+        })}
         {...fabProps}
       >
         <AddIcon />
diff --git a/web/src/app/lists/FlatList.tsx b/web/src/app/lists/FlatList.tsx
index e1d0f431a5..0fe83445ce 100644
--- a/web/src/app/lists/FlatList.tsx
+++ b/web/src/app/lists/FlatList.tsx
@@ -11,7 +11,6 @@ import MUIListItem from '@mui/material/ListItem'
 import ListItemText from '@mui/material/ListItemText'
 import Typography from '@mui/material/Typography'
 import ListSubheader from '@mui/material/ListSubheader'
-import makeStyles from '@mui/styles/makeStyles'
 import { CSSTransition, TransitionGroup } from 'react-transition-group'
 import {
   Alert,
@@ -40,47 +39,16 @@ import { Notice, toSeverity } from '../details/Notices'
 import FlatListItem from './FlatListItem'
 import { DraggableListItem, getAnnouncements } from './DraggableListItem'
 import { ExpandLess, ExpandMore } from '@mui/icons-material'
-
-const useStyles = makeStyles({
-  alertAsButton: {
-    width: '100%',
-    marginTop: '6px',
-    marginBottom: '6px',
-    '&:hover, &.Mui-focusVisible': {
-      filter: 'brightness(90%)',
-    },
-  },
-  buttonBase: {
-    width: '100%',
-    borderRadius: 4,
-  },
-  slideEnter: {
-    maxHeight: '0px',
-    opacity: 0,
-    transform: 'translateX(-100%)',
-  },
-  slideEnterActive: {
-    maxHeight: '60px',
-    opacity: 1,
-    transform: 'translateX(0%)',
-    transition: 'all 500ms',
-  },
-  slideExit: {
-    maxHeight: '60px',
-    opacity: 1,
-    transform: 'translateX(0%)',
-  },
-  slideExitActive: {
-    maxHeight: '0px',
-    opacity: 0,
-    transform: 'translateX(-100%)',
-    transition: 'all 500ms',
-  },
-  subheader: {
-    backgroundColor: 'transparent',
-    paddingBottom: '4px',
-  },
-})
+import './flatListTransitions.css'
+
+// CSSTransition needs real CSS class names (not sx objects), so these
+// live in flatListTransitions.css alongside the component.
+const slideClassNames = {
+  enter: 'flat-list-slide-enter',
+  enterActive: 'flat-list-slide-enter-active',
+  exit: 'flat-list-slide-exit',
+  exitActive: 'flat-list-slide-exit-active',
+}
 
 const measuringConfig = {
   droppable: {
@@ -171,8 +139,6 @@ export default function FlatList({
   collapsable,
   ...listProps
 }: FlatListProps): React.JSX.Element {
-  const classes = useStyles()
-
   // collapsable sections state
   const [openSections, setOpenSections] = useState<React.ReactNode[]>(
     sections && sections.length ? [sections[0].title] : [],
@@ -247,12 +213,19 @@ export default function FlatList({
     if (item.handleOnClick) {
       return (
         <ButtonBase
-          className={classes.buttonBase}
+          sx={{ width: '100%', borderRadius: 1 }}
           onClick={item.handleOnClick}
           data-cy={item['data-cy']}
         >
           <Alert
-            className={classes.alertAsButton}
+            sx={{
+              width: '100%',
+              marginTop: '6px',
+              marginBottom: '6px',
+              '&:hover, &.Mui-focusVisible': {
+                filter: 'brightness(90%)',
+              },
+            }}
             key={idx}
             severity={toSeverity(item.type)}
             icon={item.icon}
@@ -285,8 +258,11 @@ export default function FlatList({
     return (
       <ListSubheader
         key={idx}
-        className={classes.subheader}
-        sx={item.disableGutter ? { pl: 0 } : null}
+        sx={{
+          backgroundColor: 'transparent',
+          paddingBottom: '4px',
+          ...(item.disableGutter ? { pl: 0 } : null),
+        }}
       >
         <Typography
           component='h2'
@@ -321,12 +297,7 @@ export default function FlatList({
             timeout={500}
             exit={Boolean(item.transition)}
             enter={Boolean(item.transition)}
-            classNames={{
-              enter: classes.slideEnter,
-              enterActive: classes.slideEnterActive,
-              exit: classes.slideExit,
-              exitActive: classes.slideExitActive,
-            }}
+            classNames={slideClassNames}
           >
             {renderNoticeItem(item, idx)}
           </CSSTransition>
@@ -336,12 +307,7 @@ export default function FlatList({
         <CSSTransition
           key={'item_' + item.id}
           timeout={500}
-          classNames={{
-            enter: classes.slideEnter,
-            enterActive: classes.slideEnterActive,
-            exit: classes.slideExit,
-            exitActive: classes.slideExitActive,
-          }}
+          classNames={slideClassNames}
         >
           <FlatListItem index={idx} item={item} />
         </CSSTransition>
diff --git a/web/src/app/lists/FlatListItem.tsx b/web/src/app/lists/FlatListItem.tsx
index 8e50c9b21f..8f2a1aa7c9 100644
--- a/web/src/app/lists/FlatListItem.tsx
+++ b/web/src/app/lists/FlatListItem.tsx
@@ -1,14 +1,12 @@
 import React, { useLayoutEffect } from 'react'
-import classnames from 'classnames'
 import ListItem from '@mui/material/ListItem'
 import ListItemButton from '@mui/material/ListItemButton'
 import ListItemIcon from '@mui/material/ListItemIcon'
 import ListItemText from '@mui/material/ListItemText'
-import makeStyles from '@mui/styles/makeStyles'
 import AppLink, { AppLinkListItem } from '../util/AppLink'
 import { FlatListItemOptions } from './FlatList'
 
-const useStyles = makeStyles(() => ({
+const classes = {
   listItem: {
     width: '100%',
     marginTop: '8px',
@@ -25,7 +23,7 @@ const useStyles = makeStyles(() => ({
   secondaryText: {
     whiteSpace: 'pre-line',
   },
-}))
+}
 
 export interface FlatListItemProps {
   item: FlatListItemOptions
@@ -35,8 +33,6 @@ export interface FlatListItemProps {
 export default function FlatListItem(
   props: FlatListItemProps,
 ): React.JSX.Element {
-  const classes = useStyles()
-
   const {
     highlight,
     selected,
@@ -84,11 +80,11 @@ export default function FlatListItem(
       {...linkProps}
       {...onClickProps}
       {...muiListItemProps}
-      className={classnames({
-        [classes.listItem]: !needsLiWrapper,
-        [classes.listItemDisabled]: disabled,
-        [classes.listItemDraggable]: draggable,
-      })}
+      sx={[
+        !needsLiWrapper && classes.listItem,
+        !!disabled && classes.listItemDisabled,
+        !!draggable && classes.listItemDraggable,
+      ]}
       selected={highlight}
     >
       {icon && <ListItemIcon tabIndex={-1}>{icon}</ListItemIcon>}
@@ -97,10 +93,7 @@ export default function FlatListItem(
         secondary={subText}
         disableTypography={disableTypography}
         secondaryTypographyProps={{
-          className: classnames({
-            [classes.secondaryText]: true,
-            [classes.listItemDisabled]: disabled,
-          }),
+          sx: [classes.secondaryText, !!disabled && classes.listItemDisabled],
           tabIndex: 0,
           component: typeof subText === 'string' ? 'p' : 'div',
         }}
@@ -115,9 +108,7 @@ export default function FlatListItem(
       ref={ref}
       disablePadding
       secondaryAction={secondaryAction}
-      className={classnames({
-        [classes.listItem]: true,
-      })}
+      sx={classes.listItem}
     >
       {button}
     </ListItem>
diff --git a/web/src/app/lists/ListHeader.tsx b/web/src/app/lists/ListHeader.tsx
index eba8f2a9f2..e991d93c21 100644
--- a/web/src/app/lists/ListHeader.tsx
+++ b/web/src/app/lists/ListHeader.tsx
@@ -1,12 +1,5 @@
 import React, { ReactNode } from 'react'
 import { CardHeader, Typography } from '@mui/material'
-import makeStyles from '@mui/styles/makeStyles'
-
-const useStyles = makeStyles(() => ({
-  headerNote: {
-    fontStyle: 'italic',
-  },
-}))
 
 export interface ListHeaderProps {
   // cardHeader will be displayed at the top of the card
@@ -17,7 +10,6 @@ export interface ListHeaderProps {
 }
 
 export function ListHeader(props: ListHeaderProps): React.JSX.Element {
-  const classes = useStyles()
   const { headerNote, headerAction, cardHeader } = props
   return (
     <React.Fragment>
@@ -25,7 +17,7 @@ export function ListHeader(props: ListHeaderProps): React.JSX.Element {
       {(headerNote || headerAction) && (
         <CardHeader
           subheader={
-            <Typography color='textSecondary' className={classes.headerNote}>
+            <Typography color='textSecondary' sx={{ fontStyle: 'italic' }}>
               {headerNote}
             </Typography>
           }
diff --git a/web/src/app/lists/PageControls.tsx b/web/src/app/lists/PageControls.tsx
index 0e3aca71bd..d296678e74 100644
--- a/web/src/app/lists/PageControls.tsx
+++ b/web/src/app/lists/PageControls.tsx
@@ -1,24 +1,8 @@
 import React from 'react'
-import { CircularProgress, Grid, IconButton, Theme } from '@mui/material'
-import makeStyles from '@mui/styles/makeStyles'
+import { CircularProgress, Grid, IconButton } from '@mui/material'
 import { ChevronLeft, ChevronRight } from '@mui/icons-material'
 import { ITEMS_PER_PAGE } from '../config'
 
-const useStyles = makeStyles((theme: Theme) => ({
-  progress: {
-    color: theme.palette.secondary.main,
-    position: 'absolute',
-  },
-  controls: {
-    [theme.breakpoints.down('sm')]: {
-      '&:not(:first-child)': {
-        marginBottom: '4.5em',
-        paddingBottom: '1em',
-      },
-    },
-  },
-}))
-
 export function PageControls(props: {
   loadMore?: (numberToLoad?: number) => void
   pageCount: number
@@ -26,7 +10,6 @@ export function PageControls(props: {
   setPage: (page: number) => void
   isLoading: boolean
 }): React.JSX.Element {
-  const classes = useStyles()
   const { loadMore, pageCount, page, setPage, isLoading } = props
 
   const hasNextPage = (() => {
@@ -66,7 +49,14 @@ export function PageControls(props: {
       spacing={1}
       justifyContent='flex-end'
       alignItems='center'
-      className={classes.controls}
+      sx={(theme) => ({
+        [theme.breakpoints.down('sm')]: {
+          '&:not(:first-child)': {
+            marginBottom: '4.5em',
+            paddingBottom: '1em',
+          },
+        },
+      })}
     >
       <Grid item>
         <IconButton
@@ -95,7 +85,10 @@ export function PageControls(props: {
             <CircularProgress
               color='secondary'
               size={24}
-              className={classes.progress}
+              sx={(theme) => ({
+                color: theme.palette.secondary.main,
+                position: 'absolute',
+              })}
             />
           )}
           <ChevronRight />
diff --git a/web/src/app/lists/flatListTransitions.css b/web/src/app/lists/flatListTransitions.css
new file mode 100644
index 0000000000..8087bbc4d3
--- /dev/null
+++ b/web/src/app/lists/flatListTransitions.css
@@ -0,0 +1,25 @@
+.flat-list-slide-enter {
+  max-height: 0;
+  opacity: 0;
+  transform: translateX(-100%);
+}
+
+.flat-list-slide-enter-active {
+  max-height: 60px;
+  opacity: 1;
+  transform: translateX(0%);
+  transition: all 500ms;
+}
+
+.flat-list-slide-exit {
+  max-height: 60px;
+  opacity: 1;
+  transform: translateX(0%);
+}
+
+.flat-list-slide-exit-active {
+  max-height: 0;
+  opacity: 0;
+  transform: translateX(-100%);
+  transition: all 500ms;
+}
diff --git a/web/src/app/styles/materialStyles.ts b/web/src/app/styles/materialStyles.ts
index efd320eb76..5328f9cfb6 100644
--- a/web/src/app/styles/materialStyles.ts
+++ b/web/src/app/styles/materialStyles.ts
@@ -1,7 +1,9 @@
 import { Theme } from '@mui/material/styles'
-import { StyleRules } from '@mui/styles'
+import { SxProps } from '@mui/material'
 
-export const styles = (theme: Theme): StyleRules => ({
+export const styles = (
+  theme: Theme,
+): Record<string, SxProps<Theme>> => ({
   // used on details pages on desktop
   card: {
     width: '75%',
diff --git a/web/src/app/util/ClickableText.tsx b/web/src/app/util/ClickableText.tsx
index 82f2880eaa..315a8269e8 100644
--- a/web/src/app/util/ClickableText.tsx
+++ b/web/src/app/util/ClickableText.tsx
@@ -1,15 +1,6 @@
 import React from 'react'
-import makeStyles from '@mui/styles/makeStyles'
 import Button, { ButtonProps } from '@mui/material/Button'
 
-const useStyles = makeStyles({
-  button: {
-    fontWeight: 'normal', // disable MUI bold
-    padding: '1px',
-    textTransform: 'none', // disable MUI uppercase
-  },
-})
-
 // ClickableText utilizes MUI's outlined button while adding some default  stylistic changes
 // since anchor elements have become entrenched with navigation by convention
 //
@@ -22,10 +13,13 @@ export default function ClickableText({
   type = 'button',
   ...props
 }: ButtonProps): JSX.Element {
-  const classes = useStyles()
   return (
     <Button
-      className={classes.button}
+      sx={{
+        fontWeight: 'normal', // disable MUI bold
+        padding: '1px',
+        textTransform: 'none', // disable MUI uppercase
+      }}
       color={color}
       size={size}
       type={type}
diff --git a/web/src/app/util/CopyText.tsx b/web/src/app/util/CopyText.tsx
index 9836b619ba..24921ead03 100644
--- a/web/src/app/util/CopyText.tsx
+++ b/web/src/app/util/CopyText.tsx
@@ -1,11 +1,11 @@
 import React, { useState } from 'react'
-import makeStyles from '@mui/styles/makeStyles'
 import copyToClipboard from './copyToClipboard'
 import ContentCopy from 'mdi-material-ui/ContentCopy'
 import AppLink from './AppLink'
-import { Typography, Tooltip, TooltipProps } from '@mui/material'
+import { Box, Typography, Tooltip, TooltipProps } from '@mui/material'
+import { SxProps, Theme } from '@mui/material/styles'
 
-const useStyles = makeStyles({
+const classes = {
   copyContainer: {
     alignItems: 'center',
     display: 'flex',
@@ -22,7 +22,7 @@ const useStyles = makeStyles({
     textUnderlineOffset: '0.25rem',
     textDecorationLine: 'underline',
   },
-})
+} satisfies Record<string, SxProps<Theme>>
 
 interface CopyTextProps {
   placement?: TooltipProps['placement']
@@ -33,14 +33,13 @@ interface CopyTextProps {
 }
 
 export default function CopyText(props: CopyTextProps): JSX.Element {
-  const classes = useStyles()
   const [copied, setCopied] = useState(false)
 
   let content
   if (props.asURL) {
     content = (
       <AppLink
-        className={classes.copyContainer}
+        sx={classes.copyContainer}
         to={props.value}
         onClick={(e) => {
           const tgt = e.currentTarget.href
@@ -51,7 +50,7 @@ export default function CopyText(props: CopyTextProps): JSX.Element {
         }}
       >
         <ContentCopy
-          className={props.title ? classes.icon : undefined}
+          sx={props.title ? classes.icon : undefined}
           fontSize='small'
         />
         {props.title}
@@ -59,8 +58,9 @@ export default function CopyText(props: CopyTextProps): JSX.Element {
     )
   } else if (props.noTypography) {
     content = (
-      <span
-        className={classes.copyContainer + ' ' + classes.noTypography}
+      <Box
+        component='span'
+        sx={[classes.copyContainer, classes.noTypography]}
         role='button'
         tabIndex={0}
         onClick={() => {
@@ -78,16 +78,16 @@ export default function CopyText(props: CopyTextProps): JSX.Element {
       >
         <ContentCopy
           color='primary'
-          className={props.title ? classes.icon : undefined}
+          sx={props.title ? classes.icon : undefined}
           fontSize='small'
         />
         {props.title}
-      </span>
+      </Box>
     )
   } else {
     content = (
       <Typography
-        className={classes.copyContainer}
+        sx={classes.copyContainer}
         role='button'
         tabIndex={0}
         onClick={() => {
@@ -105,7 +105,7 @@ export default function CopyText(props: CopyTextProps): JSX.Element {
       >
         <ContentCopy
           color='primary'
-          className={props.title ? classes.icon : undefined}
+          sx={props.title ? classes.icon : undefined}
           fontSize='small'
         />
         {props.title}
diff --git a/web/src/app/util/SkipToContentLink.tsx b/web/src/app/util/SkipToContentLink.tsx
index f2dbaca8e7..07c308df89 100644
--- a/web/src/app/util/SkipToContentLink.tsx
+++ b/web/src/app/util/SkipToContentLink.tsx
@@ -1,30 +1,27 @@
 import React from 'react'
 import Link from '@mui/material/Link'
-import makeStyles from '@mui/styles/makeStyles'
 import Typography from '@mui/material/Typography'
 
-const useStyles = makeStyles({
-  skipLink: {
-    position: 'static',
-    height: '1px',
-    width: '1px',
-    overflow: 'hidden',
-    clip: 'rect(1px, 1px, 1px, 1px)',
-    '&:focus, &:active': {
-      clip: 'auto !important',
-      display: 'block',
-      width: 'auto',
-      height: 'auto',
-      padding: '15px 23px 14px',
-      backgroundColor: '#ffffff',
-    },
-  },
-})
-
 export function SkipToContentLink(): JSX.Element {
-  const classes = useStyles()
   return (
-    <Link className={classes.skipLink} href='#content'>
+    <Link
+      sx={{
+        position: 'static',
+        height: '1px',
+        width: '1px',
+        overflow: 'hidden',
+        clip: 'rect(1px, 1px, 1px, 1px)',
+        '&:focus, &:active': {
+          clip: 'auto !important',
+          display: 'block',
+          width: 'auto',
+          height: 'auto',
+          padding: '15px 23px 14px',
+          backgroundColor: '#ffffff',
+        },
+      }}
+      href='#content'
+    >
       <Typography>Skip to content</Typography>
     </Link>
   )
diff --git a/web/src/app/util/SpeedDial.tsx b/web/src/app/util/SpeedDial.tsx
index c37b55875f..8ea66746b0 100644
--- a/web/src/app/util/SpeedDial.tsx
+++ b/web/src/app/util/SpeedDial.tsx
@@ -6,24 +6,6 @@ import {
   SpeedDialActionProps,
   SpeedDialProps,
 } from '@mui/material'
-import { makeStyles } from '@mui/styles'
-
-const useStyles = makeStyles({
-  speedDial: {
-    position: 'fixed',
-    bottom: '16px',
-    right: '16px',
-    zIndex: 9001,
-  },
-  staticTooltipLabel: {
-    whiteSpace: 'nowrap',
-  },
-  disabledStaticTooltipLabel: {
-    whiteSpace: 'nowrap',
-    color: 'rgb(138,138,138)',
-    backgroundColor: 'rgb(185,185,185)',
-  },
-})
 
 interface CustomSpeedDialProps {
   label: SpeedDialProps['ariaLabel']
@@ -40,7 +22,6 @@ export default function CustomSpeedDial(
   props: CustomSpeedDialProps,
 ): JSX.Element {
   const [open, setOpen] = useState(false)
-  const classes = useStyles()
 
   return (
     <SpeedDial
@@ -56,7 +37,12 @@ export default function CustomSpeedDial(
       onMouseEnter={() => setOpen(true)}
       onMouseLeave={() => setOpen(false)}
       open={open}
-      className={classes.speedDial}
+      sx={{
+        position: 'fixed',
+        bottom: '16px',
+        right: '16px',
+        zIndex: 9001,
+      }}
       TransitionProps={{
         unmountOnExit: true,
       }}
@@ -70,10 +56,14 @@ export default function CustomSpeedDial(
             icon={action.icon}
             tooltipTitle={action.label}
             tooltipOpen
-            classes={{
-              staticTooltipLabel: action.disabled
-                ? classes.disabledStaticTooltipLabel
-                : classes.staticTooltipLabel,
+            sx={{
+              '& .MuiSpeedDialAction-staticTooltipLabel': action.disabled
+                ? {
+                    whiteSpace: 'nowrap',
+                    color: 'rgb(138,138,138)',
+                    backgroundColor: 'rgb(185,185,185)',
+                  }
+                : { whiteSpace: 'nowrap' },
             }}
             aria-label={action.label}
             FabProps={{ disabled: action.disabled }}

From 3b319eb697e827317da4646f259995550e41d524 Mon Sep 17 00:00:00 2001
From: Forfold <nathaniel.cook@target.com>
Date: Fri, 24 Apr 2026 11:11:12 -0700
Subject: [PATCH 13/26] migrate makeStyles to sx: admin components

Remove @mui/styles makeStyles from AdminAPIKeys, AdminConfig,
AdminLimits, AdminSMSSend, AdminSection, AdminToolbox, SlackActions,
AdminAlertCounts, AlertCountTable, AdminAPIKeyDrawer,
AdminAPIKeyExpirationField, AdminMessageLogDrawer, and
AdminMessageLogsLayout.

Replace with inline sx props, Box components for theme-dependent
responsive styles, and slotProps for Dialog paper styling.
---
 web/src/app/admin/AdminAPIKeys.tsx            | 45 ++++++---------
 web/src/app/admin/AdminConfig.tsx             | 28 ++++------
 web/src/app/admin/AdminLimits.tsx             | 41 +++++---------
 web/src/app/admin/AdminSMSSend.tsx            | 11 +---
 web/src/app/admin/AdminSection.tsx            | 56 +++++++++----------
 web/src/app/admin/AdminToolbox.tsx            | 29 +++-------
 web/src/app/admin/SlackActions.tsx            | 18 +-----
 .../admin-alert-counts/AdminAlertCounts.tsx   | 12 +---
 .../admin-alert-counts/AlertCountTable.tsx    | 11 +---
 .../admin-api-keys/AdminAPIKeyDrawer.tsx      | 18 +++---
 .../AdminAPIKeyExpirationField.tsx            | 11 +---
 .../AdminMessageLogDrawer.tsx                 | 25 ++-------
 .../AdminMessageLogsLayout.tsx                | 36 +++++-------
 13 files changed, 113 insertions(+), 228 deletions(-)

diff --git a/web/src/app/admin/AdminAPIKeys.tsx b/web/src/app/admin/AdminAPIKeys.tsx
index 831b36f14e..e924e60e28 100644
--- a/web/src/app/admin/AdminAPIKeys.tsx
+++ b/web/src/app/admin/AdminAPIKeys.tsx
@@ -1,8 +1,6 @@
 import React, { Suspense, useMemo, useState } from 'react'
-import { Button, Card, Grid, Typography } from '@mui/material'
+import { Box, Button, Card, Grid, Typography } from '@mui/material'
 import { Add } from '@mui/icons-material'
-import makeStyles from '@mui/styles/makeStyles'
-import { Theme } from '@mui/material/styles'
 import { gql, useQuery } from 'urql'
 import { DateTime } from 'luxon'
 import AdminAPIKeysDrawer from './admin-api-keys/AdminAPIKeyDrawer'
@@ -33,26 +31,7 @@ const query = gql`
   }
 `
 
-const useStyles = makeStyles((theme: Theme) => ({
-  buttons: {
-    'margin-bottom': '15px',
-  },
-  containerDefault: {
-    [theme.breakpoints.up('md')]: {
-      maxWidth: '100%',
-      transition: `max-width ${theme.transitions.duration.leavingScreen}ms ease`,
-    },
-  },
-  containerSelected: {
-    [theme.breakpoints.up('md')]: {
-      maxWidth: '70%',
-      transition: `max-width ${theme.transitions.duration.enteringScreen}ms ease`,
-    },
-  },
-}))
-
 export default function AdminAPIKeys(): React.JSX.Element {
-  const classes = useStyles()
   const [selectedAPIKey, setSelectedAPIKey] = useState<GQLAPIKey | null>(null)
   const [createDialog, setCreateDialog] = useState<boolean>(false)
   const [createFromID, setCreateFromID] = useState('')
@@ -225,16 +204,28 @@ export default function AdminAPIKeys(): React.JSX.Element {
           />
         )}
       </Suspense>
-      <div
-        className={
-          selectedAPIKey ? classes.containerSelected : classes.containerDefault
+      <Box
+        sx={(theme) =>
+          selectedAPIKey
+            ? {
+                [theme.breakpoints.up('md')]: {
+                  maxWidth: '70%',
+                  transition: `max-width ${theme.transitions.duration.enteringScreen}ms ease`,
+                },
+              }
+            : {
+                [theme.breakpoints.up('md')]: {
+                  maxWidth: '100%',
+                  transition: `max-width ${theme.transitions.duration.leavingScreen}ms ease`,
+                },
+              }
         }
       >
         <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
           <Button
             data-cy='new'
             variant='contained'
-            className={classes.buttons}
+            sx={{ mb: '15px' }}
             onClick={() => setCreateDialog(true)}
             startIcon={<Add />}
           >
@@ -244,7 +235,7 @@ export default function AdminAPIKeys(): React.JSX.Element {
         <Card sx={{ width: '100%', padding: '0px' }}>
           <FlatList emptyMessage='No Results' items={items} />
         </Card>
-      </div>
+      </Box>
     </React.Fragment>
   )
 }
diff --git a/web/src/app/admin/AdminConfig.tsx b/web/src/app/admin/AdminConfig.tsx
index fc4dc2e3d6..32b2550d9c 100644
--- a/web/src/app/admin/AdminConfig.tsx
+++ b/web/src/app/admin/AdminConfig.tsx
@@ -5,8 +5,7 @@ import ButtonGroup from '@mui/material/ButtonGroup'
 import Divider from '@mui/material/Divider'
 import Grid from '@mui/material/Grid'
 import Typography from '@mui/material/Typography'
-import makeStyles from '@mui/styles/makeStyles'
-import { Theme } from '@mui/material/styles'
+import { SxProps, Theme } from '@mui/material/styles'
 import _, { startCase, isEmpty, uniq, chain } from 'lodash'
 import AdminSection from './AdminSection'
 import AdminDialog from './AdminDialog'
@@ -43,31 +42,25 @@ const query = gql`
   }
 `
 
-const useStyles = makeStyles((theme: Theme) => ({
+const classes = {
   accordionDetails: {
     padding: 0,
     display: 'block',
   },
-  form: {
-    width: '100%',
-  },
-  saveDisabled: {
-    color: 'rgba(255, 255, 255, 0.5)',
-  },
   heading: {
     fontSize: '1.1rem',
     flexBasis: '33.33%',
     flexShrink: 0,
   },
-  secondaryHeading: {
+  secondaryHeading: (theme: Theme) => ({
     fontSize: theme.typography.pxToRem(15),
     color: theme.palette.text.secondary,
     flexGrow: 1,
-  },
+  }),
   changeChip: {
     justifyContent: 'flex-end',
   },
-}))
+} satisfies Record<string, SxProps<Theme>>
 
 interface ConfigValues {
   [id: string]: string
@@ -82,7 +75,6 @@ function formatHeading(s = ''): string {
 }
 
 export default function AdminConfig(): React.JSX.Element {
-  const classes = useStyles()
   const [confirm, setConfirm] = useState(false)
   const [values, setValues] = useState({})
   const [section, setSection] = useState(false as false | string)
@@ -181,17 +173,17 @@ export default function AdminConfig(): React.JSX.Element {
               <Typography
                 component='h2'
                 variant='subtitle1'
-                className={classes.heading}
+                sx={classes.heading}
               >
                 {formatHeading(groupID)}
               </Typography>
-              <Typography className={classes.secondaryHeading}>
+              <Typography sx={classes.secondaryHeading}>
                 {hasEnable(groupID) &&
                   (isEnabled(groupID) ? 'Enabled' : 'Disabled')}
               </Typography>
               {(changeCount(groupID) && (
                 <Chip
-                  className={classes.changeChip}
+                  sx={classes.changeChip}
                   size='small'
                   label={`${changeCount(groupID)} unsaved change${
                     changeCount(groupID) === 1 ? '' : 's'
@@ -204,10 +196,10 @@ export default function AdminConfig(): React.JSX.Element {
             <AccordionDetails
               id={`accordion-sect-${groupID}`}
               aria-labelledby={`accordion-${groupID}`}
-              className={classes.accordionDetails}
+              sx={classes.accordionDetails}
               role='region'
             >
-              <Form className={classes.form}>
+              <Form style={{ width: '100%' }}>
                 <AdminSection
                   value={values}
                   onChange={(id: string, value: null | string) =>
diff --git a/web/src/app/admin/AdminLimits.tsx b/web/src/app/admin/AdminLimits.tsx
index 1563e48ef4..add333a7f4 100644
--- a/web/src/app/admin/AdminLimits.tsx
+++ b/web/src/app/admin/AdminLimits.tsx
@@ -4,8 +4,7 @@ import Button from '@mui/material/Button'
 import ButtonGroup from '@mui/material/ButtonGroup'
 import Card from '@mui/material/Card'
 import Grid from '@mui/material/Grid'
-import makeStyles from '@mui/styles/makeStyles'
-import { Theme } from '@mui/material/styles'
+import Box from '@mui/material/Box'
 import { startCase, isEmpty } from 'lodash'
 import AdminDialog from './AdminDialog'
 import { Form } from '../forms'
@@ -29,31 +28,11 @@ const mutation = gql`
   }
 `
 
-const useStyles = makeStyles((theme: Theme) => ({
-  actionsContainer: {
-    display: 'flex',
-    justifyContent: 'flex-end',
-  },
-  gridContainer: {
-    [theme.breakpoints.up('md')]: {
-      maxWidth: '65%',
-    },
-  },
-  groupTitle: {
-    fontSize: '1.1rem',
-  },
-  pageContainer: {
-    display: 'flex',
-    justifyContent: 'center',
-  },
-}))
-
 interface LimitsValues {
   [id: string]: string
 }
 
 export default function AdminLimits(): React.JSX.Element {
-  const classes = useStyles()
   const [confirm, setConfirm] = useState(false)
   const [values, setValues] = useState({})
 
@@ -80,9 +59,19 @@ export default function AdminLimits(): React.JSX.Element {
   }
 
   return (
-    <div className={classes.pageContainer}>
-      <Grid container spacing={2} className={classes.gridContainer}>
-        <Grid item xs={12} className={classes.actionsContainer}>
+    <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+      <Grid
+        container
+        spacing={2}
+        sx={(theme) => ({
+          [theme.breakpoints.up('md')]: { maxWidth: '65%' },
+        })}
+      >
+        <Grid
+          item
+          xs={12}
+          sx={{ display: 'flex', justifyContent: 'flex-end' }}
+        >
           <ButtonGroup variant='outlined'>
             <Button
               data-cy='reset'
@@ -138,6 +127,6 @@ export default function AdminLimits(): React.JSX.Element {
           </Form>
         </Grid>
       </Grid>
-    </div>
+    </Box>
   )
 }
diff --git a/web/src/app/admin/AdminSMSSend.tsx b/web/src/app/admin/AdminSMSSend.tsx
index c5984d15b0..f2bda06dbb 100644
--- a/web/src/app/admin/AdminSMSSend.tsx
+++ b/web/src/app/admin/AdminSMSSend.tsx
@@ -13,7 +13,6 @@ import {
   TextField,
   Typography,
 } from '@mui/material'
-import makeStyles from '@mui/styles/makeStyles'
 import OpenInNewIcon from '@mui/icons-material/OpenInNew'
 
 import { useConfigValue } from '../util/RequireConfig'
@@ -44,15 +43,7 @@ const sendSMSMutation = gql`
   }
 `
 
-const useStyles = makeStyles({
-  twilioLink: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-})
-
 export default function AdminSMSSend(): React.JSX.Element {
-  const classes = useStyles()
   const [cfgFromNumber, cfgSID] = useConfigValue(
     'Twilio.FromNumber',
     'Twilio.MessagingServiceSID',
@@ -138,7 +129,7 @@ export default function AdminSMSSend(): React.JSX.Element {
             <LoadingButton buttonText='Send' loading={smsLoading} />
             {smsData?.debugSendSMS && (
               <AppLink to={smsData.debugSendSMS.providerURL} newTab>
-                <div className={classes.twilioLink}>
+                <div style={{ display: 'flex', alignItems: 'center' }}>
                   <Typography>{details} Open in Twilio&nbsp;</Typography>
                   <OpenInNewIcon fontSize='small' />
                 </div>
diff --git a/web/src/app/admin/AdminSection.tsx b/web/src/app/admin/AdminSection.tsx
index 12a676ee03..8637961757 100644
--- a/web/src/app/admin/AdminSection.tsx
+++ b/web/src/app/admin/AdminSection.tsx
@@ -3,10 +3,9 @@ import List from '@mui/material/List'
 import ListItem from '@mui/material/ListItem'
 import ListItemText from '@mui/material/ListItemText'
 import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
 import { FormContainer } from '../forms'
 import _, { defaultTo } from 'lodash'
-import { Theme } from '@mui/material/styles'
-import makeStyles from '@mui/styles/makeStyles'
 import {
   StringInput,
   StringListInput,
@@ -34,34 +33,10 @@ interface AdminSectionProps {
   onChange: (id: string, value: null | string) => void
 }
 
-const useStyles = makeStyles((theme: Theme) => ({
-  listItem: {
-    // leaves some room around fields without descriptions
-    // 71px is the height of the checkbox field without w/o a desc
-    minHeight: '71px',
-    padding: '1em',
-  },
-  listItemText: {
-    maxWidth: '50%',
-    [theme.breakpoints.up('md')]: {
-      maxWidth: '65%',
-    },
-  },
-  listItemAction: {
-    width: '50%',
-    [theme.breakpoints.up('md')]: {
-      width: '35%',
-    },
-    display: 'flex',
-    justifyContent: 'flex-end',
-  },
-}))
-
 export default function AdminSection(
   props: AdminSectionProps,
 ): React.JSX.Element {
   // TODO: add 'reset to default' buttons
-  const classes = useStyles()
   const { fields, value, headerNote } = props
 
   return (
@@ -83,12 +58,22 @@ export default function AdminSection(
           return (
             <ListItem
               key={f.id}
-              className={classes.listItem}
+              sx={(theme) => ({
+                minHeight: '71px',
+                padding: '1em',
+                ...(_.has(value, f.id)
+                  ? { bgcolor: 'action.selected' }
+                  : {}),
+              })}
               divider={idx !== fields.length - 1}
-              sx={_.has(value, f.id) ? { bgcolor: 'action.selected' } : {}}
             >
               <ListItemText
-                className={classes.listItemText}
+                sx={(theme) => ({
+                  maxWidth: '50%',
+                  [theme.breakpoints.up('md')]: {
+                    maxWidth: '65%',
+                  },
+                })}
                 primary={(f.deprecated ? '* ' : '') + f.label}
                 secondary={
                   f.deprecated ? (
@@ -107,7 +92,16 @@ export default function AdminSection(
                   )
                 }
               />
-              <div className={classes.listItemAction}>
+              <Box
+                sx={(theme) => ({
+                  width: '50%',
+                  [theme.breakpoints.up('md')]: {
+                    width: '35%',
+                  },
+                  display: 'flex',
+                  justifyContent: 'flex-end',
+                })}
+              >
                 <Field
                   name={f.id}
                   value={defaultTo(value[f.id], f.value)}
@@ -116,7 +110,7 @@ export default function AdminSection(
                     props.onChange(f.id, val === f.value ? null : val)
                   }
                 />
-              </div>
+              </Box>
             </ListItem>
           )
         })}
diff --git a/web/src/app/admin/AdminToolbox.tsx b/web/src/app/admin/AdminToolbox.tsx
index 1c8805ebb4..65d7bfd7bf 100644
--- a/web/src/app/admin/AdminToolbox.tsx
+++ b/web/src/app/admin/AdminToolbox.tsx
@@ -1,28 +1,11 @@
 import React from 'react'
 import Grid from '@mui/material/Grid'
 import Typography from '@mui/material/Typography'
-import makeStyles from '@mui/styles/makeStyles'
-import { Theme } from '@mui/material/styles'
 import AdminNumberLookup from './AdminNumberLookup'
 import AdminSMSSend from './AdminSMSSend'
 import { useConfigValue } from '../util/RequireConfig'
 
-const useStyles = makeStyles((theme: Theme) => ({
-  gridContainer: {
-    [theme.breakpoints.up('md')]: {
-      justifyContent: 'center',
-    },
-  },
-  groupTitle: {
-    fontSize: '1.1rem',
-  },
-  saveDisabled: {
-    color: 'rgba(255, 255, 255, 0.5)',
-  },
-}))
-
 export default function AdminToolbox(): React.JSX.Element {
-  const classes = useStyles()
 
   const [hasTwilio] = useConfigValue('Twilio.Enable')
 
@@ -36,14 +19,20 @@ export default function AdminToolbox(): React.JSX.Element {
   }
 
   return (
-    <Grid container spacing={2} className={classes.gridContainer}>
+    <Grid
+      container
+      spacing={2}
+      sx={(theme) => ({
+        [theme.breakpoints.up('md')]: { justifyContent: 'center' },
+      })}
+    >
       <Grid container item xs={12}>
         <Grid item xs={12}>
           <Typography
             component='h2'
             variant='subtitle1'
             color='textSecondary'
-            classes={{ subtitle1: classes.groupTitle }}
+            sx={{ fontSize: '1.1rem' }}
           >
             Twilio Number Lookup
           </Typography>
@@ -58,7 +47,7 @@ export default function AdminToolbox(): React.JSX.Element {
             component='h2'
             variant='subtitle1'
             color='textSecondary'
-            classes={{ subtitle1: classes.groupTitle }}
+            sx={{ fontSize: '1.1rem' }}
           >
             Send SMS
           </Typography>
diff --git a/web/src/app/admin/SlackActions.tsx b/web/src/app/admin/SlackActions.tsx
index 845343432a..9011005c23 100644
--- a/web/src/app/admin/SlackActions.tsx
+++ b/web/src/app/admin/SlackActions.tsx
@@ -1,5 +1,4 @@
 import React, { useState } from 'react'
-import makeStyles from '@mui/styles/makeStyles'
 import Button from '@mui/material/Button'
 import Dialog from '@mui/material/Dialog'
 import DialogActions from '@mui/material/DialogActions'
@@ -22,18 +21,7 @@ const query = gql`
   }
 `
 
-const useStyles = makeStyles({
-  copyButton: {
-    float: 'right',
-    padding: '12px',
-  },
-  dialog: {
-    minHeight: '650px',
-  },
-})
-
 export default function SlackActions(): React.JSX.Element {
-  const classes = useStyles()
   const [showManifest, setShowManifest] = useState(false)
 
   const [{ fetching, error, data }] = useQuery({ query })
@@ -45,7 +33,7 @@ export default function SlackActions(): React.JSX.Element {
 
     return (
       <div>
-        <div className={classes.copyButton}>
+        <div style={{ float: 'right', padding: '12px' }}>
           <CopyText value={manifest} placement='left' />
         </div>
         <Markdown value={'```\n' + manifest + '\n```'} />
@@ -67,8 +55,8 @@ export default function SlackActions(): React.JSX.Element {
         ]}
       />
       <Dialog
-        classes={{
-          paper: classes.dialog,
+        slotProps={{
+          paper: { sx: { minHeight: '650px' } },
         }}
         open={showManifest}
         onClose={() => setShowManifest(false)}
diff --git a/web/src/app/admin/admin-alert-counts/AdminAlertCounts.tsx b/web/src/app/admin/admin-alert-counts/AdminAlertCounts.tsx
index 54b32bdfab..a0adbff6c8 100644
--- a/web/src/app/admin/admin-alert-counts/AdminAlertCounts.tsx
+++ b/web/src/app/admin/admin-alert-counts/AdminAlertCounts.tsx
@@ -1,7 +1,5 @@
 import React, { useMemo, useState } from 'react'
 import { Grid, Card, CardContent, CardHeader } from '@mui/material'
-import makeStyles from '@mui/styles/makeStyles'
-import { Theme } from '@mui/material/styles'
 import AlertCountControls from './AlertCountControls'
 import { useURLParams } from '../../actions'
 import { DateTime, Duration, Interval, DateTimeUnit } from 'luxon'
@@ -13,12 +11,6 @@ import AlertCountLineGraph from './AlertCountLineGraph'
 import AlertCountTable from './AlertCountTable'
 import { AlertCountOpts, AlertCountSeries } from './useAdminAlertCounts'
 
-const useStyles = makeStyles((theme: Theme) => ({
-  card: {
-    marginTop: theme.spacing(1),
-  },
-}))
-
 const units: Record<string, DateTimeUnit> = {
   PT1M: 'minute',
   PT1H: 'hour',
@@ -28,8 +20,6 @@ const units: Record<string, DateTimeUnit> = {
 }
 
 export default function AdminAlertCounts(): React.JSX.Element {
-  const styles = useStyles()
-
   const [graphData, setGraphData] = useState<AlertCountSeries[]>([])
   const now = useMemo(() => DateTime.now(), [])
 
@@ -81,7 +71,7 @@ export default function AdminAlertCounts(): React.JSX.Element {
     <Grid container spacing={2}>
       <Grid item xs={12}>
         <AlertCountControls />
-        <Card className={styles.card}>
+        <Card sx={{ mt: 1 }}>
           <CardHeader
             title='Alert Counts'
             subheader={`Number of alerts created by services over the past ${dayCount} ${unit}s`}
diff --git a/web/src/app/admin/admin-alert-counts/AlertCountTable.tsx b/web/src/app/admin/admin-alert-counts/AlertCountTable.tsx
index c493eee103..6f369f1eb2 100644
--- a/web/src/app/admin/admin-alert-counts/AlertCountTable.tsx
+++ b/web/src/app/admin/admin-alert-counts/AlertCountTable.tsx
@@ -13,7 +13,6 @@ import {
   GridValidRowModel,
 } from '@mui/x-data-grid'
 import { Button, Grid } from '@mui/material'
-import { makeStyles } from '@mui/styles'
 import DownloadIcon from '@mui/icons-material/Download'
 import AppLink from '../../util/AppLink'
 import { AlertCountSeries } from './useAdminAlertCounts'
@@ -29,12 +28,6 @@ interface AlertCountTableProps {
   setGraphData: (data: AlertCountSeries[]) => void
 }
 
-const useStyles = makeStyles(() => ({
-  tableContent: {
-    height: '400px',
-  },
-}))
-
 const columns = [
   {
     field: 'serviceName',
@@ -87,8 +80,6 @@ const columns = [
 export default function AlertCountTable(
   props: AlertCountTableProps,
 ): React.JSX.Element {
-  const classes = useStyles()
-
   const csvOpts = useMemo(
     () => ({
       urlPrefix: location.origin + pathPrefix,
@@ -149,7 +140,7 @@ export default function AlertCountTable(
   }
 
   return (
-    <Grid container className={classes.tableContent}>
+    <Grid container sx={{ height: '400px' }}>
       <Grid item xs={12} data-cy='alert-count-table'>
         <DataGrid
           rows={props.alertCounts ?? []}
diff --git a/web/src/app/admin/admin-api-keys/AdminAPIKeyDrawer.tsx b/web/src/app/admin/admin-api-keys/AdminAPIKeyDrawer.tsx
index 4aff42af09..c3bda9f56f 100644
--- a/web/src/app/admin/admin-api-keys/AdminAPIKeyDrawer.tsx
+++ b/web/src/app/admin/admin-api-keys/AdminAPIKeyDrawer.tsx
@@ -12,7 +12,6 @@ import {
   Button,
   ButtonGroup,
 } from '@mui/material'
-import makeStyles from '@mui/styles/makeStyles'
 import { GQLAPIKey } from '../../../schema'
 import AdminAPIKeyDeleteDialog from './AdminAPIKeyDeleteDialog'
 import AdminAPIKeyEditDialog from './AdminAPIKeyEditDialog'
@@ -58,14 +57,6 @@ interface Props {
   onDuplicateClick: () => void
 }
 
-const useStyles = makeStyles(() => ({
-  buttons: {
-    textAlign: 'right',
-    width: '30vw',
-    padding: '15px 10px',
-  },
-}))
-
 function ActionBy(props: {
   label: string
   time?: string
@@ -91,7 +82,6 @@ function ActionBy(props: {
 
 export default function AdminAPIKeyDrawer(props: Props): React.JSX.Element {
   const { onClose, apiKeyID } = props
-  const classes = useStyles()
   const isOpen = Boolean(apiKeyID)
   const [deleteDialog, setDialogDialog] = useState(false)
   const [editDialog, setEditDialog] = useState(false)
@@ -208,7 +198,13 @@ export default function AdminAPIKeyDrawer(props: Props): React.JSX.Element {
               name={lastUsed ? lastUsed.ua + ' from ' + lastUsed.ip : ''}
             />
           </List>
-          <Grid className={classes.buttons}>
+          <Grid
+            sx={{
+              textAlign: 'right',
+              width: '30vw',
+              padding: '15px 10px',
+            }}
+          >
             <ButtonGroup variant='contained'>
               <Button onClick={() => setDialogDialog(true)}>Delete</Button>
               <Button onClick={() => setEditDialog(true)}>Edit</Button>
diff --git a/web/src/app/admin/admin-api-keys/AdminAPIKeyExpirationField.tsx b/web/src/app/admin/admin-api-keys/AdminAPIKeyExpirationField.tsx
index b2adb48af7..d9c0999c25 100644
--- a/web/src/app/admin/admin-api-keys/AdminAPIKeyExpirationField.tsx
+++ b/web/src/app/admin/admin-api-keys/AdminAPIKeyExpirationField.tsx
@@ -4,18 +4,12 @@ import MenuItem from '@mui/material/MenuItem'
 import Select from '@mui/material/Select'
 import Grid from '@mui/material/Grid'
 import { Typography } from '@mui/material'
-import makeStyles from '@mui/styles/makeStyles'
 import { ISODateTimePicker } from '../../util/ISOPickers'
 import { DateTime } from 'luxon'
 import { Time } from '../../util/Time'
 import { selectedDaysUntilTimestamp } from './util'
 
-const useStyles = makeStyles(() => ({
-  expiresCon: {
-    'padding-top': '15px',
-  },
-}))
-// props object for this compoenent
+// props object for this component
 interface FieldProps {
   onChange: (val: string) => void
   value: string
@@ -28,7 +22,6 @@ const presets = [7, 15, 30, 60, 90]
 export default function AdminAPIKeyExpirationField(
   props: FieldProps,
 ): React.JSX.Element {
-  const classes = useStyles()
 
   const [selected, setSelected] = useState<number>(
     selectedDaysUntilTimestamp(props.value, presets),
@@ -83,7 +76,7 @@ export default function AdminAPIKeyExpirationField(
             gutterBottom
             variant='subtitle2'
             component='div'
-            className={classes.expiresCon}
+            sx={{ pt: '15px' }}
           >
             The token will expire <Time time={props.value} />
           </Typography>
diff --git a/web/src/app/admin/admin-message-logs/AdminMessageLogDrawer.tsx b/web/src/app/admin/admin-message-logs/AdminMessageLogDrawer.tsx
index ce05dbdb1d..8b3e1c2138 100644
--- a/web/src/app/admin/admin-message-logs/AdminMessageLogDrawer.tsx
+++ b/web/src/app/admin/admin-message-logs/AdminMessageLogDrawer.tsx
@@ -10,8 +10,6 @@ import {
   Toolbar,
   Typography,
 } from '@mui/material'
-import makeStyles from '@mui/styles/makeStyles'
-import { Theme } from '@mui/material/styles'
 import { OpenInNew } from '@mui/icons-material'
 import { DateTime } from 'luxon'
 import AppLink from '../../util/AppLink'
@@ -23,19 +21,8 @@ interface Props {
   log: DebugMessage | null
 }
 
-const useStyles = makeStyles((theme: Theme) => ({
-  appLink: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  appLinkIcon: {
-    paddingLeft: theme.spacing(0.5),
-  },
-}))
-
 export default function AdminMessageLogDrawer(props: Props): React.JSX.Element {
   const { onClose, log } = props
-  const classes = useStyles()
 
   const isOpen = Boolean(log)
 
@@ -113,13 +100,13 @@ export default function AdminMessageLogDrawer(props: Props): React.JSX.Element {
                   primary='User'
                   secondary={
                     <AppLink
-                      className={classes.appLink}
+                      style={{ display: 'flex', alignItems: 'center' }}
                       to={`/users/${log?.userID}`}
                       newTab
                     >
                       {log.userName}
                       <OpenInNew
-                        className={classes.appLinkIcon}
+                        sx={{ pl: 0.5 }}
                         fontSize='small'
                       />
                     </AppLink>
@@ -134,13 +121,13 @@ export default function AdminMessageLogDrawer(props: Props): React.JSX.Element {
                   primary='Service'
                   secondary={
                     <AppLink
-                      className={classes.appLink}
+                      style={{ display: 'flex', alignItems: 'center' }}
                       to={`/services/${log.serviceID}`}
                       newTab
                     >
                       {log.serviceName}
                       <OpenInNew
-                        className={classes.appLinkIcon}
+                        sx={{ pl: 0.5 }}
                         fontSize='small'
                       />
                     </AppLink>
@@ -155,13 +142,13 @@ export default function AdminMessageLogDrawer(props: Props): React.JSX.Element {
                   primary='Alert'
                   secondary={
                     <AppLink
-                      className={classes.appLink}
+                      style={{ display: 'flex', alignItems: 'center' }}
                       to={`/alerts/${log.alertID}`}
                       newTab
                     >
                       {log.alertID}
                       <OpenInNew
-                        className={classes.appLinkIcon}
+                        sx={{ pl: 0.5 }}
                         fontSize='small'
                       />
                     </AppLink>
diff --git a/web/src/app/admin/admin-message-logs/AdminMessageLogsLayout.tsx b/web/src/app/admin/admin-message-logs/AdminMessageLogsLayout.tsx
index 98aecf5be5..7e5b6a476e 100644
--- a/web/src/app/admin/admin-message-logs/AdminMessageLogsLayout.tsx
+++ b/web/src/app/admin/admin-message-logs/AdminMessageLogsLayout.tsx
@@ -1,7 +1,5 @@
 import React, { useState } from 'react'
-import { Chip, Grid, Typography } from '@mui/material'
-import makeStyles from '@mui/styles/makeStyles'
-import { Theme } from '@mui/material/styles'
+import { Box, Chip, Grid, Typography } from '@mui/material'
 import { DateTime } from 'luxon'
 import { gql, useQuery } from 'urql'
 import AdminMessageLogsControls from './AdminMessageLogsControls'
@@ -39,25 +37,9 @@ const query = gql`
   }
 `
 
-const useStyles = makeStyles((theme: Theme) => ({
-  containerDefault: {
-    [theme.breakpoints.up('md')]: {
-      maxWidth: '100%',
-      transition: `max-width ${theme.transitions.duration.leavingScreen}ms ease`,
-    },
-  },
-  containerSelected: {
-    [theme.breakpoints.up('md')]: {
-      maxWidth: '70%',
-      transition: `max-width ${theme.transitions.duration.enteringScreen}ms ease`,
-    },
-  },
-}))
-
 const context = { suspense: false }
 
 export default function AdminMessageLogsLayout(): React.JSX.Element {
-  const classes = useStyles()
   const [selectedLog, setSelectedLog] = useState<DebugMessage | null>(null)
 
   const [{ search, start, end }] = useMessageLogsParams()
@@ -140,8 +122,20 @@ export default function AdminMessageLogsLayout(): React.JSX.Element {
       <Grid
         container
         spacing={2}
-        className={
-          selectedLog ? classes.containerSelected : classes.containerDefault
+        sx={(theme) =>
+          selectedLog
+            ? {
+                [theme.breakpoints.up('md')]: {
+                  maxWidth: '70%',
+                  transition: `max-width ${theme.transitions.duration.enteringScreen}ms ease`,
+                },
+              }
+            : {
+                [theme.breakpoints.up('md')]: {
+                  maxWidth: '100%',
+                  transition: `max-width ${theme.transitions.duration.leavingScreen}ms ease`,
+                },
+              }
         }
       >
         <Grid item xs={12}>

From cd96194887a4b6cb492a8325a3b978ae9d9bf1b3 Mon Sep 17 00:00:00 2001
From: Forfold <nathaniel.cook@target.com>
Date: Fri, 24 Apr 2026 11:11:21 -0700
Subject: [PATCH 14/26] migrate makeStyles to sx: alerts, AlertCountGraph

Remove @mui/styles makeStyles from AlertDetailLogs, AlertsList,
CreateAlertDialog, and AlertCountGraph.

Replace with inline sx props and a plain CSS file for the recharts
Bar hover cursor (AlertCountGraph.css).
---
 web/src/app/alerts/AlertDetailLogs.tsx        | 11 +-------
 web/src/app/alerts/AlertsList.tsx             | 11 +-------
 .../CreateAlertDialog/CreateAlertDialog.tsx   | 22 +++++----------
 .../services/AlertMetrics/AlertCountGraph.css |  3 +++
 .../services/AlertMetrics/AlertCountGraph.tsx | 27 +++++++------------
 5 files changed, 21 insertions(+), 53 deletions(-)
 create mode 100644 web/src/app/services/AlertMetrics/AlertCountGraph.css

diff --git a/web/src/app/alerts/AlertDetailLogs.tsx b/web/src/app/alerts/AlertDetailLogs.tsx
index 5a14611ec0..f81cf5bcec 100644
--- a/web/src/app/alerts/AlertDetailLogs.tsx
+++ b/web/src/app/alerts/AlertDetailLogs.tsx
@@ -5,7 +5,6 @@ import Button from '@mui/material/Button'
 import List from '@mui/material/List'
 import ListItem from '@mui/material/ListItem'
 import ListItemText from '@mui/material/ListItemText'
-import makeStyles from '@mui/styles/makeStyles'
 import _ from 'lodash'
 import { POLL_INTERVAL } from '../config'
 import { Time } from '../util/Time'
@@ -51,13 +50,6 @@ const query = gql`
   }
 `
 
-const useStyles = makeStyles({
-  logTimeContainer: {
-    width: 'max-content',
-  },
-  sentAccordian: {},
-})
-
 const assertNever = (s: never): never => {
   throw new Error('Unknown notification status: ' + s)
 }
@@ -151,7 +143,6 @@ interface LogEventProps {
 }
 
 function LogEventHeader(props: LogEventProps): React.ReactNode {
-  const classes = useStyles()
   const details = _.upperFirst(props.event?.state?.details ?? '')
   const status = (props.event?.state?.status ?? '') as NotificationStatus
   return (
@@ -165,7 +156,7 @@ function LogEventHeader(props: LogEventProps): React.ReactNode {
       />
       <div>
         <ListItemText
-          className={classes.logTimeContainer}
+          sx={{ width: 'max-content' }}
           secondary={
             <Time
               time={props.event.timestamp}
diff --git a/web/src/app/alerts/AlertsList.tsx b/web/src/app/alerts/AlertsList.tsx
index 67ebbb0fd7..b628feab24 100644
--- a/web/src/app/alerts/AlertsList.tsx
+++ b/web/src/app/alerts/AlertsList.tsx
@@ -2,7 +2,6 @@ import React, { ReactElement, useState, useContext, useEffect } from 'react'
 import { useMutation } from '@apollo/client'
 import { useQuery, gql } from 'urql'
 import { Box, Grid, ListItemText } from '@mui/material'
-import makeStyles from '@mui/styles/makeStyles'
 import {
   ArrowUpward as EscalateIcon,
   Check as AcknowledgeIcon,
@@ -84,12 +83,6 @@ const escalateMutation = gql`
   }
 `
 
-const useStyles = makeStyles({
-  alertTimeContainer: {
-    width: 'max-content',
-  },
-})
-
 function getStatusFilter(s: string): string[] {
   switch (s) {
     case 'acknowledged':
@@ -107,8 +100,6 @@ function getStatusFilter(s: string): string[] {
 }
 
 export default function AlertsList(props: AlertsListProps): React.JSX.Element {
-  const classes = useStyles()
-
   // event sent to Google Analytics
   const [event, setEvent] = useState('')
   const [analyticsID] = useConfigValue('General.GoogleAnalyticsID') as [string]
@@ -315,7 +306,7 @@ export default function AlertsList(props: AlertsListProps): React.JSX.Element {
                 (props.serviceID ? '' : a.service.name + ': ') + a.summary,
               action: (
                 <ListItemText
-                  className={classes.alertTimeContainer}
+                  sx={{ width: 'max-content' }}
                   secondary={
                     <Time
                       time={a.createdAt}
diff --git a/web/src/app/alerts/CreateAlertDialog/CreateAlertDialog.tsx b/web/src/app/alerts/CreateAlertDialog/CreateAlertDialog.tsx
index 703634fdd6..e4315b13b2 100644
--- a/web/src/app/alerts/CreateAlertDialog/CreateAlertDialog.tsx
+++ b/web/src/app/alerts/CreateAlertDialog/CreateAlertDialog.tsx
@@ -6,9 +6,7 @@ import {
   Step,
   StepLabel,
   Typography,
-  Theme,
 } from '@mui/material'
-import { makeStyles } from '@mui/styles'
 import OpenInNewIcon from '@mui/icons-material/OpenInNew'
 import _ from 'lodash'
 import { useCreateAlerts } from './useCreateAlerts'
@@ -26,22 +24,10 @@ export interface Value {
 
 const pluralize = (num: number): string => (num !== 1 ? 's' : '')
 
-const useStyles = makeStyles((theme: Theme) => ({
-  dialog: {
-    [theme.breakpoints.up('md')]: {
-      height: '65vh',
-    },
-  },
-  flexGrow: {
-    flexGrow: 1,
-  },
-}))
-
 export default function CreateAlertDialog(props: {
   onClose: () => void
   serviceID?: string
 }): React.JSX.Element {
-  const classes = useStyles()
   const [step, setStep] = useState(0)
   const serviceID = props.serviceID
 
@@ -104,7 +90,7 @@ export default function CreateAlertDialog(props: {
         <Grid item>
           <Typography>{titleMessage}</Typography>
         </Grid>
-        <Grid item className={classes.flexGrow} />
+        <Grid item sx={{ flexGrow: 1 }} />
         <Grid item>
           <Button
             variant='contained'
@@ -159,7 +145,11 @@ export default function CreateAlertDialog(props: {
           />
         )
       }
-      PaperProps={{ className: classes.dialog }}
+      PaperProps={{
+        sx: (theme) => ({
+          [theme.breakpoints.up('md')]: { height: '65vh' },
+        }),
+      }}
       onSubmit={() => (hasCompleted ? props.onClose() : mutate())}
       disableNext={currentStep === 2}
       onNext={onNext}
diff --git a/web/src/app/services/AlertMetrics/AlertCountGraph.css b/web/src/app/services/AlertMetrics/AlertCountGraph.css
new file mode 100644
index 0000000000..92ecb8d0dc
--- /dev/null
+++ b/web/src/app/services/AlertMetrics/AlertCountGraph.css
@@ -0,0 +1,3 @@
+.recharts-bar-hover:hover {
+  cursor: pointer;
+}
diff --git a/web/src/app/services/AlertMetrics/AlertCountGraph.tsx b/web/src/app/services/AlertMetrics/AlertCountGraph.tsx
index 59c3ad7989..a607b8cd71 100644
--- a/web/src/app/services/AlertMetrics/AlertCountGraph.tsx
+++ b/web/src/app/services/AlertMetrics/AlertCountGraph.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import { Grid, Paper, Typography } from '@mui/material'
-import makeStyles from '@mui/styles/makeStyles/makeStyles'
-import { Theme, useTheme } from '@mui/material/styles'
+import { useTheme } from '@mui/material/styles'
 import AutoSizer from 'react-virtualized-auto-sizer'
 import Spinner from '../../loading/components/Spinner'
 import {
@@ -14,31 +13,25 @@ import {
   Bar,
   Legend,
 } from 'recharts'
+import './AlertCountGraph.css'
 
 interface AlertCountGraphProps {
   data: React.ComponentProps<typeof ComposedChart>['data']
   loading: boolean
 }
 
-const useStyles = makeStyles((theme: Theme) => ({
-  graphContent: {
-    height: '500px',
-    fontFamily: theme.typography.body2.fontFamily,
-  },
-  bar: {
-    '&:hover': {
-      cursor: 'pointer',
-    },
-  },
-}))
-
 export default function AlertCountGraph(
   props: AlertCountGraphProps,
 ): JSX.Element {
-  const classes = useStyles()
   const theme = useTheme()
   return (
-    <Grid container className={classes.graphContent}>
+    <Grid
+      container
+      sx={{
+        height: '500px',
+        fontFamily: theme.typography.body2.fontFamily,
+      }}
+    >
       <Grid item xs={12} data-cy='metrics-count-graph'>
         <Typography color='textSecondary' sx={{ ml: '3rem', pt: 1 }}>
           Showing data for closed alerts
@@ -104,7 +97,7 @@ export default function AlertCountGraph(
                     ? theme.palette.secondary.dark
                     : theme.palette.secondary.light
                 }
-                className={classes.bar}
+                className='recharts-bar-hover'
                 name='Total Alerts'
               />
               <Area

From 8092a4aedf3312d319ef9e73386d81ffabc15154 Mon Sep 17 00:00:00 2001
From: Forfold <nathaniel.cook@target.com>
Date: Fri, 24 Apr 2026 11:32:52 -0700
Subject: [PATCH 15/26] migrate makeStyles to sx: alerts step content, details,
 docs, EP

---
 .../StepContent/CreateAlertConfirm.tsx        | 15 +----
 .../StepContent/CreateAlertListItem.tsx       | 31 ++++------
 .../CreateAlertServiceListItem.tsx            | 21 +++----
 .../StepContent/CreateAlertServiceSelect.tsx  | 57 +++++++------------
 .../app/alerts/components/AlertDetails.tsx    | 30 ++++------
 .../alerts/components/AlertsListFilter.tsx    | 50 +++++++---------
 web/src/app/details/CardActions.tsx           | 36 ++++--------
 web/src/app/details/DetailsPage.tsx           | 41 +++++--------
 web/src/app/details/Notices.tsx               | 25 +++-----
 web/src/app/documentation/Documentation.tsx   | 10 +---
 .../PolicyServicesCard.tsx                    | 11 +---
 .../escalation-policies/PolicyStepForm.tsx    | 13 +----
 12 files changed, 107 insertions(+), 233 deletions(-)

diff --git a/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertConfirm.tsx b/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertConfirm.tsx
index 5dc31f794c..7f52868366 100644
--- a/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertConfirm.tsx
+++ b/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertConfirm.tsx
@@ -1,39 +1,28 @@
 import React, { ReactNode } from 'react'
 import { Typography, Grid, Divider } from '@mui/material'
-import makeStyles from '@mui/styles/makeStyles'
 import { ServiceChip } from '../../../util/ServiceChip'
 import { FormField } from '../../../forms'
 import Markdown from '../../../util/Markdown'
 
-const useStyles = makeStyles({
-  itemContent: {
-    marginTop: '0.5em',
-  },
-  itemTitle: {
-    paddingBottom: 0,
-  },
-})
-
 type FieldProps = {
   children: ReactNode
   label: string
 }
 
 function Field(props: FieldProps): React.JSX.Element {
-  const classes = useStyles()
   return (
     <Grid item xs={12}>
       <Typography
         variant='subtitle1'
         component='h3'
-        className={classes.itemTitle}
+        sx={{ pb: 0 }}
       >
         {props.label}
       </Typography>
 
       <Divider />
 
-      <div className={classes.itemContent}>{props.children}</div>
+      <div style={{ marginTop: '0.5em' }}>{props.children}</div>
     </Grid>
   )
 }
diff --git a/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertListItem.tsx b/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertListItem.tsx
index 35b9fe2dcf..71ad19f84e 100644
--- a/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertListItem.tsx
+++ b/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertListItem.tsx
@@ -1,37 +1,26 @@
 import React from 'react'
 import { ListItem, ListItemText, Typography } from '@mui/material'
-import makeStyles from '@mui/styles/makeStyles'
 import OpenInNewIcon from '@mui/icons-material/OpenInNew'
 import CopyText from '../../../util/CopyText'
 import AppLink from '../../../util/AppLink'
 
-const useStyles = makeStyles({
-  listItemText: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  endLinks: {
-    display: 'flex',
-    alignItems: 'flex-start',
-  },
-  openInNewTab: {
-    marginLeft: '0.75em',
-  },
-})
-
 export default function CreateAlertListItem(props: {
   id: string
 }): React.JSX.Element {
   const { id } = props
 
-  const classes = useStyles()
-
   const alertURL = '/alerts/' + id
 
   return (
     <ListItem key={id} divider>
-      <ListItemText disableTypography className={classes.listItemText}>
+      <ListItemText
+        disableTypography
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        }}
+      >
         <span>
           <Typography>
             <AppLink to={alertURL} newTab>
@@ -40,9 +29,9 @@ export default function CreateAlertListItem(props: {
           </Typography>
         </span>
 
-        <span className={classes.endLinks}>
+        <span style={{ display: 'flex', alignItems: 'flex-start' }}>
           <CopyText value={alertURL} placement='left' asURL />
-          <AppLink to={alertURL} newTab className={classes.openInNewTab}>
+          <AppLink to={alertURL} newTab style={{ marginLeft: '0.75em' }}>
             <OpenInNewIcon fontSize='small' />
           </AppLink>
         </span>
diff --git a/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertServiceListItem.tsx b/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertServiceListItem.tsx
index 6163195da6..1057972246 100644
--- a/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertServiceListItem.tsx
+++ b/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertServiceListItem.tsx
@@ -3,8 +3,6 @@ import { gql, useQuery } from '@apollo/client'
 
 import { ListItem, ListItemText, Typography } from '@mui/material'
 
-import makeStyles from '@mui/styles/makeStyles'
-
 import OpenInNewIcon from '@mui/icons-material/OpenInNew'
 import AppLink from '../../../util/AppLink'
 
@@ -17,14 +15,6 @@ const serviceQuery = gql`
   }
 `
 
-const useStyles = makeStyles({
-  listItemText: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-})
-
 interface CreateAlertServiceListItemProps {
   id: string
   err?: string
@@ -35,8 +25,6 @@ export default function CreateAlertServiceListItem(
 ): React.JSX.Element {
   const { id, err } = props
 
-  const classes = useStyles()
-
   const {
     data,
     loading,
@@ -56,7 +44,14 @@ export default function CreateAlertServiceListItem(
 
   return (
     <ListItem key={id} divider>
-      <ListItemText disableTypography className={classes.listItemText}>
+      <ListItemText
+        disableTypography
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        }}
+      >
         <span>
           <Typography>
             <AppLink to={serviceURL} newTab>
diff --git a/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertServiceSelect.tsx b/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertServiceSelect.tsx
index 376127069c..db63f6563a 100644
--- a/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertServiceSelect.tsx
+++ b/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertServiceSelect.tsx
@@ -15,9 +15,7 @@ import {
   FormLabel,
   FormControl,
   Box,
-  Theme,
 } from '@mui/material'
-import makeStyles from '@mui/styles/makeStyles'
 import ServiceLabelFilterContainer from '../../../services/ServiceFilterContainer'
 import { Search as SearchIcon } from '@mui/icons-material'
 import { FavoriteIcon } from '../../../util/SetFavoriteButton'
@@ -42,34 +40,6 @@ const query = gql`
   }
 `
 
-const useStyles = makeStyles((theme: Theme) => ({
-  addAll: {
-    marginRight: '0.25em',
-  },
-  chipContainer: {
-    padding: theme.spacing(0.5),
-    height: '9em',
-    overflow: 'auto',
-    border: '1px solid #bdbdbd',
-  },
-  endAdornment: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  noticeText: {
-    width: '100%',
-    textAlign: 'center',
-    alignSelf: 'center',
-    lineHeight: '9em',
-  },
-  searchInput: {
-    marginTop: theme.spacing(2),
-  },
-  serviceChip: {
-    margin: 3,
-  },
-}))
-
 export interface CreateAlertServiceSelectProps {
   value: string[]
   onChange: (val: string[]) => void
@@ -100,7 +70,6 @@ export function CreateAlertServiceSelect(
   })
 
   const fieldRef = useRef<HTMLElement>(null)
-  const classes = useStyles()
   const searchResults = _.get(data, 'services.nodes', []).filter(
     ({ id }: { id: string }) => !value.includes(id),
   )
@@ -145,7 +114,7 @@ export function CreateAlertServiceSelect(
         key={id}
         clickable={false}
         id={id}
-        className={classes.serviceChip}
+        style={{ margin: 3 }}
         onClick={(e) => e.preventDefault()}
         onDelete={() => props.onChange(value.filter((v) => v !== id))}
       />
@@ -153,7 +122,16 @@ export function CreateAlertServiceSelect(
   })
 
   const notice = (
-    <Typography variant='body1' component='p' className={classes.noticeText}>
+    <Typography
+      variant='body1'
+      component='p'
+      sx={{
+        width: '100%',
+        textAlign: 'center',
+        alignSelf: 'center',
+        lineHeight: '9em',
+      }}
+    >
       Select services using the search box below
     </Typography>
   )
@@ -171,7 +149,12 @@ export function CreateAlertServiceSelect(
       </FormLabel>
       <FormControl fullWidth error={Boolean(props.error)}>
         <Paper
-          className={classes.chipContainer}
+          sx={(theme) => ({
+            padding: theme.spacing(0.5),
+            height: '9em',
+            overflow: 'auto',
+            border: '1px solid #bdbdbd',
+          })}
           elevation={0}
           data-cy='service-chip-container'
         >
@@ -189,7 +172,7 @@ export function CreateAlertServiceSelect(
         label='Search'
         name='serviceSearch'
         value={searchUserInput}
-        className={classes.searchInput}
+        sx={(theme) => ({ mt: theme.spacing(2) })}
         onChange={(e) => setSearchUserInput(e.target.value)}
         InputProps={{
           ref: fieldRef,
@@ -199,11 +182,11 @@ export function CreateAlertServiceSelect(
             </InputAdornment>
           ),
           endAdornment: (
-            <span className={classes.endAdornment}>
+            <span style={{ display: 'flex', alignItems: 'center' }}>
               {searchResults.length > 0 &&
                 value.length < CREATE_ALERT_LIMIT && (
                   <Chip
-                    className={classes.addAll}
+                    sx={{ mr: '0.25em' }}
                     color='primary' // for white text
                     component='button'
                     label='Add All'
diff --git a/web/src/app/alerts/components/AlertDetails.tsx b/web/src/app/alerts/components/AlertDetails.tsx
index 7de8baa227..9175e6cb39 100644
--- a/web/src/app/alerts/components/AlertDetails.tsx
+++ b/web/src/app/alerts/components/AlertDetails.tsx
@@ -13,8 +13,7 @@ import TableCell from '@mui/material/TableCell'
 import TableHead from '@mui/material/TableHead'
 import TableRow from '@mui/material/TableRow'
 import Typography from '@mui/material/Typography'
-import makeStyles from '@mui/styles/makeStyles'
-import { Theme } from '@mui/material/styles'
+import { useTheme } from '@mui/material/styles'
 import {
   ArrowUpward as EscalateIcon,
   Check as AcknowledgeIcon,
@@ -54,16 +53,6 @@ interface EscalationPolicyInfo {
   lastEscalation?: string
 }
 
-const useStyles = makeStyles((theme: Theme) => ({
-  card: globalStyles(theme).card,
-  cardContainer: globalStyles(theme).cardContainer,
-  cardFull: globalStyles(theme).cardFull,
-  tableCardContent: globalStyles(theme).tableCardContent,
-  epHeader: {
-    paddingBottom: 8,
-  },
-}))
-
 const localStorage = window.localStorage
 const exactTimesKey = 'show_exact_times'
 
@@ -79,7 +68,8 @@ export default function AlertDetails(
   props: AlertDetailsProps,
 ): React.JSX.Element {
   const [analyticsID] = useConfigValue('General.GoogleAnalyticsID') as [string]
-  const classes = useStyles()
+  const theme = useTheme()
+  const gs = globalStyles(theme)
   const isMobile = useIsWidthDown('sm')
 
   const alertAction = (action: string, mutation: () => void): void => {
@@ -270,7 +260,7 @@ export default function AlertDetails(
         item
         xs={12}
         data-cy='alert-details'
-        className={classes.cardContainer}
+        sx={gs.cardContainer}
       >
         <Card sx={{ width: '100%' }}>
           <CardContent>
@@ -369,7 +359,7 @@ export default function AlertDetails(
       <Grid
         item
         lg={isMobile || noiseReason !== '' ? 12 : 8}
-        className={classes.cardContainer}
+        sx={gs.cardContainer}
       >
         <Card
           sx={{
@@ -412,11 +402,11 @@ export default function AlertDetails(
       {renderAlertDetails()}
 
       {/* Escalation Policy Info */}
-      <Grid item xs={12} className={classes.cardContainer}>
+      <Grid item xs={12} sx={gs.cardContainer}>
         <Card style={{ width: '100%', overflowX: 'auto' }}>
           <CardContent>
             <Typography
-              className={classes.epHeader}
+              sx={{ pb: 1 }}
               component='h3'
               variant='h5'
             >
@@ -438,7 +428,7 @@ export default function AlertDetails(
               </React.Fragment>
             )}
           </CardContent>
-          <CardContent className={classes.tableCardContent}>
+          <CardContent sx={gs.tableCardContent}>
             <Table>
               <TableHead>
                 <TableRow>
@@ -458,7 +448,7 @@ export default function AlertDetails(
       </Grid>
 
       {/* Alert Logs */}
-      <Grid item xs={12} className={classes.cardContainer}>
+      <Grid item xs={12} sx={gs.cardContainer}>
         <Card sx={{ width: '100%' }}>
           <div style={{ display: 'flex' }}>
             <CardContent style={{ flex: 1, paddingBottom: 0 }}>
@@ -478,7 +468,7 @@ export default function AlertDetails(
             />
           </div>
           <CardContent
-            className={classes.tableCardContent}
+            sx={gs.tableCardContent}
             style={{ paddingBottom: 0 }}
           >
             <AlertDetailLogs
diff --git a/web/src/app/alerts/components/AlertsListFilter.tsx b/web/src/app/alerts/components/AlertsListFilter.tsx
index dfc3a8c4fb..4228c61d8d 100644
--- a/web/src/app/alerts/components/AlertsListFilter.tsx
+++ b/web/src/app/alerts/components/AlertsListFilter.tsx
@@ -7,43 +7,22 @@ import Box from '@mui/material/Box'
 import SwipeableDrawer from '@mui/material/SwipeableDrawer'
 import Switch from '@mui/material/Switch'
 import Grid from '@mui/material/Grid'
-import makeStyles from '@mui/styles/makeStyles'
-import { Theme } from '@mui/material/styles'
+import { useTheme } from '@mui/material/styles'
 import { styles as globalStyles } from '../../styles/materialStyles'
 import Radio from '@mui/material/Radio'
 import RadioGroup from '@mui/material/RadioGroup'
 import FormControlLabel from '@mui/material/FormControlLabel'
 import FormControl from '@mui/material/FormControl'
-import classnames from 'classnames'
 import { useURLParam, useResetURLParams } from '../../actions'
 import { useIsWidthDown } from '../../util/useWidth'
 
-const useStyles = makeStyles((theme: Theme) => ({
-  filterActions: globalStyles(theme).filterActions,
-  drawer: {
-    width: 'fit-content', // width placed on mobile drawer
-  },
-  grid: {
-    margin: '0.5em', // margin in grid container
-  },
-  gridItem: {
-    display: 'flex',
-    alignItems: 'center', // aligns text with toggles
-  },
-  formControl: {
-    width: '100%', // date pickers full width
-  },
-  popover: {
-    width: '17em', // width placed on desktop popover
-  },
-}))
-
 interface AlertsListFilterProps {
   serviceID: string
 }
 
 function AlertsListFilter(props: AlertsListFilterProps): React.JSX.Element {
-  const classes = useStyles()
+  const theme = useTheme()
+  const gs = globalStyles(theme)
   const [show, setShow] = useState(false)
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
 
@@ -58,10 +37,6 @@ function AlertsListFilter(props: AlertsListFilterProps): React.JSX.Element {
   )
   const resetAll = useResetURLParams('filter', 'allServices', 'fullTime') // don't reset search param
   const isMobile = useIsWidthDown('md')
-  const gridClasses = classnames(
-    classes.grid,
-    isMobile ? classes.drawer : classes.popover,
-  )
 
   function handleOpenFilters(event: MouseEvent<HTMLButtonElement>): void {
     setAnchorEl(event.currentTarget)
@@ -91,8 +66,21 @@ function AlertsListFilter(props: AlertsListFilterProps): React.JSX.Element {
     }
 
     const content = (
-      <Grid container spacing={2} className={gridClasses}>
-        <Grid item xs={12} className={classes.gridItem}>
+      <Grid
+        container
+        spacing={2}
+        sx={[
+          { margin: '0.5em' },
+          isMobile
+            ? { width: 'fit-content' }
+            : { width: '17em' },
+        ]}
+      >
+        <Grid
+          item
+          xs={12}
+          sx={{ display: 'flex', alignItems: 'center' }}
+        >
           <FormControl>
             {favoritesFilter}
             <FormControlLabel
@@ -138,7 +126,7 @@ function AlertsListFilter(props: AlertsListFilterProps): React.JSX.Element {
             )}
           </FormControl>
         </Grid>
-        <Grid item xs={12} className={classes.filterActions}>
+        <Grid item xs={12} sx={gs.filterActions}>
           <Button onClick={resetAll}>Reset</Button>
           <Button onClick={handleCloseFilters}>Done</Button>
         </Grid>
diff --git a/web/src/app/details/CardActions.tsx b/web/src/app/details/CardActions.tsx
index e96c9c2e24..60919032dd 100644
--- a/web/src/app/details/CardActions.tsx
+++ b/web/src/app/details/CardActions.tsx
@@ -1,10 +1,9 @@
 import React, { MouseEventHandler } from 'react'
-import makeStyles from '@mui/styles/makeStyles'
+import Box from '@mui/material/Box'
 import Button, { ButtonProps } from '@mui/material/Button'
 import MUICardActions from '@mui/material/CardActions'
 import IconButton from '@mui/material/IconButton'
 import Tooltip from '@mui/material/Tooltip'
-import { Theme } from '@mui/material'
 
 interface CardActionProps {
   primaryActions?: Array<Action | JSX.Element>
@@ -23,24 +22,7 @@ export type Action = {
   ButtonProps?: ButtonProps
 }
 
-const useStyles = makeStyles((theme: Theme) => ({
-  cardActions: {
-    alignItems: 'flex-end', // aligns icon buttons to bottom of container
-  },
-  primaryActionsContainer: {
-    padding: 8,
-    width: '100%',
-    '& > button:not(:last-child)': {
-      marginRight: theme.spacing(2),
-    },
-  },
-  autoExpandWidth: {
-    margin: '0 auto',
-  },
-}))
-
 export default function CardActions(p: CardActionProps): React.JSX.Element {
-  const classes = useStyles()
 
   const action = (
     action: Action | JSX.Element,
@@ -56,24 +38,30 @@ export default function CardActions(p: CardActionProps): React.JSX.Element {
   let actions: Array<JSX.Element> = []
   if (p.primaryActions) {
     actions = [
-      <div
+      <Box
         key='primary-actions-container'
-        className={classes.primaryActionsContainer}
+        sx={(theme) => ({
+          padding: 1,
+          width: '100%',
+          '& > button:not(:last-child)': {
+            marginRight: theme.spacing(2),
+          },
+        })}
       >
         {p.primaryActions.map((a, i) => action(a, 'primary' + i))}
-      </div>,
+      </Box>,
     ]
   }
   if (p.secondaryActions) {
     actions = [
       ...actions,
-      <div key='actions-margin' className={classes.autoExpandWidth} />,
+      <div key='actions-margin' style={{ margin: '0 auto' }} />,
       ...p.secondaryActions.map((a, i) => action(a, 'secondary' + i, true)),
     ]
   }
 
   return (
-    <MUICardActions data-cy='card-actions' className={classes.cardActions}>
+    <MUICardActions data-cy='card-actions' sx={{ alignItems: 'flex-end' }}>
       {actions}
     </MUICardActions>
   )
diff --git a/web/src/app/details/DetailsPage.tsx b/web/src/app/details/DetailsPage.tsx
index 2ef270b2e6..39f0106824 100644
--- a/web/src/app/details/DetailsPage.tsx
+++ b/web/src/app/details/DetailsPage.tsx
@@ -1,5 +1,4 @@
 import React, { cloneElement, forwardRef, ReactNode } from 'react'
-import makeStyles from '@mui/styles/makeStyles'
 import Card from '@mui/material/Card'
 import CardHeader from '@mui/material/CardHeader'
 import Grid from '@mui/material/Grid'
@@ -16,7 +15,14 @@ import AppLink, { AppLinkProps } from '../util/AppLink'
 import { useIsWidthDown } from '../util/useWidth'
 import useStatusColors from '../theme/useStatusColors'
 import { Label } from '../../schema'
-import { Chip } from '@mui/material'
+import { Chip, SxProps, Theme } from '@mui/material'
+
+const classes = {
+  flexHeight: { flexGrow: 1 },
+  fullHeight: { height: '100%' },
+  quickLinks: { pb: 1 },
+  smPageBottom: { mb: 8 },
+} satisfies Record<string, SxProps<Theme>>
 
 interface DetailsPageProps {
   title: string
@@ -41,24 +47,6 @@ type Link = {
   status?: LinkStatus | null
 }
 
-const useStyles = makeStyles({
-  flexHeight: {
-    flexGrow: 1,
-  },
-  fullHeight: {
-    height: '100%', // align height of the first row of cards together
-  },
-  headerContent: {
-    paddingTop: 0,
-  },
-  quickLinks: {
-    paddingBottom: 8,
-  },
-  smPageBottom: {
-    marginBottom: 64,
-  },
-})
-
 const LIApplink = forwardRef<HTMLAnchorElement, AppLinkProps>(
   function LIApplink(props, ref): React.JSX.Element {
     return (
@@ -70,7 +58,6 @@ const LIApplink = forwardRef<HTMLAnchorElement, AppLinkProps>(
 )
 
 export default function DetailsPage(p: DetailsPageProps): React.JSX.Element {
-  const classes = useStyles()
   const isMobile = useIsWidthDown('sm')
   const statusColors = useStatusColors()
 
@@ -104,9 +91,9 @@ export default function DetailsPage(p: DetailsPageProps): React.JSX.Element {
 
       {/* Header card */}
       <Grid item xs={12} lg={!isMobile && p.links?.length ? 8 : 12}>
-        <Card className={classes.fullHeight}>
+        <Card sx={classes.fullHeight}>
           <Grid
-            className={classes.fullHeight}
+            sx={classes.fullHeight}
             item
             xs
             container
@@ -152,7 +139,7 @@ export default function DetailsPage(p: DetailsPageProps): React.JSX.Element {
               </Grid>
             )}
 
-            <Grid className={classes.flexHeight} item />
+            <Grid sx={classes.flexHeight} item />
             {(p.primaryActions?.length || p.secondaryActions?.length) && (
               <Grid item>
                 <CardActions
@@ -168,7 +155,7 @@ export default function DetailsPage(p: DetailsPageProps): React.JSX.Element {
       {/* Quick Links */}
       {links.length > 0 && (
         <Grid item xs={12} lg={!isMobile && links.length ? 4 : 12}>
-          <Card className={classes.fullHeight}>
+          <Card sx={classes.fullHeight}>
             <CardHeader
               title='Quick Links'
               titleTypographyProps={{
@@ -176,7 +163,7 @@ export default function DetailsPage(p: DetailsPageProps): React.JSX.Element {
                 component: 'h2',
               }}
             />
-            <List data-cy='route-links' className={classes.quickLinks} dense>
+            <List data-cy='route-links' sx={classes.quickLinks} dense>
               {links.map((li, idx) => (
                 <ListItemButton
                   key={idx}
@@ -206,7 +193,7 @@ export default function DetailsPage(p: DetailsPageProps): React.JSX.Element {
       {/* Primary Page Content */}
       {p.pageContent && (
         <Grid
-          className={isMobile ? classes.smPageBottom : undefined}
+          sx={isMobile ? classes.smPageBottom : undefined}
           item
           xs={12}
         >
diff --git a/web/src/app/details/Notices.tsx b/web/src/app/details/Notices.tsx
index 035c5734ea..6789e931e9 100644
--- a/web/src/app/details/Notices.tsx
+++ b/web/src/app/details/Notices.tsx
@@ -8,7 +8,7 @@ import {
   AlertTitle,
   AlertColor,
 } from '@mui/material'
-import makeStyles from '@mui/styles/makeStyles'
+import { SxProps, Theme } from '@mui/material/styles'
 import ExpandIcon from '@mui/icons-material/KeyboardArrowDown'
 import CollapseIcon from '@mui/icons-material/KeyboardArrowUp'
 import toTitleCase from '../util/toTitleCase'
@@ -17,13 +17,7 @@ import {
   NotificationStatus,
 } from '../../schema'
 
-const useStyles = makeStyles({
-  alertAction: {
-    marginRight: 0,
-  },
-  alertMessage: {
-    width: '100%',
-  },
+const classes = {
   gridItem: {
     padding: '4px 0 4px 0',
   },
@@ -33,7 +27,7 @@ const useStyles = makeStyles({
   secondGridItem: {
     padding: '8px 0 4px 0',
   },
-})
+} satisfies Record<string, SxProps<Theme>>
 
 export type NoticeType = SchemaNoticeType | AlertColor | NotificationStatus
 function assertNever(x: never): never {
@@ -73,7 +67,6 @@ interface NoticesProps {
 export default function Notices({
   notices = [],
 }: NoticesProps): React.JSX.Element | null {
-  const classes = useStyles()
   const [noticesExpanded, setNoticesExpanded] = useState(false)
 
   if (!notices.length) {
@@ -106,10 +99,10 @@ export default function Notices({
    * Spacing set manually on grid items to accommodate manual
    * accordion transitions for multiple notices
    */
-  function getGridClassName(index: number): string {
+  function getGridSx(index: number): SxProps<Theme> | undefined {
     switch (index) {
       case 0:
-        return ''
+        return undefined
       case 1:
         return classes.secondGridItem
       case notices.length - 1:
@@ -121,12 +114,12 @@ export default function Notices({
 
   function renderNotice(notice: Notice, index: number): React.JSX.Element {
     return (
-      <Grid key={index} className={getGridClassName(index)} item xs={12}>
+      <Grid key={index} sx={getGridSx(index)} item xs={12}>
         <Alert
           severity={toSeverity(notice.type)}
-          classes={{
-            message: classes.alertMessage,
-            action: classes.alertAction,
+          sx={{
+            '& .MuiAlert-message': { width: '100%' },
+            '& .MuiAlert-action': { mr: 0 },
           }}
           elevation={1}
           action={
diff --git a/web/src/app/documentation/Documentation.tsx b/web/src/app/documentation/Documentation.tsx
index 6c6706d1ac..8e1f1bf462 100644
--- a/web/src/app/documentation/Documentation.tsx
+++ b/web/src/app/documentation/Documentation.tsx
@@ -7,20 +7,12 @@ import webhooks from './sections/Webhooks.md'
 import Markdown from '../util/Markdown'
 import { useConfigValue } from '../util/RequireConfig'
 import { pathPrefix } from '../env'
-import makeStyles from '@mui/styles/makeStyles'
-
-const useStyles = makeStyles({
-  mBottom: {
-    marginBottom: '3rem',
-  },
-})
 
 export default function Documentation(): React.JSX.Element {
   const [publicURL, webhookEnabled] = useConfigValue(
     'General.PublicURL',
     'Webhook.Enable',
   )
-  const classes = useStyles()
 
   // NOTE list markdown documents here
   let markdownDocs = [{ doc: integrationKeys, id: 'integration-keys' }]
@@ -49,7 +41,7 @@ export default function Documentation(): React.JSX.Element {
   return (
     <React.Fragment>
       {markdownDocs.map((md, i) => (
-        <Card key={i} className={classes.mBottom} id={md.id}>
+        <Card key={i} sx={{ mb: '3rem' }} id={md.id}>
           <CardContent>
             <Typography variant='body1' component='div'>
               <Markdown value={md.doc} />
diff --git a/web/src/app/escalation-policies/PolicyServicesCard.tsx b/web/src/app/escalation-policies/PolicyServicesCard.tsx
index ca028de924..4c23e32324 100644
--- a/web/src/app/escalation-policies/PolicyServicesCard.tsx
+++ b/web/src/app/escalation-policies/PolicyServicesCard.tsx
@@ -1,22 +1,13 @@
 import React from 'react'
 import Card from '@mui/material/Card'
-import makeStyles from '@mui/styles/makeStyles'
 import FlatList, { FlatListListItem } from '../lists/FlatList'
 import _ from 'lodash'
 
-const useStyles = makeStyles(() => ({
-  card: {
-    width: '100%',
-  },
-}))
-
 interface PolicyServicesCardProps {
   services: { id: string; name: string }[]
 }
 
 function PolicyServicesCard(props: PolicyServicesCardProps): React.JSX.Element {
-  const classes = useStyles()
-
   function getServicesItems(): FlatListListItem[] {
     const items = props.services.map((service) => ({
       title: service.name,
@@ -28,7 +19,7 @@ function PolicyServicesCard(props: PolicyServicesCardProps): React.JSX.Element {
   }
 
   return (
-    <Card className={classes.card}>
+    <Card sx={{ width: '100%' }}>
       <FlatList
         emptyMessage='No services are associated with this Escalation Policy.'
         items={getServicesItems()}
diff --git a/web/src/app/escalation-policies/PolicyStepForm.tsx b/web/src/app/escalation-policies/PolicyStepForm.tsx
index df39a17e99..7f7f6ab5e4 100644
--- a/web/src/app/escalation-policies/PolicyStepForm.tsx
+++ b/web/src/app/escalation-policies/PolicyStepForm.tsx
@@ -11,20 +11,10 @@ import DestinationField from '../selection/DestinationField'
 import { useEPTargetTypes } from '../util/RequireConfig'
 import { gql, useClient, CombinedError } from 'urql'
 import DialogContentError from '../dialogs/components/DialogContentError'
-import makeStyles from '@mui/styles/makeStyles'
 import { useErrorConsumer } from '../util/ErrorConsumer'
 import { Add } from '../icons'
 import LoadingButton from '../loading/components/LoadingButton'
 
-const useStyles = makeStyles(() => {
-  return {
-    errorContainer: {
-      flexGrow: 0,
-      overflowY: 'visible',
-    },
-  }
-})
-
 export type FormValue = {
   delayMinutes: number
   actions: DestinationInput[]
@@ -49,7 +39,6 @@ const query = gql`
 
 export default function PolicyStepForm(props: PolicyStepFormProps): ReactNode {
   const types = useEPTargetTypes()
-  const classes = useStyles()
   const [destType, setDestType] = useState(types[0].type)
   const [args, setArgs] = useState<StringMap>({})
   const validationClient = useClient()
@@ -75,7 +64,7 @@ export default function PolicyStepForm(props: PolicyStepFormProps): ReactNode {
         error={err}
         key={idx}
         noPadding
-        className={classes.errorContainer}
+        style={{ flexGrow: 0, overflowY: 'visible' }}
       />
     ))
   }

From 3208c1f10fbd6e2c37e4ef222e264ebc4518d64e Mon Sep 17 00:00:00 2001
From: Forfold <nathaniel.cook@target.com>
Date: Fri, 24 Apr 2026 11:36:53 -0700
Subject: [PATCH 16/26] migrate makeStyles to sx: lists

---
 web/src/app/lists/ControlledPaginatedList.tsx | 32 +++++--------------
 web/src/app/lists/ListPageControls.tsx        | 29 ++++++-----------
 web/src/app/lists/PaginatedList.tsx           | 21 ++++++------
 3 files changed, 28 insertions(+), 54 deletions(-)

diff --git a/web/src/app/lists/ControlledPaginatedList.tsx b/web/src/app/lists/ControlledPaginatedList.tsx
index fc29abf5aa..5dd3eaef2c 100644
--- a/web/src/app/lists/ControlledPaginatedList.tsx
+++ b/web/src/app/lists/ControlledPaginatedList.tsx
@@ -8,37 +8,18 @@ import {
   Tooltip,
 } from '@mui/material'
 import { Add, ArrowDropDown } from '@mui/icons-material'
-import makeStyles from '@mui/styles/makeStyles'
 import {
   PaginatedList,
   PaginatedListItemProps,
   PaginatedListProps,
 } from './PaginatedList'
 import { ListHeaderProps } from './ListHeader'
-import classnames from 'classnames'
 import OtherActions from '../util/OtherActions'
 import Search from '../util/Search'
 import { useURLKey } from '../actions'
 import { useIsWidthDown } from '../util/useWidth'
 
-const useStyles = makeStyles({
-  checkbox: {
-    marginTop: 4,
-    marginBottom: 4,
-  },
-  controlsContainer: {
-    alignItems: 'center',
-    display: 'flex',
-  },
-  hover: {
-    '&:hover': {
-      cursor: 'pointer',
-    },
-  },
-  popper: {
-    opacity: 1,
-  },
-})
+
 
 export interface ControlledPaginatedListProps
   extends PaginatedListProps,
@@ -91,7 +72,6 @@ export interface CheckboxItemsProps extends PaginatedListItemProps {
 export default function ControlledPaginatedList(
   props: ControlledPaginatedListProps,
 ): React.JSX.Element {
-  const classes = useStyles()
   const {
     checkboxActions,
     createLabel,
@@ -173,7 +153,7 @@ export default function ControlledPaginatedList(
       >
         <Grid item>
           <Checkbox
-            className={classes.checkbox}
+            sx={{ mt: '4px', mb: '4px' }}
             checked={
               itemIDs.length === checkedItems.length && itemIDs.length > 0
             }
@@ -191,7 +171,11 @@ export default function ControlledPaginatedList(
 
         <Grid
           item
-          className={classnames(classes.hover, classes.controlsContainer)}
+          sx={{
+            alignItems: 'center',
+            display: 'flex',
+            '&:hover': { cursor: 'pointer' },
+          }}
           data-cy='checkboxes-menu'
         >
           <OtherActions
@@ -217,7 +201,7 @@ export default function ControlledPaginatedList(
               <Tooltip
                 title={a.label}
                 placement='bottom'
-                classes={{ popper: classes.popper }}
+                slotProps={{ popper: { sx: { opacity: 1 } } }}
               >
                 <IconButton
                   onClick={() => {
diff --git a/web/src/app/lists/ListPageControls.tsx b/web/src/app/lists/ListPageControls.tsx
index 9cef4cd0c1..6cda83caeb 100644
--- a/web/src/app/lists/ListPageControls.tsx
+++ b/web/src/app/lists/ListPageControls.tsx
@@ -5,29 +5,14 @@ import {
   CircularProgress,
   Grid,
   IconButton,
-  Theme,
 } from '@mui/material'
-import makeStyles from '@mui/styles/makeStyles'
 import { Add, ChevronLeft, ChevronRight } from '@mui/icons-material'
 import CreateFAB from './CreateFAB'
 import { useIsWidthDown } from '../util/useWidth'
 import { usePages } from '../util/pagination'
 import { useURLKey } from '../actions'
 
-const useStyles = makeStyles((theme: Theme) => ({
-  progress: {
-    color: theme.palette.secondary.main,
-    position: 'absolute',
-  },
-  controls: {
-    [theme.breakpoints.down('sm')]: {
-      '&:not(:first-child)': {
-        marginBottom: '4.5em',
-        paddingBottom: '1em',
-      },
-    },
-  },
-}))
+
 type ListPageControlsBaseProps = {
   nextCursor: string | null | undefined
   onCursorChange: (cursor: string) => void
@@ -61,7 +46,6 @@ function canCreate(
 export default function ListPageControls(
   props: ListPageControlsProps,
 ): React.ReactNode {
-  const classes = useStyles()
   const showCreate = canCreate(props)
   const isMobile = useIsWidthDown('md')
 
@@ -108,7 +92,14 @@ export default function ListPageControls(
         spacing={1}
         justifyContent='flex-end'
         alignItems='center'
-        className={classes.controls}
+        sx={(theme) => ({
+          [theme.breakpoints.down('sm')]: {
+            '&:not(:first-child)': {
+              marginBottom: '4.5em',
+              paddingBottom: '1em',
+            },
+          },
+        })}
       >
         <Grid item>
           <IconButton
@@ -137,7 +128,7 @@ export default function ListPageControls(
               <CircularProgress
                 color='secondary'
                 size={24}
-                className={classes.progress}
+                sx={{ color: 'secondary.main', position: 'absolute' }}
               />
             )}
             <ChevronRight />
diff --git a/web/src/app/lists/PaginatedList.tsx b/web/src/app/lists/PaginatedList.tsx
index 4d3f755952..a107a645a1 100644
--- a/web/src/app/lists/PaginatedList.tsx
+++ b/web/src/app/lists/PaginatedList.tsx
@@ -6,8 +6,8 @@ import ListItemButton from '@mui/material/ListItemButton'
 import ListItemText from '@mui/material/ListItemText'
 import Typography from '@mui/material/Typography'
 import ListItemAvatar from '@mui/material/ListItemAvatar'
-import makeStyles from '@mui/styles/makeStyles'
 import { Skeleton } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
 import InfiniteScroll from 'react-infinite-scroll-component'
 import { useIsWidthDown } from '../util/useWidth'
 import { FavoriteIcon } from '../util/SetFavoriteButton'
@@ -18,14 +18,14 @@ import { AppLinkListItem } from '../util/AppLink'
 import { debug } from '../util/debug'
 import useStatusColors from '../theme/useStatusColors'
 
-const useStyles = makeStyles(() => ({
+const classes = {
   infiniteScrollFooter: {
     display: 'flex',
     justifyContent: 'center',
     padding: '0.25em 0 0.25em 0',
   },
   itemAction: {
-    paddingLeft: 14,
+    paddingLeft: '14px',
   },
   itemText: {
     wordBreak: 'break-word',
@@ -33,7 +33,7 @@ const useStyles = makeStyles(() => ({
   favoriteIcon: {
     backgroundColor: 'transparent',
   },
-}))
+} satisfies Record<string, SxProps<Theme>>
 
 function LoadingItem(props: { dense?: boolean }): React.JSX.Element {
   return (
@@ -90,7 +90,6 @@ export function PaginatedList(props: PaginatedListProps): React.JSX.Element {
     noPlaceholder,
   } = props
 
-  const classes = useStyles()
   const statusColors = useStatusColors()
   const fullScreen = useIsWidthDown('md')
 
@@ -109,8 +108,8 @@ export function PaginatedList(props: PaginatedListProps): React.JSX.Element {
     let favIcon = null
     if (item.isFavorite) {
       favIcon = (
-        <div className={classes.itemAction}>
-          <Avatar className={classes.favoriteIcon}>
+        <div style={{ paddingLeft: '14px' }}>
+          <Avatar sx={classes.favoriteIcon}>
             <FavoriteIcon />
           </Avatar>
         </div>
@@ -148,7 +147,7 @@ export function PaginatedList(props: PaginatedListProps): React.JSX.Element {
       <React.Fragment>
         {item.icon && <ListItemAvatar>{item.icon}</ListItemAvatar>}
         <ListItemText
-          className={classes.itemText}
+          sx={classes.itemText}
           primary={item.title}
           secondary={item.subText}
           secondaryTypographyProps={{
@@ -156,7 +155,7 @@ export function PaginatedList(props: PaginatedListProps): React.JSX.Element {
           }}
         />
         {favIcon}
-        {item.action && <div className={classes.itemAction}>{item.action}</div>}
+        {item.action && <div style={{ paddingLeft: '14px' }}>{item.action}</div>}
       </React.Fragment>
     )
 
@@ -235,7 +234,7 @@ export function PaginatedList(props: PaginatedListProps): React.JSX.Element {
         endMessage={
           len === 0 ? null : (
             <Typography
-              className={classes.infiniteScrollFooter}
+              sx={classes.infiniteScrollFooter}
               color='textSecondary'
               variant='body2'
             >
@@ -244,7 +243,7 @@ export function PaginatedList(props: PaginatedListProps): React.JSX.Element {
           )
         }
         loader={
-          <div className={classes.infiniteScrollFooter}>
+          <div style={{ display: 'flex', justifyContent: 'center', padding: '0.25em 0 0.25em 0' }}>
             <Spinner text='Loading...' />
           </div>
         }

From acf4936254542839abcb9c76e91ae0b24df06220 Mon Sep 17 00:00:00 2001
From: Forfold <nathaniel.cook@target.com>
Date: Fri, 24 Apr 2026 11:43:01 -0700
Subject: [PATCH 17/26] migrate makeStyles to sx: main

---
 web/src/app/main/App.tsx              | 38 +++++++++++-----------
 web/src/app/main/NavBar.tsx           | 27 +++------------
 web/src/app/main/NavBarLink.tsx       | 47 +++++++++++----------------
 web/src/app/main/WideSideBar.tsx      | 28 +++++++---------
 web/src/app/main/components/Login.tsx | 38 ++++++++++------------
 5 files changed, 71 insertions(+), 107 deletions(-)

diff --git a/web/src/app/main/App.tsx b/web/src/app/main/App.tsx
index b1138bb7ef..78fbd0a795 100644
--- a/web/src/app/main/App.tsx
+++ b/web/src/app/main/App.tsx
@@ -12,11 +12,11 @@ import LazyWideSideBar, { drawerWidth } from './WideSideBar'
 import LazyNewUserSetup from './components/NewUserSetup'
 import { SkipToContentLink } from '../util/SkipToContentLink'
 import { SearchContainer, SearchProvider } from '../util/AppBarSearchContainer'
-import makeStyles from '@mui/styles/makeStyles'
 import { useIsWidthDown } from '../util/useWidth'
 import { isIOS } from '../util/browsers'
 import UserSettingsPopover from './components/UserSettingsPopover'
 import { Theme } from '@mui/material/styles'
+import type { SxProps } from '@mui/material'
 import AppRoutes from './AppRoutes'
 import { useURLKey } from '../actions'
 import NavBar from './NavBar'
@@ -27,31 +27,31 @@ import ReactGA from 'react-ga4'
 import { useConfigValue } from '../util/RequireConfig'
 import Spinner from '../loading/components/Spinner'
 
-const useStyles = makeStyles((theme: Theme) => ({
-  root: {
+const classes = {
+  root: (theme: Theme) => ({
     flexGrow: 1,
     zIndex: 1,
-    position: 'relative',
+    position: 'relative' as const,
     display: 'flex',
     backgroundColor: theme.palette.background.default,
     height: '100%',
-  },
+  }),
   main: {
     width: '100%',
     overflowY: 'auto',
     marginTop: '64px',
   },
   mainContainer: { position: 'relative', height: '100%' },
-  appBar: {
+  appBar: (theme: Theme) => ({
     [theme.breakpoints.up('md')]: { width: `calc(100% - ${drawerWidth})` },
     zIndex: theme.zIndex.drawer + 1,
-  },
-  containerClass: {
+  }),
+  containerClass: (theme: Theme) => ({
     padding: '1em',
     [theme.breakpoints.up('md')]: { width: '75%' },
     [theme.breakpoints.down('md')]: { width: '100%' },
-  },
-}))
+  }),
+} satisfies Record<string, SxProps<Theme>>
 
 export default function App(): React.JSX.Element {
   const [analyticsID] = useConfigValue('General.GoogleAnalyticsID') as [string]
@@ -60,7 +60,6 @@ export default function App(): React.JSX.Element {
     if (analyticsID) ReactGA.initialize(analyticsID)
   }, [analyticsID])
 
-  const classes = useStyles()
   const [showMobile, setShowMobile] = useState(false)
   const fullScreen = useIsWidthDown('md')
   const marginLeft = fullScreen ? 0 : drawerWidth
@@ -74,13 +73,13 @@ export default function App(): React.JSX.Element {
   let cyFormat = 'wide'
   if (fullScreen) cyFormat = 'mobile'
   return (
-    <div className={classes.root} id='app-root'>
+    <Box sx={classes.root} id='app-root'>
       <PageActionProvider>
         <SearchProvider>
           <NotificationProvider>
             <AppBar
               position='fixed'
-              className={classes.appBar}
+              sx={classes.appBar}
               data-cy='app-bar'
               data-cy-format={cyFormat}
             >
@@ -119,9 +118,10 @@ export default function App(): React.JSX.Element {
               </SwipeableDrawer>
             </Box>
 
-            <main
+            <Box
+              component='main'
               id='content'
-              className={classes.main}
+              sx={classes.main}
               style={{ marginLeft }}
               data-exp-flag-example={String(hasExampleFlag)}
             >
@@ -132,18 +132,18 @@ export default function App(): React.JSX.Element {
                   <Grid
                     container
                     justifyContent='center'
-                    className={classes.mainContainer}
+                    sx={classes.mainContainer}
                   >
-                    <Grid className={classes.containerClass} item>
+                    <Grid sx={classes.containerClass} item>
                       <AppRoutes />
                     </Grid>
                   </Grid>
                 </Suspense>
               </ErrorBoundary>
-            </main>
+            </Box>
           </NotificationProvider>
         </SearchProvider>
       </PageActionProvider>
-    </div>
+    </Box>
   )
 }
diff --git a/web/src/app/main/NavBar.tsx b/web/src/app/main/NavBar.tsx
index 089e1a7d79..19562ce4b7 100644
--- a/web/src/app/main/NavBar.tsx
+++ b/web/src/app/main/NavBar.tsx
@@ -2,8 +2,6 @@ import React from 'react'
 import Divider from '@mui/material/Divider'
 import List from '@mui/material/List'
 import Typography from '@mui/material/Typography'
-import makeStyles from '@mui/styles/makeStyles'
-import { styles as globalStyles } from '../styles/materialStyles'
 import {
   Group,
   Layers,
@@ -15,31 +13,14 @@ import {
   DeveloperBoard,
 } from '@mui/icons-material'
 import { WizardHat as WizardIcon } from 'mdi-material-ui'
-import { Theme, useTheme } from '@mui/material/styles'
+import { useTheme } from '@mui/material/styles'
 import RequireConfig from '../util/RequireConfig'
-import NavBarLink, { NavBarSubLink } from './NavBarLink'
 
+import NavBarLink, { NavBarSubLink } from './NavBarLink'
 import logoImgSrc from '../public/logos/lightmode_logo.svg'
 import darkModeLogoImgSrc from '../public/logos/darkmode_logo.svg'
 
-const useStyles = makeStyles((theme: Theme) => ({
-  ...globalStyles(theme),
-  logoDiv: {
-    ...theme.mixins.toolbar,
-    paddingLeft: 8,
-  },
-  navIcon: {
-    width: '1em',
-    height: '1em',
-    fontSize: '24px',
-  },
-  list: {
-    padding: 0,
-  },
-}))
-
 export default function NavBar(): React.JSX.Element {
-  const classes = useStyles()
   const theme = useTheme()
 
   let localDevFooter = null
@@ -69,7 +50,7 @@ export default function NavBar(): React.JSX.Element {
           justifyContent: 'left',
         }}
       >
-        <a href='/' aria-hidden className={classes.logoDiv}>
+        <a href='/' aria-hidden style={{ ...theme.mixins.toolbar, paddingLeft: 8 }}>
           {logo}
         </a>
         <Typography variant='h5' sx={{ pl: 1 }}>
@@ -78,7 +59,7 @@ export default function NavBar(): React.JSX.Element {
       </div>
       <Divider />
       <nav>
-        <List role='navigation' className={classes.list} data-cy='nav-list'>
+        <List role='navigation' sx={{ p: 0 }} data-cy='nav-list'>
           <NavBarLink to='/alerts' title='Alerts' icon={<Notifications />} />
           <NavBarLink
             to='/rotations'
diff --git a/web/src/app/main/NavBarLink.tsx b/web/src/app/main/NavBarLink.tsx
index d7cd71ab6c..357ae4904a 100644
--- a/web/src/app/main/NavBarLink.tsx
+++ b/web/src/app/main/NavBarLink.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import { useLocation } from 'wouter'
 import List from '@mui/material/List'
-import makeStyles from '@mui/styles/makeStyles'
 import ListItemButton from '@mui/material/ListItemButton'
 import ListItemText from '@mui/material/ListItemText'
 import ListItemIcon from '@mui/material/ListItemIcon'
@@ -9,36 +8,30 @@ import Typography from '@mui/material/Typography'
 import { styles } from '../styles/materialStyles'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import { Collapse, Theme } from '@mui/material'
+import type { SxProps } from '@mui/material'
 import AppLink from '../util/AppLink'
 import { OpenInNew } from '@mui/icons-material'
+import { useTheme } from '@mui/material/styles'
 
-const useStyles = makeStyles((theme: Theme) => {
+function useNavClasses(theme: Theme) {
   const { nav, navSelected } = styles(theme)
   return {
-    nav,
-    navSelected,
-    subMenu: {
-      padding: '0',
-    },
+    nav: nav as SxProps<Theme>,
+    navSelected: navSelected as SxProps<Theme>,
     subMenuLinkText: {
       paddingLeft: '3.5rem',
       '& span': {
         fontSize: '.9rem',
       },
-    },
-    dropdown: {
+    } as SxProps<Theme>,
+    dropdown: (open: boolean): SxProps<Theme> => ({
       transition: theme.transitions.create(['transform'], {
         duration: theme.transitions.duration.short,
       }),
-    },
-    dropdownOpen: {
-      transform: 'rotate(0)',
-    },
-    dropdownClosed: {
-      transform: 'rotate(-90deg)',
-    },
+      transform: open ? 'rotate(0)' : 'rotate(-90deg)',
+    }),
   }
-})
+}
 
 export type NavBarSubLinkProps = {
   to: string
@@ -50,16 +43,17 @@ export function NavBarSubLink({
   title,
   newTab,
 }: NavBarSubLinkProps): React.JSX.Element {
-  const { navSelected, nav, subMenuLinkText } = useStyles()
+  const theme = useTheme()
+  const { navSelected, nav, subMenuLinkText } = useNavClasses(theme)
   const [path] = useLocation()
   return (
     <AppLink
-      className={path.startsWith(to) ? navSelected : nav}
+      sx={path.startsWith(to) ? navSelected : nav}
       to={to}
       newTab={newTab}
     >
       <ListItemButton tabIndex={-1}>
-        <ListItemText className={subMenuLinkText}>
+        <ListItemText sx={subMenuLinkText}>
           {title}
           {newTab && (
             <OpenInNew fontSize='small' style={{ paddingLeft: '1em' }} />
@@ -83,7 +77,8 @@ export default function NavBarLink({
   to,
   children,
 }: NavBarLinkProps): React.JSX.Element {
-  const classes = useStyles()
+  const theme = useTheme()
+  const classes = useNavClasses(theme)
   const [path] = useLocation()
   const isRoute = path.startsWith(to)
 
@@ -91,7 +86,7 @@ export default function NavBarLink({
     <React.Fragment>
       <AppLink
         to={to}
-        className={!children && isRoute ? classes.navSelected : classes.nav}
+        sx={!children && isRoute ? classes.navSelected : classes.nav}
       >
         <ListItemButton tabIndex={-1}>
           <ListItemIcon>{icon}</ListItemIcon>
@@ -106,18 +101,14 @@ export default function NavBarLink({
           {children && (
             <ExpandMoreIcon
               color='action'
-              className={
-                classes.dropdown +
-                ' ' +
-                (isRoute ? classes.dropdownOpen : classes.dropdownClosed)
-              }
+              sx={classes.dropdown(isRoute)}
             />
           )}
         </ListItemButton>
       </AppLink>
       {children && (
         <Collapse in={isRoute} mountOnEnter>
-          <List className={classes.subMenu}>{children}</List>
+          <List sx={{ p: 0 }}>{children}</List>
         </Collapse>
       )}
     </React.Fragment>
diff --git a/web/src/app/main/WideSideBar.tsx b/web/src/app/main/WideSideBar.tsx
index f574ba2caf..eb1ea22eed 100644
--- a/web/src/app/main/WideSideBar.tsx
+++ b/web/src/app/main/WideSideBar.tsx
@@ -1,33 +1,27 @@
 import React, { ReactNode } from 'react'
 import Drawer from '@mui/material/Drawer'
-import makeStyles from '@mui/styles/makeStyles'
-import { Theme } from '@mui/material/styles'
 
 export const drawerWidth = '190px'
 
-const useStyles = makeStyles((theme: Theme) => ({
-  sidebarPaper: {
-    width: drawerWidth,
-    position: 'fixed',
-    transition: theme.transitions.create('width', {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.enteringScreen,
-    }),
-  },
-}))
-
 interface WideSideBarProps {
   children: ReactNode
 }
 
 function WideSideBar(props: WideSideBarProps): React.JSX.Element {
-  const classes = useStyles()
-
   return (
     <Drawer
       variant='permanent'
-      classes={{
-        paper: classes.sidebarPaper,
+      slotProps={{
+        paper: {
+          sx: (theme) => ({
+            width: drawerWidth,
+            position: 'fixed',
+            transition: theme.transitions.create('width', {
+              easing: theme.transitions.easing.sharp,
+              duration: theme.transitions.duration.enteringScreen,
+            }),
+          }),
+        },
       }}
     >
       {props.children}
diff --git a/web/src/app/main/components/Login.tsx b/web/src/app/main/components/Login.tsx
index f84511f408..ad052fbb4c 100644
--- a/web/src/app/main/components/Login.tsx
+++ b/web/src/app/main/components/Login.tsx
@@ -6,8 +6,8 @@ import Typography from '@mui/material/Typography'
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
 import Divider from '@mui/material/Divider'
-import makeStyles from '@mui/styles/makeStyles'
-import { Theme, useTheme } from '@mui/material'
+import Box from '@mui/material/Box'
+import { useTheme } from '@mui/material'
 import { getParameterByName } from '../../util/query_param'
 import { pathPrefix } from '../../env'
 
@@ -16,13 +16,12 @@ import darkModeLogoImgSrc from '../../public/logos/darkmode_logo.svg'
 
 const PROVIDERS_URL = pathPrefix + '/api/v2/identity/providers'
 
-const useStyles = makeStyles((theme: Theme) => ({
+const loginStyles = {
   root: {
     flexGrow: 1,
     zIndex: 1,
-    position: 'relative',
+    position: 'relative' as const,
     display: 'flex',
-    backgroundColor: theme.palette.background.default,
     height: '100%',
   },
   card: {
@@ -30,12 +29,12 @@ const useStyles = makeStyles((theme: Theme) => ({
     maxWidth: '30em',
   },
   center: {
-    position: 'fixed',
+    position: 'fixed' as const,
     top: '40%',
     left: '50%',
     WebkitTransform: 'translate(-50%, -40%)',
     transform: 'translateY(-50%, -40%)',
-    textAlign: 'center',
+    textAlign: 'center' as const,
   },
   divider: {
     width: '9em',
@@ -63,7 +62,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     paddingLeft: '1em',
     paddingRight: '1em',
   },
-}))
+}
 
 type Field = {
   ID: string
@@ -82,7 +81,6 @@ type Provider = {
 }
 
 export default function Login(): React.JSX.Element {
-  const classes = useStyles()
   const theme = useTheme()
   const [error, setError] = useState(getParameterByName('login_error') || '')
   const [providers, setProviders] = useState([])
@@ -129,10 +127,10 @@ export default function Login(): React.JSX.Element {
   ): React.JSX.Element | undefined {
     if (idx + 1 < len) {
       return (
-        <Grid item xs={12} className={classes.hasNext}>
-          <Divider className={classes.divider} />
-          <Typography className={classes.or}>or</Typography>
-          <Divider className={classes.divider} />
+        <Grid item xs={12} style={loginStyles.hasNext}>
+          <Divider sx={loginStyles.divider} />
+          <Typography sx={loginStyles.or}>or</Typography>
+          <Divider sx={loginStyles.divider} />
         </Grid>
       )
     }
@@ -160,7 +158,7 @@ export default function Login(): React.JSX.Element {
     // create login button
     let loginButton = null
     const loginIcon = logoUrl ? (
-      <img alt='GoAlert' src={logoUrl} className={classes.loginIcon} />
+      <img alt='GoAlert' src={logoUrl} style={loginStyles.loginIcon} />
     ) : null
     if (fields) {
       loginButton = (
@@ -208,7 +206,7 @@ export default function Login(): React.JSX.Element {
   if (error) {
     errorJSX = (
       <Grid item xs={12}>
-        <Typography variant='subtitle1' className={classes.error}>
+        <Typography variant='subtitle1' sx={loginStyles.error}>
           {error.toString()}
         </Typography>
       </Grid>
@@ -223,11 +221,11 @@ export default function Login(): React.JSX.Element {
     )
 
   return (
-    <div className={classes.root}>
-      <div className={classes.center}>
-        <Card className={classes.card}>
+    <Box sx={(theme) => ({ ...loginStyles.root, backgroundColor: theme.palette.background.default })}>
+      <div style={loginStyles.center}>
+        <Card sx={loginStyles.card}>
           <CardContent>
-            <Grid container spacing={2} className={classes.gridContainer}>
+            <Grid container spacing={2} style={loginStyles.gridContainer}>
               <Grid container sx={{ justifyContent: 'center' }}>
                 <Grid item>{logo}</Grid>
                 <Grid item sx={{ display: 'flex', alignItems: 'center' }}>
@@ -244,6 +242,6 @@ export default function Login(): React.JSX.Element {
           </CardContent>
         </Card>
       </div>
-    </div>
+    </Box>
   )
 }

From c85607bfcf33023dae8e4b7a9cce125dc8aa8896 Mon Sep 17 00:00:00 2001
From: Forfold <nathaniel.cook@target.com>
Date: Fri, 24 Apr 2026 11:48:29 -0700
Subject: [PATCH 18/26] migrate makeStyles to sx: rotations, schedules

---
 web/src/app/rotations/RotationUserList.tsx    | 16 +++-------
 web/src/app/schedules/ScheduleRuleForm.tsx    | 30 +++++++++----------
 web/src/app/schedules/ScheduleShiftList.tsx   | 18 ++++-------
 .../CalendarSuccessForm.tsx                   | 20 ++-----------
 .../ScheduleOnCallNotificationsForm.tsx       | 11 ++-----
 .../ScheduleOnCallNotificationsList.tsx       | 14 +++------
 .../schedules/temp-sched/TempSchedDialog.tsx  | 28 ++++++++---------
 .../temp-sched/TempSchedShiftsList.tsx        | 19 ++----------
 8 files changed, 45 insertions(+), 111 deletions(-)

diff --git a/web/src/app/rotations/RotationUserList.tsx b/web/src/app/rotations/RotationUserList.tsx
index f5956b79c5..1efd7ba611 100644
--- a/web/src/app/rotations/RotationUserList.tsx
+++ b/web/src/app/rotations/RotationUserList.tsx
@@ -2,9 +2,7 @@ import React, { Suspense, useEffect, useState } from 'react'
 import { gql, useMutation, useQuery } from '@apollo/client'
 import Button from '@mui/material/Button'
 import Card from '@mui/material/Card'
-import makeStyles from '@mui/styles/makeStyles'
 import CardHeader from '@mui/material/CardHeader'
-import { Theme } from '@mui/material/styles'
 import { Add } from '@mui/icons-material'
 import FlatList from '../lists/FlatList'
 import { reorderList, calcNewActiveIndex } from './util'
@@ -13,6 +11,7 @@ import RotationSetActiveDialog from './RotationSetActiveDialog'
 import RotationUserDeleteDialog from './RotationUserDeleteDialog'
 import { UserAvatar } from '../util/avatars'
 import { styles as globalStyles } from '../styles/materialStyles'
+import { useTheme } from '@mui/material/styles'
 import Spinner from '../loading/components/Spinner'
 import { GenericError, ObjectNotFound } from '../error-pages'
 import { User, Rotation } from '../../schema'
@@ -43,14 +42,6 @@ const mutation = gql`
   }
 `
 
-const useStyles = makeStyles((theme: Theme) => {
-  const { cardHeader } = globalStyles(theme)
-
-  return {
-    cardHeader,
-  }
-})
-
 interface RotationUserListProps {
   rotationID: string
 }
@@ -61,7 +52,8 @@ type SwapType = {
 }
 
 function RotationUserList(props: RotationUserListProps): React.JSX.Element {
-  const classes = useStyles()
+  const theme = useTheme()
+  const gs = globalStyles(theme)
   const { rotationID } = props
   const [deleteIndex, setDeleteIndex] = useState<number | null>(null)
   const [setActiveIndex, setSetActiveIndex] = useState<number | null>(null)
@@ -166,7 +158,7 @@ function RotationUserList(props: RotationUserListProps): React.JSX.Element {
       </Suspense>
       <Card>
         <CardHeader
-          className={classes.cardHeader}
+          sx={gs.cardHeader}
           component='h3'
           title='Users'
           action={
diff --git a/web/src/app/schedules/ScheduleRuleForm.tsx b/web/src/app/schedules/ScheduleRuleForm.tsx
index 9b508a725b..f122ddcf46 100644
--- a/web/src/app/schedules/ScheduleRuleForm.tsx
+++ b/web/src/app/schedules/ScheduleRuleForm.tsx
@@ -1,5 +1,4 @@
 import React, { ReactNode } from 'react'
-import classNames from 'classnames'
 import { FormContainer, FormField } from '../forms'
 import {
   Grid,
@@ -15,7 +14,7 @@ import {
   Typography,
   FormHelperText,
 } from '@mui/material'
-import makeStyles from '@mui/styles/makeStyles'
+import type { SxProps, Theme } from '@mui/material'
 import { UserSelect, RotationSelect } from '../selection'
 import { startCase } from 'lodash'
 import { Add, Trash } from '../icons'
@@ -71,7 +70,7 @@ const renderDaysValue = (value: string): string => {
   return parts.join(',')
 }
 
-const useStyles = makeStyles({
+const classes = {
   noPadding: {
     padding: 0,
   },
@@ -91,7 +90,7 @@ const useStyles = makeStyles({
     borderCollapse: 'separate',
     borderSpacing: '0px 5px',
   },
-})
+} satisfies Record<string, SxProps<Theme>>
 
 export type ScheduleRuleFormValue = {
   targetID: string
@@ -125,7 +124,6 @@ export default function ScheduleRuleForm(
     targetType,
     ...formProps
   } = props
-  const classes = useStyles()
   const { zone, isLocalZone } = useScheduleTZ(scheduleID)
   const isMobile = useIsWidthDown('md')
 
@@ -135,7 +133,7 @@ export default function ScheduleRuleForm(
   function renderRuleField(idx: number): ReactNode {
     return (
       <TableRow key={idx}>
-        <TableCell className={classNames(classes.startEnd, classes.noBorder)}>
+        <TableCell sx={[classes.startEnd, classes.noBorder]}>
           <FormField
             fullWidth
             noError
@@ -148,7 +146,7 @@ export default function ScheduleRuleForm(
             hint={isLocalZone ? '' : fmtLocal(value.rules[idx].start)}
           />
         </TableCell>
-        <TableCell className={classNames(classes.startEnd, classes.noBorder)}>
+        <TableCell sx={[classes.startEnd, classes.noBorder]}>
           <FormField
             fullWidth
             noError
@@ -165,12 +163,12 @@ export default function ScheduleRuleForm(
           <TableCell
             key={dayIdx}
             padding='checkbox'
-            className={classes.noBorder}
+            sx={classes.noBorder}
             sx={{ display: { xs: 'none', md: 'table-cell' } }}
           >
             <FormField
               noError
-              className={classes.noPadding}
+              sx={classes.noPadding}
               component={Checkbox}
               checkbox
               disabled={disabled}
@@ -181,7 +179,7 @@ export default function ScheduleRuleForm(
           </TableCell>
         ))}
         <TableCell
-          className={classNames(classes.dayFilter, classes.noBorder)}
+          sx={[classes.dayFilter, classes.noBorder]}
           sx={{ display: { xs: 'table-cell', md: 'none' } }}
         >
           <FormField
@@ -212,7 +210,7 @@ export default function ScheduleRuleForm(
           </FormField>
           <Spacer />
         </TableCell>
-        <TableCell padding='none' className={classes.noBorder}>
+        <TableCell padding='none' sx={classes.noBorder}>
           {props.value.rules.length > 1 && (
             <IconButton
               aria-label='Delete rule'
@@ -258,16 +256,16 @@ export default function ScheduleRuleForm(
           </Typography>
         </Grid>
         <Grid item xs={12} style={{ paddingTop: 0 }}>
-          <Table data-cy='target-rules' className={classes.table}>
+          <Table data-cy='target-rules' sx={classes.table}>
             <TableHead>
               <TableRow>
                 <TableCell
-                  className={classNames(classes.startEnd, classes.noBorder)}
+                  sx={[classes.startEnd, classes.noBorder]}
                 >
                   Start
                 </TableCell>
                 <TableCell
-                  className={classNames(classes.startEnd, classes.noBorder)}
+                  sx={[classes.startEnd, classes.noBorder]}
                 >
                   End
                 </TableCell>
@@ -281,14 +279,14 @@ export default function ScheduleRuleForm(
                   </TableCell>
                 ))}
                 <TableCell
-                  className={classNames(classes.dayFilter, classes.noBorder)}
+                  sx={[classes.dayFilter, classes.noBorder]}
                   sx={{ display: { xs: 'table-cell', md: 'none' } }}
                 >
                   Days
                 </TableCell>
                 <TableCell
                   padding='none'
-                  className={classNames({ [classes.noBorder]: isMobile })}
+                  sx={isMobile ? classes.noBorder : undefined}
                 >
                   <IconButton
                     aria-label='Add rule'
diff --git a/web/src/app/schedules/ScheduleShiftList.tsx b/web/src/app/schedules/ScheduleShiftList.tsx
index 4ea2f6f7d3..a7b9b83924 100644
--- a/web/src/app/schedules/ScheduleShiftList.tsx
+++ b/web/src/app/schedules/ScheduleShiftList.tsx
@@ -10,8 +10,6 @@ import {
   MenuItem,
   Tooltip,
 } from '@mui/material'
-import makeStyles from '@mui/styles/makeStyles'
-import { DateTime, DateTimeFormatOptions, Duration, Interval } from 'luxon'
 import React, { Suspense, useCallback, useMemo, useState } from 'react'
 import CreateFAB from '../lists/CreateFAB'
 import FlatList, { FlatListListItem } from '../lists/FlatList'
@@ -30,7 +28,7 @@ import {
   TempSchedValue,
   defaultTempSchedValue,
 } from './temp-sched/sharedUtils'
-import TempSchedDialog from './temp-sched/TempSchedDialog'
+import { DateTime, DateTimeFormatOptions, Duration, Interval } from 'luxon'
 
 // query name is important, as it's used for refetching data after mutations
 const query = gql`
@@ -61,22 +59,16 @@ const durString = (dur: Duration): string => {
   return `${dur.days} day${dur.days > 1 ? 's' : ''}`
 }
 
-const useStyles = makeStyles({
-  datePicker: {
-    width: '100%',
-  },
-})
-
-interface ScheduleShiftListProps {
+import TempSchedDialog from './temp-sched/TempSchedDialog'
   scheduleID: string
 }
 
 const context = { suspense: false }
 
-function ScheduleShiftList({
+interface ScheduleShiftListProps {
   scheduleID,
 }: ScheduleShiftListProps): JSX.Element {
-  const classes = useStyles()
+function ScheduleShiftList({
   const isMobile = useIsWidthDown('md')
 
   const [specifyDuration, setSpecifyDuration] = useState(false)
@@ -358,7 +350,7 @@ function ScheduleShiftList({
                 </Grid>
                 <Grid item xs={12}>
                   <ISODatePicker
-                    className={classes.datePicker}
+                    style={{ width: '100%' }}
                     disabled={activeOnly}
                     label='Start Date'
                     name='filterStart'
diff --git a/web/src/app/schedules/calendar-subscribe/CalendarSuccessForm.tsx b/web/src/app/schedules/calendar-subscribe/CalendarSuccessForm.tsx
index 3ee19d5947..d59370c588 100644
--- a/web/src/app/schedules/calendar-subscribe/CalendarSuccessForm.tsx
+++ b/web/src/app/schedules/calendar-subscribe/CalendarSuccessForm.tsx
@@ -1,22 +1,7 @@
 import React from 'react'
 import { Button, FormHelperText, Grid, Typography } from '@mui/material'
-import makeStyles from '@mui/styles/makeStyles'
 import OpenInNewIcon from '@mui/icons-material/OpenInNew'
 import CopyText from '../../util/CopyText'
-import { Theme } from '@mui/material/styles'
-
-const useStyles = makeStyles((theme: Theme) => ({
-  caption: {
-    width: '100%',
-  },
-  newTabIcon: {
-    marginLeft: theme.spacing(1),
-  },
-  subscribeButtonContainer: {
-    display: 'flex',
-    justifyContent: 'center',
-  },
-}))
 
 interface CalendarSuccessFormProps {
   url: string
@@ -25,11 +10,10 @@ interface CalendarSuccessFormProps {
 export default function CalenderSuccessForm({
   url,
 }: CalendarSuccessFormProps): React.ReactNode {
-  const classes = useStyles()
   const convertedUrl = url.replace(/^https?:\/\//, 'webcal://')
   return (
     <Grid container spacing={2}>
-      <Grid item xs={12} className={classes.subscribeButtonContainer}>
+      <Grid item xs={12} style={{ display: 'flex', justifyContent: 'center' }}>
         <Button
           variant='contained'
           href={convertedUrl}
@@ -37,7 +21,7 @@ export default function CalenderSuccessForm({
           rel='noopener noreferrer'
         >
           Subscribe
-          <OpenInNewIcon fontSize='small' className={classes.newTabIcon} />
+          <OpenInNewIcon fontSize='small' sx={{ ml: 1 }} />
         </Button>
       </Grid>
       <Grid item xs={12}>
diff --git a/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsForm.tsx b/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsForm.tsx
index 43c76df790..4ba1d7bc96 100644
--- a/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsForm.tsx
+++ b/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsForm.tsx
@@ -8,7 +8,6 @@ import {
   Tooltip,
   Typography,
 } from '@mui/material'
-import makeStyles from '@mui/styles/makeStyles'
 import { DateTime } from 'luxon'
 import React, { useEffect } from 'react'
 
@@ -42,16 +41,10 @@ interface ScheduleOnCallNotificationsFormProps {
   destFieldErrors?: Readonly<Record<string, string>>
 }
 
-const useStyles = makeStyles({
-  margin0: { margin: 0 },
-  tzNote: { fontStyle: 'italic' },
-})
-
 export default function ScheduleOnCallNotificationsForm(
   props: ScheduleOnCallNotificationsFormProps,
 ): JSX.Element {
   const { scheduleID, ...formProps } = props
-  const classes = useStyles()
   const { zone } = useScheduleTZ(scheduleID)
   const destinationTypes = useSchedOnCallNotifyTypes()
   const currentType = destinationTypes.find(
@@ -124,7 +117,7 @@ export default function ScheduleOnCallNotificationsForm(
         </Grid>
         {props.value.time && (
           <Grid item xs={12}>
-            <Typography color='textSecondary' className={classes.tzNote}>
+            <Typography color='textSecondary' sx={{ fontStyle: 'italic' }}>
               Times shown in schedule timezone ({zone})
             </Typography>
           </Grid>
@@ -154,7 +147,7 @@ export default function ScheduleOnCallNotificationsForm(
                   key={i}
                   label={day}
                   labelPlacement='top'
-                  classes={{ labelPlacementTop: classes.margin0 }}
+                  slotProps={{ label: { sx: { margin: 0 } } }}
                   control={
                     <FormField
                       noError
diff --git a/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsList.tsx b/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsList.tsx
index 55f165b474..f29c8c4056 100644
--- a/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsList.tsx
+++ b/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsList.tsx
@@ -1,5 +1,6 @@
 import React, { Suspense, useState } from 'react'
 import { Button, Grid, Card, Typography, Tooltip, Theme } from '@mui/material'
+import { useTheme } from '@mui/material/styles'
 import FlatList from '../../lists/FlatList'
 import OtherActions from '../../util/OtherActions'
 import { onCallRuleSummary } from './util'
@@ -11,8 +12,6 @@ import Error from '@mui/icons-material/Error'
 import { gql, useQuery } from 'urql'
 import { Schedule } from '../../../schema'
 import { DestinationAvatar } from '../../util/DestinationAvatar'
-import { styles as globalStyles } from '../../styles/materialStyles'
-import makeStyles from '@mui/styles/makeStyles'
 import ScheduleOnCallNotificationsCreateDialog from './ScheduleOnCallNotificationsCreateDialog'
 import ScheduleOnCallNotificationsEditDialog from './ScheduleOnCallNotificationsEditDialog'
 
@@ -46,10 +45,6 @@ const query = gql`
   }
 `
 
-const useStyles = makeStyles((theme: Theme) => ({
-  ...globalStyles(theme),
-}))
-
 export default function ScheduleOnCallNotificationsList({
   scheduleID,
 }: ScheduleOnCallNotificationsListProps): JSX.Element {
@@ -57,8 +52,7 @@ export default function ScheduleOnCallNotificationsList({
   const [editRuleID, setEditRuleID] = useState('')
   const [deleteRuleID, setDeleteRuleID] = useState('')
   const isMobile = useIsWidthDown('md')
-
-  const classes = useStyles()
+  const theme = useTheme()
 
   const [q] = useQuery<{ schedule: Schedule }>({
     query,
@@ -78,10 +72,10 @@ export default function ScheduleOnCallNotificationsList({
                   style={{ display: 'flex' }}
                 >
                   <Tooltip title={q.error?.message}>
-                    <Error className={classes.error} />
+                    <Error sx={{ color: 'error.main' }} />
                   </Tooltip>
                   &nbsp;
-                  <span className={classes.error}>
+                  <span style={{ color: theme.palette.error.main }}>
                     Error loading notification rules.
                   </span>
                 </Typography>
diff --git a/web/src/app/schedules/temp-sched/TempSchedDialog.tsx b/web/src/app/schedules/temp-sched/TempSchedDialog.tsx
index 97f190e258..7699bbfceb 100644
--- a/web/src/app/schedules/temp-sched/TempSchedDialog.tsx
+++ b/web/src/app/schedules/temp-sched/TempSchedDialog.tsx
@@ -6,8 +6,8 @@ import FormControlLabel from '@mui/material/FormControlLabel'
 import FormHelperText from '@mui/material/FormHelperText'
 import Grid from '@mui/material/Grid'
 import Typography from '@mui/material/Typography'
-import makeStyles from '@mui/styles/makeStyles'
 import { Theme } from '@mui/material/styles'
+import type { SxProps } from '@mui/material'
 import Alert from '@mui/material/Alert'
 import AlertTitle from '@mui/material/AlertTitle'
 import _ from 'lodash'
@@ -42,11 +42,8 @@ function shiftEquals(a: Shift, b: Shift): boolean {
   return a.start === b.start && a.end === b.end && a.userID === b.userID
 }
 
-const useStyles = makeStyles((theme: Theme) => ({
+const classes = {
   contentText,
-  avatar: {
-    backgroundColor: theme.palette.primary.main,
-  },
   formContainer: {
     height: '100%',
   },
@@ -54,7 +51,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     marginTop: '.5rem',
     marginBottom: '.5rem',
   },
-  rightPane: {
+  rightPane: (theme: Theme) => ({
     [theme.breakpoints.down('md')]: {
       marginTop: '1rem',
     },
@@ -62,7 +59,7 @@ const useStyles = makeStyles((theme: Theme) => ({
       paddingLeft: '1rem',
     },
     overflow: 'hidden',
-  },
+  }),
   sticky: {
     position: 'sticky',
     top: 0,
@@ -70,7 +67,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   tzNote: {
     fontStyle: 'italic',
   },
-}))
+} satisfies Record<string, SxProps<Theme>>
 
 type TempScheduleDialogProps = {
   onClose: () => void
@@ -101,7 +98,6 @@ export default function TempSchedDialog({
   value: _value,
   edit = false,
 }: TempScheduleDialogProps): JSX.Element {
-  const classes = useStyles()
   const { q, zone, isLocalZone } = useScheduleTZ(scheduleID)
   const [now] = useState(DateTime.utc().startOf('minute').toISO())
   const [showForm, setShowForm] = useState(false)
@@ -315,7 +311,7 @@ export default function TempSchedDialog({
             ) : (
               <Grid
                 container
-                className={classes.formContainer}
+                sx={classes.formContainer}
                 justifyContent='space-between'
               >
                 {/* left pane */}
@@ -328,7 +324,7 @@ export default function TempSchedDialog({
                   spacing={2}
                 >
                   <Grid item xs={12}>
-                    <DialogContentText className={classes.contentText}>
+                    <DialogContentText sx={classes.contentText}>
                       The schedule will be exactly as configured here for the
                       entire duration (ignoring all assignments and overrides).
                     </DialogContentText>
@@ -337,7 +333,7 @@ export default function TempSchedDialog({
                   <Grid item xs={12}>
                     <Typography
                       color='textSecondary'
-                      className={classes.tzNote}
+                      sx={classes.tzNote}
                     >
                       Times shown in schedule timezone ({zone})
                     </Typography>
@@ -432,7 +428,7 @@ export default function TempSchedDialog({
                     <Divider />
                   </Grid>
 
-                  <Grid item xs={12} className={classes.sticky}>
+                  <Grid item xs={12} sx={classes.sticky}>
                     <TempSchedAddNewShift
                       value={value}
                       onChange={(shifts: Shift[]) =>
@@ -454,7 +450,7 @@ export default function TempSchedDialog({
                   md={6}
                   container
                   spacing={2}
-                  className={classes.rightPane}
+                  sx={classes.rightPane}
                 >
                   <Grid item xs={12} ref={shiftListRef}>
                     <Typography
@@ -468,7 +464,7 @@ export default function TempSchedDialog({
                     {submitAttempt && hasCoverageGaps && (
                       <Alert
                         severity='error'
-                        className={classes.noCoverageError}
+                        sx={classes.noCoverageError}
                       >
                         <AlertTitle>Gaps in coverage</AlertTitle>
                         <FormHelperText>
@@ -498,7 +494,7 @@ export default function TempSchedDialog({
                       DateTime.utc().minus({ hour: 1 }) || edit ? null : (
                       <Alert
                         severity='warning'
-                        className={classes.noCoverageError}
+                        sx={classes.noCoverageError}
                       >
                         <AlertTitle>Start time occurs in the past</AlertTitle>
                         <FormHelperText>
diff --git a/web/src/app/schedules/temp-sched/TempSchedShiftsList.tsx b/web/src/app/schedules/temp-sched/TempSchedShiftsList.tsx
index 7bac80ca74..107fcfbdf1 100644
--- a/web/src/app/schedules/temp-sched/TempSchedShiftsList.tsx
+++ b/web/src/app/schedules/temp-sched/TempSchedShiftsList.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react'
 import IconButton from '@mui/material/IconButton'
-import makeStyles from '@mui/styles/makeStyles'
 import Tooltip from '@mui/material/Tooltip'
 import { Shift } from './sharedUtils'
 import ScheduleIcon from '@mui/icons-material/Schedule'
@@ -30,19 +29,6 @@ import {
 } from './shiftsListUtil'
 import { fmtLocal, fmtTime } from '../../util/timeFormat'
 
-const useStyles = makeStyles({
-  secondaryActionWrapper: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  spinContainer: {
-    display: 'flex',
-    alignItems: 'center',
-    flexDirection: 'column',
-    marginTop: '15rem',
-  },
-})
-
 type TempSchedShiftsListProps = {
   value: Shift[]
   onRemove?: (shift: Shift) => void
@@ -72,7 +58,6 @@ export default function TempSchedShiftsList({
   handleCoverageGapClick,
   confirmationStep,
 }: TempSchedShiftsListProps): JSX.Element {
-  const classes = useStyles()
   const { zone, isLocalZone } = useScheduleTZ(scheduleID)
   const [now, setNow] = useState(DateTime.now().setZone(zone))
   const shifts = useUserInfo(value)
@@ -94,7 +79,7 @@ export default function TempSchedShiftsList({
   // wait for zone
   if (zone === '') {
     return (
-      <div className={classes.spinContainer}>
+      <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'column', marginTop: '15rem' }}>
         <CircularProgress />
       </div>
     )
@@ -235,7 +220,7 @@ export default function TempSchedShiftsList({
             icon: <UserAvatar userID={s.userID} />,
             disabled: isHistoricShift,
             secondaryAction: index === 0 && (
-              <div className={classes.secondaryActionWrapper}>
+              <div style={{ display: 'flex', alignItems: 'center' }}>
                 {!isValid && !isHistoricShift && (
                   <Tooltip
                     title='This shift extends beyond the start and/or end of this temporary schedule'

From b45b2bc3e2ac1db53b84c49830756bdb61c801f3 Mon Sep 17 00:00:00 2001
From: Forfold <nathaniel.cook@target.com>
Date: Fri, 24 Apr 2026 11:53:48 -0700
Subject: [PATCH 19/26] migrate makeStyles to sx: selection, services

---
 web/src/app/selection/MaterialSelect.tsx      | 56 ++++++-------------
 .../AlertMetrics/AlertMetricsTable.tsx        | 10 +---
 web/src/app/services/HeartbeatMonitorList.tsx | 15 +----
 .../app/services/HeartbeatMonitorStatus.tsx   | 22 +-------
 web/src/app/services/IntegrationKeyList.tsx   | 19 +------
 web/src/app/services/ServiceAlerts.tsx        | 10 +---
 web/src/app/services/ServiceLabelList.tsx     |  6 +-
 web/src/app/services/ServiceOnCallList.tsx    | 17 ++----
 8 files changed, 29 insertions(+), 126 deletions(-)

diff --git a/web/src/app/selection/MaterialSelect.tsx b/web/src/app/selection/MaterialSelect.tsx
index 1355442fdf..c410449b5e 100644
--- a/web/src/app/selection/MaterialSelect.tsx
+++ b/web/src/app/selection/MaterialSelect.tsx
@@ -19,36 +19,10 @@ import {
   ListItemText,
   createFilterOptions,
   FilterOptionsState,
+  autocompleteClasses,
 } from '@mui/material'
-import makeStyles from '@mui/styles/makeStyles'
 import { Check } from '@mui/icons-material'
 
-const useStyles = makeStyles({
-  listItemIcon: {
-    minWidth: 0,
-  },
-  menuItem: {
-    display: 'flex',
-    flex: 1,
-    justifyContent: 'space-between',
-    wordBreak: 'break-word',
-    whiteSpace: 'pre-wrap',
-  },
-  clearIndicator: {
-    display: 'none',
-  },
-  padding0: {
-    padding: 0,
-  },
-  list: {
-    width: '100%',
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 0,
-  },
-})
-
 interface AutocompleteInputProps extends InputProps {
   'data-cy': string
 }
@@ -96,7 +70,6 @@ interface MultiSelectProps {
 export default function MaterialSelect(
   props: CommonSelectProps & (MultiSelectProps | SingleSelectProps),
 ): JSX.Element {
-  const classes = useStyles()
   const {
     fullWidth,
     disabled,
@@ -149,13 +122,10 @@ export default function MaterialSelect(
     if (!value) setInputValue('')
   }, [value, multiple, focus])
 
-  const customCSS: Record<string, string> = {
-    option: classes.padding0,
-    clearIndicator: classes.clearIndicator,
-  }
-
-  if (noOptionsError) {
-    customCSS.noOptions = classes.padding0
+  const autocompleteSx = {
+    [`& .${autocompleteClasses.option}`]: { padding: 0 },
+    [`& .${autocompleteClasses.clearIndicator}`]: { display: 'none' },
+    ...(noOptionsError ? { [`& .${autocompleteClasses.noOptions}`]: { padding: 0 } } : {}),
   }
 
   function isSelected(val: string): boolean {
@@ -184,7 +154,7 @@ export default function MaterialSelect(
     <Autocomplete
       data-cy='material-select'
       data-cy-ready={!isLoading}
-      classes={customCSS}
+      sx={autocompleteSx}
       fullWidth={fullWidth}
       multiple={multiple}
       filterSelectedOptions={multiple && !disableCloseOnSelect}
@@ -261,21 +231,27 @@ export default function MaterialSelect(
         <MenuItem
           {...props}
           component='span'
-          className={classes.menuItem}
+          sx={{
+            display: 'flex',
+            flex: 1,
+            justifyContent: 'space-between',
+            wordBreak: 'break-word',
+            whiteSpace: 'pre-wrap',
+          }}
           selected={isSelected(value)}
           data-cy='search-select-item'
         >
-          <List className={classes.list}>
+          <List sx={{ width: '100%', display: 'flex', flexDirection: 'row', alignItems: 'center', p: 0 }}>
             <ListItem>
               <ListItemText primary={label} secondary={subText || null} />
             </ListItem>
             {icon && (
-              <ListItemIcon className={classes.listItemIcon}>
+              <ListItemIcon sx={{ minWidth: 0 }}>
                 {icon}
               </ListItemIcon>
             )}
             {disableCloseOnSelect && isSelected(value) && (
-              <ListItemIcon className={classes.listItemIcon}>
+              <ListItemIcon sx={{ minWidth: 0 }}>
                 <Check color='info' />
               </ListItemIcon>
             )}
diff --git a/web/src/app/services/AlertMetrics/AlertMetricsTable.tsx b/web/src/app/services/AlertMetrics/AlertMetricsTable.tsx
index 01d0ae3678..81865e9c4c 100644
--- a/web/src/app/services/AlertMetrics/AlertMetricsTable.tsx
+++ b/web/src/app/services/AlertMetrics/AlertMetricsTable.tsx
@@ -14,7 +14,6 @@ import {
 } from '@mui/x-data-grid'
 import { Button, Grid } from '@mui/material'
 import DownloadIcon from '@mui/icons-material/Download'
-import { makeStyles } from '@mui/styles'
 import { Alert, Service } from '../../../schema'
 import { DateTime, Duration } from 'luxon'
 import AppLink from '../../util/AppLink'
@@ -29,12 +28,6 @@ interface AlertMetricsTableProps {
   endTime: string
 }
 
-const useStyles = makeStyles(() => ({
-  tableContent: {
-    height: '400px',
-  },
-}))
-
 const columns: GridColDef[] = [
   {
     field: 'createdAt',
@@ -128,7 +121,6 @@ const columns: GridColDef[] = [
 export default function AlertMetricsTable(
   props: AlertMetricsTableProps,
 ): JSX.Element {
-  const classes = useStyles()
   const alerts = useMemo(
     () => props.alerts.map((a) => ({ ...a, ...a.metrics })),
     [props.alerts],
@@ -178,7 +170,7 @@ export default function AlertMetricsTable(
   }
 
   return (
-    <Grid container className={classes.tableContent}>
+    <Grid container style={{ height: '400px' }}>
       <Grid item xs={12} data-cy='metrics-table'>
         <DataGrid
           rows={alerts}
diff --git a/web/src/app/services/HeartbeatMonitorList.tsx b/web/src/app/services/HeartbeatMonitorList.tsx
index 7b98a171d2..dd8aec1e9b 100644
--- a/web/src/app/services/HeartbeatMonitorList.tsx
+++ b/web/src/app/services/HeartbeatMonitorList.tsx
@@ -6,7 +6,6 @@ import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
 import CreateFAB from '../lists/CreateFAB'
 import HeartbeatMonitorCreateDialog from './HeartbeatMonitorCreateDialog'
-import makeStyles from '@mui/styles/makeStyles'
 import HeartbeatMonitorEditDialog from './HeartbeatMonitorEditDialog'
 import HeartbeatMonitorDeleteDialog from './HeartbeatMonitorDeleteDialog'
 import OtherActions from '../util/OtherActions'
@@ -41,17 +40,6 @@ const query = gql`
   }
 `
 
-const useStyles = makeStyles(() => ({
-  text: {
-    display: 'flex',
-    alignItems: 'center',
-    width: 'fit-content',
-  },
-  spacing: {
-    marginBottom: 96,
-  },
-}))
-
 const sortItems = (a: HeartbeatMonitor, b: HeartbeatMonitor): number => {
   if (a.name.toLowerCase() < b.name.toLowerCase()) return -1
   if (a.name.toLowerCase() > b.name.toLowerCase()) return 1
@@ -63,7 +51,6 @@ const sortItems = (a: HeartbeatMonitor, b: HeartbeatMonitor): number => {
 export default function HeartbeatMonitorList(props: {
   serviceID: string
 }): JSX.Element {
-  const classes = useStyles()
   const isMobile = useIsWidthDown('md')
   const [showCreateDialog, setShowCreateDialog] = useState(false)
   const [showEditDialogByID, setShowEditDialogByID] = useState<string | null>(
@@ -148,7 +135,7 @@ export default function HeartbeatMonitorList(props: {
 
   return (
     <React.Fragment>
-      <Grid item xs={12} className={classes.spacing}>
+      <Grid item xs={12} sx={{ mb: '96px' }}>
         <Card>
           <CardContent>
             {renderList(data.service.heartbeatMonitors)}
diff --git a/web/src/app/services/HeartbeatMonitorStatus.tsx b/web/src/app/services/HeartbeatMonitorStatus.tsx
index e30363069e..4ef8c7abcd 100644
--- a/web/src/app/services/HeartbeatMonitorStatus.tsx
+++ b/web/src/app/services/HeartbeatMonitorStatus.tsx
@@ -6,25 +6,10 @@ import Typography from '@mui/material/Typography'
 import HealthyIcon from '@mui/icons-material/Check'
 import UnhealthyIcon from '@mui/icons-material/Clear'
 import InactiveIcon from '@mui/icons-material/Remove'
-import makeStyles from '@mui/styles/makeStyles'
 import useStatusColors from '../theme/useStatusColors'
 import { ISOTimestamp } from '../../schema'
 import { Time } from '../util/Time'
 
-const useStyles = makeStyles({
-  gridContainer: {
-    width: 'min-content',
-    marginRight: '1em',
-  },
-  avatarContainer: {
-    display: 'flex',
-    justifyContent: 'center',
-  },
-  durationText: {
-    textAlign: 'center',
-  },
-})
-
 const icons = {
   healthy: <HealthyIcon />,
   unhealthy: <UnhealthyIcon />,
@@ -41,7 +26,6 @@ export default function HeartbeatMonitorStatus(props: {
   lastState: 'inactive' | 'healthy' | 'unhealthy'
   lastHeartbeat?: null | ISOTimestamp
 }): JSX.Element {
-  const classes = useStyles()
   const statusColors = useStatusColors()
 
   const icon = icons[props.lastState]
@@ -59,9 +43,9 @@ export default function HeartbeatMonitorStatus(props: {
   }
 
   return (
-    <Grid container className={classes.gridContainer}>
+    <Grid container style={{ width: 'min-content', marginRight: '1em' }}>
       <Grid item xs={12}>
-        <ListItemAvatar className={classes.avatarContainer}>
+        <ListItemAvatar sx={{ display: 'flex', justifyContent: 'center' }}>
           <Avatar
             aria-label={props.lastState}
             sx={{ bgcolor: bgColor(statusMap[props.lastState]) }}
@@ -70,7 +54,7 @@ export default function HeartbeatMonitorStatus(props: {
           </Avatar>
         </ListItemAvatar>
       </Grid>
-      <Grid item xs={12} className={classes.durationText}>
+      <Grid item xs={12} sx={{ textAlign: 'center' }}>
         <Typography variant='caption'>
           <Time time={props.lastHeartbeat} format='relative' zero='Inactive' />
         </Typography>
diff --git a/web/src/app/services/IntegrationKeyList.tsx b/web/src/app/services/IntegrationKeyList.tsx
index dc8b033586..9fce47fbe6 100644
--- a/web/src/app/services/IntegrationKeyList.tsx
+++ b/web/src/app/services/IntegrationKeyList.tsx
@@ -13,7 +13,6 @@ import CopyText from '../util/CopyText'
 import AppLink from '../util/AppLink'
 import { useIsWidthDown } from '../util/useWidth'
 import { Add } from '@mui/icons-material'
-import makeStyles from '@mui/styles/makeStyles'
 import Spinner from '../loading/components/Spinner'
 import { GenericError } from '../error-pages'
 import { IntegrationKey } from '../../schema'
@@ -44,21 +43,6 @@ const query = gql`
   }
 `
 
-const useStyles = makeStyles({
-  copyIcon: {
-    paddingRight: '0.25em',
-    color: 'black',
-  },
-  keyLink: {
-    display: 'flex',
-    alignItems: 'center',
-    width: 'fit-content',
-  },
-  spacing: {
-    marginBottom: 96,
-  },
-})
-
 const sortItems = (a: IntegrationKey, b: IntegrationKey): number => {
   const extA = a.externalSystemName || ''
   const extB = b.externalSystemName || ''
@@ -98,7 +82,6 @@ export function IntegrationKeyDetails(props: {
 export default function IntegrationKeyList(props: {
   serviceID: string
 }): JSX.Element {
-  const classes = useStyles()
   const isMobile = useIsWidthDown('md')
   const [create, setCreate] = useState<boolean>(false)
   const [deleteDialog, setDeleteDialog] = useState<string | null>(null)
@@ -178,7 +161,7 @@ export default function IntegrationKeyList(props: {
 
   return (
     <React.Fragment>
-      <Grid item xs={12} className={classes.spacing}>
+      <Grid item xs={12} sx={{ mb: '96px' }}>
         <Card>
           <CardContent>
             <CompList
diff --git a/web/src/app/services/ServiceAlerts.tsx b/web/src/app/services/ServiceAlerts.tsx
index 21748f0fe2..ab4670d045 100644
--- a/web/src/app/services/ServiceAlerts.tsx
+++ b/web/src/app/services/ServiceAlerts.tsx
@@ -3,7 +3,6 @@ import { gql, useMutation } from 'urql'
 import Button from '@mui/material/Button'
 import ButtonGroup from '@mui/material/ButtonGroup'
 import Grid from '@mui/material/Grid'
-import makeStyles from '@mui/styles/makeStyles'
 
 import AlertsList from '../alerts/AlertsList'
 import FormDialog from '../dialogs/FormDialog'
@@ -15,16 +14,9 @@ const mutation = gql`
   }
 `
 
-const useStyles = makeStyles({
-  filter: {
-    width: 'fit-content',
-  },
-})
-
 export default function ServiceAlerts(props: {
   serviceID: string
 }): JSX.Element {
-  const classes = useStyles()
 
   const [alertStatus, setAlertStatus] = useState('')
   const [showDialog, setShowDialog] = useState(false)
@@ -49,7 +41,7 @@ export default function ServiceAlerts(props: {
   }
 
   const secondaryActions = (
-    <Grid className={classes.filter} container spacing={2} alignItems='center'>
+    <Grid style={{ width: 'fit-content' }} container spacing={2} alignItems='center'>
       <Grid item>
         <AlertsListFilter serviceID={props.serviceID} />
       </Grid>
diff --git a/web/src/app/services/ServiceLabelList.tsx b/web/src/app/services/ServiceLabelList.tsx
index 56e155f4da..a77c4f125b 100644
--- a/web/src/app/services/ServiceLabelList.tsx
+++ b/web/src/app/services/ServiceLabelList.tsx
@@ -3,7 +3,6 @@ import Button from '@mui/material/Button'
 import Grid from '@mui/material/Grid'
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
-import makeStyles from '@mui/styles/makeStyles'
 import { gql, useQuery } from 'urql'
 import CreateFAB from '../lists/CreateFAB'
 import OtherActions from '../util/OtherActions'
@@ -38,8 +37,6 @@ const sortItems = (a: Label, b: Label): number => {
   return 0
 }
 
-const useStyles = makeStyles({ spacing: { marginBottom: 96 } })
-
 export default function ServiceLabelList(props: {
   serviceID: string
 }): JSX.Element {
@@ -47,7 +44,6 @@ export default function ServiceLabelList(props: {
   const [editKey, setEditKey] = useState<string | null>(null)
   const [deleteKey, setDeleteKey] = useState<string | null>(null)
   const isMobile = useIsWidthDown('md')
-  const classes = useStyles()
 
   const [{ data, fetching }] = useQuery({
     query,
@@ -107,7 +103,7 @@ export default function ServiceLabelList(props: {
 
   return (
     <React.Fragment>
-      <Grid item xs={12} className={classes.spacing}>
+      <Grid item xs={12} sx={{ mb: '96px' }}>
         <Card>
           <CardContent>{renderList(data.service.labels)}</CardContent>
         </Card>
diff --git a/web/src/app/services/ServiceOnCallList.tsx b/web/src/app/services/ServiceOnCallList.tsx
index d08cd582f4..6ac539bace 100644
--- a/web/src/app/services/ServiceOnCallList.tsx
+++ b/web/src/app/services/ServiceOnCallList.tsx
@@ -3,12 +3,11 @@ import { gql, useQuery } from 'urql'
 import Card from '@mui/material/Card'
 import CardHeader from '@mui/material/CardHeader'
 import { UserAvatar } from '../util/avatars'
-import makeStyles from '@mui/styles/makeStyles'
 import { styles as globalStyles } from '../styles/materialStyles'
 import { Error } from '@mui/icons-material'
 import _ from 'lodash'
 import { Warning } from '../icons'
-import { Theme } from '@mui/material'
+import { useTheme } from '@mui/material'
 import CompList from '../lists/CompList'
 import {
   CompListItemNav,
@@ -16,14 +15,6 @@ import {
   CompListSection,
 } from '../lists/CompListItems'
 
-const useStyles = makeStyles((theme: Theme) => {
-  const { cardHeader } = globalStyles(theme)
-
-  return {
-    cardHeader,
-  }
-})
-
 const query = gql`
   query onCallQuery($id: ID!) {
     service(id: $id) {
@@ -56,12 +47,14 @@ const stepLengthText = (s: number): string => {
   }
   return 'No users assigned'
 }
+
 export default function ServiceOnCallList({
   serviceID,
 }: {
   serviceID: string
 }): React.ReactNode {
-  const classes = useStyles()
+  const theme = useTheme()
+  const gs = globalStyles(theme)
   const [{ data, error }] = useQuery({
     query,
     variables: { id: serviceID },
@@ -93,7 +86,7 @@ export default function ServiceOnCallList({
   return (
     <Card>
       <CardHeader
-        className={classes.cardHeader}
+        sx={gs.cardHeader}
         component='h3'
         title='On Call Users'
       />

From df63a15809805fde22843d22c63013610fb7a867 Mon Sep 17 00:00:00 2001
From: Forfold <nathaniel.cook@target.com>
Date: Fri, 24 Apr 2026 12:00:43 -0700
Subject: [PATCH 20/26] migrate makeStyles to sx: users, util

---
 web/src/app/users/UserContactMethodList.tsx   | 12 +++----
 .../UserContactMethodVerificationForm.tsx     | 16 ++--------
 .../app/users/UserNotificationRuleList.tsx    | 14 +++------
 web/src/app/util/SetFavoriteButton.tsx        | 31 +++++++------------
 web/src/app/util/TelTextField.tsx             | 15 ++-------
 5 files changed, 24 insertions(+), 64 deletions(-)

diff --git a/web/src/app/users/UserContactMethodList.tsx b/web/src/app/users/UserContactMethodList.tsx
index 757986b046..ed9b0714de 100644
--- a/web/src/app/users/UserContactMethodList.tsx
+++ b/web/src/app/users/UserContactMethodList.tsx
@@ -1,8 +1,6 @@
 import React, { useState, ReactNode, Suspense } from 'react'
 import { gql, useQuery } from 'urql'
 import { Button, Card, CardHeader, Grid, IconButton } from '@mui/material'
-import makeStyles from '@mui/styles/makeStyles'
-import { Theme } from '@mui/material/styles'
 import { Add } from '@mui/icons-material'
 import { sortContactMethods } from './util'
 import OtherActions from '../util/OtherActions'
@@ -13,6 +11,7 @@ import { useIsWidthDown } from '../util/useWidth'
 import { GenericError, ObjectNotFound } from '../error-pages'
 import SendTestDialog from './SendTestDialog'
 import { styles as globalStyles } from '../styles/materialStyles'
+import { useTheme } from '@mui/material/styles'
 import { UserContactMethod } from '../../schema'
 import { useSessionInfo, useContactMethodTypes } from '../util/RequireConfig'
 import UserContactMethodEditDialog from './UserContactMethodEditDialog'
@@ -61,14 +60,11 @@ interface UserContactMethodListProps {
   readOnly?: boolean
 }
 
-const useStyles = makeStyles((theme: Theme) => ({
-  cardHeader: globalStyles(theme).cardHeader,
-}))
-
 export default function UserContactMethodList(
   props: UserContactMethodListProps,
 ): ReactNode {
-  const classes = useStyles()
+  const theme = useTheme()
+  const gs = globalStyles(theme)
   const mobile = useIsWidthDown('md')
 
   const [showAddDialog, setShowAddDialog] = useState(false)
@@ -193,7 +189,7 @@ export default function UserContactMethodList(
     <Grid item xs={12}>
       <Card>
         <CardHeader
-          className={classes.cardHeader}
+          sx={gs.cardHeader}
           titleTypographyProps={{ component: 'h2', variant: 'h5' }}
           title='Contact Methods'
           action={
diff --git a/web/src/app/users/UserContactMethodVerificationForm.tsx b/web/src/app/users/UserContactMethodVerificationForm.tsx
index 699c38a10c..63c846a5ec 100644
--- a/web/src/app/users/UserContactMethodVerificationForm.tsx
+++ b/web/src/app/users/UserContactMethodVerificationForm.tsx
@@ -3,7 +3,6 @@ import { useMutation, gql } from 'urql'
 import Grid from '@mui/material/Grid'
 import TextField from '@mui/material/TextField'
 import LoadingButton from '../loading/components/LoadingButton'
-import makeStyles from '@mui/styles/makeStyles'
 import { FormContainer, FormField } from '../forms'
 
 /*
@@ -18,16 +17,6 @@ const sendVerificationCodeMutation = gql`
   }
 `
 
-const useStyles = makeStyles({
-  fieldGridItem: {
-    flexGrow: 1,
-  },
-  sendGridItem: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-})
-
 interface UserContactMethodVerificationFormProps {
   contactMethodID: string
   disabled: boolean
@@ -41,7 +30,6 @@ interface UserContactMethodVerificationFormProps {
 export default function UserContactMethodVerificationForm(
   props: UserContactMethodVerificationFormProps,
 ): React.ReactNode {
-  const classes = useStyles()
 
   const [sendCodeStatus, sendCode] = useMutation(sendVerificationCodeMutation)
 
@@ -69,7 +57,7 @@ export default function UserContactMethodVerificationForm(
   return (
     <FormContainer optionalLabels {...props}>
       <Grid container spacing={2}>
-        <Grid item className={classes.sendGridItem}>
+        <Grid item sx={{ display: 'flex', alignItems: 'center' }}>
           <LoadingButton
             loading={sendCodeStatus.fetching}
             disabled={props.disabled}
@@ -78,7 +66,7 @@ export default function UserContactMethodVerificationForm(
             onClick={() => sendAndCatch()}
           />
         </Grid>
-        <Grid item className={classes.fieldGridItem}>
+        <Grid item sx={{ flexGrow: 1 }}>
           <FormField
             fullWidth
             name='code'
diff --git a/web/src/app/users/UserNotificationRuleList.tsx b/web/src/app/users/UserNotificationRuleList.tsx
index 57e0d91c0c..f37a02619d 100644
--- a/web/src/app/users/UserNotificationRuleList.tsx
+++ b/web/src/app/users/UserNotificationRuleList.tsx
@@ -8,7 +8,7 @@ import {
   IconButton,
   Theme,
 } from '@mui/material'
-import makeStyles from '@mui/styles/makeStyles'
+import { useTheme } from '@mui/material/styles'
 import { Add, Delete } from '@mui/icons-material'
 import { formatNotificationRule, sortNotificationRules } from './util'
 import UserNotificationRuleDeleteDialog from './UserNotificationRuleDeleteDialog'
@@ -51,18 +51,12 @@ const query = gql`
   }
 `
 
-const useStyles = makeStyles((theme: Theme) => {
-  const { cardHeader } = globalStyles(theme)
-  return {
-    cardHeader,
-  }
-})
-
 export default function UserNotificationRuleList(props: {
   userID: string
   readOnly: boolean
 }): ReactNode {
-  const classes = useStyles()
+  const theme = useTheme()
+  const gs = globalStyles(theme)
   const mobile = useIsWidthDown('md')
   const [showAddDialog, setShowAddDialog] = useState(false)
   const [deleteID, setDeleteID] = useState(null)
@@ -82,7 +76,7 @@ export default function UserNotificationRuleList(props: {
     <Grid item xs={12}>
       <Card>
         <CardHeader
-          className={classes.cardHeader}
+          sx={gs.cardHeader}
           titleTypographyProps={{ component: 'h2', variant: 'h5' }}
           title='Notification Rules'
           action={
diff --git a/web/src/app/util/SetFavoriteButton.tsx b/web/src/app/util/SetFavoriteButton.tsx
index ad7a36995a..facb0405bf 100644
--- a/web/src/app/util/SetFavoriteButton.tsx
+++ b/web/src/app/util/SetFavoriteButton.tsx
@@ -3,9 +3,7 @@ import IconButton from '@mui/material/IconButton'
 import MUIFavoriteIcon from '@mui/icons-material/Favorite'
 import NotFavoriteIcon from '@mui/icons-material/FavoriteBorder'
 import Tooltip from '@mui/material/Tooltip'
-import makeStyles from '@mui/styles/makeStyles'
 import _ from 'lodash'
-import { Theme } from '@mui/material'
 
 interface SetFavoriteButtonProps {
   typeName: 'rotation' | 'service' | 'schedule' | 'escalationPolicy' | 'user'
@@ -14,21 +12,18 @@ interface SetFavoriteButtonProps {
   loading?: boolean
 }
 
-const useStyles = makeStyles((theme: Theme) => ({
-  favorited: {
-    color:
-      theme.palette.mode === 'dark'
-        ? theme.palette.primary.main
-        : 'rgb(205, 24, 49)',
-  },
-  notFavorited: {
-    color: 'inherit',
-  },
-}))
-
 export function FavoriteIcon(): JSX.Element {
-  const classes = useStyles()
-  return <MUIFavoriteIcon data-cy='fav-icon' className={classes.favorited} />
+  return (
+    <MUIFavoriteIcon
+      data-cy='fav-icon'
+      sx={(theme) => ({
+        color:
+          theme.palette.mode === 'dark'
+            ? theme.palette.primary.main
+            : 'rgb(205, 24, 49)',
+      })}
+    />
+  )
 }
 
 export function SetFavoriteButton({
@@ -37,8 +32,6 @@ export function SetFavoriteButton({
   isFavorite,
   loading,
 }: SetFavoriteButtonProps): JSX.Element | null {
-  const classes = useStyles()
-
   if (loading) {
     return null
   }
@@ -46,7 +39,7 @@ export function SetFavoriteButton({
   const icon = isFavorite ? (
     <FavoriteIcon />
   ) : (
-    <NotFavoriteIcon className={classes.notFavorited} />
+    <NotFavoriteIcon sx={{ color: 'inherit' }} />
   )
 
   const content = (
diff --git a/web/src/app/util/TelTextField.tsx b/web/src/app/util/TelTextField.tsx
index 406008321a..34f5a9787f 100644
--- a/web/src/app/util/TelTextField.tsx
+++ b/web/src/app/util/TelTextField.tsx
@@ -5,7 +5,6 @@ import { InputProps } from '@mui/material/Input'
 import { Check, Close } from '@mui/icons-material'
 import _ from 'lodash'
 import InputAdornment from '@mui/material/InputAdornment'
-import makeStyles from '@mui/styles/makeStyles'
 import { DEBOUNCE_DELAY } from '../config'
 
 const isValidNumber = gql`
@@ -17,21 +16,11 @@ const isValidNumber = gql`
   }
 `
 
-const useStyles = makeStyles({
-  valid: {
-    fill: 'green',
-  },
-  invalid: {
-    fill: 'red',
-  },
-})
-
 const noSuspense = { suspense: false }
 
 export default function TelTextField(
   props: TextFieldProps & { value: string },
 ): JSX.Element {
-  const classes = useStyles()
   const [phoneNumber, setPhoneNumber] = useState('')
 
   // debounce to set the phone number
@@ -58,9 +47,9 @@ export default function TelTextField(
   if (!props.value) {
     // no adornment if empty
   } else if (valid) {
-    adorn = <Check className={classes.valid} />
+    adorn = <Check sx={{ fill: 'green' }} />
   } else if (valid === false) {
-    adorn = <Close className={classes.invalid} />
+    adorn = <Close sx={{ fill: 'red' }} />
   }
 
   let iprops: Partial<InputProps>

From ac4ff26e649f51479435afc4fcf27732abe1b401 Mon Sep 17 00:00:00 2001
From: Forfold <nathaniel.cook@target.com>
Date: Fri, 24 Apr 2026 12:06:17 -0700
Subject: [PATCH 21/26] migrate makeStyles to sx: calendar, explore

---
 web/src/app/util/calendar/Calendar.tsx        | 85 +++++++++----------
 .../util/calendar/CalendarEventWrapper.tsx    | 27 ++----
 web/src/app/util/calendar/CalendarToolbar.tsx | 20 +----
 web/src/explore/explore.tsx                   | 26 +++---
 4 files changed, 64 insertions(+), 94 deletions(-)

diff --git a/web/src/app/util/calendar/Calendar.tsx b/web/src/app/util/calendar/Calendar.tsx
index 9757d26b8a..4738dea415 100644
--- a/web/src/app/util/calendar/Calendar.tsx
+++ b/web/src/app/util/calendar/Calendar.tsx
@@ -1,7 +1,7 @@
 import React, { ReactElement, useContext } from 'react'
-import { Card, Button } from '@mui/material'
-import makeStyles from '@mui/styles/makeStyles'
+import { Box, Card, Button } from '@mui/material'
 import { darken, lighten, useTheme, Theme } from '@mui/material/styles'
+import type { SxProps } from '@mui/material'
 import Grid from '@mui/material/Grid'
 import FormControlLabel from '@mui/material/FormControlLabel'
 import Switch from '@mui/material/Switch'
@@ -38,8 +38,8 @@ function getBorder(theme: Theme): string {
   return '0.5px solid ' + darken(theme.palette.background.paper, 0.2)
 }
 
-const useStyles = makeStyles((theme: Theme) => ({
-  calendar: {
+const calendarClasses = {
+  calendar: (theme: Theme): SxProps<Theme> => ({
     height: '45rem',
     fontFamily: theme.typography.body2.fontFamily,
     fontSize: theme.typography.body2.fontSize,
@@ -50,21 +50,20 @@ const useStyles = makeStyles((theme: Theme) => ({
       {
         border: 'none',
       },
-    // weekly current time divider line
     '& .rbc-time-content .rbc-current-time-indicator': {
       backgroundColor: theme.palette.primary.main,
     },
-  },
-  card: {
+  }),
+  card: (theme: Theme) => ({
     padding: theme.spacing(2),
-  },
-  filterBtn: {
+  }),
+  filterBtn: (theme: Theme) => ({
     marginRight: theme.spacing(1.75),
-  },
-  tempSchedBtn: {
+  }),
+  tempSchedBtn: (theme: Theme) => ({
     marginLeft: theme.spacing(1.75),
-  },
-  overrideTitleIcon: {
+  }),
+  overrideTitleIcon: (theme: Theme) => ({
     verticalAlign: 'middle',
     borderRadius: '50%',
     background: theme.palette.secondary.main,
@@ -72,8 +71,8 @@ const useStyles = makeStyles((theme: Theme) => ({
     height: '100%',
     width: '18px',
     marginRight: '0.25rem',
-  },
-}))
+  }),
+} satisfies Record<string, (theme: Theme) => SxProps<Theme>>
 
 interface CalendarEvent {
   title: React.ReactNode
@@ -145,7 +144,6 @@ function CalendarEventWrapperWithLink(
 }
 
 export default function Calendar(props: CalendarProps): JSX.Element {
-  const classes = useStyles()
   const theme = useTheme()
 
   const { scheduleID, shifts, temporarySchedules, showScheduleLink } = props
@@ -216,7 +214,7 @@ export default function Calendar(props: CalendarProps): JSX.Element {
         <div>
           <AccountSwitch
             fontSize='small'
-            className={classes.overrideTitleIcon}
+            sx={calendarClasses.overrideTitleIcon(theme)}
             aria-label='Replace Override'
           />
           Override
@@ -229,7 +227,7 @@ export default function Calendar(props: CalendarProps): JSX.Element {
         <div>
           <AccountPlus
             fontSize='small'
-            className={classes.overrideTitleIcon}
+            sx={calendarClasses.overrideTitleIcon(theme)}
             aria-label='Add Override'
           />
           Override
@@ -241,7 +239,7 @@ export default function Calendar(props: CalendarProps): JSX.Element {
       <div>
         <AccountMinus
           fontSize='small'
-          className={classes.overrideTitleIcon}
+          sx={calendarClasses.overrideTitleIcon(theme)}
           aria-label='Remove Override'
         />
         Override
@@ -340,14 +338,14 @@ export default function Calendar(props: CalendarProps): JSX.Element {
           Times shown are in {Intl.DateTimeFormat().resolvedOptions().timeZone}
         </i>
       </Typography>
-      <Card className={classes.card} data-cy='calendar'>
+      <Card sx={calendarClasses.card(theme)} data-cy='calendar'>
         <ScheduleCalendarToolbar
           filter={
             <FilterContainer
               onReset={resetFilter}
               iconButtonProps={{
                 size: 'small',
-                className: classes.filterBtn,
+                sx: calendarClasses.filterBtn(theme),
               }}
             >
               <Grid item xs={12}>
@@ -385,7 +383,7 @@ export default function Calendar(props: CalendarProps): JSX.Element {
                     removeUserReadOnly: false,
                   })
                 }
-                className={classes.tempSchedBtn}
+                sx={calendarClasses.tempSchedBtn(theme)}
                 startIcon={<GroupAdd />}
                 title='Make temporary change to schedule'
               >
@@ -394,27 +392,28 @@ export default function Calendar(props: CalendarProps): JSX.Element {
             )
           }
         />
-        <RBCalendar
-          date={DateTime.fromISO(start).toJSDate()}
-          localizer={localizer}
-          events={getCalEvents(shifts, temporarySchedules, props.overrides)}
-          className={classes.calendar}
-          tooltipAccessor={() => ''}
-          views={['month', 'week']}
-          view={weekly ? 'week' : 'month'}
-          showAllEvents
-          eventPropGetter={eventStyleGetter}
-          dayPropGetter={dayStyleGetter}
-          onNavigate={() => {}} // stub to hide false console err
-          onView={() => {}} // stub to hide false console err
-          components={{
-            // @ts-expect-error Property 'children' does not exist on type - yes it does
-            eventWrapper: showScheduleLink
-              ? CalendarEventWrapperWithLink
-              : CalendarEventWrapper,
-            toolbar: () => null,
-          }}
-        />
+        <Box sx={calendarClasses.calendar(theme)}>
+          <RBCalendar
+            date={DateTime.fromISO(start).toJSDate()}
+            localizer={localizer}
+            events={getCalEvents(shifts, temporarySchedules, props.overrides)}
+            tooltipAccessor={() => ''}
+            views={['month', 'week']}
+            view={weekly ? 'week' : 'month'}
+            showAllEvents
+            eventPropGetter={eventStyleGetter}
+            dayPropGetter={dayStyleGetter}
+            onNavigate={() => {}} // stub to hide false console err
+            onView={() => {}} // stub to hide false console err
+            components={{
+              // @ts-expect-error Property 'children' does not exist on type - yes it does
+              eventWrapper: showScheduleLink
+                ? CalendarEventWrapperWithLink
+                : CalendarEventWrapper,
+              toolbar: () => null,
+            }}
+          />
+        </Box>
       </Card>
     </React.Fragment>
   )
diff --git a/web/src/app/util/calendar/CalendarEventWrapper.tsx b/web/src/app/util/calendar/CalendarEventWrapper.tsx
index 10ad0e0e79..d8ba839f00 100644
--- a/web/src/app/util/calendar/CalendarEventWrapper.tsx
+++ b/web/src/app/util/calendar/CalendarEventWrapper.tsx
@@ -9,7 +9,6 @@ import Button from '@mui/material/Button'
 import Grid from '@mui/material/Grid'
 import Popover from '@mui/material/Popover'
 import Typography from '@mui/material/Typography'
-import makeStyles from '@mui/styles/makeStyles'
 import { DateTime } from 'luxon'
 import { OverrideDialogContext } from '../../schedules/ScheduleDetails'
 import CardActions from '../../details/CardActions'
@@ -26,18 +25,7 @@ import {
 } from './Calendar'
 import AppLink from '../AppLink'
 
-const useStyles = makeStyles({
-  cardActionContainer: {
-    width: '100%',
-  },
-  flexGrow: {
-    flexGrow: 1,
-  },
-  paper: {
-    padding: 8,
-    maxWidth: 275,
-  },
-})
+
 
 interface ScheduleCalendarEventWrapperProps {
   children: JSX.Element
@@ -50,7 +38,6 @@ export default function ScheduleCalendarEventWrapper({
   event,
   showScheduleLink,
 }: ScheduleCalendarEventWrapperProps): JSX.Element {
-  const classes = useStyles()
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
 
   const [showEditDialog, setShowEditDialog] = useState('')
@@ -99,7 +86,7 @@ export default function ScheduleCalendarEventWrapper({
     }
 
     return (
-      <div className={classes.cardActionContainer}>
+      <div style={{ width: '100%' }}>
         <CardActions
           secondaryActions={[
             {
@@ -120,7 +107,7 @@ export default function ScheduleCalendarEventWrapper({
 
   function renderOverrideButtons(calEvent: OverrideEvent): JSX.Element {
     return (
-      <div className={classes.cardActionContainer}>
+      <div style={{ width: '100%' }}>
         <CardActions
           secondaryActions={[
             {
@@ -148,7 +135,7 @@ export default function ScheduleCalendarEventWrapper({
   function renderShiftButtons(calEvent: OnCallShiftEvent): JSX.Element {
     return (
       <React.Fragment>
-        <Grid item className={classes.flexGrow} />
+        <Grid item sx={{ flexGrow: 1 }} />
         <Grid item>
           <Button
             data-cy='override'
@@ -169,7 +156,7 @@ export default function ScheduleCalendarEventWrapper({
       const id = event?.targetID ?? ''
       return (
         <React.Fragment>
-          <Grid item className={classes.flexGrow} />
+          <Grid item sx={{ flexGrow: 1 }} />
           <Grid item>
             <Button
               variant='contained'
@@ -278,11 +265,9 @@ export default function ScheduleCalendarEventWrapper({
           paper: {
             // @ts-expect-error - DOM attr for tests
             'data-cy': 'shift-tooltip',
+            sx: { padding: 1, maxWidth: 275 },
           },
         }}
-        classes={{
-          paper: classes.paper,
-        }}
       >
         {renderShiftInfo()}
       </Popover>
diff --git a/web/src/app/util/calendar/CalendarToolbar.tsx b/web/src/app/util/calendar/CalendarToolbar.tsx
index 8db0d66036..b4c70f0f10 100644
--- a/web/src/app/util/calendar/CalendarToolbar.tsx
+++ b/web/src/app/util/calendar/CalendarToolbar.tsx
@@ -5,25 +5,14 @@ import {
   Grid,
   IconButton,
   Typography,
+  Box,
 } from '@mui/material'
-import makeStyles from '@mui/styles/makeStyles'
-import { Theme } from '@mui/material/styles'
 import { DateTime } from 'luxon'
 import { getEndOfWeek, getStartOfWeek } from '../luxon-helpers'
 import { useCalendarNavigation } from './hooks'
 import LeftIcon from '@mui/icons-material/ChevronLeft'
 import RightIcon from '@mui/icons-material/ChevronRight'
 
-const useStyles = makeStyles((theme: Theme) => ({
-  arrowBtns: {
-    marginLeft: theme.spacing(1.75),
-    marginRight: theme.spacing(1.75),
-  },
-  container: {
-    paddingBottom: theme.spacing(2),
-  },
-}))
-
 type ViewType = 'month' | 'week'
 interface ScheduleCalendarToolbarProps {
   filter?: React.ReactNode
@@ -33,7 +22,6 @@ interface ScheduleCalendarToolbarProps {
 function ScheduleCalendarToolbar(
   props: ScheduleCalendarToolbarProps,
 ): JSX.Element {
-  const classes = useStyles()
   const { weekly, start, setParams: setNavParams } = useCalendarNavigation()
 
   const getHeader = (): string => {
@@ -123,7 +111,7 @@ function ScheduleCalendarToolbar(
     <Grid
       container
       spacing={2}
-      className={classes.container}
+      sx={(theme) => ({ paddingBottom: theme.spacing(2) })}
       justifyContent='space-between'
       alignItems='center'
     >
@@ -138,7 +126,7 @@ function ScheduleCalendarToolbar(
             Today
           </Button>
 
-          <div className={classes.arrowBtns}>
+          <Box sx={(theme) => ({ marginLeft: theme.spacing(1.75), marginRight: theme.spacing(1.75) })}>
             <IconButton
               title={`Previous ${weekly ? 'week' : 'month'}`}
               data-cy='back'
@@ -155,7 +143,7 @@ function ScheduleCalendarToolbar(
             >
               <RightIcon />
             </IconButton>
-          </div>
+          </Box>
 
           <Typography component='h2' data-cy='calendar-header' variant='h5'>
             {getHeader()}
diff --git a/web/src/explore/explore.tsx b/web/src/explore/explore.tsx
index 0ac56e9e85..9d9c1f4b0e 100644
--- a/web/src/explore/explore.tsx
+++ b/web/src/explore/explore.tsx
@@ -3,33 +3,31 @@ import { createRoot } from 'react-dom/client'
 import { GraphiQL } from 'graphiql'
 import { Provider as ReduxProvider } from 'react-redux'
 import { StyledEngineProvider } from '@mui/material/styles'
+import Box from '@mui/material/Box'
 import { ThemeProvider } from '../app/theme/themeConfig'
-import makeStyles from '@mui/styles/makeStyles'
 import Login from '../app/main/components/Login'
 import store from '../app/reduxStore'
 
 import 'graphiql/graphiql.css'
-const useStyles = makeStyles((theme) => ({
-  root: {
-    flexGrow: 1,
-    zIndex: 1,
-    position: 'relative',
-    display: 'flex',
-    backgroundColor: theme.palette.background.default,
-    height: '100%',
-  },
-}))
 
 const App = (): JSX.Element => {
   const path = location.host + location.pathname.replace(/\/explore.*$/, '')
   const [needLogin, setNeedLogin] = useState(false)
-  const classes = useStyles()
 
   if (needLogin) {
     return (
-      <div className={classes.root}>
+      <Box
+        sx={(theme) => ({
+          flexGrow: 1,
+          zIndex: 1,
+          position: 'relative',
+          display: 'flex',
+          backgroundColor: theme.palette.background.default,
+          height: '100%',
+        })}
+      >
         <Login />
-      </div>
+      </Box>
     )
   }
 

From cb9a75547db66c7c67c016b51ebf18563ea2a936 Mon Sep 17 00:00:00 2001
From: Forfold <nathaniel.cook@target.com>
Date: Fri, 24 Apr 2026 12:11:43 -0700
Subject: [PATCH 22/26] migrate makeStyles to sx: remaining jsx files

---
 web/src/app/dialogs/FormDialog.jsx            |  47 +------
 .../dialogs/components/DialogContentError.jsx |  14 +-
 .../dialogs/components/DialogTitleWrapper.jsx |  21 +--
 .../app/schedules/ScheduleOverrideDialog.jsx  |  12 +-
 web/src/app/util/FilterContainer.jsx          |  40 ++----
 web/src/app/util/Markdown.jsx                 | 126 +++++++++---------
 web/src/app/util/Search.jsx                   |  46 +++----
 web/src/app/wizard/WizardForm.jsx             |  32 ++---
 web/src/app/wizard/WizardRouter.jsx           |  10 +-
 web/src/app/wizard/WizardScheduleForm.jsx     |  37 ++---
 10 files changed, 128 insertions(+), 257 deletions(-)

diff --git a/web/src/app/dialogs/FormDialog.jsx b/web/src/app/dialogs/FormDialog.jsx
index 1957c1c4e0..1f9bcad650 100644
--- a/web/src/app/dialogs/FormDialog.jsx
+++ b/web/src/app/dialogs/FormDialog.jsx
@@ -6,45 +6,16 @@ import DialogActions from '@mui/material/DialogActions'
 import DialogContent from '@mui/material/DialogContent'
 import Tooltip from '@mui/material/Tooltip'
 import Typography from '@mui/material/Typography'
-import makeStyles from '@mui/styles/makeStyles'
 
 import { FadeTransition, SlideTransition } from '../util/Transitions'
 import LoadingButton from '../loading/components/LoadingButton'
 import DialogTitleWrapper from './components/DialogTitleWrapper'
 import DialogContentError from './components/DialogContentError'
-import { styles as globalStyles } from '../styles/materialStyles'
 import { Form } from '../forms'
 import ErrorBoundary from '../main/ErrorBoundary'
 import Notices from '../details/Notices'
 import { useIsWidthUp } from '../util/useWidth'
 
-const useStyles = makeStyles((theme) => {
-  const { dialogWidth } = globalStyles(theme)
-  return {
-    dialogWidth,
-    form: {
-      height: '100%', // pushes caption to bottom if room is available
-    },
-    dialogContent: {
-      height: '100%', // parents of form need height set to properly function in Safari
-      paddingTop: '8px',
-    },
-    formContainer: {
-      width: '100%',
-      height: '100%',
-      display: 'flex',
-      flexDirection: 'column',
-    },
-    errorContainer: {
-      flexGrow: 0,
-      overflowY: 'visible',
-    },
-    fullHeight: {
-      height: '100%',
-    },
-  }
-})
-
 export default function FormDialog(props) {
   const {
     alert,
@@ -69,17 +40,10 @@ export default function FormDialog(props) {
     ...dialogProps
   } = props
 
-  const classes = useStyles()
   const isWideScreen = useIsWidthUp('md')
   const [open, setOpen] = useState(true)
   const [attemptCount, setAttemptCount] = useState(0)
 
-  const classesProp = fullHeight
-    ? {
-        paper: classes.fullHeight,
-      }
-    : {}
-
   const handleOnClose = () => {
     setOpen(false)
   }
@@ -97,11 +61,10 @@ export default function FormDialog(props) {
     }
 
     return (
-      <DialogContent className={classes.dialogContent}>
+      <DialogContent sx={{ height: '100%', paddingTop: '8px' }}>
         <Form
-          style={{ paddingTop: '1em' }}
+          style={{ paddingTop: '1em', width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}
           id='dialog-form'
-          className={classes.formContainer}
           onSubmit={(e, valid) => {
             e.preventDefault()
             if (valid) {
@@ -110,7 +73,7 @@ export default function FormDialog(props) {
           }}
         >
           <ErrorBoundary>
-            <div className={classes.form}>{form}</div>
+            <div style={{ height: '100%' }}>{form}</div>
           </ErrorBoundary>
         </Form>
       </DialogContent>
@@ -134,7 +97,7 @@ export default function FormDialog(props) {
         : (props?.errors ?? [])
     return errors.map((err, idx) => (
       <DialogContentError
-        className={classes.errorContainer}
+        style={{ flexGrow: 0, overflowY: 'visible' }}
         error={err.message || err}
         key={idx}
         noPadding
@@ -208,7 +171,7 @@ export default function FormDialog(props) {
   return (
     <Dialog
       disablePortal={disablePortal}
-      classes={classesProp}
+      slotProps={fullHeight ? { paper: { sx: { height: '100%' } } } : {}}
       fullScreen={fs}
       maxWidth={maxWidth}
       fullWidth
diff --git a/web/src/app/dialogs/components/DialogContentError.jsx b/web/src/app/dialogs/components/DialogContentError.jsx
index 974082c2af..1772ae88d9 100644
--- a/web/src/app/dialogs/components/DialogContentError.jsx
+++ b/web/src/app/dialogs/components/DialogContentError.jsx
@@ -5,14 +5,10 @@ import Typography from '@mui/material/Typography'
 import Error from '@mui/icons-material/Error'
 import { styles as globalStyles } from '../../styles/materialStyles'
 import { Zoom } from '@mui/material'
-
-import makeStyles from '@mui/styles/makeStyles'
-
-const useStyles = makeStyles((theme) => ({
-  ...globalStyles(theme),
-}))
+import { useTheme } from '@mui/material/styles'
 function DialogContentError(props) {
-  const classes = useStyles()
+  const theme = useTheme()
+  const { error: errorSx } = globalStyles(theme)
   const { error, noPadding, ...other } = props
   const style = noPadding ? { paddingBottom: 0 } : null
 
@@ -39,9 +35,9 @@ function DialogContentError(props) {
           variant='subtitle1'
           style={{ display: 'flex' }}
         >
-          <Error className={classes.error} />
+          <Error sx={errorSx} />
           &nbsp;
-          <span className={classes.error}>{error}</span>
+          <span style={errorSx}>{error}</span>
         </Typography>
       </Zoom>
     </DialogContent>
diff --git a/web/src/app/dialogs/components/DialogTitleWrapper.jsx b/web/src/app/dialogs/components/DialogTitleWrapper.jsx
index 3d870dbab6..775b9ba47e 100644
--- a/web/src/app/dialogs/components/DialogTitleWrapper.jsx
+++ b/web/src/app/dialogs/components/DialogTitleWrapper.jsx
@@ -8,27 +8,16 @@ import Typography from '@mui/material/Typography'
 import CloseIcon from '@mui/icons-material/Close'
 import { styles as globalStyles } from '../../styles/materialStyles'
 import { DialogContent } from '@mui/material'
-import makeStyles from '@mui/styles/makeStyles'
+import { useTheme } from '@mui/material/styles'
 import OtherActions from '../../util/OtherActions'
 
-const useStyles = makeStyles((theme) => {
-  const { topRightActions } = globalStyles(theme)
-
-  return {
-    subtitle: {
-      overflowY: 'unset',
-      flexGrow: 0,
-    },
-    topRightActions,
-  }
-})
-
 /**
  * Renders a fullscreen dialog with an app bar if on a small
  * or mobile screen, and a standard dialog title otherwise.
  */
 function DialogTitleWrapper(props) {
-  const classes = useStyles()
+  const theme = useTheme()
+  const { topRightActions } = globalStyles(theme)
 
   const {
     closeIcon = <CloseIcon />,
@@ -47,7 +36,7 @@ function DialogTitleWrapper(props) {
     menu = <OtherActions actions={actions} />
   } else {
     menu = (
-      <div className={classes.topRightActions}>
+      <div style={topRightActions}>
         <OtherActions actions={actions} />
       </div>
     )
@@ -56,7 +45,7 @@ function DialogTitleWrapper(props) {
   let subtitle
   if (subTitle) {
     subtitle = (
-      <DialogContent className={classes.subtitle}>
+      <DialogContent sx={{ overflowY: 'unset', flexGrow: 0 }}>
         {typeof subTitle !== 'string' ? (
           subTitle
         ) : (
diff --git a/web/src/app/schedules/ScheduleOverrideDialog.jsx b/web/src/app/schedules/ScheduleOverrideDialog.jsx
index 3af928b17d..7d4c3bce54 100644
--- a/web/src/app/schedules/ScheduleOverrideDialog.jsx
+++ b/web/src/app/schedules/ScheduleOverrideDialog.jsx
@@ -16,8 +16,6 @@ import {
   RadioGroup,
 } from '@mui/material'
 
-import makeStyles from '@mui/styles/makeStyles'
-
 const mutation = gql`
   mutation ($input: CreateUserOverrideInput!) {
     createUserOverride(input: $input) {
@@ -26,16 +24,8 @@ const mutation = gql`
   }
 `
 
-const useStyles = makeStyles({
-  variantItem: {
-    marginBottom: '.3rem',
-    marginTop: '.3rem',
-  },
-})
-
 export default function ScheduleOverrideDialog(props) {
   const { variantOptions = ['replace', 'remove', 'add', 'temp'] } = props
-  const classes = useStyles()
 
   const initialValue = {
     addUserID: '',
@@ -106,7 +96,7 @@ export default function ScheduleOverrideDialog(props) {
                     value={variant}
                     control={<Radio />}
                     label={
-                      <div className={classes.variantItem}>
+                      <div style={{ marginBottom: '.3rem', marginTop: '.3rem' }}>
                         <div>{variantDetails[variant].name}</div>
                         <FormHelperText>
                           {variantDetails[variant].helperText}
diff --git a/web/src/app/util/FilterContainer.jsx b/web/src/app/util/FilterContainer.jsx
index 60073f7eab..e93a246d5c 100644
--- a/web/src/app/util/FilterContainer.jsx
+++ b/web/src/app/util/FilterContainer.jsx
@@ -8,31 +8,9 @@ import {
   Grid,
   Button,
 } from '@mui/material'
-import makeStyles from '@mui/styles/makeStyles'
 import { FilterList as FilterIcon } from '@mui/icons-material'
 
-const useStyles = makeStyles((theme) => {
-  return {
-    actions: {
-      display: 'flex',
-      justifyContent: 'flex-end',
-    },
-    overflow: {
-      overflow: 'visible',
-    },
-    container: {
-      padding: 8,
-      [theme.breakpoints.up('md')]: { width: '22em' },
-      [theme.breakpoints.down('md')]: { width: '100%' },
-    },
-    formContainer: {
-      margin: 0,
-    },
-  }
-})
-
 export default function FilterContainer(props) {
-  const classes = useStyles()
   const [anchorEl, setAnchorEl] = useState(null)
   const {
     icon = <FilterIcon />,
@@ -43,17 +21,21 @@ export default function FilterContainer(props) {
 
   function renderContent() {
     return (
-      <Grid container spacing={2} className={classes.container}>
+      <Grid container spacing={2} sx={(theme) => ({
+        padding: 1,
+        [theme.breakpoints.up('md')]: { width: '22em' },
+        [theme.breakpoints.down('md')]: { width: '100%' },
+      })}>
         <Grid
           item
           container
           xs={12}
           spacing={2}
-          className={classes.formContainer}
+          sx={{ margin: 0 }}
         >
           {props.children}
         </Grid>
-        <Grid item xs={12} className={classes.actions}>
+        <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
           {props.onReset && (
             <Button data-cy='filter-reset' onClick={props.onReset}>
               Reset
@@ -81,8 +63,8 @@ export default function FilterContainer(props) {
       <Box sx={{ display: { xs: 'none', md: 'block' } }}>
         <Popover
           anchorEl={anchorEl}
-          classes={{
-            paper: classes.overflow,
+          slotProps={{
+            paper: { sx: { overflow: 'visible' } },
           }}
           open={!!anchorEl}
           onClose={() => setAnchorEl(null)}
@@ -96,8 +78,8 @@ export default function FilterContainer(props) {
       <Box sx={{ display: { xs: 'block', md: 'none' } }}>
         <SwipeableDrawer
           anchor='top'
-          classes={{
-            paper: classes.overflow,
+          slotProps={{
+            paper: { sx: { overflow: 'visible' } },
           }}
           disableDiscovery
           disableSwipeToOpen
diff --git a/web/src/app/util/Markdown.jsx b/web/src/app/util/Markdown.jsx
index 9c11ec7eac..06f6f25e26 100644
--- a/web/src/app/util/Markdown.jsx
+++ b/web/src/app/util/Markdown.jsx
@@ -3,46 +3,44 @@ import ReactMarkdown from 'react-markdown'
 import { safeURL } from './safeURL'
 import remarkGfm from 'remark-gfm'
 import remarkBreaks from 'remark-breaks'
-import makeStyles from '@mui/styles/makeStyles'
+import Box from '@mui/material/Box'
 import AppLink from './AppLink'
 import timestampSupport from './Markdown.timestampSupport'
 
-const useStyles = makeStyles({
-  markdown: {
-    overflowWrap: 'break-word',
-    '& td, th': {
-      textAlign: 'left',
-      padding: '0.25rem 1rem',
-    },
-    '& td:first-child, th:first-child': {
-      paddingLeft: 0,
-    },
-    '& td:last-child, th:last-child': {
-      paddingRight: 0,
-    },
-    '& pre': {
-      padding: '0.375rem',
-      color: '#333',
-      backgroundColor: '#f5f5f5',
-      border: '1px solid #ccc',
-      borderRadius: '4px',
-    },
-    '& code': {
-      padding: '2px 4px',
-      fontSize: '90%',
-      color: '#c7254e',
-      backgroundColor: '#f9f2f4',
-      borderRadius: '4px',
-    },
-    '& pre code': {
-      padding: 0,
-      color: 'inherit',
-      whiteSpace: 'pre-wrap',
-      backgroundColor: 'inherit',
-      borderRadius: 0,
-    },
+const markdownSx = {
+  overflowWrap: 'break-word',
+  '& td, th': {
+    textAlign: 'left',
+    padding: '0.25rem 1rem',
   },
-})
+  '& td:first-of-type, th:first-of-type': {
+    paddingLeft: 0,
+  },
+  '& td:last-child, th:last-child': {
+    paddingRight: 0,
+  },
+  '& pre': {
+    padding: '0.375rem',
+    color: '#333',
+    backgroundColor: '#f5f5f5',
+    border: '1px solid #ccc',
+    borderRadius: '4px',
+  },
+  '& code': {
+    padding: '2px 4px',
+    fontSize: '90%',
+    color: '#c7254e',
+    backgroundColor: '#f9f2f4',
+    borderRadius: '4px',
+  },
+  '& pre code': {
+    padding: 0,
+    color: 'inherit',
+    whiteSpace: 'pre-wrap',
+    backgroundColor: 'inherit',
+    borderRadius: 0,
+  },
+}
 
 function TableCell({ children, isHeader, align, ...rest }) {
   const content = React.Children.map(children, (c) =>
@@ -59,38 +57,38 @@ function TableCell({ children, isHeader, align, ...rest }) {
 // Markdown accepts plain text to transform into styled html
 // Typically it is wrapped in a <Typography component='div' /> component
 export default function Markdown(props) {
-  const classes = useStyles()
   const { value, ...rest } = props
   if (!value) return null
 
   return (
-    <ReactMarkdown
-      className={classes.markdown}
-      components={{
-        td: TableCell,
-        a: ({ node, inline, className, children, ...props }) => (
-          <AppLink to={props.href} newTab {...props}>
-            {children}
-          </AppLink>
-        ),
-      }}
-      remarkPlugins={[timestampSupport, remarkGfm, remarkBreaks]}
-      allowElement={(element) => {
-        if (
-          element.tagName === 'a' &&
-          element.children[0].type === 'text' &&
-          !safeURL(element.properties.href, element.children[0].value)
-        ) {
-          element.type = 'text'
-          element.value = `[${element.children[0].value}](${element.properties.href})`
-          delete element.properties.href
-        }
+    <Box sx={markdownSx}>
+      <ReactMarkdown
+        components={{
+          td: TableCell,
+          a: ({ node, inline, className, children, ...props }) => (
+            <AppLink to={props.href} newTab {...props}>
+              {children}
+            </AppLink>
+          ),
+        }}
+        remarkPlugins={[timestampSupport, remarkGfm, remarkBreaks]}
+        allowElement={(element) => {
+          if (
+            element.tagName === 'a' &&
+            element.children[0].type === 'text' &&
+            !safeURL(element.properties.href, element.children[0].value)
+          ) {
+            element.type = 'text'
+            element.value = `[${element.children[0].value}](${element.properties.href})`
+            delete element.properties.href
+          }
 
-        return true
-      }}
-      {...rest}
-    >
-      {value}
-    </ReactMarkdown>
+          return true
+        }}
+        {...rest}
+      >
+        {value}
+      </ReactMarkdown>
+    </Box>
   )
 }
diff --git a/web/src/app/util/Search.jsx b/web/src/app/util/Search.jsx
index e6b03d525d..135945920b 100644
--- a/web/src/app/util/Search.jsx
+++ b/web/src/app/util/Search.jsx
@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react'
 import p from 'prop-types'
-import makeStyles from '@mui/styles/makeStyles'
 import AppBar from '@mui/material/AppBar'
 import Box from '@mui/material/Box'
 import IconButton from '@mui/material/IconButton'
@@ -13,30 +12,6 @@ import { DEBOUNCE_DELAY } from '../config'
 import AppBarSearchContainer from './AppBarSearchContainer'
 import { useURLParam } from '../actions'
 
-const useStyles = makeStyles((theme) => {
-  return {
-    transition: {
-      [theme.breakpoints.down('md')]: {
-        flex: 1,
-      },
-      [theme.breakpoints.up('md')]: {
-        '& input:focus': {
-          minWidth: 275,
-        },
-        '& input:not(:placeholder-shown)': {
-          minWidth: 275,
-        },
-        '& input': {
-          minWidth: 180,
-          transitionProperty: 'min-width',
-          transitionDuration: theme.transitions.duration.standard,
-          transitionTimingFunction: theme.transitions.easing.easeInOut,
-        },
-      },
-    },
-  }
-})
-
 /*
  * Renders a search text field that utilizes the URL params to regulate
  * what data to display
@@ -52,7 +27,6 @@ export default function Search(props) {
   // or from a local event so we don't lose typed characters.
   const [prevParamValue, setPrevParamValue] = useState(searchParam)
 
-  const classes = useStyles()
   const [search, setSearch] = useState(searchParam)
   const [showMobile, setShowMobile] = useState(Boolean(search))
   const fieldRef = useRef()
@@ -97,11 +71,29 @@ export default function Search(props) {
         value={search}
         size='small'
         fullWidth={props.fullWidth}
-        className={(props.transition ?? true) ? classes.transition : null}
         sx={(theme) => ({
           minWidth: 250,
           backgroundColor: theme.palette.mode === 'dark' ? 'inherit' : 'white',
           borderRadius: '4px',
+          ...((props.transition ?? true) ? {
+            [theme.breakpoints.down('md')]: {
+              flex: 1,
+            },
+            [theme.breakpoints.up('md')]: {
+              '& input:focus': {
+                minWidth: 275,
+              },
+              '& input:not(:placeholder-shown)': {
+                minWidth: 275,
+              },
+              '& input': {
+                minWidth: 180,
+                transitionProperty: 'min-width',
+                transitionDuration: theme.transitions.duration.standard,
+                transitionTimingFunction: theme.transitions.easing.easeInOut,
+              },
+            },
+          } : {}),
         })}
       />
     )
diff --git a/web/src/app/wizard/WizardForm.jsx b/web/src/app/wizard/WizardForm.jsx
index f53b54a591..206cb6b87d 100644
--- a/web/src/app/wizard/WizardForm.jsx
+++ b/web/src/app/wizard/WizardForm.jsx
@@ -12,26 +12,14 @@ import Typography from '@mui/material/Typography'
 import { FormContainer, FormField } from '../forms'
 import WizardScheduleForm from './WizardScheduleForm'
 import { value as valuePropType } from './propTypes'
-import makeStyles from '@mui/styles/makeStyles'
 import * as _ from 'lodash'
 import { useIsWidthDown } from '../util/useWidth'
 import MaterialSelect from '../selection/MaterialSelect'
 import { useFeatures } from '../util/RequireConfig'
 
-const useStyles = makeStyles({
-  fieldItem: {
-    marginLeft: '2.5em',
-  },
-  stepItem: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-})
-
 export default function WizardForm(props) {
   const { onChange, value } = props
   const fullScreen = useIsWidthDown('md')
-  const classes = useStyles()
 
   const keyTypes = useFeatures().integrationKeyTypes
 
@@ -59,13 +47,13 @@ export default function WizardForm(props) {
   return (
     <FormContainer optionalLabels {...props}>
       <Grid container spacing={2}>
-        <Grid item className={classes.stepItem}>
+        <Grid item sx={{ display: 'flex', alignItems: 'center' }}>
           <StepIcon icon='1' />
         </Grid>
         <Grid item xs={10}>
           {sectionHeading('Team Details')}
         </Grid>
-        <Grid item xs={12} className={classes.fieldItem}>
+        <Grid item xs={12} sx={{ ml: '2.5em' }}>
           <FormField
             component={TextField}
             name='teamName'
@@ -76,20 +64,20 @@ export default function WizardForm(props) {
             required
           />
         </Grid>
-        <Grid item className={classes.stepItem}>
+        <Grid item sx={{ display: 'flex', alignItems: 'center' }}>
           <StepIcon icon='2' />
         </Grid>
         <Grid item xs={10}>
           {sectionHeading('Primary Schedule')}
         </Grid>
         <WizardScheduleForm onChange={onChange} value={value} />
-        <Grid item className={classes.stepItem}>
+        <Grid item sx={{ display: 'flex', alignItems: 'center' }}>
           <StepIcon icon='3' />
         </Grid>
         <Grid item xs={10}>
           {sectionHeading('Secondary Schedule')}
         </Grid>
-        <Grid item xs={12} className={classes.fieldItem}>
+        <Grid item xs={12} sx={{ ml: '2.5em' }}>
           <FormControl>
             <FormLabel>
               Will your team need a <b>secondary</b> schedule to escalate to?
@@ -119,13 +107,13 @@ export default function WizardForm(props) {
         {value.secondarySchedule.enable === 'yes' && (
           <WizardScheduleForm onChange={onChange} value={value} secondary />
         )}
-        <Grid item className={classes.stepItem}>
+        <Grid item sx={{ display: 'flex', alignItems: 'center' }}>
           <StepIcon icon='4' />
         </Grid>
         <Grid item xs={10}>
           {sectionHeading('Escalation Policy')}
         </Grid>
-        <Grid item xs={12} className={classes.fieldItem}>
+        <Grid item xs={12} sx={{ ml: '2.5em' }}>
           <FormField
             component={TextField}
             name='delayMinutes'
@@ -140,7 +128,7 @@ export default function WizardForm(props) {
             max={9000}
           />
         </Grid>
-        <Grid item xs={12} className={classes.fieldItem}>
+        <Grid item xs={12} sx={{ ml: '2.5em' }}>
           <FormField
             component={TextField}
             name='repeat'
@@ -156,13 +144,13 @@ export default function WizardForm(props) {
             max={5}
           />
         </Grid>
-        <Grid item className={classes.stepItem}>
+        <Grid item sx={{ display: 'flex', alignItems: 'center' }}>
           <StepIcon icon='5' />
         </Grid>
         <Grid item xs={10}>
           {sectionHeading('Service')}
         </Grid>
-        <Grid item xs={12} className={classes.fieldItem}>
+        <Grid item xs={12} sx={{ ml: '2.5em' }}>
           <FormField
             component={MaterialSelect}
             name='key'
diff --git a/web/src/app/wizard/WizardRouter.jsx b/web/src/app/wizard/WizardRouter.jsx
index 9b58c5491c..aeae7e0456 100644
--- a/web/src/app/wizard/WizardRouter.jsx
+++ b/web/src/app/wizard/WizardRouter.jsx
@@ -7,7 +7,6 @@ import Dialog from '@mui/material/Dialog'
 import DialogContent from '@mui/material/DialogContent'
 import DialogContentText from '@mui/material/DialogContentText'
 import DialogActions from '@mui/material/DialogActions'
-import makeStyles from '@mui/styles/makeStyles'
 import { DateTime } from 'luxon'
 import { fieldErrors, nonFieldErrors } from '../util/errutil'
 import WizardForm from './WizardForm'
@@ -36,14 +35,7 @@ const mutation = gql`
   }
 `
 
-const useStyles = makeStyles(() => ({
-  cardActions: {
-    justifyContent: 'flex-end',
-  },
-}))
-
 export default function WizardRouter() {
-  const classes = useStyles()
   const fullScreen = useIsWidthDown('md')
   const [errorMessage, setErrorMessage] = useState(null)
   const [complete, setComplete] = useState(false)
@@ -210,7 +202,7 @@ export default function WizardRouter() {
               onChange={(value) => setValue(value)}
             />
           </CardContent>
-          <CardActions className={classes.cardActions}>
+          <CardActions sx={{ justifyContent: 'flex-end' }}>
             <LoadingButton
               attemptCount={fieldErrors(error).length ? 1 : 0}
               buttonText='Submit'
diff --git a/web/src/app/wizard/WizardScheduleForm.jsx b/web/src/app/wizard/WizardScheduleForm.jsx
index 53f1c7b8b1..b954a79bf0 100644
--- a/web/src/app/wizard/WizardScheduleForm.jsx
+++ b/web/src/app/wizard/WizardScheduleForm.jsx
@@ -14,35 +14,16 @@ import { FormField } from '../forms'
 import { value as valuePropType } from './propTypes'
 import * as _ from 'lodash'
 import { ISODateTimePicker } from '../util/ISOPickers'
-import makeStyles from '@mui/styles/makeStyles'
 import { useIsWidthDown } from '../util/useWidth'
 
-const useStyles = makeStyles(() => ({
-  fieldItem: {
-    marginLeft: '2.5em',
-  },
-  sunLabel: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  tooltip: {
-    fontSize: 12,
-  },
-}))
-
-/**
- * Renders the form fields to be used in the wizard that
- * can be used for creating a primary and secondary schedule.
- */
 export default function WizardScheduleForm({ value, onChange, secondary }) {
   const fullScreen = useIsWidthDown('md')
-  const classes = useStyles()
 
   function renderFollowTheSun(key, schedType) {
     if (value[key].followTheSunRotation.enable === 'yes') {
       return (
         <React.Fragment>
-          <Grid item xs={12} className={classes.fieldItem}>
+          <Grid item xs={12} sx={{ ml: '2.5em' }}>
             <FormField
               component={UserSelect}
               multiple
@@ -59,7 +40,7 @@ export default function WizardScheduleForm({ value, onChange, secondary }) {
               value={value[key].followTheSunRotation.users}
             />
           </Grid>
-          <Grid item xs={12} className={classes.fieldItem}>
+          <Grid item xs={12} sx={{ ml: '2.5em' }}>
             <FormField
               component={TimeZoneSelect}
               name={`${key}.followTheSunRotation.timeZone`}
@@ -103,7 +84,7 @@ export default function WizardScheduleForm({ value, onChange, secondary }) {
 
     return (
       <React.Fragment>
-        <Grid item xs={12} className={classes.fieldItem}>
+        <Grid item xs={12} sx={{ ml: '2.5em' }}>
           <FormControl>
             <FormLabel>
               How often will your <b>{schedType}</b> schedule need to rotate?
@@ -151,7 +132,7 @@ export default function WizardScheduleForm({ value, onChange, secondary }) {
         </Grid>
         {!hideRotationFields && (
           <React.Fragment>
-            <Grid item className={classes.fieldItem}>
+            <Grid item sx={{ ml: '2.5em' }}>
               <FormField
                 component={ISODateTimePicker}
                 name={`${key}.rotation.startDate`}
@@ -162,13 +143,13 @@ export default function WizardScheduleForm({ value, onChange, secondary }) {
                 fullWidth={fullScreen}
               />
             </Grid>
-            <Grid item xs={12} className={classes.fieldItem}>
+            <Grid item xs={12} sx={{ ml: '2.5em' }}>
               <FormControl>
-                <FormLabel className={classes.sunLabel}>
+                <FormLabel sx={{ display: 'flex', alignItems: 'center' }}>
                   Does your&nbsp;<b>{schedType}</b>&nbsp;schedule need to have
                   follow the sun support?
                   <Tooltip
-                    classes={{ tooltip: classes.tooltip }}
+                    slotProps={{ tooltip: { sx: { fontSize: 12 } } }}
                     data-cy='fts-tooltip'
                     disableFocusListener
                     placement='right'
@@ -227,7 +208,7 @@ export default function WizardScheduleForm({ value, onChange, secondary }) {
 
   return (
     <React.Fragment>
-      <Grid item xs={12} className={classes.fieldItem}>
+      <Grid item xs={12} sx={{ ml: '2.5em' }}>
         <FormField
           component={TimeZoneSelect}
           name={`${key}.timeZone`}
@@ -241,7 +222,7 @@ export default function WizardScheduleForm({ value, onChange, secondary }) {
           required
         />
       </Grid>
-      <Grid item xs={12} className={classes.fieldItem}>
+      <Grid item xs={12} sx={{ ml: '2.5em' }}>
         <FormField
           component={UserSelect}
           data-cy={`${key}.users`}

From 76ce8203ab6ae3609e87b696b572d3b3356cab6f Mon Sep 17 00:00:00 2001
From: Forfold <nathaniel.cook@target.com>
Date: Fri, 24 Apr 2026 12:34:25 -0700
Subject: [PATCH 23/26] upgrade MUI packages from v6 to v7

- Update @mui/material, @mui/icons-material, @mui/system from 6.5.0 to 7.3.10
- Update @mui/x-data-grid from 6.20.4 to 7.29.12
- Remove @mui/styles package (no longer needed)
- Grid v2: remove 'item' prop, migrate xs/sm/md/lg/xl to 'size' prop
- DataGrid v7: update valueGetter/valueFormatter signatures, components to slots
- FormControlLabel: slotProps.label to slotProps.typography
- Fix theme.mixins.toolbar type cast
- Fix GridSortModel type usage
- Remove deprecated 'hide' column property
---
 bun.lock                                      | 82 +++++++++----------
 package.json                                  | 11 ++-
 web/src/app/admin/AdminAPIKeys.tsx            |  8 +-
 web/src/app/admin/AdminConfig.tsx             |  4 +-
 web/src/app/admin/AdminFieldComponents.tsx    |  2 +-
 web/src/app/admin/AdminLimits.tsx             |  6 +-
 web/src/app/admin/AdminMaint.tsx              |  2 +-
 web/src/app/admin/AdminNumberLookup.tsx       |  2 +-
 web/src/app/admin/AdminSMSSend.tsx            |  6 +-
 web/src/app/admin/AdminToolbox.tsx            | 12 +--
 .../admin-alert-counts/AdminAlertCounts.tsx   |  2 +-
 .../admin-alert-counts/AlertCountControls.tsx |  8 +-
 .../AlertCountLineGraph.tsx                   |  2 +-
 .../admin-alert-counts/AlertCountTable.tsx    | 31 ++++---
 .../AdminAPIKeyCreateDialog.tsx               |  2 +-
 .../AdminAPIKeyExpirationField.tsx            |  6 +-
 .../admin/admin-api-keys/AdminAPIKeyForm.tsx  | 10 +--
 .../AdminAPIKeyShowQueryDialog.tsx            |  6 +-
 .../AdminMessageLogsControls.tsx              |  8 +-
 .../AdminMessageLogsGraph.tsx                 |  8 +-
 .../AdminMessageLogsLayout.tsx                | 14 ++--
 .../AdminServiceFilter.tsx                    |  4 +-
 .../AdminServiceMetrics.tsx                   | 18 ++--
 .../AdminServiceTable.tsx                     | 37 ++++-----
 .../AdminServiceTargetGraph.tsx               |  2 +-
 web/src/app/admin/switchover/AdminSWODone.tsx |  4 +-
 .../admin/switchover/AdminSWOWrongMode.tsx    |  4 +-
 .../app/admin/switchover/AdminSwitchover.tsx  |  8 +-
 web/src/app/admin/switchover/SWONode.tsx      |  4 +-
 web/src/app/alerts/AlertsList.tsx             |  2 +-
 .../CreateAlertDialog/CreateAlertDialog.tsx   |  9 +-
 .../StepContent/CreateAlertConfirm.tsx        |  2 +-
 .../StepContent/CreateAlertInfo.tsx           |  4 +-
 .../StepContent/CreateAlertReview.tsx         |  4 +-
 .../app/alerts/components/AlertDetails.tsx    | 20 ++---
 .../alerts/components/AlertsListFilter.tsx    |  6 +-
 web/src/app/details/DetailsPage.tsx           | 26 +++---
 web/src/app/details/Notices.tsx               |  4 +-
 web/src/app/editor/ExprEditor.tsx             |  2 +-
 web/src/app/editor/GraphQLEditor.tsx          |  4 +-
 .../app/escalation-policies/PolicyForm.tsx    |  6 +-
 .../escalation-policies/PolicyStepForm.tsx    | 14 ++--
 web/src/app/escalation-policies/stepUtil.tsx  |  2 +-
 web/src/app/forms/FormField.jsx               |  4 +-
 web/src/app/forms/HelperText.tsx              |  4 +-
 web/src/app/lists/ControlledPaginatedList.tsx | 23 ++----
 web/src/app/lists/ListPageControls.tsx        | 18 ++--
 web/src/app/lists/PageControls.tsx            |  8 +-
 web/src/app/lists/QueryList.tsx               |  2 +-
 web/src/app/localdev/LocalDev.tsx             |  2 +-
 web/src/app/main/App.tsx                      |  2 +-
 web/src/app/main/NavBar.tsx                   |  2 +-
 web/src/app/main/components/AuthLink.tsx      |  6 +-
 web/src/app/main/components/Login.tsx         | 14 ++--
 .../main/components/UserSettingsPopover.tsx   | 10 +--
 web/src/app/rotations/RotationForm.tsx        | 14 ++--
 .../rotations/RotationFormHandoffTimes.tsx    |  2 +-
 web/src/app/schedules/ScheduleForm.tsx        |  6 +-
 .../app/schedules/ScheduleOverrideDialog.jsx  |  2 +-
 .../app/schedules/ScheduleOverrideForm.tsx    | 10 +--
 .../app/schedules/ScheduleOverrideList.jsx    |  4 +-
 web/src/app/schedules/ScheduleRuleForm.tsx    | 17 ++--
 web/src/app/schedules/ScheduleShiftList.tsx   | 13 +--
 .../CalendarSubscribeForm.tsx                 |  6 +-
 .../CalendarSuccessForm.tsx                   |  4 +-
 .../ScheduleOnCallNotificationsForm.tsx       | 18 ++--
 .../ScheduleOnCallNotificationsList.tsx       |  6 +-
 .../temp-sched/TempSchedAddNewShift.tsx       | 12 +--
 .../temp-sched/TempSchedConfirmation.tsx      |  4 +-
 .../schedules/temp-sched/TempSchedDialog.tsx  | 28 +++----
 web/src/app/selection/DestinationField.tsx    |  4 +-
 web/src/app/selection/DynamicActionForm.tsx   |  8 +-
 .../AlertMetrics/AlertAveragesGraph.tsx       |  2 +-
 .../services/AlertMetrics/AlertCountGraph.tsx |  2 +-
 .../services/AlertMetrics/AlertMetrics.tsx    |  2 +-
 .../AlertMetrics/AlertMetricsFilter.tsx       |  4 +-
 .../AlertMetrics/AlertMetricsTable.tsx        | 42 +++++-----
 web/src/app/services/HeartbeatMonitorForm.tsx |  6 +-
 web/src/app/services/HeartbeatMonitorList.tsx |  2 +-
 .../app/services/HeartbeatMonitorStatus.tsx   |  4 +-
 web/src/app/services/IntegrationKeyForm.tsx   |  4 +-
 web/src/app/services/IntegrationKeyList.tsx   |  6 +-
 web/src/app/services/ServiceAlerts.tsx        |  4 +-
 web/src/app/services/ServiceDetails.tsx       |  4 +-
 .../app/services/ServiceFilterContainer.tsx   | 10 +--
 web/src/app/services/ServiceForm.tsx          |  8 +-
 web/src/app/services/ServiceLabelForm.tsx     |  4 +-
 web/src/app/services/ServiceLabelList.tsx     |  2 +-
 web/src/app/services/ServiceNotices.tsx       |  2 +-
 .../services/UniversalKey/GenTokenDialog.tsx  |  2 +-
 .../UniversalKey/UniversalKeyActionsList.tsx  |  8 +-
 .../UniversalKey/UniversalKeyPage.tsx         |  4 +-
 .../UniversalKey/UniversalKeyRuleConfig.tsx   |  8 +-
 .../UniversalKey/UniversalKeyRuleForm.tsx     |  8 +-
 web/src/app/theme/ThemePicker.tsx             |  4 +-
 web/src/app/users/UserContactMethodForm.tsx   | 10 +--
 web/src/app/users/UserContactMethodList.tsx   |  6 +-
 .../UserContactMethodVerificationForm.tsx     |  4 +-
 web/src/app/users/UserCreateDialog.tsx        | 12 +--
 web/src/app/users/UserDetails.tsx             |  2 +-
 web/src/app/users/UserEditForm.tsx            | 10 +--
 .../app/users/UserNotificationRuleForm.tsx    |  4 +-
 .../app/users/UserNotificationRuleList.tsx    |  3 +-
 .../users/UserPhoneNumberFilterContainer.tsx  |  2 +-
 web/src/app/users/UserSessionList.tsx         |  4 +-
 web/src/app/util/DurationField.tsx            |  4 +-
 web/src/app/util/FilterContainer.jsx          |  6 +-
 web/src/app/util/calendar/Calendar.tsx        |  4 +-
 .../util/calendar/CalendarEventWrapper.tsx    | 14 ++--
 web/src/app/util/calendar/CalendarToolbar.tsx | 11 ++-
 web/src/app/wizard/WizardForm.jsx             | 30 +++----
 web/src/app/wizard/WizardScheduleForm.jsx     | 14 ++--
 112 files changed, 452 insertions(+), 501 deletions(-)

diff --git a/bun.lock b/bun.lock
index d17a72774d..5eff492cc6 100644
--- a/bun.lock
+++ b/bun.lock
@@ -1,6 +1,5 @@
 {
   "lockfileVersion": 1,
-  "configVersion": 0,
   "workspaces": {
     "": {
       "devDependencies": {
@@ -24,11 +23,10 @@
         "@lezer/highlight": "1.2.1",
         "@lezer/lr": "1.4.2",
         "@material/material-color-utilities": "0.3.0",
-        "@mui/icons-material": "6.5.0",
-        "@mui/material": "6.5.0",
-        "@mui/styles": "6.5.0",
-        "@mui/system": "6.5.0",
-        "@mui/x-data-grid": "6.20.4",
+        "@mui/icons-material": "7.3.10",
+        "@mui/material": "7.3.10",
+        "@mui/system": "7.3.10",
+        "@mui/x-data-grid": "7.29.12",
         "@playwright/test": "1.55.1",
         "@storybook/addon-links": "9.1.8",
         "@storybook/react-vite": "9.1.8",
@@ -494,25 +492,25 @@
 
     "@mswjs/interceptors": ["@mswjs/interceptors@0.39.6", "", { "dependencies": { "@open-draft/deferred-promise": "^2.2.0", "@open-draft/logger": "^0.3.0", "@open-draft/until": "^2.0.0", "is-node-process": "^1.2.0", "outvariant": "^1.4.3", "strict-event-emitter": "^0.5.1" } }, "sha512-bndDP83naYYkfayr/qhBHMhk0YGwS1iv6vaEGcr0SQbO0IZtbOPqjKjds/WcG+bJA+1T5vCx6kprKOzn5Bg+Vw=="],
 
-    "@mui/core-downloads-tracker": ["@mui/core-downloads-tracker@6.5.0", "", {}, "sha512-LGb8t8i6M2ZtS3Drn3GbTI1DVhDY6FJ9crEey2lZ0aN2EMZo8IZBZj9wRf4vqbZHaWjsYgtbOnJw5V8UWbmK2Q=="],
+    "@mui/core-downloads-tracker": ["@mui/core-downloads-tracker@7.3.10", "", {}, "sha512-vrOpWRmPJSuwLo23J62wggEm/jvGdzqctej+UOCtgDUz6nZJQuj3ByPccVyaa7eQmwAzUwKN56FQPMKkqbj1GA=="],
 
-    "@mui/icons-material": ["@mui/icons-material@6.5.0", "", { "dependencies": { "@babel/runtime": "^7.26.0" }, "peerDependencies": { "@mui/material": "^6.5.0", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-VPuPqXqbBPlcVSA0BmnoE4knW4/xG6Thazo8vCLWkOKusko6DtwFV6B665MMWJ9j0KFohTIf3yx2zYtYacvG1g=="],
+    "@mui/icons-material": ["@mui/icons-material@7.3.10", "", { "dependencies": { "@babel/runtime": "^7.28.6" }, "peerDependencies": { "@mui/material": "^7.3.10", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-Au0ma4NSKGKNiimukj8UT/W1x2Qx6Qwn2RvFGykiSqVLYBNlIOPbjnIMvrwLGLu89EEpTVdu/ys/OduZR+tWqw=="],
 
-    "@mui/material": ["@mui/material@6.5.0", "", { "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", "@popperjs/core": "^2.11.8", "@types/react-transition-group": "^4.4.12", "clsx": "^2.1.1", "csstype": "^3.1.3", "prop-types": "^15.8.1", "react-is": "^19.0.0", "react-transition-group": "^4.4.5" }, "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", "@mui/material-pigment-css": "^6.5.0", "@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" }, "optionalPeers": ["@emotion/react", "@emotion/styled", "@mui/material-pigment-css", "@types/react"] }, "sha512-yjvtXoFcrPLGtgKRxFaH6OQPtcLPhkloC0BML6rBG5UeldR0nPULR/2E2BfXdo5JNV7j7lOzrrLX2Qf/iSidow=="],
+    "@mui/material": ["@mui/material@7.3.10", "", { "dependencies": { "@babel/runtime": "^7.28.6", "@mui/core-downloads-tracker": "^7.3.10", "@mui/system": "^7.3.10", "@mui/types": "^7.4.12", "@mui/utils": "^7.3.10", "@popperjs/core": "^2.11.8", "@types/react-transition-group": "^4.4.12", "clsx": "^2.1.1", "csstype": "^3.2.3", "prop-types": "^15.8.1", "react-is": "^19.2.3", "react-transition-group": "^4.4.5" }, "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", "@mui/material-pigment-css": "^7.3.10", "@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" }, "optionalPeers": ["@emotion/react", "@emotion/styled", "@mui/material-pigment-css", "@types/react"] }, "sha512-cHvGOk2ZEfbQt3LnGe0ZKd/ETs9gsUpkW66DCO+GSjMZhpdKU4XsuIr7zJ/B/2XaN8ihxuzHfYAR4zPtCN4RYg=="],
 
-    "@mui/private-theming": ["@mui/private-theming@6.4.9", "", { "dependencies": { "@babel/runtime": "^7.26.0", "@mui/utils": "^6.4.9", "prop-types": "^15.8.1" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-LktcVmI5X17/Q5SkwjCcdOLBzt1hXuc14jYa7NPShog0GBDCDvKtcnP0V7a2s6EiVRlv7BzbWEJzH6+l/zaCxw=="],
+    "@mui/private-theming": ["@mui/private-theming@7.3.10", "", { "dependencies": { "@babel/runtime": "^7.28.6", "@mui/utils": "^7.3.10", "prop-types": "^15.8.1" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-j3EZN+zOctxUISvJSmsEPo5o2F8zse4l5vRkBY+ps6UtnL6J7o14kUaI4w7gwo73id9e3cDNMVQK/9BVaMHVBw=="],
 
-    "@mui/styled-engine": ["@mui/styled-engine@6.5.0", "", { "dependencies": { "@babel/runtime": "^7.26.0", "@emotion/cache": "^11.13.5", "@emotion/serialize": "^1.3.3", "@emotion/sheet": "^1.4.0", "csstype": "^3.1.3", "prop-types": "^15.8.1" }, "peerDependencies": { "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/react", "@emotion/styled"] }, "sha512-8woC2zAqF4qUDSPIBZ8v3sakj+WgweolpyM/FXf8jAx6FMls+IE4Y8VDZc+zS805J7PRz31vz73n2SovKGaYgw=="],
+    "@mui/styled-engine": ["@mui/styled-engine@7.3.10", "", { "dependencies": { "@babel/runtime": "^7.28.6", "@emotion/cache": "^11.14.0", "@emotion/serialize": "^1.3.3", "@emotion/sheet": "^1.4.0", "csstype": "^3.2.3", "prop-types": "^15.8.1" }, "peerDependencies": { "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/react", "@emotion/styled"] }, "sha512-WxE9SiF8xskAQqGjsp0poXCkCqsoXFEsSr0HBXfApmGHR+DBnXRp+z46Vsltg4gpPM4Z96DeAQRpeAOnhNg7Ng=="],
 
-    "@mui/styles": ["@mui/styles@6.5.0", "", { "dependencies": { "@babel/runtime": "^7.26.0", "@emotion/hash": "^0.9.2", "@mui/private-theming": "^6.4.9", "@mui/types": "~7.2.24", "@mui/utils": "^6.4.9", "clsx": "^2.1.1", "csstype": "^3.1.3", "hoist-non-react-statics": "^3.3.2", "jss": "^10.10.0", "jss-plugin-camel-case": "^10.10.0", "jss-plugin-default-unit": "^10.10.0", "jss-plugin-global": "^10.10.0", "jss-plugin-nested": "^10.10.0", "jss-plugin-props-sort": "^10.10.0", "jss-plugin-rule-value-function": "^10.10.0", "jss-plugin-vendor-prefixer": "^10.10.0", "prop-types": "^15.8.1" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-DeE/S/l6adnMpKfgx6l7UaQwYuf+gD4FCp6En3Vdg2Er+CTArj4DcHNFVzb8HZ2nNqACwmSm16/P08m1vAxv2w=="],
+    "@mui/system": ["@mui/system@7.3.10", "", { "dependencies": { "@babel/runtime": "^7.28.6", "@mui/private-theming": "^7.3.10", "@mui/styled-engine": "^7.3.10", "@mui/types": "^7.4.12", "@mui/utils": "^7.3.10", "clsx": "^2.1.1", "csstype": "^3.2.3", "prop-types": "^15.8.1" }, "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/react", "@emotion/styled", "@types/react"] }, "sha512-/sfPpdpJaQn7BSF+avjIdHSYmxHp0UOBYNxSG9QGKfMOD6sLANCpRPCnanq1Pe0lFf0NHkO2iUk0TNzdWC1USQ=="],
 
-    "@mui/system": ["@mui/system@6.5.0", "", { "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", "clsx": "^2.1.1", "csstype": "^3.1.3", "prop-types": "^15.8.1" }, "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/react", "@emotion/styled", "@types/react"] }, "sha512-XcbBYxDS+h/lgsoGe78ExXFZXtuIlSBpn/KsZq8PtZcIkUNJInkuDqcLd2rVBQrDC1u+rvVovdaWPf2FHKJf3w=="],
+    "@mui/types": ["@mui/types@7.4.12", "", { "dependencies": { "@babel/runtime": "^7.28.6" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-iKNAF2u9PzSIj40CjvKJWxFXJo122jXVdrmdh0hMYd+FR+NuJMkr/L88XwWLCRiJ5P1j+uyac25+Kp6YC4hu6w=="],
 
-    "@mui/types": ["@mui/types@7.2.24", "", { "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-3c8tRt/CbWZ+pEg7QpSwbdxOk36EfmhbKf6AGZsD1EcLDLTSZoxxJ86FVtcjxvjuhdyBiWKSTGZFaXCnidO2kw=="],
+    "@mui/utils": ["@mui/utils@7.3.10", "", { "dependencies": { "@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.2.3" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-7y2eIfy0h7JPz+Yy4pS+wgV68d46PuuxDqKBN4Q8VlPQSsCAGwroMCV6xWyc7g9dvEp8ZNFsknc59GHWO+r6Ow=="],
 
-    "@mui/utils": ["@mui/utils@6.4.9", "", { "dependencies": { "@babel/runtime": "^7.26.0", "@mui/types": "~7.2.24", "@types/prop-types": "^15.7.14", "clsx": "^2.1.1", "prop-types": "^15.8.1", "react-is": "^19.0.0" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-Y12Q9hbK9g+ZY0T3Rxrx9m2m10gaphDuUMgWxyV5kNJevVxXYCLclYUCC9vXaIk1/NdNDTcW2Yfr2OGvNFNmHg=="],
+    "@mui/x-data-grid": ["@mui/x-data-grid@7.29.12", "", { "dependencies": { "@babel/runtime": "^7.25.7", "@mui/utils": "^5.16.6 || ^6.0.0 || ^7.0.0", "@mui/x-internals": "7.29.0", "clsx": "^2.1.1", "prop-types": "^15.8.1", "reselect": "^5.1.1", "use-sync-external-store": "^1.0.0" }, "peerDependencies": { "@emotion/react": "^11.9.0", "@emotion/styled": "^11.8.1", "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0", "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/react", "@emotion/styled"] }, "sha512-MaEC7ubr/je8jVWjdRU7LxBXAzlOZwFEdNdvlDUJIYkRa3TRCQ1HsY8Gd8Od0jnlnMYn9M4BrEfOrq9VRnt4bw=="],
 
-    "@mui/x-data-grid": ["@mui/x-data-grid@6.20.4", "", { "dependencies": { "@babel/runtime": "^7.23.2", "@mui/utils": "^5.14.16", "clsx": "^2.0.0", "prop-types": "^15.8.1", "reselect": "^4.1.8" }, "peerDependencies": { "@mui/material": "^5.4.1", "@mui/system": "^5.4.1", "react": "^17.0.0 || ^18.0.0", "react-dom": "^17.0.0 || ^18.0.0" } }, "sha512-I0JhinVV4e25hD2dB+R6biPBtpGeFrXf8RwlMPQbr9gUggPmPmNtWKo8Kk2PtBBMlGtdMAgHWe7PqhmucUxU1w=="],
+    "@mui/x-internals": ["@mui/x-internals@7.29.0", "", { "dependencies": { "@babel/runtime": "^7.25.7", "@mui/utils": "^5.16.6 || ^6.0.0 || ^7.0.0" }, "peerDependencies": { "react": "^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-+Gk6VTZIFD70XreWvdXBwKd8GZ2FlSCuecQFzm6znwqXg1ZsndavrhG9tkxpxo2fM1Zf7Tk8+HcOO0hCbhTQFA=="],
 
     "@n1ru4l/push-pull-async-iterable-iterator": ["@n1ru4l/push-pull-async-iterable-iterator@3.2.0", "", {}, "sha512-3fkKj25kEjsfObL6IlKPAlHYPq/oYwUkkQ03zsTTiDjD7vg/RxjdiLeCydqtxHZP0JgsXL3D/X5oAkMGzuUp/Q=="],
 
@@ -1214,13 +1212,11 @@
 
     "css-tree": ["css-tree@3.1.0", "", { "dependencies": { "mdn-data": "2.12.2", "source-map-js": "^1.0.1" } }, "sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w=="],
 
-    "css-vendor": ["css-vendor@2.0.8", "", { "dependencies": { "@babel/runtime": "^7.8.3", "is-in-browser": "^1.0.2" } }, "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ=="],
-
     "css.escape": ["css.escape@1.5.1", "", {}, "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg=="],
 
     "cssesc": ["cssesc@3.0.0", "", { "bin": { "cssesc": "bin/cssesc" } }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="],
 
-    "csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
+    "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
 
     "cwd": ["cwd@0.10.0", "", { "dependencies": { "find-pkg": "^0.1.2", "fs-exists-sync": "^0.1.0" } }, "sha512-YGZxdTTL9lmLkCUTpg4j0zQ7IhRB5ZmqNBbGCl3Tg6MP/d5/6sY7L5mmTjzbc6JKgVZYiqTQTNhPFsbXNGlRaA=="],
 
@@ -1660,8 +1656,6 @@
 
     "human-signals": ["human-signals@1.1.1", "", {}, "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw=="],
 
-    "hyphenate-style-name": ["hyphenate-style-name@1.1.0", "", {}, "sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw=="],
-
     "ieee754": ["ieee754@1.2.1", "", {}, "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="],
 
     "ignore": ["ignore@7.0.5", "", {}, "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg=="],
@@ -1740,8 +1734,6 @@
 
     "is-hexadecimal": ["is-hexadecimal@2.0.1", "", {}, "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg=="],
 
-    "is-in-browser": ["is-in-browser@1.1.3", "", {}, "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g=="],
-
     "is-installed-globally": ["is-installed-globally@0.4.0", "", { "dependencies": { "global-dirs": "^3.0.0", "is-path-inside": "^3.0.2" } }, "sha512-iwGqO3J21aaSkC7jWnHP/difazwS7SFeIqxv6wEtLU8Y5KlzFTjyqcSIT0d8s4+dDhKytsk9PJZ2BkS5eZwQRQ=="],
 
     "is-map": ["is-map@2.0.3", "", {}, "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw=="],
@@ -1912,22 +1904,6 @@
 
     "jsprim": ["jsprim@2.0.2", "", { "dependencies": { "assert-plus": "1.0.0", "extsprintf": "1.3.0", "json-schema": "0.4.0", "verror": "1.10.0" } }, "sha512-gqXddjPqQ6G40VdnI6T6yObEC+pDNvyP95wdQhkWkg7crHH3km5qP1FsOXEkzEQwnz6gz5qGTn1c2Y52wP3OyQ=="],
 
-    "jss": ["jss@10.10.0", "", { "dependencies": { "@babel/runtime": "^7.3.1", "csstype": "^3.0.2", "is-in-browser": "^1.1.3", "tiny-warning": "^1.0.2" } }, "sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw=="],
-
-    "jss-plugin-camel-case": ["jss-plugin-camel-case@10.10.0", "", { "dependencies": { "@babel/runtime": "^7.3.1", "hyphenate-style-name": "^1.0.3", "jss": "10.10.0" } }, "sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw=="],
-
-    "jss-plugin-default-unit": ["jss-plugin-default-unit@10.10.0", "", { "dependencies": { "@babel/runtime": "^7.3.1", "jss": "10.10.0" } }, "sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ=="],
-
-    "jss-plugin-global": ["jss-plugin-global@10.10.0", "", { "dependencies": { "@babel/runtime": "^7.3.1", "jss": "10.10.0" } }, "sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A=="],
-
-    "jss-plugin-nested": ["jss-plugin-nested@10.10.0", "", { "dependencies": { "@babel/runtime": "^7.3.1", "jss": "10.10.0", "tiny-warning": "^1.0.2" } }, "sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA=="],
-
-    "jss-plugin-props-sort": ["jss-plugin-props-sort@10.10.0", "", { "dependencies": { "@babel/runtime": "^7.3.1", "jss": "10.10.0" } }, "sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg=="],
-
-    "jss-plugin-rule-value-function": ["jss-plugin-rule-value-function@10.10.0", "", { "dependencies": { "@babel/runtime": "^7.3.1", "jss": "10.10.0", "tiny-warning": "^1.0.2" } }, "sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g=="],
-
-    "jss-plugin-vendor-prefixer": ["jss-plugin-vendor-prefixer@10.10.0", "", { "dependencies": { "@babel/runtime": "^7.3.1", "css-vendor": "^2.0.8", "jss": "10.10.0" } }, "sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg=="],
-
     "jsx-ast-utils": ["jsx-ast-utils@3.3.5", "", { "dependencies": { "array-includes": "^3.1.6", "array.prototype.flat": "^1.3.1", "object.assign": "^4.1.4", "object.values": "^1.1.6" } }, "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ=="],
 
     "keyv": ["keyv@4.5.4", "", { "dependencies": { "json-buffer": "3.0.1" } }, "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw=="],
@@ -2442,7 +2418,7 @@
 
     "require-main-filename": ["require-main-filename@2.0.0", "", {}, "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="],
 
-    "reselect": ["reselect@4.1.8", "", {}, "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ=="],
+    "reselect": ["reselect@5.1.1", "", {}, "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w=="],
 
     "resolve": ["resolve@1.22.10", "", { "dependencies": { "is-core-module": "^2.16.0", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" }, "bin": { "resolve": "bin/resolve" } }, "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w=="],
 
@@ -2652,8 +2628,6 @@
 
     "tiny-invariant": ["tiny-invariant@1.3.3", "", {}, "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="],
 
-    "tiny-warning": ["tiny-warning@1.0.3", "", {}, "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="],
-
     "tinyglobby": ["tinyglobby@0.2.15", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.3" } }, "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ=="],
 
     "tinyrainbow": ["tinyrainbow@2.0.0", "", {}, "sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw=="],
@@ -2876,6 +2850,8 @@
 
     "@emotion/babel-plugin/convert-source-map": ["convert-source-map@1.9.0", "", {}, "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="],
 
+    "@emotion/serialize/csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
+
     "@eslint-community/eslint-utils/eslint-visitor-keys": ["eslint-visitor-keys@3.4.3", "", {}, "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag=="],
 
     "@eslint/eslintrc/globals": ["globals@14.0.0", "", {}, "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ=="],
@@ -2968,18 +2944,32 @@
 
     "@joshwooding/vite-plugin-react-docgen-typescript/glob": ["glob@10.4.5", "", { "dependencies": { "foreground-child": "^3.1.0", "jackspeak": "^3.1.2", "minimatch": "^9.0.4", "minipass": "^7.1.2", "package-json-from-dist": "^1.0.0", "path-scurry": "^1.11.1" }, "bin": { "glob": "dist/esm/bin.mjs" } }, "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg=="],
 
+    "@mui/icons-material/@babel/runtime": ["@babel/runtime@7.29.2", "", {}, "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g=="],
+
+    "@mui/material/@babel/runtime": ["@babel/runtime@7.29.2", "", {}, "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g=="],
+
     "@mui/material/clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
 
-    "@mui/styles/clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
+    "@mui/private-theming/@babel/runtime": ["@babel/runtime@7.29.2", "", {}, "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g=="],
+
+    "@mui/styled-engine/@babel/runtime": ["@babel/runtime@7.29.2", "", {}, "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g=="],
+
+    "@mui/system/@babel/runtime": ["@babel/runtime@7.29.2", "", {}, "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g=="],
 
     "@mui/system/clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
 
+    "@mui/types/@babel/runtime": ["@babel/runtime@7.29.2", "", {}, "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g=="],
+
+    "@mui/utils/@babel/runtime": ["@babel/runtime@7.29.2", "", {}, "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g=="],
+
     "@mui/utils/clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
 
-    "@mui/x-data-grid/@mui/utils": ["@mui/utils@5.17.1", "", { "dependencies": { "@babel/runtime": "^7.23.9", "@mui/types": "~7.2.15", "@types/prop-types": "^15.7.12", "clsx": "^2.1.1", "prop-types": "^15.8.1", "react-is": "^19.0.0" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-jEZ8FTqInt2WzxDV8bhImWBqeQRD99c/id/fq83H0ER9tFl+sfZlaAoCdznGvbSQQ9ividMxqSV2c7cC1vBcQg=="],
+    "@mui/x-data-grid/@babel/runtime": ["@babel/runtime@7.29.2", "", {}, "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g=="],
 
     "@mui/x-data-grid/clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
 
+    "@mui/x-internals/@babel/runtime": ["@babel/runtime@7.29.2", "", {}, "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g=="],
+
     "@storybook/test-runner/jest": ["jest@29.7.0", "", { "dependencies": { "@jest/core": "^29.7.0", "@jest/types": "^29.6.3", "import-local": "^3.0.2", "jest-cli": "^29.7.0" }, "peerDependencies": { "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0" }, "optionalPeers": ["node-notifier"], "bin": { "jest": "bin/jest.js" } }, "sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw=="],
 
     "@testing-library/dom/aria-query": ["aria-query@5.3.0", "", { "dependencies": { "dequal": "^2.0.3" } }, "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A=="],
@@ -2990,6 +2980,8 @@
 
     "@types/glob/glob": ["glob@11.0.3", "", { "dependencies": { "foreground-child": "^3.3.1", "jackspeak": "^4.1.1", "minimatch": "^10.0.3", "minipass": "^7.1.2", "package-json-from-dist": "^1.0.0", "path-scurry": "^2.0.0" }, "bin": { "glob": "dist/esm/bin.mjs" } }, "sha512-2Nim7dha1KVkaiF4q6Dj+ngPPMdfvLJEOpZk/jKiUAkqKebpGAWQXAq9z1xu9HKu5lWfqw/FASuccEjyznjPaA=="],
 
+    "@types/react/csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
+
     "@typescript-eslint/typescript-estree/minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],
 
     "@vitest/mocker/estree-walker": ["estree-walker@3.0.3", "", { "dependencies": { "@types/estree": "^1.0.0" } }, "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g=="],
@@ -3050,6 +3042,8 @@
 
     "detect-package-manager/execa": ["execa@5.1.1", "", { "dependencies": { "cross-spawn": "^7.0.3", "get-stream": "^6.0.0", "human-signals": "^2.1.0", "is-stream": "^2.0.0", "merge-stream": "^2.0.0", "npm-run-path": "^4.0.1", "onetime": "^5.1.2", "signal-exit": "^3.0.3", "strip-final-newline": "^2.0.0" } }, "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg=="],
 
+    "dom-helpers/csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
+
     "dom-serializer/domelementtype": ["domelementtype@2.3.0", "", {}, "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="],
 
     "dom-serializer/entities": ["entities@2.2.0", "", {}, "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A=="],
diff --git a/package.json b/package.json
index fd397764ec..6ff38942d8 100644
--- a/package.json
+++ b/package.json
@@ -52,11 +52,10 @@
     "@lezer/highlight": "1.2.1",
     "@lezer/lr": "1.4.2",
     "@material/material-color-utilities": "0.3.0",
-    "@mui/icons-material": "6.5.0",
-    "@mui/material": "6.5.0",
-    "@mui/styles": "6.5.0",
-    "@mui/system": "6.5.0",
-    "@mui/x-data-grid": "6.20.4",
+    "@mui/icons-material": "7.3.10",
+    "@mui/material": "7.3.10",
+    "@mui/system": "7.3.10",
+    "@mui/x-data-grid": "7.29.12",
     "@playwright/test": "1.55.1",
     "@storybook/addon-links": "9.1.8",
     "@storybook/react-vite": "9.1.8",
@@ -158,4 +157,4 @@
   "msw": {
     "workerDirectory": ".storybook/static"
   }
-}
+}
\ No newline at end of file
diff --git a/web/src/app/admin/AdminAPIKeys.tsx b/web/src/app/admin/AdminAPIKeys.tsx
index e924e60e28..139fb06833 100644
--- a/web/src/app/admin/AdminAPIKeys.tsx
+++ b/web/src/app/admin/AdminAPIKeys.tsx
@@ -114,9 +114,7 @@ export default function AdminAPIKeys(): React.JSX.Element {
       ),
       secondaryAction: (
         <Grid container>
-          <Grid
-            item
-            xs={12}
+          <Grid size={12}
             sx={{ display: 'flex', justifyContent: 'flex-end' }}
           >
             <Typography
@@ -133,9 +131,7 @@ export default function AdminAPIKeys(): React.JSX.Element {
               )}
             </Typography>
           </Grid>
-          <Grid
-            item
-            xs={12}
+          <Grid size={12}
             sx={{ display: 'flex', justifyContent: 'flex-end' }}
           >
             <OtherActions
diff --git a/web/src/app/admin/AdminConfig.tsx b/web/src/app/admin/AdminConfig.tsx
index 32b2550d9c..53c5a18747 100644
--- a/web/src/app/admin/AdminConfig.tsx
+++ b/web/src/app/admin/AdminConfig.tsx
@@ -127,7 +127,7 @@ export default function AdminConfig(): React.JSX.Element {
 
   return (
     <Grid container spacing={2}>
-      <Grid item xs={12} container justifyContent='flex-end'>
+      <Grid size={12} container justifyContent='flex-end'>
         <ButtonGroup variant='outlined'>
           <Button
             data-cy='reset'
@@ -157,7 +157,7 @@ export default function AdminConfig(): React.JSX.Element {
         />
       )}
 
-      <Grid item xs={12}>
+      <Grid size={12}>
         {groups.map((groupID: string, index: number) => (
           <Accordion
             key={groupID}
diff --git a/web/src/app/admin/AdminFieldComponents.tsx b/web/src/app/admin/AdminFieldComponents.tsx
index b8a5b16860..d17d56d459 100644
--- a/web/src/app/admin/AdminFieldComponents.tsx
+++ b/web/src/app/admin/AdminFieldComponents.tsx
@@ -57,7 +57,7 @@ export const StringListInput = (props: InputProps): React.JSX.Element => {
   return (
     <Grid container spacing={1}>
       {value.map((val, idx) => (
-        <Grid key={idx} item xs={12}>
+        <Grid size={12} key={idx}>
           <StringInput
             type={props.type}
             value={val}
diff --git a/web/src/app/admin/AdminLimits.tsx b/web/src/app/admin/AdminLimits.tsx
index add333a7f4..27c0580884 100644
--- a/web/src/app/admin/AdminLimits.tsx
+++ b/web/src/app/admin/AdminLimits.tsx
@@ -67,9 +67,7 @@ export default function AdminLimits(): React.JSX.Element {
           [theme.breakpoints.up('md')]: { maxWidth: '65%' },
         })}
       >
-        <Grid
-          item
-          xs={12}
+        <Grid size={12}
           sx={{ display: 'flex', justifyContent: 'flex-end' }}
         >
           <ButtonGroup variant='outlined'>
@@ -103,7 +101,7 @@ export default function AdminLimits(): React.JSX.Element {
           />
         )}
 
-        <Grid item xs={12}>
+        <Grid size={12}>
           <Form>
             <Card>
               <AdminSection
diff --git a/web/src/app/admin/AdminMaint.tsx b/web/src/app/admin/AdminMaint.tsx
index 0aedee1f56..7537387ab7 100644
--- a/web/src/app/admin/AdminMaint.tsx
+++ b/web/src/app/admin/AdminMaint.tsx
@@ -60,7 +60,7 @@ type AdminMaintToolProps = {
 
 function AdminMaintTool(props: AdminMaintToolProps): React.ReactNode {
   return (
-    <Grid item xs={12} xl={6}>
+    <Grid size={{ xs: 12, xl: 6 }}>
       <Card>
         <CardHeader title={props.name} />
         <CardContent>
diff --git a/web/src/app/admin/AdminNumberLookup.tsx b/web/src/app/admin/AdminNumberLookup.tsx
index 3b81238f2f..e1e84bb066 100644
--- a/web/src/app/admin/AdminNumberLookup.tsx
+++ b/web/src/app/admin/AdminNumberLookup.tsx
@@ -100,7 +100,7 @@ export default function AdminNumberLookup(): React.JSX.Element {
         <Card>
           <CardContent>
             <Grid container spacing={2}>
-              <Grid item xs={12}>
+              <Grid size={12}>
                 <TelTextField
                   onChange={(e) => {
                     setNumber(e.target.value)
diff --git a/web/src/app/admin/AdminSMSSend.tsx b/web/src/app/admin/AdminSMSSend.tsx
index f2bda06dbb..b731ca0c5e 100644
--- a/web/src/app/admin/AdminSMSSend.tsx
+++ b/web/src/app/admin/AdminSMSSend.tsx
@@ -96,7 +96,7 @@ export default function AdminSMSSend(): React.JSX.Element {
         <Card>
           <CardContent>
             <Grid container spacing={2}>
-              <Grid item xs={12} sm={12} md={12} lg={6}>
+              <Grid size={{ xs: 12, sm: 12, md: 12, lg: 6 }}>
                 <FromValueField
                   onChange={(e) => setFromNumber(e.target.value)}
                   value={fromNumber}
@@ -105,7 +105,7 @@ export default function AdminSMSSend(): React.JSX.Element {
                   fullWidth
                 />
               </Grid>
-              <Grid item xs={12} sm={12} md={12} lg={6}>
+              <Grid size={{ xs: 12, sm: 12, md: 12, lg: 6 }}>
                 <TelTextField
                   onChange={(e) => setToNumber(e.target.value)}
                   value={toNumber}
@@ -113,7 +113,7 @@ export default function AdminSMSSend(): React.JSX.Element {
                   label='To Number'
                 />
               </Grid>
-              <Grid item xs={12}>
+              <Grid size={12}>
                 <TextField
                   onChange={(e) => setBody(e.target.value)}
                   value={body}
diff --git a/web/src/app/admin/AdminToolbox.tsx b/web/src/app/admin/AdminToolbox.tsx
index 65d7bfd7bf..37f592a159 100644
--- a/web/src/app/admin/AdminToolbox.tsx
+++ b/web/src/app/admin/AdminToolbox.tsx
@@ -26,8 +26,8 @@ export default function AdminToolbox(): React.JSX.Element {
         [theme.breakpoints.up('md')]: { justifyContent: 'center' },
       })}
     >
-      <Grid container item xs={12}>
-        <Grid item xs={12}>
+      <Grid size={12} container>
+        <Grid size={12}>
           <Typography
             component='h2'
             variant='subtitle1'
@@ -37,12 +37,12 @@ export default function AdminToolbox(): React.JSX.Element {
             Twilio Number Lookup
           </Typography>
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <AdminNumberLookup />
         </Grid>
       </Grid>
-      <Grid container item xs={12}>
-        <Grid item xs={12}>
+      <Grid size={12} container>
+        <Grid size={12}>
           <Typography
             component='h2'
             variant='subtitle1'
@@ -52,7 +52,7 @@ export default function AdminToolbox(): React.JSX.Element {
             Send SMS
           </Typography>
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <AdminSMSSend />
         </Grid>
       </Grid>
diff --git a/web/src/app/admin/admin-alert-counts/AdminAlertCounts.tsx b/web/src/app/admin/admin-alert-counts/AdminAlertCounts.tsx
index a0adbff6c8..e85be95a7c 100644
--- a/web/src/app/admin/admin-alert-counts/AdminAlertCounts.tsx
+++ b/web/src/app/admin/admin-alert-counts/AdminAlertCounts.tsx
@@ -69,7 +69,7 @@ export default function AdminAlertCounts(): React.JSX.Element {
 
   return (
     <Grid container spacing={2}>
-      <Grid item xs={12}>
+      <Grid size={12}>
         <AlertCountControls />
         <Card sx={{ mt: 1 }}>
           <CardHeader
diff --git a/web/src/app/admin/admin-alert-counts/AlertCountControls.tsx b/web/src/app/admin/admin-alert-counts/AlertCountControls.tsx
index bb2616f879..f1da0376b7 100644
--- a/web/src/app/admin/admin-alert-counts/AlertCountControls.tsx
+++ b/web/src/app/admin/admin-alert-counts/AlertCountControls.tsx
@@ -31,7 +31,7 @@ export default function AlertCountControls(): React.JSX.Element {
   return (
     <Card>
       <Grid container spacing={1} sx={{ padding: 2 }}>
-        <Grid item>
+        <Grid >
           <ISODateTimePicker
             sx={{ minWidth: '325px' }}
             placeholder='Start'
@@ -45,7 +45,7 @@ export default function AlertCountControls(): React.JSX.Element {
             variant='outlined'
           />
         </Grid>
-        <Grid item>
+        <Grid >
           <ISODateTimePicker
             sx={{ minWidth: '325px' }}
             placeholder='End'
@@ -59,7 +59,7 @@ export default function AlertCountControls(): React.JSX.Element {
             variant='outlined'
           />
         </Grid>
-        <Grid item sx={{ flex: 1 }}>
+        <Grid sx={{ flex: 1 }}>
           <FormControl sx={{ width: '100%', minWidth: '150px' }}>
             <InputLabel>Interval</InputLabel>
             <Select
@@ -80,7 +80,7 @@ export default function AlertCountControls(): React.JSX.Element {
             </Select>
           </FormControl>
         </Grid>
-        <Grid item>
+        <Grid >
           <Button
             aria-label='Reset Filters'
             variant='outlined'
diff --git a/web/src/app/admin/admin-alert-counts/AlertCountLineGraph.tsx b/web/src/app/admin/admin-alert-counts/AlertCountLineGraph.tsx
index 289423381f..a6b3033a49 100644
--- a/web/src/app/admin/admin-alert-counts/AlertCountLineGraph.tsx
+++ b/web/src/app/admin/admin-alert-counts/AlertCountLineGraph.tsx
@@ -136,7 +136,7 @@ export default function AlertCountLineGraph(
         fontFamily: (theme) => theme.typography.body2.fontFamily,
       }}
     >
-      <Grid item xs={12} data-cy='alert-count-graph'>
+      <Grid size={12} data-cy='alert-count-graph'>
         {props.loading && <Spinner />}
         <AutoSizer>
           {({ width, height }: { width: number; height: number }) => (
diff --git a/web/src/app/admin/admin-alert-counts/AlertCountTable.tsx b/web/src/app/admin/admin-alert-counts/AlertCountTable.tsx
index 6f369f1eb2..784dd8ae1c 100644
--- a/web/src/app/admin/admin-alert-counts/AlertCountTable.tsx
+++ b/web/src/app/admin/admin-alert-counts/AlertCountTable.tsx
@@ -1,8 +1,8 @@
 import React, { useMemo, useEffect } from 'react'
 import {
   DataGrid,
+  GridColDef,
   GridRenderCellParams,
-  GridValueGetterParams,
   gridPaginatedVisibleSortedGridRowEntriesSelector,
   GridToolbarContainer,
   GridToolbarDensitySelector,
@@ -28,13 +28,13 @@ interface AlertCountTableProps {
   setGraphData: (data: AlertCountSeries[]) => void
 }
 
-const columns = [
+const columns: GridColDef<AlertCountSeries>[] = [
   {
     field: 'serviceName',
     headerName: 'Service Name',
     width: 300,
-    valueGetter: (params: GridValueGetterParams) => {
-      return params.row.serviceName || ''
+    valueGetter: (_value: unknown, row: AlertCountSeries) => {
+      return row.serviceName || ''
     },
     renderCell: (params: GridRenderCellParams<GridValidRowModel>) => {
       if (params.row.id && params.value) {
@@ -50,29 +50,28 @@ const columns = [
     headerName: 'Total',
     type: 'number',
     width: 150,
-    valueGetter: (params: GridValueGetterParams) => params.row.total,
+    valueGetter: (_value: unknown, row: AlertCountSeries) => row.total,
   },
   {
     field: 'max',
     headerName: 'Max',
     type: 'number',
     width: 150,
-    valueGetter: (params: GridValueGetterParams) => params.row.max,
+    valueGetter: (_value: unknown, row: AlertCountSeries) => row.max,
   },
   {
     field: 'avg',
     headerName: 'Average',
     type: 'number',
     width: 150,
-    valueGetter: (params: GridValueGetterParams) => params.row.avg,
+    valueGetter: (_value: unknown, row: AlertCountSeries) => row.avg,
   },
   {
     field: 'serviceID',
     headerName: 'Service ID',
-    valueGetter: (params: GridValueGetterParams) => {
-      return params.row.id || ''
+    valueGetter: (_value: unknown, row: AlertCountSeries) => {
+      return row.id || ''
     },
-    hide: true,
     width: 300,
   },
 ]
@@ -116,12 +115,12 @@ export default function AlertCountTable(
     return (
       <GridToolbarContainer className={gridClasses.toolbarContainer}>
         <Grid container justifyContent='space-between'>
-          <Grid item>
+          <Grid >
             <GridToolbarColumnsButton />
             <GridToolbarFilterButton />
             <GridToolbarDensitySelector />
           </Grid>
-          <Grid item>
+          <Grid >
             <AppLink
               to={link}
               download={`all-services-alert-counts-${props.startTime}-to-${props.endTime}.csv`}
@@ -141,16 +140,16 @@ export default function AlertCountTable(
 
   return (
     <Grid container sx={{ height: '400px' }}>
-      <Grid item xs={12} data-cy='alert-count-table'>
+      <Grid size={12} data-cy='alert-count-table'>
         <DataGrid
           rows={props.alertCounts ?? []}
           loading={props.loading}
           autoPageSize
           columns={columns}
           rowSelection={false}
-          components={{
-            ExportIcon: DownloadIcon,
-            Toolbar: CustomToolbar,
+          slots={{
+            exportIcon: DownloadIcon,
+            toolbar: CustomToolbar,
           }}
         />
       </Grid>
diff --git a/web/src/app/admin/admin-api-keys/AdminAPIKeyCreateDialog.tsx b/web/src/app/admin/admin-api-keys/AdminAPIKeyCreateDialog.tsx
index 2a9baec4b0..797350d558 100644
--- a/web/src/app/admin/admin-api-keys/AdminAPIKeyCreateDialog.tsx
+++ b/web/src/app/admin/admin-api-keys/AdminAPIKeyCreateDialog.tsx
@@ -36,7 +36,7 @@ const fromExistingQuery = gql`
 
 function AdminAPIKeyToken(props: { token: string }): React.ReactNode {
   return (
-    <Grid item xs={12}>
+    <Grid size={12}>
       <Typography sx={{ mb: 3 }}>
         <CopyText title={props.token} value={props.token} placement='bottom' />
       </Typography>
diff --git a/web/src/app/admin/admin-api-keys/AdminAPIKeyExpirationField.tsx b/web/src/app/admin/admin-api-keys/AdminAPIKeyExpirationField.tsx
index d9c0999c25..3a784ec32c 100644
--- a/web/src/app/admin/admin-api-keys/AdminAPIKeyExpirationField.tsx
+++ b/web/src/app/admin/admin-api-keys/AdminAPIKeyExpirationField.tsx
@@ -47,7 +47,7 @@ export default function AdminAPIKeyExpirationField(
 
   return (
     <Grid container spacing={2}>
-      <Grid item justifyContent='flex-start' width='25%'>
+      <Grid justifyContent='flex-start' width='25%'>
         <InputLabel id='expires-at-select-label'>{props.label}</InputLabel>
         <Select
           label={props.label}
@@ -71,7 +71,7 @@ export default function AdminAPIKeyExpirationField(
       </Grid>
 
       {selected ? ( // if a preset is selected, show the expiration time
-        <Grid item justifyContent='flex-start'>
+        <Grid justifyContent='flex-start'>
           <Typography
             gutterBottom
             variant='subtitle2'
@@ -83,7 +83,7 @@ export default function AdminAPIKeyExpirationField(
         </Grid>
       ) : (
         // if custom is selected, show date picker
-        <Grid item justifyContent='flex-end' width='75%'>
+        <Grid justifyContent='flex-end' width='75%'>
           <ISODateTimePicker
             value={props.value}
             onChange={props.onChange}
diff --git a/web/src/app/admin/admin-api-keys/AdminAPIKeyForm.tsx b/web/src/app/admin/admin-api-keys/AdminAPIKeyForm.tsx
index 96d7704680..71eadc8200 100644
--- a/web/src/app/admin/admin-api-keys/AdminAPIKeyForm.tsx
+++ b/web/src/app/admin/admin-api-keys/AdminAPIKeyForm.tsx
@@ -24,10 +24,10 @@ export default function AdminAPIKeyForm(
   return (
     <FormContainer optionalLabels {...props}>
       <Grid container spacing={2}>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <FormField fullWidth name='name' required component={TextField} />
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <FormField
             fullWidth
             name='description'
@@ -39,7 +39,7 @@ export default function AdminAPIKeyForm(
             hint='Markdown Supported'
           />
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <FormField
             fullWidth
             component={TextField}
@@ -56,7 +56,7 @@ export default function AdminAPIKeyForm(
             </MenuItem>
           </FormField>
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <FormField
             fullWidth
             component={AdminAPIKeyExpirationField}
@@ -66,7 +66,7 @@ export default function AdminAPIKeyForm(
             disabled={!props.create}
           />
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <FormControl error={!!queryError} fullWidth>
             <GraphQLEditor
               value={props.value.query}
diff --git a/web/src/app/admin/admin-api-keys/AdminAPIKeyShowQueryDialog.tsx b/web/src/app/admin/admin-api-keys/AdminAPIKeyShowQueryDialog.tsx
index 8cf58ca330..2f720bf3f0 100644
--- a/web/src/app/admin/admin-api-keys/AdminAPIKeyShowQueryDialog.tsx
+++ b/web/src/app/admin/admin-api-keys/AdminAPIKeyShowQueryDialog.tsx
@@ -46,7 +46,7 @@ export default function AdminAPIKeyShowQueryDialog(props: {
       loading={fetching}
       form={
         <Grid container spacing={2}>
-          <Grid item xs={12}>
+          <Grid size={12}>
             <code
               style={{
                 fontSize: 'large',
@@ -66,10 +66,10 @@ export default function AdminAPIKeyShowQueryDialog(props: {
               </pre>
             </code>
           </Grid>
-          <Grid item xs={12}>
+          <Grid size={12}>
             <CopyText title='Copy Query' value={key.query} placement='bottom' />
           </Grid>
-          <Grid item xs={12}>
+          <Grid size={12}>
             <CopyText
               title='Copy Query (as JSON)'
               value={JSON.stringify(key.query)}
diff --git a/web/src/app/admin/admin-message-logs/AdminMessageLogsControls.tsx b/web/src/app/admin/admin-message-logs/AdminMessageLogsControls.tsx
index e0c361542c..1f18ad84d7 100644
--- a/web/src/app/admin/admin-message-logs/AdminMessageLogsControls.tsx
+++ b/web/src/app/admin/admin-message-logs/AdminMessageLogsControls.tsx
@@ -11,10 +11,10 @@ export default function AdminMessageLogsControls(): React.JSX.Element {
   return (
     <Card>
       <Grid container spacing={1} sx={{ padding: 2 }}>
-        <Grid item sx={{ flex: 1 }}>
+        <Grid sx={{ flex: 1 }}>
           <Search transition={false} fullWidth />
         </Grid>
-        <Grid item>
+        <Grid >
           <ISODateTimePicker
             placeholder='Start'
             name='startDate'
@@ -27,7 +27,7 @@ export default function AdminMessageLogsControls(): React.JSX.Element {
             variant='outlined'
           />
         </Grid>
-        <Grid item>
+        <Grid >
           <ISODateTimePicker
             placeholder='End'
             name='endDate'
@@ -40,7 +40,7 @@ export default function AdminMessageLogsControls(): React.JSX.Element {
             variant='outlined'
           />
         </Grid>
-        <Grid item>
+        <Grid >
           <Button
             aria-label='Reset Filters'
             variant='outlined'
diff --git a/web/src/app/admin/admin-message-logs/AdminMessageLogsGraph.tsx b/web/src/app/admin/admin-message-logs/AdminMessageLogsGraph.tsx
index d48053d348..ed3cfaa44f 100644
--- a/web/src/app/admin/admin-message-logs/AdminMessageLogsGraph.tsx
+++ b/web/src/app/admin/admin-message-logs/AdminMessageLogsGraph.tsx
@@ -116,7 +116,7 @@ export default function AdminMessageLogsGraph(): React.JSX.Element {
   }
 
   return (
-    <Grid item xs={12}>
+    <Grid size={12}>
       <Accordion defaultExpanded>
         <AccordionSummary expandIcon={<ExpandMoreIcon />}>
           <CardHeader
@@ -136,7 +136,7 @@ export default function AdminMessageLogsGraph(): React.JSX.Element {
               fontFamily: theme.typography.body2.fontFamily,
             }}
           >
-            <Grid item>
+            <Grid >
               <CardContent
                 sx={{ display: 'flex', alignItems: 'center', pt: 0 }}
               >
@@ -157,9 +157,7 @@ export default function AdminMessageLogsGraph(): React.JSX.Element {
                 </Select>
               </CardContent>
             </Grid>
-            <Grid
-              item
-              xs={12}
+            <Grid size={12}
               data-cy='message-logs-graph'
               sx={{ height: 500 }}
             >
diff --git a/web/src/app/admin/admin-message-logs/AdminMessageLogsLayout.tsx b/web/src/app/admin/admin-message-logs/AdminMessageLogsLayout.tsx
index 7e5b6a476e..f352319962 100644
--- a/web/src/app/admin/admin-message-logs/AdminMessageLogsLayout.tsx
+++ b/web/src/app/admin/admin-message-logs/AdminMessageLogsLayout.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Box, Chip, Grid, Typography } from '@mui/material'
+import { Chip, Grid, Typography } from '@mui/material'
 import { DateTime } from 'luxon'
 import { gql, useQuery } from 'urql'
 import AdminMessageLogsControls from './AdminMessageLogsControls'
@@ -97,10 +97,10 @@ export default function AdminMessageLogsLayout(): React.JSX.Element {
       title: `${log.type} Notification`,
       subText: (
         <Grid container spacing={2} direction='column'>
-          <Grid item>Destination: {log.destination}</Grid>
-          {log.serviceName && <Grid item>Service: {log.serviceName}</Grid>}
-          {log.userName && <Grid item>User: {log.userName}</Grid>}
-          <Grid item>
+          <Grid >Destination: {log.destination}</Grid>
+          {log.serviceName && <Grid >Service: {log.serviceName}</Grid>}
+          {log.userName && <Grid >User: {log.userName}</Grid>}
+          <Grid >
             <Chip label={status} style={statusStyles} />
           </Grid>
         </Grid>
@@ -138,13 +138,13 @@ export default function AdminMessageLogsLayout(): React.JSX.Element {
               }
         }
       >
-        <Grid item xs={12}>
+        <Grid size={12}>
           <AdminMessageLogsControls />
         </Grid>
 
         <AdminMessageLogsGraph />
 
-        <Grid item xs={12}>
+        <Grid size={12}>
           <ListPageControls
             nextCursor={nextCursor}
             onCursorChange={setCursor}
diff --git a/web/src/app/admin/admin-service-metrics/AdminServiceFilter.tsx b/web/src/app/admin/admin-service-metrics/AdminServiceFilter.tsx
index 0b7519f2f9..60e464fd7b 100644
--- a/web/src/app/admin/admin-service-metrics/AdminServiceFilter.tsx
+++ b/web/src/app/admin/admin-service-metrics/AdminServiceFilter.tsx
@@ -196,10 +196,10 @@ function AdminServiceFilter(): React.JSX.Element {
   return (
     <React.Fragment>
       <Grid container>
-        <Grid item xs>
+        <Grid size="grow">
           {renderFilterChips()}
         </Grid>
-        <Grid item xs>
+        <Grid size="grow">
           <IconButton
             aria-label='Filter Alerts'
             onClick={() => setOpen(true)}
diff --git a/web/src/app/admin/admin-service-metrics/AdminServiceMetrics.tsx b/web/src/app/admin/admin-service-metrics/AdminServiceMetrics.tsx
index 12678f06ea..82b0d79c4e 100644
--- a/web/src/app/admin/admin-service-metrics/AdminServiceMetrics.tsx
+++ b/web/src/app/admin/admin-service-metrics/AdminServiceMetrics.tsx
@@ -98,7 +98,7 @@ export default function AdminServiceMetrics(): React.JSX.Element {
   function renderOverviewMetrics(): React.JSX.Element {
     return (
       <React.Fragment>
-        <Grid item xs={4} sm={2.4}>
+        <Grid size={{ xs: 4, sm: 2.4 }}>
           <Card sx={{ height: '100%' }}>
             <CardHeader
               title={serviceData.services.length}
@@ -106,7 +106,7 @@ export default function AdminServiceMetrics(): React.JSX.Element {
             />
           </Card>
         </Grid>
-        <Grid item xs={4} sm={2.4}>
+        <Grid size={{ xs: 4, sm: 2.4 }}>
           <Card sx={{ height: '100%' }}>
             <CardHeader
               title={totalNoIntegration}
@@ -121,7 +121,7 @@ export default function AdminServiceMetrics(): React.JSX.Element {
             />
           </Card>
         </Grid>
-        <Grid item xs={4} sm={2.4}>
+        <Grid size={{ xs: 4, sm: 2.4 }}>
           <Card sx={{ height: '100%' }}>
             <CardHeader
               title={totalNoEP}
@@ -136,7 +136,7 @@ export default function AdminServiceMetrics(): React.JSX.Element {
             />
           </Card>
         </Grid>
-        <Grid item xs={4} sm={2.4}>
+        <Grid size={{ xs: 4, sm: 2.4 }}>
           <Card sx={{ height: '100%' }}>
             <CardHeader
               title={
@@ -157,7 +157,7 @@ export default function AdminServiceMetrics(): React.JSX.Element {
             />
           </Card>
         </Grid>
-        <Grid item xs={3} sm={2.4}>
+        <Grid size={{ xs: 3, sm: 2.4 }}>
           <Card sx={{ height: '100%' }}>
             <CardHeader
               title={totalAlertLimit}
@@ -179,7 +179,7 @@ export default function AdminServiceMetrics(): React.JSX.Element {
   function renderUsageGraphs(): React.JSX.Element {
     return (
       <React.Fragment>
-        <Grid item xs>
+        <Grid size="grow">
           <Card sx={{ marginTop: (theme) => theme.spacing(1) }}>
             <CardHeader
               title='Integration Key Usage'
@@ -198,7 +198,7 @@ export default function AdminServiceMetrics(): React.JSX.Element {
             </CardContent>
           </Card>
         </Grid>
-        <Grid item xs>
+        <Grid size="grow">
           <Card sx={{ marginTop: (theme) => theme.spacing(1) }}>
             <CardHeader
               title='Escalation Policy Usage'
@@ -240,11 +240,11 @@ export default function AdminServiceMetrics(): React.JSX.Element {
     <Grid container spacing={2}>
       {serviceData.loading && <Spinner />}
       {renderOverviewMetrics()}
-      <Grid item xs={12}>
+      <Grid size={12}>
         <AdminServiceFilter />
       </Grid>
       {renderUsageGraphs()}
-      <Grid item xs={12}>
+      <Grid size={12}>
         {renderServiceTable()}
       </Grid>
     </Grid>
diff --git a/web/src/app/admin/admin-service-metrics/AdminServiceTable.tsx b/web/src/app/admin/admin-service-metrics/AdminServiceTable.tsx
index 649c915419..d3b84b52ad 100644
--- a/web/src/app/admin/admin-service-metrics/AdminServiceTable.tsx
+++ b/web/src/app/admin/admin-service-metrics/AdminServiceTable.tsx
@@ -1,11 +1,10 @@
 import React, { useState } from 'react'
 import {
   DataGrid,
-  GridValueGetterParams,
   GridRenderCellParams,
   GridValidRowModel,
   GridToolbar,
-  GridSortItem,
+  GridSortModel,
 } from '@mui/x-data-grid'
 import AppLink from '../../util/AppLink'
 import {
@@ -38,7 +37,7 @@ export default function AdminServiceTable(
 ): React.JSX.Element {
   const { services = [], loading, staleAlertServices } = props
   // Community version of MUI DataGrid only supports sortModels with a single SortItem
-  const [sortModel, setSortModel] = useState<GridSortItem[]>([
+  const [sortModel, setSortModel] = useState<GridSortModel>([
     {
       field: 'status',
       sort: 'desc',
@@ -79,8 +78,8 @@ export default function AdminServiceTable(
       field: 'name',
       headerName: 'Service Name',
       width: 300,
-      valueGetter: (params: GridValueGetterParams) => {
-        return params.row.name || ''
+      valueGetter: (_value: unknown, row: Service) => {
+        return row.name || ''
       },
       renderCell: (params: GridRenderCellParams<GridValidRowModel>) => {
         if (params.row.id && params.value) {
@@ -95,14 +94,14 @@ export default function AdminServiceTable(
       field: 'status',
       headerName: 'Status',
       width: 150,
-      valueGetter: (params: GridValueGetterParams) => {
+      valueGetter: (_value: unknown, row: Service) => {
         const {
           hasEPSteps,
           hasIntegrations,
           hasNotices,
           inMaintenance,
           hasStaleAlerts,
-        } = getServiceStatus(params.row as Service)
+        } = getServiceStatus(row)
         const warnings = []
 
         if (
@@ -120,7 +119,7 @@ export default function AdminServiceTable(
         if (hasNotices) warnings.push('Service Reaching Alert Limit')
         if (hasStaleAlerts)
           warnings.push(
-            `Service Has ${staleAlertServices[params.row.name]} Stale Alerts`,
+            `Service Has ${staleAlertServices[row.name]} Stale Alerts`,
           )
 
         return warnings.join(',')
@@ -179,8 +178,8 @@ export default function AdminServiceTable(
       field: 'epPolicyName',
       headerName: 'Escalation Policy Name',
       width: 300,
-      valueGetter: (params: GridValueGetterParams) => {
-        return params.row.escalationPolicy?.name || ''
+      valueGetter: (_value: unknown, row: Service) => {
+        return row.escalationPolicy?.name || ''
       },
       renderCell: (params: GridRenderCellParams<GridValidRowModel>) => {
         if (
@@ -202,10 +201,10 @@ export default function AdminServiceTable(
       field: 'epStepTargets',
       headerName: 'EP Step Target Type(s)',
       width: 215,
-      valueGetter: (params: GridValueGetterParams) => {
+      valueGetter: (_value: unknown, row: Service) => {
         const targets: DestinationType[] = []
-        if (params.row.escalationPolicy.steps?.length) {
-          params.row.escalationPolicy.steps?.map(
+        if (row.escalationPolicy?.steps?.length) {
+          row.escalationPolicy.steps?.map(
             (step: EscalationPolicyStep) => {
               step.actions.map((dest: Destination) => {
                 if (!targets.includes(dest.type)) targets.push(dest.type)
@@ -220,10 +219,10 @@ export default function AdminServiceTable(
       field: 'intKeyTargets',
       headerName: 'Integration Key Target Type(s)',
       width: 250,
-      valueGetter: (params: GridValueGetterParams) => {
+      valueGetter: (_value: unknown, row: Service) => {
         const targets: IntegrationKeyType[] = []
-        if (params.row.integrationKeys?.length) {
-          params.row.integrationKeys?.map((key: IntegrationKey) => {
+        if (row.integrationKeys?.length) {
+          row.integrationKeys?.map((key: IntegrationKey) => {
             if (!targets.includes(key.type)) targets.push(key.type)
           })
         }
@@ -234,8 +233,8 @@ export default function AdminServiceTable(
       field: 'heartbeatMonitors',
       headerName: 'Heartbeat Monitor Total',
       width: 250,
-      valueGetter: (params: GridValueGetterParams) => {
-        return params.row.heartbeatMonitors?.length
+      valueGetter: (_value: unknown, row: Service) => {
+        return row.heartbeatMonitors?.length
       },
     },
   ]
@@ -250,7 +249,7 @@ export default function AdminServiceTable(
         pageSizeOptions={[10, 25, 50, 100]}
         sortingOrder={['desc', 'asc']}
         sortModel={sortModel}
-        onSortModelChange={(model) => setSortModel(model)}
+        onSortModelChange={(model: GridSortModel) => setSortModel(model)}
       />
     </Grid>
   )
diff --git a/web/src/app/admin/admin-service-metrics/AdminServiceTargetGraph.tsx b/web/src/app/admin/admin-service-metrics/AdminServiceTargetGraph.tsx
index 01515f08b2..22bdf926a4 100644
--- a/web/src/app/admin/admin-service-metrics/AdminServiceTargetGraph.tsx
+++ b/web/src/app/admin/admin-service-metrics/AdminServiceTargetGraph.tsx
@@ -39,7 +39,7 @@ export default function AdminServiceTargetGraph(
         fontFamily: (theme) => theme.typography.body2.fontFamily,
       }}
     >
-      <Grid item xs={12} data-cy='alert-count-graph'>
+      <Grid size={12} data-cy='alert-count-graph'>
         <AutoSizer>
           {({ width, height }: { width: number; height: number }) => (
             <BarChart
diff --git a/web/src/app/admin/switchover/AdminSWODone.tsx b/web/src/app/admin/switchover/AdminSWODone.tsx
index 308c2567f9..67fd71421e 100644
--- a/web/src/app/admin/switchover/AdminSWODone.tsx
+++ b/web/src/app/admin/switchover/AdminSWODone.tsx
@@ -9,12 +9,12 @@ export function AdminSWODone(): React.JSX.Element {
   return (
     <TransitionGroup appear={false}>
       <Zoom in timeout={500}>
-        <Grid item container alignItems='center' justifyContent='center'>
+        <Grid container alignItems='center' justifyContent='center'>
           <DatabaseCheck
             color='primary'
             style={{ width: '100%', height: 256 }}
           />
-          <Grid item>
+          <Grid >
             <Typography color='primary' variant='h6' style={{ marginTop: 16 }}>
               DB switchover is complete.
             </Typography>
diff --git a/web/src/app/admin/switchover/AdminSWOWrongMode.tsx b/web/src/app/admin/switchover/AdminSWOWrongMode.tsx
index c42f42f178..69d469103b 100644
--- a/web/src/app/admin/switchover/AdminSWOWrongMode.tsx
+++ b/web/src/app/admin/switchover/AdminSWOWrongMode.tsx
@@ -5,9 +5,9 @@ import DatabaseOff from 'mdi-material-ui/DatabaseOff'
 
 export function AdminSWOWrongMode(): React.JSX.Element {
   return (
-    <Grid item container alignItems='center' justifyContent='center'>
+    <Grid container alignItems='center' justifyContent='center'>
       <DatabaseOff color='secondary' style={{ width: '100%', height: 256 }} />
-      <Grid item>
+      <Grid >
         <div style={{ textAlign: 'center' }}>
           <Typography color='secondary' variant='h6' style={{ marginTop: 16 }}>
             Unavailable: Application is not in switchover mode.
diff --git a/web/src/app/admin/switchover/AdminSwitchover.tsx b/web/src/app/admin/switchover/AdminSwitchover.tsx
index 8b764883be..908883ccba 100644
--- a/web/src/app/admin/switchover/AdminSwitchover.tsx
+++ b/web/src/app/admin/switchover/AdminSwitchover.tsx
@@ -122,11 +122,11 @@ export default function AdminSwitchover(): React.JSX.Element {
         />
       )}
       {statusNotices.length > 0 && (
-        <Grid item xs={12}>
+        <Grid size={12}>
           <Notices notices={statusNotices.reverse()} />
         </Grid>
       )}
-      <Grid item xs={12} sm={12} md={12} lg={4} xl={4}>
+      <Grid size={{ xs: 12, sm: 12, md: 12, lg: 4, xl: 4 }}>
         <AdminSWOStatusCard
           data={data}
           onExecClick={() => {
@@ -142,11 +142,11 @@ export default function AdminSwitchover(): React.JSX.Element {
         />
       </Grid>
 
-      <Grid item xs={12} sm={12} md={12} lg={8} xl={8}>
+      <Grid size={{ xs: 12, sm: 12, md: 12, lg: 8, xl: 8 }}>
         <AdminSWODBVersionCard data={data} />
       </Grid>
 
-      <Grid item xs={12} container spacing={2}>
+      <Grid size={12} container spacing={2}>
         {data?.nodes.length > 0 &&
           data.nodes
             .slice()
diff --git a/web/src/app/admin/switchover/SWONode.tsx b/web/src/app/admin/switchover/SWONode.tsx
index 23e0aad50d..9bb929d2d0 100644
--- a/web/src/app/admin/switchover/SWONode.tsx
+++ b/web/src/app/admin/switchover/SWONode.tsx
@@ -25,7 +25,7 @@ export default function SWONode({
 
   if (node.id.startsWith('unknown-')) {
     return (
-      <Grid item xs={12} sm={6} lg={4} xl={3} sx={{ width: '100%' }}>
+      <Grid size={{ xs: 12, sm: 6, lg: 4, xl: 3 }} sx={{ width: '100%' }}>
         <Card>
           <Typography color={theme.palette.primary.main} sx={{ p: 2 }}>
             {name}
@@ -60,7 +60,7 @@ export default function SWONode({
   }
 
   return (
-    <Grid item xs={12} sm={6} lg={4} xl={3} sx={{ width: '100%' }}>
+    <Grid size={{ xs: 12, sm: 6, lg: 4, xl: 3 }} sx={{ width: '100%' }}>
       <Card raised={node.isLeader}>
         <Typography color={theme.palette.primary.main} sx={{ p: 2 }}>
           {name}
diff --git a/web/src/app/alerts/AlertsList.tsx b/web/src/app/alerts/AlertsList.tsx
index b628feab24..c83dd7baf0 100644
--- a/web/src/app/alerts/AlertsList.tsx
+++ b/web/src/app/alerts/AlertsList.tsx
@@ -290,7 +290,7 @@ export default function AlertsList(props: AlertsListProps): React.JSX.Element {
     <React.Fragment>
       <Grid container direction='column' spacing={2}>
         <ServiceNotices serviceID={props.serviceID} />
-        <Grid item>
+        <Grid >
           <QueryList
             query={alertsListQuery}
             infiniteScroll
diff --git a/web/src/app/alerts/CreateAlertDialog/CreateAlertDialog.tsx b/web/src/app/alerts/CreateAlertDialog/CreateAlertDialog.tsx
index e4315b13b2..2366b63cfb 100644
--- a/web/src/app/alerts/CreateAlertDialog/CreateAlertDialog.tsx
+++ b/web/src/app/alerts/CreateAlertDialog/CreateAlertDialog.tsx
@@ -5,6 +5,7 @@ import {
   Stepper,
   Step,
   StepLabel,
+  Theme,
   Typography,
 } from '@mui/material'
 import OpenInNewIcon from '@mui/icons-material/OpenInNew'
@@ -87,11 +88,11 @@ export default function CreateAlertDialog(props: {
 
     reviewTitle = (
       <Grid container>
-        <Grid item>
+        <Grid >
           <Typography>{titleMessage}</Typography>
         </Grid>
-        <Grid item sx={{ flexGrow: 1 }} />
-        <Grid item>
+        <Grid sx={{ flexGrow: 1 }} />
+        <Grid >
           <Button
             variant='contained'
             size='small'
@@ -146,7 +147,7 @@ export default function CreateAlertDialog(props: {
         )
       }
       PaperProps={{
-        sx: (theme) => ({
+        sx: (theme: Theme) => ({
           [theme.breakpoints.up('md')]: { height: '65vh' },
         }),
       }}
diff --git a/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertConfirm.tsx b/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertConfirm.tsx
index 7f52868366..56fc13aa97 100644
--- a/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertConfirm.tsx
+++ b/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertConfirm.tsx
@@ -11,7 +11,7 @@ type FieldProps = {
 
 function Field(props: FieldProps): React.JSX.Element {
   return (
-    <Grid item xs={12}>
+    <Grid size={12}>
       <Typography
         variant='subtitle1'
         component='h3'
diff --git a/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertInfo.tsx b/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertInfo.tsx
index 9d3b08101a..09fb4893b7 100644
--- a/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertInfo.tsx
+++ b/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertInfo.tsx
@@ -5,7 +5,7 @@ import { FormField } from '../../../forms'
 export function CreateAlertInfo(): React.JSX.Element {
   return (
     <Grid container spacing={2}>
-      <Grid item xs={12}>
+      <Grid size={12}>
         <FormField
           fullWidth
           label='Alert Summary'
@@ -14,7 +14,7 @@ export function CreateAlertInfo(): React.JSX.Element {
           component={TextField}
         />
       </Grid>
-      <Grid item xs={12}>
+      <Grid size={12}>
         <FormField
           fullWidth
           multiline
diff --git a/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertReview.tsx b/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertReview.tsx
index de7c7b52cc..4af4c58f4e 100644
--- a/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertReview.tsx
+++ b/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertReview.tsx
@@ -21,7 +21,7 @@ export function CreateAlertReview(
   return (
     <Grid container spacing={2}>
       {createdAlertIDs.length > 0 && (
-        <Grid item xs={12}>
+        <Grid size={12}>
           <List aria-label='Successfully created alerts'>
             {createdAlertIDs.map((id: string) => (
               <CreateAlertListItem key={id} id={id} />
@@ -31,7 +31,7 @@ export function CreateAlertReview(
       )}
 
       {failedServices.length > 0 && (
-        <Grid item xs={12}>
+        <Grid size={12}>
           <List aria-label='Failed alerts'>
             {failedServices.map((svc) => {
               return (
diff --git a/web/src/app/alerts/components/AlertDetails.tsx b/web/src/app/alerts/components/AlertDetails.tsx
index 9175e6cb39..d0fa42948e 100644
--- a/web/src/app/alerts/components/AlertDetails.tsx
+++ b/web/src/app/alerts/components/AlertDetails.tsx
@@ -256,9 +256,7 @@ export default function AlertDetails(
     }
 
     return (
-      <Grid
-        item
-        xs={12}
+      <Grid size={12}
         data-cy='alert-details'
         sx={gs.cardContainer}
       >
@@ -356,9 +354,7 @@ export default function AlertDetails(
       />
 
       {/* Main Alert Info */}
-      <Grid
-        item
-        lg={isMobile || noiseReason !== '' ? 12 : 8}
+      <Grid size={{ lg: isMobile || noiseReason !== '' ? 12 : 8 }}
         sx={gs.cardContainer}
       >
         <Card
@@ -373,18 +369,18 @@ export default function AlertDetails(
           <CardContent data-cy='alert-summary'>
             <Grid container spacing={1}>
               {alert.service && (
-                <Grid item xs={12}>
+                <Grid size={12}>
                   <Typography variant='body1'>
                     {ServiceLink(alert.service)}
                   </Typography>
                 </Grid>
               )}
-              <Grid item xs={12}>
+              <Grid size={12}>
                 <Typography component='h2' variant='h5'>
                   {alert.alertID}: {alert.summary}
                 </Typography>
               </Grid>
-              <Grid item xs={12}>
+              <Grid size={12}>
                 <Typography variant='body1' data-cy='alert-status'>
                   {alert.status.toUpperCase().replace('STATUS', '')}
                 </Typography>
@@ -395,14 +391,14 @@ export default function AlertDetails(
         </Card>
       </Grid>
       {!noiseReason && (
-        <Grid item xs={12} lg={isMobile ? 12 : 4}>
+        <Grid size={{ xs: 12, lg: isMobile ? 12 : 4 }}>
           <AlertFeedback alertID={alert.alertID} />
         </Grid>
       )}
       {renderAlertDetails()}
 
       {/* Escalation Policy Info */}
-      <Grid item xs={12} sx={gs.cardContainer}>
+      <Grid size={12} sx={gs.cardContainer}>
         <Card style={{ width: '100%', overflowX: 'auto' }}>
           <CardContent>
             <Typography
@@ -448,7 +444,7 @@ export default function AlertDetails(
       </Grid>
 
       {/* Alert Logs */}
-      <Grid item xs={12} sx={gs.cardContainer}>
+      <Grid size={12} sx={gs.cardContainer}>
         <Card sx={{ width: '100%' }}>
           <div style={{ display: 'flex' }}>
             <CardContent style={{ flex: 1, paddingBottom: 0 }}>
diff --git a/web/src/app/alerts/components/AlertsListFilter.tsx b/web/src/app/alerts/components/AlertsListFilter.tsx
index 4228c61d8d..fe3bb19417 100644
--- a/web/src/app/alerts/components/AlertsListFilter.tsx
+++ b/web/src/app/alerts/components/AlertsListFilter.tsx
@@ -76,9 +76,7 @@ function AlertsListFilter(props: AlertsListFilterProps): React.JSX.Element {
             : { width: '17em' },
         ]}
       >
-        <Grid
-          item
-          xs={12}
+        <Grid size={12}
           sx={{ display: 'flex', alignItems: 'center' }}
         >
           <FormControl>
@@ -126,7 +124,7 @@ function AlertsListFilter(props: AlertsListFilterProps): React.JSX.Element {
             )}
           </FormControl>
         </Grid>
-        <Grid item xs={12} sx={gs.filterActions}>
+        <Grid size={12} sx={gs.filterActions}>
           <Button onClick={resetAll}>Reset</Button>
           <Button onClick={handleCloseFilters}>Done</Button>
         </Grid>
diff --git a/web/src/app/details/DetailsPage.tsx b/web/src/app/details/DetailsPage.tsx
index 39f0106824..510ea4f90c 100644
--- a/web/src/app/details/DetailsPage.tsx
+++ b/web/src/app/details/DetailsPage.tsx
@@ -85,21 +85,19 @@ export default function DetailsPage(p: DetailsPageProps): React.JSX.Element {
   return (
     <Grid container spacing={2}>
       {/* Notices */}
-      <Grid item xs={12}>
+      <Grid size={12}>
         {Array.isArray(p.notices) ? <Notices notices={p.notices} /> : p.notices}
       </Grid>
 
       {/* Header card */}
-      <Grid item xs={12} lg={!isMobile && p.links?.length ? 8 : 12}>
+      <Grid size={{ xs: 12, lg: !isMobile && p.links?.length ? 8 : 12 }}>
         <Card sx={classes.fullHeight}>
-          <Grid
+          <Grid size="grow"
             sx={classes.fullHeight}
-            item
-            xs
             container
             direction='column'
           >
-            <Grid item>
+            <Grid >
               <CardHeader
                 title={p.title}
                 subheader={p.subheader}
@@ -117,9 +115,9 @@ export default function DetailsPage(p: DetailsPageProps): React.JSX.Element {
             </Grid>
 
             {p.labels && (
-              <Grid item container spacing={1} sx={{ pl: '16px', pr: '16px' }}>
+              <Grid container spacing={1} sx={{ pl: '16px', pr: '16px' }}>
                 {p.labels.map((l) => (
-                  <Grid key={l.key} item>
+                  <Grid key={l.key} >
                     <Chip label={l.key + ' = ' + l.value} />
                   </Grid>
                 ))}
@@ -127,7 +125,7 @@ export default function DetailsPage(p: DetailsPageProps): React.JSX.Element {
             )}
 
             {p.details && (
-              <Grid item sx={{ pl: '16px', pr: '16px' }}>
+              <Grid sx={{ pl: '16px', pr: '16px' }}>
                 <Typography
                   component='div'
                   variant='subtitle1'
@@ -139,9 +137,9 @@ export default function DetailsPage(p: DetailsPageProps): React.JSX.Element {
               </Grid>
             )}
 
-            <Grid sx={classes.flexHeight} item />
+            <Grid sx={classes.flexHeight}  />
             {(p.primaryActions?.length || p.secondaryActions?.length) && (
-              <Grid item>
+              <Grid >
                 <CardActions
                   primaryActions={p.primaryActions}
                   secondaryActions={p.secondaryActions}
@@ -154,7 +152,7 @@ export default function DetailsPage(p: DetailsPageProps): React.JSX.Element {
 
       {/* Quick Links */}
       {links.length > 0 && (
-        <Grid item xs={12} lg={!isMobile && links.length ? 4 : 12}>
+        <Grid size={{ xs: 12, lg: !isMobile && links.length ? 4 : 12 }}>
           <Card sx={classes.fullHeight}>
             <CardHeader
               title='Quick Links'
@@ -192,10 +190,8 @@ export default function DetailsPage(p: DetailsPageProps): React.JSX.Element {
 
       {/* Primary Page Content */}
       {p.pageContent && (
-        <Grid
+        <Grid size={12}
           sx={isMobile ? classes.smPageBottom : undefined}
-          item
-          xs={12}
         >
           {p.pageContent}
         </Grid>
diff --git a/web/src/app/details/Notices.tsx b/web/src/app/details/Notices.tsx
index 6789e931e9..94b025c644 100644
--- a/web/src/app/details/Notices.tsx
+++ b/web/src/app/details/Notices.tsx
@@ -114,7 +114,7 @@ export default function Notices({
 
   function renderNotice(notice: Notice, index: number): React.JSX.Element {
     return (
-      <Grid key={index} sx={getGridSx(index)} item xs={12}>
+      <Grid size={12} key={index} sx={getGridSx(index)}>
         <Alert
           severity={toSeverity(notice.type)}
           sx={{
@@ -147,7 +147,7 @@ export default function Notices({
   return (
     <Grid container>
       {renderNotice(notices[0], 0)}
-      <Grid item xs={12}>
+      <Grid size={12}>
         <Collapse in={noticesExpanded}>
           <Grid container>
             {notices.slice(1).map((n, i) => renderNotice(n, i + 1))}
diff --git a/web/src/app/editor/ExprEditor.tsx b/web/src/app/editor/ExprEditor.tsx
index db06c81e14..374711658d 100644
--- a/web/src/app/editor/ExprEditor.tsx
+++ b/web/src/app/editor/ExprEditor.tsx
@@ -20,7 +20,7 @@ export default function ExprEditor(props: ExprEditorProps): React.ReactNode {
 
   return (
     <Grid container>
-      <Grid item flexGrow={1}>
+      <Grid flexGrow={1}>
         <CodeMirror
           value={props.value}
           theme={theme}
diff --git a/web/src/app/editor/GraphQLEditor.tsx b/web/src/app/editor/GraphQLEditor.tsx
index dfd5e10f82..d810d431f9 100644
--- a/web/src/app/editor/GraphQLEditor.tsx
+++ b/web/src/app/editor/GraphQLEditor.tsx
@@ -30,7 +30,7 @@ export default function GraphQLEditor(
 
   return (
     <Grid container>
-      <Grid item flexGrow={1}>
+      <Grid flexGrow={1}>
         <CodeMirror
           value={props.value}
           theme={theme}
@@ -46,7 +46,7 @@ export default function GraphQLEditor(
         />
       </Grid>
       {!props.readOnly && (
-        <Grid item>
+        <Grid >
           <IconButton
             onClick={() => {
               props.onChange(print(parse(props.value)) + '\n')
diff --git a/web/src/app/escalation-policies/PolicyForm.tsx b/web/src/app/escalation-policies/PolicyForm.tsx
index 3c37522b8d..79d9be5536 100644
--- a/web/src/app/escalation-policies/PolicyForm.tsx
+++ b/web/src/app/escalation-policies/PolicyForm.tsx
@@ -25,7 +25,7 @@ function PolicyForm(props: PolicyFormProps): React.JSX.Element {
   return (
     <FormContainer optionalLabels {...props}>
       <Grid container spacing={2}>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <FormField
             component={TextField}
             disabled={props.disabled}
@@ -37,7 +37,7 @@ function PolicyForm(props: PolicyFormProps): React.JSX.Element {
             value={props.value.name}
           />
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <FormField
             component={TextField}
             disabled={props.disabled}
@@ -49,7 +49,7 @@ function PolicyForm(props: PolicyFormProps): React.JSX.Element {
             value={props.value.description}
           />
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <FormField
             component={MaterialSelect}
             disabled={props.disabled}
diff --git a/web/src/app/escalation-policies/PolicyStepForm.tsx b/web/src/app/escalation-policies/PolicyStepForm.tsx
index 7f7f6ab5e4..57f9f6c9ff 100644
--- a/web/src/app/escalation-policies/PolicyStepForm.tsx
+++ b/web/src/app/escalation-policies/PolicyStepForm.tsx
@@ -79,9 +79,9 @@ export default function PolicyStepForm(props: PolicyStepFormProps): ReactNode {
       optionalLabels
     >
       <Grid container spacing={2}>
-        <Grid container spacing={1} item xs={12} sx={{ p: 1 }}>
+        <Grid size={12} container spacing={1} sx={{ p: 1 }}>
           {props.value.actions.map((a) => (
-            <Grid item key={JSON.stringify(a.values)}>
+            <Grid key={JSON.stringify(a.values)}>
               <DestinationInputChip
                 value={a}
                 onDelete={props.disabled ? undefined : () => handleDelete(a)}
@@ -89,14 +89,14 @@ export default function PolicyStepForm(props: PolicyStepFormProps): ReactNode {
             </Grid>
           ))}
           {props.value.actions.length === 0 && (
-            <Grid item xs={12}>
+            <Grid size={12}>
               <Typography variant='body2' color='textSecondary'>
                 No destinations
               </Typography>
             </Grid>
           )}
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <TextField
             select
             fullWidth
@@ -116,7 +116,7 @@ export default function PolicyStepForm(props: PolicyStepFormProps): ReactNode {
             )}
           </TextField>
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <DestinationField
             destType={destType}
             value={args}
@@ -130,7 +130,7 @@ export default function PolicyStepForm(props: PolicyStepFormProps): ReactNode {
             )}
           />
         </Grid>
-        <Grid container item xs={12} justifyContent='flex-end'>
+        <Grid size={12} container justifyContent='flex-end'>
           {errs.hasErrors() && renderErrors(errs.remaining())}
           <LoadingButton
             variant='contained'
@@ -173,7 +173,7 @@ export default function PolicyStepForm(props: PolicyStepFormProps): ReactNode {
           </LoadingButton>
         </Grid>
 
-        <Grid item xs={12}>
+        <Grid size={12}>
           <FormField
             component={NumberField}
             disabled={props.disabled}
diff --git a/web/src/app/escalation-policies/stepUtil.tsx b/web/src/app/escalation-policies/stepUtil.tsx
index 57a63696fb..6232a5af9e 100644
--- a/web/src/app/escalation-policies/stepUtil.tsx
+++ b/web/src/app/escalation-policies/stepUtil.tsx
@@ -27,7 +27,7 @@ export function renderChipsDest(_a: Destination[]): ReactElement {
 
   const items = actions.map((a, idx) => {
     return (
-      <Grid item key={idx}>
+      <Grid key={idx}>
         <DestinationChip {...a.displayInfo} />
       </Grid>
     )
diff --git a/web/src/app/forms/FormField.jsx b/web/src/app/forms/FormField.jsx
index ae05e865fa..24b055148e 100644
--- a/web/src/app/forms/FormField.jsx
+++ b/web/src/app/forms/FormField.jsx
@@ -114,10 +114,10 @@ export function FormField(props) {
   function charCountWrapper(component, count, fieldName) {
     return (
       <Grid container spacing={2}>
-        <Grid item xs={10}>
+        <Grid size={10}>
           {component}
         </Grid>
-        <Grid item xs={2}>
+        <Grid size={2}>
           <FormHelperText style={{ textAlign: 'right' }}>
             {value[fieldName].length}/{count}
           </FormHelperText>
diff --git a/web/src/app/forms/HelperText.tsx b/web/src/app/forms/HelperText.tsx
index 03603c64d6..35810e3b91 100644
--- a/web/src/app/forms/HelperText.tsx
+++ b/web/src/app/forms/HelperText.tsx
@@ -50,10 +50,10 @@ export function HelperText(props: HelperTextProps): React.ReactNode {
   if (props.maxLength) {
     return (
       <Grid container spacing={2} sx={{ ml: 0 }}>
-        <Grid item xs={10}>
+        <Grid size={10}>
           <FormHelperText component='span'>{content}</FormHelperText>
         </Grid>
-        <Grid item xs={2}>
+        <Grid size={2}>
           <FormHelperText style={{ textAlign: 'right' }}>
             {props.value?.length || 0}/{props.maxLength}
           </FormHelperText>
diff --git a/web/src/app/lists/ControlledPaginatedList.tsx b/web/src/app/lists/ControlledPaginatedList.tsx
index 5dd3eaef2c..a489690452 100644
--- a/web/src/app/lists/ControlledPaginatedList.tsx
+++ b/web/src/app/lists/ControlledPaginatedList.tsx
@@ -143,7 +143,6 @@ export default function ControlledPaginatedList(
     return (
       <Grid
         aria-label='List Checkbox Controls'
-        item
         container
         sx={{
           alignItems: 'center',
@@ -151,9 +150,9 @@ export default function ControlledPaginatedList(
           width: 'fit-content',
         }}
       >
-        <Grid item>
+        <Grid >
           <Checkbox
-            sx={{ mt: '4px', mb: '4px' }}
+            sx={{ mt: '4px', mb: '4px', ml: '1em' }}
             checked={
               itemIDs.length === checkedItems.length && itemIDs.length > 0
             }
@@ -163,14 +162,10 @@ export default function ControlledPaginatedList(
             }
             onChange={handleToggleSelectAll}
             disabled={items.length === 0}
-            sx={{
-              ml: '1em', // align with listItem icons
-            }}
           />
         </Grid>
 
         <Grid
-          item
           sx={{
             alignItems: 'center',
             display: 'flex',
@@ -197,7 +192,7 @@ export default function ControlledPaginatedList(
 
         {checkedItems.length > 0 &&
           checkboxActions.map((a, idx) => (
-            <Grid item key={idx}>
+            <Grid key={idx}>
               <Tooltip
                 title={a.label}
                 placement='bottom'
@@ -255,24 +250,22 @@ export default function ControlledPaginatedList(
 
   return (
     <React.Fragment>
-      <Grid
+      <Grid size={12}
         container
-        item
-        xs={12}
         spacing={2}
         justifyContent='flex-start'
         alignItems='center'
       >
         {renderActions()}
         {!noSearch && (
-          <Grid item>
+          <Grid >
             <Search endAdornment={searchAdornment} />
           </Grid>
         )}
-        {secondaryActions && <Grid item>{secondaryActions}</Grid>}
+        {secondaryActions && <Grid >{secondaryActions}</Grid>}
 
         {!hideCreate && renderCreateDialog && !isMobile && (
-          <Grid item sx={{ ml: 'auto' }}>
+          <Grid sx={{ ml: 'auto' }}>
             <Button
               variant='contained'
               startIcon={<Add />}
@@ -285,7 +278,7 @@ export default function ControlledPaginatedList(
         )}
       </Grid>
 
-      <Grid item xs={12}>
+      <Grid size={12}>
         <Card>
           {listHeader}
           <PaginatedList key={urlKey} {...listProps} items={getItems()} />
diff --git a/web/src/app/lists/ListPageControls.tsx b/web/src/app/lists/ListPageControls.tsx
index 6cda83caeb..0569d9944b 100644
--- a/web/src/app/lists/ListPageControls.tsx
+++ b/web/src/app/lists/ListPageControls.tsx
@@ -58,18 +58,16 @@ export default function ListPageControls(
 
   return (
     <Grid container spacing={2}>
-      <Grid
+      <Grid size={12}
         container
-        item
-        xs={12}
         spacing={2}
         justifyContent='flex-start'
         alignItems='center'
       >
-        {props.slots.search && <Grid item>{props.slots.search}</Grid>}
+        {props.slots.search && <Grid >{props.slots.search}</Grid>}
 
         {showCreate && !isMobile && (
-          <Grid item sx={{ ml: 'auto' }}>
+          <Grid sx={{ ml: 'auto' }}>
             <Button
               variant='contained'
               startIcon={<Add />}
@@ -81,13 +79,11 @@ export default function ListPageControls(
         )}
       </Grid>
 
-      <Grid item xs={12}>
+      <Grid size={12}>
         <Card data-cy='paginated-list'>{props.slots.list}</Card>
       </Grid>
 
-      <Grid
-        item // item within main render grid
-        xs={12}
+      <Grid size={12} // within main render grid
         container // container for control items
         spacing={1}
         justifyContent='flex-end'
@@ -101,7 +97,7 @@ export default function ListPageControls(
           },
         })}
       >
-        <Grid item>
+        <Grid >
           <IconButton
             title='back page'
             data-cy='back-button'
@@ -114,7 +110,7 @@ export default function ListPageControls(
             <ChevronLeft />
           </IconButton>
         </Grid>
-        <Grid item>
+        <Grid >
           <IconButton
             title='next page'
             data-cy='next-button'
diff --git a/web/src/app/lists/PageControls.tsx b/web/src/app/lists/PageControls.tsx
index d296678e74..882aa3df80 100644
--- a/web/src/app/lists/PageControls.tsx
+++ b/web/src/app/lists/PageControls.tsx
@@ -42,9 +42,7 @@ export function PageControls(props: {
   const onNext = hasNextPage ? handleNextPage : undefined
 
   return (
-    <Grid
-      item // item within main render grid
-      xs={12}
+    <Grid size={12} // within main render grid
       container // container for control items
       spacing={1}
       justifyContent='flex-end'
@@ -58,7 +56,7 @@ export function PageControls(props: {
         },
       })}
     >
-      <Grid item>
+      <Grid >
         <IconButton
           title='back page'
           data-cy='back-button'
@@ -71,7 +69,7 @@ export function PageControls(props: {
           <ChevronLeft />
         </IconButton>
       </Grid>
-      <Grid item>
+      <Grid >
         <IconButton
           title='next page'
           data-cy='next-button'
diff --git a/web/src/app/lists/QueryList.tsx b/web/src/app/lists/QueryList.tsx
index cf707789bc..0e3f8383a6 100644
--- a/web/src/app/lists/QueryList.tsx
+++ b/web/src/app/lists/QueryList.tsx
@@ -204,7 +204,7 @@ export default function QueryList(props: QueryListProps): React.JSX.Element {
     }
 
     return (
-      <Grid item xs={12}>
+      <Grid size={12}>
         <Card>
           <ListHeader
             cardHeader={props.cardHeader}
diff --git a/web/src/app/localdev/LocalDev.tsx b/web/src/app/localdev/LocalDev.tsx
index 77e49037ce..a250a8bc7f 100644
--- a/web/src/app/localdev/LocalDev.tsx
+++ b/web/src/app/localdev/LocalDev.tsx
@@ -29,7 +29,7 @@ export default function LocalDev(): React.JSX.Element {
 
   function DevTool(props: DevToolProps): React.JSX.Element {
     return (
-      <Grid item xs={6}>
+      <Grid size={6}>
         <Card>
           <CardHeader title={props.name} />
           <CardContent>
diff --git a/web/src/app/main/App.tsx b/web/src/app/main/App.tsx
index 78fbd0a795..80c0e08dd7 100644
--- a/web/src/app/main/App.tsx
+++ b/web/src/app/main/App.tsx
@@ -134,7 +134,7 @@ export default function App(): React.JSX.Element {
                     justifyContent='center'
                     sx={classes.mainContainer}
                   >
-                    <Grid sx={classes.containerClass} item>
+                    <Grid sx={classes.containerClass} >
                       <AppRoutes />
                     </Grid>
                   </Grid>
diff --git a/web/src/app/main/NavBar.tsx b/web/src/app/main/NavBar.tsx
index 19562ce4b7..d01819a875 100644
--- a/web/src/app/main/NavBar.tsx
+++ b/web/src/app/main/NavBar.tsx
@@ -50,7 +50,7 @@ export default function NavBar(): React.JSX.Element {
           justifyContent: 'left',
         }}
       >
-        <a href='/' aria-hidden style={{ ...theme.mixins.toolbar, paddingLeft: 8 }}>
+        <a href='/' aria-hidden style={{ ...(theme.mixins.toolbar as React.CSSProperties), paddingLeft: 8 }}>
           {logo}
         </a>
         <Typography variant='h5' sx={{ pl: 1 }}>
diff --git a/web/src/app/main/components/AuthLink.tsx b/web/src/app/main/components/AuthLink.tsx
index bf07db792d..c090b51332 100644
--- a/web/src/app/main/components/AuthLink.tsx
+++ b/web/src/app/main/components/AuthLink.tsx
@@ -137,17 +137,17 @@ export default function AuthLink(): React.JSX.Element | null {
       }
       form={
         <Grid container spacing={2}>
-          <Grid item xs={12}>
+          <Grid size={12}>
             <Typography>
               Clicking confirm will link the current GoAlert user{' '}
               <b>{userName}</b> with:
             </Typography>
           </Grid>
-          <Grid item xs={12}>
+          <Grid size={12}>
             <Typography>{data.linkAccountInfo.userDetails}.</Typography>
           </Grid>
           {alertAction && (
-            <Grid item xs={12}>
+            <Grid size={12}>
               <Typography>After linking, {alertAction}</Typography>
             </Grid>
           )}
diff --git a/web/src/app/main/components/Login.tsx b/web/src/app/main/components/Login.tsx
index ad052fbb4c..aad75404d8 100644
--- a/web/src/app/main/components/Login.tsx
+++ b/web/src/app/main/components/Login.tsx
@@ -107,7 +107,7 @@ export default function Login(): React.JSX.Element {
     } = field
 
     return (
-      <Grid key={id} item xs={12}>
+      <Grid size={12} key={id}>
         <TextField
           label={label}
           required={required}
@@ -127,7 +127,7 @@ export default function Login(): React.JSX.Element {
   ): React.JSX.Element | undefined {
     if (idx + 1 < len) {
       return (
-        <Grid item xs={12} style={loginStyles.hasNext}>
+        <Grid size={12} style={loginStyles.hasNext}>
           <Divider sx={loginStyles.divider} />
           <Typography sx={loginStyles.or}>or</Typography>
           <Divider sx={loginStyles.divider} />
@@ -180,7 +180,7 @@ export default function Login(): React.JSX.Element {
       form = (
         <Grid container spacing={2}>
           {fields.map((field: Field) => renderField(field))}
-          <Grid item xs={12}>
+          <Grid size={12}>
             {loginButton}
           </Grid>
         </Grid>
@@ -191,7 +191,7 @@ export default function Login(): React.JSX.Element {
 
     return (
       <React.Fragment key={idx}>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <form action={url} method='post' id={'auth-' + id}>
             {form}
           </form>
@@ -205,7 +205,7 @@ export default function Login(): React.JSX.Element {
   let errorJSX = null
   if (error) {
     errorJSX = (
-      <Grid item xs={12}>
+      <Grid size={12}>
         <Typography variant='subtitle1' sx={loginStyles.error}>
           {error.toString()}
         </Typography>
@@ -227,8 +227,8 @@ export default function Login(): React.JSX.Element {
           <CardContent>
             <Grid container spacing={2} style={loginStyles.gridContainer}>
               <Grid container sx={{ justifyContent: 'center' }}>
-                <Grid item>{logo}</Grid>
-                <Grid item sx={{ display: 'flex', alignItems: 'center' }}>
+                <Grid >{logo}</Grid>
+                <Grid sx={{ display: 'flex', alignItems: 'center' }}>
                   <Typography variant='h5' sx={{ pl: 1 }}>
                     <b>GoAlert</b>
                   </Typography>
diff --git a/web/src/app/main/components/UserSettingsPopover.tsx b/web/src/app/main/components/UserSettingsPopover.tsx
index f6d0210fb4..f5972a9b25 100644
--- a/web/src/app/main/components/UserSettingsPopover.tsx
+++ b/web/src/app/main/components/UserSettingsPopover.tsx
@@ -48,22 +48,22 @@ export default function UserSettingsPopover(): React.JSX.Element {
         data-cy='manage-profile'
       >
         <Grid container direction='column' spacing={2}>
-          <Grid item>
+          <Grid >
             <Typography variant='h5' component='span'>
               Hello, {firstName}!
             </Typography>
           </Grid>
-          <Grid item>
+          <Grid >
             <AppLink to='/profile' style={{ textDecoration: 'none' }}>
               <Button variant='outlined' onClick={() => setAnchorEl(null)}>
                 Manage Profile
               </Button>
             </AppLink>
           </Grid>
-          <Grid item>
+          <Grid >
             <ThemePicker />
           </Grid>
-          <Grid item>
+          <Grid >
             {feedbackEnabled && (
               <AppLink
                 newTab
@@ -80,7 +80,7 @@ export default function UserSettingsPopover(): React.JSX.Element {
               </AppLink>
             )}
           </Grid>
-          <Grid item>
+          <Grid >
             <Button
               variant='text'
               startIcon={<Logout />}
diff --git a/web/src/app/rotations/RotationForm.tsx b/web/src/app/rotations/RotationForm.tsx
index 9b8d13ea13..f10f684a2a 100644
--- a/web/src/app/rotations/RotationForm.tsx
+++ b/web/src/app/rotations/RotationForm.tsx
@@ -38,7 +38,7 @@ export default function RotationForm(
   return (
     <FormContainer optionalLabels {...props}>
       <Grid container spacing={2}>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <FormField
             fullWidth
             component={TextField}
@@ -47,7 +47,7 @@ export default function RotationForm(
             required
           />
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <FormField
             fullWidth
             component={TextField}
@@ -57,7 +57,7 @@ export default function RotationForm(
             required
           />
         </Grid>
-        <Grid item xs={6}>
+        <Grid size={6}>
           <FormField
             fullWidth
             component={TextField}
@@ -73,7 +73,7 @@ export default function RotationForm(
             ))}
           </FormField>
         </Grid>
-        <Grid item xs={6}>
+        <Grid size={6}>
           <FormField
             fullWidth
             component={NumberField}
@@ -85,7 +85,7 @@ export default function RotationForm(
             max={9000}
           />
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <FormField
             fullWidth
             component={TimeZoneSelect}
@@ -97,7 +97,7 @@ export default function RotationForm(
           />
         </Grid>
 
-        <Grid item xs={12}>
+        <Grid size={12}>
           <FormField
             fullWidth
             component={ISODateTimePicker}
@@ -129,7 +129,7 @@ export default function RotationForm(
         </Grid>
         <Suspense
           fallback={
-            <Grid item xs={12} sx={{ height: '7rem' }}>
+            <Grid size={12} sx={{ height: '7rem' }}>
               <Spinner text='Calculating...' />
             </Grid>
           }
diff --git a/web/src/app/rotations/RotationFormHandoffTimes.tsx b/web/src/app/rotations/RotationFormHandoffTimes.tsx
index 5008c52ad0..e9ac35095d 100644
--- a/web/src/app/rotations/RotationFormHandoffTimes.tsx
+++ b/web/src/app/rotations/RotationFormHandoffTimes.tsx
@@ -52,7 +52,7 @@ export default function RotationFormHandoffTimes({
   const nextHandoffs = isCalculating ? [] : data.calcRotationHandoffTimes
 
   return (
-    <Grid item xs={12} sx={{ height: '7rem' }}>
+    <Grid size={12} sx={{ height: '7rem' }}>
       <Typography variant='body2' sx={{ fontWeight: 'bolder' }}>
         Upcoming Handoff times:
       </Typography>
diff --git a/web/src/app/schedules/ScheduleForm.tsx b/web/src/app/schedules/ScheduleForm.tsx
index 3d8d5b71b6..6fc41c63c1 100644
--- a/web/src/app/schedules/ScheduleForm.tsx
+++ b/web/src/app/schedules/ScheduleForm.tsx
@@ -31,7 +31,7 @@ export default function ScheduleForm(
   return (
     <FormContainer optionalLabels {...props}>
       <Grid container spacing={2}>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <FormField
             fullWidth
             component={TextField}
@@ -40,7 +40,7 @@ export default function ScheduleForm(
             required
           />
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <FormField
             fullWidth
             component={TextField}
@@ -49,7 +49,7 @@ export default function ScheduleForm(
             label='Description'
           />
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <FormField
             fullWidth
             component={TimeZoneSelect}
diff --git a/web/src/app/schedules/ScheduleOverrideDialog.jsx b/web/src/app/schedules/ScheduleOverrideDialog.jsx
index 7d4c3bce54..aefb731e6e 100644
--- a/web/src/app/schedules/ScheduleOverrideDialog.jsx
+++ b/web/src/app/schedules/ScheduleOverrideDialog.jsx
@@ -81,7 +81,7 @@ export default function ScheduleOverrideDialog(props) {
         <React.Fragment>
           {/* Step 0: Choose override variant page */}
           {step === 0 && (
-            <Grid item xs={12}>
+            <Grid size={12}>
               <RadioGroup
                 required
                 aria-label='Choose an override action'
diff --git a/web/src/app/schedules/ScheduleOverrideForm.tsx b/web/src/app/schedules/ScheduleOverrideForm.tsx
index 4757ee6bc7..4c66c34440 100644
--- a/web/src/app/schedules/ScheduleOverrideForm.tsx
+++ b/web/src/app/schedules/ScheduleOverrideForm.tsx
@@ -98,7 +98,7 @@ export default function ScheduleOverrideForm(
     >
       <Grid container spacing={2}>
         {remove && (
-          <Grid item xs={12}>
+          <Grid size={12}>
             <FormField
               fullWidth
               component={UserSelect}
@@ -112,7 +112,7 @@ export default function ScheduleOverrideForm(
           </Grid>
         )}
         {add && (
-          <Grid item xs={12}>
+          <Grid size={12}>
             <FormField
               fullWidth
               component={UserSelect}
@@ -122,12 +122,12 @@ export default function ScheduleOverrideForm(
             />
           </Grid>
         )}
-        <Grid item xs={12}>
+        <Grid size={12}>
           <Typography color='textSecondary' sx={{ fontStyle: 'italic' }}>
             Times shown in schedule timezone ({zone || '...'})
           </Typography>
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <FormField
             fullWidth
             component={ISODateTimePicker}
@@ -140,7 +140,7 @@ export default function ScheduleOverrideForm(
             hint={isLocalZone ? '' : fmtLocal(value.start)}
           />
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <FormField
             fullWidth
             component={ISODateTimePicker}
diff --git a/web/src/app/schedules/ScheduleOverrideList.jsx b/web/src/app/schedules/ScheduleOverrideList.jsx
index 0c16bbd171..a45744a879 100644
--- a/web/src/app/schedules/ScheduleOverrideList.jsx
+++ b/web/src/app/schedules/ScheduleOverrideList.jsx
@@ -174,7 +174,7 @@ export default function ScheduleOverrideList({ scheduleID }) {
               headerAction={
                 <React.Fragment>
                   <FilterContainer onReset={() => resetFilter()}>
-                    <Grid item xs={12}>
+                    <Grid size={12}>
                       <FormControlLabel
                         control={
                           <Switch
@@ -186,7 +186,7 @@ export default function ScheduleOverrideList({ scheduleID }) {
                         label='Show past overrides'
                       />
                     </Grid>
-                    <Grid item xs={12}>
+                    <Grid size={12}>
                       <UserSelect
                         label='Filter users...'
                         multiple
diff --git a/web/src/app/schedules/ScheduleRuleForm.tsx b/web/src/app/schedules/ScheduleRuleForm.tsx
index f122ddcf46..fd1537c426 100644
--- a/web/src/app/schedules/ScheduleRuleForm.tsx
+++ b/web/src/app/schedules/ScheduleRuleForm.tsx
@@ -163,12 +163,11 @@ export default function ScheduleRuleForm(
           <TableCell
             key={dayIdx}
             padding='checkbox'
-            sx={classes.noBorder}
-            sx={{ display: { xs: 'none', md: 'table-cell' } }}
+            sx={[classes.noBorder, { display: { xs: 'none', md: 'table-cell' } }]}
           >
             <FormField
               noError
-              sx={classes.noPadding}
+              sx={[classes.noPadding, { padding: 0 }]}
               component={Checkbox}
               checkbox
               disabled={disabled}
@@ -179,8 +178,7 @@ export default function ScheduleRuleForm(
           </TableCell>
         ))}
         <TableCell
-          sx={[classes.dayFilter, classes.noBorder]}
-          sx={{ display: { xs: 'table-cell', md: 'none' } }}
+          sx={[classes.dayFilter, classes.noBorder, { display: { xs: 'table-cell', md: 'none' } }]}
         >
           <FormField
             fullWidth
@@ -240,7 +238,7 @@ export default function ScheduleRuleForm(
       optionalLabels
     >
       <Grid container spacing={2}>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <FormField
             fullWidth
             required
@@ -250,12 +248,12 @@ export default function ScheduleRuleForm(
             name='targetID'
           />
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <Typography color='textSecondary' sx={{ fontStyle: 'italic' }}>
             Times shown in schedule timezone ({zone || '...'})
           </Typography>
         </Grid>
-        <Grid item xs={12} style={{ paddingTop: 0 }}>
+        <Grid size={12} style={{ paddingTop: 0 }}>
           <Table data-cy='target-rules' sx={classes.table}>
             <TableHead>
               <TableRow>
@@ -279,8 +277,7 @@ export default function ScheduleRuleForm(
                   </TableCell>
                 ))}
                 <TableCell
-                  sx={[classes.dayFilter, classes.noBorder]}
-                  sx={{ display: { xs: 'table-cell', md: 'none' } }}
+                  sx={[classes.dayFilter, classes.noBorder, { display: { xs: 'table-cell', md: 'none' } }]}
                 >
                   Days
                 </TableCell>
diff --git a/web/src/app/schedules/ScheduleShiftList.tsx b/web/src/app/schedules/ScheduleShiftList.tsx
index a7b9b83924..f6cf6d3980 100644
--- a/web/src/app/schedules/ScheduleShiftList.tsx
+++ b/web/src/app/schedules/ScheduleShiftList.tsx
@@ -60,15 +60,16 @@ const durString = (dur: Duration): string => {
 }
 
 import TempSchedDialog from './temp-sched/TempSchedDialog'
+
+interface ScheduleShiftListProps {
   scheduleID: string
 }
 
 const context = { suspense: false }
 
-interface ScheduleShiftListProps {
+function ScheduleShiftList({
   scheduleID,
 }: ScheduleShiftListProps): JSX.Element {
-function ScheduleShiftList({
   const isMobile = useIsWidthDown('md')
 
   const [specifyDuration, setSpecifyDuration] = useState(false)
@@ -336,7 +337,7 @@ function ScheduleShiftList({
                   setSpecifyDuration(false)
                 }}
               >
-                <Grid item xs={12}>
+                <Grid size={12}>
                   <FormControlLabel
                     control={
                       <Switch
@@ -348,7 +349,7 @@ function ScheduleShiftList({
                     label='Active shifts only'
                   />
                 </Grid>
-                <Grid item xs={12}>
+                <Grid size={12}>
                   <ISODatePicker
                     style={{ width: '100%' }}
                     disabled={activeOnly}
@@ -359,10 +360,10 @@ function ScheduleShiftList({
                     fullWidth
                   />
                 </Grid>
-                <Grid item xs={12}>
+                <Grid size={12}>
                   {renderDurationSelector()}
                 </Grid>
-                <Grid item xs={12}>
+                <Grid size={12}>
                   <UserSelect
                     label='Filter users...'
                     multiple
diff --git a/web/src/app/schedules/calendar-subscribe/CalendarSubscribeForm.tsx b/web/src/app/schedules/calendar-subscribe/CalendarSubscribeForm.tsx
index cb9dd5c31d..9057d2826e 100644
--- a/web/src/app/schedules/calendar-subscribe/CalendarSubscribeForm.tsx
+++ b/web/src/app/schedules/calendar-subscribe/CalendarSubscribeForm.tsx
@@ -31,7 +31,7 @@ export default function CalendarSubscribeForm(
       value={props.value}
     >
       <Grid container spacing={2}>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <FormField
             fullWidth
             component={TextField}
@@ -41,7 +41,7 @@ export default function CalendarSubscribeForm(
             required
           />
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <FormField
             component={ScheduleSelect}
             disabled={props.scheduleReadOnly}
@@ -51,7 +51,7 @@ export default function CalendarSubscribeForm(
             name='scheduleID'
           />
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <FormControlLabel
             control={
               <FormField component={Checkbox} checkbox name='fullSchedule' />
diff --git a/web/src/app/schedules/calendar-subscribe/CalendarSuccessForm.tsx b/web/src/app/schedules/calendar-subscribe/CalendarSuccessForm.tsx
index d59370c588..915669ba16 100644
--- a/web/src/app/schedules/calendar-subscribe/CalendarSuccessForm.tsx
+++ b/web/src/app/schedules/calendar-subscribe/CalendarSuccessForm.tsx
@@ -13,7 +13,7 @@ export default function CalenderSuccessForm({
   const convertedUrl = url.replace(/^https?:\/\//, 'webcal://')
   return (
     <Grid container spacing={2}>
-      <Grid item xs={12} style={{ display: 'flex', justifyContent: 'center' }}>
+      <Grid size={12} style={{ display: 'flex', justifyContent: 'center' }}>
         <Button
           variant='contained'
           href={convertedUrl}
@@ -24,7 +24,7 @@ export default function CalenderSuccessForm({
           <OpenInNewIcon fontSize='small' sx={{ ml: 1 }} />
         </Button>
       </Grid>
-      <Grid item xs={12}>
+      <Grid size={12}>
         <Typography>
           <CopyText title={url} value={url} placement='bottom' asURL />
         </Typography>
diff --git a/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsForm.tsx b/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsForm.tsx
index 4ba1d7bc96..84eedc3d2f 100644
--- a/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsForm.tsx
+++ b/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsForm.tsx
@@ -86,7 +86,7 @@ export default function ScheduleOnCallNotificationsForm(
   return (
     <FormContainer {...formProps} optionalLabels>
       <Grid container spacing={2} direction='column'>
-        <Grid item>
+        <Grid >
           <RadioGroup
             name='ruleType'
             value={ruleType}
@@ -116,14 +116,14 @@ export default function ScheduleOnCallNotificationsForm(
           </RadioGroup>
         </Grid>
         {props.value.time && (
-          <Grid item xs={12}>
+          <Grid size={12}>
             <Typography color='textSecondary' sx={{ fontStyle: 'italic' }}>
               Times shown in schedule timezone ({zone})
             </Typography>
           </Grid>
         )}
-        <Grid item container spacing={2} alignItems='center'>
-          <Grid item xs={12} sm={5} md={4}>
+        <Grid container spacing={2} alignItems='center'>
+          <Grid size={{ xs: 12, sm: 5, md: 4 }}>
             <FormField
               component={ISOTimePicker}
               timeZone={zone}
@@ -140,14 +140,14 @@ export default function ScheduleOnCallNotificationsForm(
               }
             />
           </Grid>
-          <Grid item xs={12} sm={7} md={8}>
+          <Grid size={{ xs: 12, sm: 7, md: 8 }}>
             <Grid container justifyContent='space-between'>
               {days.map((day, i) => (
                 <FormControlLabel
                   key={i}
                   label={day}
                   labelPlacement='top'
-                  slotProps={{ label: { sx: { margin: 0 } } }}
+                  slotProps={{ typography: { sx: { margin: 0 } } }}
                   control={
                     <FormField
                       noError
@@ -162,7 +162,7 @@ export default function ScheduleOnCallNotificationsForm(
             </Grid>
           </Grid>
         </Grid>
-        <Grid item xs={12} sm={12} md={6}>
+        <Grid size={{ xs: 12, sm: 12, md: 6 }}>
           <TextField
             fullWidth
             name='dest.type'
@@ -190,7 +190,7 @@ export default function ScheduleOnCallNotificationsForm(
             )}
           </TextField>
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <DestinationField
             disabled={props.disabled}
             destType={props.value.dest.type}
@@ -204,7 +204,7 @@ export default function ScheduleOnCallNotificationsForm(
             }
           />
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <Typography variant='caption'>
             {currentType?.userDisclaimer}
           </Typography>
diff --git a/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsList.tsx b/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsList.tsx
index f29c8c4056..23f3d9e022 100644
--- a/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsList.tsx
+++ b/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsList.tsx
@@ -1,5 +1,5 @@
 import React, { Suspense, useState } from 'react'
-import { Button, Grid, Card, Typography, Tooltip, Theme } from '@mui/material'
+import { Button, Grid, Card, Typography, Tooltip } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
 import FlatList from '../../lists/FlatList'
 import OtherActions from '../../util/OtherActions'
@@ -62,7 +62,7 @@ export default function ScheduleOnCallNotificationsList({
   if (q.error || !q.data) {
     return (
       <Grid container spacing={2}>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <Card>
             <FlatList
               headerNote={
@@ -94,7 +94,7 @@ export default function ScheduleOnCallNotificationsList({
   return (
     <React.Fragment>
       <Grid container spacing={2}>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <Card>
             <FlatList
               headerNote={`Showing times for schedule in ${timeZone}.`}
diff --git a/web/src/app/schedules/temp-sched/TempSchedAddNewShift.tsx b/web/src/app/schedules/temp-sched/TempSchedAddNewShift.tsx
index e257383c95..19407c9f55 100644
--- a/web/src/app/schedules/temp-sched/TempSchedAddNewShift.tsx
+++ b/web/src/app/schedules/temp-sched/TempSchedAddNewShift.tsx
@@ -161,10 +161,10 @@ export default function TempSchedAddNewShift({
         onChange={(val: Shift) => setShift(val)}
       >
         <Grid container spacing={2}>
-          <Grid item xs={12}>
+          <Grid size={12}>
             <Typography color='textSecondary'>Add Shift</Typography>
           </Grid>
-          <Grid item xs={12}>
+          <Grid size={12}>
             {/* Use a direct component instead of FormField for UserSelect */}
             <UserSelect
               fullWidth
@@ -175,7 +175,7 @@ export default function TempSchedAddNewShift({
               onChange={(newValue: string[]) => setSelectedUsers(newValue)}
             />
           </Grid>
-          <Grid item xs={12}>
+          <Grid size={12}>
             <FormControlLabel
               control={<Checkbox checked={custom} data-cy='toggle-custom' />}
               label={
@@ -186,7 +186,7 @@ export default function TempSchedAddNewShift({
               onChange={() => setCustom(!custom)}
             />
           </Grid>
-          <Grid item xs={6}>
+          <Grid size={6}>
             <FormField
               fullWidth
               component={ISODateTimePicker}
@@ -213,7 +213,7 @@ export default function TempSchedAddNewShift({
               hint={isLocalZone ? '' : fmtLocal(value?.start)}
             />
           </Grid>
-          <Grid item xs={6}>
+          <Grid size={6}>
             {manualEntry ? (
               <FormField
                 fullWidth
@@ -288,7 +288,7 @@ export default function TempSchedAddNewShift({
               />
             )}
           </Grid>
-          <Grid item xs={12} container justifyContent='flex-end'>
+          <Grid size={12} container justifyContent='flex-end'>
             <Button
               data-cy='add-shift'
               color='secondary'
diff --git a/web/src/app/schedules/temp-sched/TempSchedConfirmation.tsx b/web/src/app/schedules/temp-sched/TempSchedConfirmation.tsx
index 51ac8f9819..f1d568ad3f 100644
--- a/web/src/app/schedules/temp-sched/TempSchedConfirmation.tsx
+++ b/web/src/app/schedules/temp-sched/TempSchedConfirmation.tsx
@@ -44,7 +44,7 @@ export default function TempSchedConfirmation({
 
   return (
     <Grid container spacing={4}>
-      <Grid item xs={6}>
+      <Grid size={6}>
         <Typography component='h3' sx={{ fontSize: '1.15rem' }}>
           Current Temporary Schedule
         </Typography>
@@ -58,7 +58,7 @@ export default function TempSchedConfirmation({
           compareRemovals={value.shifts}
         />
       </Grid>
-      <Grid item xs={6}>
+      <Grid size={6}>
         <Typography component='h3' sx={{ fontSize: '1.15rem' }}>
           Proposed Changes
         </Typography>
diff --git a/web/src/app/schedules/temp-sched/TempSchedDialog.tsx b/web/src/app/schedules/temp-sched/TempSchedDialog.tsx
index 7699bbfceb..64f0caf22f 100644
--- a/web/src/app/schedules/temp-sched/TempSchedDialog.tsx
+++ b/web/src/app/schedules/temp-sched/TempSchedDialog.tsx
@@ -315,22 +315,19 @@ export default function TempSchedDialog({
                 justifyContent='space-between'
               >
                 {/* left pane */}
-                <Grid
-                  item
-                  xs={12}
-                  md={6}
+                <Grid size={{ xs: 12, md: 6 }}
                   container
                   alignContent='flex-start'
                   spacing={2}
                 >
-                  <Grid item xs={12}>
+                  <Grid size={12}>
                     <DialogContentText sx={classes.contentText}>
                       The schedule will be exactly as configured here for the
                       entire duration (ignoring all assignments and overrides).
                     </DialogContentText>
                   </Grid>
 
-                  <Grid item xs={12}>
+                  <Grid size={12}>
                     <Typography
                       color='textSecondary'
                       sx={classes.tzNote}
@@ -339,7 +336,7 @@ export default function TempSchedDialog({
                     </Typography>
                   </Grid>
 
-                  <Grid item xs={12} md={6}>
+                  <Grid size={{ xs: 12, md: 6 }}>
                     <FormField
                       fullWidth
                       component={ISODateTimePicker}
@@ -362,7 +359,7 @@ export default function TempSchedDialog({
                       hint={isLocalZone ? '' : fmtLocal(value.start)}
                     />
                   </Grid>
-                  <Grid item xs={12} md={6}>
+                  <Grid size={{ xs: 12, md: 6 }}>
                     <FormField
                       fullWidth
                       component={ISODateTimePicker}
@@ -395,7 +392,7 @@ export default function TempSchedDialog({
                       })
                     }}
                   >
-                    <Grid item xs={12} md={6}>
+                    <Grid size={{ xs: 12, md: 6 }}>
                       <FormField
                         fullWidth
                         component={TextField}
@@ -407,7 +404,7 @@ export default function TempSchedDialog({
                         disabled={q.loading}
                       />
                     </Grid>
-                    <Grid item xs={12} md={6}>
+                    <Grid size={{ xs: 12, md: 6 }}>
                       <FormField
                         fullWidth
                         component={TextField}
@@ -424,11 +421,11 @@ export default function TempSchedDialog({
                     </Grid>
                   </FormContainer>
 
-                  <Grid item xs={12}>
+                  <Grid size={12}>
                     <Divider />
                   </Grid>
 
-                  <Grid item xs={12} sx={classes.sticky}>
+                  <Grid size={12} sx={classes.sticky}>
                     <TempSchedAddNewShift
                       value={value}
                       onChange={(shifts: Shift[]) =>
@@ -444,15 +441,12 @@ export default function TempSchedDialog({
                 </Grid>
 
                 {/* right pane */}
-                <Grid
-                  item
-                  xs={12}
-                  md={6}
+                <Grid size={{ xs: 12, md: 6 }}
                   container
                   spacing={2}
                   sx={classes.rightPane}
                 >
-                  <Grid item xs={12} ref={shiftListRef}>
+                  <Grid size={12} ref={shiftListRef}>
                     <Typography
                       variant='subtitle1'
                       component='h3'
diff --git a/web/src/app/selection/DestinationField.tsx b/web/src/app/selection/DestinationField.tsx
index 9a4d480e4c..7d739f6b5c 100644
--- a/web/src/app/selection/DestinationField.tsx
+++ b/web/src/app/selection/DestinationField.tsx
@@ -59,7 +59,7 @@ export default function DestinationField(
 
         if (field.supportsSearch)
           return (
-            <Grid key={field.fieldID} item xs={12} sm={12} md={12}>
+            <Grid size={{ xs: 12, sm: 12, md: 12 }} key={field.fieldID}>
               <DestinationSearchSelect
                 {...field}
                 value={fieldValue}
@@ -72,7 +72,7 @@ export default function DestinationField(
           )
 
         return (
-          <Grid key={field.fieldID} item xs={12} sm={12} md={12}>
+          <Grid size={{ xs: 12, sm: 12, md: 12 }} key={field.fieldID}>
             <DestinationInputDirect
               {...field}
               value={fieldValue}
diff --git a/web/src/app/selection/DynamicActionForm.tsx b/web/src/app/selection/DynamicActionForm.tsx
index f5954fafef..786221e5d8 100644
--- a/web/src/app/selection/DynamicActionForm.tsx
+++ b/web/src/app/selection/DynamicActionForm.tsx
@@ -87,8 +87,8 @@ export default function DynamicActionForm(
   const selectedDest = types.find((t) => t.type === props.value?.destType)
 
   return (
-    <Grid item xs={12} container spacing={2}>
-      <Grid item xs={12}>
+    <Grid size={12} container spacing={2}>
+      <Grid size={12}>
         <TextField
           select
           fullWidth
@@ -115,7 +115,7 @@ export default function DynamicActionForm(
         </TextField>
       </Grid>
       {props.value && (
-        <Grid item xs={12}>
+        <Grid size={12}>
           <DestinationField
             value={props.value?.staticParams}
             onChange={(vals) => {
@@ -147,7 +147,7 @@ export default function DynamicActionForm(
           }
 
           return (
-            <Grid key={p.paramID} item xs={12}>
+            <Grid size={12} key={p.paramID}>
               <ExprField
                 name={p.paramID}
                 disabled={props.disabled || !selectedDest?.enabled}
diff --git a/web/src/app/services/AlertMetrics/AlertAveragesGraph.tsx b/web/src/app/services/AlertMetrics/AlertAveragesGraph.tsx
index 31964bb6ac..0b4288ee77 100644
--- a/web/src/app/services/AlertMetrics/AlertAveragesGraph.tsx
+++ b/web/src/app/services/AlertMetrics/AlertAveragesGraph.tsx
@@ -56,7 +56,7 @@ export default function AlertAveragesGraph(
         fontFamily: theme.typography.body2.fontFamily,
       }}
     >
-      <Grid item xs={12} data-cy='metrics-averages-graph'>
+      <Grid size={12} data-cy='metrics-averages-graph'>
         {props.loading && <Spinner />}
         <AutoSizer>
           {({ width, height }: { width: number; height: number }) => (
diff --git a/web/src/app/services/AlertMetrics/AlertCountGraph.tsx b/web/src/app/services/AlertMetrics/AlertCountGraph.tsx
index a607b8cd71..0ddb7b18d3 100644
--- a/web/src/app/services/AlertMetrics/AlertCountGraph.tsx
+++ b/web/src/app/services/AlertMetrics/AlertCountGraph.tsx
@@ -32,7 +32,7 @@ export default function AlertCountGraph(
         fontFamily: theme.typography.body2.fontFamily,
       }}
     >
-      <Grid item xs={12} data-cy='metrics-count-graph'>
+      <Grid size={12} data-cy='metrics-count-graph'>
         <Typography color='textSecondary' sx={{ ml: '3rem', pt: 1 }}>
           Showing data for closed alerts
         </Typography>
diff --git a/web/src/app/services/AlertMetrics/AlertMetrics.tsx b/web/src/app/services/AlertMetrics/AlertMetrics.tsx
index 48031744d4..fcc521b34e 100644
--- a/web/src/app/services/AlertMetrics/AlertMetrics.tsx
+++ b/web/src/app/services/AlertMetrics/AlertMetrics.tsx
@@ -73,7 +73,7 @@ export default function AlertMetrics({
 
   return (
     <Grid container spacing={2}>
-      <Grid item xs={12}>
+      <Grid size={12}>
         <Card>
           <CardContent>
             <AlertMetricsFilter />
diff --git a/web/src/app/services/AlertMetrics/AlertMetricsFilter.tsx b/web/src/app/services/AlertMetrics/AlertMetricsFilter.tsx
index cb28c8f5bf..c0f0473ac4 100644
--- a/web/src/app/services/AlertMetrics/AlertMetricsFilter.tsx
+++ b/web/src/app/services/AlertMetrics/AlertMetricsFilter.tsx
@@ -15,7 +15,7 @@ export default function AlertMetricsFilter(): JSX.Element {
 
   return (
     <Grid container sx={{ marginLeft: '3rem', pt: 3 }}>
-      <Grid item xs={5}>
+      <Grid size={5}>
         <FormControl sx={{ width: '100%' }}>
           <InputLabel id='demo-simple-select-helper-label'>
             Date Range
@@ -38,7 +38,7 @@ export default function AlertMetricsFilter(): JSX.Element {
           </Select>
         </FormControl>
       </Grid>
-      <Grid item xs={5} paddingLeft={1}>
+      <Grid size={5} paddingLeft={1}>
         <FormControl sx={{ width: '100%' }}>
           <InputLabel id='demo-simple-select-helper-label'>Interval</InputLabel>
           <Select
diff --git a/web/src/app/services/AlertMetrics/AlertMetricsTable.tsx b/web/src/app/services/AlertMetrics/AlertMetricsTable.tsx
index 81865e9c4c..1bcff6e380 100644
--- a/web/src/app/services/AlertMetrics/AlertMetricsTable.tsx
+++ b/web/src/app/services/AlertMetrics/AlertMetricsTable.tsx
@@ -2,8 +2,6 @@ import React, { useMemo } from 'react'
 import {
   DataGrid,
   GridRenderCellParams,
-  GridValueGetterParams,
-  GridValueFormatterParams,
   GridToolbarContainer,
   GridToolbarColumnsButton,
   GridToolbarDensitySelector,
@@ -33,29 +31,29 @@ const columns: GridColDef[] = [
     field: 'createdAt',
     headerName: 'Created At',
     width: 250,
-    valueFormatter: (params: GridValueFormatterParams) =>
-      DateTime.fromISO(params.value as string).toFormat('ccc, DD, t ZZZZ'),
+    valueFormatter: (value: string) =>
+      DateTime.fromISO(value).toFormat('ccc, DD, t ZZZZ'),
   },
   {
     field: 'closedAt',
     headerName: 'Closed At',
     width: 250,
-    valueFormatter: (params: GridValueFormatterParams) =>
-      DateTime.fromISO(params.value as string).toFormat('ccc, DD, t ZZZZ'),
+    valueFormatter: (value: string) =>
+      DateTime.fromISO(value).toFormat('ccc, DD, t ZZZZ'),
   },
   {
     field: 'timeToAck',
     headerName: 'Ack Time',
     width: 100,
-    valueFormatter: (params: GridValueFormatterParams) =>
-      Duration.fromISO(params.value as string).toFormat('hh:mm:ss'),
+    valueFormatter: (value: string) =>
+      Duration.fromISO(value).toFormat('hh:mm:ss'),
   },
   {
     field: 'timeToClose',
     headerName: 'Close Time',
     width: 100,
-    valueFormatter: (params: GridValueFormatterParams) =>
-      Duration.fromISO(params.value as string).toFormat('hh:mm:ss'),
+    valueFormatter: (value: string) =>
+      Duration.fromISO(value).toFormat('hh:mm:ss'),
   },
   {
     field: 'alertID',
@@ -75,8 +73,8 @@ const columns: GridColDef[] = [
     field: 'status',
     headerName: 'Status',
     width: 160,
-    valueFormatter: (params: GridValueFormatterParams) => {
-      return (params.value as string).replace('Status', '')
+    valueFormatter: (value: string) => {
+      return value.replace('Status', '')
     },
   },
   {
@@ -92,8 +90,8 @@ const columns: GridColDef[] = [
   {
     field: 'serviceID',
     headerName: 'Service ID',
-    valueGetter: (params: GridValueGetterParams) => {
-      return params.row.service?.id || ''
+    valueGetter: (_value: unknown, row: Alert) => {
+      return row.service?.id || ''
     },
     width: 300,
   },
@@ -101,8 +99,8 @@ const columns: GridColDef[] = [
     field: 'serviceName',
     headerName: 'Service Name',
     width: 200,
-    valueGetter: (params: GridValueGetterParams) => {
-      return params.row.service?.name || ''
+    valueGetter: (_value: unknown, row: Alert) => {
+      return row.service?.name || ''
     },
 
     renderCell: (params: GridRenderCellParams<{ service: Service }>) => {
@@ -143,12 +141,12 @@ export default function AlertMetricsTable(
     return (
       <GridToolbarContainer className={gridClasses.toolbarContainer}>
         <Grid container justifyContent='space-between'>
-          <Grid item>
+          <Grid >
             <GridToolbarColumnsButton />
             <GridToolbarFilterButton />
             <GridToolbarDensitySelector />
           </Grid>
-          <Grid item>
+          <Grid >
             <AppLink
               to={link}
               download={`${props.serviceName.replace(
@@ -171,15 +169,15 @@ export default function AlertMetricsTable(
 
   return (
     <Grid container style={{ height: '400px' }}>
-      <Grid item xs={12} data-cy='metrics-table'>
+      <Grid size={12} data-cy='metrics-table'>
         <DataGrid
           rows={alerts}
           loading={props.loading}
           columns={columns}
           rowSelection={false}
-          components={{
-            ExportIcon: DownloadIcon,
-            Toolbar: CustomToolbar,
+          slots={{
+            exportIcon: DownloadIcon,
+            toolbar: CustomToolbar,
           }}
         />
       </Grid>
diff --git a/web/src/app/services/HeartbeatMonitorForm.tsx b/web/src/app/services/HeartbeatMonitorForm.tsx
index 4fb5edb588..015a200ae3 100644
--- a/web/src/app/services/HeartbeatMonitorForm.tsx
+++ b/web/src/app/services/HeartbeatMonitorForm.tsx
@@ -36,7 +36,7 @@ export default function HeartbeatMonitorForm(
   return (
     <FormContainer {...formProps} optionalLabels>
       <Grid container spacing={2}>
-        <Grid item style={{ flexGrow: 1 }} xs={12}>
+        <Grid size={12} style={{ flexGrow: 1 }}>
           <FormField
             fullWidth
             component={TextField}
@@ -45,7 +45,7 @@ export default function HeartbeatMonitorForm(
             required
           />
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <FormField
             fullWidth
             component={DurationField}
@@ -62,7 +62,7 @@ export default function HeartbeatMonitorForm(
             mapOnChangeValue={clampTimeout}
           />
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <FormField
             fullWidth
             name='additionalDetails'
diff --git a/web/src/app/services/HeartbeatMonitorList.tsx b/web/src/app/services/HeartbeatMonitorList.tsx
index dd8aec1e9b..9777cea2cd 100644
--- a/web/src/app/services/HeartbeatMonitorList.tsx
+++ b/web/src/app/services/HeartbeatMonitorList.tsx
@@ -135,7 +135,7 @@ export default function HeartbeatMonitorList(props: {
 
   return (
     <React.Fragment>
-      <Grid item xs={12} sx={{ mb: '96px' }}>
+      <Grid size={12} sx={{ mb: '96px' }}>
         <Card>
           <CardContent>
             {renderList(data.service.heartbeatMonitors)}
diff --git a/web/src/app/services/HeartbeatMonitorStatus.tsx b/web/src/app/services/HeartbeatMonitorStatus.tsx
index 4ef8c7abcd..d22adb50cb 100644
--- a/web/src/app/services/HeartbeatMonitorStatus.tsx
+++ b/web/src/app/services/HeartbeatMonitorStatus.tsx
@@ -44,7 +44,7 @@ export default function HeartbeatMonitorStatus(props: {
 
   return (
     <Grid container style={{ width: 'min-content', marginRight: '1em' }}>
-      <Grid item xs={12}>
+      <Grid size={12}>
         <ListItemAvatar sx={{ display: 'flex', justifyContent: 'center' }}>
           <Avatar
             aria-label={props.lastState}
@@ -54,7 +54,7 @@ export default function HeartbeatMonitorStatus(props: {
           </Avatar>
         </ListItemAvatar>
       </Grid>
-      <Grid item xs={12} sx={{ textAlign: 'center' }}>
+      <Grid size={12} sx={{ textAlign: 'center' }}>
         <Typography variant='caption'>
           <Time time={props.lastHeartbeat} format='relative' zero='Inactive' />
         </Typography>
diff --git a/web/src/app/services/IntegrationKeyForm.tsx b/web/src/app/services/IntegrationKeyForm.tsx
index 659de05fbf..e3c98540b2 100644
--- a/web/src/app/services/IntegrationKeyForm.tsx
+++ b/web/src/app/services/IntegrationKeyForm.tsx
@@ -32,7 +32,7 @@ export default function IntegrationKeyForm(
   return (
     <FormContainer {...formProps} optionalLabels>
       <Grid container spacing={2}>
-        <Grid item style={{ flexGrow: 1 }} xs={12}>
+        <Grid size={12} style={{ flexGrow: 1 }}>
           <FormField
             fullWidth
             component={TextField}
@@ -41,7 +41,7 @@ export default function IntegrationKeyForm(
             required
           />
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <FormField
             fullWidth
             component={TextField}
diff --git a/web/src/app/services/IntegrationKeyList.tsx b/web/src/app/services/IntegrationKeyList.tsx
index 9fce47fbe6..e5a16ebbef 100644
--- a/web/src/app/services/IntegrationKeyList.tsx
+++ b/web/src/app/services/IntegrationKeyList.tsx
@@ -101,7 +101,7 @@ export default function IntegrationKeyList(props: {
     return (
       <Grid container spacing={2} alignItems='center' wrap='nowrap'>
         {key.type === 'universal' && (
-          <Grid item>
+          <Grid >
             <AppLink to={key.id}>
               <Button
                 title='Manage configuration and tokens for this key.'
@@ -113,7 +113,7 @@ export default function IntegrationKeyList(props: {
             </AppLink>
           </Grid>
         )}
-        <Grid item>
+        <Grid >
           <IconButton
             title='Delete this key.'
             onClick={(): void => setDeleteDialog(key.id)}
@@ -161,7 +161,7 @@ export default function IntegrationKeyList(props: {
 
   return (
     <React.Fragment>
-      <Grid item xs={12} sx={{ mb: '96px' }}>
+      <Grid size={12} sx={{ mb: '96px' }}>
         <Card>
           <CardContent>
             <CompList
diff --git a/web/src/app/services/ServiceAlerts.tsx b/web/src/app/services/ServiceAlerts.tsx
index ab4670d045..d47a5b3305 100644
--- a/web/src/app/services/ServiceAlerts.tsx
+++ b/web/src/app/services/ServiceAlerts.tsx
@@ -42,10 +42,10 @@ export default function ServiceAlerts(props: {
 
   const secondaryActions = (
     <Grid style={{ width: 'fit-content' }} container spacing={2} alignItems='center'>
-      <Grid item>
+      <Grid >
         <AlertsListFilter serviceID={props.serviceID} />
       </Grid>
-      <Grid item>
+      <Grid >
         <ButtonGroup variant='outlined'>
           <Button onClick={handleClickAckAll}>Acknowledge All</Button>
           <Button onClick={handleClickCloseAll}>Close All</Button>
diff --git a/web/src/app/services/ServiceDetails.tsx b/web/src/app/services/ServiceDetails.tsx
index 755791e6f5..ea9255a190 100644
--- a/web/src/app/services/ServiceDetails.tsx
+++ b/web/src/app/services/ServiceDetails.tsx
@@ -126,10 +126,10 @@ export default function ServiceDetails(props: {
         details={data.service.description}
         pageContent={
           <Grid container spacing={2}>
-            <Grid item xs={12}>
+            <Grid size={12}>
               <ServiceOnCallList serviceID={serviceID} />
             </Grid>
-            <Grid item xs={12}>
+            <Grid size={12}>
               <ServiceRecentEvents serviceID={serviceID} />
             </Grid>
           </Grid>
diff --git a/web/src/app/services/ServiceFilterContainer.tsx b/web/src/app/services/ServiceFilterContainer.tsx
index d3ab2557c2..a4ca9f27cb 100644
--- a/web/src/app/services/ServiceFilterContainer.tsx
+++ b/web/src/app/services/ServiceFilterContainer.tsx
@@ -40,12 +40,12 @@ export default function ServiceFilterContainer(
       onReset={props.onReset}
       anchorRef={props.anchorRef}
     >
-      <Grid item xs={12}>
+      <Grid size={12}>
         <Typography color='textSecondary'>
           <i>Search by Integration Key</i>
         </Typography>
       </Grid>
-      <Grid data-cy='integration-key-container' item xs={12}>
+      <Grid size={12} data-cy='integration-key-container'>
         <IntegrationKeySelect
           name='integration-key'
           label='Select Integration Key'
@@ -71,12 +71,12 @@ export default function ServiceFilterContainer(
           <i>Paste the ID/Token (or full URL/email) to search.</i>
         </Typography>
       </Grid>
-      <Grid item xs={12}>
+      <Grid size={12}>
         <Typography color='textSecondary'>
           <i>Search by Label</i>
         </Typography>
       </Grid>
-      <Grid data-cy='label-key-container' item xs={12}>
+      <Grid size={12} data-cy='label-key-container'>
         <LabelKeySelect
           name='label-key'
           label='Select Label Key'
@@ -86,7 +86,7 @@ export default function ServiceFilterContainer(
           }
         />
       </Grid>
-      <Grid data-cy='label-value-container' item xs={12}>
+      <Grid size={12} data-cy='label-value-container'>
         <LabelValueSelect
           name='label-value'
           label='Select Label Value'
diff --git a/web/src/app/services/ServiceForm.tsx b/web/src/app/services/ServiceForm.tsx
index 4c1e856e9d..f17736b934 100644
--- a/web/src/app/services/ServiceForm.tsx
+++ b/web/src/app/services/ServiceForm.tsx
@@ -66,7 +66,7 @@ export default function ServiceForm(props: ServiceFormProps): JSX.Element {
       optionalLabels={epRequired}
     >
       <Grid container spacing={2}>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <FormField
             fullWidth
             label='Name'
@@ -75,7 +75,7 @@ export default function ServiceForm(props: ServiceFormProps): JSX.Element {
             component={TextField}
           />
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <FormField
             fullWidth
             label='Description'
@@ -87,7 +87,7 @@ export default function ServiceForm(props: ServiceFormProps): JSX.Element {
             hint='Markdown Supported'
           />
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <FormField
             fullWidth
             label='Escalation Policy'
@@ -99,7 +99,7 @@ export default function ServiceForm(props: ServiceFormProps): JSX.Element {
         </Grid>
         {reqLabels &&
           reqLabels.map((labelName: string, idx: number) => (
-            <Grid item xs={12} key={labelName}>
+            <Grid size={12} key={labelName}>
               <FormField
                 fullWidth
                 name={labelName}
diff --git a/web/src/app/services/ServiceLabelForm.tsx b/web/src/app/services/ServiceLabelForm.tsx
index 6896cfe7f8..9e83ac82cf 100644
--- a/web/src/app/services/ServiceLabelForm.tsx
+++ b/web/src/app/services/ServiceLabelForm.tsx
@@ -28,7 +28,7 @@ export default function LabelForm(props: LabelFormProps): React.JSX.Element {
   return (
     <FormContainer {...otherProps} optionalLabels>
       <Grid container spacing={2}>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <Config>
             {(cfg) => (
               <FormField
@@ -49,7 +49,7 @@ export default function LabelForm(props: LabelFormProps): React.JSX.Element {
             )}
           </Config>
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <FormField
             fullWidth
             component={TextField}
diff --git a/web/src/app/services/ServiceLabelList.tsx b/web/src/app/services/ServiceLabelList.tsx
index a77c4f125b..a40bfda645 100644
--- a/web/src/app/services/ServiceLabelList.tsx
+++ b/web/src/app/services/ServiceLabelList.tsx
@@ -103,7 +103,7 @@ export default function ServiceLabelList(props: {
 
   return (
     <React.Fragment>
-      <Grid item xs={12} sx={{ mb: '96px' }}>
+      <Grid size={12} sx={{ mb: '96px' }}>
         <Card>
           <CardContent>{renderList(data.service.labels)}</CardContent>
         </Card>
diff --git a/web/src/app/services/ServiceNotices.tsx b/web/src/app/services/ServiceNotices.tsx
index 788116262c..dbb1aad480 100644
--- a/web/src/app/services/ServiceNotices.tsx
+++ b/web/src/app/services/ServiceNotices.tsx
@@ -85,7 +85,7 @@ export default function ServiceNotices({
   }
 
   return (
-    <Grid item sx={{ width: '100%' }}>
+    <Grid sx={{ width: '100%' }}>
       <Notices notices={notices} />
     </Grid>
   )
diff --git a/web/src/app/services/UniversalKey/GenTokenDialog.tsx b/web/src/app/services/UniversalKey/GenTokenDialog.tsx
index 26546fcb3c..ebd5ec5086 100644
--- a/web/src/app/services/UniversalKey/GenTokenDialog.tsx
+++ b/web/src/app/services/UniversalKey/GenTokenDialog.tsx
@@ -28,7 +28,7 @@ function GenerateTokenText(): JSX.Element {
 function CopyTokenText({ token }: { token: string }): JSX.Element {
   return (
     <Grid container spacing={2}>
-      <Grid item xs={12}>
+      <Grid size={12}>
         <CopyText title={token} value={token} placement='bottom' />
         <FormHelperText>
           Please copy and save the token as this is the only time you'll be able
diff --git a/web/src/app/services/UniversalKey/UniversalKeyActionsList.tsx b/web/src/app/services/UniversalKey/UniversalKeyActionsList.tsx
index 1ad40fc0b6..be13eca96f 100644
--- a/web/src/app/services/UniversalKey/UniversalKeyActionsList.tsx
+++ b/web/src/app/services/UniversalKey/UniversalKeyActionsList.tsx
@@ -16,16 +16,14 @@ export default function UniversalKeyActionsList(
 ): React.ReactNode {
   return (
     <React.Fragment>
-      <Grid
-        item
-        xs={12}
+      <Grid size={12}
         container
         spacing={1}
         sx={{ p: 1 }}
         data-testid='actions-list'
       >
         {props.actions.map((a, idx) => (
-          <Grid item key={JSON.stringify(a.dest)}>
+          <Grid key={JSON.stringify(a.dest)}>
             <DestinationInputChip
               value={a.dest}
               onEdit={
@@ -38,7 +36,7 @@ export default function UniversalKeyActionsList(
         ))}
       </Grid>
       {props.actions.length === 0 && (
-        <Grid item xs={12}>
+        <Grid size={12}>
           <Chip
             label='No actions'
             icon={
diff --git a/web/src/app/services/UniversalKey/UniversalKeyPage.tsx b/web/src/app/services/UniversalKey/UniversalKeyPage.tsx
index 075ff31c54..78416f10e3 100644
--- a/web/src/app/services/UniversalKey/UniversalKeyPage.tsx
+++ b/web/src/app/services/UniversalKey/UniversalKeyPage.tsx
@@ -139,13 +139,13 @@ ${tokenInfo}
         primaryActions={makeGenerateButtons()}
         pageContent={
           <Grid container spacing={2}>
-            <Grid item xs={12}>
+            <Grid size={12}>
               <UniversalKeyRuleList
                 serviceID={props.serviceID}
                 keyID={props.keyID}
               />
             </Grid>
-            <Grid item xs={12}>
+            <Grid size={12}>
               <UniversalKeyDefaultActions
                 serviceID={props.serviceID}
                 keyID={props.keyID}
diff --git a/web/src/app/services/UniversalKey/UniversalKeyRuleConfig.tsx b/web/src/app/services/UniversalKey/UniversalKeyRuleConfig.tsx
index 7f6fa63055..d8c0ae39f1 100644
--- a/web/src/app/services/UniversalKey/UniversalKeyRuleConfig.tsx
+++ b/web/src/app/services/UniversalKey/UniversalKeyRuleConfig.tsx
@@ -98,16 +98,16 @@ export default function UniversalKeyRuleList(
         }
         subText={
           <Grid container>
-            <Grid item xs={12}>
+            <Grid size={12}>
               <b>If</b>
               <code style={{ paddingLeft: '1em' }}>
                 {truncateCond(rule.conditionExpr)}
               </code>
             </Grid>
-            <Grid item xs={12}>
+            <Grid size={12}>
               <b>Then</b>
             </Grid>
-            <Grid item xs={12} sx={{ paddingLeft: '1em' }}>
+            <Grid size={12} sx={{ paddingLeft: '1em' }}>
               <UniversalKeyActionsList
                 actions={rule.actions}
                 onEdit={(index) =>
@@ -115,7 +115,7 @@ export default function UniversalKeyRuleList(
                 }
               />
             </Grid>
-            <Grid item xs={12}>
+            <Grid size={12}>
               <b>Finally</b> {rule.continueAfterMatch ? 'continue' : 'stop'}
             </Grid>
           </Grid>
diff --git a/web/src/app/services/UniversalKey/UniversalKeyRuleForm.tsx b/web/src/app/services/UniversalKey/UniversalKeyRuleForm.tsx
index 4ff78e9c62..de70ed1210 100644
--- a/web/src/app/services/UniversalKey/UniversalKeyRuleForm.tsx
+++ b/web/src/app/services/UniversalKey/UniversalKeyRuleForm.tsx
@@ -26,7 +26,7 @@ export default function UniversalKeyRuleForm(
 ): JSX.Element {
   return (
     <Grid container spacing={2}>
-      <Grid item xs={12}>
+      <Grid size={12}>
         <TextField
           fullWidth
           label='Name'
@@ -39,7 +39,7 @@ export default function UniversalKeyRuleForm(
           helperText={props.nameError}
         />
       </Grid>
-      <Grid item xs={12}>
+      <Grid size={12}>
         <TextField
           fullWidth
           label='Description'
@@ -55,7 +55,7 @@ export default function UniversalKeyRuleForm(
           helperText={props.descriptionError}
         />
       </Grid>
-      <Grid item xs={12}>
+      <Grid size={12}>
         <ExprField
           name='conditionExpr'
           label='Condition'
@@ -66,7 +66,7 @@ export default function UniversalKeyRuleForm(
         <HelperText error={props.conditionError} />
       </Grid>
 
-      <Grid item xs={12}>
+      <Grid size={12}>
         <FormControl>
           <FormLabel id='demo-row-radio-buttons-group-label'>
             After actions complete:
diff --git a/web/src/app/theme/ThemePicker.tsx b/web/src/app/theme/ThemePicker.tsx
index 3c72566334..72e28797ab 100644
--- a/web/src/app/theme/ThemePicker.tsx
+++ b/web/src/app/theme/ThemePicker.tsx
@@ -29,10 +29,10 @@ export default function ThemePicker(): JSX.Element {
 
   return (
     <Grid container direction='column' spacing={2}>
-      <Grid item>
+      <Grid >
         <FormLabel>Appearance</FormLabel>
       </Grid>
-      <Grid item>
+      <Grid >
         <ToggleButtonGroup color='primary' value={themeMode}>
           <ToggleButton
             value='light'
diff --git a/web/src/app/users/UserContactMethodForm.tsx b/web/src/app/users/UserContactMethodForm.tsx
index 0d237bbaff..d60887aeb1 100644
--- a/web/src/app/users/UserContactMethodForm.tsx
+++ b/web/src/app/users/UserContactMethodForm.tsx
@@ -70,7 +70,7 @@ export default function UserContactMethodForm(
       optionalLabels
     >
       <Grid container spacing={2}>
-        <Grid item xs={12} sm={12} md={6}>
+        <Grid size={{ xs: 12, sm: 12, md: 6 }}>
           <TextField
             fullWidth
             name='name'
@@ -85,7 +85,7 @@ export default function UserContactMethodForm(
             }
           />
         </Grid>
-        <Grid item xs={12} sm={12} md={6}>
+        <Grid size={{ xs: 12, sm: 12, md: 6 }}>
           <TextField
             fullWidth
             name='dest.type'
@@ -117,7 +117,7 @@ export default function UserContactMethodForm(
             )}
           </TextField>
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <DestinationField
             destType={value.dest.type}
             disabled={props.disabled || edit}
@@ -137,14 +137,14 @@ export default function UserContactMethodForm(
         </Grid>
 
         {currentType?.userDisclaimer !== '' && (
-          <Grid item xs={12}>
+          <Grid size={12}>
             <Typography variant='caption'>
               {currentType?.userDisclaimer}
             </Typography>
           </Grid>
         )}
 
-        <Grid item xs={12}>
+        <Grid size={12}>
           <FormControlLabel
             label={statusLabel}
             title='Alert status updates are sent when an alert is acknowledged, closed, or escalated.'
diff --git a/web/src/app/users/UserContactMethodList.tsx b/web/src/app/users/UserContactMethodList.tsx
index ed9b0714de..2afee04530 100644
--- a/web/src/app/users/UserContactMethodList.tsx
+++ b/web/src/app/users/UserContactMethodList.tsx
@@ -151,7 +151,7 @@ export default function UserContactMethodList(
     return (
       <Grid container spacing={2} alignItems='center' wrap='nowrap'>
         {cm.disabled && !props.readOnly && !mobile && isCurrentUser && (
-          <Grid item>
+          <Grid >
             <Button
               aria-label='Reactivate contact method'
               onClick={() => setShowVerifyDialogByID(cm.id)}
@@ -162,7 +162,7 @@ export default function UserContactMethodList(
           </Grid>
         )}
         {!props.readOnly && (
-          <Grid item>
+          <Grid >
             <OtherActions actions={getActionMenuItems(cm)} />
           </Grid>
         )}
@@ -186,7 +186,7 @@ export default function UserContactMethodList(
   }
 
   return (
-    <Grid item xs={12}>
+    <Grid size={12}>
       <Card>
         <CardHeader
           sx={gs.cardHeader}
diff --git a/web/src/app/users/UserContactMethodVerificationForm.tsx b/web/src/app/users/UserContactMethodVerificationForm.tsx
index 63c846a5ec..bb48dab94a 100644
--- a/web/src/app/users/UserContactMethodVerificationForm.tsx
+++ b/web/src/app/users/UserContactMethodVerificationForm.tsx
@@ -57,7 +57,7 @@ export default function UserContactMethodVerificationForm(
   return (
     <FormContainer optionalLabels {...props}>
       <Grid container spacing={2}>
-        <Grid item sx={{ display: 'flex', alignItems: 'center' }}>
+        <Grid sx={{ display: 'flex', alignItems: 'center' }}>
           <LoadingButton
             loading={sendCodeStatus.fetching}
             disabled={props.disabled}
@@ -66,7 +66,7 @@ export default function UserContactMethodVerificationForm(
             onClick={() => sendAndCatch()}
           />
         </Grid>
-        <Grid item sx={{ flexGrow: 1 }}>
+        <Grid sx={{ flexGrow: 1 }}>
           <FormField
             fullWidth
             name='code'
diff --git a/web/src/app/users/UserCreateDialog.tsx b/web/src/app/users/UserCreateDialog.tsx
index 8815b7f7ce..b6de833d15 100644
--- a/web/src/app/users/UserCreateDialog.tsx
+++ b/web/src/app/users/UserCreateDialog.tsx
@@ -79,7 +79,7 @@ function UserCreateDialog(props: UserCreateDialogProps): React.ReactNode {
           optionalLabels
         >
           <Grid container spacing={2}>
-            <Grid item xs={12}>
+            <Grid size={12}>
               <FormField
                 fullWidth
                 component={TextField}
@@ -87,7 +87,7 @@ function UserCreateDialog(props: UserCreateDialogProps): React.ReactNode {
                 required
               />
             </Grid>
-            <Grid item xs={12}>
+            <Grid size={12}>
               <FormField
                 fullWidth
                 component={TextField}
@@ -97,7 +97,7 @@ function UserCreateDialog(props: UserCreateDialogProps): React.ReactNode {
                 required
               />
             </Grid>
-            <Grid item xs={12}>
+            <Grid size={12}>
               <FormField
                 fullWidth
                 component={TextField}
@@ -113,7 +113,7 @@ function UserCreateDialog(props: UserCreateDialogProps): React.ReactNode {
                 }}
               />
             </Grid>
-            <Grid item xs={12}>
+            <Grid size={12}>
               <FormField
                 fullWidth
                 component={TextField}
@@ -121,7 +121,7 @@ function UserCreateDialog(props: UserCreateDialogProps): React.ReactNode {
                 label='Display Name'
               />
             </Grid>
-            <Grid item xs={12}>
+            <Grid size={12}>
               <FormField
                 fullWidth
                 component={TextField}
@@ -129,7 +129,7 @@ function UserCreateDialog(props: UserCreateDialogProps): React.ReactNode {
                 type='email'
               />
             </Grid>
-            <Grid item xs={12}>
+            <Grid size={12}>
               <FormControlLabel
                 control={
                   <FormField component={Checkbox} checkbox name='isAdmin' />
diff --git a/web/src/app/users/UserDetails.tsx b/web/src/app/users/UserDetails.tsx
index d7730ef812..990f6e4802 100644
--- a/web/src/app/users/UserDetails.tsx
+++ b/web/src/app/users/UserDetails.tsx
@@ -217,7 +217,7 @@ export default function UserDetails(props: {
             />
             {!mobile && (
               <Suspense>
-                <Grid item xs={12}>
+                <Grid size={12}>
                   <UserShiftsCalendar userID={userID} />
                 </Grid>
               </Suspense>
diff --git a/web/src/app/users/UserEditForm.tsx b/web/src/app/users/UserEditForm.tsx
index dda5b81273..c44c05a0ad 100644
--- a/web/src/app/users/UserEditForm.tsx
+++ b/web/src/app/users/UserEditForm.tsx
@@ -44,7 +44,7 @@ function UserEditForm(props: UserEditFormProps): JSX.Element {
       }}
     >
       <Grid container spacing={2}>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <FormField
             fullWidth
             component={TextField}
@@ -55,7 +55,7 @@ function UserEditForm(props: UserEditFormProps): JSX.Element {
           />
         </Grid>
         {requireOldPassword && (
-          <Grid item xs={12}>
+          <Grid size={12}>
             <FormField
               fullWidth
               component={TextField}
@@ -67,7 +67,7 @@ function UserEditForm(props: UserEditFormProps): JSX.Element {
             />
           </Grid>
         )}
-        <Grid item xs={12}>
+        <Grid size={12}>
           <FormField
             fullWidth
             component={TextField}
@@ -78,7 +78,7 @@ function UserEditForm(props: UserEditFormProps): JSX.Element {
             disabled={disabled}
           />
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <FormField
             fullWidth
             component={TextField}
@@ -90,7 +90,7 @@ function UserEditForm(props: UserEditFormProps): JSX.Element {
           />
         </Grid>
         {isAdmin && (
-          <Grid item xs={12}>
+          <Grid size={12}>
             <FormControlLabel
               control={
                 <FormField
diff --git a/web/src/app/users/UserNotificationRuleForm.tsx b/web/src/app/users/UserNotificationRuleForm.tsx
index d79049ffc2..92f574d991 100644
--- a/web/src/app/users/UserNotificationRuleForm.tsx
+++ b/web/src/app/users/UserNotificationRuleForm.tsx
@@ -34,7 +34,7 @@ export default function UserNotificationRuleForm(
   return (
     <FormContainer {...other} optionalLabels>
       <Grid container spacing={2}>
-        <Grid item xs={12} sm={12} md={6}>
+        <Grid size={{ xs: 12, sm: 12, md: 6 }}>
           <FormField
             fullWidth
             name='contactMethodID'
@@ -44,7 +44,7 @@ export default function UserNotificationRuleForm(
             component={UserContactMethodSelect}
           />
         </Grid>
-        <Grid item xs={12} sm={12} md={6}>
+        <Grid size={{ xs: 12, sm: 12, md: 6 }}>
           <FormField
             fullWidth
             name='delayMinutes'
diff --git a/web/src/app/users/UserNotificationRuleList.tsx b/web/src/app/users/UserNotificationRuleList.tsx
index f37a02619d..e3760e23ad 100644
--- a/web/src/app/users/UserNotificationRuleList.tsx
+++ b/web/src/app/users/UserNotificationRuleList.tsx
@@ -6,7 +6,6 @@ import {
   CardHeader,
   Grid,
   IconButton,
-  Theme,
 } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
 import { Add, Delete } from '@mui/icons-material'
@@ -73,7 +72,7 @@ export default function UserNotificationRuleList(props: {
   const { user }: { user: User } = data
 
   return (
-    <Grid item xs={12}>
+    <Grid size={12}>
       <Card>
         <CardHeader
           sx={gs.cardHeader}
diff --git a/web/src/app/users/UserPhoneNumberFilterContainer.tsx b/web/src/app/users/UserPhoneNumberFilterContainer.tsx
index 7b7a47a92b..6dfb9a55e2 100644
--- a/web/src/app/users/UserPhoneNumberFilterContainer.tsx
+++ b/web/src/app/users/UserPhoneNumberFilterContainer.tsx
@@ -43,7 +43,7 @@ export default function UserPhoneNumberFilterContainer(
       onReset={() => setSearch('')}
       anchorRef={props.anchorRef}
     >
-      <Grid data-cy='phone-number-container' item xs={12}>
+      <Grid size={12} data-cy='phone-number-container'>
         <TelTextField
           onChange={(e) =>
             setSearch(e.target.value ? 'phone=' + e.target.value : '')
diff --git a/web/src/app/users/UserSessionList.tsx b/web/src/app/users/UserSessionList.tsx
index bd3c0f425e..bcce99cad5 100644
--- a/web/src/app/users/UserSessionList.tsx
+++ b/web/src/app/users/UserSessionList.tsx
@@ -113,7 +113,7 @@ export default function UserSessionList({
     <React.Fragment>
       <Grid container spacing={2}>
         {!userID && (
-          <Grid item xs={12} container justifyContent='flex-end'>
+          <Grid size={12} container justifyContent='flex-end'>
             <Button
               variant='outlined'
               data-cy='reset'
@@ -123,7 +123,7 @@ export default function UserSessionList({
             </Button>
           </Grid>
         )}
-        <Grid item xs={12}>
+        <Grid size={12}>
           <Card>
             <CompList emptyMessage='No active sessions'>
               {sessions.map((s) => (
diff --git a/web/src/app/util/DurationField.tsx b/web/src/app/util/DurationField.tsx
index e3e8b04f30..c4e0d6e0e8 100644
--- a/web/src/app/util/DurationField.tsx
+++ b/web/src/app/util/DurationField.tsx
@@ -47,7 +47,7 @@ export const DurationField: React.FC<DurationFieldProps> = (props) => {
 
   return (
     <Grid container sx={{ width: '100%' }}>
-      <Grid item xs={8}>
+      <Grid size={8}>
         <NumberField
           fullWidth
           value={val.toString()}
@@ -62,7 +62,7 @@ export const DurationField: React.FC<DurationFieldProps> = (props) => {
           }}
         />
       </Grid>
-      <Grid item xs={4}>
+      <Grid size={4}>
         <Select
           value={unit}
           onChange={(e) => {
diff --git a/web/src/app/util/FilterContainer.jsx b/web/src/app/util/FilterContainer.jsx
index e93a246d5c..2363ef37e0 100644
--- a/web/src/app/util/FilterContainer.jsx
+++ b/web/src/app/util/FilterContainer.jsx
@@ -26,16 +26,14 @@ export default function FilterContainer(props) {
         [theme.breakpoints.up('md')]: { width: '22em' },
         [theme.breakpoints.down('md')]: { width: '100%' },
       })}>
-        <Grid
-          item
+        <Grid size={12}
           container
-          xs={12}
           spacing={2}
           sx={{ margin: 0 }}
         >
           {props.children}
         </Grid>
-        <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+        <Grid size={12} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
           {props.onReset && (
             <Button data-cy='filter-reset' onClick={props.onReset}>
               Reset
diff --git a/web/src/app/util/calendar/Calendar.tsx b/web/src/app/util/calendar/Calendar.tsx
index 4738dea415..6e7b82535d 100644
--- a/web/src/app/util/calendar/Calendar.tsx
+++ b/web/src/app/util/calendar/Calendar.tsx
@@ -348,7 +348,7 @@ export default function Calendar(props: CalendarProps): JSX.Element {
                 sx: calendarClasses.filterBtn(theme),
               }}
             >
-              <Grid item xs={12}>
+              <Grid size={12}>
                 <FormControlLabel
                   control={
                     <Switch
@@ -361,7 +361,7 @@ export default function Calendar(props: CalendarProps): JSX.Element {
                 />
               </Grid>
               {scheduleID && (
-                <Grid item xs={12}>
+                <Grid size={12}>
                   <UserSelect
                     label='Filter users...'
                     multiple
diff --git a/web/src/app/util/calendar/CalendarEventWrapper.tsx b/web/src/app/util/calendar/CalendarEventWrapper.tsx
index d8ba839f00..f911d7ee4e 100644
--- a/web/src/app/util/calendar/CalendarEventWrapper.tsx
+++ b/web/src/app/util/calendar/CalendarEventWrapper.tsx
@@ -135,8 +135,8 @@ export default function ScheduleCalendarEventWrapper({
   function renderShiftButtons(calEvent: OnCallShiftEvent): JSX.Element {
     return (
       <React.Fragment>
-        <Grid item sx={{ flexGrow: 1 }} />
-        <Grid item>
+        <Grid sx={{ flexGrow: 1 }} />
+        <Grid >
           <Button
             data-cy='override'
             size='small'
@@ -156,8 +156,8 @@ export default function ScheduleCalendarEventWrapper({
       const id = event?.targetID ?? ''
       return (
         <React.Fragment>
-          <Grid item sx={{ flexGrow: 1 }} />
-          <Grid item>
+          <Grid sx={{ flexGrow: 1 }} />
+          <Grid >
             <Button
               variant='contained'
               component={AppLink}
@@ -206,7 +206,7 @@ export default function ScheduleCalendarEventWrapper({
     }
 
     return (
-      <Grid item xs={12}>
+      <Grid size={12}>
         <Typography variant='body2'>
           {getDesc(
             calEvent.override.addUser ?? undefined,
@@ -229,14 +229,14 @@ export default function ScheduleCalendarEventWrapper({
 
     return (
       <Grid container spacing={1}>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <Typography variant='body2'>
             <b>{showScheduleLink ? event?.user?.name : event?.targetName}</b>
           </Typography>
         </Grid>
         {event.type === 'override' &&
           renderOverrideDescription(event as OverrideEvent)}
-        <Grid item xs={12}>
+        <Grid size={12}>
           <Typography variant='body2'>
             {`${fmt(event.start)}  –  ${fmt(event.end)}`}
           </Typography>
diff --git a/web/src/app/util/calendar/CalendarToolbar.tsx b/web/src/app/util/calendar/CalendarToolbar.tsx
index b4c70f0f10..bc232d2494 100644
--- a/web/src/app/util/calendar/CalendarToolbar.tsx
+++ b/web/src/app/util/calendar/CalendarToolbar.tsx
@@ -115,7 +115,7 @@ function ScheduleCalendarToolbar(
       justifyContent='space-between'
       alignItems='center'
     >
-      <Grid item>
+      <Grid >
         <Grid container alignItems='center'>
           <Button
             data-cy='show-today'
@@ -126,7 +126,12 @@ function ScheduleCalendarToolbar(
             Today
           </Button>
 
-          <Box sx={(theme) => ({ marginLeft: theme.spacing(1.75), marginRight: theme.spacing(1.75) })}>
+          <Box
+            sx={(theme) => ({
+              marginLeft: theme.spacing(1.75),
+              marginRight: theme.spacing(1.75),
+            })}
+          >
             <IconButton
               title={`Previous ${weekly ? 'week' : 'month'}`}
               data-cy='back'
@@ -151,7 +156,7 @@ function ScheduleCalendarToolbar(
         </Grid>
       </Grid>
 
-      <Grid item>
+      <Grid >
         <Grid container alignItems='center' justifyContent='flex-end'>
           {props.filter}
           <ButtonGroup aria-label='Toggle between Monthly and Weekly views'>
diff --git a/web/src/app/wizard/WizardForm.jsx b/web/src/app/wizard/WizardForm.jsx
index 206cb6b87d..6a9aff9307 100644
--- a/web/src/app/wizard/WizardForm.jsx
+++ b/web/src/app/wizard/WizardForm.jsx
@@ -47,13 +47,13 @@ export default function WizardForm(props) {
   return (
     <FormContainer optionalLabels {...props}>
       <Grid container spacing={2}>
-        <Grid item sx={{ display: 'flex', alignItems: 'center' }}>
+        <Grid sx={{ display: 'flex', alignItems: 'center' }}>
           <StepIcon icon='1' />
         </Grid>
-        <Grid item xs={10}>
+        <Grid size={10}>
           {sectionHeading('Team Details')}
         </Grid>
-        <Grid item xs={12} sx={{ ml: '2.5em' }}>
+        <Grid size={12} sx={{ ml: '2.5em' }}>
           <FormField
             component={TextField}
             name='teamName'
@@ -64,20 +64,20 @@ export default function WizardForm(props) {
             required
           />
         </Grid>
-        <Grid item sx={{ display: 'flex', alignItems: 'center' }}>
+        <Grid sx={{ display: 'flex', alignItems: 'center' }}>
           <StepIcon icon='2' />
         </Grid>
-        <Grid item xs={10}>
+        <Grid size={10}>
           {sectionHeading('Primary Schedule')}
         </Grid>
         <WizardScheduleForm onChange={onChange} value={value} />
-        <Grid item sx={{ display: 'flex', alignItems: 'center' }}>
+        <Grid sx={{ display: 'flex', alignItems: 'center' }}>
           <StepIcon icon='3' />
         </Grid>
-        <Grid item xs={10}>
+        <Grid size={10}>
           {sectionHeading('Secondary Schedule')}
         </Grid>
-        <Grid item xs={12} sx={{ ml: '2.5em' }}>
+        <Grid size={12} sx={{ ml: '2.5em' }}>
           <FormControl>
             <FormLabel>
               Will your team need a <b>secondary</b> schedule to escalate to?
@@ -107,13 +107,13 @@ export default function WizardForm(props) {
         {value.secondarySchedule.enable === 'yes' && (
           <WizardScheduleForm onChange={onChange} value={value} secondary />
         )}
-        <Grid item sx={{ display: 'flex', alignItems: 'center' }}>
+        <Grid sx={{ display: 'flex', alignItems: 'center' }}>
           <StepIcon icon='4' />
         </Grid>
-        <Grid item xs={10}>
+        <Grid size={10}>
           {sectionHeading('Escalation Policy')}
         </Grid>
-        <Grid item xs={12} sx={{ ml: '2.5em' }}>
+        <Grid size={12} sx={{ ml: '2.5em' }}>
           <FormField
             component={TextField}
             name='delayMinutes'
@@ -128,7 +128,7 @@ export default function WizardForm(props) {
             max={9000}
           />
         </Grid>
-        <Grid item xs={12} sx={{ ml: '2.5em' }}>
+        <Grid size={12} sx={{ ml: '2.5em' }}>
           <FormField
             component={TextField}
             name='repeat'
@@ -144,13 +144,13 @@ export default function WizardForm(props) {
             max={5}
           />
         </Grid>
-        <Grid item sx={{ display: 'flex', alignItems: 'center' }}>
+        <Grid sx={{ display: 'flex', alignItems: 'center' }}>
           <StepIcon icon='5' />
         </Grid>
-        <Grid item xs={10}>
+        <Grid size={10}>
           {sectionHeading('Service')}
         </Grid>
-        <Grid item xs={12} sx={{ ml: '2.5em' }}>
+        <Grid size={12} sx={{ ml: '2.5em' }}>
           <FormField
             component={MaterialSelect}
             name='key'
diff --git a/web/src/app/wizard/WizardScheduleForm.jsx b/web/src/app/wizard/WizardScheduleForm.jsx
index b954a79bf0..05a731f847 100644
--- a/web/src/app/wizard/WizardScheduleForm.jsx
+++ b/web/src/app/wizard/WizardScheduleForm.jsx
@@ -23,7 +23,7 @@ export default function WizardScheduleForm({ value, onChange, secondary }) {
     if (value[key].followTheSunRotation.enable === 'yes') {
       return (
         <React.Fragment>
-          <Grid item xs={12} sx={{ ml: '2.5em' }}>
+          <Grid size={12} sx={{ ml: '2.5em' }}>
             <FormField
               component={UserSelect}
               multiple
@@ -40,7 +40,7 @@ export default function WizardScheduleForm({ value, onChange, secondary }) {
               value={value[key].followTheSunRotation.users}
             />
           </Grid>
-          <Grid item xs={12} sx={{ ml: '2.5em' }}>
+          <Grid size={12} sx={{ ml: '2.5em' }}>
             <FormField
               component={TimeZoneSelect}
               name={`${key}.followTheSunRotation.timeZone`}
@@ -84,7 +84,7 @@ export default function WizardScheduleForm({ value, onChange, secondary }) {
 
     return (
       <React.Fragment>
-        <Grid item xs={12} sx={{ ml: '2.5em' }}>
+        <Grid size={12} sx={{ ml: '2.5em' }}>
           <FormControl>
             <FormLabel>
               How often will your <b>{schedType}</b> schedule need to rotate?
@@ -132,7 +132,7 @@ export default function WizardScheduleForm({ value, onChange, secondary }) {
         </Grid>
         {!hideRotationFields && (
           <React.Fragment>
-            <Grid item sx={{ ml: '2.5em' }}>
+            <Grid sx={{ ml: '2.5em' }}>
               <FormField
                 component={ISODateTimePicker}
                 name={`${key}.rotation.startDate`}
@@ -143,7 +143,7 @@ export default function WizardScheduleForm({ value, onChange, secondary }) {
                 fullWidth={fullScreen}
               />
             </Grid>
-            <Grid item xs={12} sx={{ ml: '2.5em' }}>
+            <Grid size={12} sx={{ ml: '2.5em' }}>
               <FormControl>
                 <FormLabel sx={{ display: 'flex', alignItems: 'center' }}>
                   Does your&nbsp;<b>{schedType}</b>&nbsp;schedule need to have
@@ -208,7 +208,7 @@ export default function WizardScheduleForm({ value, onChange, secondary }) {
 
   return (
     <React.Fragment>
-      <Grid item xs={12} sx={{ ml: '2.5em' }}>
+      <Grid size={12} sx={{ ml: '2.5em' }}>
         <FormField
           component={TimeZoneSelect}
           name={`${key}.timeZone`}
@@ -222,7 +222,7 @@ export default function WizardScheduleForm({ value, onChange, secondary }) {
           required
         />
       </Grid>
-      <Grid item xs={12} sx={{ ml: '2.5em' }}>
+      <Grid size={12} sx={{ ml: '2.5em' }}>
         <FormField
           component={UserSelect}
           data-cy={`${key}.users`}

From c78b700cff77f9809ef22ce7057c22b30a99a683 Mon Sep 17 00:00:00 2001
From: Forfold <nathaniel.cook@target.com>
Date: Fri, 24 Apr 2026 12:49:54 -0700
Subject: [PATCH 24/26] format: prettier and eslint fixes for v7 upgrade

---
 web/src/app/admin/AdminAPIKeys.tsx            |  8 ++----
 web/src/app/admin/AdminLimits.tsx             |  4 +--
 web/src/app/admin/AdminToolbox.tsx            |  1 -
 .../admin-alert-counts/AlertCountControls.tsx |  6 ++---
 .../admin-alert-counts/AlertCountTable.tsx    |  4 +--
 .../AdminAPIKeyExpirationField.tsx            |  1 -
 .../AdminMessageLogsControls.tsx              |  6 ++---
 .../AdminMessageLogsGraph.tsx                 |  7 ++----
 .../AdminMessageLogsLayout.tsx                |  8 +++---
 .../AdminServiceFilter.tsx                    |  6 ++---
 .../AdminServiceMetrics.tsx                   |  8 +++---
 .../AdminServiceTable.tsx                     | 12 ++++-----
 web/src/app/admin/switchover/AdminSWODone.tsx |  2 +-
 .../admin/switchover/AdminSWOWrongMode.tsx    |  2 +-
 web/src/app/alerts/AlertsList.tsx             |  2 +-
 .../CreateAlertDialog/CreateAlertDialog.tsx   |  4 +--
 .../StepContent/CreateAlertConfirm.tsx        |  6 +----
 .../app/alerts/components/AlertDetails.tsx    | 19 ++++----------
 .../alerts/components/AlertsListFilter.tsx    |  8 ++----
 web/src/app/details/DetailsPage.tsx           | 15 ++++++-----
 web/src/app/editor/GraphQLEditor.tsx          |  2 +-
 web/src/app/forms/FormField.jsx               |  4 +--
 web/src/app/lists/ControlledPaginatedList.tsx | 11 ++++----
 web/src/app/lists/ListPageControls.tsx        | 21 ++++++----------
 web/src/app/lists/PageControls.tsx            |  7 +++---
 web/src/app/main/App.tsx                      |  2 +-
 web/src/app/main/NavBar.tsx                   |  9 ++++++-
 web/src/app/main/components/Login.tsx         | 13 ++++++----
 .../main/components/UserSettingsPopover.tsx   | 10 ++++----
 .../app/schedules/ScheduleOverrideDialog.jsx  |  4 ++-
 web/src/app/schedules/ScheduleRuleForm.tsx    | 25 ++++++++++++-------
 web/src/app/schedules/ScheduleShiftList.tsx   |  8 +++---
 .../ScheduleOnCallNotificationsForm.tsx       |  2 +-
 .../schedules/temp-sched/TempSchedDialog.tsx  | 21 ++++++----------
 .../AlertMetrics/AlertMetricsTable.tsx        |  4 +--
 web/src/app/services/IntegrationKeyList.tsx   |  4 +--
 web/src/app/services/ServiceAlerts.tsx        | 12 ++++++---
 .../UniversalKey/UniversalKeyActionsList.tsx  |  3 ++-
 web/src/app/theme/ThemePicker.tsx             |  4 +--
 web/src/app/users/UserContactMethodList.tsx   |  4 +--
 .../UserContactMethodVerificationForm.tsx     |  1 -
 .../app/users/UserNotificationRuleList.tsx    |  8 +-----
 web/src/app/util/FilterContainer.jsx          | 20 +++++++--------
 .../util/calendar/CalendarEventWrapper.tsx    |  6 ++---
 web/src/app/util/calendar/CalendarToolbar.tsx |  4 +--
 web/src/app/wizard/WizardForm.jsx             | 20 ++++-----------
 46 files changed, 156 insertions(+), 202 deletions(-)

diff --git a/web/src/app/admin/AdminAPIKeys.tsx b/web/src/app/admin/AdminAPIKeys.tsx
index 139fb06833..925a7afbcf 100644
--- a/web/src/app/admin/AdminAPIKeys.tsx
+++ b/web/src/app/admin/AdminAPIKeys.tsx
@@ -114,9 +114,7 @@ export default function AdminAPIKeys(): React.JSX.Element {
       ),
       secondaryAction: (
         <Grid container>
-          <Grid size={12}
-            sx={{ display: 'flex', justifyContent: 'flex-end' }}
-          >
+          <Grid size={12} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
             <Typography
               gutterBottom
               variant='subtitle2'
@@ -131,9 +129,7 @@ export default function AdminAPIKeys(): React.JSX.Element {
               )}
             </Typography>
           </Grid>
-          <Grid size={12}
-            sx={{ display: 'flex', justifyContent: 'flex-end' }}
-          >
+          <Grid size={12} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
             <OtherActions
               actions={[
                 {
diff --git a/web/src/app/admin/AdminLimits.tsx b/web/src/app/admin/AdminLimits.tsx
index 27c0580884..3de1d9139c 100644
--- a/web/src/app/admin/AdminLimits.tsx
+++ b/web/src/app/admin/AdminLimits.tsx
@@ -67,9 +67,7 @@ export default function AdminLimits(): React.JSX.Element {
           [theme.breakpoints.up('md')]: { maxWidth: '65%' },
         })}
       >
-        <Grid size={12}
-          sx={{ display: 'flex', justifyContent: 'flex-end' }}
-        >
+        <Grid size={12} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
           <ButtonGroup variant='outlined'>
             <Button
               data-cy='reset'
diff --git a/web/src/app/admin/AdminToolbox.tsx b/web/src/app/admin/AdminToolbox.tsx
index 37f592a159..0ebb27d90b 100644
--- a/web/src/app/admin/AdminToolbox.tsx
+++ b/web/src/app/admin/AdminToolbox.tsx
@@ -6,7 +6,6 @@ import AdminSMSSend from './AdminSMSSend'
 import { useConfigValue } from '../util/RequireConfig'
 
 export default function AdminToolbox(): React.JSX.Element {
-
   const [hasTwilio] = useConfigValue('Twilio.Enable')
 
   if (!hasTwilio) {
diff --git a/web/src/app/admin/admin-alert-counts/AlertCountControls.tsx b/web/src/app/admin/admin-alert-counts/AlertCountControls.tsx
index f1da0376b7..f6502b424c 100644
--- a/web/src/app/admin/admin-alert-counts/AlertCountControls.tsx
+++ b/web/src/app/admin/admin-alert-counts/AlertCountControls.tsx
@@ -31,7 +31,7 @@ export default function AlertCountControls(): React.JSX.Element {
   return (
     <Card>
       <Grid container spacing={1} sx={{ padding: 2 }}>
-        <Grid >
+        <Grid>
           <ISODateTimePicker
             sx={{ minWidth: '325px' }}
             placeholder='Start'
@@ -45,7 +45,7 @@ export default function AlertCountControls(): React.JSX.Element {
             variant='outlined'
           />
         </Grid>
-        <Grid >
+        <Grid>
           <ISODateTimePicker
             sx={{ minWidth: '325px' }}
             placeholder='End'
@@ -80,7 +80,7 @@ export default function AlertCountControls(): React.JSX.Element {
             </Select>
           </FormControl>
         </Grid>
-        <Grid >
+        <Grid>
           <Button
             aria-label='Reset Filters'
             variant='outlined'
diff --git a/web/src/app/admin/admin-alert-counts/AlertCountTable.tsx b/web/src/app/admin/admin-alert-counts/AlertCountTable.tsx
index 784dd8ae1c..642a6a89e8 100644
--- a/web/src/app/admin/admin-alert-counts/AlertCountTable.tsx
+++ b/web/src/app/admin/admin-alert-counts/AlertCountTable.tsx
@@ -115,12 +115,12 @@ export default function AlertCountTable(
     return (
       <GridToolbarContainer className={gridClasses.toolbarContainer}>
         <Grid container justifyContent='space-between'>
-          <Grid >
+          <Grid>
             <GridToolbarColumnsButton />
             <GridToolbarFilterButton />
             <GridToolbarDensitySelector />
           </Grid>
-          <Grid >
+          <Grid>
             <AppLink
               to={link}
               download={`all-services-alert-counts-${props.startTime}-to-${props.endTime}.csv`}
diff --git a/web/src/app/admin/admin-api-keys/AdminAPIKeyExpirationField.tsx b/web/src/app/admin/admin-api-keys/AdminAPIKeyExpirationField.tsx
index 3a784ec32c..94371390e2 100644
--- a/web/src/app/admin/admin-api-keys/AdminAPIKeyExpirationField.tsx
+++ b/web/src/app/admin/admin-api-keys/AdminAPIKeyExpirationField.tsx
@@ -22,7 +22,6 @@ const presets = [7, 15, 30, 60, 90]
 export default function AdminAPIKeyExpirationField(
   props: FieldProps,
 ): React.JSX.Element {
-
   const [selected, setSelected] = useState<number>(
     selectedDaysUntilTimestamp(props.value, presets),
   )
diff --git a/web/src/app/admin/admin-message-logs/AdminMessageLogsControls.tsx b/web/src/app/admin/admin-message-logs/AdminMessageLogsControls.tsx
index 1f18ad84d7..d6b286a769 100644
--- a/web/src/app/admin/admin-message-logs/AdminMessageLogsControls.tsx
+++ b/web/src/app/admin/admin-message-logs/AdminMessageLogsControls.tsx
@@ -14,7 +14,7 @@ export default function AdminMessageLogsControls(): React.JSX.Element {
         <Grid sx={{ flex: 1 }}>
           <Search transition={false} fullWidth />
         </Grid>
-        <Grid >
+        <Grid>
           <ISODateTimePicker
             placeholder='Start'
             name='startDate'
@@ -27,7 +27,7 @@ export default function AdminMessageLogsControls(): React.JSX.Element {
             variant='outlined'
           />
         </Grid>
-        <Grid >
+        <Grid>
           <ISODateTimePicker
             placeholder='End'
             name='endDate'
@@ -40,7 +40,7 @@ export default function AdminMessageLogsControls(): React.JSX.Element {
             variant='outlined'
           />
         </Grid>
-        <Grid >
+        <Grid>
           <Button
             aria-label='Reset Filters'
             variant='outlined'
diff --git a/web/src/app/admin/admin-message-logs/AdminMessageLogsGraph.tsx b/web/src/app/admin/admin-message-logs/AdminMessageLogsGraph.tsx
index ed3cfaa44f..a2c209bd7a 100644
--- a/web/src/app/admin/admin-message-logs/AdminMessageLogsGraph.tsx
+++ b/web/src/app/admin/admin-message-logs/AdminMessageLogsGraph.tsx
@@ -136,7 +136,7 @@ export default function AdminMessageLogsGraph(): React.JSX.Element {
               fontFamily: theme.typography.body2.fontFamily,
             }}
           >
-            <Grid >
+            <Grid>
               <CardContent
                 sx={{ display: 'flex', alignItems: 'center', pt: 0 }}
               >
@@ -157,10 +157,7 @@ export default function AdminMessageLogsGraph(): React.JSX.Element {
                 </Select>
               </CardContent>
             </Grid>
-            <Grid size={12}
-              data-cy='message-logs-graph'
-              sx={{ height: 500 }}
-            >
+            <Grid size={12} data-cy='message-logs-graph' sx={{ height: 500 }}>
               <AutoSizer>
                 {({ width, height }: { width: number; height: number }) => (
                   <LineChart
diff --git a/web/src/app/admin/admin-message-logs/AdminMessageLogsLayout.tsx b/web/src/app/admin/admin-message-logs/AdminMessageLogsLayout.tsx
index f352319962..85c6ac5dff 100644
--- a/web/src/app/admin/admin-message-logs/AdminMessageLogsLayout.tsx
+++ b/web/src/app/admin/admin-message-logs/AdminMessageLogsLayout.tsx
@@ -97,10 +97,10 @@ export default function AdminMessageLogsLayout(): React.JSX.Element {
       title: `${log.type} Notification`,
       subText: (
         <Grid container spacing={2} direction='column'>
-          <Grid >Destination: {log.destination}</Grid>
-          {log.serviceName && <Grid >Service: {log.serviceName}</Grid>}
-          {log.userName && <Grid >User: {log.userName}</Grid>}
-          <Grid >
+          <Grid>Destination: {log.destination}</Grid>
+          {log.serviceName && <Grid>Service: {log.serviceName}</Grid>}
+          {log.userName && <Grid>User: {log.userName}</Grid>}
+          <Grid>
             <Chip label={status} style={statusStyles} />
           </Grid>
         </Grid>
diff --git a/web/src/app/admin/admin-service-metrics/AdminServiceFilter.tsx b/web/src/app/admin/admin-service-metrics/AdminServiceFilter.tsx
index 60e464fd7b..cfa02a1098 100644
--- a/web/src/app/admin/admin-service-metrics/AdminServiceFilter.tsx
+++ b/web/src/app/admin/admin-service-metrics/AdminServiceFilter.tsx
@@ -196,10 +196,8 @@ function AdminServiceFilter(): React.JSX.Element {
   return (
     <React.Fragment>
       <Grid container>
-        <Grid size="grow">
-          {renderFilterChips()}
-        </Grid>
-        <Grid size="grow">
+        <Grid size='grow'>{renderFilterChips()}</Grid>
+        <Grid size='grow'>
           <IconButton
             aria-label='Filter Alerts'
             onClick={() => setOpen(true)}
diff --git a/web/src/app/admin/admin-service-metrics/AdminServiceMetrics.tsx b/web/src/app/admin/admin-service-metrics/AdminServiceMetrics.tsx
index 82b0d79c4e..283a278d46 100644
--- a/web/src/app/admin/admin-service-metrics/AdminServiceMetrics.tsx
+++ b/web/src/app/admin/admin-service-metrics/AdminServiceMetrics.tsx
@@ -179,7 +179,7 @@ export default function AdminServiceMetrics(): React.JSX.Element {
   function renderUsageGraphs(): React.JSX.Element {
     return (
       <React.Fragment>
-        <Grid size="grow">
+        <Grid size='grow'>
           <Card sx={{ marginTop: (theme) => theme.spacing(1) }}>
             <CardHeader
               title='Integration Key Usage'
@@ -198,7 +198,7 @@ export default function AdminServiceMetrics(): React.JSX.Element {
             </CardContent>
           </Card>
         </Grid>
-        <Grid size="grow">
+        <Grid size='grow'>
           <Card sx={{ marginTop: (theme) => theme.spacing(1) }}>
             <CardHeader
               title='Escalation Policy Usage'
@@ -244,9 +244,7 @@ export default function AdminServiceMetrics(): React.JSX.Element {
         <AdminServiceFilter />
       </Grid>
       {renderUsageGraphs()}
-      <Grid size={12}>
-        {renderServiceTable()}
-      </Grid>
+      <Grid size={12}>{renderServiceTable()}</Grid>
     </Grid>
   )
 }
diff --git a/web/src/app/admin/admin-service-metrics/AdminServiceTable.tsx b/web/src/app/admin/admin-service-metrics/AdminServiceTable.tsx
index d3b84b52ad..a34b3e4993 100644
--- a/web/src/app/admin/admin-service-metrics/AdminServiceTable.tsx
+++ b/web/src/app/admin/admin-service-metrics/AdminServiceTable.tsx
@@ -204,13 +204,11 @@ export default function AdminServiceTable(
       valueGetter: (_value: unknown, row: Service) => {
         const targets: DestinationType[] = []
         if (row.escalationPolicy?.steps?.length) {
-          row.escalationPolicy.steps?.map(
-            (step: EscalationPolicyStep) => {
-              step.actions.map((dest: Destination) => {
-                if (!targets.includes(dest.type)) targets.push(dest.type)
-              })
-            },
-          )
+          row.escalationPolicy.steps?.map((step: EscalationPolicyStep) => {
+            step.actions.map((dest: Destination) => {
+              if (!targets.includes(dest.type)) targets.push(dest.type)
+            })
+          })
         }
         return targets.sort().join(', ')
       },
diff --git a/web/src/app/admin/switchover/AdminSWODone.tsx b/web/src/app/admin/switchover/AdminSWODone.tsx
index 67fd71421e..9f9c893a60 100644
--- a/web/src/app/admin/switchover/AdminSWODone.tsx
+++ b/web/src/app/admin/switchover/AdminSWODone.tsx
@@ -14,7 +14,7 @@ export function AdminSWODone(): React.JSX.Element {
             color='primary'
             style={{ width: '100%', height: 256 }}
           />
-          <Grid >
+          <Grid>
             <Typography color='primary' variant='h6' style={{ marginTop: 16 }}>
               DB switchover is complete.
             </Typography>
diff --git a/web/src/app/admin/switchover/AdminSWOWrongMode.tsx b/web/src/app/admin/switchover/AdminSWOWrongMode.tsx
index 69d469103b..ee10a0f5a4 100644
--- a/web/src/app/admin/switchover/AdminSWOWrongMode.tsx
+++ b/web/src/app/admin/switchover/AdminSWOWrongMode.tsx
@@ -7,7 +7,7 @@ export function AdminSWOWrongMode(): React.JSX.Element {
   return (
     <Grid container alignItems='center' justifyContent='center'>
       <DatabaseOff color='secondary' style={{ width: '100%', height: 256 }} />
-      <Grid >
+      <Grid>
         <div style={{ textAlign: 'center' }}>
           <Typography color='secondary' variant='h6' style={{ marginTop: 16 }}>
             Unavailable: Application is not in switchover mode.
diff --git a/web/src/app/alerts/AlertsList.tsx b/web/src/app/alerts/AlertsList.tsx
index c83dd7baf0..1478318545 100644
--- a/web/src/app/alerts/AlertsList.tsx
+++ b/web/src/app/alerts/AlertsList.tsx
@@ -290,7 +290,7 @@ export default function AlertsList(props: AlertsListProps): React.JSX.Element {
     <React.Fragment>
       <Grid container direction='column' spacing={2}>
         <ServiceNotices serviceID={props.serviceID} />
-        <Grid >
+        <Grid>
           <QueryList
             query={alertsListQuery}
             infiniteScroll
diff --git a/web/src/app/alerts/CreateAlertDialog/CreateAlertDialog.tsx b/web/src/app/alerts/CreateAlertDialog/CreateAlertDialog.tsx
index 2366b63cfb..80f4bcb8bc 100644
--- a/web/src/app/alerts/CreateAlertDialog/CreateAlertDialog.tsx
+++ b/web/src/app/alerts/CreateAlertDialog/CreateAlertDialog.tsx
@@ -88,11 +88,11 @@ export default function CreateAlertDialog(props: {
 
     reviewTitle = (
       <Grid container>
-        <Grid >
+        <Grid>
           <Typography>{titleMessage}</Typography>
         </Grid>
         <Grid sx={{ flexGrow: 1 }} />
-        <Grid >
+        <Grid>
           <Button
             variant='contained'
             size='small'
diff --git a/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertConfirm.tsx b/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertConfirm.tsx
index 56fc13aa97..7b1757db47 100644
--- a/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertConfirm.tsx
+++ b/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertConfirm.tsx
@@ -12,11 +12,7 @@ type FieldProps = {
 function Field(props: FieldProps): React.JSX.Element {
   return (
     <Grid size={12}>
-      <Typography
-        variant='subtitle1'
-        component='h3'
-        sx={{ pb: 0 }}
-      >
+      <Typography variant='subtitle1' component='h3' sx={{ pb: 0 }}>
         {props.label}
       </Typography>
 
diff --git a/web/src/app/alerts/components/AlertDetails.tsx b/web/src/app/alerts/components/AlertDetails.tsx
index d0fa42948e..2ef623b43d 100644
--- a/web/src/app/alerts/components/AlertDetails.tsx
+++ b/web/src/app/alerts/components/AlertDetails.tsx
@@ -256,10 +256,7 @@ export default function AlertDetails(
     }
 
     return (
-      <Grid size={12}
-        data-cy='alert-details'
-        sx={gs.cardContainer}
-      >
+      <Grid size={12} data-cy='alert-details' sx={gs.cardContainer}>
         <Card sx={{ width: '100%' }}>
           <CardContent>
             <Typography component='h3' variant='h5'>
@@ -354,7 +351,8 @@ export default function AlertDetails(
       />
 
       {/* Main Alert Info */}
-      <Grid size={{ lg: isMobile || noiseReason !== '' ? 12 : 8 }}
+      <Grid
+        size={{ lg: isMobile || noiseReason !== '' ? 12 : 8 }}
         sx={gs.cardContainer}
       >
         <Card
@@ -401,11 +399,7 @@ export default function AlertDetails(
       <Grid size={12} sx={gs.cardContainer}>
         <Card style={{ width: '100%', overflowX: 'auto' }}>
           <CardContent>
-            <Typography
-              sx={{ pb: 1 }}
-              component='h3'
-              variant='h5'
-            >
+            <Typography sx={{ pb: 1 }} component='h3' variant='h5'>
               <AppLink
                 to={`/escalation-policies/${alert.service?.escalationPolicy?.id}`}
               >
@@ -463,10 +457,7 @@ export default function AlertDetails(
               style={{ padding: '0.5em 0.5em 0 0' }}
             />
           </div>
-          <CardContent
-            sx={gs.tableCardContent}
-            style={{ paddingBottom: 0 }}
-          >
+          <CardContent sx={gs.tableCardContent} style={{ paddingBottom: 0 }}>
             <AlertDetailLogs
               alertID={props.data.alertID}
               showExactTimes={showExactTimes}
diff --git a/web/src/app/alerts/components/AlertsListFilter.tsx b/web/src/app/alerts/components/AlertsListFilter.tsx
index fe3bb19417..64d0e1db3d 100644
--- a/web/src/app/alerts/components/AlertsListFilter.tsx
+++ b/web/src/app/alerts/components/AlertsListFilter.tsx
@@ -71,14 +71,10 @@ function AlertsListFilter(props: AlertsListFilterProps): React.JSX.Element {
         spacing={2}
         sx={[
           { margin: '0.5em' },
-          isMobile
-            ? { width: 'fit-content' }
-            : { width: '17em' },
+          isMobile ? { width: 'fit-content' } : { width: '17em' },
         ]}
       >
-        <Grid size={12}
-          sx={{ display: 'flex', alignItems: 'center' }}
-        >
+        <Grid size={12} sx={{ display: 'flex', alignItems: 'center' }}>
           <FormControl>
             {favoritesFilter}
             <FormControlLabel
diff --git a/web/src/app/details/DetailsPage.tsx b/web/src/app/details/DetailsPage.tsx
index 510ea4f90c..21a3491914 100644
--- a/web/src/app/details/DetailsPage.tsx
+++ b/web/src/app/details/DetailsPage.tsx
@@ -92,12 +92,13 @@ export default function DetailsPage(p: DetailsPageProps): React.JSX.Element {
       {/* Header card */}
       <Grid size={{ xs: 12, lg: !isMobile && p.links?.length ? 8 : 12 }}>
         <Card sx={classes.fullHeight}>
-          <Grid size="grow"
+          <Grid
+            size='grow'
             sx={classes.fullHeight}
             container
             direction='column'
           >
-            <Grid >
+            <Grid>
               <CardHeader
                 title={p.title}
                 subheader={p.subheader}
@@ -117,7 +118,7 @@ export default function DetailsPage(p: DetailsPageProps): React.JSX.Element {
             {p.labels && (
               <Grid container spacing={1} sx={{ pl: '16px', pr: '16px' }}>
                 {p.labels.map((l) => (
-                  <Grid key={l.key} >
+                  <Grid key={l.key}>
                     <Chip label={l.key + ' = ' + l.value} />
                   </Grid>
                 ))}
@@ -137,9 +138,9 @@ export default function DetailsPage(p: DetailsPageProps): React.JSX.Element {
               </Grid>
             )}
 
-            <Grid sx={classes.flexHeight}  />
+            <Grid sx={classes.flexHeight} />
             {(p.primaryActions?.length || p.secondaryActions?.length) && (
-              <Grid >
+              <Grid>
                 <CardActions
                   primaryActions={p.primaryActions}
                   secondaryActions={p.secondaryActions}
@@ -190,9 +191,7 @@ export default function DetailsPage(p: DetailsPageProps): React.JSX.Element {
 
       {/* Primary Page Content */}
       {p.pageContent && (
-        <Grid size={12}
-          sx={isMobile ? classes.smPageBottom : undefined}
-        >
+        <Grid size={12} sx={isMobile ? classes.smPageBottom : undefined}>
           {p.pageContent}
         </Grid>
       )}
diff --git a/web/src/app/editor/GraphQLEditor.tsx b/web/src/app/editor/GraphQLEditor.tsx
index d810d431f9..ac7a4fb89e 100644
--- a/web/src/app/editor/GraphQLEditor.tsx
+++ b/web/src/app/editor/GraphQLEditor.tsx
@@ -46,7 +46,7 @@ export default function GraphQLEditor(
         />
       </Grid>
       {!props.readOnly && (
-        <Grid >
+        <Grid>
           <IconButton
             onClick={() => {
               props.onChange(print(parse(props.value)) + '\n')
diff --git a/web/src/app/forms/FormField.jsx b/web/src/app/forms/FormField.jsx
index 24b055148e..56ab98c24e 100644
--- a/web/src/app/forms/FormField.jsx
+++ b/web/src/app/forms/FormField.jsx
@@ -114,9 +114,7 @@ export function FormField(props) {
   function charCountWrapper(component, count, fieldName) {
     return (
       <Grid container spacing={2}>
-        <Grid size={10}>
-          {component}
-        </Grid>
+        <Grid size={10}>{component}</Grid>
         <Grid size={2}>
           <FormHelperText style={{ textAlign: 'right' }}>
             {value[fieldName].length}/{count}
diff --git a/web/src/app/lists/ControlledPaginatedList.tsx b/web/src/app/lists/ControlledPaginatedList.tsx
index a489690452..5661bb115a 100644
--- a/web/src/app/lists/ControlledPaginatedList.tsx
+++ b/web/src/app/lists/ControlledPaginatedList.tsx
@@ -19,8 +19,6 @@ import Search from '../util/Search'
 import { useURLKey } from '../actions'
 import { useIsWidthDown } from '../util/useWidth'
 
-
-
 export interface ControlledPaginatedListProps
   extends PaginatedListProps,
     ListHeaderProps {
@@ -150,7 +148,7 @@ export default function ControlledPaginatedList(
           width: 'fit-content',
         }}
       >
-        <Grid >
+        <Grid>
           <Checkbox
             sx={{ mt: '4px', mb: '4px', ml: '1em' }}
             checked={
@@ -250,7 +248,8 @@ export default function ControlledPaginatedList(
 
   return (
     <React.Fragment>
-      <Grid size={12}
+      <Grid
+        size={12}
         container
         spacing={2}
         justifyContent='flex-start'
@@ -258,11 +257,11 @@ export default function ControlledPaginatedList(
       >
         {renderActions()}
         {!noSearch && (
-          <Grid >
+          <Grid>
             <Search endAdornment={searchAdornment} />
           </Grid>
         )}
-        {secondaryActions && <Grid >{secondaryActions}</Grid>}
+        {secondaryActions && <Grid>{secondaryActions}</Grid>}
 
         {!hideCreate && renderCreateDialog && !isMobile && (
           <Grid sx={{ ml: 'auto' }}>
diff --git a/web/src/app/lists/ListPageControls.tsx b/web/src/app/lists/ListPageControls.tsx
index 0569d9944b..5462483c8b 100644
--- a/web/src/app/lists/ListPageControls.tsx
+++ b/web/src/app/lists/ListPageControls.tsx
@@ -1,18 +1,11 @@
 import React, { useEffect } from 'react'
-import {
-  Button,
-  Card,
-  CircularProgress,
-  Grid,
-  IconButton,
-} from '@mui/material'
+import { Button, Card, CircularProgress, Grid, IconButton } from '@mui/material'
 import { Add, ChevronLeft, ChevronRight } from '@mui/icons-material'
 import CreateFAB from './CreateFAB'
 import { useIsWidthDown } from '../util/useWidth'
 import { usePages } from '../util/pagination'
 import { useURLKey } from '../actions'
 
-
 type ListPageControlsBaseProps = {
   nextCursor: string | null | undefined
   onCursorChange: (cursor: string) => void
@@ -58,13 +51,14 @@ export default function ListPageControls(
 
   return (
     <Grid container spacing={2}>
-      <Grid size={12}
+      <Grid
+        size={12}
         container
         spacing={2}
         justifyContent='flex-start'
         alignItems='center'
       >
-        {props.slots.search && <Grid >{props.slots.search}</Grid>}
+        {props.slots.search && <Grid>{props.slots.search}</Grid>}
 
         {showCreate && !isMobile && (
           <Grid sx={{ ml: 'auto' }}>
@@ -83,7 +77,8 @@ export default function ListPageControls(
         <Card data-cy='paginated-list'>{props.slots.list}</Card>
       </Grid>
 
-      <Grid size={12} // within main render grid
+      <Grid
+        size={12} // within main render grid
         container // container for control items
         spacing={1}
         justifyContent='flex-end'
@@ -97,7 +92,7 @@ export default function ListPageControls(
           },
         })}
       >
-        <Grid >
+        <Grid>
           <IconButton
             title='back page'
             data-cy='back-button'
@@ -110,7 +105,7 @@ export default function ListPageControls(
             <ChevronLeft />
           </IconButton>
         </Grid>
-        <Grid >
+        <Grid>
           <IconButton
             title='next page'
             data-cy='next-button'
diff --git a/web/src/app/lists/PageControls.tsx b/web/src/app/lists/PageControls.tsx
index 882aa3df80..115f6c7e45 100644
--- a/web/src/app/lists/PageControls.tsx
+++ b/web/src/app/lists/PageControls.tsx
@@ -42,7 +42,8 @@ export function PageControls(props: {
   const onNext = hasNextPage ? handleNextPage : undefined
 
   return (
-    <Grid size={12} // within main render grid
+    <Grid
+      size={12} // within main render grid
       container // container for control items
       spacing={1}
       justifyContent='flex-end'
@@ -56,7 +57,7 @@ export function PageControls(props: {
         },
       })}
     >
-      <Grid >
+      <Grid>
         <IconButton
           title='back page'
           data-cy='back-button'
@@ -69,7 +70,7 @@ export function PageControls(props: {
           <ChevronLeft />
         </IconButton>
       </Grid>
-      <Grid >
+      <Grid>
         <IconButton
           title='next page'
           data-cy='next-button'
diff --git a/web/src/app/main/App.tsx b/web/src/app/main/App.tsx
index 80c0e08dd7..4037eb5a8f 100644
--- a/web/src/app/main/App.tsx
+++ b/web/src/app/main/App.tsx
@@ -134,7 +134,7 @@ export default function App(): React.JSX.Element {
                     justifyContent='center'
                     sx={classes.mainContainer}
                   >
-                    <Grid sx={classes.containerClass} >
+                    <Grid sx={classes.containerClass}>
                       <AppRoutes />
                     </Grid>
                   </Grid>
diff --git a/web/src/app/main/NavBar.tsx b/web/src/app/main/NavBar.tsx
index d01819a875..c809983d43 100644
--- a/web/src/app/main/NavBar.tsx
+++ b/web/src/app/main/NavBar.tsx
@@ -50,7 +50,14 @@ export default function NavBar(): React.JSX.Element {
           justifyContent: 'left',
         }}
       >
-        <a href='/' aria-hidden style={{ ...(theme.mixins.toolbar as React.CSSProperties), paddingLeft: 8 }}>
+        <a
+          href='/'
+          aria-hidden
+          style={{
+            ...(theme.mixins.toolbar as React.CSSProperties),
+            paddingLeft: 8,
+          }}
+        >
           {logo}
         </a>
         <Typography variant='h5' sx={{ pl: 1 }}>
diff --git a/web/src/app/main/components/Login.tsx b/web/src/app/main/components/Login.tsx
index aad75404d8..831bdb3d3b 100644
--- a/web/src/app/main/components/Login.tsx
+++ b/web/src/app/main/components/Login.tsx
@@ -180,9 +180,7 @@ export default function Login(): React.JSX.Element {
       form = (
         <Grid container spacing={2}>
           {fields.map((field: Field) => renderField(field))}
-          <Grid size={12}>
-            {loginButton}
-          </Grid>
+          <Grid size={12}>{loginButton}</Grid>
         </Grid>
       )
     } else {
@@ -221,13 +219,18 @@ export default function Login(): React.JSX.Element {
     )
 
   return (
-    <Box sx={(theme) => ({ ...loginStyles.root, backgroundColor: theme.palette.background.default })}>
+    <Box
+      sx={(theme) => ({
+        ...loginStyles.root,
+        backgroundColor: theme.palette.background.default,
+      })}
+    >
       <div style={loginStyles.center}>
         <Card sx={loginStyles.card}>
           <CardContent>
             <Grid container spacing={2} style={loginStyles.gridContainer}>
               <Grid container sx={{ justifyContent: 'center' }}>
-                <Grid >{logo}</Grid>
+                <Grid>{logo}</Grid>
                 <Grid sx={{ display: 'flex', alignItems: 'center' }}>
                   <Typography variant='h5' sx={{ pl: 1 }}>
                     <b>GoAlert</b>
diff --git a/web/src/app/main/components/UserSettingsPopover.tsx b/web/src/app/main/components/UserSettingsPopover.tsx
index f5972a9b25..b0adc675c0 100644
--- a/web/src/app/main/components/UserSettingsPopover.tsx
+++ b/web/src/app/main/components/UserSettingsPopover.tsx
@@ -48,22 +48,22 @@ export default function UserSettingsPopover(): React.JSX.Element {
         data-cy='manage-profile'
       >
         <Grid container direction='column' spacing={2}>
-          <Grid >
+          <Grid>
             <Typography variant='h5' component='span'>
               Hello, {firstName}!
             </Typography>
           </Grid>
-          <Grid >
+          <Grid>
             <AppLink to='/profile' style={{ textDecoration: 'none' }}>
               <Button variant='outlined' onClick={() => setAnchorEl(null)}>
                 Manage Profile
               </Button>
             </AppLink>
           </Grid>
-          <Grid >
+          <Grid>
             <ThemePicker />
           </Grid>
-          <Grid >
+          <Grid>
             {feedbackEnabled && (
               <AppLink
                 newTab
@@ -80,7 +80,7 @@ export default function UserSettingsPopover(): React.JSX.Element {
               </AppLink>
             )}
           </Grid>
-          <Grid >
+          <Grid>
             <Button
               variant='text'
               startIcon={<Logout />}
diff --git a/web/src/app/schedules/ScheduleOverrideDialog.jsx b/web/src/app/schedules/ScheduleOverrideDialog.jsx
index aefb731e6e..056ff167d0 100644
--- a/web/src/app/schedules/ScheduleOverrideDialog.jsx
+++ b/web/src/app/schedules/ScheduleOverrideDialog.jsx
@@ -96,7 +96,9 @@ export default function ScheduleOverrideDialog(props) {
                     value={variant}
                     control={<Radio />}
                     label={
-                      <div style={{ marginBottom: '.3rem', marginTop: '.3rem' }}>
+                      <div
+                        style={{ marginBottom: '.3rem', marginTop: '.3rem' }}
+                      >
                         <div>{variantDetails[variant].name}</div>
                         <FormHelperText>
                           {variantDetails[variant].helperText}
diff --git a/web/src/app/schedules/ScheduleRuleForm.tsx b/web/src/app/schedules/ScheduleRuleForm.tsx
index fd1537c426..e9773b8ebd 100644
--- a/web/src/app/schedules/ScheduleRuleForm.tsx
+++ b/web/src/app/schedules/ScheduleRuleForm.tsx
@@ -163,7 +163,10 @@ export default function ScheduleRuleForm(
           <TableCell
             key={dayIdx}
             padding='checkbox'
-            sx={[classes.noBorder, { display: { xs: 'none', md: 'table-cell' } }]}
+            sx={[
+              classes.noBorder,
+              { display: { xs: 'none', md: 'table-cell' } },
+            ]}
           >
             <FormField
               noError
@@ -178,7 +181,11 @@ export default function ScheduleRuleForm(
           </TableCell>
         ))}
         <TableCell
-          sx={[classes.dayFilter, classes.noBorder, { display: { xs: 'table-cell', md: 'none' } }]}
+          sx={[
+            classes.dayFilter,
+            classes.noBorder,
+            { display: { xs: 'table-cell', md: 'none' } },
+          ]}
         >
           <FormField
             fullWidth
@@ -257,14 +264,10 @@ export default function ScheduleRuleForm(
           <Table data-cy='target-rules' sx={classes.table}>
             <TableHead>
               <TableRow>
-                <TableCell
-                  sx={[classes.startEnd, classes.noBorder]}
-                >
+                <TableCell sx={[classes.startEnd, classes.noBorder]}>
                   Start
                 </TableCell>
-                <TableCell
-                  sx={[classes.startEnd, classes.noBorder]}
-                >
+                <TableCell sx={[classes.startEnd, classes.noBorder]}>
                   End
                 </TableCell>
                 {days.map((d) => (
@@ -277,7 +280,11 @@ export default function ScheduleRuleForm(
                   </TableCell>
                 ))}
                 <TableCell
-                  sx={[classes.dayFilter, classes.noBorder, { display: { xs: 'table-cell', md: 'none' } }]}
+                  sx={[
+                    classes.dayFilter,
+                    classes.noBorder,
+                    { display: { xs: 'table-cell', md: 'none' } },
+                  ]}
                 >
                   Days
                 </TableCell>
diff --git a/web/src/app/schedules/ScheduleShiftList.tsx b/web/src/app/schedules/ScheduleShiftList.tsx
index f6cf6d3980..8418ea3ed7 100644
--- a/web/src/app/schedules/ScheduleShiftList.tsx
+++ b/web/src/app/schedules/ScheduleShiftList.tsx
@@ -30,6 +30,8 @@ import {
 } from './temp-sched/sharedUtils'
 import { DateTime, DateTimeFormatOptions, Duration, Interval } from 'luxon'
 
+import TempSchedDialog from './temp-sched/TempSchedDialog'
+
 // query name is important, as it's used for refetching data after mutations
 const query = gql`
   query scheduleShifts($id: ID!, $start: ISOTimestamp!, $end: ISOTimestamp!) {
@@ -59,8 +61,6 @@ const durString = (dur: Duration): string => {
   return `${dur.days} day${dur.days > 1 ? 's' : ''}`
 }
 
-import TempSchedDialog from './temp-sched/TempSchedDialog'
-
 interface ScheduleShiftListProps {
   scheduleID: string
 }
@@ -360,9 +360,7 @@ function ScheduleShiftList({
                     fullWidth
                   />
                 </Grid>
-                <Grid size={12}>
-                  {renderDurationSelector()}
-                </Grid>
+                <Grid size={12}>{renderDurationSelector()}</Grid>
                 <Grid size={12}>
                   <UserSelect
                     label='Filter users...'
diff --git a/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsForm.tsx b/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsForm.tsx
index 84eedc3d2f..62351320ed 100644
--- a/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsForm.tsx
+++ b/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsForm.tsx
@@ -86,7 +86,7 @@ export default function ScheduleOnCallNotificationsForm(
   return (
     <FormContainer {...formProps} optionalLabels>
       <Grid container spacing={2} direction='column'>
-        <Grid >
+        <Grid>
           <RadioGroup
             name='ruleType'
             value={ruleType}
diff --git a/web/src/app/schedules/temp-sched/TempSchedDialog.tsx b/web/src/app/schedules/temp-sched/TempSchedDialog.tsx
index 64f0caf22f..769c0d8750 100644
--- a/web/src/app/schedules/temp-sched/TempSchedDialog.tsx
+++ b/web/src/app/schedules/temp-sched/TempSchedDialog.tsx
@@ -315,7 +315,8 @@ export default function TempSchedDialog({
                 justifyContent='space-between'
               >
                 {/* left pane */}
-                <Grid size={{ xs: 12, md: 6 }}
+                <Grid
+                  size={{ xs: 12, md: 6 }}
                   container
                   alignContent='flex-start'
                   spacing={2}
@@ -328,10 +329,7 @@ export default function TempSchedDialog({
                   </Grid>
 
                   <Grid size={12}>
-                    <Typography
-                      color='textSecondary'
-                      sx={classes.tzNote}
-                    >
+                    <Typography color='textSecondary' sx={classes.tzNote}>
                       Times shown in schedule timezone ({zone})
                     </Typography>
                   </Grid>
@@ -441,7 +439,8 @@ export default function TempSchedDialog({
                 </Grid>
 
                 {/* right pane */}
-                <Grid size={{ xs: 12, md: 6 }}
+                <Grid
+                  size={{ xs: 12, md: 6 }}
                   container
                   spacing={2}
                   sx={classes.rightPane}
@@ -456,10 +455,7 @@ export default function TempSchedDialog({
                     </Typography>
 
                     {submitAttempt && hasCoverageGaps && (
-                      <Alert
-                        severity='error'
-                        sx={classes.noCoverageError}
-                      >
+                      <Alert severity='error' sx={classes.noCoverageError}>
                         <AlertTitle>Gaps in coverage</AlertTitle>
                         <FormHelperText>
                           There are gaps in coverage. During these gaps, nobody
@@ -486,10 +482,7 @@ export default function TempSchedDialog({
 
                     {DateTime.fromISO(value.start) >
                       DateTime.utc().minus({ hour: 1 }) || edit ? null : (
-                      <Alert
-                        severity='warning'
-                        sx={classes.noCoverageError}
-                      >
+                      <Alert severity='warning' sx={classes.noCoverageError}>
                         <AlertTitle>Start time occurs in the past</AlertTitle>
                         <FormHelperText>
                           Any shifts or changes made to shifts in the past will
diff --git a/web/src/app/services/AlertMetrics/AlertMetricsTable.tsx b/web/src/app/services/AlertMetrics/AlertMetricsTable.tsx
index 1bcff6e380..fb7543cac6 100644
--- a/web/src/app/services/AlertMetrics/AlertMetricsTable.tsx
+++ b/web/src/app/services/AlertMetrics/AlertMetricsTable.tsx
@@ -141,12 +141,12 @@ export default function AlertMetricsTable(
     return (
       <GridToolbarContainer className={gridClasses.toolbarContainer}>
         <Grid container justifyContent='space-between'>
-          <Grid >
+          <Grid>
             <GridToolbarColumnsButton />
             <GridToolbarFilterButton />
             <GridToolbarDensitySelector />
           </Grid>
-          <Grid >
+          <Grid>
             <AppLink
               to={link}
               download={`${props.serviceName.replace(
diff --git a/web/src/app/services/IntegrationKeyList.tsx b/web/src/app/services/IntegrationKeyList.tsx
index e5a16ebbef..d85e041b84 100644
--- a/web/src/app/services/IntegrationKeyList.tsx
+++ b/web/src/app/services/IntegrationKeyList.tsx
@@ -101,7 +101,7 @@ export default function IntegrationKeyList(props: {
     return (
       <Grid container spacing={2} alignItems='center' wrap='nowrap'>
         {key.type === 'universal' && (
-          <Grid >
+          <Grid>
             <AppLink to={key.id}>
               <Button
                 title='Manage configuration and tokens for this key.'
@@ -113,7 +113,7 @@ export default function IntegrationKeyList(props: {
             </AppLink>
           </Grid>
         )}
-        <Grid >
+        <Grid>
           <IconButton
             title='Delete this key.'
             onClick={(): void => setDeleteDialog(key.id)}
diff --git a/web/src/app/services/ServiceAlerts.tsx b/web/src/app/services/ServiceAlerts.tsx
index d47a5b3305..a754bb084a 100644
--- a/web/src/app/services/ServiceAlerts.tsx
+++ b/web/src/app/services/ServiceAlerts.tsx
@@ -17,7 +17,6 @@ const mutation = gql`
 export default function ServiceAlerts(props: {
   serviceID: string
 }): JSX.Element {
-
   const [alertStatus, setAlertStatus] = useState('')
   const [showDialog, setShowDialog] = useState(false)
   const [mutationStatus, mutate] = useMutation(mutation)
@@ -41,11 +40,16 @@ export default function ServiceAlerts(props: {
   }
 
   const secondaryActions = (
-    <Grid style={{ width: 'fit-content' }} container spacing={2} alignItems='center'>
-      <Grid >
+    <Grid
+      style={{ width: 'fit-content' }}
+      container
+      spacing={2}
+      alignItems='center'
+    >
+      <Grid>
         <AlertsListFilter serviceID={props.serviceID} />
       </Grid>
-      <Grid >
+      <Grid>
         <ButtonGroup variant='outlined'>
           <Button onClick={handleClickAckAll}>Acknowledge All</Button>
           <Button onClick={handleClickCloseAll}>Close All</Button>
diff --git a/web/src/app/services/UniversalKey/UniversalKeyActionsList.tsx b/web/src/app/services/UniversalKey/UniversalKeyActionsList.tsx
index be13eca96f..0019001b96 100644
--- a/web/src/app/services/UniversalKey/UniversalKeyActionsList.tsx
+++ b/web/src/app/services/UniversalKey/UniversalKeyActionsList.tsx
@@ -16,7 +16,8 @@ export default function UniversalKeyActionsList(
 ): React.ReactNode {
   return (
     <React.Fragment>
-      <Grid size={12}
+      <Grid
+        size={12}
         container
         spacing={1}
         sx={{ p: 1 }}
diff --git a/web/src/app/theme/ThemePicker.tsx b/web/src/app/theme/ThemePicker.tsx
index 72e28797ab..01e5c49801 100644
--- a/web/src/app/theme/ThemePicker.tsx
+++ b/web/src/app/theme/ThemePicker.tsx
@@ -29,10 +29,10 @@ export default function ThemePicker(): JSX.Element {
 
   return (
     <Grid container direction='column' spacing={2}>
-      <Grid >
+      <Grid>
         <FormLabel>Appearance</FormLabel>
       </Grid>
-      <Grid >
+      <Grid>
         <ToggleButtonGroup color='primary' value={themeMode}>
           <ToggleButton
             value='light'
diff --git a/web/src/app/users/UserContactMethodList.tsx b/web/src/app/users/UserContactMethodList.tsx
index 2afee04530..bea22463d8 100644
--- a/web/src/app/users/UserContactMethodList.tsx
+++ b/web/src/app/users/UserContactMethodList.tsx
@@ -151,7 +151,7 @@ export default function UserContactMethodList(
     return (
       <Grid container spacing={2} alignItems='center' wrap='nowrap'>
         {cm.disabled && !props.readOnly && !mobile && isCurrentUser && (
-          <Grid >
+          <Grid>
             <Button
               aria-label='Reactivate contact method'
               onClick={() => setShowVerifyDialogByID(cm.id)}
@@ -162,7 +162,7 @@ export default function UserContactMethodList(
           </Grid>
         )}
         {!props.readOnly && (
-          <Grid >
+          <Grid>
             <OtherActions actions={getActionMenuItems(cm)} />
           </Grid>
         )}
diff --git a/web/src/app/users/UserContactMethodVerificationForm.tsx b/web/src/app/users/UserContactMethodVerificationForm.tsx
index bb48dab94a..3f4444779f 100644
--- a/web/src/app/users/UserContactMethodVerificationForm.tsx
+++ b/web/src/app/users/UserContactMethodVerificationForm.tsx
@@ -30,7 +30,6 @@ interface UserContactMethodVerificationFormProps {
 export default function UserContactMethodVerificationForm(
   props: UserContactMethodVerificationFormProps,
 ): React.ReactNode {
-
   const [sendCodeStatus, sendCode] = useMutation(sendVerificationCodeMutation)
 
   function sendAndCatch(): void {
diff --git a/web/src/app/users/UserNotificationRuleList.tsx b/web/src/app/users/UserNotificationRuleList.tsx
index e3760e23ad..cc4d8b834d 100644
--- a/web/src/app/users/UserNotificationRuleList.tsx
+++ b/web/src/app/users/UserNotificationRuleList.tsx
@@ -1,12 +1,6 @@
 import React, { useState, ReactNode, Suspense } from 'react'
 import { gql, useQuery } from 'urql'
-import {
-  Button,
-  Card,
-  CardHeader,
-  Grid,
-  IconButton,
-} from '@mui/material'
+import { Button, Card, CardHeader, Grid, IconButton } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
 import { Add, Delete } from '@mui/icons-material'
 import { formatNotificationRule, sortNotificationRules } from './util'
diff --git a/web/src/app/util/FilterContainer.jsx b/web/src/app/util/FilterContainer.jsx
index 2363ef37e0..772fc75ff6 100644
--- a/web/src/app/util/FilterContainer.jsx
+++ b/web/src/app/util/FilterContainer.jsx
@@ -21,16 +21,16 @@ export default function FilterContainer(props) {
 
   function renderContent() {
     return (
-      <Grid container spacing={2} sx={(theme) => ({
-        padding: 1,
-        [theme.breakpoints.up('md')]: { width: '22em' },
-        [theme.breakpoints.down('md')]: { width: '100%' },
-      })}>
-        <Grid size={12}
-          container
-          spacing={2}
-          sx={{ margin: 0 }}
-        >
+      <Grid
+        container
+        spacing={2}
+        sx={(theme) => ({
+          padding: 1,
+          [theme.breakpoints.up('md')]: { width: '22em' },
+          [theme.breakpoints.down('md')]: { width: '100%' },
+        })}
+      >
+        <Grid size={12} container spacing={2} sx={{ margin: 0 }}>
           {props.children}
         </Grid>
         <Grid size={12} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
diff --git a/web/src/app/util/calendar/CalendarEventWrapper.tsx b/web/src/app/util/calendar/CalendarEventWrapper.tsx
index f911d7ee4e..18f6b48121 100644
--- a/web/src/app/util/calendar/CalendarEventWrapper.tsx
+++ b/web/src/app/util/calendar/CalendarEventWrapper.tsx
@@ -25,8 +25,6 @@ import {
 } from './Calendar'
 import AppLink from '../AppLink'
 
-
-
 interface ScheduleCalendarEventWrapperProps {
   children: JSX.Element
   event: ScheduleCalendarEvent
@@ -136,7 +134,7 @@ export default function ScheduleCalendarEventWrapper({
     return (
       <React.Fragment>
         <Grid sx={{ flexGrow: 1 }} />
-        <Grid >
+        <Grid>
           <Button
             data-cy='override'
             size='small'
@@ -157,7 +155,7 @@ export default function ScheduleCalendarEventWrapper({
       return (
         <React.Fragment>
           <Grid sx={{ flexGrow: 1 }} />
-          <Grid >
+          <Grid>
             <Button
               variant='contained'
               component={AppLink}
diff --git a/web/src/app/util/calendar/CalendarToolbar.tsx b/web/src/app/util/calendar/CalendarToolbar.tsx
index bc232d2494..ca964c24b4 100644
--- a/web/src/app/util/calendar/CalendarToolbar.tsx
+++ b/web/src/app/util/calendar/CalendarToolbar.tsx
@@ -115,7 +115,7 @@ function ScheduleCalendarToolbar(
       justifyContent='space-between'
       alignItems='center'
     >
-      <Grid >
+      <Grid>
         <Grid container alignItems='center'>
           <Button
             data-cy='show-today'
@@ -156,7 +156,7 @@ function ScheduleCalendarToolbar(
         </Grid>
       </Grid>
 
-      <Grid >
+      <Grid>
         <Grid container alignItems='center' justifyContent='flex-end'>
           {props.filter}
           <ButtonGroup aria-label='Toggle between Monthly and Weekly views'>
diff --git a/web/src/app/wizard/WizardForm.jsx b/web/src/app/wizard/WizardForm.jsx
index 6a9aff9307..c57600035c 100644
--- a/web/src/app/wizard/WizardForm.jsx
+++ b/web/src/app/wizard/WizardForm.jsx
@@ -50,9 +50,7 @@ export default function WizardForm(props) {
         <Grid sx={{ display: 'flex', alignItems: 'center' }}>
           <StepIcon icon='1' />
         </Grid>
-        <Grid size={10}>
-          {sectionHeading('Team Details')}
-        </Grid>
+        <Grid size={10}>{sectionHeading('Team Details')}</Grid>
         <Grid size={12} sx={{ ml: '2.5em' }}>
           <FormField
             component={TextField}
@@ -67,16 +65,12 @@ export default function WizardForm(props) {
         <Grid sx={{ display: 'flex', alignItems: 'center' }}>
           <StepIcon icon='2' />
         </Grid>
-        <Grid size={10}>
-          {sectionHeading('Primary Schedule')}
-        </Grid>
+        <Grid size={10}>{sectionHeading('Primary Schedule')}</Grid>
         <WizardScheduleForm onChange={onChange} value={value} />
         <Grid sx={{ display: 'flex', alignItems: 'center' }}>
           <StepIcon icon='3' />
         </Grid>
-        <Grid size={10}>
-          {sectionHeading('Secondary Schedule')}
-        </Grid>
+        <Grid size={10}>{sectionHeading('Secondary Schedule')}</Grid>
         <Grid size={12} sx={{ ml: '2.5em' }}>
           <FormControl>
             <FormLabel>
@@ -110,9 +104,7 @@ export default function WizardForm(props) {
         <Grid sx={{ display: 'flex', alignItems: 'center' }}>
           <StepIcon icon='4' />
         </Grid>
-        <Grid size={10}>
-          {sectionHeading('Escalation Policy')}
-        </Grid>
+        <Grid size={10}>{sectionHeading('Escalation Policy')}</Grid>
         <Grid size={12} sx={{ ml: '2.5em' }}>
           <FormField
             component={TextField}
@@ -147,9 +139,7 @@ export default function WizardForm(props) {
         <Grid sx={{ display: 'flex', alignItems: 'center' }}>
           <StepIcon icon='5' />
         </Grid>
-        <Grid size={10}>
-          {sectionHeading('Service')}
-        </Grid>
+        <Grid size={10}>{sectionHeading('Service')}</Grid>
         <Grid size={12} sx={{ ml: '2.5em' }}>
           <FormField
             component={MaterialSelect}

From e4cb8629aa41a9ea2b6d6f575112976185cbeaaf Mon Sep 17 00:00:00 2001
From: Forfold <nathaniel.cook@target.com>
Date: Fri, 24 Apr 2026 12:55:42 -0700
Subject: [PATCH 25/26] make check output and fixes

---
 bun.lock                                      |  1 +
 package.json                                  |  2 +-
 web/src/app/admin/AdminSection.tsx            |  6 +--
 .../AdminMessageLogDrawer.tsx                 | 15 ++-----
 web/src/app/details/CardActions.tsx           |  1 -
 web/src/app/dialogs/FormDialog.jsx            |  8 +++-
 web/src/app/lists/PaginatedList.tsx           | 12 +++++-
 web/src/app/main/NavBarLink.tsx               | 12 +++---
 .../temp-sched/TempSchedShiftsList.tsx        |  9 +++-
 web/src/app/selection/MaterialSelect.tsx      | 20 +++++----
 web/src/app/services/ServiceOnCallList.tsx    |  6 +--
 web/src/app/styles/materialStyles.ts          |  4 +-
 web/src/app/util/Search.jsx                   | 41 ++++++++++---------
 13 files changed, 76 insertions(+), 61 deletions(-)

diff --git a/bun.lock b/bun.lock
index 5eff492cc6..7644e3ef75 100644
--- a/bun.lock
+++ b/bun.lock
@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "devDependencies": {
diff --git a/package.json b/package.json
index 6ff38942d8..caa0372680 100644
--- a/package.json
+++ b/package.json
@@ -157,4 +157,4 @@
   "msw": {
     "workerDirectory": ".storybook/static"
   }
-}
\ No newline at end of file
+}
diff --git a/web/src/app/admin/AdminSection.tsx b/web/src/app/admin/AdminSection.tsx
index 8637961757..f2ebec64c1 100644
--- a/web/src/app/admin/AdminSection.tsx
+++ b/web/src/app/admin/AdminSection.tsx
@@ -58,12 +58,10 @@ export default function AdminSection(
           return (
             <ListItem
               key={f.id}
-              sx={(theme) => ({
+              sx={() => ({
                 minHeight: '71px',
                 padding: '1em',
-                ...(_.has(value, f.id)
-                  ? { bgcolor: 'action.selected' }
-                  : {}),
+                ...(_.has(value, f.id) ? { bgcolor: 'action.selected' } : {}),
               })}
               divider={idx !== fields.length - 1}
             >
diff --git a/web/src/app/admin/admin-message-logs/AdminMessageLogDrawer.tsx b/web/src/app/admin/admin-message-logs/AdminMessageLogDrawer.tsx
index 8b3e1c2138..297cbbd15e 100644
--- a/web/src/app/admin/admin-message-logs/AdminMessageLogDrawer.tsx
+++ b/web/src/app/admin/admin-message-logs/AdminMessageLogDrawer.tsx
@@ -105,10 +105,7 @@ export default function AdminMessageLogDrawer(props: Props): React.JSX.Element {
                       newTab
                     >
                       {log.userName}
-                      <OpenInNew
-                        sx={{ pl: 0.5 }}
-                        fontSize='small'
-                      />
+                      <OpenInNew sx={{ pl: 0.5 }} fontSize='small' />
                     </AppLink>
                   }
                   secondaryTypographyProps={{ component: 'div' }}
@@ -126,10 +123,7 @@ export default function AdminMessageLogDrawer(props: Props): React.JSX.Element {
                       newTab
                     >
                       {log.serviceName}
-                      <OpenInNew
-                        sx={{ pl: 0.5 }}
-                        fontSize='small'
-                      />
+                      <OpenInNew sx={{ pl: 0.5 }} fontSize='small' />
                     </AppLink>
                   }
                   secondaryTypographyProps={{ component: 'div' }}
@@ -147,10 +141,7 @@ export default function AdminMessageLogDrawer(props: Props): React.JSX.Element {
                       newTab
                     >
                       {log.alertID}
-                      <OpenInNew
-                        sx={{ pl: 0.5 }}
-                        fontSize='small'
-                      />
+                      <OpenInNew sx={{ pl: 0.5 }} fontSize='small' />
                     </AppLink>
                   }
                   secondaryTypographyProps={{ component: 'div' }}
diff --git a/web/src/app/details/CardActions.tsx b/web/src/app/details/CardActions.tsx
index 60919032dd..1e25775f89 100644
--- a/web/src/app/details/CardActions.tsx
+++ b/web/src/app/details/CardActions.tsx
@@ -23,7 +23,6 @@ export type Action = {
 }
 
 export default function CardActions(p: CardActionProps): React.JSX.Element {
-
   const action = (
     action: Action | JSX.Element,
     key: string,
diff --git a/web/src/app/dialogs/FormDialog.jsx b/web/src/app/dialogs/FormDialog.jsx
index 1f9bcad650..38f3c88a46 100644
--- a/web/src/app/dialogs/FormDialog.jsx
+++ b/web/src/app/dialogs/FormDialog.jsx
@@ -63,7 +63,13 @@ export default function FormDialog(props) {
     return (
       <DialogContent sx={{ height: '100%', paddingTop: '8px' }}>
         <Form
-          style={{ paddingTop: '1em', width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}
+          style={{
+            paddingTop: '1em',
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+          }}
           id='dialog-form'
           onSubmit={(e, valid) => {
             e.preventDefault()
diff --git a/web/src/app/lists/PaginatedList.tsx b/web/src/app/lists/PaginatedList.tsx
index a107a645a1..d6b09815e9 100644
--- a/web/src/app/lists/PaginatedList.tsx
+++ b/web/src/app/lists/PaginatedList.tsx
@@ -155,7 +155,9 @@ export function PaginatedList(props: PaginatedListProps): React.JSX.Element {
           }}
         />
         {favIcon}
-        {item.action && <div style={{ paddingLeft: '14px' }}>{item.action}</div>}
+        {item.action && (
+          <div style={{ paddingLeft: '14px' }}>{item.action}</div>
+        )}
       </React.Fragment>
     )
 
@@ -243,7 +245,13 @@ export function PaginatedList(props: PaginatedListProps): React.JSX.Element {
           )
         }
         loader={
-          <div style={{ display: 'flex', justifyContent: 'center', padding: '0.25em 0 0.25em 0' }}>
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              padding: '0.25em 0 0.25em 0',
+            }}
+          >
             <Spinner text='Loading...' />
           </div>
         }
diff --git a/web/src/app/main/NavBarLink.tsx b/web/src/app/main/NavBarLink.tsx
index 357ae4904a..b02ae7e002 100644
--- a/web/src/app/main/NavBarLink.tsx
+++ b/web/src/app/main/NavBarLink.tsx
@@ -13,7 +13,12 @@ import AppLink from '../util/AppLink'
 import { OpenInNew } from '@mui/icons-material'
 import { useTheme } from '@mui/material/styles'
 
-function useNavClasses(theme: Theme) {
+function useNavClasses(theme: Theme): {
+  nav: SxProps<Theme>
+  navSelected: SxProps<Theme>
+  subMenuLinkText: SxProps<Theme>
+  dropdown: (open: boolean) => SxProps<Theme>
+} {
   const { nav, navSelected } = styles(theme)
   return {
     nav: nav as SxProps<Theme>,
@@ -99,10 +104,7 @@ export default function NavBarLink({
             }
           />
           {children && (
-            <ExpandMoreIcon
-              color='action'
-              sx={classes.dropdown(isRoute)}
-            />
+            <ExpandMoreIcon color='action' sx={classes.dropdown(isRoute)} />
           )}
         </ListItemButton>
       </AppLink>
diff --git a/web/src/app/schedules/temp-sched/TempSchedShiftsList.tsx b/web/src/app/schedules/temp-sched/TempSchedShiftsList.tsx
index 107fcfbdf1..9326f35a56 100644
--- a/web/src/app/schedules/temp-sched/TempSchedShiftsList.tsx
+++ b/web/src/app/schedules/temp-sched/TempSchedShiftsList.tsx
@@ -79,7 +79,14 @@ export default function TempSchedShiftsList({
   // wait for zone
   if (zone === '') {
     return (
-      <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'column', marginTop: '15rem' }}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          flexDirection: 'column',
+          marginTop: '15rem',
+        }}
+      >
         <CircularProgress />
       </div>
     )
diff --git a/web/src/app/selection/MaterialSelect.tsx b/web/src/app/selection/MaterialSelect.tsx
index c410449b5e..413e105b0c 100644
--- a/web/src/app/selection/MaterialSelect.tsx
+++ b/web/src/app/selection/MaterialSelect.tsx
@@ -125,7 +125,9 @@ export default function MaterialSelect(
   const autocompleteSx = {
     [`& .${autocompleteClasses.option}`]: { padding: 0 },
     [`& .${autocompleteClasses.clearIndicator}`]: { display: 'none' },
-    ...(noOptionsError ? { [`& .${autocompleteClasses.noOptions}`]: { padding: 0 } } : {}),
+    ...(noOptionsError
+      ? { [`& .${autocompleteClasses.noOptions}`]: { padding: 0 } }
+      : {}),
   }
 
   function isSelected(val: string): boolean {
@@ -241,15 +243,19 @@ export default function MaterialSelect(
           selected={isSelected(value)}
           data-cy='search-select-item'
         >
-          <List sx={{ width: '100%', display: 'flex', flexDirection: 'row', alignItems: 'center', p: 0 }}>
+          <List
+            sx={{
+              width: '100%',
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+              p: 0,
+            }}
+          >
             <ListItem>
               <ListItemText primary={label} secondary={subText || null} />
             </ListItem>
-            {icon && (
-              <ListItemIcon sx={{ minWidth: 0 }}>
-                {icon}
-              </ListItemIcon>
-            )}
+            {icon && <ListItemIcon sx={{ minWidth: 0 }}>{icon}</ListItemIcon>}
             {disableCloseOnSelect && isSelected(value) && (
               <ListItemIcon sx={{ minWidth: 0 }}>
                 <Check color='info' />
diff --git a/web/src/app/services/ServiceOnCallList.tsx b/web/src/app/services/ServiceOnCallList.tsx
index 6ac539bace..04dac2abdf 100644
--- a/web/src/app/services/ServiceOnCallList.tsx
+++ b/web/src/app/services/ServiceOnCallList.tsx
@@ -85,11 +85,7 @@ export default function ServiceOnCallList({
 
   return (
     <Card>
-      <CardHeader
-        sx={gs.cardHeader}
-        component='h3'
-        title='On Call Users'
-      />
+      <CardHeader sx={gs.cardHeader} component='h3' title='On Call Users' />
       <CompList emptyMessage='No users on-call for this service'>
         {error && (
           <CompListItemText
diff --git a/web/src/app/styles/materialStyles.ts b/web/src/app/styles/materialStyles.ts
index 5328f9cfb6..40e4299522 100644
--- a/web/src/app/styles/materialStyles.ts
+++ b/web/src/app/styles/materialStyles.ts
@@ -1,9 +1,7 @@
 import { Theme } from '@mui/material/styles'
 import { SxProps } from '@mui/material'
 
-export const styles = (
-  theme: Theme,
-): Record<string, SxProps<Theme>> => ({
+export const styles = (theme: Theme): Record<string, SxProps<Theme>> => ({
   // used on details pages on desktop
   card: {
     width: '75%',
diff --git a/web/src/app/util/Search.jsx b/web/src/app/util/Search.jsx
index 135945920b..08de9029df 100644
--- a/web/src/app/util/Search.jsx
+++ b/web/src/app/util/Search.jsx
@@ -75,25 +75,28 @@ export default function Search(props) {
           minWidth: 250,
           backgroundColor: theme.palette.mode === 'dark' ? 'inherit' : 'white',
           borderRadius: '4px',
-          ...((props.transition ?? true) ? {
-            [theme.breakpoints.down('md')]: {
-              flex: 1,
-            },
-            [theme.breakpoints.up('md')]: {
-              '& input:focus': {
-                minWidth: 275,
-              },
-              '& input:not(:placeholder-shown)': {
-                minWidth: 275,
-              },
-              '& input': {
-                minWidth: 180,
-                transitionProperty: 'min-width',
-                transitionDuration: theme.transitions.duration.standard,
-                transitionTimingFunction: theme.transitions.easing.easeInOut,
-              },
-            },
-          } : {}),
+          ...((props.transition ?? true)
+            ? {
+                [theme.breakpoints.down('md')]: {
+                  flex: 1,
+                },
+                [theme.breakpoints.up('md')]: {
+                  '& input:focus': {
+                    minWidth: 275,
+                  },
+                  '& input:not(:placeholder-shown)': {
+                    minWidth: 275,
+                  },
+                  '& input': {
+                    minWidth: 180,
+                    transitionProperty: 'min-width',
+                    transitionDuration: theme.transitions.duration.standard,
+                    transitionTimingFunction:
+                      theme.transitions.easing.easeInOut,
+                  },
+                },
+              }
+            : {}),
         })}
       />
     )

From 2c982735e55232976110b69fc79d687fee430c6a Mon Sep 17 00:00:00 2001
From: Forfold <nathaniel.cook@target.com>
Date: Fri, 24 Apr 2026 13:00:49 -0700
Subject: [PATCH 26/26] make check fixes

---
 web/src/app/forms/Form.jsx                 | 1 +
 web/src/app/forms/FormField.jsx            | 1 +
 web/src/app/schedules/ScheduleRuleForm.tsx | 2 +-
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/web/src/app/forms/Form.jsx b/web/src/app/forms/Form.jsx
index 0ca2489744..d76f87b313 100644
--- a/web/src/app/forms/Form.jsx
+++ b/web/src/app/forms/Form.jsx
@@ -47,4 +47,5 @@ Form.propTypes = {
   disabled: p.bool,
   children: p.node,
   className: p.string,
+  style: p.object,
 }
diff --git a/web/src/app/forms/FormField.jsx b/web/src/app/forms/FormField.jsx
index 56ab98c24e..884c1bf213 100644
--- a/web/src/app/forms/FormField.jsx
+++ b/web/src/app/forms/FormField.jsx
@@ -226,6 +226,7 @@ FormField.propTypes = {
   float: p.bool,
 
   className: p.string,
+  style: p.object,
 
   // fieldName specifies the field used for
   // checking errors, change handlers, and value.
diff --git a/web/src/app/schedules/ScheduleRuleForm.tsx b/web/src/app/schedules/ScheduleRuleForm.tsx
index e9773b8ebd..6c11283c8a 100644
--- a/web/src/app/schedules/ScheduleRuleForm.tsx
+++ b/web/src/app/schedules/ScheduleRuleForm.tsx
@@ -170,7 +170,7 @@ export default function ScheduleRuleForm(
           >
             <FormField
               noError
-              sx={[classes.noPadding, { padding: 0 }]}
+              style={{ padding: 0 }}
               component={Checkbox}
               checkbox
               disabled={disabled}