diff --git a/components/headerComponents/GitHubButton.tsx b/components/headerComponents/GitHubButton.tsx
new file mode 100644
index 0000000..23785ac
--- /dev/null
+++ b/components/headerComponents/GitHubButton.tsx
@@ -0,0 +1,20 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { Github } from "lucide-react"
+import Link from "next/link"
+
+interface GitHubButtonProps {
+  repoUrl?: string
+}
+
+export default function GitHubButton({ repoUrl = "https://github.com/lumina-rocks/lumina" }: GitHubButtonProps) {
+  return (
+    <Link href={repoUrl} target="_blank" rel="noopener noreferrer">
+      <Button variant="outline" size="icon" aria-label="View GitHub Repository">
+        <Github className="h-[1.2rem] w-[1.2rem]" />
+      </Button>
+    </Link>
+  )
+}
+
diff --git a/components/headerComponents/TopNavigation.tsx b/components/headerComponents/TopNavigation.tsx
index 74fcc26..74d2c9f 100644
--- a/components/headerComponents/TopNavigation.tsx
+++ b/components/headerComponents/TopNavigation.tsx
@@ -1,22 +1,22 @@
-"use client";
+"use client"
 
-import { siteConfig } from "@/config/site";
-import { useEffect, useState } from "react";
-import { TopNavigationItems } from "./TopNavigationItems";
-import { DropdownThemeMode } from "./DropdownThemeMode";
-import LoginButton from "./LoginButton";
-import { Button } from "../ui/button";
-import { AvatarDropdown } from "./AvatarDropdown";
-import RegisterButton from "./RegisterButton";
+import { siteConfig } from "@/config/site"
+import { useEffect, useState } from "react"
+import { TopNavigationItems } from "./TopNavigationItems"
+import { DropdownThemeMode } from "./DropdownThemeMode"
+import LoginButton from "./LoginButton"
+import { AvatarDropdown } from "./AvatarDropdown"
+import RegisterButton from "./RegisterButton"
+import GitHubButton from "@/components/headerComponents/GitHubButton"
 
 export function TopNavigation() {
-  const [pubkey, setPubkey] = useState<string | null>(null);
-  const [mounted, setMounted] = useState(false);
+  const [pubkey, setPubkey] = useState<string | null>(null)
+  const [mounted, setMounted] = useState(false)
 
   useEffect(() => {
-    setMounted(true);
-    setPubkey(window.localStorage.getItem('pubkey'));
-  }, []);
+    setMounted(true)
+    setPubkey(window.localStorage.getItem("pubkey"))
+  }, [])
 
   // Prevent hydration mismatch by not rendering auth-dependent content until mounted
   if (!mounted) {
@@ -26,12 +26,13 @@ export function TopNavigation() {
           <TopNavigationItems items={siteConfig.mainNav} />
           <div className="flex flex-1 items-center justify-end space-x-4">
             <nav className="flex items-center space-x-2">
+              <GitHubButton />
               <DropdownThemeMode />
             </nav>
           </div>
         </div>
       </header>
-    );
+    )
   }
 
   return (
@@ -40,6 +41,7 @@ export function TopNavigation() {
         <TopNavigationItems items={siteConfig.mainNav} />
         <div className="flex flex-1 items-center justify-end space-x-4">
           <nav className="flex items-center space-x-2">
+            <GitHubButton />
             <DropdownThemeMode />
             {pubkey === null ? <RegisterButton /> : null}
             {pubkey === null ? <LoginButton /> : null}
@@ -49,4 +51,5 @@ export function TopNavigation() {
       </div>
     </header>
   )
-}
\ No newline at end of file
+}
+