diff --git a/frontend/package.json b/frontend/package.json
index 2b9c446..46c2733 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -4,18 +4,21 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@babel/runtime": "^7.24.0",
-    "@material-ui/core": "^4.12.4",
-    "@material-ui/icons": "^4.11.3",
-    "axios": "^0.18.0",
-    "history": "^4.7.2",
-    "prop-types": "^15.6.2",
-    "react": "^16.8.1",
-    "react-dom": "^16.8.1",
+    "@babel/runtime": "^8.0.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^9.2.0",
+    "@mui/material": "^9.2.0",
+    "@mui/styles": "^6.4.8",
+    "axios": "^1.19.0",
+    "history": "^5.3.0",
+    "prop-types": "^15.8.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "react-drag-list": "^1.1.0",
     "react-markdown": "^8.0.7",
     "react-redux": "^5.1.1",
-    "react-router-dom": "^4.3.1",
+    "react-router-dom": "^7.18.2",
     "react-select": "^2.4.1",
     "recharts": "^2.12.3",
     "redux": "^4.0.1",
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index d74ef5b..ce6742c 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 import { connect } from 'react-redux'
-import { Router, Route, Switch, Link } from 'react-router-dom'
-import { createBrowserHistory } from 'history'
+import { BrowserRouter, Route, Routes, Link } from 'react-router-dom'
+
 import './App.css'
 
 // Components
@@ -54,8 +54,6 @@ import { AdminRoute, LoginRoute, InstructorRoute } from './utils/protectedRoutes
 
 import loginService from './services/login'
 
-const history = createBrowserHistory({ basename: import.meta.env.BASE_URL })
-
 const NotFound = () => (
   <div className="not-found-page">
     <h1>Page not found</h1>
@@ -142,156 +140,171 @@ const App = (props) => {
     updateIsLoading(false)
   }
 
-  const renderWithLoadingCheck = (component) =>
-    isLoading ? () => <LoadingSpinner /> : () => component
+  const renderWithLoadingCheck = (component) => (isLoading ? <LoadingSpinner /> : component)
 
   return (
-    <Router history={history}>
+    <BrowserRouter basename={import.meta.env.BASE_URL}>
       <div id="app-wrapper">
         <NavigationBar logout={logout} />
         <Notification />
         <div id="app-content">
-          <Switch>
-            <Route path="/login" render={renderWithLoadingCheck(null)} />
-            <LoginRoute exact path="/" render={renderWithLoadingCheck(<LandingPage />)} />
-            <AdminRoute exact path="/topics" render={renderWithLoadingCheck(<TopicListPage />)} />
-            <Route exact path="/topics/create" render={renderWithLoadingCheck(<TopicFormPage />)} />
+          <Routes>
+            <Route path="/login" element={renderWithLoadingCheck(null)} />
+            <Route
+              path="/"
+              element={<LoginRoute render={() => renderWithLoadingCheck(<LandingPage />)} />}
+            />
+            <Route
+              path="/topics"
+              element={<AdminRoute render={() => renderWithLoadingCheck(<TopicListPage />)} />}
+            />
+            <Route path="/topics/create" element={renderWithLoadingCheck(<TopicFormPage />)} />
             <Route
-              exact
               path="/topics/:id"
-              render={renderWithLoadingCheck(<ViewTopicPage {...props} />)}
+              element={renderWithLoadingCheck(<ViewTopicPage {...props} />)}
             />
-            <AdminRoute
-              exact
+            <Route
               path="/administration/configuration"
-              render={renderWithLoadingCheck(<ConfigurationPage />)}
+              element={<AdminRoute render={() => renderWithLoadingCheck(<ConfigurationPage />)} />}
             />
-            <AdminRoute
-              exact
+            <Route
               path="/administration/participants"
-              render={renderWithLoadingCheck(<ParticipantsPage />)}
+              element={<AdminRoute render={() => renderWithLoadingCheck(<ParticipantsPage />)} />}
             />
-            <AdminRoute
-              exact
+            <Route
               path="/administration/users"
-              render={renderWithLoadingCheck(<ViewUsersPage />)}
+              element={<AdminRoute render={() => renderWithLoadingCheck(<ViewUsersPage />)} />}
             />
-            <AdminRoute
-              exact
+            <Route
               path="/administration/customer-review-questions"
-              render={renderWithLoadingCheck(<CustomerReviewQuestionsPage />)}
+              element={
+                <AdminRoute
+                  render={() => renderWithLoadingCheck(<CustomerReviewQuestionsPage />)}
+                />
+              }
             />
-            <AdminRoute
-              exact
+            <Route
               path="/administration/peer-review-questions"
-              render={renderWithLoadingCheck(<PeerReviewQuestionsPage />)}
+              element={
+                <AdminRoute render={() => renderWithLoadingCheck(<PeerReviewQuestionsPage />)} />
+              }
             />
-            <AdminRoute
-              exact
+            <Route
               path="/administration/registration-questions"
-              render={renderWithLoadingCheck(<RegistrationQuestionsPage />)}
+              element={
+                <AdminRoute render={() => renderWithLoadingCheck(<RegistrationQuestionsPage />)} />
+              }
             />
-            <AdminRoute
-              exact
+            <Route
               path="/administration/groups"
-              render={renderWithLoadingCheck(<GroupManagementPage />)}
+              element={
+                <AdminRoute render={() => renderWithLoadingCheck(<GroupManagementPage />)} />
+              }
             />
-            <AdminRoute
-              exact
+            <Route
               path="/administration/email-templates"
-              render={renderWithLoadingCheck(<EmailTemplatesPage />)}
+              element={<AdminRoute render={() => renderWithLoadingCheck(<EmailTemplatesPage />)} />}
             />
-            <AdminRoute
-              exact
+            <Route
               path="/administration/registrations"
-              render={renderWithLoadingCheck(<Registrations />)}
+              element={<AdminRoute render={() => renderWithLoadingCheck(<Registrations />)} />}
             />
-            <AdminRoute
-              exact
+            <Route
               path="/administration/reviews"
-              render={renderWithLoadingCheck(<InstructorReviews />)}
+              element={<AdminRoute render={() => renderWithLoadingCheck(<InstructorReviews />)} />}
             />
-            <AdminRoute
-              exact
+            <Route
               path="/administration/tags"
-              render={renderWithLoadingCheck(<TagsDashboard />)}
+              element={<AdminRoute render={() => renderWithLoadingCheck(<TagsDashboard />)} />}
             />
-            <AdminRoute
-              exact
+            <Route
               path="/administration/sprints"
-              render={renderWithLoadingCheck(<AdminSprintsPage />)}
+              element={<AdminRoute render={() => renderWithLoadingCheck(<AdminSprintsPage />)} />}
             />
             <Route
-              exact
               path="/customer-review/:id"
-              render={renderWithLoadingCheck(<CustomerReviewPage {...props} />)}
+              element={renderWithLoadingCheck(<CustomerReviewPage {...props} />)}
             />
-            <LoginRoute
-              exact
+            <Route
               path="/register"
-              user={user}
-              render={renderWithLoadingCheck(<RegistrationPage />)}
+              element={
+                <LoginRoute
+                  user={user}
+                  render={() => renderWithLoadingCheck(<RegistrationPage />)}
+                />
+              }
             />
-            <LoginRoute
-              exact
+            <Route
               path="/peerreview"
-              user={user}
-              render={renderWithLoadingCheck(<PeerReviewPage />)}
+              element={
+                <LoginRoute user={user} render={() => renderWithLoadingCheck(<PeerReviewPage />)} />
+              }
             />
-            <AdminRoute
-              exact
+            <Route
               path="/administration/registrationmanagement"
-              render={renderWithLoadingCheck(<RegistrationManagementPage />)}
+              element={
+                <AdminRoute render={() => renderWithLoadingCheck(<RegistrationManagementPage />)} />
+              }
             />
-            <InstructorRoute
-              exact
+            <Route
               path="/instructorpage"
-              render={renderWithLoadingCheck(<InstructorPage />)}
+              element={
+                <InstructorRoute render={() => renderWithLoadingCheck(<InstructorPage />)} />
+              }
             />
-            <InstructorRoute
-              exact
+            <Route
               path="/instructorreviewpage"
-              render={renderWithLoadingCheck(<InstructorReviewPage />)}
+              element={
+                <InstructorRoute render={() => renderWithLoadingCheck(<InstructorReviewPage />)} />
+              }
             />
-            <InstructorRoute
+            <Route
               path="/adminstration/customer-reviews"
-              render={renderWithLoadingCheck(<ViewCustomerReviewsPage />)}
+              element={
+                <InstructorRoute
+                  render={() => renderWithLoadingCheck(<ViewCustomerReviewsPage />)}
+                />
+              }
             />
-            <InstructorRoute
+            <Route
               path="/instructor-timelogs"
-              render={renderWithLoadingCheck(<InstructorTimeLogsPage />)}
+              element={
+                <InstructorRoute
+                  render={() => renderWithLoadingCheck(<InstructorTimeLogsPage />)}
+                />
+              }
             />
-            <LoginRoute
-              exact
+            <Route
               path="/registrationdetails"
-              render={renderWithLoadingCheck(<RegistrationDetailsPage />)}
+              element={
+                <LoginRoute render={() => renderWithLoadingCheck(<RegistrationDetailsPage />)} />
+              }
             />
-            <LoginRoute exact path="/timelogs" render={renderWithLoadingCheck(<TimeLogsPage />)} />
-            <LoginRoute
-              exact
+            <Route
+              path="/timelogs"
+              element={<LoginRoute render={() => renderWithLoadingCheck(<TimeLogsPage />)} />}
+            />
+            <Route
               path="/sprints"
-              render={renderWithLoadingCheck(<SprintsDashboard />)}
+              element={<LoginRoute render={() => renderWithLoadingCheck(<SprintsDashboard />)} />}
             />
-            <LoginRoute
-              exact
+            <Route
               path="/student-tags"
-              render={renderWithLoadingCheck(<StudentTagPage />)}
+              element={<LoginRoute render={() => renderWithLoadingCheck(<StudentTagPage />)} />}
             />
-            <InstructorRoute
-              exact
+            <Route
               path="/instructor-tags"
-              render={renderWithLoadingCheck(<StaffTagPage />)}
+              element={<InstructorRoute render={() => renderWithLoadingCheck(<StaffTagPage />)} />}
             />
-            <AdminRoute
-              exact
+            <Route
               path="/administration/tags-statistics"
-              render={renderWithLoadingCheck(<StaffTagPage />)}
+              element={<AdminRoute render={() => renderWithLoadingCheck(<StaffTagPage />)} />}
             />
-            <Route component={NotFound} />
-          </Switch>
+            <Route path="*" element={<NotFound />} />
+          </Routes>
         </div>
       </div>
-    </Router>
+    </BrowserRouter>
   )
 }
 
