diff --git a/app/layout.tsx b/app/layout.tsx
index 42ab822..4da65f3 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -30,10 +30,10 @@ export default function RootLayout({
       const customRelays = JSON.parse(localStorage.getItem("customRelays") || "[]");
       if (customRelays.length > 0) {
         // Remove trailing slashes from any relay URLs
-        const sanitizedRelays = customRelays.map((relay: string) => 
+        const sanitizedRelays = customRelays.map((relay: string) =>
           relay.endsWith('/') ? relay.slice(0, -1) : relay
         );
-        
+
         setRelayUrls(prevRelays => {
           // Combine default relays with custom relays, removing duplicates
           const allRelays = [...prevRelays, ...sanitizedRelays];
@@ -61,11 +61,11 @@ export default function RootLayout({
           disableTransitionOnChange
           themes={["light", "dark", "purple-light", "purple-dark", "vintage-light", "vintage-dark", "neo-brutalism-light", "neo-brutalism-dark", "nature-light", "nature-dark", "system"]}
         >
-          <TopNavigation />
-          <Toaster />
           <Umami />
           <div className="main-content pb-14">
             <NostrProvider relayUrls={relayUrls} debug={false}>
+              <TopNavigation />
+              <Toaster />
               {children}
             </NostrProvider>
           </div>
diff --git a/app/relays/page.tsx b/app/relays/page.tsx
index 3e0f440..5f2c23b 100644
--- a/app/relays/page.tsx
+++ b/app/relays/page.tsx
@@ -25,6 +25,13 @@ export default function RelaysPage() {
   useEffect(() => {
     document.title = `Relays | LUMINA`;
     
+    // Set a loading timeout - if relays don't connect within 10 seconds, show whatever we have
+    const loadingTimeout = setTimeout(() => {
+      if (loading) {
+        setLoading(false);
+      }
+    }, 10000);
+    
     if (connectedRelays) {
       const status: { [url: string]: 'connected' | 'connecting' | 'disconnected' | 'error' } = {};
       
@@ -40,8 +47,14 @@ export default function RelaysPage() {
       });
       
       setRelayStatus(status);
-      setLoading(false);
+      
+      // Only stop loading when we have at least one connected relay or after a timeout
+      if (Object.values(status).some(s => s === 'connected') || connectedRelays.length === 0) {
+        setLoading(false);
+      }
     }
+    
+    return () => clearTimeout(loadingTimeout);
   }, [connectedRelays, refreshKey]);
 
   // Function to refresh NIP-65 relays for the current user
@@ -141,7 +154,7 @@ export default function RelaysPage() {
   return (
     <div className="py-4 px-2 md:py-6 md:px-6">
       <div className="flex items-center justify-between mb-4">
-        <h2 className="text-2xl font-bold">Nostr Relays</h2>
+        <h2 className="text-2xl mr-2 font-bold">Relays</h2>
         <div className="flex space-x-2">
           <Button 
             variant="outline" 
diff --git a/components/AddRelaySheet.tsx b/components/AddRelaySheet.tsx
index 1ae0768..7475625 100644
--- a/components/AddRelaySheet.tsx
+++ b/components/AddRelaySheet.tsx
@@ -85,7 +85,6 @@ export function AddRelaySheet({ onRelayAdded }: AddRelaySheetProps) {
       <SheetTrigger asChild>
         <Button variant="outline" className="gap-2">
           <PlusCircle className="h-4 w-4" />
-          Add Relay
         </Button>
       </SheetTrigger>
       <SheetContent>
diff --git a/components/headerComponents/AuthButton.tsx b/components/headerComponents/AuthButton.tsx
new file mode 100644
index 0000000..0589dd9
--- /dev/null
+++ b/components/headerComponents/AuthButton.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import Link from "next/link";
+import { UserIcon } from "lucide-react";
+
+export default function AuthButton() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" className="flex items-center gap-2">
+          <UserIcon className="h-[1.2rem] w-[1.2rem]" />
+          <span className="hidden sm:inline">Account</span>
+          <span className="sr-only">Account options</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem asChild>
+          <Link href="/login" className="w-full cursor-pointer">
+            Sign In
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild>
+          <Link href="/onboarding" className="w-full cursor-pointer">
+            Register
+          </Link>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/components/headerComponents/ConnectedRelaysButton.tsx b/components/headerComponents/ConnectedRelaysButton.tsx
new file mode 100644
index 0000000..eff3043
--- /dev/null
+++ b/components/headerComponents/ConnectedRelaysButton.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import React, { useEffect, useState } from 'react';
+import Link from "next/link";
+import { useNostr } from "nostr-react";
+import { Wifi } from "lucide-react";
+
+export default function ConnectedRelaysButton() {
+    const { connectedRelays } = useNostr();
+    const [relayCount, setRelayCount] = useState<number>(0);
+    const [isConnecting, setIsConnecting] = useState<boolean>(true);
+
+    useEffect(() => {
+        // Update relay count when connectedRelays changes
+        if (connectedRelays && connectedRelays.length > 0) {
+            // Count only connected relays (status === 1)
+            const activeRelays = connectedRelays.filter(relay => relay.status === 1).length;
+            setRelayCount(activeRelays);
+            
+            // If at least one relay is connected, we're no longer in connecting state
+            if (activeRelays > 0) {
+                setIsConnecting(false);
+            }
+        }
+        
+        // Set a timeout to stop showing "Connecting..." after a reasonable time
+        const timer = setTimeout(() => {
+            setIsConnecting(false);
+        }, 5000);
+        
+        return () => clearTimeout(timer);
+    }, [connectedRelays]);
+
+    return (
+        <Link href={"/relays"}>
+            <Button variant={"outline"} className="gap-2">
+                <Wifi className={`h-4 w-4 ${isConnecting ? 'animate-pulse' : ''}`} />
+                {isConnecting && relayCount === 0 ? 'Connecting...' : `${relayCount}`}
+            </Button>
+        </Link>
+    );
+}
\ No newline at end of file
diff --git a/components/headerComponents/TopNavigation.tsx b/components/headerComponents/TopNavigation.tsx
index 74d2c9f..f3a70bc 100644
--- a/components/headerComponents/TopNavigation.tsx
+++ b/components/headerComponents/TopNavigation.tsx
@@ -4,10 +4,11 @@ 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"
+import ConnectedRelaysButton from "@/components/headerComponents/ConnectedRelaysButton"
+import AuthButton from "./AuthButton"
+import { Button } from "@/components/ui/button"
+import { UserIcon } from "lucide-react"
 
 export function TopNavigation() {
   const [pubkey, setPubkey] = useState<string | null>(null)
@@ -26,8 +27,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 />
+              <ConnectedRelaysButton />
               <DropdownThemeMode />
+              {/* Placeholder for auth button to prevent layout shift */}
+              <Button variant="outline" className="flex items-center gap-2" disabled>
+                <UserIcon className="h-[1.2rem] w-[1.2rem]" />
+                <span className="hidden sm:inline">Account</span>
+              </Button>
             </nav>
           </div>
         </div>
@@ -41,11 +47,9 @@ 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 />
+            <ConnectedRelaysButton />
             <DropdownThemeMode />
-            {pubkey === null ? <RegisterButton /> : null}
-            {pubkey === null ? <LoginButton /> : null}
-            {pubkey !== null ? <AvatarDropdown /> : null}
+            {pubkey !== null ? <AvatarDropdown /> : <AuthButton />}
           </nav>
         </div>
       </div>