diff --git a/frontend/src/app.js b/frontend/src/app.js
index 88056f735..acbc4702a 100644
--- a/frontend/src/app.js
+++ b/frontend/src/app.js
@@ -7,10 +7,7 @@ import { isValidUtility } from './core/utility';
 // load window.fetch polyfill
 import 'whatwg-fetch';
 
-import '@fortawesome/fontawesome-pro/css/all.css';
-
-import 'typeface-roboto/index.css';
-import 'typeface-source-sans-pro/index.css';
+import './app.scss';
 
 export class App {
   httpClient = new HttpClient();
diff --git a/frontend/src/app.scss b/frontend/src/app.scss
new file mode 100644
index 000000000..5eeb75ecb
--- /dev/null
+++ b/frontend/src/app.scss
@@ -0,0 +1,11 @@
+$fa-font-path: "~@fortawesome/fontawesome-pro/webfonts";
+
+@import "@fortawesome/fontawesome-pro/scss/fontawesome.scss";
+@import "@fortawesome/fontawesome-pro/scss/solid.scss";
+
+
+$roboto: "Roboto";
+@import "~typeface-roboto/index.css";
+
+$source-sans: "Source Sans Pro";
+@import "~typeface-source-sans-pro/index.css";
diff --git a/records.json b/records.json
index c8c6aed06..c3e4f6812 100644
--- a/records.json
+++ b/records.json
@@ -527,5 +527,18 @@
         "usedIds": []
       }
     }
+  ],
+  "mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-1!node_modules/postcss-loader/src/index.js??ref--6-2!node_modules/sass-loader/dist/cjs.js??ref--6-3!frontend/src/app.scss": [
+    {
+      "modules": {
+        "byIdentifier": {},
+        "usedIds": {}
+      },
+      "chunks": {
+        "byName": {},
+        "bySource": {},
+        "usedIds": []
+      }
+    }
   ]
 }
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 96b5db285..3a93a5bbe 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -52,7 +52,7 @@ module.exports = {
         use: [ MiniCssExtractPlugin.loader,
                { loader: 'css-loader', options: { sourceMap: true }},
                { loader: 'postcss-loader', options: { sourceMap: true }},
-               { loader: 'sass-loader', options: { sourceMap: true }}
+               { loader: 'sass-loader', options: { sourceMap: true, includePaths: [path.resolve(__dirname, 'node_modules')] }}
              ]
       },
       {
@@ -131,7 +131,9 @@ module.exports = {
       minChunks: 1,
       cacheGroups: {
         vendor: {
-          test: /[\\/]node_modules[\\/]/,
+          test(module, chunk) {
+            return module.context.match(/[\\/]node_modules[\\/]/);
+          },
           name(module, chunks, cacheGroupKey) {
             const moduleFileName = module.identifier().split('/').reduceRight(item => item);
             const allChunksNames = chunks.map((item) => item.name).join('~');