diff --git a/apps/frontend/declaration.d.ts b/apps/frontend/declaration.d.ts
index a75e93ab..9574e152 100644
--- a/apps/frontend/declaration.d.ts
+++ b/apps/frontend/declaration.d.ts
@@ -1,6 +1,7 @@
+import { PaletteColorOptions, PaletteOptions } from '@mui/material/styles';
 declare module 'react-map-gl-geocoder';
 declare module 'mic-recorder-to-mp3';
 
 interface Window {
     webkitAudioContext: typeof AudioContext
-}
\ No newline at end of file
+}
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 87570eaf..a3405570 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -15,10 +15,8 @@
   },
   "dependencies": {
     "@3dp4me/types": "workspace:*",
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
-    "@material-ui/lab": "^4.0.0-alpha.56",
-    "@material/tabs": "^2.3.0",
+    "@mui/icons-material": "^6.4.5",
+    "@mui/material": "^6.4.5",
     "@sweetalert/with-react": "^0.1.1",
     "@tanstack/react-query": "^5.17.19",
     "@vis.gl/react-google-maps": "^1.4.2",
@@ -57,7 +55,6 @@
     "@babel/core": "^7.23.3",
     "@babel/preset-env": "^7.23.3",
     "@babel/preset-react": "^7.23.3",
-    "@material-ui/styles": "^4.11.5",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-image": "^3.0.3",
     "@rollup/plugin-json": "^6.0.1",
diff --git a/apps/frontend/src/AppContent.tsx b/apps/frontend/src/AppContent.tsx
index 10271dfc..cb967894 100644
--- a/apps/frontend/src/AppContent.tsx
+++ b/apps/frontend/src/AppContent.tsx
@@ -1,4 +1,5 @@
 import { Language } from '@3dp4me/types'
+import { createTheme, StyledEngineProvider, ThemeOptions, ThemeProvider } from '@mui/material'
 import React, { useContext, useEffect } from 'react'
 import { trackPromise } from 'react-promise-tracker'
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
@@ -19,7 +20,7 @@ import PatientDetail from './pages/PatientDetail/PatientDetail'
 import Patients from './pages/Patients/Patients'
 import { ReducerActionType } from './store/Reducer'
 import { Context } from './store/Store'
-import { CognitoAttribute, Routes } from './utils/constants'
+import { CognitoAttribute, LANGUAGES, Routes } from './utils/constants'
 import { isLanguageValid } from './utils/language'
 
 interface AppContentProps {
@@ -27,6 +28,30 @@ interface AppContentProps {
     userEmail: string
 }
 
+const theme: ThemeOptions = {
+    palette: {
+        primary: {
+            main: '#3f51b5',
+        },
+        secondary: {
+            main: '#dedffb',
+        },
+    },
+    typography: {
+        fontFamily: '"Roboto", sans-serif',
+    },
+}
+
+const arTheme = createTheme({
+    ...theme,
+    direction: 'rtl',
+})
+
+const enTheme = createTheme({
+    ...theme,
+    direction: 'ltr',
+})
+
 const AppContent = ({ username, userEmail }: AppContentProps) => {
     const errorWrap = useErrorWrap()
     const [state, dispatch] = useContext(Context)
@@ -78,38 +103,42 @@ const AppContent = ({ username, userEmail }: AppContentProps) => {
             <LoadingIndicator />
             <Router>
                 <QueryParamProvider ReactRouterRoute={Route}>
-                    <Navbar username={username} userEmail={userEmail} />
+                    <StyledEngineProvider injectFirst>
+                        <ThemeProvider theme={selectedLang === LANGUAGES.AR ? arTheme : enTheme}>
+                            <Navbar username={username} userEmail={userEmail} />
 
-                    {/* Global error popup */}
-                    <ErrorModal
-                        message={state.error}
-                        isOpen={!!state.isErrorVisible}
-                        onClose={handleErrorModalClose}
-                    />
+                            {/* Global error popup */}
+                            <ErrorModal
+                                message={state.error}
+                                isOpen={!!state.isErrorVisible}
+                                onClose={handleErrorModalClose}
+                            />
 
-                    {/* Routes */}
-                    <div className={contentClassNames}>
-                        <Switch>
-                            <Route exact path={Routes.DASHBOARD}>
-                                <Dashboard />
-                            </Route>
-                            <Route exact path={Routes.ACCOUNT}>
-                                <AccountManagement />
-                            </Route>
-                            <Route exact path={Routes.PATIENTS}>
-                                <Patients />
-                            </Route>
-                            <Route exact path={Routes.DASHBOARD_MANAGEMENT}>
-                                <DashboardManagement />
-                            </Route>
-                            <Route exact path={`${Routes.PATIENT_2FA}/:patientId`}>
-                                <Patient2FA />
-                            </Route>
-                            <Route exact path={`${Routes.PATIENT_DETAIL}/:patientId`}>
-                                <PatientDetail />
-                            </Route>
-                        </Switch>
-                    </div>
+                            {/* Routes */}
+                            <div className={contentClassNames}>
+                                <Switch>
+                                    <Route exact path={Routes.DASHBOARD}>
+                                        <Dashboard />
+                                    </Route>
+                                    <Route exact path={Routes.ACCOUNT}>
+                                        <AccountManagement />
+                                    </Route>
+                                    <Route exact path={Routes.PATIENTS}>
+                                        <Patients />
+                                    </Route>
+                                    <Route exact path={Routes.DASHBOARD_MANAGEMENT}>
+                                        <DashboardManagement />
+                                    </Route>
+                                    <Route exact path={`${Routes.PATIENT_2FA}/:patientId`}>
+                                        <Patient2FA />
+                                    </Route>
+                                    <Route exact path={`${Routes.PATIENT_DETAIL}/:patientId`}>
+                                        <PatientDetail />
+                                    </Route>
+                                </Switch>
+                            </div>
+                        </ThemeProvider>
+                    </StyledEngineProvider>
                 </QueryParamProvider>
             </Router>
         </div>
diff --git a/apps/frontend/src/components/AccountDropdown/AccountDropdown.styles.ts b/apps/frontend/src/components/AccountDropdown/AccountDropdown.styles.ts
deleted file mode 100644
index a6abe1e0..00000000
--- a/apps/frontend/src/components/AccountDropdown/AccountDropdown.styles.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import makeStyles from '@material-ui/core/styles/makeStyles'
-
-export const useStyles = makeStyles({
-    menuWrapper: {
-        margin: '10px',
-        width: 'fit-content',
-        display: 'block',
-    },
-    accountEmail: {
-        color: 'grey',
-        lineHeight: '0px',
-    },
-    languageSelector: {
-        height: '50px',
-    },
-    signOutButton: {
-        height: '38px',
-        fontSize: '1em',
-        fontWeight: 'bold',
-        backgroundColor: '#ca0909',
-        color: 'white',
-        marginTop: '10px',
-        width: '100%',
-        '&:hover': {
-            background: '#ca0909',
-        },
-    },
-})
diff --git a/apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx b/apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx
index 1452f404..b72fe9ce 100644
--- a/apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx
+++ b/apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx
@@ -1,41 +1,69 @@
 import { Language } from '@3dp4me/types'
-import Button from '@material-ui/core/Button'
-import FormControl from '@material-ui/core/FormControl'
-import Menu from '@material-ui/core/Menu'
-import MenuItem from '@material-ui/core/MenuItem'
-import Select from '@material-ui/core/Select'
-import React, { ChangeEvent, useContext } from 'react'
+import { PopoverVirtualElement, styled } from '@mui/material'
+import Button from '@mui/material/Button'
+import FormControl from '@mui/material/FormControl'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
+import Select, { SelectChangeEvent } from '@mui/material/Select'
+import React, { useContext } from 'react'
 
 import { saveLanguagePreference, signOut } from '../../aws/aws-helper'
 import { useTranslations } from '../../hooks/useTranslations'
 import { ReducerActionType } from '../../store/Reducer'
 import { Context } from '../../store/Store'
 import { isLanguageValid } from '../../utils/language'
-import { useStyles } from './AccountDropdown.styles'
 
 export interface AccountDropdownProps {
-    anchorEl: Element | ((element: Element) => Element) | null | undefined
     handleClose: () => void
     username: string
     userEmail: string
+    anchorEl:
+        | Element
+        | (() => Element)
+        | PopoverVirtualElement
+        | (() => PopoverVirtualElement)
+        | null
+        | undefined
 }
 
+const MenuWrapper = styled('div')({
+    margin: '10px',
+    width: 'fit-content',
+    display: 'block',
+})
+
+const AccountEmail = styled('p')({
+    color: 'grey',
+    lineHeight: '0px',
+})
+
+const LanguageSelector = styled(Select<Language>)({
+    height: 50,
+})
+
+const SignoutButton = styled(Button)({
+    height: '38px',
+    fontSize: '1em',
+    fontWeight: 'bold',
+    backgroundColor: '#ca0909',
+    color: 'white',
+    marginTop: '10px',
+    width: '100%',
+    '&:hover': {
+        background: '#ca0909',
+    },
+})
+
 const AccountDropdown = ({
-    anchorEl,
     handleClose,
     username = '',
     userEmail = '',
+    anchorEl,
 }: AccountDropdownProps) => {
-    const styles = useStyles()
     const dispatch = useContext(Context)[1]
     const [translations, selectedLang] = useTranslations()
 
-    const handleLanguageSelect = (
-        e: ChangeEvent<{
-            name?: string | undefined
-            value: unknown
-        }>
-    ) => {
+    const handleLanguageSelect = (e: SelectChangeEvent<Language>) => {
         if (typeof e.target.value !== 'string') return
         if (!isLanguageValid(e.target.value)) return
 
@@ -50,35 +78,30 @@ const AccountDropdown = ({
         <div>
             <Menu
                 id="account-dropdown-menu"
-                anchorEl={anchorEl}
-                getContentAnchorEl={null}
                 anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
                 keepMounted
                 open={Boolean(anchorEl)}
                 onClose={handleClose}
+                anchorEl={anchorEl}
             >
-                <div className={styles.menuWrapper}>
+                <MenuWrapper>
                     <p>{username}</p>
-                    <p className={styles.accountEmail}>{userEmail}</p>
+                    <AccountEmail>{userEmail}</AccountEmail>
                     <p>{translations.components.navbar.dropdown.language}</p>
                     <FormControl fullWidth variant="outlined">
-                        <Select
-                            value={selectedLang}
-                            onChange={handleLanguageSelect}
-                            className={styles.languageSelector}
-                        >
+                        <LanguageSelector value={selectedLang} onChange={handleLanguageSelect}>
                             <MenuItem value={Language.EN}>
                                 {translations.components.navbar.dropdown.EN}
                             </MenuItem>
                             <MenuItem value={Language.AR}>
                                 {translations.components.navbar.dropdown.AR}
                             </MenuItem>
-                        </Select>
+                        </LanguageSelector>
                     </FormControl>
-                    <Button onClick={signOut} className={styles.signOutButton}>
+                    <SignoutButton onClick={signOut}>
                         {translations.components.login.signOut}
-                    </Button>
-                </div>
+                    </SignoutButton>
+                </MenuWrapper>
             </Menu>
         </div>
     )
diff --git a/apps/frontend/src/components/AddRoleModal/AddRoleModal.tsx b/apps/frontend/src/components/AddRoleModal/AddRoleModal.tsx
index dd97afe0..451e5fa0 100644
--- a/apps/frontend/src/components/AddRoleModal/AddRoleModal.tsx
+++ b/apps/frontend/src/components/AddRoleModal/AddRoleModal.tsx
@@ -1,8 +1,8 @@
 import './AddRoleModal.scss'
 
 import { Language, Role } from '@3dp4me/types'
-import Button from '@material-ui/core/Button'
-import Modal from '@material-ui/core/Modal'
+import Button from '@mui/material/Button'
+import Modal from '@mui/material/Modal'
 import { useState } from 'react'
 import { trackPromise } from 'react-promise-tracker'
 
diff --git a/apps/frontend/src/components/AudioRecorder/AudioRecorder.tsx b/apps/frontend/src/components/AudioRecorder/AudioRecorder.tsx
index 228dc1d8..afc232fb 100644
--- a/apps/frontend/src/components/AudioRecorder/AudioRecorder.tsx
+++ b/apps/frontend/src/components/AudioRecorder/AudioRecorder.tsx
@@ -3,12 +3,12 @@
 
 import translations from '../../translations.json';
 import MicRecorder from 'mic-recorder-to-mp3';
-import AddIcon from '@material-ui/icons/Add';
-import PlayArrowIcon from '@material-ui/icons/PlayArrow';
-import CloseIcon from '@material-ui/icons/Close';
-import Button from '@material-ui/core/Button';
-import Modal from '@material-ui/core/Modal';
-import Typography from '@material-ui/core/Typography';
+import AddIcon from '@mui/icons-material/Add';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import CloseIcon from '@mui/icons-material/Close';
+import Button from '@mui/material/Button';
+import Modal from '@mui/material/Modal';
+import Typography from '@mui/material/Typography';
 import React from 'react';
 import './AudioRecorder.scss';
 import { downloadBlobWithoutSaving } from '../../api/api';
diff --git a/apps/frontend/src/components/BottomBar/BottomBar.tsx b/apps/frontend/src/components/BottomBar/BottomBar.tsx
index 1617ccd5..3b4cf8e1 100644
--- a/apps/frontend/src/components/BottomBar/BottomBar.tsx
+++ b/apps/frontend/src/components/BottomBar/BottomBar.tsx
@@ -1,11 +1,11 @@
 import './BottomBar.scss'
 
 import { StepPathToField, StepStatus } from '@3dp4me/types'
-import AppBar from '@material-ui/core/AppBar'
-import Button from '@material-ui/core/Button'
-import MenuItem from '@material-ui/core/MenuItem'
-import Select from '@material-ui/core/Select'
-import Toolbar from '@material-ui/core/Toolbar'
+import AppBar from '@mui/material/AppBar'
+import Button from '@mui/material/Button'
+import MenuItem from '@mui/material/MenuItem'
+import Select from '@mui/material/Select'
+import Toolbar from '@mui/material/Toolbar'
 import React, { MouseEventHandler } from 'react'
 
 import check from '../../assets/check.svg'
diff --git a/apps/frontend/src/components/CreateFieldModal/CreateFieldModal.tsx b/apps/frontend/src/components/CreateFieldModal/CreateFieldModal.tsx
index 99fb7919..2303c4b9 100644
--- a/apps/frontend/src/components/CreateFieldModal/CreateFieldModal.tsx
+++ b/apps/frontend/src/components/CreateFieldModal/CreateFieldModal.tsx
@@ -8,13 +8,11 @@ import {
     TranslatedString,
     Unsaved,
 } from '@3dp4me/types'
-import Button from '@material-ui/core/Button'
-import Checkbox from '@material-ui/core/Checkbox'
-import FormControl from '@material-ui/core/FormControl'
-import InputBase from '@material-ui/core/InputBase'
-import Modal from '@material-ui/core/Modal'
-import NativeSelect from '@material-ui/core/NativeSelect'
-import withStyles from '@material-ui/core/styles/withStyles'
+import Button from '@mui/material/Button'
+import Checkbox from '@mui/material/Checkbox'
+import FormControl from '@mui/material/FormControl'
+import Modal from '@mui/material/Modal'
+import NativeSelect from '@mui/material/NativeSelect'
 import _ from 'lodash'
 import React, { ChangeEventHandler, ReactNode, useState } from 'react'
 import { trackPromise } from 'react-promise-tracker'
@@ -25,6 +23,7 @@ import { useTranslations } from '../../hooks/useTranslations'
 import { ADMIN_ID, PUBLIC_CLOUDFRONT_URL } from '../../utils/constants'
 import { canFieldBeAddedToStep, getFieldName, isFieldType, validateField } from '../../utils/fields'
 import { randomAlphaNumericString } from '../../utils/math'
+import { DropdownInput } from '../DropdownInput/DropdownInput'
 import { FormOption } from '../Fields/FormOption'
 import MultiSelectField from '../Fields/MultiSelectField'
 import { FileUploadButton } from '../FileUploadButton/FileUploadButton'
@@ -55,35 +54,8 @@ const CreateFieldModal = ({
     const [options, setOptions] = useState<TranslatedString[]>([])
     const [documentURL, setDocumentURL] = useState<string>('')
     const [isUploading, setIsUploading] = useState(false)
-
     const errorWrap = useErrorWrap()
 
-    const BootstrapInput = withStyles((theme) => ({
-        root: {
-            'label + &': {
-                marginTop: theme.spacing(3),
-            },
-        },
-        input: {
-            borderRadius: 4,
-            position: 'relative',
-            backgroundColor: '#dedffb',
-            border: '1px solid #ced4da',
-            fontSize: 16,
-            padding: '10px 26px 10px 12px',
-            transition: theme.transitions.create(['border-color', 'box-shadow']),
-            // Use the system font instead of the default Roboto font.
-            '&:focus': {
-                borderRadius: 4,
-                borderColor: '#80bdff',
-                boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',
-            },
-            selected: {
-                backgroundColor: '#dedffb',
-            },
-        },
-    }))(InputBase)
-
     const onRolesChange = (id: string, roles: string[]) => {
         setSelectedRoles(roles)
     }
@@ -355,7 +327,7 @@ const CreateFieldModal = ({
                                 id="create-field-type-dropdown"
                                 onChange={handleFieldTypeSelect}
                                 defaultValue={fieldType}
-                                input={<BootstrapInput />}
+                                input={<DropdownInput />}
                             >
                                 {generateFieldDropdownOptions()}
                             </NativeSelect>
diff --git a/apps/frontend/src/components/CreatePatientModal/CreatePatientModal.tsx b/apps/frontend/src/components/CreatePatientModal/CreatePatientModal.tsx
index 5f6f5497..87bb1006 100644
--- a/apps/frontend/src/components/CreatePatientModal/CreatePatientModal.tsx
+++ b/apps/frontend/src/components/CreatePatientModal/CreatePatientModal.tsx
@@ -2,9 +2,9 @@ import './CreatePatientModal.scss'
 
 import { BasePatient } from '@3dp4me/types'
 import { Unsaved } from '@3dp4me/types/dist/src/utils/unsaved'
-import Button from '@material-ui/core/Button'
-import Modal from '@material-ui/core/Modal'
-import TextField from '@material-ui/core/TextField'
+import Button from '@mui/material/Button'
+import Modal from '@mui/material/Modal'
+import TextField from '@mui/material/TextField'
 import React, { useState } from 'react'
 
 import { useTranslations } from '../../hooks/useTranslations'
diff --git a/apps/frontend/src/components/CreateStepModal/CreateStepModal.tsx b/apps/frontend/src/components/CreateStepModal/CreateStepModal.tsx
index 428a34e7..8d2cb84e 100644
--- a/apps/frontend/src/components/CreateStepModal/CreateStepModal.tsx
+++ b/apps/frontend/src/components/CreateStepModal/CreateStepModal.tsx
@@ -1,8 +1,8 @@
 import './CreateStepModal.scss'
 
 import { BaseStep, Field, Language } from '@3dp4me/types'
-import Button from '@material-ui/core/Button'
-import Modal from '@material-ui/core/Modal'
+import Button from '@mui/material/Button'
+import Modal from '@mui/material/Modal'
 import _ from 'lodash'
 import { useState } from 'react'
 
diff --git a/apps/frontend/src/components/CustomSwitch/CustomSwitch.tsx b/apps/frontend/src/components/CustomSwitch/CustomSwitch.tsx
index f1e4b638..3f15e1be 100644
--- a/apps/frontend/src/components/CustomSwitch/CustomSwitch.tsx
+++ b/apps/frontend/src/components/CustomSwitch/CustomSwitch.tsx
@@ -1,7 +1,7 @@
 import './CustomSwitch.scss'
 
-import Visibility from '@material-ui/icons/Visibility'
-import VisibilityOff from '@material-ui/icons/VisibilityOff'
+import Visibility from '@mui/icons-material/Visibility'
+import VisibilityOff from '@mui/icons-material/VisibilityOff'
 import Switch from 'react-switch'
 
 export interface CustomSwitchProps {
diff --git a/apps/frontend/src/components/DropdownInput/DropdownInput.tsx b/apps/frontend/src/components/DropdownInput/DropdownInput.tsx
new file mode 100644
index 00000000..8a7dbdd6
--- /dev/null
+++ b/apps/frontend/src/components/DropdownInput/DropdownInput.tsx
@@ -0,0 +1,40 @@
+import { InputBase, InputBaseProps, useTheme } from '@mui/material'
+
+export const DropdownInput = (p: InputBaseProps) => {
+    const theme = useTheme()
+
+    return (
+        <InputBase
+            {...p}
+            slotProps={{
+                root: {
+                    sx: {
+                        'label + &': {
+                            marginTop: theme.spacing(3),
+                        },
+                    },
+                },
+                input: {
+                    sx: {
+                        borderRadius: '4px',
+                        position: 'relative',
+                        backgroundColor: '#dedffb',
+                        border: '1px solid #ced4da',
+                        fontSize: 16,
+                        padding: '10px 26px 10px 12px',
+                        transition: theme.transitions.create(['border-color', 'box-shadow']),
+                        // Use the system font instead of the default Roboto font.
+                        '&:focus': {
+                            borderRadius: 4,
+                            borderColor: '#80bdff',
+                            boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',
+                        },
+                        selected: {
+                            backgroundColor: '#dedffb',
+                        },
+                    },
+                },
+            }}
+        />
+    )
+}
diff --git a/apps/frontend/src/components/EditFieldModal/EditFieldModal.tsx b/apps/frontend/src/components/EditFieldModal/EditFieldModal.tsx
index f929663f..4115b645 100644
--- a/apps/frontend/src/components/EditFieldModal/EditFieldModal.tsx
+++ b/apps/frontend/src/components/EditFieldModal/EditFieldModal.tsx
@@ -1,14 +1,12 @@
 import './EditFieldModal.scss'
 
 import { Field, FieldType, Language, TranslatedString, Unsaved } from '@3dp4me/types'
-import Button from '@material-ui/core/Button'
-import Checkbox from '@material-ui/core/Checkbox'
-import FormControl from '@material-ui/core/FormControl'
-import FormControlLabel from '@material-ui/core/FormControlLabel'
-import InputBase from '@material-ui/core/InputBase'
-import Modal from '@material-ui/core/Modal'
-import NativeSelect from '@material-ui/core/NativeSelect'
-import withStyles from '@material-ui/core/styles/withStyles'
+import Button from '@mui/material/Button'
+import Checkbox from '@mui/material/Checkbox'
+import FormControl from '@mui/material/FormControl'
+import FormControlLabel from '@mui/material/FormControlLabel'
+import Modal from '@mui/material/Modal'
+import NativeSelect from '@mui/material/NativeSelect'
 import _ from 'lodash'
 import React, { ChangeEvent, ReactNode, useEffect, useState } from 'react'
 import swal from 'sweetalert'
@@ -18,6 +16,7 @@ import { useTranslations } from '../../hooks/useTranslations'
 import { ADMIN_ID } from '../../utils/constants'
 import { validateField } from '../../utils/fields'
 import CustomSwitch from '../CustomSwitch/CustomSwitch'
+import { DropdownInput } from '../DropdownInput/DropdownInput'
 import { FormOption } from '../Fields/FormOption'
 import MultiSelectField from '../Fields/MultiSelectField'
 import LanguageInput from '../LanguageInput/LanguageInput'
@@ -67,32 +66,6 @@ const EditFieldModal = ({
         setOptions(formattedOptions)
     }, [initialData, isOpen])
 
-    const BootstrapInput = withStyles((theme) => ({
-        root: {
-            'label + &': {
-                marginTop: theme.spacing(3),
-            },
-        },
-        input: {
-            borderRadius: 4,
-            position: 'relative',
-            backgroundColor: '#dedffb',
-            border: '1px solid #ced4da',
-            fontSize: 16,
-            padding: '10px 26px 10px 12px',
-            transition: theme.transitions.create(['border-color', 'box-shadow']),
-            // Use the system font instead of the default Roboto font.
-            '&:focus': {
-                borderRadius: 4,
-                borderColor: '#80bdff',
-                boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',
-            },
-            selected: {
-                backgroundColor: '#dedffb',
-            },
-        },
-    }))(InputBase)
-
     const onRolesChange = (id: string, roles: string[]) => {
         setSelectedRoles(roles)
     }
@@ -362,7 +335,7 @@ const EditFieldModal = ({
                                 //     style: { zIndex: 35001 }, // for keeping this component on the top layer
                                 // }}
                                 defaultValue={fieldType}
-                                input={<BootstrapInput />}
+                                input={<DropdownInput />}
                                 disabled
                             >
                                 {generateFieldDropdownOptions()}
diff --git a/apps/frontend/src/components/EditRoleModal/EditRoleModal.tsx b/apps/frontend/src/components/EditRoleModal/EditRoleModal.tsx
index 8900d064..3ad9d1c2 100644
--- a/apps/frontend/src/components/EditRoleModal/EditRoleModal.tsx
+++ b/apps/frontend/src/components/EditRoleModal/EditRoleModal.tsx
@@ -5,11 +5,11 @@
 import './EditRoleModal.scss'
 
 import { AccessLevel, Nullish } from '@3dp4me/types'
-import Button from '@material-ui/core/Button'
-import FormControl from '@material-ui/core/FormControl'
-import InputLabel from '@material-ui/core/InputLabel'
-import Modal from '@material-ui/core/Modal'
-import Select from '@material-ui/core/Select'
+import Button from '@mui/material/Button'
+import FormControl from '@mui/material/FormControl'
+import InputLabel from '@mui/material/InputLabel'
+import Modal from '@mui/material/Modal'
+import Select, { SelectChangeEvent } from '@mui/material/Select'
 import _ from 'lodash'
 import React, { useEffect, useState } from 'react'
 import { trackPromise } from 'react-promise-tracker'
@@ -60,12 +60,7 @@ const EditRoleModal = ({
         setUserData({ ...userData, roles })
     }
 
-    const onAccessChange = (
-        event: React.ChangeEvent<{
-            name?: string | undefined
-            value: unknown
-        }>
-    ) => {
+    const onAccessChange = (event: SelectChangeEvent<AccessLevel>) => {
         if (isAccessLevel(event.target.value))
             setUserData({ ...userData, accessLevel: event.target.value })
     }
diff --git a/apps/frontend/src/components/EditStepModal/EditStepModal.tsx b/apps/frontend/src/components/EditStepModal/EditStepModal.tsx
index aecaee63..292bb664 100644
--- a/apps/frontend/src/components/EditStepModal/EditStepModal.tsx
+++ b/apps/frontend/src/components/EditStepModal/EditStepModal.tsx
@@ -1,9 +1,9 @@
 import './EditStepModal.scss'
 
 import { Language, Step, TranslatedString } from '@3dp4me/types'
-import Button from '@material-ui/core/Button'
-import FormControlLabel from '@material-ui/core/FormControlLabel'
-import Modal from '@material-ui/core/Modal'
+import Button from '@mui/material/Button'
+import FormControlLabel from '@mui/material/FormControlLabel'
+import Modal from '@mui/material/Modal'
 import _ from 'lodash'
 import React, { useEffect, useState } from 'react'
 import swal from 'sweetalert'
diff --git a/apps/frontend/src/components/ErrorModal/ErrorModal.tsx b/apps/frontend/src/components/ErrorModal/ErrorModal.tsx
index 309857d1..8202779d 100644
--- a/apps/frontend/src/components/ErrorModal/ErrorModal.tsx
+++ b/apps/frontend/src/components/ErrorModal/ErrorModal.tsx
@@ -1,9 +1,8 @@
 import './ErrorModal.scss'
 
 import { Nullish } from '@3dp4me/types'
-import Modal from '@material-ui/core/Modal'
-import RootRef from '@material-ui/core/RootRef'
-import React, { KeyboardEventHandler } from 'react'
+import Modal from '@mui/material/Modal'
+import { KeyboardEventHandler } from 'react'
 
 import WarningIcon from '../../assets/warning.svg'
 
@@ -24,13 +23,7 @@ const ErrorModal = ({ message = DEFAULT_ERROR_MSG, isOpen, onClose }: ErrorModal
     }
 
     return (
-        <Modal
-            open={isOpen}
-            onClose={onClose}
-            // TODO: Is this an issue
-            // @ts-expect-error we need to update this logic
-            container={() => RootRef.current}
-        >
+        <Modal open={isOpen} onClose={onClose}>
             <div
                 className="error-modal-wrap"
                 onClick={onClose}
diff --git a/apps/frontend/src/components/Fields/FieldGroup/FieldGroupList.tsx b/apps/frontend/src/components/Fields/FieldGroup/FieldGroupList.tsx
index 14d513f3..f4856682 100644
--- a/apps/frontend/src/components/Fields/FieldGroup/FieldGroupList.tsx
+++ b/apps/frontend/src/components/Fields/FieldGroup/FieldGroupList.tsx
@@ -1,6 +1,6 @@
 /* eslint import/no-cycle: "off" */
 // Unfortunately, there has to be an import cycle, because this is by nature, recursive
-import Button from '@material-ui/core/Button'
+import Button from '@mui/material/Button'
 
 import XIcon from '../../../assets/x-icon.png'
 import { useTranslations } from '../../../hooks/useTranslations'
diff --git a/apps/frontend/src/components/Fields/FieldGroup/FieldGroupTable.tsx b/apps/frontend/src/components/Fields/FieldGroup/FieldGroupTable.tsx
index 7c328dd6..586fb351 100644
--- a/apps/frontend/src/components/Fields/FieldGroup/FieldGroupTable.tsx
+++ b/apps/frontend/src/components/Fields/FieldGroup/FieldGroupTable.tsx
@@ -1,7 +1,8 @@
 /* eslint import/no-cycle: "off" */
 // Unfortunately, there has to be an import cycle, because this is by nature, recursive
 import { Language } from '@3dp4me/types'
-import AddIcon from '@material-ui/icons/Add'
+import AddIcon from '@mui/icons-material/Add'
+import { TableCell } from '@mui/material'
 import { useMemo } from 'react'
 import styled from 'styled-components'
 
@@ -13,12 +14,11 @@ import {
     defaultTableRowRenderer,
 } from '../../../utils/table-renderers'
 import SimpleTable from '../../SimpleTable/SimpleTable'
-import { StyledTableCell } from '../../SimpleTable/SimpleTable.style'
 import StepField from '../../StepField/StepField'
 import { FieldGroupListTableProps, getCompleteSubFieldKey, getKeyBase } from './FieldGroupHelpers'
 import { getTableData, getTableHeaders, HasGroupNumber, RENDER_PLUS_ICON } from './TableHelpers'
 
-const CellEditContainer = styled(StyledTableCell)`
+const CellEditContainer = styled(TableCell)`
     padding: 5px;
 
     // Prevent arrows on number input
@@ -122,7 +122,7 @@ const FieldGroupTable = ({
     const tableColumnMetadata = useMemo(
         () =>
             metadata?.subFields?.map((field) => ({
-                id: field.key, 
+                id: field.key,
                 dataType: field.fieldType,
             })),
         [metadata]
@@ -137,9 +137,9 @@ const FieldGroupTable = ({
         if ((itemData as any) === RENDER_PLUS_ICON) {
             const numCols = (metadata?.subFields?.length || 1) + 1
             return (
-                <StyledTableCell colSpan={numCols} onClick={onAddGroup}>
+                <TableCell colSpan={numCols} onClick={onAddGroup} variant="body">
                     <AddIcon />
-                </StyledTableCell>
+                </TableCell>
             )
         }
 
@@ -173,7 +173,7 @@ const FieldGroupTable = ({
 
         // Adds the delete button
         cols.push(
-            <StyledTableCell>
+            <TableCell>
                 <img
                     src={XIcon}
                     alt={translations.components.button.discard.title}
@@ -181,7 +181,7 @@ const FieldGroupTable = ({
                     onClick={() => onRemoveGroup(itemData.groupNum)}
                     style={{ float: lang === Language.EN ? 'right' : 'left' }}
                 />
-            </StyledTableCell>
+            </TableCell>
         )
 
         return cols
diff --git a/apps/frontend/src/components/Fields/MultiSelectField.tsx b/apps/frontend/src/components/Fields/MultiSelectField.tsx
index cc2f5569..744fee20 100644
--- a/apps/frontend/src/components/Fields/MultiSelectField.tsx
+++ b/apps/frontend/src/components/Fields/MultiSelectField.tsx
@@ -1,8 +1,8 @@
 import { Language } from '@3dp4me/types'
-import Checkbox from '@material-ui/core/Checkbox'
-import FormControl from '@material-ui/core/FormControl'
-import FormControlLabel from '@material-ui/core/FormControlLabel'
-import FormGroup from '@material-ui/core/FormGroup'
+import Checkbox from '@mui/material/Checkbox'
+import FormControl from '@mui/material/FormControl'
+import FormControlLabel from '@mui/material/FormControlLabel'
+import FormGroup from '@mui/material/FormGroup'
 import React, { ChangeEvent } from 'react'
 
 import { FormOption } from './FormOption'
diff --git a/apps/frontend/src/components/Fields/PhotoField.tsx b/apps/frontend/src/components/Fields/PhotoField.tsx
index 1da46089..726d1c7a 100644
--- a/apps/frontend/src/components/Fields/PhotoField.tsx
+++ b/apps/frontend/src/components/Fields/PhotoField.tsx
@@ -3,7 +3,7 @@ import 'react-image-gallery/styles/css/image-gallery.css'
 import './PhotoField.scss'
 
 import { File as FileType } from '@3dp4me/types'
-import Modal from '@material-ui/core/Modal'
+import Modal from '@mui/material/Modal'
 import React, { useEffect, useMemo, useState } from 'react'
 import Camera from 'react-html5-camera-photo'
 import ImageGallery, { ReactImageGalleryItem } from 'react-image-gallery'
diff --git a/apps/frontend/src/components/Fields/RadioButtonField.tsx b/apps/frontend/src/components/Fields/RadioButtonField.tsx
index 001c2baf..db9a1eb7 100644
--- a/apps/frontend/src/components/Fields/RadioButtonField.tsx
+++ b/apps/frontend/src/components/Fields/RadioButtonField.tsx
@@ -1,6 +1,6 @@
-import FormControlLabel from '@material-ui/core/FormControlLabel'
-import Radio from '@material-ui/core/Radio'
-import RadioGroup from '@material-ui/core/RadioGroup'
+import FormControlLabel from '@mui/material/FormControlLabel'
+import Radio from '@mui/material/Radio'
+import RadioGroup from '@mui/material/RadioGroup'
 
 import { useTranslations } from '../../hooks/useTranslations'
 import { FormOption } from './FormOption'
diff --git a/apps/frontend/src/components/Fields/SignatureField.tsx b/apps/frontend/src/components/Fields/SignatureField.tsx
index cf56513d..d38bd85e 100644
--- a/apps/frontend/src/components/Fields/SignatureField.tsx
+++ b/apps/frontend/src/components/Fields/SignatureField.tsx
@@ -3,7 +3,7 @@
 import './SignatureField.scss'
 
 import { Nullish, Path, PathValue, Signature, TranslatedString } from '@3dp4me/types'
-import Button from '@material-ui/core/Button'
+import Button from '@mui/material/Button'
 import hash from 'object-hash'
 import { useState } from 'react'
 
diff --git a/apps/frontend/src/components/Fields/TextField.tsx b/apps/frontend/src/components/Fields/TextField.tsx
index 381d2c31..c42daba2 100644
--- a/apps/frontend/src/components/Fields/TextField.tsx
+++ b/apps/frontend/src/components/Fields/TextField.tsx
@@ -1,4 +1,4 @@
-import Text from '@material-ui/core/TextField'
+import Text from '@mui/material/TextField'
 import { ChangeEvent, HTMLInputTypeAttribute } from 'react'
 
 export interface TextFieldProps<T extends string> {
diff --git a/apps/frontend/src/components/Files/Files.tsx b/apps/frontend/src/components/Files/Files.tsx
index 8ddd1519..b25047ee 100644
--- a/apps/frontend/src/components/Files/Files.tsx
+++ b/apps/frontend/src/components/Files/Files.tsx
@@ -1,11 +1,11 @@
 import './Files.scss'
 
 import { File as FileModel } from '@3dp4me/types'
-import Button from '@material-ui/core/Button'
-import Typography from '@material-ui/core/Typography'
-import AddIcon from '@material-ui/icons/Add'
-import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward'
-import CloseIcon from '@material-ui/icons/Close'
+import AddIcon from '@mui/icons-material/Add'
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'
+import CloseIcon from '@mui/icons-material/Close'
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
 import swal from 'sweetalert'
 
 import { useTranslations } from '../../hooks/useTranslations'
diff --git a/apps/frontend/src/components/LanguageInput/LanguageInput.tsx b/apps/frontend/src/components/LanguageInput/LanguageInput.tsx
index 0e878c3d..65822622 100644
--- a/apps/frontend/src/components/LanguageInput/LanguageInput.tsx
+++ b/apps/frontend/src/components/LanguageInput/LanguageInput.tsx
@@ -1,7 +1,7 @@
 import './LanguageInput.scss'
 
 import { Language, TranslatedString } from '@3dp4me/types'
-import TextField from '@material-ui/core/TextField'
+import TextField from '@mui/material/TextField'
 import React from 'react'
 
 export interface LanguageInputProps {
diff --git a/apps/frontend/src/components/ManagePatientModal/ManagePatientModal.tsx b/apps/frontend/src/components/ManagePatientModal/ManagePatientModal.tsx
index 6817c187..212651ba 100644
--- a/apps/frontend/src/components/ManagePatientModal/ManagePatientModal.tsx
+++ b/apps/frontend/src/components/ManagePatientModal/ManagePatientModal.tsx
@@ -1,9 +1,9 @@
 import './ManagePatientModal.scss'
 
 import { Language, Patient, ReservedStep } from '@3dp4me/types'
-import Button from '@material-ui/core/Button'
-import Modal from '@material-ui/core/Modal'
-import CloseIcon from '@material-ui/icons/Close'
+import CloseIcon from '@mui/icons-material/Close'
+import Button from '@mui/material/Button'
+import Modal from '@mui/material/Modal'
 import _ from 'lodash'
 import React, { useState } from 'react'
 import swal from 'sweetalert'
diff --git a/apps/frontend/src/components/ManageRoleModal/ManageRoleModal.tsx b/apps/frontend/src/components/ManageRoleModal/ManageRoleModal.tsx
index 931a8c6a..45bcf4b2 100644
--- a/apps/frontend/src/components/ManageRoleModal/ManageRoleModal.tsx
+++ b/apps/frontend/src/components/ManageRoleModal/ManageRoleModal.tsx
@@ -1,8 +1,8 @@
 import './ManageRoleModal.scss'
 
 import { Nullish, Role } from '@3dp4me/types'
-import Button from '@material-ui/core/Button'
-import Modal from '@material-ui/core/Modal'
+import Button from '@mui/material/Button'
+import Modal from '@mui/material/Modal'
 import _ from 'lodash'
 import { useEffect, useState } from 'react'
 import { trackPromise } from 'react-promise-tracker'
diff --git a/apps/frontend/src/components/NavTabs/NavTabs.tsx b/apps/frontend/src/components/NavTabs/NavTabs.tsx
index 84d8a405..019a0cea 100644
--- a/apps/frontend/src/components/NavTabs/NavTabs.tsx
+++ b/apps/frontend/src/components/NavTabs/NavTabs.tsx
@@ -1,8 +1,8 @@
 import './NavTabs.scss'
 
-import Box from '@material-ui/core/Box'
-import Tab from '@material-ui/core/Tab'
-import Tabs from '@material-ui/core/Tabs'
+import Box from '@mui/material/Box'
+import Tab from '@mui/material/Tab'
+import Tabs from '@mui/material/Tabs'
 
 export interface NavTabsProps {
     value: string
diff --git a/apps/frontend/src/components/Navbar/Navbar.scss b/apps/frontend/src/components/Navbar/Navbar.scss
deleted file mode 100644
index 3b376931..00000000
--- a/apps/frontend/src/components/Navbar/Navbar.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-.navbar {
-    background-color: white;
-    font-family: 'Roboto', sans-serif;
-
-    .logo-ar {
-        margin-left: 15px;
-    }
-
-    .nav-item {
-        text-decoration: none;
-        margin: 0 16px 0 16px;
-        color: #5f5f5f;
-        font-size: 14px;
-    }
-
-    #nav-title {
-        flex-grow: 1;
-        margin: 0 10px 0 10px;
-        font-size: 18px;
-        color: black;
-    }
-
-    .active {
-        font-weight: bolder;
-        color: black;
-    }
-
-    .accountCircle {
-        fill: black;
-        font-size: 30px;
-        margin: 0 8px;
-        opacity: 0.4;
-        transition: all 0.2s;
-        cursor: pointer;
-        &:hover {
-            opacity: 0.8;
-        }
-    }
-}
diff --git a/apps/frontend/src/components/Navbar/Navbar.style.ts b/apps/frontend/src/components/Navbar/Navbar.style.ts
deleted file mode 100644
index c947088c..00000000
--- a/apps/frontend/src/components/Navbar/Navbar.style.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import makeStyles from '@material-ui/core/styles/makeStyles'
-
-export const useStyles = makeStyles((theme: any) => ({
-    appBar: {
-        zIndex: theme.zIndex.drawer + 1,
-        boxShadow: '0px 0px 4px 0 rgba(0,0,0,0.25)',
-    },
-    toolBar: {
-        minHeight: '48px',
-    },
-    navTitle: {
-        fontWeight: 'bold',
-    },
-}))
diff --git a/apps/frontend/src/components/Navbar/Navbar.tsx b/apps/frontend/src/components/Navbar/Navbar.tsx
index 70595846..c0030c56 100644
--- a/apps/frontend/src/components/Navbar/Navbar.tsx
+++ b/apps/frontend/src/components/Navbar/Navbar.tsx
@@ -1,9 +1,8 @@
-import './Navbar.scss'
-
 import { Language, Nullish } from '@3dp4me/types'
-import AppBar from '@material-ui/core/AppBar'
-import Toolbar from '@material-ui/core/Toolbar'
-import AccountCircleIcon from '@material-ui/icons/AccountCircle'
+import AccountCircleIcon from '@mui/icons-material/AccountCircle'
+import { styled } from '@mui/material'
+import AppBar from '@mui/material/AppBar'
+import Toolbar from '@mui/material/Toolbar'
 import React, { MouseEventHandler, useContext, useState } from 'react'
 import { Link } from 'react-router-dom'
 
@@ -12,16 +11,67 @@ import { useTranslations } from '../../hooks/useTranslations'
 import { Context } from '../../store/Store'
 import { Routes } from '../../utils/constants'
 import AccountDropdown from '../AccountDropdown/AccountDropdown'
-import { useStyles } from './Navbar.style'
 
 export interface NavbarProps {
     username: string
     userEmail: string
 }
 
+const StyledAppBar = styled(AppBar)(({ theme }) => ({
+    zIndex: theme.zIndex.drawer + 1,
+}))
+
+const StyledToolbar = styled(Toolbar)`
+    background-color: white;
+    font-family: 'Roboto', sans-serif;
+    font-size: 47px;
+
+    .logo-ar {
+        margin-left: 15px;
+    }
+
+    #nav-title {
+        flex-grow: 1;
+        margin: 0 10px 0 10px;
+        font-size: 14px;
+        color: black;
+    }
+
+    .active {
+        font-weight: bolder;
+        color: black;
+    }
+
+    .accountCircle {
+        fill: black;
+        font-size: 30px;
+        margin: 0 8px;
+        opacity: 0.4;
+        transition: all 0.2s;
+        cursor: pointer;
+        &:hover {
+            opacity: 0.8;
+        }
+    }
+`
+
+const NavItem = styled(Link)({
+    textDecoration: 'none',
+    margin: '0 16px 0 16px',
+    fontSize: '1rem',
+    color: '#5f5f5f',
+})
+
+const NavTitle = styled(Link)(({ theme }) => ({
+    fontWeight: 'bold',
+    fontSize: '1rem',
+    textDecoration: 'none',
+    margin: '0 16px 0 16px',
+    color: '#5f5f5f',
+}))
+
 const Navbar = ({ username, userEmail }: NavbarProps) => {
     const state = useContext(Context)[0]
-    const classes = useStyles()
     const [translations, selectedLang] = useTranslations()
     const [activeRoute, setActiveRoute] = useState(window.location.pathname)
     const [anchorEl, setAnchorEl] = useState<Nullish<EventTarget & SVGSVGElement>>(null)
@@ -40,14 +90,14 @@ const Navbar = ({ username, userEmail }: NavbarProps) => {
         const activeClass = activeRoute === route ? 'active' : ''
 
         return (
-            <Link
+            <NavItem
                 key={route}
-                className={`nav-item ${activeClass}`}
                 onClick={() => setActiveRoute(route)}
+                className={activeClass}
                 to={`${route}`}
             >
                 {text}
-            </Link>
+            </NavItem>
         )
     }
 
@@ -72,42 +122,39 @@ const Navbar = ({ username, userEmail }: NavbarProps) => {
     }
 
     return (
-        <div className="wrap-nav">
-            <AppBar className={classes.appBar}>
-                <Toolbar className={`navbar ${classes.toolBar}`}>
-                    <img
-                        alt="Logo"
-                        className={selectedLang === Language.AR ? 'logo-ar' : ''}
-                        height={32}
-                        src={Logo}
-                    />
-
-                    <Link
-                        onClick={() => setActiveRoute(Routes.DASHBOARD)}
-                        id="nav-title"
-                        className={`${classes.navTitle} nav-item`}
-                        to={Routes.DASHBOARD}
-                    >
-                        {translations.components.navbar.dashboard.navTitle}
-                    </Link>
-
-                    {renderLinks()}
-
-                    <AccountCircleIcon
-                        className="accountCircle"
-                        aria-controls="account-dropdown-menu"
-                        aria-haspopup="true"
-                        onClick={handleAccountClick}
-                    />
-                    <AccountDropdown
-                        anchorEl={anchorEl}
-                        handleClose={handleAccountClose}
-                        username={username}
-                        userEmail={userEmail}
-                    />
-                </Toolbar>
-            </AppBar>
-        </div>
+        <StyledAppBar variant="elevation" color={'info'} position="sticky">
+            <StyledToolbar variant="dense">
+                <img
+                    alt="Logo"
+                    className={selectedLang === Language.AR ? 'logo-ar' : ''}
+                    height={36}
+                    src={Logo}
+                />
+
+                <NavTitle
+                    onClick={() => setActiveRoute(Routes.DASHBOARD)}
+                    id="nav-title"
+                    to={Routes.DASHBOARD}
+                >
+                    {translations.components.navbar.dashboard.navTitle}
+                </NavTitle>
+
+                {renderLinks()}
+
+                <AccountCircleIcon
+                    className="accountCircle"
+                    aria-controls="account-dropdown-menu"
+                    aria-haspopup="true"
+                    onClick={handleAccountClick}
+                />
+                <AccountDropdown
+                    anchorEl={anchorEl}
+                    handleClose={handleAccountClose}
+                    username={username}
+                    userEmail={userEmail}
+                />
+            </StyledToolbar>
+        </StyledAppBar>
     )
 }
 
diff --git a/apps/frontend/src/components/NewSignatureModal/NewSignatureModal.tsx b/apps/frontend/src/components/NewSignatureModal/NewSignatureModal.tsx
index 846cca9c..b68b2c90 100644
--- a/apps/frontend/src/components/NewSignatureModal/NewSignatureModal.tsx
+++ b/apps/frontend/src/components/NewSignatureModal/NewSignatureModal.tsx
@@ -1,5 +1,5 @@
-import Button from '@material-ui/core/Button'
-import Modal from '@material-ui/core/Modal'
+import Button from '@mui/material/Button'
+import Modal from '@mui/material/Modal'
 import { FC, useRef } from 'react'
 import ReactSignatureCanvas from 'react-signature-canvas'
 import SignaturePad from 'signature_pad'
diff --git a/apps/frontend/src/components/PatientDetailSidebar/PatientDetailSidebar.tsx b/apps/frontend/src/components/PatientDetailSidebar/PatientDetailSidebar.tsx
index 2ac789cd..5504b5a0 100644
--- a/apps/frontend/src/components/PatientDetailSidebar/PatientDetailSidebar.tsx
+++ b/apps/frontend/src/components/PatientDetailSidebar/PatientDetailSidebar.tsx
@@ -1,15 +1,13 @@
 import './PatientDetailSidebar.scss'
 
 import { Nullish, Patient } from '@3dp4me/types'
-import Accordion from '@material-ui/core/Accordion'
-import AccordionDetails from '@material-ui/core/AccordionDetails'
-import AccordionSummary from '@material-ui/core/AccordionSummary'
-import Button from '@material-ui/core/Button'
-import Drawer from '@material-ui/core/Drawer'
-import createTheme from '@material-ui/core/styles/createTheme'
-import Toolbar from '@material-ui/core/Toolbar'
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
-import ThemeProvider from '@material-ui/styles/ThemeProvider'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import Accordion from '@mui/material/Accordion'
+import AccordionDetails from '@mui/material/AccordionDetails'
+import AccordionSummary from '@mui/material/AccordionSummary'
+import Button from '@mui/material/Button'
+import Drawer from '@mui/material/Drawer'
+import Toolbar from '@mui/material/Toolbar'
 import { useState } from 'react'
 
 import { useTranslations } from '../../hooks/useTranslations'
@@ -19,14 +17,6 @@ import { hasNotesForStep } from '../../utils/metadataUtils'
 import { getPatientName } from '../../utils/utils'
 import { ProfilePicture } from '../ProfilePicture/ProfilePicture'
 
-const arTheme = createTheme({
-    direction: 'rtl',
-})
-
-const enTheme = createTheme({
-    direction: 'ltr',
-})
-
 export interface PatientDetailSidebarProps<T extends Patient = Patient> {
     patientData: T
     onViewPatient: () => void
@@ -83,57 +73,53 @@ const PatientDetailSidebar = ({ patientData, onViewPatient }: PatientDetailSideb
     }
 
     return (
-        <ThemeProvider theme={selectedLang === LANGUAGES.AR ? arTheme : enTheme}>
-            <Drawer
-                className={selectedLang === LANGUAGES.EN ? 'drawer' : 'drawer-rtl'}
-                variant="permanent"
-                classes={{
-                    paper: 'drawer-paper',
-                }}
-            >
-                <Toolbar />
-                <div className="drawer-container">
-                    <div>
-                        <ProfilePicture patient={patientData} />
-                        <div className="drawer-text-section">
-                            <span className="drawer-text-label">
-                                {translations.components.sidebar.name}
-                            </span>{' '}
-                            <br />
-                            <span className="drawer-text">{getPatientName(patientData)}</span>
-                        </div>
-                        <div className="drawer-text-section">
-                            <span className="drawer-text-label">
-                                {translations.components.sidebar.orderID}
-                            </span>{' '}
-                            <br />
-                            <span className="drawer-text">{patientData?.orderId}</span>
-                        </div>
-                        <div className="drawer-text-section">
-                            <span className="drawer-text-label">
-                                {translations.components.sidebar.status}
-                            </span>{' '}
-                            <br />
-                            <span className="drawer-text">{patientData?.status}</span>
-                        </div>
+        <Drawer
+            className={selectedLang === LANGUAGES.EN ? 'drawer' : 'drawer-rtl'}
+            variant="permanent"
+            classes={{
+                paper: 'drawer-paper',
+            }}
+        >
+            <Toolbar />
+            <div className="drawer-container">
+                <div>
+                    <ProfilePicture patient={patientData} />
+                    <div className="drawer-text-section">
                         <span className="drawer-text-label">
-                            {translations.components.notes.title}
-                        </span>
-                        {generateNoteSidebar()}
+                            {translations.components.sidebar.name}
+                        </span>{' '}
+                        <br />
+                        <span className="drawer-text">{getPatientName(patientData)}</span>
                     </div>
-                    <div
-                        style={{
-                            display: 'flex',
-                            justifyContent: 'center',
-                        }}
-                    >
-                        <Button onClick={onViewPatient} className="manage-patient-button">
-                            {translations.components.button.managePatient}
-                        </Button>
+                    <div className="drawer-text-section">
+                        <span className="drawer-text-label">
+                            {translations.components.sidebar.orderID}
+                        </span>{' '}
+                        <br />
+                        <span className="drawer-text">{patientData?.orderId}</span>
                     </div>
+                    <div className="drawer-text-section">
+                        <span className="drawer-text-label">
+                            {translations.components.sidebar.status}
+                        </span>{' '}
+                        <br />
+                        <span className="drawer-text">{patientData?.status}</span>
+                    </div>
+                    <span className="drawer-text-label">{translations.components.notes.title}</span>
+                    {generateNoteSidebar()}
+                </div>
+                <div
+                    style={{
+                        display: 'flex',
+                        justifyContent: 'center',
+                    }}
+                >
+                    <Button onClick={onViewPatient} className="manage-patient-button">
+                        {translations.components.button.managePatient}
+                    </Button>
                 </div>
-            </Drawer>
-        </ThemeProvider>
+            </div>
+        </Drawer>
     )
 }
 
diff --git a/apps/frontend/src/components/Sidebar/Sidebar.scss b/apps/frontend/src/components/Sidebar/Sidebar.scss
index 0bb6048c..e8ae2002 100644
--- a/apps/frontend/src/components/Sidebar/Sidebar.scss
+++ b/apps/frontend/src/components/Sidebar/Sidebar.scss
@@ -9,6 +9,10 @@
     width: $drawerWidth + 3 * $verticalMovementWidth;
 }
 
+.detail-paper {
+    background-color: $dashboardManagementSidebarBackground;
+}
+
 .sidebar {
     display: flex;
     flex-shrink: 0;
diff --git a/apps/frontend/src/components/Sidebar/Sidebar.tsx b/apps/frontend/src/components/Sidebar/Sidebar.tsx
index 4e35cb98..baa5da64 100644
--- a/apps/frontend/src/components/Sidebar/Sidebar.tsx
+++ b/apps/frontend/src/components/Sidebar/Sidebar.tsx
@@ -1,19 +1,17 @@
 import './Sidebar.scss'
 
 import { Step } from '@3dp4me/types'
-import AppBar from '@material-ui/core/AppBar'
-import Button from '@material-ui/core/Button'
-import Drawer from '@material-ui/core/Drawer'
-import makeStyles from '@material-ui/core/styles/makeStyles'
-import Toolbar from '@material-ui/core/Toolbar'
+import { styled } from '@mui/material'
+import AppBar from '@mui/material/AppBar'
+import Button from '@mui/material/Button'
+import Drawer from '@mui/material/Drawer'
+import Toolbar from '@mui/material/Toolbar'
 
 import { useTranslations } from '../../hooks/useTranslations'
 import { LANGUAGES } from '../../utils/constants'
 
-const useStyles = makeStyles({
-    paper: {
-        background: '#dddef2',
-    },
+const StyledDrawer = styled(Drawer)({
+    background: '#dddef2',
 })
 
 export interface SidebarProps {
@@ -38,7 +36,6 @@ const Sidebar = ({
     selectedStep,
 }: SidebarProps) => {
     const selectedLang = useTranslations()[1]
-    const styles = useStyles()
 
     function onButtonClick(stepKey: string) {
         onClick(stepKey)
@@ -110,10 +107,10 @@ const Sidebar = ({
         })
 
     return (
-        <Drawer
+        <StyledDrawer
             className={`sidebar ${isEditing ? 'sidebar-expanded' : 'sidebar-retracted'}`}
             variant="permanent"
-            classes={{ paper: styles.paper }}
+            classes={{ paper: 'detail-paper' }}
         >
             <div className="sidebar-container">{generateButtons()}</div>
             <AppBar
@@ -130,7 +127,7 @@ const Sidebar = ({
             >
                 <Toolbar className="side-bottom-bar-toolbar">{generateBottomButton()}</Toolbar>
             </AppBar>
-        </Drawer>
+        </StyledDrawer>
     )
 }
 
diff --git a/apps/frontend/src/components/SimpleTable/SimpleTable.scss b/apps/frontend/src/components/SimpleTable/SimpleTable.scss
index 80c6235d..2d06d471 100644
--- a/apps/frontend/src/components/SimpleTable/SimpleTable.scss
+++ b/apps/frontend/src/components/SimpleTable/SimpleTable.scss
@@ -1,16 +1,20 @@
 @import '../../styles/colors.scss';
 
-.table {
+.table3dp4me {
     font-family: 'Ubuntu';
-    // min-width: 700;
+
+    .MuiTableCell-head {
+        padding-top: 6px;
+        padding-bottom: 6px;
+    }
 
     .header {
         border-top: solid $navbar 1px;
         border-bottom: solid $navbar 1px;
         background-color: $sidebar;
+        font-size: 12px;
         color: white;
         font-weight: bold;
-        font-size: 12px;
         text-transform: uppercase;
 
         &:hover {
@@ -18,11 +22,6 @@
         }
     }
 
-    .MuiTableCell-head {
-        padding-top: 6px;
-        padding-bottom: 6px;
-    }
-
     .cell-right {
         padding-right: 2% !important;
         text-align: end;
@@ -35,7 +34,7 @@
         margin-right: 20%;
         align-items: center;
         color: $button;
-        font-size: 13px;
+        font-size: "13px";
         font-weight: bolder;
         .view-icon {
             color: $button;
diff --git a/apps/frontend/src/components/SimpleTable/SimpleTable.style.ts b/apps/frontend/src/components/SimpleTable/SimpleTable.style.ts
deleted file mode 100644
index e44ebd40..00000000
--- a/apps/frontend/src/components/SimpleTable/SimpleTable.style.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import withStyles from '@material-ui/core/styles/withStyles'
-import TableCell from '@material-ui/core/TableCell'
-import TableRow from '@material-ui/core/TableRow'
-
-export const StyledTableCell = withStyles((theme) => ({
-    head: {
-        backgroundColor: theme.palette.common.white,
-        color: theme.palette.common.black,
-    },
-}))(TableCell)
-
-export const StyledTableRow = withStyles(() => ({
-    root: {
-        '&:hover': {
-            backgroundColor: '#f0f0f0',
-        },
-    },
-}))(TableRow)
diff --git a/apps/frontend/src/components/SimpleTable/SimpleTable.tsx b/apps/frontend/src/components/SimpleTable/SimpleTable.tsx
index 94177dda..0df5dbf0 100644
--- a/apps/frontend/src/components/SimpleTable/SimpleTable.tsx
+++ b/apps/frontend/src/components/SimpleTable/SimpleTable.tsx
@@ -1,12 +1,12 @@
 import './SimpleTable.scss'
 
 import { Nullish } from '@3dp4me/types'
-import Paper from '@material-ui/core/Paper'
-import MaterialUITable from '@material-ui/core/Table'
-import TableBody from '@material-ui/core/TableBody'
-import TableContainer from '@material-ui/core/TableContainer'
-import TableHead from '@material-ui/core/TableHead'
-import TableRow from '@material-ui/core/TableRow'
+import Paper from '@mui/material/Paper'
+import MaterialUITable from '@mui/material/Table'
+import TableBody from '@mui/material/TableBody'
+import TableContainer from '@mui/material/TableContainer'
+import TableHead from '@mui/material/TableHead'
+import TableRow from '@mui/material/TableRow'
 import React, { CSSProperties, useMemo } from 'react'
 
 import useSortableData from '../../hooks/useSortableData'
@@ -20,7 +20,6 @@ import {
     RowLoadingRenderer,
     RowRenderer,
 } from '../../utils/table-renderers'
-import { StyledTableRow } from './SimpleTable.style'
 
 export interface SimpleTableProps<T extends Record<string, any>> {
     data: Nullish<T[]>
@@ -70,24 +69,24 @@ const SimpleTable = <T extends Record<string, any>>({
     const renderTableBody = () => {
         if (isLoading) {
             return new Array(numLoaderRows).fill(0).map((_, i) => (
-                <StyledTableRow key={`row-${i}`} style={rowStyle}>
+                <TableRow key={`row-${i}`} style={rowStyle} hover>
                     {renderLoadingTableRow(renderedHeaders.length, selectedLang)}
-                </StyledTableRow>
+                </TableRow>
             ))
         }
 
         if (!sortedData || !rowData) return null
         return sortedData.map((patient) => (
-            <StyledTableRow key={patient._id} style={rowStyle}>
+            <TableRow key={patient._id} style={rowStyle} hover>
                 {renderTableRow(rowData, patient, selectedLang)}
-            </StyledTableRow>
+            </TableRow>
         ))
     }
 
     return (
         <div>
             <TableContainer component={Paper} style={containerStyle}>
-                <MaterialUITable stickyHeader className="table">
+                <MaterialUITable stickyHeader className="table3dp4me">
                     <TableHead>
                         <TableRow style={rowStyle}>{renderedHeaders}</TableRow>
                     </TableHead>
diff --git a/apps/frontend/src/components/StepContent/StepContent.tsx b/apps/frontend/src/components/StepContent/StepContent.tsx
index 9aeb4866..48e061cb 100644
--- a/apps/frontend/src/components/StepContent/StepContent.tsx
+++ b/apps/frontend/src/components/StepContent/StepContent.tsx
@@ -1,11 +1,11 @@
 import './StepContent.scss'
 
 import { FieldType, File as FileModel, Step, StepStatus } from '@3dp4me/types'
-import Backdrop from '@material-ui/core/Backdrop'
-import Button from '@material-ui/core/Button'
-import CircularProgress from '@material-ui/core/CircularProgress'
-import MenuItem from '@material-ui/core/MenuItem'
-import Select from '@material-ui/core/Select'
+import Backdrop from '@mui/material/Backdrop'
+import Button from '@mui/material/Button'
+import CircularProgress from '@mui/material/CircularProgress'
+import MenuItem from '@mui/material/MenuItem'
+import Select, { SelectChangeEvent } from '@mui/material/Select'
 import _ from 'lodash'
 import React, { useEffect, useState } from 'react'
 import { trackPromise } from 'react-promise-tracker'
@@ -31,6 +31,11 @@ export interface StepContentProps {
     onDataSaved: (key: string, value: any) => void
 }
 
+enum questionDisplayMode {
+    ALL = 'all',
+    SINGLE = 'single',
+}
+
 const StepContent = ({
     patientId,
     metaData,
@@ -116,13 +121,8 @@ const StepContent = ({
         swal(translations.components.bottombar.savedMessage.patientInfo, '', 'success')
     }
 
-    const handleQuestionFormatSelect = (
-        e: React.ChangeEvent<{
-            name?: string | undefined
-            value: unknown
-        }>
-    ) => {
-        setSingleQuestionFormat(Boolean(e.target.value))
+    const handleQuestionFormatSelect = (e: SelectChangeEvent<questionDisplayMode>) => {
+        setSingleQuestionFormat(e.target.value === questionDisplayMode.SINGLE)
     }
 
     const discardData = () => {
@@ -252,13 +252,13 @@ const StepContent = ({
                         MenuProps={{
                             style: { zIndex: 35001 },
                         }}
-                        defaultValue={'false'}
+                        defaultValue={questionDisplayMode.ALL}
                         onChange={handleQuestionFormatSelect}
                     >
-                        <MenuItem value={'false'}>
+                        <MenuItem value={questionDisplayMode.ALL}>
                             {translations.components.selectQuestionFormat.allQuestions}
                         </MenuItem>
-                        <MenuItem value={'true'}>
+                        <MenuItem value={questionDisplayMode.SINGLE}>
                             {translations.components.selectQuestionFormat.singleQuestion}
                         </MenuItem>
                     </Select>
diff --git a/apps/frontend/src/components/StepField/StepField.tsx b/apps/frontend/src/components/StepField/StepField.tsx
index 1dafff78..6d805eaa 100644
--- a/apps/frontend/src/components/StepField/StepField.tsx
+++ b/apps/frontend/src/components/StepField/StepField.tsx
@@ -1,7 +1,7 @@
 /* eslint import/no-cycle: "off" */
 
 import { Field, FieldType, File as FileModel } from '@3dp4me/types'
-import Divider from '@material-ui/core/Divider'
+import Divider from '@mui/material/Divider'
 
 import { useTranslations } from '../../hooks/useTranslations'
 import AudioRecorder from '../AudioRecorder/AudioRecorder'
diff --git a/apps/frontend/src/components/StyledButton/StyledButton.tsx b/apps/frontend/src/components/StyledButton/StyledButton.tsx
index 9b188ee5..fb2e4ff4 100644
--- a/apps/frontend/src/components/StyledButton/StyledButton.tsx
+++ b/apps/frontend/src/components/StyledButton/StyledButton.tsx
@@ -1,7 +1,7 @@
 import './StyledButton.scss'
 
-import { CircularProgress } from '@material-ui/core'
-import Button from '@material-ui/core/Button'
+import { CircularProgress } from '@mui/material'
+import Button from '@mui/material/Button'
 import React, { ReactNode } from 'react'
 
 import { useTranslations } from '../../hooks/useTranslations'
diff --git a/apps/frontend/src/components/Table/Table.tsx b/apps/frontend/src/components/Table/Table.tsx
index 20ae2d66..93189cd9 100644
--- a/apps/frontend/src/components/Table/Table.tsx
+++ b/apps/frontend/src/components/Table/Table.tsx
@@ -1,5 +1,5 @@
-import Button from '@material-ui/core/Button'
-import TextField from '@material-ui/core/TextField'
+import Button from '@mui/material/Button'
+import TextField from '@mui/material/TextField'
 import React, { ChangeEvent, useEffect, useState } from 'react'
 
 import search from '../../assets/search.svg'
diff --git a/apps/frontend/src/components/ToggleButtons/ToggleButtons.scss b/apps/frontend/src/components/ToggleButtons/ToggleButtons.scss
index f41f4084..49c5cbbf 100644
--- a/apps/frontend/src/components/ToggleButtons/ToggleButtons.scss
+++ b/apps/frontend/src/components/ToggleButtons/ToggleButtons.scss
@@ -6,7 +6,7 @@
     overflow-x: auto;
     display: flex;
     width: 100%;
-    height: $buttonGroupHeight;
+    // height: $buttonGroupHeight;
     background-color: $controllerGrey;
     text-transform: uppercase;
     justify-content: flex-start;
diff --git a/apps/frontend/src/components/ToggleButtons/ToggleButtons.tsx b/apps/frontend/src/components/ToggleButtons/ToggleButtons.tsx
index fd663aee..d41db251 100644
--- a/apps/frontend/src/components/ToggleButtons/ToggleButtons.tsx
+++ b/apps/frontend/src/components/ToggleButtons/ToggleButtons.tsx
@@ -1,12 +1,12 @@
 import './ToggleButtons.scss'
 
 import { Nullish, Patient } from '@3dp4me/types'
-import IconButton from '@material-ui/core/IconButton'
-import Menu from '@material-ui/core/Menu'
-import MenuItem from '@material-ui/core/MenuItem'
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
-import ToggleButton from '@material-ui/lab/ToggleButton'
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import IconButton from '@mui/material/IconButton'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
+import ToggleButton from '@mui/material/ToggleButton'
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
 import React, { MouseEventHandler, useState } from 'react'
 
 import CheckIcon from '../../assets/check.svg'
@@ -15,7 +15,12 @@ import HalfCircleIcon from '../../assets/half-circle.svg'
 import { useTranslations } from '../../hooks/useTranslations'
 import { useWindowDimensions } from '../../hooks/useWindowDimensions'
 import { useSteps } from '../../query/useSteps'
-import { DISABLE_FEATURE_PATIENT_STATUS, LANGUAGES, RESIZE_TOGGLE_BUTTON_ESTIMATED_WIDTH, STEP_STATUS } from '../../utils/constants'
+import {
+    DISABLE_FEATURE_PATIENT_STATUS,
+    LANGUAGES,
+    RESIZE_TOGGLE_BUTTON_ESTIMATED_WIDTH,
+    STEP_STATUS,
+} from '../../utils/constants'
 import { getStepData } from '../../utils/metadataUtils'
 
 interface ToggleButtonsProps {
@@ -105,7 +110,9 @@ const ToggleButtons = ({
 
         return (
             <div className="current-step-label">
-                {stepData?.status && !DISABLE_FEATURE_PATIENT_STATUS ? statusIcons[stepData.status] : null}{' '}
+                {stepData?.status && !DISABLE_FEATURE_PATIENT_STATUS
+                    ? statusIcons[stepData.status]
+                    : null}{' '}
                 <b>{element.displayName[selectedLang]}</b>
             </div>
         )
@@ -122,7 +129,9 @@ const ToggleButtons = ({
                     key={`${element.key}-mi`}
                     onClick={(e) => handleCloseSelector(e, element.key)}
                 >
-                    {patientData && stepData?.status && !DISABLE_FEATURE_PATIENT_STATUS ? statusIcons[stepData.status] : null}{' '}
+                    {patientData && stepData?.status && !DISABLE_FEATURE_PATIENT_STATUS
+                        ? statusIcons[stepData.status]
+                        : null}{' '}
                     <b className="selector-text">{element.displayName[selectedLang]}</b>
                 </MenuItem>
             )
@@ -145,6 +154,7 @@ const ToggleButtons = ({
                         aria-haspopup="true"
                         onClick={handleClickSelector}
                         className="dropdown-icon"
+                        size="large"
                     >
                         <ExpandMoreIcon />
                     </IconButton>
diff --git a/apps/frontend/src/pages/Dashboard/Dashboard.scss b/apps/frontend/src/pages/Dashboard/Dashboard.scss
index 9db921d6..326dbadf 100644
--- a/apps/frontend/src/pages/Dashboard/Dashboard.scss
+++ b/apps/frontend/src/pages/Dashboard/Dashboard.scss
@@ -90,7 +90,3 @@
 .button {
     background: $downloadButton;
 }
-
-.dashboard {
-    margin-top: $navHeight;
-}
diff --git a/apps/frontend/src/pages/Dashboard/Dashboard.tsx b/apps/frontend/src/pages/Dashboard/Dashboard.tsx
index 1b432831..f180c057 100644
--- a/apps/frontend/src/pages/Dashboard/Dashboard.tsx
+++ b/apps/frontend/src/pages/Dashboard/Dashboard.tsx
@@ -1,9 +1,9 @@
 import './Dashboard.scss'
 
 import { Field, Patient } from '@3dp4me/types'
-import type { SnackbarCloseReason } from '@material-ui/core/Snackbar'
-import Snackbar from '@material-ui/core/Snackbar'
-import MuiAlert from '@material-ui/lab/Alert'
+import MuiAlert from '@mui/material/Alert'
+import type { SnackbarCloseReason } from '@mui/material/Snackbar'
+import Snackbar from '@mui/material/Snackbar'
 import _ from 'lodash'
 import { useEffect, useState } from 'react'
 
diff --git a/apps/frontend/src/pages/DashboardManagement/DashboardManagement.tsx b/apps/frontend/src/pages/DashboardManagement/DashboardManagement.tsx
index cb57cbd3..43566883 100644
--- a/apps/frontend/src/pages/DashboardManagement/DashboardManagement.tsx
+++ b/apps/frontend/src/pages/DashboardManagement/DashboardManagement.tsx
@@ -1,7 +1,7 @@
 import './DashboardManagement.scss'
 
 import { BaseStep, Field, Nullish, Step, StepPathToField, Unsaved } from '@3dp4me/types'
-import ListItem from '@material-ui/core/ListItem'
+import ListItem from '@mui/material/ListItem'
 import _ from 'lodash'
 import { useEffect, useState } from 'react'
 import { trackPromise } from 'react-promise-tracker'
@@ -441,7 +441,6 @@ const SectionTab = () => {
                         selectedStep={selectedStep}
                     />
                     <ListItem
-                        button
                         onClick={() => {
                             setCreateStepModalOpen(false)
                         }}
diff --git a/apps/frontend/src/pages/PatientDetail/PatientDetail.scss b/apps/frontend/src/pages/PatientDetail/PatientDetail.scss
index 561ebd02..324d23aa 100644
--- a/apps/frontend/src/pages/PatientDetail/PatientDetail.scss
+++ b/apps/frontend/src/pages/PatientDetail/PatientDetail.scss
@@ -8,7 +8,6 @@
 .controller-content {
     width: 100%;
     height: 100%;
-    margin-top: $navHeight;
 
     &.controller-content-ar {
         margin-right: $drawerWidth;
diff --git a/apps/frontend/src/pages/Patients/Patients.tsx b/apps/frontend/src/pages/Patients/Patients.tsx
index e355a73c..74b54adc 100644
--- a/apps/frontend/src/pages/Patients/Patients.tsx
+++ b/apps/frontend/src/pages/Patients/Patients.tsx
@@ -53,7 +53,7 @@ const Patients = () => {
     }
 
     return (
-        <div className="dashboard">
+        <div>
             <div className="patient-list">
                 <PatientTable
                     onAddPatient={onAddPatient}
diff --git a/apps/frontend/src/utils/constants.ts b/apps/frontend/src/utils/constants.ts
index 1077b74b..ca490ba7 100644
--- a/apps/frontend/src/utils/constants.ts
+++ b/apps/frontend/src/utils/constants.ts
@@ -243,9 +243,8 @@ export const ACCOUNT_MANAGEMENT_TABS = {
 
 export const RESIZE_TOGGLE_BUTTON_ESTIMATED_WIDTH = 170
 
-
 /**
  * Feature flags
  */
 
-export const DISABLE_FEATURE_PATIENT_STATUS = true
\ No newline at end of file
+export const DISABLE_FEATURE_PATIENT_STATUS = true
diff --git a/apps/frontend/src/utils/fields.tsx b/apps/frontend/src/utils/fields.tsx
index 5943bfc1..2f60873a 100644
--- a/apps/frontend/src/utils/fields.tsx
+++ b/apps/frontend/src/utils/fields.tsx
@@ -7,8 +7,8 @@ import {
     Signature,
     StepStatus,
 } from '@3dp4me/types'
-import CheckIcon from '@material-ui/icons/Check'
-import CloseIcon from '@material-ui/icons/Close'
+import CheckIcon from '@mui/icons-material/Check'
+import CloseIcon from '@mui/icons-material/Close'
 import React from 'react'
 
 import finishedIcon from '../assets/check.svg'
diff --git a/apps/frontend/src/utils/table-renderers.tsx b/apps/frontend/src/utils/table-renderers.tsx
index 31deb1c6..741b5882 100644
--- a/apps/frontend/src/utils/table-renderers.tsx
+++ b/apps/frontend/src/utils/table-renderers.tsx
@@ -1,13 +1,13 @@
 import { AccessLevel, FieldType, Language, Nullish, Path, Patient } from '@3dp4me/types'
-import IconButton from '@material-ui/core/IconButton'
-import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'
-import ArrowDropUpIcon from '@material-ui/icons/ArrowDropUp'
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
+import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp'
+import { TableCell } from '@mui/material'
+import IconButton from '@mui/material/IconButton'
 import React, { ReactNode } from 'react'
 import Skeleton from 'react-loading-skeleton'
 import { Link } from 'react-router-dom'
 
 import Eyecon from '../assets/view.svg'
-import { StyledTableCell } from '../components/SimpleTable/SimpleTable.style'
 import { SortConfig } from '../hooks/useSortableData'
 import translations from '../translations.json'
 import { DisplayFieldType, SortDirection } from './constants'
@@ -81,9 +81,14 @@ export const defaultTableRowRenderer = <T extends Record<string, any>>(
 
     // Construct a cell for each piece of data
     const row = rowData.map(({ id, dataType }) => (
-        <StyledTableCell className={cellClassName} key={`${itemData._id}-${id}`} align={cellAlign}>
+        <TableCell
+            className={cellClassName}
+            key={`${itemData._id}-${id}`}
+            align={cellAlign}
+            variant="body"
+        >
             {getField(itemData, id, dataType, selectedLang)}
-        </StyledTableCell>
+        </TableCell>
     ))
 
     return row
@@ -95,9 +100,9 @@ export const defaultTableRowLoadingRenderer = (numCols: number, selectedLang: La
 
     for (let i = 0; i < numCols; i++) {
         row.push(
-            <StyledTableCell>
+            <TableCell variant="body">
                 <Skeleton direction={loadDirection} inline={true} />
-            </StyledTableCell>
+            </TableCell>
         )
     }
 
@@ -136,17 +141,18 @@ export const defaultTableHeaderRenderer = <T extends Record<string, any>>(
     const cellClassName = selectedLang === Language.AR ? 'cell-align-rtl' : 'cell-align'
 
     const headerCells = headers.map((header) => (
-        <StyledTableCell
+        <TableCell
             onClick={() => onRequestSort(header.sortKey)}
-            className="header"
             key={header.title}
             align={cellAlign}
+            variant="head"
+            className="header"
         >
             <div className={cellClassName}>
                 {header.title}
                 {renderSortArrow(sortConfig, header.sortKey)}
             </div>
-        </StyledTableCell>
+        </TableCell>
     ))
 
     return headerCells
@@ -176,14 +182,14 @@ export const patientTableRowRenderer = (
 
     // Add a link to the patient's page
     row.push(
-        <StyledTableCell key="view-patient-data" className="cell" align="center">
+        <TableCell key="view-patient-data" className="cell" align="center" variant="body">
             <Link className="table-view-link" to={link}>
-                <IconButton>
+                <IconButton size="large">
                     <img alt="status icon" width="18px" src={Eyecon} />
                 </IconButton>{' '}
                 {translations[selectedLang].components.table.view}
             </Link>
-        </StyledTableCell>
+        </TableCell>
     )
 
     return row
@@ -200,7 +206,9 @@ export const patientTableHeaderRenderer = <T extends Record<string, any>>(
     selectedLang: Language
 ) => {
     const headerCells = defaultTableHeaderRenderer(headers, sortConfig, onRequestSort, selectedLang)
-    headerCells.push(<StyledTableCell key="view-patient" className="header" align="center" />)
+    headerCells.push(
+        <TableCell key="view-patient" align="center" variant="head" className="header" />
+    )
     return headerCells
 }
 
@@ -225,11 +233,16 @@ export const generateSelectableRenderer =
 
         // Add the edit button
         row.push(
-            <StyledTableCell key="view-user-data" className="cell cell-right" align="center">
-                <IconButton onClick={() => onSelected(user)}>
+            <TableCell
+                key="view-user-data"
+                className="cell cell-right"
+                align="center"
+                variant="body"
+            >
+                <IconButton onClick={() => onSelected(user)} size="large">
                     <img alt="status icon view-icon" width="18px" src={Eyecon} />
                 </IconButton>{' '}
-            </StyledTableCell>
+            </TableCell>
         )
 
         return row
@@ -245,6 +258,6 @@ export const userTableHeaderRenderer = <T extends Record<string, any>>(
     selectedLang: Language
 ) => {
     const headerCells = defaultTableHeaderRenderer(headers, sortConfig, onRequestSort, selectedLang)
-    headerCells.push(<StyledTableCell key="view-user" className="header" align="center" />)
+    headerCells.push(<TableCell key="view-user" align="center" variant="head" className="header" />)
     return headerCells
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7a7c4831..b6cae0ef 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -153,18 +153,12 @@ importers:
       '@3dp4me/types':
         specifier: workspace:*
         version: link:../../packages/types
-      '@material-ui/core':
-        specifier: ^4.11.0
-        version: 4.12.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@material-ui/icons':
-        specifier: ^4.9.1
-        version: 4.11.3(@material-ui/core@4.12.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@material-ui/lab':
-        specifier: ^4.0.0-alpha.56
-        version: 4.0.0-alpha.61(@material-ui/core@4.12.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@material/tabs':
-        specifier: ^2.3.0
-        version: 2.3.0
+      '@mui/icons-material':
+        specifier: ^6.4.5
+        version: 6.4.5(@mui/material@6.4.5(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
+      '@mui/material':
+        specifier: ^6.4.5
+        version: 6.4.5(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@sweetalert/with-react':
         specifier: ^0.1.1
         version: 0.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sweetalert@2.1.2)
@@ -274,9 +268,6 @@ importers:
       '@babel/preset-react':
         specifier: ^7.23.3
         version: 7.26.3(@babel/core@7.26.7)
-      '@material-ui/styles':
-        specifier: ^4.11.5
-        version: 4.11.5(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@rollup/plugin-commonjs':
         specifier: ^25.0.7
         version: 25.0.8(rollup@4.32.0)
@@ -1951,18 +1942,69 @@ packages:
     peerDependencies:
       effect: ^3.5.7
 
-  '@emotion/hash@0.8.0':
-    resolution: {integrity: sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==}
+  '@emotion/babel-plugin@11.13.5':
+    resolution: {integrity: sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==}
+
+  '@emotion/cache@11.14.0':
+    resolution: {integrity: sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==}
+
+  '@emotion/hash@0.9.2':
+    resolution: {integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==}
 
   '@emotion/is-prop-valid@1.2.2':
     resolution: {integrity: sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==}
 
+  '@emotion/is-prop-valid@1.3.1':
+    resolution: {integrity: sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==}
+
   '@emotion/memoize@0.8.1':
     resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==}
 
+  '@emotion/memoize@0.9.0':
+    resolution: {integrity: sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==}
+
+  '@emotion/react@11.14.0':
+    resolution: {integrity: sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: '>=16.8.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@emotion/serialize@1.3.3':
+    resolution: {integrity: sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==}
+
+  '@emotion/sheet@1.4.0':
+    resolution: {integrity: sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==}
+
+  '@emotion/styled@11.14.0':
+    resolution: {integrity: sha512-XxfOnXFffatap2IyCeJyNov3kiDQWoR08gPUQxvbL7fxKryGBKUZUkG6Hz48DZwVrJSVh9sJboyV1Ds4OW6SgA==}
+    peerDependencies:
+      '@emotion/react': ^11.0.0-rc.0
+      '@types/react': '*'
+      react: '>=16.8.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@emotion/unitless@0.10.0':
+    resolution: {integrity: sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==}
+
   '@emotion/unitless@0.8.1':
     resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==}
 
+  '@emotion/use-insertion-effect-with-fallbacks@1.2.0':
+    resolution: {integrity: sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==}
+    peerDependencies:
+      react: '>=16.8.0'
+
+  '@emotion/utils@1.4.2':
+    resolution: {integrity: sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==}
+
+  '@emotion/weak-memoize@0.4.0':
+    resolution: {integrity: sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==}
+
   '@eslint-community/eslint-utils@4.4.1':
     resolution: {integrity: sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -2147,110 +2189,109 @@ packages:
   '@manypkg/get-packages@1.1.3':
     resolution: {integrity: sha512-fo+QhuU3qE/2TQMQmbVMqaQ6EWbMhi4ABWP+O4AM1NqPBuy0OrApV5LO6BrrgnhtAHS2NH6RrVk9OL181tTi8A==}
 
-  '@material-ui/core@4.12.4':
-    resolution: {integrity: sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==}
-    engines: {node: '>=8.0.0'}
-    deprecated: Material UI v4 doesn't receive active development since September 2021. See the guide https://mui.com/material-ui/migration/migration-v4/ to upgrade to v5.
+  '@mongodb-js/saslprep@1.1.9':
+    resolution: {integrity: sha512-tVkljjeEaAhCqTzajSdgbQ6gE6f3oneVwa3iXR6csiEwXXOFsiC6Uh9iAjAhXPtqa/XMDHWjjeNH/77m/Yq2dw==}
+
+  '@mui/core-downloads-tracker@6.4.5':
+    resolution: {integrity: sha512-zoXvHU1YuoodgMlPS+epP084Pqv9V+Vg+5IGv9n/7IIFVQ2nkTngYHYxElCq8pdTTbDcgji+nNh0lxri2abWgA==}
+
+  '@mui/icons-material@6.4.5':
+    resolution: {integrity: sha512-4A//t8Nrc+4u4pbVhGarIFU98zpuB5AV9hTNzgXx1ySZJ1tWtx+i/1SbQ8PtGJxWeXlljhwimZJNPQ3x0CiIFw==}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
-      '@types/react': ^16.8.6 || ^17.0.0
-      react: ^16.8.0 || ^17.0.0
-      react-dom: ^16.8.0 || ^17.0.0
+      '@mui/material': ^6.4.5
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  '@material-ui/icons@4.11.3':
-    resolution: {integrity: sha512-IKHlyx6LDh8n19vzwH5RtHIOHl9Tu90aAAxcbWME6kp4dmvODM3UvOHJeMIDzUbd4muuJKHmlNoBN+mDY4XkBA==}
-    engines: {node: '>=8.0.0'}
+  '@mui/material@6.4.5':
+    resolution: {integrity: sha512-5eyEgSXocIeV1JkXs8mYyJXU0aFyXZIWI5kq2g/mCnIgJe594lkOBNAKnCIaGVfQTu2T6TTEHF8/hHIqpiIRGA==}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
-      '@material-ui/core': ^4.0.0
-      '@types/react': ^16.8.6 || ^17.0.0
-      react: ^16.8.0 || ^17.0.0
-      react-dom: ^16.8.0 || ^17.0.0
+      '@emotion/react': ^11.5.0
+      '@emotion/styled': ^11.3.0
+      '@mui/material-pigment-css': ^6.4.3
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
     peerDependenciesMeta:
+      '@emotion/react':
+        optional: true
+      '@emotion/styled':
+        optional: true
+      '@mui/material-pigment-css':
+        optional: true
       '@types/react':
         optional: true
 
-  '@material-ui/lab@4.0.0-alpha.61':
-    resolution: {integrity: sha512-rSzm+XKiNUjKegj8bzt5+pygZeckNLOr+IjykH8sYdVk7dE9y2ZuUSofiMV2bJk3qU+JHwexmw+q0RyNZB9ugg==}
-    engines: {node: '>=8.0.0'}
-    deprecated: Material UI v4 doesn't receive active development since September 2021. See the guide https://mui.com/material-ui/migration/migration-v4/ to upgrade to v5.
+  '@mui/private-theming@6.4.6':
+    resolution: {integrity: sha512-T5FxdPzCELuOrhpA2g4Pi6241HAxRwZudzAuL9vBvniuB5YU82HCmrARw32AuCiyTfWzbrYGGpZ4zyeqqp9RvQ==}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
-      '@material-ui/core': ^4.12.1
-      '@types/react': ^16.8.6 || ^17.0.0
-      react: ^16.8.0 || ^17.0.0
-      react-dom: ^16.8.0 || ^17.0.0
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  '@material-ui/styles@4.11.5':
-    resolution: {integrity: sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA==}
-    engines: {node: '>=8.0.0'}
-    deprecated: Material UI v4 doesn't receive active development since September 2021. See the guide https://mui.com/material-ui/migration/migration-v4/ to upgrade to v5.
+  '@mui/styled-engine@6.4.6':
+    resolution: {integrity: sha512-vSWYc9ZLX46be5gP+FCzWVn5rvDr4cXC5JBZwSIkYk9xbC7GeV+0kCvB8Q6XLFQJy+a62bbqtmdwS4Ghi9NBlQ==}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
-      '@types/react': ^16.8.6 || ^17.0.0
-      react: ^16.8.0 || ^17.0.0
-      react-dom: ^16.8.0 || ^17.0.0
+      '@emotion/react': ^11.4.1
+      '@emotion/styled': ^11.3.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
     peerDependenciesMeta:
-      '@types/react':
+      '@emotion/react':
+        optional: true
+      '@emotion/styled':
         optional: true
 
-  '@material-ui/system@4.12.2':
-    resolution: {integrity: sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==}
-    engines: {node: '>=8.0.0'}
+  '@mui/system@6.4.6':
+    resolution: {integrity: sha512-FQjWwPec7pMTtB/jw5f9eyLynKFZ6/Ej9vhm5kGdtmts1z5b7Vyn3Rz6kasfYm1j2TfrfGnSXRvvtwVWxjpz6g==}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
-      '@types/react': ^16.8.6 || ^17.0.0
-      react: ^16.8.0 || ^17.0.0
-      react-dom: ^16.8.0 || ^17.0.0
+      '@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
     peerDependenciesMeta:
+      '@emotion/react':
+        optional: true
+      '@emotion/styled':
+        optional: true
       '@types/react':
         optional: true
 
-  '@material-ui/types@5.1.0':
-    resolution: {integrity: sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==}
+  '@mui/types@7.2.21':
+    resolution: {integrity: sha512-6HstngiUxNqLU+/DPqlUJDIPbzUBxIVHb1MmXP0eTWDIROiCR2viugXpEif0PPe2mLqqakPzzRClWAnK+8UJww==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  '@material-ui/utils@4.11.3':
-    resolution: {integrity: sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==}
-    engines: {node: '>=8.0.0'}
+  '@mui/utils@6.4.3':
+    resolution: {integrity: sha512-jxHRHh3BqVXE9ABxDm+Tc3wlBooYz/4XPa0+4AI+iF38rV1/+btJmSUgG4shDtSWVs/I97aDn5jBCt6SF2Uq2A==}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
-      react: ^16.8.0 || ^17.0.0
-      react-dom: ^16.8.0 || ^17.0.0
-
-  '@material/animation@1.0.0':
-    resolution: {integrity: sha512-Ed5/vggn6ZhSJ87yn3ZS1d826VJNFz73jHF2bSsgRtHDoB8KCuOwQMfdgAgDa4lKDF6CDIPCKBZPKrs2ubehdw==}
-
-  '@material/base@1.0.0':
-    resolution: {integrity: sha512-5dxFp46x5FA+Epg6YHLzN+5zRt9S2wR84UdvVAEJ1egea94m9UHUg7y9tAnNSN16aexRSywmzyLwPr+i8PGEYA==}
-
-  '@material/dom@1.1.0':
-    resolution: {integrity: sha512-+HWW38ZaM2UBPu4+7QCusLDSf4tFT31rsEXHkTkxYSg/QpDivfPx6YDz4OmYtafmhPR1d1YjqB3MYysUHdodyw==}
-
-  '@material/feature-targeting@0.44.1':
-    resolution: {integrity: sha512-90cc7njn4aHbH9UxY8qgZth1W5JgOgcEdWdubH1t7sFkwqFxS5g3zgxSBt46TygFBVIXNZNq35Xmg80wgqO7Pg==}
-
-  '@material/ripple@2.3.0':
-    resolution: {integrity: sha512-ejXR0nstERofFhssRyFlwOLgebwm2uGbarHtWZ2/+7QY2Th/Z1wOqNb2h/WRoShsJXK11RUsochb6BJrg30u7w==}
-
-  '@material/rtl@0.42.0':
-    resolution: {integrity: sha512-VrnrKJzhmspsN8WXHuxxBZ69yM5IwhCUqWr1t1eNfw3ZEvEj7i1g3P31HGowKThIN1dc1Wh4LE14rCISWCtv5w==}
-
-  '@material/tabs@2.3.0':
-    resolution: {integrity: sha512-EeLy/w8foV3+NT1K0hb86CZk+Z4zatamfDUQICYyNeEDSytq4INaMwzw0n2By1Zy0mM4e0fRrnSeSgznyXqRdg==}
-
-  '@material/theme@1.1.0':
-    resolution: {integrity: sha512-YYUV9Rhbx4r/EMb/zoOYJUWjhXChNaLlH1rqt3vpNVyxRcxGqoVMGp5u1XALBCFiD9dACPKLIkKyRYa928nmPQ==}
-
-  '@material/typography@2.3.0':
-    resolution: {integrity: sha512-NtWVVvwG9Te6/kuIl4fEwDcXGCS7mfPgo5CKPyxcK6y0hJHv6yRHpipJT9D4ZlXw0sQx9B33doOK7iYJtwBBZw==}
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
 
-  '@mongodb-js/saslprep@1.1.9':
-    resolution: {integrity: sha512-tVkljjeEaAhCqTzajSdgbQ6gE6f3oneVwa3iXR6csiEwXXOFsiC6Uh9iAjAhXPtqa/XMDHWjjeNH/77m/Yq2dw==}
+  '@mui/utils@6.4.6':
+    resolution: {integrity: sha512-43nZeE1pJF2anGafNydUcYFPtHwAqiBiauRtaMvurdrZI3YrUjHkAu43RBsxef7OFtJMXGiHFvq43kb7lig0sA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
 
   '@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1':
     resolution: {integrity: sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==}
@@ -4187,8 +4228,8 @@ packages:
     resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==}
     engines: {node: '>=0.8'}
 
-  clsx@1.2.1:
-    resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
 
   co@4.6.0:
@@ -4503,9 +4544,6 @@ packages:
     resolution: {integrity: sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==}
     engines: {node: '>=8.0.0'}
 
-  css-vendor@2.0.8:
-    resolution: {integrity: sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==}
-
   css-what@3.4.2:
     resolution: {integrity: sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==}
     engines: {node: '>= 6'}
@@ -4554,9 +4592,6 @@ packages:
     resolution: {integrity: sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==}
     engines: {node: '>=8'}
 
-  csstype@2.6.21:
-    resolution: {integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==}
-
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
@@ -5497,6 +5532,9 @@ packages:
     resolution: {integrity: sha512-9ZonPT4ZAK4a+1pUPVPZJapbi7O5qbbJPdYw/NOQWZZbVLdDTYM3A4R9z/DpAM08IDaFGsvPgiGZ82WEwUDWjg==}
     engines: {node: '>=14.16'}
 
+  find-root@1.1.0:
+    resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
+
   find-up@1.1.2:
     resolution: {integrity: sha512-jvElSjyuo4EMQGoTwo1uJU5pQMwTW5lS1x05zzfJuTIyLR3zwO27LYrxNg+dlvKpGOuGy/MzBdXh80g0ve5+HA==}
     engines: {node: '>=0.10.0'}
@@ -5976,9 +6014,6 @@ packages:
     resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
     engines: {node: '>=10.17.0'}
 
-  hyphenate-style-name@1.1.0:
-    resolution: {integrity: sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==}
-
   iconv-lite@0.4.24:
     resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
     engines: {node: '>=0.10.0'}
@@ -6238,9 +6273,6 @@ packages:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
 
-  is-in-browser@1.1.3:
-    resolution: {integrity: sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g==}
-
   is-interactive@2.0.0:
     resolution: {integrity: sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==}
     engines: {node: '>=12'}
@@ -6800,30 +6832,6 @@ packages:
     resolution: {integrity: sha512-XjwVfRS6jTMsqYs0EsuJ4LGxXV14zQybNd4L2r0UvbVnSF9Af8x7p5MzbJ90Ioz/9TI41/hTCvznF/loiSzn8w==}
     engines: {node: '>=4', npm: '>=1.4.28'}
 
-  jss-plugin-camel-case@10.10.0:
-    resolution: {integrity: sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==}
-
-  jss-plugin-default-unit@10.10.0:
-    resolution: {integrity: sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==}
-
-  jss-plugin-global@10.10.0:
-    resolution: {integrity: sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==}
-
-  jss-plugin-nested@10.10.0:
-    resolution: {integrity: sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==}
-
-  jss-plugin-props-sort@10.10.0:
-    resolution: {integrity: sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==}
-
-  jss-plugin-rule-value-function@10.10.0:
-    resolution: {integrity: sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==}
-
-  jss-plugin-vendor-prefixer@10.10.0:
-    resolution: {integrity: sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==}
-
-  jss@10.10.0:
-    resolution: {integrity: sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==}
-
   jsx-ast-utils@3.3.5:
     resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
     engines: {node: '>=4.0'}
@@ -7931,9 +7939,6 @@ packages:
   pop-iterate@1.0.1:
     resolution: {integrity: sha512-HRCx4+KJE30JhX84wBN4+vja9bNfysxg1y28l0DuJmkoaICiv2ZSilKddbS48pq50P8d2erAhqDLbp47yv3MbQ==}
 
-  popper.js@1.16.1-lts:
-    resolution: {integrity: sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==}
-
   possible-typed-array-names@1.0.0:
     resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==}
     engines: {node: '>= 0.4'}
@@ -8626,6 +8631,9 @@ packages:
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
+  react-is@19.0.0:
+    resolution: {integrity: sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g==}
+
   react-loader-spinner@6.1.6:
     resolution: {integrity: sha512-x5h1Jcit7Qn03MuKlrWcMG9o12cp9SNDVHVJTNRi9TgtGPKcjKiXkou4NRfLAtXaFB3+Z8yZsVzONmPzhv2ErA==}
     engines: {node: '>= 12'}
@@ -9545,6 +9553,9 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
 
+  stylis@4.2.0:
+    resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
+
   stylis@4.3.2:
     resolution: {integrity: sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==}
 
@@ -13367,16 +13378,102 @@ snapshots:
       effect: 3.5.7
       fast-check: 3.20.0
 
-  '@emotion/hash@0.8.0': {}
+  '@emotion/babel-plugin@11.13.5':
+    dependencies:
+      '@babel/helper-module-imports': 7.25.9
+      '@babel/runtime': 7.26.7
+      '@emotion/hash': 0.9.2
+      '@emotion/memoize': 0.9.0
+      '@emotion/serialize': 1.3.3
+      babel-plugin-macros: 3.1.0
+      convert-source-map: 1.9.0
+      escape-string-regexp: 4.0.0
+      find-root: 1.1.0
+      source-map: 0.5.7
+      stylis: 4.2.0
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
+  '@emotion/cache@11.14.0':
+    dependencies:
+      '@emotion/memoize': 0.9.0
+      '@emotion/sheet': 1.4.0
+      '@emotion/utils': 1.4.2
+      '@emotion/weak-memoize': 0.4.0
+      stylis: 4.2.0
+
+  '@emotion/hash@0.9.2': {}
 
   '@emotion/is-prop-valid@1.2.2':
     dependencies:
       '@emotion/memoize': 0.8.1
 
+  '@emotion/is-prop-valid@1.3.1':
+    dependencies:
+      '@emotion/memoize': 0.9.0
+    optional: true
+
   '@emotion/memoize@0.8.1': {}
 
+  '@emotion/memoize@0.9.0': {}
+
+  '@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.7
+      '@emotion/babel-plugin': 11.13.5
+      '@emotion/cache': 11.14.0
+      '@emotion/serialize': 1.3.3
+      '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@18.3.1)
+      '@emotion/utils': 1.4.2
+      '@emotion/weak-memoize': 0.4.0
+      hoist-non-react-statics: 3.3.2
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.18
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
+  '@emotion/serialize@1.3.3':
+    dependencies:
+      '@emotion/hash': 0.9.2
+      '@emotion/memoize': 0.9.0
+      '@emotion/unitless': 0.10.0
+      '@emotion/utils': 1.4.2
+      csstype: 3.1.3
+
+  '@emotion/sheet@1.4.0': {}
+
+  '@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.7
+      '@emotion/babel-plugin': 11.13.5
+      '@emotion/is-prop-valid': 1.3.1
+      '@emotion/react': 11.14.0(@types/react@18.3.18)(react@18.3.1)
+      '@emotion/serialize': 1.3.3
+      '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@18.3.1)
+      '@emotion/utils': 1.4.2
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.18
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
+  '@emotion/unitless@0.10.0': {}
+
   '@emotion/unitless@0.8.1': {}
 
+  '@emotion/use-insertion-effect-with-fallbacks@1.2.0(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optional: true
+
+  '@emotion/utils@1.4.2': {}
+
+  '@emotion/weak-memoize@0.4.0': {}
+
   '@eslint-community/eslint-utils@4.4.1(eslint@8.57.1)':
     dependencies:
       eslint: 8.57.1
@@ -13731,140 +13828,107 @@ snapshots:
       globby: 11.1.0
       read-yaml-file: 1.1.0
 
-  '@material-ui/core@4.12.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@mongodb-js/saslprep@1.1.9':
+    dependencies:
+      sparse-bitfield: 3.0.3
+    optional: true
+
+  '@mui/core-downloads-tracker@6.4.5': {}
+
+  '@mui/icons-material@6.4.5(@mui/material@6.4.5(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.7
-      '@material-ui/styles': 4.11.5(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@material-ui/system': 4.12.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@material-ui/types': 5.1.0(@types/react@18.3.18)
-      '@material-ui/utils': 4.11.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@types/react-transition-group': 4.4.12(@types/react@18.3.18)
-      clsx: 1.2.1
-      hoist-non-react-statics: 3.3.2
-      popper.js: 1.16.1-lts
-      prop-types: 15.8.1
+      '@mui/material': 6.4.5(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      react-is: 17.0.2
-      react-transition-group: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
 
-  '@material-ui/icons@4.11.3(@material-ui/core@4.12.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@mui/material@6.4.5(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.7
-      '@material-ui/core': 4.12.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@mui/core-downloads-tracker': 6.4.5
+      '@mui/system': 6.4.6(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
+      '@mui/types': 7.2.21(@types/react@18.3.18)
+      '@mui/utils': 6.4.3(@types/react@18.3.18)(react@18.3.1)
+      '@popperjs/core': 2.11.8
+      '@types/react-transition-group': 4.4.12(@types/react@18.3.18)
+      clsx: 2.1.1
+      csstype: 3.1.3
+      prop-types: 15.8.1
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
+      react-is: 19.0.0
+      react-transition-group: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
     optionalDependencies:
+      '@emotion/react': 11.14.0(@types/react@18.3.18)(react@18.3.1)
+      '@emotion/styled': 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
       '@types/react': 18.3.18
 
-  '@material-ui/lab@4.0.0-alpha.61(@material-ui/core@4.12.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@mui/private-theming@6.4.6(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.7
-      '@material-ui/core': 4.12.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@material-ui/utils': 4.11.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      clsx: 1.2.1
+      '@mui/utils': 6.4.6(@types/react@18.3.18)(react@18.3.1)
       prop-types: 15.8.1
       react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      react-is: 17.0.2
     optionalDependencies:
       '@types/react': 18.3.18
 
-  '@material-ui/styles@4.11.5(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@mui/styled-engine@6.4.6(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.7
-      '@emotion/hash': 0.8.0
-      '@material-ui/types': 5.1.0(@types/react@18.3.18)
-      '@material-ui/utils': 4.11.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      clsx: 1.2.1
-      csstype: 2.6.21
-      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
+      '@emotion/cache': 11.14.0
+      '@emotion/serialize': 1.3.3
+      '@emotion/sheet': 1.4.0
+      csstype: 3.1.3
       prop-types: 15.8.1
       react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.3.18
+      '@emotion/react': 11.14.0(@types/react@18.3.18)(react@18.3.1)
+      '@emotion/styled': 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
 
-  '@material-ui/system@4.12.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@mui/system@6.4.6(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.7
-      '@material-ui/utils': 4.11.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      csstype: 2.6.21
+      '@mui/private-theming': 6.4.6(@types/react@18.3.18)(react@18.3.1)
+      '@mui/styled-engine': 6.4.6(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(react@18.3.1)
+      '@mui/types': 7.2.21(@types/react@18.3.18)
+      '@mui/utils': 6.4.6(@types/react@18.3.18)(react@18.3.1)
+      clsx: 2.1.1
+      csstype: 3.1.3
       prop-types: 15.8.1
       react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
+      '@emotion/react': 11.14.0(@types/react@18.3.18)(react@18.3.1)
+      '@emotion/styled': 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
       '@types/react': 18.3.18
 
-  '@material-ui/types@5.1.0(@types/react@18.3.18)':
+  '@mui/types@7.2.21(@types/react@18.3.18)':
     optionalDependencies:
       '@types/react': 18.3.18
 
-  '@material-ui/utils@4.11.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@mui/utils@6.4.3(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.7
+      '@mui/types': 7.2.21(@types/react@18.3.18)
+      '@types/prop-types': 15.7.14
+      clsx: 2.1.1
       prop-types: 15.8.1
       react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      react-is: 17.0.2
-
-  '@material/animation@1.0.0':
-    dependencies:
-      tslib: 1.14.1
-
-  '@material/base@1.0.0':
-    dependencies:
-      tslib: 1.14.1
-
-  '@material/dom@1.1.0':
-    dependencies:
-      tslib: 1.14.1
-
-  '@material/feature-targeting@0.44.1': {}
-
-  '@material/ripple@2.3.0':
-    dependencies:
-      '@material/animation': 1.0.0
-      '@material/base': 1.0.0
-      '@material/dom': 1.1.0
-      '@material/feature-targeting': 0.44.1
-      '@material/theme': 1.1.0
-      tslib: 1.14.1
-
-  '@material/rtl@0.42.0': {}
-
-  '@material/tabs@2.3.0':
-    dependencies:
-      '@material/animation': 1.0.0
-      '@material/base': 1.0.0
-      '@material/ripple': 2.3.0
-      '@material/rtl': 0.42.0
-      '@material/theme': 1.1.0
-      '@material/typography': 2.3.0
-      tslib: 1.14.1
-
-  '@material/theme@1.1.0':
-    dependencies:
-      '@material/feature-targeting': 0.44.1
-
-  '@material/typography@2.3.0':
-    dependencies:
-      '@material/feature-targeting': 0.44.1
+      react-is: 19.0.0
+    optionalDependencies:
+      '@types/react': 18.3.18
 
-  '@mongodb-js/saslprep@1.1.9':
+  '@mui/utils@6.4.6(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
-      sparse-bitfield: 3.0.3
-    optional: true
+      '@babel/runtime': 7.26.7
+      '@mui/types': 7.2.21(@types/react@18.3.18)
+      '@types/prop-types': 15.7.14
+      clsx: 2.1.1
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-is: 19.0.0
+    optionalDependencies:
+      '@types/react': 18.3.18
 
   '@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1':
     dependencies:
@@ -16264,7 +16328,7 @@ snapshots:
 
   clone@1.0.4: {}
 
-  clsx@1.2.1: {}
+  clsx@2.1.1: {}
 
   co@4.6.0: {}
 
@@ -16577,11 +16641,6 @@ snapshots:
       mdn-data: 2.0.14
       source-map: 0.6.1
 
-  css-vendor@2.0.8:
-    dependencies:
-      '@babel/runtime': 7.26.7
-      is-in-browser: 1.1.3
-
   css-what@3.4.2: {}
 
   css-what@6.1.0: {}
@@ -16646,8 +16705,6 @@ snapshots:
     dependencies:
       cssom: 0.3.8
 
-  csstype@2.6.21: {}
-
   csstype@3.1.3: {}
 
   cwebp-bin@7.0.1:
@@ -17845,6 +17902,9 @@ snapshots:
       common-path-prefix: 3.0.0
       pkg-dir: 7.0.0
 
+  find-root@1.1.0:
+    optional: true
+
   find-up@1.1.2:
     dependencies:
       path-exists: 2.1.0
@@ -18435,8 +18495,6 @@ snapshots:
 
   human-signals@2.1.0: {}
 
-  hyphenate-style-name@1.1.0: {}
-
   iconv-lite@0.4.24:
     dependencies:
       safer-buffer: 2.1.2
@@ -18711,8 +18769,6 @@ snapshots:
     dependencies:
       is-extglob: 2.1.1
 
-  is-in-browser@1.1.3: {}
-
   is-interactive@2.0.0: {}
 
   is-jpg@2.0.0:
@@ -19585,52 +19641,6 @@ snapshots:
       ms: 2.1.3
       semver: 5.7.2
 
-  jss-plugin-camel-case@10.10.0:
-    dependencies:
-      '@babel/runtime': 7.26.7
-      hyphenate-style-name: 1.1.0
-      jss: 10.10.0
-
-  jss-plugin-default-unit@10.10.0:
-    dependencies:
-      '@babel/runtime': 7.26.7
-      jss: 10.10.0
-
-  jss-plugin-global@10.10.0:
-    dependencies:
-      '@babel/runtime': 7.26.7
-      jss: 10.10.0
-
-  jss-plugin-nested@10.10.0:
-    dependencies:
-      '@babel/runtime': 7.26.7
-      jss: 10.10.0
-      tiny-warning: 1.0.3
-
-  jss-plugin-props-sort@10.10.0:
-    dependencies:
-      '@babel/runtime': 7.26.7
-      jss: 10.10.0
-
-  jss-plugin-rule-value-function@10.10.0:
-    dependencies:
-      '@babel/runtime': 7.26.7
-      jss: 10.10.0
-      tiny-warning: 1.0.3
-
-  jss-plugin-vendor-prefixer@10.10.0:
-    dependencies:
-      '@babel/runtime': 7.26.7
-      css-vendor: 2.0.8
-      jss: 10.10.0
-
-  jss@10.10.0:
-    dependencies:
-      '@babel/runtime': 7.26.7
-      csstype: 3.1.3
-      is-in-browser: 1.1.3
-      tiny-warning: 1.0.3
-
   jsx-ast-utils@3.3.5:
     dependencies:
       array-includes: 3.1.8
@@ -20840,8 +20850,6 @@ snapshots:
 
   pop-iterate@1.0.1: {}
 
-  popper.js@1.16.1-lts: {}
-
   possible-typed-array-names@1.0.0: {}
 
   postcss-attribute-case-insensitive@5.0.2(postcss@8.5.1):
@@ -21572,6 +21580,8 @@ snapshots:
 
   react-is@18.3.1: {}
 
+  react-is@19.0.0: {}
+
   react-loader-spinner@6.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       react: 18.3.1
@@ -22752,6 +22762,8 @@ snapshots:
       postcss: 8.5.1
       postcss-selector-parser: 6.1.2
 
+  stylis@4.2.0: {}
+
   stylis@4.3.2: {}
 
   sucrase@3.35.0: