diff --git a/ccm_web/client/src/components/APIErrorMessage.tsx b/ccm_web/client/src/components/APIErrorMessage.tsx
index 1a0e155de..40aa693b5 100644
--- a/ccm_web/client/src/components/APIErrorMessage.tsx
+++ b/ccm_web/client/src/components/APIErrorMessage.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Typography } from '@material-ui/core'
+import { Typography } from '@mui/material'
 
 import { CanvasError } from '../utils/handleErrors'
 
diff --git a/ccm_web/client/src/components/Accordion.tsx b/ccm_web/client/src/components/Accordion.tsx
index a99113169..7febe4e4c 100644
--- a/ccm_web/client/src/components/Accordion.tsx
+++ b/ccm_web/client/src/components/Accordion.tsx
@@ -1,21 +1,39 @@
 import React, { useState } from 'react'
+import { styled } from '@mui/material/styles'
 import {
-  Accordion as MUIAccordion, AccordionDetails as MUIAccordionDetails, AccordionSummary as MUIAccordionSummary,
-  makeStyles
-} from '@material-ui/core'
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
+  Accordion as MUIAccordion,
+  AccordionDetails as MUIAccordionDetails,
+  AccordionSummary as MUIAccordionSummary
+} from '@mui/material'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 
-const useStyles = makeStyles((theme) => ({
-  container: {
+const PREFIX = 'Accordion'
+
+const classes = {
+  container: `${PREFIX}-container`,
+  summary: `${PREFIX}-summary`,
+  summaryFocusVisible: `${PREFIX}-summaryFocusVisible`,
+  summaryFocusNotVisible: `${PREFIX}-summaryFocusNotVisible`
+}
+
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`&.${classes.container}`]: {
     paddingTop: theme.spacing(1)
   },
-  summary: {
+
+  [`& .${classes.summary}`]: {
     backgroundColor: theme.palette.primary.main
   },
-  summaryFocusVisible: {
+
+  [`& .${classes.summaryFocusVisible}`]: {
     color: theme.palette.primary.main
   },
-  summaryFocusNotVisible: {
+
+  [`& .${classes.summaryFocusNotVisible}`]: {
     color: theme.palette.primary.contrastText
   }
 }))
@@ -27,17 +45,16 @@ interface AccordionProps {
 }
 
 export default function Accordion (props: AccordionProps): JSX.Element {
-  const classes = useStyles()
   const [isSummaryFocusVisible, setIsSummaryFocusVisible] = useState(false)
   const summaryTextClass = isSummaryFocusVisible ? classes.summaryFocusVisible : classes.summaryFocusNotVisible
 
   return (
-    <div className={classes.container}>
+    <Root className={classes.container}>
       <MUIAccordion defaultExpanded>
         <MUIAccordionSummary
           className={classes.summary}
-          classes={{ root: summaryTextClass, expandIcon: summaryTextClass }}
-          expandIcon={<ExpandMoreIcon />}
+          classes={{ root: summaryTextClass }}
+          expandIcon={<ExpandMoreIcon classes={{ root: summaryTextClass }}/>}
           id={`${props.id}-header`}
           aria-controls={`${props.id}-content`}
           onFocusVisible={() => setIsSummaryFocusVisible(true)}
@@ -49,6 +66,6 @@ export default function Accordion (props: AccordionProps): JSX.Element {
           {props.children}
         </MUIAccordionDetails>
       </MUIAccordion>
-    </div>
+    </Root>
   )
 }
diff --git a/ccm_web/client/src/components/Alert.tsx b/ccm_web/client/src/components/Alert.tsx
index d83bd3aae..6738b1ad1 100644
--- a/ccm_web/client/src/components/Alert.tsx
+++ b/ccm_web/client/src/components/Alert.tsx
@@ -1,14 +1,29 @@
 import React from 'react'
-import { Grid, makeStyles, Paper, Typography } from '@material-ui/core'
+import { styled } from '@mui/material/styles'
+import { Grid, Paper, Typography } from '@mui/material'
 
-const useStyles = makeStyles((theme) => ({
-  padding: {
+const PREFIX = 'Alert'
+
+const classes = {
+  padding: `${PREFIX}-padding`,
+  standalone: `${PREFIX}-standalone`,
+  dialog: `${PREFIX}-dialog`
+}
+
+const StyledGrid = styled(Grid)((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.padding}`]: {
     padding: theme.spacing(1)
   },
-  standalone: {
+
+  [`&.${classes.standalone}`]: {
     margin: 'auto'
   },
-  dialog: {
+
+  [`& .${classes.dialog}`]: {
     textAlign: 'center',
     margin: 'auto',
     marginTop: 30,
@@ -31,7 +46,6 @@ interface AlertProps {
 }
 
 export default function Alert (props: AlertProps): JSX.Element {
-  const classes = useStyles()
   const { title, icon, embedded, children } = props
 
   const core = (
@@ -44,8 +58,8 @@ export default function Alert (props: AlertProps): JSX.Element {
 
   if (embedded === true) return core
   return (
-    <Grid item xs={12} sm={9} md={6} className={classes.standalone}>
+    <StyledGrid item xs={12} sm={9} md={6} className={classes.standalone}>
       {core}
-    </Grid>
+    </StyledGrid>
   )
 }
diff --git a/ccm_web/client/src/components/AuthorizePrompt.tsx b/ccm_web/client/src/components/AuthorizePrompt.tsx
index a925b2b5b..63efe526d 100644
--- a/ccm_web/client/src/components/AuthorizePrompt.tsx
+++ b/ccm_web/client/src/components/AuthorizePrompt.tsx
@@ -1,14 +1,23 @@
 import React from 'react'
-import { Button, makeStyles, Typography } from '@material-ui/core'
+import { styled } from '@mui/material/styles'
+import { Button, Typography } from '@mui/material'
 
 import Help from './Help'
 
-const useStyles = makeStyles(() => ({
-  root: {
+const PREFIX = 'AuthorizePrompt'
+
+const classes = {
+  root: `${PREFIX}-root`,
+  button: `${PREFIX}-button`
+}
+
+const Root = styled('div')(() => ({
+  [`&.${classes.root}`]: {
     padding: 25,
     textAlign: 'left'
   },
-  button: {
+
+  [`& .${classes.button}`]: {
     marginTop: 15
   }
 }))
@@ -18,9 +27,8 @@ interface AuthorizePromptProps {
 }
 
 export default function AuthorizePrompt (props: AuthorizePromptProps): JSX.Element {
-  const classes = useStyles()
   return (
-    <div className={classes.root}>
+    <Root className={classes.root}>
       <Help baseHelpURL={props.helpURL} />
       <Typography variant='h5' component='h1' gutterBottom>
         Authorize Course Manager to Access Your Canvas Account
@@ -43,6 +51,6 @@ export default function AuthorizePrompt (props: AuthorizePromptProps): JSX.Eleme
       >
         GO TO AUTHORIZE PAGE
       </Button>
-    </div>
+    </Root>
   )
 }
diff --git a/ccm_web/client/src/components/Breadcrumbs.tsx b/ccm_web/client/src/components/Breadcrumbs.tsx
index 3c3f11196..4e89927f5 100644
--- a/ccm_web/client/src/components/Breadcrumbs.tsx
+++ b/ccm_web/client/src/components/Breadcrumbs.tsx
@@ -1,12 +1,19 @@
 import React from 'react'
+import { styled } from '@mui/material/styles'
 import { Link as RouterLink } from 'react-router-dom'
-import { Breadcrumbs as MuiBreadcrumbs, Link, makeStyles, Typography } from '@material-ui/core'
-import NavigateNextIcon from '@material-ui/icons/NavigateNext'
+import { Breadcrumbs as MuiBreadcrumbs, Link, Typography } from '@mui/material'
+import NavigateNextIcon from '@mui/icons-material/NavigateNext'
 
 import { FeatureUIProps } from '../models/FeatureUIData'
 
-const useStyles = makeStyles(() => ({
-  breadcrumbs: {
+const PREFIX = 'Breadcrumbs'
+
+const classes = {
+  breadcrumbs: `${PREFIX}-breadcrumbs`
+}
+
+const StyledMuiBreadcrumbs = styled(MuiBreadcrumbs)(() => ({
+  [`& .${classes.breadcrumbs}`]: {
     fontSize: '1.125rem'
   }
 }))
@@ -37,10 +44,9 @@ export interface BreadcrumbsProps {
 }
 
 function Breadcrumbs (props: BreadcrumbsProps): JSX.Element {
-  const classes = useStyles()
   const { features, pathnames } = props
   return (
-    <MuiBreadcrumbs
+    <StyledMuiBreadcrumbs
       aria-label='breadcrumb'
       separator={<NavigateNextIcon fontSize='small' />}
     >
@@ -62,7 +68,7 @@ function Breadcrumbs (props: BreadcrumbsProps): JSX.Element {
             })
           )
         }
-    </MuiBreadcrumbs>
+    </StyledMuiBreadcrumbs>
   )
 }
 
diff --git a/ccm_web/client/src/components/BulkApiErrorContent.tsx b/ccm_web/client/src/components/BulkApiErrorContent.tsx
index 447630c95..496524910 100644
--- a/ccm_web/client/src/components/BulkApiErrorContent.tsx
+++ b/ccm_web/client/src/components/BulkApiErrorContent.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Typography } from '@material-ui/core'
+import { Typography } from '@mui/material'
 
 import APIErrorsTable from './APIErrorsTable'
 import CSVFileName from './CSVFileName'
diff --git a/ccm_web/client/src/components/BulkEnrollUMUserConfirmationTable.tsx b/ccm_web/client/src/components/BulkEnrollUMUserConfirmationTable.tsx
index 7ba4b2f0d..152595055 100644
--- a/ccm_web/client/src/components/BulkEnrollUMUserConfirmationTable.tsx
+++ b/ccm_web/client/src/components/BulkEnrollUMUserConfirmationTable.tsx
@@ -1,32 +1,32 @@
-import React, { useState } from 'react'
-
-import CustomTable from './CustomTable'
-import { RowNumberedAddEnrollment } from '../models/enrollment'
-
-interface BulkEnrollUMUserConfirmationTableProps {
-  enrollments: RowNumberedAddEnrollment[]
-}
-
-interface TableHeaderColumnInfoShouldUseMatUIType {
-  id: keyof RowNumberedAddEnrollment
-  label: string
-  minWidth: number
-  align?: 'left' | 'right' | undefined
-}
-
-const columns: TableHeaderColumnInfoShouldUseMatUIType[] = [
-  { id: 'rowNumber', label: 'Row Number', minWidth: 25 },
-  { id: 'loginId', label: 'Login ID', minWidth: 100 },
-  { id: 'role', label: 'Role', minWidth: 100 }
-]
-
-function BulkEnrollUMUserConfirmationTable (props: BulkEnrollUMUserConfirmationTableProps): JSX.Element {
-  const [page, setPage] = useState<number>(0)
-
-  const tableRows = props.enrollments
-  const caption = `Data was found for ${props.enrollments.length} enrollments.`
-
-  return <CustomTable<RowNumberedAddEnrollment> {...{ tableRows, columns, page, setPage, caption }} />
-}
-
-export default BulkEnrollUMUserConfirmationTable
+import React, { useState } from 'react'
+
+import CustomTable from './CustomTable'
+import { RowNumberedAddEnrollment } from '../models/enrollment'
+
+interface BulkEnrollUMUserConfirmationTableProps {
+  enrollments: RowNumberedAddEnrollment[]
+}
+
+interface TableHeaderColumnInfoShouldUseMatUIType {
+  id: keyof RowNumberedAddEnrollment
+  label: string
+  minWidth: number
+  align?: 'left' | 'right' | undefined
+}
+
+const columns: TableHeaderColumnInfoShouldUseMatUIType[] = [
+  { id: 'rowNumber', label: 'Row Number', minWidth: 25 },
+  { id: 'loginId', label: 'Login ID', minWidth: 100 },
+  { id: 'role', label: 'Role', minWidth: 100 }
+]
+
+function BulkEnrollUMUserConfirmationTable (props: BulkEnrollUMUserConfirmationTableProps): JSX.Element {
+  const [page, setPage] = useState<number>(0)
+
+  const tableRows = props.enrollments
+  const caption = `Data was found for ${props.enrollments.length} enrollments.`
+
+  return <CustomTable<RowNumberedAddEnrollment> {...{ tableRows, columns, page, setPage, caption }} />
+}
+
+export default BulkEnrollUMUserConfirmationTable
diff --git a/ccm_web/client/src/components/BulkSectionCreateUploadConfirmationTable.tsx b/ccm_web/client/src/components/BulkSectionCreateUploadConfirmationTable.tsx
index a09e3dd74..a4dae54e5 100644
--- a/ccm_web/client/src/components/BulkSectionCreateUploadConfirmationTable.tsx
+++ b/ccm_web/client/src/components/BulkSectionCreateUploadConfirmationTable.tsx
@@ -1,35 +1,35 @@
-import React, { useState } from 'react'
-import CustomTable from './CustomTable'
-
-interface Section {
-  rowNumber: number
-  sectionName: string
-}
-
-interface BulkSectionCreateUploadConfirmationTableProps {
-  sectionNames: Section[]
-}
-
-interface TableHeaderColumnInfoShouldUseMatUIType {
-  id: keyof Section
-  label: string
-  minWidth: number
-  align?: 'left' | 'right' | undefined
-}
-
-const columns: TableHeaderColumnInfoShouldUseMatUIType[] = [
-  { id: 'rowNumber', label: 'Row Number', minWidth: 25 },
-  { id: 'sectionName', label: 'Section Name', minWidth: 100 }
-]
-
-function BulkSectionCreateUploadConfirmationTable (props: BulkSectionCreateUploadConfirmationTableProps): JSX.Element {
-  const [page, setPage] = useState<number>(0)
-
-  const tableRows = props.sectionNames.sort((a, b) => (a.rowNumber < b.rowNumber ? -1 : 1))
-  const caption = `Data was found for ${props.sectionNames.length} sections.`
-
-  return <CustomTable<Section> {...{ tableRows, columns, page, setPage, caption }} />
-}
-
-export type { BulkSectionCreateUploadConfirmationTableProps, Section }
-export default BulkSectionCreateUploadConfirmationTable
+import React, { useState } from 'react'
+import CustomTable from './CustomTable'
+
+interface Section {
+  rowNumber: number
+  sectionName: string
+}
+
+interface BulkSectionCreateUploadConfirmationTableProps {
+  sectionNames: Section[]
+}
+
+interface TableHeaderColumnInfoShouldUseMatUIType {
+  id: keyof Section
+  label: string
+  minWidth: number
+  align?: 'left' | 'right' | undefined
+}
+
+const columns: TableHeaderColumnInfoShouldUseMatUIType[] = [
+  { id: 'rowNumber', label: 'Row Number', minWidth: 25 },
+  { id: 'sectionName', label: 'Section Name', minWidth: 100 }
+]
+
+function BulkSectionCreateUploadConfirmationTable (props: BulkSectionCreateUploadConfirmationTableProps): JSX.Element {
+  const [page, setPage] = useState<number>(0)
+
+  const tableRows = props.sectionNames.sort((a, b) => (a.rowNumber < b.rowNumber ? -1 : 1))
+  const caption = `Data was found for ${props.sectionNames.length} sections.`
+
+  return <CustomTable<Section> {...{ tableRows, columns, page, setPage, caption }} />
+}
+
+export type { BulkSectionCreateUploadConfirmationTableProps, Section }
+export default BulkSectionCreateUploadConfirmationTable
diff --git a/ccm_web/client/src/components/CSVFileName.tsx b/ccm_web/client/src/components/CSVFileName.tsx
index ada87871e..d8042f69b 100644
--- a/ccm_web/client/src/components/CSVFileName.tsx
+++ b/ccm_web/client/src/components/CSVFileName.tsx
@@ -1,14 +1,27 @@
 import React from 'react'
-import { makeStyles, Typography } from '@material-ui/core'
+import { styled } from '@mui/material/styles'
+import { Typography } from '@mui/material'
 
-const useStyles = makeStyles((theme) => ({
-  fileNameContainer: {
+const PREFIX = 'CSVFileName'
+
+const classes = {
+  fileNameContainer: `${PREFIX}-fileNameContainer`,
+  fileName: `${PREFIX}-fileName`
+}
+
+const Root = styled('h5')((
+  {
+    theme
+  }
+) => ({
+  [`&.${classes.fileNameContainer}`]: {
     marginBottom: 15,
     paddingLeft: 10,
     paddingRight: 10,
     textAlign: 'left'
   },
-  fileName: {
+
+  [`& .${classes.fileName}`]: {
     color: theme.palette.info.main,
     fontFamily: 'monospace'
   }
@@ -19,11 +32,10 @@ interface CSVFileNameProps {
 }
 
 export default function CSVFileName (props: CSVFileNameProps): JSX.Element {
-  const classes = useStyles()
   return (
-    <h5 className={classes.fileNameContainer}>
+    <Root className={classes.fileNameContainer}>
       <Typography component='span'>File: </Typography>
       <Typography component='span' className={classes.fileName}>{props.file.name}</Typography>
-    </h5>
+    </Root>
   )
 }
diff --git a/ccm_web/client/src/components/CanvasSettingsLink.tsx b/ccm_web/client/src/components/CanvasSettingsLink.tsx
index 68bd02015..4688f828f 100644
--- a/ccm_web/client/src/components/CanvasSettingsLink.tsx
+++ b/ccm_web/client/src/components/CanvasSettingsLink.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Link } from '@material-ui/core'
+import { Link } from '@mui/material'
 
 interface CanvasSettingsLinkProps {
   url: string
diff --git a/ccm_web/client/src/components/ConfirmDialog.tsx b/ccm_web/client/src/components/ConfirmDialog.tsx
index 88487b8c5..08a1a022d 100644
--- a/ccm_web/client/src/components/ConfirmDialog.tsx
+++ b/ccm_web/client/src/components/ConfirmDialog.tsx
@@ -1,23 +1,40 @@
 import React from 'react'
-import { Button, makeStyles, Paper, Typography } from '@material-ui/core'
-import CloudDoneIcon from '@material-ui/icons/CloudDone'
+import { styled } from '@mui/material/styles'
+import { Button, Paper, Typography } from '@mui/material'
+import CloudDoneIcon from '@mui/icons-material/CloudDone'
 
 import { DownloadData } from '../models/models'
 
-const useStyles = makeStyles((theme) => ({
-  padding: {
+const PREFIX = 'ConfirmDialog'
+
+const classes = {
+  padding: `${PREFIX}-padding`,
+  dialog: `${PREFIX}-dialog`,
+  dialogIcon: `${PREFIX}-dialogIcon`,
+  dialogButton: `${PREFIX}-dialogButton`
+}
+
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.padding}`]: {
     padding: theme.spacing(1)
   },
-  dialog: {
+
+  [`&.${classes.dialog}`]: {
     textAlign: 'center',
     margin: 'auto',
     marginTop: 30,
     marginBottom: 15
   },
-  dialogIcon: {
+
+  [`& .${classes.dialogIcon}`]: {
     color: theme.palette.info.main
   },
-  dialogButton: {
+
+  [`& .${classes.dialogButton}`]: {
     margin: 5
   }
 }))
@@ -33,7 +50,6 @@ interface ConfirmDialogProps {
 }
 
 export default function ConfirmDialog (props: ConfirmDialogProps): JSX.Element {
-  const classes = useStyles()
   const defaultTitle = 'Review your CSV file'
   const defaultMessage = 'Your file is valid! If this looks correct, click "Submit" to proceed.'
 
@@ -60,7 +76,7 @@ export default function ConfirmDialog (props: ConfirmDialogProps): JSX.Element {
   )
 
   return (
-    <div className={classes.dialog}>
+    <Root className={classes.dialog}>
       <Paper className={classes.padding} role='status'>
         <Typography>{props.title ?? defaultTitle}</Typography>
         {props.icon !== undefined ? props.icon : <CloudDoneIcon className={classes.dialogIcon} fontSize='large' />}
@@ -70,6 +86,6 @@ export default function ConfirmDialog (props: ConfirmDialogProps): JSX.Element {
         </Button>
         {submitButton}
       </Paper>
-    </div>
+    </Root>
   )
 }
diff --git a/ccm_web/client/src/components/CourseSectionList.tsx b/ccm_web/client/src/components/CourseSectionList.tsx
index 6954dd07a..f0e0d8e2b 100644
--- a/ccm_web/client/src/components/CourseSectionList.tsx
+++ b/ccm_web/client/src/components/CourseSectionList.tsx
@@ -1,8 +1,16 @@
 import { useSnackbar } from 'notistack'
+import { styled } from '@mui/material/styles'
 import React, { useEffect, useState } from 'react'
 import {
-  Backdrop, Button, CircularProgress, Grid, List, ListItem, ListItemText, makeStyles, Typography
-} from '@material-ui/core'
+  Backdrop,
+  Button,
+  CircularProgress,
+  Grid,
+  List,
+  ListItem,
+  ListItemText,
+  Typography
+} from '@mui/material'
 
 import APIErrorMessage from './APIErrorMessage'
 import { getCourseSections, unmergeSections } from '../api'
@@ -12,31 +20,51 @@ import {
 } from '../models/canvas'
 import { CCMComponentProps } from '../models/FeatureUIData'
 
-const useStyles = makeStyles((theme) => ({
-  secondaryTypography: {
+const PREFIX = 'CourseSectionList'
+
+const classes = {
+  secondaryTypography: `${PREFIX}-secondaryTypography`,
+  overflowEllipsis: `${PREFIX}-overflowEllipsis`,
+  header: `${PREFIX}-header`,
+  listItem: `${PREFIX}-listItem`,
+  backdrop: `${PREFIX}-backdrop`,
+  listContainer: `${PREFIX}-listContainer`
+}
+
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.secondaryTypography}`]: {
     display: 'inline'
   },
-  overflowEllipsis: {
+
+  [`& .${classes.overflowEllipsis}`]: {
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     display: 'block'
   },
-  header: {
+
+  [`& .${classes.header}`]: {
     backgroundColor: '#F8F8F8'
   },
-  listItem: {
+
+  [`& .${classes.listItem}`]: {
     borderStyle: 'solid',
     borderWidth: '1px',
     borderColor: '#EEEEEE',
     marginBottom: '2px'
   },
-  backdrop: {
+
+  [`& .${classes.backdrop}`]: {
     zIndex: theme.zIndex.drawer + 1,
     color: '#fff',
     position: 'absolute'
   },
-  listContainer: {
+
+  [`& .${classes.listContainer}`]: {
     position: 'relative',
     zIndex: 0,
     textAlign: 'center',
@@ -50,7 +78,7 @@ export interface CourseSectionListProps extends CCMComponentProps {
 
 function CourseSectionList (props: CourseSectionListProps): JSX.Element {
   const { enqueueSnackbar } = useSnackbar()
-  const classes = useStyles()
+
   const [sections, setSections] = useState<CanvasCourseSectionWithCourseName[]>([])
   const [loadSections, isLoading, error] = usePromise(
     async () => await getCourseSections(props.course.id),
@@ -145,7 +173,7 @@ function CourseSectionList (props: CourseSectionListProps): JSX.Element {
 
   const sectionList = (): JSX.Element => {
     return (
-      <div>
+      <Root>
         <Typography variant='h6' component='h2'>Course Sections</Typography>
         <div className={classes.listContainer}>
           <List>
@@ -159,7 +187,7 @@ function CourseSectionList (props: CourseSectionListProps): JSX.Element {
           </List>
           {loading()}
         </div>
-      </div>
+      </Root>
     )
   }
 
diff --git a/ccm_web/client/src/components/CreateSectionWidget.tsx b/ccm_web/client/src/components/CreateSectionWidget.tsx
index 8acb13af9..a3bbf10d9 100644
--- a/ccm_web/client/src/components/CreateSectionWidget.tsx
+++ b/ccm_web/client/src/components/CreateSectionWidget.tsx
@@ -1,22 +1,38 @@
 import { CODE_NUMPAD_ENTER, CODE_RETURN } from 'keycode-js'
+import { styled } from '@mui/material/styles'
 import { useSnackbar } from 'notistack'
 import React, { ChangeEvent, useState } from 'react'
-import { Button, Grid, makeStyles, TextField } from '@material-ui/core'
+import { Button, Grid, TextField } from '@mui/material'
 
 import APIErrorMessage from './APIErrorMessage'
 import { addCourseSections } from '../api'
 import { CanvasCourseBase, CanvasCourseSection } from '../models/canvas'
 import { CanvasCoursesSectionNameValidator, ICanvasSectionNameInvalidError } from '../utils/canvasSectionNameValidator'
 
-const useStyles = makeStyles((theme) => ({
-  root: {
+const PREFIX = 'CreateSectionWidget'
+
+const classes = {
+  root: `${PREFIX}-root`,
+  input: `${PREFIX}-input`,
+  button: `${PREFIX}-button`
+}
+
+// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.root}`]: {
     backgroundColor: '#FAFAFA',
     height: 200
   },
-  input: {
+
+  [`& .${classes.input}`]: {
     width: '100%'
   },
-  button: {
+
+  [`& .${classes.button}`]: {
     width: '100%'
   }
 }))
@@ -27,7 +43,6 @@ export interface CreateSectionWidgetProps {
 }
 
 function CreateSectionWidget (props: CreateSectionWidgetProps): JSX.Element {
-  const classes = useStyles()
   const { enqueueSnackbar } = useSnackbar()
   const [newSectionName, setNewSectionName] = useState<string>('')
   const [isCreating, setIsCreating] = useState(false)
@@ -93,18 +108,18 @@ function CreateSectionWidget (props: CreateSectionWidgetProps): JSX.Element {
   }
 
   return (
-    <>
-    <Grid container spacing={2}>
-      <Grid item xs={12} sm={9}>
-        <TextField className={classes.input} size='small' label='input the name of the new section' variant='outlined' id="outlined-basic" onChange={newSectionNameChanged} value={newSectionName} onKeyDown={(e) => keyDown(e.code)}/>
-      </Grid>
-      <Grid item xs={12} sm>
-        <Button className={classes.button} variant="contained" color="primary" onClick={createSection} value={newSectionName} disabled={isCreateDisabled()}>
-          Create
-        </Button>
+    (<Root>
+      <Grid container spacing={2}>
+        <Grid item xs={12} sm={9}>
+          <TextField className={classes.input} size='small' label='input the name of the new section' variant='outlined' id="outlined-basic" onChange={newSectionNameChanged} value={newSectionName} onKeyDown={(e) => keyDown(e.code)}/>
+        </Grid>
+        <Grid item xs={12} sm>
+          <Button className={classes.button} variant="contained" color="primary" onClick={createSection} value={newSectionName} disabled={isCreateDisabled()}>
+            Create
+          </Button>
+        </Grid>
       </Grid>
-    </Grid>
-    </>
+    </Root>)
   )
 }
 
diff --git a/ccm_web/client/src/components/CreateSelectSectionWidget.tsx b/ccm_web/client/src/components/CreateSelectSectionWidget.tsx
index c85d1c2e7..c121836f6 100644
--- a/ccm_web/client/src/components/CreateSelectSectionWidget.tsx
+++ b/ccm_web/client/src/components/CreateSelectSectionWidget.tsx
@@ -1,29 +1,51 @@
 import React from 'react'
-import { makeStyles, Tooltip, Typography } from '@material-ui/core'
-import HelpOutline from '@material-ui/icons/HelpOutline'
+import { styled } from '@mui/material/styles'
+import { Tooltip, Typography } from '@mui/material'
+import HelpOutline from '@mui/icons-material/HelpOutline'
 
 import CreateSectionWidget from './CreateSectionWidget'
 import SectionSelectorWidget from './SectionSelectorWidget'
 import { CanvasCourseBase, CanvasCourseSection, CanvasCourseSectionWithCourseName } from '../models/canvas'
 
-const useStyles = makeStyles((theme) => ({
-  spacing: {
+const PREFIX = 'CreateSelectSectionWidget'
+
+const classes = {
+  spacing: `${PREFIX}-spacing`,
+  createSectionWidget: `${PREFIX}-createSectionWidget`,
+  sectionSelectionContainer: `${PREFIX}-sectionSelectionContainer`,
+  newSectionHint: `${PREFIX}-newSectionHint`,
+  tooltip: `${PREFIX}-tooltip`,
+  createSectionContainer: `${PREFIX}-createSectionContainer`
+}
+
+// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.spacing}`]: {
     marginBottom: theme.spacing(2)
   },
-  createSectionWidget: {
+
+  [`& .${classes.createSectionWidget}`]: {
     width: '500px'
   },
-  sectionSelectionContainer: {
+
+  [`& .${classes.sectionSelectionContainer}`]: {
     textAlign: 'center',
     maxHeight: '400px'
   },
-  newSectionHint: {
+
+  [`& .${classes.newSectionHint}`]: {
     display: 'flex'
   },
-  tooltip: {
+
+  [`& .${classes.tooltip}`]: {
     marginLeft: theme.spacing(1)
   },
-  createSectionContainer: {
+
+  [`& .${classes.createSectionContainer}`]: {
     paddingBottom: theme.spacing(2)
   }
 }))
@@ -51,38 +73,37 @@ interface CreateSelectSectionWidgetBaseProps {
 type CreateSelectSectionWidgetProps = CreateSelectSectionWidgetBaseProps & CreateSelectSectionWidgetCreateProps
 
 export default function CreateSelectSectionWidget (props: CreateSelectSectionWidgetProps): JSX.Element {
-  const classes = useStyles()
   return (
-    <>
-    {
-      props.canCreate && (
-        <div className={classes.createSectionContainer}>
-          <div className={`${classes.newSectionHint} ${classes.spacing}`}>
-            <Typography>Create a new section to add users to</Typography>
-            <Tooltip className={classes.tooltip} placement='top' title='Enter a distinct name for this section'>
-              <HelpOutline fontSize='small' />
-            </Tooltip>
-          </div>
-          <div className={classes.createSectionWidget}>
-            <CreateSectionWidget {...props} />
+    (<Root>
+      {
+        props.canCreate && (
+          <div className={classes.createSectionContainer}>
+            <div className={`${classes.newSectionHint} ${classes.spacing}`}>
+              <Typography>Create a new section to add users to</Typography>
+              <Tooltip className={classes.tooltip} placement='top' title='Enter a distinct name for this section'>
+                <HelpOutline fontSize='small' />
+              </Tooltip>
+            </div>
+            <div className={classes.createSectionWidget}>
+              <CreateSectionWidget {...props} />
+            </div>
           </div>
-        </div>
-      )
-    }
-    <Typography variant='subtitle1' className={classes.spacing}>
-      Select an existing section to add users to
-    </Typography>
-    <div className={classes.sectionSelectionContainer}>
-      <SectionSelectorWidget
-        height={300}
-        search={[]}
-        multiSelect={false}
-        sections={props.sections}
-        selectedSections={props.selectedSection !== undefined ? [props.selectedSection] : []}
-        selectionUpdated={(sections) => props.setSelectedSection(sections[0])}
-        canUnmerge={false}
-      />
-    </div>
-    </>
+        )
+      }
+      <Typography variant='subtitle1' className={classes.spacing}>
+        Select an existing section to add users to
+      </Typography>
+      <div className={classes.sectionSelectionContainer}>
+        <SectionSelectorWidget
+          height={300}
+          search={[]}
+          multiSelect={false}
+          sections={props.sections}
+          selectedSections={props.selectedSection !== undefined ? [props.selectedSection] : []}
+          selectionUpdated={(sections) => props.setSelectedSection(sections[0])}
+          canUnmerge={false}
+        />
+      </div>
+    </Root>)
   )
 }
diff --git a/ccm_web/client/src/components/CustomTable.tsx b/ccm_web/client/src/components/CustomTable.tsx
index f8aeab611..0eb8486ca 100644
--- a/ccm_web/client/src/components/CustomTable.tsx
+++ b/ccm_web/client/src/components/CustomTable.tsx
@@ -1,98 +1,98 @@
-import { Paper, Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow } from '@material-ui/core'
-import React from 'react'
-import StyledTableCell from './StyledTableCell'
-import TableCaption from './TableCaption'
-import { TablePaginationActions } from './TablePagination'
-
-interface TableEntity {
-  rowNumber: number
-}
-
-interface TableColumn<T> {
-  id: keyof T
-  label: string
-  minWidth: number
-  align?: 'left' | 'right' | undefined
-}
-
-interface TableProps<T> {
-  tableRows: T[]
-  columns: Array<TableColumn<T>>
-  caption: string
-  page: number
-  setPage: (page: number) => void
-}
-
-function CustomTable<T extends TableEntity> (props: TableProps<T>): JSX.Element {
-  const rowsPerPage = 5
-
-  const { tableRows, columns, page, setPage } = props
-
-  const emptyRows = rowsPerPage - Math.min(rowsPerPage, tableRows.length - page * rowsPerPage)
-
-  const handleChangePage = (event: unknown, newPage: number): void => {
-    setPage(newPage)
-  }
-
-  return (
-    <TableContainer component={Paper}>
-      <Table stickyHeader aria-label="custom pagination table">
-        <TableCaption text={props.caption} />
-        <TableHead>
-            <TableRow>
-              {columns.map((column) => (
-                <StyledTableCell
-                  key={String(column.id)}
-                  align={column.align}
-                  style={{ minWidth: column.minWidth }}
-                >
-                  {column.label}
-                </StyledTableCell>
-              ))}
-            </TableRow>
-          </TableHead>
-        <TableBody>
-          {tableRows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row) => {
-            return (
-              <TableRow hover key={row.rowNumber}>
-                {columns.map((column) => {
-                  const value = row[column.id]
-                  return (
-                    <TableCell key={String(column.id)} align={column.align}>
-                      {value}
-                    </TableCell>
-                  )
-                })}
-              </TableRow>
-            )
-          })}
-          {emptyRows > 0 && (
-            <TableRow style={{ height: 53 * emptyRows }}>
-              <TableCell colSpan={6} />
-            </TableRow>
-          )}
-        </TableBody>
-        <TableFooter>
-          <TableRow>
-            <TablePagination
-              rowsPerPageOptions={[rowsPerPage]}
-              count={tableRows.length}
-              rowsPerPage={rowsPerPage}
-              page={page}
-              SelectProps={{
-                inputProps: { 'aria-label': 'rows per page' },
-                native: true
-              }}
-              onPageChange={handleChangePage}
-              ActionsComponent={TablePaginationActions}
-              aria-live='polite'
-            />
-          </TableRow>
-        </TableFooter>
-      </Table>
-    </TableContainer>
-  )
-}
-
-export type { TableColumn }
-export default CustomTable
+import { Paper, Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow } from '@mui/material'
+import React from 'react'
+import StyledTableCell from './StyledTableCell'
+import TableCaption from './TableCaption'
+import { TablePaginationActions } from './TablePagination'
+
+interface TableEntity {
+  rowNumber: number
+}
+
+interface TableColumn<T> {
+  id: keyof T
+  label: string
+  minWidth: number
+  align?: 'left' | 'right' | undefined
+}
+
+interface TableProps<T> {
+  tableRows: T[]
+  columns: Array<TableColumn<T>>
+  caption: string
+  page: number
+  setPage: (page: number) => void
+}
+
+function CustomTable<T extends TableEntity> (props: TableProps<T>): JSX.Element {
+  const rowsPerPage = 5
+
+  const { tableRows, columns, page, setPage } = props
+
+  const emptyRows = rowsPerPage - Math.min(rowsPerPage, tableRows.length - page * rowsPerPage)
+
+  const handleChangePage = (event: unknown, newPage: number): void => {
+    setPage(newPage)
+  }
+
+  return (
+    <TableContainer component={Paper}>
+      <Table stickyHeader aria-label="custom pagination table">
+        <TableCaption text={props.caption} />
+        <TableHead>
+            <TableRow>
+              {columns.map((column) => (
+                <StyledTableCell
+                  key={String(column.id)}
+                  align={column.align}
+                  style={{ minWidth: column.minWidth }}
+                >
+                  {column.label}
+                </StyledTableCell>
+              ))}
+            </TableRow>
+          </TableHead>
+        <TableBody>
+          {tableRows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row) => {
+            return (
+              <TableRow hover key={row.rowNumber}>
+                {columns.map((column) => {
+                  const value = row[column.id]
+                  return (
+                    <TableCell key={String(column.id)} align={column.align}>
+                      {value}
+                    </TableCell>
+                  )
+                })}
+              </TableRow>
+            )
+          })}
+          {emptyRows > 0 && (
+            <TableRow style={{ height: 53 * emptyRows }}>
+              <TableCell colSpan={6} />
+            </TableRow>
+          )}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              rowsPerPageOptions={[rowsPerPage]}
+              count={tableRows.length}
+              rowsPerPage={rowsPerPage}
+              page={page}
+              SelectProps={{
+                inputProps: { 'aria-label': 'rows per page' },
+                native: true
+              }}
+              onPageChange={handleChangePage}
+              ActionsComponent={TablePaginationActions}
+              aria-live='polite'
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </TableContainer>
+  )
+}
+
+export type { TableColumn }
+export default CustomTable
diff --git a/ccm_web/client/src/components/ErrorAlert.tsx b/ccm_web/client/src/components/ErrorAlert.tsx
index 2247f1e03..9255a006f 100644
--- a/ccm_web/client/src/components/ErrorAlert.tsx
+++ b/ccm_web/client/src/components/ErrorAlert.tsx
@@ -1,11 +1,22 @@
 import React from 'react'
-import { Button, makeStyles, Typography } from '@material-ui/core'
-import ErrorIcon from '@material-ui/icons/Error'
+import { styled } from '@mui/material/styles'
+import { Button, Typography } from '@mui/material'
+import ErrorIcon from '@mui/icons-material/Error'
 
 import Alert from './Alert'
 
-const useStyles = makeStyles((theme) => ({
-  dialogIcon: {
+const PREFIX = 'ErrorAlert'
+
+const classes = {
+  dialogIcon: `${PREFIX}-dialogIcon`
+}
+
+const StyledAlert = styled(Alert)((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.dialogIcon}`]: {
     color: theme.palette.error.main
   }
 }))
@@ -20,8 +31,6 @@ interface ErrorAlertProps {
 }
 
 export default function ErrorAlert (props: ErrorAlertProps): JSX.Element {
-  const classes = useStyles()
-
   const { messages, tryAgain, title, icon, embedded } = props
 
   const defaultMessage = <Typography>Something went wrong. Please try again later.</Typography>
@@ -33,7 +42,7 @@ export default function ErrorAlert (props: ErrorAlertProps): JSX.Element {
       : <ol>{messages.map((m, i) => <li key={i}>{m}</li>)}</ol>
 
   return (
-    <Alert
+    <StyledAlert
       title={title !== undefined ? title : 'Some errors occurred'}
       icon={icon !== undefined ? icon : <ErrorIcon className={classes.dialogIcon} fontSize='large' />}
       embedded={embedded}
@@ -41,6 +50,6 @@ export default function ErrorAlert (props: ErrorAlertProps): JSX.Element {
       {Boolean(messages?.length) && preface}
       {messageBlock}
       {tryAgain !== undefined && <Button color='primary' onClick={props.tryAgain}>Try Again</Button>}
-    </Alert>
+    </StyledAlert>
   )
 }
diff --git a/ccm_web/client/src/components/ExampleFileDownloadHeader.tsx b/ccm_web/client/src/components/ExampleFileDownloadHeader.tsx
index 75701d89e..b5f320b46 100644
--- a/ccm_web/client/src/components/ExampleFileDownloadHeader.tsx
+++ b/ccm_web/client/src/components/ExampleFileDownloadHeader.tsx
@@ -1,10 +1,17 @@
 import React from 'react'
-import { Link, makeStyles, Typography } from '@material-ui/core'
+import { styled } from '@mui/material/styles'
+import { Link, Typography } from '@mui/material'
 
 import { prepDownloadDataString } from '../utils/fileUtils'
 
-const useStyles = makeStyles(() => ({
-  uploadHeader: {
+const PREFIX = 'ExampleFileDownloadHeader'
+
+const classes = {
+  uploadHeader: `${PREFIX}-uploadHeader`
+}
+
+const Root = styled('div')(() => ({
+  [`&.${classes.uploadHeader}`]: {
     marginTop: 15,
     marginBottom: 15
   }
@@ -18,11 +25,10 @@ interface ExampleFileDownloadHeaderProps {
 }
 
 function ExampleFileDownloadHeader (props: ExampleFileDownloadHeaderProps): JSX.Element {
-  const classes = useStyles()
   const { body, description, fileData, fileName } = props
 
   return (
-    <div className={classes.uploadHeader}>
+    <Root className={classes.uploadHeader}>
       <Typography variant='h6' component='h2'>Upload your CSV file</Typography>
       {description !== undefined && <Typography>{props.description}</Typography>}
       <br/>
@@ -31,7 +37,7 @@ function ExampleFileDownloadHeader (props: ExampleFileDownloadHeaderProps): JSX.
       <Link href={prepDownloadDataString(fileData)} download={fileName}>
         Download an example
       </Link>
-    </div>
+    </Root>
   )
 }
 
diff --git a/ccm_web/client/src/components/FeatureCard.tsx b/ccm_web/client/src/components/FeatureCard.tsx
index 1171ab372..15185f543 100644
--- a/ccm_web/client/src/components/FeatureCard.tsx
+++ b/ccm_web/client/src/components/FeatureCard.tsx
@@ -1,30 +1,45 @@
 import React from 'react'
+import { styled } from '@mui/material/styles'
 import { Link as RouterLink } from 'react-router-dom'
-import { Card, CardActionArea, CardContent, Grid, makeStyles, Typography } from '@material-ui/core'
+import { Card, CardActionArea, CardContent, Grid, Typography } from '@mui/material'
 
 import { FeatureUIProps } from '../models/FeatureUIData'
 
-const useStyles = makeStyles((theme) => ({
-  cardContent: {
+const PREFIX = 'FeatureCard'
+
+const classes = {
+  cardContent: `${PREFIX}-cardContent`,
+  centered: `${PREFIX}-centered`,
+  title: `${PREFIX}-title`,
+  cardLink: `${PREFIX}-cardLink`
+}
+
+const StyledRouterLink = styled(RouterLink)((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.cardContent}`]: {
     backgroundColor: '#FAFAFA',
     height: 200
   },
-  centered: {
+
+  [`& .${classes.centered}`]: {
     width: '100%'
   },
-  title: {
+
+  [`& .${classes.title}`]: {
     fontSize: 14
   },
-  cardLink: {
+
+  [`&.${classes.cardLink}`]: {
     textDecoration: 'none'
   }
 }))
 
 function FeatureCard (props: FeatureUIProps): JSX.Element {
-  const classes = useStyles()
-
   return (
-    <RouterLink className={classes.cardLink} to={props.route} tabIndex={-1}>
+    <StyledRouterLink className={classes.cardLink} to={props.route} tabIndex={-1}>
       <Card variant='outlined'>
         <CardActionArea>
           <CardContent className={`${classes.cardContent}`}>
@@ -46,7 +61,7 @@ function FeatureCard (props: FeatureUIProps): JSX.Element {
           </CardContent>
         </CardActionArea>
       </Card>
-    </RouterLink>
+    </StyledRouterLink>
   )
 }
 
diff --git a/ccm_web/client/src/components/FileUpload.tsx b/ccm_web/client/src/components/FileUpload.tsx
index 241b8e516..1f70ef92f 100644
--- a/ccm_web/client/src/components/FileUpload.tsx
+++ b/ccm_web/client/src/components/FileUpload.tsx
@@ -1,37 +1,58 @@
 import React, { ChangeEvent, useRef } from 'react'
-import { Button, Card, CardContent, makeStyles, Typography } from '@material-ui/core'
-import CloudUploadIcon from '@material-ui/icons/CloudUpload'
+import { styled } from '@mui/material/styles'
+import { Button, Card, CardContent, Typography } from '@mui/material'
+import CloudUploadIcon from '@mui/icons-material/CloudUpload'
 import { useSnackbar } from 'notistack'
 
-interface FileUploadProps {
-  onUploadComplete: (file: File) => void
+const PREFIX = 'FileUpload'
+
+const classes = {
+  root: `${PREFIX}-root`,
+  cardContent: `${PREFIX}-cardContent`,
+  actionsBar: `${PREFIX}-actionsBar`,
+  actionsBarIcon: `${PREFIX}-actionsBarIcon`,
+  input: `${PREFIX}-input`,
+  uploadIcon: `${PREFIX}-uploadIcon`
 }
 
-const useStyles = makeStyles((theme) => ({
-  root: {
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`&.${classes.root}`]: {
     textAlign: 'center'
   },
-  cardContent: {
+
+  [`& .${classes.cardContent}`]: {
     cursor: 'pointer',
     height: 250,
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'center'
   },
-  actionsBar: {
+
+  [`& .${classes.actionsBar}`]: {
     backgroundColor: '#EEEEEE'
   },
-  actionsBarIcon: {
+
+  [`& .${classes.actionsBarIcon}`]: {
     verticalAlign: 'middle'
   },
-  input: {
+
+  [`& .${classes.input}`]: {
 
   },
-  uploadIcon: {
+
+  [`& .${classes.uploadIcon}`]: {
     color: theme.palette.info.main
   }
 }))
 
+interface FileUploadProps {
+  onUploadComplete: (file: File) => void
+}
+
 function FileUpload (props: FileUploadProps): JSX.Element {
   const { enqueueSnackbar } = useSnackbar()
   const handleFileSelected = (file: File|undefined): void => {
@@ -58,7 +79,6 @@ function FileUpload (props: FileUploadProps): JSX.Element {
   }
 
   const fileInput = useRef<HTMLInputElement | null>(null)
-  const classes = useStyles()
 
   const handleFileChange = (event: ChangeEvent<HTMLInputElement>): void => {
     if (event.target === null || event.target.files === null) return
@@ -66,7 +86,7 @@ function FileUpload (props: FileUploadProps): JSX.Element {
   }
 
   return (
-    <div className={classes.root}>
+    <Root className={classes.root}>
       <Card variant='outlined'>
         <CardContent className={classes.cardContent} onDragOver={dragover} onDrop={dragdrop} onClick={(e) => onFileInputClick(e)}>
           <div>
@@ -87,7 +107,7 @@ function FileUpload (props: FileUploadProps): JSX.Element {
           </div>
         </CardContent>
       </Card>
-    </div>
+    </Root>
   )
 }
 
diff --git a/ccm_web/client/src/components/GradebookUploadConfirmationTable.tsx b/ccm_web/client/src/components/GradebookUploadConfirmationTable.tsx
index a291ed91d..5500c1038 100644
--- a/ccm_web/client/src/components/GradebookUploadConfirmationTable.tsx
+++ b/ccm_web/client/src/components/GradebookUploadConfirmationTable.tsx
@@ -1,42 +1,42 @@
-import React, { useState } from 'react'
-import CustomTable from './CustomTable'
-
-interface StudentGrade {
-  rowNumber: number
-  uniqname: string
-  grade: string
-  overrideGrade: string | undefined
-}
-
-interface GradebookUploadConfirmationTableProps {
-  grades: StudentGrade[]
-}
-
-interface TableHeaderColumnInfoShouldUseMatUIType {
-  id: keyof StudentGrade
-  label: string
-  minWidth: number
-  align?: 'left' | 'right' | undefined
-}
-
-const columns: TableHeaderColumnInfoShouldUseMatUIType[] = [
-  { id: 'rowNumber', label: 'Row Number', minWidth: 25 },
-  { id: 'uniqname', label: 'Uniqname', minWidth: 100 },
-  { id: 'grade', label: 'Grade', minWidth: 75 },
-  { id: 'overrideGrade', label: 'Override Grade', minWidth: 75 }
-]
-
-function GradebookUploadConfirmationTable (props: GradebookUploadConfirmationTableProps): JSX.Element {
-  const [page, setPage] = useState<number>(0)
-
-  const tableRows = props.grades.sort((a, b) => (a.rowNumber < b.rowNumber ? -1 : 1))
-  const confirmationTableColumns = (tableRows.filter(grade => { return grade.overrideGrade !== undefined }).length > 0)
-    ? columns
-    : columns.filter(column => { return column.id !== 'overrideGrade' })
-  const caption = `Trimmed gradebook data, containing ${props.grades.length} records, was generated.`
-
-  return <CustomTable<StudentGrade> {...{ tableRows, columns: confirmationTableColumns, page, setPage, caption }} />
-}
-
-export type { GradebookUploadConfirmationTableProps, StudentGrade }
-export default GradebookUploadConfirmationTable
+import React, { useState } from 'react'
+import CustomTable from './CustomTable'
+
+interface StudentGrade {
+  rowNumber: number
+  uniqname: string
+  grade: string
+  overrideGrade: string | undefined
+}
+
+interface GradebookUploadConfirmationTableProps {
+  grades: StudentGrade[]
+}
+
+interface TableHeaderColumnInfoShouldUseMatUIType {
+  id: keyof StudentGrade
+  label: string
+  minWidth: number
+  align?: 'left' | 'right' | undefined
+}
+
+const columns: TableHeaderColumnInfoShouldUseMatUIType[] = [
+  { id: 'rowNumber', label: 'Row Number', minWidth: 25 },
+  { id: 'uniqname', label: 'Uniqname', minWidth: 100 },
+  { id: 'grade', label: 'Grade', minWidth: 75 },
+  { id: 'overrideGrade', label: 'Override Grade', minWidth: 75 }
+]
+
+function GradebookUploadConfirmationTable (props: GradebookUploadConfirmationTableProps): JSX.Element {
+  const [page, setPage] = useState<number>(0)
+
+  const tableRows = props.grades.sort((a, b) => (a.rowNumber < b.rowNumber ? -1 : 1))
+  const confirmationTableColumns = (tableRows.filter(grade => { return grade.overrideGrade !== undefined }).length > 0)
+    ? columns
+    : columns.filter(column => { return column.id !== 'overrideGrade' })
+  const caption = `Trimmed gradebook data, containing ${props.grades.length} records, was generated.`
+
+  return <CustomTable<StudentGrade> {...{ tableRows, columns: confirmationTableColumns, page, setPage, caption }} />
+}
+
+export type { GradebookUploadConfirmationTableProps, StudentGrade }
+export default GradebookUploadConfirmationTable
diff --git a/ccm_web/client/src/components/Help.tsx b/ccm_web/client/src/components/Help.tsx
index 1f2c81ba9..bd318d6b1 100644
--- a/ccm_web/client/src/components/Help.tsx
+++ b/ccm_web/client/src/components/Help.tsx
@@ -1,8 +1,19 @@
 import React from 'react'
-import { makeStyles, Typography, Link } from '@material-ui/core'
+import { styled } from '@mui/material/styles'
+import { Typography, Link } from '@mui/material'
 
-const useStyles = makeStyles((theme) => ({
-  helpText: {
+const PREFIX = 'Help'
+
+const classes = {
+  helpText: `${PREFIX}-helpText`
+}
+
+const StyledTypography = styled(Typography)((
+  {
+    theme
+  }
+) => ({
+  [`&.${classes.helpText}`]: {
     float: 'right'
   }
 }))
@@ -13,11 +24,8 @@ interface HelpLinkProps {
 }
 
 function Help (props: HelpLinkProps): JSX.Element {
-  const classes = useStyles()
   const fullURL = props.baseHelpURL + (props.helpURLEnding ?? '')
-  return (
-    <Typography className={classes.helpText} ><Link href={fullURL} target='_blank' rel="noopener">Need Help?</Link></Typography>
-  )
+  return <StyledTypography className={classes.helpText} ><Link href={fullURL} target='_blank' rel="noopener">Need Help?</Link></StyledTypography>
 }
 
 export default Help
diff --git a/ccm_web/client/src/components/HelpContact.tsx b/ccm_web/client/src/components/HelpContact.tsx
index 042b9f35f..d8e526364 100644
--- a/ccm_web/client/src/components/HelpContact.tsx
+++ b/ccm_web/client/src/components/HelpContact.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Link, Typography } from '@material-ui/core'
+import { Link, Typography } from '@mui/material'
 
 export interface HelpContactProps {
   email: string
diff --git a/ccm_web/client/src/components/InlineErrorAlert.tsx b/ccm_web/client/src/components/InlineErrorAlert.tsx
index 54a486427..5f6eaaa5e 100644
--- a/ccm_web/client/src/components/InlineErrorAlert.tsx
+++ b/ccm_web/client/src/components/InlineErrorAlert.tsx
@@ -1,16 +1,29 @@
 import React from 'react'
-import { Grid, makeStyles, Paper } from '@material-ui/core'
-import red from '@material-ui/core/colors/red'
-import ErrorIcon from '@material-ui/icons/Error'
+import { styled } from '@mui/material/styles'
+import { Grid, Paper } from '@mui/material'
+import ErrorIcon from '@mui/icons-material/Error'
+import { red } from '@mui/material/colors'
 
-const useStyles = makeStyles((theme) => ({
-  alert: {
+const PREFIX = 'InlineErrorAlert'
+
+const classes = {
+  alert: `${PREFIX}-alert`,
+  icon: `${PREFIX}-icon`
+}
+
+const StyledPaper = styled(Paper)((
+  {
+    theme
+  }
+) => ({
+  [`&.${classes.alert}`]: {
     marginBottom: theme.spacing(2),
     padding: theme.spacing(1),
     color: theme.palette.error.dark,
     backgroundColor: red[50]
   },
-  icon: {
+
+  [`& .${classes.icon}`]: {
     color: theme.palette.error.main
   }
 }))
@@ -26,13 +39,12 @@ but is part of the core later in 5. We can use that once we update.
 */
 
 export default function InlineErrorAlert (props: InlineAlertProps): JSX.Element {
-  const classes = useStyles()
   return (
-    <Paper className={classes.alert} elevation={0} role='alert'>
+    <StyledPaper className={classes.alert} elevation={0} role='alert'>
       <Grid container spacing={2} alignItems='center' direction='row' wrap='nowrap'>
         <Grid item><ErrorIcon className={classes.icon} /></Grid>
         <Grid item>{props.children}</Grid>
       </Grid>
-    </Paper>
+    </StyledPaper>
   )
 }
diff --git a/ccm_web/client/src/components/InlineTextEdit.tsx b/ccm_web/client/src/components/InlineTextEdit.tsx
index 44841fafb..eee790b0e 100644
--- a/ccm_web/client/src/components/InlineTextEdit.tsx
+++ b/ccm_web/client/src/components/InlineTextEdit.tsx
@@ -1,22 +1,22 @@
 import React, { useEffect, useRef, useState } from 'react'
-import { makeStyles } from '@material-ui/core/styles'
-import { Button, Grid, TextField, Typography } from '@material-ui/core'
-import { Edit as EditIcon } from '@material-ui/icons'
+import { styled } from '@mui/material/styles'
+import { Button, Grid, TextField, Typography } from '@mui/material'
+import { Edit as EditIcon } from '@mui/icons-material'
 import { CODE_ENTER, CODE_NUMPAD_ENTER, CODE_ESCAPE } from 'keycode-js'
 
 import { ValidationResult } from '../utils/validation'
 
-interface InlineTextEditProps {
-  text: string
-  placeholderText: string
-  fontSize: string
-  isSaving: boolean
-  validate: (value: string | undefined) => ValidationResult
-  save: (text: string) => Promise<void>
+const PREFIX = 'InlineTextEdit'
+
+const classes = {
+  root: `${PREFIX}-root`,
+  editIcon: `${PREFIX}-editIcon`,
+  buttonSep: `${PREFIX}-buttonSep`,
+  button: `${PREFIX}-button`
 }
 
-const useStyles = makeStyles(() => ({
-  root: {
+const Root = styled('div')(() => ({
+  [`&.${classes.root}`]: {
     '& .MuiInputBase-root.Mui-disabled': {
       color: 'rgba(0, 0, 0, 0.6)' // (default alpha is 0.38)
     },
@@ -24,19 +24,30 @@ const useStyles = makeStyles(() => ({
       cursor: 'pointer'
     }
   },
-  editIcon: {
+
+  [`& .${classes.editIcon}`]: {
     cursor: 'pointer'
   },
-  buttonSep: {
+
+  [`& .${classes.buttonSep}`]: {
     marginRight: 15
   },
-  button: {
+
+  [`& .${classes.button}`]: {
     margin: 5
   }
 }))
 
+interface InlineTextEditProps {
+  text: string
+  placeholderText: string
+  fontSize: string
+  isSaving: boolean
+  validate: (value: string | undefined) => ValidationResult
+  save: (text: string) => Promise<void>
+}
+
 function InlineTextEdit (props: InlineTextEditProps): JSX.Element {
-  const classes = useStyles()
   const [isEditing, setIsEditing] = useState(false)
   const [tempTextValue, setTempTextValue] = useState(props.text)
   const [validationResult, setValidationResult] = useState<ValidationResult | undefined>(undefined)
@@ -87,7 +98,7 @@ function InlineTextEdit (props: InlineTextEditProps): JSX.Element {
       : 'Value for the field is invalid.'
 
   return (
-    <div className={classes.root}>
+    <Root className={classes.root}>
       {
         isEditing
           ? (
@@ -145,7 +156,7 @@ function InlineTextEdit (props: InlineTextEditProps): JSX.Element {
               </>
             )
       }
-    </div>
+    </Root>
   )
 }
 
diff --git a/ccm_web/client/src/components/Layout.tsx b/ccm_web/client/src/components/Layout.tsx
index b0faeac44..6a21a3075 100644
--- a/ccm_web/client/src/components/Layout.tsx
+++ b/ccm_web/client/src/components/Layout.tsx
@@ -1,23 +1,40 @@
 import React from 'react'
-import { Divider, Grid, Link, makeStyles, Paper, Typography } from '@material-ui/core'
-import BuildIcon from '@material-ui/icons/Build'
+import { styled } from '@mui/material/styles'
+import { Divider, Grid, Link, Paper, Typography } from '@mui/material'
+import BuildIcon from '@mui/icons-material/Build'
 
 import Breadcrumbs, { BreadcrumbsProps } from './Breadcrumbs'
 import ResponsiveHelper from './ResponsiveHelper'
 import { getCSRFToken } from '../api'
 
-const useStyles = makeStyles((theme) => ({
-  root: {
+const PREFIX = 'Layout'
+
+const classes = {
+  root: `${PREFIX}-root`,
+  spacing: `${PREFIX}-spacing`,
+  devModePaper: `${PREFIX}-devModePaper`,
+  swaggerLink: `${PREFIX}-swaggerLink`
+}
+
+const StyledGrid = styled(Grid)((
+  {
+    theme
+  }
+) => ({
+  [`&.${classes.root}`]: {
     textAlign: 'center',
     padding: theme.spacing(2)
   },
-  spacing: {
+
+  [`& .${classes.spacing}`]: {
     marginBottom: theme.spacing(2)
   },
-  devModePaper: {
+
+  [`& .${classes.devModePaper}`]: {
     padding: theme.spacing(1)
   },
-  swaggerLink: {
+
+  [`& .${classes.swaggerLink}`]: {
     display: 'block',
     clear: 'both'
   }
@@ -29,8 +46,6 @@ interface LayoutProps extends BreadcrumbsProps {
 }
 
 export default function Layout (props: LayoutProps): JSX.Element {
-  const classes = useStyles()
-
   const devBlock = props.devMode === true && (
     <>
     <div className={`${classes.swaggerLink} ${classes.spacing}`}>
@@ -50,7 +65,7 @@ export default function Layout (props: LayoutProps): JSX.Element {
   )
 
   return (
-    <Grid container className={classes.root}>
+    <StyledGrid container className={classes.root}>
       <Grid item sm={12} md={10} lg={9}>
         {devBlock}
         <div className={classes.spacing}><Breadcrumbs {...props} /></div>
@@ -60,6 +75,6 @@ export default function Layout (props: LayoutProps): JSX.Element {
           <Typography>Copyright © 2022 The Regents of the University of Michigan</Typography>
         </footer>
       </Grid>
-    </Grid>
+    </StyledGrid>
   )
 }
diff --git a/ccm_web/client/src/components/MethodSelect.tsx b/ccm_web/client/src/components/MethodSelect.tsx
index 6ebf67377..a7f3fed14 100644
--- a/ccm_web/client/src/components/MethodSelect.tsx
+++ b/ccm_web/client/src/components/MethodSelect.tsx
@@ -1,7 +1,23 @@
 import React from 'react'
-import {
-  Button, FormControl, FormControlLabel, FormLabel, makeStyles, Radio, RadioGroup
-} from '@material-ui/core'
+import { styled } from '@mui/material/styles'
+import { Button, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup } from '@mui/material'
+
+const PREFIX = 'MethodSelect'
+
+const classes = {
+  spacing: `${PREFIX}-spacing`
+}
+
+// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.spacing}`]: {
+    marginBottom: theme.spacing(2)
+  }
+}))
 
 interface Option<T extends string> {
   key: T
@@ -18,15 +34,7 @@ interface MethodSelectProps<T extends string> {
   disabled?: boolean
 }
 
-const useStyles = makeStyles((theme) => ({
-  spacing: {
-    marginBottom: theme.spacing(2)
-  }
-}))
-
 export default function UserInputMethodSelect<T extends string> (props: MethodSelectProps<T>): JSX.Element {
-  const classes = useStyles()
-
   const handleChange = (e: React.ChangeEvent<{ name?: string, value: unknown }>): void => {
     const value = e.target.value
     if (typeof value === 'string' && props.typeGuard(value)) {
@@ -35,40 +43,40 @@ export default function UserInputMethodSelect<T extends string> (props: MethodSe
   }
 
   return (
-    <>
-    <div className={classes.spacing}>
-      <FormControl component='fieldset'>
-        <FormLabel className={classes.spacing}>{props.label} (Required)</FormLabel>
-        <RadioGroup
-          aria-label='Input method'
-          value={props.selectedMethod}
-          name='radio-buttons-group'
-          onChange={handleChange}
-        >
-          {
-            props.options.map((o, i) => {
-              return (
-                <FormControlLabel
-                  key={i}
-                  value={o.key}
-                  control={<Radio color='primary' disabled={props.disabled} />}
-                  label={o.label}
-                />
-              )
-            })
-          }
-        </RadioGroup>
-      </FormControl>
-    </div>
-    <Button
-      color='primary'
-      variant='contained'
-      disabled={props.disabled}
-      aria-label='Select method'
-      onClick={props.onButtonClick}
-    >
-      Select
-    </Button>
-    </>
+    (<Root>
+      <div className={classes.spacing}>
+        <FormControl component='fieldset'>
+          <FormLabel className={classes.spacing}>{props.label} (Required)</FormLabel>
+          <RadioGroup
+            aria-label='Input method'
+            value={props.selectedMethod}
+            name='radio-buttons-group'
+            onChange={handleChange}
+          >
+            {
+              props.options.map((o, i) => {
+                return (
+                  <FormControlLabel
+                    key={i}
+                    value={o.key}
+                    control={<Radio color='primary' disabled={props.disabled} />}
+                    label={o.label}
+                  />
+                )
+              })
+            }
+          </RadioGroup>
+        </FormControl>
+      </div>
+      <Button
+        color='primary'
+        variant='contained'
+        disabled={props.disabled}
+        aria-label='Select method'
+        onClick={props.onButtonClick}
+      >
+        Select
+      </Button>
+    </Root>)
   )
 }
diff --git a/ccm_web/client/src/components/MultipleSectionEnrollmentWorkflow.tsx b/ccm_web/client/src/components/MultipleSectionEnrollmentWorkflow.tsx
index 73532d826..118f8c35e 100644
--- a/ccm_web/client/src/components/MultipleSectionEnrollmentWorkflow.tsx
+++ b/ccm_web/client/src/components/MultipleSectionEnrollmentWorkflow.tsx
@@ -1,8 +1,19 @@
 import React, { useState } from 'react'
+import { styled } from '@mui/material/styles'
 import {
-  Backdrop, Button, Box, CircularProgress, Grid, Link, makeStyles, Table, TableBody, TableCell,
-  TableContainer, TableHead, TableRow, Typography
-} from '@material-ui/core'
+  Backdrop,
+  Button,
+  CircularProgress,
+  Grid,
+  Link,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography
+} from '@mui/material'
 
 import Accordion from './Accordion'
 import APIErrorMessage from './APIErrorMessage'
@@ -34,31 +45,46 @@ import {
 import { getRowNumber, prepDownloadDataString } from '../utils/fileUtils'
 import FileParserWrapper, { CSVRecord } from '../utils/FileParserWrapper'
 
-enum CSVWorkflowState {
-  Upload,
-  Review,
-  Confirmation
+const PREFIX = 'MultipleSectionEnrollmentWorkflow'
+
+const classes = {
+  spacing: `${PREFIX}-spacing`,
+  buttonGroup: `${PREFIX}-buttonGroup`,
+  sectionIdTable: `${PREFIX}-sectionIdTable`,
+  confirmationTable: `${PREFIX}-confirmationTable`,
+  container: `${PREFIX}-container`,
+  backdrop: `${PREFIX}-backdrop`
 }
 
-const useStyles = makeStyles((theme) => ({
-  spacing: {
+// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.spacing}`]: {
     marginBottom: theme.spacing(2)
   },
-  buttonGroup: {
+
+  [`& .${classes.buttonGroup}`]: {
     marginTop: theme.spacing(1)
   },
-  sectionIdTable: {
+
+  [`& .${classes.sectionIdTable}`]: {
     maxHeight: 300
   },
-  confirmationTable: {
+
+  [`& .${classes.confirmationTable}`]: {
     paddingRight: theme.spacing(1),
     paddingLeft: theme.spacing(1)
   },
-  container: {
+
+  [`& .${classes.container}`]: {
     position: 'relative',
     zIndex: 0
   },
-  backdrop: {
+
+  [`& .${classes.backdrop}`]: {
     zIndex: theme.zIndex.drawer + 1,
     color: '#FFF',
     position: 'absolute',
@@ -66,13 +92,18 @@ const useStyles = makeStyles((theme) => ({
   }
 }))
 
+enum CSVWorkflowState {
+  Upload,
+  Review,
+  Confirmation
+}
+
 interface MultipleSectionEnrollmentWorkflowProps extends AddUMUsersLeafProps {}
 
 export default function MultipleSectionEnrollmentWorkflow (props: MultipleSectionEnrollmentWorkflowProps): JSX.Element {
   const parser = new FileParserWrapper()
   const sectionIds = props.sections.map(s => s.id)
 
-  const classes = useStyles()
   const [workflowState, setWorkflowState] = useState<CSVWorkflowState>(CSVWorkflowState.Upload)
   const [file, setFile] = useState<File | undefined>(undefined)
   const [validEnrollments, setValidEnrollments] = useState<RowNumberedAddEnrollmentWithSectionId[] | undefined>(undefined)
@@ -150,14 +181,14 @@ export default function MultipleSectionEnrollmentWorkflow (props: MultipleSectio
 
   const renderRowValidationErrors = (errors: RowValidationError[]): JSX.Element => {
     return (
-      <>
-      {file !== undefined && <CSVFileName file={file} />}
-      <RowLevelErrorsContent
-        table={<ValidationErrorTable invalidations={errors} />}
-        title='Review your CSV file'
-        resetUpload={resetUpload}
-      />
-      </>
+      (<>
+        {file !== undefined && <CSVFileName file={file} />}
+        <RowLevelErrorsContent
+          table={<ValidationErrorTable invalidations={errors} />}
+          title='Review your CSV file'
+          resetUpload={resetUpload}
+        />
+      </>)
     )
   }
 
@@ -261,20 +292,16 @@ export default function MultipleSectionEnrollmentWorkflow (props: MultipleSectio
       <div className={classes.container}>
         {file !== undefined && <CSVFileName file={file} />}
         <Grid container>
-          <Box clone order={{ xs: 2, sm: 1 }}>
-            <Grid item xs={12} sm={9} className={classes.confirmationTable}>
+            <Grid item xs={12} sm={9} sx={{ order: { xs: 2, sm: 1 } }} className={classes.confirmationTable}>
               <BulkEnrollUMUserToSectionsConfirmationTable enrollments={enrollments} />
             </Grid>
-          </Box>
-          <Box clone order={{ xs: 1, sm: 2 }}>
-            <Grid item xs={12} sm={3}>
+            <Grid item xs={12} sm={3} sx={{ order: { xs: 1, sm: 2 } }}>
               <ConfirmDialog
                 submit={async () => await doAddEnrollments(enrollmentData)}
                 cancel={resetUpload}
                 disabled={isAddEnrollmentsLoading}
               />
             </Grid>
-          </Box>
         </Grid>
         <Backdrop className={classes.backdrop} open={isAddEnrollmentsLoading}>
           <Grid container>
@@ -327,9 +354,9 @@ export default function MultipleSectionEnrollmentWorkflow (props: MultipleSectio
   }
 
   return (
-    <>
+    <Root>
     <Typography variant='h6' component='h2'>Add Users to Multiple Sections</Typography>
     {renderWorkflowState(workflowState)}
-    </>
+    </Root>
   )
 }
diff --git a/ccm_web/client/src/components/MultipleUserEnrollmentWorkflow.tsx b/ccm_web/client/src/components/MultipleUserEnrollmentWorkflow.tsx
index 7c2584ef7..855979eae 100644
--- a/ccm_web/client/src/components/MultipleUserEnrollmentWorkflow.tsx
+++ b/ccm_web/client/src/components/MultipleUserEnrollmentWorkflow.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
-import {
-  Backdrop, Box, Button, CircularProgress, Grid, makeStyles, Typography
-} from '@material-ui/core'
+import { styled } from '@mui/material/styles'
+import { Backdrop, Button, CircularProgress, Grid, Typography } from '@mui/material'
 
 import APIErrorMessage from './APIErrorMessage'
 import APIErrorsTable from './APIErrorsTable'
@@ -36,44 +35,60 @@ import FileParserWrapper, { CSVRecord } from '../utils/FileParserWrapper'
 import { getRowNumber } from '../utils/fileUtils'
 import { CanvasError, ErrorDescription, ExternalUserProcessError } from '../utils/handleErrors'
 
-const EMAIL_HEADER = 'EMAIL'
-const ROLE_HEADER = 'ROLE'
-const FIRST_NAME_HEADER = 'FIRST_NAME'
-const LAST_NAME_HEADER = 'LAST_NAME'
-
-const REQUIRED_HEADERS = [EMAIL_HEADER, ROLE_HEADER, FIRST_NAME_HEADER, LAST_NAME_HEADER]
+const PREFIX = 'MultipleUserEnrollmentWorkflow'
 
-interface ExternalEnrollmentRecord extends CSVRecord {
-  EMAIL: string
-  ROLE: string
-  FIRST_NAME: string
-  LAST_NAME: string
+const classes = {
+  backdrop: `${PREFIX}-backdrop`,
+  container: `${PREFIX}-container`,
+  buttonGroup: `${PREFIX}-buttonGroup`,
+  table: `${PREFIX}-table`
 }
 
-export const isExternalEnrollmentRecord = (record: CSVRecord): record is ExternalEnrollmentRecord => {
-  return REQUIRED_HEADERS.every(h => typeof record[h] === 'string')
-}
-
-const useStyles = makeStyles((theme) => ({
-  backdrop: {
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.backdrop}`]: {
     zIndex: theme.zIndex.drawer + 1,
     color: '#FFF',
     position: 'absolute',
     textAlign: 'center'
   },
-  container: {
+
+  [`&.${classes.container}`]: {
     position: 'relative',
     zIndex: 0
   },
-  buttonGroup: {
+
+  [`& .${classes.buttonGroup}`]: {
     marginTop: theme.spacing(1)
   },
-  table: {
+
+  [`& .${classes.table}`]: {
     paddingLeft: 10,
     paddingRight: 10
   }
 }))
 
+const EMAIL_HEADER = 'EMAIL'
+const ROLE_HEADER = 'ROLE'
+const FIRST_NAME_HEADER = 'FIRST_NAME'
+const LAST_NAME_HEADER = 'LAST_NAME'
+
+const REQUIRED_HEADERS = [EMAIL_HEADER, ROLE_HEADER, FIRST_NAME_HEADER, LAST_NAME_HEADER]
+
+interface ExternalEnrollmentRecord extends CSVRecord {
+  EMAIL: string
+  ROLE: string
+  FIRST_NAME: string
+  LAST_NAME: string
+}
+
+export const isExternalEnrollmentRecord = (record: CSVRecord): record is ExternalEnrollmentRecord => {
+  return REQUIRED_HEADERS.every(h => typeof record[h] === 'string')
+}
+
 interface MultipleUserEnrollmentWorkflowProps extends AddNonUMUsersLeafProps {
   course: CanvasCourseBase
   onSectionCreated: (newSection: CanvasCourseSection) => void
@@ -81,8 +96,6 @@ interface MultipleUserEnrollmentWorkflowProps extends AddNonUMUsersLeafProps {
 }
 
 export default function MultipleUserEnrollmentWorkflow (props: MultipleUserEnrollmentWorkflowProps): JSX.Element {
-  const classes = useStyles()
-
   const [activeStep, setActiveStep] = useState<CSVWorkflowStep>(CSVWorkflowStep.Select)
   const [selectedSection, setSelectedSection] = useState<CanvasCourseSectionWithCourseName | undefined>(undefined)
 
@@ -185,42 +198,40 @@ export default function MultipleUserEnrollmentWorkflow (props: MultipleUserEnrol
       ? { canCreate: true, course: props.course, onSectionCreated }
       : { canCreate: false }
 
-    return (
-      <>
-      <div className={classes.container}>
-        <CreateSelectSectionWidget
-          sections={props.sections}
-          selectedSection={selectedSection}
-          setSelectedSection={setSelectedSection}
-          {...createProps}
-        />
-        <Backdrop className={classes.backdrop} open={props.isGetSectionsLoading}>
-          <Grid container>
-            <Grid item xs={12}><CircularProgress color='inherit' /></Grid>
-            <Grid item xs={12}>Loading section data from Canvas</Grid>
-          </Grid>
-        </Backdrop>
-      </div>
-      <Grid container className={classes.buttonGroup} justifyContent='space-between'>
-        <Button
-          variant='outlined'
-          onClick={props.resetFeature}
-          aria-label='Back to input method select'
-        >
-          Back
-        </Button>
-        <Button
-          variant='contained'
-          color='primary'
-          aria-label='Select section'
-          disabled={selectedSection === undefined || props.isGetSectionsLoading}
-          onClick={() => setActiveStep(CSVWorkflowStep.Upload)}
-        >
-          Select
-        </Button>
-      </Grid>
-      </>
-    )
+    return <>
+    <div className={classes.container}>
+      <CreateSelectSectionWidget
+        sections={props.sections}
+        selectedSection={selectedSection}
+        setSelectedSection={setSelectedSection}
+        {...createProps}
+      />
+      <Backdrop className={classes.backdrop} open={props.isGetSectionsLoading}>
+        <Grid container>
+          <Grid item xs={12}><CircularProgress color='inherit' /></Grid>
+          <Grid item xs={12}>Loading section data from Canvas</Grid>
+        </Grid>
+      </Backdrop>
+    </div>
+    <Grid container className={classes.buttonGroup} justifyContent='space-between'>
+      <Button
+        variant='outlined'
+        onClick={props.resetFeature}
+        aria-label='Back to input method select'
+      >
+        Back
+      </Button>
+      <Button
+        variant='contained'
+        color='primary'
+        aria-label='Select section'
+        disabled={selectedSection === undefined || props.isGetSectionsLoading}
+        onClick={() => setActiveStep(CSVWorkflowStep.Upload)}
+      >
+        Select
+      </Button>
+    </Grid>
+    </>
   }
 
   const renderUpload = (): JSX.Element => {
@@ -341,13 +352,10 @@ export default function MultipleUserEnrollmentWorkflow (props: MultipleUserEnrol
       <div className={classes.container}>
         {file !== undefined && <CSVFileName file={file} />}
         <Grid container>
-          <Box clone order={{ xs: 2, sm: 1 }}>
-            <Grid item xs={12} sm={9} className={classes.table}>
+            <Grid item xs={12} sm={9} sx={{ order: { xs: 2, sm: 1 } }} className={classes.table}>
               <BulkEnrollExternalUserConfirmationTable enrollments={enrollments} />
             </Grid>
-          </Box>
-          <Box clone order={{ xs: 1, sm: 2 }}>
-            <Grid item xs={12} sm={3}>
+            <Grid item xs={12} sm={3} sx={{ order: { xs: 1, sm: 2 } }}>
               <ConfirmDialog
                 submit={async () => {
                   await doAddExternalEnrollments(sectionId, enrollments.map(({ rowNumber, ...others }) => others))
@@ -359,7 +367,6 @@ export default function MultipleUserEnrollmentWorkflow (props: MultipleUserEnrol
                 disabled={isAddExternalEnrollmentsLoading}
               />
             </Grid>
-          </Box>
         </Grid>
         <Backdrop className={classes.backdrop} open={isAddExternalEnrollmentsLoading}>
           <Grid container>
@@ -450,12 +457,12 @@ export default function MultipleUserEnrollmentWorkflow (props: MultipleUserEnrol
   }
 
   return (
-    <div>
+    <Root>
       <Grid>
         <Typography variant='h6' component='h3'>Add Multiple Users Through CSV</Typography>
         <WorkflowStepper allSteps={Object(CSVWorkflowStep)} activeStep={activeStep} />
         <div>{renderActiveStep(activeStep)}</div>
       </Grid>
-    </div>
+    </Root>
   )
 }
diff --git a/ccm_web/client/src/components/ResponsiveHelper.tsx b/ccm_web/client/src/components/ResponsiveHelper.tsx
index 065cc48fb..c2da977b2 100644
--- a/ccm_web/client/src/components/ResponsiveHelper.tsx
+++ b/ccm_web/client/src/components/ResponsiveHelper.tsx
@@ -1,4 +1,4 @@
-import { useMediaQuery, useTheme } from '@material-ui/core'
+import { useMediaQuery, useTheme } from '@mui/material'
 import React from 'react'
 
 function ResponsiveHelper (): JSX.Element {
diff --git a/ccm_web/client/src/components/RoleSelect.tsx b/ccm_web/client/src/components/RoleSelect.tsx
index c754fbbdd..48755043e 100644
--- a/ccm_web/client/src/components/RoleSelect.tsx
+++ b/ccm_web/client/src/components/RoleSelect.tsx
@@ -1,10 +1,22 @@
 import React from 'react'
-import { Grid, makeStyles, MenuItem, Select, Typography } from '@material-ui/core'
+import { styled } from '@mui/material/styles'
+import { Grid, MenuItem, Select, SelectChangeEvent, Typography } from '@mui/material'
 
 import { ClientEnrollmentType } from '../models/canvas'
 
-const useStyles = makeStyles((theme) => ({
-  spacing: {
+const PREFIX = 'RoleSelect'
+
+const classes = {
+  spacing: `${PREFIX}-spacing`
+}
+
+// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.spacing}`]: {
     marginBottom: theme.spacing(2)
   }
 }))
@@ -17,8 +29,7 @@ interface RoleSelectProps {
 }
 
 export default function RoleSelect (props: RoleSelectProps): JSX.Element {
-  const classes = useStyles()
-  const handleRoleSelectChange = (event: React.ChangeEvent<{ value: unknown }>): void => {
+  const handleRoleSelectChange = (event: SelectChangeEvent): void => {
     const value = event.target.value
     if (typeof value === 'string' && Object.values<string>(ClientEnrollmentType).includes(value)) {
       props.onRoleChange(value as ClientEnrollmentType)
@@ -26,26 +37,26 @@ export default function RoleSelect (props: RoleSelectProps): JSX.Element {
   }
 
   return (
-    <>
-    <Typography id='role-select-label' className={classes.spacing}>
-      Select a Canvas role that the user will have in the section.
-      The available roles are determined by your own role(s) in the course. (Required)
-    </Typography>
-    <Grid container>
-      <Grid item xs={8} sm={6}>
-        <Select
-          fullWidth={true}
-          variant='outlined'
-          id='role-select'
-          labelId='role-select-label'
-          value={props.selectedRole ?? ''}
-          onChange={handleRoleSelectChange}
-          disabled={props.disabled}
-        >
-          {props.roles.map((r, i) => <MenuItem key={i} value={r}>{r.toLowerCase()}</MenuItem>)}
-        </Select>
+    (<Root>
+      <Typography id='role-select-label' className={classes.spacing}>
+        Select a Canvas role that the user will have in the section.
+        The available roles are determined by your own role(s) in the course. (Required)
+      </Typography>
+      <Grid container>
+        <Grid item xs={8} sm={6}>
+          <Select
+            fullWidth={true}
+            variant='outlined'
+            id='role-select'
+            labelId='role-select-label'
+            value={props.selectedRole ?? ''}
+            onChange={handleRoleSelectChange}
+            disabled={props.disabled}
+          >
+            {props.roles.map((r, i) => <MenuItem key={i} value={r}>{r.toLowerCase()}</MenuItem>)}
+          </Select>
+        </Grid>
       </Grid>
-    </Grid>
-    </>
+    </Root>)
   )
 }
diff --git a/ccm_web/client/src/components/RowLevelErrorsContent.tsx b/ccm_web/client/src/components/RowLevelErrorsContent.tsx
index 6a4d907d4..30fa07602 100644
--- a/ccm_web/client/src/components/RowLevelErrorsContent.tsx
+++ b/ccm_web/client/src/components/RowLevelErrorsContent.tsx
@@ -1,10 +1,21 @@
 import React from 'react'
-import { Box, Grid, makeStyles, Typography } from '@material-ui/core'
+import { styled } from '@mui/material/styles'
+import { Grid, Typography } from '@mui/material'
 
 import ErrorAlert from './ErrorAlert'
 
-const useStyles = makeStyles((theme) => ({
-  padding: {
+const PREFIX = 'RowLevelErrorsContent'
+
+const classes = {
+  padding: `${PREFIX}-padding`
+}
+
+const StyledGrid = styled(Grid)((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.padding}`]: {
     padding: theme.spacing(1)
   }
 }))
@@ -17,16 +28,12 @@ interface RowLevelErrorsContentProps {
 }
 
 function RowLevelErrorsContent (props: RowLevelErrorsContentProps): JSX.Element {
-  const classes = useStyles()
   const defaultMessage = <Typography>Create a new file with corrected versions of these rows.</Typography>
 
   return (
-    <Grid container justifyContent='flex-start'>
-      <Box clone order={{ xs: 2, sm: 1 }}>
-        <Grid item xs={12} sm={8} className={classes.padding}>{props.table}</Grid>
-      </Box>
-      <Box clone order={{ xs: 1, sm: 2 }}>
-        <Grid item xs={12} sm={4}>
+    <StyledGrid container justifyContent='flex-start'>
+        <Grid item xs={12} sm={8} sx={{ order: { xs: 2, sm: 1 } }} className={classes.padding}>{props.table}</Grid>
+        <Grid item xs={12} sm={4} sx={{ order: { xs: 1, sm: 2 } }}>
           <ErrorAlert
             title={props.title}
             messages={[props.message !== undefined ? props.message : defaultMessage]}
@@ -34,8 +41,7 @@ function RowLevelErrorsContent (props: RowLevelErrorsContentProps): JSX.Element
             embedded={true}
           />
         </Grid>
-      </Box>
-    </Grid>
+    </StyledGrid>
   )
 }
 
diff --git a/ccm_web/client/src/components/SectionSelectorWidget.tsx b/ccm_web/client/src/components/SectionSelectorWidget.tsx
index 8ef70c2f6..906e5781b 100644
--- a/ccm_web/client/src/components/SectionSelectorWidget.tsx
+++ b/ccm_web/client/src/components/SectionSelectorWidget.tsx
@@ -1,12 +1,32 @@
 import React, { useEffect, useState } from 'react'
+import { styled } from '@mui/material/styles'
 import { useSnackbar } from 'notistack'
 import {
-  Backdrop, Button, ButtonBase, Checkbox, CircularProgress, FormControl, FormControlLabel, FormGroup, Grid,
-  GridSize, InputLabel, List, ListItem, ListItemText, makeStyles, Menu, MenuItem, Select, TextField,
-  Typography, useMediaQuery, useTheme
-} from '@material-ui/core'
-import ClearIcon from '@material-ui/icons/Clear'
-import SortIcon from '@material-ui/icons/Sort'
+  Backdrop,
+  Button,
+  ButtonBase,
+  Checkbox,
+  CircularProgress,
+  FormControl,
+  FormControlLabel,
+  FormGroup,
+  Grid,
+  GridSize,
+  InputLabel,
+  List,
+  ListItem,
+  ListItemText,
+  Menu,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+  TextField,
+  Typography,
+  useMediaQuery,
+  useTheme
+} from '@mui/material'
+import ClearIcon from '@mui/icons-material/Clear'
+import SortIcon from '@mui/icons-material/Sort'
 import { useDebounce } from '@react-hook/debounce'
 
 import APIErrorMessage from './APIErrorMessage'
@@ -15,8 +35,34 @@ import usePromise from '../hooks/usePromise'
 import { CanvasCourseSectionBase, CanvasCourseSectionWithCourseName, ICanvasCourseSectionSort } from '../models/canvas'
 import { ISectionSearcher } from '../utils/SectionSearcher'
 
-const useStyles = makeStyles((theme) => ({
-  listContainer: {
+const PREFIX = 'SectionSelectorWidget'
+
+const classes = {
+  listContainer: `${PREFIX}-listContainer`,
+  listItemRoot: `${PREFIX}-listItemRoot`,
+  listButton: `${PREFIX}-listButton`,
+  listButtonFocusVisible: `${PREFIX}-listButtonFocusVisible`,
+  searchContainer: `${PREFIX}-searchContainer`,
+  searchTextField: `${PREFIX}-searchTextField`,
+  title: `${PREFIX}-title`,
+  srOnly: `${PREFIX}-srOnly`,
+  secondaryTypography: `${PREFIX}-secondaryTypography`,
+  overflowEllipsis: `${PREFIX}-overflowEllipsis`,
+  header: `${PREFIX}-header`,
+  searchEndAdnornment: `${PREFIX}-searchEndAdnornment`,
+  sectionSelectionContainer: `${PREFIX}-sectionSelectionContainer`,
+  backdrop: `${PREFIX}-backdrop`,
+  highlighted: `${PREFIX}-highlighted`,
+  button: `${PREFIX}-button`
+}
+
+// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.listContainer}`]: {
     overflow: 'auto',
     marginBottom: '5px',
     '&& .Mui-disabled': {
@@ -36,11 +82,13 @@ const useStyles = makeStyles((theme) => ({
       }
     }
   },
-  listItemRoot: {
+
+  [`& .${classes.listItemRoot}`]: {
     paddingTop: '0px',
     paddingBottom: '0px'
   },
-  listButton: {
+
+  [`& .${classes.listButton}`]: {
     width: '100%',
     height: '100%',
     textAlign: 'left',
@@ -52,23 +100,28 @@ const useStyles = makeStyles((theme) => ({
       backgroundColor: theme.palette.action.hover
     }
   },
-  listButtonFocusVisible: {
+
+  [`& .${classes.listButtonFocusVisible}`]: {
     backgroundColor: theme.palette.action.focus
   },
-  searchContainer: {
+
+  [`& .${classes.searchContainer}`]: {
     textAlign: 'left'
   },
-  searchTextField: {
+
+  [`& .${classes.searchTextField}`]: {
     width: '100%'
   },
-  title: {
+
+  [`& .${classes.title}`]: {
     textAlign: 'left',
     display: 'flex',
     justifyContent: 'center',
     alignContent: 'center',
     flexDirection: 'column'
   },
-  srOnly: {
+
+  [`& .${classes.srOnly}`]: {
     position: 'absolute',
     width: '1px',
     height: '1px',
@@ -78,22 +131,27 @@ const useStyles = makeStyles((theme) => ({
     clip: 'rect(0,0,0,0)',
     border: '0'
   },
-  secondaryTypography: {
+
+  [`& .${classes.secondaryTypography}`]: {
     display: 'inline'
   },
-  overflowEllipsis: {
+
+  [`& .${classes.overflowEllipsis}`]: {
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     display: 'block'
   },
-  header: {
+
+  [`& .${classes.header}`]: {
     backgroundColor: '#F8F8F8'
   },
-  searchEndAdnornment: {
+
+  [`& .${classes.searchEndAdnornment}`]: {
     width: '200px'
   },
-  sectionSelectionContainer: {
+
+  [`& .${classes.sectionSelectionContainer}`]: {
     position: 'relative',
     zIndex: 0,
     textAlign: 'center',
@@ -102,17 +160,20 @@ const useStyles = makeStyles((theme) => ({
     borderColor: '#EEEEEE',
     minHeight: '100px'
   },
-  backdrop: {
+
+  [`& .${classes.backdrop}`]: {
     zIndex: theme.zIndex.drawer + 1,
     color: '#fff',
     position: 'absolute'
   },
-  highlighted: {
+
+  [`& .${classes.highlighted}`]: {
     borderLeftStyle: 'solid',
     borderLeftColor: '#3777C5',
     borderLeftWidth: '16px'
   },
-  button: {
+
+  [`& .${classes.button}`]: {
     margin: theme.spacing(1)
   }
 }))
@@ -140,7 +201,6 @@ interface ISectionSelectorWidgetProps {
 }
 
 function SectionSelectorWidget (props: ISectionSelectorWidgetProps): JSX.Element {
-  const classes = useStyles()
   const theme = useTheme()
   const { enqueueSnackbar } = useSnackbar()
 
@@ -256,8 +316,8 @@ function SectionSelectorWidget (props: ISectionSelectorWidgetProps): JSX.Element
     if (searcher?.resetTitle !== undefined) searcher.resetTitle()
   }
 
-  const handleChange = (event: React.ChangeEvent<{ value: unknown }>): void => {
-    const sort = event.target.value as string
+  const handleChange = (event: SelectChangeEvent): void => {
+    const sort = event.target.value
     const newSearcher = (props.search).filter(searcher => { return searcher.name === sort })[0]
     setSearcher(newSearcher)
     setSearchFieldLabel(newSearcher.helperText)
@@ -465,7 +525,7 @@ function SectionSelectorWidget (props: ISectionSelectorWidgetProps): JSX.Element
 
   // Passing in the height in the props seems like the wrong solution, but wanted to move on from solving that for now
   return (
-    <>
+    <Root>
     <span aria-live='polite' aria-atomic='true' className={classes.srOnly}>
       {props.selectedSections.length} {'section' + (props.selectedSections.length === 1 ? '' : 's')} selected
     </span>
@@ -558,7 +618,7 @@ function SectionSelectorWidget (props: ISectionSelectorWidgetProps): JSX.Element
         </Backdrop>
       </Grid>
     </Grid>
-    </>
+    </Root>
   )
 }
 
diff --git a/ccm_web/client/src/components/SingleSectionEnrollmentWorkflow.tsx b/ccm_web/client/src/components/SingleSectionEnrollmentWorkflow.tsx
index f5043a135..b1d1a1b90 100644
--- a/ccm_web/client/src/components/SingleSectionEnrollmentWorkflow.tsx
+++ b/ccm_web/client/src/components/SingleSectionEnrollmentWorkflow.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { Backdrop, Box, Button, CircularProgress, Grid, Link, makeStyles, Typography } from '@material-ui/core'
+import { styled } from '@mui/material/styles'
+import { Backdrop, Button, CircularProgress, Grid, Link, Typography } from '@mui/material'
 
 import APIErrorMessage from './APIErrorMessage'
 import BulkApiErrorContent from './BulkApiErrorContent'
@@ -31,28 +32,49 @@ import { EnrollmentInvalidation, LoginIDRowsValidator, RoleRowsValidator } from
 import FileParserWrapper, { CSVRecord } from '../utils/FileParserWrapper'
 import { getRowNumber } from '../utils/fileUtils'
 
-const useStyles = makeStyles(theme => ({
-  spacing: {
+const PREFIX = 'SingleSectionEnrollmentWorkflow'
+
+const classes = {
+  spacing: `${PREFIX}-spacing`,
+  buttonGroup: `${PREFIX}-buttonGroup`,
+  backdrop: `${PREFIX}-backdrop`,
+  instructions: `${PREFIX}-instructions`,
+  container: `${PREFIX}-container`,
+  table: `${PREFIX}-table`
+}
+
+// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.spacing}`]: {
     marginBottom: theme.spacing(2)
   },
-  buttonGroup: {
+
+  [`& .${classes.buttonGroup}`]: {
     marginTop: theme.spacing(1)
   },
-  backdrop: {
+
+  [`& .${classes.backdrop}`]: {
     zIndex: theme.zIndex.drawer + 1,
     color: '#FFF',
     position: 'absolute',
     textAlign: 'center'
   },
-  instructions: {
+
+  [`& .${classes.instructions}`]: {
     marginTop: theme.spacing(1),
     marginBottom: theme.spacing(1)
   },
-  container: {
+
+  [`& .${classes.container}`]: {
     position: 'relative',
     zIndex: 0
   },
-  table: {
+
+  [`& .${classes.table}`]: {
     paddingLeft: 10,
     paddingRight: 10
   }
@@ -64,8 +86,6 @@ interface SingleSectionEnrollmentWorkflowProps extends AddUMUsersLeafProps {
 }
 
 export default function SingleSectionEnrollmentWorkflow (props: SingleSectionEnrollmentWorkflowProps): JSX.Element {
-  const classes = useStyles()
-
   const [activeStep, setActiveStep] = useState(CSVWorkflowStep.Select)
   const [selectedSection, setSelectedSection] = useState<CanvasCourseSectionWithCourseName | undefined>(undefined)
   const [file, setFile] = useState<File | undefined>(undefined)
@@ -145,41 +165,41 @@ export default function SingleSectionEnrollmentWorkflow (props: SingleSectionEnr
     }
 
     return (
-      <>
-      <div className={classes.container}>
-        <CreateSelectSectionWidget
-          sections={props.sections}
-          selectedSection={selectedSection}
-          setSelectedSection={setSelectedSection}
-          // Only admins have access to the Add UM Users feature, and they can create sections.
-          canCreate={true}
-          course={props.course}
-          onSectionCreated={(s) => {
-            setSelectedSection(injectCourseName([s], props.course.name)[0])
-            props.onSectionCreated(s)
-          }}
-        />
-        <Backdrop className={classes.backdrop} open={props.isGetSectionsLoading}>
-          <Grid container>
-            <Grid item xs={12}><CircularProgress color='inherit' /></Grid>
-            <Grid item xs={12}>Loading section data from Canvas</Grid>
-          </Grid>
-        </Backdrop>
-      </div>
-      <Grid container className={classes.buttonGroup} justifyContent='space-between'>
-        <Button variant='outlined' aria-label='Back to select input method' onClick={props.resetFeature}>
-          Back
-        </Button>
-        <Button
-          variant='contained'
-          color='primary'
-          disabled={selectedSection === undefined}
-          onClick={() => setActiveStep(CSVWorkflowStep.Upload)}
-        >
-          Select
-        </Button>
-      </Grid>
-      </>
+      (<>
+        <div className={classes.container}>
+          <CreateSelectSectionWidget
+            sections={props.sections}
+            selectedSection={selectedSection}
+            setSelectedSection={setSelectedSection}
+            // Only admins have access to the Add UM Users feature, and they can create sections.
+            canCreate={true}
+            course={props.course}
+            onSectionCreated={(s) => {
+              setSelectedSection(injectCourseName([s], props.course.name)[0])
+              props.onSectionCreated(s)
+            }}
+          />
+          <Backdrop className={classes.backdrop} open={props.isGetSectionsLoading}>
+            <Grid container>
+              <Grid item xs={12}><CircularProgress color='inherit' /></Grid>
+              <Grid item xs={12}>Loading section data from Canvas</Grid>
+            </Grid>
+          </Backdrop>
+        </div>
+        <Grid container className={classes.buttonGroup} justifyContent='space-between'>
+          <Button variant='outlined' aria-label='Back to select input method' onClick={props.resetFeature}>
+            Back
+          </Button>
+          <Button
+            variant='contained'
+            color='primary'
+            disabled={selectedSection === undefined}
+            onClick={() => setActiveStep(CSVWorkflowStep.Upload)}
+          >
+            Select
+          </Button>
+        </Grid>
+      </>)
     )
   }
 
@@ -252,20 +272,16 @@ export default function SingleSectionEnrollmentWorkflow (props: SingleSectionEnr
       <div className={classes.container}>
         {file !== undefined && <CSVFileName file={file} />}
         <Grid container>
-          <Box clone order={{ xs: 2, sm: 1 }}>
-            <Grid item xs={12} sm={9} className={classes.table}>
+            <Grid item xs={12} sm={9} sx={{ order: { xs: 2, sm: 1 } }} className={classes.table}>
               <BulkEnrollUMUserConfirmationTable enrollments={enrollments} />
             </Grid>
-          </Box>
-          <Box clone order={{ xs: 1, sm: 2 }}>
-            <Grid item xs={12} sm={3}>
+            <Grid item xs={12} sm={3} sx={{ order: { xs: 1, sm: 2 } }}>
               <ConfirmDialog
                 submit={async () => await doAddEnrollments(section, enrollments)}
                 cancel={handleUploadReset}
                 disabled={isAddEnrollmentsLoading}
               />
             </Grid>
-          </Box>
         </Grid>
         <Backdrop className={classes.backdrop} open={isAddEnrollmentsLoading}>
           <Grid container>
@@ -322,10 +338,10 @@ export default function SingleSectionEnrollmentWorkflow (props: SingleSectionEnr
   }
 
   return (
-    <>
+    <Root>
     <Typography variant='h6' component='h2'>Add Users to Single Section</Typography>
     <WorkflowStepper allSteps={Object(CSVWorkflowStep)} activeStep={activeStep} />
     {getStepContent(activeStep)}
-    </>
+    </Root>
   )
 }
diff --git a/ccm_web/client/src/components/StyledTableCell.tsx b/ccm_web/client/src/components/StyledTableCell.tsx
index 2221487ed..f854129ea 100644
--- a/ccm_web/client/src/components/StyledTableCell.tsx
+++ b/ccm_web/client/src/components/StyledTableCell.tsx
@@ -1,17 +1,16 @@
-import { createStyles, TableCell, Theme, withStyles } from '@material-ui/core'
-import { grey } from '@material-ui/core/colors'
+import { TableCell } from '@mui/material'
+import { styled } from '@mui/material/styles'
+import { grey } from '@mui/material/colors'
 
-const StyledTableCell = withStyles((theme: Theme) =>
-  createStyles({
-    head: {
-      backgroundColor: grey[100],
-      color: theme.palette.common.black,
-      fontWeight: 'bold'
-    },
-    body: {
-      fontSize: 24
-    }
-  })
-)(TableCell)
+const StyledTableCell = styled(TableCell)(({ theme }) => ({
+  '&.MuiTableCell-head': {
+    backgroundColor: grey[100],
+    color: theme.palette.common.black,
+    fontWeight: 'bold'
+  },
+  '&.MuiTableCell-body': {
+    fontSize: 24
+  }
+}))
 
 export default StyledTableCell
diff --git a/ccm_web/client/src/components/SuccessCard.tsx b/ccm_web/client/src/components/SuccessCard.tsx
index f17e72ade..4bcdafec8 100644
--- a/ccm_web/client/src/components/SuccessCard.tsx
+++ b/ccm_web/client/src/components/SuccessCard.tsx
@@ -1,20 +1,37 @@
 import React from 'react'
-import { Card, CardContent, CardActions, makeStyles } from '@material-ui/core'
-import CheckCircle from '@material-ui/icons/CheckCircle'
+import { styled } from '@mui/material/styles'
+import { Card, CardContent, CardActions } from '@mui/material'
+import CheckCircle from '@mui/icons-material/CheckCircle'
 
-const useStyles = makeStyles((theme) => ({
-  card: {
+const PREFIX = 'SuccessCard'
+
+const classes = {
+  card: `${PREFIX}-card`,
+  cardFooter: `${PREFIX}-cardFooter`,
+  cardFooterText: `${PREFIX}-cardFooterText`,
+  icon: `${PREFIX}-icon`
+}
+
+const StyledCard = styled(Card)((
+  {
+    theme
+  }
+) => ({
+  [`&.${classes.card}`]: {
     textAlign: 'center'
   },
-  cardFooter: {
+
+  [`& .${classes.cardFooter}`]: {
     display: 'block',
     backgroundColor: '#F7F7F7',
     textAlign: 'center'
   },
-  cardFooterText: {
+
+  [`& .${classes.cardFooterText}`]: {
     textAlign: 'center'
   },
-  icon: {
+
+  [`& .${classes.icon}`]: {
     color: theme.palette.success.main,
     width: 100,
     height: 100
@@ -27,9 +44,8 @@ interface SuccessCardProps {
 }
 
 export default function SuccessCard (props: SuccessCardProps): JSX.Element {
-  const classes = useStyles()
   return (
-    <Card className={classes.card} variant='outlined'>
+    <StyledCard className={classes.card} variant='outlined'>
       <CardContent>
         <CheckCircle className={classes.icon} fontSize='large'/>
         {props.message}
@@ -38,6 +54,6 @@ export default function SuccessCard (props: SuccessCardProps): JSX.Element {
         props.nextAction !== undefined &&
           <CardActions className={classes.cardFooter}>{props.nextAction}</CardActions>
       }
-    </Card>
+    </StyledCard>
   )
 }
diff --git a/ccm_web/client/src/components/TableCaption.tsx b/ccm_web/client/src/components/TableCaption.tsx
index f03d242d0..58ebde1f5 100644
--- a/ccm_web/client/src/components/TableCaption.tsx
+++ b/ccm_web/client/src/components/TableCaption.tsx
@@ -1,8 +1,13 @@
 import React from 'react'
-import { makeStyles } from '@material-ui/core'
+import { styled } from '@mui/material/styles'
+const PREFIX = 'TableCaption'
 
-const useStyles = makeStyles(() => ({
-  srOnly: {
+const classes = {
+  srOnly: `${PREFIX}-srOnly`
+}
+
+const Root = styled('caption')(() => ({
+  [`&.${classes.srOnly}`]: {
     position: 'absolute',
     width: '1px',
     height: '1px',
@@ -19,6 +24,5 @@ interface TableCaptionProps {
 }
 
 export default function TableCaption (props: TableCaptionProps): JSX.Element {
-  const classes = useStyles()
-  return <caption className={classes.srOnly}>{props.text}</caption>
+  return <Root className={classes.srOnly}>{props.text}</Root>
 }
diff --git a/ccm_web/client/src/components/TablePagination.tsx b/ccm_web/client/src/components/TablePagination.tsx
index d584a33d9..9fa6957ef 100644
--- a/ccm_web/client/src/components/TablePagination.tsx
+++ b/ccm_web/client/src/components/TablePagination.tsx
@@ -1,9 +1,14 @@
-import { IconButton, makeStyles, useTheme } from '@material-ui/core'
-import { KeyboardArrowRight, KeyboardArrowLeft, FirstPage, LastPage } from '@material-ui/icons'
+import { IconButton, useTheme } from '@mui/material'
+import { styled } from '@mui/material/styles'
+import { KeyboardArrowRight, KeyboardArrowLeft, FirstPage, LastPage } from '@mui/icons-material'
 import React from 'react'
 
-const useStyles = makeStyles((theme) => ({
-  root: {
+const classes = {
+  root: 'TablePagination-root'
+}
+
+const Root = styled('div')(({ theme }) => ({
+  [`& .${classes.root}`]: {
     flexShrink: 0,
     marginLeft: theme.spacing(2.5)
   }
@@ -12,7 +17,6 @@ const useStyles = makeStyles((theme) => ({
 type PageChangeCallback = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, page: number) => void
 
 function TablePaginationActions (props: { count: number, page: number, rowsPerPage: number, onPageChange: PageChangeCallback}): JSX.Element {
-  const classes = useStyles()
   const theme = useTheme()
   const { count, page, rowsPerPage, onPageChange } = props
 
@@ -33,32 +37,36 @@ function TablePaginationActions (props: { count: number, page: number, rowsPerPa
   }
 
   return (
-    <div className={classes.root}>
+    <Root className={classes.root}>
       <IconButton
         onClick={handleFirstPageButtonClick}
         disabled={page === 0}
         aria-label="first page"
-      >
+        size="large">
         {theme.direction === 'rtl' ? <LastPage /> : <FirstPage />}
       </IconButton>
-      <IconButton onClick={handleBackButtonClick} disabled={page === 0} aria-label="previous page">
+      <IconButton
+        onClick={handleBackButtonClick}
+        disabled={page === 0}
+        aria-label="previous page"
+        size="large">
         {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
       </IconButton>
       <IconButton
         onClick={handleNextButtonClick}
         disabled={page >= Math.ceil(count / rowsPerPage) - 1}
         aria-label="next page"
-      >
+        size="large">
         {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
       </IconButton>
       <IconButton
         onClick={handleLastPageButtonClick}
         disabled={page >= Math.ceil(count / rowsPerPage) - 1}
         aria-label="last page"
-      >
+        size="large">
         {theme.direction === 'rtl' ? <FirstPage /> : <LastPage />}
       </IconButton>
-    </div>
+    </Root>
   )
 }
 
diff --git a/ccm_web/client/src/components/UserEnrollmentForm.tsx b/ccm_web/client/src/components/UserEnrollmentForm.tsx
index 8efa4b3ee..a02c14e67 100644
--- a/ccm_web/client/src/components/UserEnrollmentForm.tsx
+++ b/ccm_web/client/src/components/UserEnrollmentForm.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { Backdrop, Button, CircularProgress, Grid, makeStyles, Paper, Typography } from '@material-ui/core'
+import { styled } from '@mui/material/styles'
+import { Backdrop, Button, CircularProgress, Grid, Paper, Typography } from '@mui/material'
 
 import APIErrorMessage from './APIErrorMessage'
 import CanvasSettingsLink from './CanvasSettingsLink'
@@ -20,21 +21,39 @@ import {
   emailInputSchema, firstNameInputSchema, lastNameInputSchema, validateString, ValidationResult
 } from '../utils/validation'
 
-const useStyles = makeStyles((theme) => ({
-  spacing: {
+const PREFIX = 'UserEnrollmentForm'
+
+const classes = {
+  spacing: `${PREFIX}-spacing`,
+  buttonGroup: `${PREFIX}-buttonGroup`,
+  alert: `${PREFIX}-alert`,
+  container: `${PREFIX}-container`,
+  backdrop: `${PREFIX}-backdrop`
+}
+
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.spacing}`]: {
     marginBottom: theme.spacing(2)
   },
-  buttonGroup: {
+
+  [`& .${classes.buttonGroup}`]: {
     marginTop: theme.spacing(1)
   },
-  alert: {
+
+  [`& .${classes.alert}`]: {
     padding: theme.spacing(2)
   },
-  container: {
+
+  [`& .${classes.container}`]: {
     position: 'relative',
     zIndex: 0
   },
-  backdrop: {
+
+  [`& .${classes.backdrop}`]: {
     zIndex: theme.zIndex.drawer + 1,
     color: '#FFF',
     position: 'absolute',
@@ -50,8 +69,6 @@ interface ExternalEnrollmentSummary {
 interface UserEnrollmentFormProps extends AddNonUMUsersLeafProps {}
 
 export default function UserEnrollmentForm (props: UserEnrollmentFormProps): JSX.Element {
-  const classes = useStyles()
-
   const [selectedSection, setSelectedSection] = useState<CanvasCourseSectionWithCourseName | undefined>(undefined)
 
   const [email, setEmail] = useState<string | undefined>(undefined)
@@ -406,9 +423,9 @@ export default function UserEnrollmentForm (props: UserEnrollmentFormProps): JSX
   }
 
   return (
-    <div id='single-add-user'>
+    <Root id='single-add-user'>
       <Typography variant='h6' component='h2' gutterBottom>Add Single User Manually</Typography>
       {successResult === undefined ? renderForm() : renderSuccess(successResult)}
-    </div>
+    </Root>
   )
 }
diff --git a/ccm_web/client/src/components/ValidatedFormField.tsx b/ccm_web/client/src/components/ValidatedFormField.tsx
index 414033453..13a033025 100644
--- a/ccm_web/client/src/components/ValidatedFormField.tsx
+++ b/ccm_web/client/src/components/ValidatedFormField.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { TextField } from '@material-ui/core'
+import { TextField } from '@mui/material'
 
 import { ValidationResult } from '../utils/validation'
 
diff --git a/ccm_web/client/src/components/ValidationErrorTable.tsx b/ccm_web/client/src/components/ValidationErrorTable.tsx
index 351434e3b..c7f8ecd2e 100644
--- a/ccm_web/client/src/components/ValidationErrorTable.tsx
+++ b/ccm_web/client/src/components/ValidationErrorTable.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 
 import {
   Paper, Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow
-} from '@material-ui/core'
+} from '@mui/material'
 import StyledTableCell from './StyledTableCell'
 import TableCaption from './TableCaption'
 import { TablePaginationActions } from './TablePagination'
diff --git a/ccm_web/client/src/components/WarningAlert.tsx b/ccm_web/client/src/components/WarningAlert.tsx
index 5b7d54323..8d7378f8e 100644
--- a/ccm_web/client/src/components/WarningAlert.tsx
+++ b/ccm_web/client/src/components/WarningAlert.tsx
@@ -1,14 +1,27 @@
 import React from 'react'
-import { Button, makeStyles } from '@material-ui/core'
-import ErrorIcon from '@material-ui/icons/Error'
+import { styled } from '@mui/material/styles'
+import { Button } from '@mui/material'
+import ErrorIcon from '@mui/icons-material/Error'
 
 import Alert from './Alert'
 
-const useStyles = makeStyles((theme) => ({
-  dialogIcon: {
+const PREFIX = 'WarningAlert'
+
+const classes = {
+  dialogIcon: `${PREFIX}-dialogIcon`,
+  dialogButton: `${PREFIX}-dialogButton`
+}
+
+const StyledAlert = styled(Alert)((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.dialogIcon}`]: {
     color: theme.palette.warning.main
   },
-  dialogButton: {
+
+  [`& .${classes.dialogButton}`]: {
     margin: 5
   }
 }))
@@ -24,7 +37,6 @@ interface WarningAlertProps {
 }
 
 export default function ErrorAlert (props: WarningAlertProps): JSX.Element {
-  const classes = useStyles()
   const { messages, cancel, cont, title, icon, embedded } = props
 
   const messageBlock = messages.length === 1
@@ -32,7 +44,7 @@ export default function ErrorAlert (props: WarningAlertProps): JSX.Element {
     : <ol>{messages.map((m, i) => <li key={i}>{m}</li>)}</ol>
 
   return (
-    <Alert
+    <StyledAlert
       title={title !== undefined ? title : 'Some warnings occurred'}
       icon={icon !== undefined ? icon : <ErrorIcon className={classes.dialogIcon} fontSize='large' />}
       embedded={embedded}
@@ -40,6 +52,6 @@ export default function ErrorAlert (props: WarningAlertProps): JSX.Element {
       {messageBlock}
       <Button className={classes.dialogButton} color='primary' variant='outlined' onClick={cancel}>Cancel</Button>
       <Button className={classes.dialogButton} color='primary' variant='contained' onClick={cont}>Continue</Button>
-    </Alert>
+    </StyledAlert>
   )
 }
diff --git a/ccm_web/client/src/components/WorkflowStepper.tsx b/ccm_web/client/src/components/WorkflowStepper.tsx
index 6f84f72d1..ad04a4cd2 100644
--- a/ccm_web/client/src/components/WorkflowStepper.tsx
+++ b/ccm_web/client/src/components/WorkflowStepper.tsx
@@ -1,8 +1,19 @@
 import React from 'react'
-import { makeStyles, Step, Stepper as MUIStepper, StepLabel } from '@material-ui/core'
+import { styled } from '@mui/material/styles'
+import { Step, Stepper as MUIStepper, StepLabel } from '@mui/material'
 
-const useStyles = makeStyles((theme) => ({
-  stepper: {
+const PREFIX = 'WorkflowStepper'
+
+const classes = {
+  stepper: `${PREFIX}-stepper`
+}
+
+const StyledMUIStepper = styled(MUIStepper)((
+  {
+    theme
+  }
+) => ({
+  [`&.${classes.stepper}`]: {
     textAlign: 'center',
     paddingTop: theme.spacing(2)
   }
@@ -14,14 +25,13 @@ interface StepperProps {
 }
 
 export default function WorkflowStepper (props: StepperProps): JSX.Element {
-  const classes = useStyles()
   return (
-    <MUIStepper className={classes.stepper} activeStep={props.activeStep} alternativeLabel>
+    <StyledMUIStepper className={classes.stepper} activeStep={props.activeStep} alternativeLabel>
     {
       Object.entries(props.allSteps)
         .filter(([key]) => isNaN(Number(key)))
         .map(([key, value]) => <Step key={value}><StepLabel>{key}</StepLabel></Step>)
     }
-    </MUIStepper>
+    </StyledMUIStepper>
   )
 }
diff --git a/ccm_web/client/src/index.tsx b/ccm_web/client/src/index.tsx
index 291225d4b..ad807d786 100644
--- a/ccm_web/client/src/index.tsx
+++ b/ccm_web/client/src/index.tsx
@@ -1,8 +1,8 @@
 import { SnackbarProvider } from 'notistack'
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { BrowserRouter, Route, Switch } from 'react-router-dom'
-import { ThemeProvider } from '@material-ui/core'
+import { ThemeProvider, StyledEngineProvider } from '@mui/material'
 
 import App from './App'
 import './index.css'
@@ -15,23 +15,25 @@ const helpContactProps = {
   helpLink: 'https://its.umich.edu/help'
 }
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root') as Element)
+root.render(
   <React.StrictMode>
-   <ThemeProvider theme={ccmTheme}>
-    <SnackbarProvider maxSnack={3}>
-      <BrowserRouter>
-        <Switch>
-          <Route exact={true} path='/access-denied'>
-            <AccessDenied {...helpContactProps} />
-          </Route>
-          <Route exact={true} path='/launch-error'>
-            <LaunchError {...helpContactProps} />
-          </Route>
-          <Route><App /></Route>
-        </Switch>
-      </BrowserRouter>
-    </SnackbarProvider>
-   </ThemeProvider>
-  </React.StrictMode>,
-  document.getElementById('root')
+   <StyledEngineProvider injectFirst>
+     <ThemeProvider theme={ccmTheme}>
+      <SnackbarProvider maxSnack={3}>
+        <BrowserRouter>
+          <Switch>
+            <Route exact={true} path='/access-denied'>
+              <AccessDenied {...helpContactProps} />
+            </Route>
+            <Route exact={true} path='/launch-error'>
+              <LaunchError {...helpContactProps} />
+            </Route>
+            <Route><App /></Route>
+          </Switch>
+        </BrowserRouter>
+      </SnackbarProvider>
+     </ThemeProvider>
+   </StyledEngineProvider>
+  </React.StrictMode>
 )
diff --git a/ccm_web/client/src/models/FeatureUIData.tsx b/ccm_web/client/src/models/FeatureUIData.tsx
index cc063589d..a027197d7 100644
--- a/ccm_web/client/src/models/FeatureUIData.tsx
+++ b/ccm_web/client/src/models/FeatureUIData.tsx
@@ -1,10 +1,10 @@
 import React, { ComponentType } from 'react'
-import AccountCircleOutlinedIcon from '@material-ui/icons/AccountCircleOutlined'
-import LibraryBooksOutlinedIcon from '@material-ui/icons/LibraryBooksOutlined'
-import MergeTypeIcon from '@material-ui/icons/MergeType'
-import PersonAddIcon from '@material-ui/icons/PersonAdd'
-import PersonAddOutlinedIcon from '@material-ui/icons/PersonAddOutlined'
-import PostAddOutlinedIcon from '@material-ui/icons/PostAddOutlined'
+import AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined'
+import LibraryBooksOutlinedIcon from '@mui/icons-material/LibraryBooksOutlined'
+import MergeTypeIcon from '@mui/icons-material/MergeType'
+import PersonAddIcon from '@mui/icons-material/PersonAdd'
+import PersonAddOutlinedIcon from '@mui/icons-material/PersonAddOutlined'
+import PostAddOutlinedIcon from '@mui/icons-material/PostAddOutlined'
 
 import {
   FeatureDataProps, mergeSectionProps, formatCanvasGradebookProps, formatThirdPartyGradebookProps,
diff --git a/ccm_web/client/src/pages/AccessDenied.tsx b/ccm_web/client/src/pages/AccessDenied.tsx
index 0a2972b71..14366e423 100644
--- a/ccm_web/client/src/pages/AccessDenied.tsx
+++ b/ccm_web/client/src/pages/AccessDenied.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Typography } from '@material-ui/core'
+import { Typography } from '@mui/material'
 
 import HelpContact, { HelpContactProps } from '../components/HelpContact'
 import InlineErrorAlert from '../components/InlineErrorAlert'
diff --git a/ccm_web/client/src/pages/AddNonUMUsers.tsx b/ccm_web/client/src/pages/AddNonUMUsers.tsx
index 59874e6d7..60d7d649a 100644
--- a/ccm_web/client/src/pages/AddNonUMUsers.tsx
+++ b/ccm_web/client/src/pages/AddNonUMUsers.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { makeStyles, Typography } from '@material-ui/core'
+import { styled } from '@mui/material/styles'
+import { Typography } from '@mui/material'
 
 import * as api from '../api'
 import ErrorAlert from '../components/ErrorAlert'
@@ -14,11 +15,23 @@ import {
 } from '../models/canvas'
 import { CCMComponentProps } from '../models/FeatureUIData'
 
-const useStyles = makeStyles((theme) => ({
-  root: {
+const PREFIX = 'AddNonUMUsers'
+
+const classes = {
+  root: `${PREFIX}-root`,
+  spacing: `${PREFIX}-spacing`
+}
+
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`&.${classes.root}`]: {
     textAlign: 'left'
   },
-  spacing: {
+
+  [`& .${classes.spacing}`]: {
     marginBottom: theme.spacing(2)
   }
 }))
@@ -37,8 +50,6 @@ enum PageState {
 interface AddNonUMUsersProps extends CCMComponentProps {}
 
 export default function AddNonUMUsers (props: AddNonUMUsersProps): JSX.Element {
-  const classes = useStyles()
-
   const { course, canvasURL } = props.globals
   if (course.roles.length === 0) return <ErrorAlert />
 
@@ -126,10 +137,10 @@ export default function AddNonUMUsers (props: AddNonUMUsersProps): JSX.Element {
   }
 
   return (
-    <div className={classes.root}>
+    <Root className={classes.root}>
       <Help baseHelpURL={props.globals.baseHelpURL} helpURLEnding={props.helpURLEnding} />
       <Typography variant='h5' component='h1' className={classes.spacing}>{props.title}</Typography>
       <div>{renderActivePageState(activePageState)}</div>
-    </div>
+    </Root>
   )
 }
diff --git a/ccm_web/client/src/pages/AddUMUsers.tsx b/ccm_web/client/src/pages/AddUMUsers.tsx
index a4ae141c4..9d8e2452c 100644
--- a/ccm_web/client/src/pages/AddUMUsers.tsx
+++ b/ccm_web/client/src/pages/AddUMUsers.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { makeStyles, Typography } from '@material-ui/core'
+import { styled } from '@mui/material/styles'
+import { Typography } from '@mui/material'
 
 import { getCourseSections } from '../api'
 import Help from '../components/Help'
@@ -12,11 +13,23 @@ import {
 } from '../models/canvas'
 import { CCMComponentProps } from '../models/FeatureUIData'
 
-const useStyles = makeStyles((theme) => ({
-  root: {
+const PREFIX = 'AddUMUsers'
+
+const classes = {
+  root: `${PREFIX}-root`,
+  spacing: `${PREFIX}-spacing`
+}
+
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`&.${classes.root}`]: {
     textAlign: 'left'
   },
-  spacing: {
+
+  [`& .${classes.spacing}`]: {
     marginBottom: theme.spacing(2)
   }
 }))
@@ -37,7 +50,6 @@ function AddUMUsers (props: AddUMUsersProps): JSX.Element {
   const { canvasURL, course } = props.globals
   const settingsURL = `${canvasURL}/courses/${course.id}/settings`
 
-  const classes = useStyles()
   const [pageState, setPageState] = useState<PageState>(PageState.SelectInputMethod)
   const [inputMethod, setInputMethod] = useState<InputMethod>(InputMethod.CSVSingleSection)
 
@@ -98,7 +110,7 @@ function AddUMUsers (props: AddUMUsersProps): JSX.Element {
   }
 
   return (
-    <div className={classes.root}>
+    <Root className={classes.root}>
       <Help baseHelpURL={props.globals.baseHelpURL} helpURLEnding={props.helpURLEnding} />
       <Typography variant='h5' component='h1' className={classes.spacing}>{props.title}</Typography>
       <div>
@@ -110,7 +122,7 @@ function AddUMUsers (props: AddUMUsersProps): JSX.Element {
               : <MultipleSectionEnrollmentWorkflow {...commonProps} />
         }
       </div>
-    </div>
+    </Root>
   )
 }
 
diff --git a/ccm_web/client/src/pages/BulkSectionCreate.tsx b/ccm_web/client/src/pages/BulkSectionCreate.tsx
index c5df6fe9f..09af021e7 100644
--- a/ccm_web/client/src/pages/BulkSectionCreate.tsx
+++ b/ccm_web/client/src/pages/BulkSectionCreate.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react'
-import { Backdrop, Box, Button, CircularProgress, Grid, makeStyles, Typography } from '@material-ui/core'
+import { styled } from '@mui/material/styles'
+import { Backdrop, Button, CircularProgress, Grid, Typography } from '@mui/material'
 
 import { addCourseSections, getCourseSections } from '../api'
 import APIErrorMessage from '../components/APIErrorMessage'
@@ -27,36 +28,60 @@ import CSVSchemaValidator, { SchemaInvalidation } from '../utils/CSVSchemaValida
 import FileParserWrapper, { CSVRecord } from '../utils/FileParserWrapper'
 import { getRowNumber } from '../utils/fileUtils'
 
-const useStyles = makeStyles((theme) => ({
-  root: {
+const PREFIX = 'BulkSectionCreate'
+
+const classes = {
+  root: `${PREFIX}-root`,
+  confirmContainer: `${PREFIX}-confirmContainer`,
+  uploadContainer: `${PREFIX}-uploadContainer`,
+  backdrop: `${PREFIX}-backdrop`,
+  popover: `${PREFIX}-popover`,
+  paper: `${PREFIX}-paper`,
+  table: `${PREFIX}-table`,
+  buttonGroup: `${PREFIX}-buttonGroup`
+}
+
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.root}`]: {
     textAlign: 'left'
   },
-  confirmContainer: {
+
+  [`& .${classes.confirmContainer}`]: {
     position: 'relative',
     zIndex: 0,
     textAlign: 'center'
   },
-  uploadContainer: {
+
+  [`&.${classes.uploadContainer}`]: {
     position: 'relative',
     zIndex: 0,
     textAlign: 'center'
   },
-  backdrop: {
+
+  [`& .${classes.backdrop}`]: {
     zIndex: theme.zIndex.drawer + 1,
     color: '#fff',
     position: 'absolute'
   },
-  popover: {
+
+  [`& .${classes.popover}`]: {
     pointerEvents: 'none'
   },
-  paper: {
+
+  [`& .${classes.paper}`]: {
     padding: theme.spacing(1)
   },
-  table: {
+
+  [`& .${classes.table}`]: {
     paddingLeft: 10,
     paddingRight: 10
   },
-  buttonGroup: {
+
+  [`& .${classes.buttonGroup}`]: {
     marginTop: theme.spacing(1)
   }
 }))
@@ -86,8 +111,6 @@ interface BulkSectionCreatePageStateData {
 }
 
 function BulkSectionCreate (props: CCMComponentProps): JSX.Element {
-  const classes = useStyles()
-
   const [pageState, setPageState] = useState<BulkSectionCreatePageStateData>(
     { state: BulkSectionCreatePageState.UploadPending, schemaInvalidations: [], rowInvalidations: [] }
   )
@@ -261,23 +284,25 @@ Section 001`
   }
 
   const renderFileUpload = (): JSX.Element => {
-    return <div className={classes.uploadContainer}>
-      <Grid container>
-        <Grid item xs={12}>
-          <FileUpload onUploadComplete={(file) => setFile(file)} />
-        </Grid>
-      </Grid>
-      <Backdrop className={classes.backdrop} open={isGetSectionsLoading}>
+    return (
+      <Root className={classes.uploadContainer}>
         <Grid container>
           <Grid item xs={12}>
-            <CircularProgress color="inherit" />
-          </Grid>
-          <Grid item xs={12}>
-          {renderLoadingText()}
+            <FileUpload onUploadComplete={(file) => setFile(file)} />
           </Grid>
         </Grid>
-      </Backdrop>
-    </div>
+        <Backdrop className={classes.backdrop} open={isGetSectionsLoading}>
+          <Grid container>
+            <Grid item xs={12}>
+              <CircularProgress color="inherit" />
+            </Grid>
+            <Grid item xs={12}>
+            {renderLoadingText()}
+            </Grid>
+          </Grid>
+        </Backdrop>
+      </Root>
+    )
   }
 
   const renderUpload = (): JSX.Element => {
@@ -332,16 +357,12 @@ Section 001`
       <div className={classes.confirmContainer}>
         {file !== undefined && <CSVFileName file={file} />}
         <Grid container>
-          <Box clone order={{ xs: 2, sm: 1 }}>
-            <Grid item xs={12} sm={9} className={classes.table}>
-              <BulkSectionCreateUploadConfirmationTable sectionNames={sectionNames} />
-            </Grid>
-          </Box>
-          <Box clone order={{ xs: 1, sm: 2 }}>
-            <Grid item xs={12} sm={3}>
-              <ConfirmDialog submit={submit} cancel={resetPageState} disabled={isSubmitting()} />
-            </Grid>
-          </Box>
+          <Grid item xs={12} sm={9} sx={{ order: { xs: 2, sm: 1 } }} className={classes.table}>
+            <BulkSectionCreateUploadConfirmationTable sectionNames={sectionNames} />
+          </Grid>
+          <Grid item xs={12} sm={3} sx={{ order: { xs: 1, sm: 2 } }}>
+            <ConfirmDialog submit={submit} cancel={resetPageState} disabled={isSubmitting()} />
+          </Grid>
         </Grid>
         <Backdrop className={classes.backdrop} open={isAddSectionsLoading}>
         <Grid container>
@@ -410,11 +431,11 @@ Section 001`
   }
 
   return (
-    <div className={classes.root}>
+    <Root className={classes.root}>
       <Help baseHelpURL={props.globals.baseHelpURL} helpURLEnding={props.helpURLEnding} />
       <Typography variant='h5' component='h1'>{props.title}</Typography>
       {renderComponent()}
-    </div>
+    </Root>
   )
 }
 
diff --git a/ccm_web/client/src/pages/FormatThirdPartyGradebook.tsx b/ccm_web/client/src/pages/FormatThirdPartyGradebook.tsx
index 57a71d2ba..645318802 100644
--- a/ccm_web/client/src/pages/FormatThirdPartyGradebook.tsx
+++ b/ccm_web/client/src/pages/FormatThirdPartyGradebook.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react'
-import {
-  Box, Button, Backdrop, CircularProgress, Grid, Link, makeStyles, Typography
-} from '@material-ui/core'
+import { styled } from '@mui/material/styles'
+import { Button, Backdrop, CircularProgress, Grid, Link, Typography } from '@mui/material'
 
 import * as api from '../api'
 import APIErrorMessage from '../components/APIErrorMessage'
@@ -28,36 +27,62 @@ import ThirdPartyGradebookProcessor, {
 } from '../utils/ThirdPartyGradebookProcessor'
 import { createOutputFileName, getRowNumber, prepDownloadDataString } from '../utils/fileUtils'
 
-const useStyles = makeStyles((theme) => ({
-  root: {
+const PREFIX = 'FormatThirdPartyGradebook'
+
+const classes = {
+  root: `${PREFIX}-root`,
+  buttonGroup: `${PREFIX}-buttonGroup`,
+  stepper: `${PREFIX}-stepper`,
+  table: `${PREFIX}-table`,
+  selectContainer: `${PREFIX}-selectContainer`,
+  uploadContainer: `${PREFIX}-uploadContainer`,
+  reviewContainer: `${PREFIX}-reviewContainer`,
+  reviewNotes: `${PREFIX}-reviewNotes`,
+  backdrop: `${PREFIX}-backdrop`
+}
+
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.root}`]: {
     textAlign: 'left'
   },
-  buttonGroup: {
+
+  [`& .${classes.buttonGroup}`]: {
     marginTop: theme.spacing(1)
   },
-  stepper: {
+
+  [`& .${classes.stepper}`]: {
     textAlign: 'center',
     paddingTop: '20px'
   },
-  table: {
+
+  [`& .${classes.table}`]: {
     paddingLeft: 10,
     paddingRight: 10
   },
-  selectContainer: {
+
+  [`& .${classes.selectContainer}`]: {
     position: 'relative',
     zIndex: 0,
     textAlign: 'center'
   },
-  uploadContainer: {
+
+  [`& .${classes.uploadContainer}`]: {
     textAlign: 'center'
   },
-  reviewContainer: {
+
+  [`& .${classes.reviewContainer}`]: {
     textAlign: 'center'
   },
-  reviewNotes: {
+
+  [`& .${classes.reviewNotes}`]: {
     textAlign: 'left'
   },
-  backdrop: {
+
+  [`& .${classes.backdrop}`]: {
     zIndex: theme.zIndex.drawer + 1,
     color: '#FFF',
     position: 'absolute'
@@ -67,8 +92,6 @@ const useStyles = makeStyles((theme) => ({
 interface FormatThirdPartyGradebookProps extends CCMComponentProps {}
 
 export default function FormatThirdPartyGradebook (props: FormatThirdPartyGradebookProps): JSX.Element {
-  const classes = useStyles()
-
   const csvParser = new FileParserWrapper(
     Object.assign({ ...FileParserWrapper.defaultParseConfigOptions }, { transformHeader: undefined })
   )
@@ -368,8 +391,7 @@ export default function FormatThirdPartyGradebook (props: FormatThirdPartyGradeb
       <div className={classes.reviewContainer}>
         <CSVFileName file={file} />
         <Grid container>
-          <Box clone order={{ xs: 2, sm: 2, md: 1, lg: 1 }}>
-            <Grid item xs={12} sm={12} md={9} className={classes.table}>
+            <Grid item xs={12} sm={12} md={9} sx={{ order: { xs: 2, sm: 2, md: 1, lg: 1 } }} className={classes.table}>
               <Typography gutterBottom className={classes.reviewNotes}>
                 Notes: The first row shown below is the &quot;{POINTS_POS_TEXT}&quot; row.
                 In addition to the &quot;{REQUIRED_LOGIN_ID_HEADER}&quot; and assignment columns,
@@ -378,9 +400,7 @@ export default function FormatThirdPartyGradebook (props: FormatThirdPartyGradeb
               </Typography>
               <ThirdPartyGradebookConfirmationTable records={recordsToReview} assignmentHeader={assignmentHeader} />
             </Grid>
-          </Box>
-          <Box clone order={{ xs: 1, sm: 1, md: 2, lg: 2 }}>
-            <Grid item xs={12} sm={12} md={3}>
+            <Grid item xs={12} sm={12} md={3} sx={{ order: { xs: 1, sm: 1, md: 2, lg: 2 } }}>
               <ConfirmDialog
                 message='Your file is valid! If this looks correct, click "Submit" to proceed with downloading.'
                 submit={() => setActiveStep(CSVWorkflowStep.Confirmation)}
@@ -394,7 +414,6 @@ export default function FormatThirdPartyGradebook (props: FormatThirdPartyGradeb
                 }}
               />
             </Grid>
-          </Box>
         </Grid>
       </div>
     )
@@ -434,11 +453,11 @@ export default function FormatThirdPartyGradebook (props: FormatThirdPartyGradeb
   }
 
   return (
-    <div className={classes.root}>
+    <Root className={classes.root}>
       <Help baseHelpURL={props.globals.baseHelpURL} helpURLEnding={props.helpURLEnding} />
       <Typography variant='h5' component='h1'>{props.title}</Typography>
       <WorkflowStepper allSteps={Object(CSVWorkflowStep)} activeStep={activeStep} />
       <div>{renderStep(activeStep)}</div>
-    </div>
+    </Root>
   )
 }
diff --git a/ccm_web/client/src/pages/GradebookCanvas.tsx b/ccm_web/client/src/pages/GradebookCanvas.tsx
index a5bb79c97..d148b056b 100644
--- a/ccm_web/client/src/pages/GradebookCanvas.tsx
+++ b/ccm_web/client/src/pages/GradebookCanvas.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
-import { Box, Button, Grid, Link, makeStyles, Typography } from '@material-ui/core'
-import WarningIcon from '@material-ui/icons/Warning'
+import { styled } from '@mui/material/styles'
+import { Button, Grid, Link, Typography } from '@mui/material'
+import WarningIcon from '@mui/icons-material/Warning'
 
 import CanvasSettingsLink from '../components/CanvasSettingsLink'
 import ConfirmDialog from '../components/ConfirmDialog'
@@ -19,24 +20,43 @@ import CSVSchemaValidator, { SchemaInvalidation } from '../utils/CSVSchemaValida
 import FileParserWrapper, { CSVRecord } from '../utils/FileParserWrapper'
 import { createOutputFileName, prepDownloadDataString } from '../utils/fileUtils'
 
-const useStyles = makeStyles((theme) => ({
-  root: {
+const PREFIX = 'ConvertCanvasGradebook'
+
+const classes = {
+  root: `${PREFIX}-root`,
+  uploadHeader: `${PREFIX}-uploadHeader`,
+  buttonGroup: `${PREFIX}-buttonGroup`
+}
+
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.root}`]: {
     textAlign: 'left'
   },
-  uploadHeader: {
+
+  [`& .${classes.uploadHeader}`]: {
     paddingTop: 15
   },
-  buttonGroup: {
+
+  [`& .${classes.buttonGroup}`]: {
     marginTop: theme.spacing(1)
   }
 }))
 
-const useConfirmationStyles = makeStyles((theme) => ({
-  table: {
+const confirmationClasses = {
+  table: 'Confirmation-table',
+  dialogWarningIcon: 'Confirmation-dialogWarningIcon'
+}
+
+const Confirmation = styled('div')(({ theme }) => ({
+  [`& .${confirmationClasses.table}`]: {
     paddingLeft: 10,
     paddingRight: 10
   },
-  dialogWarningIcon: {
+  [`& .${confirmationClasses.dialogWarningIcon}`]: {
     color: theme.palette.warning.main
   }
 }))
@@ -78,9 +98,6 @@ const convertEmptyCellToUndefined = (cell: string | undefined): string | undefin
 }
 
 function ConvertCanvasGradebook (props: CCMComponentProps): JSX.Element {
-  const classes = useStyles()
-  const confirmationClasses = useConfirmationStyles()
-
   const [pageState, setPageState] = useState<GradebookCanvasPageStateData>({ state: GradebookCanvasPageState.Upload })
   const [file, setFile] = useState<File|undefined>(undefined)
   const [downloadData, setDownloadData] = useState<DownloadData | undefined>(undefined)
@@ -189,17 +206,19 @@ function ConvertCanvasGradebook (props: CCMComponentProps): JSX.Element {
   }
 
   const renderUploadHeader = (): JSX.Element => {
-    return <div className={classes.uploadHeader}>
-      <Typography variant='h6' component='h2'>Upload your CSV File</Typography>
-      <Typography>This tool reformats an exported Canvas gradebook file for upload to Faculty Center.</Typography>
-      <br/>
-      <Typography><strong>Requirements</strong></Typography>
-      <ol>
-        <li><Typography><Link href='https://community.canvaslms.com/t5/Instructor-Guide/tkb-p/Instructor#Grades' target='_blank' rel="noopener">All assignments are graded.</Link></Typography></li>
-        <li><Typography><Link href='https://community.canvaslms.com/t5/Instructor-Guide/How-do-I-enable-a-grading-scheme-for-a-course/ta-p/1042' target='_blank' rel="noopener">Grading scheme must be enabled in your course settings.</Link></Typography></li>
-        <li><Typography><Link href='https://community.canvaslms.com/t5/Instructor-Guide/How-do-I-export-grades-in-the-Gradebook/ta-p/809' target='_blank' rel="noopener">You have exported (downloaded) the completed Canvas gradebook.</Link></Typography></li>
-      </ol>
-    </div>
+    return (
+      <div className={classes.uploadHeader}>
+        <Typography variant='h6' component='h2'>Upload your CSV File</Typography>
+        <Typography>This tool reformats an exported Canvas gradebook file for upload to Faculty Center.</Typography>
+        <br/>
+        <Typography><strong>Requirements</strong></Typography>
+        <ol>
+          <li><Typography><Link href='https://community.canvaslms.com/t5/Instructor-Guide/tkb-p/Instructor#Grades' target='_blank' rel="noopener">All assignments are graded.</Link></Typography></li>
+          <li><Typography><Link href='https://community.canvaslms.com/t5/Instructor-Guide/How-do-I-enable-a-grading-scheme-for-a-course/ta-p/1042' target='_blank' rel="noopener">Grading scheme must be enabled in your course settings.</Link></Typography></li>
+          <li><Typography><Link href='https://community.canvaslms.com/t5/Instructor-Guide/How-do-I-export-grades-in-the-Gradebook/ta-p/809' target='_blank' rel="noopener">You have exported (downloaded) the completed Canvas gradebook.</Link></Typography></li>
+        </ol>
+      </div>
+    )
   }
 
   const renderFileUpload = (): JSX.Element => {
@@ -269,27 +288,23 @@ function ConvertCanvasGradebook (props: CCMComponentProps): JSX.Element {
     )
 
     return (
-      <div>
+      <Confirmation>
         {file !== undefined && <CSVFileName file={file} />}
         <Grid container>
-          <Box clone order={{ xs: 2, sm: 1 }}>
-            <Grid item xs={12} sm={9} className={confirmationClasses.table}>
-              <GradebookUploadConfirmationTable grades={grades} />
-            </Grid>
-          </Box>
-          <Box clone order={{ xs: 1, sm: 2 }}>
-            <Grid item xs={12} sm={3}>
-              <ConfirmDialog
-                message={overideGradeMismatchWarning ? warningText : undefined}
-                icon={overideGradeMismatchWarning ? warningIcon : undefined}
-                cancel={resetPageState}
-                submit={() => setPageState({ state: GradebookCanvasPageState.Success })}
-                download={downloadData}
-              />
-            </Grid>
-          </Box>
+          <Grid item xs={12} sm={9} sx={{ order: { xs: 2, sm: 1 } }}className={confirmationClasses.table}>
+            <GradebookUploadConfirmationTable grades={grades} />
+          </Grid>
+          <Grid item xs={12} sm={3} sx={{ order: { xs: 2, sm: 1 } }}>
+            <ConfirmDialog
+              message={overideGradeMismatchWarning ? warningText : undefined}
+              icon={overideGradeMismatchWarning ? warningIcon : undefined}
+              cancel={resetPageState}
+              submit={() => setPageState({ state: GradebookCanvasPageState.Success })}
+              download={downloadData}
+            />
+          </Grid>
         </Grid>
-      </div>
+      </Confirmation>
     )
   }
 
@@ -335,11 +350,11 @@ function ConvertCanvasGradebook (props: CCMComponentProps): JSX.Element {
   }
 
   return (
-    <div className={classes.root}>
+    <Root className={classes.root}>
       <Help baseHelpURL={props.globals.baseHelpURL} helpURLEnding={props.helpURLEnding} />
       <Typography variant='h5' component='h1'>{props.title}</Typography>
       {renderComponent()}
-    </div>
+    </Root>
   )
 }
 
diff --git a/ccm_web/client/src/pages/Home.tsx b/ccm_web/client/src/pages/Home.tsx
index ef240f1f0..7a3dd2a36 100644
--- a/ccm_web/client/src/pages/Home.tsx
+++ b/ccm_web/client/src/pages/Home.tsx
@@ -1,7 +1,8 @@
 import { useSnackbar } from 'notistack'
 import React, { useEffect } from 'react'
-import { makeStyles } from '@material-ui/core/styles'
-import { Grid, Typography } from '@material-ui/core'
+
+import { styled } from '@mui/material/styles'
+import { Grid, Typography } from '@mui/material'
 
 import APIErrorMessage from '../components/APIErrorMessage'
 import FeatureCard from '../components/FeatureCard'
@@ -17,18 +18,26 @@ import { Globals } from '../models/models'
 import { CanvasCourseBase } from '../models/canvas'
 import { courseNameInputSchema, validateString } from '../utils/validation'
 
-const useStyles = makeStyles((theme) => ({
-  title: {
-    textAlign: 'left',
-    marginBottom: theme.spacing(1)
-  },
-  courseNameContainer: {
-    marginBottom: theme.spacing(2)
-  },
-  courseName: {
+const PREFIX = 'Home'
+
+const classes = {
+  courseName: `${PREFIX}-courseName`,
+  courseNameContainer: `${PREFIX}-courseNameContainer`,
+  title: `${PREFIX}-title`
+}
+
+const Root = styled('div')(({ theme }) => ({
+  [`& .${classes.courseName}`]: {
     whiteSpace: 'pre-wrap',
     wordWrap: 'break-word',
     textAlign: 'left'
+  },
+  [`& .${classes.courseNameContainer}`]: {
+    marginBottom: theme.spacing(2)
+  },
+  [`& .${classes.title}`]: {
+    textAlign: 'left',
+    marginBottom: theme.spacing(1)
   }
 }))
 
@@ -41,7 +50,6 @@ interface HomeProps {
 
 function Home (props: HomeProps): JSX.Element {
   const { enqueueSnackbar } = useSnackbar()
-  const classes = useStyles()
 
   const setCourseNameAsync = async (
     newCourseName: string
@@ -126,7 +134,7 @@ function Home (props: HomeProps): JSX.Element {
   }
 
   return (
-    <>
+    <Root>
     <Help baseHelpURL={props.globals.baseHelpURL} />
     <div className={classes.courseNameContainer}>
       {renderCourseRename()}
@@ -138,7 +146,7 @@ function Home (props: HomeProps): JSX.Element {
         return (renderFeatureGroup(featureGroup))
       })}
     </Grid>
-    </>
+    </Root>
   )
 }
 
diff --git a/ccm_web/client/src/pages/LaunchError.tsx b/ccm_web/client/src/pages/LaunchError.tsx
index ea60d7e49..c2b7f526a 100644
--- a/ccm_web/client/src/pages/LaunchError.tsx
+++ b/ccm_web/client/src/pages/LaunchError.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { Link, Typography } from '@material-ui/core'
+import { Link, Typography } from '@mui/material'
 
 import HelpContact, { HelpContactProps } from '../components/HelpContact'
 import InlineErrorAlert from '../components/InlineErrorAlert'
diff --git a/ccm_web/client/src/pages/MergeSections.tsx b/ccm_web/client/src/pages/MergeSections.tsx
index ae69c6e63..689121521 100644
--- a/ccm_web/client/src/pages/MergeSections.tsx
+++ b/ccm_web/client/src/pages/MergeSections.tsx
@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from 'react'
 
-import { Button, Grid, LinearProgress, makeStyles, Paper, Typography } from '@material-ui/core'
+import { styled } from '@mui/material/styles'
+
+import { Button, Grid, LinearProgress, Paper, Typography } from '@mui/material'
 
 import { useSnackbar } from 'notistack'
 
@@ -18,14 +20,32 @@ import { CourseNameSearcher, CourseSectionSearcher, SectionNameSearcher, Uniqnam
 import CourseSectionList from '../components/CourseSectionList'
 import Help from '../components/Help'
 
-const useStyles = makeStyles((theme) => ({
-  root: {
+const PREFIX = 'MergeSections'
+
+const classes = {
+  root: `${PREFIX}-root`,
+  spacing: `${PREFIX}-spacing`,
+  sectionSelectionContainer: `${PREFIX}-sectionSelectionContainer`,
+  selectorPaper: `${PREFIX}-selectorPaper`,
+  backdrop: `${PREFIX}-backdrop`,
+  submitButton: `${PREFIX}-submitButton`,
+  buttonGroup: `${PREFIX}-buttonGroup`
+}
+
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.root}`]: {
     textAlign: 'left'
   },
-  spacing: {
+
+  [`& .${classes.spacing}`]: {
     marginBottom: theme.spacing(2)
   },
-  sectionSelectionContainer: {
+
+  [`& .${classes.sectionSelectionContainer}`]: {
     position: 'relative',
     zIndex: 0,
     textAlign: 'center',
@@ -33,19 +53,23 @@ const useStyles = makeStyles((theme) => ({
     display: 'flex',
     flexDirection: 'column'
   },
-  selectorPaper: {
+
+  [`& .${classes.selectorPaper}`]: {
     padding: theme.spacing(2),
     height: '100%'
   },
-  backdrop: {
+
+  [`& .${classes.backdrop}`]: {
     zIndex: theme.zIndex.drawer + 1,
     color: '#fff',
     position: 'absolute'
   },
-  submitButton: {
+
+  [`& .${classes.submitButton}`]: {
     float: 'right'
   },
-  buttonGroup: {
+
+  [`& .${classes.buttonGroup}`]: {
     marginTop: theme.spacing(1)
   }
 }))
@@ -57,7 +81,6 @@ enum PageState {
 }
 
 function MergeSections (props: CCMComponentProps): JSX.Element {
-  const classes = useStyles()
   const { enqueueSnackbar } = useSnackbar()
   const [pageState, setPageState] = useState<PageState>(PageState.SelectSections)
 
@@ -266,11 +289,11 @@ function MergeSections (props: CCMComponentProps): JSX.Element {
   }
 
   return (
-    <div className={classes.root}>
+    <Root className={classes.root}>
       <Help baseHelpURL={props.globals.baseHelpURL} helpURLEnding={props.helpURLEnding} />
       <Typography variant='h5' component='h1' className={classes.spacing}>{props.title}</Typography>
       {renderComponent()}
-    </div>
+    </Root>
   )
 }
 
diff --git a/ccm_web/client/src/pages/NotFound.tsx b/ccm_web/client/src/pages/NotFound.tsx
index 09b5744c1..a8d34d51e 100644
--- a/ccm_web/client/src/pages/NotFound.tsx
+++ b/ccm_web/client/src/pages/NotFound.tsx
@@ -1,24 +1,36 @@
 import React from 'react'
-import { makeStyles, Typography } from '@material-ui/core'
+import { styled } from '@mui/material/styles'
+import { Typography } from '@mui/material'
 
-const useStyles = makeStyles((theme) => ({
-  root: {
+const PREFIX = 'NotFound'
+
+const classes = {
+  root: `${PREFIX}-root`,
+  spacing: `${PREFIX}-spacing`
+}
+
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`&.${classes.root}`]: {
     textAlign: 'left'
   },
-  spacing: {
+
+  [`& .${classes.spacing}`]: {
     marginBottom: theme.spacing(2)
   }
 }))
 
 export default function NotFound (): JSX.Element {
-  const classes = useStyles()
   return (
-    <div className={classes.root}>
+    <Root className={classes.root}>
       <Typography variant='h5' component='h1' className={classes.spacing}>Not Found</Typography>
       <Typography gutterBottom>There is no content at this route.</Typography>
       <Typography>
         You can use the &quot;Canvas Course Manager&quot; link above to return to the home page.
       </Typography>
-    </div>
+    </Root>
   )
 }
diff --git a/ccm_web/client/src/theme.ts b/ccm_web/client/src/theme.ts
index 203bcfa1e..2f63fe17b 100644
--- a/ccm_web/client/src/theme.ts
+++ b/ccm_web/client/src/theme.ts
@@ -1,4 +1,4 @@
-import { createTheme } from '@material-ui/core/styles'
+import { createTheme } from '@mui/material/styles'
 
 const ccmTheme = createTheme({
   palette: {
@@ -17,11 +17,6 @@ const ccmTheme = createTheme({
     info: {
       main: '#3F648E'
     }
-  },
-  props: {
-    MuiLink: {
-      underline: 'always'
-    }
   }
 })
 
diff --git a/ccm_web/package-lock.json b/ccm_web/package-lock.json
index ab161c481..b000815f8 100644
--- a/ccm_web/package-lock.json
+++ b/ccm_web/package-lock.json
@@ -9,9 +9,11 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
+        "@emotion/react": "11.11.3",
+        "@emotion/styled": "11.11.0",
         "@kth/canvas-api": "4.2.5",
-        "@material-ui/core": "4.12.4",
-        "@material-ui/icons": "4.11.3",
+        "@mui/icons-material": "5.15.10",
+        "@mui/material": "5.15.10",
         "@nestjs/axios": "3.0.2",
         "@nestjs/common": "10.3.3",
         "@nestjs/config": "3.2.0",
@@ -41,13 +43,13 @@
         "ltijs-sequelize": "2.4.4",
         "morgan": "1.10.0",
         "mysql2": "3.9.2",
-        "notistack": "1.0.10",
+        "notistack": "3.0.1",
         "p-limit": "3.1.0",
         "papaparse": "5.3.2",
         "passport": "0.7.0",
         "passport-jwt": "4.0.1",
-        "react": "17.0.2",
-        "react-dom": "17.0.2",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
         "react-router-dom": "5.3.3",
         "rxjs": "7.8.1",
         "sequelize": "6.37.1",
@@ -73,8 +75,8 @@
         "@types/papaparse": "5.3.2",
         "@types/passport": "1.0.16",
         "@types/passport-jwt": "4.0.1",
-        "@types/react": "17.0.47",
-        "@types/react-dom": "17.0.17",
+        "@types/react": "18.2.64",
+        "@types/react-dom": "18.2.19",
         "@types/react-router-dom": "5.3.3",
         "@types/supertest": "2.0.12",
         "@types/webpack": "5.28.5",
@@ -110,13 +112,13 @@
       }
     },
     "node_modules/@ampproject/remapping": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
-      "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
+      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
       "dev": true,
       "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.0",
-        "@jridgewell/trace-mapping": "^0.3.9"
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
       },
       "engines": {
         "node": ">=6.0.0"
@@ -175,16 +177,16 @@
       }
     },
     "node_modules/@azure/core-http-compat": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@azure/core-http-compat/-/core-http-compat-1.3.0.tgz",
-      "integrity": "sha512-ZN9avruqbQ5TxopzG3ih3KRy52n8OAbitX3fnZT5go4hzu0J+KVPSzkL+Wt3hpJpdG8WIfg1sBD1tWkgUdEpBA==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@azure/core-http-compat/-/core-http-compat-2.0.1.tgz",
+      "integrity": "sha512-xpQZz/q7E0jSW4rckrTo2mDFDQgo6I69hBU4voMQi7REi6JRW5a+KfVkbJCFCWnkFmP6cAJ0IbuudTdf/MEBOQ==",
       "dependencies": {
         "@azure/abort-controller": "^1.0.4",
         "@azure/core-client": "^1.3.0",
         "@azure/core-rest-pipeline": "^1.3.0"
       },
       "engines": {
-        "node": ">=12.0.0"
+        "node": ">=14.0.0"
       }
     },
     "node_modules/@azure/core-http-compat/node_modules/@azure/abort-controller": {
@@ -341,14 +343,14 @@
       }
     },
     "node_modules/@azure/keyvault-keys": {
-      "version": "4.7.2",
-      "resolved": "https://registry.npmjs.org/@azure/keyvault-keys/-/keyvault-keys-4.7.2.tgz",
-      "integrity": "sha512-VdIH6PjbQ3J5ntK+xeI8eOe1WsDxF9ndXw8BPR/9MZVnIj0vQNtNCS6gpR7EFQeGcs8XjzMfHm0AvKGErobqJQ==",
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/@azure/keyvault-keys/-/keyvault-keys-4.8.0.tgz",
+      "integrity": "sha512-jkuYxgkw0aaRfk40OQhFqDIupqblIOIlYESWB6DKCVDxQet1pyv86Tfk9M+5uFM0+mCs6+MUHU+Hxh3joiUn4Q==",
       "dependencies": {
         "@azure/abort-controller": "^1.0.0",
         "@azure/core-auth": "^1.3.0",
         "@azure/core-client": "^1.5.0",
-        "@azure/core-http-compat": "^1.3.0",
+        "@azure/core-http-compat": "^2.0.1",
         "@azure/core-lro": "^2.2.0",
         "@azure/core-paging": "^1.1.1",
         "@azure/core-rest-pipeline": "^1.8.1",
@@ -358,7 +360,7 @@
         "tslib": "^2.2.0"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=18.0.0"
       }
     },
     "node_modules/@azure/keyvault-keys/node_modules/@azure/abort-controller": {
@@ -522,7 +524,6 @@
       "version": "7.23.5",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
       "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==",
-      "dev": true,
       "dependencies": {
         "@babel/highlight": "^7.23.4",
         "chalk": "^2.4.2"
@@ -535,7 +536,6 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^1.9.0"
       },
@@ -547,7 +547,6 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -561,7 +560,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
       "dependencies": {
         "color-name": "1.1.3"
       }
@@ -569,14 +567,12 @@
     "node_modules/@babel/code-frame/node_modules/color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-      "dev": true
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
     "node_modules/@babel/code-frame/node_modules/escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "dev": true,
       "engines": {
         "node": ">=0.8.0"
       }
@@ -585,7 +581,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -594,7 +589,6 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
       "dependencies": {
         "has-flag": "^3.0.0"
       },
@@ -612,9 +606,9 @@
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.9.tgz",
-      "integrity": "sha512-5q0175NOjddqpvvzU+kDiSOAk4PfdO6FvwCWoQ6RO7rTzEe8vlo+4HVfcnAREhD4npMs0e9uZypjTwzZPCf/cw==",
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.0.tgz",
+      "integrity": "sha512-fQfkg0Gjkza3nf0c7/w6Xf34BW4YvzNfACRLmmb7XRLa6XHdR+K9AlJlxneFfWYf6uhOzuzZVTjF/8KfndZANw==",
       "dev": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
@@ -622,11 +616,11 @@
         "@babel/generator": "^7.23.6",
         "@babel/helper-compilation-targets": "^7.23.6",
         "@babel/helper-module-transforms": "^7.23.3",
-        "@babel/helpers": "^7.23.9",
-        "@babel/parser": "^7.23.9",
-        "@babel/template": "^7.23.9",
-        "@babel/traverse": "^7.23.9",
-        "@babel/types": "^7.23.9",
+        "@babel/helpers": "^7.24.0",
+        "@babel/parser": "^7.24.0",
+        "@babel/template": "^7.24.0",
+        "@babel/traverse": "^7.24.0",
+        "@babel/types": "^7.24.0",
         "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
@@ -734,7 +728,6 @@
       "version": "7.22.15",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz",
       "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.22.15"
       },
@@ -762,9 +755,9 @@
       }
     },
     "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-      "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.0.tgz",
+      "integrity": "sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
@@ -798,7 +791,6 @@
       "version": "7.23.4",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
       "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -807,7 +799,6 @@
       "version": "7.22.20",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
       "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -822,14 +813,14 @@
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.9.tgz",
-      "integrity": "sha512-87ICKgU5t5SzOT7sBMfCOZQ2rHjRU+Pcb9BoILMYz600W6DkVRLFBPwQ18gwUVvggqXivaUakpnxWQGbpywbBQ==",
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.0.tgz",
+      "integrity": "sha512-ulDZdc0Aj5uLc5nETsa7EPx2L7rM0YJM8r7ck7U73AXi7qOV44IHHRAYZHY6iU1rr3C5N4NtTmMRUJP6kwCWeA==",
       "dev": true,
       "dependencies": {
-        "@babel/template": "^7.23.9",
-        "@babel/traverse": "^7.23.9",
-        "@babel/types": "^7.23.9"
+        "@babel/template": "^7.24.0",
+        "@babel/traverse": "^7.24.0",
+        "@babel/types": "^7.24.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -839,7 +830,6 @@
       "version": "7.23.4",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz",
       "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.22.20",
         "chalk": "^2.4.2",
@@ -853,7 +843,6 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^1.9.0"
       },
@@ -865,7 +854,6 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -879,7 +867,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
       "dependencies": {
         "color-name": "1.1.3"
       }
@@ -887,14 +874,12 @@
     "node_modules/@babel/highlight/node_modules/color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-      "dev": true
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
     "node_modules/@babel/highlight/node_modules/escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "dev": true,
       "engines": {
         "node": ">=0.8.0"
       }
@@ -903,7 +888,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -912,7 +896,6 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
       "dependencies": {
         "has-flag": "^3.0.0"
       },
@@ -921,9 +904,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.9.tgz",
-      "integrity": "sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==",
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.0.tgz",
+      "integrity": "sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg==",
       "dev": true,
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -1095,9 +1078,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz",
-      "integrity": "sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==",
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.0.tgz",
+      "integrity": "sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -1106,23 +1089,23 @@
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.23.9.tgz",
-      "integrity": "sha512-+xrD2BWLpvHKNmX2QbpdpsBaWnRxahMwJjO+KZk2JOElj5nSmKezyS1B4u+QbHMTX69t4ukm6hh9lsYQ7GHCKA==",
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.0.tgz",
+      "integrity": "sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==",
       "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.23.5",
-        "@babel/parser": "^7.23.9",
-        "@babel/types": "^7.23.9"
+        "@babel/parser": "^7.24.0",
+        "@babel/types": "^7.24.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.9.tgz",
-      "integrity": "sha512-I/4UJ9vs90OkBtY6iiiTORVMyIhJ4kAVmsKo9KFc8UOxMeUfi2hvtIBsET5u9GizXE6/GFSuKCTNfgCswuEjRg==",
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.0.tgz",
+      "integrity": "sha512-HfuJlI8qq3dEDmNU5ChzzpZRWq+oxCZQyMzIMEqLho+AQnhMnKQUzH6ydo3RBl/YjPCuk68Y6s0Gx0AeyULiWw==",
       "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.23.5",
@@ -1131,8 +1114,8 @@
         "@babel/helper-function-name": "^7.23.0",
         "@babel/helper-hoist-variables": "^7.22.5",
         "@babel/helper-split-export-declaration": "^7.22.6",
-        "@babel/parser": "^7.23.9",
-        "@babel/types": "^7.23.9",
+        "@babel/parser": "^7.24.0",
+        "@babel/types": "^7.24.0",
         "debug": "^4.3.1",
         "globals": "^11.1.0"
       },
@@ -1150,10 +1133,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.9.tgz",
-      "integrity": "sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==",
-      "dev": true,
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz",
+      "integrity": "sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==",
       "dependencies": {
         "@babel/helper-string-parser": "^7.23.4",
         "@babel/helper-validator-identifier": "^7.22.20",
@@ -1218,10 +1200,138 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
+      "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/serialize": "^1.1.2",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+      "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/sheet": "^1.2.2",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "stylis": "4.2.0"
+      }
+    },
     "node_modules/@emotion/hash": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
-      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+    },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+      "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.11.3",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.3.tgz",
+      "integrity": "sha512-Cnn0kuq4DoONOMcnoVsTOR8E+AdnKFf//6kUWc4LCdnxj31pZWn7rIULd6Y7/Js1PiPHzn7SKCM9vB/jBni8eA==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/cache": "^11.11.0",
+        "@emotion/serialize": "^1.1.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.3.tgz",
+      "integrity": "sha512-iD4D6QVZFDhcbH0RAG1uVu1CwVLMWUkCvAqqlewO/rxf8+87yIBAlt4+AxMiiKPLs5hFc0owNk/sLLAOROw3cA==",
+      "dependencies": {
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/unitless": "^0.8.1",
+        "@emotion/utils": "^1.2.1",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
+      "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
+    },
+    "node_modules/@emotion/styled": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.0.tgz",
+      "integrity": "sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/is-prop-valid": "^1.2.1",
+        "@emotion/serialize": "^1.1.2",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
+      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz",
+      "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg=="
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
+      "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
     },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
@@ -1279,6 +1389,40 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
+      "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.1"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz",
+      "integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==",
+      "dependencies": {
+        "@floating-ui/core": "^1.0.0",
+        "@floating-ui/utils": "^0.2.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.8.tgz",
+      "integrity": "sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.6.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
+      "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -1730,32 +1874,32 @@
       }
     },
     "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
-      "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
+      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
       "dev": true,
       "dependencies": {
-        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/set-array": "^1.2.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
-        "@jridgewell/trace-mapping": "^0.3.9"
+        "@jridgewell/trace-mapping": "^0.3.24"
       },
       "engines": {
         "node": ">=6.0.0"
       }
     },
     "node_modules/@jridgewell/resolve-uri": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
-      "integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
       "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
     },
     "node_modules/@jridgewell/set-array": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
-      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
       "dev": true,
       "engines": {
         "node": ">=6.0.0"
@@ -1778,9 +1922,9 @@
       "dev": true
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.22",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.22.tgz",
-      "integrity": "sha512-Wf963MzWtA2sjrNt+g18IAln9lKnlRp+K2eH4jjIoF1wYeq3aMREpG09xhlhdzS0EjwU7qmUJYangWa+151vZw==",
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
       "dev": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -1811,36 +1955,44 @@
         "node": ">=8"
       }
     },
-    "node_modules/@material-ui/core": {
-      "version": "4.12.4",
-      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.4.tgz",
-      "integrity": "sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==",
-      "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.",
+    "node_modules/@microsoft/tsdoc": {
+      "version": "0.14.2",
+      "resolved": "https://registry.npmjs.org/@microsoft/tsdoc/-/tsdoc-0.14.2.tgz",
+      "integrity": "sha512-9b8mPpKrfeGRuhFH5iO1iwCLeIIsV6+H1sRfxbkoGXIyQE2BTsPd9zqSqQJ+pv5sJ/hT5M1zvOFL02MnEezFug=="
+    },
+    "node_modules/@mongodb-js/saslprep": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@mongodb-js/saslprep/-/saslprep-1.1.4.tgz",
+      "integrity": "sha512-8zJ8N1x51xo9hwPh6AWnKdLGEC5N3lDa6kms1YHmFBoRhTpJR6HG8wWk0td1MVCu9cD4YBrvjZEtd5Obw0Fbnw==",
+      "optional": true,
+      "dependencies": {
+        "sparse-bitfield": "^3.0.3"
+      }
+    },
+    "node_modules/@mui/base": {
+      "version": "5.0.0-beta.36",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.36.tgz",
+      "integrity": "sha512-6A8fYiXgjqTO6pgj31Hc8wm1M3rFYCxDRh09dBVk0L0W4cb2lnurRJa3cAyic6hHY+we1S58OdGYRbKmOsDpGQ==",
       "dependencies": {
-        "@babel/runtime": "^7.4.4",
-        "@material-ui/styles": "^4.11.5",
-        "@material-ui/system": "^4.12.2",
-        "@material-ui/types": "5.1.0",
-        "@material-ui/utils": "^4.11.3",
-        "@types/react-transition-group": "^4.2.0",
-        "clsx": "^1.0.4",
-        "hoist-non-react-statics": "^3.3.2",
-        "popper.js": "1.16.1-lts",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.8.0 || ^17.0.0",
-        "react-transition-group": "^4.4.0"
+        "@babel/runtime": "^7.23.9",
+        "@floating-ui/react-dom": "^2.0.8",
+        "@mui/types": "^7.2.13",
+        "@mui/utils": "^5.15.9",
+        "@popperjs/core": "^2.11.8",
+        "clsx": "^2.1.0",
+        "prop-types": "^15.8.1"
       },
       "engines": {
-        "node": ">=8.0.0"
+        "node": ">=12.0.0"
       },
       "funding": {
         "type": "opencollective",
-        "url": "https://opencollective.com/material-ui"
+        "url": "https://opencollective.com/mui-org"
       },
       "peerDependencies": {
-        "@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",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -1848,21 +2000,33 @@
         }
       }
     },
-    "node_modules/@material-ui/icons": {
-      "version": "4.11.3",
-      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.3.tgz",
-      "integrity": "sha512-IKHlyx6LDh8n19vzwH5RtHIOHl9Tu90aAAxcbWME6kp4dmvODM3UvOHJeMIDzUbd4muuJKHmlNoBN+mDY4XkBA==",
+    "node_modules/@mui/core-downloads-tracker": {
+      "version": "5.15.12",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.12.tgz",
+      "integrity": "sha512-brRO+tMFLpGyjEYHrX97bzqeF6jZmKpqqe1rY0LyIHAwP6xRVzh++zSecOQorDOCaZJg4XkGT9xfD+RWOWxZBA==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      }
+    },
+    "node_modules/@mui/icons-material": {
+      "version": "5.15.10",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.10.tgz",
+      "integrity": "sha512-9cF8oUHZKo9oQ7EQ3pxPELaZuZVmphskU4OI6NiJNDVN7zcuvrEsuWjYo1Zh4fLiC39Nrvm30h/B51rcUjvSGA==",
       "dependencies": {
-        "@babel/runtime": "^7.4.4"
+        "@babel/runtime": "^7.23.9"
       },
       "engines": {
-        "node": ">=8.0.0"
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
       },
       "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"
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -1870,68 +2034,69 @@
         }
       }
     },
-    "node_modules/@material-ui/styles": {
-      "version": "4.11.5",
-      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.5.tgz",
-      "integrity": "sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA==",
-      "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.",
-      "dependencies": {
-        "@babel/runtime": "^7.4.4",
-        "@emotion/hash": "^0.8.0",
-        "@material-ui/types": "5.1.0",
-        "@material-ui/utils": "^4.11.3",
-        "clsx": "^1.0.4",
-        "csstype": "^2.5.2",
-        "hoist-non-react-statics": "^3.3.2",
-        "jss": "^10.5.1",
-        "jss-plugin-camel-case": "^10.5.1",
-        "jss-plugin-default-unit": "^10.5.1",
-        "jss-plugin-global": "^10.5.1",
-        "jss-plugin-nested": "^10.5.1",
-        "jss-plugin-props-sort": "^10.5.1",
-        "jss-plugin-rule-value-function": "^10.5.1",
-        "jss-plugin-vendor-prefixer": "^10.5.1",
-        "prop-types": "^15.7.2"
+    "node_modules/@mui/material": {
+      "version": "5.15.10",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.10.tgz",
+      "integrity": "sha512-YJJGHjwDOucecjDEV5l9ISTCo+l9YeWrho623UajzoHRYxuKUmwrGVYOW4PKwGvCx9SU9oklZnbbi2Clc5XZHw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/base": "5.0.0-beta.36",
+        "@mui/core-downloads-tracker": "^5.15.10",
+        "@mui/system": "^5.15.9",
+        "@mui/types": "^7.2.13",
+        "@mui/utils": "^5.15.9",
+        "@types/react-transition-group": "^4.4.10",
+        "clsx": "^2.1.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0",
+        "react-transition-group": "^4.4.5"
       },
       "engines": {
-        "node": ">=8.0.0"
+        "node": ">=12.0.0"
       },
       "funding": {
         "type": "opencollective",
-        "url": "https://opencollective.com/material-ui"
+        "url": "https://opencollective.com/mui-org"
       },
       "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",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
       },
       "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
         "@types/react": {
           "optional": true
         }
       }
     },
-    "node_modules/@material-ui/system": {
-      "version": "4.12.2",
-      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.12.2.tgz",
-      "integrity": "sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==",
+    "node_modules/@mui/private-theming": {
+      "version": "5.15.12",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.12.tgz",
+      "integrity": "sha512-cqoSo9sgA5HE+8vZClbLrq9EkyOnYysooepi5eKaKvJ41lReT2c5wOZAeDDM1+xknrMDos+0mT2zr3sZmUiRRA==",
       "dependencies": {
-        "@babel/runtime": "^7.4.4",
-        "@material-ui/utils": "^4.11.3",
-        "csstype": "^2.5.2",
-        "prop-types": "^15.7.2"
+        "@babel/runtime": "^7.23.9",
+        "@mui/utils": "^5.15.12",
+        "prop-types": "^15.8.1"
       },
       "engines": {
-        "node": ">=8.0.0"
+        "node": ">=12.0.0"
       },
       "funding": {
         "type": "opencollective",
-        "url": "https://opencollective.com/material-ui"
+        "url": "https://opencollective.com/mui-org"
       },
       "peerDependencies": {
-        "@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",
+        "react": "^17.0.0 || ^18.0.0"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -1939,48 +2104,114 @@
         }
       }
     },
-    "node_modules/@material-ui/types": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
-      "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==",
+    "node_modules/@mui/styled-engine": {
+      "version": "5.15.11",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.11.tgz",
+      "integrity": "sha512-So21AhAngqo07ces4S/JpX5UaMU2RHXpEA6hNzI6IQjd/1usMPxpgK8wkGgTe3JKmC2KDmH8cvoycq5H3Ii7/w==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@emotion/cache": "^11.11.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
       "peerDependencies": {
-        "@types/react": "*"
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "react": "^17.0.0 || ^18.0.0"
       },
       "peerDependenciesMeta": {
-        "@types/react": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
           "optional": true
         }
       }
     },
-    "node_modules/@material-ui/utils": {
-      "version": "4.11.3",
-      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.3.tgz",
-      "integrity": "sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==",
+    "node_modules/@mui/system": {
+      "version": "5.15.12",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.12.tgz",
+      "integrity": "sha512-/pq+GO6yN3X7r3hAwFTrzkAh7K1bTF5r8IzS79B9eyKJg7v6B/t4/zZYMR6OT9qEPtwf6rYN2Utg1e6Z7F1OgQ==",
       "dependencies": {
-        "@babel/runtime": "^7.4.4",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.8.0 || ^17.0.0"
+        "@babel/runtime": "^7.23.9",
+        "@mui/private-theming": "^5.15.12",
+        "@mui/styled-engine": "^5.15.11",
+        "@mui/types": "^7.2.13",
+        "@mui/utils": "^5.15.12",
+        "clsx": "^2.1.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
       },
       "engines": {
-        "node": ">=8.0.0"
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
       },
       "peerDependencies": {
-        "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",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@microsoft/tsdoc": {
-      "version": "0.14.2",
-      "resolved": "https://registry.npmjs.org/@microsoft/tsdoc/-/tsdoc-0.14.2.tgz",
-      "integrity": "sha512-9b8mPpKrfeGRuhFH5iO1iwCLeIIsV6+H1sRfxbkoGXIyQE2BTsPd9zqSqQJ+pv5sJ/hT5M1zvOFL02MnEezFug=="
+    "node_modules/@mui/types": {
+      "version": "7.2.13",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.13.tgz",
+      "integrity": "sha512-qP9OgacN62s+l8rdDhSFRe05HWtLLJ5TGclC9I1+tQngbssu0m2dmFZs+Px53AcOs9fD7TbYd4gc9AXzVqO/+g==",
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
     },
-    "node_modules/@mongodb-js/saslprep": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/@mongodb-js/saslprep/-/saslprep-1.1.4.tgz",
-      "integrity": "sha512-8zJ8N1x51xo9hwPh6AWnKdLGEC5N3lDa6kms1YHmFBoRhTpJR6HG8wWk0td1MVCu9cD4YBrvjZEtd5Obw0Fbnw==",
-      "optional": true,
+    "node_modules/@mui/utils": {
+      "version": "5.15.12",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.12.tgz",
+      "integrity": "sha512-8SDGCnO2DY9Yy+5bGzu00NZowSDtuyHP4H8gunhHGQoIlhlY2Z3w64wBzAOLpYw/ZhJNzksDTnS/i8qdJvxuow==",
       "dependencies": {
-        "sparse-bitfield": "^3.0.3"
+        "@babel/runtime": "^7.23.9",
+        "@types/prop-types": "^15.7.11",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
     "node_modules/@nestjs/axios": {
@@ -2465,13 +2696,22 @@
       }
     },
     "node_modules/@opentelemetry/api": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.7.0.tgz",
-      "integrity": "sha512-AdY5wvN0P2vXBi3b29hxZgSFvdhdxPB9+f0B6s//P9Q8nibRWeA3cHm8UmLpio9ABigkVHJ5NMPk+Mz8VCCyrw==",
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.8.0.tgz",
+      "integrity": "sha512-I/s6F7yKUDdtMsoBWXJe8Qz40Tui5vsuKCWJEWVL+5q9sSWRzzx6v2KeNsOBEwd94j0eWkpWCH4yB6rZg9Mf0w==",
       "engines": {
         "node": ">=8.0.0"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@react-hook/debounce": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@react-hook/debounce/-/debounce-4.0.0.tgz",
@@ -2491,14 +2731,96 @@
         "react": ">=16.8"
       }
     },
+    "node_modules/@rushstack/node-core-library": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@rushstack/node-core-library/-/node-core-library-4.0.2.tgz",
+      "integrity": "sha512-hyES82QVpkfQMeBMteQUnrhASL/KHPhd7iJ8euduwNJG4mu2GSOKybf0rOEjOm1Wz7CwJEUm9y0yD7jg2C1bfg==",
+      "dependencies": {
+        "fs-extra": "~7.0.1",
+        "import-lazy": "~4.0.0",
+        "jju": "~1.4.0",
+        "resolve": "~1.22.1",
+        "semver": "~7.5.4",
+        "z-schema": "~5.0.2"
+      },
+      "peerDependencies": {
+        "@types/node": "*"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rushstack/node-core-library/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@rushstack/node-core-library/node_modules/semver": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@rushstack/node-core-library/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+    },
+    "node_modules/@rushstack/terminal": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@rushstack/terminal/-/terminal-0.10.0.tgz",
+      "integrity": "sha512-UbELbXnUdc7EKwfH2sb8ChqNgapUOdqcCIdQP4NGxBpTZV2sQyeekuK3zmfQSa/MN+/7b4kBogl2wq0vpkpYGw==",
+      "dependencies": {
+        "@rushstack/node-core-library": "4.0.2",
+        "supports-color": "~8.1.1"
+      },
+      "peerDependencies": {
+        "@types/node": "*"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rushstack/terminal/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
     "node_modules/@rushstack/ts-command-line": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/@rushstack/ts-command-line/-/ts-command-line-4.17.1.tgz",
-      "integrity": "sha512-2jweO1O57BYP5qdBGl6apJLB+aRIn5ccIRTPDyULh0KMwVzFqWtw6IZWt1qtUoZD/pD2RNkIOosH6Cq45rIYeg==",
+      "version": "4.19.1",
+      "resolved": "https://registry.npmjs.org/@rushstack/ts-command-line/-/ts-command-line-4.19.1.tgz",
+      "integrity": "sha512-J7H768dgcpG60d7skZ5uSSwyCZs/S2HrWP1Ds8d1qYAyaaeJmpmmLr9BVw97RjFzmQPOYnoXcKA4GkqDCkduQg==",
       "dependencies": {
+        "@rushstack/terminal": "0.10.0",
         "@types/argparse": "1.0.38",
         "argparse": "~1.0.9",
-        "colors": "~1.2.1",
         "string-argv": "~0.3.1"
       }
     },
@@ -2670,6 +2992,15 @@
         "source-map": "^0.6.0"
       }
     },
+    "node_modules/@types/clean-css/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/@types/connect": {
       "version": "3.4.38",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz",
@@ -2721,9 +3052,9 @@
       }
     },
     "node_modules/@types/eslint": {
-      "version": "8.56.2",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.2.tgz",
-      "integrity": "sha512-uQDwm1wFHmbBbCZCqAlq6Do9LYwByNZHWzXppSnay9SuwJ+VRbjkbLABer54kcPnMSlG6Fdiy2yaFXm/z9Z5gw==",
+      "version": "8.56.5",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.5.tgz",
+      "integrity": "sha512-u5/YPJHo1tvkSF2CE0USEkxon82Z5DBy2xR+qfyYNszpX9qcs4sT6uq2kBbj4BXY1+DBGDPnrhMZV3pKWGNukw==",
       "dev": true,
       "dependencies": {
         "@types/estree": "*",
@@ -2851,6 +3182,15 @@
         "source-map": "^0.6.0"
       }
     },
+    "node_modules/@types/html-webpack-plugin/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/@types/http-cache-semantics": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.4.tgz",
@@ -2995,6 +3335,11 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
+      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="
+    },
     "node_modules/@types/passport": {
       "version": "1.0.16",
       "resolved": "https://registry.npmjs.org/@types/passport/-/passport-1.0.16.tgz",
@@ -3036,9 +3381,9 @@
       "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng=="
     },
     "node_modules/@types/qs": {
-      "version": "6.9.11",
-      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.11.tgz",
-      "integrity": "sha512-oGk0gmhnEJK4Yyk+oI7EfXsLayXatCWPHary1MtcmbAifkobT9cM9yutG/hZKIseOU0MqbIwQ/u2nn/Gb+ltuQ==",
+      "version": "6.9.12",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.12.tgz",
+      "integrity": "sha512-bZcOkJ6uWrL0Qb2NAWKa7TBU+mJHPzhx9jjLL1KHF+XpzEcR7EXHvjbHlGtR/IsP1vyPrehuS6XqkmaePy//mg==",
       "dev": true
     },
     "node_modules/@types/range-parser": {
@@ -3048,9 +3393,9 @@
       "dev": true
     },
     "node_modules/@types/react": {
-      "version": "17.0.47",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.47.tgz",
-      "integrity": "sha512-mk0BL8zBinf2ozNr3qPnlu1oyVTYq+4V7WA76RgxUAtf0Em/Wbid38KN6n4abEkvO4xMTBWmnP1FtQzgkEiJoA==",
+      "version": "18.2.64",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.64.tgz",
+      "integrity": "sha512-MlmPvHgjj2p3vZaxbQgFUQFvD8QiZwACfGqEdDSWou5yISWxDQ4/74nCAwsUiX7UFLKZz3BbVSPj+YxeoGGCfg==",
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -3068,12 +3413,12 @@
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "17.0.17",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.17.tgz",
-      "integrity": "sha512-VjnqEmqGnasQKV0CWLevqMTXBYG9GbwuE6x3VetERLh0cq2LTptFE73MrQi2S7GkKXCf2GgwItB/melLnxfnsg==",
+      "version": "18.2.19",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.19.tgz",
+      "integrity": "sha512-aZvQL6uUbIJpjZk4U8JZGbau9KDeAwMfmhyWorxgBkqDIEf6ROjRozcmPIicqsUwPUjbkDfHKgGee1Lq65APcA==",
       "dev": true,
       "dependencies": {
-        "@types/react": "^17"
+        "@types/react": "*"
       }
     },
     "node_modules/@types/react-router": {
@@ -3105,11 +3450,6 @@
         "@types/react": "*"
       }
     },
-    "node_modules/@types/react/node_modules/csstype": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
-    },
     "node_modules/@types/relateurl": {
       "version": "0.2.33",
       "resolved": "https://registry.npmjs.org/@types/relateurl/-/relateurl-0.2.33.tgz",
@@ -3130,9 +3470,9 @@
       "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
     },
     "node_modules/@types/semver": {
-      "version": "7.5.7",
-      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.7.tgz",
-      "integrity": "sha512-/wdoPq1QqkSj9/QOeKkFquEuPzQbHTWAMPH/PaUMB+JuR31lXhlWXRZ52IpfDYVlDOUBvX09uBrPwxGT1hjNBg==",
+      "version": "7.5.8",
+      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz",
+      "integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==",
       "dev": true
     },
     "node_modules/@types/send": {
@@ -3177,9 +3517,9 @@
       }
     },
     "node_modules/@types/superagent": {
-      "version": "8.1.3",
-      "resolved": "https://registry.npmjs.org/@types/superagent/-/superagent-8.1.3.tgz",
-      "integrity": "sha512-R/CfN6w2XsixLb1Ii8INfn+BT9sGPvw74OavfkW4SwY+jeUcAwLZv2+bXLJkndnimxjEBm0RPHgcjW9pLCa8cw==",
+      "version": "8.1.4",
+      "resolved": "https://registry.npmjs.org/@types/superagent/-/superagent-8.1.4.tgz",
+      "integrity": "sha512-uzSBYwrpal8y2X2Pul5ZSWpzRiDha2FLcquaN95qUPnOjYgm/zQ5LIdqeJpQJTRWNTN+Rhm0aC8H06Ds2rqCYw==",
       "dev": true,
       "dependencies": {
         "@types/cookiejar": "^2.1.5",
@@ -3208,14 +3548,23 @@
       "integrity": "sha512-6WaYesThRMCl19iryMYP7/x2OVgCtbIVflDGFpWnb9irXI3UjYE4AzmYuiUKY1AJstGijoY+MgUszMgRxIYTYw=="
     },
     "node_modules/@types/uglify-js": {
-      "version": "3.17.4",
-      "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.17.4.tgz",
-      "integrity": "sha512-Hm/T0kV3ywpJyMGNbsItdivRhYNCQQf1IIsYsXnoVPES4t+FMLyDe0/K+Ea7ahWtMtSNb22ZdY7MIyoD9rqARg==",
+      "version": "3.17.5",
+      "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.17.5.tgz",
+      "integrity": "sha512-TU+fZFBTBcXj/GpDpDaBmgWk/gn96kMZ+uocaFUlV2f8a6WdMzzI44QBCmGcCiYR0Y6ZlNRiyUyKKt5nl/lbzQ==",
       "dev": true,
       "dependencies": {
         "source-map": "^0.6.1"
       }
     },
+    "node_modules/@types/uglify-js/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/@types/validator": {
       "version": "13.11.9",
       "resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.11.9.tgz",
@@ -4110,10 +4459,13 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "node_modules/available-typed-arrays": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.6.tgz",
-      "integrity": "sha512-j1QzY8iPNPG4o4xmO3ptzpRxTciqD3MgEHtifP/YnJpIo58Xu+ne4BejlbkuaLfXn/nz6HFiw29bLpj2PNMdGg==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
       "dev": true,
+      "dependencies": {
+        "possible-typed-array-names": "^1.0.0"
+      },
       "engines": {
         "node": ">= 0.4"
       },
@@ -4183,6 +4535,20 @@
         "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
       }
     },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
     "node_modules/babel-preset-current-node-syntax": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz",
@@ -4379,9 +4745,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.22.3",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.3.tgz",
-      "integrity": "sha512-UAp55yfwNv0klWNapjs/ktHoguxuQNGnOzxYmfnXIS+8AsRDZkSDxg7R1AX3GKzn078SBI5dzwzj/Yx0Or0e3A==",
+      "version": "4.23.0",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz",
+      "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==",
       "dev": true,
       "funding": [
         {
@@ -4398,8 +4764,8 @@
         }
       ],
       "dependencies": {
-        "caniuse-lite": "^1.0.30001580",
-        "electron-to-chromium": "^1.4.648",
+        "caniuse-lite": "^1.0.30001587",
+        "electron-to-chromium": "^1.4.668",
         "node-releases": "^2.0.14",
         "update-browserslist-db": "^1.0.13"
       },
@@ -4569,7 +4935,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -4596,9 +4961,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001587",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001587.tgz",
-      "integrity": "sha512-HMFNotUmLXn71BQxg8cijvqxnIAofforZOwGsxyXJ0qugTdspUF4sPSJ2vhgprHCB996tIDzEq1ubumPDV8ULA==",
+      "version": "1.0.30001594",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001594.tgz",
+      "integrity": "sha512-VblSX6nYqyJVs8DKFMldE2IVCJjZ225LW00ydtUWwh5hk9IfkTOffO6r8gJNsH0qqqeAF8KrbMYA2VEwTlGW5g==",
       "dev": true,
       "funding": [
         {
@@ -4746,6 +5111,15 @@
         "node": ">= 10.0"
       }
     },
+    "node_modules/clean-css/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/clean-webpack-plugin": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/clean-webpack-plugin/-/clean-webpack-plugin-4.0.0.tgz",
@@ -4812,9 +5186,9 @@
       }
     },
     "node_modules/clsx": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
-      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
+      "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
       "engines": {
         "node": ">=6"
       }
@@ -4888,14 +5262,6 @@
       "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
       "dev": true
     },
-    "node_modules/colors": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/colors/-/colors-1.2.5.tgz",
-      "integrity": "sha512-erNRLao/Y3Fv54qUa0LBB+//Uf3YwMUmdJinN20yMXm9zdKKqH9wt7R9IIVZ+K7ShzfpLV/Zg8+VyrBJYB4lpg==",
-      "engines": {
-        "node": ">=0.1.90"
-      }
-    },
     "node_modules/colorspace": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/colorspace/-/colorspace-1.1.4.tgz",
@@ -4994,8 +5360,7 @@
     "node_modules/convert-source-map": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
-      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
-      "dev": true
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
     },
     "node_modules/cookie": {
       "version": "0.4.1",
@@ -5045,6 +5410,21 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/create-require": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
@@ -5125,17 +5505,8 @@
         "domutils": "^2.8.0",
         "nth-check": "^2.0.1"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/fb55"
-      }
-    },
-    "node_modules/css-vendor": {
-      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
-      "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.8.3",
-        "is-in-browser": "^1.0.2"
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
       }
     },
     "node_modules/css-what": {
@@ -5163,9 +5534,9 @@
       }
     },
     "node_modules/csstype": {
-      "version": "2.6.21",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
-      "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/csurf": {
       "version": "1.11.0",
@@ -5538,11 +5909,6 @@
         "csstype": "^3.0.2"
       }
     },
-    "node_modules/dom-helpers/node_modules/csstype": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
-    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -5646,9 +6012,9 @@
       "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.668",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.668.tgz",
-      "integrity": "sha512-ZOBocMYCehr9W31+GpMclR+KBaDZOoAEabLdhpZ8oU1JFDwIaFY0UDbpXVEUFc0BIP2O2Qn3rkfCjQmMR4T/bQ==",
+      "version": "1.4.693",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.693.tgz",
+      "integrity": "sha512-/if4Ueg0GUQlhCrW2ZlXwDAm40ipuKo+OgeHInlL8sbjt+hzISxZK949fZeJaVsheamrzANXvw1zQTvbxTvSHw==",
       "dev": true
     },
     "node_modules/emittery": {
@@ -5690,9 +6056,9 @@
       }
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.15.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz",
-      "integrity": "sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==",
+      "version": "5.15.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.1.tgz",
+      "integrity": "sha512-3d3JRbwsCLJsYgvb6NuWEG44jjPSOMuS73L/6+7BZuoKm3W+qXnSoIYVHi8dG7Qcg4inAY4jbzkZ7MnskePeDg==",
       "dev": true,
       "dependencies": {
         "graceful-fs": "^4.2.4",
@@ -5727,24 +6093,23 @@
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
       "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "dev": true,
       "dependencies": {
         "is-arrayish": "^0.2.1"
       }
     },
     "node_modules/es-abstract": {
-      "version": "1.22.4",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.4.tgz",
-      "integrity": "sha512-vZYJlk2u6qHYxBOTjAeg7qUxHdNfih64Uu2J8QqWgXZ2cri0ZpJAkzDUK/q593+mvKwlxyaxr6F1Q+3LKoQRgg==",
+      "version": "1.22.5",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.5.tgz",
+      "integrity": "sha512-oW69R+4q2wG+Hc3KZePPZxOiisRIqfKBVo/HLx94QcJeWGU/8sZhCvc829rd1kS366vlJbzBfXf9yWwf0+Ko7w==",
       "dev": true,
       "dependencies": {
         "array-buffer-byte-length": "^1.0.1",
         "arraybuffer.prototype.slice": "^1.0.3",
-        "available-typed-arrays": "^1.0.6",
+        "available-typed-arrays": "^1.0.7",
         "call-bind": "^1.0.7",
         "es-define-property": "^1.0.0",
         "es-errors": "^1.3.0",
-        "es-set-tostringtag": "^2.0.2",
+        "es-set-tostringtag": "^2.0.3",
         "es-to-primitive": "^1.2.1",
         "function.prototype.name": "^1.1.6",
         "get-intrinsic": "^1.2.4",
@@ -5752,15 +6117,15 @@
         "globalthis": "^1.0.3",
         "gopd": "^1.0.1",
         "has-property-descriptors": "^1.0.2",
-        "has-proto": "^1.0.1",
+        "has-proto": "^1.0.3",
         "has-symbols": "^1.0.3",
         "hasown": "^2.0.1",
         "internal-slot": "^1.0.7",
         "is-array-buffer": "^3.0.4",
         "is-callable": "^1.2.7",
-        "is-negative-zero": "^2.0.2",
+        "is-negative-zero": "^2.0.3",
         "is-regex": "^1.1.4",
-        "is-shared-array-buffer": "^1.0.2",
+        "is-shared-array-buffer": "^1.0.3",
         "is-string": "^1.0.7",
         "is-typed-array": "^1.1.13",
         "is-weakref": "^1.0.2",
@@ -5773,10 +6138,10 @@
         "string.prototype.trim": "^1.2.8",
         "string.prototype.trimend": "^1.0.7",
         "string.prototype.trimstart": "^1.0.7",
-        "typed-array-buffer": "^1.0.1",
-        "typed-array-byte-length": "^1.0.0",
-        "typed-array-byte-offset": "^1.0.0",
-        "typed-array-length": "^1.0.4",
+        "typed-array-buffer": "^1.0.2",
+        "typed-array-byte-length": "^1.0.1",
+        "typed-array-byte-offset": "^1.0.2",
+        "typed-array-length": "^1.0.5",
         "unbox-primitive": "^1.0.2",
         "which-typed-array": "^1.1.14"
       },
@@ -5846,14 +6211,14 @@
       "dev": true
     },
     "node_modules/es-set-tostringtag": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.2.tgz",
-      "integrity": "sha512-BuDyupZt65P9D2D2vA/zqcI3G5xRsklm5N3xCwuiy+/vKy8i0ifdsQP1sLgO4tZDSCaQUSnmC48khknGMV3D2Q==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz",
+      "integrity": "sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==",
       "dev": true,
       "dependencies": {
-        "get-intrinsic": "^1.2.2",
-        "has-tostringtag": "^1.0.0",
-        "hasown": "^2.0.0"
+        "get-intrinsic": "^1.2.4",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.1"
       },
       "engines": {
         "node": ">= 0.4"
@@ -5903,7 +6268,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -6049,9 +6413,9 @@
       }
     },
     "node_modules/eslint-module-utils": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.8.0.tgz",
-      "integrity": "sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==",
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.8.1.tgz",
+      "integrity": "sha512-rXDXR3h7cs7dy9RNpUlQf80nX31XWJEyGq1tRMo+6GsO5VmTe4UTwtmonAD4ZkAsrfMVDA2wlGJ3790Ys+D49Q==",
       "dev": true,
       "peer": true,
       "dependencies": {
@@ -6778,6 +7142,11 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -6833,9 +7202,9 @@
       }
     },
     "node_modules/flatted": {
-      "version": "3.2.9",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.9.tgz",
-      "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
+      "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
       "dev": true
     },
     "node_modules/fn.name": {
@@ -6944,6 +7313,19 @@
       "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
       "optional": true
     },
+    "node_modules/fs-extra": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
+      "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
+      "dependencies": {
+        "graceful-fs": "^4.1.2",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=6 <7 || >=8"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -7189,6 +7571,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/goober": {
+      "version": "2.1.14",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.14.tgz",
+      "integrity": "sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==",
+      "peerDependencies": {
+        "csstype": "^3.0.10"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -7227,8 +7617,7 @@
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
     },
     "node_modules/graphemer": {
       "version": "1.4.0",
@@ -7265,9 +7654,9 @@
       }
     },
     "node_modules/has-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
-      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
+      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
       "engines": {
         "node": ">= 0.4"
       },
@@ -7508,11 +7897,6 @@
         "node": ">=10.17.0"
       }
     },
-    "node_modules/hyphenate-style-name": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
-      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
-    },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -7574,7 +7958,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
       "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-      "dev": true,
       "dependencies": {
         "parent-module": "^1.0.0",
         "resolve-from": "^4.0.0"
@@ -7586,6 +7969,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/import-lazy": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-4.0.0.tgz",
+      "integrity": "sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/import-local": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.1.0.tgz",
@@ -7704,8 +8095,7 @@
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
-      "dev": true
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
     },
     "node_modules/is-async-function": {
       "version": "2.0.0",
@@ -7794,7 +8184,6 @@
       "version": "2.13.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
       "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
-      "dev": true,
       "dependencies": {
         "hasown": "^2.0.0"
       },
@@ -7896,11 +8285,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-in-browser": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
-      "integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g=="
-    },
     "node_modules/is-map": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz",
@@ -7911,9 +8295,9 @@
       }
     },
     "node_modules/is-negative-zero": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
-      "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
+      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
       "dev": true,
       "engines": {
         "node": ">= 0.4"
@@ -8031,12 +8415,15 @@
       }
     },
     "node_modules/is-shared-array-buffer": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
-      "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2"
+        "call-bind": "^1.0.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -8225,10 +8612,19 @@
         "node": ">=10"
       }
     },
+    "node_modules/istanbul-lib-source-maps/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/istanbul-reports": {
-      "version": "3.1.6",
-      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.6.tgz",
-      "integrity": "sha512-TLgnMkKg3iTDsQ9PbPTdpfAK2DzjF9mqUG7RMgcQl8oFjad8ob4laGxv5XV5U9MAfx8D6tSJiUyuAwzLicaxlg==",
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.7.tgz",
+      "integrity": "sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==",
       "dev": true,
       "dependencies": {
         "html-escaper": "^2.0.0",
@@ -8802,6 +9198,11 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/jju": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/jju/-/jju-1.4.0.tgz",
+      "integrity": "sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA=="
+    },
     "node_modules/js-cookie": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
@@ -8856,8 +9257,7 @@
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "dev": true
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
     },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
@@ -8883,6 +9283,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
     "node_modules/jsonwebtoken": {
       "version": "9.0.2",
       "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.2.tgz",
@@ -8904,93 +9312,6 @@
         "npm": ">=6"
       }
     },
-    "node_modules/jss": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss/-/jss-10.10.0.tgz",
-      "integrity": "sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "csstype": "^3.0.2",
-        "is-in-browser": "^1.1.3",
-        "tiny-warning": "^1.0.2"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/jss"
-      }
-    },
-    "node_modules/jss-plugin-camel-case": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.10.0.tgz",
-      "integrity": "sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "hyphenate-style-name": "^1.0.3",
-        "jss": "10.10.0"
-      }
-    },
-    "node_modules/jss-plugin-default-unit": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.10.0.tgz",
-      "integrity": "sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0"
-      }
-    },
-    "node_modules/jss-plugin-global": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.10.0.tgz",
-      "integrity": "sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0"
-      }
-    },
-    "node_modules/jss-plugin-nested": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.10.0.tgz",
-      "integrity": "sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0",
-        "tiny-warning": "^1.0.2"
-      }
-    },
-    "node_modules/jss-plugin-props-sort": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.10.0.tgz",
-      "integrity": "sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0"
-      }
-    },
-    "node_modules/jss-plugin-rule-value-function": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.10.0.tgz",
-      "integrity": "sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0",
-        "tiny-warning": "^1.0.2"
-      }
-    },
-    "node_modules/jss-plugin-vendor-prefixer": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.10.0.tgz",
-      "integrity": "sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "css-vendor": "^2.0.8",
-        "jss": "10.10.0"
-      }
-    },
-    "node_modules/jss/node_modules/csstype": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
-    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -9103,15 +9424,14 @@
       }
     },
     "node_modules/libphonenumber-js": {
-      "version": "1.10.55",
-      "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.10.55.tgz",
-      "integrity": "sha512-MrTg2JFLscgmTY6/oT9vopYETlgUls/FU6OaeeamGwk4LFxjIgOUML/ZSZICgR0LPYXaonVJo40lzMvaaTJlQA=="
+      "version": "1.10.57",
+      "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.10.57.tgz",
+      "integrity": "sha512-OjsEd9y4LgcX+Ig09SbxWqcGESxliDDFNVepFhB9KEsQZTrnk3UdEU+cO0sW1APvLprHstQpS23OQpZ3bwxy6Q=="
     },
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
     "node_modules/loader-runner": {
       "version": "4.3.0",
@@ -9147,6 +9467,11 @@
       "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
       "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
     },
+    "node_modules/lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ=="
+    },
     "node_modules/lodash.includes": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
@@ -9157,6 +9482,11 @@
       "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
       "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg=="
     },
+    "node_modules/lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
+    },
     "node_modules/lodash.isinteger": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
@@ -9518,20 +9848,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/mini-create-react-context": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
-      "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
-      "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
-      "dependencies": {
-        "@babel/runtime": "^7.12.1",
-        "tiny-warning": "^1.0.3"
-      },
-      "peerDependencies": {
-        "prop-types": "^15.0.0",
-        "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
-      }
-    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -9637,9 +9953,9 @@
       }
     },
     "node_modules/mongoose": {
-      "version": "7.6.8",
-      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-7.6.8.tgz",
-      "integrity": "sha512-q9zAySH+UtOK5yonWyNcLfq3PxrY6s4gdta4qNGKNOE2yTVoY9FP4hQtvWYnv4rkdk7T8QmQMC7bbhJjDxIunw==",
+      "version": "7.6.9",
+      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-7.6.9.tgz",
+      "integrity": "sha512-3lR1fA/gS1E9Bn0woFqIysnnjCFDYtVo3yY+rGsVg1Q7kHX+gUTgAHTEKXrkwKxk2gHFdUfAsLt/Zjrdf6+nZA==",
       "dependencies": {
         "bson": "^5.5.0",
         "kareem": "2.5.1",
@@ -9880,9 +10196,9 @@
       }
     },
     "node_modules/node-abi": {
-      "version": "3.54.0",
-      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.54.0.tgz",
-      "integrity": "sha512-p7eGEiQil0YUV3ItH4/tBb781L5impVmmx2E9FRKF7d18XXzp4PGT2tdYMFY6wQqgxD0IwNZOiSJ0/K0fSi/OA==",
+      "version": "3.56.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.56.0.tgz",
+      "integrity": "sha512-fZjdhDOeRcaS+rcpve7XuwHBmktS1nS1gzgghwKUQQ8nTy2FdSDr6ZT8k6YhvlJeHmmQMYiT/IH9hfco5zeW2Q==",
       "optional": true,
       "dependencies": {
         "semver": "^7.3.5"
@@ -10074,21 +10390,32 @@
       }
     },
     "node_modules/notistack": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/notistack/-/notistack-1.0.10.tgz",
-      "integrity": "sha512-z0y4jJaVtOoH3kc3GtNUlhNTY+5LE04QDeLVujX3VPhhzg67zw055mZjrBF+nzpv3V9aiPNph1EgRU4+t8kQTQ==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/notistack/-/notistack-3.0.1.tgz",
+      "integrity": "sha512-ntVZXXgSQH5WYfyU+3HfcXuKaapzAJ8fBLQ/G618rn3yvSzEbnOB8ZSOwhX+dAORy/lw+GC2N061JA0+gYWTVA==",
       "dependencies": {
         "clsx": "^1.1.0",
-        "hoist-non-react-statics": "^3.3.0"
+        "goober": "^2.0.33"
+      },
+      "engines": {
+        "node": ">=12.0.0",
+        "npm": ">=6.0.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/notistack"
       },
       "peerDependencies": {
-        "@material-ui/core": "^4.0.0",
-        "react": "^16.8.0 || ^17.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0"
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/notistack/node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "engines": {
+        "node": ">=6"
       }
     },
     "node_modules/npm-run-path": {
@@ -10394,7 +10721,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
       "dependencies": {
         "callsites": "^3.0.0"
       },
@@ -10406,7 +10732,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
       "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.0.0",
         "error-ex": "^1.3.1",
@@ -10515,8 +10840,7 @@
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "node_modules/path-to-regexp": {
       "version": "3.2.0",
@@ -10527,7 +10851,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -10768,10 +11091,14 @@
         "node": ">=12.0.0"
       }
     },
-    "node_modules/popper.js": {
-      "version": "1.16.1-lts",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
-      "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA=="
+    "node_modules/possible-typed-array-names": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
+      "integrity": "sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
     },
     "node_modules/postcss": {
       "version": "8.4.35",
@@ -10915,9 +11242,9 @@
       }
     },
     "node_modules/prebuild-install": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.1.tgz",
-      "integrity": "sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw==",
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.2.tgz",
+      "integrity": "sha512-UnNke3IQb6sgarcZIDU3gbMeTp/9SSU1DAIkil7PrqG1vZlBtY5msYccSKSHDqa3hNg436IXK+SNImReuA1wEQ==",
       "optional": true,
       "dependencies": {
         "detect-libc": "^2.0.0",
@@ -10986,12 +11313,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/pretty-format/node_modules/react-is": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
-      "dev": true
-    },
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -11201,34 +11522,32 @@
       }
     },
     "node_modules/react": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
-      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
       "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
       },
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/react-dom": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
-      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "scheduler": "^0.20.2"
+        "scheduler": "^0.23.0"
       },
       "peerDependencies": {
-        "react": "17.0.2"
+        "react": "^18.2.0"
       }
     },
     "node_modules/react-is": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
     "node_modules/react-router": {
       "version": "5.3.3",
@@ -11272,6 +11591,20 @@
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
       "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
     },
+    "node_modules/react-router/node_modules/mini-create-react-context": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
+      "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
+      "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
+      "dependencies": {
+        "@babel/runtime": "^7.12.1",
+        "tiny-warning": "^1.0.3"
+      },
+      "peerDependencies": {
+        "prop-types": "^15.0.0",
+        "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+      }
+    },
     "node_modules/react-router/node_modules/path-to-regexp": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
@@ -11428,7 +11761,6 @@
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
       "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-      "dev": true,
       "dependencies": {
         "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
@@ -11471,7 +11803,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -11653,12 +11984,11 @@
       "integrity": "sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA=="
     },
     "node_modules/scheduler": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
-      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
       "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
       }
     },
     "node_modules/schema-utils": {
@@ -11913,14 +12243,15 @@
       }
     },
     "node_modules/set-function-name": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.1.tgz",
-      "integrity": "sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
       "dev": true,
       "dependencies": {
-        "define-data-property": "^1.0.1",
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
         "functions-have-names": "^1.2.3",
-        "has-property-descriptors": "^1.0.0"
+        "has-property-descriptors": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -11965,11 +12296,11 @@
       }
     },
     "node_modules/side-channel": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.5.tgz",
-      "integrity": "sha512-QcgiIWV4WV7qWExbN5llt6frQB/lBven9pqliLXfGPB+K9ZYXxDozp0wLkHS24kWCm+6YXH/f0HhnObZnZOBnQ==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
+      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
       "dependencies": {
-        "call-bind": "^1.0.6",
+        "call-bind": "^1.0.7",
         "es-errors": "^1.3.0",
         "get-intrinsic": "^1.2.4",
         "object-inspect": "^1.13.1"
@@ -12087,9 +12418,9 @@
       }
     },
     "node_modules/socks": {
-      "version": "2.7.3",
-      "resolved": "https://registry.npmjs.org/socks/-/socks-2.7.3.tgz",
-      "integrity": "sha512-vfuYK48HXCTFD03G/1/zkIls3Ebr2YNa4qU9gHDZdblHLiqhJrJGkY3+0Nx0JpN9qBhJbVObc1CNciT1bIZJxw==",
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.1.tgz",
+      "integrity": "sha512-B6w7tkwNid7ToxjZ08rQMT8M9BJAf8DKx8Ft4NivzH0zBUfd6jldGcisJn/RLgxcX3FPNDdNQCUEMMT79b+oCQ==",
       "dependencies": {
         "ip-address": "^9.0.5",
         "smart-buffer": "^4.2.0"
@@ -12100,10 +12431,9 @@
       }
     },
     "node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -12127,6 +12457,15 @@
         "source-map": "^0.6.0"
       }
     },
+    "node_modules/source-map-support/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/sparse-bitfield": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/sparse-bitfield/-/sparse-bitfield-3.0.3.tgz",
@@ -12396,6 +12735,11 @@
         "webpack": "^5.0.0"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+    },
     "node_modules/superagent": {
       "version": "8.1.2",
       "resolved": "https://registry.npmjs.org/superagent/-/superagent-8.1.2.tgz",
@@ -12470,7 +12814,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -12642,9 +12985,9 @@
       }
     },
     "node_modules/terser": {
-      "version": "5.27.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.27.0.tgz",
-      "integrity": "sha512-bi1HRwVRskAjheeYl291n3JC4GgO/Ty4z1nVs5AAsmonJulGxpSektecnNedrwK9C7vpvVtcX3cw00VSLt7U2A==",
+      "version": "5.28.1",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.28.1.tgz",
+      "integrity": "sha512-wM+bZp54v/E9eRRGXb5ZFDvinrJIOaTapx3WUokyVGZu5ucVCK55zEgGd5Dl2fSr3jUo5sDiERErUWLY6QPFyA==",
       "dev": true,
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
@@ -12728,6 +13071,15 @@
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
       "dev": true
     },
+    "node_modules/terser/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/terser/node_modules/source-map-support": {
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
@@ -12764,9 +13116,9 @@
       "dev": true
     },
     "node_modules/tiny-invariant": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
-      "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw=="
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="
     },
     "node_modules/tiny-warning": {
       "version": "1.0.3",
@@ -12783,7 +13135,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
       "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -13081,12 +13432,12 @@
       }
     },
     "node_modules/typed-array-buffer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.1.tgz",
-      "integrity": "sha512-RSqu1UEuSlrBhHTWC8O9FnPjOduNs4M7rJ4pRKoEjtx1zUNOPN2sSXHLDX+Y2WPbHIxbvg4JFo2DNAEfPIKWoQ==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz",
+      "integrity": "sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.6",
+        "call-bind": "^1.0.7",
         "es-errors": "^1.3.0",
         "is-typed-array": "^1.1.13"
       },
@@ -13095,15 +13446,16 @@
       }
     },
     "node_modules/typed-array-byte-length": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.0.tgz",
-      "integrity": "sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz",
+      "integrity": "sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
+        "call-bind": "^1.0.7",
         "for-each": "^0.3.3",
-        "has-proto": "^1.0.1",
-        "is-typed-array": "^1.1.10"
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13"
       },
       "engines": {
         "node": ">= 0.4"
@@ -13113,16 +13465,17 @@
       }
     },
     "node_modules/typed-array-byte-offset": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.0.tgz",
-      "integrity": "sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.2.tgz",
+      "integrity": "sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==",
       "dev": true,
       "dependencies": {
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
         "for-each": "^0.3.3",
-        "has-proto": "^1.0.1",
-        "is-typed-array": "^1.1.10"
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13"
       },
       "engines": {
         "node": ">= 0.4"
@@ -13132,14 +13485,20 @@
       }
     },
     "node_modules/typed-array-length": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.4.tgz",
-      "integrity": "sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.5.tgz",
+      "integrity": "sha512-yMi0PlwuznKHxKmcpoOdeLwxBoVPkqZxd7q2FgMkmD3bNwvF5VW0+UlUQ1k1vmktTu4Yu13Q0RIxEP8+B+wloA==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
+        "call-bind": "^1.0.7",
         "for-each": "^0.3.3",
-        "is-typed-array": "^1.1.9"
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13",
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -13249,9 +13608,9 @@
       }
     },
     "node_modules/umzug/node_modules/type-fest": {
-      "version": "4.10.2",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.10.2.tgz",
-      "integrity": "sha512-anpAG63wSpdEbLwOqH8L84urkL6PiVIov3EMmgIhhThevh9aiMQov+6Btx0wldNcvm4wV+e2/Rt1QdDwKHFbHw==",
+      "version": "4.11.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.11.1.tgz",
+      "integrity": "sha512-MFMf6VkEVZAETidGGSYW2B1MjXbGX+sWIywn2QPEaJ3j08V+MwVRHMXtf2noB8ENJaD0LIun9wh5Z6OPNf1QzQ==",
       "engines": {
         "node": ">=16"
       },
@@ -13290,6 +13649,14 @@
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
     },
+    "node_modules/universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
     "node_modules/unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
@@ -13908,6 +14275,14 @@
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
       "dev": true
     },
+    "node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/yargs": {
       "version": "17.7.2",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
@@ -13971,6 +14346,34 @@
       "engines": {
         "node": ">=10"
       }
+    },
+    "node_modules/z-schema": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/z-schema/-/z-schema-5.0.5.tgz",
+      "integrity": "sha512-D7eujBWkLa3p2sIpJA0d1pr7es+a7m0vFAnZLlCEKq/Ij2k0MLi9Br2UPxoxdYystm5K1yeBGzub0FlYUEWj2Q==",
+      "dependencies": {
+        "lodash.get": "^4.4.2",
+        "lodash.isequal": "^4.5.0",
+        "validator": "^13.7.0"
+      },
+      "bin": {
+        "z-schema": "bin/z-schema"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "commander": "^9.4.1"
+      }
+    },
+    "node_modules/z-schema/node_modules/commander": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
+      "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
+      "optional": true,
+      "engines": {
+        "node": "^12.20.0 || >=14"
+      }
     }
   }
 }
diff --git a/ccm_web/package.json b/ccm_web/package.json
index f7ed4c16a..1d1873d62 100644
--- a/ccm_web/package.json
+++ b/ccm_web/package.json
@@ -19,9 +19,11 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@emotion/react": "11.11.3",
+    "@emotion/styled": "11.11.0",
     "@kth/canvas-api": "4.2.5",
-    "@material-ui/core": "4.12.4",
-    "@material-ui/icons": "4.11.3",
+    "@mui/icons-material": "5.15.10",
+    "@mui/material": "5.15.10",
     "@nestjs/axios": "3.0.2",
     "@nestjs/common": "10.3.3",
     "@nestjs/config": "3.2.0",
@@ -51,13 +53,13 @@
     "ltijs-sequelize": "2.4.4",
     "morgan": "1.10.0",
     "mysql2": "3.9.2",
-    "notistack": "1.0.10",
+    "notistack": "3.0.1",
     "p-limit": "3.1.0",
     "papaparse": "5.3.2",
     "passport": "0.7.0",
     "passport-jwt": "4.0.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-router-dom": "5.3.3",
     "rxjs": "7.8.1",
     "sequelize": "6.37.1",
@@ -83,8 +85,8 @@
     "@types/papaparse": "5.3.2",
     "@types/passport": "1.0.16",
     "@types/passport-jwt": "4.0.1",
-    "@types/react": "17.0.47",
-    "@types/react-dom": "17.0.17",
+    "@types/react": "18.2.64",
+    "@types/react-dom": "18.2.19",
     "@types/react-router-dom": "5.3.3",
     "@types/supertest": "2.0.12",
     "@types/webpack": "5.28.5",