diff --git a/src/App.tsx b/src/App.tsx
index 3a10146e..db09c71a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,7 +12,7 @@ import {
     Redirect,
 } from 'react-router-dom';
 import { QueryParamProvider } from 'use-query-params';
-import { Container } from '@mui/material';
+import { Container, useMediaQuery } from '@mui/material';
 import CssBaseline from '@mui/material/CssBaseline';
 import {
     createTheme, ThemeProvider, Theme, StyledEngineProvider,
@@ -90,6 +90,8 @@ export default function App() {
         }),
         [darkTheme],
     );
+    // this can only be used after the theme object is created
+    const isMobileWidth = useMediaQuery(theme.breakpoints.down('sm'));
 
     return (
         <Router>
@@ -103,10 +105,10 @@ export default function App() {
                                 id="appMainContainer"
                                 maxWidth={false}
                                 disableGutters
-                                sx={{
-                                    mt: 8,
-                                    ml: { sm: 8 },
-                                    mb: { xs: 8, sm: 4 },
+                                style={{
+                                    marginTop: theme.spacing(8),
+                                    marginLeft: isMobileWidth ? '' : theme.spacing(8),
+                                    marginBottom: isMobileWidth ? theme.spacing(8) : '',
                                     width: 'auto',
                                     overflow: 'auto',
                                 }}
diff --git a/src/components/ChapterCard.tsx b/src/components/ChapterCard.tsx
index 3da91058..0d755a05 100644
--- a/src/components/ChapterCard.tsx
+++ b/src/components/ChapterCard.tsx
@@ -18,7 +18,6 @@ import MenuItem from '@mui/material/MenuItem';
 import BookmarkIcon from '@mui/icons-material/Bookmark';
 
 import client from 'util/client';
-import { Box } from '@mui/system';
 
 interface IProps{
     chapter: IChapter
@@ -103,7 +102,7 @@ export default function ChapterCard(props: IProps) {
                                 padding: 2,
                             }}
                         >
-                            <Box sx={{ display: 'flex' }}>
+                            <div style={{ display: 'flex' }}>
                                 <div style={{ display: 'flex', flexDirection: 'column' }}>
                                     <Typography variant="h5" component="h2">
                                         <span style={{ color: theme.palette.primary.dark }}>
@@ -118,7 +117,7 @@ export default function ChapterCard(props: IProps) {
                                         {downloadStatusString}
                                     </Typography>
                                 </div>
-                            </Box>
+                            </div>
 
                             <IconButton aria-label="more" onClick={handleClick} size="large">
                                 <MoreVertIcon />
@@ -132,9 +131,9 @@ export default function ChapterCard(props: IProps) {
                         onClose={handleClose}
                     >
                         {downloadStatusString.endsWith('Downloaded')
-                             && <MenuItem onClick={deleteChapter}>Delete</MenuItem>}
+                            && <MenuItem onClick={deleteChapter}>Delete</MenuItem>}
                         {downloadStatusString.length === 0
-                         && <MenuItem onClick={downloadChapter}>Download</MenuItem> }
+                        && <MenuItem onClick={downloadChapter}>Download</MenuItem> }
                         <MenuItem onClick={() => sendChange('bookmarked', !chapter.bookmarked)}>
                             {chapter.bookmarked && 'Remove bookmark'}
                             {!chapter.bookmarked && 'Bookmark'}
diff --git a/src/components/ExtensionCard.tsx b/src/components/ExtensionCard.tsx
index 8d644c72..16212fc5 100644
--- a/src/components/ExtensionCard.tsx
+++ b/src/components/ExtensionCard.tsx
@@ -6,6 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import React, { useState } from 'react';
+import makeStyles from '@mui/styles/makeStyles';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import Button from '@mui/material/Button';
@@ -13,7 +14,35 @@ import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 import client from 'util/client';
 import useLocalStorage from 'util/useLocalStorage';
-import { Box } from '@mui/system';
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: 16,
+    },
+    bullet: {
+        display: 'inline-block',
+        margin: '0 2px',
+        transform: 'scale(0.8)',
+    },
+    title: {
+        fontSize: 14,
+    },
+    pos: {
+        marginBottom: 12,
+    },
+    icon: {
+        width: theme.spacing(7),
+        height: theme.spacing(7),
+        flex: '0 0 auto',
+        marginRight: 16,
+    },
+    card: {
+        margin: '10px',
+    },
+}));
 
 interface IProps {
     extension: IExtension
@@ -38,6 +67,7 @@ export default function ExtensionCard(props: IProps) {
     const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
     const [useCache] = useLocalStorage<boolean>('useCache', true);
 
+    const classes = useStyles();
     const langPress = lang === 'all' ? 'All' : lang.toUpperCase();
 
     function install() {
@@ -88,27 +118,16 @@ export default function ExtensionCard(props: IProps) {
     }
 
     return (
-        <Card sx={{ margin: '10px' }}>
-            <CardContent sx={{
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-                p: 2,
-            }}
-            >
-                <Box sx={{ display: 'flex' }}>
+        <Card className={classes.card}>
+            <CardContent className={classes.root}>
+                <div style={{ display: 'flex' }}>
                     <Avatar
                         variant="rounded"
-                        sx={{
-                            width: '56px',
-                            height: '56px',
-                            flex: '0 0 auto',
-                            mr: 2,
-                        }}
+                        className={classes.icon}
                         alt={name}
                         src={`${serverAddress}${iconUrl}?useCache=${useCache}`}
                     />
-                    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+                    <div style={{ display: 'flex', flexDirection: 'column' }}>
                         <Typography variant="h5" component="h2">
                             {name}
                         </Typography>
@@ -117,8 +136,8 @@ export default function ExtensionCard(props: IProps) {
                             {' '}
                             {versionName}
                         </Typography>
-                    </Box>
-                </Box>
+                    </div>
+                </div>
 
                 <Button
                     variant="outlined"
diff --git a/src/components/SourceCard.tsx b/src/components/SourceCard.tsx
index d3b1dbce..1ca0da6a 100644
--- a/src/components/SourceCard.tsx
+++ b/src/components/SourceCard.tsx
@@ -6,6 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import React from 'react';
+import makeStyles from '@mui/styles/makeStyles';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import { useHistory } from 'react-router-dom';
@@ -17,7 +18,55 @@ import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 import useLocalStorage from 'util/useLocalStorage';
 import { langCodeToName } from 'util/language';
-import { Box } from '@mui/system';
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: 16,
+    },
+    bullet: {
+        display: 'inline-block',
+        margin: '0 2px',
+        transform: 'scale(0.8)',
+    },
+    title: {
+        fontSize: 14,
+    },
+    pos: {
+        marginBottom: 12,
+    },
+    icon: {
+        width: theme.spacing(7),
+        height: theme.spacing(7),
+        flex: '0 0 auto',
+        marginRight: 16,
+    },
+    card: {
+        margin: '10px',
+        '&:hover': {
+            backgroundColor: theme.palette.action.hover,
+            transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+        },
+        '&:active': {
+            backgroundColor: theme.palette.action.selected,
+            transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+        },
+    },
+    showMobile: {
+        display: 'flex',
+        [theme.breakpoints.up('sm')]: {
+            display: 'none',
+        },
+    },
+    showBigger: {
+        display: 'flex',
+        [theme.breakpoints.down('sm')]: {
+            display: 'none',
+        },
+    },
+}));
 
 interface IProps {
     source: ISource
@@ -35,6 +84,8 @@ export default function SourceCard(props: IProps) {
     const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
     const [useCache] = useLocalStorage<boolean>('useCache', true);
 
+    const classes = useStyles();
+
     const redirectTo = (e: any, to: string) => {
         history.push(to);
 
@@ -44,34 +95,19 @@ export default function SourceCard(props: IProps) {
 
     return (
         <Card
-            sx={{
-                margin: '10px',
-                '&:hover': {
-                    backgroundColor: 'action.hover',
-                    transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
-                },
-                '&:active': {
-                    backgroundColor: 'action.selected',
-                    transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
-                },
-            }}
+            className={classes.card}
             onClick={(e) => redirectTo(e, `/sources/${id}/popular/`)}
         >
-            <CardContent sx={{
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-                padding: 2,
-            }}
-            >
+            <CardContent className={classes.root}>
 
-                <Box sx={{ display: 'flex' }}>
+                <div style={{ display: 'flex' }}>
                     <Avatar
                         variant="rounded"
+                        className={classes.icon}
                         alt={name}
                         src={`${serverAddress}${iconUrl}?useCache=${useCache}`}
                     />
-                    <Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
+                    <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                         <Typography variant="h5" component="h2">
                             {name}
                         </Typography>
@@ -80,12 +116,12 @@ export default function SourceCard(props: IProps) {
                                 {langCodeToName(lang)}
                             </Typography>
                         )}
-                    </Box>
-                </Box>
+                    </div>
+                </div>
                 <div>
-                    <Box sx={{ display: { xs: 'flex', sm: 'none' } }}>
+                    <div className={classes.showMobile}>
                         <IconButton
-                            sx={{ width: 59, height: 59 }}
+                            style={{ width: 59, height: 59 }}
                             onClick={(e) => redirectTo(e, `/sources/${id}/search/`)}
                             size="large"
                             edge="end"
@@ -104,19 +140,11 @@ export default function SourceCard(props: IProps) {
                                 />
                             </IconButton>
                         )}
-                    </Box>
-                    <Box sx={{
-                        display: {
-                            xs: 'none',
-                            sm: 'flex',
-                        },
-                        '> .MuiButton-root': {
-                            ml: '20px',
-                        },
-                    }}
-                    >
+                    </div>
+                    <div className={classes.showBigger}>
                         <Button
                             variant="outlined"
+                            style={{ marginLeft: 20 }}
                             onClick={(e) => redirectTo(e, `/sources/${id}/search/`)}
                         >
                             Search
@@ -124,6 +152,7 @@ export default function SourceCard(props: IProps) {
                         {supportsLatest && (
                             <Button
                                 variant="outlined"
+                                style={{ marginLeft: 20 }}
                                 onClick={(e) => redirectTo(e, `/sources/${id}/latest/`)}
                             >
                                 Latest
@@ -131,11 +160,12 @@ export default function SourceCard(props: IProps) {
                         )}
                         <Button
                             variant="outlined"
+                            style={{ marginLeft: 20 }}
                             onClick={(e: any) => redirectTo(e, `/sources/${id}/popular/`)}
                         >
                             Browse
                         </Button>
-                    </Box>
+                    </div>
                 </div>
             </CardContent>
         </Card>
diff --git a/src/components/library/LibraryOptions.tsx b/src/components/library/LibraryOptions.tsx
index 8d58bee2..7bc1b00f 100644
--- a/src/components/library/LibraryOptions.tsx
+++ b/src/components/library/LibraryOptions.tsx
@@ -11,17 +11,16 @@ import FilterListIcon from '@mui/icons-material/FilterList';
 import { Drawer, FormControlLabel, IconButton } from '@mui/material';
 import useLibraryOptions from 'util/useLibraryOptions';
 import ThreeStateCheckbox from 'components/util/ThreeStateCheckbox';
-import { Box } from '@mui/system';
 
 function Options() {
     const {
         downloaded, setDownloaded, unread, setUnread,
     } = useLibraryOptions();
     return (
-        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
             <FormControlLabel control={<ThreeStateCheckbox name="Unread" checked={unread} onChange={setUnread} />} label="Unread" />
             <FormControlLabel control={<ThreeStateCheckbox name="Downloaded" checked={downloaded} onChange={setDownloaded} />} label="Downloaded" />
-        </Box>
+        </div>
     );
 }
 
diff --git a/src/components/navbar/ReaderNavBar.tsx b/src/components/navbar/ReaderNavBar.tsx
index e5de1018..edd98996 100644
--- a/src/components/navbar/ReaderNavBar.tsx
+++ b/src/components/navbar/ReaderNavBar.tsx
@@ -11,6 +11,7 @@ import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import makeStyles from '@mui/styles/makeStyles';
 import React, { useContext, useEffect, useState } from 'react';
 import Typography from '@mui/material/Typography';
 import { useHistory, Link } from 'react-router-dom';
@@ -27,91 +28,112 @@ import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 import Collapse from '@mui/material/Collapse';
 import Button from '@mui/material/Button';
 import NavBarContext from 'components/context/NavbarContext';
-import { styled } from '@mui/system';
 
-const Root = styled('div')(({ theme }) => ({
-    top: 0,
-    left: 0,
-    width: '300px',
-    minWidth: '300px',
-    height: '100vh',
-    overflowY: 'auto',
-    backgroundColor: theme.palette.background.default,
-
-    '& header': {
-        backgroundColor:
-        theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[100],
+const useStyles = (settings: IReaderSettings) => makeStyles((theme) => ({
+    // main container and root div need to change classes...
+    AppMainContainer: {
+        display: 'none',
+    },
+    AppRootElment: {
         display: 'flex',
-        alignItems: 'center',
-        minHeight: '64px',
-        paddingLeft: '24px',
-        paddingRight: '24px',
+    },
 
-        transition: 'left 2s ease',
+    root: {
+        position: settings.staticNav ? 'sticky' : 'fixed',
+        top: 0,
+        left: 0,
+        width: '300px',
+        minWidth: '300px',
+        height: '100vh',
+        overflowY: 'auto',
+        backgroundColor: theme.palette.background.default,
 
-        '& button': {
-            flexGrow: 0,
-            flexShrink: 0,
+        '& header': {
+            backgroundColor:
+            theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[100],
+            display: 'flex',
+            alignItems: 'center',
+            minHeight: '64px',
+            paddingLeft: '24px',
+            paddingRight: '24px',
+
+            transition: 'left 2s ease',
+
+            '& button': {
+                flexGrow: 0,
+                flexShrink: 0,
+            },
+
+            '& button:nth-child(1)': {
+                marginRight: '16px',
+            },
+
+            '& button:nth-child(3)': {
+                marginRight: '-12px',
+            },
+
+            '& h1': {
+                fontSize: '1.25rem',
+                flexGrow: 1,
+            },
         },
-
-        '& button:nth-child(1)': {
-            marginRight: '16px',
-        },
-
-        '& button:nth-child(3)': {
-            marginRight: '-12px',
-        },
-
-        '& h1': {
-            fontSize: '1.25rem',
-            flexGrow: 1,
+        '& hr': {
+            margin: '0 16px',
+            height: '1px',
+            border: '0',
+            backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[100],
         },
     },
-    '& hr': {
+
+    navigation: {
         margin: '0 16px',
-        height: '1px',
-        border: '0',
-        backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[100],
+
+        '& > span:nth-child(1)': {
+            textAlign: 'center',
+            display: 'block',
+            marginTop: '16px',
+        },
+
+        '& $navigationChapters': {
+            display: 'grid',
+            gridTemplateColumns: '1fr 1fr',
+            gridTemplateAreas: '"prev next"',
+            gridColumnGap: '5px',
+            margin: '10px 0',
+
+            '& a': {
+                flexGrow: 1,
+                textDecoration: 'none',
+
+                '& button': {
+                    width: '100%',
+                    padding: '5px 8px',
+                    textTransform: 'none',
+                },
+            },
+        },
+
     },
-}));
+    navigationChapters: {}, // dummy rule
 
-const Navigation = styled('div')({
-    margin: '0 16px',
-    '& > span:nth-child(1)': {
-        textAlign: 'center',
-        display: 'block',
-        marginTop: '16px',
-    },
-});
-
-const ChapterNavigation = styled('div')({
-    display: 'grid',
-    gridTemplateColumns: '1fr 1fr',
-    gap: '5px',
-    margin: '10px 0',
-
-    '& a': {
-        flexGrow: 1,
-        textDecoration: 'none',
-
-        '& button': {
-            width: '100%',
-            padding: '5px 8px',
-            textTransform: 'none',
+    settingsCollapsseHeader: {
+        '& span': {
+            fontWeight: 'bold',
         },
     },
-});
 
-const OpenDrawerButton = styled(IconButton)(({ theme }) => ({
-    position: 'fixed',
-    top: 0 + 20,
-    left: 10 + 20,
-    height: '40px',
-    width: '40px',
-    borderRadius: 5,
-    backgroundColor: theme.palette.mode === 'dark' ? 'black' : 'white',
-    '&:hover': {
-        backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[900] : theme.palette.grey[100],
+    openDrawerButton: {
+        position: 'fixed',
+        top: 0 + 20,
+        left: 10 + 20,
+        height: '40px',
+        width: '40px',
+        borderRadius: 5,
+        backgroundColor: theme.palette.mode === 'dark' ? 'black' : 'white',
+
+        '&:hover': {
+            backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[900] : theme.palette.grey[100],
+        },
     },
 }));
 
@@ -146,6 +168,8 @@ export default function ReaderNavBar(props: IProps) {
     const [prevScrollPos, setPrevScrollPos] = useState(0);
     const [settingsCollapseOpen, setSettingsCollapseOpen] = useState(true);
 
+    const classes = useStyles(settings)();
+
     const setSettingValue = (key: string, value: any) => setSettings({ ...settings, [key]: value });
 
     const handleScroll = () => {
@@ -160,16 +184,15 @@ export default function ReaderNavBar(props: IProps) {
     useEffect(() => {
         window.addEventListener('scroll', handleScroll);
 
-        const rootEl:HTMLDivElement = document.querySelector('#root')!;
-        const mainContainer:HTMLDivElement = document.querySelector('#appMainContainer')!;
+        const rootEl = document.querySelector('#root')!;
+        const mainContainer = document.querySelector('#appMainContainer')!;
 
-        // main container and root div need to change styles...
-        rootEl.style.display = 'flex';
-        mainContainer.style.display = 'none';
+        rootEl.classList.add(classes.AppRootElment);
+        mainContainer.classList.add(classes.AppMainContainer);
 
         return () => {
-            rootEl.style.display = 'block';
-            mainContainer.style.display = 'block';
+            rootEl.classList.remove(classes.AppRootElment);
+            mainContainer.classList.remove(classes.AppMainContainer);
             window.removeEventListener('scroll', handleScroll);
         };
     }, [handleScroll]);// handleScroll changes on every render
@@ -184,10 +207,7 @@ export default function ReaderNavBar(props: IProps) {
                 mountOnEnter
                 unmountOnExit
             >
-                <Root sx={{
-                    position: settings.staticNav ? 'sticky' : 'fixed',
-                }}
-                >
+                <div className={classes.root}>
                     <header>
                         <IconButton
                             edge="start"
@@ -214,14 +234,7 @@ export default function ReaderNavBar(props: IProps) {
                             <CloseIcon />
                         </IconButton>
                     </header>
-                    <ListItem
-                        ContainerComponent="div"
-                        sx={{
-                            '& span': {
-                                fontWeight: 'bold',
-                            },
-                        }}
-                    >
+                    <ListItem ContainerComponent="div" className={classes.settingsCollapsseHeader}>
                         <ListItemText primary="Reader Settings" />
                         <ListItemSecondaryAction>
                             <IconButton
@@ -317,15 +330,16 @@ export default function ReaderNavBar(props: IProps) {
                         </List>
                     </Collapse>
                     <hr />
-                    <Navigation>
+                    <div className={classes.navigation}>
                         <span>
                             {`Currently on page ${curPage + 1} of ${chapter.pageCount}`}
                         </span>
-                        <ChapterNavigation>
+                        <div className={classes.navigationChapters}>
                             {chapter.index > 1
                         && (
                             <Link
                                 replace
+                                style={{ gridArea: 'prev' }}
                                 to={`/manga/${manga.id}/chapter/${chapter.index - 1}`}
                             >
                                 <Button
@@ -340,6 +354,7 @@ export default function ReaderNavBar(props: IProps) {
                         && (
                             <Link
                                 replace
+                                style={{ gridArea: 'next' }}
                                 to={`/manga/${manga.id}/chapter/${chapter.index + 1}`}
                             >
                                 <Button
@@ -350,13 +365,14 @@ export default function ReaderNavBar(props: IProps) {
                                 </Button>
                             </Link>
                         )}
-                        </ChapterNavigation>
-                    </Navigation>
-                </Root>
+                        </div>
+                    </div>
+                </div>
             </Slide>
             <Zoom in={!drawerOpen}>
                 <Fade in={!hideOpenButton}>
-                    <OpenDrawerButton
+                    <IconButton
+                        className={classes.openDrawerButton}
                         edge="start"
                         color="inherit"
                         aria-label="menu"
@@ -366,7 +382,7 @@ export default function ReaderNavBar(props: IProps) {
                         size="large"
                     >
                         <KeyboardArrowRightIcon />
-                    </OpenDrawerButton>
+                    </IconButton>
                 </Fade>
             </Zoom>
         </>
diff --git a/src/components/navbar/action/CategorySelect.tsx b/src/components/navbar/action/CategorySelect.tsx
index da149de9..4347621e 100644
--- a/src/components/navbar/action/CategorySelect.tsx
+++ b/src/components/navbar/action/CategorySelect.tsx
@@ -6,6 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import React, { useEffect, useState } from 'react';
+import makeStyles from '@mui/styles/makeStyles';
+import createStyles from '@mui/styles/createStyles';
 import Button from '@mui/material/Button';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
@@ -16,6 +18,13 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import FormGroup from '@mui/material/FormGroup';
 import client from 'util/client';
 
+const useStyles = makeStyles(() => createStyles({
+    paper: {
+        maxHeight: 435,
+        width: '80%',
+    },
+}));
+
 interface IProps {
     open: boolean
     setOpen: (value: boolean) => void
@@ -28,6 +37,7 @@ interface ICategoryInfo {
 }
 
 export default function CategorySelect(props: IProps) {
+    const classes = useStyles();
     const { open, setOpen, mangaId } = props;
     const [categoryInfos, setCategoryInfos] = useState<ICategoryInfo[]>([]);
 
@@ -72,12 +82,7 @@ export default function CategorySelect(props: IProps) {
 
     return (
         <Dialog
-            sx={{
-                '.MuiDialog-paper': {
-                    maxHeight: 435,
-                    width: '80%',
-                },
-            }}
+            classes={classes}
             maxWidth="xs"
             open={open}
         >
diff --git a/src/components/navbar/action/LangSelect.tsx b/src/components/navbar/action/LangSelect.tsx
index 9e992fc9..615da2e2 100644
--- a/src/components/navbar/action/LangSelect.tsx
+++ b/src/components/navbar/action/LangSelect.tsx
@@ -6,6 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import React, { useState } from 'react';
+import makeStyles from '@mui/styles/makeStyles';
+import createStyles from '@mui/styles/createStyles';
 import Button from '@mui/material/Button';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
@@ -19,6 +21,13 @@ import ListItem from '@mui/material/ListItem';
 import { langCodeToName } from 'util/language';
 import cloneObject from 'util/cloneObject';
 
+const useStyles = makeStyles(() => createStyles({
+    paper: {
+        maxHeight: 435,
+        width: '80%',
+    },
+}));
+
 function removeAll(firstList: any[], secondList: any[]) {
     secondList.forEach((item) => {
         const index = firstList.indexOf(item);
@@ -45,6 +54,7 @@ export default function LangSelect(props: IProps) {
     const [mShownLangs, setMShownLangs] = useState(
         removeAll(cloneObject(shownLangs), forcedLangs!),
     );
+    const classes = useStyles();
     const [open, setOpen] = useState<boolean>(false);
 
     const handleCancel = () => {
@@ -80,17 +90,12 @@ export default function LangSelect(props: IProps) {
                 <FilterListIcon />
             </IconButton>
             <Dialog
-                sx={{
-                    '.MuiDialog-paper': {
-                        maxHeight: 435,
-                        width: '80%',
-                    },
-                }}
+                classes={classes}
                 maxWidth="xs"
                 open={open}
             >
                 <DialogTitle>Enabled Languages</DialogTitle>
-                <DialogContent dividers sx={{ padding: 0 }}>
+                <DialogContent dividers style={{ padding: 0 }}>
                     <List>
                         {allLangs.map((lang) => (
                             <ListItem key={lang}>
diff --git a/src/components/navbar/navigation/DesktopSideBar.tsx b/src/components/navbar/navigation/DesktopSideBar.tsx
index ebac6db8..e4b396b0 100644
--- a/src/components/navbar/navigation/DesktopSideBar.tsx
+++ b/src/components/navbar/navigation/DesktopSideBar.tsx
@@ -45,7 +45,7 @@ export default function DesktopSideBar({ navBarItems }: IProps) {
                 }: NavbarItem) => (
                     <Link to={path} style={{ color: 'inherit', textDecoration: 'none' }} key={path}>
                         <ListItem disableRipple button key={title}>
-                            <ListItemIcon sx={{ minWidth: '0' }}>
+                            <ListItemIcon style={{ minWidth: '0' }}>
                                 <Tooltip placement="right" title={title}>
                                     {iconFor(path, IconComponent, SelectedIconComponent)}
                                 </Tooltip>
diff --git a/src/components/reader/DoublePage.tsx b/src/components/reader/DoublePage.tsx
index 44b266d4..d8c35e17 100644
--- a/src/components/reader/DoublePage.tsx
+++ b/src/components/reader/DoublePage.tsx
@@ -5,16 +5,28 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
+import makeStyles from '@mui/styles/makeStyles';
 import React from 'react';
-import { Box, styled } from '@mui/system';
 
-const Image = styled('img')({
-    marginBottom: 0,
-    width: 'auto',
-    minHeight: '99vh',
-    height: 'auto',
-    maxHeight: '99vh',
-    objectFit: 'contain',
+const useStyles = (settings: IReaderSettings) => makeStyles({
+    image: {
+        display: 'block',
+        marginBottom: 0,
+        width: 'auto',
+        minHeight: '99vh',
+        height: 'auto',
+        maxHeight: '99vh',
+        objectFit: 'contain',
+    },
+    page: {
+        display: 'flex',
+        flexDirection: settings.readerType === 'DoubleLTR' ? 'row' : 'row-reverse',
+        justifyContent: 'center',
+        margin: '0 auto',
+        width: 'auto',
+        height: 'auto',
+        overflowX: 'scroll',
+    },
 });
 
 interface IProps {
@@ -29,28 +41,21 @@ const DoublePage = React.forwardRef((props: IProps, ref: any) => {
         image1src, image2src, index, settings,
     } = props;
 
+    const classes = useStyles(settings)();
+
     return (
-        <Box
-            ref={ref}
-            sx={{
-                display: 'flex',
-                flexDirection: settings.readerType === 'DoubleLTR' ? 'row' : 'row-reverse',
-                justifyContent: 'center',
-                margin: '0 auto',
-                width: 'auto',
-                height: 'auto',
-                overflowX: 'scroll',
-            }}
-        >
-            <Image
+        <div ref={ref} className={classes.page}>
+            <img
+                className={classes.image}
                 src={image1src}
                 alt={`Page #${index}`}
             />
-            <Image
+            <img
+                className={classes.image}
                 src={image2src}
                 alt={`Page #${index + 1}`}
             />
-        </Box>
+        </div>
     );
 });
 
diff --git a/src/components/reader/Page.tsx b/src/components/reader/Page.tsx
index 93231b20..df57b976 100644
--- a/src/components/reader/Page.tsx
+++ b/src/components/reader/Page.tsx
@@ -5,6 +5,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
+import makeStyles from '@mui/styles/makeStyles';
 import React, { useEffect, useRef } from 'react';
 import SpinnerImage from 'components/util/SpinnerImage';
 import useLocalStorage from 'util/useLocalStorage';
@@ -52,6 +53,22 @@ function imageStyle(settings: IReaderSettings): any {
     };
 }
 
+const useStyles = (settings: IReaderSettings) => makeStyles({
+    loading: {
+        margin: '100px auto',
+        height: '100vh',
+        width: '100vw',
+    },
+    loadingImage: {
+        height: '100vh',
+        width: '70vw',
+        padding: '50px calc(50% - 20px)',
+        backgroundColor: '#525252',
+        marginBottom: 10,
+    },
+    image: imageStyle(settings),
+});
+
 interface IProps {
     src: string
     index: number
@@ -67,6 +84,7 @@ const Page = React.forwardRef((props: IProps, ref: any) => {
 
     const [useCache] = useLocalStorage<boolean>('useCache', true);
 
+    const classes = useStyles(settings)();
     const imgRef = useRef<HTMLImageElement>(null);
 
     const handleVerticalScroll = () => {
@@ -109,14 +127,8 @@ const Page = React.forwardRef((props: IProps, ref: any) => {
                 onImageLoad={onImageLoad}
                 alt={`Page #${index}`}
                 imgRef={imgRef}
-                spinnerStyle={{
-                    height: '100vh',
-                    width: '70vw',
-                    padding: '50px calc(50% - 20px)',
-                    backgroundColor: '#525252',
-                    marginBottom: 10,
-                }}
-                imgStyle={imageStyle(settings)}
+                spinnerClassName={`${classes.image} ${classes.loadingImage}`}
+                imgClassName={classes.image}
             />
         </div>
     );
diff --git a/src/components/reader/PageNumber.tsx b/src/components/reader/PageNumber.tsx
index 269f0c13..45933bca 100644
--- a/src/components/reader/PageNumber.tsx
+++ b/src/components/reader/PageNumber.tsx
@@ -5,8 +5,21 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
+import makeStyles from '@mui/styles/makeStyles';
 import React from 'react';
-import { Box } from '@mui/system';
+
+const useStyles = (settings: IReaderSettings) => makeStyles({
+    pageNumber: {
+        display: settings.showPageNumber ? 'block' : 'none',
+        position: 'fixed',
+        bottom: '50px',
+        right: settings.staticNav ? 'calc((100vw - 325px)/2)' : 'calc((100vw - 25px)/2)',
+        padding: '2px',
+        textAlign: 'center',
+        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+        borderRadius: '10px',
+    },
+});
 
 interface IProps {
     settings: IReaderSettings
@@ -16,20 +29,11 @@ interface IProps {
 
 export default function PageNumber(props: IProps) {
     const { settings, curPage, pageCount } = props;
+    const classes = useStyles(settings)();
 
     return (
-        <Box sx={{
-            display: settings.showPageNumber ? 'block' : 'none',
-            position: 'fixed',
-            bottom: '50px',
-            right: settings.staticNav ? 'calc((100vw - 325px)/2)' : 'calc((100vw - 25px)/2)',
-            padding: '2px',
-            textAlign: 'center',
-            backgroundColor: 'rgba(0, 0, 0, 0.3)',
-            borderRadius: '10px',
-        }}
-        >
+        <div className={classes.pageNumber}>
             {`${curPage + 1} / ${pageCount}`}
-        </Box>
+        </div>
     );
 }
diff --git a/src/components/reader/pager/DoublePagedPager.tsx b/src/components/reader/pager/DoublePagedPager.tsx
index 94d0ff17..6cbd7010 100644
--- a/src/components/reader/pager/DoublePagedPager.tsx
+++ b/src/components/reader/pager/DoublePagedPager.tsx
@@ -5,17 +5,34 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
+import makeStyles from '@mui/styles/makeStyles';
 import React, { useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
-import { Box } from '@mui/system';
 import Page from '../Page';
 import DoublePage from '../DoublePage';
 
+const useStyles = (settings: IReaderSettings) => makeStyles({
+    preload: {
+        display: 'none',
+    },
+    reader: {
+        display: 'flex',
+        flexDirection: (settings.readerType === 'DoubleLTR') ? 'row' : 'row-reverse',
+        justifyContent: 'center',
+        margin: '0 auto',
+        width: 'auto',
+        height: 'auto',
+        overflowX: 'scroll',
+    },
+});
+
 export default function DoublePagedPager(props: IReaderProps) {
     const {
         pages, settings, setCurPage, curPage, nextChapter, prevChapter,
     } = props;
 
+    const classes = useStyles(settings)();
+
     const selfRef = useRef<HTMLDivElement>(null);
     const pagesRef = useRef<HTMLImageElement[]>([]);
 
@@ -175,8 +192,8 @@ export default function DoublePagedPager(props: IReaderProps) {
     }, [selfRef, curPage, settings.readerType]);
 
     return (
-        <Box ref={selfRef}>
-            <Box id="preload" sx={{ display: 'none' }}>
+        <div ref={selfRef}>
+            <div id="preload" className={classes.preload}>
                 {
                     pages.map((page) => (
                         <img
@@ -188,19 +205,8 @@ export default function DoublePagedPager(props: IReaderProps) {
                         />
                     ))
                 }
-            </Box>
-            <Box
-                id="display"
-                sx={{
-                    display: 'flex',
-                    flexDirection: (settings.readerType === 'DoubleLTR') ? 'row' : 'row-reverse',
-                    justifyContent: 'center',
-                    margin: '0 auto',
-                    width: 'auto',
-                    height: 'auto',
-                    overflowX: 'scroll',
-                }}
-            />
-        </Box>
+            </div>
+            <div id="display" className={classes.reader} />
+        </div>
     );
 }
diff --git a/src/components/reader/pager/HorizontalPager.tsx b/src/components/reader/pager/HorizontalPager.tsx
index da494d59..ed1fb736 100644
--- a/src/components/reader/pager/HorizontalPager.tsx
+++ b/src/components/reader/pager/HorizontalPager.tsx
@@ -5,15 +5,30 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
+import makeStyles from '@mui/styles/makeStyles';
 import React, { useEffect, useRef } from 'react';
-import { Box } from '@mui/system';
 import Page from '../Page';
 
+const useStyles = (settings: IReaderSettings) => makeStyles({
+    reader: {
+        display: 'flex',
+        flexDirection: (settings.readerType === 'ContinuesHorizontalLTR') ? 'row' : 'row-reverse',
+        justifyContent: (settings.readerType === 'ContinuesHorizontalLTR') ? 'flex-start' : 'flex-end',
+        margin: '0 auto',
+        width: 'auto',
+        height: 'auto',
+        overflowX: 'visible',
+        userSelect: 'none',
+    },
+});
+
 export default function HorizontalPager(props: IReaderProps) {
     const {
         pages, curPage, settings, setCurPage, prevChapter, nextChapter,
     } = props;
 
+    const classes = useStyles(settings)();
+
     const selfRef = useRef<HTMLDivElement>(null);
     const pagesRef = useRef<HTMLDivElement[]>([]);
 
@@ -114,19 +129,7 @@ export default function HorizontalPager(props: IReaderProps) {
     }, [selfRef, curPage]);
 
     return (
-        <Box
-            ref={selfRef}
-            sx={{
-                display: 'flex',
-                flexDirection: (settings.readerType === 'ContinuesHorizontalLTR') ? 'row' : 'row-reverse',
-                justifyContent: (settings.readerType === 'ContinuesHorizontalLTR') ? 'flex-start' : 'flex-end',
-                margin: '0 auto',
-                width: 'auto',
-                height: 'auto',
-                overflowX: 'visible',
-                userSelect: 'none',
-            }}
-        >
+        <div ref={selfRef} className={classes.reader}>
             {
                 pages.map((page) => (
                     <Page
@@ -140,6 +143,6 @@ export default function HorizontalPager(props: IReaderProps) {
                     />
                 ))
             }
-        </Box>
+        </div>
     );
 }
diff --git a/src/components/reader/pager/PagedPager.tsx b/src/components/reader/pager/PagedPager.tsx
index 1fbe434e..5b1a1704 100644
--- a/src/components/reader/pager/PagedPager.tsx
+++ b/src/components/reader/pager/PagedPager.tsx
@@ -5,15 +5,28 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
+import makeStyles from '@mui/styles/makeStyles';
 import React, { useEffect, useRef } from 'react';
-import { Box } from '@mui/system';
 import Page from '../Page';
 
+const useStyles = makeStyles({
+    reader: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        margin: '0 auto',
+        width: '100%',
+        height: '100vh',
+    },
+});
+
 export default function PagedReader(props: IReaderProps) {
     const {
         pages, settings, setCurPage, curPage, nextChapter, prevChapter,
     } = props;
 
+    const classes = useStyles();
+
     const selfRef = useRef<HTMLDivElement>(null);
 
     function nextPage() {
@@ -84,17 +97,7 @@ export default function PagedReader(props: IReaderProps) {
     }, [selfRef, curPage, settings.readerType]);
 
     return (
-        <Box
-            ref={selfRef}
-            sx={{
-                display: 'flex',
-                flexDirection: 'row',
-                justifyContent: 'center',
-                margin: '0 auto',
-                width: '100%',
-                height: '100vh',
-            }}
-        >
+        <div ref={selfRef} className={classes.reader}>
             <Page
                 key={curPage}
                 index={curPage}
@@ -103,6 +106,6 @@ export default function PagedReader(props: IReaderProps) {
                 setCurPage={setCurPage}
                 settings={settings}
             />
-        </Box>
+        </div>
     );
 }
diff --git a/src/components/reader/pager/VerticalPager.tsx b/src/components/reader/pager/VerticalPager.tsx
index 5a95e897..302e01c1 100644
--- a/src/components/reader/pager/VerticalPager.tsx
+++ b/src/components/reader/pager/VerticalPager.tsx
@@ -5,15 +5,27 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
+import makeStyles from '@mui/styles/makeStyles';
 import React, { useEffect, useRef } from 'react';
-import { Box } from '@mui/system';
 import Page from '../Page';
 
+const useStyles = makeStyles({
+    reader: {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        margin: '0 auto',
+        width: '100%',
+    },
+});
+
 export default function VerticalReader(props: IReaderProps) {
     const {
         pages, settings, setCurPage, curPage, nextChapter, prevChapter,
     } = props;
 
+    const classes = useStyles();
+
     const selfRef = useRef<HTMLDivElement>(null);
     const pagesRef = useRef<HTMLDivElement[]>([]);
 
@@ -93,16 +105,7 @@ export default function VerticalReader(props: IReaderProps) {
     }, [pagesRef.current.length]);
 
     return (
-        <Box
-            ref={selfRef}
-            sx={{
-                display: 'flex',
-                flexDirection: 'column',
-                justifyContent: 'center',
-                margin: '0 auto',
-                width: '100%',
-            }}
-        >
+        <div ref={selfRef} className={classes.reader}>
             {
                 pages.map((page) => (
                     <Page
@@ -116,6 +119,6 @@ export default function VerticalReader(props: IReaderProps) {
                     />
                 ))
             }
-        </Box>
+        </div>
     );
 }
diff --git a/src/components/util/EmptyView.tsx b/src/components/util/EmptyView.tsx
index f41246ba..9a7f1e71 100644
--- a/src/components/util/EmptyView.tsx
+++ b/src/components/util/EmptyView.tsx
@@ -10,7 +10,6 @@ import React from 'react';
 import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/material/styles';
 import { useMediaQuery } from '@mui/material';
-import { Box } from '@mui/system';
 
 const ERROR_FACES = [
     '(･o･;)',
@@ -36,7 +35,7 @@ export default function EmptyView({ message, messageExtra }: IProps) {
     const isMobileWidth = useMediaQuery(theme.breakpoints.down('sm'));
 
     return (
-        <Box sx={{
+        <div style={{
             position: 'absolute',
             left: `calc(50% + ${isMobileWidth ? '0px' : theme.spacing(8 / 2)})`,
             top: '50%',
@@ -51,7 +50,7 @@ export default function EmptyView({ message, messageExtra }: IProps) {
                 {message}
             </Typography>
             {messageExtra}
-        </Box>
+        </div>
     );
 }
 
diff --git a/src/components/util/LoadingPlaceholder.tsx b/src/components/util/LoadingPlaceholder.tsx
index 5985fa7b..1a2412e9 100644
--- a/src/components/util/LoadingPlaceholder.tsx
+++ b/src/components/util/LoadingPlaceholder.tsx
@@ -8,8 +8,16 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import React from 'react';
+import makeStyles from '@mui/styles/makeStyles';
 import CircularProgress from '@mui/material/CircularProgress';
-import { Box } from '@mui/system';
+
+const useStyles = makeStyles({
+    loading: {
+        margin: '10px auto',
+        display: 'flex',
+        justifyContent: 'center',
+    },
+});
 
 interface IProps {
     shouldRender?: boolean | (() => boolean)
@@ -22,6 +30,7 @@ export default function LoadingPlaceholder(props: IProps) {
     const {
         children, shouldRender, component, componentProps,
     } = props;
+    const classes = useStyles();
 
     let condition = true;
     if (shouldRender !== undefined) {
@@ -43,13 +52,8 @@ export default function LoadingPlaceholder(props: IProps) {
     }
 
     return (
-        <Box sx={{
-            margin: '10px auto',
-            display: 'flex',
-            justifyContent: 'center',
-        }}
-        >
+        <div className={classes.loading}>
             <CircularProgress thickness={5} />
-        </Box>
+        </div>
     );
 }
diff --git a/src/components/util/SpinnerImage.tsx b/src/components/util/SpinnerImage.tsx
index 620a823c..91f64b9d 100644
--- a/src/components/util/SpinnerImage.tsx
+++ b/src/components/util/SpinnerImage.tsx
@@ -17,7 +17,9 @@ interface IProps {
 
     imgRef?: React.RefObject<HTMLImageElement>
 
+    spinnerClassName?: string
     spinnerStyle?: SxProps<Theme>
+    imgClassName?: string
     imgStyle?: CSSProperties
 
     onImageLoad?: () => void
@@ -25,7 +27,7 @@ interface IProps {
 
 export default function SpinnerImage(props: IProps) {
     const {
-        src, alt, onImageLoad, imgRef, spinnerStyle, imgStyle,
+        src, alt, onImageLoad, imgRef, spinnerClassName, imgClassName, spinnerStyle, imgStyle,
     } = props;
     const [imageSrc, setImagsrc] = useState<string>('');
 
@@ -51,18 +53,19 @@ export default function SpinnerImage(props: IProps) {
 
     if (imageSrc.length === 0) {
         return (
-            <Box sx={spinnerStyle}>
+            <Box className={spinnerClassName} sx={spinnerStyle}>
                 <CircularProgress thickness={5} />
             </Box>
         );
     }
 
     if (imageSrc === 'Not Found') {
-        return <Box sx={spinnerStyle} />;
+        return <Box className={spinnerClassName} sx={spinnerStyle} />;
     }
 
     return (
         <img
+            className={imgClassName}
             style={imgStyle}
             ref={imgRef}
             src={imageSrc}
@@ -72,6 +75,8 @@ export default function SpinnerImage(props: IProps) {
 }
 
 SpinnerImage.defaultProps = {
+    spinnerClassName: '',
+    imgClassName: '',
     spinnerStyle: {},
     imgStyle: {},
     onImageLoad: () => {},
diff --git a/src/screens/Browse.tsx b/src/screens/Browse.tsx
index f46e443c..d869470a 100644
--- a/src/screens/Browse.tsx
+++ b/src/screens/Browse.tsx
@@ -6,13 +6,21 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import React, { useState } from 'react';
+import makeStyles from '@mui/styles/makeStyles';
 import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
 import TabPanel from 'components/util/TabPanel';
 import Sources from 'screens/Sources';
 import Extensions from 'screens/Extensions';
 
+const useStyles = makeStyles({
+    noCapitalize: {
+        textTransform: 'none',
+    },
+});
+
 export default function Browse() {
+    const classes = useStyles();
     const [tabNum, setTabNum] = useState<number>(0);
 
     return (
@@ -27,8 +35,8 @@ export default function Browse() {
                 scrollButtons
                 allowScrollButtonsMobile
             >
-                <Tab sx={{ textTransform: 'none' }} label="Sources" />
-                <Tab sx={{ textTransform: 'none' }} label="Extensions" />
+                <Tab className={classes.noCapitalize} label="Sources" />
+                <Tab className={classes.noCapitalize} label="Extensions" />
             </Tabs>
             <TabPanel index={0} currentIndex={tabNum}>
                 <Sources />
diff --git a/src/screens/Manga.tsx b/src/screens/Manga.tsx
index 31d1420c..4ef84d4b 100644
--- a/src/screens/Manga.tsx
+++ b/src/screens/Manga.tsx
@@ -18,9 +18,15 @@ import LoadingPlaceholder from 'components/util/LoadingPlaceholder';
 import makeToast from 'components/util/Toast';
 import { Fab } from '@mui/material';
 import PlayArrow from '@mui/icons-material/PlayArrow';
-import { Box } from '@mui/system';
 
 const useStyles = makeStyles((theme: Theme) => ({
+    root: {
+        [theme.breakpoints.up('md')]: {
+            display: 'flex',
+        },
+        overflow: 'hidden',
+    },
+
     chapters: {
         listStyle: 'none',
         padding: 0,
@@ -31,6 +37,12 @@ const useStyles = makeStyles((theme: Theme) => ({
             margin: 0,
         },
     },
+
+    loading: {
+        margin: '10px 0',
+        display: 'flex',
+        justifyContent: 'center',
+    },
 }));
 
 const baseWebsocketUrl = JSON.parse(window.localStorage.getItem('serverBaseURL')!).replace('http', 'ws');
@@ -141,7 +153,7 @@ export default function Manga() {
         ));
 
     return (
-        <Box sx={{ display: { md: 'flex' }, overflow: 'hidden' }}>
+        <div className={classes.root}>
             <LoadingPlaceholder
                 shouldRender={manga !== undefined}
                 component={MangaDetails}
@@ -154,7 +166,7 @@ export default function Manga() {
                 <Virtuoso
                     style={{ // override Virtuoso default values and set them with class
                         height: 'undefined',
-                        overflowY: window.innerWidth < 900 ? 'visible' : 'auto',
+                        overflowY: window.innerWidth < 960 ? 'visible' : 'auto',
                     }}
                     className={classes.chapters}
                     totalCount={chapters.length}
@@ -165,11 +177,11 @@ export default function Manga() {
                             triggerChaptersUpdate={triggerChaptersUpdate}
                         />
                     )}
-                    useWindowScroll={window.innerWidth < 900}
+                    useWindowScroll={window.innerWidth < 960}
                     overscan={window.innerHeight * 0.5}
                 />
             </LoadingPlaceholder>
             <ResumeFab />
-        </Box>
+        </div>
     );
 }
diff --git a/src/screens/Reader.tsx b/src/screens/Reader.tsx
index 7d41782a..fde27372 100644
--- a/src/screens/Reader.tsx
+++ b/src/screens/Reader.tsx
@@ -6,6 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import CircularProgress from '@mui/material/CircularProgress';
+import makeStyles from '@mui/styles/makeStyles';
 import React, { useContext, useEffect, useState } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
 import HorizontalPager from 'components/reader/pager/HorizontalPager';
@@ -18,7 +19,18 @@ import NavbarContext from 'components/context/NavbarContext';
 import client from 'util/client';
 import useLocalStorage from 'util/useLocalStorage';
 import cloneObject from 'util/cloneObject';
-import { Box } from '@mui/system';
+
+const useStyles = (settings: IReaderSettings) => makeStyles({
+    root: {
+        width: settings.staticNav ? 'calc(100vw - 300px)' : '100vw',
+    },
+
+    loading: {
+        margin: '50px auto',
+        display: 'flex',
+        justifyContent: 'center',
+    },
+});
 
 const getReaderComponent = (readerType: ReaderType) => {
     switch (readerType) {
@@ -51,6 +63,7 @@ const initialChapter = () => ({ pageCount: -1, index: -1, chapterCount: 0 });
 export default function Reader() {
     const [settings, setSettings] = useLocalStorage<IReaderSettings>('readerSettings', defaultReaderSettings);
 
+    const classes = useStyles(settings)();
     const history = useHistory();
 
     const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
@@ -136,12 +149,9 @@ export default function Reader() {
     // return spinner while chpater data is loading
     if (chapter.pageCount === -1) {
         return (
-            <Box sx={{
-                height: '100vh', width: '100vw', display: 'grid', placeItems: 'center',
-            }}
-            >
+            <div className={classes.loading}>
                 <CircularProgress thickness={5} />
-            </Box>
+            </div>
         );
     }
 
@@ -170,7 +180,7 @@ export default function Reader() {
     const ReaderComponent = getReaderComponent(settings.readerType);
 
     return (
-        <Box sx={{ width: settings.staticNav ? 'calc(100vw - 300px)' : '100vw' }}>
+        <div className={classes.root}>
             <PageNumber
                 settings={settings}
                 curPage={curPage}
@@ -187,6 +197,6 @@ export default function Reader() {
                 nextChapter={nextChapter}
                 prevChapter={prevChapter}
             />
-        </Box>
+        </div>
     );
 }
diff --git a/src/screens/SearchSingle.tsx b/src/screens/SearchSingle.tsx
index 1660a215..f60eed60 100644
--- a/src/screens/SearchSingle.tsx
+++ b/src/screens/SearchSingle.tsx
@@ -6,19 +6,33 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import React, { useContext, useEffect, useState } from 'react';
+import makeStyles from '@mui/styles/makeStyles';
 import TextField from '@mui/material/TextField';
 import Button from '@mui/material/Button';
 import { useParams } from 'react-router-dom';
 import MangaGrid from 'components/MangaGrid';
 import NavbarContext from 'components/context/NavbarContext';
 import client from 'util/client';
-import { Box } from '@mui/system';
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        margin: '20px 10px',
+        display: 'flex',
+        justifyContent: 'space-around',
+        width: '300px',
+        TextField: {
+            margin: theme.spacing(1),
+            width: '25ch',
+        },
+    },
+}));
 
 export default function SearchSingle() {
     const { setTitle, setAction } = useContext(NavbarContext);
     useEffect(() => { setTitle('Search'); setAction(<></>); }, []);
 
     const { sourceId } = useParams<{ sourceId: string }>();
+    const classes = useStyles();
     const [error, setError] = useState<boolean>(false);
     const [mangas, setMangas] = useState<IMangaCard[]>([]);
     const [message, setMessage] = useState<string>('');
@@ -75,20 +89,10 @@ export default function SearchSingle() {
 
     return (
         <>
-            <Box sx={{
-                margin: '20px 10px',
-                display: 'flex',
-                justifyContent: 'space-around',
-                width: '300px',
-            }}
-            >
+            <div className={classes.root}>
                 <TextField
                     inputRef={textInput}
                     error={error}
-                    sx={{
-                        m: 1,
-                        width: '25ch',
-                    }}
                     id="filled-basic"
                     variant="filled"
                     size="small"
@@ -98,7 +102,7 @@ export default function SearchSingle() {
                 <Button variant="contained" color="primary" onClick={() => processInput()}>
                     Search
                 </Button>
-            </Box>
+            </div>
             {searchTerm.length > 0
         && (
             <MangaGrid
diff --git a/src/screens/Settings.tsx b/src/screens/Settings.tsx
index 0ede72b8..db86fef7 100644
--- a/src/screens/Settings.tsx
+++ b/src/screens/Settings.tsx
@@ -59,7 +59,7 @@ export default function Settings() {
 
     return (
         <>
-            <List sx={{ padding: 0 }}>
+            <List style={{ padding: 0 }}>
                 <ListItemLink href="/settings/categories">
                     <ListItemIcon>
                         <ListAltIcon />
diff --git a/src/screens/SourceConfigure.tsx b/src/screens/SourceConfigure.tsx
index f57b02d2..a46163d7 100644
--- a/src/screens/SourceConfigure.tsx
+++ b/src/screens/SourceConfigure.tsx
@@ -57,7 +57,7 @@ export default function SourceConfigure() {
 
     return (
         <>
-            <List sx={{ padding: 0 }}>
+            <List style={{ padding: 0 }}>
                 {sourcePreferences.map(
                     (it, index) => {
                         const props = cloneObject(it.props);
diff --git a/src/screens/Updates.tsx b/src/screens/Updates.tsx
index 04102e96..b82f2af9 100644
--- a/src/screens/Updates.tsx
+++ b/src/screens/Updates.tsx
@@ -20,7 +20,6 @@ import client from 'util/client';
 import useLocalStorage from 'util/useLocalStorage';
 import EmptyView from 'components/util/EmptyView';
 import LoadingPlaceholder from 'components/util/LoadingPlaceholder';
-import { Box } from '@mui/system';
 
 function epochToDate(epoch: number) {
     const date = new Date(0); // The 0 there is the key, which sets the date to the epoch
@@ -190,7 +189,7 @@ export default function Updates() {
                                 padding: 2,
                             }}
                             >
-                                <Box sx={{ display: 'flex' }}>
+                                <div style={{ display: 'flex' }}>
                                     <Avatar
                                         variant="rounded"
                                         sx={{
@@ -202,7 +201,7 @@ export default function Updates() {
                                         }}
                                         src={`${serverAddress}${manga.thumbnailUrl}?useCache=${useCache}`}
                                     />
-                                    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+                                    <div style={{ display: 'flex', flexDirection: 'column' }}>
                                         <Typography variant="h5" component="h2">
                                             {manga.title}
                                         </Typography>
@@ -210,8 +209,8 @@ export default function Updates() {
                                             {chapter.name}
                                             {downloadStatusStringFor(chapter)}
                                         </Typography>
-                                    </Box>
-                                </Box>
+                                    </div>
+                                </div>
                                 {downloadStatusStringFor(chapter) === ''
                                         && (
                                             <IconButton
diff --git a/src/screens/settings/About.tsx b/src/screens/settings/About.tsx
index 809b70c9..7a35ab4c 100644
--- a/src/screens/settings/About.tsx
+++ b/src/screens/settings/About.tsx
@@ -1,15 +1,26 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { CircularProgress } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
-import { Box } from '@mui/system';
-import client from 'util/client';
-import ListItemLink from 'components/util/ListItemLink';
-import NavbarContext from 'components/context/NavbarContext';
+import client from '../../util/client';
+import ListItemLink from '../../components/util/ListItemLink';
+import NavbarContext from '../../components/context/NavbarContext';
+
+const useStyles = makeStyles({
+    loading: {
+        width: '100vw',
+        '& div': {
+            margin: '50px auto',
+            display: 'block',
+        },
+    },
+});
 
 export default function About() {
     const { setTitle, setAction } = useContext(NavbarContext);
+    const classes = useStyles();
 
     const [about, setAbout] = useState<IAbout>();
 
@@ -25,12 +36,9 @@ export default function About() {
 
     if (about === undefined) {
         return (
-            <Box sx={{
-                height: 'calc(100vh - 128px)', display: 'grid', placeItems: 'center',
-            }}
-            >
+            <div className={classes.loading}>
                 <CircularProgress thickness={5} />
-            </Box>
+            </div>
         );
     }
 
diff --git a/src/screens/settings/Backup.tsx b/src/screens/settings/Backup.tsx
index 3c53646c..18ef65b1 100644
--- a/src/screens/settings/Backup.tsx
+++ b/src/screens/settings/Backup.tsx
@@ -67,7 +67,7 @@ export default function Backup() {
 
     return (
         <>
-            <List sx={{ padding: 0 }}>
+            <List style={{ padding: 0 }}>
                 <ListItemLink href={`${baseURL}/api/v1/backup/export/file`}>
                     <ListItemText
                         primary="Create Backup"