diff --git a/src/Frontend/package-lock.json b/src/Frontend/package-lock.json
index db86a45..f9d4950 100644
--- a/src/Frontend/package-lock.json
+++ b/src/Frontend/package-lock.json
@@ -9,12 +9,12 @@
       "version": "0.0.1",
       "dependencies": {
         "@quasar/extras": "^1.0.0",
-        "quasar": "^2.6.0",
+        "quasar": "^2.17.0",
         "vue": "^3.0.0",
         "vue-router": "^4.0.0"
       },
       "devDependencies": {
-        "@quasar/app-vite": "^1.0.0",
+        "@quasar/app-vite": "^1.10.1",
         "@types/node": "^12.20.21",
         "@typescript-eslint/eslint-plugin": "^5.10.0",
         "@typescript-eslint/parser": "^5.10.0",
@@ -244,10 +244,296 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@parcel/watcher": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.4.1.tgz",
+      "integrity": "sha512-HNjmfLQEVRZmHRET336f20H/8kOozUGwk7yajvsonjNxbj2wBTK1WsQuHkD5yYh9RxFGL2EyDHryOihOwUoKDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "detect-libc": "^1.0.3",
+        "is-glob": "^4.0.3",
+        "micromatch": "^4.0.5",
+        "node-addon-api": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.4.1",
+        "@parcel/watcher-darwin-arm64": "2.4.1",
+        "@parcel/watcher-darwin-x64": "2.4.1",
+        "@parcel/watcher-freebsd-x64": "2.4.1",
+        "@parcel/watcher-linux-arm-glibc": "2.4.1",
+        "@parcel/watcher-linux-arm64-glibc": "2.4.1",
+        "@parcel/watcher-linux-arm64-musl": "2.4.1",
+        "@parcel/watcher-linux-x64-glibc": "2.4.1",
+        "@parcel/watcher-linux-x64-musl": "2.4.1",
+        "@parcel/watcher-win32-arm64": "2.4.1",
+        "@parcel/watcher-win32-ia32": "2.4.1",
+        "@parcel/watcher-win32-x64": "2.4.1"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.4.1.tgz",
+      "integrity": "sha512-LOi/WTbbh3aTn2RYddrO8pnapixAziFl6SMxHM69r3tvdSm94JtCenaKgk1GRg5FJ5wpMCpHeW+7yqPlvZv7kg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.4.1.tgz",
+      "integrity": "sha512-ln41eihm5YXIY043vBrrHfn94SIBlqOWmoROhsMVTSXGh0QahKGy77tfEywQ7v3NywyxBBkGIfrWRHm0hsKtzA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.4.1.tgz",
+      "integrity": "sha512-yrw81BRLjjtHyDu7J61oPuSoeYWR3lDElcPGJyOvIXmor6DEo7/G2u1o7I38cwlcoBHQFULqF6nesIX3tsEXMg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.4.1.tgz",
+      "integrity": "sha512-TJa3Pex/gX3CWIx/Co8k+ykNdDCLx+TuZj3f3h7eOjgpdKM+Mnix37RYsYU4LHhiYJz3DK5nFCCra81p6g050w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.4.1.tgz",
+      "integrity": "sha512-4rVYDlsMEYfa537BRXxJ5UF4ddNwnr2/1O4MHM5PjI9cvV2qymvhwZSFgXqbS8YoTk5i/JR0L0JDs69BUn45YA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.4.1.tgz",
+      "integrity": "sha512-BJ7mH985OADVLpbrzCLgrJ3TOpiZggE9FMblfO65PlOCdG++xJpKUJ0Aol74ZUIYfb8WsRlUdgrZxKkz3zXWYA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.4.1.tgz",
+      "integrity": "sha512-p4Xb7JGq3MLgAfYhslU2SjoV9G0kI0Xry0kuxeG/41UfpjHGOhv7UoUDAz/jb1u2elbhazy4rRBL8PegPJFBhA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.4.1.tgz",
+      "integrity": "sha512-s9O3fByZ/2pyYDPoLM6zt92yu6P4E39a03zvO0qCHOTjxmt3GHRMLuRZEWhWLASTMSrrnVNWdVI/+pUElJBBBg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.4.1.tgz",
+      "integrity": "sha512-L2nZTYR1myLNST0O632g0Dx9LyMNHrn6TOt76sYxWLdff3cB22/GZX2UPtJnaqQPdCRoszoY5rcOj4oMTtp5fQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.4.1.tgz",
+      "integrity": "sha512-Uq2BPp5GWhrq/lcuItCHoqxjULU1QYEcyjSO5jqqOK8RNFDBQnenMMx4gAl3v8GiWa59E9+uDM7yZ6LxwUIfRg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.4.1.tgz",
+      "integrity": "sha512-maNRit5QQV2kgHFSYwftmPBxiuK5u4DXjbXx7q6eKjq5dsLXZ4FJiVvlcw35QXzk0KrUecJmuVFbj4uV9oYrcw==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.4.1.tgz",
+      "integrity": "sha512-+DvS92F9ezicfswqrvIRM2njcYJbd5mb9CUgtrHCHmvn7pPPa+nMDRu1o1bYYz/l5IB2NVGNJWiH7h1E58IF2A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/@quasar/app-vite": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/@quasar/app-vite/-/app-vite-1.9.3.tgz",
-      "integrity": "sha512-10YgKO/IiIWsfYQDB7WxgUivYyEObokDbQBHqStsM9yLV62ThmKm1oqI8Utsue2njXYI8DuOSt7zxtgmCyMMpA==",
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/@quasar/app-vite/-/app-vite-1.10.1.tgz",
+      "integrity": "sha512-OSl/A/kXbXvvO72Dt2IndUWZH3+HGRjojyQE1gaCqZVc3HxY1ZRyikN39f32JbjSOsG7m4Eonp2JcK6bxodgQA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -279,7 +565,7 @@
         "open": "^8.4.0",
         "register-service-worker": "^1.7.2",
         "rollup-plugin-visualizer": "^5.5.4",
-        "sass": "^1.33.0",
+        "sass": "^1.79.1",
         "semver": "^7.3.5",
         "serialize-javascript": "^6.0.0",
         "table": "^6.8.0",
@@ -308,7 +594,7 @@
         "vue": "^3.2.29",
         "vue-router": "^4.0.12",
         "vuex": "^4.0.0",
-        "workbox-build": ">= 6"
+        "workbox-build": "^6 || 7.0.x"
       },
       "peerDependenciesMeta": {
         "@electron/packager": {
@@ -1362,9 +1648,9 @@
       }
     },
     "node_modules/body-parser": {
-      "version": "1.20.2",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
-      "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
+      "version": "1.20.3",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
+      "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1376,7 +1662,7 @@
         "http-errors": "2.0.0",
         "iconv-lite": "0.4.24",
         "on-finished": "2.4.1",
-        "qs": "6.11.0",
+        "qs": "6.13.0",
         "raw-body": "2.5.2",
         "type-is": "~1.6.18",
         "unpipe": "1.0.0"
@@ -1920,9 +2206,9 @@
       }
     },
     "node_modules/cookie": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
