diff --git a/web/.env.example b/web/.env.example
new file mode 100644
index 0000000..408a3f1
--- /dev/null
+++ b/web/.env.example
@@ -0,0 +1 @@
+VITE_BACKEND_URL=
\ No newline at end of file
diff --git a/web/.gitignore b/web/.gitignore
index 0f94759..8a9fc8c 100644
--- a/web/.gitignore
+++ b/web/.gitignore
@@ -6,6 +6,7 @@ components.d.ts
 # local env files
 .env.local
 .env.*.local
+.env
 
 # Log files
 npm-debug.log*
diff --git a/web/index.html b/web/index.html
index 44eb85d..49ca4ed 100644
--- a/web/index.html
+++ b/web/index.html
@@ -5,7 +5,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Welcome to Vuetify 3</title>
+    <title>From TURBOMANN™ & Konsorten</title>
 </head>
 
 <body>
diff --git a/web/src/components/CategoryContainer.vue b/web/src/components/CategoryContainer.vue
index 195f1bc..2149374 100644
--- a/web/src/components/CategoryContainer.vue
+++ b/web/src/components/CategoryContainer.vue
@@ -1,22 +1,14 @@
 <template>
   <div class="root">
     <h2>{{ props.licenseGroupName }}:</h2>
-    <li>
+    <li v-for="license in licenses" :key="license.id">
       <ListViewElement
-        licenseName="Jetbrains Ultimate 2024.2.1"
-        licenseKey="321z8321789"
-        startDate="12.12.2020"
-        endDate="13.12.2021"
-        :amount=undefined
-        notes="No notes"
-      />
-      <ListViewElement
-      licenseName="Mockup 2"
-      licenseKey="XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX"
-      startDate=""
-      endDate=""
-      :amount=1
-      notes="No notes"
+        :licenseName="license.name"
+        :licenseKey="license.key"
+        startDate="license.start"
+        endDate="license.end"
+        :amount=license.amount
+        notes="license.notes"
       />
     </li>
     <!-- <ListViewElement
@@ -35,10 +27,16 @@
 <script setup lang="ts">
   import ListViewElement from './ListViewElement.vue'
 
-  const props = defineProps({
-    licenseGroupName: String
+  interface License {
+  name: string;
+  id: string;
+  start?: Date,
+  end?: Date,
+  key: string,
+  amount?: number,
+}
 
-  })
+  const props = defineProps<{ licenseGroupName: string, licenses: License[]}>()
 
 </script>
 
diff --git a/web/src/components/HeaderBar.vue b/web/src/components/HeaderBar.vue
index a024763..0268636 100644
--- a/web/src/components/HeaderBar.vue
+++ b/web/src/components/HeaderBar.vue
@@ -1,4 +1,4 @@
-<template>
+  <template>
   <div>
     <v-toolbar color="main" dark prominent>
       <img src="../assets/turbologo.svg" alt="logo" class="logo" width="75" />
@@ -150,7 +150,7 @@ import {
 function handlelogout() {
   console.log("logout");
   store.setToken(null);
-}
+} 
 
 async function submit(event: SubmitEventPromise) {
   const result = await event;
diff --git a/web/src/components/MainPage.vue b/web/src/components/MainPage.vue
index 3d1ef99..dce2feb 100644
--- a/web/src/components/MainPage.vue
+++ b/web/src/components/MainPage.vue
@@ -2,11 +2,13 @@
   <div>
     <HeaderBar />
     <div class="ma-8">
-      <li>
-        <CategoryContainer licenseGroupName="Jetbrains Ultimate" />
-        <CategoryContainer licenseGroupName="Microsoft" />
-        <CategoryContainer licenseGroupName="Willy Wonker Online Movie" />
-      </li>
+      <div v-if="isPending">Loading...</div>
+      <div v-else-if="isError">Error: {{ error?.message }}</div>
+      <ul v-else-if="data">
+        <li v-for="group in data" :key="group.id">
+          <CategoryContainer :licenseGroupName="group.name" :licenses="group.licenses" />
+        </li>
+      </ul>
     </div>
   </div>
 </template>
@@ -14,10 +16,40 @@
 <script setup lang="ts">
 import HeaderBar from "./HeaderBar.vue";
 import CategoryContainer from "./CategoryContainer.vue";
+import { useQuery } from "@tanstack/vue-query";
+import axios from "axios";
+import { store } from "@/store";
+
+interface LicenseGroup {
+  id: string,
+  name: string,
+  licenses: License[]
+}
+
+interface License {
+  name: string;
+  id: string;
+  start?: Date,
+  end?: Date,
+  key: string,
+  amount?: number,
+}
+
+const {isPending, isError, data, error} = useQuery({
+  queryKey: ["licenses"],
+  queryFn: async () => {
+    const res = await axios.get<LicenseGroup[]>(import.meta.env.VITE_BACKEND_URL + "/licenses", {
+      headers: {
+        Authorization: `Bearer ${store.token}`
+      }
+    })
+    return res.data
+  }
+})
 </script>
 
 <style scoped>
-li {
+li, ul {
   list-style-type: none;
 }
 </style>
diff --git a/web/src/components/loginPage.vue b/web/src/components/loginPage.vue
index b9fc521..ac58532 100644
--- a/web/src/components/loginPage.vue
+++ b/web/src/components/loginPage.vue
@@ -41,12 +41,12 @@ const password = ref("");
 async function login() {
   try {
     const response = await axios.post<string>(
-      "http://localhost:8080/api/v1/auth/login",
+      import.meta.env.VITE_BACKEND_URL + "/auth/login",
       { email: email.value, password: password.value }
     );
     if (response.status === 200) {
       store.setToken(response.data);
-    } else {
+    } else {  
       alert("Invalid Credentials");
     }
   } catch (err) {
diff --git a/web/src/plugins/index.ts b/web/src/plugins/index.ts
index 818042a..c840401 100644
--- a/web/src/plugins/index.ts
+++ b/web/src/plugins/index.ts
@@ -5,11 +5,13 @@
  */
 
 // Plugins
-import vuetify from './vuetify'
+import { VueQueryPlugin } from "@tanstack/vue-query";
+import vuetify from "./vuetify";
 
 // Types
-import type { App } from 'vue'
+import type { App } from "vue";
 
-export function registerPlugins (app: App) {
-  app.use(vuetify)
+export function registerPlugins(app: App) {
+  app.use(vuetify);
+  app.use(VueQueryPlugin);
 }
