wired up an accounts page and my builds (my vault)

components/TopNav.tsx

@@ -3,18 +3,40 @@
 
 import Link from "next/link";
 import Image from "next/image";
+import { usePathname } from "next/navigation";
 
 import { useAuth } from "@/context/AuthContext";
 import ThemeToggle from "@/components/ThemeToggle";
 
+function NavLink({
+  href,
+  children,
+}: {
+  href: string;
+  children: React.ReactNode;
+}) {
+  const pathname = usePathname();
+  const active = pathname === href;
+
+  return (
+    <Link
+      href={href}
+      className={[
+        "text-xs font-medium transition-colors",
+        active ? "text-zinc-100" : "text-zinc-400 hover:text-zinc-100",
+      ].join(" ")}
+    >
+      {children}
+    </Link>
+  );
+}
+
 export function TopNav() {
   const { user, logout, loading } = useAuth();
-
   const isAuthenticated = !!user;
 
   return (
     <header className="border-b border-zinc-200 bg-white/95 dark:border-zinc-800 dark:bg-black/95 backdrop-blur">
-      {/* Main nav row */}
       <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-2">
         {/* Left: Brand / Home */}
         <Link
@@ -24,42 +46,31 @@ export function TopNav() {
           <Image
             src="/battl/battl-logo-mark-2.svg"
             alt="Battl Builders Logo"
-            width={260} // adjust to taste
-            height={48} // adjust to taste
+            width={260}
+            height={48}
             className="block"
           />
         </Link>
 
         {/* Right side actions */}
-        <div className="flex items-center gap-3">
-          {/* Search placeholder */}
-          {/* <button
-            type="button"
-            className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-zinc-700 bg-zinc-900/60 text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800 hover:border-zinc-500 transition-colors"
-            aria-label="Search (coming soon)"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth={2}
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              className="h-4 w-4"
-            >
-              <circle cx="11" cy="11" r="6" />
-              <line x1="16.5" y1="16.5" x2="21" y2="21" />
-            </svg>
-          </button> */}
+        <div className="flex items-center gap-4">
+          <ThemeToggle />
 
           {loading ? (
             <span className="text-xs text-zinc-500">Checking session…</span>
           ) : isAuthenticated ? (
             <>
-              <span className="hidden text-xs text-zinc-300 sm:inline">
+              <NavLink href="/vault">Vault</NavLink>
+
+              {/* Email/displayName links to Account */}
+              <Link
+                href="/account"
+                className="hidden text-xs text-zinc-300 hover:text-zinc-100 transition-colors sm:inline"
+                title="Account"
+              >
                 {user.displayName || user.email}
-              </span>
+              </Link>
+
               <button
                 type="button"
                 onClick={logout}
@@ -70,25 +81,18 @@ export function TopNav() {
             </>
           ) : (
             <>
-              <Link
-                href="/login"
-                className="text-xs font-medium text-zinc-400 hover:text-zinc-100 transition-colors"
-              >
-                Log In
-              </Link>
+              <NavLink href="/login">Log In</NavLink>
+
               <Link
                 href="/register"
                 className="rounded-md border border-amber-400/70 bg-amber-400/10 px-3 py-1.5 text-xs font-semibold text-amber-200 hover:bg-amber-400/20 transition-colors"
               >
                 Join Beta
               </Link>
-              <div className="flex items-center gap-3">
-                <ThemeToggle />
-              </div>
             </>
           )}
         </div>
       </div>
     </header>
   );
-}
+}