diff --git a/client/package-lock.json b/client/package-lock.json
index f58f9e0843..801b072131 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -9,9 +9,9 @@
             "version": "0.9.0",
             "dependencies": {
                 "@lumieducation/h5p-react": "9.2.0",
-                "@material-ui/core": "4.12.4",
                 "@material-ui/icons": "4.11.3",
                 "@material-ui/styles": "4.11.5",
+                "@mui/material": "5.0.0",
                 "@sentry/browser": "7.51.2",
                 "@sentry/react": "7.51.2",
                 "clsx": "1.2.1",
@@ -2011,11 +2011,11 @@
             }
         },
         "node_modules/@babel/runtime": {
-            "version": "7.18.3",
-            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.3.tgz",
-            "integrity": "sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==",
+            "version": "7.23.9",
+            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz",
+            "integrity": "sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==",
             "dependencies": {
-                "regenerator-runtime": "^0.13.4"
+                "regenerator-runtime": "^0.14.0"
             },
             "engines": {
                 "node": ">=6.9.0"
@@ -2034,6 +2034,11 @@
                 "node": ">=6.9.0"
             }
         },
+        "node_modules/@babel/runtime/node_modules/regenerator-runtime": {
+            "version": "0.14.1",
+            "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+            "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+        },
         "node_modules/@babel/template": {
             "version": "7.16.7",
             "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz",
@@ -2334,11 +2339,51 @@
                 "postcss-selector-parser": "^6.0.10"
             }
         },
+        "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=="
         },
