diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index 4331f7b..487e5c1 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -27,6 +27,8 @@ export default function ProfilePage() {
   const [badges, setBadges] = useState<string[]>([]);
   const [eventsAttended, setEventsAttended] = useState<string[]>([]);
   const [profileLoading, setProfileLoading] = useState(true);
+  const [walletRegistered, setWalletRegistered] = useState(false);
+  const [walletChecking, setWalletChecking] = useState(true);
   const [statusMessage, setStatusMessage] = useState<string | null>(null);
 
   const copyAddress = () => {
@@ -75,19 +77,44 @@ export default function ProfilePage() {
   };
 
   useEffect(() => {
+    let cancelled = false;
+
     const loadProfile = async () => {
       if (!address) {
+        setWalletRegistered(false);
+        setWalletChecking(false);
         setProfileLoading(false);
         return;
       }
 
+      setWalletChecking(true);
       setProfileLoading(true);
       setStatusMessage(null);
 
       try {
+        const isRegistered = await RegistrationService.isWalletRegistered(
+          address,
+        );
+
+        if (cancelled) return;
+
+        if (!isRegistered) {
+          setWalletRegistered(false);
+          setDisplayName("Name");
+          setProfileImage(null);
+          setBadges([]);
+          setEventsAttended([]);
+          setStatusMessage("This wallet is not linked yet.");
+          return;
+        }
+
+        setWalletRegistered(true);
+
         const registration =
           await RegistrationService.getRegistrationByWallet(address);
 
+        if (cancelled) return;
+
         if (registration) {
           const displayNameFallback = registration.unique_name
             ? registration.unique_name.trim()
@@ -108,16 +135,30 @@ export default function ProfilePage() {
           setStatusMessage("No profile data found for this wallet.");
         }
       } catch (error) {
+        if (cancelled) return;
+
         console.error("Unable to load profile data", error);
-        setStatusMessage("Unable to load profile data.");
+        setWalletRegistered(false);
+        setStatusMessage("Unable to check wallet registration.");
       } finally {
-        setProfileLoading(false);
+        if (!cancelled) {
+          setWalletChecking(false);
+          setProfileLoading(false);
+        }
       }
     };
 
     if (mounted && isConnected) {
       loadProfile();
+    } else {
+      setWalletRegistered(false);
+      setWalletChecking(false);
+      setProfileLoading(false);
     }
+
+    return () => {
+      cancelled = true;
+    };
   }, [address, isConnected, mounted]);
 
   const handleNameSave = async () => {
@@ -159,11 +200,11 @@ export default function ProfilePage() {
     );
   }
 
-  if (!isConnected) {
+  if (!isConnected || !walletRegistered) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-[linear-gradient(180deg,_#AFDCF1_0%,_#ADD8F2_27%,_#D3B7F3_100%)]">
+      <div className="min-h-screen flex items-center justify-center bg-[linear-gradient(180deg,_#AFDCF1_0%,_#ADD8F2_27%,_#D3B7F3_100%)] text-foreground dark:bg-[linear-gradient(180deg,_#CAC1F7_0%,_#A8A1CA_21%,_#7B7890_59%,_#5C5A66_86%,_#6B6A7A_100%)] dark:text-white">
         <div className="text-center space-y-6 max-w-sm mx-auto px-4">
-          <div className="w-16 h-16 rounded-full bg-primary/10 border border-primary/20 flex items-center justify-center mx-auto">
+          <div className="w-16 h-16 rounded-full bg-primary/10 border border-primary/20 flex items-center justify-center mx-auto dark:border-white/20 dark:bg-white/10">
             <img
               src="/logo/web3uoa_logo.png"
               alt="WEB3UOA"
@@ -174,8 +215,12 @@ export default function ProfilePage() {
             <h1 className="text-2xl font-black tracking-tight mb-2">
               Your Profile
             </h1>
-            <p className="text-muted-foreground text-sm">
-              Connect your wallet to view your profile.
+            <p className="text-muted-foreground text-sm dark:text-white/75">
+              {walletChecking
+                ? "Checking your wallet..."
+                : isConnected
+                  ? "This wallet is not linked yet. Connect with a registered email first."
+                  : "Connect your wallet to view your profile."}
             </p>
           </div>
           <WalletButton />
@@ -185,11 +230,11 @@ export default function ProfilePage() {
   }
 
   return (
-    <div className="min-h-screen w-screen flex flex-col gap-16 justify-center items-center bg-[linear-gradient(180deg,_#AFDCF1_0%,_#ADD8F2_27%,_#D3B7F3_100%)] px-4 md:px-0 pt-32 pb-24">
+    <div className="min-h-screen w-screen flex flex-col gap-16 justify-center items-center bg-[linear-gradient(180deg,_#AFDCF1_0%,_#ADD8F2_27%,_#D3B7F3_100%)] px-4 md:px-0 pt-32 pb-24 text-foreground dark:bg-[linear-gradient(180deg,_#CAC1F7_0%,_#A8A1CA_21%,_#7B7890_59%,_#5C5A66_86%,_#6B6A7A_100%)] dark:text-white">
       {/* Profile Card */}
-      <div className="relative bg-white/80 w-full max-w-[90vw] lg:w-[80vw] lg:max-w-[90vw] p-8 lg:p-15 rounded-2xl overflow-visible">
+      <div className="relative bg-white/80 w-full max-w-[90vw] lg:w-[80vw] lg:max-w-[90vw] p-8 lg:p-15 rounded-2xl overflow-visible shadow-lg dark:bg-[#404246]/85 dark:shadow-black/20">
         <div className="flex flex-col items-center lg:items-start text-center lg:text-left gap-6 lg:gap-8">
-          <div className="relative w-32 h-32 rounded-full bg-white flex items-center justify-center overflow-hidden lg:absolute lg:-left--16 lg:top-1/2 lg:-translate-y-1/2 lg:w-[280px] lg:h-[280px]">
+          <div className="relative w-32 h-32 rounded-full bg-white flex items-center justify-center overflow-hidden lg:absolute lg:-left--16 lg:top-1/2 lg:-translate-y-1/2 lg:w-[280px] lg:h-[280px] dark:bg-[#2f3136]">
             {profileImage ? (
               <img
                 src={profileImage}
@@ -197,7 +242,9 @@ export default function ProfilePage() {
                 className="w-full h-full object-cover"
               />
             ) : (
-              <div className="text-gray-400 text-sm">No Image</div>
+              <div className="text-gray-400 text-sm dark:text-white/55">
+                No Image
+              </div>
             )}
             <input
               type="file"
@@ -215,7 +262,7 @@ export default function ProfilePage() {
                   type="text"
                   value={displayName}
                   onChange={(e) => setDisplayName(e.target.value)}
-                  className="w-full md:w-auto text-xl font-bold border rounded px-3 py-2"
+                  className="w-full md:w-auto text-xl font-bold border rounded px-3 py-2 bg-white text-foreground dark:border-white/15 dark:bg-[#2f3136] dark:text-white"
                   onKeyDown={(e) => {
                     if (e.key === "Enter") {
                       handleNameSave();
@@ -234,7 +281,7 @@ export default function ProfilePage() {
                 <p className="text-2xl md:text-3xl font-bold">{displayName}</p>
                 <button
                   onClick={() => setIsEditingName(true)}
-                  className="text-sm text-muted-foreground hover:text-primary flex items-center"
+                  className="text-sm text-muted-foreground hover:text-primary flex items-center dark:text-white/65 dark:hover:text-[#A3DEF4]"
                 >
                   <PenTool className="w-4 h-4 ml-1" />
                 </button>
@@ -247,7 +294,7 @@ export default function ProfilePage() {
               <div className="flex flex-wrap justify-center md:justify-start items-center gap-3">
                 <button
                   onClick={copyAddress}
-                  className="text-muted-foreground hover:text-primary transition-colors shrink-0"
+                  className="text-muted-foreground hover:text-primary transition-colors shrink-0 dark:text-white/65 dark:hover:text-[#A3DEF4]"
                   aria-label="Copy address"
                 >
                   {copied ? (
@@ -258,14 +305,14 @@ export default function ProfilePage() {
                 </button>
                 <button
                   onClick={() => disconnect()}
-                  className="rounded-xl text-xs font-bold text-primary hover:underline"
+                  className="rounded-xl text-xs font-bold text-primary hover:underline dark:text-[#A3DEF4]"
                 >
                   Disconnect Wallet
                 </button>
               </div>
             </div>
             {statusMessage ? (
-              <div className="mt-4 text-sm text-muted-foreground">
+              <div className="mt-4 text-sm text-muted-foreground dark:text-white/70">
                 {statusMessage}
               </div>
             ) : null}
@@ -275,51 +322,59 @@ export default function ProfilePage() {
 
       <div className="flex flex-col gap-10 w-full max-w-[90vw] lg:flex-row lg:justify-center lg:items-end lg:gap-16">
         {/* Badges*/}
-        <div className="bg-white/80 w-full lg:w-[42vw] p-8 rounded-2xl min-h-[44vh] lg:min-h-[34vh] lg:mt-10">
+        <div className="bg-white/80 w-full lg:w-[42vw] p-8 rounded-2xl min-h-[44vh] lg:min-h-[34vh] lg:mt-10 shadow-lg dark:bg-[#404246]/85 dark:shadow-black/20">
           <p className="text-2xl font-bold">Badges</p>
 
           <div className="mt-8">
             {profileLoading ? (
-              <p className="text-muted-foreground">Loading badges…</p>
+              <p className="text-muted-foreground dark:text-white/70">
+                Loading badges…
+              </p>
             ) : badges.length > 0 ? (
               <div className="grid grid-cols-3 gap-4 sm:gap-6 justify-items-center">
                 {badges.map((badge, index) => (
                   <div
                     key={`${badge}-${index}`}
-                    className="w-full min-h-[5rem] rounded-3xl border border-primary/20 bg-primary/5 p-3 flex items-center justify-center text-center"
+                    className="w-full min-h-[5rem] rounded-3xl border border-primary/20 bg-primary/5 p-3 flex items-center justify-center text-center dark:border-[#A3DEF4]/25 dark:bg-white/10"
                   >
-                    <span className="text-sm font-semibold text-primary">
+                    <span className="text-sm font-semibold text-primary dark:text-[#A3DEF4]">
                       {badge}
                     </span>
                   </div>
                 ))}
               </div>
             ) : (
-              <p className="text-muted-foreground">No badges yet.</p>
+              <p className="text-muted-foreground dark:text-white/70">
+                No badges yet.
+              </p>
             )}
           </div>
         </div>
 
         {/* Event History*/}
-        <div className="bg-white/80 w-full lg:w-[34vw] p-8 rounded-2xl min-h-[52vh] lg:min-h-[34vh]">
+        <div className="bg-white/80 w-full lg:w-[34vw] p-8 rounded-2xl min-h-[52vh] lg:min-h-[34vh] shadow-lg dark:bg-[#404246]/85 dark:shadow-black/20">
           <p className="text-2xl font-bold">Events Attended</p>
 
           <div className="mt-8">
             {profileLoading ? (
-              <p className="text-muted-foreground">Loading event history…</p>
+              <p className="text-muted-foreground dark:text-white/70">
+                Loading event history…
+              </p>
             ) : eventsAttended.length > 0 ? (
               <div className="space-y-4">
                 {eventsAttended.map((eventName, index) => (
                   <div
                     key={`${eventName}-${index}`}
-                    className="rounded-3xl bg-primary/10 px-4 py-4 sm:px-6 sm:py-5"
+                    className="rounded-3xl bg-primary/10 px-4 py-4 sm:px-6 sm:py-5 dark:bg-white/10"
                   >
                     <p className="font-semibold text-lg">{eventName}</p>
                   </div>
                 ))}
               </div>
             ) : (
-              <p className="text-muted-foreground">No events attended yet.</p>
+              <p className="text-muted-foreground dark:text-white/70">
+                No events attended yet.
+              </p>
             )}
           </div>
         </div>
diff --git a/src/components/login-overlay.tsx b/src/components/login-overlay.tsx
index c3e0584..5338561 100644
--- a/src/components/login-overlay.tsx
+++ b/src/components/login-overlay.tsx
@@ -34,7 +34,7 @@ function truncateAddress(address: string) {
 }
 
 export function LoginOverlay({ onClose, onLoginSuccess }: LoginOverlayProps) {
-  const { address, isConnected, connect } = useWallet();
+  const { address, isConnected, connect, disconnect } = useWallet();
 
   const [isMounted, setIsMounted] = useState(false);
   const [walletStatus, setWalletStatus] = useState<WalletStatus>("idle");
@@ -116,6 +116,19 @@ export function LoginOverlay({ onClose, onLoginSuccess }: LoginOverlayProps) {
     }
   };
 
+  const handleChangeWallet = async () => {
+    setEmail("");
+    setEmailStatus("idle");
+    setWalletStatus("connecting");
+    setMessage("Opening wallet chooser...");
+
+    disconnect();
+
+    window.setTimeout(() => {
+      connect();
+    }, 300);
+  };
+
   const handleConnectEmailToWallet = async () => {
     if (!address) {
       setEmailStatus("error");
@@ -184,14 +197,14 @@ export function LoginOverlay({ onClose, onLoginSuccess }: LoginOverlayProps) {
   const overlay = (
     <div className="fixed inset-0 z-40 flex items-center justify-center px-4">
       <div
-        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+        className="absolute inset-0 bg-black/60 backdrop-blur-sm dark:bg-black/75"
         onClick={onClose}
       />
 
-      <div className="relative z-10 w-full max-w-md rounded-2xl border bg-background p-6 shadow-2xl">
+      <div className="relative z-10 w-full max-w-md rounded-2xl border border-border/80 bg-white p-6 text-foreground shadow-2xl dark:border-white/15 dark:bg-[#404246] dark:text-white">
         <button
           onClick={onClose}
-          className="absolute right-4 top-4 rounded-full p-1 hover:bg-muted"
+          className="absolute right-4 top-4 rounded-full p-1 text-muted-foreground hover:bg-muted hover:text-foreground dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
           aria-label="Close login overlay"
           type="button"
         >
@@ -199,8 +212,10 @@ export function LoginOverlay({ onClose, onLoginSuccess }: LoginOverlayProps) {
         </button>
 
         <div className="mb-6">
-          <h2 className="text-xl font-bold">Connect Wallet</h2>
-          <p className="mt-1 text-sm text-muted-foreground">
+          <h2 className="text-xl font-bold text-foreground dark:text-white">
+            Connect Wallet
+          </h2>
+          <p className="mt-1 text-sm text-muted-foreground dark:text-white/70">
             Connect your wallet to access your profile.
           </p>
         </div>
@@ -221,32 +236,43 @@ export function LoginOverlay({ onClose, onLoginSuccess }: LoginOverlayProps) {
 
         {isConnected && address && (
           <div className="space-y-4">
-            <div className="rounded-xl border bg-muted/40 p-3 text-sm">
-              <p className="text-muted-foreground">Connected wallet</p>
-              <p className="font-bold">{truncateAddress(address)}</p>
+            <div className="rounded-xl border border-border/80 bg-muted/40 p-3 text-sm dark:border-white/15 dark:bg-white/10">
+              <p className="text-muted-foreground dark:text-white/65">
+                Connected wallet
+              </p>
+              <div className="mt-1 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                <p className="font-bold">{truncateAddress(address)}</p>
+                <button
+                  onClick={handleChangeWallet}
+                  className="text-left text-sm font-bold text-primary hover:underline dark:text-[#A3DEF4]"
+                  type="button"
+                >
+                  Change wallet
+                </button>
+              </div>
             </div>
 
             {walletStatus === "checking" && (
-              <p className="text-sm text-muted-foreground">
+              <p className="text-sm text-muted-foreground dark:text-white/70">
                 Checking wallet...
               </p>
             )}
 
             {walletStatus === "registered" && (
-              <div className="rounded-xl border border-green-500/30 bg-green-500/10 p-3 text-sm text-green-600">
+              <div className="rounded-xl border border-green-500/30 bg-green-500/10 p-3 text-sm text-green-700 dark:border-green-300/30 dark:bg-green-300/10 dark:text-green-200">
                 Wallet is registered. You are logged in.
               </div>
             )}
 
             {walletStatus === "not_registered" && (
               <div className="space-y-3">
-                <div className="rounded-xl border border-yellow-500/30 bg-yellow-500/10 p-3 text-sm text-yellow-700">
+                <div className="rounded-xl border border-yellow-500/30 bg-yellow-500/10 p-3 text-sm text-yellow-800 dark:border-yellow-300/30 dark:bg-yellow-300/10 dark:text-yellow-100">
                   This wallet is not linked yet. Enter your registered email to
                   connect it.
                 </div>
 
                 <div>
-                  <label className="text-sm font-medium">
+                  <label className="text-sm font-medium text-foreground dark:text-white">
                     Registered email
                   </label>
                   <input
@@ -258,7 +284,7 @@ export function LoginOverlay({ onClose, onLoginSuccess }: LoginOverlayProps) {
                       setEmailStatus("idle");
                       setMessage("");
                     }}
-                    className="mt-1 w-full rounded-xl border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary"
+                    className="mt-1 w-full rounded-xl border border-input bg-white px-3 py-2 text-sm text-foreground outline-none placeholder:text-muted-foreground focus:ring-2 focus:ring-primary dark:border-white/15 dark:bg-[#2f3136] dark:text-white dark:placeholder:text-white/45"
                   />
                 </div>
 
@@ -281,7 +307,7 @@ export function LoginOverlay({ onClose, onLoginSuccess }: LoginOverlayProps) {
             )}
 
             {walletStatus === "error" && (
-              <div className="rounded-xl border border-red-500/30 bg-red-500/10 p-3 text-sm text-red-600">
+              <div className="rounded-xl border border-red-500/30 bg-red-500/10 p-3 text-sm text-red-600 dark:border-red-300/30 dark:bg-red-300/10 dark:text-red-200">
                 Could not check wallet.
               </div>
             )}
@@ -293,10 +319,10 @@ export function LoginOverlay({ onClose, onLoginSuccess }: LoginOverlayProps) {
             className={`mt-4 text-sm ${
               emailStatus === "invalid" ||
               emailStatus === "wallet_not_empty" ||
-              emailStatus === "error" ||
-              walletStatus === "error"
-                ? "text-red-600"
-                : "text-muted-foreground"
+                emailStatus === "error" ||
+                walletStatus === "error"
+                ? "text-red-600 dark:text-red-200"
+                : "text-muted-foreground dark:text-white/70"
             }`}
           >
             {message}
@@ -311,4 +337,4 @@ export function LoginOverlay({ onClose, onLoginSuccess }: LoginOverlayProps) {
   }
 
   return createPortal(overlay, document.body);
-}
\ No newline at end of file
+}
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index df90909..91ab5f9 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -1,26 +1,20 @@
 "use client";
-import { Sun, Moon } from 'lucide-react'
+
+import { Sun, Moon, Menu, X } from "lucide-react";
 import React, { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
-import { Menu, X } from "lucide-react";
 import { useAccount } from "wagmi";
 import { isAllowedAdminAddress } from "@/lib/admin-auth";
 import Link from "next/link";
-import { usePathname } from 'next/navigation';  
-
+import { usePathname } from "next/navigation";
+import { WalletButton } from "./wallet-button";
 
 const navLinks = [
   { label: "About", href: "/pages/about" },
   { label: "Events", href: "/pages/events" },
   { label: "Partners", href: "/pages/partners" },
-  // { label: "Claim your Web3 ID!", href: "/pages/claim-id", isCTA: true },
-  // { label: "About", href: "#about" },
-  // { label: "Events", href: "#events" },
-  // { label: "Partners", href: "#partners" },
-  { label: "Search", href: "#search" }, // TODO: add search page
-  { label: "Join Us", href: "#join_us" }, // TODO: add Us
-  { label: "Connect Wallet", href: "/pages/claim-id" }, // TODO: add wallet connection
-  //{ label: "Claim your Web3 ID!", href: "#identity", isCTA: true }  // not sure if need 
+  { label: "Search", href: "#search" },
+  { label: "Join Us", href: "/pages/join-us" },
 ];
 
 export function Navbar() {
@@ -29,21 +23,23 @@ export function Navbar() {
   const [mounted, setMounted] = useState(false);
   const { address } = useAccount();
 
+  const pathname = usePathname();
+
   useEffect(() => {
     setMounted(true);
   }, []);
 
-  // save theme preference to localStorage for persistence across sessions
-  // read saved preference (client only)
   useEffect(() => {
     const saved = localStorage.getItem("theme") as "light" | "dark" | null;
-    const preferred = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    const preferred = window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light";
+
     setTheme(saved || preferred);
   }, []);
 
-  // Apply theme + save it whenever it changes for the theme 
   useEffect(() => {
-    document.documentElement.classList.add('theme-transitioning');
+    document.documentElement.classList.add("theme-transitioning");
 
     if (theme === "dark") {
       document.documentElement.classList.add("dark");
@@ -51,58 +47,64 @@ export function Navbar() {
       document.documentElement.classList.remove("dark");
     }
 
-    localStorage.setItem("theme", theme); // ← this saves it
+    localStorage.setItem("theme", theme);
 
-    setTimeout(() => {
-      document.documentElement.classList.remove('theme-transitioning');
+    const timeout = setTimeout(() => {
+      document.documentElement.classList.remove("theme-transitioning");
     }, 300);
+
+    return () => clearTimeout(timeout);
   }, [theme]);
 
   const isAdmin = mounted && isAllowedAdminAddress(address);
 
-  // Determine active link based on current pathname. Exact match or sub-route match counts as active.
-  // Will need to change the code after we add the search page and join us page
-  // currently they are just anchors on the home page so they won't be active when user is on the home page
-  const pathname = usePathname();
   const isActive = (href: string) => {
     if (href.startsWith("#")) return false;
 
-    // exact match OR sub-route match
     return pathname === href || pathname.startsWith(href + "/");
   };
 
+  const toggleTheme = () => {
+    setTheme(theme === "light" ? "dark" : "light");
+  };
+
   return (
-    <nav className="absolute z-50 bg-nav-bg border-b border-white/10
-      w-[95%] sm:w-[90%] lg:w-[80%]
+    <nav
+      className="absolute z-50 bg-nav-bg border-b border-white/10
+      w-[95%] sm:w-[90%] lg:w-[85%] xl:w-[80%]
       left-1/2 -translate-x-1/2 top-[3%] sm:top-[5%]
-      rounded-full text-nav-text shadow-lg">
-
+      rounded-full text-nav-text shadow-lg"
+    >
       <div className="h-14 sm:h-16 flex items-center justify-between px-4 sm:px-6 lg:px-8 gap-4">
-
         {/* Logo */}
-        <Link href="/" className="flex items-center gap-2 group flex-shrink-0">
+        <Link href="/" className="flex items-center gap-2 group shrink-0 min-w-0">
           <img
             src="/logo/web3uoa_logo.png"
             alt="WEB3UOA"
-            className="w-8 h-8 sm:w-10 sm:h-10 transition-transform duration-500 group-hover:scale-110 drop-shadow-sm"
+            className="w-8 h-8 sm:w-10 sm:h-10 transition-transform duration-500 group-hover:scale-110 drop-shadow-sm shrink-0"
           />
-          <span className="text-nav-text text-lg sm:text-xl font-black tracking-tight font-russo">WEB3UOA</span>
+
+          <span className="hidden sm:inline text-nav-text text-lg sm:text-xl font-black tracking-tight font-russo whitespace-nowrap">
+            WEB3UOA
+          </span>
         </Link>
 
         {/* Desktop links */}
-        <div className="hidden lg:flex items-center gap-5 xl:gap-15 flex-shrink-0 ml-auto">
+        <div className="hidden xl:flex items-center gap-10 2xl:gap-16 min-w-0 ml-auto">
           {navLinks.map((link) => (
             <Link
               key={link.href}
               href={link.href}
-              // frist state is true if active so the text is highlighted, second state is hover state for non-active links
               className={`nav-bar-text text-base font-semibold tracking-wide transition-colors duration-100 whitespace-nowrap ${
-                isActive(link.href) ? "text-nav-text-hover" : "hover:text-nav-text-hover"
+                isActive(link.href)
+                  ? "text-nav-text-hover"
+                  : "hover:text-nav-text-hover"
               }`}
             >
               {link.label}
             </Link>
           ))}
+
           {isAdmin && (
             <Link
               href="/admin"
@@ -112,31 +114,45 @@ export function Navbar() {
             </Link>
           )}
 
-          {/* toggle_theme button */}
+          <div className="flex items-center shrink-0">
+            <WalletButton />
+          </div>
+
+          {/* Theme toggle button */}
           <Button
             size="sm"
-            onClick={() => setTheme(theme === "light" ? "dark" : "light")}
-            className="text-text bg-transparent hover:bg-transparent active:bg-transparent focus-visible:ring-0 flex-shrink-0 hover:cursor-pointer"
+            onClick={toggleTheme}
+            className="text-text bg-transparent hover:bg-transparent active:bg-transparent focus-visible:ring-0 shrink-0 hover:cursor-pointer"
           >
             <span className="relative h-6 w-6 block">
-              {/* fade in and out animation */}
-              <Sun className="absolute inset-0 size-6 transition-opacity duration-300" style={{ opacity: theme === "light" ? 1 : 0 }} />
-              <Moon className="absolute inset-0 size-6 transition-opacity duration-300" style={{ opacity: theme === "light" ? 0 : 1 }} />
+              <Sun
+                className="absolute inset-0 size-6 transition-opacity duration-300"
+                style={{ opacity: theme === "light" ? 1 : 0 }}
+              />
+              <Moon
+                className="absolute inset-0 size-6 transition-opacity duration-300"
+                style={{ opacity: theme === "light" ? 0 : 1 }}
+              />
             </span>
           </Button>
         </div>
-        
-        {/* Mobile menu button */}
-        <div className="lg:hidden flex items-center gap-2 flex-shrink-0">
+
+        {/* Mobile controls */}
+        <div className="xl:hidden flex items-center gap-2 shrink-0">
           <Button
             size="sm"
-            onClick={() => setTheme(theme === "light" ? "dark" : "light")}
-            className="text-text bg-transparent hover:bg-transparent active:bg-transparent focus-visible:ring-0 flex-shrink-0 hover:cursor-pointer"
+            onClick={toggleTheme}
+            className="text-text bg-transparent hover:bg-transparent active:bg-transparent focus-visible:ring-0 shrink-0 hover:cursor-pointer"
           >
             <span className="relative h-6 w-6 block">
-              {/* fade in and out animation */}
-              <Sun className="absolute inset-0 size-6 transition-opacity duration-300" style={{ opacity: theme === "light" ? 1 : 0 }} />
-              <Moon className="absolute inset-0 size-6 transition-opacity duration-300" style={{ opacity: theme === "light" ? 0 : 1 }} />
+              <Sun
+                className="absolute inset-0 size-6 transition-opacity duration-300"
+                style={{ opacity: theme === "light" ? 1 : 0 }}
+              />
+              <Moon
+                className="absolute inset-0 size-6 transition-opacity duration-300"
+                style={{ opacity: theme === "light" ? 0 : 1 }}
+              />
             </span>
           </Button>
 
@@ -145,14 +161,18 @@ export function Navbar() {
             className="p-2 rounded-lg text-nav-text transition-colors hover:bg-white/10"
             aria-label="Toggle menu"
           >
-            {mobileOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
+            {mobileOpen ? (
+              <X className="w-6 h-6" />
+            ) : (
+              <Menu className="w-6 h-6" />
+            )}
           </button>
         </div>
       </div>
 
       {/* Mobile dropdown */}
       {mobileOpen && (
-        <div className="lg:hidden absolute top-full left-0 right-0 mt-2 bg-nav-bg backdrop-blur-md border border-white/10 shadow-lg rounded-2xl overflow-hidden">
+        <div className="xl:hidden absolute top-full left-0 right-0 mt-2 bg-nav-bg backdrop-blur-md border border-white/10 shadow-lg rounded-2xl overflow-hidden">
           <div className="px-6 py-5 flex flex-col gap-1">
             {navLinks.map((link) => (
               <Link
@@ -168,6 +188,7 @@ export function Navbar() {
                 {link.label}
               </Link>
             ))}
+
             {isAdmin && (
               <Link
                 href="/admin"
@@ -177,6 +198,10 @@ export function Navbar() {
                 Admin Panel
               </Link>
             )}
+
+            <div className="pt-3 px-3" onClickCapture={() => setMobileOpen(false)}>
+              <WalletButton />
+            </div>
           </div>
         </div>
       )}
diff --git a/src/components/wallet-button.tsx b/src/components/wallet-button.tsx
index 0f0d16f..196afd7 100644
--- a/src/components/wallet-button.tsx
+++ b/src/components/wallet-button.tsx
@@ -4,6 +4,7 @@ import { useCallback, useEffect, useState } from "react";
 import { useWallet } from "@/hooks/use-wallet";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import { LoginOverlay } from "./login-overlay";
 import { RegistrationService } from "../services/registrations/registrations-service";
 
@@ -15,6 +16,7 @@ type AuthStatus = "idle" | "checking" | "logged_in" | "logged_out" | "error";
 
 export function WalletButton() {
   const { address, isConnected, mounted } = useWallet();
+  const router = useRouter();
 
   const [showLogin, setShowLogin] = useState(false);
   const [authStatus, setAuthStatus] = useState<AuthStatus>("idle");
@@ -22,7 +24,8 @@ export function WalletButton() {
   const handleLoginSuccess = useCallback(() => {
     setAuthStatus("logged_in");
     setShowLogin(false);
-  }, []);
+    router.push("/profile");
+  }, [router]);
 
   useEffect(() => {
     const checkAuth = async () => {
@@ -54,7 +57,7 @@ export function WalletButton() {
   }, [mounted, isConnected, address]);
 
   const buttonClass =
-    "text-base px-6 h-14 border-2 rounded-xl font-bold " +
+    "text-base px-6 h-12 border-2 rounded-xl font-bold " +
     "inline-flex items-center justify-center " +
     "!bg-nav-bg !border-button-bor !text-button-bor " +
     "transition-all hover:!bg-button-bor hover:!text-white";
@@ -105,4 +108,4 @@ export function WalletButton() {
       )}
     </>
   );
-}
\ No newline at end of file
+}