-      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz",
+      "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -2163,6 +2449,19 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "detect-libc": "bin/detect-libc.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -2251,9 +2550,9 @@
       "license": "MIT"
     },
     "node_modules/encodeurl": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -3337,38 +3636,38 @@
       }
     },
     "node_modules/express": {
-      "version": "4.19.2",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
-      "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
+      "version": "4.21.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz",
+      "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
-        "body-parser": "1.20.2",
+        "body-parser": "1.20.3",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
-        "cookie": "0.6.0",
+        "cookie": "0.7.1",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
         "depd": "2.0.0",
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "etag": "~1.8.1",
-        "finalhandler": "1.2.0",
+        "finalhandler": "1.3.1",
         "fresh": "0.5.2",
         "http-errors": "2.0.0",
-        "merge-descriptors": "1.0.1",
+        "merge-descriptors": "1.0.3",
         "methods": "~1.1.2",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.7",
+        "path-to-regexp": "0.1.10",
         "proxy-addr": "~2.0.7",
-        "qs": "6.11.0",
+        "qs": "6.13.0",
         "range-parser": "~1.2.1",
         "safe-buffer": "5.2.1",
-        "send": "0.18.0",
-        "serve-static": "1.15.0",
+        "send": "0.19.0",
+        "serve-static": "1.16.2",
         "setprototypeof": "1.2.0",
         "statuses": "2.0.1",
         "type-is": "~1.6.18",
@@ -3540,14 +3839,14 @@
       }
     },
     "node_modules/finalhandler": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
-      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
+      "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "debug": "2.6.9",
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
@@ -4866,11 +5165,14 @@
       }
     },
     "node_modules/merge-descriptors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
+      "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
     },
     "node_modules/merge2": {
       "version": "1.4.1",
@@ -4893,9 +5195,9 @@
       }
     },
     "node_modules/micromatch": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
-      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5052,6 +5354,13 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/node-releases": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
@@ -5420,9 +5729,9 @@
       "license": "MIT"
     },
     "node_modules/path-to-regexp": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==",
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
+      "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==",
       "dev": true,
       "license": "MIT"
     },
