diff --git a/src/components/Header.astro b/src/components/Header.astro
new file mode 100644
index 0000000..c582951
--- /dev/null
+++ b/src/components/Header.astro
@@ -0,0 +1,13 @@
+
+<div class="flex w-full items-center bg-yellow-100 p-5">
+    <a class="flex" href="/">
+        <p class=" text-3xl">Reci</p>
+        <p class=" text-3xl text-amber-500">pie</p>
+        🥧
+    </a>
+
+    <div class="flex ml-10 space-x-5">
+        <!-- <span>new</span>
+        <span>sf</span> -->
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/layouts/base.astro b/src/layouts/base.astro
index 8ab02cb..42a0407 100644
--- a/src/layouts/base.astro
+++ b/src/layouts/base.astro
@@ -1,5 +1,6 @@
 ---
 import BaseHead from "../components/BaseHead.astro";
+import Header from "@/components/Header";
 ---
 
 <html lang=en>
@@ -8,6 +9,7 @@ import BaseHead from "../components/BaseHead.astro";
 	</head>
 	<body>
 		<main id="main" class="flex-1">
+			<Header/>
 			<slot />
 		</main>
 	</body>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a26402d..906caf3 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -6,13 +6,7 @@ import OverviewCard from "@/components/Card/OverviewCard"
 const recipies = await client.collection("recipes").getFullList()
 ---
 
-<PageLayout>
-	<div class="flex w-full bg-yellow-100 p-5">
-		<p class=" text-3xl">Reci</p>
-		<p class=" text-3xl text-amber-500">pie</p>
-		🥧
-	</div>
-	
+<PageLayout>	
 	<div id="content" class="p-5 pt-2">
 		<!-- <p class="pb-2">What would you like today?</p> -->
 
