diff --git a/src/App.jsx b/src/App.jsx
index 873b5279..17be0ffe 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,13 +1,13 @@
 import { PureComponent } from 'react';
+import { ToastContainer } from 'react-toastify';
 
 import Background from './components/widgets/background/Background';
 import Widgets from './components/widgets/Widgets';
 import Modals from './components/modals/Modals';
 
-import EventBus from './modules/helpers/eventbus';
 import { loadSettings, moveSettings } from './modules/helpers/settings';
 
-import { ToastContainer } from 'react-toastify';
+import EventBus from './modules/helpers/eventbus';
 
 export default class App extends PureComponent {
   componentDidMount() {
diff --git a/src/components/modals/ErrorBoundary.jsx b/src/components/modals/ErrorBoundary.jsx
index 91297f29..ee62844f 100644
--- a/src/components/modals/ErrorBoundary.jsx
+++ b/src/components/modals/ErrorBoundary.jsx
@@ -1,6 +1,5 @@
 import { PureComponent } from 'react';
-
-import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
+import { ErrorOutline } from '@material-ui/icons';
 
 export default class ErrorBoundary extends PureComponent {
   constructor(props) {
@@ -24,7 +23,7 @@ export default class ErrorBoundary extends PureComponent {
       return (
         <div className='emptyitems'>
           <div className='emptyMessage'>
-            <ErrorOutlineIcon/>
+            <ErrorOutline/>
             <h1>{this.language.title}</h1>
             <p>{this.language.message}</p>
             <button className='refresh' onClick={() => window.location.reload()}>{this.language.refresh}</button>
diff --git a/src/components/modals/Modals.jsx b/src/components/modals/Modals.jsx
index 0e2e68c2..21585741 100644
--- a/src/components/modals/Modals.jsx
+++ b/src/components/modals/Modals.jsx
@@ -1,12 +1,11 @@
 import { PureComponent, Suspense, lazy } from 'react';
-
-import EventBus from '../../modules/helpers/eventbus';
+import Modal from 'react-modal';
 
 import Main from './main/Main';
 import Feedback from './feedback/Feedback';
 import Navbar from '../widgets/navbar/Navbar';
 
-import Modal from 'react-modal';
+import EventBus from '../../modules/helpers/eventbus';
 
 // Welcome modal is lazy loaded as the user won't use it every time they open a tab
 // We used to lazy load the main and feedback modals, but doing so broke the modal open animation on first click
diff --git a/src/components/modals/main/marketplace/Item.jsx b/src/components/modals/main/marketplace/Item.jsx
index c35aa54c..b54a9211 100644
--- a/src/components/modals/main/marketplace/Item.jsx
+++ b/src/components/modals/main/marketplace/Item.jsx
@@ -1,11 +1,9 @@
 import { PureComponent } from 'react';
-
+import { ArrowBack } from '@material-ui/icons';
 import Modal from 'react-modal';
 
 import Lightbox from './Lightbox';
 
-import ArrowBackIcon from '@material-ui/icons/ArrowBack';
-
 export default class Item extends PureComponent {
   constructor() {
     super();
@@ -42,7 +40,7 @@ export default class Item extends PureComponent {
     return (
       <div id='item'>
         <br/>
-        <ArrowBackIcon className='backArrow' onClick={this.props.toggleFunction}/>
+        <ArrowBack className='backArrow' onClick={this.props.toggleFunction}/>
         <br/>
         <h1>{this.props.data.display_name}</h1>
         {this.props.button}
diff --git a/src/components/modals/main/marketplace/sections/Added.jsx b/src/components/modals/main/marketplace/sections/Added.jsx
index 7321cc72..acc87346 100644
--- a/src/components/modals/main/marketplace/sections/Added.jsx
+++ b/src/components/modals/main/marketplace/sections/Added.jsx
@@ -1,14 +1,13 @@
 import { PureComponent } from 'react';
+import { LocalMall } from '@material-ui/icons';
+import { toast } from 'react-toastify';
 
-import LocalMallIcon from '@material-ui/icons/LocalMall';
 import Item from '../Item';
 import Items from '../Items';
 import Dropdown from '../../settings/Dropdown';
 
 import { uninstall, urlParser } from '../../../../../modules/helpers/marketplace';
 
-import { toast } from 'react-toastify';
-
 export default class Added extends PureComponent {
   constructor() {
     super();
@@ -100,7 +99,7 @@ export default class Added extends PureComponent {
       return (
         <div className='emptyitems'>
           <div className='emptyMessage'>
-            <LocalMallIcon/>
+            <LocalMall/>
             <h1>{this.language.empty.title}</h1>
             <p className='description'>{this.language.empty.description}</p>
           </div>
diff --git a/src/components/modals/main/marketplace/sections/Create.jsx b/src/components/modals/main/marketplace/sections/Create.jsx
index d2f58508..82883387 100644
--- a/src/components/modals/main/marketplace/sections/Create.jsx
+++ b/src/components/modals/main/marketplace/sections/Create.jsx
@@ -1,13 +1,14 @@
 import { PureComponent } from 'react';
-
-import FileUpload from '../../settings/FileUpload';
-
-import Settings from '@material-ui/icons/SettingsRounded';
-import Photos from '@material-ui/icons/PhotoOutlined';
-import Quotes from '@material-ui/icons/FormatQuoteOutlined';
+import { 
+  SettingsRounded as Settings, 
+  PhotoOutlined as Photos, 
+  FormatQuoteOutlined as Quotes
+} from '@material-ui/icons';
+import { toast } from 'react-toastify';
 
 import { saveFile } from '../../../../../modules/helpers/settings/modals';
-import { toast } from 'react-toastify';
+
+import FileUpload from '../../settings/FileUpload';
 
 import '../../../welcome/welcome.scss';
 
diff --git a/src/components/modals/main/marketplace/sections/Marketplace.jsx b/src/components/modals/main/marketplace/sections/Marketplace.jsx
index f10862e7..9bfb5f42 100644
--- a/src/components/modals/main/marketplace/sections/Marketplace.jsx
+++ b/src/components/modals/main/marketplace/sections/Marketplace.jsx
@@ -1,7 +1,6 @@
 import { PureComponent } from 'react';
-
-import WifiOffIcon from '@material-ui/icons/WifiOff';
-import LocalMallIcon from '@material-ui/icons/LocalMall';
+import { toast } from 'react-toastify';
+import { WifiOff, LocalMall } from '@material-ui/icons';
 
 import Item from '../Item';
 import Items from '../Items';
@@ -9,8 +8,6 @@ import Dropdown from '../../settings/Dropdown';
 
 import { install, urlParser, uninstall } from '../../../../../modules/helpers/marketplace';
 
-import { toast } from 'react-toastify';
-
 export default class Marketplace extends PureComponent {
   constructor() {
     super();
@@ -178,7 +175,7 @@ export default class Marketplace extends PureComponent {
 
     if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
       return errorMessage(<>
-        <WifiOffIcon/>
+        <WifiOff/>
         <h1>{this.language.offline.title}</h1>
         <p className='description'>{this.language.offline.description}</p>
       </>);
@@ -193,7 +190,7 @@ export default class Marketplace extends PureComponent {
         <>
           {featured()}
           {errorMessage(<>
-            <LocalMallIcon/>
+            <LocalMall/>
             <h1>{window.language.modals.main.addons.empty.title}</h1>
             <p className='description'>{this.language.no_items}</p>
           </>)}
diff --git a/src/components/modals/main/marketplace/sections/Sideload.jsx b/src/components/modals/main/marketplace/sections/Sideload.jsx
index e1a2393f..7109e310 100644
--- a/src/components/modals/main/marketplace/sections/Sideload.jsx
+++ b/src/components/modals/main/marketplace/sections/Sideload.jsx
@@ -1,9 +1,9 @@
-import LocalMallIcon from '@material-ui/icons/LocalMall';
+import { LocalMall } from '@material-ui/icons';
+import { toast } from 'react-toastify';
 
 import FileUpload from '../../settings/FileUpload';
 
 import { install } from '../../../../../modules/helpers/marketplace';
-import { toast } from 'react-toastify';
 
 export default function Sideload() {
   const installAddon = (input) => {
@@ -16,7 +16,7 @@ export default function Sideload() {
     <div className='emptyitems'>
       <div className='emptyMessage'>
         <FileUpload id='file-input' type='settings' accept='application/json' loadFunction={(e) => installAddon(JSON.parse(e.target.result))} />
-        <LocalMallIcon/>
+        <LocalMall/>
         <h1>{window.language.modals.main.addons.sideload}</h1>
         <button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>{window.language.modals.main.settings.sections.background.source.upload}</button>
       </div>
diff --git a/src/components/modals/main/scss/settings/_main.scss b/src/components/modals/main/scss/settings/_main.scss
index cc949396..2eb78867 100644
--- a/src/components/modals/main/scss/settings/_main.scss
+++ b/src/components/modals/main/scss/settings/_main.scss
@@ -106,11 +106,6 @@ ul {
   }
 }
 
-.newFeature {
-  color: #ff4757;
-  font-size: 12px;
-}
-
 .settingsTextarea {
   font-family: Consolas !important;
   padding: 15px;
diff --git a/src/components/modals/main/settings/Checkbox.jsx b/src/components/modals/main/settings/Checkbox.jsx
index cd8f7cca..15befa69 100644
--- a/src/components/modals/main/settings/Checkbox.jsx
+++ b/src/components/modals/main/settings/Checkbox.jsx
@@ -1,10 +1,8 @@
 import { PureComponent } from 'react';
+import { Checkbox as CheckboxUI, FormControlLabel } from '@material-ui/core';
 
 import EventBus from '../../../../modules/helpers/eventbus';
 
-import CheckboxUI from '@material-ui/core/Checkbox';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-
 export default class Checkbox extends PureComponent {
   constructor(props) {
     super(props);
@@ -34,19 +32,11 @@ export default class Checkbox extends PureComponent {
   }
 
   render() {
-    let text = this.props.text;
-
-    if (this.props.newFeature) {
-      text = <>{this.props.text} <span className='newFeature'> NEW</span></>;
-    } else if (this.props.betaFeature) {
-      text = <>{this.props.text} <span className='newFeature'> BETA</span></>;
-    }
-
     return (
       <>
         <FormControlLabel
           control={<CheckboxUI name={this.props.name} color='primary' className='checkbox' checked={this.state.checked} onChange={this.handleChange} />}
-          label={text}
+          label={this.props.text}
         />
         <br/>
       </>
diff --git a/src/components/modals/main/settings/FileUpload.jsx b/src/components/modals/main/settings/FileUpload.jsx
index 668799b4..0d089841 100644
--- a/src/components/modals/main/settings/FileUpload.jsx
+++ b/src/components/modals/main/settings/FileUpload.jsx
@@ -1,5 +1,4 @@
 import { PureComponent } from 'react';
-
 import { toast } from 'react-toastify';
 
 export default class FileUpload extends PureComponent {
diff --git a/src/components/modals/main/settings/Radio.jsx b/src/components/modals/main/settings/Radio.jsx
index 3e4a0dbc..01c793c0 100644
--- a/src/components/modals/main/settings/Radio.jsx
+++ b/src/components/modals/main/settings/Radio.jsx
@@ -1,13 +1,8 @@
 import { PureComponent } from 'react';
+import { Radio as RadioUI, RadioGroup, FormControlLabel, FormControl, FormLabel } from '@material-ui/core';
 
 import EventBus from '../../../../modules/helpers/eventbus';
 
-import RadioUI from '@material-ui/core/Radio';
-import RadioGroup from '@material-ui/core/RadioGroup';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import FormControl from '@material-ui/core/FormControl';
-import FormLabel from '@material-ui/core/FormLabel';
-
 export default class Radio extends PureComponent {
   constructor(props) {
     super(props);
diff --git a/src/components/modals/main/settings/ResetModal.jsx b/src/components/modals/main/settings/ResetModal.jsx
index 6804f11c..ab7a2d6f 100644
--- a/src/components/modals/main/settings/ResetModal.jsx
+++ b/src/components/modals/main/settings/ResetModal.jsx
@@ -1,6 +1,4 @@
-import CloseIcon from '@material-ui/icons/Close';
-import DeleteIcon from '@material-ui/icons/Delete';
-
+import { Close, Delete } from '@material-ui/icons';
 import { setDefaultSettings } from '../../../../modules/helpers/settings';
 
 export default function ResetModal(props) {
@@ -20,10 +18,10 @@ export default function ResetModal(props) {
       <span>{language.information}</span>
       <div className='resetfooter'>
         <button className='round reset' style={{ marginLeft: 0 }} onClick={() => reset()}>
-          <DeleteIcon/>
+          <Delete/>
         </button>
         <button className='round import' style={{ marginLeft: '5px' }} onClick={props.modalClose}>
-          <CloseIcon/>
+          <Close/>
         </button>
       </div>
     </>
diff --git a/src/components/modals/main/settings/Slider.jsx b/src/components/modals/main/settings/Slider.jsx
index 9ccc9652..f9073626 100644
--- a/src/components/modals/main/settings/Slider.jsx
+++ b/src/components/modals/main/settings/Slider.jsx
@@ -1,10 +1,9 @@
 // todo: find a better method to do width of number input
 import { PureComponent } from 'react';
+import { toast } from 'react-toastify';
 
 import EventBus from '../../../../modules/helpers/eventbus';
 
-import { toast } from 'react-toastify';
-
 export default class Slider extends PureComponent {
   constructor(props) {
     super(props);
diff --git a/src/components/modals/main/settings/Switch.jsx b/src/components/modals/main/settings/Switch.jsx
index c5f37435..c35b9b47 100644
--- a/src/components/modals/main/settings/Switch.jsx
+++ b/src/components/modals/main/settings/Switch.jsx
@@ -1,10 +1,8 @@
 import { PureComponent } from 'react';
+import { Switch as SwitchUI, FormControlLabel } from '@material-ui/core';
 
 import EventBus from '../../../../modules/helpers/eventbus';
 
-import SwitchUI from '@material-ui/core/Switch';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-
 export default class Switch extends PureComponent {
   constructor(props) {
     super(props);
@@ -34,19 +32,11 @@ export default class Switch extends PureComponent {
   }
 
   render() {
-    let text = this.props.text;
-
-    if (this.props.newFeature) {
-      text = <>{this.props.text} <span className='newFeature'> NEW</span></>;
-    } else if (this.props.betaFeature) {
-      text = <>{this.props.text} <span className='newFeature'> BETA</span></>;
-    }
-
     return (
       <>
         <FormControlLabel
           control={<SwitchUI name={this.props.name} color='primary' checked={this.state.checked} onChange={this.handleChange} />}
-          label={text}
+          label={this.props.text}
           labelPlacement='start'
         />
         <br/>
diff --git a/src/components/modals/main/settings/Text.jsx b/src/components/modals/main/settings/Text.jsx
index d7c3b540..72d80f69 100644
--- a/src/components/modals/main/settings/Text.jsx
+++ b/src/components/modals/main/settings/Text.jsx
@@ -1,9 +1,8 @@
 import { PureComponent } from 'react';
+import { toast } from 'react-toastify';
 
 import EventBus from '../../../../modules/helpers/eventbus';
 
-import { toast } from 'react-toastify';
-
 export default class Text extends PureComponent {
   constructor(props) {
     super(props);
diff --git a/src/components/modals/main/settings/sections/About.jsx b/src/components/modals/main/settings/sections/About.jsx
index 9aa32a3e..882f179c 100644
--- a/src/components/modals/main/settings/sections/About.jsx
+++ b/src/components/modals/main/settings/sections/About.jsx
@@ -1,11 +1,7 @@
 import { PureComponent } from 'react';
+import { Email, Twitter, Chat, Instagram, Facebook } from '@material-ui/icons';
 
 import Tooltip from '../../../../helpers/tooltip/Tooltip';
-import EmailIcon from '@material-ui/icons/Email';
-import TwitterIcon from '@material-ui/icons/Twitter';
-import ChatIcon from '@material-ui/icons/Chat';
-import InstagramIcon from '@material-ui/icons/Instagram';
-import FacebookIcon from '@material-ui/icons/Facebook';
 
 const other_contributors = require('../../../../../modules/other_contributors.json');
 
@@ -94,11 +90,11 @@ export default class About extends PureComponent {
         <a href={window.constants.PRIVACY_URL} className='aboutLink' target='_blank' rel='noopener noreferrer' style={{ fontSize: '1rem' }}>{window.language.modals.welcome.sections.privacy.links.privacy_policy}</a>
 
         <h3>{this.language.contact_us}</h3>
-        <a href={'mailto:' + window.constants.EMAIL} className='aboutIcon' target='_blank' rel='noopener noreferrer'><EmailIcon/></a>
-        <a href={'https://twitter.com/' + window.constants.TWITTER_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><TwitterIcon/></a>
-        <a href={'https://instagram.com/' + window.constants.INSTAGRAM_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><InstagramIcon/></a>
-        <a href={'https://facebook.com/' + window.constants.FACEBOOK_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><FacebookIcon/></a>
-        <a href={'https://discord.gg/' + window.constants.DISCORD_SERVER} className='aboutIcon' target='_blank' rel='noopener noreferrer'><ChatIcon/></a>
+        <a href={'mailto:' + window.constants.EMAIL} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Email/></a>
+        <a href={'https://twitter.com/' + window.constants.TWITTER_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Twitter/></a>
+        <a href={'https://instagram.com/' + window.constants.INSTAGRAM_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Instagram/></a>
+        <a href={'https://facebook.com/' + window.constants.FACEBOOK_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Facebook/></a>
+        <a href={'https://discord.gg/' + window.constants.DISCORD_SERVER} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Chat/></a>
 
         <h3>{this.language.support_mue}</h3>
         <p>
diff --git a/src/components/modals/main/settings/sections/Advanced.jsx b/src/components/modals/main/settings/sections/Advanced.jsx
index 0796d3cb..661a8d87 100644
--- a/src/components/modals/main/settings/sections/Advanced.jsx
+++ b/src/components/modals/main/settings/sections/Advanced.jsx
@@ -1,4 +1,7 @@
 import { PureComponent } from 'react';
+import Modal from 'react-modal';
+
+import { exportSettings, importSettings } from '../../../../../modules/helpers/settings/modals';
 
 import Checkbox from '../Checkbox';
 import FileUpload from '../FileUpload';
@@ -7,10 +10,6 @@ import Switch from '../Switch';
 import ResetModal from '../ResetModal';
 import Dropdown from '../Dropdown';
 
-import { exportSettings, importSettings } from '../../../../../modules/helpers/settings/modals';
-
-import Modal from 'react-modal';
-
 const time_zones = require('../../../../widgets/time/timezones.json');
 
 export default class AdvancedSettings extends PureComponent {
diff --git a/src/components/modals/main/settings/sections/Changelog.jsx b/src/components/modals/main/settings/sections/Changelog.jsx
index 56f0e5d1..808093e1 100644
--- a/src/components/modals/main/settings/sections/Changelog.jsx
+++ b/src/components/modals/main/settings/sections/Changelog.jsx
@@ -1,11 +1,9 @@
 import { PureComponent } from 'react';
-
+import { WifiOff } from '@material-ui/icons';
 import Modal from 'react-modal';
 
 import Lightbox from '../../marketplace/Lightbox';
 
-import WifiOffIcon from '@material-ui/icons/WifiOff';
-
 export default class Changelog extends PureComponent {
   constructor() {
     super();
@@ -89,7 +87,7 @@ export default class Changelog extends PureComponent {
       const language = window.language.modals.main.marketplace;
     
       return errorMessage(<>
-        <WifiOffIcon/>
+        <WifiOff/>
         <h1>{language.offline.title}</h1>
         <p className='description'>{language.offline.description}</p>
       </>);
diff --git a/src/components/modals/main/settings/sections/Experimental.jsx b/src/components/modals/main/settings/sections/Experimental.jsx
index a7f46f84..28961209 100644
--- a/src/components/modals/main/settings/sections/Experimental.jsx
+++ b/src/components/modals/main/settings/sections/Experimental.jsx
@@ -1,5 +1,6 @@
 import Checkbox from '../Checkbox';
 import Slider from '../Slider';
+
 import EventBus from '../../../../../modules/helpers/eventbus';
 
 export default function ExperimentalSettings() {
diff --git a/src/components/modals/main/settings/sections/Order.jsx b/src/components/modals/main/settings/sections/Order.jsx
index f70d4c91..23013074 100644
--- a/src/components/modals/main/settings/sections/Order.jsx
+++ b/src/components/modals/main/settings/sections/Order.jsx
@@ -1,12 +1,10 @@
 import { PureComponent } from 'react';
-
-import EventBus from '../../../../../modules/helpers/eventbus';
-
-import DragHandleIcon from '@material-ui/icons/DragIndicator';
-
+import { DragIndicator } from '@material-ui/icons';
 import { sortableContainer, sortableElement } from 'react-sortable-hoc';
 import { toast } from 'react-toastify';
 
+import EventBus from '../../../../../modules/helpers/eventbus';
+
 const enabled = (setting) => {
   switch (setting) {
     case 'quicklinks':
@@ -27,7 +25,7 @@ const widget_name = {
 
 const SortableItem = sortableElement(({ value }) => (
   <li className='sortableitem' style={{ display: enabled(value) ? 'block' : 'none' }}>
-    <DragHandleIcon style={{ verticalAlign: 'middle' }} />
+    <DragIndicator style={{ verticalAlign: 'middle' }} />
     {widget_name[value]}
   </li>
 ));
diff --git a/src/components/modals/main/settings/sections/Search.jsx b/src/components/modals/main/settings/sections/Search.jsx
index 3e498d9f..c190fbe5 100644
--- a/src/components/modals/main/settings/sections/Search.jsx
+++ b/src/components/modals/main/settings/sections/Search.jsx
@@ -1,4 +1,5 @@
 import { PureComponent } from 'react';
+import { toast } from 'react-toastify';
 
 import Dropdown from '../Dropdown';
 import Checkbox from '../Checkbox';
@@ -7,8 +8,6 @@ import Radio from '../Radio';
 
 import EventBus from '../../../../../modules/helpers/eventbus';
 
-import { toast } from 'react-toastify';
-
 const searchEngines = require('../../../../widgets/search/search_engines.json');
 const autocompleteProviders = require('../../../../widgets/search/autocomplete_providers.json');
 
diff --git a/src/components/modals/main/settings/sections/background/Background.jsx b/src/components/modals/main/settings/sections/background/Background.jsx
index 594d856a..257af71e 100644
--- a/src/components/modals/main/settings/sections/background/Background.jsx
+++ b/src/components/modals/main/settings/sections/background/Background.jsx
@@ -1,6 +1,5 @@
 import { PureComponent } from 'react';
-
-import EventBus from '../../../../../../modules/helpers/eventbus';
+import { toast } from 'react-toastify';
 
 import Checkbox from '../../Checkbox';
 import Dropdown from '../../Dropdown';
@@ -11,7 +10,7 @@ import Radio from '../../Radio';
 
 import ColourSettings from './Colour';
 
-import { toast } from 'react-toastify';
+import EventBus from '../../../../../../modules/helpers/eventbus';
 
 export default class BackgroundSettings extends PureComponent {
   constructor() {
diff --git a/src/components/modals/main/settings/sections/background/Colour.jsx b/src/components/modals/main/settings/sections/background/Colour.jsx
index ea917923..e48dfd5f 100644
--- a/src/components/modals/main/settings/sections/background/Colour.jsx
+++ b/src/components/modals/main/settings/sections/background/Colour.jsx
@@ -1,12 +1,10 @@
 import { PureComponent, Fragment } from 'react';
-
 import { ColorPicker } from 'react-color-gradient-picker';
+import { toast } from 'react-toastify';
 
 import hexToRgb from '../../../../../../modules/helpers/background/hexToRgb';
 import rgbToHex from '../../../../../../modules/helpers/background/rgbToHex';
 
-import { toast } from 'react-toastify';
-
 import 'react-color-gradient-picker/dist/index.css';
 import '../../../scss/settings/react-color-picker-gradient-picker-custom-styles.scss';
 
diff --git a/src/components/modals/main/tabs/Addons.jsx b/src/components/modals/main/tabs/Addons.jsx
index 210cb989..4c21afee 100644
--- a/src/components/modals/main/tabs/Addons.jsx
+++ b/src/components/modals/main/tabs/Addons.jsx
@@ -1,9 +1,9 @@
+import Tabs from './backend/Tabs';
+
 import Added from '../marketplace/sections/Added';
 import Sideload from '../marketplace/sections/Sideload';
 import Create from '../marketplace/sections/Create';
 
-import Tabs from './backend/Tabs';
-
 export default function Addons() {
   const addons = window.language.modals.main.addons;
 
diff --git a/src/components/modals/main/tabs/Marketplace.jsx b/src/components/modals/main/tabs/Marketplace.jsx
index d438ec03..5a5e8664 100644
--- a/src/components/modals/main/tabs/Marketplace.jsx
+++ b/src/components/modals/main/tabs/Marketplace.jsx
@@ -1,7 +1,7 @@
-import MarketplaceTab from '../marketplace/sections/Marketplace';
-
 import Tabs from './backend/Tabs';
 
+import MarketplaceTab from '../marketplace/sections/Marketplace';
+
 export default function Marketplace() {
   const marketplace = window.language.modals.main.marketplace;
 
diff --git a/src/components/modals/main/tabs/Settings.jsx b/src/components/modals/main/tabs/Settings.jsx
index 60dc2dce..08be407b 100644
--- a/src/components/modals/main/tabs/Settings.jsx
+++ b/src/components/modals/main/tabs/Settings.jsx
@@ -1,3 +1,5 @@
+import Tabs from './backend/Tabs';
+
 import About from '../settings/sections/About';
 import Language from '../settings/sections/Language';
 import Search from '../settings/sections/Search';
@@ -14,8 +16,6 @@ import QuickLinks from '../settings/sections/QuickLinks';
 import Weather from '../settings/sections/Weather';
 import Stats from '../settings/sections/Stats';
 
-import Tabs from './backend/Tabs';
-
 export default function Settings() {
   const { reminder, sections } = window.language.modals.main.settings;
   const display = (localStorage.getItem('showReminder') === 'true') ? 'block' : 'none';
diff --git a/src/components/modals/main/tabs/backend/Tab.jsx b/src/components/modals/main/tabs/backend/Tab.jsx
index 682bfb85..88c3b8d5 100644
--- a/src/components/modals/main/tabs/backend/Tab.jsx
+++ b/src/components/modals/main/tabs/backend/Tab.jsx
@@ -1,31 +1,27 @@
 import { memo } from 'react';
-
-// Navbar
-import Settings from '@material-ui/icons/SettingsRounded';
-import Addons from '@material-ui/icons/Widgets';
-import Marketplace from '@material-ui/icons/ShoppingBasket';
-
-// Settings
-import Time from '@material-ui/icons/AccessAlarm';
-import Greeting from '@material-ui/icons/EmojiPeopleOutlined';
-import Quote from '@material-ui/icons/FormatQuoteOutlined';
-import Background from '@material-ui/icons/PhotoOutlined';
-import Search from '@material-ui/icons/Search';
-import Appearance from '@material-ui/icons/FormatPaintOutlined';
-import Language from '@material-ui/icons/Translate';
-import Changelog from '@material-ui/icons/NewReleasesOutlined';
-import About from '@material-ui/icons/InfoOutlined';
-import Experimental from '@material-ui/icons/BugReportOutlined';
-import Order from '@material-ui/icons/List';
-import Weather from '@material-ui/icons/CloudOutlined';
-import Advanced from '@material-ui/icons/SettingsOutlined';
-import QuickLinks from '@material-ui/icons/Link';
-import Stats from '@material-ui/icons/AssessmentOutlined';
-
-// Addons
-import Sideload from '@material-ui/icons/Code';
-import Added from '@material-ui/icons/AddCircleOutline';
-import Create from '@material-ui/icons/CreateNewFolderOutlined';
+import {
+  SettingsRounded as Settings,
+  Widgets as Addons,
+  ShoppingBasket as Marketplace,
+  AccessAlarm as Time,
+  EmojiPeopleOutlined as Greeting,
+  FormatQuoteOutlined as Quote,
+  PhotoOutlined as Background,
+  Search,
+  FormatPaintOutlined as Appearance,
+  Translate as Language,
+  NewReleasesOutlined as Changelog,
+  InfoOutlined as About,
+  BugReportOutlined as Experimental,
+  List as Order,
+  CloudOutlined as Weather,
+  SettingsOutlined as Advanced,
+  Link as QuickLinks,
+  AssessmentOutlined as Stats,
+  Code as Sideload,
+  AddCircleOutline as Added,
+  CreateNewFolderOutlined as Create
+} from '@material-ui/icons';
 
 function Tab(props) {
   let className = 'tab-list-item';
diff --git a/src/components/modals/welcome/WelcomeSections.jsx b/src/components/modals/welcome/WelcomeSections.jsx
index 94994c8f..df4efab3 100644
--- a/src/components/modals/welcome/WelcomeSections.jsx
+++ b/src/components/modals/welcome/WelcomeSections.jsx
@@ -1,14 +1,10 @@
 import { PureComponent } from 'react';
+import { CloudUpload, AutoAwesome, LightMode, DarkMode } from '@material-ui/icons';
 
 import Radio from '../main/settings/Radio';
 import Checkbox from '../main/settings/Checkbox';
 import FileUpload from '../main/settings/FileUpload';
 
-import UploadIcon from '@material-ui/icons/CloudUpload';
-import AutoIcon from '@material-ui/icons/AutoAwesome';
-import LightModeIcon from '@material-ui/icons/LightMode';
-import DarkModeIcon from '@material-ui/icons/DarkMode';
-
 import { loadSettings } from '../../../modules/helpers/settings';
 import { importSettings } from '../../../modules/helpers/settings/modals';
 
@@ -139,16 +135,16 @@ export default class WelcomeSections extends PureComponent {
         <p>{language.sections.theme.description}</p>
         <div className='themesToggleArea'>
           <div className={this.state.autoClass} onClick={() => this.changeTheme('auto')}>
-            <AutoIcon/>
+            <AutoAwesome/>
             <span>{appearance.theme.auto}</span>
           </div>
           <div className='options'>
             <div className={this.state.lightClass} onClick={() => this.changeTheme('light')}>
-              <LightModeIcon/>
+              <LightMode/>
               <span>{appearance.theme.light}</span>
             </div>
             <div className={this.state.darkClass} onClick={() => this.changeTheme('dark')}>
-              <DarkModeIcon/>
+              <DarkMode/>
               <span>{appearance.theme.dark}</span>
             </div>
           </div>
@@ -163,7 +159,7 @@ export default class WelcomeSections extends PureComponent {
         <h1>{language.sections.settings.title}</h1>
         <p>{language.sections.settings.description}</p>
         <button className='upload' onClick={() => document.getElementById('file-input').click()}>
-          <UploadIcon/>
+          <CloudUpload/>
           <br/>
           <span>{window.language.modals.main.settings.buttons.import}</span>
         </button>
diff --git a/src/components/widgets/Widgets.jsx b/src/components/widgets/Widgets.jsx
index 5b98277a..e487462e 100644
--- a/src/components/widgets/Widgets.jsx
+++ b/src/components/widgets/Widgets.jsx
@@ -1,7 +1,5 @@
 import { PureComponent, Fragment, Suspense, lazy } from 'react';
 
-import EventBus from '../../modules/helpers/eventbus';
-
 import Clock from './time/Clock';
 import Greeting from './greeting/Greeting';
 import Quote from './quote/Quote';
@@ -9,6 +7,8 @@ import Search from './search/Search';
 import QuickLinks from './quicklinks/QuickLinks';
 import Date from './time/Date';
 
+import EventBus from '../../modules/helpers/eventbus';
+
 const Weather = lazy(() => import('./weather/Weather'));
 const renderLoader = () => <></>;
 
diff --git a/src/components/widgets/background/Background.jsx b/src/components/widgets/background/Background.jsx
index 9889bc40..7e03ee10 100644
--- a/src/components/widgets/background/Background.jsx
+++ b/src/components/widgets/background/Background.jsx
@@ -1,11 +1,11 @@
 // todo: rewrite this mess
 import { PureComponent } from 'react';
 
+import PhotoInformation from './PhotoInformation';
+
 import EventBus from '../../../modules/helpers/eventbus';
 import Interval from '../../../modules/helpers/interval';
 
-import PhotoInformation from './PhotoInformation';
-
 import './scss/index.scss';
 
 export default class Background extends PureComponent {
diff --git a/src/components/widgets/background/Favourite.jsx b/src/components/widgets/background/Favourite.jsx
index 3910d1d5..f7ee7c26 100644
--- a/src/components/widgets/background/Favourite.jsx
+++ b/src/components/widgets/background/Favourite.jsx
@@ -1,14 +1,12 @@
 import { PureComponent } from 'react';
+import { Star, StarBorder } from '@material-ui/icons';
 
 import Tooltip from '../../helpers/tooltip/Tooltip';
 
-import StarIcon from '@material-ui/icons/Star';
-import StarIcon2 from '@material-ui/icons/StarBorder';
-
 export default class Favourite extends PureComponent {
   buttons = {
-    favourited: <StarIcon onClick={() => this.favourite()} className='topicons' />,
-    unfavourited: <StarIcon2 onClick={() => this.favourite()} className='topicons' />
+    favourited: <Star onClick={() => this.favourite()} className='topicons' />,
+    unfavourited: <StarBorder onClick={() => this.favourite()} className='topicons' />
   }
 
   constructor() {
diff --git a/src/components/widgets/background/Maximise.jsx b/src/components/widgets/background/Maximise.jsx
index 04799560..076d31e7 100644
--- a/src/components/widgets/background/Maximise.jsx
+++ b/src/components/widgets/background/Maximise.jsx
@@ -1,9 +1,8 @@
 import { PureComponent } from 'react';
+import { Fullscreen } from '@material-ui/icons';
 
 import Tooltip from '../../helpers/tooltip/Tooltip';
 
-import FullscreenIcon from '@material-ui/icons/Fullscreen';
-
 export default class Maximise extends PureComponent {
   constructor() {
     super();
@@ -57,7 +56,7 @@ export default class Maximise extends PureComponent {
   render() {
     return (
       <Tooltip title={window.language.modals.main.settings.sections.background.buttons.view}>
-        <FullscreenIcon onClick={this.maximise} className='topicons' />
+        <Fullscreen onClick={this.maximise} className='topicons' />
       </Tooltip>
     );
   }
diff --git a/src/components/widgets/background/PhotoInformation.jsx b/src/components/widgets/background/PhotoInformation.jsx
index 9419c317..fbaf201a 100644
--- a/src/components/widgets/background/PhotoInformation.jsx
+++ b/src/components/widgets/background/PhotoInformation.jsx
@@ -1,11 +1,5 @@
 import { useState } from 'react';
-
-import Info from '@material-ui/icons/Info';
-import Location from '@material-ui/icons/LocationOn';
-import Camera from '@material-ui/icons/PhotoCamera';
-import Resolution from '@material-ui/icons/Crop';
-import Photographer from '@material-ui/icons/Person';
-import Download from '@material-ui/icons/GetApp';
+import { Info, LocationOn, PhotoCamera, Crop as Resolution, Person as Photographer, GetApp as Download } from '@material-ui/icons';
 
 const toDataURL = async (url) => {
   const res = await fetch(url);
@@ -68,9 +62,9 @@ export default function PhotoInformation(props) {
           <Info className='infoIcon'/>
           <h1>{language.information}</h1>
           <hr/>
-          <Location/>
+          <LocationOn/>
           <span id='infoLocation'>{props.info.location || 'N/A'}</span>
-          <Camera/>
+          <PhotoCamera/>
           <span id='infoCamera'>{props.info.camera || 'N/A'}</span>
           <Resolution/>
           <span id='infoResolution'>{width}x{height}</span>
diff --git a/src/components/widgets/greeting/Greeting.jsx b/src/components/widgets/greeting/Greeting.jsx
index 2f96c4cc..b698164e 100644
--- a/src/components/widgets/greeting/Greeting.jsx
+++ b/src/components/widgets/greeting/Greeting.jsx
@@ -1,9 +1,8 @@
 import { PureComponent } from 'react';
-
 import { utcToZonedTime } from 'date-fns-tz';
-import EventBus from '../../../modules/helpers/eventbus';
 
 import dtf from '../../../modules/helpers/date';
+import EventBus from '../../../modules/helpers/eventbus';
 
 import './greeting.scss';
 
diff --git a/src/components/widgets/navbar/Navbar.jsx b/src/components/widgets/navbar/Navbar.jsx
index e88dce26..b8c37286 100644
--- a/src/components/widgets/navbar/Navbar.jsx
+++ b/src/components/widgets/navbar/Navbar.jsx
@@ -1,9 +1,5 @@
 import { PureComponent } from 'react';
-
-import RefreshIcon from '@material-ui/icons/RefreshRounded';
-import Gear from '@material-ui/icons/SettingsRounded';
-import NotesIcon from '@material-ui/icons/AssignmentRounded';
-import Report from '@material-ui/icons/SmsFailed';
+import { RefreshRounded, SettingsRounded, AssignmentRounded as NotesRounded, SmsFailed as Report } from '@material-ui/icons';
 
 import Notes from './Notes';
 import Maximise from '../background/Maximise';
@@ -33,7 +29,7 @@ export default class Navbar extends PureComponent {
     
         {(localStorage.getItem('notesEnabled') === 'true') ?
           <div className='notes'>
-            <NotesIcon className='topicons'/>
+            <NotesRounded className='topicons'/>
             <Notes/>
           </div>
         : null}
@@ -46,12 +42,12 @@ export default class Navbar extends PureComponent {
   
         {(localStorage.getItem('refresh') === 'true') ?
           <Tooltip title={window.language.widgets.navbar.tooltips.refresh}>
-            <RefreshIcon className='refreshicon topicons' onClick={() => window.location.reload()}/>
+            <RefreshRounded className='refreshicon topicons' onClick={() => window.location.reload()}/>
           </Tooltip>
         : null}
   
         <Tooltip title={window.language.modals.main.navbar.settings}>
-          <Gear className='settings-icon topicons' onClick={() => this.props.openModal('mainModal')}/>
+          <SettingsRounded className='settings-icon topicons' onClick={() => this.props.openModal('mainModal')}/>
         </Tooltip>
       </div>
     );
diff --git a/src/components/widgets/navbar/Notes.jsx b/src/components/widgets/navbar/Notes.jsx
index d1a9fe61..d1a57c56 100644
--- a/src/components/widgets/navbar/Notes.jsx
+++ b/src/components/widgets/navbar/Notes.jsx
@@ -1,11 +1,6 @@
 import { PureComponent } from 'react';
-
+import { FileCopyRounded, AssignmentRounded as NotesRounded, PushPin }from '@material-ui/icons';
 import TextareaAutosize from '@material-ui/core/TextareaAutosize';
-
-import CopyIcon from '@material-ui/icons/FileCopyRounded';
-import NotesIcon from '@material-ui/icons/AssignmentRounded';
-import Pin from '@material-ui/icons/PushPin';
-
 import { toast } from 'react-toastify';
 
 export default class Notes extends PureComponent {
@@ -57,12 +52,12 @@ export default class Notes extends PureComponent {
     return (
       <span id='noteContainer' className='notescontainer' style={{ visibility: this.state.visibility }}>
         <div className='topbarnotes'>
-          <NotesIcon/>
+          <NotesRounded/>
           <h3>{this.language.title}</h3>
         </div>
         <TextareaAutosize rowsmax={50} placeholder={this.language.placeholder} value={this.state.notes} onChange={this.setNotes}/>
-        <button onClick={() => this.pin()} className='pinNote'><Pin/></button>
-        <button onClick={() => this.copy()} className='copyNote'><CopyIcon/></button>
+        <button onClick={() => this.pin()} className='pinNote'><PushPin/></button>
+        <button onClick={() => this.copy()} className='copyNote'><FileCopyRounded/></button>
       </span>
     );
   }
diff --git a/src/components/widgets/quicklinks/QuickLinks.jsx b/src/components/widgets/quicklinks/QuickLinks.jsx
index 4bc91d07..e2da58b0 100644
--- a/src/components/widgets/quicklinks/QuickLinks.jsx
+++ b/src/components/widgets/quicklinks/QuickLinks.jsx
@@ -1,10 +1,9 @@
 import { PureComponent } from 'react';
+import Tooltip from '../../helpers/tooltip/Tooltip';
+import { TextareaAutosize } from '@material-ui/core';
 
 import EventBus from '../../../modules/helpers/eventbus';
 
-import Tooltip from '../../helpers/tooltip/Tooltip';
-import TextareaAutosize from '@material-ui/core/TextareaAutosize';
-
 import './quicklinks.scss';
 
 export default class QuickLinks extends PureComponent {
@@ -88,15 +87,9 @@ export default class QuickLinks extends PureComponent {
   }
 
   toggleAdd = () => {
-    if (this.state.showAddLink === 'hidden') {
-      this.setState({
-        showAddLink: 'visible'
-      });
-    } else {
-      this.setState({
-        showAddLink: 'hidden'
-      });
-    }
+    this.setState({
+      showAddLink: (this.state.showAddLink === 'hidden') ? 'visible' : 'hidden'
+    });
   }
 
   // widget zoom
@@ -154,9 +147,9 @@ export default class QuickLinks extends PureComponent {
     }
 
     const tooltipEnabled = localStorage.getItem('quicklinkstooltip');
+    const useProxy = (localStorage.getItem('quicklinksddgProxy') !== 'false');
 
     const quickLink = (item) => {
-      const useProxy = (localStorage.getItem('quicklinksddgProxy') !== 'false');
       const url = useProxy ? 'https://icons.duckduckgo.com/ip2/' : 'https://www.google.com/s2/favicons?sz=32&domain=';
 
       const link = (
@@ -166,7 +159,7 @@ export default class QuickLinks extends PureComponent {
       );
 
       if (tooltipEnabled === 'true') {
-        return <Tooltip title={item.name} key={item.name} draggable={false}>{link}</Tooltip>;
+        return <Tooltip title={item.name}>{link}</Tooltip>;
       } else {
         return link;
       }
diff --git a/src/components/widgets/quote/Quote.jsx b/src/components/widgets/quote/Quote.jsx
index a9287c35..b6e12cbc 100644
--- a/src/components/widgets/quote/Quote.jsx
+++ b/src/components/widgets/quote/Quote.jsx
@@ -1,23 +1,18 @@
 import { PureComponent } from 'react';
-
-import EventBus from '../../../modules/helpers/eventbus';
-import Interval from '../../../modules/helpers/interval';
-
-import FileCopy from '@material-ui/icons/FilterNone';
-import TwitterIcon from '@material-ui/icons/Twitter';
-import StarIcon from '@material-ui/icons/Star';
-import StarIcon2 from '@material-ui/icons/StarBorder';
-
+import { FilterNone as FileCopy, Twitter, Star, StarBorder } from '@material-ui/icons';
 import { toast } from 'react-toastify';
 
+import Interval from '../../../modules/helpers/interval';
+import EventBus from '../../../modules/helpers/eventbus';
+
 import './quote.scss';
 
 export default class Quote extends PureComponent {
   buttons = {
-    tweet: <TwitterIcon className='copyButton' onClick={() => this.tweetQuote()} />,
+    tweet: <Twitter className='copyButton' onClick={() => this.tweetQuote()} />,
     copy: <FileCopy className='copyButton' onClick={() => this.copyQuote()} />,
-    unfavourited: <StarIcon2 className='copyButton' onClick={() => this.favourite()} />,
-    favourited: <StarIcon className='copyButton' onClick={() => this.favourite()} />
+    unfavourited: <StarBorder className='copyButton' onClick={() => this.favourite()} />,
+    favourited: <Star className='copyButton' onClick={() => this.favourite()} />
   }
 
   constructor() {
diff --git a/src/components/widgets/search/Search.jsx b/src/components/widgets/search/Search.jsx
index b2db9edf..7eb88f4b 100644
--- a/src/components/widgets/search/Search.jsx
+++ b/src/components/widgets/search/Search.jsx
@@ -1,11 +1,9 @@
 import { PureComponent } from 'react';
-
-import EventBus from '../../../modules/helpers/eventbus';
+import { Search as SearchIcon, Mic } from '@material-ui/icons';
 
 import AutocompleteInput from '../../helpers/autocomplete/Autocomplete';
 
-import SearchIcon from '@material-ui/icons/Search';
-import MicIcon from '@material-ui/icons/Mic';
+import EventBus from '../../../modules/helpers/eventbus';
 
 import './search.scss';
 
@@ -101,7 +99,7 @@ export default class Search extends PureComponent {
     }
 
     if (localStorage.getItem('voiceSearch') === 'true') {
-      microphone = <MicIcon className='micIcon' onClick={this.startSpeechRecognition}/>;
+      microphone = <Mic className='micIcon' onClick={this.startSpeechRecognition}/>;
     }
 
     let autocompleteURL, autocompleteQuery, autocompleteCallback;
diff --git a/src/components/widgets/time/Clock.jsx b/src/components/widgets/time/Clock.jsx
index 55c06823..f972d270 100644
--- a/src/components/widgets/time/Clock.jsx
+++ b/src/components/widgets/time/Clock.jsx
@@ -1,6 +1,6 @@
 import { PureComponent, Suspense, lazy } from 'react';
-
 import { utcToZonedTime } from 'date-fns-tz';
+
 import EventBus from '../../../modules/helpers/eventbus';
 
 import './clock.scss';
diff --git a/src/components/widgets/time/Date.jsx b/src/components/widgets/time/Date.jsx
index c0eb4531..54bda298 100644
--- a/src/components/widgets/time/Date.jsx
+++ b/src/components/widgets/time/Date.jsx
@@ -1,9 +1,8 @@
 import { PureComponent } from 'react';
-
 import { utcToZonedTime } from 'date-fns-tz';
-import EventBus from '../../../modules/helpers/eventbus';
 
 import dtf from '../../../modules/helpers/date';
+import EventBus from '../../../modules/helpers/eventbus';
 
 import './date.scss';
 
diff --git a/src/components/widgets/weather/Weather.jsx b/src/components/widgets/weather/Weather.jsx
index 3035f2a5..c479dc7c 100644
--- a/src/components/widgets/weather/Weather.jsx
+++ b/src/components/widgets/weather/Weather.jsx
@@ -1,10 +1,10 @@
 import { PureComponent } from 'react';
-
-import EventBus from '../../../modules/helpers/eventbus';
+import { WiHumidity, WiWindy, WiBarometer, WiCloud } from 'weather-icons-react';
 
 import WeatherIcon from './WeatherIcon';
 import WindDirectionIcon from './WindDirectionIcon';
-import { WiHumidity, WiWindy, WiBarometer, WiCloud } from 'weather-icons-react';
+
+import EventBus from '../../../modules/helpers/eventbus';
 
 import './weather.scss';
 
@@ -133,10 +133,6 @@ export default class Weather extends PureComponent {
       return (localStorage.getItem(setting) === 'true');
     };
 
-    if (enabled('offlineMode')) {
-      return null;
-    }
-
     if (this.state.location === window.language.widgets.weather.not_found) {
       return (<div className='weather'>
         <span className='loc'>{this.state.location}</span>
diff --git a/src/index.js b/src/index.js
index 52e58f5a..edc7aaeb 100644
--- a/src/index.js
+++ b/src/index.js
@@ -20,7 +20,6 @@ if (languagecode === 'en') {
   window.languagecode = 'en_GB';
 }
 
-// these are merged so if a string is untranslated it doesn't break mue
 window.language = require(`./translations/${window.languagecode}.json`);
 
 // set html language tag