diff --git a/src/App.jsx b/src/App.jsx
index 6eacfe23..873b5279 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,29 +1,29 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 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 SettingsFunctions from './modules/helpers/settings';
+import { loadSettings, moveSettings } from './modules/helpers/settings';
 
 import { ToastContainer } from 'react-toastify';
 
-export default class App extends React.PureComponent {
+export default class App extends PureComponent {
   componentDidMount() {
     // 4.0 -> 5.0 (the key below is only on 5.0)
     // now featuring 5.0 -> 5.1
     // the firstRun check was moved here because the old function was useless
     if (!localStorage.getItem('firstRun') || !localStorage.getItem('stats')) {
-      SettingsFunctions.moveSettings();
+      moveSettings();
       window.location.reload();
     }    
 
-    SettingsFunctions.loadSettings();
+    loadSettings();
 
     EventBus.on('refresh', (data) => {
       if (data === 'other') {
-        SettingsFunctions.loadSettings(true);
+        loadSettings(true);
       }
     });
 
diff --git a/src/components/helpers/autocomplete/Autocomplete.jsx b/src/components/helpers/autocomplete/Autocomplete.jsx
index 38e17bf7..1718a3b6 100644
--- a/src/components/helpers/autocomplete/Autocomplete.jsx
+++ b/src/components/helpers/autocomplete/Autocomplete.jsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import './autocomplete.scss';
 
-export default class Autocomplete extends React.PureComponent {
+export default class Autocomplete extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {
diff --git a/src/components/modals/ErrorBoundary.jsx b/src/components/modals/ErrorBoundary.jsx
index 90fde9fa..91297f29 100644
--- a/src/components/modals/ErrorBoundary.jsx
+++ b/src/components/modals/ErrorBoundary.jsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
 
-export default class ErrorBoundary extends React.PureComponent {
+export default class ErrorBoundary extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {
diff --git a/src/components/modals/Modals.jsx b/src/components/modals/Modals.jsx
index e4d66321..11326b01 100644
--- a/src/components/modals/Modals.jsx
+++ b/src/components/modals/Modals.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent, Suspense, lazy } from 'react';
 
 import EventBus from '../../modules/helpers/eventbus';
 
@@ -10,10 +10,10 @@ import Modal from 'react-modal';
 
 // 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
-const Welcome = React.lazy(() => import('./welcome/Welcome'));
+const Welcome = lazy(() => import('./welcome/Welcome'));
 const renderLoader = () => <></>;
 
-export default class Modals extends React.PureComponent {
+export default class Modals extends PureComponent {
   constructor() {
     super();
     this.state = {
@@ -62,14 +62,14 @@ export default class Modals extends React.PureComponent {
         <Modal closeTimeoutMS={300} id='modal' onRequestClose={() => this.toggleModal('mainModal', false)} isOpen={this.state.mainModal} className='Modal mainModal' overlayClassName='Overlay' ariaHideApp={false}>
           <Main modalClose={() => this.toggleModal('mainModal', false)}/>
         </Modal>
-        <React.Suspense fallback={renderLoader()}>
+        <Suspense fallback={renderLoader()}>
           <Modal closeTimeoutMS={300} onRequestClose={() => this.closeWelcome()} isOpen={this.state.welcomeModal} className='Modal welcomemodal mainModal' overlayClassName='Overlay welcomeoverlay' shouldCloseOnOverlayClick={false} ariaHideApp={false}>
             <Welcome modalClose={() => this.closeWelcome()}/>
           </Modal>
           <Modal closeTimeoutMS={300} onRequestClose={() => this.toggleModal('feedbackModal', false)} isOpen={this.state.feedbackModal} className='Modal mainModal' overlayClassName='Overlay' ariaHideApp={false}>
             <Feedback modalClose={() => this.toggleModal('feedbackModal', false)}/>
           </Modal>
-        </React.Suspense>
+        </Suspense>
       </>
     );
   }
diff --git a/src/components/modals/feedback/Feedback.jsx b/src/components/modals/feedback/Feedback.jsx
index 4e8bd5d7..8c31208c 100644
--- a/src/components/modals/feedback/Feedback.jsx
+++ b/src/components/modals/feedback/Feedback.jsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import './feedback.scss';
 
-export default class FeedbackModal extends React.PureComponent {
+export default class FeedbackModal extends PureComponent {
   constructor() {
     super();
     this.state = {
diff --git a/src/components/modals/main/Main.jsx b/src/components/modals/main/Main.jsx
index cc09c306..4b5362ef 100644
--- a/src/components/modals/main/Main.jsx
+++ b/src/components/modals/main/Main.jsx
@@ -1,13 +1,13 @@
-import React from 'react';
+import { Suspense, lazy } from 'react';
 
 import Tabs from './tabs/backend/Tabs';
 
 import './scss/index.scss';
 
 // Lazy load all the tabs instead of the modal itself
-const Settings = React.lazy(() => import('./tabs/Settings'));
-const Addons = React.lazy(() => import('./tabs/Addons'));
-const Marketplace = React.lazy(() => import('./tabs/Marketplace'));
+const Settings = lazy(() => import('./tabs/Settings'));
+const Addons = lazy(() => import('./tabs/Addons'));
+const Marketplace = lazy(() => import('./tabs/Marketplace'));
 
 const renderLoader = () => (
   <Tabs>
@@ -30,19 +30,19 @@ export default function MainModal(props) {
       <span className='closeModal' onClick={props.modalClose}>&times;</span>
       <Tabs navbar={true}>
         <div label={language.settings} name='settings'>
-          <React.Suspense fallback={renderLoader()}>
+          <Suspense fallback={renderLoader()}>
             <Settings/>
-          </React.Suspense>
+          </Suspense>
         </div>
         <div label={language.addons} name='addons'>
-          <React.Suspense fallback={renderLoader()}>
+          <Suspense fallback={renderLoader()}>
             <Addons/>
-          </React.Suspense>
+          </Suspense>
         </div>
         <div label={language.marketplace} name='marketplace'>
-          <React.Suspense fallback={renderLoader()}>
+          <Suspense fallback={renderLoader()}>
             <Marketplace/>
-          </React.Suspense>
+          </Suspense>
         </div>
       </Tabs>
     </>
diff --git a/src/components/modals/main/marketplace/Item.jsx b/src/components/modals/main/marketplace/Item.jsx
index 119c5b02..c35aa54c 100644
--- a/src/components/modals/main/marketplace/Item.jsx
+++ b/src/components/modals/main/marketplace/Item.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import Modal from 'react-modal';
 
@@ -6,7 +6,7 @@ import Lightbox from './Lightbox';
 
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 
-export default class Item extends React.PureComponent {
+export default class Item extends PureComponent {
   constructor() {
     super();
     this.state = {
diff --git a/src/components/modals/main/marketplace/sections/Added.jsx b/src/components/modals/main/marketplace/sections/Added.jsx
index 71ca2c90..7321cc72 100644
--- a/src/components/modals/main/marketplace/sections/Added.jsx
+++ b/src/components/modals/main/marketplace/sections/Added.jsx
@@ -1,15 +1,15 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import LocalMallIcon from '@material-ui/icons/LocalMall';
 import Item from '../Item';
 import Items from '../Items';
 import Dropdown from '../../settings/Dropdown';
 
-import MarketplaceFunctions from '../../../../../modules/helpers/marketplace';
+import { uninstall, urlParser } from '../../../../../modules/helpers/marketplace';
 
 import { toast } from 'react-toastify';
 
-export default class Added extends React.PureComponent {
+export default class Added extends PureComponent {
   constructor() {
     super();
     this.state = {
@@ -34,7 +34,7 @@ export default class Added extends React.PureComponent {
           name: data,
           display_name: info.name,
           author: info.author,
-          description: MarketplaceFunctions.urlParser(info.description.replace(/\n/g, '<br>')),
+          description: urlParser(info.description.replace(/\n/g, '<br>')),
           //updated: info.updated,
           version: info.version,
           icon: info.screenshot_url,
@@ -51,7 +51,7 @@ export default class Added extends React.PureComponent {
   }
 
   uninstall() {
-    MarketplaceFunctions.uninstall(this.state.item.type, this.state.item.display_name);
+    uninstall(this.state.item.type, this.state.item.display_name);
     
     toast(window.language.toasts.uninstalled);
 
diff --git a/src/components/modals/main/marketplace/sections/Create.jsx b/src/components/modals/main/marketplace/sections/Create.jsx
index 023c3377..a7da9e10 100644
--- a/src/components/modals/main/marketplace/sections/Create.jsx
+++ b/src/components/modals/main/marketplace/sections/Create.jsx
@@ -1,12 +1,12 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import FileUpload from '../../settings/FileUpload';
 
-import SettingsFunctions from '../../../../../modules/helpers/settings/modals';
+import { saveFile } from '../../../../../modules/helpers/settings/modals';
 
 import { toast } from 'react-toastify';
 
-export default class Create extends React.PureComponent {
+export default class Create extends PureComponent {
   constructor() {
     super();
     this.state = {
@@ -72,7 +72,7 @@ export default class Create extends React.PureComponent {
   }
 
   downloadAddon() {
-    SettingsFunctions.saveFile({
+    saveFile({
       name: this.state.addonMetadata.name,
       description: this.state.addonMetadata.description,
       type: this.state.addonMetadata.type,
diff --git a/src/components/modals/main/marketplace/sections/Marketplace.jsx b/src/components/modals/main/marketplace/sections/Marketplace.jsx
index c8d18801..f10862e7 100644
--- a/src/components/modals/main/marketplace/sections/Marketplace.jsx
+++ b/src/components/modals/main/marketplace/sections/Marketplace.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import WifiOffIcon from '@material-ui/icons/WifiOff';
 import LocalMallIcon from '@material-ui/icons/LocalMall';
@@ -7,11 +7,11 @@ import Item from '../Item';
 import Items from '../Items';
 import Dropdown from '../../settings/Dropdown';
 
-import MarketplaceFunctions from '../../../../../modules/helpers/marketplace';
+import { install, urlParser, uninstall } from '../../../../../modules/helpers/marketplace';
 
 import { toast } from 'react-toastify';
 
-export default class Marketplace extends React.PureComponent {
+export default class Marketplace extends PureComponent {
   constructor() {
     super();
     this.state = {
@@ -59,7 +59,7 @@ export default class Marketplace extends React.PureComponent {
           type: info.data.type,
           display_name: info.data.name,
           author: info.data.author,
-          description: MarketplaceFunctions.urlParser(info.data.description.replace(/\n/g, '<br>')),
+          description: urlParser(info.data.description.replace(/\n/g, '<br>')),
           //updated: info.updated,
           version: info.data.version,
           icon: info.data.screenshot_url,
@@ -96,9 +96,9 @@ export default class Marketplace extends React.PureComponent {
 
   manage(type) {
     if (type === 'install') {
-      MarketplaceFunctions.install(this.state.item.type, this.state.item.data);
+      install(this.state.item.type, this.state.item.data);
     } else {
-      MarketplaceFunctions.uninstall(this.state.item.type, this.state.item.display_name);
+      uninstall(this.state.item.type, this.state.item.display_name);
     }
 
     toast(window.language.toasts[type + 'ed']);
diff --git a/src/components/modals/main/marketplace/sections/Sideload.jsx b/src/components/modals/main/marketplace/sections/Sideload.jsx
index 0586d0cb..e1a2393f 100644
--- a/src/components/modals/main/marketplace/sections/Sideload.jsx
+++ b/src/components/modals/main/marketplace/sections/Sideload.jsx
@@ -2,13 +2,12 @@ import LocalMallIcon from '@material-ui/icons/LocalMall';
 
 import FileUpload from '../../settings/FileUpload';
 
-import MarketplaceFunctions from '../../../../../modules/helpers/marketplace';
-
+import { install } from '../../../../../modules/helpers/marketplace';
 import { toast } from 'react-toastify';
 
 export default function Sideload() {
-  const install = (input) => {
-    MarketplaceFunctions.install(input.type, input);
+  const installAddon = (input) => {
+    install(input.type, input);
     toast(window.language.toasts.installed);
     window.stats.postEvent('marketplace', 'Sideload');
   };
@@ -16,7 +15,7 @@ export default function Sideload() {
   return (
     <div className='emptyitems'>
       <div className='emptyMessage'>
-        <FileUpload id='file-input' type='settings' accept='application/json' loadFunction={(e) => install(JSON.parse(e.target.result))} />
+        <FileUpload id='file-input' type='settings' accept='application/json' loadFunction={(e) => installAddon(JSON.parse(e.target.result))} />
         <LocalMallIcon/>
         <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>
diff --git a/src/components/modals/main/settings/Checkbox.jsx b/src/components/modals/main/settings/Checkbox.jsx
index 034d94b7..cd8f7cca 100644
--- a/src/components/modals/main/settings/Checkbox.jsx
+++ b/src/components/modals/main/settings/Checkbox.jsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 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 React.PureComponent {
+export default class Checkbox extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {
diff --git a/src/components/modals/main/settings/Dropdown.jsx b/src/components/modals/main/settings/Dropdown.jsx
index c8137e5f..caac0956 100644
--- a/src/components/modals/main/settings/Dropdown.jsx
+++ b/src/components/modals/main/settings/Dropdown.jsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import EventBus from '../../../../modules/helpers/eventbus';
 
-export default class Dropdown extends React.PureComponent {
+export default class Dropdown extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {
diff --git a/src/components/modals/main/settings/FileUpload.jsx b/src/components/modals/main/settings/FileUpload.jsx
index 600e3b4d..668799b4 100644
--- a/src/components/modals/main/settings/FileUpload.jsx
+++ b/src/components/modals/main/settings/FileUpload.jsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import { toast } from 'react-toastify';
 
-export default class FileUpload extends React.PureComponent {
+export default class FileUpload extends PureComponent {
   componentDidMount() {
     document.getElementById(this.props.id).onchange = (e) => {
       const reader = new FileReader();
diff --git a/src/components/modals/main/settings/Radio.jsx b/src/components/modals/main/settings/Radio.jsx
index 13c9f1e4..3e4a0dbc 100644
--- a/src/components/modals/main/settings/Radio.jsx
+++ b/src/components/modals/main/settings/Radio.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import EventBus from '../../../../modules/helpers/eventbus';
 
@@ -8,7 +8,7 @@ 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 React.PureComponent {
+export default class Radio extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {
diff --git a/src/components/modals/main/settings/ResetModal.jsx b/src/components/modals/main/settings/ResetModal.jsx
index e662afb0..6804f11c 100644
--- a/src/components/modals/main/settings/ResetModal.jsx
+++ b/src/components/modals/main/settings/ResetModal.jsx
@@ -1,14 +1,14 @@
 import CloseIcon from '@material-ui/icons/Close';
 import DeleteIcon from '@material-ui/icons/Delete';
 
-import SettingsFunctions from '../../../../modules/helpers/settings';
+import { setDefaultSettings } from '../../../../modules/helpers/settings';
 
 export default function ResetModal(props) {
   const language = window.language.modals.main.settings.sections.advanced.reset_modal;
 
   const reset = () => {
     window.stats.postEvent('setting', 'Reset');
-    SettingsFunctions.setDefaultSettings('reset');
+    setDefaultSettings('reset');
     window.location.reload();
   };
 
diff --git a/src/components/modals/main/settings/Slider.jsx b/src/components/modals/main/settings/Slider.jsx
index b6726477..9ccc9652 100644
--- a/src/components/modals/main/settings/Slider.jsx
+++ b/src/components/modals/main/settings/Slider.jsx
@@ -1,11 +1,11 @@
 // todo: find a better method to do width of number input
-import React from 'react';
+import { PureComponent } from 'react';
 
 import EventBus from '../../../../modules/helpers/eventbus';
 
 import { toast } from 'react-toastify';
 
-export default class Slider extends React.PureComponent {
+export default class Slider extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {
diff --git a/src/components/modals/main/settings/Switch.jsx b/src/components/modals/main/settings/Switch.jsx
index 9bb21a41..c5f37435 100644
--- a/src/components/modals/main/settings/Switch.jsx
+++ b/src/components/modals/main/settings/Switch.jsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 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 React.PureComponent {
+export default class Switch extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {
diff --git a/src/components/modals/main/settings/Text.jsx b/src/components/modals/main/settings/Text.jsx
index 1fa01a48..d7c3b540 100644
--- a/src/components/modals/main/settings/Text.jsx
+++ b/src/components/modals/main/settings/Text.jsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import EventBus from '../../../../modules/helpers/eventbus';
 
 import { toast } from 'react-toastify';
 
-export default class Text extends React.PureComponent {
+export default class Text extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {
diff --git a/src/components/modals/main/settings/sections/About.jsx b/src/components/modals/main/settings/sections/About.jsx
index b4e68e58..9aa32a3e 100644
--- a/src/components/modals/main/settings/sections/About.jsx
+++ b/src/components/modals/main/settings/sections/About.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import Tooltip from '../../../../helpers/tooltip/Tooltip';
 import EmailIcon from '@material-ui/icons/Email';
@@ -9,7 +9,7 @@ import FacebookIcon from '@material-ui/icons/Facebook';
 
 const other_contributors = require('../../../../../modules/other_contributors.json');
 
-export default class About extends React.PureComponent {
+export default class About extends PureComponent {
   constructor() {
     super();
     this.state = {
diff --git a/src/components/modals/main/settings/sections/Advanced.jsx b/src/components/modals/main/settings/sections/Advanced.jsx
index d1fa5466..0796d3cb 100644
--- a/src/components/modals/main/settings/sections/Advanced.jsx
+++ b/src/components/modals/main/settings/sections/Advanced.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import Checkbox from '../Checkbox';
 import FileUpload from '../FileUpload';
@@ -7,13 +7,13 @@ import Switch from '../Switch';
 import ResetModal from '../ResetModal';
 import Dropdown from '../Dropdown';
 
-import SettingsFunctions from '../../../../../modules/helpers/settings/modals';
+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 React.PureComponent {
+export default class AdvancedSettings extends PureComponent {
   constructor() {
     super();
     this.state = {
@@ -38,9 +38,9 @@ export default class AdvancedSettings extends React.PureComponent {
 
         <h3>{advanced.data}</h3>
         <button className='reset' onClick={() => this.setState({ resetModal: true })}>{this.language.buttons.reset}</button>
-        <button className='export' onClick={() => SettingsFunctions.exportSettings()}>{this.language.buttons.export}</button>
+        <button className='export' onClick={() => exportSettings()}>{this.language.buttons.export}</button>
         <button className='import' onClick={() => document.getElementById('file-input').click()}>{this.language.buttons.import}</button>
-        <FileUpload id='file-input' accept='application/json' type='settings' loadFunction={(e) => SettingsFunctions.importSettings(e)}/>
+        <FileUpload id='file-input' accept='application/json' type='settings' loadFunction={(e) => importSettings(e)}/>
 
         <h3>{advanced.customisation}</h3>
         <Text title={advanced.tab_name} name='tabName' default={window.language.tabname} category='other'/>
diff --git a/src/components/modals/main/settings/sections/Changelog.jsx b/src/components/modals/main/settings/sections/Changelog.jsx
index 0bb8473d..56f0e5d1 100644
--- a/src/components/modals/main/settings/sections/Changelog.jsx
+++ b/src/components/modals/main/settings/sections/Changelog.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import Modal from 'react-modal';
 
@@ -6,7 +6,7 @@ import Lightbox from '../../marketplace/Lightbox';
 
 import WifiOffIcon from '@material-ui/icons/WifiOff';
 
-export default class Changelog extends React.PureComponent {
+export default class Changelog extends PureComponent {
   constructor() {
     super();
     this.state = {
diff --git a/src/components/modals/main/settings/sections/Greeting.jsx b/src/components/modals/main/settings/sections/Greeting.jsx
index 755c8d65..07aa8bb3 100644
--- a/src/components/modals/main/settings/sections/Greeting.jsx
+++ b/src/components/modals/main/settings/sections/Greeting.jsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import Checkbox from '../Checkbox';
 import Switch from '../Switch';
 import Text from '../Text';
 import Slider from '../Slider';
 
-export default class GreetingSettings extends React.PureComponent {
+export default class GreetingSettings extends PureComponent {
   constructor() {
     super();
     this.state = {
diff --git a/src/components/modals/main/settings/sections/Language.jsx b/src/components/modals/main/settings/sections/Language.jsx
index b4006a7b..335e643b 100644
--- a/src/components/modals/main/settings/sections/Language.jsx
+++ b/src/components/modals/main/settings/sections/Language.jsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import Radio from '../Radio';
 
 const languages = require('../../../../../modules/languages.json');
 
-export default class BackgroundSettings extends React.PureComponent {
+export default class BackgroundSettings extends PureComponent {
   constructor() {
     super();
     this.state = {
diff --git a/src/components/modals/main/settings/sections/Order.jsx b/src/components/modals/main/settings/sections/Order.jsx
index b88ee997..f70d4c91 100644
--- a/src/components/modals/main/settings/sections/Order.jsx
+++ b/src/components/modals/main/settings/sections/Order.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import EventBus from '../../../../../modules/helpers/eventbus';
 
@@ -36,7 +36,7 @@ const SortableContainer = sortableContainer(({ children }) => {
   return <ul className='sortablecontainer'>{children}</ul>;
 });
 
-export default class OrderSettings extends React.PureComponent {
+export default class OrderSettings extends PureComponent {
   constructor() {
     super();
     this.state = {
diff --git a/src/components/modals/main/settings/sections/Quote.jsx b/src/components/modals/main/settings/sections/Quote.jsx
index 24859e65..3e6d6e3a 100644
--- a/src/components/modals/main/settings/sections/Quote.jsx
+++ b/src/components/modals/main/settings/sections/Quote.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import Checkbox from '../Checkbox';
 import Text from '../Text';
@@ -6,7 +6,7 @@ import Switch from '../Switch';
 import Slider from '../Slider';
 import Dropdown from '../Dropdown';
 
-export default class QuoteSettings extends React.PureComponent {
+export default class QuoteSettings extends PureComponent {
   constructor() {
     super();
     this.state = {
diff --git a/src/components/modals/main/settings/sections/Search.jsx b/src/components/modals/main/settings/sections/Search.jsx
index 090074dc..3e498d9f 100644
--- a/src/components/modals/main/settings/sections/Search.jsx
+++ b/src/components/modals/main/settings/sections/Search.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import Dropdown from '../Dropdown';
 import Checkbox from '../Checkbox';
@@ -12,7 +12,7 @@ import { toast } from 'react-toastify';
 const searchEngines = require('../../../../widgets/search/search_engines.json');
 const autocompleteProviders = require('../../../../widgets/search/autocomplete_providers.json');
 
-export default class SearchSettings extends React.PureComponent {
+export default class SearchSettings extends PureComponent {
   constructor() {
     super();
     this.state = {
diff --git a/src/components/modals/main/settings/sections/Stats.jsx b/src/components/modals/main/settings/sections/Stats.jsx
index 599e08c7..0a0711a6 100644
--- a/src/components/modals/main/settings/sections/Stats.jsx
+++ b/src/components/modals/main/settings/sections/Stats.jsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import Switch from '../Switch';
 
 import EventBus from '../../../../../modules/helpers/eventbus';
 
-export default class Stats extends React.PureComponent {
+export default class Stats extends PureComponent {
   constructor() {
     super();
     this.state = {
diff --git a/src/components/modals/main/settings/sections/Time.jsx b/src/components/modals/main/settings/sections/Time.jsx
index ce587277..3bc8e873 100644
--- a/src/components/modals/main/settings/sections/Time.jsx
+++ b/src/components/modals/main/settings/sections/Time.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';
@@ -6,7 +6,7 @@ import Switch from '../Switch';
 import Radio from '../Radio';
 import Slider from '../Slider';
 
-export default class TimeSettings extends React.PureComponent {
+export default class TimeSettings extends PureComponent {
   constructor() {
     super();
     this.state = {
diff --git a/src/components/modals/main/settings/sections/Weather.jsx b/src/components/modals/main/settings/sections/Weather.jsx
index 9a8cb955..3135c45f 100644
--- a/src/components/modals/main/settings/sections/Weather.jsx
+++ b/src/components/modals/main/settings/sections/Weather.jsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import Switch from '../Switch';
 import Radio from '../Radio';
 import Checkbox from '../Checkbox';
 import Slider from '../Slider';
 
-export default class TimeSettings extends React.PureComponent {
+export default class TimeSettings extends PureComponent {
   constructor() {
     super();
     this.state = {
diff --git a/src/components/modals/main/settings/sections/background/Background.jsx b/src/components/modals/main/settings/sections/background/Background.jsx
index 9442dfd9..594d856a 100644
--- a/src/components/modals/main/settings/sections/background/Background.jsx
+++ b/src/components/modals/main/settings/sections/background/Background.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import EventBus from '../../../../../../modules/helpers/eventbus';
 
@@ -13,7 +13,7 @@ import ColourSettings from './Colour';
 
 import { toast } from 'react-toastify';
 
-export default class BackgroundSettings extends React.PureComponent {
+export default class BackgroundSettings extends PureComponent {
   constructor() {
     super();
     this.state = {
diff --git a/src/components/modals/main/settings/sections/background/Colour.jsx b/src/components/modals/main/settings/sections/background/Colour.jsx
index c892a1ef..ea917923 100644
--- a/src/components/modals/main/settings/sections/background/Colour.jsx
+++ b/src/components/modals/main/settings/sections/background/Colour.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent, Fragment } from 'react';
 
 import { ColorPicker } from 'react-color-gradient-picker';
 
@@ -10,7 +10,7 @@ import { toast } from 'react-toastify';
 import 'react-color-gradient-picker/dist/index.css';
 import '../../../scss/settings/react-color-picker-gradient-picker-custom-styles.scss';
 
-export default class ColourSettings extends React.PureComponent {
+export default class ColourSettings extends PureComponent {
   DefaultGradientSettings = { angle: '180', gradient: [{ colour: '#ffb032', stop: 0 }], type: 'linear' };
   GradientPickerInitalState = undefined;
   
@@ -166,10 +166,10 @@ export default class ColourSettings extends React.PureComponent {
       } else {
         gradientInputs = this.state.gradientSettings.gradient.map((g, i) => {
           return (
-            <React.Fragment key={i}>
+            <Fragment key={i}>
               <input id={'colour_' + i} type='color' name='colour' className='colour' onChange={(event) => this.onGradientChange(event, i)} value={g.colour}></input>
               <label htmlFor={'colour_' + i} className='customBackgroundHex'>{g.colour}</label>
-            </React.Fragment>
+            </Fragment>
           );
         });
       }
diff --git a/src/components/modals/main/tabs/Settings.jsx b/src/components/modals/main/tabs/Settings.jsx
index 3aebd92e..60dc2dce 100644
--- a/src/components/modals/main/tabs/Settings.jsx
+++ b/src/components/modals/main/tabs/Settings.jsx
@@ -18,11 +18,7 @@ import Tabs from './backend/Tabs';
 
 export default function Settings() {
   const { reminder, sections } = window.language.modals.main.settings;
-
-  let display = 'none';
-  if (localStorage.getItem('showReminder') === 'true') {
-    display = 'block';
-  }
+  const display = (localStorage.getItem('showReminder') === 'true') ? 'block' : 'none';
 
   return (
     <>
@@ -38,7 +34,7 @@ export default function Settings() {
         <div label={sections.order.title} name='order'><Order/></div>
         <div label={sections.language.title} name='language'><Language/></div>
         <div label={sections.advanced.title} name='advanced'><Advanced/></div>
-        <div label='Stats' name='stats'><Stats/></div>
+        <div label={sections.stats.title} name='stats'><Stats/></div>
         <div label={sections.experimental.title} name='experimental'><Experimental/></div>
         <div label={sections.changelog} name='changelog'><Changelog/></div>
         <div label={sections.about.title} name='about'><About/></div>
diff --git a/src/components/modals/main/tabs/backend/Tab.jsx b/src/components/modals/main/tabs/backend/Tab.jsx
index 2757bdc2..b6760761 100644
--- a/src/components/modals/main/tabs/backend/Tab.jsx
+++ b/src/components/modals/main/tabs/backend/Tab.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { memo } from 'react';
 
 // Navbar
 import Settings from '@material-ui/icons/SettingsRounded';
@@ -96,4 +96,4 @@ function Tab(props) {
   );
 }
 
-export default React.memo(Tab);
+export default memo(Tab);
diff --git a/src/components/modals/main/tabs/backend/Tabs.jsx b/src/components/modals/main/tabs/backend/Tabs.jsx
index 63e33562..56d84304 100644
--- a/src/components/modals/main/tabs/backend/Tabs.jsx
+++ b/src/components/modals/main/tabs/backend/Tabs.jsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import Tab from './Tab';
 import ErrorBoundary from '../../../ErrorBoundary';
 
-export default class Tabs extends React.PureComponent {
+export default class Tabs extends PureComponent {
   constructor(props) {
     super(props);
 
diff --git a/src/components/modals/welcome/Welcome.jsx b/src/components/modals/welcome/Welcome.jsx
index 20ec29dc..5a5e7254 100644
--- a/src/components/modals/welcome/Welcome.jsx
+++ b/src/components/modals/welcome/Welcome.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import EventBus from '../../../modules/helpers/eventbus';
 
@@ -7,7 +7,7 @@ import ProgressBar from './ProgressBar';
 
 import './welcome.scss';
 
-export default class WelcomeModal extends React.PureComponent {
+export default class WelcomeModal extends PureComponent {
   constructor() {
     super();
     this.state = {
diff --git a/src/components/modals/welcome/WelcomeSections.jsx b/src/components/modals/welcome/WelcomeSections.jsx
index 35f1a4cb..94994c8f 100644
--- a/src/components/modals/welcome/WelcomeSections.jsx
+++ b/src/components/modals/welcome/WelcomeSections.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import Radio from '../main/settings/Radio';
 import Checkbox from '../main/settings/Checkbox';
@@ -9,13 +9,13 @@ import AutoIcon from '@material-ui/icons/AutoAwesome';
 import LightModeIcon from '@material-ui/icons/LightMode';
 import DarkModeIcon from '@material-ui/icons/DarkMode';
 
-import SettingsFunctions from '../../../modules/helpers/settings';
-import SettingsFunctionsModal from '../../../modules/helpers/settings/modals';
+import { loadSettings } from '../../../modules/helpers/settings';
+import { importSettings } from '../../../modules/helpers/settings/modals';
 
 const languages = require('../../../modules/languages.json');
 const default_settings = require('../../../modules/default_settings.json');
 
-export default class WelcomeSections extends React.PureComponent {
+export default class WelcomeSections extends PureComponent {
   constructor() {
     super();
     this.state = {
@@ -40,7 +40,7 @@ export default class WelcomeSections extends React.PureComponent {
     });
 
     localStorage.setItem('theme', type);
-    SettingsFunctions.loadSettings(true);
+    loadSettings(true);
   }
 
   getSetting(name) {
@@ -49,7 +49,7 @@ export default class WelcomeSections extends React.PureComponent {
   }
 
   importSettings(e) {
-    SettingsFunctionsModal.importSettings(e);
+    importSettings(e);
 
     let settings = [];
     const data = JSON.parse(e.target.result);
diff --git a/src/components/widgets/Widgets.jsx b/src/components/widgets/Widgets.jsx
index 8e39d98c..0cd0be91 100644
--- a/src/components/widgets/Widgets.jsx
+++ b/src/components/widgets/Widgets.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent, Fragment, Suspense, lazy } from 'react';
 
 import EventBus from '../../modules/helpers/eventbus';
 
@@ -9,10 +9,10 @@ import Search from './search/Search';
 import QuickLinks from './quicklinks/QuickLinks';
 import Date from './time/Date';
 
-const Weather = React.lazy(() => import('./weather/Weather'));
+const Weather = lazy(() => import('./weather/Weather'));
 const renderLoader = () => <></>;
 
-export default class Widgets extends React.PureComponent {
+export default class Widgets extends PureComponent {
   constructor() {
     super();
     this.state = {
@@ -53,7 +53,7 @@ export default class Widgets extends React.PureComponent {
 
     if (this.state.order) {
       this.state.order.forEach((element) => {
-        elements.push(<React.Fragment key={element}>{this.widgets[element]}</React.Fragment>);
+        elements.push(<Fragment key={element}>{this.widgets[element]}</Fragment>);
       });
     } else {
       // prevent error
@@ -62,11 +62,11 @@ export default class Widgets extends React.PureComponent {
 
     return (
       <div id='widgets'>
-        <React.Suspense fallback={renderLoader()}>
+        <Suspense fallback={renderLoader()}>
           {this.enabled('searchBar') ? <Search/> : null}
           {elements}
           {this.enabled('weatherEnabled') && (localStorage.getItem('offlineMode') === 'false') ? <Weather/> : null}
-        </React.Suspense>
+        </Suspense>
       </div>
     );
   }
diff --git a/src/components/widgets/background/Favourite.jsx b/src/components/widgets/background/Favourite.jsx
index f72f176f..3910d1d5 100644
--- a/src/components/widgets/background/Favourite.jsx
+++ b/src/components/widgets/background/Favourite.jsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 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 React.PureComponent {
+export default class Favourite extends PureComponent {
   buttons = {
     favourited: <StarIcon onClick={() => this.favourite()} className='topicons' />,
     unfavourited: <StarIcon2 onClick={() => this.favourite()} className='topicons' />
diff --git a/src/components/widgets/background/Maximise.jsx b/src/components/widgets/background/Maximise.jsx
index 49c2e904..04799560 100644
--- a/src/components/widgets/background/Maximise.jsx
+++ b/src/components/widgets/background/Maximise.jsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import Tooltip from '../../helpers/tooltip/Tooltip';
 
 import FullscreenIcon from '@material-ui/icons/Fullscreen';
 
-export default class Maximise extends React.PureComponent {
+export default class Maximise extends PureComponent {
   constructor() {
     super();
     this.state = {
diff --git a/src/components/widgets/background/PhotoInformation.jsx b/src/components/widgets/background/PhotoInformation.jsx
index fa5970f8..9419c317 100644
--- a/src/components/widgets/background/PhotoInformation.jsx
+++ b/src/components/widgets/background/PhotoInformation.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState } from 'react';
 
 import Info from '@material-ui/icons/Info';
 import Location from '@material-ui/icons/LocationOn';
@@ -24,8 +24,8 @@ const downloadImage = async (info) => {
 };
 
 export default function PhotoInformation(props) {
-  const [width, setWidth] = React.useState(0);
-  const [height, setHeight] = React.useState(0);
+  const [width, setWidth] = useState(0);
+  const [height, setHeight] = useState(0);
 
   const language = window.language.widgets.background;
 
diff --git a/src/components/widgets/greeting/Greeting.jsx b/src/components/widgets/greeting/Greeting.jsx
index 175aae6e..3f32eb3f 100644
--- a/src/components/widgets/greeting/Greeting.jsx
+++ b/src/components/widgets/greeting/Greeting.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import { utcToZonedTime } from 'date-fns-tz';
 import EventBus from '../../../modules/helpers/eventbus';
@@ -7,7 +7,7 @@ import dtf from '../../../modules/helpers/date';
 
 import './greeting.scss';
 
-export default class Greeting extends React.PureComponent {
+export default class Greeting extends PureComponent {
   constructor() {
     super();
     this.state = {
diff --git a/src/components/widgets/navbar/Navbar.jsx b/src/components/widgets/navbar/Navbar.jsx
index 47f9d010..57eb85ac 100644
--- a/src/components/widgets/navbar/Navbar.jsx
+++ b/src/components/widgets/navbar/Navbar.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import RefreshIcon from '@material-ui/icons/RefreshRounded';
 import Gear from '@material-ui/icons/SettingsRounded';
@@ -14,7 +14,7 @@ import EventBus from '../../../modules/helpers/eventbus';
 
 import './scss/index.scss';
 
-export default class Navbar extends React.PureComponent {
+export default class Navbar extends PureComponent {
   componentDidMount() {
     EventBus.on('refresh', (data) => {
       if (data === 'navbar') {
diff --git a/src/components/widgets/navbar/Notes.jsx b/src/components/widgets/navbar/Notes.jsx
index 29fca230..d1a9fe61 100644
--- a/src/components/widgets/navbar/Notes.jsx
+++ b/src/components/widgets/navbar/Notes.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import TextareaAutosize from '@material-ui/core/TextareaAutosize';
 
@@ -8,7 +8,7 @@ import Pin from '@material-ui/icons/PushPin';
 
 import { toast } from 'react-toastify';
 
-export default class Notes extends React.PureComponent {
+export default class Notes extends PureComponent {
   constructor() {
     super();
     this.state = {
diff --git a/src/components/widgets/quicklinks/QuickLinks.jsx b/src/components/widgets/quicklinks/QuickLinks.jsx
index 2f297afe..5b9d8122 100644
--- a/src/components/widgets/quicklinks/QuickLinks.jsx
+++ b/src/components/widgets/quicklinks/QuickLinks.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import EventBus from '../../../modules/helpers/eventbus';
 
@@ -7,7 +7,7 @@ import TextareaAutosize from '@material-ui/core/TextareaAutosize';
 
 import './quicklinks.scss';
 
-export default class QuickLinks extends React.PureComponent {
+export default class QuickLinks extends PureComponent {
   constructor() {
     super();
     this.state = {
diff --git a/src/components/widgets/quote/Quote.jsx b/src/components/widgets/quote/Quote.jsx
index a9a1f2f2..b63b583e 100644
--- a/src/components/widgets/quote/Quote.jsx
+++ b/src/components/widgets/quote/Quote.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import EventBus from '../../../modules/helpers/eventbus';
 import Interval from '../../../modules/helpers/interval';
@@ -12,7 +12,7 @@ import { toast } from 'react-toastify';
 
 import './quote.scss';
 
-export default class Quote extends React.PureComponent {
+export default class Quote extends PureComponent {
   buttons = {
     tweet: <TwitterIcon className='copyButton' onClick={() => this.tweetQuote()} />,
     copy: <FileCopy className='copyButton' onClick={() => this.copyQuote()} />,
diff --git a/src/components/widgets/search/Search.jsx b/src/components/widgets/search/Search.jsx
index ef5ab9dd..b2db9edf 100644
--- a/src/components/widgets/search/Search.jsx
+++ b/src/components/widgets/search/Search.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import EventBus from '../../../modules/helpers/eventbus';
 
@@ -12,7 +12,7 @@ import './search.scss';
 const searchEngines = require('./search_engines.json');
 const autocompleteProviders = require('./autocomplete_providers.json');
 
-export default class Search extends React.PureComponent {
+export default class Search extends PureComponent {
   constructor() {
     super();
     this.state = {
diff --git a/src/components/widgets/time/Clock.jsx b/src/components/widgets/time/Clock.jsx
index 0b220a86..55c06823 100644
--- a/src/components/widgets/time/Clock.jsx
+++ b/src/components/widgets/time/Clock.jsx
@@ -1,14 +1,14 @@
-import React from 'react';
+import { PureComponent, Suspense, lazy } from 'react';
 
 import { utcToZonedTime } from 'date-fns-tz';
 import EventBus from '../../../modules/helpers/eventbus';
 
 import './clock.scss';
 
-const Analog = React.lazy(() => import('react-clock'));
+const Analog = lazy(() => import('react-clock'));
 const renderLoader = () => <></>;
 
-export default class Clock extends React.PureComponent {
+export default class Clock extends PureComponent {
   constructor() {
     super();
 
@@ -123,7 +123,7 @@ export default class Clock extends React.PureComponent {
 
     if (localStorage.getItem('timeType') === 'analogue') {
       clockHTML = (
-        <React.Suspense fallback={renderLoader()}>
+        <Suspense fallback={renderLoader()}>
           <Analog 
             className='analogclock clock-container' 
             value={this.state.time} 
@@ -133,7 +133,7 @@ export default class Clock extends React.PureComponent {
             renderMinuteHand={enabled('minuteHand')} 
             renderHourHand={enabled('hourHand')} 
           />
-        </React.Suspense>
+        </Suspense>
       );
     }
 
diff --git a/src/components/widgets/time/Date.jsx b/src/components/widgets/time/Date.jsx
index 6c068017..dcc717f8 100644
--- a/src/components/widgets/time/Date.jsx
+++ b/src/components/widgets/time/Date.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import { utcToZonedTime } from 'date-fns-tz';
 import EventBus from '../../../modules/helpers/eventbus';
@@ -7,7 +7,7 @@ import dtf from '../../../modules/helpers/date';
 
 import './date.scss';
 
-export default class DateWidget extends React.PureComponent {
+export default class DateWidget extends PureComponent {
   constructor() {
     super();
     this.state = {
diff --git a/src/components/widgets/weather/Weather.jsx b/src/components/widgets/weather/Weather.jsx
index 7f5ecdc7..3f8871bd 100644
--- a/src/components/widgets/weather/Weather.jsx
+++ b/src/components/widgets/weather/Weather.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import EventBus from '../../../modules/helpers/eventbus';
 
@@ -8,7 +8,7 @@ import { WiHumidity, WiWindy, WiBarometer, WiCloud } from 'weather-icons-react';
 
 import './weather.scss';
 
-export default class Weather extends React.PureComponent {
+export default class Weather extends PureComponent {
   constructor() {
     super();
     this.state = {
diff --git a/src/index.js b/src/index.js
index 85305036..52e58f5a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,4 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import { render } from 'react-dom';
 
 import App from './App';
 import * as Constants from './modules/constants';
@@ -12,8 +11,6 @@ import 'react-toastify/dist/ReactToastify.min.css';
 import Stats from './modules/helpers/stats';
 
 // language
-import merge from '@material-ui/utils/esm/deepmerge';
-
 const languagecode = localStorage.getItem('language') || 'en_GB';
 
 // we set things to window. so we avoid passing the translation strings as props to each component
@@ -24,7 +21,7 @@ if (languagecode === 'en') {
 }
 
 // these are merged so if a string is untranslated it doesn't break mue
-window.language = merge(require('./translations/en_GB.json'), require(`./translations/${window.languagecode}.json`));
+window.language = require(`./translations/${window.languagecode}.json`);
 
 // set html language tag
 if (window.languagecode !== 'en_GB' || window.languagecode !== 'en_US') {
@@ -42,7 +39,7 @@ if (localStorage.getItem('stats') === 'true') {
   } 
 }
 
-ReactDOM.render(
+render(
   <App/>,
   document.getElementById('root')
 );
diff --git a/src/modules/helpers/date.js b/src/modules/helpers/date.js
index ede419a5..4990162a 100644
--- a/src/modules/helpers/date.js
+++ b/src/modules/helpers/date.js
@@ -1,18 +1,16 @@
-export default class Date {
-  static nth(d) {
-    if (d > 3 && d < 21) {
-      return d + 'th';
-    }
+export default function nth(d) {
+  if (d > 3 && d < 21) {
+    return d + 'th';
+  }
 
-    switch (d % 10) {
-      case 1:
-        return d + 'st';
-      case 2:
-        return d + 'nd';
-      case 3:
-        return d + 'rd';
-      default:
-        return d + 'th';
-    }
+  switch (d % 10) {
+    case 1:
+      return d + 'st';
+    case 2:
+      return d + 'nd';
+    case 3:
+      return d + 'rd';
+    default:
+      return d + 'th';
   }
 }
diff --git a/src/modules/helpers/marketplace.js b/src/modules/helpers/marketplace.js
index 06ada89a..025c7e55 100644
--- a/src/modules/helpers/marketplace.js
+++ b/src/modules/helpers/marketplace.js
@@ -1,101 +1,99 @@
 import EventBus from './eventbus';
 
-export default class MarketplaceFunctions {
-  // based on https://stackoverflow.com/questions/37684/how-to-replace-plain-urls-with-links
-  static urlParser(input) {
-    const urlPattern = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_+.~#?&//=]*)/;
-    return input.replace(urlPattern, '<a href="$&" target="_blank">$&</a>');
-  }
-
-  static uninstall(type, name) {
-    switch (type) {
-      case 'settings':
-        const oldSettings = JSON.parse(localStorage.getItem('backup_settings'));
-        localStorage.clear();
-        oldSettings.forEach((item) => {
-          localStorage.setItem(item.name, item.value);
-        });
-        break;
-      case 'quotes':
-        localStorage.removeItem('quote_packs');
-        localStorage.removeItem('quoteAPI');
-        localStorage.setItem('quoteType', localStorage.getItem('oldQuoteType'));
-        localStorage.removeItem('oldQuoteType');
-        EventBus.dispatch('refresh', 'marketplacequoteuninstall');
-        break;
-      case 'photos':
-        localStorage.removeItem('photo_packs');
-        localStorage.setItem('backgroundType', localStorage.getItem('oldBackgroundType'));
-        localStorage.removeItem('oldBackgroundType');
-        EventBus.dispatch('refresh', 'marketplacebackgrounduninstall');
-        break;
-      default:
-        break;
-    }
-
-    let installed = JSON.parse(localStorage.getItem('installed'));
-    for (let i = 0; i < installed.length; i++) {
-      if (installed[i].name === name) {
-        installed.splice(i, 1);
-        break;
-      }
-    }
-    localStorage.setItem('installed', JSON.stringify(installed));
-  }
-
-  static install(type, input, sideload) {
-    switch (type) {
-      case 'settings':
-        localStorage.removeItem('backup_settings');
-
-        let oldSettings = [];
-        Object.keys(localStorage).forEach((key) => {
-          oldSettings.push({
-            name: key,
-            value: localStorage.getItem(key)
-          });
-        });
-
-        localStorage.setItem('backup_settings', JSON.stringify(oldSettings));
-        Object.keys(input.settings).forEach((key) => {
-          localStorage.setItem(key, input.settings[key]);
-        });
-        break;
-
-      case 'photos':
-        localStorage.setItem('photo_packs', JSON.stringify(input.photos));
-        localStorage.setItem('oldBackgroundType', localStorage.getItem('backgroundType'));
-        localStorage.setItem('backgroundType', 'photo_pack');
-        EventBus.dispatch('refresh', 'background');
-        break;
-
-      case 'quotes':
-        if (input.quote_api) {
-          localStorage.setItem('quoteAPI', JSON.stringify(input.quote_api));
-        }
-
-        localStorage.setItem('quote_packs', JSON.stringify(input.quotes));
-        localStorage.setItem('oldQuoteType', localStorage.getItem('quoteType'));
-        localStorage.setItem('quoteType', 'quote_pack');
-        EventBus.dispatch('refresh', 'quote');
-        break;
-      default:
-        break;
-    }
-
-    const installed = JSON.parse(localStorage.getItem('installed'));
-
-    if (sideload) {
-      installed.push({
-        content: {
-          updated: 'Unpublished',
-          data: input
-        }
-      });
-    } else {
-      installed.push(input);
-    }
-
-    localStorage.setItem('installed', JSON.stringify(installed));
-  }
+// based on https://stackoverflow.com/questions/37684/how-to-replace-plain-urls-with-links
+export function urlParser(input) {
+  const urlPattern = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_+.~#?&//=]*)/;
+  return input.replace(urlPattern, '<a href="$&" target="_blank">$&</a>');
+}
+
+export function uninstall(type, name) {
+  switch (type) {
+    case 'settings':
+      const oldSettings = JSON.parse(localStorage.getItem('backup_settings'));
+      localStorage.clear();
+      oldSettings.forEach((item) => {
+        localStorage.setItem(item.name, item.value);
+      });
+      break;
+    case 'quotes':
+      localStorage.removeItem('quote_packs');
+      localStorage.removeItem('quoteAPI');
+      localStorage.setItem('quoteType', localStorage.getItem('oldQuoteType'));
+      localStorage.removeItem('oldQuoteType');
+      EventBus.dispatch('refresh', 'marketplacequoteuninstall');
+      break;
+    case 'photos':
+      localStorage.removeItem('photo_packs');
+      localStorage.setItem('backgroundType', localStorage.getItem('oldBackgroundType'));
+      localStorage.removeItem('oldBackgroundType');
+      EventBus.dispatch('refresh', 'marketplacebackgrounduninstall');
+      break;
+    default:
+      break;
+  }
+
+  let installed = JSON.parse(localStorage.getItem('installed'));
+  for (let i = 0; i < installed.length; i++) {
+    if (installed[i].name === name) {
+      installed.splice(i, 1);
+      break;
+    }
+  }
+  localStorage.setItem('installed', JSON.stringify(installed));
+}
+
+export function install(type, input, sideload) {
+  switch (type) {
+    case 'settings':
+      localStorage.removeItem('backup_settings');
+
+      let oldSettings = [];
+      Object.keys(localStorage).forEach((key) => {
+        oldSettings.push({
+          name: key,
+          value: localStorage.getItem(key)
+        });
+      });
+
+      localStorage.setItem('backup_settings', JSON.stringify(oldSettings));
+      Object.keys(input.settings).forEach((key) => {
+        localStorage.setItem(key, input.settings[key]);
+      });
+      break;
+
+    case 'photos':
+      localStorage.setItem('photo_packs', JSON.stringify(input.photos));
+      localStorage.setItem('oldBackgroundType', localStorage.getItem('backgroundType'));
+      localStorage.setItem('backgroundType', 'photo_pack');
+      EventBus.dispatch('refresh', 'background');
+      break;
+
+    case 'quotes':
+      if (input.quote_api) {
+        localStorage.setItem('quoteAPI', JSON.stringify(input.quote_api));
+      }
+
+      localStorage.setItem('quote_packs', JSON.stringify(input.quotes));
+      localStorage.setItem('oldQuoteType', localStorage.getItem('quoteType'));
+      localStorage.setItem('quoteType', 'quote_pack');
+      EventBus.dispatch('refresh', 'quote');
+      break;
+    default:
+      break;
+  }
+
+  const installed = JSON.parse(localStorage.getItem('installed'));
+
+  if (sideload) {
+    installed.push({
+      content: {
+        updated: 'Unpublished',
+        data: input
+      }
+    });
+  } else {
+    installed.push(input);
+  }
+
+  localStorage.setItem('installed', JSON.stringify(installed));
 }
diff --git a/src/modules/helpers/settings/index.js b/src/modules/helpers/settings/index.js
index 9dcf26a0..44cf02cf 100644
--- a/src/modules/helpers/settings/index.js
+++ b/src/modules/helpers/settings/index.js
@@ -3,144 +3,142 @@ import experimentalInit from '../experimental';
 const defaultSettings = require('../../default_settings.json');
 const languages = require('../../languages.json');
 
-export default class SettingsFunctions {
-  static setDefaultSettings(reset) {
-    localStorage.clear();
-    defaultSettings.forEach((element) => localStorage.setItem(element.name, element.value));
+export function setDefaultSettings(reset) {
+  localStorage.clear();
+  defaultSettings.forEach((element) => localStorage.setItem(element.name, element.value));
 
-    // Languages
-    const languageCodes = languages.map(({ value }) => value);
-    const browserLanguage = (navigator.languages && navigator.languages.find((lang) => lang.replace('-', '_') && languageCodes.includes(lang))) || navigator.language.replace('-', '_');
+  // Languages
+  const languageCodes = languages.map(({ value }) => value);
+  const browserLanguage = (navigator.languages && navigator.languages.find((lang) => lang.replace('-', '_') && languageCodes.includes(lang))) || navigator.language.replace('-', '_');
 
-    if (languageCodes.includes(browserLanguage)) {
-      localStorage.setItem('language', browserLanguage);
-    } else {
-      localStorage.setItem('language', 'en_GB');
-    }
-
-    localStorage.setItem('tabName', window.language.tabname);
-
-    if (reset) {
-      localStorage.setItem('showWelcome', false);
-    }
-
-    // Finally we set this to true so it doesn't run the function on every load
-    localStorage.setItem('firstRun', true);
+  if (languageCodes.includes(browserLanguage)) {
+    localStorage.setItem('language', browserLanguage);
+  } else {
+    localStorage.setItem('language', 'en_GB');
   }
 
-  static loadSettings(hotreload) {
-    document.getElementById('widgets').style.zoom = localStorage.getItem('widgetzoom') + '%';
+  localStorage.setItem('tabName', window.language.tabname);
 
-    const theme = localStorage.getItem('theme');
-    switch (theme) {
-      case 'dark':
-        document.body.classList.add('dark');
-        break;
-      case 'auto':
-        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-          document.body.classList.add('dark');
-        } else {
-          document.body.classList.remove('dark');
-        }
-        break;
-      default:
-        document.body.classList.remove('dark');
-    }
-
-    const tabName = localStorage.getItem('tabName') || window.language.tabname;
-    document.title = tabName;
-
-    if (hotreload === true) {
-      const custom = ['customcss', 'customjs', 'customfont'];
-      custom.forEach((element) => {
-        try {
-          document.head.removeChild(document.getElementById(element));
-        } catch (e) {
-          // Disregard exception
-        }
-      });
-    }
-
-    const css = localStorage.getItem('customcss');
-    if (css) {
-      document.head.insertAdjacentHTML('beforeend', '<style id="customcss">' + css + '</style>');
-    }
-
-    const font = localStorage.getItem('font');
-    if (font) {
-      let url = '';
-      if (localStorage.getItem('fontGoogle') === 'true') {
-        url = `@import url('https://fonts.googleapis.com/css2?family=${font}&display=swap');`;
-      }
-
-      document.head.insertAdjacentHTML('beforeend', `
-        <style id='customfont'>
-          ${url}
-          * {
-            font-family: '${font}', 'Lexend Deca', 'Montserrat', sans-serif !important;
-            font-weight: ${localStorage.getItem('fontweight')};
-            font-style: ${localStorage.getItem('fontstyle')};
-          }
-        </style>
-      `);
-    }
-
-    // everything below this either doesn't support hot reload (custom js) or shouldn't run on a hot reload event
-    if (hotreload === true) {
-      return;
-    }
-
-    const js = localStorage.getItem('customjs');
-    if (js) {
-      try {
-        // eslint-disable-next-line no-eval
-        eval(js);
-      } catch (e) {
-        console.error('Failed to run custom JS: ', e);
-      }
-    }
-
-    if (localStorage.getItem('experimental') === 'true') {
-      experimentalInit();
-    }
-
-    // easter egg
-    console.log(`
- █████████████████████████████████████████████████████████████                                                                        
- ██                                                         ██
- ██              ███    ███ ██    ██ ███████                ██  
- ██              ████  ████ ██    ██ ██                     ██ 
- ██              ██ ████ ██ ██    ██ █████                  ██ 
- ██              ██  ██  ██ ██    ██ ██                     ██ 
- ██              ██      ██  ██████  ███████                ██ 
- ██                                                         ██ 
- ██                                                         ██                                                                                                 
- ██           Copyright 2018-${new Date().getFullYear()} The Mue Authors           ██
- ██           GitHub: https://github.com/mue/mue            ██
- ██                                                         ██
- ██               Thank you for using Mue!                  ██
- ██              Feedback: hello@muetab.com                 ██
- █████████████████████████████████████████████████████████████
-`);
+  if (reset) {
+    localStorage.setItem('showWelcome', false);
   }
 
-  // in a nutshell, this function saves all of the current settings, resets them, sets the defaults and then overrides 
-  // the new settings with the old saved messages where they exist
-  static moveSettings() {
-    if (Object.keys(localStorage).length === 0) {
-      return this.setDefaultSettings();
-    }
-
-    let settings = {};
-    Object.keys(localStorage).forEach((key) => {
-      settings[key] = localStorage.getItem(key);
-    });
-
-    localStorage.clear();
-
-    this.setDefaultSettings();
-    Object.keys(settings).forEach((key) => {
-      localStorage.setItem(key, settings[key]);
-    });
-  }
+  // Finally we set this to true so it doesn't run the function on every load
+  localStorage.setItem('firstRun', true);
 }
+
+export function loadSettings(hotreload) {
+  document.getElementById('widgets').style.zoom = localStorage.getItem('widgetzoom') + '%';
+
+  const theme = localStorage.getItem('theme');
+  switch (theme) {
+    case 'dark':
+      document.body.classList.add('dark');
+      break;
+    case 'auto':
+      if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        document.body.classList.add('dark');
+      } else {
+        document.body.classList.remove('dark');
+      }
+      break;
+    default:
+      document.body.classList.remove('dark');
+  }
+
+  const tabName = localStorage.getItem('tabName') || window.language.tabname;
+  document.title = tabName;
+
+  if (hotreload === true) {
+    const custom = ['customcss', 'customjs', 'customfont'];
+    custom.forEach((element) => {
+      try {
+        document.head.removeChild(document.getElementById(element));
+      } catch (e) {
+        // Disregard exception
+      }
+    });
+  }
+
+  const css = localStorage.getItem('customcss');
+  if (css) {
+    document.head.insertAdjacentHTML('beforeend', '<style id="customcss">' + css + '</style>');
+  }
+
+  const font = localStorage.getItem('font');
+  if (font) {
+    let url = '';
+    if (localStorage.getItem('fontGoogle') === 'true') {
+      url = `@import url('https://fonts.googleapis.com/css2?family=${font}&display=swap');`;
+    }
+
+    document.head.insertAdjacentHTML('beforeend', `
+      <style id='customfont'>
+        ${url}
+        * {
+          font-family: '${font}', 'Lexend Deca', 'Montserrat', sans-serif !important;
+          font-weight: ${localStorage.getItem('fontweight')};
+          font-style: ${localStorage.getItem('fontstyle')};
+        }
+      </style>
+    `);
+  }
+
+  // everything below this either doesn't support hot reload (custom js) or shouldn't run on a hot reload event
+  if (hotreload === true) {
+    return;
+  }
+
+  const js = localStorage.getItem('customjs');
+  if (js) {
+    try {
+      // eslint-disable-next-line no-eval
+      eval(js);
+    } catch (e) {
+      console.error('Failed to run custom JS: ', e);
+    }
+  }
+
+  if (localStorage.getItem('experimental') === 'true') {
+    experimentalInit();
+  }
+
+  // easter egg
+  console.log(`
+█████████████████████████████████████████████████████████████                                                                        
+██                                                         ██
+██              ███    ███ ██    ██ ███████                ██  
+██              ████  ████ ██    ██ ██                     ██ 
+██              ██ ████ ██ ██    ██ █████                  ██ 
+██              ██  ██  ██ ██    ██ ██                     ██ 
+██              ██      ██  ██████  ███████                ██ 
+██                                                         ██ 
+██                                                         ██                                                                                                 
+██           Copyright 2018-${new Date().getFullYear()} The Mue Authors           ██
+██           GitHub: https://github.com/mue/mue            ██
+██                                                         ██
+██               Thank you for using Mue!                  ██
+██              Feedback: hello@muetab.com                 ██
+█████████████████████████████████████████████████████████████
+`);
+}
+
+// in a nutshell, this function saves all of the current settings, resets them, sets the defaults and then overrides 
+// the new settings with the old saved messages where they exist
+export function moveSettings() {
+  if (Object.keys(localStorage).length === 0) {
+    return this.setDefaultSettings();
+  }
+
+  let settings = {};
+  Object.keys(localStorage).forEach((key) => {
+    settings[key] = localStorage.getItem(key);
+  });
+
+  localStorage.clear();
+
+  setDefaultSettings();
+  Object.keys(settings).forEach((key) => {
+    localStorage.setItem(key, settings[key]);
+  });
+}
\ No newline at end of file
diff --git a/src/modules/helpers/settings/modals.js b/src/modules/helpers/settings/modals.js
index 38c88e19..82675040 100644
--- a/src/modules/helpers/settings/modals.js
+++ b/src/modules/helpers/settings/modals.js
@@ -1,6 +1,6 @@
 import { toast } from 'react-toastify';
 
-const saveFile = (data, filename = 'file') => {
+export function saveFile(data, filename = 'file') {
   if (typeof data === 'object') {
     data = JSON.stringify(data, undefined, 4);
   }
@@ -17,28 +17,22 @@ const saveFile = (data, filename = 'file') => {
   a.dispatchEvent(e);
 };
 
-export default class ModalSettingsFunctions {
-  static exportSettings() {
-    let settings = {};
-    Object.keys(localStorage).forEach((key) => {
-        settings[key] = localStorage.getItem(key);
-    });
-    saveFile(settings, 'mue-settings.json');
-    window.stats.postEvent('tab', 'Settings exported');
-  }
+export function exportSettings() {
+  let settings = {};
+  Object.keys(localStorage).forEach((key) => {
+      settings[key] = localStorage.getItem(key);
+  });
+  saveFile(settings, 'mue-settings.json');
+  window.stats.postEvent('tab', 'Settings exported');
+}
 
-  static saveFile(data, filename) {
-    saveFile(data, filename);
-  }
+export function importSettings(e) {
+  const content = JSON.parse(e.target.result);
 
-  static importSettings(e) {
-    const content = JSON.parse(e.target.result);
+  Object.keys(content).forEach((key) => {
+    localStorage.setItem(key, content[key]);
+  });
 
-    Object.keys(content).forEach((key) => {
-      localStorage.setItem(key, content[key]);
-    });
-
-    toast(window.language.toasts.imported);
-    window.stats.postEvent('tab', 'Settings imported');
-  }
-}
\ No newline at end of file
+  toast(window.language.toasts.imported);
+  window.stats.postEvent('tab', 'Settings imported');
+}