diff --git a/web/package-lock.json b/web/package-lock.json
index eb4d108339..866ef41b93 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -23,6 +23,9 @@
         "@babel/eslint-parser": "^7.13.14",
         "@babel/preset-env": "^7.5.4",
         "@babel/preset-react": "^7.0.0",
+        "@fontsource/lato": "^4.5.5",
+        "@fontsource/poppins": "^4.5.5",
+        "@fontsource/roboto-mono": "^4.5.5",
         "babel-loader": "^8.0.6",
         "chrome-remote-interface": "^0.31.0",
         "compression-webpack-plugin": "^9.0.0",
@@ -1674,6 +1677,24 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@fontsource/lato": {
+      "version": "4.5.5",
+      "resolved": "https://registry.npmjs.org/@fontsource/lato/-/lato-4.5.5.tgz",
+      "integrity": "sha512-0KVmVCq3wZnriKVdbY+n/ZLf7Vy+dQcqpcm8kaVX4QGd6uBTgH6YWLnM1L051TtjKlal2FiE6xc/BLw116a0gQ==",
+      "dev": true
+    },
+    "node_modules/@fontsource/poppins": {
+      "version": "4.5.5",
+      "resolved": "https://registry.npmjs.org/@fontsource/poppins/-/poppins-4.5.5.tgz",
+      "integrity": "sha512-fqRWOQDhfoJoxP98qwMQLvLcgOu13yib6rZjL5UqpurobIaWTweqzo95uOLOGBjEE0bMMAbfDMoFUTL8Byrdeg==",
+      "dev": true
+    },
+    "node_modules/@fontsource/roboto-mono": {
+      "version": "4.5.5",
+      "resolved": "https://registry.npmjs.org/@fontsource/roboto-mono/-/roboto-mono-4.5.5.tgz",
+      "integrity": "sha512-krIslwmFMjDHtbSVKZLC6+PM6dOvw26OTm7rE7CrniJ4q5Lbfffx67RAlDI3ee0LsG6gIJd/JXBeUm+RgUsPqg==",
+      "dev": true
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.5.0",
       "dev": true,
@@ -2002,7 +2023,6 @@
       "version": "7.4.1",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3901,17 +3921,6 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
-    "node_modules/espree/node_modules/acorn": {
-      "version": "7.4.1",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/espree/node_modules/eslint-visitor-keys": {
       "version": "1.3.0",
       "dev": true,
@@ -8242,6 +8251,24 @@
         }
       }
     },
