diff --git a/apps/website/src/routes/+layout.svelte b/apps/website/src/routes/+layout.svelte
index 3153e95d8..23fcd7133 100644
--- a/apps/website/src/routes/+layout.svelte
+++ b/apps/website/src/routes/+layout.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
 	import '../app.css';
+    import Header from './header.svelte';
 	
 	let { children } = $props();
 </script>
 
+<Header />
+
 {@render children()}
diff --git a/apps/website/src/routes/+page.svelte b/apps/website/src/routes/+page.svelte
index cc88df0ea..3f6013a9d 100644
--- a/apps/website/src/routes/+page.svelte
+++ b/apps/website/src/routes/+page.svelte
@@ -1,2 +1,2 @@
-<h1>Welcome to SvelteKit</h1>
+<h1>Welcome to SvelteKitt</h1>
 <p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
diff --git a/apps/website/src/routes/header.svelte b/apps/website/src/routes/header.svelte
new file mode 100644
index 000000000..70fc8037f
--- /dev/null
+++ b/apps/website/src/routes/header.svelte
@@ -0,0 +1,18 @@
+<header class="header">
+    <div class="container mx-auto flex items-center">
+        <div class="header-logo">
+            Logo goes here.
+        </div>
+
+        <div class="group w-full">
+            <nav class="header-nav">
+                <ul class="flex items-center justify-end gap-4">
+                    <li><a href="/">Home</a></li>
+                    <li><a href="/about">About</a></li>
+                    <li><a href="/services">Services</a></li>
+                    <li><a href="/contact">Contact</a></li>
+                </ul>
+            </nav>
+        </div>
+    </div>
+</header>
\ No newline at end of file