diff --git a/app/page.tsx b/app/page.tsx
index e142cc2..6879306 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,41 +1,8 @@
-import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
-import { cookies } from "next/headers";
-import Link from "next/link";
-import { buttonVariants } from "@/components/ui/button";
-import LogoutButton from "@/components/logout";
-
-export const dynamic = "force-dynamic";
-
+import Navbar from "@/components/navbar";
 export default async function Index() {
-  const supabase = createServerComponentClient({ cookies });
-
-  const {
-    data: { user },
-  } = await supabase.auth.getUser();
-
   return (
     <div className="w-full flex flex-col items-center">
-      <nav className="w-full flex justify-center border-b border-b-foreground/10 h-16">
-        <div className="w-full max-w-4xl flex justify-between items-center p-3 text-sm text-foreground">
-          <div />
-          <div>
-            {user ? (
-              <div className="flex items-center gap-4">
-                Hey, {user.email}!
-                <LogoutButton />
-              </div>
-            ) : (
-              <Link
-                href="/login"
-                className={buttonVariants({ variant: "default" })}
-              >
-                Login
-              </Link>
-            )}
-          </div>
-        </div>
-      </nav>
-
+      <Navbar />
       <div className="flex flex-col gap-14 max-w-4xl px-3 py-16 lg:py-24 text-foreground">
         <div className="flex flex-col items-center mb-4 lg:mb-12">
           <p className="text-3xl lg:text-4xl !leading-tight mx-auto max-w-xl text-center my-12">
diff --git a/components/navbar.tsx b/components/navbar.tsx
new file mode 100644
index 0000000..94025c0
--- /dev/null
+++ b/components/navbar.tsx
@@ -0,0 +1,38 @@
+import Link from "next/link";
+import { buttonVariants } from "@/components/ui/button";
+import LogoutButton from "@/components/logout";
+import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
+import { cookies } from "next/headers";
+
+export const dynamic = "force-dynamic";
+
+export default async function Navbar() {
+  const supabase = createServerComponentClient({ cookies });
+
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  return (
+    <nav className="w-full flex justify-center border-b border-b-foreground/10 h-16">
+      <div className="w-full max-w-4xl flex justify-between items-center p-3 text-sm text-foreground">
+        <div />
+        <div>
+          {user ? (
+            <div className="flex items-center gap-4">
+              Hey, {user.email}!
+              <LogoutButton />
+            </div>
+          ) : (
+            <Link
+              href="/login"
+              className={buttonVariants({ variant: "default" })}
+            >
+              Login
+            </Link>
+          )}
+        </div>
+      </div>
+    </nav>
+  );
+}