diff --git a/package.json b/package.json
index fd9c2a08..5cd829b4 100644
--- a/package.json
+++ b/package.json
@@ -28,9 +28,7 @@
     "@emotion/styled": "^11.3.0",
     "@fontsource/roboto": "^4.3.0",
     "@mui/icons-material": "^5.0.5",
-    "@mui/lab": "^5.0.0-alpha.53",
     "@mui/material": "^5.0.6",
-    "@mui/system": "^5.0.6",
     "axios": "^1.4.0",
     "file-selector": "^0.2.4",
     "i18next": "^22.4.9",
diff --git a/src/components/ExtensionCard.tsx b/src/components/ExtensionCard.tsx
index f9a2b009..1bf7b3ac 100644
--- a/src/components/ExtensionCard.tsx
+++ b/src/components/ExtensionCard.tsx
@@ -12,7 +12,7 @@ import CardContent from '@mui/material/CardContent';
 import Button from '@mui/material/Button';
 import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
-import { Box } from '@mui/system';
+import { Box } from '@mui/material';
 import { IExtension, TranslationKey } from 'typings';
 import { useTranslation } from 'react-i18next';
 import requestManager from 'lib/RequestManager';
diff --git a/src/components/MangaCard.tsx b/src/components/MangaCard.tsx
index 4e1e4b96..440f2ed3 100644
--- a/src/components/MangaCard.tsx
+++ b/src/components/MangaCard.tsx
@@ -11,10 +11,9 @@ import Card from '@mui/material/Card';
 import CardActionArea from '@mui/material/CardActionArea';
 import Typography from '@mui/material/Typography';
 import { Link } from 'react-router-dom';
-import { Avatar, CardContent, Grid } from '@mui/material';
+import { Avatar, CardContent, Grid, Box, styled } from '@mui/material';
 import useLocalStorage from 'util/useLocalStorage';
 import SpinnerImage from 'components/util/SpinnerImage';
-import { Box, styled } from '@mui/system';
 import { GridLayout, useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
 import { BACK } from 'util/useBackTo';
 import { IMangaCard } from 'typings';
diff --git a/src/components/MangaGrid.tsx b/src/components/MangaGrid.tsx
index b98e9c60..14758655 100644
--- a/src/components/MangaGrid.tsx
+++ b/src/components/MangaGrid.tsx
@@ -10,8 +10,7 @@ import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import Grid from '@mui/material/Grid';
 import EmptyView from 'components/util/EmptyView';
 import LoadingPlaceholder from 'components/util/LoadingPlaceholder';
-import { Typography } from '@mui/material';
-import { Box } from '@mui/system';
+import { Typography, Box } from '@mui/material';
 import MangaCard from 'components/MangaCard';
 import { GridLayout } from 'components/context/LibraryOptionsContext';
 import { IMangaCard } from 'typings';
diff --git a/src/components/SourceCard.tsx b/src/components/SourceCard.tsx
index 3ef0fa8b..5aac2373 100644
--- a/src/components/SourceCard.tsx
+++ b/src/components/SourceCard.tsx
@@ -6,13 +6,12 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { CardActionArea } from '@mui/material';
+import { CardActionArea, Box, styled } from '@mui/material';
 import Avatar from '@mui/material/Avatar';
 import Button from '@mui/material/Button';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import Typography from '@mui/material/Typography';
-import { Box, styled } from '@mui/system';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
diff --git a/src/components/library/UpdateChecker.tsx b/src/components/library/UpdateChecker.tsx
index 243f8719..06563b35 100644
--- a/src/components/library/UpdateChecker.tsx
+++ b/src/components/library/UpdateChecker.tsx
@@ -10,7 +10,7 @@ import React, { useEffect, useState } from 'react';
 import IconButton from '@mui/material/IconButton';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import CircularProgress from '@mui/material/CircularProgress';
-import { Box } from '@mui/system';
+import { Box } from '@mui/material';
 import Typography from '@mui/material/Typography';
 import makeToast from 'components/util/Toast';
 import { IUpdateStatus } from 'typings';
diff --git a/src/components/manga/ChapterList.tsx b/src/components/manga/ChapterList.tsx
index 426f8f70..137f49af 100644
--- a/src/components/manga/ChapterList.tsx
+++ b/src/components/manga/ChapterList.tsx
@@ -6,9 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Button, CircularProgress, Stack } from '@mui/material';
+import { Button, CircularProgress, Stack, styled } from '@mui/material';
 import Typography from '@mui/material/Typography';
