setting up dark/white mode. fixed some other small things

components/TopNav.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import Image from "next/image";
 
 import { useAuth } from "@/context/AuthContext";
+import ThemeToggle from "@/components/ThemeToggle";
 
 export function TopNav() {
   const { user, logout, loading } = useAuth();
@@ -12,8 +13,7 @@ export function TopNav() {
   const isAuthenticated = !!user;
 
   return (
-    <header className="border-b border-zinc-800 bg-black/95 backdrop-blur">
-      
+    <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 */}
@@ -21,20 +21,19 @@ export function TopNav() {
           href="/"
           className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-400"
         >
-          
-              <Image
-                src="/battl/battl-logo-mark-2.svg"
-                alt="Battl Builders Logo"
-                width={260} // adjust to taste
-                height={48} // adjust to taste
-                className="block"
-              />
+          <Image
+            src="/battl/battl-logo-mark-2.svg"
+            alt="Battl Builders Logo"
+            width={260} // adjust to taste
+            height={48} // adjust to taste
+            className="block"
+          />
         </Link>
 
         {/* Right side actions */}
         <div className="flex items-center gap-3">
           {/* Search placeholder */}
-          <button
+          {/* <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)"
@@ -52,7 +51,7 @@ export function TopNav() {
               <circle cx="11" cy="11" r="6" />
               <line x1="16.5" y1="16.5" x2="21" y2="21" />
             </svg>
-          </button>
+          </button> */}
 
           {loading ? (
             <span className="text-xs text-zinc-500">Checking session…</span>
@@ -83,10 +82,13 @@ export function TopNav() {
               >
                 Join Beta
               </Link>
+              <div className="flex items-center gap-3">
+                <ThemeToggle />
+              </div>
             </>
           )}
         </div>
       </div>
     </header>
   );
-}
+}