diff --git a/app/page.tsx b/app/page.tsx
index f4d19f6..2be56ee 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -12,6 +12,7 @@ export default function Home() {
     <main className="min-h-screen">
       <Navbar />
       <Hero />
+      
       <Features />
       <HowItWorks />
       <Benefits />
diff --git a/components/navbar.tsx b/components/navbar.tsx
index e9ba224..6d85c74 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -1,128 +1,306 @@
-'use client'
+// // 'use client'
 
-import Link from 'next/link'
-import { Button } from '@/components/ui/button'
-import { Menu, X, Wallet } from 'lucide-react'
-import { useState, useEffect } from 'react'
-import Image from 'next/image'
-import { ThemeToggle } from './ui/ThemeToggle'
+// // import Link from 'next/link'
+// // import { Button } from '@/components/ui/button'
+// // import { Menu, X, Wallet } from 'lucide-react'
+// // import { useState, useEffect } from 'react'
+// // import Image from 'next/image'
+// // import { ThemeToggle } from './ui/ThemeToggle'
+
+// // export function Navbar() {
+// //   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+// //   const [address, setAddress] = useState<string | null>(null)
+
+// //   useEffect(() => {
+// //     const savedAddress = localStorage.getItem('stellar_wallet_address')
+// //     if (savedAddress && savedAddress !== address) {
+// //       // eslint-disable-next-line react-hooks/set-state-in-effect
+// //       setAddress(savedAddress)
+// //     }
+// //   }, [address])
+
+// //   const formatAddress = (addr: string) => {
+// //     if (!addr || addr.length <= 10) return addr;
+// //     return `${addr.substring(0, 5)}...${addr.substring(addr.length - 4)}`
+// //   }
+
+// //   return (
+// //     <nav className="fixed top-0 left-0 right-0 z-50 border-b border-border/40 backdrop-blur-xl bg-background/80">
+// //       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+// //         <div className="flex h-16 items-center justify-between">
+// //           <div className="flex items-center gap-2">
+// //             <Image
+// //               src='/assets/logo2.png'
+// //               alt="Logo"
+// //               width={20}
+// //               height={20}
+// //               className="h-10 w-10 object-cover"
+// //             />
+// //             <span className="text-xl font-bold text-foreground">TaskChain</span>
+// //           </div>
+
+// //           <div className="hidden md:flex items-center gap-8">
+// //             <Link href="#features" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+// //               Features
+// //             </Link>
+// //             <Link href="#how-it-works" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+// //               How It Works
+// //             </Link>
+// //             <Link href="#benefits" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+// //               Benefits
+// //             </Link>
+// //             <Link href="#testimonials" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+// //               Testimonials
+// //             </Link>
+// //           </div>
+
+// //           <div className="hidden md:flex items-center gap-4">
+// //             {address ? (
+// //               <Button variant="outline" asChild>
+// //                 <Link href="/login">
+// //                   <Wallet className="w-4 h-4 mr-2" />
+// //                   {formatAddress(address)}
+// //                 </Link>
+// //               </Button>
+// //             ) : (
+// //               <>
+// //                 <Button variant="ghost" asChild>
+// //                   <Link href="/login">Login</Link>
+// //                 </Button>
+// //                 <Button asChild>
+// //                   <Link href="/signup">Get Started</Link>
+// //                 </Button>
+// //                    <ThemeToggle />
+// //               </>
+// //             )}
+          
+         
+// //           </div>
+
+// //           <button
+// //             className="md:hidden p-2 text-muted-foreground hover:text-foreground"
+// //             onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+// //           >
+// //             {mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
+// //           </button>
+// //         </div>
+// //       </div>
+
+// //       {mobileMenuOpen && (
+// //         <div className="md:hidden border-t border-border/40 bg-background/95 backdrop-blur-xl">
+// //           <div className="px-4 py-6 space-y-4">
+// //             <Link href="#features" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
+// //               Features
+// //             </Link>
+// //             <Link href="#how-it-works" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
+// //               How It Works
+// //             </Link>
+// //             <Link href="#benefits" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
+// //               Benefits
+// //             </Link>
+// //             <Link href="#testimonials" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
+// //               Testimonials
+// //             </Link>
+// //             <div className="pt-4 space-y-2">
+// //               {address ? (
+// //                 <Button variant="outline" className="w-full" asChild>
+// //                   <Link href="/login">
+// //                     <Wallet className="w-4 h-4 mr-2" />
+// //                     {formatAddress(address)}
+// //                   </Link>
+// //                 </Button>
+// //               ) : (
+// //                 <>
+// //                   <Button variant="ghost" className="w-full" asChild>
+// //                     <Link href="/login">Login</Link>
+// //                   </Button>
+// //                   <Button className="w-full" asChild>
+// //                     <Link href="/signup">Get Started</Link>
+// //                   </Button>
+// //                 </>
+// //               )}
+// //             </div>
+// //           </div>
+// //         </div>
+// //       )}
+// //     </nav>
+// //   )
+// // }
+
+// 'use client'
+
+// import Link from 'next/link'
+// import { Button } from '@/components/ui/button'
+// import { Menu, X } from 'lucide-react'
+// import { useState } from 'react'
+// import Image from 'next/image'
+// import { ThemeToggle } from './ui/ThemeToggle'
+// import { WalletConnect } from '@/components/wallet-connect'
+
+// export function Navbar() {
+//   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+
+//   return (
+//     <nav className="fixed top-0 left-0 right-0 z-50 border-b border-border/40 backdrop-blur-xl bg-background/80">
+//       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+//         <div className="flex h-16 items-center justify-between">
+//           <div className="flex items-center gap-2">
+//             <Image
+//               src='/assets/logo2.png'
+//               alt="Logo"
+//               width={20}
+//               height={20}
+//               className="h-10 w-10 object-cover"
+//             />
+//             <span className="text-xl font-bold text-foreground">TaskChain</span>
+//           </div>
+
+//           <div className="hidden md:flex items-center gap-8">
+//             <Link href="#features" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+//               Features
+//             </Link>
+//             <Link href="#how-it-works" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+//               How It Works
+//             </Link>
+//             <Link href="#benefits" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+//               Benefits
+//             </Link>
+//             <Link href="#testimonials" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+//               Testimonials
+//             </Link>
+//           </div>
+
+//           <div className="hidden md:flex items-center gap-4">
+//             <WalletConnect />
+//             <ThemeToggle />
+//           </div>
+
+//           <button
+//             className="md:hidden p-2 text-muted-foreground hover:text-foreground"
+//             onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+//           >
+//             {mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
+//           </button>
+//         </div>
+//       </div>
+
+//       {mobileMenuOpen && (
+//         <div className="md:hidden border-t border-border/40 bg-background/95 backdrop-blur-xl">
+//           <div className="px-4 py-6 space-y-4">
+//             <Link href="#features" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
+//               Features
+//             </Link>
+//             <Link href="#how-it-works" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
+//               How It Works
+//             </Link>
+//             <Link href="#benefits" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
+//               Benefits
+//             </Link>
+//             <Link href="#testimonials" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
+//               Testimonials
+//             </Link>
+//             <div className="pt-4 flex flex-col gap-2">
+//               <WalletConnect />
+//               <ThemeToggle />
+//             </div>
+//           </div>
+//         </div>
+//       )}
+//     </nav>
+//   )
+// }
+
+"use client";
+
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Menu, X } from "lucide-react";
+import { useState } from "react";
+import Image from "next/image";
+import { ThemeToggle } from "./ui/ThemeToggle";
+import { WalletConnect } from "@/components/wallet-connect";
 
 export function Navbar() {
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
-  const [address, setAddress] = useState<string | null>(null)
-
-  useEffect(() => {
-    const savedAddress = localStorage.getItem('stellar_wallet_address')
-    if (savedAddress && savedAddress !== address) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect
-      setAddress(savedAddress)
-    }
-  }, [address])
-
-  const formatAddress = (addr: string) => {
-    if (!addr || addr.length <= 10) return addr;
-    return `${addr.substring(0, 5)}...${addr.substring(addr.length - 4)}`
-  }
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   return (
     <nav className="fixed top-0 left-0 right-0 z-50 border-b border-border/40 backdrop-blur-xl bg-background/80">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         <div className="flex h-16 items-center justify-between">
+          {/* Logo */}
           <div className="flex items-center gap-2">
             <Image
-              src='/assets/logo2.png'
+              src="/assets/logo2.png"
               alt="Logo"
               width={20}
               height={20}
               className="h-10 w-10 object-cover"
             />
-            <span className="text-xl font-bold text-foreground">TaskChain</span>
+            <span className="text-xl font-bold text-foreground">
+              TaskChain
+            </span>
           </div>
 
+          {/* Desktop Links */}
           <div className="hidden md:flex items-center gap-8">
-            <Link href="#features" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+            <Link href="#features" className="text-sm text-muted-foreground hover:text-foreground">
               Features
             </Link>
-            <Link href="#how-it-works" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+            <Link href="#how-it-works" className="text-sm text-muted-foreground hover:text-foreground">
               How It Works
             </Link>
-            <Link href="#benefits" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+            <Link href="#benefits" className="text-sm text-muted-foreground hover:text-foreground">
               Benefits
             </Link>
-            <Link href="#testimonials" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+            <Link href="#testimonials" className="text-sm text-muted-foreground hover:text-foreground">
               Testimonials
             </Link>
           </div>
 
+          {/* Desktop Actions */}
           <div className="hidden md:flex items-center gap-4">
-            {address ? (
-              <Button variant="outline" asChild>
-                <Link href="/login">
-                  <Wallet className="w-4 h-4 mr-2" />
-                  {formatAddress(address)}
-                </Link>
-              </Button>
-            ) : (
-              <>
-                <Button variant="ghost" asChild>
-                  <Link href="/login">Login</Link>
-                </Button>
-                <Button asChild>
-                  <Link href="/signup">Get Started</Link>
-                </Button>
-                   <ThemeToggle />
-              </>
-            )}
-          
-         
+            <WalletConnect />
+            <ThemeToggle />
           </div>
 
+          {/* Mobile Menu Button */}
           <button
             className="md:hidden p-2 text-muted-foreground hover:text-foreground"
             onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
           >
-            {mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
+            {mobileMenuOpen ? (
+              <X className="h-6 w-6" />
+            ) : (
+              <Menu className="h-6 w-6" />
+            )}
           </button>
         </div>
       </div>
 
+      {/* Mobile Menu */}
       {mobileMenuOpen && (
         <div className="md:hidden border-t border-border/40 bg-background/95 backdrop-blur-xl">
           <div className="px-4 py-6 space-y-4">
-            <Link href="#features" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
+            <Link href="#features" onClick={() => setMobileMenuOpen(false)}>
               Features
             </Link>
-            <Link href="#how-it-works" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
+            <Link href="#how-it-works" onClick={() => setMobileMenuOpen(false)}>
               How It Works
             </Link>
-            <Link href="#benefits" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
+            <Link href="#benefits" onClick={() => setMobileMenuOpen(false)}>
               Benefits
             </Link>
-            <Link href="#testimonials" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
+            <Link href="#testimonials" onClick={() => setMobileMenuOpen(false)}>
               Testimonials
             </Link>
-            <div className="pt-4 space-y-2">
-              {address ? (
-                <Button variant="outline" className="w-full" asChild>
-                  <Link href="/login">
-                    <Wallet className="w-4 h-4 mr-2" />
-                    {formatAddress(address)}
-                  </Link>
-                </Button>
-              ) : (
-                <>
-                  <Button variant="ghost" className="w-full" asChild>
-                    <Link href="/login">Login</Link>
-                  </Button>
-                  <Button className="w-full" asChild>
-                    <Link href="/signup">Get Started</Link>
-                  </Button>
-                </>
-              )}
+
+            <div className="pt-4 flex flex-col gap-2">
+              <WalletConnect />
+              <ThemeToggle />
             </div>
           </div>
         </div>
       )}
     </nav>
-  )
-}
+  );
+}
\ No newline at end of file
diff --git a/components/wallet-connect.tsx b/components/wallet-connect.tsx
new file mode 100644
index 0000000..6f71407
--- /dev/null
+++ b/components/wallet-connect.tsx
@@ -0,0 +1,402 @@
+// "use client";
+
+// import { useState, useEffect, useCallback } from "react";
+// import { Button } from "@/components/ui/button";
+// import { Wallet, LogOut } from "lucide-react";
+// import {
+//   isConnected,
+//   requestAccess,
+//   getUserInfo,
+// } from "@stellar/freighter-api";
+// type WalletState = {
+//   connected: boolean;
+//   publicKey: string | null;
+//   error: string | null;
+// };
+
+// export function WalletConnect() {
+//   const [wallet, setWallet] = useState<WalletState>({
+//     connected: false,
+//     publicKey: null,
+//     error: null,
+//   });
+//   const [loading, setLoading] = useState(false);
+
+//   // Check if Freighter is available and already connected
+//   const checkConnection = useCallback(async () => {
+//   try {
+//     const connected = await isConnected();
+//     if (connected) {
+//       const user = await getUserInfo();
+//       setWallet({
+//         connected: true,
+//         publicKey: user.publicKey,
+//         error: null,
+//       });
+//     }
+//   } catch {}
+// }, []);
+
+//   useEffect(() => {
+//     checkConnection();
+//   }, [checkConnection]);
+
+//   const connect = async () => {
+//   setLoading(true);
+//   setWallet((prev) => ({ ...prev, error: null }));
+
+//   try {
+//     await requestAccess();
+//     const user = await getUserInfo();
+
+//     setWallet({
+//       connected: true,
+//       publicKey: user.publicKey,
+//       error: null,
+//     });
+//   } catch (err) {
+//     const message =
+//       err instanceof Error ? err.message : "Failed to connect wallet";
+//     setWallet((prev) => ({ ...prev, error: message }));
+//   } finally {
+//     setLoading(false);
+//   }
+// };
+
+
+//   const disconnect = () => {
+//     localStorage.removeItem("stellar_wallet_address");
+//     setWallet({ connected: false, publicKey: null, error: null });
+//   };
+
+//   const truncateKey = (key: string): string => {
+//     if (key.length <= 10) return key;
+//     return `${key.slice(0, 5)}...${key.slice(-4)}`;
+//   };
+
+//   // Error state
+//   if (wallet.error) {
+//     return (
+//       <div className="flex flex-col gap-2">
+//         <p className="text-xs text-destructive max-w-[200px]">{wallet.error}</p>
+//         <div className="flex gap-2">
+//           <Button variant="outline" size="sm" onClick={connect} disabled={loading}>
+//             {loading ? "Connecting..." : "Retry"}
+//           </Button>
+//           <Button variant="ghost" size="sm" onClick={() => setWallet((prev) => ({ ...prev, error: null }))}>
+//             Dismiss
+//           </Button>
+//         </div>
+//       </div>
+//     );
+//   }
+
+//   // Connected state
+//   if (wallet.connected && wallet.publicKey) {
+//     return (
+//       <div className="flex items-center gap-2">
+//         <span className="text-sm text-muted-foreground font-mono">
+//           {truncateKey(wallet.publicKey)}
+//         </span>
+//         <Button variant="ghost" size="icon" onClick={disconnect} title="Disconnect Wallet">
+//           <LogOut className="h-4 w-4" />
+//         </Button>
+//       </div>
+//     );
+//   }
+
+//   // Disconnected state
+//   return (
+//     <Button onClick={connect} disabled={loading} variant="outline">
+//       <Wallet className="mr-2 h-4 w-4" />
+//       {loading ? "Connecting..." : "Connect Wallet"}
+//     </Button>
+//   );
+// }
+
+// "use client";
+
+// import { useState, useEffect, useCallback } from "react";
+// import { Button } from "@/components/ui/button";
+// import { Wallet, LogOut } from "lucide-react";
+// import {
+//   isConnected,
+//   requestAccess,
+//   getUserInfo,
+// } from "@stellar/freighter-api";
+
+// type WalletState = {
+//   connected: boolean;
+//   publicKey: string | null;
+//   error: string | null;
+// };
+
+// export function WalletConnect() {
+//   const [wallet, setWallet] = useState<WalletState>({
+//     connected: false,
+//     publicKey: null,
+//     error: null,
+//   });
+//   const [loading, setLoading] = useState(false);
+
+//   // Check connection on load
+//   const checkConnection = useCallback(async () => {
+//     try {
+//       const connected = await isConnected();
+
+//       if (connected) {
+//         const user = await getUserInfo();
+//         setWallet({
+//           connected: true,
+//           publicKey: user.publicKey,
+//           error: null,
+//         });
+//       }
+//     } catch {
+//       // silent fail (user not connected yet)
+//     }
+//   }, []);
+
+//   useEffect(() => {
+//     checkConnection();
+//   }, [checkConnection]);
+
+//   const connect = async () => {
+//     setLoading(true);
+//     setWallet((prev) => ({ ...prev, error: null }));
+
+//     try {
+//       await requestAccess();
+//       const user = await getUserInfo();
+
+//       setWallet({
+//         connected: true,
+//         publicKey: user.publicKey,
+//         error: null,
+//       });
+//     } catch (err) {
+//       const message =
+//         err instanceof Error ? err.message : "Failed to connect wallet";
+
+//       setWallet((prev) => ({
+//         ...prev,
+//         error: message,
+//       }));
+//     } finally {
+//       setLoading(false);
+//     }
+//   };
+
+//   const disconnect = () => {
+//     setWallet({
+//       connected: false,
+//       publicKey: null,
+//       error: null,
+//     });
+//   };
+
+//   const truncateKey = (key: string) => {
+//     return `${key.slice(0, 5)}...${key.slice(-4)}`;
+//   };
+
+//   // 🔴 Error State
+//   if (wallet.error) {
+//     return (
+//       <div className="flex flex-col gap-2">
+//         <p className="text-xs text-destructive max-w-[200px]">
+//           {wallet.error}
+//         </p>
+//         <div className="flex gap-2">
+//           <Button
+//             variant="outline"
+//             size="sm"
+//             onClick={connect}
+//             disabled={loading}
+//           >
+//             {loading ? "Connecting..." : "Retry"}
+//           </Button>
+//           <Button
+//             variant="ghost"
+//             size="sm"
+//             onClick={() =>
+//               setWallet((prev) => ({ ...prev, error: null }))
+//             }
+//           >
+//             Dismiss
+//           </Button>
+//         </div>
+//       </div>
+//     );
+//   }
+
+//   // 🟢 Connected State
+//   if (wallet.connected && wallet.publicKey) {
+//     return (
+//       <div className="flex items-center gap-2">
+//         <span className="text-sm text-muted-foreground font-mono">
+//           {truncateKey(wallet.publicKey)}
+//         </span>
+//         <Button
+//           variant="ghost"
+//           size="icon"
+//           onClick={disconnect}
+//           title="Disconnect Wallet"
+//         >
+//           <LogOut className="h-4 w-4" />
+//         </Button>
+//       </div>
+//     );
+//   }
+
+//   // ⚪ Default (Disconnected)
+//   return (
+//     <Button onClick={connect} disabled={loading} variant="outline">
+//       <Wallet className="mr-2 h-4 w-4" />
+//       {loading ? "Connecting..." : "Connect Wallet"}
+//     </Button>
+//   );
+// }"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Wallet, LogOut } from "lucide-react";
+import {
+  isConnected,
+  requestAccess,
+  getAddress,
+} from "@stellar/freighter-api";
+
+type WalletState = {
+  connected: boolean;
+  publicKey: string | null;
+  error: string | null;
+};
+
+export function WalletConnect() {
+  const [wallet, setWallet] = useState<WalletState>({
+    connected: false,
+    publicKey: null,
+    error: null,
+  });
+  const [loading, setLoading] = useState(false);
+
+  const checkConnection = useCallback(async () => {
+    try {
+      const connected = await isConnected();
+
+      if (connected) {
+        const { address, error } = await getAddress();
+
+        if (error || !address) return;
+
+        setWallet({
+          connected: true,
+          publicKey: address,
+          error: null,
+        });
+      }
+    } catch {
+      // ignore
+    }
+  }, []);
+
+  useEffect(() => {
+    checkConnection();
+  }, [checkConnection]);
+
+  const connect = async () => {
+    setLoading(true);
+    setWallet((prev) => ({ ...prev, error: null }));
+
+    try {
+      await requestAccess();
+
+      const { address, error } = await getAddress();
+
+      if (error || !address) {
+        throw new Error(error || "Failed to retrieve wallet address");
+      }
+
+      setWallet({
+        connected: true,
+        publicKey: address,
+        error: null,
+      });
+    } catch (err) {
+      const message =
+        err instanceof Error ? err.message : "Failed to connect wallet";
+
+      setWallet((prev) => ({
+        ...prev,
+        error: message,
+      }));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const disconnect = () => {
+    setWallet({
+      connected: false,
+      publicKey: null,
+      error: null,
+    });
+  };
+
+  const truncateKey = (key: string) =>
+    `${key.slice(0, 5)}...${key.slice(-4)}`;
+
+  if (wallet.error) {
+    return (
+      <div className="flex flex-col gap-2">
+        <p className="text-xs text-destructive max-w-[200px]">
+          {wallet.error}
+        </p>
+        <div className="flex gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={connect}
+            disabled={loading}
+          >
+            {loading ? "Connecting..." : "Retry"}
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() =>
+              setWallet((prev) => ({ ...prev, error: null }))
+            }
+          >
+            Dismiss
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  if (wallet.connected && wallet.publicKey) {
+    return (
+      <div className="flex items-center gap-2">
+        <span className="text-sm text-muted-foreground font-mono">
+          {truncateKey(wallet.publicKey)}
+        </span>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={disconnect}
+          title="Disconnect Wallet"
+        >
+          <LogOut className="h-4 w-4" />
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <Button onClick={connect} disabled={loading} variant="outline">
+      <Wallet className="mr-2 h-4 w-4" />
+      {loading ? "Connecting..." : "Connect Wallet"}
+    </Button>
+  );
+}
\ No newline at end of file