-import { styled } from '@mui/system';
 import useSubscription from 'components/library/useSubscription';
 import ChapterCard from 'components/manga/ChapterCard';
 import ResumeFab from 'components/manga/ResumeFAB';
diff --git a/src/components/manga/SelectionFAB.tsx b/src/components/manga/SelectionFAB.tsx
index c580ee89..9d2edb55 100644
--- a/src/components/manga/SelectionFAB.tsx
+++ b/src/components/manga/SelectionFAB.tsx
@@ -7,8 +7,7 @@
  */
 
 import MoreHoriz from '@mui/icons-material/MoreHoriz';
-import { Fab, Menu } from '@mui/material';
-import { Box } from '@mui/system';
+import { Fab, Menu, Box } from '@mui/material';
 import React, { useRef, useState } from 'react';
 import type { IChapterWithMeta } from 'components/manga/ChapterList';
 import SelectionFABActionItem from 'components/manga/SelectionFABActionItem';
diff --git a/src/components/molecules/DownloadStateIndicator.tsx b/src/components/molecules/DownloadStateIndicator.tsx
index 6fe3cb82..30c1a981 100644
--- a/src/components/molecules/DownloadStateIndicator.tsx
+++ b/src/components/molecules/DownloadStateIndicator.tsx
@@ -6,9 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { CircularProgress } from '@mui/material';
+import { CircularProgress, Box } from '@mui/material';
 import Typography from '@mui/material/Typography';
