diff --git a/lib/towerops_web/components/layouts.ex b/lib/towerops_web/components/layouts.ex
index 346f25d1..b263eaa6 100644
--- a/lib/towerops_web/components/layouts.ex
+++ b/lib/towerops_web/components/layouts.ex
@@ -35,11 +35,39 @@ defmodule ToweropsWeb.Layouts do
 
   def app(assigns) do
     ~H"""
-    <main class="min-h-screen bg-zinc-50 px-4 py-12 sm:px-6 lg:px-8 dark:bg-zinc-950">
-      <div class="mx-auto max-w-2xl">
-        {render_slot(@inner_block)}
-      </div>
-    </main>
+    <div class="min-h-screen bg-zinc-50 dark:bg-zinc-950">
+      <header class="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900">
+        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <nav class="flex h-16 items-center justify-between">
+            <div class="flex items-center">
+              <.link navigate={~p"/"} class="text-xl font-bold text-zinc-900 dark:text-zinc-100">
+                Towerops
+              </.link>
+            </div>
+            <div class="flex items-center gap-x-4">
+              <.link
+                navigate={~p"/users/log-in"}
+                class="text-sm font-medium text-zinc-700 hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-zinc-100"
+              >
+                Log in
+              </.link>
+              <.link
+                navigate={~p"/users/register"}
+                class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-500"
+              >
+                Sign up
+              </.link>
+            </div>
+          </nav>
+        </div>
+      </header>
+
+      <main class="px-4 py-12 sm:px-6 lg:px-8">
+        <div class="mx-auto max-w-2xl">
+          {render_slot(@inner_block)}
+        </div>
+      </main>
+    </div>
 
     <.flash_group flash={@flash} />
     """