diff --git a/frontend/src/components/AdminSprintsPage/AdminSprintsPage.jsx b/frontend/src/components/AdminSprintsPage/AdminSprintsPage.jsx
index 590a513..82a0a06 100644
--- a/frontend/src/components/AdminSprintsPage/AdminSprintsPage.jsx
+++ b/frontend/src/components/AdminSprintsPage/AdminSprintsPage.jsx
@@ -1,12 +1,13 @@
+import { withRouter } from '../../utils/withRouter'
 import React, { useEffect, useState } from 'react'
-import { withRouter } from 'react-router-dom'
+
 import { connect } from 'react-redux'
 
 import LoadingSpinner from '../common/LoadingSpinner'
 import { SprintsSelectForm } from './SprintsSelectForm'
 import { SprintListItem } from './SprintListItem'
 
-import { Typography, Table, TableRow, TableBody, TableHead, TableCell } from '@material-ui/core'
+import { Typography, Table, TableRow, TableBody, TableHead, TableCell } from '@mui/material'
 
 import sprintService from '../../services/sprints'
 import configurationService from '../../services/configuration'
diff --git a/frontend/src/components/AdminSprintsPage/SprintListItem.jsx b/frontend/src/components/AdminSprintsPage/SprintListItem.jsx
index d80b4d4..8936d9e 100644
--- a/frontend/src/components/AdminSprintsPage/SprintListItem.jsx
+++ b/frontend/src/components/AdminSprintsPage/SprintListItem.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
-import Button from '@material-ui/core/Button'
-import { TableRow, TableCell } from '@material-ui/core'
-import TextField from '@material-ui/core/TextField'
+import Button from '@mui/material/Button'
+import { TableRow, TableCell } from '@mui/material'
+import TextField from '@mui/material/TextField'
 
 import sprintService from '../../services/sprints'
 
