diff --git a/apps/nextjs/src/app/_components/auth-showcase.tsx b/apps/nextjs/src/app/_components/auth-showcase.tsx
deleted file mode 100644
index 4bf5635..0000000
--- a/apps/nextjs/src/app/_components/auth-showcase.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { auth, signIn, signOut } from "@acme/auth";
-import { Button } from "@acme/ui/button";
-
-export async function AuthShowcase() {
-  const session = await auth();
-
-  if (!session) {
-    return (
-      <form>
-        <Button
-          size="lg"
-          formAction={async () => {
-            "use server";
-            await signIn();
-          }}
-        >
-          Sign in
-        </Button>
-      </form>
-    );
-  }
-
-  return (
-    <div className="flex flex-col items-center justify-center gap-4">
-      <p className="text-center text-2xl">
-        <span>Logged in as {session.user.name}</span>
-      </p>
-
-      <form>
-        <Button
-          size="lg"
-          formAction={async () => {
-            "use server";
-            await signOut();
-          }}
-        >
-          Sign out
-        </Button>
-      </form>
-    </div>
-  );
-}
diff --git a/apps/nextjs/src/app/_components/header.tsx b/apps/nextjs/src/app/_components/header.tsx
new file mode 100644
index 0000000..cf6b54b
--- /dev/null
+++ b/apps/nextjs/src/app/_components/header.tsx
@@ -0,0 +1,47 @@
+import Link from "next/link";
+
+import { auth, signIn, signOut } from "@acme/auth";
+import { Button } from "@acme/ui/button";
+
+export default async function Header() {
+  const session = await auth();
+  const user = session?.user;
+
+  return (
+    <header className="w-full bg-primary text-primary-foreground shadow-md">
+      <nav className="items-left mx-auto flex p-6 shadow-lg md:justify-center  lg:px-8">
+        <div className="space-x-4 pr-4 md:flex lg:flex-1">
+          <Link href="/">Home</Link>
+        </div>
+        {user ? (
+          <div className="flex items-center">
+            <p className="m-3 text-sm">Logged in as {user.name}</p>
+            <form>
+              <Button
+                size="lg"
+                formAction={async () => {
+                  "use server";
+                  await signOut();
+                }}
+              >
+                Log out
+              </Button>
+            </form>
+          </div>
+        ) : (
+          <form className="min-[320px]:px-4 sm:px-4 md:flex md:justify-end">
+            <Button
+              size="lg"
+              formAction={async () => {
+                "use server";
+                await signIn();
+              }}
+            >
+              Sign in
+            </Button>
+          </form>
+        )}
+      </nav>
+    </header>
+  );
+}
diff --git a/apps/nextjs/src/app/layout.tsx b/apps/nextjs/src/app/layout.tsx
index c3e4d7f..c28d58f 100644
--- a/apps/nextjs/src/app/layout.tsx
+++ b/apps/nextjs/src/app/layout.tsx
@@ -11,14 +11,15 @@ import { TRPCReactProvider } from "~/trpc/react";
 import "~/app/globals.css";
 
 import { env } from "~/env";
+import Header from "./_components/header";
 
-const PRODUCTION_DOMAINE =
+const PRODUCTION_DOMAIN =
   "https://shared-expensesnext-js-gnrsns-projects.vercel.app";
 
 export const metadata: Metadata = {
   metadataBase: new URL(
     env.VERCEL_ENV === "production"
-      ? PRODUCTION_DOMAINE
+      ? PRODUCTION_DOMAIN
       : "http://localhost:3000",
   ),
   title: "Shared expenses",
@@ -26,7 +27,7 @@ export const metadata: Metadata = {
   openGraph: {
     title: "Shared expenses",
     description: "",
-    url: PRODUCTION_DOMAINE,
+    url: PRODUCTION_DOMAIN,
     siteName: "Shared expenses",
   },
 };
@@ -49,6 +50,8 @@ export default function RootLayout(props: { children: React.ReactNode }) {
         )}
       >
         <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
+          <Header />
+
           <TRPCReactProvider>{props.children}</TRPCReactProvider>
           <div className="absolute bottom-4 right-4">
             <ThemeToggle />
diff --git a/apps/nextjs/src/app/page.tsx b/apps/nextjs/src/app/page.tsx
index 08982ba..ad96aca 100644
--- a/apps/nextjs/src/app/page.tsx
+++ b/apps/nextjs/src/app/page.tsx
@@ -1,7 +1,6 @@
 import { Suspense } from "react";
 
 import { api } from "~/trpc/server";
-import { AuthShowcase } from "./_components/auth-showcase";
 import {
   CreatePostForm,
   PostCardSkeleton,
@@ -20,7 +19,6 @@ export default function HomePage() {
         <h1 className="text-5xl font-extrabold tracking-tight sm:text-[5rem]">
           <span className="text-primary">Shared</span> Expenses
         </h1>
-        <AuthShowcase />
 
         <CreatePostForm />
         <div className="w-full max-w-2xl overflow-y-scroll">