diff --git a/.babelrc b/.babelrc
new file mode 100644
index 00000000..7b4b42b2
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,6 @@
+{
+    "presets": ["@babel/preset-env", "@babel/preset-react"],
+    "plugins": ["@babel/plugin-proposal-class-properties",  ["@babel/transform-runtime", {
+        "regenerator": true
+      }]]
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index f0af509f..0c5431a4 100644
--- a/package.json
+++ b/package.json
@@ -12,11 +12,11 @@
   "version": "5.0.0",
   "dependencies": {
     "@eartharoid/dtf": "^1.0.8",
+    "@fontsource/lexend-deca": "^4.1.0",
+    "@fontsource/roboto": "^4.1.0",
     "@material-ui/core": "4.11.2",
     "@material-ui/icons": "4.11.2",
     "deepmerge": "^4.2.2",
-    "fontsource-lexend-deca": "^3.0.11",
-    "fontsource-roboto": "^3.0.3",
     "react": "17.0.1",
     "react-beforeunload": "^2.4.0",
     "react-clock": "^3.0.0",
@@ -27,13 +27,23 @@
     "react-toastify": "6.2.0"
   },
   "devDependencies": {
-    "eslint": "^7.18.0",
-    "node-sass": "^4.14.1",
-    "react-scripts": "^4.0.1"
+    "@babel/core": "^7.12.10",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/plugin-transform-runtime": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
+    "@babel/preset-react": "^7.12.10",
+    "babel-loader": "^8.2.2",
+    "css-loader": "^5.0.1",
+    "html-webpack-plugin": "^5.0.0-beta.5",
+    "sass": "^1.32.4",
+    "sass-loader": "^10.1.1",
+    "style-loader": "^2.0.0",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.15.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "webpack serve",
+    "build": "webpack",
     "chrome": "cp manifest/chrome.json build/manifest.json",
     "firefox": "cp manifest/firefox.json build/manifest.json",
     "opera": "cp manifest/opera.json build/manifest.json && cp manifest/background-opera.js build/"
diff --git a/src/components/modals/Feedback.jsx b/src/components/modals/Feedback.jsx
index 5cc99fdd..cb01a940 100644
--- a/src/components/modals/Feedback.jsx
+++ b/src/components/modals/Feedback.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
 
-const FeedbackModal = () => {
+export default function FeedbackModal(props) {
     return (
         <div className='feedback'>
           <h1>Give us feedback</h1>
-          <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
+          <span className='closeModal' onClick={props.modalClose}>&times;</span>
            <label>How would you rate your experience of this Mue Build?</label>
            <br/><br/>
            <label className='values'>0</label><input className='range' type='range' min='0' max='100' /><label className='values'>10</label>
@@ -20,6 +20,4 @@ const FeedbackModal = () => {
            <button>Submit</button>
        </div>
     );
-}
-
-export default FeedbackModal;
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/components/modals/Update.jsx b/src/components/modals/Update.jsx
index 5a2c2504..ad249295 100644
--- a/src/components/modals/Update.jsx
+++ b/src/components/modals/Update.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import * as Constants from '../../modules/constants';
 
 export default class Update extends React.PureComponent {
diff --git a/src/components/modals/Welcome.jsx b/src/components/modals/Welcome.jsx
index ba6faabd..836ad64b 100644
--- a/src/components/modals/Welcome.jsx
+++ b/src/components/modals/Welcome.jsx
@@ -1,9 +1,10 @@
 import React from 'react';
+
 import EmailIcon from '@material-ui/icons/Email';
 import TwitterIcon from '@material-ui/icons/Twitter';
 import ForumIcon from '@material-ui/icons/Forum';
 
-const WelcomeModal = (props) => {
+export default function WelcomeModal(props) {
   return (
     <div className='welcomeContent'>
         <span className='closeModal' onClick={props.modalClose}>&times;</span>
@@ -22,6 +23,4 @@ const WelcomeModal = (props) => {
         </div>
        </div>
   );
-}
-
-export default WelcomeModal;
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/components/modals/marketplace/Item.jsx b/src/components/modals/marketplace/Item.jsx
index a43a4506..388e9f48 100644
--- a/src/components/modals/marketplace/Item.jsx
+++ b/src/components/modals/marketplace/Item.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 
 export default class Item extends React.PureComponent {
diff --git a/src/components/modals/settings/Checkbox.jsx b/src/components/modals/settings/Checkbox.jsx
index ca64eb71..e98cd0c7 100644
--- a/src/components/modals/settings/Checkbox.jsx
+++ b/src/components/modals/settings/Checkbox.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
+
 import SettingsFunctions from '../../../modules/helpers/settings';
+
 import CheckboxUI from '@material-ui/core/Checkbox';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 
diff --git a/src/components/modals/settings/FileUpload.jsx b/src/components/modals/settings/FileUpload.jsx
index 46c9bb43..22e5c7c7 100644
--- a/src/components/modals/settings/FileUpload.jsx
+++ b/src/components/modals/settings/FileUpload.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { toast } from 'react-toastify';
 
 export default class FileUpload extends React.PureComponent {
@@ -16,7 +17,7 @@ export default class FileUpload extends React.PureComponent {
 
           reader.readAsDataURL(file);
         }
-        
+
         reader.addEventListener('load', (e) => this.props.loadFunction(e));
     };
   }
diff --git a/src/components/modals/settings/Section.jsx b/src/components/modals/settings/Section.jsx
index b05f7693..1abf5955 100644
--- a/src/components/modals/settings/Section.jsx
+++ b/src/components/modals/settings/Section.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
+
 import Slider from './Slider';
+
 import ExpandMore from '@material-ui/icons/ExpandMore';
 
 export default class Section extends React.PureComponent {
diff --git a/src/components/modals/settings/Slider.jsx b/src/components/modals/settings/Slider.jsx
index 887499b5..c0640b4e 100644
--- a/src/components/modals/settings/Slider.jsx
+++ b/src/components/modals/settings/Slider.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import SettingsFunctions from '../../../modules/helpers/settings';
 
 export default class Slider extends React.PureComponent {
@@ -11,7 +12,7 @@ export default class Slider extends React.PureComponent {
 
   handleChange(name) {
     SettingsFunctions.setItem(name);
-    
+
     this.setState({ 
       checked: (this.state.checked === true) ? false : true 
     });
diff --git a/src/components/modals/settings/sections/GreetingSettings.jsx b/src/components/modals/settings/sections/GreetingSettings.jsx
index 3f2e9f73..2bd449c2 100644
--- a/src/components/modals/settings/sections/GreetingSettings.jsx
+++ b/src/components/modals/settings/sections/GreetingSettings.jsx
@@ -1,6 +1,8 @@
 import React from 'react';
+
 import Section from '../Section';
 import Checkbox from '../Checkbox';
+
 import DatePicker from 'react-date-picker';
 import { toast } from 'react-toastify';
 import { Beforeunload } from 'react-beforeunload';
diff --git a/src/components/modals/settings/sections/LanguageSettings.jsx b/src/components/modals/settings/sections/LanguageSettings.jsx
index 5e4ab9e2..b84c78c7 100644
--- a/src/components/modals/settings/sections/LanguageSettings.jsx
+++ b/src/components/modals/settings/sections/LanguageSettings.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Dropdown from '../Dropdown';
 
-const LanguageSettings = (props) => {
+export default function LanguageSettings (props) {
   return (
     <div className='section'>
       <h4 htmlFor='language' className='nodropdown'>{props.language.language}</h4>
@@ -18,6 +18,4 @@ const LanguageSettings = (props) => {
       </Dropdown>
     </div>
   );
-}
-
-export default LanguageSettings;
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/components/modals/settings/sections/SearchSettings.jsx b/src/components/modals/settings/sections/SearchSettings.jsx
index 4cbe1299..febf93d5 100644
--- a/src/components/modals/settings/sections/SearchSettings.jsx
+++ b/src/components/modals/settings/sections/SearchSettings.jsx
@@ -1,6 +1,9 @@
 import React from 'react';
+
 import SettingsFunctions from '../../../../modules/helpers/settings';
+
 import { toast } from 'react-toastify';
+
 import Section from '../Section';
 import Dropdown from '../Dropdown';
 import Checkbox from '../Checkbox';
diff --git a/src/components/modals/tabs/Addons.jsx b/src/components/modals/tabs/Addons.jsx
index 3709a757..4a4e6b21 100644
--- a/src/components/modals/tabs/Addons.jsx
+++ b/src/components/modals/tabs/Addons.jsx
@@ -1,9 +1,12 @@
 import React from 'react';
+
 import LocalMallIcon from '@material-ui/icons/LocalMall';
-import { toast } from 'react-toastify';
 import Item from '../marketplace/Item';
 import Items from '../marketplace/Items';
 import FileUpload from '../settings/FileUpload';
+
+import { toast } from 'react-toastify';
+
 import MarketplaceFunctions from '../../../modules/helpers/marketplace';
 
 export default class Addons extends React.PureComponent {
@@ -58,7 +61,7 @@ export default class Addons extends React.PureComponent {
             document.getElementById('marketplace').style.display = 'block';
             document.getElementById('item').style.display = 'none';
         }
-        
+
         this.setState({ 
             button: this.buttons.uninstall 
         });
diff --git a/src/components/modals/tabs/Marketplace.jsx b/src/components/modals/tabs/Marketplace.jsx
index 3bd42cc0..bf43a6f7 100644
--- a/src/components/modals/tabs/Marketplace.jsx
+++ b/src/components/modals/tabs/Marketplace.jsx
@@ -1,12 +1,16 @@
 import React from 'react';
+
 import WifiOffIcon from '@material-ui/icons/WifiOff';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
-import { toast } from 'react-toastify';
 import Item from '../marketplace/Item';
-import MarketplaceFunctions from '../../../modules/helpers/marketplace';
-import * as Constants from '../../../modules/constants';
 import Items from '../marketplace/Items';
 
+import MarketplaceFunctions from '../../../modules/helpers/marketplace';
+
+import { toast } from 'react-toastify';
+
+import * as Constants from '../../../modules/constants';
+
 export default class Marketplace extends React.PureComponent {
   constructor(...args) {
     super(...args);
diff --git a/src/components/modals/tabs/Settings.jsx b/src/components/modals/tabs/Settings.jsx
index d5a660ba..c282392f 100644
--- a/src/components/modals/tabs/Settings.jsx
+++ b/src/components/modals/tabs/Settings.jsx
@@ -1,9 +1,11 @@
 import React from 'react';
+
 import SettingsFunctions from '../../../modules/helpers/settings';
 import Checkbox from '../settings/Checkbox';
 import Dropdown from '../settings/Dropdown';
 import Section from '../settings/Section';
 import FileUpload from '../settings/FileUpload';
+
 import { toast } from 'react-toastify';
 
 import BackgroundSettings from '../settings/sections/BackgroundSettings';
diff --git a/src/components/widgets/background/Background.jsx b/src/components/widgets/background/Background.jsx
index 5bb0eeb4..f609d8ce 100644
--- a/src/components/widgets/background/Background.jsx
+++ b/src/components/widgets/background/Background.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import * as Constants from '../../../modules/constants';
 
 import './scss/index.scss';
diff --git a/src/components/widgets/background/Favourite.jsx b/src/components/widgets/background/Favourite.jsx
index f3df9bf4..03fcb4dd 100644
--- a/src/components/widgets/background/Favourite.jsx
+++ b/src/components/widgets/background/Favourite.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import StarIcon from '@material-ui/icons/Star';
 import StarIcon2 from '@material-ui/icons/StarBorder';
 
diff --git a/src/components/widgets/background/Maximise.jsx b/src/components/widgets/background/Maximise.jsx
index 4538aed4..17070de2 100644
--- a/src/components/widgets/background/Maximise.jsx
+++ b/src/components/widgets/background/Maximise.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import FullscreenIcon from '@material-ui/icons/Fullscreen';
 
 export default class View extends React.PureComponent {
@@ -18,7 +19,7 @@ export default class View extends React.PureComponent {
 
     viewStuff() {
       const elements = ['#searchBar', '.navbar-container', '.clock', '.greeting', '.quotediv', 'time']; // elements to hide
-      
+
       elements.forEach((element) => {
           try {
               (this.state.hidden === false) ? document.querySelector(element).style.display = 'none' : document.querySelector(element).style.display = 'block';
diff --git a/src/components/widgets/background/PhotoInformation.jsx b/src/components/widgets/background/PhotoInformation.jsx
index 65eb8681..6fd151a6 100644
--- a/src/components/widgets/background/PhotoInformation.jsx
+++ b/src/components/widgets/background/PhotoInformation.jsx
@@ -5,7 +5,7 @@ import Camera from '@material-ui/icons/PhotoCamera';
 import Resolution from '@material-ui/icons/Crop';
 import Photographer from '@material-ui/icons/Person';
 
-const PhotoInformation = (props) => {
+export default function PhotoInformation(props) {
   return (
     <div className='photoInformation'>
       <h1 id='photographer'>{props.language.credit}</h1>
@@ -26,6 +26,4 @@ const PhotoInformation = (props) => {
       <span id='credit' style={{ 'display': 'none' }}></span>
     </div>
   );
-}
-
-export default PhotoInformation;
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/components/widgets/navbar/Notes.jsx b/src/components/widgets/navbar/Notes.jsx
index 083dc921..d2f04e0f 100644
--- a/src/components/widgets/navbar/Notes.jsx
+++ b/src/components/widgets/navbar/Notes.jsx
@@ -1,9 +1,11 @@
 import React from 'react';
+
 import TextareaAutosize from '@material-ui/core/TextareaAutosize';
 import CopyIcon from '@material-ui/icons/FileCopyRounded';
-import Pin from './Pin';
 import NotesIcon from '@material-ui/icons/AssignmentRounded';
 
+import Pin from './Pin';
+
 export default class Notes extends React.PureComponent {
     constructor(...args) {
         super(...args);
@@ -21,7 +23,7 @@ export default class Notes extends React.PureComponent {
 
     pin() {
         document.getElementById('noteContainer').classList.toggle('visibilityshow');
-        
+
         if (localStorage.getItem('notesPinned') === 'true') {
             localStorage.setItem('notesPinned', false);
         } else {
diff --git a/src/components/widgets/navbar/Pin.jsx b/src/components/widgets/navbar/Pin.jsx
index ac168787..bcc89bf1 100644
--- a/src/components/widgets/navbar/Pin.jsx
+++ b/src/components/widgets/navbar/Pin.jsx
@@ -16,13 +16,11 @@
 */
 import React from 'react';
 
-const Pin = () => {
+export default function Pin() {
     return (
         <svg xmlns='http://www.w3.org/2000/svg' enableBackground='new 0 0 24 24' viewBox='0 0 24 24' fill='black' width='18px' height='18px'>
           <g><rect fill='none' height='24' width='24'/></g>
           <g><path d='M16,9V4l1,0c0.55,0,1-0.45,1-1v0c0-0.55-0.45-1-1-1H7C6.45,2,6,2.45,6,3v0 c0,0.55,0.45,1,1,1l1,0v5c0,1.66-1.34,3-3,3h0v2h5.97v7l1,1l1-1v-7H19v-2h0C17.34,12,16,10.66,16,9z' fillRule='evenodd'/></g>
         </svg>
     );
-}
-
-export default Pin;
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/components/widgets/quote/Quote.jsx b/src/components/widgets/quote/Quote.jsx
index 6a9da3fe..f3da7d54 100644
--- a/src/components/widgets/quote/Quote.jsx
+++ b/src/components/widgets/quote/Quote.jsx
@@ -1,14 +1,16 @@
 import React from 'react';
+
 import FileCopy from '@material-ui/icons/FilterNone';
-import { toast } from 'react-toastify';
-import * as Constants from '../../../modules/constants';
 import TwitterIcon from '@material-ui/icons/Twitter';
 import StarIcon from '@material-ui/icons/Star';
 import StarIcon2 from '@material-ui/icons/StarBorder';
 
+import { toast } from 'react-toastify';
+
+import * as Constants from '../../../modules/constants';
+
 import './quote.scss';
 
-const quotes = require('./offline_quotes.json');
 
 export default class Quote extends React.PureComponent {
   constructor(...args) {
@@ -23,6 +25,8 @@ export default class Quote extends React.PureComponent {
   }
 
   doOffline() {
+    const quotes = require('./offline_quotes.json');
+
     const quote = quotes[Math.floor(Math.random() * quotes.length)]; // Get a random quote from our local package
     this.setState({
       quote: '"' + quote.quote + '"',
diff --git a/src/components/widgets/search/Search.jsx b/src/components/widgets/search/Search.jsx
index c1b9a357..19799331 100644
--- a/src/components/widgets/search/Search.jsx
+++ b/src/components/widgets/search/Search.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import SearchIcon from '@material-ui/icons/Search';
 import MicIcon from '@material-ui/icons/Mic';
 
@@ -33,7 +34,7 @@ export default class Search extends React.PureComponent {
 
     const setting = localStorage.getItem('searchEngine');
     const info = searchEngines.find(i => i.settingsName === setting);
-    
+
     if (info !== undefined) {
       url = info.url;
       if (info.query) query = info.query;
diff --git a/src/components/widgets/time/Clock.jsx b/src/components/widgets/time/Clock.jsx
index 3a903847..dc4b04e9 100644
--- a/src/components/widgets/time/Clock.jsx
+++ b/src/components/widgets/time/Clock.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import Analog from 'react-clock';
 
 import './clock.scss';
@@ -28,7 +29,7 @@ export default class Clock extends React.PureComponent {
       // Analog clock
       if (localStorage.getItem('analog') === 'true') {
         require('react-clock/dist/Clock.css'); // load analog clock css
-        
+
         this.setState({ 
           time: now 
         });
diff --git a/src/components/widgets/time/Date.jsx b/src/components/widgets/time/Date.jsx
index c302d779..9a91c4e0 100644
--- a/src/components/widgets/time/Date.jsx
+++ b/src/components/widgets/time/Date.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import dtf from '@eartharoid/dtf';
 
 export default class DateWidget extends React.PureComponent {
diff --git a/src/index.js b/src/index.js
index 5a6054a8..4f4e4ac8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,8 +6,8 @@ import App from './App';
 import './scss/index.scss';
 import 'react-toastify/dist/ReactToastify.css'; // the toast css is based on default so we need to import it
 
-import 'fontsource-lexend-deca/latin-400-normal.css';
-import 'fontsource-roboto/cyrillic-400-normal.css';
+import '@fontsource/lexend-deca/latin-400.css';
+import '@fontsource/roboto/cyrillic-400.css';
 
 ReactDOM.render(
     <App/>,
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 00000000..3ee09898
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,43 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+ 
+module.exports = {
+  entry: path.resolve(__dirname, './src/index.js'),
+  mode: 'production',
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: ['babel-loader']
+      },
+      {
+        test: /\.(scss|css)$/,
+        use: ['style-loader', 'css-loader', 'sass-loader'],
+      },
+      {
+        test: /\.(woff|woff2|svg)$/,
+        use: {
+          loader: 'url-loader',
+        }
+      }
+    ]
+  },
+  resolve: {
+    extensions: ['.js', '.jsx']
+  },
+  output: {
+    path: path.resolve(__dirname, './build'),
+    filename: 'bundle.js',
+  },
+  devServer: {
+    contentBase: path.resolve(__dirname, './build'),
+    open: true,
+    port: 3000
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, './public/index.html')
+    })
+  ]
+};
\ No newline at end of file