+        "node_modules/@emotion/is-prop-valid": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
+            "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
+            "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/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/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/eslintrc": {
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz",
@@ -3030,6 +3075,8 @@
             "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.",
+            "peer": true,
             "dependencies": {
                 "@babel/runtime": "^7.4.4",
                 "@material-ui/styles": "^4.11.5",
@@ -3128,6 +3175,7 @@
             "version": "4.12.2",
             "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.12.2.tgz",
             "integrity": "sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==",
+            "peer": true,
             "dependencies": {
                 "@babel/runtime": "^7.4.4",
                 "@material-ui/utils": "^4.11.3",
@@ -3182,6 +3230,242 @@
                 "react-dom": "^16.8.0 || ^17.0.0"
             }
         },
+        "node_modules/@mui/core": {
+            "version": "5.0.0-alpha.47",
+            "resolved": "https://registry.npmjs.org/@mui/core/-/core-5.0.0-alpha.47.tgz",
+            "integrity": "sha512-/GCIWOq+ydeY8HTWexrvQw7OsmRRvdzW+BB4vQ+V6alaECKSXPQrTDuQtd+lgI2il4p7uhPIKIqjcaAZ/FaNHA==",
+            "deprecated": "You can now upgrade to @mui/base. See https://github.com/mui/material-ui/releases/tag/v5.1.1",
+            "dependencies": {
+                "@babel/runtime": "^7.14.8",
+                "@emotion/is-prop-valid": "^1.1.0",
+                "@mui/utils": "^5.0.0",
+                "clsx": "^1.1.1",
+                "prop-types": "^15.7.2",
+                "react-is": "^17.0.2"
+            },
+            "engines": {
+                "node": ">=12.0.0"
+            },
+            "peerDependencies": {
+                "@types/react": "^16.8.6 || ^17.0.0",
+                "react": "^17.0.2",
+                "react-dom": "^17.0.2"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@mui/material": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.0.0.tgz",
+            "integrity": "sha512-XZNPYQocFyS2Q8Wc7PMudazKa8VDaXADK9PxUfOF6Q0GQNXjLkOn1vRWlyF9EOZQ4QLbgJHyHDlH7ELBN0CA0w==",
+            "dependencies": {
+                "@babel/runtime": "^7.14.8",
+                "@mui/core": "5.0.0-alpha.47",
+                "@mui/system": "^5.0.0",
+                "@mui/types": "^7.0.0",
+                "@mui/utils": "^5.0.0",
+                "@popperjs/core": "^2.4.4",
+                "@types/react-transition-group": "^4.4.2",
+                "clsx": "^1.1.1",
+                "csstype": "^3.0.8",
+                "hoist-non-react-statics": "^3.3.2",
+                "prop-types": "^15.7.2",
+                "react-is": "^17.0.2",
+                "react-transition-group": "^4.4.2"
+            },
+            "engines": {
+                "node": ">=12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/material-ui"
+            },
+            "peerDependencies": {
+                "@emotion/react": "^11.4.1",
+                "@emotion/styled": "^11.3.0",
+                "@types/react": "^16.8.6 || ^17.0.0",
+                "react": "^17.0.2",
+                "react-dom": "^17.0.2"
+            },
+            "peerDependenciesMeta": {
+                "@emotion/react": {
+                    "optional": true
+                },
+                "@emotion/styled": {
+                    "optional": true
+                },
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@mui/material/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/@mui/private-theming": {
+            "version": "5.15.6",
+            "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.6.tgz",
+            "integrity": "sha512-ZBX9E6VNUSscUOtU8uU462VvpvBS7eFl5VfxAzTRVQBHflzL+5KtnGrebgf6Nd6cdvxa1o0OomiaxSKoN2XDmg==",
+            "dependencies": {
+                "@babel/runtime": "^7.23.8",
+                "@mui/utils": "^5.15.6",
+                "prop-types": "^15.8.1"
+            },
+            "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/@mui/styled-engine": {
+            "version": "5.15.6",
+            "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.6.tgz",
+            "integrity": "sha512-KAn8P8xP/WigFKMlEYUpU9z2o7jJnv0BG28Qu1dhNQVutsLVIFdRf5Nb+0ijp2qgtcmygQ0FtfRuXv5LYetZTg==",
+            "dependencies": {
+                "@babel/runtime": "^7.23.8",
+                "@emotion/cache": "^11.11.0",
+                "csstype": "^3.1.2",
+                "prop-types": "^15.8.1"
+            },
+            "engines": {
+                "node": ">=12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/mui-org"
+            },
+            "peerDependencies": {
+                "@emotion/react": "^11.4.1",
+                "@emotion/styled": "^11.3.0",
+                "react": "^17.0.0 || ^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@emotion/react": {
+                    "optional": true
+                },
+                "@emotion/styled": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@mui/styled-engine/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/@mui/system": {
+            "version": "5.15.6",
+            "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.6.tgz",
+            "integrity": "sha512-J01D//u8IfXvaEHMBQX5aO2l7Q+P15nt96c4NskX7yp5/+UuZP8XCQJhtBtLuj+M2LLyXHYGmCPeblsmmscP2Q==",
+            "dependencies": {
+                "@babel/runtime": "^7.23.8",
+                "@mui/private-theming": "^5.15.6",
+                "@mui/styled-engine": "^5.15.6",
+                "@mui/types": "^7.2.13",
+                "@mui/utils": "^5.15.6",
+                "clsx": "^2.1.0",
+                "csstype": "^3.1.2",
+                "prop-types": "^15.8.1"
+            },
+            "engines": {
+                "node": ">=12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/mui-org"
+            },
+            "peerDependencies": {
+                "@emotion/react": "^11.5.0",
+                "@emotion/styled": "^11.3.0",
+                "@types/react": "^17.0.0 || ^18.0.0",
+                "react": "^17.0.0 || ^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@emotion/react": {
+                    "optional": true
+                },
+                "@emotion/styled": {
+                    "optional": true
+                },
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@mui/system/node_modules/clsx": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
+            "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@mui/system/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/@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/@mui/utils": {
+            "version": "5.15.6",
+            "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.6.tgz",
+            "integrity": "sha512-qfEhf+zfU9aQdbzo1qrSWlbPQhH1nCgeYgwhOVnj9Bn39shJQitEnXpSQpSNag8+uty5Od6PxmlNKPTnPySRKA==",
+            "dependencies": {
+                "@babel/runtime": "^7.23.8",
+                "@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/@mui/utils/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=="
+        },
         "node_modules/@nodelib/fs.scandir": {
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -3346,6 +3630,15 @@
                 "node": ">= 8"
             }
         },
+        "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/@remix-run/router": {
             "version": "1.6.1",
             "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.1.tgz",
@@ -4106,9 +4399,9 @@
             "dev": true
         },
         "node_modules/@types/prop-types": {
-            "version": "15.7.5",
-            "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
-            "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
+            "version": "15.7.11",
+            "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
+            "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng=="
         },
         "node_modules/@types/q": {
             "version": "1.5.5",
@@ -12801,7 +13094,8 @@
         "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=="
+            "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==",
+            "peer": true
         },
         "node_modules/postcss": {
             "version": "8.4.14",
@@ -14794,7 +15088,8 @@
         "node_modules/regenerator-runtime": {
             "version": "0.13.9",
             "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-            "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+            "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
+            "dev": true
         },
         "node_modules/regenerator-transform": {
             "version": "0.15.0",
@@ -16060,6 +16355,11 @@
                 "postcss": "^8.2.15"
             }
         },
+        "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.0.9",
             "resolved": "https://registry.npmjs.org/superagent/-/superagent-8.0.9.tgz",
@@ -19247,11 +19547,18 @@
             }
         },
         "@babel/runtime": {
-            "version": "7.18.3",
-            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.3.tgz",
-            "integrity": "sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==",
+            "version": "7.23.9",
+            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz",
+            "integrity": "sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==",
             "requires": {
-                "regenerator-runtime": "^0.13.4"
+                "regenerator-runtime": "^0.14.0"
+            },
+            "dependencies": {
+                "regenerator-runtime": {
+                    "version": "0.14.1",
+                    "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+                    "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+                }
             }
         },
         "@babel/runtime-corejs3": {
@@ -19441,11 +19748,51 @@
             "dev": true,
             "requires": {}
         },
+        "@emotion/cache": {
+            "version": "11.11.0",
+            "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+            "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
+            "requires": {
+                "@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"
+            }
+        },
         "@emotion/hash": {
             "version": "0.8.0",
             "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
             "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
         },
+        "@emotion/is-prop-valid": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
+            "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
+            "requires": {
+                "@emotion/memoize": "^0.8.1"
+            }
+        },
+        "@emotion/memoize": {
+            "version": "0.8.1",
+            "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+            "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+        },
+        "@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=="
+        },
+        "@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=="
+        },
+        "@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=="
+        },
         "@eslint/eslintrc": {
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz",
@@ -20005,6 +20352,7 @@
             "version": "4.12.4",
             "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.4.tgz",
             "integrity": "sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==",
+            "peer": true,
             "requires": {
                 "@babel/runtime": "^7.4.4",
                 "@material-ui/styles": "^4.11.5",
@@ -20055,6 +20403,7 @@
             "version": "4.12.2",
             "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.12.2.tgz",
             "integrity": "sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==",
+            "peer": true,
             "requires": {
                 "@babel/runtime": "^7.4.4",
                 "@material-ui/utils": "^4.11.3",
@@ -20078,6 +20427,125 @@
                 "react-is": "^16.8.0 || ^17.0.0"
             }
         },
+        "@mui/core": {
+            "version": "5.0.0-alpha.47",
+            "resolved": "https://registry.npmjs.org/@mui/core/-/core-5.0.0-alpha.47.tgz",
+            "integrity": "sha512-/GCIWOq+ydeY8HTWexrvQw7OsmRRvdzW+BB4vQ+V6alaECKSXPQrTDuQtd+lgI2il4p7uhPIKIqjcaAZ/FaNHA==",
+            "requires": {
+                "@babel/runtime": "^7.14.8",
+                "@emotion/is-prop-valid": "^1.1.0",
+                "@mui/utils": "^5.0.0",
+                "clsx": "^1.1.1",
+                "prop-types": "^15.7.2",
+                "react-is": "^17.0.2"
+            }
+        },
+        "@mui/material": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.0.0.tgz",
+            "integrity": "sha512-XZNPYQocFyS2Q8Wc7PMudazKa8VDaXADK9PxUfOF6Q0GQNXjLkOn1vRWlyF9EOZQ4QLbgJHyHDlH7ELBN0CA0w==",
+            "requires": {
+                "@babel/runtime": "^7.14.8",
+                "@mui/core": "5.0.0-alpha.47",
+                "@mui/system": "^5.0.0",
+                "@mui/types": "^7.0.0",
+                "@mui/utils": "^5.0.0",
+                "@popperjs/core": "^2.4.4",
+                "@types/react-transition-group": "^4.4.2",
+                "clsx": "^1.1.1",
+                "csstype": "^3.0.8",
+                "hoist-non-react-statics": "^3.3.2",
+                "prop-types": "^15.7.2",
+                "react-is": "^17.0.2",
+                "react-transition-group": "^4.4.2"
+            },
+            "dependencies": {
+                "csstype": {
+                    "version": "3.1.3",
+                    "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+                    "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+                }
+            }
+        },
+        "@mui/private-theming": {
+            "version": "5.15.6",
+            "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.6.tgz",
+            "integrity": "sha512-ZBX9E6VNUSscUOtU8uU462VvpvBS7eFl5VfxAzTRVQBHflzL+5KtnGrebgf6Nd6cdvxa1o0OomiaxSKoN2XDmg==",
+            "requires": {
+                "@babel/runtime": "^7.23.8",
+                "@mui/utils": "^5.15.6",
+                "prop-types": "^15.8.1"
+            }
+        },
+        "@mui/styled-engine": {
+            "version": "5.15.6",
+            "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.6.tgz",
+            "integrity": "sha512-KAn8P8xP/WigFKMlEYUpU9z2o7jJnv0BG28Qu1dhNQVutsLVIFdRf5Nb+0ijp2qgtcmygQ0FtfRuXv5LYetZTg==",
+            "requires": {
+                "@babel/runtime": "^7.23.8",
+                "@emotion/cache": "^11.11.0",
+                "csstype": "^3.1.2",
+                "prop-types": "^15.8.1"
+            },
+            "dependencies": {
+                "csstype": {
+                    "version": "3.1.3",
+                    "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+                    "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+                }
+            }
+        },
+        "@mui/system": {
+            "version": "5.15.6",
+            "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.6.tgz",
+            "integrity": "sha512-J01D//u8IfXvaEHMBQX5aO2l7Q+P15nt96c4NskX7yp5/+UuZP8XCQJhtBtLuj+M2LLyXHYGmCPeblsmmscP2Q==",
+            "requires": {
+                "@babel/runtime": "^7.23.8",
+                "@mui/private-theming": "^5.15.6",
+                "@mui/styled-engine": "^5.15.6",
+                "@mui/types": "^7.2.13",
+                "@mui/utils": "^5.15.6",
+                "clsx": "^2.1.0",
+                "csstype": "^3.1.2",
+                "prop-types": "^15.8.1"
+            },
+            "dependencies": {
+                "clsx": {
+                    "version": "2.1.0",
+                    "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
+                    "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg=="
+                },
+                "csstype": {
+                    "version": "3.1.3",
+                    "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+                    "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+                }
+            }
+        },
+        "@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==",
+            "requires": {}
+        },
+        "@mui/utils": {
+            "version": "5.15.6",
+            "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.6.tgz",
+            "integrity": "sha512-qfEhf+zfU9aQdbzo1qrSWlbPQhH1nCgeYgwhOVnj9Bn39shJQitEnXpSQpSNag8+uty5Od6PxmlNKPTnPySRKA==",
+            "requires": {
+                "@babel/runtime": "^7.23.8",
+                "@types/prop-types": "^15.7.11",
+                "prop-types": "^15.8.1",
+                "react-is": "^18.2.0"
+            },
+            "dependencies": {
+                "react-is": {
+                    "version": "18.2.0",
+                    "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+                    "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+                }
+            }
+        },
         "@nodelib/fs.scandir": {
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -20172,6 +20640,11 @@
                 }
             }
         },
