diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index d9c9a94b2630..4117868d33ae 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -2315,6 +2315,12 @@
         "@types/node": "*"
       }
     },
+    "@types/html-minifier-terser": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
+      "integrity": "sha512-giAlZwstKbmvMk1OO7WXSj4OZ0keXAcl2TQq4LWHiiPH2ByaH7WeUzng+Qej8UPxxv+8lRTuouo0iaNDBuzIBA==",
+      "dev": true
+    },
     "@types/http-proxy": {
       "version": "1.17.6",
       "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.6.tgz",
@@ -2770,6 +2776,12 @@
         "webpack-merge": "^4.2.2"
       },
       "dependencies": {
+        "@vue/preload-webpack-plugin": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz",
+          "integrity": "sha512-LIZMuJk38pk9U9Ur4YzHjlIyMuxPlACdBIHH9/nGYVTsaGKOSnSuELiE8vS9wa+dJpIYspYUOqk+L1Q4pgHQHQ==",
+          "dev": true
+        },
         "ansi-regex": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
@@ -2785,6 +2797,12 @@
             "color-convert": "^2.0.1"
           }
         },
+        "big.js": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz",
+          "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==",
+          "dev": true
+        },
         "cliui": {
           "version": "6.0.0",
           "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
@@ -2811,12 +2829,51 @@
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
           "dev": true
         },
+        "emojis-list": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
+          "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=",
+          "dev": true
+        },
+        "html-webpack-plugin": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz",
+          "integrity": "sha1-sBq71yOsqqeze2r0SS69oD2d03s=",
+          "dev": true,
+          "requires": {
+            "html-minifier": "^3.2.3",
+            "loader-utils": "^0.2.16",
+            "lodash": "^4.17.3",
+            "pretty-error": "^2.0.2",
+            "tapable": "^1.0.0",
+            "toposort": "^1.0.0",
+            "util.promisify": "1.0.0"
+          }
+        },
         "is-fullwidth-code-point": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
           "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
           "dev": true
         },
+        "json5": {
+          "version": "0.5.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
+          "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
+          "dev": true
+        },
+        "loader-utils": {
+          "version": "0.2.17",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz",
+          "integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=",
+          "dev": true,
+          "requires": {
+            "big.js": "^3.1.3",
+            "emojis-list": "^2.0.0",
+            "json5": "^0.5.0",
+            "object-assign": "^4.0.1"
+          }
+        },
         "string-width": {
           "version": "4.2.2",
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
@@ -2837,6 +2894,16 @@
             "ansi-regex": "^5.0.0"
           }
         },
+        "util.promisify": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.0.tgz",
+          "integrity": "sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==",
+          "dev": true,
+          "requires": {
+            "define-properties": "^1.1.2",
+            "object.getownpropertydescriptors": "^2.0.3"
+          }
+        },
         "wrap-ansi": {
           "version": "6.2.0",
           "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
@@ -2934,9 +3001,9 @@
       }
     },
     "@vue/preload-webpack-plugin": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz",
-      "integrity": "sha512-LIZMuJk38pk9U9Ur4YzHjlIyMuxPlACdBIHH9/nGYVTsaGKOSnSuELiE8vS9wa+dJpIYspYUOqk+L1Q4pgHQHQ==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@vue/preload-webpack-plugin/-/preload-webpack-plugin-2.0.0.tgz",
+      "integrity": "sha512-RoorRB50WehYbsiWu497q8egZBYlrvOo9KBUG41uth4O023Cbs+7POLm9uw2CAiViBAIhvpw1Y4w4i+MZxOfXw==",
       "dev": true
     },
     "@vue/web-component-wrapper": {
@@ -4063,13 +4130,21 @@
       "dev": true
     },
     "camel-case": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-3.0.0.tgz",
-      "integrity": "sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
+      "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
       "dev": true,
       "requires": {
-        "no-case": "^2.2.0",
-        "upper-case": "^1.1.1"
+        "pascal-case": "^3.1.2",
+        "tslib": "^2.0.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+          "dev": true
+        }
       }
     },
     "camelcase": {
@@ -4549,9 +4624,9 @@
       }
     },
     "commander": {
-      "version": "2.17.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz",
-      "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
       "dev": true
     },
     "common-tags": {
@@ -5598,6 +5673,24 @@
         "domelementtype": "1"
       }
     },
