diff --git a/frontend/src/lib/components/Addon.svelte b/frontend/src/lib/components/Addon.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/lib/components/Header.svelte b/frontend/src/lib/components/Header.svelte
index f2e2631..8771d23 100644
--- a/frontend/src/lib/components/Header.svelte
+++ b/frontend/src/lib/components/Header.svelte
@@ -1,11 +1,17 @@
-<script lang="ts">
+<script>
+	let name = "Yggdrasil";
+	let description = "The wow addon manager";
 </script>
 
-<template>
-	<header
-		class="flex h-22 items-center justify-center bg-base-100 shadow-lg sticky top-0 z-50 border-b
-   border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
-	>
-		Biiiiiiiig header
-	</header>
-</template>
+<header class="bg-gray-900 text-white py-4">
+  <div class="container mx-auto px-4 relative">
+    <div class="flex justify-center">
+      <h1 class="text-3xl font-bold text-center relative">
+        {name}
+        <p class="text-base text-gray-300 absolute left-full ml-4 whitespace-nowrap bottom-0">
+          {description}
+        </p>
+      </h1>
+    </div>
+  </div>
+</header>
diff --git a/frontend/src/lib/router/routes/Home.svelte b/frontend/src/lib/router/routes/Home.svelte
index 9dcede9..e2abe31 100644
--- a/frontend/src/lib/router/routes/Home.svelte
+++ b/frontend/src/lib/router/routes/Home.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
+	import { GetAddons } from "$wails/main/App";
 
+	const addons = GetAddons().then(addons => {
+		console.log(addons);
+	});
 </script>
 
 <template>