diff --git a/package.json b/package.json
index a5ea66b7..c5d5e454 100644
--- a/package.json
+++ b/package.json
@@ -16,8 +16,8 @@
     "@emotion/styled": "^11.3.0",
     "@fontsource/lexend-deca": "4.4.5",
     "@fontsource/montserrat": "4.4.5",
-    "@material-ui/core": "5.0.0-beta.5",
-    "@material-ui/icons": "5.0.0-beta.5",
+    "@mui/icons-material": "5.0.0-rc.0",
+    "@mui/material": "5.0.0-rc.0",
     "react": "17.0.2",
     "react-clock": "3.0.0",
     "react-color-gradient-picker": "0.1.2",
diff --git a/src/components/modals/ErrorBoundary.jsx b/src/components/modals/ErrorBoundary.jsx
index 523fef2b..f48bc7da 100644
--- a/src/components/modals/ErrorBoundary.jsx
+++ b/src/components/modals/ErrorBoundary.jsx
@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { ErrorOutline } from '@material-ui/icons';
+import { ErrorOutline } from '@mui/icons-material';
 
 export default class ErrorBoundary extends PureComponent {
   constructor(props) {
diff --git a/src/components/modals/main/marketplace/Item.jsx b/src/components/modals/main/marketplace/Item.jsx
index ca94f409..b435638e 100644
--- a/src/components/modals/main/marketplace/Item.jsx
+++ b/src/components/modals/main/marketplace/Item.jsx
@@ -1,7 +1,7 @@
 import variables from 'modules/variables';
 import { PureComponent, Fragment } from 'react';
 import { toast } from 'react-toastify';
-import { ArrowBack } from '@material-ui/icons';
+import { ArrowBack } from '@mui/icons-material';
 import Modal from 'react-modal';
 
 import { install, uninstall } from 'modules/helpers/marketplace';
diff --git a/src/components/modals/main/marketplace/sections/Added.jsx b/src/components/modals/main/marketplace/sections/Added.jsx
index 400455c7..ea2c8b9a 100644
--- a/src/components/modals/main/marketplace/sections/Added.jsx
+++ b/src/components/modals/main/marketplace/sections/Added.jsx
@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { LocalMall } from '@material-ui/icons';
+import { LocalMall } from '@mui/icons-material';
 import { toast } from 'react-toastify';
 
 import Item from '../Item';
diff --git a/src/components/modals/main/marketplace/sections/Create.jsx b/src/components/modals/main/marketplace/sections/Create.jsx
index c72f7ddd..9a149e0d 100644
--- a/src/components/modals/main/marketplace/sections/Create.jsx
+++ b/src/components/modals/main/marketplace/sections/Create.jsx
@@ -5,7 +5,7 @@ import {
   SettingsRounded as Settings, 
   PhotoOutlined as Photos, 
   FormatQuoteOutlined as Quotes
-} from '@material-ui/icons';
+} from '@mui/icons-material';
 import { toast } from 'react-toastify';
 
 import { saveFile } from 'modules/helpers/settings/modals';
diff --git a/src/components/modals/main/marketplace/sections/Marketplace.jsx b/src/components/modals/main/marketplace/sections/Marketplace.jsx
index 4d98ec5b..59e8e8ad 100644
--- a/src/components/modals/main/marketplace/sections/Marketplace.jsx
+++ b/src/components/modals/main/marketplace/sections/Marketplace.jsx
@@ -1,7 +1,7 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import { toast } from 'react-toastify';
-import { WifiOff, LocalMall } from '@material-ui/icons';
+import { WifiOff, LocalMall } from '@mui/icons-material';
 
 import Item from '../Item';
 import Items from '../Items';
diff --git a/src/components/modals/main/marketplace/sections/Sideload.jsx b/src/components/modals/main/marketplace/sections/Sideload.jsx
index b91e1a76..a4c55ad1 100644
--- a/src/components/modals/main/marketplace/sections/Sideload.jsx
+++ b/src/components/modals/main/marketplace/sections/Sideload.jsx
@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { LocalMall } from '@material-ui/icons';
+import { LocalMall } from '@mui/icons-material';
 import { toast } from 'react-toastify';
 import Modal from 'react-modal';
 
diff --git a/src/components/modals/main/settings/Checkbox.jsx b/src/components/modals/main/settings/Checkbox.jsx
index 9470b110..e056e03f 100644
--- a/src/components/modals/main/settings/Checkbox.jsx
+++ b/src/components/modals/main/settings/Checkbox.jsx
@@ -1,5 +1,5 @@
 import { PureComponent } from 'react';
-import { Checkbox as CheckboxUI, FormControlLabel } from '@material-ui/core';
+import { Checkbox as CheckboxUI, FormControlLabel } from '@mui/material';
 
 import EventBus from 'modules/helpers/eventbus';
 
diff --git a/src/components/modals/main/settings/Radio.jsx b/src/components/modals/main/settings/Radio.jsx
index da56d98e..00d8c20e 100644
--- a/src/components/modals/main/settings/Radio.jsx
+++ b/src/components/modals/main/settings/Radio.jsx
@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { Radio as RadioUI, RadioGroup, FormControlLabel, FormControl, FormLabel } from '@material-ui/core';
+import { Radio as RadioUI, RadioGroup, FormControlLabel, FormControl, FormLabel } from '@mui/material';
 
 import EventBus from 'modules/helpers/eventbus';
 
diff --git a/src/components/modals/main/settings/ResetModal.jsx b/src/components/modals/main/settings/ResetModal.jsx
index 9503426e..5bed136a 100644
--- a/src/components/modals/main/settings/ResetModal.jsx
+++ b/src/components/modals/main/settings/ResetModal.jsx
@@ -1,5 +1,5 @@
 import variables from 'modules/variables';
-import { Close, Delete } from '@material-ui/icons';
+import { Close, Delete } from '@mui/icons-material';
 import { setDefaultSettings } from 'modules/helpers/settings';
 
 export default function ResetModal({ modalClose }) {
diff --git a/src/components/modals/main/settings/Switch.jsx b/src/components/modals/main/settings/Switch.jsx
index d3e08f49..d95cd5e9 100644
--- a/src/components/modals/main/settings/Switch.jsx
+++ b/src/components/modals/main/settings/Switch.jsx
@@ -1,5 +1,5 @@
 import { PureComponent } from 'react';
-import { Switch as SwitchUI, FormControlLabel } from '@material-ui/core';
+import { Switch as SwitchUI, FormControlLabel } from '@mui/material';
 
 import EventBus from 'modules/helpers/eventbus';
 
diff --git a/src/components/modals/main/settings/sections/About.jsx b/src/components/modals/main/settings/sections/About.jsx
index 8bf2cb05..755fc18b 100644
--- a/src/components/modals/main/settings/sections/About.jsx
+++ b/src/components/modals/main/settings/sections/About.jsx
@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { Email, Twitter, Chat, Instagram, Facebook } from '@material-ui/icons';
+import { Email, Twitter, Chat, Instagram, Facebook } from '@mui/icons-material';
 
 import Tooltip from 'components/helpers/tooltip/Tooltip';
 
diff --git a/src/components/modals/main/settings/sections/Changelog.jsx b/src/components/modals/main/settings/sections/Changelog.jsx
index 4c1a9c66..30c111db 100644
--- a/src/components/modals/main/settings/sections/Changelog.jsx
+++ b/src/components/modals/main/settings/sections/Changelog.jsx
@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent, createRef } from 'react';
-import { WifiOff } from '@material-ui/icons';
+import { WifiOff } from '@mui/icons-material';
 import Modal from 'react-modal';
 
 import Lightbox from '../../marketplace/Lightbox';
diff --git a/src/components/modals/main/settings/sections/Order.jsx b/src/components/modals/main/settings/sections/Order.jsx
index 2f52dc25..73fff191 100644
--- a/src/components/modals/main/settings/sections/Order.jsx
+++ b/src/components/modals/main/settings/sections/Order.jsx
@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { DragIndicator } from '@material-ui/icons';
+import { DragIndicator } from '@mui/icons-material';
 import { sortableContainer, sortableElement } from 'react-sortable-hoc';
 import { toast } from 'react-toastify';
 
diff --git a/src/components/modals/main/settings/sections/background/Background.jsx b/src/components/modals/main/settings/sections/background/Background.jsx
index 69e2186e..208721ca 100644
--- a/src/components/modals/main/settings/sections/background/Background.jsx
+++ b/src/components/modals/main/settings/sections/background/Background.jsx
@@ -1,7 +1,7 @@
 import variables from 'modules/variables';
 import { PureComponent, Fragment } from 'react';
 import { toast } from 'react-toastify';
-import { Cancel } from '@material-ui/icons';
+import { Cancel } from '@mui/icons-material';
 
 import Checkbox from '../../Checkbox';
 import Dropdown from '../../Dropdown';
diff --git a/src/components/modals/main/tabs/backend/Tab.jsx b/src/components/modals/main/tabs/backend/Tab.jsx
index 730bbf3d..0218ce13 100644
--- a/src/components/modals/main/tabs/backend/Tab.jsx
+++ b/src/components/modals/main/tabs/backend/Tab.jsx
@@ -23,7 +23,7 @@ import {
   AddCircleOutline as Added,
   CreateNewFolderOutlined as Create,
   KeyboardAltOutlined as Keybinds
-} from '@material-ui/icons';
+} from '@mui/icons-material';
 
 function Tab({ label, currentTab, onClick, navbarTab }) {
   const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
diff --git a/src/components/modals/welcome/WelcomeSections.jsx b/src/components/modals/welcome/WelcomeSections.jsx
index 6d83b99c..a301a836 100644
--- a/src/components/modals/welcome/WelcomeSections.jsx
+++ b/src/components/modals/welcome/WelcomeSections.jsx
@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { CloudUpload, AutoAwesome, LightMode, DarkMode } from '@material-ui/icons';
+import { CloudUpload, AutoAwesome, LightMode, DarkMode } from '@mui/icons-material';
 
 import Radio from '../main/settings/Radio';
 import Checkbox from '../main/settings/Checkbox';
diff --git a/src/components/widgets/background/Favourite.jsx b/src/components/widgets/background/Favourite.jsx
index 41340bb1..a24655b5 100644
--- a/src/components/widgets/background/Favourite.jsx
+++ b/src/components/widgets/background/Favourite.jsx
@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { Star, StarBorder } from '@material-ui/icons';
+import { Star, StarBorder } from '@mui/icons-material';
 import Hotkeys from 'react-hot-keys';
 
 import Tooltip from 'components/helpers/tooltip/Tooltip';
diff --git a/src/components/widgets/background/Maximise.jsx b/src/components/widgets/background/Maximise.jsx
index cfa10150..3113c83c 100644
--- a/src/components/widgets/background/Maximise.jsx
+++ b/src/components/widgets/background/Maximise.jsx
@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { Fullscreen } from '@material-ui/icons';
+import { Fullscreen } from '@mui/icons-material';
 import Hotkeys from 'react-hot-keys';
 
 import Tooltip from 'components/helpers/tooltip/Tooltip';
diff --git a/src/components/widgets/background/PhotoInformation.jsx b/src/components/widgets/background/PhotoInformation.jsx
index bf03b2ca..d94e5d37 100644
--- a/src/components/widgets/background/PhotoInformation.jsx
+++ b/src/components/widgets/background/PhotoInformation.jsx
@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { useState, Fragment } from 'react';
-import { Info, LocationOn, PhotoCamera, Crop as Resolution, Person as Photographer, GetApp as Download } from '@material-ui/icons';
+import { Info, LocationOn, PhotoCamera, Crop as Resolution, Person as Photographer, GetApp as Download } from '@mui/icons-material';
 import Hotkeys from 'react-hot-keys';
 import { lat2tile, lon2tile } from 'modules/helpers/background/widget';
 
diff --git a/src/components/widgets/navbar/Navbar.jsx b/src/components/widgets/navbar/Navbar.jsx
index 84a83c2c..a027e824 100644
--- a/src/components/widgets/navbar/Navbar.jsx
+++ b/src/components/widgets/navbar/Navbar.jsx
@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent, createRef } from 'react';
-import { RefreshRounded, SettingsRounded, AssignmentRounded as NotesRounded, SmsFailed as Report } from '@material-ui/icons';
+import { RefreshRounded, SettingsRounded, AssignmentRounded as NotesRounded, SmsFailed as Report } from '@mui/icons-material';
 
 import Notes from './Notes';
 import Maximise from '../background/Maximise';