diff --git a/frontend/src/components/AdminSprintsPage/SprintsSelectForm.jsx b/frontend/src/components/AdminSprintsPage/SprintsSelectForm.jsx
index 488ea8b..29eb013 100644
--- a/frontend/src/components/AdminSprintsPage/SprintsSelectForm.jsx
+++ b/frontend/src/components/AdminSprintsPage/SprintsSelectForm.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
-import MenuItem from '@material-ui/core/MenuItem'
-import Typography from '@material-ui/core/Typography'
-import Select from '@material-ui/core/Select'
+import MenuItem from '@mui/material/MenuItem'
+import Typography from '@mui/material/Typography'
+import Select from '@mui/material/Select'
 
 export const SprintsSelectForm = ({
   configurations,
diff --git a/frontend/src/components/ConfigurationPage.jsx b/frontend/src/components/ConfigurationPage.jsx
index e22f619..808338f 100644
--- a/frontend/src/components/ConfigurationPage.jsx
+++ b/frontend/src/components/ConfigurationPage.jsx
@@ -1,20 +1,21 @@
+import { withRouter } from '../utils/withRouter'
 import React, { useEffect } from 'react'
 import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
+
 import './TopicFormPage.css'
 
 // MUI
-import Select from '@material-ui/core/Select'
-import MenuItem from '@material-ui/core/MenuItem'
-import TextField from '@material-ui/core/TextField'
-import Button from '@material-ui/core/Button'
-import Switch from '@material-ui/core/Switch'
-import ExpansionPanel from '@material-ui/core/ExpansionPanel'
-import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'
-import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'
-import ExpansionPanelActions from '@material-ui/core/ExpansionPanelActions'
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
-import Divider from '@material-ui/core/Divider'
+import Select from '@mui/material/Select'
+import MenuItem from '@mui/material/MenuItem'
+import TextField from '@mui/material/TextField'
+import Button from '@mui/material/Button'
+import Switch from '@mui/material/Switch'
+import Accordion from '@mui/material/Accordion'
+import AccordionSummary from '@mui/material/AccordionSummary'
+import AccordionDetails from '@mui/material/AccordionDetails'
+import AccordionActions from '@mui/material/AccordionActions'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import Divider from '@mui/material/Divider'
 
 // Service
 import configurationService from '../services/configuration'
@@ -167,8 +168,8 @@ const ConfigurationPage = (props) => {
       </div>
       <h3>Questions</h3>
       <div style={{ paddingBottom: 10 }}>
-        <ExpansionPanel data-cy="expansion-registration-questions">
-          <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
+        <Accordion data-cy="expansion-registration-questions">
+          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
             <div
               style={{
                 width: '100%',
@@ -179,16 +180,16 @@ const ConfigurationPage = (props) => {
             >
               <p>Registration questions</p>
             </div>
-          </ExpansionPanelSummary>
-          <ExpansionPanelDetails>
+          </AccordionSummary>
+          <AccordionDetails>
             <div>
               <Divider />
               {props.selectedRegister && (
                 <RegistrationQuestionsTable questions={props.selectedRegister.questions} />
               )}
             </div>
-          </ExpansionPanelDetails>
-          <ExpansionPanelActions>
+          </AccordionDetails>
+          <AccordionActions>
             <Select
               name="registration"
               value={props.selectedRegister ? props.selectedRegister.id : 'default'}
@@ -211,10 +212,10 @@ const ConfigurationPage = (props) => {
             >
               Configure
             </Button>
-          </ExpansionPanelActions>
-        </ExpansionPanel>
-        <ExpansionPanel data-cy="expansion-review-questions-1">
-          <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
+          </AccordionActions>
+        </Accordion>
+        <Accordion data-cy="expansion-review-questions-1">
+          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
             <div
               style={{
                 width: '100%',
@@ -225,16 +226,16 @@ const ConfigurationPage = (props) => {
             >
               <p>Peer review questions 1</p>
             </div>
-          </ExpansionPanelSummary>
-          <ExpansionPanelDetails>
+          </AccordionSummary>
+          <AccordionDetails>
             <div>
               <Divider />
               {props.selectedReview1 && (
                 <PeerReviewQuestionsTable questions={props.selectedReview1.questions} />
               )}
             </div>
-          </ExpansionPanelDetails>
-          <ExpansionPanelActions>
+          </AccordionDetails>
+          <AccordionActions>
             <Select
               data-cy="select-review-questions-1"
               name="review1"
@@ -258,10 +259,10 @@ const ConfigurationPage = (props) => {
             >
               Configure
             </Button>
-          </ExpansionPanelActions>
-        </ExpansionPanel>
-        <ExpansionPanel data-cy="expansion-review-questions-2">
-          <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
+          </AccordionActions>
+        </Accordion>
+        <Accordion data-cy="expansion-review-questions-2">
+          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
             <div
               style={{
                 width: '100%',
@@ -272,16 +273,16 @@ const ConfigurationPage = (props) => {
             >
               <p>Peer review questions 2</p>
             </div>
-          </ExpansionPanelSummary>
-          <ExpansionPanelDetails>
+          </AccordionSummary>
+          <AccordionDetails>
             <div>
               <Divider />
               {props.selectedReview2 && (
                 <PeerReviewQuestionsTable questions={props.selectedReview2.questions} />
               )}
             </div>
-          </ExpansionPanelDetails>
-          <ExpansionPanelActions>
+          </AccordionDetails>
+          <AccordionActions>
             <Select
               name="review2"
               value={props.selectedReview2 ? props.selectedReview2.id : 'default'}
@@ -304,10 +305,10 @@ const ConfigurationPage = (props) => {
             >
               Configure
             </Button>
-          </ExpansionPanelActions>
-        </ExpansionPanel>
-        <ExpansionPanel data-cy="expansion-customer-review-questions">
-          <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
+          </AccordionActions>
+        </Accordion>
+        <Accordion data-cy="expansion-customer-review-questions">
+          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
             <div
               style={{
                 width: '100%',
@@ -318,16 +319,16 @@ const ConfigurationPage = (props) => {
             >
               <p>Customer review questions</p>
             </div>
-          </ExpansionPanelSummary>
-          <ExpansionPanelDetails>
+          </AccordionSummary>
+          <AccordionDetails>
             <div>
               <Divider />
               {props.selectedCustomerReview && (
                 <PeerReviewQuestionsTable questions={props.selectedCustomerReview.questions} />
               )}
             </div>
-          </ExpansionPanelDetails>
-          <ExpansionPanelActions>
+          </AccordionDetails>
+          <AccordionActions>
             <Select
               name="customer-review"
               value={props.selectedCustomerReview ? props.selectedCustomerReview.id : 'default'}
@@ -350,8 +351,8 @@ const ConfigurationPage = (props) => {
             >
               Configure
             </Button>
-          </ExpansionPanelActions>
-        </ExpansionPanel>
+          </AccordionActions>
+        </Accordion>
         <div style={{ marginTop: '10px' }}>
           <Switch
             style={{ marginRight: '10px', height: '40px' }}
diff --git a/frontend/src/components/CustomerReviewPage/CustomerReviewPage.jsx b/frontend/src/components/CustomerReviewPage/CustomerReviewPage.jsx
index 6323fbd..0f2df44 100644
--- a/frontend/src/components/CustomerReviewPage/CustomerReviewPage.jsx
+++ b/frontend/src/components/CustomerReviewPage/CustomerReviewPage.jsx
@@ -1,14 +1,15 @@
+import { withRouter } from '../../utils/withRouter'
 import React, { useEffect } from 'react'
 import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
+
 import './CustomerReviewPage.css'
-import Typography from '@material-ui/core/Typography'
-import TextField from '@material-ui/core/TextField'
-import Button from '@material-ui/core/Button'
-import Paper from '@material-ui/core/Paper'
-import Radio from '@material-ui/core/Radio'
-import FormControlLabel from '@material-ui/core/FormControlLabel'
-import RadioGroup from '@material-ui/core/RadioGroup'
+import Typography from '@mui/material/Typography'
+import TextField from '@mui/material/TextField'
+import Button from '@mui/material/Button'
+import Paper from '@mui/material/Paper'
+import Radio from '@mui/material/Radio'
+import FormControlLabel from '@mui/material/FormControlLabel'
+import RadioGroup from '@mui/material/RadioGroup'
 
 import * as notificationActions from '../../reducers/actions/notificationActions'
 import customerReviewPageActions from '../../reducers/actions/customerReviewPageActions'
diff --git a/frontend/src/components/CustomerReviewQuestionsPage/CreateCustomerReviewQuestionSet.jsx b/frontend/src/components/CustomerReviewQuestionsPage/CreateCustomerReviewQuestionSet.jsx
index fe9165f..09d8a7b 100644
--- a/frontend/src/components/CustomerReviewQuestionsPage/CreateCustomerReviewQuestionSet.jsx
+++ b/frontend/src/components/CustomerReviewQuestionsPage/CreateCustomerReviewQuestionSet.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import Button from '@material-ui/core/Button'
+import Button from '@mui/material/Button'
 import { createCustomerReviewQuestionSet } from '../../reducers/actions/customerReviewQuestionsPageActions'
 import { setError, setSuccess } from '../../reducers/actions/notificationActions'
 import QuestionSetForm from '../QuestionSetForm'
diff --git a/frontend/src/components/CustomerReviewQuestionsPage/CustomerReviewQuestionsPage.jsx b/frontend/src/components/CustomerReviewQuestionsPage/CustomerReviewQuestionsPage.jsx
index 0b62dcd..93832a4 100644
--- a/frontend/src/components/CustomerReviewQuestionsPage/CustomerReviewQuestionsPage.jsx
+++ b/frontend/src/components/CustomerReviewQuestionsPage/CustomerReviewQuestionsPage.jsx
@@ -1,8 +1,9 @@
+import { withRouter } from '../../utils/withRouter'
 import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
-import Paper from '@material-ui/core/Paper'
+
+import Paper from '@mui/material/Paper'
 
 import {
   fetchCustomerReviewQuestionSets,
diff --git a/frontend/src/components/EmailTemplatesPage/EmailTemplate.jsx b/frontend/src/components/EmailTemplatesPage/EmailTemplate.jsx
index e77ef18..8c1a12a 100644
--- a/frontend/src/components/EmailTemplatesPage/EmailTemplate.jsx
+++ b/frontend/src/components/EmailTemplatesPage/EmailTemplate.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import TextField from '@material-ui/core/TextField'
+import TextField from '@mui/material/TextField'
 
 import './EmailTemplate.css'
 import { templateShape } from './commonPropTypes'
diff --git a/frontend/src/components/EmailTemplatesPage/EmailTemplatesForm.jsx b/frontend/src/components/EmailTemplatesPage/EmailTemplatesForm.jsx
index 24100c4..da22c2d 100644
--- a/frontend/src/components/EmailTemplatesPage/EmailTemplatesForm.jsx
+++ b/frontend/src/components/EmailTemplatesPage/EmailTemplatesForm.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 
-import Button from '@material-ui/core/Button'
+import Button from '@mui/material/Button'
 
 import { templatesShape } from './commonPropTypes'
 import EmailTemplate from './EmailTemplate'
diff --git a/frontend/src/components/EmailTemplatesPage/EmailTemplatesPage.jsx b/frontend/src/components/EmailTemplatesPage/EmailTemplatesPage.jsx
index cc3fbe9..7b4fbbf 100644
--- a/frontend/src/components/EmailTemplatesPage/EmailTemplatesPage.jsx
+++ b/frontend/src/components/EmailTemplatesPage/EmailTemplatesPage.jsx
@@ -1,9 +1,10 @@
+import { withRouter } from '../../utils/withRouter'
 import React from 'react'
-import { withRouter } from 'react-router-dom'
+
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 
-import Paper from '@material-ui/core/Paper'
+import Paper from '@mui/material/Paper'
 
 import emailTemplatesActions from '../../reducers/actions/emailTemplatesActions'
 import * as notificationActions from '../../reducers/actions/notificationActions'
diff --git a/frontend/src/components/GroupManagementPage/AutocompletedUserSelect.jsx b/frontend/src/components/GroupManagementPage/AutocompletedUserSelect.jsx
index 415d172..f356dc9 100644
--- a/frontend/src/components/GroupManagementPage/AutocompletedUserSelect.jsx
+++ b/frontend/src/components/GroupManagementPage/AutocompletedUserSelect.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import AsyncSelect from 'react-select/lib/Async'
-import { useTheme } from '@material-ui/core/styles'
+import AsyncSelect from 'react-select/async'
+import { useTheme } from '@mui/material/styles'
 
 import autocomplete from '../../services/autocomplete'
 
diff --git a/frontend/src/components/GroupManagementPage/ConfigurationSelect.jsx b/frontend/src/components/GroupManagementPage/ConfigurationSelect.jsx
index 0b614ff..f5e7199 100644
--- a/frontend/src/components/GroupManagementPage/ConfigurationSelect.jsx
+++ b/frontend/src/components/GroupManagementPage/ConfigurationSelect.jsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import { connect } from 'react-redux'
 
-import Select from '@material-ui/core/Select'
-import MenuItem from '@material-ui/core/MenuItem'
+import Select from '@mui/material/Select'
+import MenuItem from '@mui/material/MenuItem'
 
 import groupManagementActions from '../../reducers/actions/groupManagementActions'
 
diff --git a/frontend/src/components/GroupManagementPage/GroupCreationForm.jsx b/frontend/src/components/GroupManagementPage/GroupCreationForm.jsx
index 78cd474..b5d2b76 100644
--- a/frontend/src/components/GroupManagementPage/GroupCreationForm.jsx
+++ b/frontend/src/components/GroupManagementPage/GroupCreationForm.jsx
@@ -1,13 +1,13 @@
 import React from 'react'
 import { connect } from 'react-redux'
 
-import TextField from '@material-ui/core/TextField'
-import Typography from '@material-ui/core/Typography'
-import Button from '@material-ui/core/Button'
-import Radio from '@material-ui/core/Radio'
-import RadioGroup from '@material-ui/core/RadioGroup'
-import FormControlLabel from '@material-ui/core/FormControlLabel'
-import { Table, TableBody, TableCell, TableRow } from '@material-ui/core'
+import TextField from '@mui/material/TextField'
+import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
+import Radio from '@mui/material/Radio'
+import RadioGroup from '@mui/material/RadioGroup'
+import FormControlLabel from '@mui/material/FormControlLabel'
+import { Table, TableBody, TableCell, TableRow } from '@mui/material'
 
 import groupManagementService from '../../services/groupManagement'
 
diff --git a/frontend/src/components/GroupManagementPage/GroupManagementForm.jsx b/frontend/src/components/GroupManagementPage/GroupManagementForm.jsx
index 4859962..5691f10 100644
--- a/frontend/src/components/GroupManagementPage/GroupManagementForm.jsx
+++ b/frontend/src/components/GroupManagementPage/GroupManagementForm.jsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import { connect } from 'react-redux'
 
-import Paper from '@material-ui/core/Paper'
-import { Table, TableBody, TableRow, TableCell } from '@material-ui/core'
+import Paper from '@mui/material/Paper'
+import { Table, TableBody, TableRow, TableCell } from '@mui/material'
 
 import * as notificationActions from '../../reducers/actions/notificationActions'
 import groupManagementActions from '../../reducers/actions/groupManagementActions'
diff --git a/frontend/src/components/GroupManagementPage/GroupManagementPage.jsx b/frontend/src/components/GroupManagementPage/GroupManagementPage.jsx
index 88f0feb..3c0a55a 100644
--- a/frontend/src/components/GroupManagementPage/GroupManagementPage.jsx
+++ b/frontend/src/components/GroupManagementPage/GroupManagementPage.jsx
@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react'
 import { connect } from 'react-redux'
 
-import Paper from '@material-ui/core/Paper'
-import Typography from '@material-ui/core/Typography'
+import Paper from '@mui/material/Paper'
+import Typography from '@mui/material/Typography'
 
 import groupManagementService from '../../services/groupManagement'
 import userService from '../../services/user'
diff --git a/frontend/src/components/GroupManagementPage/SingleGroupEdit.jsx b/frontend/src/components/GroupManagementPage/SingleGroupEdit.jsx
index 7ee8fd1..8ee3fe9 100644
--- a/frontend/src/components/GroupManagementPage/SingleGroupEdit.jsx
+++ b/frontend/src/components/GroupManagementPage/SingleGroupEdit.jsx
@@ -1,13 +1,13 @@
 import React from 'react'
 import { connect } from 'react-redux'
 
-import TextField from '@material-ui/core/TextField'
-import Button from '@material-ui/core/Button'
-import IconButton from '@material-ui/core/IconButton'
-import DeleteIcon from '@material-ui/icons/Delete'
-import Radio from '@material-ui/core/Radio'
-import RadioGroup from '@material-ui/core/RadioGroup'
-import FormControlLabel from '@material-ui/core/FormControlLabel'
+import TextField from '@mui/material/TextField'
+import Button from '@mui/material/Button'
+import IconButton from '@mui/material/IconButton'
+import DeleteIcon from '@mui/icons-material/Delete'
+import Radio from '@mui/material/Radio'
+import RadioGroup from '@mui/material/RadioGroup'
+import FormControlLabel from '@mui/material/FormControlLabel'
 
 import groupManagementService from '../../services/groupManagement'
 import * as notificationActions from '../../reducers/actions/notificationActions'
diff --git a/frontend/src/components/GroupManagementPage/SingleGroupView.jsx b/frontend/src/components/GroupManagementPage/SingleGroupView.jsx
index 07614dc..73109be 100644
--- a/frontend/src/components/GroupManagementPage/SingleGroupView.jsx
+++ b/frontend/src/components/GroupManagementPage/SingleGroupView.jsx
@@ -1,9 +1,9 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
 
-import Button from '@material-ui/core/Button'
-import IconButton from '@material-ui/core/IconButton'
-import DeleteIcon from '@material-ui/icons/Delete'
+import Button from '@mui/material/Button'
+import IconButton from '@mui/material/IconButton'
+import DeleteIcon from '@mui/icons-material/Delete'
 
 import groupManagementService from '../../services/groupManagement'
 
diff --git a/frontend/src/components/GroupManagementPage/TopicSelect.jsx b/frontend/src/components/GroupManagementPage/TopicSelect.jsx
index e4c5cc5..aff48d5 100644
--- a/frontend/src/components/GroupManagementPage/TopicSelect.jsx
+++ b/frontend/src/components/GroupManagementPage/TopicSelect.jsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import { connect } from 'react-redux'
 
-import Select from '@material-ui/core/Select'
-import MenuItem from '@material-ui/core/MenuItem'
+import Select from '@mui/material/Select'
+import MenuItem from '@mui/material/MenuItem'
 
 const TopicSelect = ({ topics, onTopicSelectChange, groupTopicID, className, groupConfig }) => {
   const filteredTopics = topics.filter((topic) => {
diff --git a/frontend/src/components/InstructorPage/InstructorPage.jsx b/frontend/src/components/InstructorPage/InstructorPage.jsx
index 83b2704..c660eeb 100644
--- a/frontend/src/components/InstructorPage/InstructorPage.jsx
+++ b/frontend/src/components/InstructorPage/InstructorPage.jsx
@@ -1,14 +1,14 @@
+import { withRouter } from '../../utils/withRouter'
 import React, { useEffect, useState } from 'react'
 import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
 
-import { withStyles } from '@material-ui/core/styles'
-import Button from '@material-ui/core/Button'
-import MenuItem from '@material-ui/core/MenuItem'
-import Typography from '@material-ui/core/Typography'
-import Select from '@material-ui/core/Select'
-import Error from '@material-ui/icons/Error'
-import { Table, TableRow, TableCell, TableHead, TableBody } from '@material-ui/core'
+import { withStyles } from '@mui/styles'
+import Button from '@mui/material/Button'
+import MenuItem from '@mui/material/MenuItem'
+import Typography from '@mui/material/Typography'
+import Select from '@mui/material/Select'
+import Error from '@mui/icons-material/Error'
+import { Table, TableRow, TableCell, TableHead, TableBody } from '@mui/material'
 import * as notificationActions from '../../reducers/actions/notificationActions'
 
 import './InstructorPage.css'
diff --git a/frontend/src/components/InstructorPage/StudentViewGroupAnswers.jsx b/frontend/src/components/InstructorPage/StudentViewGroupAnswers.jsx
index 2d8ea92..725e1e0 100644
--- a/frontend/src/components/InstructorPage/StudentViewGroupAnswers.jsx
+++ b/frontend/src/components/InstructorPage/StudentViewGroupAnswers.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Table, TableRow, TableCell, TableHead, TableBody } from '@material-ui/core'
+import { Table, TableRow, TableCell, TableHead, TableBody } from '@mui/material'
 
 import './InstructorPage.css'
 
diff --git a/frontend/src/components/InstructorReviewPage.jsx b/frontend/src/components/InstructorReviewPage.jsx
index 2f6d21e..38afd97 100644
--- a/frontend/src/components/InstructorReviewPage.jsx
+++ b/frontend/src/components/InstructorReviewPage.jsx
@@ -1,6 +1,7 @@
+import { withRouter } from '../utils/withRouter'
 import React, { useState } from 'react'
 import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
+
 import { getUser } from '../utils/functions'
 
 import questionsJson from './questions/instructor_data'
@@ -10,15 +11,15 @@ import * as notificationActions from '../reducers/actions/notificationActions'
 import instructorReviewPageActions from '../reducers/actions/instructorReviewPageActions.js'
 
 //Services
-import TextField from '@material-ui/core/TextField'
+import TextField from '@mui/material/TextField'
 
 import groupManagementService from '../services/groupManagement'
-import Select from '@material-ui/core/Select'
-import MenuItem from '@material-ui/core/MenuItem'
-import Button from '@material-ui/core/Button'
-import Typography from '@material-ui/core/Typography'
-import ExpandLess from '@material-ui/icons/ExpandLess'
-import ExpandMore from '@material-ui/icons/ExpandMore'
+import Select from '@mui/material/Select'
+import MenuItem from '@mui/material/MenuItem'
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+import ExpandLess from '@mui/icons-material/ExpandLess'
+import ExpandMore from '@mui/icons-material/ExpandMore'
 import instructorReviewService from '../services/instructorReview'
 
 class InstructorReviewPage extends React.Component {
diff --git a/frontend/src/components/LandingPage.jsx b/frontend/src/components/LandingPage.jsx
index 452fc4a..a1f593c 100644
--- a/frontend/src/components/LandingPage.jsx
+++ b/frontend/src/components/LandingPage.jsx
@@ -1,6 +1,7 @@
+import { withRouter } from '../utils/withRouter'
 import React from 'react'
 import { connect } from 'react-redux'
-import { withRouter, Link } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 import * as notificationActions from '../reducers/actions/notificationActions'
 
 import './LandingPage.css'
diff --git a/frontend/src/components/LoginPage.jsx b/frontend/src/components/LoginPage.jsx
index 19b67ee..3b5aa79 100644
--- a/frontend/src/components/LoginPage.jsx
+++ b/frontend/src/components/LoginPage.jsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import { connect } from 'react-redux'
 
-import Button from '@material-ui/core/Button'
-import TextField from '@material-ui/core/TextField'
+import Button from '@mui/material/Button'
+import TextField from '@mui/material/TextField'
 
 import appActions from '../reducers/actions/appActions'
 import loginPageActions from '../reducers/actions/loginPageActions'
diff --git a/frontend/src/components/ParticipantsPage.jsx b/frontend/src/components/ParticipantsPage.jsx
index 5096ff5..1e288dd 100644
--- a/frontend/src/components/ParticipantsPage.jsx
+++ b/frontend/src/components/ParticipantsPage.jsx
@@ -1,16 +1,17 @@
+import { withRouter } from '../utils/withRouter'
 import React from 'react'
 import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
-import { withStyles } from '@material-ui/core/styles'
-import { Table, TableBody, TableCell, TableHead, TableRow } from '@material-ui/core'
-import Paper from '@material-ui/core/Paper'
-import Button from '@material-ui/core/Button'
+
+import { withStyles } from '@mui/styles'
+import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material'
+import Paper from '@mui/material/Paper'
+import Button from '@mui/material/Button'
 import * as notificationActions from '../reducers/actions/notificationActions'
 
 const styles = (theme) => ({
   root: {
     width: '100%',
-    marginTop: theme.spacing.unit * 3,
+    marginTop: theme.spacing(3),
     overflowX: 'auto',
   },
   table: {
diff --git a/frontend/src/components/PeerReviewPage.jsx b/frontend/src/components/PeerReviewPage.jsx
index c560603..b521b05 100644
--- a/frontend/src/components/PeerReviewPage.jsx
+++ b/frontend/src/components/PeerReviewPage.jsx
@@ -1,6 +1,7 @@
+import { withRouter } from '../utils/withRouter'
 import React from 'react'
 import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
+
 import './PeerReviewPage.css'
 import { getUser, extractCallingName } from '../utils/functions'
 import { NotInGroupPlaceholder, LoadingPlaceholder } from './common/Placeholders'
@@ -14,9 +15,9 @@ import peerReviewService from '../services/peerReview'
 import groupManagementService from '../services/groupManagement'
 import timeLogService from '../services/timeLogs'
 
-import TextField from '@material-ui/core/TextField'
-import Button from '@material-ui/core/Button'
-import { Table, TableHead, TableRow, TableBody, TableCell } from '@material-ui/core'
+import TextField from '@mui/material/TextField'
+import Button from '@mui/material/Button'
+import { Table, TableHead, TableRow, TableBody, TableCell } from '@mui/material'
 
 class PeerReview extends React.Component {
   async componentDidMount() {
diff --git a/frontend/src/components/PeerReviewQuestionsPage/CreatePeerReviewQuestionSet.jsx b/frontend/src/components/PeerReviewQuestionsPage/CreatePeerReviewQuestionSet.jsx
index 2eb5d38..44d1d47 100644
--- a/frontend/src/components/PeerReviewQuestionsPage/CreatePeerReviewQuestionSet.jsx
+++ b/frontend/src/components/PeerReviewQuestionsPage/CreatePeerReviewQuestionSet.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import Button from '@material-ui/core/Button'
+import Button from '@mui/material/Button'
 import { createPeerReviewQuestionSet } from '../../reducers/actions/peerReviewQuestionsPageActions'
 import { setError, setSuccess } from '../../reducers/actions/notificationActions'
 import QuestionSetForm from '../QuestionSetForm'
diff --git a/frontend/src/components/PeerReviewQuestionsPage/PeerReviewQuestionsPage.jsx b/frontend/src/components/PeerReviewQuestionsPage/PeerReviewQuestionsPage.jsx
index 7fd88d5..8d01e98 100644
--- a/frontend/src/components/PeerReviewQuestionsPage/PeerReviewQuestionsPage.jsx
+++ b/frontend/src/components/PeerReviewQuestionsPage/PeerReviewQuestionsPage.jsx
@@ -1,8 +1,9 @@
+import { withRouter } from '../../utils/withRouter'
 import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
-import Paper from '@material-ui/core/Paper'
+
+import Paper from '@mui/material/Paper'
 
 import {
   fetchPeerReviewQuestionSets,
diff --git a/frontend/src/components/PeerReviewQuestionsTable.jsx b/frontend/src/components/PeerReviewQuestionsTable.jsx
index 3c442ab..34e48c9 100644
--- a/frontend/src/components/PeerReviewQuestionsTable.jsx
+++ b/frontend/src/components/PeerReviewQuestionsTable.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Table, TableHead, TableRow, TableCell, TableBody } from '@material-ui/core'
+import { Table, TableHead, TableRow, TableCell, TableBody } from '@mui/material'
 
 import { peerReviewQuestionShape } from './common/sharedPropTypes'
 
diff --git a/frontend/src/components/QuestionSetForm.jsx b/frontend/src/components/QuestionSetForm.jsx
index 95db079..db888b7 100644
--- a/frontend/src/components/QuestionSetForm.jsx
+++ b/frontend/src/components/QuestionSetForm.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import TextField from '@material-ui/core/TextField'
+import TextField from '@mui/material/TextField'
 import './QuestionSetForm.css'
 
 const validateQuestionsJson = (str) => {
diff --git a/frontend/src/components/QuestionSetItem.jsx b/frontend/src/components/QuestionSetItem.jsx
index 54a8826..645b2aa 100644
--- a/frontend/src/components/QuestionSetItem.jsx
+++ b/frontend/src/components/QuestionSetItem.jsx
@@ -1,12 +1,12 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 
-import Menu from '@material-ui/core/Menu'
-import MenuItem from '@material-ui/core/MenuItem'
-import Paper from '@material-ui/core/Paper'
-import { withTheme } from '@material-ui/core/styles'
-import IconButton from '@material-ui/core/IconButton'
-import MoreVertIcon from '@material-ui/icons/MoreVert'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
+import Paper from '@mui/material/Paper'
+import { useTheme } from '@mui/material/styles'
+import IconButton from '@mui/material/IconButton'
+import MoreVertIcon from '@mui/icons-material/MoreVert'
 import './QuestionSetItem.css'
 
 const ItemControls = ({ onEditClicked }) => {
@@ -56,7 +56,8 @@ ItemControls.propTypes = {
   onEditClicked: PropTypes.func,
 }
 
-const QuestionSetItem = ({ title, children, onEditClicked, theme }) => {
+const QuestionSetItem = ({ title, children, onEditClicked }) => {
+  const theme = useTheme()
   const headerStyle = {
     borderColor: theme.palette.primary.main,
   }
@@ -80,7 +81,6 @@ QuestionSetItem.propTypes = {
   title: PropTypes.string,
   children: PropTypes.node,
   onEditClicked: PropTypes.func,
-  theme: PropTypes.object,
 }
 
-export default withTheme(QuestionSetItem)
+export default QuestionSetItem
diff --git a/frontend/src/components/QuestionSetItemEditor.jsx b/frontend/src/components/QuestionSetItemEditor.jsx
index f145021..641c6eb 100644
--- a/frontend/src/components/QuestionSetItemEditor.jsx
+++ b/frontend/src/components/QuestionSetItemEditor.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Button from '@material-ui/core/Button'
-import Paper from '@material-ui/core/Paper'
+import Button from '@mui/material/Button'
+import Paper from '@mui/material/Paper'
 import QuestionSetForm from './QuestionSetForm'
 import './QuestionSetItemEditor.css'
 
diff --git a/frontend/src/components/QuestionsForm.jsx b/frontend/src/components/QuestionsForm.jsx
index 4b77efc..ffacba1 100644
--- a/frontend/src/components/QuestionsForm.jsx
+++ b/frontend/src/components/QuestionsForm.jsx
@@ -1,8 +1,8 @@
 import React from 'react'
-import Select from '@material-ui/core/Select'
-import MenuItem from '@material-ui/core/MenuItem'
-import TextField from '@material-ui/core/TextField'
-import Button from '@material-ui/core/Button'
+import Select from '@mui/material/Select'
+import MenuItem from '@mui/material/MenuItem'
+import TextField from '@mui/material/TextField'
+import Button from '@mui/material/Button'
 
 const QuestionsFrom = (props) => {
   return (
diff --git a/frontend/src/components/RegistrationDetailsPage.jsx b/frontend/src/components/RegistrationDetailsPage.jsx
index cbe2acf..a20a864 100644
--- a/frontend/src/components/RegistrationDetailsPage.jsx
+++ b/frontend/src/components/RegistrationDetailsPage.jsx
@@ -1,5 +1,6 @@
+import { withRouter } from '../utils/withRouter'
 import React from 'react'
-import { withRouter, Link } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 import { connect } from 'react-redux'
 import ReactDragList from 'react-drag-list'
 
@@ -8,8 +9,8 @@ import { setError } from '../reducers/actions/notificationActions'
 
 import peerReviewService from '../services/peerReview'
 
-import Typography from '@material-ui/core/Typography'
-import { Input, Card, CardContent, Select, MenuItem } from '@material-ui/core'
+import Typography from '@mui/material/Typography'
+import { Input, Card, CardContent, Select, MenuItem } from '@mui/material'
 import TopicDialog from './TopicDialog'
 import CourseMaterial from './common/CourseMaterial'
 
diff --git a/frontend/src/components/RegistrationManagementPage/PeerReviewSettings.jsx b/frontend/src/components/RegistrationManagementPage/PeerReviewSettings.jsx
index 98095f3..1412e03 100644
--- a/frontend/src/components/RegistrationManagementPage/PeerReviewSettings.jsx
+++ b/frontend/src/components/RegistrationManagementPage/PeerReviewSettings.jsx
@@ -11,7 +11,7 @@ import {
   Switch,
   FormControl,
   FormHelperText,
-} from '@material-ui/core'
+} from '@mui/material'
 
 // Actions
 import registrationManagementActions from '../../reducers/actions/registrationManagementActions'
diff --git a/frontend/src/components/RegistrationManagementPage/ProjectRegistrationSettings.jsx b/frontend/src/components/RegistrationManagementPage/ProjectRegistrationSettings.jsx
index c982063..019e71c 100644
--- a/frontend/src/components/RegistrationManagementPage/ProjectRegistrationSettings.jsx
+++ b/frontend/src/components/RegistrationManagementPage/ProjectRegistrationSettings.jsx
@@ -11,7 +11,7 @@ import {
   Switch,
   FormControl,
   FormHelperText,
-} from '@material-ui/core'
+} from '@mui/material'
 
 // Actions
 import registrationManagementActions from '../../reducers/actions/registrationManagementActions'
diff --git a/frontend/src/components/RegistrationManagementPage/RegistrationManagementPage.jsx b/frontend/src/components/RegistrationManagementPage/RegistrationManagementPage.jsx
index c7e86ba..d9e0b1f 100644
--- a/frontend/src/components/RegistrationManagementPage/RegistrationManagementPage.jsx
+++ b/frontend/src/components/RegistrationManagementPage/RegistrationManagementPage.jsx
@@ -1,13 +1,13 @@
+import { withRouter } from '../../utils/withRouter'
 import React, { useEffect } from 'react'
 import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
 
 import ProjectRegistrationSettings from './ProjectRegistrationSettings'
 import TopicRegistrationSettings from './TopicRegistrationSettings'
 import PeerReviewSettings from './PeerReviewSettings'
 
 // MUI
-import { MenuItem, Button } from '@material-ui/core'
+import { MenuItem, Button } from '@mui/material'
 
 // Actions
 import appActions from '../../reducers/actions/appActions'
diff --git a/frontend/src/components/RegistrationManagementPage/TopicRegistrationSettings.jsx b/frontend/src/components/RegistrationManagementPage/TopicRegistrationSettings.jsx
index f191558..6f0441b 100644
--- a/frontend/src/components/RegistrationManagementPage/TopicRegistrationSettings.jsx
+++ b/frontend/src/components/RegistrationManagementPage/TopicRegistrationSettings.jsx
@@ -11,7 +11,7 @@ import {
   Switch,
   FormControl,
   FormHelperText,
-} from '@material-ui/core'
+} from '@mui/material'
 
 // Actions
 import registrationManagementActions from '../../reducers/actions/registrationManagementActions'
diff --git a/frontend/src/components/RegistrationPage.jsx b/frontend/src/components/RegistrationPage.jsx
index fe6583c..bdc777b 100644
--- a/frontend/src/components/RegistrationPage.jsx
+++ b/frontend/src/components/RegistrationPage.jsx
@@ -1,15 +1,16 @@
+import { withRouter } from '../utils/withRouter'
 import React from 'react'
-import { withRouter } from 'react-router-dom'
+
 import { connect } from 'react-redux'
 import ReactDragList from 'react-drag-list'
 // MUI
-import Card from '@material-ui/core/Card'
-import CardContent from '@material-ui/core/CardContent'
-import Button from '@material-ui/core/Button'
-import Input from '@material-ui/core/Input'
-import Select from '@material-ui/core/Select'
-import MenuItem from '@material-ui/core/MenuItem'
-import TextField from '@material-ui/core/TextField'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Button from '@mui/material/Button'
+import Input from '@mui/material/Input'
+import Select from '@mui/material/Select'
+import MenuItem from '@mui/material/MenuItem'
+import TextField from '@mui/material/TextField'
 // services
 import topicService from '../services/topic'
 import userService from '../services/user'
diff --git a/frontend/src/components/RegistrationQuestionsPage/CreateRegistrationQuestionSet.jsx b/frontend/src/components/RegistrationQuestionsPage/CreateRegistrationQuestionSet.jsx
index 08fc339..0c9bdf8 100644
--- a/frontend/src/components/RegistrationQuestionsPage/CreateRegistrationQuestionSet.jsx
+++ b/frontend/src/components/RegistrationQuestionsPage/CreateRegistrationQuestionSet.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import Button from '@material-ui/core/Button'
+import Button from '@mui/material/Button'
 import { createRegistrationQuestionSet } from '../../reducers/actions/registrationQuestionsPageActions'
 import { setError, setSuccess } from '../../reducers/actions/notificationActions'
 import QuestionSetForm from '../QuestionSetForm'
diff --git a/frontend/src/components/RegistrationQuestionsPage/RegistrationQuestionsPage.jsx b/frontend/src/components/RegistrationQuestionsPage/RegistrationQuestionsPage.jsx
index 18bcef0..f0476d4 100644
--- a/frontend/src/components/RegistrationQuestionsPage/RegistrationQuestionsPage.jsx
+++ b/frontend/src/components/RegistrationQuestionsPage/RegistrationQuestionsPage.jsx
@@ -1,8 +1,9 @@
+import { withRouter } from '../../utils/withRouter'
 import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
-import Paper from '@material-ui/core/Paper'
+
+import Paper from '@mui/material/Paper'
 
 import {
   fetchRegistrationQuestionSets,
diff --git a/frontend/src/components/RegistrationQuestionsTable.jsx b/frontend/src/components/RegistrationQuestionsTable.jsx
index 6ff43e6..1f38fce 100644
--- a/frontend/src/components/RegistrationQuestionsTable.jsx
+++ b/frontend/src/components/RegistrationQuestionsTable.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { Table, TableHead, TableRow, TableCell, TableBody } from '@material-ui/core'
+import { Table, TableHead, TableRow, TableCell, TableBody } from '@mui/material'
 
 import { registrationQuestionShape } from './common/sharedPropTypes'
 
diff --git a/frontend/src/components/Registrations.jsx b/frontend/src/components/Registrations.jsx
index 7e1f636..be3b964 100644
--- a/frontend/src/components/Registrations.jsx
+++ b/frontend/src/components/Registrations.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { Table, TableRow, TableCell } from '@material-ui/core'
+import { Table, TableRow, TableCell } from '@mui/material'
 import registrationService from '../services/registration'
 
 const Registrations = () => {
diff --git a/frontend/src/components/SprintsPage/SprintsDashboard.jsx b/frontend/src/components/SprintsPage/SprintsDashboard.jsx
index 5a11b8e..e3663d3 100644
--- a/frontend/src/components/SprintsPage/SprintsDashboard.jsx
+++ b/frontend/src/components/SprintsPage/SprintsDashboard.jsx
@@ -1,13 +1,14 @@
+import { withRouter } from '../../utils/withRouter'
 import React, { useState, useEffect } from 'react'
-import Typography from '@material-ui/core/Typography'
-import TextField from '@material-ui/core/TextField'
-import Button from '@material-ui/core/Button'
-import { Table, TableRow, TableHead, TableBody, TableCell } from '@material-ui/core'
+import Typography from '@mui/material/Typography'
+import TextField from '@mui/material/TextField'
+import Button from '@mui/material/Button'
+import { Table, TableRow, TableHead, TableBody, TableCell } from '@mui/material'
 import sprintService from '../../services/sprints'
 import { NotInGroupPlaceholder } from '../common/Placeholders'
 import './SprintsDashboard.css'
 import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
+
 import * as notificationActions from '../../reducers/actions/notificationActions'
 
 const SprintsPage = (props) => {
diff --git a/frontend/src/components/TagManagementPage/TagsDashboard.jsx b/frontend/src/components/TagManagementPage/TagsDashboard.jsx
index e265dbf..408efd4 100644
--- a/frontend/src/components/TagManagementPage/TagsDashboard.jsx
+++ b/frontend/src/components/TagManagementPage/TagsDashboard.jsx
@@ -1,12 +1,13 @@
+import { withRouter } from '../../utils/withRouter'
 import React, { useState, useEffect, useRef } from 'react'
-import Typography from '@material-ui/core/Typography'
-import TextField from '@material-ui/core/TextField'
-import Button from '@material-ui/core/Button'
+import Typography from '@mui/material/Typography'
+import TextField from '@mui/material/TextField'
+import Button from '@mui/material/Button'
 import tagService from '../../services/tags'
 import './TagsDashboard.css'
 import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
-import { Table, TableBody, TableCell, TableHead, TableRow } from '@material-ui/core'
+
+import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material'
 import * as notificationActions from '../../reducers/actions/notificationActions'
 import ConfirmationDialog from '../common/ConfirmationDialog'
 
diff --git a/frontend/src/components/TagPage/StaffTagPage.jsx b/frontend/src/components/TagPage/StaffTagPage.jsx
index a7c438c..7c970b8 100644
--- a/frontend/src/components/TagPage/StaffTagPage.jsx
+++ b/frontend/src/components/TagPage/StaffTagPage.jsx
@@ -1,8 +1,9 @@
+import { withRouter } from '../../utils/withRouter'
 import React, { useEffect, useState } from 'react'
 import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
+
 import LoadingSpinner from '../common/LoadingSpinner'
-import { Typography } from '@material-ui/core'
+import { Typography } from '@mui/material'
 import CheckboxMultiSelect from '../common/CheckboxMultiSelect'
 import { StudentSelectionForm } from '../common/StudentSelectionForm'
 import TagUsageLineChart from './TagUsageLineChart'
diff --git a/frontend/src/components/TagPage/StudentTagPage.jsx b/frontend/src/components/TagPage/StudentTagPage.jsx
index 20772e4..102a752 100644
--- a/frontend/src/components/TagPage/StudentTagPage.jsx
+++ b/frontend/src/components/TagPage/StudentTagPage.jsx
@@ -1,8 +1,9 @@
+import { withRouter } from '../../utils/withRouter'
 import React, { useEffect, useState } from 'react'
 import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
+
 import LoadingSpinner from '../common/LoadingSpinner'
-import { Typography } from '@material-ui/core'
+import { Typography } from '@mui/material'
 import { NotInGroupPlaceholder, NoSprintsPlaceholder } from '../common/Placeholders'
 import CheckboxMultiSelect from '../common/CheckboxMultiSelect'
 import TagUsageLineChart from './TagUsageLineChart'
diff --git a/frontend/src/components/TagPage/TagUsageBarChart.jsx b/frontend/src/components/TagPage/TagUsageBarChart.jsx
index 9c53e9a..4bd2e94 100644
--- a/frontend/src/components/TagPage/TagUsageBarChart.jsx
+++ b/frontend/src/components/TagPage/TagUsageBarChart.jsx
@@ -9,7 +9,7 @@ import {
   ResponsiveContainer,
   Cell,
 } from 'recharts'
-import { useTheme } from '@material-ui/core/styles'
+import { useTheme } from '@mui/material/styles'
 
 const TagUsageBarChart = ({ allTags, selectedTags, tagData, tagColors }) => {
   const theme = useTheme()
diff --git a/frontend/src/components/TagPage/TagUsageLineChart.jsx b/frontend/src/components/TagPage/TagUsageLineChart.jsx
index 092a808..d2f1662 100644
--- a/frontend/src/components/TagPage/TagUsageLineChart.jsx
+++ b/frontend/src/components/TagPage/TagUsageLineChart.jsx
@@ -9,7 +9,7 @@ import {
   XAxis,
   YAxis,
 } from 'recharts'
-import { useTheme } from '@material-ui/core/styles'
+import { useTheme } from '@mui/material/styles'
 
 const TagUsageLineChart = ({ allSprints, allTags, selectedTags, tagData, tagColors }) => {
   const theme = useTheme()
diff --git a/frontend/src/components/TimeLogsPage/InstructorTimeLogsPage.jsx b/frontend/src/components/TimeLogsPage/InstructorTimeLogsPage.jsx
index e7de637..de25756 100644
--- a/frontend/src/components/TimeLogsPage/InstructorTimeLogsPage.jsx
+++ b/frontend/src/components/TimeLogsPage/InstructorTimeLogsPage.jsx
@@ -1,5 +1,6 @@
+import { withRouter } from '../../utils/withRouter'
 import React, { useEffect, useState } from 'react'
-import { withRouter } from 'react-router-dom'
+
 import { connect } from 'react-redux'
 import { StudentSelectionForm } from '../common/StudentSelectionForm'
 import { TimeLogRow } from './TimeLogRow'
@@ -8,8 +9,8 @@ import LoadingSpinner from '../common/LoadingSpinner'
 import { SprintSelect } from './SprintSelect'
 import ConfirmationDialog from '../common/ConfirmationDialog'
 
-import { Typography } from '@material-ui/core'
-import Button from '@material-ui/core/Button'
+import { Typography } from '@mui/material'
+import Button from '@mui/material/Button'
 
 import userService from '../../services/user'
 import sprintService from '../../services/sprints'
diff --git a/frontend/src/components/TimeLogsPage/SprintSelect.jsx b/frontend/src/components/TimeLogsPage/SprintSelect.jsx
index 4c73273..8e0c16a 100644
--- a/frontend/src/components/TimeLogsPage/SprintSelect.jsx
+++ b/frontend/src/components/TimeLogsPage/SprintSelect.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
-import { IconButton, Typography } from '@material-ui/core'
-import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos'
-import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos'
+import { IconButton, Typography } from '@mui/material'
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
 
 import './TimeLogsPage.css'
 
diff --git a/frontend/src/components/TimeLogsPage/TagSelect.jsx b/frontend/src/components/TimeLogsPage/TagSelect.jsx
index 44b9e95..ff5c461 100644
--- a/frontend/src/components/TimeLogsPage/TagSelect.jsx
+++ b/frontend/src/components/TimeLogsPage/TagSelect.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
-import { withStyles } from '@material-ui/core/styles'
-import { Check } from '@material-ui/icons'
+import { withStyles } from '@mui/styles'
+import { Check } from '@mui/icons-material'
 import {
   FormControl,
   InputLabel,
@@ -9,7 +9,7 @@ import {
   Chip,
   OutlinedInput,
   ListItemIcon,
-} from '@material-ui/core'
+} from '@mui/material'
 
 import './TimeLogsPage.css'
 
diff --git a/frontend/src/components/TimeLogsPage/TimeLogChart.jsx b/frontend/src/components/TimeLogsPage/TimeLogChart.jsx
index f0572fc..f2815e5 100644
--- a/frontend/src/components/TimeLogsPage/TimeLogChart.jsx
+++ b/frontend/src/components/TimeLogsPage/TimeLogChart.jsx
@@ -12,8 +12,8 @@ import {
   Cell,
 } from 'recharts'
 import { NoTimeLogsPlaceholderSprint, NoTimeLogsPlaceholderProject } from '../common/Placeholders'
-import Error from '@material-ui/icons/Error'
-import { useTheme } from '@material-ui/core/styles'
+import Error from '@mui/icons-material/Error'
+import { useTheme } from '@mui/material/styles'
 
 import './TimeLogsPage.css'
 
diff --git a/frontend/src/components/TimeLogsPage/TimeLogForm.jsx b/frontend/src/components/TimeLogsPage/TimeLogForm.jsx
index e38170b..d61d422 100644
--- a/frontend/src/components/TimeLogsPage/TimeLogForm.jsx
+++ b/frontend/src/components/TimeLogsPage/TimeLogForm.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { TextField, Button } from '@material-ui/core'
+import { TextField, Button } from '@mui/material'
 import TagSelect from './TagSelect'
 
 import './TimeLogsPage.css'
diff --git a/frontend/src/components/TimeLogsPage/TimeLogRow.jsx b/frontend/src/components/TimeLogsPage/TimeLogRow.jsx
index f398c5b..df0344b 100644
--- a/frontend/src/components/TimeLogsPage/TimeLogRow.jsx
+++ b/frontend/src/components/TimeLogsPage/TimeLogRow.jsx
@@ -1,9 +1,9 @@
 import React, { useState } from 'react'
 import { minutesToFormattedHoursAndMinutes } from '../../utils/functions'
-import { DeleteOutlineRounded } from '@material-ui/icons'
-import { IconButton, Chip } from '@material-ui/core'
+import { DeleteOutlineRounded } from '@mui/icons-material'
+import { IconButton, Chip } from '@mui/material'
 import ConfirmationDialog from '../common/ConfirmationDialog'
-import Checkbox from '@material-ui/core/Checkbox'
+import Checkbox from '@mui/material/Checkbox'
 
 import './TimeLogsPage.css'
 
diff --git a/frontend/src/components/TimeLogsPage/TimeLogsPage.jsx b/frontend/src/components/TimeLogsPage/TimeLogsPage.jsx
index 84d853f..522f65c 100644
--- a/frontend/src/components/TimeLogsPage/TimeLogsPage.jsx
+++ b/frontend/src/components/TimeLogsPage/TimeLogsPage.jsx
@@ -1,14 +1,15 @@
+import { withRouter } from '../../utils/withRouter'
 import React, { useEffect, useState } from 'react'
 import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
+
 import { TimeLogForm } from './TimeLogForm'
 import { TimeLogRow } from './TimeLogRow'
 import TimeLogChart from './TimeLogChart'
 import { NotInGroupPlaceholder, NoSprintsPlaceholder } from '../common/Placeholders'
 import LoadingSpinner from '../common/LoadingSpinner'
 import { SprintSelect } from './SprintSelect'
-import { Typography } from '@material-ui/core'
-import Error from '@material-ui/icons/Error'
+import { Typography } from '@mui/material'
+import Error from '@mui/icons-material/Error'
 
 // services
 import timeLogsService from '../../services/timeLogs'
diff --git a/frontend/src/components/Topic.jsx b/frontend/src/components/Topic.jsx
index 39f5273..8abead6 100644
--- a/frontend/src/components/Topic.jsx
+++ b/frontend/src/components/Topic.jsx
@@ -1,12 +1,12 @@
 import React from 'react'
-import Typography from '@material-ui/core/Typography'
-import Button from '@material-ui/core/Button'
+import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
 import ReactMarkdown from 'react-markdown'
 import { connect } from 'react-redux'
 import './Topic.css'
 
-const markdownRenderers = {
-  link: ({ children, href, ...otherProps }) => {
+const markdownComponents = {
+  a: ({ children, href, ...otherProps }) => {
     // add rel and target for external links so we don't leak information :)
     const externalLinkProps = /^https?:\/\//i.test(href)
       ? { rel: 'nofollow noreferrer noopener', target: '_blank' }
@@ -21,7 +21,7 @@ const markdownRenderers = {
 }
 
 const Markdown = ({ children }) => (
-  <ReactMarkdown renderers={markdownRenderers}>{children}</ReactMarkdown>
+  <ReactMarkdown components={markdownComponents}>{children}</ReactMarkdown>
 )
 
 const Topic = ({
diff --git a/frontend/src/components/TopicDialog.jsx b/frontend/src/components/TopicDialog.jsx
index 56a0ea1..22f9e1b 100644
--- a/frontend/src/components/TopicDialog.jsx
+++ b/frontend/src/components/TopicDialog.jsx
@@ -1,12 +1,12 @@
 import React from 'react'
-import Button from '@material-ui/core/Button'
-import Dialog from '@material-ui/core/Dialog'
-import DialogContent from '@material-ui/core/DialogContent'
-import DialogActions from '@material-ui/core/DialogActions'
-import Card from '@material-ui/core/Card'
-import CardContent from '@material-ui/core/CardContent'
+import Button from '@mui/material/Button'
+import Dialog from '@mui/material/Dialog'
+import DialogContent from '@mui/material/DialogContent'
+import DialogActions from '@mui/material/DialogActions'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
 import Topic from './Topic'
-import Typography from '@material-ui/core/Typography'
+import Typography from '@mui/material/Typography'
 
 class TopicDialog extends React.Component {
   constructor(props) {
diff --git a/frontend/src/components/TopicEditPage.jsx b/frontend/src/components/TopicEditPage.jsx
index 9a74328..7dcbc43 100644
--- a/frontend/src/components/TopicEditPage.jsx
+++ b/frontend/src/components/TopicEditPage.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { connect } from 'react-redux'
 
-import Button from '@material-ui/core/Button'
+import Button from '@mui/material/Button'
 
 import topicFormPageActions from '../reducers/actions/topicFormPageActions'
 import * as notificationActions from '../reducers/actions/notificationActions'
diff --git a/frontend/src/components/TopicForm.jsx b/frontend/src/components/TopicForm.jsx
index 31d1cce..f3c856a 100644
--- a/frontend/src/components/TopicForm.jsx
+++ b/frontend/src/components/TopicForm.jsx
@@ -1,10 +1,10 @@
 import React, { useState } from 'react'
 import { connect } from 'react-redux'
 import topicFormPageActions from '../reducers/actions/topicFormPageActions'
-import TextField from '@material-ui/core/TextField'
-import { Radio, RadioGroup, Checkbox } from '@material-ui/core'
-import Button from '@material-ui/core/Button'
-import { useTheme } from '@material-ui/core'
+import TextField from '@mui/material/TextField'
+import { Radio, RadioGroup, Checkbox } from '@mui/material'
+import Button from '@mui/material/Button'
+import { useTheme } from '@mui/material'
 import './TopicForm.css'
 
 const TopicForm = (props) => {
diff --git a/frontend/src/components/TopicFormPage.jsx b/frontend/src/components/TopicFormPage.jsx
index 50b45f1..6c3f0dd 100644
--- a/frontend/src/components/TopicFormPage.jsx
+++ b/frontend/src/components/TopicFormPage.jsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import { Redirect } from 'react-router'
+import { Navigate } from 'react-router-dom'
 
-import Button from '@material-ui/core/Button'
+import Button from '@mui/material/Button'
 
 import topicFormPageActions from '../reducers/actions/topicFormPageActions'
 import * as notificationActions from '../reducers/actions/notificationActions'
@@ -35,7 +35,7 @@ class TopicFormPage extends React.Component {
 
   render() {
     if (this.props.isSaved === true) {
-      return <Redirect to={'/topics/' + this.props.secretId} />
+      return <Navigate to={'/topics/' + this.props.secretId} />
     }
 
     if (this.props.showInfo) {
diff --git a/frontend/src/components/TopicFormPageInfo.jsx b/frontend/src/components/TopicFormPageInfo.jsx
index 324b70d..4ff384d 100644
--- a/frontend/src/components/TopicFormPageInfo.jsx
+++ b/frontend/src/components/TopicFormPageInfo.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import Button from '@material-ui/core/Button'
-import { Typography } from '@material-ui/core'
+import Button from '@mui/material/Button'
+import { Typography } from '@mui/material'
 import topicFormPageActions from '../reducers/actions/topicFormPageActions'
 import './TopicFormPageInfo.css'
 
diff --git a/frontend/src/components/TopicListPage.jsx b/frontend/src/components/TopicListPage.jsx
index caa1f2c..37d5992 100644
--- a/frontend/src/components/TopicListPage.jsx
+++ b/frontend/src/components/TopicListPage.jsx
@@ -1,24 +1,25 @@
+import { withRouter } from '../utils/withRouter'
 import React, { useState, useEffect, Fragment } from 'react'
 import { connect } from 'react-redux'
-import { Link, withRouter } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 import PropTypes from 'prop-types'
 
-import Button from '@material-ui/core/Button'
-import RadioGroup from '@material-ui/core/RadioGroup'
-import Radio from '@material-ui/core/Radio'
-import FormControl from '@material-ui/core/FormControl'
-import FormControlLabel from '@material-ui/core/FormControlLabel'
-import ListItemIcon from '@material-ui/core/ListItemIcon'
-import ListItemText from '@material-ui/core/ListItemText'
-import Menu from '@material-ui/core/Menu'
-import MenuItem from '@material-ui/core/MenuItem'
-import Select from '@material-ui/core/Select'
-import Switch from '@material-ui/core/Switch'
-import { Table, TableBody, TableRow, TableCell, TableHead, useTheme } from '@material-ui/core'
-import Icon from '@material-ui/icons/Input'
+import Button from '@mui/material/Button'
+import RadioGroup from '@mui/material/RadioGroup'
+import Radio from '@mui/material/Radio'
+import FormControl from '@mui/material/FormControl'
+import FormControlLabel from '@mui/material/FormControlLabel'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import ListItemText from '@mui/material/ListItemText'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
+import Select from '@mui/material/Select'
+import Switch from '@mui/material/Switch'
+import { Table, TableBody, TableRow, TableCell, TableHead, useTheme } from '@mui/material'
+import Icon from '@mui/icons-material/Input'
 
-import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'
-import { green, red, orange } from '@material-ui/core/colors'
+import { ThemeProvider, createTheme } from '@mui/material/styles'
+import { green, red, orange } from '@mui/material/colors'
 
 import emailService from '../services/email'
 import { formatDate } from '../utils/functions'
@@ -31,7 +32,7 @@ import './TopicListPage.css'
 import { NoneAvailable } from './common/Placeholders'
 import configurationMapper from '../utils/configurationMapper'
 
-const redGreenTheme = createMuiTheme({
+const redGreenTheme = createTheme({
   palette: {
     primary: green,
     secondary: red,
@@ -41,7 +42,7 @@ const redGreenTheme = createMuiTheme({
   },
 })
 
-const orangeTheme = createMuiTheme({
+const orangeTheme = createTheme({
   palette: {
     primary: orange,
     secondary: orange,
@@ -52,9 +53,9 @@ const orangeTheme = createMuiTheme({
 })
 
 const ThemedButton = ({ theme, ...props }) => (
-  <MuiThemeProvider theme={theme}>
+  <ThemeProvider theme={theme}>
     <Button {...props} />
-  </MuiThemeProvider>
+  </ThemeProvider>
 )
 
 const GreenButton = (props) => <ThemedButton {...props} theme={redGreenTheme} color="primary" />
@@ -391,7 +392,7 @@ const TopicAcceptanceFilter = (props) => {
   return (
     <Fragment>
       <FormControl sx={{ margin: '0 4rem' }}>
-        <MuiThemeProvider theme={redGreenTheme}>
+        <ThemeProvider theme={redGreenTheme}>
           <RadioGroup
             row
             defaultValue="all"
@@ -418,7 +419,7 @@ const TopicAcceptanceFilter = (props) => {
               label="Rejected"
             />
           </RadioGroup>
-        </MuiThemeProvider>
+        </ThemeProvider>
       </FormControl>
     </Fragment>
   )
diff --git a/frontend/src/components/UserDetails.jsx b/frontend/src/components/UserDetails.jsx
index a4644c3..cea489b 100644
--- a/frontend/src/components/UserDetails.jsx
+++ b/frontend/src/components/UserDetails.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import Typography from '@material-ui/core/Typography'
+import Typography from '@mui/material/Typography'
 
 class UserDetails extends React.Component {
   render() {
diff --git a/frontend/src/components/ViewCustomerReviewsPage/ViewCustomerReviewsPage.jsx b/frontend/src/components/ViewCustomerReviewsPage/ViewCustomerReviewsPage.jsx
index 6104e9f..b0282b2 100644
--- a/frontend/src/components/ViewCustomerReviewsPage/ViewCustomerReviewsPage.jsx
+++ b/frontend/src/components/ViewCustomerReviewsPage/ViewCustomerReviewsPage.jsx
@@ -1,10 +1,10 @@
+import { withRouter } from '../../utils/withRouter'
 import React, { useEffect } from 'react'
 import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
 
-import Select from '@material-ui/core/Select'
-import MenuItem from '@material-ui/core/MenuItem'
-import Button from '@material-ui/core/Button'
+import Select from '@mui/material/Select'
+import MenuItem from '@mui/material/MenuItem'
+import Button from '@mui/material/Button'
 
 import * as notificationActions from '../../reducers/actions/notificationActions'
 import configurationPageActions from '../../reducers/actions/configurationPageActions'
diff --git a/frontend/src/components/ViewTopicPage.jsx b/frontend/src/components/ViewTopicPage.jsx
index 14e9b88..5a0885a 100644
--- a/frontend/src/components/ViewTopicPage.jsx
+++ b/frontend/src/components/ViewTopicPage.jsx
@@ -1,6 +1,7 @@
+import { withRouter } from '../utils/withRouter'
 import React from 'react'
 import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
+
 import Topic from './Topic'
 import TopicEditPage from './TopicEditPage'
 import viewTopicPageActions from '../reducers/actions/viewTopicPageActions'
diff --git a/frontend/src/components/ViewUsersPage/ViewUsersPage.jsx b/frontend/src/components/ViewUsersPage/ViewUsersPage.jsx
index 0195697..d767a55 100644
--- a/frontend/src/components/ViewUsersPage/ViewUsersPage.jsx
+++ b/frontend/src/components/ViewUsersPage/ViewUsersPage.jsx
@@ -1,14 +1,15 @@
+import { withRouter } from '../../utils/withRouter'
 import React, { useEffect } from 'react'
 import { connect } from 'react-redux'
-import { withRouter, Link } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 
-import { Table, TableBody, TableCell, TableHead, TableRow } from '@material-ui/core'
-import Typography from '@material-ui/core/Typography'
-import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles'
+import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material'
+import Typography from '@mui/material/Typography'
+import { createTheme, ThemeProvider } from '@mui/material/styles'
 
 import * as userListActions from '../../reducers/actions/userListActions'
 
-const customTheme = createMuiTheme({
+const customTheme = createTheme({
   typography: {
     overline: {
       color: 'darkOrange',
@@ -24,9 +25,9 @@ const TopicDetailsLink = ({ topicId, ...props }) => <Link {...props} to={`/topic
 
 const AdminMarker = () => {
   return (
-    <MuiThemeProvider theme={customTheme}>
+    <ThemeProvider theme={customTheme}>
       <Typography variant="overline">Currently admin</Typography>
-    </MuiThemeProvider>
+    </ThemeProvider>
   )
 }
 
diff --git a/frontend/src/components/common/CheckboxMultiSelect.jsx b/frontend/src/components/common/CheckboxMultiSelect.jsx
index 1d9cadb..458c8da 100644
--- a/frontend/src/components/common/CheckboxMultiSelect.jsx
+++ b/frontend/src/components/common/CheckboxMultiSelect.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Checkbox, FormControlLabel, FormGroup } from '@material-ui/core'
+import { Checkbox, FormControlLabel, FormGroup } from '@mui/material'
 
 const CheckboxMultiSelect = ({ allItems, selectedItems, setSelectedItems, isHorizontal }) => {
   const allSelected = selectedItems.length === allItems.length
diff --git a/frontend/src/components/common/ConfirmationDialog.jsx b/frontend/src/components/common/ConfirmationDialog.jsx
index fe012c4..6e038bd 100644
--- a/frontend/src/components/common/ConfirmationDialog.jsx
+++ b/frontend/src/components/common/ConfirmationDialog.jsx
@@ -1,9 +1,9 @@
 import React from 'react'
-import Button from '@material-ui/core/Button'
-import Dialog from '@material-ui/core/Dialog'
-import DialogActions from '@material-ui/core/DialogActions'
-import DialogContent from '@material-ui/core/DialogContent'
-import DialogTitle from '@material-ui/core/DialogTitle'
+import Button from '@mui/material/Button'
+import Dialog from '@mui/material/Dialog'
+import DialogActions from '@mui/material/DialogActions'
+import DialogContent from '@mui/material/DialogContent'
+import DialogTitle from '@mui/material/DialogTitle'
 
 const ConfirmationDialog = (props) => {
   const { title, children, open, setOpen, onConfirm } = props
diff --git a/frontend/src/components/common/LoadingCover.jsx b/frontend/src/components/common/LoadingCover.jsx
index 85584bc..87da9cc 100644
--- a/frontend/src/components/common/LoadingCover.jsx
+++ b/frontend/src/components/common/LoadingCover.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import LinearProgress from '@material-ui/core/LinearProgress'
+import LinearProgress from '@mui/material/LinearProgress'
 
 import { classes } from '../util'
 import './LoadingCover.css'
diff --git a/frontend/src/components/common/LoadingSpinner.jsx b/frontend/src/components/common/LoadingSpinner.jsx
index 864430b..b5ce584 100644
--- a/frontend/src/components/common/LoadingSpinner.jsx
+++ b/frontend/src/components/common/LoadingSpinner.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import CircularProgress from '@material-ui/core/CircularProgress'
+import CircularProgress from '@mui/material/CircularProgress'
 import './LoadingSpinner.css'
 
 const LoadingSpinner = () => {
diff --git a/frontend/src/components/common/NavigationBar.jsx b/frontend/src/components/common/NavigationBar.jsx
index f450d77..751b031 100644
--- a/frontend/src/components/common/NavigationBar.jsx
+++ b/frontend/src/components/common/NavigationBar.jsx
@@ -1,18 +1,19 @@
+import { withRouter } from '../../utils/withRouter'
 import React, { Fragment, useContext } from 'react'
 import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
+
 import { updateRole } from '../../services/dev'
 import * as userActions from '../../reducers/actions/userActions'
 import myGroupActions from '../../reducers/actions/myGroupActions'
 import registrationmanagementActions from '../../reducers/actions/registrationManagementActions'
-import AppBar from '@material-ui/core/AppBar'
-import Toolbar from '@material-ui/core/Toolbar'
-import Button from '@material-ui/core/Button'
-import Typography from '@material-ui/core/Typography'
-import AccountCircle from '@material-ui/icons/AccountCircle'
-import GroupIcon from '@material-ui/icons/Group'
-import Brightness4RoundedIcon from '@material-ui/icons/Brightness4Rounded'
-import Brightness7RoundedIcon from '@material-ui/icons/Brightness7Rounded'
+import AppBar from '@mui/material/AppBar'
+import Toolbar from '@mui/material/Toolbar'
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+import AccountCircle from '@mui/icons-material/AccountCircle'
+import GroupIcon from '@mui/icons-material/Group'
+import Brightness4RoundedIcon from '@mui/icons-material/Brightness4Rounded'
+import Brightness7RoundedIcon from '@mui/icons-material/Brightness7Rounded'
 import NavigationMenu from './NavigationMenu'
 import {
   regularItems,
diff --git a/frontend/src/components/common/NavigationMenu.jsx b/frontend/src/components/common/NavigationMenu.jsx
index 2c5675c..9e6b92f 100644
--- a/frontend/src/components/common/NavigationMenu.jsx
+++ b/frontend/src/components/common/NavigationMenu.jsx
@@ -1,12 +1,12 @@
 import React from 'react'
-import IconButton from '@material-ui/core/IconButton'
-import ClickAwayListener from '@material-ui/core/ClickAwayListener'
-import Grow from '@material-ui/core/Grow'
-import Paper from '@material-ui/core/Paper'
-import Popper from '@material-ui/core/Popper'
-import MenuItem from '@material-ui/core/MenuItem'
-import MenuList from '@material-ui/core/MenuList'
-import MenuIcon from '@material-ui/icons/Menu'
+import IconButton from '@mui/material/IconButton'
+import ClickAwayListener from '@mui/material/ClickAwayListener'
+import Grow from '@mui/material/Grow'
+import Paper from '@mui/material/Paper'
+import Popper from '@mui/material/Popper'
+import MenuItem from '@mui/material/MenuItem'
+import MenuList from '@mui/material/MenuList'
+import MenuIcon from '@mui/icons-material/Menu'
 import './NavigationBar.css'
 
 class NavigationMenu extends React.Component {
diff --git a/frontend/src/components/common/Notification.jsx b/frontend/src/components/common/Notification.jsx
index f6a8e46..b70be88 100644
--- a/frontend/src/components/common/Notification.jsx
+++ b/frontend/src/components/common/Notification.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import Snackbar from '@material-ui/core/Snackbar'
-import SnackbarContent from '@material-ui/core/SnackbarContent'
+import Snackbar from '@mui/material/Snackbar'
+import SnackbarContent from '@mui/material/SnackbarContent'
 
 import { clearNotifications } from '../../reducers/actions/notificationActions'
 
diff --git a/frontend/src/components/common/StudentSelectionForm.jsx b/frontend/src/components/common/StudentSelectionForm.jsx
index 727d525..9c55d85 100644
--- a/frontend/src/components/common/StudentSelectionForm.jsx
+++ b/frontend/src/components/common/StudentSelectionForm.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
-import MenuItem from '@material-ui/core/MenuItem'
-import Typography from '@material-ui/core/Typography'
-import Select from '@material-ui/core/Select'
+import MenuItem from '@mui/material/MenuItem'
+import Typography from '@mui/material/Typography'
+import Select from '@mui/material/Select'
 
 export const StudentSelectionForm = ({
   configurations,
diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx
index 6748ec9..4c992b8 100644
--- a/frontend/src/index.jsx
+++ b/frontend/src/index.jsx
@@ -1,12 +1,13 @@
 import React, { useState } from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import './index.css'
 import { Provider } from 'react-redux'
 import App from './App'
 import store from './reducers/store'
-import { MuiThemeProvider, createTheme } from '@material-ui/core/styles'
-import amber from '@material-ui/core/colors/amber'
-import CssBaseline from '@material-ui/core/CssBaseline'
+import { ThemeProvider, createTheme } from '@mui/material/styles'
+import { amber } from '@mui/material/colors'
+import { ThemeProvider as LegacyThemeProvider } from '@mui/styles'
+import CssBaseline from '@mui/material/CssBaseline'
 import { ColorModeContext } from './context/ColorModeContext'
 
 const getInitialMode = () => {
@@ -20,7 +21,7 @@ const Root = () => {
 
   const theme = createTheme({
     palette: {
-      type: isDark ? 'dark' : 'light',
+      mode: isDark ? 'dark' : 'light',
       primary: {
         main: '#fdd835',
       },
@@ -30,7 +31,6 @@ const Root = () => {
       },
     },
     typography: {
-      useNextVariants: true,
       h1: {
         marginTop: '0.67em',
         marginBottom: '0.67em',
@@ -63,9 +63,9 @@ const Root = () => {
         stroke: isDark ? '#ffffff' : '#4d4d4d',
       },
     },
-    overrides: {
+    components: {
       MuiCssBaseline: {
-        '@global': {
+        styleOverrides: {
           a: {
             color: isDark ? '#78c3ff' : '',
           },
@@ -75,16 +75,22 @@ const Root = () => {
         },
       },
       MuiTableCell: {
-        head: {
-          backgroundColor: isDark ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.02)',
-        },
-        body: {
-          backgroundColor: isDark ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.01)',
+        styleOverrides: {
+          head: {
+            backgroundColor: isDark ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.02)',
+          },
+          body: {
+            backgroundColor: isDark ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.01)',
+          },
         },
       },
       MuiTableRow: {
-        '&:hover': {
-          backgroundColor: isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.04)',
+        styleOverrides: {
+          root: {
+            '&:hover': {
+              backgroundColor: isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.04)',
+            },
+          },
         },
       },
     },
@@ -93,16 +99,19 @@ const Root = () => {
   return (
     <Provider store={store}>
       <ColorModeContext.Provider value={{ mode: themeMode, setMode: setThemeMode }}>
-        <MuiThemeProvider theme={theme}>
-          <CssBaseline />
-          <App />
-        </MuiThemeProvider>
+        <ThemeProvider theme={theme}>
+          <LegacyThemeProvider theme={theme}>
+            <CssBaseline />
+            <App />
+          </LegacyThemeProvider>
+        </ThemeProvider>
       </ColorModeContext.Provider>
     </Provider>
   )
 }
 
-ReactDOM.render(<Root />, document.getElementById('root'))
+const root = createRoot(document.getElementById('root'))
+root.render(<Root />)
 
 if (window.Cypress) {
   window.store = store
diff --git a/frontend/src/utils/protectedRoutes.jsx b/frontend/src/utils/protectedRoutes.jsx
index bf05fa3..e07fb96 100644
--- a/frontend/src/utils/protectedRoutes.jsx
+++ b/frontend/src/utils/protectedRoutes.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Route, Link } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 import { connect } from 'react-redux'
 
 const mapStateToProps = (state) => {
@@ -17,35 +17,20 @@ const Unauthorized = () => (
   </div>
 )
 
-export const AdminRoute = connect(mapStateToProps)(({ render: Component, user, ...rest }) => (
-  <Route
-    {...rest}
-    render={(props) => {
-      if (user) {
-        return user.user.admin ? <Component {...props} /> : <Unauthorized />
-      }
-      return null
-    }}
-  />
-))
+export const AdminRoute = connect(mapStateToProps)(({ render: Component, user }) => {
+  if (user) {
+    return user.user.admin ? <Component /> : <Unauthorized />
+  }
+  return null
+})
 
-export const InstructorRoute = connect(mapStateToProps)(({ render: Component, user, ...rest }) => (
-  <Route
-    {...rest}
-    render={(props) => {
-      if (user) {
-        return user.user.instructor || user.user.admin ? <Component {...props} /> : <Unauthorized />
-      }
-      return null
-    }}
-  />
-))
+export const InstructorRoute = connect(mapStateToProps)(({ render: Component, user }) => {
+  if (user) {
+    return user.user.instructor || user.user.admin ? <Component /> : <Unauthorized />
+  }
+  return null
+})
 
-export const LoginRoute = connect(mapStateToProps)(({ render: Component, user, ...rest }) => (
-  <Route
-    {...rest}
-    render={(props) => {
-      return user ? <Component {...props} /> : null
-    }}
-  />
-))
+export const LoginRoute = connect(mapStateToProps)(({ render: Component, user }) => {
+  return user ? <Component /> : null
+})
diff --git a/frontend/src/utils/withRouter.jsx b/frontend/src/utils/withRouter.jsx
new file mode 100644
index 0000000..fd58b29
--- /dev/null
+++ b/frontend/src/utils/withRouter.jsx
@@ -0,0 +1,23 @@
+import { useLocation, useNavigate, useParams } from 'react-router-dom'
+
+export function withRouter(Component) {
+  function ComponentWithRouterProp(props) {
+    let location = useLocation()
+    let navigate = useNavigate()
+    let params = useParams()
+
+    return (
+      <Component
+        {...props}
+        location={location}
+        history={{
+          push: navigate,
+          replace: (path) => navigate(path, { replace: true }),
+          location: location,
+        }}
+        match={{ params }}
+      />
+    )
+  }
+  return ComponentWithRouterProp
+}