@@ -5556,13 +5865,13 @@
       }
     },
     "node_modules/qs": {
-      "version": "6.11.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
-      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
+      "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
       "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {
-        "side-channel": "^1.0.4"
+        "side-channel": "^1.0.6"
       },
       "engines": {
         "node": ">=0.6"
@@ -5572,9 +5881,9 @@
       }
     },
     "node_modules/quasar": {
-      "version": "2.16.6",
-      "resolved": "https://registry.npmjs.org/quasar/-/quasar-2.16.6.tgz",
-      "integrity": "sha512-nFFS/WniZy052wUNr0UHxc46KVB0hVg7IlBpVScxQAANQxL5uJVqaiw0z2CEM8IM+MCObXANqxHX/m7woG7zIw==",
+      "version": "2.17.0",
+      "resolved": "https://registry.npmjs.org/quasar/-/quasar-2.17.0.tgz",
+      "integrity": "sha512-xFWwCt4FGuaC0M4/MA5drjBiCP7kj/5BsUPv2+dDIlyQG9YGvKIewCnWYYt02r4ijRqJSzPb7TsH89Gzkno1Mg==",
       "license": "MIT",
       "engines": {
         "node": ">= 10.18.1",
@@ -6002,13 +6311,14 @@
       "license": "MIT"
     },
     "node_modules/sass": {
-      "version": "1.77.8",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz",
-      "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==",
+      "version": "1.80.2",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.80.2.tgz",
+      "integrity": "sha512-9wXY8cGBlUmoUoT+vwOZOFCiS+naiWVjqlreN9ar9PudXbGwlMTFwCR5K9kB4dFumJ6ib98wZyAObJKsWf1nAA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "chokidar": ">=3.0.0 <4.0.0",
+        "@parcel/watcher": "^2.4.1",
+        "chokidar": "^4.0.0",
         "immutable": "^4.0.0",
         "source-map-js": ">=0.6.2 <2.0.0"
       },
@@ -6019,6 +6329,36 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/sass/node_modules/chokidar": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz",
+      "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/sass/node_modules/readdirp": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz",
+      "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/sax": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.1.4.tgz",
@@ -6040,9 +6380,9 @@
       }
     },
     "node_modules/send": {
-      "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
-      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
+      "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6081,6 +6421,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/send/node_modules/encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/send/node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -6099,16 +6449,16 @@
       }
     },
     "node_modules/serve-static": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