diff --git a/src/components/widgets/navbar/Notes.jsx b/src/components/widgets/navbar/Notes.jsx
index 68e0f2de..7ff1beb5 100644
--- a/src/components/widgets/navbar/Notes.jsx
+++ b/src/components/widgets/navbar/Notes.jsx
@@ -1,7 +1,7 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { FileCopyRounded, AssignmentRounded as NotesRounded, PushPin }from '@material-ui/icons';
-import TextareaAutosize from '@material-ui/core/TextareaAutosize';
+import { FileCopyRounded, AssignmentRounded as NotesRounded, PushPin }from '@mui/icons-material';
+import TextareaAutosize from '@mui/material/TextareaAutosize';
 import { toast } from 'react-toastify';
 import Hotkeys from 'react-hot-keys';
 
diff --git a/src/components/widgets/quicklinks/QuickLinks.jsx b/src/components/widgets/quicklinks/QuickLinks.jsx
index 0cf4d73f..f7d85239 100644
--- a/src/components/widgets/quicklinks/QuickLinks.jsx
+++ b/src/components/widgets/quicklinks/QuickLinks.jsx
@@ -1,5 +1,5 @@
 import { PureComponent, createRef } from 'react';
-import { TextareaAutosize } from '@material-ui/core';
+import { TextareaAutosize } from '@mui/material';
 import Hotkeys from 'react-hot-keys';
 
 import Tooltip from 'components/helpers/tooltip/Tooltip';