+        "@popperjs/core": {
+            "version": "2.11.8",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+            "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
+        },
         "@remix-run/router": {
             "version": "1.6.1",
             "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.1.tgz",
@@ -20770,9 +21243,9 @@
             "dev": true
         },
         "@types/prop-types": {
-            "version": "15.7.5",
-            "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
-            "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
+            "version": "15.7.11",
+            "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
+            "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng=="
         },
         "@types/q": {
             "version": "1.5.5",
@@ -27354,7 +27827,8 @@
         "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=="
+            "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==",
+            "peer": true
         },
         "postcss": {
             "version": "8.4.14",
@@ -28659,7 +29133,8 @@
         "regenerator-runtime": {
             "version": "0.13.9",
             "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-            "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+            "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
+            "dev": true
         },
         "regenerator-transform": {
             "version": "0.15.0",
@@ -29617,6 +30092,11 @@
                 "postcss-selector-parser": "^6.0.4"
             }
         },
+        "stylis": {
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+            "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+        },
         "superagent": {
             "version": "8.0.9",
             "resolved": "https://registry.npmjs.org/superagent/-/superagent-8.0.9.tgz",
diff --git a/client/package.json b/client/package.json
index 092f7d05bc..9b244ee073 100644
--- a/client/package.json
+++ b/client/package.json
@@ -4,7 +4,7 @@
     "private": true,
     "dependencies": {
         "@lumieducation/h5p-react": "9.2.0",
-        "@material-ui/core": "4.12.4",
+        "@mui/material": "5.0.0",
         "@material-ui/icons": "4.11.3",
         "@material-ui/styles": "4.11.5",
         "@sentry/browser": "7.51.2",
diff --git a/reporter-client/package.json b/reporter-client/package.json
index 3668f05cbb..1193d8cd56 100644
--- a/reporter-client/package.json
+++ b/reporter-client/package.json
@@ -3,7 +3,7 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
-        "@material-ui/core": "4.12.4",
+        "@mui/material": "5.0.0",
         "@material-ui/icons": "4.11.3",
         "@material-ui/styles": "^4.11.5",
         "react": "18.1.0",