diff --git a/nextcloud_backup/backend/package.json b/nextcloud_backup/backend/package.json
index df16bcc..3e9116e 100644
--- a/nextcloud_backup/backend/package.json
+++ b/nextcloud_backup/backend/package.json
@@ -15,6 +15,7 @@
     "@typescript-eslint/eslint-plugin": "^5.38.0",
     "app-root-path": "3.0.0",
     "cookie-parser": "1.4.6",
+    "cors": "^2.8.5",
     "cron": "2.1.0",
     "debug": "4.3.4",
     "errorhandler": "^1.5.1",
@@ -36,6 +37,7 @@
   "devDependencies": {
     "@tsconfig/recommended": "^1.0.1",
     "@types/cookie-parser": "^1.4.3",
+    "@types/cors": "^2.8.12",
     "@types/cron": "^2.0.0",
     "@types/errorhandler": "^1.5.0",
     "@types/express": "^4.17.14",
diff --git a/nextcloud_backup/backend/pnpm-lock.yaml b/nextcloud_backup/backend/pnpm-lock.yaml
index d2ecad6..ef6b372 100644
--- a/nextcloud_backup/backend/pnpm-lock.yaml
+++ b/nextcloud_backup/backend/pnpm-lock.yaml
@@ -3,6 +3,7 @@ lockfileVersion: 5.4
 specifiers:
   '@tsconfig/recommended': ^1.0.1
   '@types/cookie-parser': ^1.4.3
+  '@types/cors': ^2.8.12
   '@types/cron': ^2.0.0
   '@types/errorhandler': ^1.5.0
   '@types/express': ^4.17.14
@@ -16,6 +17,7 @@ specifiers:
   app-root-path: 3.0.0
   concurrently: 6.0.2
   cookie-parser: 1.4.6
+  cors: ^2.8.5
   cron: 2.1.0
   debug: 4.3.4
   dotenv: ^16.0.2
@@ -42,6 +44,7 @@ dependencies:
   '@typescript-eslint/eslint-plugin': 5.38.0_icxzmwhpfrmelnyzbhqbg2q4qi
   app-root-path: 3.0.0
   cookie-parser: 1.4.6
+  cors: 2.8.5
   cron: 2.1.0
   debug: 4.3.4
   errorhandler: 1.5.1
@@ -62,6 +65,7 @@ dependencies:
 devDependencies:
   '@tsconfig/recommended': 1.0.1
   '@types/cookie-parser': 1.4.3
+  '@types/cors': 2.8.12
   '@types/cron': 2.0.0
   '@types/errorhandler': 1.5.0
   '@types/express': 4.17.14
@@ -253,6 +257,10 @@ packages:
       '@types/express': 4.17.14
     dev: true
 
+  /@types/cors/2.8.12:
+    resolution: {integrity: sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw==}
+    dev: true
+
   /@types/cron/2.0.0:
     resolution: {integrity: sha512-xZM08fqvwIXgghtPVkSPKNgC+JoMQ2OHazEvyTKnNf7aWu1aB6/4lBbQFrb03Td2cUGG7ITzMv3mFYnMu6xRaQ==}
     dependencies:
@@ -831,6 +839,14 @@ packages:
     engines: {node: '>= 0.6'}
     dev: false
 
+  /cors/2.8.5:
+    resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
+    engines: {node: '>= 0.10'}
+    dependencies:
+      object-assign: 4.1.1
+      vary: 1.1.2
+    dev: false
+
   /create-require/1.1.1:
     resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
     dev: true
@@ -1795,6 +1811,11 @@ packages:
     engines: {node: '>=10'}
     dev: false
 
+  /object-assign/4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /object-inspect/1.12.2:
     resolution: {integrity: sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==}
     dev: false
diff --git a/nextcloud_backup/backend/src/app.ts b/nextcloud_backup/backend/src/app.ts
index d9f33ea..0bd3cdb 100644
--- a/nextcloud_backup/backend/src/app.ts
+++ b/nextcloud_backup/backend/src/app.ts
@@ -6,12 +6,16 @@ import path from "path";
 import { fileURLToPath } from "url";
 import logger from "./config/winston.js";
 import apiV2Router from "./routes/apiV2.js";
-
+import cors from "cors"
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 const app = express();
 
+app.use(cors({
+  origin: "http://localhost:5173"
+}))
+
 app.set("port", process.env.PORT || 3000);
 
 // app.use(
diff --git a/nextcloud_backup/backend/src/postInit.ts b/nextcloud_backup/backend/src/postInit.ts
index 4ec27ac..a1f583c 100644
--- a/nextcloud_backup/backend/src/postInit.ts
+++ b/nextcloud_backup/backend/src/postInit.ts
@@ -9,6 +9,7 @@ import {
   getWebdavConfig,
   validateWebdavConfig,
 } from "./services/webdavConfigService.js";
+import messageManager from "./tools/messageManager.js";
 
 function postInit() {
   logger.info(`Log level: ${process.env.LOG_LEVEL}`);
@@ -61,11 +62,18 @@ function postInit() {
     (reason) => {
       logger.error("Webdav config: " + kleur.red().bold("FAIL !"));
       logger.error(reason);
+      messageManager.error("Invalid webdav config", reason.message);
     }
   );
 
   settingsTools.check(settingsTools.getSettings(), true);
   // cronTools.init();
+
+  messageManager.error("this is error");
+  messageManager.info("This is info");
+  messageManager.warn("re gerg rg ergrge r ");
+  messageManager.success("zefzegz gze gerg erg zegfze gerg erg aeferg erg erg er");
+  
 }
 
 export default postInit;
diff --git a/nextcloud_backup/backend/src/routes/apiV2.ts b/nextcloud_backup/backend/src/routes/apiV2.ts
index 91e3e4e..600dacd 100644
--- a/nextcloud_backup/backend/src/routes/apiV2.ts
+++ b/nextcloud_backup/backend/src/routes/apiV2.ts
@@ -1,6 +1,7 @@
 import express from "express"
 import configRouter from "./config.js";
 import homeAssistant from "./homeAssistant.js"
+import messageRouter from "./messages.js";
 import webdavRouter from "./webdav.js";
 
 
@@ -9,5 +10,6 @@ const router = express.Router();
 router.use("/homeAssistant", homeAssistant)
 router.use("/config", configRouter);
 router.use("/webdav", webdavRouter);
+router.use("/messages", messageRouter)
 
 export default router;
\ No newline at end of file
diff --git a/nextcloud_backup/backend/src/routes/homeAssistant.ts b/nextcloud_backup/backend/src/routes/homeAssistant.ts
index ebe8c6a..60b8af3 100644
--- a/nextcloud_backup/backend/src/routes/homeAssistant.ts
+++ b/nextcloud_backup/backend/src/routes/homeAssistant.ts
@@ -14,5 +14,4 @@ homeAssistantRouter.get("/backups/", (req, res, next) => {
 });
 
 
-
 export default homeAssistantRouter;
\ No newline at end of file
diff --git a/nextcloud_backup/backend/src/routes/messages.ts b/nextcloud_backup/backend/src/routes/messages.ts
new file mode 100644
index 0000000..58c512e
--- /dev/null
+++ b/nextcloud_backup/backend/src/routes/messages.ts
@@ -0,0 +1,10 @@
+import express from "express";
+import messageManager from "../tools/messageManager.js";
+
+const messageRouter = express.Router();
+
+messageRouter.get('/', (req, res, next)=>{
+  res.json(messageManager.get())
+})
+
+export default messageRouter;
diff --git a/nextcloud_backup/backend/src/services/backupConfigService.ts b/nextcloud_backup/backend/src/services/backupConfigService.ts
index 598d640..954f9c1 100644
--- a/nextcloud_backup/backend/src/services/backupConfigService.ts
+++ b/nextcloud_backup/backend/src/services/backupConfigService.ts
@@ -1,7 +1,7 @@
 import fs from "fs";
 import Joi from "joi"
 import logger from "../config/winston.js";
-import { BackupConfig } from "../types/services/backupConfig.js"
+import type { BackupConfig } from "../types/services/backupConfig.js"
 import backupConfigValidation from "../types/services/backupConfigValidation.js";
 
 
diff --git a/nextcloud_backup/backend/src/services/homeAssistantService.ts b/nextcloud_backup/backend/src/services/homeAssistantService.ts
index 98f98f4..e6ea32d 100644
--- a/nextcloud_backup/backend/src/services/homeAssistantService.ts
+++ b/nextcloud_backup/backend/src/services/homeAssistantService.ts
@@ -8,8 +8,8 @@ import logger from "../config/winston.js";
 import messageManager from "../tools/messageManager.js";
 import * as settingsTools from "../tools/settingsTools.js";
 import * as statusTools from "../tools/status.js";
-import { NewPartialBackupPayload } from "../types/services/ha_os_payload.js";
-import {
+import type { NewPartialBackupPayload } from "../types/services/ha_os_payload.js";
+import type {
   AddonData,
   AddonModel,
   BackupData,
@@ -18,7 +18,7 @@ import {
   CoreInfoBody,
   SupervisorResponse,
 } from "../types/services/ha_os_response.js";
-import { Status } from "../types/status.js";
+import type { Status } from "../types/status.js";
 
 const pipeline = promisify(stream.pipeline);
 
diff --git a/nextcloud_backup/backend/src/services/webdavService.ts b/nextcloud_backup/backend/src/services/webdavService.ts
index 6a0b8ab..a614915 100644
--- a/nextcloud_backup/backend/src/services/webdavService.ts
+++ b/nextcloud_backup/backend/src/services/webdavService.ts
@@ -6,8 +6,8 @@ import logger from "../config/winston.js";
 import messageManager from "../tools/messageManager.js";
 import * as pathTools from "../tools/pathTools.js";
 import * as statusTools from "../tools/status.js";
-import { WebdavBackup } from "../types/services/webdav.js";
-import { WebdavConfig } from "../types/services/webdavConfig.js";
+import type { WebdavBackup } from "../types/services/webdav.js";
+import type { WebdavConfig } from "../types/services/webdavConfig.js";
 import { getEndpoint } from "./webdavConfigService.js";
 
 const PROPFIND_BODY =
diff --git a/nextcloud_backup/backend/src/tools/messageManager.ts b/nextcloud_backup/backend/src/tools/messageManager.ts
index 205b8d2..5b3d6af 100644
--- a/nextcloud_backup/backend/src/tools/messageManager.ts
+++ b/nextcloud_backup/backend/src/tools/messageManager.ts
@@ -34,6 +34,10 @@ class MessageManager {
   public success(message: string, detail?: string) {
     this.addMessage(MessageType.SUCCESS, message, detail);
   }
+
+  public get(){
+    return this.messages;
+  }
 }
 
 
diff --git a/nextcloud_backup/backend/src/tools/settingsTools.ts b/nextcloud_backup/backend/src/tools/settingsTools.ts
index 7a42fb8..f0718f3 100644
--- a/nextcloud_backup/backend/src/tools/settingsTools.ts
+++ b/nextcloud_backup/backend/src/tools/settingsTools.ts
@@ -3,7 +3,7 @@ import fs from "fs";
 
 import { DateTime } from "luxon";
 import logger from "../config/winston.js";
-import { Settings } from "../types/settings.js";
+import type { Settings } from "../types/settings.js";
 
 const settingsPath = "/data/backup_conf.json";
 
diff --git a/nextcloud_backup/backend/src/tools/status.ts b/nextcloud_backup/backend/src/tools/status.ts
index 3c1caa7..ce8a421 100644
--- a/nextcloud_backup/backend/src/tools/status.ts
+++ b/nextcloud_backup/backend/src/tools/status.ts
@@ -1,6 +1,6 @@
 import { publish_state } from "../services/homeAssistantService.js";
 import logger from "../config/winston.js"
-import { type Status } from "../types/status.js";
+import type { Status } from "../types/status.js";
 
 let status: Status = {
     status: "idle",
diff --git a/nextcloud_backup/backend/src/types/message.ts b/nextcloud_backup/backend/src/types/message.ts
index 069a018..859636e 100644
--- a/nextcloud_backup/backend/src/types/message.ts
+++ b/nextcloud_backup/backend/src/types/message.ts
@@ -1,4 +1,4 @@
-import { DateTime } from "luxon";
+import type { DateTime } from "luxon";
 
 export enum MessageType {
   ERROR = "ERROR",
diff --git a/nextcloud_backup/backend/src/types/services/webdav.ts b/nextcloud_backup/backend/src/types/services/webdav.ts
index 47c3fe9..413ddea 100644
--- a/nextcloud_backup/backend/src/types/services/webdav.ts
+++ b/nextcloud_backup/backend/src/types/services/webdav.ts
@@ -1,4 +1,4 @@
-import { DateTime } from "luxon";
+import type { DateTime } from "luxon";
 
 export interface WebdavBackup {
   id: string;
diff --git a/nextcloud_backup/backend/tsconfig.json b/nextcloud_backup/backend/tsconfig.json
index bf23c74..e89c1b9 100644
--- a/nextcloud_backup/backend/tsconfig.json
+++ b/nextcloud_backup/backend/tsconfig.json
@@ -7,6 +7,8 @@
     "moduleResolution": "NodeNext",
     "target": "es6",
     "sourceMap": true,
+    "importsNotUsedAsValues": "error",
+    "strict": true,
   },
   "include": ["src/**/*"]
 }
\ No newline at end of file
diff --git a/nextcloud_backup/frontend/index.html b/nextcloud_backup/frontend/index.html
index 11603f8..c388d03 100644
--- a/nextcloud_backup/frontend/index.html
+++ b/nextcloud_backup/frontend/index.html
@@ -1,13 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
+<head>
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
-  </head>
-  <body>
+    <title>Vuetify 3 Vite Preview</title>
+</head>
+
+<body>
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
-  </body>
+</body>
+
 </html>
diff --git a/nextcloud_backup/frontend/package.json b/nextcloud_backup/frontend/package.json
index 7951968..90d512c 100644
--- a/nextcloud_backup/frontend/package.json
+++ b/nextcloud_backup/frontend/package.json
@@ -2,20 +2,30 @@
   "name": "frontend",
   "version": "0.0.0",
   "scripts": {
-    "dev": "vite",
-    "build": "run-p type-check build-only",
-    "preview": "vite preview --port 4173",
+    "serve": "vite preview",
+    "build": "vite build",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "build-only": "vite build",
-    "type-check": "vue-tsc --noEmit",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+    "dev": "vite",
+    "preview": "vite preview --port 4173",
+    "type-check": "vue-tsc --noEmit"
   },
   "dependencies": {
+    "@mdi/font": "5.9.55",
+    "@mdi/js": "^7.0.96",
+    "@types/luxon": "^3.0.1",
+    "ky": "^0.31.4",
+    "luxon": "^3.0.4",
     "pinia": "^2.0.23",
-    "vue": "^3.2.40"
+    "roboto-fontface": "*",
+    "vue": "^3.2.40",
+    "vuetify": "3.0.0-beta.13",
+    "webfontloader": "^1.0.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.2.0",
     "@types/node": "^16.11.65",
+    "@types/webfontloader": "^1.0.0",
     "@vitejs/plugin-vue": "^3.1.2",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^11.0.2",
@@ -26,6 +36,8 @@
     "prettier": "^2.7.1",
     "typescript": "~4.7.4",
     "vite": "^3.1.7",
-    "vue-tsc": "1.0.3"
-  }
+    "vite-plugin-vuetify": "^1.0.0-alpha.12",
+    "vue-tsc": "1.0.7"
+  },
+  "packageManager": "pnpm@7.12.1"
 }
diff --git a/nextcloud_backup/frontend/pnpm-lock.yaml b/nextcloud_backup/frontend/pnpm-lock.yaml
index 7930903..2c1b248 100644
--- a/nextcloud_backup/frontend/pnpm-lock.yaml
+++ b/nextcloud_backup/frontend/pnpm-lock.yaml
@@ -1,29 +1,48 @@
 lockfileVersion: 5.4
 
 specifiers:
+  '@mdi/font': 5.9.55
+  '@mdi/js': ^7.0.96
   '@rushstack/eslint-patch': ^1.2.0
+  '@types/luxon': ^3.0.1
   '@types/node': ^16.11.65
+  '@types/webfontloader': ^1.0.0
   '@vitejs/plugin-vue': ^3.1.2
   '@vue/eslint-config-prettier': ^7.0.0
   '@vue/eslint-config-typescript': ^11.0.2
   '@vue/tsconfig': ^0.1.3
   eslint: ^8.25.0
   eslint-plugin-vue: ^9.6.0
+  ky: ^0.31.4
+  luxon: ^3.0.4
   npm-run-all: ^4.1.5
   pinia: ^2.0.23
   prettier: ^2.7.1
+  roboto-fontface: '*'
   typescript: ~4.7.4
   vite: ^3.1.7
+  vite-plugin-vuetify: ^1.0.0-alpha.12
   vue: ^3.2.40
-  vue-tsc: 1.0.3
+  vue-tsc: 1.0.7
+  vuetify: 3.0.0-beta.13
+  webfontloader: ^1.0.0
 
 dependencies:
+  '@mdi/font': 5.9.55
+  '@mdi/js': 7.0.96
+  '@types/luxon': 3.0.1
+  ky: 0.31.4
+  luxon: 3.0.4
   pinia: 2.0.23_rg374xhldfcyvjtaj3qktyfz5y
+  roboto-fontface: 0.10.0
   vue: 3.2.40
+  vuetify: 3.0.0-beta.13_vdkwhj2kz5kpysy3rwb432nm3y
+  webfontloader: 1.6.28
 
 devDependencies:
   '@rushstack/eslint-patch': 1.2.0
   '@types/node': 16.11.65
+  '@types/webfontloader': 1.6.35
   '@vitejs/plugin-vue': 3.1.2_vite@3.1.7+vue@3.2.40
   '@vue/eslint-config-prettier': 7.0.0_znq2sm4m5bonjw4qqm6mwhbe2q
   '@vue/eslint-config-typescript': 11.0.2_bdxbbxtuayd4lgflbnh77t3rcm
@@ -34,7 +53,8 @@ devDependencies:
   prettier: 2.7.1
   typescript: 4.7.4
   vite: 3.1.7
-  vue-tsc: 1.0.3_typescript@4.7.4
+  vite-plugin-vuetify: 1.0.0-alpha.17_l4pgesydsz3cvwqxhtnrp3zlwq
+  vue-tsc: 1.0.7_typescript@4.7.4
 
 packages:
 
@@ -67,7 +87,6 @@ packages:
     cpu: [arm]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-loong64/0.15.10:
@@ -76,7 +95,6 @@ packages:
     cpu: [loong64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@eslint/eslintrc/1.3.3:
@@ -116,6 +134,14 @@ packages:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
 
+  /@mdi/font/5.9.55:
+    resolution: {integrity: sha512-jswRF6q3eq8NWpWiqct6q+6Fg/I7nUhrxYJfiEM8JJpap0wVJLQdbKtyS65GdlK7S7Ytnx3TTi/bmw+tBhkGmg==}
+    dev: false
+
+  /@mdi/js/7.0.96:
+    resolution: {integrity: sha512-lNqhkV3cpPfYb/Avh+vXLFukUTbHbyHoFo4Jdc7Oc9UvURGVhamFIpgOVvEf2bNA78zvjXTZeVWExUTR+DLBfQ==}
+    dev: false
+
   /@nodelib/fs.scandir/2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -145,10 +171,18 @@ packages:
     resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==}
     dev: true
 
+  /@types/luxon/3.0.1:
+    resolution: {integrity: sha512-/LAvk1cMOJt0ghzMFrZEvByUhsiEfeeT2IF53Le+Ki3A538yEL9pRZ7a6MuCxdrYK+YNqNIDmrKU/r2nnw04zQ==}
+    dev: false
+
   /@types/node/16.11.65:
     resolution: {integrity: sha512-Vfz7wGMOr4jbQGiQHVJm8VjeQwM9Ya7mHe9LtQ264/Epf5n1KiZShOFqk++nBzw6a/ubgYdB9Od7P+MH/LjoWw==}
     dev: true
 
+  /@types/webfontloader/1.6.35:
+    resolution: {integrity: sha512-IJlrsiDWq6KghQ7tPlL5tcwSUyOxLDceT+AFUY7Ylj0Fcv3/h3QkANqQxZ0B5mEpEKxhTw76vDmvrruSMV9n9Q==}
+    dev: true
+
   /@typescript-eslint/eslint-plugin/5.40.0_ik43yucnjuzsopqc3tao6tk3x4:
     resolution: {integrity: sha512-FIBZgS3DVJgqPwJzvZTuH4HNsZhHMa9SjxTKAZTlMsPw/UzpEjcf9f4dfgDJEHjK+HboUJo123Eshl6niwEm/Q==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -287,31 +321,31 @@ packages:
       vue: 3.2.40
     dev: true
 
-  /@volar/language-core/1.0.3:
-    resolution: {integrity: sha512-eJ3iubJ1EvPTsp+rKoSUQ3EBGsEzblOQG6OVI9EzXIuwNayIqCnNSv9r0rvnYznX7i5F8gpo0Js9nKoAvwfhpQ==}
+  /@volar/language-core/1.0.7:
+    resolution: {integrity: sha512-T3iJ7Ej5Ywrsn1nEfvOQ98LdFZu3TtoXD8UELHto/u5QyQk4U2GfPl+0ZjuS39ZPocU9l/5CMhrxHsgv/hFWVA==}
     dependencies:
-      '@volar/source-map': 1.0.3
+      '@volar/source-map': 1.0.7
       '@vue/reactivity': 3.2.40
       muggle-string: 0.1.0
     dev: true
 
-  /@volar/source-map/1.0.3:
-    resolution: {integrity: sha512-iEbjU95e8iZ3fV9NHU/wDWRSwSE5aNGpkG9mgIXPkfCmbEH+nEHGkycvapT551BDtIcyU386XzqL4DQbOyPzew==}
+  /@volar/source-map/1.0.7:
+    resolution: {integrity: sha512-58xtTXbriaBoGHl5epE5kYI0Pk81yGmM3Mb/5TEUEzA16dGovXiwtEGce2xCgo0ps42OInFvFuaRv3SvM0k6mg==}
     dependencies:
       muggle-string: 0.1.0
     dev: true
 
-  /@volar/typescript/1.0.3:
-    resolution: {integrity: sha512-OevIxAbdgfVxwWYI6ht5tmt8GqBBVQWPWn/51MNlqu5fVltFGRkOBmv3hwuvLn5N05pj2GpbkaaLZSjpj4iT9w==}
+  /@volar/typescript/1.0.7:
+    resolution: {integrity: sha512-VH3dMxTqkdUqjmdVwIytBjppH5iy18qK9peb3E9CNbvzf/+b3TpdX0zoyglaKmC5IeHG68KHXK2yps734yZ4nQ==}
     dependencies:
-      '@volar/language-core': 1.0.3
+      '@volar/language-core': 1.0.7
     dev: true
 
-  /@volar/vue-language-core/1.0.3:
-    resolution: {integrity: sha512-XryQVvtFB5/rOkEZin5jZgUy0E84p+Ky70z+4B7Bvw/9HjS3TLKAIkm9W0duV7coG9RFVRqeiVnPyaaqSA0waA==}
+  /@volar/vue-language-core/1.0.7:
+    resolution: {integrity: sha512-5InGpRLu5FGeUkVNr1LvQfvThdSsyzIwvsYqYSGLj6VNmS7rzLacoKjZlTwz68/976aU3zjdgx94PoNl5n/SqA==}
     dependencies:
-      '@volar/language-core': 1.0.3
-      '@volar/source-map': 1.0.3
+      '@volar/language-core': 1.0.7
+      '@volar/source-map': 1.0.7
       '@vue/compiler-dom': 3.2.40
       '@vue/compiler-sfc': 3.2.40
       '@vue/reactivity': 3.2.40
@@ -320,11 +354,11 @@ packages:
       vue-template-compiler: 2.7.11
     dev: true
 
-  /@volar/vue-typescript/1.0.3:
-    resolution: {integrity: sha512-zugZ5vni+l5w5z8Q5iEWysU/HkX38krW4+QTKwgQstaRVUQS0UHlX4Ug9vOfPGWEextIx0Z/7JsUvPATTNbfbg==}
+  /@volar/vue-typescript/1.0.7:
+    resolution: {integrity: sha512-SZlUJfMh/9NOIfpYtSVcIAbJVEzEiH2qWBIYHPooMXC02qey56Tg6J2eMhIoKWIuZH0VRRbX8IgFHevSQzzGOw==}
     dependencies:
-      '@volar/typescript': 1.0.3
-      '@volar/vue-language-core': 1.0.3
+      '@volar/typescript': 1.0.7
+      '@volar/vue-language-core': 1.0.7
     dev: true
 
   /@vue/compiler-core/3.2.40:
@@ -448,6 +482,17 @@ packages:
       '@types/node': 16.11.65
     dev: true
 
+  /@vuetify/loader-shared/1.6.0_t3dvazyjkhimlko2vtyi5desum:
+    resolution: {integrity: sha512-mRvswe5SIecagmKkL1c0UQx5V9ACKLyEGegOOe5vC3ccFH8rMbyI4AVZaAKm/EnGXKirWJ1umL8RQFcGd+C0tw==}
+    peerDependencies:
+      vue: ^3.0.0
+      vuetify: ^3.0.0-beta.4
+    dependencies:
+      find-cache-dir: 3.3.2
+      upath: 2.0.1
+      vue: 3.2.40
+      vuetify: 3.0.0-beta.13_vdkwhj2kz5kpysy3rwb432nm3y
+
   /acorn-jsx/5.3.2_acorn@8.8.0:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -577,6 +622,9 @@ packages:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
     dev: true
 
+  /commondir/1.0.1:
+    resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
+
   /concat-map/0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
     dev: true
@@ -624,7 +672,6 @@ packages:
         optional: true
     dependencies:
       ms: 2.1.2
-    dev: true
 
   /deep-is/0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
@@ -703,7 +750,6 @@ packages:
     cpu: [x64]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-android-arm64/0.15.10:
@@ -712,7 +758,6 @@ packages:
     cpu: [arm64]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-darwin-64/0.15.10:
@@ -721,7 +766,6 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-darwin-arm64/0.15.10:
@@ -730,7 +774,6 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-freebsd-64/0.15.10:
@@ -739,7 +782,6 @@ packages:
     cpu: [x64]
     os: [freebsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-freebsd-arm64/0.15.10:
@@ -748,7 +790,6 @@ packages:
     cpu: [arm64]
     os: [freebsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-linux-32/0.15.10:
@@ -757,7 +798,6 @@ packages:
     cpu: [ia32]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-linux-64/0.15.10:
@@ -766,7 +806,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-linux-arm/0.15.10:
@@ -775,7 +814,6 @@ packages:
     cpu: [arm]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-linux-arm64/0.15.10:
@@ -784,7 +822,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-linux-mips64le/0.15.10:
@@ -793,7 +830,6 @@ packages:
     cpu: [mips64el]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-linux-ppc64le/0.15.10:
@@ -802,7 +838,6 @@ packages:
     cpu: [ppc64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-linux-riscv64/0.15.10:
@@ -811,7 +846,6 @@ packages:
     cpu: [riscv64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-linux-s390x/0.15.10:
@@ -820,7 +854,6 @@ packages:
     cpu: [s390x]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-netbsd-64/0.15.10:
@@ -829,7 +862,6 @@ packages:
     cpu: [x64]
     os: [netbsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-openbsd-64/0.15.10:
@@ -838,7 +870,6 @@ packages:
     cpu: [x64]
     os: [openbsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-sunos-64/0.15.10:
@@ -847,7 +878,6 @@ packages:
     cpu: [x64]
     os: [sunos]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-windows-32/0.15.10:
@@ -856,7 +886,6 @@ packages:
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-windows-64/0.15.10:
@@ -865,7 +894,6 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-windows-arm64/0.15.10:
@@ -874,7 +902,6 @@ packages:
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild/0.15.10:
@@ -905,7 +932,6 @@ packages:
       esbuild-windows-32: 0.15.10
       esbuild-windows-64: 0.15.10
       esbuild-windows-arm64: 0.15.10
-    dev: true
 
   /escape-string-regexp/1.0.5:
     resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
@@ -1132,6 +1158,21 @@ packages:
       to-regex-range: 5.0.1
     dev: true
 
+  /find-cache-dir/3.3.2:
+    resolution: {integrity: sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==}
+    engines: {node: '>=8'}
+    dependencies:
+      commondir: 1.0.1
+      make-dir: 3.1.0
+      pkg-dir: 4.2.0
+
+  /find-up/4.1.0:
+    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
+    engines: {node: '>=8'}
+    dependencies:
+      locate-path: 5.0.0
+      path-exists: 4.0.0
+
   /find-up/5.0.0:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
@@ -1161,12 +1202,10 @@ packages:
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /function-bind/1.1.1:
     resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
-    dev: true
 
   /function.prototype.name/1.1.5:
     resolution: {integrity: sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==}
@@ -1287,7 +1326,6 @@ packages:
     engines: {node: '>= 0.4.0'}
     dependencies:
       function-bind: 1.1.1
-    dev: true
 
   /he/1.2.0:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
@@ -1363,7 +1401,6 @@ packages:
     resolution: {integrity: sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==}
     dependencies:
       has: 1.0.3
-    dev: true
 
   /is-date-object/1.0.5:
     resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
@@ -1462,6 +1499,11 @@ packages:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
     dev: true
 
+  /ky/0.31.4:
+    resolution: {integrity: sha512-OFuAD3riwhAfHK3J4FrhlujFRpm0ELBEfDHZfFpw89OTozQt3NLF39lNblUO5udj5vSkyaBKnLai/rFCzBfISQ==}
+    engines: {node: '>=14.16'}
+    dev: false
+
   /levn/0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
@@ -1480,6 +1522,12 @@ packages:
       strip-bom: 3.0.0
     dev: true
 
+  /locate-path/5.0.0:
+    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
+    engines: {node: '>=8'}
+    dependencies:
+      p-locate: 4.1.0
+
   /locate-path/6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
@@ -1502,11 +1550,22 @@ packages:
       yallist: 4.0.0
     dev: true
 
+  /luxon/3.0.4:
+    resolution: {integrity: sha512-aV48rGUwP/Vydn8HT+5cdr26YYQiUZ42NM6ToMoaGKwYfWbfLeRkEu1wXWMHBZT6+KyLfcbbtVcoQFCbbPjKlw==}
+    engines: {node: '>=12'}
+    dev: false
+
   /magic-string/0.25.9:
     resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
     dependencies:
       sourcemap-codec: 1.4.8
 
+  /make-dir/3.1.0:
+    resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
+    engines: {node: '>=8'}
+    dependencies:
+      semver: 6.3.0
+
   /memorystream/0.3.1:
     resolution: {integrity: sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==}
     engines: {node: '>= 0.10.0'}
@@ -1540,7 +1599,6 @@ packages:
 
   /ms/2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
-    dev: true
 
   /muggle-string/0.1.0:
     resolution: {integrity: sha512-Tr1knR3d2mKvvWthlk7202rywKbiOm4rVFLsfAaSIhJ6dt9o47W4S+JMtWhd/PW9Wrdew2/S2fSvhz3E2gkfEg==}
@@ -1627,6 +1685,12 @@ packages:
       word-wrap: 1.2.3
     dev: true
 
+  /p-limit/2.3.0:
+    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
+    engines: {node: '>=6'}
+    dependencies:
+      p-try: 2.2.0
+
   /p-limit/3.1.0:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
@@ -1634,6 +1698,12 @@ packages:
       yocto-queue: 0.1.0
     dev: true
 
+  /p-locate/4.1.0:
+    resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
+    engines: {node: '>=8'}
+    dependencies:
+      p-limit: 2.3.0
+
   /p-locate/5.0.0:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
@@ -1641,6 +1711,10 @@ packages:
       p-limit: 3.1.0
     dev: true
 
+  /p-try/2.2.0:
+    resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
+    engines: {node: '>=6'}
+
   /parent-module/1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -1659,7 +1733,6 @@ packages:
   /path-exists/4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
-    dev: true
 
   /path-is-absolute/1.0.1:
     resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
@@ -1678,7 +1751,6 @@ packages:
 
   /path-parse/1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
-    dev: true
 
   /path-type/3.0.0:
     resolution: {integrity: sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==}
@@ -1729,6 +1801,12 @@ packages:
       vue-demi: 0.13.11_vue@3.2.40
     dev: false
 
+  /pkg-dir/4.2.0:
+    resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      find-up: 4.1.0
+
   /postcss-selector-parser/6.0.10:
     resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
     engines: {node: '>=4'}
@@ -1807,7 +1885,6 @@ packages:
       is-core-module: 2.10.0
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
-    dev: true
 
   /reusify/1.0.4:
     resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
@@ -1821,13 +1898,16 @@ packages:
       glob: 7.2.3
     dev: true
 
+  /roboto-fontface/0.10.0:
+    resolution: {integrity: sha512-OlwfYEgA2RdboZohpldlvJ1xngOins5d7ejqnIBWr9KaMxsnBqotpptRXTyfNRLnFpqzX6sTDt+X+a+6udnU8g==}
+    dev: false
+
   /rollup/2.78.1:
     resolution: {integrity: sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==}
     engines: {node: '>=10.0.0'}
     hasBin: true
     optionalDependencies:
       fsevents: 2.3.2
-    dev: true
 
   /run-parallel/1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
@@ -1848,6 +1928,10 @@ packages:
     hasBin: true
     dev: true
 
+  /semver/6.3.0:
+    resolution: {integrity: sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==}
+    hasBin: true
+
   /semver/7.3.8:
     resolution: {integrity: sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==}
     engines: {node: '>=10'}
@@ -1989,7 +2073,6 @@ packages:
   /supports-preserve-symlinks-flag/1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
-    dev: true
 
   /text-table/0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
@@ -2046,6 +2129,10 @@ packages:
       which-boxed-primitive: 1.0.2
     dev: true
 
+  /upath/2.0.1:
+    resolution: {integrity: sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==}
+    engines: {node: '>=4'}
+
   /uri-js/4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
     dependencies:
@@ -2063,6 +2150,22 @@ packages:
       spdx-expression-parse: 3.0.1
     dev: true
 
+  /vite-plugin-vuetify/1.0.0-alpha.17_l4pgesydsz3cvwqxhtnrp3zlwq:
+    resolution: {integrity: sha512-lP4vG+Z3LnIEjI8nSE8/MJwDRQK5OnS2i4zHDu36yyD4E7wmPKyIkWJdkfBIsx/O+PU7dGc/3MeLARgr+RErEQ==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      vite: ^2.7.0 || ^3.0.0
+      vuetify: ^3.0.0-beta.4
+    dependencies:
+      '@vuetify/loader-shared': 1.6.0_t3dvazyjkhimlko2vtyi5desum
+      debug: 4.3.4
+      upath: 2.0.1
+      vite: 3.1.7
+      vuetify: 3.0.0-beta.13_vdkwhj2kz5kpysy3rwb432nm3y
+    transitivePeerDependencies:
+      - supports-color
+      - vue
+
   /vite/3.1.7:
     resolution: {integrity: sha512-5vCAmU4S8lyVdFCInu9M54f/g8qbOMakVw5xJ4pjoaDy5wgy9sLLZkGdSLN52dlsBqh0tBqxjaqqa8LgPqwRAA==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -2088,7 +2191,6 @@ packages:
       rollup: 2.78.1
     optionalDependencies:
       fsevents: 2.3.2
-    dev: true
 
   /vue-demi/0.13.11_vue@3.2.40:
     resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
@@ -2130,14 +2232,14 @@ packages:
       he: 1.2.0
     dev: true
 
-  /vue-tsc/1.0.3_typescript@4.7.4:
-    resolution: {integrity: sha512-Si6PANEATxaGhJ51bUnRbT+5MIYwvjdPBwuCKSky+YD5oWDhE4uMqfpOPnP2oSMB52trtU0faIRVcP4YSF3LJA==}
+  /vue-tsc/1.0.7_typescript@4.7.4:
+    resolution: {integrity: sha512-PaeWgISdXsPnV3a1NKfiAZb0iyvgLroxKzjPj1itoR5ZH0UOeVZBbDxpH7VPxAt6tCxiAoAIIisDs1QQrsSu3w==}
     hasBin: true
     peerDependencies:
       typescript: '*'
     dependencies:
-      '@volar/vue-language-core': 1.0.3
-      '@volar/vue-typescript': 1.0.3
+      '@volar/vue-language-core': 1.0.7
+      '@volar/vue-typescript': 1.0.7
       typescript: 4.7.4
     dev: true
 
@@ -2150,6 +2252,32 @@ packages:
       '@vue/server-renderer': 3.2.40_vue@3.2.40
       '@vue/shared': 3.2.40
 
+  /vuetify/3.0.0-beta.13_vdkwhj2kz5kpysy3rwb432nm3y:
+    resolution: {integrity: sha512-CgDyKCIBZ0ogKUxRw3gNswx9GA6eSSp7otZcJapWJCVuon/RooQPQjf3bDuRb5ZpJ55NkX13ugjl2nq+b0U8SA==}
+    engines: {node: ^12.20 || >=14.13}
+    peerDependencies:
+      '@formatjs/intl': ^1.0.0 || ^2.0.0
+      vite-plugin-vuetify: ^1.0.0-alpha.12
+      vue: ^3.2.0
+      vue-i18n: ^9.0.0
+      webpack-plugin-vuetify: ^2.0.0-alpha.11
+    peerDependenciesMeta:
+      '@formatjs/intl':
+        optional: true
+      vite-plugin-vuetify:
+        optional: true
+      vue-i18n:
+        optional: true
+      webpack-plugin-vuetify:
+        optional: true
+    dependencies:
+      vite-plugin-vuetify: 1.0.0-alpha.17_l4pgesydsz3cvwqxhtnrp3zlwq
+      vue: 3.2.40
+
+  /webfontloader/1.6.28:
+    resolution: {integrity: sha512-Egb0oFEga6f+nSgasH3E0M405Pzn6y3/9tOVanv/DLfa1YBIgcv90L18YyWnvXkRbIM17v5Kv6IT2N6g1x5tvQ==}
+    dev: false
+
   /which-boxed-primitive/1.0.2:
     resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
     dependencies:
diff --git a/nextcloud_backup/frontend/src/App.vue b/nextcloud_backup/frontend/src/App.vue
index d05208d..aea9181 100644
--- a/nextcloud_backup/frontend/src/App.vue
+++ b/nextcloud_backup/frontend/src/App.vue
@@ -1,47 +1,15 @@
-<script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
-</script>
-
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
-
-  <main>
-    <TheWelcome />
-  </main>
+  <v-app>
+    <v-main>
+      <navbar-component></navbar-component>
+      <message-bar></message-bar>
+    </v-main>
+  </v-app>
 </template>
 
-<style scoped>
-header {
-  line-height: 1.5;
-}
+<script setup lang="ts">
+import NavbarComponent from "./components/NavbarComponent.vue";
+import MessageBar from "./components/MessageBar.vue";
+</script>
 
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-}
-</style>
+<style scoped></style>
diff --git a/nextcloud_backup/frontend/src/assets/logo.svg b/nextcloud_backup/frontend/src/assets/logo.svg
index bc826fe..66337de 100644
--- a/nextcloud_backup/frontend/src/assets/logo.svg
+++ b/nextcloud_backup/frontend/src/assets/logo.svg
@@ -1 +1,63 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"  xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 134.44119 72.098951"
+   enable-background="new 0 0 196.6 72"
+   xml:space="preserve"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="Nextcloud_Logo.svg"
+   width="134.44118"
+   height="72.098953"
+   inkscape:export-filename="nextcloud-logo-white-transparent.png"
+   inkscape:export-xdpi="300.09631"
+   inkscape:export-ydpi="300.09631"><metadata
+     id="metadata20"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs18" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1020"
+     id="namedview16"
+     showgrid="false"
+     inkscape:zoom="4"
+     inkscape:cx="75.820577"
+     inkscape:cy="10.858529"
+     inkscape:current-layer="Layer_1"
+     fit-margin-top="10"
+     fit-margin-left="10"
+     fit-margin-right="10"
+     fit-margin-bottom="10"
+     inkscape:window-x="1440"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:snap-bbox-midpoints="true"
+     inkscape:snap-page="true" /><path
+     style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5.59273672;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     d="M 67.307795,10 C 55.445624,10 45.391448,18.041769 42.275325,28.937463 39.567089,23.158221 33.698247,19.109372 26.93836,19.109372 17.64192,19.109372 10,26.751292 10,36.047732 c 0,9.296429 7.64192,16.941836 16.93836,16.941836 6.759887,0 12.628729,-4.05132 15.336965,-9.831567 3.116123,10.896507 13.170299,18.940949 25.03247,18.940949 11.77445,0 21.77736,-7.92312 24.973175,-18.696727 2.758286,5.649027 8.55449,9.587345 15.21836,9.587345 9.29644,0 16.94184,-7.645407 16.94184,-16.941836 0,-9.29644 -7.6454,-16.93836 -16.94184,-16.93836 -6.66387,0 -12.460074,3.935846 -15.21836,9.583869 C 89.085155,17.920467 79.082245,10 67.307795,10 Z m 0,9.943213 c 8.954599,0 16.108025,7.14995 16.108025,16.104519 0,8.954569 -7.153426,16.108005 -16.108025,16.108005 -8.954549,0 -16.104498,-7.153436 -16.104498,-16.108005 0,-8.954569 7.149949,-16.104519 16.104498,-16.104519 z M 26.93836,29.052595 c 3.923195,0 6.998623,3.071921 6.998623,6.995137 0,3.923205 -3.075428,6.998623 -6.998623,6.998623 -3.923216,0 -6.995147,-3.075418 -6.995147,-6.998623 0,-3.923216 3.071931,-6.995137 6.995147,-6.995137 z m 80.56097,0 c 3.92322,0 6.99862,3.071921 6.99862,6.995137 0,3.923205 -3.07542,6.998623 -6.99862,6.998623 -3.9232,0 -6.99513,-3.075418 -6.99513,-6.998623 0,-3.923216 3.07195,-6.995137 6.99513,-6.995137 z"
+     id="XMLID_107_"
+     inkscape:connector-curvature="0" /></svg>
\ No newline at end of file
diff --git a/nextcloud_backup/frontend/src/components/HelloWorld.vue b/nextcloud_backup/frontend/src/components/HelloWorld.vue
deleted file mode 100644
index 8901544..0000000
--- a/nextcloud_backup/frontend/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  msg: string
-}>()
-</script>
-
-<template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully created a project with
-      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
-      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
-    </h3>
-  </div>
-</template>
-
-<style scoped>
-h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
-  top: -10px;
-}
-
-h3 {
-  font-size: 1.2rem;
-}
-
-.greetings h1,
-.greetings h3 {
-  text-align: center;
-}
-
-@media (min-width: 1024px) {
-  .greetings h1,
-  .greetings h3 {
-    text-align: left;
-  }
-}
-</style>
diff --git a/nextcloud_backup/frontend/src/components/MessageBar.vue b/nextcloud_backup/frontend/src/components/MessageBar.vue
new file mode 100644
index 0000000..3a40f78
--- /dev/null
+++ b/nextcloud_backup/frontend/src/components/MessageBar.vue
@@ -0,0 +1,137 @@
+<template>
+  <v-menu activator="#message-btn" :close-on-content-click="false">
+    <v-sheet width="500" border rounded>
+      <v-toolbar color="surface" density="compact">
+        <div class="d-flex justify-center w-100">
+          <h4>Messages</h4>
+        </div>
+      </v-toolbar>
+      <v-divider></v-divider>
+      <v-responsive max-height="350px" class="overflow-y-auto">
+        <v-list class="py-0">
+          <template v-for="(item, index) in messages" :key="item.message">
+            <v-divider v-if="index != 0"></v-divider>
+            <v-list-item :class="{ 'bg-brown-darken-4': !item.viewed }">
+              <v-list-item-title>
+                {{ item.message }}
+              </v-list-item-title>
+              <template v-slot:prepend>
+                <v-icon
+                  :icon="getMessageIcon(item.type)"
+                  :color="getMessageColor(item.type)"
+                  class="mr-3"
+                ></v-icon>
+              </template>
+              <template v-slot:append>
+                <v-btn
+                  v-if="item.detail"
+                  variant="text"
+                  icon
+                  color="secondary"
+                  @click="show[index] = show[index] ? false : true"
+                  size="small"
+                >
+                  <v-icon>mdi-information</v-icon>
+                </v-btn>
+                <v-btn
+                  color="success"
+                  variant="text"
+                  @click.stop
+                  icon
+                  v-if="!item.viewed"
+                  size="small"
+                >
+                  <v-icon>mdi-check</v-icon>
+                </v-btn>
+                <div class="text-caption text-disabled ml-1">
+                  {{ getTimeDelta(item.time) }}
+                </div>
+              </template>
+            </v-list-item>
+            <v-expand-transition v-if="item.detail">
+              <div v-show="show[index]">
+                <v-divider class="mx-3"></v-divider>
+                <v-card class="mx-3 my-2" variant="outlined" color="secondary">
+                  <v-card-text>
+                    {{ item.detail }}
+                  </v-card-text>
+                </v-card>
+              </div>
+            </v-expand-transition>
+          </template>
+        </v-list>
+      </v-responsive>
+    </v-sheet>
+  </v-menu>
+</template>
+
+<script setup lang="ts">
+import { getMessages } from "@/services/messageService";
+import { MessageType, type Message } from "@/types/messages";
+import { DateTime } from "luxon";
+import { ref } from "vue";
+
+const messages = ref<Message[]>([]);
+
+getMessages().then((values) => {
+  messages.value = values;
+});
+
+function getMessageColor(messageType: MessageType) {
+  switch (messageType) {
+    case MessageType.ERROR:
+      return "red";
+    case MessageType.WARN:
+      return "yellow";
+    case MessageType.INFO:
+      return "primary";
+    case MessageType.SUCCESS:
+      return "success";
+  }
+}
+
+function getMessageIcon(messageType: MessageType) {
+  switch (messageType) {
+    case MessageType.ERROR:
+      return "mdi-alert-octagram";
+    case MessageType.WARN:
+      return "mdi-alert";
+    case MessageType.INFO:
+      return "mdi-alert-circle";
+    case MessageType.SUCCESS:
+      return "mdi-check-circle";
+  }
+}
+
+function getTimeDelta(time: string) {
+  let duration = DateTime.now().diff(DateTime.fromISO(time), ["seconds"]);
+  if (duration.seconds < 60) {
+    return duration.toHuman({
+      maximumFractionDigits: 0,
+      unitDisplay: "short",
+    } as any);
+  }
+  duration = duration.shiftTo("minutes");
+  if (duration.minutes < 60) {
+    return duration.toHuman({
+      maximumFractionDigits: 0,
+      unitDisplay: "short",
+    } as any);
+  }
+
+  duration = duration.shiftTo("hours");
+  if (duration.hours < 24) {
+    return duration.toHuman({
+      maximumFractionDigits: 0,
+      unitDisplay: "short",
+    } as any);
+  } else {
+    return duration.shiftTo("days").toHuman({
+      maximumFractionDigits: 0,
+      unitDisplay: "short",
+    } as any);
+  }
+}
+
+const show = ref<boolean[]>([]);
+</script>
diff --git a/nextcloud_backup/frontend/src/components/NavbarComponent.vue b/nextcloud_backup/frontend/src/components/NavbarComponent.vue
new file mode 100644
index 0000000..daf8e28
--- /dev/null
+++ b/nextcloud_backup/frontend/src/components/NavbarComponent.vue
@@ -0,0 +1,63 @@
+<template>
+  <v-app-bar class="bg-primary">
+    <v-app-bar-title>
+      <div class="d-flex flex-row align-center">
+        <div>
+          <v-img :src="logoUrl" width="80"></v-img>
+        </div>
+        <h4>Nextcloud Backup</h4>
+      </div>
+    </v-app-bar-title>
+    <v-spacer></v-spacer>
+    <v-btn icon id="message-btn">
+      <v-icon>mdi-bell</v-icon>
+    </v-btn>
+    <v-btn icon @click="emit('settingClick')">
+      <v-icon>mdi-cog</v-icon>
+    </v-btn>
+  </v-app-bar>
+</template>
+
+<script setup lang="ts">
+import logoUrl from "../assets/logo.svg";
+
+const emit = defineEmits<{
+  (e: "settingClick"): void;
+  (e: "notificationClick"): void;
+}>();
+</script>
+<style scoped>
+.shake {
+  animation: shake 1.3s cubic-bezier(0.36, 0.07, 0.19, 0.97) both infinite;
+  transform: rotate(0deg);
+}
+@keyframes shake {
+  20% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(10deg);
+  }
+  30% {
+    transform: rotate(0deg);
+  }
+  35% {
+    transform: rotate(-10deg);
+  }
+  40% {
+    transform: rotate(0eg);
+  }
+  45% {
+    transform: rotate(10deg);
+  }
+  50% {
+    transform: rotate(0deg);
+  }
+  55% {
+    transform: rotate(-10deg);
+  }
+  60% {
+    transform: rotate(0deg);
+  }
+}
+</style>
diff --git a/nextcloud_backup/frontend/src/components/TheWelcome.vue b/nextcloud_backup/frontend/src/components/TheWelcome.vue
deleted file mode 100644
index a70765c..0000000
--- a/nextcloud_backup/frontend/src/components/TheWelcome.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<script setup lang="ts">
-import WelcomeItem from './WelcomeItem.vue'
-import DocumentationIcon from './icons/IconDocumentation.vue'
-import ToolingIcon from './icons/IconTooling.vue'
-import EcosystemIcon from './icons/IconEcosystem.vue'
-import CommunityIcon from './icons/IconCommunity.vue'
-import SupportIcon from './icons/IconSupport.vue'
-</script>
-
-<template>
-  <WelcomeItem>
-    <template #icon>
-      <DocumentationIcon />
-    </template>
-    <template #heading>Documentation</template>
-
-    Vue’s
-    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
-    provides you with all information you need to get started.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <ToolingIcon />
-    </template>
-    <template #heading>Tooling</template>
-
-    This project is served and bundled with
-    <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
-    recommended IDE setup is
-    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
-    you need to test your components and web pages, check out
-    <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
-    <a href="https://on.cypress.io/component" target="_blank">Cypress Component Testing</a>.
-
-    <br />
-
-    More instructions are available in <code>README.md</code>.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <EcosystemIcon />
-    </template>
-    <template #heading>Ecosystem</template>
-
-    Get official tools and libraries for your project:
-    <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
-    <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
-    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
-    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
-    you need more resources, we suggest paying
-    <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
-    a visit.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <CommunityIcon />
-    </template>
-    <template #heading>Community</template>
-
-    Got stuck? Ask your question on
-    <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
-    Discord server, or
-    <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
-      >StackOverflow</a
-    >. You should also subscribe to
-    <a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
-    the official
-    <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
-    twitter account for latest news in the Vue world.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <SupportIcon />
-    </template>
-    <template #heading>Support Vue</template>
-
-    As an independent project, Vue relies on community backing for its sustainability. You can help
-    us by
-    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
-  </WelcomeItem>
-</template>
diff --git a/nextcloud_backup/frontend/src/components/WelcomeItem.vue b/nextcloud_backup/frontend/src/components/WelcomeItem.vue
deleted file mode 100644
index ba0def3..0000000
--- a/nextcloud_backup/frontend/src/components/WelcomeItem.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<template>
-  <div class="item">
-    <i>
-      <slot name="icon"></slot>
-    </i>
-    <div class="details">
-      <h3>
-        <slot name="heading"></slot>
-      </h3>
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.item {
-  margin-top: 2rem;
-  display: flex;
-}
-
-.details {
-  flex: 1;
-  margin-left: 1rem;
-}
-
-i {
-  display: flex;
-  place-items: center;
-  place-content: center;
-  width: 32px;
-  height: 32px;
-
-  color: var(--color-text);
-}
-
-h3 {
-  font-size: 1.2rem;
-  font-weight: 500;
-  margin-bottom: 0.4rem;
-  color: var(--color-heading);
-}
-
-@media (min-width: 1024px) {
-  .item {
-    margin-top: 0;
-    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
-  }
-
-  i {
-    top: calc(50% - 25px);
-    left: -26px;
-    position: absolute;
-    border: 1px solid var(--color-border);
-    background: var(--color-background);
-    border-radius: 8px;
-    width: 50px;
-    height: 50px;
-  }
-
-  .item:before {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    bottom: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:after {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    top: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:first-of-type:before {
-    display: none;
-  }
-
-  .item:last-of-type:after {
-    display: none;
-  }
-}
-</style>
diff --git a/nextcloud_backup/frontend/src/components/icons/IconCommunity.vue b/nextcloud_backup/frontend/src/components/icons/IconCommunity.vue
deleted file mode 100644
index 2dc8b05..0000000
--- a/nextcloud_backup/frontend/src/components/icons/IconCommunity.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
-    <path
-      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
-    />
-  </svg>
-</template>
diff --git a/nextcloud_backup/frontend/src/components/icons/IconDocumentation.vue b/nextcloud_backup/frontend/src/components/icons/IconDocumentation.vue
deleted file mode 100644
index 6d4791c..0000000
--- a/nextcloud_backup/frontend/src/components/icons/IconDocumentation.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
-    <path
-      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
-    />
-  </svg>
-</template>
diff --git a/nextcloud_backup/frontend/src/components/icons/IconEcosystem.vue b/nextcloud_backup/frontend/src/components/icons/IconEcosystem.vue
deleted file mode 100644
index c3a4f07..0000000
--- a/nextcloud_backup/frontend/src/components/icons/IconEcosystem.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
-    <path
-      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
-    />
-  </svg>
-</template>
diff --git a/nextcloud_backup/frontend/src/components/icons/IconSupport.vue b/nextcloud_backup/frontend/src/components/icons/IconSupport.vue
deleted file mode 100644
index 7452834..0000000
--- a/nextcloud_backup/frontend/src/components/icons/IconSupport.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
-    <path
-      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
-    />
-  </svg>
-</template>
diff --git a/nextcloud_backup/frontend/src/components/icons/IconTooling.vue b/nextcloud_backup/frontend/src/components/icons/IconTooling.vue
deleted file mode 100644
index 660598d..0000000
--- a/nextcloud_backup/frontend/src/components/icons/IconTooling.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    aria-hidden="true"
-    role="img"
-    class="iconify iconify--mdi"
-    width="24"
-    height="24"
-    preserveAspectRatio="xMidYMid meet"
-    viewBox="0 0 24 24"
-  >
-    <path
-      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
-      fill="currentColor"
-    ></path>
-  </svg>
-</template>
diff --git a/nextcloud_backup/frontend/src/main.ts b/nextcloud_backup/frontend/src/main.ts
index 8b9d201..f84a443 100644
--- a/nextcloud_backup/frontend/src/main.ts
+++ b/nextcloud_backup/frontend/src/main.ts
@@ -1,11 +1,8 @@
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
-import App from './App.vue'
+import { createApp } from "vue";
+import App from "./App.vue";
+import vuetify from "./plugins/vuetify";
+import { loadFonts } from "./plugins/webfontloader";
 
-import './assets/main.css'
+loadFonts();
 
-const app = createApp(App)
-
-app.use(createPinia())
-
-app.mount('#app')
+createApp(App).use(vuetify).mount("#app");
diff --git a/nextcloud_backup/frontend/src/plugins/vuetify.ts b/nextcloud_backup/frontend/src/plugins/vuetify.ts
new file mode 100644
index 0000000..0661e9d
--- /dev/null
+++ b/nextcloud_backup/frontend/src/plugins/vuetify.ts
@@ -0,0 +1,25 @@
+// Styles
+import "@mdi/font/css/materialdesignicons.css";
+import "vuetify/styles";
+
+// Vuetify
+import { createVuetify } from "vuetify";
+
+const darkTheme = {
+  dark: true,
+  colors: {
+    primary: "#0091ea",
+  },
+};
+
+export default createVuetify(
+  // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+  {
+    theme: {
+      defaultTheme: "darkTheme",
+      themes: {
+        darkTheme,
+      },
+    },
+  }
+);
diff --git a/nextcloud_backup/frontend/src/plugins/webfontloader.ts b/nextcloud_backup/frontend/src/plugins/webfontloader.ts
new file mode 100644
index 0000000..e6abbe7
--- /dev/null
+++ b/nextcloud_backup/frontend/src/plugins/webfontloader.ts
@@ -0,0 +1,15 @@
+/**
+ * plugins/webfontloader.js
+ *
+ * webfontloader documentation: https://github.com/typekit/webfontloader
+ */
+
+export async function loadFonts () {
+  const webFontLoader = await import(/* webpackChunkName: "webfontloader" */'webfontloader')
+
+  webFontLoader.load({
+    google: {
+      families: ['Roboto:100,300,400,500,700,900&display=swap'],
+    },
+  })
+}
diff --git a/nextcloud_backup/frontend/src/services/kyClient.ts b/nextcloud_backup/frontend/src/services/kyClient.ts
new file mode 100644
index 0000000..8351e9e
--- /dev/null
+++ b/nextcloud_backup/frontend/src/services/kyClient.ts
@@ -0,0 +1,7 @@
+import ky from "ky";
+
+const kyClient = ky.create({
+  prefixUrl: "http://localhost:3000/v2/api",
+});
+
+export default kyClient;
diff --git a/nextcloud_backup/frontend/src/services/messageService.ts b/nextcloud_backup/frontend/src/services/messageService.ts
new file mode 100644
index 0000000..e55871d
--- /dev/null
+++ b/nextcloud_backup/frontend/src/services/messageService.ts
@@ -0,0 +1,6 @@
+import type { Message } from "@/types/messages";
+import kyClient from "./kyClient";
+
+export function getMessages() {
+  return kyClient.get("messages").json<Message[]>();
+}
diff --git a/nextcloud_backup/frontend/src/stores/counter.ts b/nextcloud_backup/frontend/src/stores/counter.ts
index b6757ba..5a9ab82 100644
--- a/nextcloud_backup/frontend/src/stores/counter.ts
+++ b/nextcloud_backup/frontend/src/stores/counter.ts
@@ -1,12 +1,8 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
+import { ref } from "vue";
+import { defineStore } from "pinia";
+import type { Message } from "@/types/messages";
 
-export const useCounterStore = defineStore('counter', () => {
-  const count = ref(0)
-  const doubleCount = computed(() => count.value * 2)
-  function increment() {
-    count.value++
-  }
-
-  return { count, doubleCount, increment }
-})
+export const useMessageStore = defineStore("message", () => {
+  const messages = ref<Message[]>([]);
+  return { messages };
+});
diff --git a/nextcloud_backup/frontend/src/types/messages.ts b/nextcloud_backup/frontend/src/types/messages.ts
new file mode 100644
index 0000000..192a5a0
--- /dev/null
+++ b/nextcloud_backup/frontend/src/types/messages.ts
@@ -0,0 +1,16 @@
+
+
+export enum MessageType {
+  ERROR = "ERROR",
+  WARN = "WARN",
+  INFO = "INFO",
+  SUCCESS = "SUCCESS",
+}
+
+export interface Message {
+  time: string;
+  type: MessageType;
+  message: string;
+  viewed: boolean;
+  detail?: string;
+}
diff --git a/nextcloud_backup/frontend/tsconfig.config.json b/nextcloud_backup/frontend/tsconfig.config.json
index c2d3a30..bc56e4f 100644
--- a/nextcloud_backup/frontend/tsconfig.config.json
+++ b/nextcloud_backup/frontend/tsconfig.config.json
@@ -3,6 +3,6 @@
   "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"],
   "compilerOptions": {
     "composite": true,
-    "types": ["node"]
+    "types": ["node", "vuetify"]
   }
 }
diff --git a/nextcloud_backup/frontend/vite.config.ts b/nextcloud_backup/frontend/vite.config.ts
index de5cb31..8ac9b73 100644
--- a/nextcloud_backup/frontend/vite.config.ts
+++ b/nextcloud_backup/frontend/vite.config.ts
@@ -1,14 +1,18 @@
-import { fileURLToPath, URL } from 'node:url'
+import { fileURLToPath, URL } from "node:url";
 
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+
+// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
+import vuetify from "vite-plugin-vuetify";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), vuetify({ autoImport: true })],
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
-    }
-  }
-})
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+  base: "",
+});