diff --git a/src/components/widgets/quote/Quote.jsx b/src/components/widgets/quote/Quote.jsx
index 7ec91c86..04343708 100644
--- a/src/components/widgets/quote/Quote.jsx
+++ b/src/components/widgets/quote/Quote.jsx
@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent, createRef } from 'react';
-import { FilterNone as FileCopy, Twitter, Star, StarBorder } from '@material-ui/icons';
+import { FilterNone as FileCopy, Twitter, Star, StarBorder } from '@mui/icons-material';
 import { toast } from 'react-toastify';
 import Hotkeys from 'react-hot-keys';
 
diff --git a/src/components/widgets/search/Search.jsx b/src/components/widgets/search/Search.jsx
index 20a4712e..0b80fb31 100644
--- a/src/components/widgets/search/Search.jsx
+++ b/src/components/widgets/search/Search.jsx
@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent, Fragment } from 'react';
-import { Search as SearchIcon, Mic } from '@material-ui/icons';
+import { Search as SearchIcon, Mic } from '@mui/icons-material';
 import Hotkeys from 'react-hot-keys';
 
 import AutocompleteInput from 'components/helpers/autocomplete/Autocomplete';
diff --git a/src/scss/modules/_buttons.scss b/src/scss/modules/_buttons.scss
index 2b34f974..28594b45 100644
--- a/src/scss/modules/_buttons.scss
+++ b/src/scss/modules/_buttons.scss
@@ -109,4 +109,4 @@
       transition: ease 0.5s;
     }
   }
-}
\ No newline at end of file
+}