diff --git a/package.json b/package.json
new file mode 100644
index 0000000..022a081
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+	"dependencies": {
+		"@tanstack/vue-query": "^5.51.0"
+	}
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 0000000..16dca2a
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,264 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      '@tanstack/vue-query':
+        specifier: ^5.51.0
+        version: 5.51.0(vue@3.4.31)
+
+packages:
+
+  '@babel/helper-string-parser@7.24.7':
+    resolution: {integrity: sha512-7MbVt6xrwFQbunH2DNQsAP5sTGxfqQtErvBIvIMi6EQnbgUOuVYanvREcmFrOPhoXBrTtjhhP+lW+o5UfK+tDg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.24.7':
+    resolution: {integrity: sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.24.7':
+    resolution: {integrity: sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/types@7.24.7':
+    resolution: {integrity: sha512-XEFXSlxiG5td2EJRe8vOmRbaXVgfcBlszKujvVmWIK/UpywWljQCfzAv3RQCGujWQ1RD4YYWEAqDXfuJiy8f5Q==}
+    engines: {node: '>=6.9.0'}
+
+  '@jridgewell/sourcemap-codec@1.5.0':
+    resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
+
+  '@tanstack/match-sorter-utils@8.15.1':
+    resolution: {integrity: sha512-PnVV3d2poenUM31ZbZi/yXkBu3J7kd5k2u51CGwwNojag451AjTH9N6n41yjXz2fpLeewleyLBmNS6+HcGDlXw==}
+    engines: {node: '>=12'}
+
+  '@tanstack/query-core@5.50.1':
+    resolution: {integrity: sha512-lpfhKPrJlyV2DSVcQb/HuozH3Av3kws4ge22agx+lNGpFkS4vLZ7St0l3GLwlAD+bqB+qXGex3JdRKUNtMviEQ==}
+
+  '@tanstack/vue-query@5.51.0':
+    resolution: {integrity: sha512-h9wP5Aib4Xwxyd/9Wvo/QHgm7ZJoaI0XmGO7c2MbZbnqioyRjrbi350qycjdwKWobhhSI1AOiKdLFgc2mbp2vg==}
+    peerDependencies:
+      '@vue/composition-api': ^1.1.2
+      vue: ^2.6.0 || ^3.3.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
+  '@vue/compiler-core@3.4.31':
+    resolution: {integrity: sha512-skOiodXWTV3DxfDhB4rOf3OGalpITLlgCeOwb+Y9GJpfQ8ErigdBUHomBzvG78JoVE8MJoQsb+qhZiHfKeNeEg==}
+
+  '@vue/compiler-dom@3.4.31':
+    resolution: {integrity: sha512-wK424WMXsG1IGMyDGyLqB+TbmEBFM78hIsOJ9QwUVLGrcSk0ak6zYty7Pj8ftm7nEtdU/DGQxAXp0/lM/2cEpQ==}
+
+  '@vue/compiler-sfc@3.4.31':
+    resolution: {integrity: sha512-einJxqEw8IIJxzmnxmJBuK2usI+lJonl53foq+9etB2HAzlPjAS/wa7r0uUpXw5ByX3/0uswVSrjNb17vJm1kQ==}
+
+  '@vue/compiler-ssr@3.4.31':
+    resolution: {integrity: sha512-RtefmITAje3fJ8FSg1gwgDhdKhZVntIVbwupdyZDSifZTRMiWxWehAOTCc8/KZDnBOcYQ4/9VWxsTbd3wT0hAA==}
+
+  '@vue/devtools-api@6.6.3':
+    resolution: {integrity: sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw==}
+
+  '@vue/reactivity@3.4.31':
+    resolution: {integrity: sha512-VGkTani8SOoVkZNds1PfJ/T1SlAIOf8E58PGAhIOUDYPC4GAmFA2u/E14TDAFcf3vVDKunc4QqCe/SHr8xC65Q==}
+
+  '@vue/runtime-core@3.4.31':
+    resolution: {integrity: sha512-LDkztxeUPazxG/p8c5JDDKPfkCDBkkiNLVNf7XZIUnJ+66GVGkP+TIh34+8LtPisZ+HMWl2zqhIw0xN5MwU1cw==}
+
+  '@vue/runtime-dom@3.4.31':
+    resolution: {integrity: sha512-2Auws3mB7+lHhTFCg8E9ZWopA6Q6L455EcU7bzcQ4x6Dn4cCPuqj6S2oBZgN2a8vJRS/LSYYxwFFq2Hlx3Fsaw==}
+
+  '@vue/server-renderer@3.4.31':
+    resolution: {integrity: sha512-D5BLbdvrlR9PE3by9GaUp1gQXlCNadIZytMIb8H2h3FMWJd4oUfkUTEH2wAr3qxoRz25uxbTcbqd3WKlm9EHQA==}
+    peerDependencies:
+      vue: 3.4.31
+
+  '@vue/shared@3.4.31':
+    resolution: {integrity: sha512-Yp3wtJk//8cO4NItOPpi3QkLExAr/aLBGZMmTtW9WpdwBCJpRM6zj9WgWktXAl8IDIozwNMByT45JP3tO3ACWA==}
+
+  csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+
+  entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+
+  estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+
+  magic-string@0.30.10:
+    resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==}
+
+  nanoid@3.3.7:
+    resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  picocolors@1.0.1:
+    resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==}
+
+  postcss@8.4.39:
+    resolution: {integrity: sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  remove-accents@0.5.0:
+    resolution: {integrity: sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==}
+
+  source-map-js@1.2.0:
+    resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
+    engines: {node: '>=0.10.0'}
+
+  to-fast-properties@2.0.0:
+    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
+    engines: {node: '>=4'}
+
+  vue-demi@0.14.8:
+    resolution: {integrity: sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==}
+    engines: {node: '>=12'}
+    hasBin: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
+  vue@3.4.31:
+    resolution: {integrity: sha512-njqRrOy7W3YLAlVqSKpBebtZpDVg21FPoaq1I7f/+qqBThK9ChAIjkRWgeP6Eat+8C+iia4P3OYqpATP21BCoQ==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+snapshots:
+
+  '@babel/helper-string-parser@7.24.7': {}
+
+  '@babel/helper-validator-identifier@7.24.7': {}
+
+  '@babel/parser@7.24.7':
+    dependencies:
+      '@babel/types': 7.24.7
+
+  '@babel/types@7.24.7':
+    dependencies:
+      '@babel/helper-string-parser': 7.24.7
+      '@babel/helper-validator-identifier': 7.24.7
+      to-fast-properties: 2.0.0
+
+  '@jridgewell/sourcemap-codec@1.5.0': {}
+
+  '@tanstack/match-sorter-utils@8.15.1':
+    dependencies:
+      remove-accents: 0.5.0
+
+  '@tanstack/query-core@5.50.1': {}
+
+  '@tanstack/vue-query@5.51.0(vue@3.4.31)':
+    dependencies:
+      '@tanstack/match-sorter-utils': 8.15.1
+      '@tanstack/query-core': 5.50.1
+      '@vue/devtools-api': 6.6.3
+      vue: 3.4.31
+      vue-demi: 0.14.8(vue@3.4.31)
+
+  '@vue/compiler-core@3.4.31':
+    dependencies:
+      '@babel/parser': 7.24.7
+      '@vue/shared': 3.4.31
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.0
+
+  '@vue/compiler-dom@3.4.31':
+    dependencies:
+      '@vue/compiler-core': 3.4.31
+      '@vue/shared': 3.4.31
+
+  '@vue/compiler-sfc@3.4.31':
+    dependencies:
+      '@babel/parser': 7.24.7
+      '@vue/compiler-core': 3.4.31
+      '@vue/compiler-dom': 3.4.31
+      '@vue/compiler-ssr': 3.4.31
+      '@vue/shared': 3.4.31
+      estree-walker: 2.0.2
+      magic-string: 0.30.10
+      postcss: 8.4.39
+      source-map-js: 1.2.0
+
+  '@vue/compiler-ssr@3.4.31':
+    dependencies:
+      '@vue/compiler-dom': 3.4.31
+      '@vue/shared': 3.4.31
+
+  '@vue/devtools-api@6.6.3': {}
+
+  '@vue/reactivity@3.4.31':
+    dependencies:
+      '@vue/shared': 3.4.31
+
+  '@vue/runtime-core@3.4.31':
+    dependencies:
+      '@vue/reactivity': 3.4.31
+      '@vue/shared': 3.4.31
+
+  '@vue/runtime-dom@3.4.31':
+    dependencies:
+      '@vue/reactivity': 3.4.31
+      '@vue/runtime-core': 3.4.31
+      '@vue/shared': 3.4.31
+      csstype: 3.1.3
+
+  '@vue/server-renderer@3.4.31(vue@3.4.31)':
+    dependencies:
+      '@vue/compiler-ssr': 3.4.31
+      '@vue/shared': 3.4.31
+      vue: 3.4.31
+
+  '@vue/shared@3.4.31': {}
+
+  csstype@3.1.3: {}
+
+  entities@4.5.0: {}
+
+  estree-walker@2.0.2: {}
+
+  magic-string@0.30.10:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+
+  nanoid@3.3.7: {}
+
+  picocolors@1.0.1: {}
+
+  postcss@8.4.39:
+    dependencies:
+      nanoid: 3.3.7
+      picocolors: 1.0.1
+      source-map-js: 1.2.0
+
+  remove-accents@0.5.0: {}
+
+  source-map-js@1.2.0: {}
+
+  to-fast-properties@2.0.0: {}
+
+  vue-demi@0.14.8(vue@3.4.31):
+    dependencies:
+      vue: 3.4.31
+
+  vue@3.4.31:
+    dependencies:
+      '@vue/compiler-dom': 3.4.31
+      '@vue/compiler-sfc': 3.4.31
+      '@vue/runtime-dom': 3.4.31
+      '@vue/server-renderer': 3.4.31(vue@3.4.31)
+      '@vue/shared': 3.4.31
diff --git a/web/components.d.ts b/web/components.d.ts
index f1d75da..802983b 100644
--- a/web/components.d.ts
+++ b/web/components.d.ts
@@ -12,5 +12,6 @@ declare module 'vue' {
     HeaderBar: typeof import('./src/components/HeaderBar.vue')['default']
     ListViewElement: typeof import('./src/components/ListViewElement.vue')['default']
     LoginPage: typeof import('./src/components/loginPage.vue')['default']
+    MainPage: typeof import('./src/components/MainPage.vue')['default']
   }
 }
diff --git a/web/package.json b/web/package.json
index 31e7076..d21b823 100644
--- a/web/package.json
+++ b/web/package.json
@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@mdi/font": "6.2.95",
+    "@tanstack/vue-query": "^5.51.0",
     "@vueuse/core": "^10.11.0",
     "axios": "^1.7.2",
     "lucide-vue-next": "^0.402.0",
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index e77ff72..858c496 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
       '@mdi/font':
         specifier: 6.2.95
         version: 6.2.95
+      '@tanstack/vue-query':
+        specifier: ^5.51.0
+        version: 5.51.0(vue@3.4.31(typescript@5.5.3))
       '@vueuse/core':
         specifier: ^10.11.0
         version: 10.11.0(vue@3.4.31(typescript@5.5.3))
@@ -325,6 +328,22 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@tanstack/match-sorter-utils@8.15.1':
+    resolution: {integrity: sha512-PnVV3d2poenUM31ZbZi/yXkBu3J7kd5k2u51CGwwNojag451AjTH9N6n41yjXz2fpLeewleyLBmNS6+HcGDlXw==}
+    engines: {node: '>=12'}
+
+  '@tanstack/query-core@5.50.1':
+    resolution: {integrity: sha512-lpfhKPrJlyV2DSVcQb/HuozH3Av3kws4ge22agx+lNGpFkS4vLZ7St0l3GLwlAD+bqB+qXGex3JdRKUNtMviEQ==}
+
+  '@tanstack/vue-query@5.51.0':
+    resolution: {integrity: sha512-h9wP5Aib4Xwxyd/9Wvo/QHgm7ZJoaI0XmGO7c2MbZbnqioyRjrbi350qycjdwKWobhhSI1AOiKdLFgc2mbp2vg==}
+    peerDependencies:
+      '@vue/composition-api': ^1.1.2
+      vue: ^2.6.0 || ^3.3.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
   '@types/estree@1.0.5':
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
 
@@ -362,6 +381,9 @@ packages:
   '@vue/compiler-ssr@3.4.31':
     resolution: {integrity: sha512-RtefmITAje3fJ8FSg1gwgDhdKhZVntIVbwupdyZDSifZTRMiWxWehAOTCc8/KZDnBOcYQ4/9VWxsTbd3wT0hAA==}
 
+  '@vue/devtools-api@6.6.3':
+    resolution: {integrity: sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw==}
+
   '@vue/language-core@2.0.26':
     resolution: {integrity: sha512-/lt6SfQ3O1yDAhPsnLv9iSUgXd1dMHqUm/t3RctfqjuwQf1LnftZ414X3UBn6aXT4MiwXWtbNJ4Z0NZWwDWgJQ==}
     peerDependencies:
@@ -614,6 +636,9 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
+  remove-accents@0.5.0:
+    resolution: {integrity: sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==}
+
   resolve@1.22.8:
     resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
     hasBin: true
@@ -949,6 +974,20 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.18.0':
     optional: true
 
+  '@tanstack/match-sorter-utils@8.15.1':
+    dependencies:
+      remove-accents: 0.5.0
+
+  '@tanstack/query-core@5.50.1': {}
+
+  '@tanstack/vue-query@5.51.0(vue@3.4.31(typescript@5.5.3))':
+    dependencies:
+      '@tanstack/match-sorter-utils': 8.15.1
+      '@tanstack/query-core': 5.50.1
+      '@vue/devtools-api': 6.6.3
+      vue: 3.4.31(typescript@5.5.3)
+      vue-demi: 0.14.8(vue@3.4.31(typescript@5.5.3))
+
   '@types/estree@1.0.5': {}
 
   '@types/node@20.14.9':
@@ -1004,6 +1043,8 @@ snapshots:
       '@vue/compiler-dom': 3.4.31
       '@vue/shared': 3.4.31
 
+  '@vue/devtools-api@6.6.3': {}
+
   '@vue/language-core@2.0.26(typescript@5.5.3)':
     dependencies:
       '@volar/language-core': 2.4.0-alpha.15
@@ -1268,6 +1309,8 @@ snapshots:
     dependencies:
       picomatch: 2.3.1
 
+  remove-accents@0.5.0: {}
+
   resolve@1.22.8:
     dependencies:
       is-core-module: 2.14.0
diff --git a/web/src/App.vue b/web/src/App.vue
index c85c58a..18f3200 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -5,35 +5,22 @@
         <loginPage />
       </div>
       <div v-else>
-        <HeaderBar />
-        <div class="ma-8">
-          <li>
-            <CategoryContainer licenseGroupName="Jetbrains Ultimate"/>
-            <CategoryContainer licenseGroupName="Microsoft"/>
-            <CategoryContainer licenseGroupName="Willy Wonker Online Movie"/>
-          </li>
-        </div>
+        <MainPage />
       </div>
-
     </v-main>
   </v-app>
 </template>
 
 <script setup lang="ts">
-import HeaderBar from './components/HeaderBar.vue';
-import CategoryContainer from './components/CategoryContainer.vue';
-import { store } from './store';
-
-
+import MainPage from "./components/MainPage.vue";
+import loginPage from "./components/loginPage.vue";
+import { store } from "./store";
 </script>
 
 <style scoped>
-  li {
-      list-style-type: none;
-  }
-
-  html,body,main {
-    background-color: #E3E3E3
-  }
+html,
+body,
+main {
+  background-color: #e3e3e3;
+}
 </style>
-
diff --git a/web/src/components/Clipboard.vue b/web/src/components/Clipboard.vue
index 325f529..da2fc5c 100644
--- a/web/src/components/Clipboard.vue
+++ b/web/src/components/Clipboard.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { useClipboard } from '@vueuse/core'
+import { useClipboard } from "@vueuse/core";
 
-const source = ref('Hello')
-const { text, copy, copied, isSupported } = useClipboard({ source })
+const source = ref("Hello");
+const { text, copy, copied, isSupported } = useClipboard({ source });
 </script>
 
 <template>
@@ -12,9 +12,9 @@ const { text, copy, copied, isSupported } = useClipboard({ source })
       <span v-if="!copied">Copy</span>
       <span v-else>Copied!</span>
     </button>
-    <p>Current copied: <code>{{ text || 'none' }}</code></p>
+    <p>
+      Current copied: <code>{{ text || "none" }}</code>
+    </p>
   </div>
-  <p v-else>
-    Your browser does not support Clipboard API
-  </p>
+  <p v-else>Your browser does not support Clipboard API</p>
 </template>
diff --git a/web/src/components/HeaderBar.vue b/web/src/components/HeaderBar.vue
index c48e935..a024763 100644
--- a/web/src/components/HeaderBar.vue
+++ b/web/src/components/HeaderBar.vue
@@ -10,7 +10,7 @@
         </v-btn>
         <v-dialog v-model="add" width="600" persistent>
           <v-card max-width="600">
-            <v-form>
+            <v-form @submit.prevent="submit">
               <v-card-title>
                 <span class="headline">Add License</span>
               </v-card-title>
@@ -101,11 +101,7 @@
                     ></v-btn>
                   </v-col>
                   <v-col>
-                    <v-btn
-                      class="ms-auto"
-                      text="Add"
-                      @click="add = false"
-                    ></v-btn>
+                    <v-btn class="ms-auto" text="Add" type="submit"></v-btn>
                   </v-col>
                 </v-row>
               </v-card-actions>
@@ -141,6 +137,8 @@
 
 <script setup lang="ts">
 import { store } from "@/store";
+import { SubmitEventPromise } from "vuetify";
+import { computed, ref } from "vue";
 import {
   Plus,
   LogOut,
@@ -148,13 +146,17 @@ import {
   CalendarCheck,
   CalendarX,
 } from "lucide-vue-next";
-import { computed, ref } from "vue";
 
 function handlelogout() {
   console.log("logout");
   store.setToken(null);
 }
 
+async function submit(event: SubmitEventPromise) {
+  const result = await event;
+  console.log(result);
+}
+
 const add = ref(false);
 // References for Add License Dialog
 const addLicenseName = ref<string>("");
@@ -162,7 +164,7 @@ const licenseNameRules = [
   (value: string) => {
     if (value) return true;
 
-    return "YOU MUST ENTER A LICENSE NAME";
+    return "YOU MUST ENTER (A LICENSE NAME)";
   },
 ];
 const addAmount = ref<number | undefined>();
diff --git a/web/src/components/MainPage.vue b/web/src/components/MainPage.vue
new file mode 100644
index 0000000..3d1ef99
--- /dev/null
+++ b/web/src/components/MainPage.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <HeaderBar />
+    <div class="ma-8">
+      <li>
+        <CategoryContainer licenseGroupName="Jetbrains Ultimate" />
+        <CategoryContainer licenseGroupName="Microsoft" />
+        <CategoryContainer licenseGroupName="Willy Wonker Online Movie" />
+      </li>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import HeaderBar from "./HeaderBar.vue";
+import CategoryContainer from "./CategoryContainer.vue";
+</script>
+
+<style scoped>
+li {
+  list-style-type: none;
+}
+</style>
diff --git a/web/src/components/loginPage.vue b/web/src/components/loginPage.vue
index dfc3b64..b9fc521 100644
--- a/web/src/components/loginPage.vue
+++ b/web/src/components/loginPage.vue
@@ -6,8 +6,19 @@
           <v-card-title class="text-h5">Login</v-card-title>
           <v-card-text>
             <v-form>
-              <v-text-field v-model="email" label="Email" required variant="outlined"></v-text-field>
-              <v-text-field v-model="password" label="Password" type="password" required variant="outlined"></v-text-field>
+              <v-text-field
+                v-model="email"
+                label="Email"
+                required
+                variant="outlined"
+              ></v-text-field>
+              <v-text-field
+                v-model="password"
+                label="Password"
+                type="password"
+                required
+                variant="outlined"
+              ></v-text-field>
             </v-form>
           </v-card-text>
           <v-card-actions>
@@ -19,32 +30,30 @@
   </v-container>
 </template>
 
-
-
 <script setup lang="ts">
-import { ref } from 'vue'
-import axios from 'axios'
-import { store } from '@/store';
+import { ref } from "vue";
+import axios from "axios";
+import { store } from "@/store";
 
-const email = ref('')
-const password = ref('')
+const email = ref("");
+const password = ref("");
 
 async function login() {
   try {
-    const response = await axios.post<string>("http://localhost:8080/api/v1/auth/login", { email: email.value, password: password.value})
+    const response = await axios.post<string>(
+      "http://localhost:8080/api/v1/auth/login",
+      { email: email.value, password: password.value }
+    );
     if (response.status === 200) {
-      store.setToken(response.data)
+      store.setToken(response.data);
     } else {
-      alert("Invalid Credentials")
+      alert("Invalid Credentials");
     }
-
-  } catch(err) {
-    alert("Invalid Credentials")
+  } catch (err) {
+    alert("Invalid Credentials");
   }
-
 }
 
-
 /*
 setTimeout(() => {
   console.log(email.value)
@@ -53,6 +62,4 @@ setTimeout(() => {
 */
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>