-      "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
+      "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "parseurl": "~1.3.3",
-        "send": "0.18.0"
+        "send": "0.19.0"
       },
       "engines": {
         "node": ">= 0.8.0"
diff --git a/src/Frontend/package.json b/src/Frontend/package.json
index 6c5d8a8..f8e63d4 100644
--- a/src/Frontend/package.json
+++ b/src/Frontend/package.json
@@ -11,22 +11,22 @@
   },
   "dependencies": {
     "@quasar/extras": "^1.0.0",
-    "quasar": "^2.6.0",
+    "quasar": "^2.17.0",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0"
   },
   "devDependencies": {
+    "@quasar/app-vite": "^1.10.1",
+    "@types/node": "^12.20.21",
     "@typescript-eslint/eslint-plugin": "^5.10.0",
     "@typescript-eslint/parser": "^5.10.0",
+    "autoprefixer": "^10.4.2",
     "eslint": "^8.10.0",
-    "eslint-plugin-vue": "^9.0.0",
     "eslint-config-standard": "^17.0.0",
     "eslint-plugin-import": "^2.19.1",
     "eslint-plugin-n": "^15.0.0",
     "eslint-plugin-promise": "^6.0.0",
-    "@types/node": "^12.20.21",
-    "@quasar/app-vite": "^1.0.0",
-    "autoprefixer": "^10.4.2",
+    "eslint-plugin-vue": "^9.0.0",
     "typescript": "^4.5.4"
   },
   "engines": {
diff --git a/src/Frontend/src/css/app.scss b/src/Frontend/src/css/app.scss
index 7abd850..c635c7c 100644
--- a/src/Frontend/src/css/app.scss
+++ b/src/Frontend/src/css/app.scss
@@ -1,5 +1,24 @@
 // app global css in SCSS form
 
+html {
+  font-size: 16px;
+}
+
+html,
+body {
+   margin: 0;
+   padding: 0;
+}
+
+h1 {
+  font-size: clamp(2.0rem, -0.2rem + 4vw, 3.0rem) !important;
+  line-height: clamp(2.2rem, -0.2rem + 4vw, 3.2rem) !important;
+  font-weight: 600;
+  margin-block-start: 0em;
+  margin-block-end: 0.4em;
+  color: $secondary;
+}
+
 h2 {
   font-size: 1.4rem;
   line-height: 1.5rem;
diff --git a/src/Frontend/src/css/quasar.variables.scss b/src/Frontend/src/css/quasar.variables.scss
index 3272458..9625680 100644
--- a/src/Frontend/src/css/quasar.variables.scss
+++ b/src/Frontend/src/css/quasar.variables.scss
@@ -13,8 +13,8 @@
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
 
 $primary   : #000000;
-$secondary : #26A69A;
-$accent    : #9C27B0;
+$secondary : #2b3131;
+$accent    : #616161;
 
 $dark      : #1D1D1D;
 $dark-page : #121212;
diff --git a/src/Frontend/src/layouts/MainLayout.vue b/src/Frontend/src/layouts/MainLayout.vue
index 37091b5..dd7cb45 100644
--- a/src/Frontend/src/layouts/MainLayout.vue
+++ b/src/Frontend/src/layouts/MainLayout.vue
@@ -6,30 +6,65 @@
   <q-layout view="lHh Lpr lFf">
     <q-header>
       <q-toolbar>
-        <q-toolbar-title>
-          <span style="font-weight: 600;">MAILTOWER</span> - E-Mail Header Analyzer
-        </q-toolbar-title>
-
-        <q-btn
-          stretch
-          flat
-          href="https://mailtower.app"
+        <q-toolbar-title
+          shrink
+          style="min-width:120px;"
         >
-          Mailtower.app
-        </q-btn>
+          <router-link
+            :to="{ name: 'home' }"
+            class="brand-name"
+          >
+            MAILTOWER
+          </router-link>
+        </q-toolbar-title>
 
-        <q-btn
+        <q-item
           stretch
           flat
-          href="https://github.com/mailtower-app/email-header-analyzer"
+          :to="{name: 'analyzer'}"
+          active-class="text-white bg-menu-active"
         >
-          GitHub
-        </q-btn>
+          <q-item-section class="text-uppercase text-weight-medium">
+            E-Mail Header Analyzer
+          </q-item-section>
+        </q-item>
       </q-toolbar>
     </q-header>
 
     <q-page-container>
       <router-view />
     </q-page-container>
+
+    <q-footer class="text-center bg-grey-2 text-black q-pa-xl">
+      <q-btn
+        stretch
+        flat
+        href="https://mailtower.app"
+        size="md"
+      >
+        Mailtower.app
+      </q-btn>
+
+      <q-btn
+        stretch
+        flat
+        href="https://github.com/mailtower-app/email-header-analyzer"
+        size="md"
+      >
+        GitHub
+      </q-btn>
+    </q-footer>
   </q-layout>
 </template>
+
+<style scoped>
+.brand-name {
+  color: #fff;
+  text-decoration: none;
+  font-weight:600;
+}
+
+.bg-menu-active {
+  background-color: #539CC5;
+}
+</style>
diff --git a/src/Frontend/src/pages/AnalyzerPage.vue b/src/Frontend/src/pages/AnalyzerPage.vue
new file mode 100644
index 0000000..d8c1848
--- /dev/null
+++ b/src/Frontend/src/pages/AnalyzerPage.vue
@@ -0,0 +1,324 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { QTableProps } from 'quasar'
+
+import { ReceivedHeaderParts } from 'src/models/ReceivedHeaderParts'
+
+import { mailHelper } from 'src/helpers/mailHelper'
+
+import LetterWithEnvelope from 'src/components/LetterWithEnvelope.vue'
+import MailHeaderDetailBox from 'src/components/MailHeaderDetailBox.vue'
+import MailFlow from 'src/components/MailFlow.vue'
+import MailFlowTable from 'src/components/MailFlowTable.vue'
+
+const MailHeaders = {
+  From: 'From',
+  To: 'To',
+  Subject: 'Subject',
+  Received: 'Received',
+  ReplyTo: 'Reply-To',
+  ReturnPath: 'Return-Path',
+  MessageId: 'Message-Id',
+  Date: 'Date',
+  DkimSignature: 'DKIM-Signature',
+  AuthenticationResults: 'Authentication-Results'
+}
+
+const mailHeader = ref<string>()
+const filter = ref<string | undefined>()
+
+const columns : QTableProps['columns'] = [
+  {
+    name: 'headerName',
+    align: 'left',
+    label: 'Name',
+    field: 'headerName',
+    sortable: false,
+    style: 'width: 300px'
+  },
+  {
+    name: 'headerData',
+    align: 'left',
+    label: 'Data',
+    field: 'headerData',
+    sortable: false,
+    classes: 'text-break'
+  },
+  {
+    name: 'headerIndex',
+    align: 'left',
+    label: 'Index',
+    field: 'headerIndex',
+    sortable: false,
+    style: 'width: 70px'
+  }
+]
+
+const mailHeaderParts = computed(() => {
+  if (!mailHeader.value) {
+    return undefined
+  }
+
+  try {
+    return mailHelper.splitMailHeader(mailHeader.value)
+  } catch (error) {
+    console.error(error)
+    return undefined
+  }
+})
+
+const returnPathHeaders = computed(() => {
+  return mailHeaderParts.value?.filter(header => header.headerName === MailHeaders.ReturnPath)
+})
+
+const returnPath = computed(() => {
+  if (!returnPathHeaders.value || returnPathHeaders.value.length === 0) {
+    return undefined
+  }
+
+  return returnPathHeaders.value[0].headerData
+})
+
+const fromHeaders = computed(() => {
+  return mailHeaderParts.value?.filter(header => header.headerName === MailHeaders.From)
+})
+
+const from = computed(() => {
+  if (!fromHeaders.value || fromHeaders.value.length === 0) {
+    return undefined
+  }
+
+  return fromHeaders.value[0].headerData
+})
+
+const toHeaders = computed(() => {
+  return mailHeaderParts.value?.filter(header => header.headerName === MailHeaders.To)
+})
+
+const to = computed(() => {
+  if (!toHeaders.value || toHeaders.value.length === 0) {
+    return undefined
+  }
+
+  return toHeaders.value[0].headerData
+})
+
+const dateHeaders = computed(() => {
+  return mailHeaderParts.value?.filter(header => header.headerName === MailHeaders.Date)
+})
+
+const messageIdHeaders = computed(() => {
+  return mailHeaderParts.value?.filter(header => header.headerName.toLowerCase() === MailHeaders.MessageId.toLowerCase())
+})
+
+const subjectHeaders = computed(() => {
+  return mailHeaderParts.value?.filter(header => header.headerName === MailHeaders.Subject)
+})
+
+const subject = computed(() => {
+  if (!subjectHeaders.value || subjectHeaders.value.length === 0) {
+    return undefined
+  }
+
+  return subjectHeaders.value[0].headerData
+})
+
+const receivedHeaders = computed<ReceivedHeaderParts[] | undefined>(() => {
+  if (!mailHeaderParts.value) {
+    return undefined
+  }
+  const filteredHeaders = mailHeaderParts.value?.filter(header => header.headerName === MailHeaders.Received)
+
+  if (!filteredHeaders) {
+    return undefined
+  }
+
+  const items = filteredHeaders.filter(o => o.headerData).map(headerDetail => mailHelper.parseReceivedHeader(headerDetail))
+
+  items?.sort((a, b) => {
+    if (a.rawHeaderDetails.headerIndex && b.rawHeaderDetails.headerIndex) {
+      return b.rawHeaderDetails.headerIndex - a.rawHeaderDetails.headerIndex
+    }
+    return -1
+  })
+  return items
+})
+
+const replyToHeaders = computed(() => {
+  return mailHeaderParts.value?.filter(header => header.headerName === MailHeaders.ReplyTo)
+})
+
+const authenticationResultsHeaders = computed(() => {
+  return mailHeaderParts.value?.filter(header => header.headerName === MailHeaders.AuthenticationResults)
+})
+
+const dkimSignatureHeaders = computed(() => {
+  return mailHeaderParts.value?.filter(header => header.headerName === MailHeaders.DkimSignature)
+})
+
+const otherHeaders = computed(() => {
+  const ignoreHeaderNames = Object.values(MailHeaders)
+  const filteredHeaders = mailHeaderParts.value?.filter(header => !ignoreHeaderNames.includes(header.headerName))
+
+  const filterTerm = filter.value?.toLowerCase()
+  if (filterTerm) {
+    return mailHeaderParts.value?.filter(header => header.headerName.toLowerCase().includes(filterTerm) || header.headerData.toLowerCase().includes(filterTerm))
+  }
+  return filteredHeaders
+})
+
+</script>
+
+<template>
+  <q-page padding>
+    <div class="row q-col-gutter-sm">
+      <div class="col">
+        <q-input
+          v-model="mailHeader"
+          spellcheck="false"
+          placeholder="Paste email headers here"
+          outlined
+          type="textarea"
+          :rows="mailHeader ? 6 : 30"
+        />
+      </div>
+      <div
+        v-show="mailHeader"
+        style="width: 50px;"
+      >
+        <q-btn
+          flat
+          icon="close"
+          class="cursor-pointer full-width full-height bg-red text-white"
+          @click="mailHeader = undefined"
+        />
+      </div>
+    </div>
+
+    <div
+      v-if="mailHeader"
+      class="row"
+    >
+      <div class="col-12 col-md-5">
+        <LetterWithEnvelope
+          :to="to"
+          :from="from"
+          :subject="subject"
+          :return-path="returnPath"
+        />
+      </div>
+      <div class="col-12 col-md-7">
+        <div class="q-my-lg">
+          <div class="q-gutter-xs">
+            <MailHeaderDetailBox
+              v-if="returnPathHeaders && returnPathHeaders.length > 0"
+              name="Return-Path"
+              :details="returnPathHeaders?.map(o => o.headerData)"
+              :preformatted="false"
+            />
+            <MailHeaderDetailBox
+              v-if="fromHeaders && fromHeaders.length > 0"
+              name="From"
+              :details="fromHeaders?.map(o => o.headerData)"
+              :preformatted="false"
+            />
+
+            <MailHeaderDetailBox
+              v-if="toHeaders && toHeaders.length > 0"
+              name="To"
+              :details="toHeaders?.map(o => o.headerData)"
+              :preformatted="false"
+            />
+
+            <MailHeaderDetailBox
+              v-if="replyToHeaders && replyToHeaders.length > 0"
+              name="Reply-To"
+              :details="replyToHeaders?.map(o => o.headerData)"
+              :preformatted="false"
+            />
+
+            <MailHeaderDetailBox
+              v-if="messageIdHeaders && messageIdHeaders.length > 0"
+              name="Message-Id"
+              :details="messageIdHeaders?.map(o => o.headerData)"
+              :preformatted="false"
+            />
+
+            <MailHeaderDetailBox
+              v-if="dateHeaders && dateHeaders.length > 0"
+              name="Date"
+              :details="dateHeaders?.map(o => o.headerData)"
+              :preformatted="false"
+            />
+
+            <MailHeaderDetailBox
+              v-if="subjectHeaders && subjectHeaders.length > 0"
+              name="Subject"
+              :details="subjectHeaders?.map(o => o.headerData)"
+              :preformatted="false"
+            />
+
+            <MailHeaderDetailBox
+              v-if="authenticationResultsHeaders && authenticationResultsHeaders.length > 0"
+              name="Authentication-Results"
+              :details="authenticationResultsHeaders.map(o => o.headerData)"
+              :preformatted="true"
+            />
+
+            <MailHeaderDetailBox
+              v-if="dkimSignatureHeaders && dkimSignatureHeaders.length > 0"
+              name="Dkim Signature"
+              :details="dkimSignatureHeaders?.map(o => o.headerData)"
+              :preformatted="false"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="mailHeader">
+      <h2>Mail Hops</h2>
+      <div
+        v-if="receivedHeaders"
+        class="q-mt-sm"
+      >
+        <MailFlow :received-headers="receivedHeaders" />
+        <MailFlowTable :received-headers="receivedHeaders" />
+      </div>
+
+      <h2>Other Headers</h2>
+      <q-table
+        v-if="otherHeaders"
+        flat
+        bordered
+        wrap-cells
+        :rows-per-page-options="[0]"
+        :rows="otherHeaders"
+        :columns="columns"
+        class="full-width"
+        table-style="min-height: 400px;"
+      >
+        <template #top>
+          <q-input
+            v-model="filter"
+            outlined
+            dense
+            debounce="100"
+            placeholder="Search"
+            class="full-width"
+            :bg-color="filter ? 'grey-3' : ''"
+          >
+            <template #append>
+              <q-icon name="search" />
+            </template>
+          </q-input>
+        </template>
+      </q-table>
+    </div>
+  </q-page>
+</template>
+
+<style scoped>
+:deep(.text-break) {
+  word-break: break-all;
+}
+</style>
diff --git a/src/Frontend/src/pages/ErrorNotFound.vue b/src/Frontend/src/pages/ErrorNotFound.vue
index 6b1efcf..ea301dd 100644
--- a/src/Frontend/src/pages/ErrorNotFound.vue
+++ b/src/Frontend/src/pages/ErrorNotFound.vue
@@ -1,28 +1,27 @@
 <template>
-  <authenticationResultsHeaders class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center">
-    <authenticationResultsHeaders>
-      <authenticationResultsHeaders style="font-size: 30vh">
+  <div class="fullscreen bg-black text-white text-center q-pa-md flex flex-center">
+    <div>
+      <div style="font-size: 15vh; height:18vh;">
         404
-      </authenticationResultsHeaders>
+      </div>
 
-      <authenticationResultsHeaders
+      <div
         class="text-h2"
         style="opacity:.4"
       >
-        Oops. Nothing here...
-      </authenticationResultsHeaders>
+        The letter carrier must have lost something
+      </div>
 
       <q-btn
-        class="q-mt-xl"
-        color="white"
-        text-color="blue"
+        class="q-mt-xl q-px-xl"
+        outline
         unelevated
-        to="/"
-        label="Go Home"
+        :to="{ name: 'home', params: { lang: 'de' } }"
+        label="Go to Home"
         no-caps
       />
-    </authenticationResultsHeaders>
-  </authenticationResultsHeaders>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/src/Frontend/src/pages/IndexPage.vue b/src/Frontend/src/pages/IndexPage.vue
index c84f268..82f5b2e 100644
--- a/src/Frontend/src/pages/IndexPage.vue
+++ b/src/Frontend/src/pages/IndexPage.vue
@@ -1,324 +1,84 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import { QTableProps } from 'quasar'
-
-import { ReceivedHeaderParts } from 'src/models/ReceivedHeaderParts'
-
-import { mailHelper } from 'src/helpers/mailHelper'
-
-import LetterWithEnvelope from 'src/components/LetterWithEnvelope.vue'
-import MailHeaderDetailBox from 'src/components/MailHeaderDetailBox.vue'
-import MailFlow from 'src/components/MailFlow.vue'
-import MailFlowTable from 'src/components/MailFlowTable.vue'
-
-const MailHeaders = {
-  From: 'From',
-  To: 'To',
-  Subject: 'Subject',
-  Received: 'Received',
-  ReplyTo: 'Reply-To',
-  ReturnPath: 'Return-Path',
-  MessageId: 'Message-Id',
-  Date: 'Date',
-  DkimSignature: 'DKIM-Signature',
-  AuthenticationResults: 'Authentication-Results'
-}
-
-const mailHeader = ref<string>()
-const filter = ref<string | undefined>()
-
-const columns : QTableProps['columns'] = [
-  {
-    name: 'headerName',
-    align: 'left',
-    label: 'Name',
-    field: 'headerName',
-    sortable: false,
-    style: 'width: 300px'
-  },
-  {
-    name: 'headerData',
-    align: 'left',
-    label: 'Data',
-    field: 'headerData',
-    sortable: false,
-    classes: 'text-break'
-  },
-  {
-    name: 'headerIndex',
-    align: 'left',
-    label: 'Index',
-    field: 'headerIndex',
-    sortable: false,
-    style: 'width: 70px'
-  }
-]
-
-const mailHeaderParts = computed(() => {
-  if (!mailHeader.value) {
-    return undefined
-  }
-
-  try {
-    return mailHelper.splitMailHeader(mailHeader.value)
-  } catch (error) {
-    console.error(error)
-    return undefined
-  }
-})
-
-const returnPathHeaders = computed(() => {
-  return mailHeaderParts.value?.filter(header => header.headerName === MailHeaders.ReturnPath)
-})
-
-const returnPath = computed(() => {
-  if (!returnPathHeaders.value || returnPathHeaders.value.length === 0) {
-    return undefined
-  }
-
-  return returnPathHeaders.value[0].headerData
-})
-
-const fromHeaders = computed(() => {
-  return mailHeaderParts.value?.filter(header => header.headerName === MailHeaders.From)
-})
-
-const from = computed(() => {
-  if (!fromHeaders.value || fromHeaders.value.length === 0) {
-    return undefined
-  }
-
-  return fromHeaders.value[0].headerData
-})
-
-const toHeaders = computed(() => {
-  return mailHeaderParts.value?.filter(header => header.headerName === MailHeaders.To)
-})
-
-const to = computed(() => {
-  if (!toHeaders.value || toHeaders.value.length === 0) {
-    return undefined
-  }
-
-  return toHeaders.value[0].headerData
-})
-
-const dateHeaders = computed(() => {
-  return mailHeaderParts.value?.filter(header => header.headerName === MailHeaders.Date)
-})
-
-const messageIdHeaders = computed(() => {
-  return mailHeaderParts.value?.filter(header => header.headerName.toLowerCase() === MailHeaders.MessageId.toLowerCase())
-})
-
-const subjectHeaders = computed(() => {
-  return mailHeaderParts.value?.filter(header => header.headerName === MailHeaders.Subject)
-})
-
-const subject = computed(() => {
-  if (!subjectHeaders.value || subjectHeaders.value.length === 0) {
-    return undefined
-  }
-
-  return subjectHeaders.value[0].headerData
-})
-
-const receivedHeaders = computed<ReceivedHeaderParts[] | undefined>(() => {
-  if (!mailHeaderParts.value) {
-    return undefined
-  }
-  const filteredHeaders = mailHeaderParts.value?.filter(header => header.headerName === MailHeaders.Received)
-
-  if (!filteredHeaders) {
-    return undefined
-  }
-
-  const items = filteredHeaders.filter(o => o.headerData).map(headerDetail => mailHelper.parseReceivedHeader(headerDetail))
-
-  items?.sort((a, b) => {
-    if (a.rawHeaderDetails.headerIndex && b.rawHeaderDetails.headerIndex) {
-      return b.rawHeaderDetails.headerIndex - a.rawHeaderDetails.headerIndex
-    }
-    return -1
-  })
-  return items
-})
-
-const replyToHeaders = computed(() => {
-  return mailHeaderParts.value?.filter(header => header.headerName === MailHeaders.ReplyTo)
-})
-
-const authenticationResultsHeaders = computed(() => {
-  return mailHeaderParts.value?.filter(header => header.headerName === MailHeaders.AuthenticationResults)
-})
-
-const dkimSignatureHeaders = computed(() => {
-  return mailHeaderParts.value?.filter(header => header.headerName === MailHeaders.DkimSignature)
-})
-
-const otherHeaders = computed(() => {
-  const ignoreHeaderNames = Object.values(MailHeaders)
-  const filteredHeaders = mailHeaderParts.value?.filter(header => !ignoreHeaderNames.includes(header.headerName))
-
-  const filterTerm = filter.value?.toLowerCase()
-  if (filterTerm) {
-    return mailHeaderParts.value?.filter(header => header.headerName.toLowerCase().includes(filterTerm) || header.headerData.toLowerCase().includes(filterTerm))
-  }
-  return filteredHeaders
-})
-
 </script>
 
 <template>
   <q-page padding>
-    <div class="row q-col-gutter-sm">
-      <div class="col">
-        <q-input
-          v-model="mailHeader"
-          spellcheck="false"
-          placeholder="Paste email headers here"
-          outlined
-          type="textarea"
-          :rows="mailHeader ? 6 : 30"
-        />
-      </div>
-      <div
-        v-show="mailHeader"
-        style="width: 50px;"
-      >
-        <q-btn
-          flat
-          icon="close"
-          class="cursor-pointer full-width full-height"
-          @click="mailHeader = undefined"
-        />
-      </div>
-    </div>
+    <div class="row justify-center intro">
+      <div class="col-12 col-md-8 col-lg-6">
+        <h1>E-Mail Header Analyzer</h1>
+        <p class="q-pt-md">
+          This tool allows you to analyze email headers directly in your browser, ensuring complete privacy and security.
+          No data is sent to any server; all processing is done locally on your device. Simply paste the email header into the input field,
+          and the analysis will be performed securely within your browser. No sensitive information is shared externally.
+        </p>
+
+        <q-list
+          bordered
+          separator
+          class="q-mt-xl"
+        >
+          <q-item>
+            <q-item-section>
+              <q-item-label>Full Privacy</q-item-label>
+              <q-item-label caption>
+                No data is sent to external servers; all analysis happens locally in your browser.
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+
+          <q-item>
+            <q-item-section>
+              <q-item-label>Security</q-item-label>
+              <q-item-label caption>
+                Sensitive email information is kept on your device, ensuring no risk of data leakage.
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+
+          <q-item>
+            <q-item-section>
+              <q-item-label>Fast Performance</q-item-label>
+              <q-item-label caption>
+                Analysis is quick, as no server communication is required.
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+
+          <q-item>
+            <q-item-section>
+              <q-item-label>Easy to Use</q-item-label>
+              <q-item-label caption>
+                Simply paste the email header, and the tool instantly provides insights.
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+
+          <q-item>
+            <q-item-section>
+              <q-item-label>No Installation Required</q-item-label>
+              <q-item-label caption>
+                Works directly in your browser without the need for additional software.
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
 
-    <div
-      v-if="mailHeader"
-      class="row"
-    >
-      <div class="col-12 col-md-5">
-        <LetterWithEnvelope
-          :to="to"
-          :from="from"
-          :subject="subject"
-          :return-path="returnPath"
-        />
-      </div>
-      <div class="col-12 col-md-7">
-        <div class="q-my-lg">
-          <div class="q-gutter-xs">
-            <MailHeaderDetailBox
-              v-if="returnPathHeaders && returnPathHeaders.length > 0"
-              name="Return-Path"
-              :details="returnPathHeaders?.map(o => o.headerData)"
-              :preformatted="false"
-            />
-            <MailHeaderDetailBox
-              v-if="fromHeaders && fromHeaders.length > 0"
-              name="From"
-              :details="fromHeaders?.map(o => o.headerData)"
-              :preformatted="false"
-            />
-
-            <MailHeaderDetailBox
-              v-if="toHeaders && toHeaders.length > 0"
-              name="To"
-              :details="toHeaders?.map(o => o.headerData)"
-              :preformatted="false"
-            />
-
-            <MailHeaderDetailBox
-              v-if="replyToHeaders && replyToHeaders.length > 0"
-              name="Reply-To"
-              :details="replyToHeaders?.map(o => o.headerData)"
-              :preformatted="false"
-            />
-
-            <MailHeaderDetailBox
-              v-if="messageIdHeaders && messageIdHeaders.length > 0"
-              name="Message-Id"
-              :details="messageIdHeaders?.map(o => o.headerData)"
-              :preformatted="false"
-            />
-
-            <MailHeaderDetailBox
-              v-if="dateHeaders && dateHeaders.length > 0"
-              name="Date"
-              :details="dateHeaders?.map(o => o.headerData)"
-              :preformatted="false"
-            />
-
-            <MailHeaderDetailBox
-              v-if="subjectHeaders && subjectHeaders.length > 0"
-              name="Subject"
-              :details="subjectHeaders?.map(o => o.headerData)"
-              :preformatted="false"
-            />
-
-            <MailHeaderDetailBox
-              v-if="authenticationResultsHeaders && authenticationResultsHeaders.length > 0"
-              name="Authentication-Results"
-              :details="authenticationResultsHeaders.map(o => o.headerData)"
-              :preformatted="true"
-            />
-
-            <MailHeaderDetailBox
-              v-if="dkimSignatureHeaders && dkimSignatureHeaders.length > 0"
-              name="Dkim Signature"
-              :details="dkimSignatureHeaders?.map(o => o.headerData)"
-              :preformatted="false"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-    <div v-if="mailHeader">
-      <h2>Mail Hops</h2>
-      <div
-        v-if="receivedHeaders"
-        class="q-mt-sm"
-      >
-        <MailFlow :received-headers="receivedHeaders" />
-        <MailFlowTable :received-headers="receivedHeaders" />
+        <q-btn
+          :to="{ name: 'analyzer' }"
+          class="full-width q-mt-xl"
+          color="primary"
+          size="xl"
+        >
+          Analyze E-Mail Header
+        </q-btn>
       </div>
-
-      <h2>Other Headers</h2>
-      <q-table
-        v-if="otherHeaders"
-        flat
-        bordered
-        wrap-cells
-        :rows-per-page-options="[0]"
-        :rows="otherHeaders"
-        :columns="columns"
-        class="full-width"
-        table-style="min-height: 400px;"
-      >
-        <template #top>
-          <q-input
-            v-model="filter"
-            outlined
-            dense
-            debounce="100"
-            placeholder="Search"
-            class="full-width"
-            :bg-color="filter ? 'grey-3' : ''"
-          >
-            <template #append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-        </template>
-      </q-table>
     </div>
   </q-page>
 </template>
 
 <style scoped>
-:deep(.text-break) {
-  word-break: break-all;
+.intro {
+  font-size: 1.1rem;
+  line-height: 1.5rem;
 }
 </style>
diff --git a/src/Frontend/src/router/routes.ts b/src/Frontend/src/router/routes.ts
index a3c4911..487b83e 100644
--- a/src/Frontend/src/router/routes.ts
+++ b/src/Frontend/src/router/routes.ts
@@ -4,7 +4,18 @@ const routes: RouteRecordRaw[] = [
   {
     path: '/',
     component: () => import('layouts/MainLayout.vue'),
-    children: [{ path: '', component: () => import('pages/IndexPage.vue') }]
+    children: [
+      {
+        name: 'home',
+        path: '',
+        component: () => import('pages/IndexPage.vue')
+      },
+      {
+        name: 'analyzer',
+        path: 'header-analyzer',
+        component: () => import('pages/AnalyzerPage.vue')
+      }
+    ]
   },
 
   // Always leave this as last one,