+    "dot-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+      "dev": true,
+      "requires": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+          "dev": true
+        }
+      }
+    },
     "dot-object": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/dot-object/-/dot-object-1.9.0.tgz",
@@ -7036,6 +7129,63 @@
         "param-case": "2.1.x",
         "relateurl": "0.2.x",
         "uglify-js": "3.4.x"
+      },
+      "dependencies": {
+        "camel-case": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-3.0.0.tgz",
+          "integrity": "sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=",
+          "dev": true,
+          "requires": {
+            "no-case": "^2.2.0",
+            "upper-case": "^1.1.1"
+          }
+        },
+        "commander": {
+          "version": "2.17.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz",
+          "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==",
+          "dev": true
+        },
+        "lower-case": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz",
+          "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw=",
+          "dev": true
+        },
+        "no-case": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz",
+          "integrity": "sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==",
+          "dev": true,
+          "requires": {
+            "lower-case": "^1.1.1"
+          }
+        },
+        "param-case": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/param-case/-/param-case-2.1.1.tgz",
+          "integrity": "sha1-35T9jPZTHs915r75oIWPvHK+Ikc=",
+          "dev": true,
+          "requires": {
+            "no-case": "^2.2.0"
+          }
+        }
+      }
+    },
+    "html-minifier-terser": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
+      "integrity": "sha512-ZPr5MNObqnV/T9akshPKbVgyOqLmy+Bxo7juKCfTfnjNniTAMdy4hz21YQqoofMBJD2kdREaqPPdThoR78Tgxg==",
+      "dev": true,
+      "requires": {
+        "camel-case": "^4.1.1",
+        "clean-css": "^4.2.3",
+        "commander": "^4.1.1",
+        "he": "^1.2.0",
+        "param-case": "^3.0.3",
+        "relateurl": "^0.2.7",
+        "terser": "^4.6.3"
       }
     },
     "html-tags": {
@@ -7045,59 +7195,23 @@
       "dev": true
     },
     "html-webpack-plugin": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz",
-      "integrity": "sha1-sBq71yOsqqeze2r0SS69oD2d03s=",
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.3.1.tgz",
+      "integrity": "sha512-rZsVvPXUYFyME0cuGkyOHfx9hmkFa4pWfxY/mdY38PsBEaVNsRoA+Id+8z6DBDgyv3zaw6XQszdF8HLwfQvcdQ==",
       "dev": true,
       "requires": {
-        "html-minifier": "^3.2.3",
-        "loader-utils": "^0.2.16",
-        "lodash": "^4.17.3",
-        "pretty-error": "^2.0.2",
-        "tapable": "^1.0.0",
-        "toposort": "^1.0.0",
-        "util.promisify": "1.0.0"
+        "@types/html-minifier-terser": "^5.0.0",
+        "html-minifier-terser": "^5.0.1",
+        "lodash": "^4.17.20",
+        "pretty-error": "^2.1.1",
+        "tapable": "^2.0.0"
       },
       "dependencies": {
-        "big.js": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz",
-          "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==",
+        "tapable": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.0.tgz",
+          "integrity": "sha512-FBk4IesMV1rBxX2tfiK8RAmogtWn53puLOQlvO8XuwlgxcYbP4mVPS9Ph4aeamSyyVjOl24aYWAuc8U5kCVwMw==",
           "dev": true
-        },
-        "emojis-list": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
-          "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=",
-          "dev": true
-        },
-        "json5": {
-          "version": "0.5.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
-          "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
-          "dev": true
-        },
-        "loader-utils": {
-          "version": "0.2.17",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz",
-          "integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=",
-          "dev": true,
-          "requires": {
-            "big.js": "^3.1.3",
-            "emojis-list": "^2.0.0",
-            "json5": "^0.5.0",
-            "object-assign": "^4.0.1"
-          }
-        },
-        "util.promisify": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.0.tgz",
-          "integrity": "sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==",
-          "dev": true,
-          "requires": {
-            "define-properties": "^1.1.2",
-            "object.getownpropertydescriptors": "^2.0.3"
-          }
         }
       }
     },