+    "@fontsource/lato": {
+      "version": "4.5.5",
+      "resolved": "https://registry.npmjs.org/@fontsource/lato/-/lato-4.5.5.tgz",
+      "integrity": "sha512-0KVmVCq3wZnriKVdbY+n/ZLf7Vy+dQcqpcm8kaVX4QGd6uBTgH6YWLnM1L051TtjKlal2FiE6xc/BLw116a0gQ==",
+      "dev": true
+    },
+    "@fontsource/poppins": {
+      "version": "4.5.5",
+      "resolved": "https://registry.npmjs.org/@fontsource/poppins/-/poppins-4.5.5.tgz",
+      "integrity": "sha512-fqRWOQDhfoJoxP98qwMQLvLcgOu13yib6rZjL5UqpurobIaWTweqzo95uOLOGBjEE0bMMAbfDMoFUTL8Byrdeg==",
+      "dev": true
+    },
+    "@fontsource/roboto-mono": {
+      "version": "4.5.5",
+      "resolved": "https://registry.npmjs.org/@fontsource/roboto-mono/-/roboto-mono-4.5.5.tgz",
+      "integrity": "sha512-krIslwmFMjDHtbSVKZLC6+PM6dOvw26OTm7rE7CrniJ4q5Lbfffx67RAlDI3ee0LsG6gIJd/JXBeUm+RgUsPqg==",
+      "dev": true
+    },
     "@humanwhocodes/config-array": {
       "version": "0.5.0",
       "dev": true,
@@ -8486,8 +8513,7 @@
     },
     "acorn": {
       "version": "7.4.1",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "acorn-jsx": {
       "version": "5.3.2",
@@ -9640,10 +9666,6 @@
         "eslint-visitor-keys": "^1.3.0"
       },
       "dependencies": {
-        "acorn": {
-          "version": "7.4.1",
-          "dev": true
-        },
         "eslint-visitor-keys": {
           "version": "1.3.0",
           "dev": true
diff --git a/web/package.json b/web/package.json
index 12057d8c76..c1806b8856 100644
--- a/web/package.json
+++ b/web/package.json
@@ -15,6 +15,9 @@
     "@babel/eslint-parser": "^7.13.14",
     "@babel/preset-env": "^7.5.4",
     "@babel/preset-react": "^7.0.0",
+    "@fontsource/lato": "^4.5.5",
+    "@fontsource/poppins": "^4.5.5",
+    "@fontsource/roboto-mono": "^4.5.5",
     "babel-loader": "^8.0.6",
     "chrome-remote-interface": "^0.31.0",
     "compression-webpack-plugin": "^9.0.0",
@@ -50,9 +53,13 @@
   "dependencies": {
     "@patternfly/patternfly": "4.183.1",
     "@patternfly/react-core": "4.198.19",
+    "@patternfly/react-table": "^4.61.15",
+    "core-js": "^3.21.1",
+    "eos-ds": "^5.0.0",
+    "eos-icons-react": "^2.2.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "eos-ds": "^5.0.0",
-    "eos-icons-react": "^2.2.0"
+    "regenerator-runtime": "^0.13.9",
+    "svg-url-loader": "^7.1.1"
   }
 }
diff --git a/web/src/App.jsx b/web/src/App.jsx
index 108463e8cd..04fdfc1b54 100644
--- a/web/src/App.jsx
+++ b/web/src/App.jsx
@@ -32,7 +32,7 @@ import "@fontsource/lato/700.css";
 import "@fontsource/poppins/300.css";
 import "@fontsource/poppins/500.css";
 import "@fontsource/roboto-mono/400.css";
-import "./app.scss";
+// import "./app.scss";
 
 function App() {
   const {
diff --git a/web/src/Layout.jsx b/web/src/Layout.jsx
index b5ea3d9a78..462e960691 100644
--- a/web/src/Layout.jsx
+++ b/web/src/Layout.jsx
@@ -21,7 +21,7 @@
 
 import React from "react";
 
-import "./layout.scss";
+// import "./layout.scss";
 import logo from "./assets/suse-horizontal-logo.svg";
 
 import About from "./About";
diff --git a/web/index.html b/web/src/index.html
similarity index 59%
rename from web/index.html
rename to web/src/index.html
index 064a1ecfa6..1eb122c4c8 100644
--- a/web/index.html
+++ b/web/src/index.html
@@ -2,12 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="stylesheet" href="index.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>D-Installer</title>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <script type="module" src="./index.js"></script>
   </body>
 </html>
diff --git a/web/src/main.jsx b/web/src/index.js
similarity index 95%
rename from web/src/main.jsx
rename to web/src/index.js
index e055ca7a75..c6774bb419 100644
--- a/web/src/main.jsx
+++ b/web/src/index.js
@@ -21,6 +21,8 @@
 
 import React, { StrictMode } from "react";
 import ReactDOM from "react-dom";
+import "core-js/stable";
+import "regenerator-runtime/runtime";
 
 import "./patternfly.scss";
 
diff --git a/web/src/patternfly.scss b/web/src/patternfly.scss
index 065e8534c6..285efe8b9a 100644
--- a/web/src/patternfly.scss
+++ b/web/src/patternfly.scss
@@ -1,9 +1,9 @@
 // Import PatternFly CSS
-@use "@patternfly/react-core/dist/styles/base.css";
-@use "@patternfly/patternfly/patternfly.css";
+@import "@patternfly/react-core/dist/styles/base.css";
+@import "@patternfly/patternfly/patternfly.css";
 
 // See https://github.com/patternfly/patternfly/pull/4297
-@use "@patternfly/react-styles/css/utilities/Sizing/sizing.css";
+@import "@patternfly/react-styles/css/utilities/Sizing/sizing.css";
 
 // PatternFly overrides for using CSS Logical Properties
 .pf-l-split.pf-m-gutter > :not(:last-child) {
diff --git a/web/webpack.config.js b/web/webpack.config.js
index 63e5dc6365..c60c4cd4f0 100644
--- a/web/webpack.config.js
+++ b/web/webpack.config.js
@@ -49,6 +49,7 @@ module.exports = {
     resolve: {
         modules: [ "node_modules", path.resolve(__dirname, 'src/lib') ],
         alias: { 'font-awesome': 'font-awesome-sass/assets/stylesheets' },
+        extensions: ['', '.js', '.json', '.jsx']
     },
     resolveLoader: {
         modules: [ "node_modules", path.resolve(__dirname, 'src/lib') ],
@@ -148,6 +149,12 @@ module.exports = {
                     },
                 ]
             },
+            {
+              test: /\.svg/,
+              use: {
+                loader: "svg-url-loader",
+              },
+            }
         ]
     },
     plugins: plugins