-import { Box } from '@mui/system';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { IDownloadChapter, TranslationKey } from 'typings';
diff --git a/src/components/molecules/OptionsPanel.tsx b/src/components/molecules/OptionsPanel.tsx
index f7d1447c..63515c76 100644
--- a/src/components/molecules/OptionsPanel.tsx
+++ b/src/components/molecules/OptionsPanel.tsx
@@ -6,8 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Drawer } from '@mui/material';
-import { Box } from '@mui/system';
+import { Drawer, Box } from '@mui/material';
 import React from 'react';
 
 interface IProps {
diff --git a/src/components/navbar/DefaultNavBar.tsx b/src/components/navbar/DefaultNavBar.tsx
index 9b8254c5..8c59cad0 100644
--- a/src/components/navbar/DefaultNavBar.tsx
+++ b/src/components/navbar/DefaultNavBar.tsx
@@ -11,7 +11,7 @@ import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import IconButton from '@mui/material/IconButton';
-import { useMediaQuery } from '@mui/material';
+import { useMediaQuery, Box } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import CollectionsBookmarkIcon from '@mui/icons-material/CollectionsBookmark';
 import CollectionsOutlinedBookmarkIcon from '@mui/icons-material/CollectionsBookmarkOutlined';
@@ -27,7 +27,6 @@ import ArrowBack from '@mui/icons-material/ArrowBack';
 import { Link, useHistory } from 'react-router-dom';
 import NavBarContext from 'components/context/NavbarContext';
 import ExtensionOutlinedIcon from 'components/util/CustomExtensionOutlinedIcon';
-import { Box } from '@mui/system';
 import { createPortal } from 'react-dom';
 import useBackTo from 'util/useBackTo';
 import DesktopSideBar from 'components/navbar/navigation/DesktopSideBar';
diff --git a/src/components/navbar/ReaderNavBar.tsx b/src/components/navbar/ReaderNavBar.tsx
index e8df9572..cb419e7d 100644
--- a/src/components/navbar/ReaderNavBar.tsx
+++ b/src/components/navbar/ReaderNavBar.tsx
@@ -18,12 +18,11 @@ import { useHistory, useLocation } from 'react-router-dom';
 import Slide from '@mui/material/Slide';
 import Fade from '@mui/material/Fade';
 import Zoom from '@mui/material/Zoom';
-import { Divider, FormControl, MenuItem, Select } from '@mui/material';
+import { Divider, FormControl, MenuItem, Select, styled } from '@mui/material';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 import Collapse from '@mui/material/Collapse';
-import { styled } from '@mui/system';
 import useBackTo from 'util/useBackTo';
 import ReaderSettingsOptions from 'components/reader/ReaderSettingsOptions';
 import { ChapterOffset, IChapter, IManga, IMangaCard, IReaderSettings } from 'typings';
diff --git a/src/components/navbar/navigation/DesktopSideBar.tsx b/src/components/navbar/navigation/DesktopSideBar.tsx
index af590674..d04c1cc0 100644
--- a/src/components/navbar/navigation/DesktopSideBar.tsx
+++ b/src/components/navbar/navigation/DesktopSideBar.tsx
@@ -7,9 +7,8 @@
  */
 
 import React from 'react';
-import { ListItem, ListItemIcon, Tooltip } from '@mui/material';
+import { ListItem, ListItemIcon, Tooltip, styled } from '@mui/material';
 import { Link, useLocation } from 'react-router-dom';
-import { styled } from '@mui/system';
 import { useTheme } from '@mui/material/styles';
 import { NavbarItem } from 'typings';
 import { useTranslation } from 'react-i18next';
@@ -17,7 +16,7 @@ import { useTranslation } from 'react-i18next';
 const SideNavBarContainer = styled('div')(({ theme }) => ({
     height: '100vh',
     width: theme.spacing(8),
-    backgroundColor: theme.palette.custom,
+    backgroundColor: theme.palette.custom.dark,
     position: 'fixed',
     top: 0,
     left: 0,
diff --git a/src/components/navbar/navigation/MobileBottomBar.tsx b/src/components/navbar/navigation/MobileBottomBar.tsx
index a0a1db11..246081bb 100644
--- a/src/components/navbar/navigation/MobileBottomBar.tsx
+++ b/src/components/navbar/navigation/MobileBottomBar.tsx
@@ -7,8 +7,7 @@
  */
 
 import React from 'react';
-import { ListItem } from '@mui/material';
-import { styled, Box } from '@mui/system';
+import { ListItem, styled, Box } from '@mui/material';
 import { Link as RRDLink, useLocation } from 'react-router-dom';
 import { useTheme } from '@mui/material/styles';
 import { NavbarItem } from 'typings';
diff --git a/src/components/reader/DoublePage.tsx b/src/components/reader/DoublePage.tsx
index c4cd2a21..30265aec 100644
--- a/src/components/reader/DoublePage.tsx
+++ b/src/components/reader/DoublePage.tsx
@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { Box, styled } from '@mui/system';
+import { Box, styled } from '@mui/material';
 import { IReaderSettings } from 'typings';
 
 const Image = styled('img')({
diff --git a/src/components/reader/Page.tsx b/src/components/reader/Page.tsx
index 84c0dae6..fed6129e 100644
--- a/src/components/reader/Page.tsx
+++ b/src/components/reader/Page.tsx
@@ -8,7 +8,7 @@
 
 import React, { useRef } from 'react';
 import SpinnerImage from 'components/util/SpinnerImage';
-import Box from '@mui/system/Box';
+import Box from '@mui/material/Box';
 import { IReaderSettings } from 'typings';
 
 function imageStyle(settings: IReaderSettings): any {
diff --git a/src/components/reader/PageNumber.tsx b/src/components/reader/PageNumber.tsx
index 742a3e05..7eb49b2d 100644
--- a/src/components/reader/PageNumber.tsx
+++ b/src/components/reader/PageNumber.tsx
@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { Box } from '@mui/system';
+import { Box } from '@mui/material';
 import { IReaderSettings } from 'typings';
 
 interface IProps {
diff --git a/src/components/reader/pager/DoublePagedPager.tsx b/src/components/reader/pager/DoublePagedPager.tsx
index 7e1090ea..cb411be1 100644
--- a/src/components/reader/pager/DoublePagedPager.tsx
+++ b/src/components/reader/pager/DoublePagedPager.tsx
@@ -8,7 +8,7 @@
 
 import React, { useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
-import { Box } from '@mui/system';
+import { Box } from '@mui/material';
 import Page from 'components/reader/Page';
 import DoublePage from 'components/reader/DoublePage';
 import { IReaderProps } from 'typings';
diff --git a/src/components/reader/pager/HorizontalPager.tsx b/src/components/reader/pager/HorizontalPager.tsx
index b41ddfa5..abdf1167 100644
--- a/src/components/reader/pager/HorizontalPager.tsx
+++ b/src/components/reader/pager/HorizontalPager.tsx
@@ -7,7 +7,7 @@
  */
 
 import React, { useEffect, useRef } from 'react';
-import { Box } from '@mui/system';
+import { Box } from '@mui/material';
 import Page from 'components/reader/Page';
 import { IReaderProps } from 'typings';
 
diff --git a/src/components/reader/pager/PagedPager.tsx b/src/components/reader/pager/PagedPager.tsx
index 0a797814..e7a83566 100644
--- a/src/components/reader/pager/PagedPager.tsx
+++ b/src/components/reader/pager/PagedPager.tsx
@@ -7,7 +7,7 @@
  */
 
 import React, { useEffect, useRef } from 'react';
-import { Box } from '@mui/system';
+import { Box } from '@mui/material';
 import Page from 'components/reader/Page';
 import { IReaderProps } from 'typings';
 
diff --git a/src/components/reader/pager/VerticalPager.tsx b/src/components/reader/pager/VerticalPager.tsx
index 28a41a7c..01d4127e 100644
--- a/src/components/reader/pager/VerticalPager.tsx
+++ b/src/components/reader/pager/VerticalPager.tsx
@@ -7,7 +7,7 @@
  */
 
 import React, { useCallback, useEffect, useRef } from 'react';
-import { Box } from '@mui/system';
+import { Box } from '@mui/material';
 import Page from 'components/reader/Page';
 import { IReaderProps } from 'typings';
 
diff --git a/src/components/source/SourceOptions.tsx b/src/components/source/SourceOptions.tsx
index 12867c65..a078e0a8 100644
--- a/src/components/source/SourceOptions.tsx
+++ b/src/components/source/SourceOptions.tsx
@@ -7,8 +7,7 @@
  */
 
 import FilterListIcon from '@mui/icons-material/FilterList';
-import { Button, Stack } from '@mui/material';
-import { Box } from '@mui/system';
+import { Button, Stack, Box } from '@mui/material';
 import OptionsPanel from 'components/molecules/OptionsPanel';
 import React from 'react';
 import CheckBoxFilter from 'components/source/filters/CheckBoxFilter';
diff --git a/src/components/source/filters/GroupFilter.tsx b/src/components/source/filters/GroupFilter.tsx
index f5f99b1d..3d7a91ba 100644
--- a/src/components/source/filters/GroupFilter.tsx
+++ b/src/components/source/filters/GroupFilter.tsx
@@ -7,8 +7,7 @@
  */
 
 import { ExpandLess, ExpandMore } from '@mui/icons-material';
-import { Collapse, ListItemButton, ListItemText, Stack } from '@mui/material';
-import { Box } from '@mui/system';
+import { Collapse, ListItemButton, ListItemText, Stack, Box } from '@mui/material';
 import React from 'react';
 // eslint-disable-next-line import/no-cycle
 import { Options } from 'components/source/SourceOptions';
diff --git a/src/components/source/filters/SortFilter.tsx b/src/components/source/filters/SortFilter.tsx
index 7009a6ff..4070cc0c 100644
--- a/src/components/source/filters/SortFilter.tsx
+++ b/src/components/source/filters/SortFilter.tsx
@@ -7,8 +7,7 @@
  */
 
 import { ExpandLess, ExpandMore } from '@mui/icons-material';
-import { Collapse, ListItemButton, ListItemText, Stack } from '@mui/material';
-import { Box } from '@mui/system';
+import { Collapse, ListItemButton, ListItemText, Stack, Box } from '@mui/material';
 import SortRadioInput from 'components/atoms/SortRadioInput';
 import React from 'react';
 import { IState } from 'typings';
diff --git a/src/components/util/EmptyView.tsx b/src/components/util/EmptyView.tsx
index c59688ff..aa591858 100644
--- a/src/components/util/EmptyView.tsx
+++ b/src/components/util/EmptyView.tsx
@@ -11,8 +11,7 @@
 import React, { useMemo } from 'react';
 import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/material/styles';
-import { useMediaQuery } from '@mui/material';
-import { Box } from '@mui/system';
+import { Box, useMediaQuery } from '@mui/material';
 
 const ERROR_FACES = ['(･o･;)', 'Σ(ಠ_ಠ)', 'ಥ_ಥ', '(˘･_･˘)', '(；￣Д￣)', '(･Д･。'];
 
diff --git a/src/components/util/LoadingPlaceholder.tsx b/src/components/util/LoadingPlaceholder.tsx
index 84e365ba..d56804c7 100644
--- a/src/components/util/LoadingPlaceholder.tsx
+++ b/src/components/util/LoadingPlaceholder.tsx
@@ -8,7 +8,7 @@
 
 import React from 'react';
 import CircularProgress from '@mui/material/CircularProgress';
-import { Box } from '@mui/system';
+import { Box } from '@mui/material';
 
 interface IProps {
     shouldRender?: boolean | (() => boolean);
diff --git a/src/components/util/SpinnerImage.tsx b/src/components/util/SpinnerImage.tsx
index 5eea2121..05a571fb 100644
--- a/src/components/util/SpinnerImage.tsx
+++ b/src/components/util/SpinnerImage.tsx
@@ -8,9 +8,8 @@
 
 import React, { useEffect, useState, CSSProperties } from 'react';
 import CircularProgress from '@mui/material/CircularProgress';
-import Box from '@mui/system/Box';
-import { Theme } from '@mui/system/createTheme';
-import { SxProps } from '@mui/system/styleFunctionSx';
+import Box from '@mui/material/Box';
+import { Theme, SxProps } from '@mui/material';
 
 interface IProps {
     src: string;
diff --git a/src/components/util/StyledFab.tsx b/src/components/util/StyledFab.tsx
index b894dc55..6d30706b 100644
--- a/src/components/util/StyledFab.tsx
+++ b/src/components/util/StyledFab.tsx
@@ -6,8 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Fab } from '@mui/material';
-import { styled } from '@mui/system';
+import { Fab, styled } from '@mui/material';
 
 export const DEFAULT_FAB_STYLE = {
     position: 'fixed',
diff --git a/src/screens/DownloadQueue.tsx b/src/screens/DownloadQueue.tsx
index 54ecbc2b..9c028235 100644
--- a/src/screens/DownloadQueue.tsx
+++ b/src/screens/DownloadQueue.tsx
@@ -10,7 +10,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import DragHandle from '@mui/icons-material/DragHandle';
 import PauseIcon from '@mui/icons-material/Pause';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
-import { Card, CardActionArea, Stack } from '@mui/material';
+import { Card, CardActionArea, Stack, Box } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import NavbarContext from 'components/context/NavbarContext';
 import EmptyView from 'components/util/EmptyView';
@@ -18,7 +18,6 @@ import React, { useContext, useEffect } from 'react';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 
 import Typography from '@mui/material/Typography';
-import { Box } from '@mui/system';
 import useSubscription from 'components/library/useSubscription';
 import DownloadStateIndicator from 'components/molecules/DownloadStateIndicator';
 import { NavbarToolbar } from 'components/navbar/DefaultNavBar';
diff --git a/src/screens/Library.tsx b/src/screens/Library.tsx
index 31d73028..913c0e39 100644
--- a/src/screens/Library.tsx
+++ b/src/screens/Library.tsx
@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Chip, Tab, Tabs } from '@mui/material';
+import { Chip, Tab, Tabs, styled } from '@mui/material';
 import React, { useContext, useEffect, useMemo, useState } from 'react';
 import NavbarContext from 'components/context/NavbarContext';
 import EmptyView from 'components/util/EmptyView';
@@ -18,7 +18,6 @@ import AppbarSearch from 'components/util/AppbarSearch';
 import { useQueryParam, NumberParam } from 'use-query-params';
 import UpdateChecker from 'components/library/UpdateChecker';
 import { useTranslation } from 'react-i18next';
-import { styled } from '@mui/system';
 import { useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
 import requestManager from 'lib/RequestManager';
 
diff --git a/src/screens/Manga.tsx b/src/screens/Manga.tsx
index 182a00a7..1ddf8766 100644
--- a/src/screens/Manga.tsx
+++ b/src/screens/Manga.tsx
@@ -7,8 +7,7 @@
  */
 
 import { Warning } from '@mui/icons-material';
-import { CircularProgress, IconButton, Stack, Tooltip } from '@mui/material';
-import { Box } from '@mui/system';
+import { CircularProgress, IconButton, Stack, Tooltip, Box } from '@mui/material';
 import NavbarContext, { useSetDefaultBackTo } from 'components/context/NavbarContext';
 import ChapterList from 'components/manga/ChapterList';
 import { useRefreshManga } from 'components/manga/hooks';
diff --git a/src/screens/Reader.tsx b/src/screens/Reader.tsx
index 96a78359..456aad74 100644
--- a/src/screens/Reader.tsx
+++ b/src/screens/Reader.tsx
@@ -16,7 +16,7 @@ import DoublePagedPager from 'components/reader/pager/DoublePagedPager';
 import VerticalPager from 'components/reader/pager/VerticalPager';
 import ReaderNavBar from 'components/navbar/ReaderNavBar';
 import NavbarContext from 'components/context/NavbarContext';
-import { Box } from '@mui/system';
+import { Box } from '@mui/material';
 import { requestUpdateMangaMetadata } from 'util/metadata';
 import {
     checkAndHandleMissingStoredReaderSettings,
diff --git a/src/screens/Updates.tsx b/src/screens/Updates.tsx
index 9b91764e..73bfe31f 100644
--- a/src/screens/Updates.tsx
+++ b/src/screens/Updates.tsx
@@ -7,13 +7,12 @@
  */
 
 import DownloadIcon from '@mui/icons-material/Download';
-import { CardActionArea } from '@mui/material';
+import { Box, CardActionArea, styled } from '@mui/material';
 import Avatar from '@mui/material/Avatar';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
-import { Box, styled } from '@mui/system';
 import NavbarContext from 'components/context/NavbarContext';
 import DownloadStateIndicator from 'components/molecules/DownloadStateIndicator';
 import EmptyView from 'components/util/EmptyView';
diff --git a/src/screens/settings/DefaultReaderSettings.tsx b/src/screens/settings/DefaultReaderSettings.tsx
index 7c362743..dc455013 100644
--- a/src/screens/settings/DefaultReaderSettings.tsx
+++ b/src/screens/settings/DefaultReaderSettings.tsx
@@ -8,7 +8,7 @@
 
 import React, { useContext, useEffect } from 'react';
 import NavbarContext from 'components/context/NavbarContext';
-import { Box } from '@mui/system';
+import { Box } from '@mui/material';
 import CircularProgress from '@mui/material/CircularProgress';
 import { requestUpdateServerMetadata } from 'util/metadata';
 import makeToast from 'components/util/Toast';
diff --git a/src/screens/settings/LibrarySettings.tsx b/src/screens/settings/LibrarySettings.tsx
index 8f853092..3753aafb 100644
--- a/src/screens/settings/LibrarySettings.tsx
+++ b/src/screens/settings/LibrarySettings.tsx
@@ -20,7 +20,7 @@ import Button from '@mui/material/Button';
 import ListItemButton from '@mui/material/ListItemButton';
 import ThreeStateCheckboxInput from 'components/atoms/ThreeStateCheckboxInput';
 import DialogTitle from '@mui/material/DialogTitle';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material';
 import makeToast from 'components/util/Toast';
 import { t as translate } from 'i18next';
 import { useTranslation } from 'react-i18next';
diff --git a/src/theme.ts b/src/theme.ts
index e4e76f81..b1e34baa 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -6,20 +6,27 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { createTheme as createMuiTheme } from '@mui/material/styles';
+import { createTheme as createMuiTheme, Palette as MuiPalette, Theme } from '@mui/material/styles';
+
+declare module '@mui/material/styles/createPalette' {
+    interface Palette {
+        custom: Palette['primary'];
+    }
 
-declare module '@mui/material/styles' {
     interface PaletteOptions {
-        custom?: PaletteOptions['primary'];
+        custom: PaletteOptions['primary'];
     }
 }
 
+type DefaultMuiPalette = Omit<MuiPalette, 'custom'>;
+type DefaultMuiTheme = Omit<Theme, 'palette'> & { palette: DefaultMuiPalette };
+
 const createTheme = (dark?: boolean) => {
-    const baseTheme = createMuiTheme({
+    const baseTheme: DefaultMuiTheme = createMuiTheme({
         palette: {
             mode: dark ? 'dark' : 'light',
         },
-    });
+    } as Theme);
 
     const tachideskTheme = createMuiTheme(
         {
diff --git a/yarn.lock b/yarn.lock
index 54906551..a4567307 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2014,39 +2014,6 @@
   resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.1.1.tgz#c9c61d9fe5ca5ac664e1153bb0aa0eba1c6d6308"
   integrity sha512-jwx+WCqszn53YHOfvFMJJRd/B2GqkCBt+1MJSG6o5/s8+ytHMvDZXsJgUEWLk12UnLd7HYKac4BYU5i/Ron1Cw==
 
-"@date-io/core@^2.11.0":
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/@date-io/core/-/core-2.11.0.tgz#28580cda1c8228ab2c7ed6aee673ef0495f913e6"
-  integrity sha512-DvPBnNoeuLaoSJZaxgpu54qzRhRKjSYVyQjhznTFrllKuDpm0sDFjHo6lvNLCM/cfMx2gb2PM2zY2kc9C8nmuw==
-
-"@date-io/date-fns@^2.11.0":
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/@date-io/date-fns/-/date-fns-2.11.0.tgz#142fbf954eda7ad66514af7a2802d78c4ea40053"
-  integrity sha512-mPQ71plBeFrArvBSHtjWMHXA89IUbZ6kuo2dsjlRC/1uNOybo91spIb+wTu03NxKTl8ut07s0jJ9svF71afpRg==
-  dependencies:
-    "@date-io/core" "^2.11.0"
-
-"@date-io/dayjs@^2.11.0":
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/@date-io/dayjs/-/dayjs-2.11.0.tgz#41f4b4b9629612e6012accffd848875d1aeffb74"
-  integrity sha512-w67vRK56NZJIKhJM/CrNbfnIcuMvR3ApfxzNZiCZ5w29sxgBDeKuX4M+P7A9r5HXOMGcsOcpgaoTDINNGkdpGQ==
-  dependencies:
-    "@date-io/core" "^2.11.0"
-
-"@date-io/luxon@^2.11.1":
-  version "2.11.1"
-  resolved "https://registry.yarnpkg.com/@date-io/luxon/-/luxon-2.11.1.tgz#31a72f7b5e163c74e8a3b29d8f16c4c30de6ed43"
-  integrity sha512-JUXo01kdPQxLORxqdENrgdUhooKgDUggsNRSdi2BcUhASIY2KGwwWXu8ikVHHGkw+DUF4FOEKGfkQd0RHSvX6g==
-  dependencies:
-    "@date-io/core" "^2.11.0"
-
-"@date-io/moment@^2.11.0":
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/@date-io/moment/-/moment-2.11.0.tgz#850f8dd090d401845b39276d034dbabe20224ef5"
-  integrity sha512-QSL+83qezQ9Ty0dtFgAkk6eC0GMl/lgYfDajeVUDB3zVA2A038hzczRLBg29ifnBGhQMPABxuOafgWwhDjlarg==
-  dependencies:
-    "@date-io/core" "^2.11.0"
-
 "@emotion/babel-plugin@^11.3.0":
   version "11.3.0"
   resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.3.0.tgz#3a16850ba04d8d9651f07f3fb674b3436a4fb9d7"
@@ -2496,25 +2463,6 @@
   dependencies:
     "@babel/runtime" "^7.15.4"
 
-"@mui/lab@^5.0.0-alpha.53":
-  version "5.0.0-alpha.53"
-  resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.53.tgz#ee3bae46fc61e2274d3001583b7d0ca92abbe2c4"
-  integrity sha512-fUyGCuxj8Wdwvyc9v0X3YTNshItFWp6DtuCPjhPy6yhKjUAa0u0XKI4FcM5z/wPWUR56nJceNz9WwNZ72vkwWw==
-  dependencies:
-    "@babel/runtime" "^7.15.4"
-    "@date-io/date-fns" "^2.11.0"
-    "@date-io/dayjs" "^2.11.0"
-    "@date-io/luxon" "^2.11.1"
-    "@date-io/moment" "^2.11.0"
-    "@mui/core" "5.0.0-alpha.53"
-    "@mui/system" "^5.0.6"
-    "@mui/utils" "^5.0.1"
-    clsx "^1.1.1"
-    prop-types "^15.7.2"
-    react-is "^17.0.2"
-    react-transition-group "^4.4.2"
-    rifm "^0.12.0"
-
 "@mui/material@^5.0.6":
   version "5.0.6"
   resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.0.6.tgz#0e688c918fd88a07f59385614c65fce937077a9f"
@@ -9422,11 +9370,6 @@ reusify@^1.0.4:
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
-rifm@^0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/rifm/-/rifm-0.12.0.tgz#8d3a9dc0de9c190e0de9bdc8861a91a221dc1341"
-  integrity sha512-PqOl+Mo2lyqrKiD34FPlnQ+ksD3F+a62TQlphiZshgriyHdfjn6jGyqUZhd+s3nsMYXwXYDdjrrv8wX7QsOG3g==
-
 rimraf@^3.0.0, rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"