diff --git a/web/components.d.ts b/web/components.d.ts
index fd226cb..042e1de 100644
--- a/web/components.d.ts
+++ b/web/components.d.ts
@@ -7,7 +7,11 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
+    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']
     StartPage: typeof import('./src/components/StartPage.vue')['default']
   }
 }
diff --git a/web/package.json b/web/package.json
index b57f7a7..7ffc629 100644
--- a/web/package.json
+++ b/web/package.json
@@ -2,12 +2,13 @@
   "name": "web",
   "version": "0.0.0",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "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"
@@ -16,7 +17,6 @@
     "@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 8ddb0fd..dea8bf5 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
+      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
@@ -30,9 +33,6 @@ 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,6 +499,11 @@ 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==}
 
@@ -1075,7 +1080,8 @@ snapshots:
 
   he@1.2.0: {}
 
-  immutable@4.3.6: {}
+  immutable@4.3.6:
+    optional: true
 
   is-binary-path@2.1.0:
     dependencies:
@@ -1095,6 +1101,10 @@ 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
@@ -1179,6 +1189,7 @@ 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 2844785..62a0b86 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,17 +1,25 @@
 <template>
   <v-app>
     <v-main>
-      <StartPage />
+      <HeaderBar />
+      <div class="categoryContainer">
+        <CategoryContainer licenseGroupName="Jetbrains Ultimate"/>
+        <CategoryContainer licenseGroupName="Microsoft"/>
+      </div>
+
     </v-main>
   </v-app>
 </template>
 
 <script setup lang="ts">
-import StartPage from './components/StartPage.vue';
+import HeaderBar from './components/HeaderBar.vue';
+import CategoryContainer from './components/CategoryContainer.vue';
 
-  //
 </script>
 
 <style scoped>
-  
-</style>
\ No newline at end of file
+  .categoryContainer {
+    margin-left: 5%;
+    margin-top: 5%;
+  }
+</style>
diff --git a/web/src/components/CategoryContainer.vue b/web/src/components/CategoryContainer.vue
new file mode 100644
index 0000000..76d979b
--- /dev/null
+++ b/web/src/components/CategoryContainer.vue
@@ -0,0 +1,43 @@
+<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
new file mode 100644
index 0000000..a2e3e5c
--- /dev/null
+++ b/web/src/components/HeaderBar.vue
@@ -0,0 +1,50 @@
+<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>
+
+ .bg-main-color {
+
+ }
+
+.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
new file mode 100644
index 0000000..2c14de6
--- /dev/null
+++ b/web/src/components/ListViewElement.vue
@@ -0,0 +1,33 @@
+<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 c8fc172..3f99558 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -9,6 +9,7 @@ import { registerPlugins } from '@/plugins'
 
 // Components
 import App from './App.vue'
+import './assets/styles/variables.scss'
 
 // Composables
 import { createApp } from 'vue'
@@ -18,3 +19,5 @@ const app = createApp(App)
 registerPlugins(app)
 
 app.mount('#app')
+
+
diff --git a/web/src/plugins/vuetify.ts b/web/src/plugins/vuetify.ts
index 7652788..46ece96 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: 'dark',
+    defaultTheme: 'light',
   },
 })