diff --git a/src/App.js b/src/App.js
index 908aae7..0aca651 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,5 @@
 import React from "react";
 import { Admin, Resource, resolveBrowserLocale } from "react-admin";
-import { StylesProvider, createGenerateClassName } from "@mui/styles";
-import { createTheme, ThemeProvider } from "@mui/material/styles";
 import polyglotI18nProvider from "ra-i18n-polyglot";
 import authProvider from "./synapse/authProvider";
 import dataProvider from "./synapse/dataProvider";
@@ -43,84 +41,65 @@ const i18nProvider = polyglotI18nProvider(
   resolveBrowserLocale()
 );
 
-const theme = createTheme();
-const generateClassName = createGenerateClassName({
-  disableGlobal: true,
-  seed: "mui-jss",
-});
-
 const App = () => (
-  <StylesProvider generateClassName={generateClassName}>
-    <ThemeProvider theme={theme}>
-      <Admin
-        disableTelemetry
-        loginPage={LoginPage}
-        authProvider={authProvider}
-        dataProvider={dataProvider}
-        i18nProvider={i18nProvider}
-        customRoutes={[
-          <Route
-            key="userImport"
-            path="/import_users"
-            component={ImportFeature}
-          />,
-        ]}
-      >
-        <Resource
-          name="users"
-          list={UserList}
-          create={UserCreate}
-          edit={UserEdit}
-          icon={UserIcon}
-        />
-        <Resource
-          name="rooms"
-          list={RoomList}
-          show={RoomShow}
-          icon={RoomIcon}
-        />
-        <Resource
-          name="user_media_statistics"
-          list={UserMediaStatsList}
-          icon={EqualizerIcon}
-        />
-        <Resource
-          name="reports"
-          list={ReportList}
-          show={ReportShow}
-          icon={ReportIcon}
-        />
-        <Resource
-          name="room_directory"
-          list={RoomDirectoryList}
-          icon={FolderSharedIcon}
-        />
-        <Resource
-          name="destinations"
-          list={DestinationList}
-          show={DestinationShow}
-          icon={CloudQueueIcon}
-        />
-        <Resource
-          name="registration_tokens"
-          list={RegistrationTokenList}
-          create={RegistrationTokenCreate}
-          edit={RegistrationTokenEdit}
-          icon={ConfirmationNumberIcon}
-        />
-        <Resource name="connections" />
-        <Resource name="devices" />
-        <Resource name="room_members" />
-        <Resource name="users_media" />
-        <Resource name="joined_rooms" />
-        <Resource name="pushers" />
-        <Resource name="servernotices" />
-        <Resource name="forward_extremities" />
-        <Resource name="room_state" />
-        <Resource name="destination_rooms" />
-      </Admin>
-    </ThemeProvider>
-  </StylesProvider>
+  <Admin
+    disableTelemetry
+    loginPage={LoginPage}
+    authProvider={authProvider}
+    dataProvider={dataProvider}
+    i18nProvider={i18nProvider}
+    customRoutes={[
+      <Route key="userImport" path="/import_users" component={ImportFeature} />,
+    ]}
+  >
+    <Resource
+      name="users"
+      list={UserList}
+      create={UserCreate}
+      edit={UserEdit}
+      icon={UserIcon}
+    />
+    <Resource name="rooms" list={RoomList} show={RoomShow} icon={RoomIcon} />
+    <Resource
+      name="user_media_statistics"
+      list={UserMediaStatsList}
+      icon={EqualizerIcon}
+    />
+    <Resource
+      name="reports"
+      list={ReportList}
+      show={ReportShow}
+      icon={ReportIcon}
+    />
+    <Resource
+      name="room_directory"
+      list={RoomDirectoryList}
+      icon={FolderSharedIcon}
+    />
+    <Resource
+      name="destinations"
+      list={DestinationList}
+      show={DestinationShow}
+      icon={CloudQueueIcon}
+    />
+    <Resource
+      name="registration_tokens"
+      list={RegistrationTokenList}
+      create={RegistrationTokenCreate}
+      edit={RegistrationTokenEdit}
+      icon={ConfirmationNumberIcon}
+    />
+    <Resource name="connections" />
+    <Resource name="devices" />
+    <Resource name="room_members" />
+    <Resource name="users_media" />
+    <Resource name="joined_rooms" />
+    <Resource name="pushers" />
+    <Resource name="servernotices" />
+    <Resource name="forward_extremities" />
+    <Resource name="room_state" />
+    <Resource name="destination_rooms" />
+  </Admin>
 );
 
 export default App;
diff --git a/src/components/LoginPage.js b/src/components/LoginPage.js
index c579fa5..84c1538 100644
--- a/src/components/LoginPage.js
+++ b/src/components/LoginPage.js
@@ -22,7 +22,7 @@ import {
   Select,
   TextField,
 } from "@mui/material";
-import { makeStyles } from "@mui/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import LockIcon from "@mui/icons-material/Lock";
 
 const useStyles = makeStyles(theme => ({
diff --git a/src/components/LoginPage.test.js b/src/components/LoginPage.test.js
index 047486a..c6e1da5 100644
--- a/src/components/LoginPage.test.js
+++ b/src/components/LoginPage.test.js
@@ -4,16 +4,12 @@ import { TestContext } from "ra-test";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import LoginPage from "./LoginPage";
 
-const theme = createTheme();
-
 describe("LoginForm", () => {
   it("renders", () => {
     render(
-      <ThemeProvider theme={theme}>
-        <TestContext>
-          <LoginPage />
-        </TestContext>
-      </ThemeProvider>
+      <TestContext>
+        <LoginPage />
+      </TestContext>
     );
   });
 });
diff --git a/src/components/devices.js b/src/components/devices.js
index 5cd3788..b3473d3 100644
--- a/src/components/devices.js
+++ b/src/components/devices.js
@@ -8,7 +8,7 @@ import {
   useRefresh,
 } from "react-admin";
 import ActionDelete from "@mui/icons-material/Delete";
-import { makeStyles } from "@mui/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import { alpha } from "@mui/material/styles";
 import classnames from "classnames";
 
diff --git a/src/components/media.js b/src/components/media.js
index de6cbcc..09a1377 100644
--- a/src/components/media.js
+++ b/src/components/media.js
@@ -1,7 +1,7 @@
 import React, { Fragment, useState } from "react";
 import classnames from "classnames";
 import { alpha } from "@mui/material/styles";
-import { makeStyles } from "@mui/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import {
   BooleanInput,
   Button,