diff --git a/web/components.d.ts b/web/components.d.ts
index 042e1de..fd226cb 100644
--- a/web/components.d.ts
+++ b/web/components.d.ts
@@ -7,11 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    CategoryContainer: typeof import('./src/components/CategoryContainer.vue')['default']
-    HeaderBar: typeof import('./src/components/HeaderBar.vue')['default']
-    ListViewElement: typeof import('./src/components/ListViewElement.vue')['default']
-    ListViewTemplate: typeof import('./src/components/ListViewTemplate.vue')['default']
-    SearchElement: typeof import('./src/components/SearchElement.vue')['default']
+    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     StartPage: typeof import('./src/components/StartPage.vue')['default']
   }
 }
diff --git a/web/package.json b/web/package.json
index 7ffc629..b57f7a7 100644
--- a/web/package.json
+++ b/web/package.json
@@ -2,13 +2,12 @@
   "name": "web",
   "version": "0.0.0",
   "scripts": {
-    "dev": "vite --host",
+    "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
     "@mdi/font": "6.2.95",
-    "lucide-vue-next": "^0.402.0",
     "roboto-fontface": "*",
     "vue": "^3.4.21",
     "vuetify": "^3.5.8"
@@ -17,6 +16,7 @@
     "@babel/types": "^7.24.0",
     "@types/node": "^20.11.25",
     "@vitejs/plugin-vue": "^5.0.4",
+    "sass": "^1.71.1",
     "typescript": "^5.4.2",
     "unplugin-fonts": "^1.1.1",
     "unplugin-vue-components": "^0.26.0",
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index dea8bf5..8ddb0fd 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -11,9 +11,6 @@ importers:
       '@mdi/font':
         specifier: 6.2.95
         version: 6.2.95
-      lucide-vue-next:
-        specifier: ^0.402.0
-        version: 0.402.0(vue@3.4.31(typescript@5.5.3))
       roboto-fontface:
         specifier: '*'
         version: 0.10.0
@@ -33,6 +30,9 @@ importers:
       '@vitejs/plugin-vue':
         specifier: ^5.0.4
         version: 5.0.5(vite@5.3.3(@types/node@20.14.9)(sass@1.77.6))(vue@3.4.31(typescript@5.5.3))
+      sass:
+        specifier: ^1.71.1
+        version: 1.77.6
       typescript:
         specifier: ^5.4.2
         version: 5.5.3
@@ -499,11 +499,6 @@ packages:
     resolution: {integrity: sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==}
     engines: {node: '>=14'}
 
-  lucide-vue-next@0.402.0:
-    resolution: {integrity: sha512-oxFgGTh/6aFDORHDCUlG8kvueJjEuR0dkX7HoSfNyCBDas8Dg8QQyZQFHo5D5aoThik+JAg80ByefkcJw85w9Q==}
-    peerDependencies:
-      vue: '>=3.0.1'
-
   magic-string@0.30.10:
     resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==}
 
@@ -1080,8 +1075,7 @@ snapshots:
 
   he@1.2.0: {}
 
-  immutable@4.3.6:
-    optional: true
+  immutable@4.3.6: {}
 
   is-binary-path@2.1.0:
     dependencies:
@@ -1101,10 +1095,6 @@ snapshots:
 
   local-pkg@0.4.3: {}
 
-  lucide-vue-next@0.402.0(vue@3.4.31(typescript@5.5.3)):
-    dependencies:
-      vue: 3.4.31(typescript@5.5.3)
-
   magic-string@0.30.10:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
@@ -1189,7 +1179,6 @@ snapshots:
       chokidar: 3.6.0
       immutable: 4.3.6
       source-map-js: 1.2.0
-    optional: true
 
   semver@7.6.2: {}
 
diff --git a/web/src/App.vue b/web/src/App.vue
index 62a0b86..2844785 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,25 +1,17 @@
 <template>
   <v-app>
     <v-main>
-      <HeaderBar />
-      <div class="categoryContainer">
-        <CategoryContainer licenseGroupName="Jetbrains Ultimate"/>
-        <CategoryContainer licenseGroupName="Microsoft"/>
-      </div>
-
+      <StartPage />
     </v-main>
   </v-app>
 </template>
 
 <script setup lang="ts">