@@ -8311,10 +8425,21 @@
       "dev": true
     },
     "lower-case": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz",
-      "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw=",
-      "dev": true
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "dev": true,
+      "requires": {
+        "tslib": "^2.0.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+          "dev": true
+        }
+      }
     },
     "lru-cache": {
       "version": "5.1.1",
@@ -8789,12 +8914,21 @@
       "dev": true
     },
     "no-case": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz",
-      "integrity": "sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
       "dev": true,
       "requires": {
-        "lower-case": "^1.1.1"
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+          "dev": true
+        }
       }
     },
     "node-forge": {
@@ -9333,12 +9467,21 @@
       }
     },
     "param-case": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/param-case/-/param-case-2.1.1.tgz",
-      "integrity": "sha1-35T9jPZTHs915r75oIWPvHK+Ikc=",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
+      "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
       "dev": true,
       "requires": {
-        "no-case": "^2.2.0"
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+          "dev": true
+        }
       }
     },
     "parent-module": {
@@ -9410,6 +9553,24 @@
       "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
       "dev": true
     },
+    "pascal-case": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
+      "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
+      "dev": true,
+      "requires": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+          "dev": true
+        }
+      }
+    },
     "pascalcase": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
@@ -10160,6 +10321,16 @@
       "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
       "dev": true
     },
+    "preload-webpack-plugin": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/preload-webpack-plugin/-/preload-webpack-plugin-2.3.0.tgz",
+      "integrity": "sha512-TWpYf7QqmW9lxXIQcPAPkfO+G6Zf/WrSZtqx864IdUtqZ+QGESfOGbGSMlBBt96sYEE+cZLF2GLrxbmLyieX6g==",
+      "dev": true,
+      "requires": {
+        "object-assign": "^4.1.1",
+        "object.values": "^1.0.4"
+      }
+    },
     "prelude-ls": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 5fe3fd57005e..ff54030ed86d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,7 +14,6 @@
     "core-js": "^3.14.0",
     "fuse.js": "^6.4.6",
     "register-service-worker": "^1.7.1",
-    "typeface-roboto": "^1.1.13",
     "v-jsoneditor": "^1.4.4",
     "vue": "^2.6.14",
     "vue-i18n": "^8.24.1",
@@ -25,6 +24,7 @@
     "vuex-persistedstate": "^4.0.0-beta.3"
   },
   "devDependencies": {
+    "typeface-roboto": "^1.1.13",
     "@intlify/vue-i18n-loader": "^1.1.0",
     "@mdi/font": "^5.9.55",
     "@mdi/js": "^5.9.55",
@@ -32,9 +32,12 @@
     "@vue/cli-plugin-eslint": "^4.5.13",
     "@vue/cli-plugin-pwa": "~4.5.0",
     "@vue/cli-service": "^4.5.13",
+    "@vue/preload-webpack-plugin": "^2.0.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "html-webpack-plugin": "^5.3.1",
+    "preload-webpack-plugin": "^2.3.0",
     "sass": "^1.34.1",
     "sass-loader": "^8.0.2",
     "vue-cli-plugin-i18n": "~1.0.1",
@@ -69,4 +72,4 @@
     "last 2 versions",
     "not dead"
   ]
-}
+}
\ No newline at end of file
diff --git a/frontend/public/index.html b/frontend/public/index.html
index 014c9fa49efe..fa926f2b96ea 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -8,8 +8,6 @@
   <meta name="description" content="Mealie is a self hosted recipe manager and meal planner.">
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
   <title> Mealie </title>
-  <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"> -->
-  <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css"> -->
 </head>
 
 <body>
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 73f8f0f43a10..b882f4d1806b 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -136,3 +136,4 @@ export default {
   scrollbar-color: transparent transparent;
 }
 </style>
+
diff --git a/frontend/src/components/UI/CardSection.vue b/frontend/src/components/UI/CardSection.vue
index 4331c5395a51..35835b31c8e6 100644
--- a/frontend/src/components/UI/CardSection.vue
+++ b/frontend/src/components/UI/CardSection.vue
@@ -16,7 +16,7 @@
         <template v-slot:activator="{ on, attrs }">
           <v-btn text :icon="$vuetify.breakpoint.xsOnly" v-bind="attrs" v-on="on" :loading="sortLoading">
             <v-icon :left="!$vuetify.breakpoint.xsOnly">
