diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 00000000..6288e7f0
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  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 42a67491..02d84c03 100644
--- a/package.json
+++ b/package.json
@@ -33,19 +33,20 @@
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.10",
     "babel-loader": "^8.2.2",
+    "copy-webpack-plugin": "^7.0.0",
     "css-loader": "^5.0.1",
+    "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.0.0-beta.5",
+    "mini-css-extract-plugin": "^1.3.4",
     "sass": "^1.32.4",
     "sass-loader": "^10.1.1",
-    "style-loader": "^2.0.0",
-    "url-loader": "^4.1.1",
     "webpack": "^5.15.0",
     "webpack-cli": "^4.3.1",
     "webpack-dev-server": "^3.11.2"
   },
   "scripts": {
     "start": "webpack serve",
-    "build": "webpack",
+    "build": "rm -rf build && webpack --mode=production",
     "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/widgets/background/Background.jsx b/src/components/widgets/background/Background.jsx
index f609d8ce..a27315fc 100644
--- a/src/components/widgets/background/Background.jsx
+++ b/src/components/widgets/background/Background.jsx
@@ -68,7 +68,7 @@ export default class Background extends React.PureComponent {
       Math.floor(Math.random() * offlineImages[photographer].photo.length)
     ]; // Select a random image
 
-    const url = `../offline-images/${randomImage}.jpg`;
+    const url = `./offline-images/${randomImage}.jpg`;
 
     this.setBackground(url);
     this.setCredit(photographer);
diff --git a/webpack.config.js b/webpack.config.js
index 3ee09898..dea5e512 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,24 +1,34 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
- 
+const CopyPlugin = require('copy-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
 module.exports = {
   entry: path.resolve(__dirname, './src/index.js'),
-  mode: 'production',
+  mode: 'development',
   module: {
-    rules: [
-      {
+    rules: [{
         test: /\.(js|jsx)$/,
         exclude: /node_modules/,
         use: ['babel-loader']
       },
       {
-        test: /\.(scss|css)$/,
-        use: ['style-loader', 'css-loader', 'sass-loader'],
+        test: /\.(sa|sc|c)ss$/,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              publicPath: ''
+            },
+          },
+          'css-loader',
+          'sass-loader',
+        ],
       },
       {
         test: /\.(woff|woff2|svg)$/,
         use: {
-          loader: 'url-loader',
+          loader: 'file-loader',
         }
       }
     ]
@@ -38,6 +48,21 @@ module.exports = {
   plugins: [
     new HtmlWebpackPlugin({
       template: path.resolve(__dirname, './public/index.html')
+    }),
+    new CopyPlugin({
+      patterns: [{
+          from: 'public/icons',
+          to: 'icons'
+        },
+        {
+          from: 'public/offline-images',
+          to: 'offline-images'
+        },
+      ],
+    }),
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+      chunkFilename: '[id].css',
     })
   ]
 };
\ No newline at end of file