diff --git a/src/components/header.tsx b/src/components/header.tsx
new file mode 100644
index 0000000..85644f6
--- /dev/null
+++ b/src/components/header.tsx
@@ -0,0 +1,38 @@
+import Html from "@kitajs/html";
+import { Session } from "lucia";
+
+export function Header({ session }: { session: Session }) {
+  return (
+    <div class="w-full mt-1">
+      {session ? (
+        <>
+          <p class="text-gray-800 float-left" safe>
+            We've been waiting for you, {session.user.name}.
+          </p>
+          <a
+            href="/api/auth/signout"
+            class="float-right i-octicon-sign-out text-white transition duration-200 hover:bg-black"
+          >
+            Log Out
+          </a>
+          {session.user.roles.includes("ADMIN") ? (
+            <a
+              href="/admin/new-post"
+              class="float-right i-octicon-diff-added text-white transition duration-200 hover:bg-black"
+            >
+              New Post
+            </a>
+          ) : null}
+        </>
+      ) : (
+        <a
+          href="/api/auth/login/github"
+          hx-boost="false"
+          class="float-right i-octicon-sign-in text-white transition duration-200 hover:bg-black"
+        >
+          Log In
+        </a>
+      )}
+    </div>
+  );
+}
diff --git a/src/pages/(admin)/new-post.tsx b/src/pages/(admin)/new-post.tsx
index 31c5f34..3542cad 100644
--- a/src/pages/(admin)/new-post.tsx
+++ b/src/pages/(admin)/new-post.tsx
@@ -1,5 +1,6 @@
 import Elysia from "elysia";
 import { BaseHtml } from "../../components/base";
+import { Header } from "../../components/header";
 import { ctx } from "../../context";
 
 export const newPost = new Elysia()
@@ -13,6 +14,7 @@ export const newPost = new Elysia()
 
     return html(
       <BaseHtml>
+        <Header session={session} />
         <script>{`
       tinymce.init({
         selector: '#new-post'
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index e036180..ec828c7 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,5 +1,6 @@
 import { Elysia } from "elysia";
 import { BaseHtml } from "../components/base";
+import { Header } from "../components/header";
 import { PostsList } from "../components/posts";
 import { ctx } from "../context";
 
@@ -8,35 +9,7 @@ export const index = new Elysia()
   .get("/", async ({ html, session }) => {
     return html(
       <BaseHtml>
-        <div class="w-full mt-1">
-          {session ? (
-            <>
-              <p class="text-gray-800 float-left" safe>
-                We've been waiting for you, {session.user.name}.
-              </p>
-              <a
-                href="/api/auth/signout"
-                class="float-right i-octicon-sign-out text-white transition duration-200 hover:bg-black"
-              >
-                Log Out
-              </a>
-              {session.user.roles.includes("ADMIN") ? (
-                <a
-                  href="/admin/new-post"
-                  class="float-right i-octicon-diff-added text-white transition duration-200 hover:bg-black"
-                >
-                  New Post
-                </a>
-              ) : null}
-            </>
-          ) : (
-            <a
-              href="/api/auth/login/github"
-              hx-boost="false"
-              class="float-right i-octicon-sign-in text-white transition duration-200 hover:bg-black"
-            ></a>
-          )}
-        </div>
+        <Header session={session} />
         <PostsList />
       </BaseHtml>,
     );