-import HeaderBar from './components/HeaderBar.vue';
-import CategoryContainer from './components/CategoryContainer.vue';
+import StartPage from './components/StartPage.vue';
 
+  //
 </script>
 
 <style scoped>
-  .categoryContainer {
-    margin-left: 5%;
-    margin-top: 5%;
-  }
-</style>
+  
+</style>
\ No newline at end of file
diff --git a/web/src/components/CategoryContainer.vue b/web/src/components/CategoryContainer.vue
deleted file mode 100644
index 76d979b..0000000
--- a/web/src/components/CategoryContainer.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-  <div class="root">
-    <h2>{{ props.licenseGroupName }}:</h2>
-    <ListViewElement
-      licenseName="Jetbrains Ultimate 2024.2.1"
-      licenseKey="321z8321789"
-      startDate="12.12.2020"
-      endDate="13.12.2021"
-      amount="1"
-      tags=""
-      notes="No notes"
-    />
-    <!-- <ListViewElement
-      licenseName="Jetbrains Ultimate 2024.2.1"
-      key=""
-      startDate=""
-      endDate=""
-      amount=""
-      tags=""
-      notes=""
-    /> -->
-  </div>
-
-</template>
-
-<script setup lang="ts">
-  import { defineProps } from 'vue'
-  import ListViewElement from './ListViewElement.vue'
-
-  const props = defineProps({
-    licenseGroupName: String
-
-  })
-
-</script>
-
-
-<style scoped>
-  .root {
-    margin-top: 10px;
-  }
-
-</style>
diff --git a/web/src/components/HeaderBar.vue b/web/src/components/HeaderBar.vue
deleted file mode 100644
index d0cd6f7..0000000
--- a/web/src/components/HeaderBar.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template >
-  <v-row justify="end" class="header-component">
-    <v-col cols="auto">
-      <v-app-bar :elevation="0" color="cyan-darken-3">
-        <Building2 id="placeholderIcon"/>
-        <v-text-field
-          class="compact-form"
-          label="Search"
-          variant="solo"
-          prepend-icon="mdi-magnify"
-          hide-details
-          single-line
-          clearable
-          rounded="pill"
-        ></v-text-field>
-        <!-- <v-btn icon>
-        <v-icon>mdi-dots-vertical</v-icon>
-        </v-btn> -->
-        <CircleUser id="userIcon"/>
-      </v-app-bar>
-    </v-col>
-  </v-row>
-</template>
-
-<script setup lang="ts">
-  import { Building2 } from 'lucide-vue-next';
-  import { CircleUser } from 'lucide-vue-next';
-
-</script>
-
-<style scoped>
-
-.compact-form {
-    transform: scale(0.7);
-    transform-origin: left;
-}
-
-#placeholderIcon {
-  margin-right: 20%;
-  margin-left: 10px;
-}
-
-#userIcon {
-  margin-right: 15px;
-}
-</style>
diff --git a/web/src/components/ListViewElement.vue b/web/src/components/ListViewElement.vue
deleted file mode 100644
index 2c14de6..0000000
--- a/web/src/components/ListViewElement.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <v-sheet
-    elevation="4"
-    width="60vw"
-  >
-  <div>
-    licenseName: {{ props.licenseName }}
-    licenseKey: {{ props.licenseKey }}
-  </div>
-  </v-sheet>
-
-</template>
-
-<script setup lang="ts">
-  import { defineProps } from 'vue'
-
-
-  const props = defineProps({
-    licenseName: String,
-    licenseKey: String,
-    startDate: String,
-    endDate: String,
-    amount: Number,
-    tags: Array,
-    notes: String,
-  })
-
-</script>
-
-<style scoped>
-
-
-</style>
diff --git a/web/src/main.ts b/web/src/main.ts
index c793fd0..c8fc172 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -18,5 +18,3 @@ const app = createApp(App)
 registerPlugins(app)
 
 app.mount('#app')
-
-
diff --git a/web/src/plugins/vuetify.ts b/web/src/plugins/vuetify.ts
index 46ece96..7652788 100644
--- a/web/src/plugins/vuetify.ts
+++ b/web/src/plugins/vuetify.ts
@@ -14,6 +14,6 @@ import { createVuetify } from 'vuetify'
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
   theme: {
-    defaultTheme: 'light',
+    defaultTheme: 'dark',
   },
 })