-              {{ $globals.icons.diceMultiple }}
+              {{ $globals.icons.sort }}
             </v-icon>
             {{ $vuetify.breakpoint.xsOnly ? null : $t("general.sort") }}
           </v-btn>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index d5db944c4f39..e579b1295673 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -6,7 +6,6 @@ import VueRouter from "vue-router";
 import { router } from "./routes";
 import { globals } from "@/utils/globals";
 import i18n from "./i18n";
-// import "@mdi/font/css/materialdesignicons.css";
 import "typeface-roboto/index.css";
 import "./registerServiceWorker";
 
diff --git a/frontend/src/pages/Admin/Profile/ProfileThemeCard.vue b/frontend/src/pages/Admin/Profile/ProfileThemeCard.vue
index 31c37b3d42e1..b8078d09a8e8 100644
--- a/frontend/src/pages/Admin/Profile/ProfileThemeCard.vue
+++ b/frontend/src/pages/Admin/Profile/ProfileThemeCard.vue
@@ -107,13 +107,17 @@
 </template>
 
 <script>
-import VJsoneditor from "v-jsoneditor";
 import { api } from "@/api";
 import ColorPickerDialog from "@/components/FormHelpers/ColorPickerDialog";
 import BaseDialog from "@/components/UI/Dialogs/BaseDialog";
 import StatCard from "@/components/UI/StatCard";
 export default {
-  components: { StatCard, BaseDialog, ColorPickerDialog, VJsoneditor },
+  components: {
+    StatCard,
+    BaseDialog,
+    ColorPickerDialog,
+    VJsoneditor: () => import(/* webpackChunkName: "json-editor" */ "v-jsoneditor"),
+  },
   data() {
     return {
       jsonEditor: false,
diff --git a/frontend/src/pages/Recipe/NewRecipe.vue b/frontend/src/pages/Recipe/NewRecipe.vue
index 88594f275e1b..f26881e39230 100644
--- a/frontend/src/pages/Recipe/NewRecipe.vue
+++ b/frontend/src/pages/Recipe/NewRecipe.vue
@@ -28,11 +28,10 @@
 import { api } from "@/api";
 
 import RecipeEditor from "@/components/Recipe/RecipeEditor";
-import VJsoneditor from "v-jsoneditor";
 import RecipePageActionMenu from "@/components/Recipe/RecipePageActionMenu";
 export default {
   components: {
-    VJsoneditor,
+    VJsoneditor: () => import(/* webpackChunkName: "json-editor" */ "v-jsoneditor"),
     RecipeEditor,
     RecipePageActionMenu,
   },
diff --git a/frontend/src/pages/Recipe/ScraperDebugger.vue b/frontend/src/pages/Recipe/ScraperDebugger.vue
index b6cb17b59a2f..68ca3073abb8 100644
--- a/frontend/src/pages/Recipe/ScraperDebugger.vue
+++ b/frontend/src/pages/Recipe/ScraperDebugger.vue
@@ -3,7 +3,7 @@
     <v-text-field v-model="testUrl" outlined single-line label="Recipe Url"> </v-text-field>
     <div class="d-flex">
       <v-btn class="mt-0 ml-auto" color="info" @click="getTestData">
-        <v-icon left> {{ $globals.icons.testTube}} </v-icon>
+        <v-icon left> {{ $globals.icons.testTube }} </v-icon>
         Test Scrape
       </v-btn>
     </div>
@@ -12,11 +12,10 @@
 </template>
 
 <script>
-import VJsoneditor from "v-jsoneditor";
 import { api } from "@/api";
 export default {
   components: {
-    VJsoneditor,
+    VJsoneditor: () => import(/* webpackChunkName: "json-editor" */ "v-jsoneditor"),
   },
   data() {
     return {
diff --git a/frontend/src/pages/Recipe/ViewRecipe.vue b/frontend/src/pages/Recipe/ViewRecipe.vue
index b0277dbff595..37b3f6b70e14 100644
--- a/frontend/src/pages/Recipe/ViewRecipe.vue
+++ b/frontend/src/pages/Recipe/ViewRecipe.vue
@@ -70,7 +70,6 @@
 import RecipePageActionMenu from "@/components/Recipe/RecipePageActionMenu.vue";
 import { api } from "@/api";
 import FavoriteBadge from "@/components/Recipe/FavoriteBadge";
-import VJsoneditor from "v-jsoneditor";
 import RecipeViewer from "@/components/Recipe/RecipeViewer";
 import PrintView from "@/components/Recipe/PrintView";
 import RecipeEditor from "@/components/Recipe/RecipeEditor";
@@ -82,7 +81,7 @@ import CommentsSection from "@/components/Recipe/CommentSection";
 
 export default {
   components: {
-    VJsoneditor,
+    VJsoneditor: () => import(/* webpackChunkName: "json-editor" */ "v-jsoneditor"),
     RecipeViewer,
     RecipeEditor,
     RecipeTimeCard,
diff --git a/frontend/src/routes/admin.js b/frontend/src/routes/admin.js
index 716c2236cd26..4f580245d0ed 100644
--- a/frontend/src/routes/admin.js
+++ b/frontend/src/routes/admin.js
@@ -1,11 +1,11 @@
-const Admin = () => import("@/pages/Admin");
-const Migration = () => import("@/pages/Admin/Migration");
-const Profile = () => import("@/pages/Admin/Profile");
-const ManageUsers = () => import("@/pages/Admin/ManageUsers");
-const Settings = () => import("@/pages/Admin/Settings");
-const About = () => import("@/pages/Admin/About");
-const ToolBox = () => import("@/pages/Admin/ToolBox");
-const Dashboard = () => import("@/pages/Admin/Dashboard");
+const Admin = () => import(/* webpackChunkName: "admin-pages" */ "@/pages/Admin");
+const Migration = () => import(/* webpackChunkName: "admin-pages" */ "@/pages/Admin/Migration");
+const Profile = () => import(/* webpackChunkName: "admin-pages" */ "@/pages/Admin/Profile");
+const ManageUsers = () => import(/* webpackChunkName: "admin-pages" */ "@/pages/Admin/ManageUsers");
+const Settings = () => import(/* webpackChunkName: "admin-pages" */ "@/pages/Admin/Settings");
+const About = () => import(/* webpackChunkName: "admin-pages" */ "@/pages/Admin/About");
+const ToolBox = () => import(/* webpackChunkName: "admin-pages" */ "@/pages/Admin/ToolBox");
+const Dashboard = () => import(/* webpackChunkName: "admin-pages" */ "@/pages/Admin/Dashboard");
 import { store } from "../store";
 
 export const adminRoutes = {
diff --git a/frontend/src/routes/recipes.js b/frontend/src/routes/recipes.js
index 9732bb23d007..e2e3967aac2a 100644
--- a/frontend/src/routes/recipes.js
+++ b/frontend/src/routes/recipes.js
@@ -1,5 +1,5 @@
-const ViewRecipe = () => import("@/pages/Recipe/ViewRecipe");
-const NewRecipe = () => import("@/pages/Recipe/NewRecipe");
+const ViewRecipe = () => import(/* webpackChunkName: "recipe-page" */ "@/pages/Recipe/ViewRecipe");
+const NewRecipe = () => import(/* webpackChunkName: "recipe-page" */ "@/pages/Recipe/NewRecipe");
 const ScraperDebugger = () => import("@/pages/Recipe/ScraperDebugger");
 const CustomPage = () => import("@/pages/Recipes/CustomPage");
 const AllRecipes = () => import("@/pages/Recipes/AllRecipes");
diff --git a/frontend/vue.config.js b/frontend/vue.config.js
index eb95bcb20358..442baa0130e5 100644
--- a/frontend/vue.config.js
+++ b/frontend/vue.config.js
@@ -1,5 +1,7 @@
 const path = require("path");
 const manifestJSON = require("./public/manifest.json");
+const PreloadWebpackPlugin = require("preload-webpack-plugin");
+
 module.exports = {
   transpileDependencies: ["vuetify"],
   publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
@@ -28,6 +30,7 @@ module.exports = {
       alias: {
         "@": path.resolve("src"),
       },
+      plugins: [new PreloadWebpackPlugin({})],
     },
   },
   pwa: {