diff --git a/src/components/layout/header.tsx b/src/components/layout/header.tsx
index b7d4ebb..bd71ff2 100644
--- a/src/components/layout/header.tsx
+++ b/src/components/layout/header.tsx
@@ -25,7 +25,7 @@ import { useTheme } from "@/components/theme/theme-provider";
 import { NotificationBell } from "@/components/shared/notification-bell";
 
 export function Header() {
-  const { isAuthenticated, walletAddress } = useAuthStore();
+  const { isAuthenticated, walletAddress, disconnect } = useAuthStore();
   const pathname = usePathname();
   const [mobileOpen, setMobileOpen] = useState(false);
   const { resolvedTheme, toggleTheme } = useTheme();
@@ -80,16 +80,23 @@ export function Header() {
               <DropdownMenuContent align="end" className="w-56 dark:border-gray-800 dark:bg-gray-900">
                 <DropdownMenuLabel className="text-gray-900 dark:text-gray-100">My Account</DropdownMenuLabel>
                 <DropdownMenuSeparator />
-                <DropdownMenuItem>
-                  <User className="mr-2 h-4 w-4" />
-                  <span>Profile</span>
+                <DropdownMenuItem asChild>
+                  <Link href="/profile" className="flex items-center w-full cursor-pointer">
+                    <User className="mr-2 h-4 w-4" />
+                    <span>Profile</span>
+                  </Link>
                 </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <Settings className="mr-2 h-4 w-4" />
-                  <span>Settings</span>
+                <DropdownMenuItem asChild>
+                  <Link href="/settings" className="flex items-center w-full cursor-pointer">
+                    <Settings className="mr-2 h-4 w-4" />
+                    <span>Settings</span>
+                  </Link>
                 </DropdownMenuItem>
                 <DropdownMenuSeparator />
-                <DropdownMenuItem className="text-red-600 focus:text-red-700">
+                <DropdownMenuItem
+                  onClick={() => disconnect()}
+                  className="text-red-600 focus:text-red-700 cursor-pointer"
+                >
                   <LogOut className="mr-2 h-4 w-4" />
                   <span>Log out</span>
                 </DropdownMenuItem>
diff --git a/src/components/layout/sidebar.tsx b/src/components/layout/sidebar.tsx
index 0142cdf..b630232 100644
--- a/src/components/layout/sidebar.tsx
+++ b/src/components/layout/sidebar.tsx
@@ -5,37 +5,140 @@ import { usePathname } from "next/navigation";
 import { useAuthStore } from "@/store/auth-store";
 import { cn } from "@/lib/utils/cn";
 import { isNavLinkActive, navLinks } from "./nav-links";
+import { useState, useEffect } from "react";
+import { ChevronLeft, ChevronRight, Menu, X } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 
 export function Sidebar() {
   const pathname = usePathname();
   const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
   const hasHydrated = useAuthStore((s) => s.hasHydrated);
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false);
+
+  // Close mobile drawer on route change
+  useEffect(() => {
+    setMobileDrawerOpen(false);
+  }, [pathname]);
 
   if (!hasHydrated || !isAuthenticated) return null;
 
   return (
-    <aside className="hidden lg:flex flex-col w-64 border-r border-gray-200 bg-gray-50/50 min-h-[calc(100vh-4rem)] dark:border-gray-800 dark:bg-gray-900/50">
-      <nav aria-label="Course navigation" className="flex-1 px-3 py-4 space-y-1">
-        {navLinks.map((link) => {
-          const isActive = isNavLinkActive(pathname, link.href);
-          return (
-            <Link
-              key={link.href}
-              href={link.href}
-              aria-current={isActive ? "page" : undefined}
-              className={cn(
-                "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors",
-                isActive
-                  ? "bg-primary-100 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300"
-                  : "text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100"
-              )}
-            >
-              <link.icon className="h-5 w-5" />
-              {link.label}
-            </Link>
-          );
-        })}
-      </nav>
-    </aside>
+    <>
+      {/* Mobile Drawer Trigger Button */}
+      <div className="lg:hidden fixed bottom-4 right-4 z-40">
+        <button
+          type="button"
+          onClick={() => setMobileDrawerOpen(true)}
+          className="flex h-12 w-12 items-center justify-center rounded-full bg-stellar-purple text-white shadow-lg hover:bg-purple-700 transition-colors"
+          aria-label="Open navigation drawer"
+        >
+          <Menu className="h-6 w-6" />
+        </button>
+      </div>
+
+      {/* Mobile Drawer Backdrop Overlay */}
+      {mobileDrawerOpen && (
+        <div
+          className="lg:hidden fixed inset-0 z-50 bg-black/50 backdrop-blur-sm transition-opacity"
+          onClick={() => setMobileDrawerOpen(false)}
+        />
+      )}
+
+      {/* Mobile Drawer Content */}
+      <aside
+        className={cn(
+          "lg:hidden fixed inset-y-0 left-0 z-50 flex w-72 flex-col bg-white p-4 shadow-2xl transition-transform duration-300 dark:bg-gray-900",
+          mobileDrawerOpen ? "translate-x-0" : "-translate-x-full"
+        )}
+      >
+        <div className="flex items-center justify-between pb-4 border-b border-gray-200 dark:border-gray-800">
+          <span className="font-bold text-lg text-gray-900 dark:text-gray-100">Navigation</span>
+          <button
+            type="button"
+            onClick={() => setMobileDrawerOpen(false)}
+            className="p-1 rounded-lg text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800"
+            aria-label="Close drawer"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+        <nav aria-label="Mobile course navigation" className="mt-4 space-y-1">
+          {navLinks.map((link) => {
+            const isActive = isNavLinkActive(pathname, link.href);
+            return (
+              <Link
+                key={link.href}
+                href={link.href}
+                aria-current={isActive ? "page" : undefined}
+                className={cn(
+                  "flex items-center gap-3 rounded-xl px-3 py-3 text-sm font-semibold transition-all",
+                  isActive
+                    ? "bg-stellar-purple text-white shadow-md shadow-stellar-purple/20"
+                    : "text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100"
+                )}
+              >
+                <link.icon className="h-5 w-5" />
+                {link.label}
+              </Link>
+            );
+          })}
+        </nav>
+      </aside>
+
+      {/* Desktop Sidebar */}
+      <aside
+        className={cn(
+          "hidden lg:flex flex-col border-r border-gray-200 bg-gray-50/50 min-h-[calc(100vh-4rem)] transition-all duration-300 dark:border-gray-800 dark:bg-gray-900/50 relative",
+          isCollapsed ? "w-16" : "w-64"
+        )}
+      >
+        {/* Collapse / Expand Toggle Button */}
+        <button
+          type="button"
+          onClick={() => setIsCollapsed(!isCollapsed)}
+          className="absolute -right-3 top-6 flex h-6 w-6 items-center justify-center rounded-full border border-gray-200 bg-white text-gray-600 shadow-sm hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 z-10"
+          aria-label={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+        >
+          {isCollapsed ? <ChevronRight className="h-3.5 w-3.5" /> : <ChevronLeft className="h-3.5 w-3.5" />}
+        </button>
+
+        <nav aria-label="Course navigation" className="flex-1 px-3 py-4 space-y-1">
+          {navLinks.map((link) => {
+            const isActive = isNavLinkActive(pathname, link.href);
+            const content = (
+              <Link
+                key={link.href}
+                href={link.href}
+                aria-current={isActive ? "page" : undefined}
+                className={cn(
+                  "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all",
+                  isActive
+                    ? "bg-stellar-purple text-white shadow-sm font-semibold dark:bg-stellar-purple dark:text-white"
+                    : "text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100",
+                  isCollapsed && "justify-center px-0"
+                )}
+              >
+                <link.icon className="h-5 w-5 shrink-0" />
+                {!isCollapsed && <span>{link.label}</span>}
+              </Link>
+            );
+
+            if (isCollapsed) {
+              return (
+                <Tooltip key={link.href}>
+                  <TooltipTrigger asChild>{content}</TooltipTrigger>
+                  <TooltipContent side="right">
+                    <p>{link.label}</p>
+                  </TooltipContent>
+                </Tooltip>
+              );
+            }
+
+            return content;
+          })}
+        </nav>
+      </aside>
+    </>
   );
 }
diff --git a/src/components/wallet/balance-display.tsx b/src/components/wallet/balance-display.tsx
index e8bdce4..4400672 100644
--- a/src/components/wallet/balance-display.tsx
+++ b/src/components/wallet/balance-display.tsx
@@ -2,9 +2,11 @@
 
 import { useRewards } from "@/lib/hooks/use-rewards";
 import { formatTokenBalance } from "@/lib/utils/format";
-import { Coins, TrendingUp } from "lucide-react";
+import { Coins, ExternalLink, Copy, Check } from "lucide-react";
 import { cn } from "@/lib/utils/cn";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { useState, useEffect } from "react";
+import Link from "next/link";
 
 interface BalanceDisplayProps {
   className?: string;
@@ -13,16 +15,39 @@ interface BalanceDisplayProps {
 
 export function BalanceDisplay({ className, compact = false }: BalanceDisplayProps) {
   const { balances, loading } = useRewards();
+  const [usdRate, setUsdRate] = useState<number | null>(null);
+  const [priceLoading, setPriceLoading] = useState(true);
+  const [copied, setCopied] = useState(false);
 
   const primaryBalance = balances[0];
-  const balance = primaryBalance
-    ? formatTokenBalance(primaryBalance.balance, primaryBalance.decimals)
-    : "0";
+  const tokenCode = primaryBalance?.tokenCode || "LEARN";
+  const contractAddress = primaryBalance?.contractAddress || "CD5...LEARNCONTRACT";
+  const balanceVal = primaryBalance ? primaryBalance.balance : 0;
+  const balanceStr = formatTokenBalance(balanceVal, primaryBalance?.decimals || 7);
 
-  if (loading) {
+  useEffect(() => {
+    // Simulate/fetch USD price conversion rate
+    setPriceLoading(true);
+    const timer = setTimeout(() => {
+      setUsdRate(0.15); // 1 LEARN = $0.15 USD
+      setPriceLoading(false);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, [primaryBalance]);
+
+  const handleCopyContract = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    navigator.clipboard.writeText(contractAddress);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const usdValue = usdRate !== null ? (balanceVal * usdRate).toFixed(2) : "0.00";
+
+  if (loading || priceLoading) {
     return (
       <div className={cn("animate-pulse", className)}>
-        <div className="h-8 w-24 rounded bg-gray-200" />
+        <div className="h-20 w-full rounded-xl bg-gray-200 dark:bg-gray-800" />
       </div>
     );
   }
@@ -33,41 +58,69 @@ export function BalanceDisplay({ className, compact = false }: BalanceDisplayPro
         <TooltipTrigger asChild>
           <div className={cn("flex items-center gap-1.5 text-sm font-medium cursor-help", className)}>
             <Coins className="h-4 w-4 text-stellar-purple" />
-            <span>{balance}</span>
-            <span className="text-gray-500">{primaryBalance?.tokenCode || "LEARN"}</span>
+            <span>{balanceStr}</span>
+            <span className="text-gray-500">{tokenCode}</span>
+            <span className="text-xs text-gray-400">($ {usdValue})</span>
           </div>
         </TooltipTrigger>
         <TooltipContent>
-          <p>Available {primaryBalance?.tokenCode || "LEARN"} balance</p>
+          <p>Available {tokenCode} balance (${usdValue} USD)</p>
         </TooltipContent>
       </Tooltip>
     );
   }
 
   return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <div
-          className={cn(
-            "rounded-xl border border-gray-200 bg-gradient-to-br from-stellar-purple/5 to-stellar-blue/5 p-4 cursor-help",
-            className
-          )}
+    <div
+      className={cn(
+        "rounded-xl border border-gray-200 bg-gradient-to-br from-stellar-purple/5 to-stellar-blue/5 p-4 dark:border-gray-800 dark:bg-gray-900/50",
+        className
+      )}
+    >
+      <div className="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 mb-1">
+        <div className="flex items-center gap-2">
+          <Coins className="h-4 w-4 text-stellar-purple" />
+          Token Balance
+        </div>
+        <Link
+          href="/transactions"
+          className="flex items-center gap-1 text-xs text-stellar-purple hover:underline dark:text-purple-400"
         >
-          <div className="flex items-center gap-2 text-sm text-gray-500 mb-1">
-            <Coins className="h-4 w-4" />
-            Token Balance
-          </div>
+          View Transactions <ExternalLink className="h-3 w-3" />
+        </Link>
+      </div>
+
+      <div className="flex items-baseline justify-between">
+        <div>
           <div className="flex items-baseline gap-2">
-            <span className="text-2xl font-bold text-gray-900">{balance}</span>
-            <span className="text-sm text-gray-500">
-              {primaryBalance?.tokenCode || "LEARN"}
-            </span>
+            <span className="text-2xl font-bold text-gray-900 dark:text-gray-100">{balanceStr}</span>
+            <span className="text-sm font-semibold text-gray-500 dark:text-gray-400">{tokenCode}</span>
+          </div>
+          <div className="text-xs text-gray-500 dark:text-gray-400 font-medium mt-0.5">
+            ≈ ${usdValue} USD
           </div>
         </div>
-      </TooltipTrigger>
-      <TooltipContent>
-        <p>Your total {primaryBalance?.tokenCode || "LEARN"} balance</p>
-      </TooltipContent>
-    </Tooltip>
+
+        <div className="flex flex-col items-end gap-1 text-xs text-gray-400">
+          <button
+            type="button"
+            onClick={handleCopyContract}
+            className="flex items-center gap-1 hover:text-gray-700 dark:hover:text-gray-200 transition-colors"
+            title="Copy contract address"
+          >
+            {copied ? (
+              <Check className="h-3 w-3 text-green-500" />
+            ) : (
+              <Copy className="h-3 w-3" />
+            )}
+            <span className="font-mono text-[10px]">
+              {contractAddress.length > 12
+                ? `${contractAddress.slice(0, 4)}...${contractAddress.slice(-4)}`
+                : contractAddress}
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
   );
 }
diff --git a/src/components/wallet/connect-button.tsx b/src/components/wallet/connect-button.tsx
index 4d9ddfc..024ad2d 100644
--- a/src/components/wallet/connect-button.tsx
+++ b/src/components/wallet/connect-button.tsx
@@ -1,28 +1,28 @@
 "use client";
 
 import { useAuth } from "@/lib/hooks/use-auth";
+import { useAuthStore } from "@/store/auth-store";
 import { Button } from "@/components/ui/button";
-import { Wallet, LogOut, Loader2 } from "lucide-react";
+import { Wallet, LogOut, Loader2, Copy, Check, Globe, RefreshCw } from "lucide-react";
 import { truncateAddress } from "@/lib/utils/format";
 import { useState, useRef, useEffect, useCallback } from "react";
 
 export function ConnectButton() {
   const { isAuthenticated, walletAddress, isConnecting, connectWallet, disconnect } =
     useAuth();
-  const [showDisconnect, setShowDisconnect] = useState(false);
+  const { network, setNetwork } = useAuthStore();
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [copied, setCopied] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
-  const disconnectButtonRef = useRef<HTMLButtonElement>(null);
   const triggerRef = useRef<HTMLButtonElement>(null);
 
   const closeDropdown = useCallback(() => {
-    setShowDisconnect(false);
+    setShowDropdown(false);
     triggerRef.current?.focus();
   }, []);
 
   useEffect(() => {
-    if (!showDisconnect) return;
-
-    disconnectButtonRef.current?.focus();
+    if (!showDropdown) return;
 
     const handleClickOutside = (e: MouseEvent) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
@@ -33,25 +33,6 @@ export function ConnectButton() {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === "Escape") {
         closeDropdown();
-        return;
-      }
-
-      if (e.key === "Tab") {
-        const focusableElements = dropdownRef.current?.querySelectorAll<HTMLElement>(
-          "button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])"
-        );
-        if (!focusableElements || focusableElements.length === 0) return;
-
-        const firstElement = focusableElements[0];
-        const lastElement = focusableElements[focusableElements.length - 1];
-
-        if (e.shiftKey && document.activeElement === firstElement) {
-          e.preventDefault();
-          lastElement.focus();
-        } else if (!e.shiftKey && document.activeElement === lastElement) {
-          e.preventDefault();
-          firstElement.focus();
-        }
       }
     };
 
@@ -61,7 +42,20 @@ export function ConnectButton() {
       document.removeEventListener("mousedown", handleClickOutside);
       document.removeEventListener("keydown", handleKeyDown);
     };
-  }, [showDisconnect, closeDropdown]);
+  }, [showDropdown, closeDropdown]);
+
+  const handleCopyAddress = () => {
+    if (walletAddress) {
+      navigator.clipboard.writeText(walletAddress);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  const handleToggleNetwork = () => {
+    const nextNetwork = network === "testnet" ? "public" : "testnet";
+    setNetwork(nextNetwork);
+  };
 
   if (isAuthenticated && walletAddress) {
     return (
@@ -70,29 +64,89 @@ export function ConnectButton() {
           ref={triggerRef}
           variant="outline"
           size="sm"
-          onClick={() => setShowDisconnect(!showDisconnect)}
-          aria-expanded={showDisconnect}
+          onClick={() => setShowDropdown(!showDropdown)}
+          aria-expanded={showDropdown}
           aria-haspopup="true"
-          className="gap-2"
+          className="gap-2 font-mono"
         >
-          <div className="h-2 w-2 rounded-full bg-green-500" />
-          {truncateAddress(walletAddress)}
+          <span className="flex items-center gap-1.5 font-sans text-xs text-gray-500 dark:text-gray-400">
+            <span className="font-semibold text-gray-700 dark:text-gray-200">Freighter</span>
+            <span className="flex items-center gap-1 text-[10px] uppercase font-bold text-stellar-purple px-1.5 py-0.5 rounded bg-stellar-purple/10">
+              <span className="h-1.5 w-1.5 rounded-full bg-green-500" />
+              {network}
+            </span>
+          </span>
+          <span className="font-semibold text-gray-900 dark:text-gray-100">
+            {truncateAddress(walletAddress)}
+          </span>
         </Button>
 
-        {showDisconnect && (
-          <div className="absolute right-0 top-full mt-2 w-48 rounded-lg border border-gray-200 bg-white shadow-lg z-50" role="menu">
-            <button
-              ref={disconnectButtonRef}
-              onClick={() => {
-                disconnect();
-                closeDropdown();
-              }}
-              role="menuitem"
-              className="flex w-full items-center gap-2 px-3 py-2 text-sm text-red-600 hover:bg-red-50 rounded-lg"
-            >
-              <LogOut className="h-4 w-4" />
-              Disconnect
-            </button>
+        {showDropdown && (
+          <div
+            className="absolute right-0 top-full mt-2 w-56 rounded-xl border border-gray-200 bg-white p-1.5 shadow-xl z-50 dark:border-gray-800 dark:bg-gray-900"
+            role="menu"
+          >
+            <div className="px-3 py-2 border-b border-gray-100 dark:border-gray-800">
+              <div className="text-xs text-gray-400 font-medium">Connected Wallet</div>
+              <div className="text-sm font-semibold text-gray-800 dark:text-gray-200 flex items-center justify-between">
+                <span>Freighter Wallet</span>
+                <span className="text-[10px] text-green-600 bg-green-50 px-1.5 py-0.5 rounded font-mono font-bold">
+                  ACTIVE
+                </span>
+              </div>
+              <div className="text-xs font-mono text-gray-500 truncate mt-0.5">
+                {walletAddress}
+              </div>
+            </div>
+
+            <div className="py-1 space-y-0.5">
+              <button
+                type="button"
+                onClick={handleCopyAddress}
+                role="menuitem"
+                className="flex w-full items-center justify-between px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800 rounded-lg transition-colors"
+              >
+                <span className="flex items-center gap-2">
+                  <Copy className="h-4 w-4 text-gray-500" />
+                  Copy Address
+                </span>
+                {copied ? (
+                  <span className="text-xs text-green-600 font-medium flex items-center gap-1">
+                    <Check className="h-3 w-3" /> Copied
+                  </span>
+                ) : null}
+              </button>
+
+              <button
+                type="button"
+                onClick={handleToggleNetwork}
+                role="menuitem"
+                className="flex w-full items-center justify-between px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800 rounded-lg transition-colors"
+              >
+                <span className="flex items-center gap-2">
+                  <Globe className="h-4 w-4 text-gray-500" />
+                  Switch Network
+                </span>
+                <span className="text-xs font-bold uppercase text-stellar-purple flex items-center gap-1">
+                  {network} <RefreshCw className="h-3 w-3" />
+                </span>
+              </button>
+
+              <div className="my-1 border-t border-gray-100 dark:border-gray-800" />
+
+              <button
+                type="button"
+                onClick={() => {
+                  disconnect();
+                  closeDropdown();
+                }}
+                role="menuitem"
+                className="flex w-full items-center gap-2 px-3 py-2 text-sm text-red-600 hover:bg-red-50 dark:hover:bg-red-950/40 rounded-lg transition-colors font-medium"
+              >
+                <LogOut className="h-4 w-4" />
+                Disconnect Wallet
+              </button>
+            </div>
           </div>
         )}
       </div>
@@ -104,7 +158,7 @@ export function ConnectButton() {
       onClick={connectWallet}
       disabled={isConnecting}
       size="sm"
-      className="gap-2"
+      className="gap-2 font-medium"
     >
       {isConnecting ? (
         <>