diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index bdeb106..fdce19c 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -142,10 +142,8 @@ export default function DashboardPage() {
   const showWalletCta = !publicKey
 
   return (
-    <div className="min-h-screen premium-gradient pt-16 pb-20">
-      <div className="container mx-auto px-4 py-6">
-        <PageBackHeader title="Dashboard" />
-        <div className="space-y-6">
+    <div className="min-h-screen premium-gradient pt-24 pb-24 lg:pb-6">
+      <div className="container mx-auto px-4 py-8 space-y-6 max-w-5xl">
           <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
             {stats.map((stat) => (
               <Card key={stat.label}>
@@ -170,12 +168,12 @@ export default function DashboardPage() {
             </CardHeader>
             <CardContent>
               <div className="grid gap-4 grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
-                <Link href="/invest">
-                  <Button className="w-full h-20 text-lg bg-transparent" size="lg" variant="outline">
-                    <TrendingUp className="mr-2 h-5 w-5" />
-                    Invest
-                  </Button>
-                </Link>
+                  <Link href="/invest">
+                    <Button className="w-full h-20 text-lg" size="lg" variant="outline">
+                      <TrendingUp className="mr-2 h-5 w-5" />
+                      Launchpad
+                    </Button>
+                  </Link>
                 <Link href="/savings">
                   <Button className="w-full h-20 text-lg bg-transparent" size="lg" variant="outline">
                     <PiggyBank className="mr-2 h-5 w-5" />
@@ -218,7 +216,7 @@ export default function DashboardPage() {
                     <CardContent className="pt-4">
                       <div className="flex items-center gap-2">
                         <TrendingUp className="h-5 w-5 text-muted-foreground" />
-                        <span className="font-medium">Invest</span>
+                        <span className="font-medium">Launchpad</span>
                       </div>
                       <p className="text-sm text-muted-foreground mt-1">
                         {openLaunchesCount} open launch{openLaunchesCount !== 1 ? "es" : ""}
@@ -273,7 +271,7 @@ export default function DashboardPage() {
               </CardHeader>
               <CardContent>
                 <Link href="/profile">
-                  <Button className="btn-gradient-primary">Open Profile</Button>
+                  <Button className="bg-gradient-to-r from-green-600 to-mint-500 text-white">Connect Wallet</Button>
                 </Link>
               </CardContent>
             </Card>
diff --git a/app/explore/page.tsx b/app/explore/page.tsx
new file mode 100644
index 0000000..e6475a5
--- /dev/null
+++ b/app/explore/page.tsx
@@ -0,0 +1,158 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useRouter } from "next/navigation"
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import {
+  Compass,
+  ArrowRightLeft,
+  PiggyBank,
+  CreditCard,
+  TrendingUp,
+  Coins,
+  Droplets,
+  Loader2,
+  Star,
+  ChevronRight,
+} from "lucide-react"
+import { useTokenRegistry } from "@/hooks/useTokenRegistry"
+
+export default function ExplorePage() {
+  const router = useRouter()
+  const { tokens, isLoading: tokensLoading, error: tokensError } = useTokenRegistry()
+  const [search, setSearch] = useState("")
+
+  const filteredTokens = tokens.filter(token =>
+    !search || token.assetCode.toLowerCase().includes(search.toLowerCase()) || token.name?.toLowerCase().includes(search.toLowerCase())
+  ).slice(0, 12)
+
+  const exploreCategories = [
+    {
+      title: "Trade",
+      description: "Swap tokens instantly at the best rates",
+      icon: ArrowRightLeft,
+      href: "/swap",
+      color: "from-green-600 to-mint-500",
+    },
+    {
+      title: "Savings",
+      description: "Earn yield with time-locked deposits",
+      icon: PiggyBank,
+      href: "/savings",
+      color: "from-blue-600 to-cyan-500",
+    },
+    {
+      title: "Borrow & Lend",
+      description: "Supply assets or borrow against collateral",
+      icon: CreditCard,
+      href: "/lending",
+      color: "from-purple-600 to-pink-500",
+    },
+    {
+      title: "Launchpad",
+      description: "Discover and participate in new launches",
+      icon: TrendingUp,
+      href: "/invest",
+      color: "from-amber-600 to-orange-500",
+    },
+    {
+      title: "Liquidity",
+      description: "Provide liquidity and earn fees",
+      icon: Droplets,
+      href: "/liquidity",
+      color: "from-teal-600 to-cyan-500",
+    },
+  ]
+
+  return (
+    <div className="min-h-screen premium-gradient pt-24 pb-24 lg:pb-6">
+      <div className="container mx-auto px-4 py-8 space-y-8 max-w-4xl">
+        {/* Header */}
+        <div>
+          <h1 className="text-3xl font-bold text-slate-900 dark:text-white flex items-center gap-3">
+            <Compass className="h-8 w-8 text-green-600" />
+            Explore
+          </h1>
+          <p className="text-slate-600 dark:text-slate-400 mt-2">Discover tokens, launchpads, and earning opportunities</p>
+        </div>
+
+        {/* Categories Grid */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {exploreCategories.map((cat) => (
+            <Link key={cat.href} href={cat.href}>
+              <Card className="h-full hover:shadow-lg transition-all border border-slate-200 dark:border-slate-700 hover:border-green-300 dark:hover:border-green-800 group">
+                <CardContent className="p-5">
+                  <div className={`w-10 h-10 rounded-xl bg-gradient-to-br ${cat.color} flex items-center justify-center mb-3 shadow`}>
+                    <cat.icon className="h-5 w-5 text-white" />
+                  </div>
+                  <p className="font-semibold text-slate-900 dark:text-white group-hover:text-green-600 dark:group-hover:text-green-400 transition-colors">
+                    {cat.title}
+                  </p>
+                  <p className="text-sm text-slate-500 dark:text-slate-400 mt-1">{cat.description}</p>
+                </CardContent>
+              </Card>
+            </Link>
+          ))}
+        </div>
+
+        {/* Token Discovery */}
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <h2 className="text-xl font-bold text-slate-900 dark:text-white">Available Tokens</h2>
+              <p className="text-sm text-slate-500 dark:text-slate-400">Discover tokens on the network</p>
+            </div>
+          </div>
+
+          {tokensLoading ? (
+            <div className="flex items-center justify-center py-8">
+              <Loader2 className="h-6 w-6 animate-spin text-slate-400" />
+              <span className="ml-2 text-sm text-slate-500">Loading tokens...</span>
+            </div>
+          ) : tokensError ? (
+            <Card>
+              <CardContent className="py-8 text-center">
+                <p className="text-sm text-slate-500">Unable to load tokens right now.</p>
+                <Button variant="outline" size="sm" className="mt-3" onClick={() => router.refresh()}>Try again</Button>
+              </CardContent>
+            </Card>
+          ) : (
+            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
+              {filteredTokens.length === 0 && !tokensLoading ? (
+                <div className="col-span-full text-center py-8">
+                  <p className="text-sm text-slate-500">No tokens found.</p>
+                </div>
+              ) : (
+                filteredTokens.map((token) => (
+                  <Link
+                    key={`${token.assetCode}-${token.issuer || ""}`}
+                    href={`/token/${encodeURIComponent(token.assetCode)}${token.issuer ? `?issuer=${encodeURIComponent(token.issuer)}` : ''}`}
+                  >
+                    <Card className="h-full hover:shadow-md transition-all border border-slate-200 dark:border-slate-700 hover:border-green-200 dark:hover:border-green-800 group cursor-pointer">
+                      <CardContent className="p-4 flex items-center gap-3">
+                        <div className="w-10 h-10 rounded-full bg-gradient-to-br from-slate-100 to-green-100 dark:from-slate-700 dark:to-slate-800 flex items-center justify-center shrink-0">
+                          <Star className="h-5 w-5 text-green-600 dark:text-green-400" />
+                        </div>
+                        <div className="min-w-0 flex-1">
+                          <p className="font-semibold text-sm text-slate-900 dark:text-white truncate group-hover:text-green-600 transition-colors">
+                            {token.assetCode}
+                          </p>
+                          {token.name && (
+                            <p className="text-xs text-slate-500 dark:text-slate-400 truncate">{token.name}</p>
+                          )}
+                        </div>
+                        <ChevronRight className="h-4 w-4 text-slate-300 dark:text-slate-600 group-hover:text-green-500 transition-colors shrink-0" />
+                      </CardContent>
+                    </Card>
+                  </Link>
+                ))
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/app/globals.css b/app/globals.css
index 41abf18..32c5c23 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -4,91 +4,69 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  --background: oklch(0.98 0.01 264);
-  --foreground: oklch(0.15 0.02 264);
-  --card: oklch(0.99 0.005 264);
-  --card-foreground: oklch(0.15 0.02 264);
-  --popover: oklch(0.99 0.005 264);
-  --popover-foreground: oklch(0.15 0.02 264);
-  --primary: hsl(142, 76%, 36%);
-  --primary-foreground: oklch(0.99 0.005 264);
-  --secondary: oklch(0.65 0.18 45);
-  --secondary-foreground: oklch(0.15 0.02 264);
-  --muted: oklch(0.95 0.01 264);
-  --muted-foreground: oklch(0.5 0.02 264);
-  --accent: hsl(142, 76%, 36%);
-  --accent-foreground: oklch(0.99 0.005 264);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.99 0.005 264);
-  --border: oklch(0.9 0.01 264);
-  --input: oklch(0.9 0.01 264);
-  --ring: hsl(142, 76%, 36%);
-  --chart-1: hsl(142, 76%, 36%);
-  --chart-2: oklch(0.65 0.18 45);
-  --chart-3: oklch(0.5 0.15 160);
-  --chart-4: oklch(0.6 0.2 320);
-  --chart-5: oklch(0.7 0.15 200);
-  --radius: 0.5rem;
-  --sidebar: oklch(0.99 0.005 264);
-  --sidebar-foreground: oklch(0.15 0.02 264);
-  --sidebar-primary: hsl(142, 76%, 36%);
-  --sidebar-primary-foreground: oklch(0.99 0.005 264);
-  --sidebar-accent: oklch(0.95 0.01 264);
-  --sidebar-accent-foreground: oklch(0.15 0.02 264);
-  --sidebar-border: oklch(0.9 0.01 264);
-  --sidebar-ring: hsl(142, 76%, 36%);
-  
-  /* Custom vibrant green variables for consistent usage */
-  --green-primary: hsl(142, 76%, 36%);
-  --green-secondary: hsl(142, 76%, 42%);
-  --green-tertiary: hsl(142, 76%, 48%);
-  --green-light: hsl(142, 76%, 52%);
-  --green-dark: hsl(142, 76%, 30%);
-  --green-darker: hsl(142, 76%, 24%);
-  
-  /* Premium gradient classes for buttons */
-  --gradient-primary: linear-gradient(to right, hsl(142, 76%, 36%), hsl(142, 76%, 42%));
-  --gradient-primary-hover: linear-gradient(to right, hsl(142, 76%, 30%), hsl(142, 76%, 36%));
+  --background: #fafbfc;
+  --foreground: #0f172a;
+  --card: #ffffff;
+  --card-foreground: #0f172a;
+  --popover: #ffffff;
+  --popover-foreground: #0f172a;
+  --primary: #10b981;
+  --primary-foreground: #ffffff;
+  --secondary: #64748b;
+  --secondary-foreground: #ffffff;
+  --muted: #f1f5f9;
+  --muted-foreground: #64748b;
+  --accent: #f1f5f9;
+  --accent-foreground: #0f172a;
+  --destructive: #ef4444;
+  --destructive-foreground: #ffffff;
+  --border: #e2e8f0;
+  --input: #f1f5f9;
+  --ring: #10b981;
+  --chart-1: #10b981;
+  --chart-2: #6366f1;
+  --chart-3: #f59e0b;
+  --chart-4: #0ea5e9;
+  --chart-5: #14b8a6;
+  --radius: 0.625rem;
+  --sidebar: #ffffff;
+  --sidebar-foreground: #0f172a;
+  --sidebar-primary: #10b981;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #f1f5f9;
+  --sidebar-accent-foreground: #0f172a;
+  --sidebar-border: #e2e8f0;
+  --sidebar-ring: #10b981;
 }
 
-/* Premium Raydium-inspired dark theme with gradient backgrounds */
 .dark {
-  --background: #0a0a0b;
-  --foreground: #e4e4e7;
-  --card: #111113;
-  --card-foreground: #e4e4e7;
-  --popover: #111113;
-  --popover-foreground: #e4e4e7;
-  --primary: hsl(142, 76%, 36%);
-  --primary-foreground: #0a0a0b;
-  --secondary: #1a1a1d;
-  --secondary-foreground: #e4e4e7;
-  --muted: #111113;
-  --muted-foreground: #71717a;
-  --accent: hsl(142, 76%, 36%);
-  --accent-foreground: #0a0a0b;
+  --background: #0f172a;
+  --foreground: #f8fafc;
+  --card: #1e293b;
+  --card-foreground: #f8fafc;
+  --popover: #1e293b;
+  --popover-foreground: #f8fafc;
+  --primary: #10b981;
+  --primary-foreground: #ffffff;
+  --secondary: #475569;
+  --secondary-foreground: #f8fafc;
+  --muted: #334155;
+  --muted-foreground: #94a3b8;
+  --accent: #1e293b;
+  --accent-foreground: #f8fafc;
   --destructive: #ef4444;
-  --destructive-foreground: #e4e4e7;
-  --border: #1a1a1d;
-  --input: #111113;
-  --ring: hsl(142, 76%, 36%);
-  --chart-1: hsl(142, 76%, 36%);
-  --chart-2: #60a5fa;
-  --chart-3: #a78bfa;
-  --chart-4: #f472b6;
-  --chart-5: #fbbf24;
-  --sidebar: #0a0a0b;
-  --sidebar-foreground: #e4e4e7;
-  --sidebar-primary: hsl(142, 76%, 36%);
-  --sidebar-primary-foreground: #0a0a0b;
-  --sidebar-accent: #111113;
-  --sidebar-accent-foreground: #e4e4e7;
-  --sidebar-border: #1a1a1d;
-  --sidebar-ring: hsl(142, 76%, 36%);
-  
-  /* Premium gradient classes for buttons (same in dark mode) */
-  --gradient-primary: linear-gradient(to right, hsl(142, 76%, 36%), hsl(142, 76%, 42%));
-  --gradient-primary-hover: linear-gradient(to right, hsl(142, 76%, 30%), hsl(142, 76%, 36%));
+  --destructive-foreground: #f8fafc;
+  --border: #334155;
+  --input: #1e293b;
+  --ring: #10b981;
+  --sidebar: #0f172a;
+  --sidebar-foreground: #f8fafc;
+  --sidebar-primary: #10b981;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #1e293b;
+  --sidebar-accent-foreground: #f8fafc;
+  --sidebar-border: #334155;
+  --sidebar-ring: #10b981;
 }
 
 @theme inline {
@@ -139,90 +117,45 @@
   body {
     @apply bg-background text-foreground;
   }
-  
-  /* Premium gradient backgrounds inspired by Raydium */
-  .dark body {
-    background: linear-gradient(135deg, 
-      #0a0a0b 0%, 
-      #0d0d0f 25%, 
-      #0a0a0b 50%, 
-      #0c0c0e 75%, 
-      #0a0a0b 100%
-    );
-    background-attachment: fixed;
-  }
-  
-  /* Enhanced gradient backgrounds for pages */
-  .premium-gradient {
-    background: linear-gradient(135deg, 
-      #ffffff 0%, 
-      #f8fafc 25%, 
-      #f1f5f9 50%, 
-      #e2e8f0 75%, 
-      #cbd5e1 100%
-    );
-  }
-  
-  .dark .premium-gradient {
-    background: linear-gradient(135deg, 
-      #0a0a0b 0%, 
-      #0d0d0f 20%, 
-      #111113 40%, 
-      #0c0c0e 60%, 
-      #0a0a0b 80%, 
-      #080809 100%
-    );
-  }
-  
-  /* Card gradient overlays */
-  .card-gradient {
-    background: linear-gradient(135deg, 
-      rgba(255, 255, 255, 0.05) 0%, 
-      rgba(255, 255, 255, 0.02) 100%
-    );
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-  }
-  
-  .dark .card-gradient {
-    background: linear-gradient(135deg, 
-      rgba(0, 0, 0, 0.3) 0%, 
-      rgba(0, 0, 0, 0.1) 100%
-    );
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
+  html {
+    @apply bg-background;
   }
+
+  /* Typography standards */
+  h1 { @apply text-4xl font-bold tracking-tight; }
+  h2 { @apply text-2xl font-bold; }
+  h3 { @apply text-xl font-semibold; }
 }
 
-/* Custom glassmorphism effect */
-.glass {
-  background: rgba(255, 255, 255, 0.05);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+/* Premium gradient page background */
+.premium-gradient {
+  background: linear-gradient(135deg,
+    #fafbfc 0%,
+    #f1f5f9 25%,
+    #f8fafc 50%,
+    #f1f5f9 75%,
+    #fafbfc 100%
+  );
 }
 
-.dark .glass {
-  background: rgba(0, 0, 0, 0.3);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+.dark .premium-gradient {
+  background: linear-gradient(135deg,
+    #0f172a 0%,
+    #111827 50%,
+    #0f172a 100%
+  );
 }
 
-/* Premium gradient button classes */
+/* Primary action button - GREEN ONLY for primary CTAs */
 .btn-gradient-primary {
-  background: var(--gradient-primary);
+  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
   color: white;
   border: none;
   transition: all 0.2s ease;
+  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
 }
 
 .btn-gradient-primary:hover {
-  background: var(--gradient-primary-hover);
-  transform: scale(1.02);
-  box-shadow: 0 10px 25px -5px rgba(34, 197, 94, 0.25);
-}
-
-.btn-gradient-primary:active {
-  transform: scale(0.98);
+  background: linear-gradient(135deg, #059669 0%, #047857 100%);
+  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
 }
diff --git a/app/history/page.tsx b/app/history/page.tsx
index fb17a9b..9c8c560 100644
--- a/app/history/page.tsx
+++ b/app/history/page.tsx
@@ -72,7 +72,7 @@ export default function HistoryPage() {
 
   if (!publicKey) {
     return (
-      <div className="min-h-screen premium-gradient pt-16 pb-20 p-3 sm:p-4">
+      <div className="min-h-screen premium-gradient pt-24 pb-24 lg:pb-6 p-3 sm:p-4">
         <div className="max-w-4xl mx-auto">
           <Card>
             <CardHeader>
@@ -94,7 +94,7 @@ export default function HistoryPage() {
   }
 
   return (
-    <div className="min-h-screen premium-gradient pt-16 pb-20 p-3 sm:p-4">
+    <div className="min-h-screen premium-gradient pt-24 pb-24 lg:pb-6 p-3 sm:p-4">
       <div className="max-w-4xl mx-auto space-y-6">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-4">
diff --git a/app/invest/[launchId]/page.tsx b/app/invest/[launchId]/page.tsx
index a131628..83c6139 100644
--- a/app/invest/[launchId]/page.tsx
+++ b/app/invest/[launchId]/page.tsx
@@ -182,7 +182,7 @@ export default function InvestLaunchDetailPage() {
 
   if (!launchId) {
     return (
-      <div className="min-h-screen premium-gradient pt-16 pb-20 flex items-center justify-center">
+      <div className="min-h-screen premium-gradient pt-24 pb-24 lg:pb-6 flex items-center justify-center">
         <p className="text-muted-foreground">Invalid launch</p>
       </div>
     )
@@ -190,7 +190,7 @@ export default function InvestLaunchDetailPage() {
 
   if (launchLoading || !launch) {
     return (
-      <div className="min-h-screen premium-gradient pt-16 pb-20 flex items-center justify-center">
+      <div className="min-h-screen premium-gradient pt-24 pb-24 lg:pb-6 flex items-center justify-center">
         {launchError ? (
           <Card className="max-w-md">
             <CardContent className="pt-4">
@@ -216,7 +216,7 @@ export default function InvestLaunchDetailPage() {
     launch.status === "allocation_running"
 
   return (
-    <div className="min-h-screen premium-gradient pt-16 pb-20">
+    <div className="min-h-screen premium-gradient pt-24 pb-24 lg:pb-6">
       <div className="container mx-auto px-4 py-6 space-y-6">
         <div className="flex items-center gap-4">
           <Button variant="ghost" size="icon" asChild>
diff --git a/app/invest/create/page.tsx b/app/invest/create/page.tsx
index cf53f08..099e821 100644
--- a/app/invest/create/page.tsx
+++ b/app/invest/create/page.tsx
@@ -72,7 +72,7 @@ export default function CreateLaunchPage() {
 
   if (profileLoading) {
     return (
-      <div className="min-h-screen premium-gradient pt-16 pb-20 flex items-center justify-center">
+      <div className="min-h-screen premium-gradient pt-24 pb-24 lg:pb-6 flex items-center justify-center">
         <p className="text-muted-foreground">Loading...</p>
       </div>
     )
@@ -80,7 +80,7 @@ export default function CreateLaunchPage() {
 
   if (!profile) {
     return (
-      <div className="min-h-screen premium-gradient pt-16 pb-20">
+      <div className="min-h-screen premium-gradient pt-24 pb-24 lg:pb-6">
         <div className="container mx-auto px-4 py-6 max-w-2xl">
           <div className="flex items-center gap-4 mb-6">
             <Button variant="ghost" size="icon" asChild>
@@ -104,7 +104,7 @@ export default function CreateLaunchPage() {
   }
 
   return (
-    <div className="min-h-screen premium-gradient pt-16 pb-20">
+    <div className="min-h-screen premium-gradient pt-24 pb-24 lg:pb-6">
       <div className="container mx-auto px-4 py-6 max-w-2xl">
         <div className="flex items-center gap-4 mb-6">
           <Button variant="ghost" size="icon" asChild>
diff --git a/app/invest/page.tsx b/app/invest/page.tsx
index dcf58c7..c925d5d 100644
--- a/app/invest/page.tsx
+++ b/app/invest/page.tsx
@@ -1,146 +1,29 @@
 "use client"
 
-import { useState, useMemo } from "react"
-import Link from "next/link"
-import { PageBackHeader } from "@/components/ui/page-back-header"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Card, CardContent } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
-import { Badge } from "@/components/ui/badge"
-import { Loader2, TrendingUp, ChevronRight } from "lucide-react"
-import { useLaunches } from "@/hooks/useLaunchpadData"
-import type { Launch } from "@/lib/api/launchpad"
-
-const STATUS_LABELS: Record<string, string> = {
-  draft: "Draft",
-  participation_open: "Participation open",
-  participation_closed: "Participation closed",
-  allocation_running: "Allocation",
-  tge_open: "TGE open",
-}
-
-function LaunchCard({ launch }: { launch: Launch }) {
-  const statusLabel = STATUS_LABELS[launch.status] ?? launch.status
-  const tokenLabel = launch.tokenAsset ? `${launch.tokenAsset.code}` : "—"
-  const windowStart = launch.participationWindowStart
-    ? new Date(launch.participationWindowStart).toLocaleDateString()
-    : "—"
-  const windowEnd = launch.participationWindowEnd
-    ? new Date(launch.participationWindowEnd).toLocaleDateString()
-    : "—"
+import { TrendingUp, Wrench } from "lucide-react"
+import Link from "next/link"
 
+export default function InvestPage() {
   return (
-    <Card className="border-border bg-card/80 hover:border-primary/30 transition-colors">
-      <CardHeader className="pb-2">
-        <div className="flex items-start justify-between gap-2">
-          <div>
-            <CardTitle className="text-lg">{launch.projectId || "Launch"}</CardTitle>
-            <CardDescription className="mt-1">
-              Token: {tokenLabel}
-              {launch.isEquityStyle && (
-                <Badge variant="secondary" className="ml-2 text-xs">
-                  Equity
-                </Badge>
-              )}
-            </CardDescription>
-          </div>
-          <Badge variant={launch.status === "tge_open" ? "default" : "outline"}>{statusLabel}</Badge>
+    <div className="min-h-screen premium-gradient pt-24 pb-24 lg:pb-6 flex items-center justify-center">
+      <div className="container mx-auto px-4 max-w-md text-center space-y-6">
+        <div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-amber-100 to-orange-100 dark:from-amber-950/50 dark:to-orange-950/50 flex items-center justify-center mx-auto border border-amber-200 dark:border-amber-900/50">
+          <Wrench className="w-10 h-10 text-amber-600" />
+        </div>
+        <div className="space-y-2">
+          <h1 className="text-3xl font-bold text-slate-900 dark:text-white">Coming Soon</h1>
+          <p className="text-slate-600 dark:text-slate-400 leading-relaxed">
+            Launchpad launches and equity-style investments are being built. Check back soon for new opportunities.
+          </p>
         </div>
-      </CardHeader>
-      <CardContent className="space-y-2">
-        <p className="text-sm text-muted-foreground">
-          Window: {windowStart} → {windowEnd}
-        </p>
-        {launch.listingPrice && (
-          <p className="text-sm text-muted-foreground">Listing price: {launch.listingPrice}</p>
-        )}
-        <Button asChild variant="default" size="sm" className="w-full sm:w-auto mt-2">
-          <Link href={`/invest/${launch._id}`} className="inline-flex items-center gap-1">
-            View
-            <ChevronRight className="h-4 w-4" />
+        <Button asChild variant="outline">
+          <Link href="/">
+            <TrendingUp className="mr-2 h-4 w-4" />
+            Back to Home
           </Link>
         </Button>
-      </CardContent>
-    </Card>
-  )
-}
-
-export default function InvestPage() {
-  const [statusFilter, setStatusFilter] = useState<string | undefined>(undefined)
-  const { launches, error, isLoading } = useLaunches({ limit: 50, status: statusFilter })
-
-  const statusOptions = useMemo(
-    () => [
-      { value: undefined, label: "All" },
-      ...Object.entries(STATUS_LABELS).map(([value, label]) => ({ value, label })),
-    ],
-    []
-  )
-
-  return (
-    <div className="min-h-screen premium-gradient pt-16 pb-20">
-      <div className="container mx-auto px-4 py-6 space-y-6">
-        <PageBackHeader title="Invest" />
-        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-          <div>
-            <h1 className="text-2xl font-bold flex items-center gap-2">
-              <TrendingUp className="h-7 w-7" />
-              Invest
-            </h1>
-            <p className="text-muted-foreground mt-1">
-              Launchpad launches and equity-style investments. Participate and earn.
-            </p>
-          </div>
-          <div className="flex flex-wrap items-center gap-2">
-            {statusOptions.map((opt) => (
-              <Button
-                key={opt.value ?? "all"}
-                variant={statusFilter === opt.value ? "default" : "outline"}
-                size="sm"
-                onClick={() => setStatusFilter(opt.value)}
-              >
-                {opt.label}
-              </Button>
-            ))}
-            <Button asChild variant="secondary" size="sm">
-              <Link href="/invest/create">Create launch</Link>
-            </Button>
-            <Button asChild variant="outline" size="sm">
-              <Link href="/invest/projects">My projects</Link>
-            </Button>
-          </div>
-        </div>
-
-        {error && (
-          <Card className="border-destructive/50 bg-destructive/10">
-            <CardContent className="pt-4">
-              <p className="text-sm text-destructive">{error.message}</p>
-            </CardContent>
-          </Card>
-        )}
-
-        {isLoading && (
-          <div className="flex justify-center py-12">
-            <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-          </div>
-        )}
-
-        {!isLoading && !error && (
-          <>
-            {launches.length === 0 ? (
-              <Card>
-                <CardContent className="py-12 text-center text-muted-foreground">
-                  No launches found. Check back later.
-                </CardContent>
-              </Card>
-            ) : (
-              <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-                {launches.map((launch) => (
-                  <LaunchCard key={launch._id} launch={launch} />
-                ))}
-              </div>
-            )}
-          </>
-        )}
       </div>
     </div>
   )
diff --git a/app/invest/projects/page.tsx b/app/invest/projects/page.tsx
index 37a45ff..e0c0ff4 100644
--- a/app/invest/projects/page.tsx
+++ b/app/invest/projects/page.tsx
@@ -77,7 +77,7 @@ export default function MyProjectsPage() {
 
   if (profileLoading) {
     return (
-      <div className="min-h-screen premium-gradient pt-16 pb-20 flex items-center justify-center">
+      <div className="min-h-screen premium-gradient pt-24 pb-24 lg:pb-6 flex items-center justify-center">
         <p className="text-muted-foreground">Loading...</p>
       </div>
     )
@@ -85,7 +85,7 @@ export default function MyProjectsPage() {
 
   if (!profile) {
     return (
-      <div className="min-h-screen premium-gradient pt-16 pb-20">
+      <div className="min-h-screen premium-gradient pt-24 pb-24 lg:pb-6">
         <div className="container mx-auto px-4 py-6 max-w-2xl">
           <div className="flex items-center gap-4 mb-6">
             <Button variant="ghost" size="icon" asChild>
@@ -109,7 +109,7 @@ export default function MyProjectsPage() {
   }
 
   return (
-    <div className="min-h-screen premium-gradient pt-16 pb-20">
+    <div className="min-h-screen premium-gradient pt-24 pb-24 lg:pb-6">
       <div className="container mx-auto px-4 py-6 max-w-2xl">
         <div className="flex items-center gap-4 mb-6">
           <Button variant="ghost" size="icon" asChild>
diff --git a/app/lending/page.tsx b/app/lending/page.tsx
index aa397d5..9008ecb 100644
--- a/app/lending/page.tsx
+++ b/app/lending/page.tsx
@@ -376,7 +376,7 @@ export default function LendingPage() {
   }
 
   return (
-    <div className="min-h-screen premium-gradient pt-16 pb-20">
+    <div className="min-h-screen premium-gradient pt-24 pb-24 lg:pb-6">
       <div className="container mx-auto px-4 py-6 space-y-6">
         <PageBackHeader title="Borrow & Lend" />
         <div>
diff --git a/app/liquidity/page.tsx b/app/liquidity/page.tsx
index dbab8c3..d9a16e5 100644
--- a/app/liquidity/page.tsx
+++ b/app/liquidity/page.tsx
@@ -391,7 +391,7 @@ export default function LiquidityPage() {
   }
 
   return (
-    <div className="min-h-screen premium-gradient pt-16 pb-20">
+    <div className="min-h-screen premium-gradient pt-24 pb-24 lg:pb-6">
       <div className="container mx-auto px-4 py-6 space-y-6">
         <PageBackHeader title="Liquidity Pools" />
         <div className="flex flex-col sm:flex-row gap-4 sm:items-center sm:justify-between">
diff --git a/app/mint/page.tsx b/app/mint/page.tsx
index 8f8eb27..0a0ad8f 100644
--- a/app/mint/page.tsx
+++ b/app/mint/page.tsx
@@ -19,7 +19,7 @@ export default function MintPage() {
 
   if (isLoading) {
     return (
-      <div className="min-h-screen premium-gradient pt-16 pb-20 flex items-center justify-center">
+      <div className="min-h-screen premium-gradient pt-24 pb-24 lg:pb-6 flex items-center justify-center">
         <p className="text-muted-foreground">Loading...</p>
       </div>
     )
@@ -27,7 +27,7 @@ export default function MintPage() {
 
   if (!isAdmin) {
     return (
-      <div className="min-h-screen premium-gradient pt-16 pb-20">
+      <div className="min-h-screen premium-gradient pt-24 pb-24 lg:pb-6">
         <div className="container mx-auto px-4 py-6 max-w-2xl">
           <PageBackHeader title="Mint Token" />
           <Alert className="border-amber-500/50 bg-amber-500/10">
@@ -59,7 +59,7 @@ export default function MintPage() {
   }
 
   return (
-    <div className="min-h-screen premium-gradient pt-16 pb-20">
+    <div className="min-h-screen premium-gradient pt-24 pb-24 lg:pb-6">
       <div className="container mx-auto px-4 py-6">
         <PageBackHeader title="Mint Token" />
         <div className="space-y-6 max-w-2xl mx-auto">
diff --git a/app/my-tokens/page.tsx b/app/my-tokens/page.tsx
index 76e0bc2..6180bed 100644
--- a/app/my-tokens/page.tsx
+++ b/app/my-tokens/page.tsx
@@ -22,7 +22,7 @@ export default function MyTokensPage() {
   const isAuthError = error?.status === 401 || error?.status === 403
 
   return (
-    <div className="min-h-screen premium-gradient pt-16 pb-20">
+    <div className="min-h-screen premium-gradient pt-24 pb-24 lg:pb-6">
       <div className="container mx-auto px-4 py-6">
         <PageBackHeader title="My Tokens" />
         <div className="space-y-6">
diff --git a/app/page.tsx b/app/page.tsx
index 2d3539d..f771250 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -4,12 +4,11 @@ import { useEffect, useMemo, useState } from "react"
 import { useRouter } from "next/navigation"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
-import { ArrowDown, TrendingUp, ArrowRightLeft, Loader2, Copy, Wallet, Plus, ArrowUpRight } from "lucide-react"
+import { Tabs, TabsContent } from "@/components/ui/tabs"
+import { ArrowDown, TrendingUp, ArrowRightLeft, Loader2, Copy, Wallet, ArrowUpRight, Zap, BarChart3, Sparkles } from "lucide-react"
 import { useToast } from "@/hooks/use-toast"
 import { usePi } from "@/components/providers/pi-provider"
 import { useAccountBalances, useAccountOperations } from "@/hooks/useAccountData"
-import { formatDistanceToNow } from "date-fns"
 import { useTokenRegistry } from "@/hooks/useTokenRegistry"
 import { usePiPrice } from "@/hooks/usePiPrice"
 import { useUserProfile } from "@/hooks/useUserProfile"
@@ -29,15 +28,13 @@ export default function HomePage() {
   const { profile } = useUserProfile()
   const [localWallet, setLocalWallet] = useState<string | null>(null)
   const [receiveModalOpen, setReceiveModalOpen] = useState(false)
-  const [activeTab, setActiveTab] = useState("tokens")
+  const [activeTab, setActiveTab] = useState("holdings")
   const { price: piPrice, isLoading: priceLoading } = usePiPrice()
 
   useEffect(() => {
-    // Only restore wallet if user is authenticated
     if (isAuthenticated) {
       const stored = getStoredWallet()
       setLocalWallet(stored)
-      // Also sync with profile public_key if available
       if (profile?.public_key && stored !== profile.public_key) {
         if (typeof window !== "undefined") {
           localStorage.setItem("zyradex-wallet-address", profile.public_key)
@@ -49,18 +46,15 @@ export default function HomePage() {
     }
   }, [isAuthenticated, profile?.public_key])
 
-
-  // Priority: profile.public_key (from DB) > user.wallet_address (from Pi SDK) > localWallet (from localStorage)
-  const publicKey = isAuthenticated 
-    ? (profile?.public_key || user?.wallet_address || localWallet || undefined) 
+  const publicKey = isAuthenticated
+    ? (profile?.public_key || user?.wallet_address || localWallet || undefined)
     : undefined
-  const { balances, totalBalance: nativeBalanceOnly, isLoading: balancesLoading, error: balancesError } = useAccountBalances(publicKey)
-  const { tokens, isLoading: tokensLoading, error: tokensError } = useTokenRegistry()
+  const { balances, totalBalance: nativeBalanceOnly, isLoading: balancesLoading } = useAccountBalances(publicKey)
   const { getPrice, isLoading: pricesLoading } = useTokenPrices(
-    balances.map(b => ({ 
-      assetCode: b.assetCode, 
-      assetIssuer: b.assetIssuer || undefined, 
-      assetType: b.assetType 
+    balances.map(b => ({
+      assetCode: b.assetCode,
+      assetIssuer: b.assetIssuer || undefined,
+      assetType: b.assetType
     }))
   )
   const { operations, isLoading: operationsLoading } = useAccountOperations(publicKey, {
@@ -68,46 +62,32 @@ export default function HomePage() {
     order: "desc",
   })
 
-  // Calculate total balance: native Pi + tokens with pools (valued in Pi)
   const totalBalance = useMemo(() => {
-    let total = nativeBalanceOnly // Start with native Pi
-    
-    // Add token values in Pi for tokens that have pools
+    let total = nativeBalanceOnly
     balances.forEach((balance) => {
       if (balance.assetType === "native") return
-      
       const priceInPi = getPrice(balance.assetCode, balance.assetIssuer || undefined, balance.assetType)
       if (priceInPi !== null && priceInPi !== undefined) {
-        const tokenAmount = Number(balance.amount) || 0
-        total += tokenAmount * priceInPi
+        total += (Number(balance.amount) || 0) * priceInPi
       }
     })
-    
     return total
   }, [nativeBalanceOnly, balances, getPrice])
 
-  // Calculate USD equivalent
   const usdBalance = useMemo(() => {
     if (!piPrice || !totalBalance || piPrice <= 0) return null
     const calculated = totalBalance * piPrice
     return isNaN(calculated) || !isFinite(calculated) ? null : calculated
   }, [piPrice, totalBalance])
 
-  // Format native balance (Test Pi)
-  const nativeBalance = useMemo(() => {
-    const native = balances.find((b) => b.assetType === "native")
-    return native ? Number(native.amount) : 0
-  }, [balances])
-
-  const handleSavings = () => router.push("/savings")
   const handleSwap = () => router.push("/swap")
-  const handleManageTokens = () => router.push("/trustlines")
   const handleSend = () => router.push("/send")
+  const handleExplore = () => router.push("/explore")
   const handleCopy = async () => {
     const key = publicKey || ""
     try {
       await navigator.clipboard.writeText(key)
-      toast({ title: "Copied", description: "Public key copied to clipboard" })
+      toast({ title: "Copied", description: "Wallet address copied to clipboard" })
     } catch {
       toast({ title: "Copy failed", description: key, variant: "destructive" })
     }
@@ -118,187 +98,229 @@ export default function HomePage() {
     return `${publicKey.slice(0, 6)}...${publicKey.slice(-6)}`
   }, [publicKey])
 
-
   const handleTokenClick = (balance: any) => {
     if (balance.assetType === "native") {
       router.push("/token/native")
     } else if (balance.assetCode) {
-      const tokenCode = balance.assetCode
-      router.push(`/token/${encodeURIComponent(tokenCode)}${balance.assetIssuer ? `?issuer=${encodeURIComponent(balance.assetIssuer)}` : ''}`)
+      router.push(`/token/${encodeURIComponent(balance.assetCode)}${balance.assetIssuer ? `?issuer=${encodeURIComponent(balance.assetIssuer)}` : ''}`)
     }
   }
 
-  const formatDate = (dateString: string) => {
-    try {
-      const date = new Date(dateString)
-      return formatDistanceToNow(date, { addSuffix: true })
-    } catch {
-      return dateString
-    }
-  }
+  // UNAUTHENTICATED: Welcome screen
+  if (!isAuthenticated) {
+    return (
+      <div className="min-h-screen premium-gradient pt-20 pb-24 lg:pb-6 flex items-center justify-center">
+        <div className="container mx-auto px-4 max-w-lg text-center space-y-8">
+          <div className="space-y-4">
+            <div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-green-600 to-mint-500 flex items-center justify-center shadow-xl mx-auto">
+              <Sparkles className="w-10 h-10 text-white" />
+            </div>
+            <h1 className="text-4xl font-bold tracking-tight text-slate-900 dark:text-white">
+              Welcome to ZyraDex
+            </h1>
+            <p className="text-lg text-slate-600 dark:text-slate-400 max-w-md mx-auto leading-relaxed">
+              A decentralized exchange on Pi Network. Swap tokens instantly, earn yield, and maintain complete control of your assets.
+            </p>
+          </div>
 
-  const getTransactionType = (tx: any) => {
-    if (tx.operationCount === 0) return "Unknown"
-    if (tx.operationCount === 1) return "Transaction"
-    return `${tx.operationCount} Operations`
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 text-sm text-slate-600 dark:text-slate-400">
+            <div className="p-4 rounded-xl bg-white/60 dark:bg-slate-800/60 border border-green-200/30 dark:border-green-900/20">
+              <ArrowRightLeft className="h-5 w-5 text-green-600 mx-auto mb-2" />
+              <span className="font-medium text-slate-900 dark:text-white">Swap Instantly</span>
+              <p className="text-xs mt-1">Best rates, no middlemen</p>
+            </div>
+            <div className="p-4 rounded-xl bg-white/60 dark:bg-slate-800/60 border border-green-200/30 dark:border-green-900/20">
+              <BarChart3 className="h-5 w-5 text-green-600 mx-auto mb-2" />
+              <span className="font-medium text-slate-900 dark:text-white">Earn Yield</span>
+              <p className="text-xs mt-1">Savings & liquidity pools</p>
+            </div>
+            <div className="p-4 rounded-xl bg-white/60 dark:bg-slate-800/60 border border-green-200/30 dark:border-green-900/20">
+              <Zap className="h-5 w-5 text-green-600 mx-auto mb-2" />
+              <span className="font-medium text-slate-900 dark:text-white">Full Control</span>
+              <p className="text-xs mt-1">Your keys, your assets</p>
+            </div>
+          </div>
+
+          <div className="space-y-3">
+            <Button
+              onClick={() => router.push("/swap")}
+              className="w-full h-14 text-lg font-semibold rounded-2xl bg-gradient-to-r from-green-600 to-mint-500 text-white hover:shadow-lg hover:shadow-green-500/25"
+            >
+              Start Trading
+            </Button>
+            <p className="text-xs text-slate-500 dark:text-slate-500">
+              Connect your wallet in Profile to track holdings and execute trades
+            </p>
+          </div>
+        </div>
+      </div>
+    )
   }
 
+  // AUTHENTICATED: Full dashboard
   return (
-    <div className="min-h-screen premium-gradient pt-16 pb-20">
-      <div className="container mx-auto px-4 py-6 space-y-4 max-w-3xl">
-        {/* Wallet Header - Compact Mobile Design */}
-        <div className="space-y-4">
-          {/* Wallet Address */}
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <span className="text-xs text-muted-foreground font-medium">Wallet</span>
-              <span className="text-sm font-medium text-foreground">{truncatedKey || "No wallet connected"}</span>
-              {publicKey && (
-                <button
-                  onClick={handleCopy}
-                  className="text-muted-foreground hover:text-foreground transition-colors p-1 rounded hover:bg-muted"
-                  title="Copy public key"
-                >
-                  <Copy className="h-3.5 w-3.5" />
-                </button>
-              )}
+    <div className="min-h-screen premium-gradient pt-24 pb-24 lg:pb-6">
+      <div className="container mx-auto px-4 py-8 space-y-6 max-w-4xl">
+        {/* Balance Card */}
+        <div className="bg-gradient-to-br from-white to-green-50/30 dark:from-slate-800 dark:to-slate-900 rounded-2xl p-8 border border-green-200/50 dark:border-green-900/40 shadow-xl">
+          <div className="flex items-center justify-between mb-6">
+            <div className="flex items-center gap-3">
+              <div className="w-12 h-12 rounded-full bg-gradient-to-br from-green-600 to-mint-500 flex items-center justify-center shadow-lg">
+                <Wallet className="w-6 h-6 text-white" />
+              </div>
+              <div className="flex flex-col">
+                <span className="text-sm text-slate-600 dark:text-slate-400 font-medium">Wallet</span>
+                <span className="text-base font-semibold text-slate-900 dark:text-white font-mono">{truncatedKey || "Not connected"}</span>
+              </div>
             </div>
+            {publicKey && (
+              <button onClick={handleCopy} className="p-2.5 rounded-lg hover:bg-green-100 dark:hover:bg-green-950/30 text-green-600 dark:text-green-400 transition-all" title="Copy address">
+                <Copy className="h-5 w-5" />
+              </button>
+            )}
           </div>
 
-          {/* Balance Display - Centered, Pi Primary */}
-          <div className="space-y-1 text-center">
+          <div className="space-y-2 mb-8">
             {balancesLoading || pricesLoading ? (
-              <div className="flex items-center justify-center py-4">
-                <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+              <div className="flex items-center justify-center py-8">
+                <Loader2 className="h-10 w-10 animate-spin text-green-600 dark:text-green-400" />
               </div>
             ) : (
               <>
-                <h1 className="text-4xl font-bold text-foreground tracking-tight">
-                  {totalBalance.toLocaleString(undefined, { maximumFractionDigits: 4 })} Pi
+                <h1 className="text-6xl font-bold bg-gradient-to-r from-green-600 to-mint-500 bg-clip-text text-transparent">
+                  {totalBalance.toLocaleString(undefined, { maximumFractionDigits: 4 })}
                 </h1>
+                <p className="text-lg text-slate-600 dark:text-slate-400">
+                  <span className="font-semibold text-green-600 dark:text-green-400">Pi Network</span>
+                </p>
                 {usdBalance !== null && piPrice && (
-                  <p className="text-sm text-muted-foreground">
-                    ${usdBalance.toLocaleString(undefined, { maximumFractionDigits: 2 })}
+                  <p className="text-sm text-slate-500 dark:text-slate-500">
+                    ≈ ${usdBalance.toLocaleString(undefined, { maximumFractionDigits: 2 })} USD
                   </p>
                 )}
-                {priceLoading && usdBalance === null && piPrice === null && (
-                  <p className="text-sm text-muted-foreground">Loading price...</p>
-                )}
-                {!priceLoading && piPrice === null && totalBalance > 0 && (
-                  <p className="text-sm text-muted-foreground">Price unavailable</p>
-                )}
               </>
             )}
-          </div> 
+          </div>
 
-          {/* Action Buttons - Wallet Style Compact */}
-          <div className="grid grid-cols-4 gap-1.5">
+          {/* Action Buttons - Swap FIRST */}
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
             <Button
-              variant="outline"
-              className="h-10 flex flex-col items-center justify-center gap-0.5 rounded-lg border hover:border-primary/50 hover:bg-muted/50 transition-all py-1 px-2"
-              onClick={() => setReceiveModalOpen(true)}
+              onClick={handleSwap}
+              className="h-14 flex flex-col items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-green-600 to-mint-500 text-white hover:shadow-lg hover:shadow-green-500/25 font-semibold"
             >
-              <ArrowDown className="h-3.5 w-3.5" />
-              <span className="text-[10px] font-medium leading-tight">Receive</span>
+              <ArrowRightLeft className="h-5 w-5" />
+              <span className="text-xs">Swap</span>
             </Button>
             <Button
-              variant="outline"
-              className="h-10 flex flex-col items-center justify-center gap-0.5 rounded-lg border hover:border-primary/50 hover:bg-muted/50 transition-all py-1 px-2"
               onClick={handleSend}
+              variant="outline"
+              className="h-14 flex flex-col items-center justify-center gap-2 rounded-xl border-2 border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800/50 text-slate-700 dark:text-slate-300"
             >
-              <ArrowUpRight className="h-3.5 w-3.5" />
-              <span className="text-[10px] font-medium leading-tight">Send</span>
+              <ArrowUpRight className="h-5 w-5" />
+              <span className="text-xs font-semibold">Send</span>
             </Button>
             <Button
+              onClick={() => setReceiveModalOpen(true)}
               variant="outline"
-              className="h-10 flex flex-col items-center justify-center gap-0.5 rounded-lg border hover:border-primary/50 hover:bg-muted/50 transition-all py-1 px-2"
-              onClick={handleSwap}
+              className="h-14 flex flex-col items-center justify-center gap-2 rounded-xl border-2 border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800/50 text-slate-700 dark:text-slate-300"
             >
-              <ArrowRightLeft className="h-3.5 w-3.5" />
-              <span className="text-[10px] font-medium leading-tight">Swap</span>
+              <ArrowDown className="h-5 w-5" />
+              <span className="text-xs font-semibold">Receive</span>
             </Button>
             <Button
+              onClick={handleExplore}
               variant="outline"
-              className="h-10 flex flex-col items-center justify-center gap-0.5 rounded-lg border hover:border-primary/50 hover:bg-muted/50 transition-all py-1 px-2"
-              onClick={handleSavings}
+              className="h-14 flex flex-col items-center justify-center gap-2 rounded-xl border-2 border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800/50 text-slate-700 dark:text-slate-300"
             >
-              <TrendingUp className="h-3.5 w-3.5" />
-              <span className="text-[10px] font-medium leading-tight">Save</span>
+              <TrendingUp className="h-5 w-5" />
+              <span className="text-xs font-semibold">Earn</span>
             </Button>
           </div>
         </div>
 
-        {/* Tokens List with Tabs */}
-        <Card className="relative overflow-hidden border border-border/50 bg-card shadow-xl rounded-2xl">
-          <CardContent className="p-4">
+        {/* Holdings List */}
+        <Card className="bg-gradient-to-br from-white to-green-50/20 dark:from-slate-800 dark:to-slate-900 shadow-xl rounded-2xl border border-green-200/50 dark:border-green-900/40">
+          <CardContent className="p-6">
             <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-              <div className="flex items-center justify-between mb-4">
-                <TabsList className="w-fit">
-                  <TabsTrigger value="tokens">Tokens</TabsTrigger>
-                  <TabsTrigger value="history">History</TabsTrigger>
-                </TabsList>
-                <Button 
-                  variant="ghost" 
-                  size="icon" 
-                  className="h-7 w-7" 
-                  onClick={handleManageTokens}
-                >
-                  <Plus className="h-3.5 w-3.5" />
-                </Button>
+              <div className="flex items-center justify-between mb-6">
+                <div>
+                  <h2 className="text-xl font-bold text-slate-900 dark:text-white mb-1">Your Holdings</h2>
+                  <p className="text-sm text-slate-600 dark:text-slate-400">Track all your assets</p>
+                </div>
+                <div className="flex gap-2">
+                  <button
+                    onClick={() => setActiveTab(activeTab === "holdings" ? "activity" : "holdings")}
+                    className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
+                      activeTab === "holdings"
+                        ? "bg-gradient-to-r from-green-600 to-mint-500 text-white shadow"
+                        : "text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700/50"
+                    }`}
+                  >
+                    Holdings
+                  </button>
+                  <button
+                    onClick={() => setActiveTab(activeTab === "activity" ? "holdings" : "activity")}
+                    className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
+                      activeTab === "activity"
+                        ? "bg-gradient-to-r from-green-600 to-mint-500 text-white shadow"
+                        : "text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700/50"
+                    }`}
+                  >
+                    Activity
+                  </button>
+                </div>
               </div>
 
-              <TabsContent value="tokens" className="mt-0">
+              <TabsContent value="holdings" className="mt-0">
                 <div className="space-y-2">
                   {balancesLoading ? (
-                    <div className="flex items-center justify-center py-12 text-muted-foreground text-sm">
-                      <Loader2 className="mr-2 h-5 w-5 animate-spin" />
-                      Loading balances...
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="h-5 w-5 animate-spin text-slate-400" />
+                      <span className="ml-2 text-sm text-slate-500">Loading holdings...</span>
                     </div>
                   ) : balances.length === 0 ? (
-                    <div className="text-sm text-muted-foreground py-12 text-center border-2 border-dashed border-border rounded-xl bg-muted/20">
-                      {publicKey ? "No balances found" : "Connect a wallet to view your holdings"}
+                    <div className="text-center py-12 space-y-4">
+                      <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-slate-100 to-green-100/50 dark:from-slate-700 dark:to-slate-800 flex items-center justify-center mx-auto">
+                        <Wallet className="h-8 w-8 text-slate-400" />
+                      </div>
+                      <p className="text-slate-600 dark:text-slate-400 font-medium">No holdings yet</p>
+                      <p className="text-sm text-slate-500 dark:text-slate-500">Ready for your first swap?</p>
+                      <Button onClick={handleSwap} variant="outline" size="sm" className="gap-1.5">
+                        <ArrowRightLeft className="h-4 w-4" />
+                        Start Trading
+                      </Button>
                     </div>
                   ) : (
                     balances.map((balance, index) => {
                       const isNative = balance.assetType === "native"
-                      const displayName = isNative ? "Test Pi" : balance.assetCode
+                      const displayName = isNative ? "Pi" : balance.assetCode
                       const amount = Number(balance.amount)
                       const priceInPi = getPrice(balance.assetCode, balance.assetIssuer || undefined, balance.assetType)
                       const valueInPi = priceInPi !== null ? amount * priceInPi : null
-                      const usdValue = piPrice && (isNative || valueInPi !== null) 
-                        ? (isNative ? amount : valueInPi!) * piPrice 
+                      const usdValue = piPrice && (isNative || valueInPi !== null)
+                        ? (isNative ? amount : valueInPi!) * piPrice
                         : null
 
                       return (
                         <button
                           key={`${balance.asset}-${index}`}
                           onClick={() => handleTokenClick(balance)}
-                          className="w-full flex items-center justify-between p-3 rounded-lg bg-muted/20 hover:bg-muted/40 transition-all cursor-pointer"
+                          className="w-full flex items-center justify-between p-4 rounded-xl bg-gradient-to-r from-slate-50 to-white dark:from-slate-700/50 dark:to-slate-800/50 hover:from-slate-100 hover:to-green-50/50 dark:hover:from-slate-700 dark:hover:to-slate-700 border border-slate-200/50 dark:border-slate-700/50 transition-all cursor-pointer group"
                         >
                           <div className="flex-1 min-w-0 text-left">
-                            <p className="font-semibold text-base text-foreground truncate">{displayName}</p>
-                            <p className="text-xs text-muted-foreground mt-0.5">
+                            <p className="font-bold text-base text-slate-900 dark:text-white truncate group-hover:text-green-600 dark:group-hover:text-green-400 transition-colors">{displayName}</p>
+                            <p className="text-sm text-slate-500 dark:text-slate-400 mt-1">
                               {amount.toLocaleString(undefined, { maximumFractionDigits: 6 })}
-                              {!isNative && balance.assetCode && ` ${balance.assetCode}`}
-                              {isNative && " Test Pi"}
+                              {isNative && " Pi"}
                             </p>
                           </div>
                           <div className="text-right ml-4 shrink-0">
                             {usdValue !== null ? (
-                              <>
-                                <p className="font-semibold text-base text-foreground">
-                                  ${usdValue.toLocaleString(undefined, { maximumFractionDigits: 2 })}
-                                </p>
-                                {valueInPi !== null && !isNative && (
-                                  <p className="text-xs text-muted-foreground mt-0.5">
-                                    ≈ {valueInPi.toLocaleString(undefined, { maximumFractionDigits: 4 })} Pi
-                                  </p>
-                                )}
-                              </>
-                            ) : (
-                              <p className="font-semibold text-base text-foreground">
-                                {amount.toLocaleString(undefined, { maximumFractionDigits: 6 })}
+                              <p className="font-bold text-base text-green-600 dark:text-green-400">
+                                ${usdValue.toLocaleString(undefined, { maximumFractionDigits: 2 })}
                               </p>
+                            ) : (
+                              <p className="font-medium text-sm text-slate-500 dark:text-slate-400">—</p>
                             )}
                           </div>
                         </button>
@@ -308,43 +330,22 @@ export default function HomePage() {
                 </div>
               </TabsContent>
 
-              <TabsContent value="history" className="mt-0">
-                <div className="space-y-2">
-                  {operationsLoading ? (
-                    <div className="flex items-center justify-center py-12 text-muted-foreground text-sm">
-                      <Loader2 className="mr-2 h-5 w-5 animate-spin" />
-                      Loading activity...
-                    </div>
-                  ) : !publicKey ? (
-                    <div className="text-sm text-muted-foreground py-12 text-center border-2 border-dashed border-border rounded-xl bg-muted/20">
-                      Connect a wallet to view transaction history
-                    </div>
-                  ) : (
-                    <TransactionHistory operations={operations} isLoading={operationsLoading} />
-                  )}
-                </div>
+              <TabsContent value="activity" className="mt-0">
+                {operationsLoading ? (
+                  <div className="flex items-center justify-center py-12">
+                    <Loader2 className="h-5 w-5 animate-spin text-slate-400" />
+                    <span className="ml-2 text-sm text-slate-500">Loading activity...</span>
+                  </div>
+                ) : (
+                  <TransactionHistory operations={operations} isLoading={operationsLoading} />
+                )}
               </TabsContent>
             </Tabs>
           </CardContent>
         </Card>
-
-        {!publicKey && (
-          <Card className="rounded-2xl">
-            <CardHeader>
-              <CardTitle>Connect Your Wallet</CardTitle>
-              <CardDescription>Connect a wallet to view your balance and holdings</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Button onClick={() => router.push("/profile")} className="w-full h-12 btn-gradient-primary rounded-xl">
-                Go to Profile
-              </Button>
-            </CardContent>
-          </Card>
-        )}
       </div>
 
       <ReceiveModal open={receiveModalOpen} onOpenChange={setReceiveModalOpen} />
-
     </div>
   )
 }
diff --git a/app/profile/page.tsx b/app/profile/page.tsx
index fe55278..c92495f 100644
--- a/app/profile/page.tsx
+++ b/app/profile/page.tsx
@@ -3,29 +3,22 @@
 import React, { useState, useEffect, useMemo } from "react"
 import Link from "next/link"
 import {
-  Plug,
   Settings,
-  FileText,
-  BookOpen,
-  ChevronRight,
   Copy,
-  MessageCircle,
   LogOut,
   Loader2,
-  Users,
-  Star,
-  Rocket,
-  LayoutDashboard,
   Coins,
-  Droplets,
   User,
   Shield,
   History,
-  Heart,
+  Droplets,
+  ArrowRightLeft,
+  Gift,
   Github,
   Send,
   Share2,
-  Gift,
+  ChevronRight,
+  Wallet,
 } from "lucide-react"
 import { usePi } from "@/components/providers/pi-provider"
 import { Button } from "@/components/ui/button"
@@ -48,14 +41,13 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog"
 import { Checkbox } from "@/components/ui/checkbox"
-import { PageBackHeader } from "@/components/ui/page-back-header"
+import { usePiPrice } from "@/hooks/usePiPrice"
 
 const getStoredWallet = () => {
   if (typeof window === "undefined") return null
   return localStorage.getItem("zyradex-wallet-address")
 }
 
-
 const ProfilePage: React.FC = () => {
   const { user, isAuthenticated, authenticate, signOut } = usePi()
   const { profile, isLoading: profileLoading, refresh: refreshProfile } = useUserProfile()
@@ -69,43 +61,32 @@ const ProfilePage: React.FC = () => {
   const [successReplaceWarning, setSuccessReplaceWarning] = useState<string | null>(null)
   const [showChangeWalletWarning, setShowChangeWalletWarning] = useState(false)
   const [changeWalletConfirm, setChangeWalletConfirm] = useState(false)
+  const { price: piPrice } = usePiPrice()
 
   useEffect(() => {
-    // Only set wallet address if user is authenticated
     if (!isAuthenticated) {
       setStoredWalletAddress(null)
       if (typeof window !== "undefined") {
-        // Clear localStorage when not authenticated
         localStorage.removeItem("zyradex-wallet-address")
       }
       return
     }
-
-    // Priority 1: Use wallet from user profile (database) - this is the source of truth
     if (profile?.public_key && profile.public_key.trim() !== '') {
       setStoredWalletAddress(profile.public_key)
       if (typeof window !== "undefined") {
-        // Only store in localStorage if it matches the database
         localStorage.setItem("zyradex-wallet-address", profile.public_key)
       }
       return
     }
-
-    // Priority 2: Check localStorage, but only if it matches what's in the database
-    // If user has no wallet in database, clear localStorage to avoid using stale data
     const storedWallet = getStoredWallet()
     if (storedWallet && profile?.public_key && storedWallet === profile.public_key) {
-      // Only use localStorage if it matches the database
       setStoredWalletAddress(storedWallet)
     } else {
-      // Clear localStorage if it doesn't match or user has no wallet
       setStoredWalletAddress(null)
       if (typeof window !== "undefined") {
         localStorage.removeItem("zyradex-wallet-address")
       }
     }
-
-    // Priority 3: Fallback to user.wallet_address (from Pi SDK) if no database wallet
     if (!storedWalletAddress && !profile?.public_key && user?.wallet_address) {
       setStoredWalletAddress(user.wallet_address)
     }
@@ -114,23 +95,16 @@ const ProfilePage: React.FC = () => {
   const { balances, totalBalance, isLoading: balancesLoading, refresh: refreshBalances } = useAccountBalances(storedWalletAddress ?? user?.wallet_address ?? undefined)
   const { refreshBalances: refreshBalancesGlobal } = useBalanceRefresh() ?? {}
 
-  const stats = useMemo(
-    () => [
-      { label: "Assets", value: balances.length, icon: Users },
-      { label: "Total Balance", value: totalBalance.toLocaleString(undefined, { maximumFractionDigits: 2 }), icon: Coins },
-      { label: "Liquidity Pools", value: "–", icon: Droplets },
-    ],
-    [balances.length, totalBalance]
-  )
+  const usdBalance = useMemo(() => {
+    if (!piPrice || !totalBalance) return null
+    return totalBalance * piPrice
+  }, [piPrice, totalBalance])
 
   const handleCopyWalletAddress = () => {
     const address = storedWalletAddress || user?.wallet_address
     if (address) {
       navigator.clipboard.writeText(address)
-      toast({
-        title: "Copied!",
-        description: "Wallet address copied to clipboard",
-      })
+      toast({ title: "Copied", description: "Wallet address copied to clipboard" })
     }
   }
 
@@ -147,11 +121,7 @@ const ProfilePage: React.FC = () => {
       await authenticate()
     } catch (error) {
       console.error("Pi authentication failed:", error)
-      toast({
-        title: "Authentication Failed",
-        description: "Please try again or enter your wallet address manually",
-        variant: "destructive",
-      })
+      toast({ title: "Authentication Failed", description: "Please try again.", variant: "destructive" })
     } finally {
       setIsLoading(false)
     }
@@ -159,30 +129,17 @@ const ProfilePage: React.FC = () => {
 
   const handleCreateWallet = async () => {
     if (!isAuthenticated) {
-      toast({ 
-        title: "Authentication Required", 
-        description: "Please authenticate first to create a wallet.", 
-        variant: "destructive" 
-      })
+      toast({ title: "Connect wallet first", description: "Please authenticate with Pi to create a wallet.", variant: "destructive" })
       return
     }
-
     try {
       const response = await createWallet()
-      
-      // Store the secret seed to show to user
       setNewWalletSecret(response.secret)
       setSuccessReplaceWarning(response.replacedPreviousWallet ? (response.warning ?? null) : null)
       handleWalletPersist(response.publicKey)
       refreshProfile().catch(() => undefined)
-      
-      // Show dialog with wallet details
       setShowSecretDialog(true)
-      
-      toast({
-        title: "Wallet Created!",
-        description: "Your new wallet has been created and seeded with test Pi. Please save your secret seed securely.",
-      })
+      toast({ title: "Wallet Created", description: "Save your secret seed securely." })
     } catch (err) {
       const message = err && typeof err === "object" && "message" in err ? (err as any).message : "Wallet creation failed"
       toast({ title: "Creation failed", description: message, variant: "destructive" })
@@ -207,28 +164,14 @@ const ProfilePage: React.FC = () => {
       refreshBalances()
       refreshBalancesGlobal?.()
       setShowSecretDialog(true)
-      toast({
-        title: response.replacedPreviousWallet ? "Wallet replaced" : "Wallet created",
-        description: "Save your new secret seed securely.",
-      })
+      toast({ title: "Wallet replaced", description: "Save your new secret seed securely." })
     } catch (err: unknown) {
       const apiError = err && typeof err === "object" && "code" in err ? (err as { code?: string; message?: string }) : null
-      const code = apiError?.code
-      if (code === "NO_WALLET_TO_REPLACE") {
+      if (apiError?.code === "NO_WALLET_TO_REPLACE") {
         setShowChangeWalletWarning(false)
         setChangeWalletConfirm(false)
         refreshProfile().catch(() => undefined)
-        toast({
-          title: "No wallet to replace",
-          description: "Use Create wallet below to set up your first wallet.",
-          variant: "destructive",
-        })
-      } else if (code === "CONFIRM_REQUIRED") {
-        toast({
-          title: "Confirmation required",
-          description: "Please confirm that you understand the warning before replacing your wallet.",
-          variant: "destructive",
-        })
+        toast({ title: "No wallet to replace", description: "Use Create wallet to set up your first wallet.", variant: "destructive" })
       } else {
         const message = apiError && "message" in apiError ? (apiError as { message: string }).message : "Failed to replace wallet"
         toast({ title: "Change wallet failed", description: message, variant: "destructive" })
@@ -239,399 +182,304 @@ const ProfilePage: React.FC = () => {
   const handleCopySecret = () => {
     if (newWalletSecret) {
       navigator.clipboard.writeText(newWalletSecret)
-      toast({
-        title: "Copied!",
-        description: "Secret seed copied to clipboard. Keep it safe!",
-      })
+      toast({ title: "Copied", description: "Secret seed copied. Keep it safe!" })
     }
   }
 
-  const mainNavItems = [
-    {
-      title: "My Assets",
-      description: "Manage your assets",
-      icon: Coins,
-      href: "/my-tokens",
-      showChevron: true,
-    },
-    ...(profile?.role === "admin"
-      ? [
-          {
-            title: "Launchpad (Mint)",
-            description: "Create new tokens (admin)",
-            icon: Rocket,
-            href: "/mint",
-            showChevron: true,
-          },
-        ]
-      : []),
-    {
-      title: "Liquidity Pools",
-      description: "Manage LP Holdings",
-      icon: Droplets,
-      href: "/liquidity",
-      showChevron: true,
-    },
-    {
-      title: "Swap Assets",
-      description: "Exchange assets",
-      icon: Users,
-      href: "/swap",
-      showChevron: true,
-    },
-    {
-      title: "Transaction History",
-      description: "View your transaction history",
-      icon: History,
-      href: "/history",
-      showChevron: true,
-    },
-    {
-      title: "Donate",
-      description: "Support ZYRADEX with Pi donations",
-      icon: Heart,
-      href: "/donate",
-      showChevron: true,
-    },
-    {
-      title: "Rewards & Referral",
-      description: "Earn points and refer friends",
-      icon: Gift,
-      href: "/profile/rewards",
-      showChevron: true,
-    },
+  const navItems = [
+    { title: "Swap Assets", description: "Exchange tokens", icon: ArrowRightLeft, href: "/swap" },
+    { title: "Transaction History", description: "View past transactions", icon: History, href: "/history" },
+    { title: "Liquidity Pools", description: "Manage LP positions", icon: Droplets, href: "/liquidity" },
+    { title: "Rewards & Referral", description: "Earn and refer friends", icon: Gift, href: "/profile/rewards" },
+    ...(profile?.role === "admin" ? [{ title: "Launchpad (Admin)", description: "Create new tokens", icon: Shield, href: "/mint" }] : []),
   ]
 
-  // const additionalMenuItems = [
-  //   {
-  //     title: "Terms of Service",
-  //     description: "Read our terms and conditions",
-  //     icon: FileText,
-  //     href: "/terms",
-  //     showChevron: true,
-  //   },
-  //   {
-  //     title: "Privacy Policy",
-  //     description: "Learn about our privacy practices",
-  //     icon: FileText,
-  //     href: "/privacy",
-  //     showChevron: true,
-  //   },
-  //   // {
-  //   //   title: "API Documentation",
-  //   //   description: "Pi Network Oracle API docs",
-  //   //   icon: BookOpen,
-  //   //   href: "/api-docs",
-  //   //   showChevron: true,
-  //   // },
-  //   {
-  //     title: "Contact Us",
-  //     description: "Get help and support",
-  //     icon: MessageCircle,
-  //     href: "/contact",
-  //     showChevron: true,
-  //   },
-  // ]
-
   const walletDisplay = storedWalletAddress || user?.wallet_address
   const truncatedWallet = walletDisplay ? `${walletDisplay.slice(0, 6)}...${walletDisplay.slice(-6)}` : null
 
+  // UNAUTHENTICATED
+  if (!isAuthenticated) {
+    return (
+      <div className="min-h-screen premium-gradient pt-24 pb-24 lg:pb-6">
+        <div className="container mx-auto px-4 py-8 max-w-md space-y-6">
+          <div>
+            <h1 className="text-3xl font-bold text-slate-900 dark:text-white">Profile</h1>
+            <p className="text-slate-600 dark:text-slate-400 mt-1">Connect your wallet to view your profile</p>
+          </div>
+
+          <Card className="border border-slate-200 dark:border-slate-700">
+            <CardContent className="p-8 text-center space-y-4">
+              <div className="w-16 h-16 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center mx-auto">
+                <Wallet className="h-8 w-8 text-slate-400" />
+              </div>
+              <div>
+                <p className="font-semibold text-slate-900 dark:text-white">Not connected</p>
+                <p className="text-sm text-slate-500 dark:text-slate-400 mt-1">
+                  Connect your Pi wallet to view holdings, track assets, and manage your profile.
+                </p>
+              </div>
+              <Button
+                onClick={handlePiConnect}
+                disabled={isLoading}
+                className="w-full h-12 bg-gradient-to-r from-green-600 to-mint-500 text-white hover:shadow-lg hover:shadow-green-500/25 rounded-xl"
+              >
+                {isLoading ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
+                Connect Wallet
+              </Button>
+            </CardContent>
+          </Card>
+
+          {/* Settings (available even without auth) */}
+          <Card className="border border-slate-200 dark:border-slate-700">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2 text-lg">
+                <Settings className="h-5 w-5" />
+                Settings
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3 text-sm text-slate-600 dark:text-slate-400">
+              <p>Theme: Use the toggle in the top navigation bar</p>
+              <p>Network: Pi Network (Testnet)</p>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    )
+  }
+
+  // AUTHENTICATED
   return (
-    <div className="min-h-screen premium-gradient pt-16 pb-20 p-3 sm:p-4">
-      <div className="max-w-md mx-auto space-y-6">
-        <PageBackHeader title="Profile" />
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <User className="h-5 w-5" />
-              Wallet
-            </CardTitle>
-            <CardDescription> Your ZyraDex Profile</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
+    <div className="min-h-screen premium-gradient pt-24 pb-24 lg:pb-6">
+      <div className="container mx-auto px-4 py-8 max-w-md space-y-6">
+        <div>
+          <h1 className="text-3xl font-bold text-slate-900 dark:text-white">Profile</h1>
+        </div>
+
+        {/* Wallet Identity Card */}
+        <Card className="border border-slate-200 dark:border-slate-700">
+          <CardHeader className="pb-3">
             <div className="flex items-center gap-4">
-              <Avatar className="h-16 w-16">
+              <Avatar className="h-14 w-14">
                 {profile?.avatarUrl && !profileLoading && (
-                  <AvatarImage src={profile.avatarUrl} alt={profile?.username || "Profile avatar"} className="object-cover" />
+                  <AvatarImage src={profile.avatarUrl} alt={profile?.username || "Avatar"} className="object-cover" />
                 )}
-                <AvatarFallback className="bg-primary text-primary-foreground text-2xl">
-                  {(user?.username || "Guest").slice(0, 2).toUpperCase()}
+                <AvatarFallback className="bg-gradient-to-br from-green-600 to-mint-500 text-white text-xl font-bold">
+                  {(user?.username || "Z").slice(0, 2).toUpperCase()}
                 </AvatarFallback>
               </Avatar>
               <div className="flex-1 min-w-0">
-                <div className="font-semibold text-lg text-foreground truncate">
-                  {isLoading ? "Authenticating..." : user?.username ? `@${user.username}` : "Unauthenticated"}
-                </div>
-                <div className="text-xs text-muted-foreground">
-                  Wallets tracked: {balancesLoading ? "..." : stats[0].value}
+                <div className="font-semibold text-lg truncate">
+                  {user?.username ? `@${user.username}` : "Connected"}
                 </div>
                 {walletDisplay && (
-                  <div className="mt-1 flex items-center gap-2 text-xs text-muted-foreground font-mono">
-                    <span className="truncate max-w-[160px]" title={walletDisplay}>
+                  <div className="flex items-center gap-1.5 mt-1">
+                    <span className="text-xs text-slate-500 dark:text-slate-400 font-mono truncate max-w-[160px]" title={walletDisplay}>
                       {truncatedWallet}
                     </span>
-                    <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => handleCopyWalletAddress()}>
+                    <Button variant="ghost" size="icon" className="h-6 w-6" onClick={handleCopyWalletAddress}>
                       <Copy className="h-3 w-3" />
                     </Button>
                   </div>
                 )}
               </div>
             </div>
-            <Separator />
-            <div className="grid grid-cols-3 gap-3 text-center">
-              {stats.map((stat) => (
-                <div key={stat.label} className="p-2 rounded-lg bg-muted/40">
-                  <p className="text-xs text-muted-foreground">{stat.label}</p>
-                  <p className="text-sm font-semibold">{balancesLoading ? "..." : stat.value}</p>
-                </div>
-              ))}
+          </CardHeader>
+          <CardContent>
+            <Separator className="mb-4" />
+            <div className="grid grid-cols-2 gap-3 text-center">
+              <div className="p-3 rounded-xl bg-slate-50 dark:bg-slate-800/50">
+                <p className="text-xs text-slate-500 dark:text-slate-400">Assets</p>
+                <p className="text-lg font-bold text-slate-900 dark:text-white">{balances.length}</p>
+              </div>
+              <div className="p-3 rounded-xl bg-slate-50 dark:bg-slate-800/50">
+                <p className="text-xs text-slate-500 dark:text-slate-400">Total Balance</p>
+                <p className="text-lg font-bold text-slate-900 dark:text-white">
+                  {totalBalance.toLocaleString(undefined, { maximumFractionDigits: 2 })}
+                </p>
+              </div>
             </div>
+            {usdBalance !== null && (
+              <p className="text-center text-sm text-slate-500 dark:text-slate-400 mt-3">
+                ≈ ${usdBalance.toLocaleString(undefined, { maximumFractionDigits: 2 })} USD
+              </p>
+            )}
           </CardContent>
         </Card>
 
-        {!storedWalletAddress && isAuthenticated && (
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                <Shield className="h-5 w-5" />
-                Create New Wallet
-              </CardTitle>
-              <CardDescription>Generate a new wallet and receive test Pi</CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              {createWalletError && (
-                <Alert variant="destructive">
-                  <AlertDescription className="text-sm break-words">
-                    {createWalletError.message}
-                  </AlertDescription>
-                </Alert>
-              )}
-              <Alert>
-                <AlertDescription className="text-sm break-words">
-                  A new wallet will be created and seeded with test Pi. You will receive your secret seed - 
-                  save it securely as you'll need it for all transactions. We don't store your secret seed.
-                </AlertDescription>
-              </Alert>
-              <Button 
-                onClick={handleCreateWallet} 
-                className="btn-gradient-primary w-full" 
-                disabled={creatingWallet}
-              >
-                {creatingWallet && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-                Create New Wallet
-              </Button>
-            </CardContent>
-          </Card>
-        )}
-
-        <Card>
+        {/* Holdings Summary */}
+        <Card className="border border-slate-200 dark:border-slate-700">
           <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <Star className="h-5 w-5" />
+            <CardTitle className="flex items-center gap-2 text-lg">
+              <Coins className="h-5 w-5" />
               Holdings
             </CardTitle>
-            <CardDescription>Your holdings on the ZyraDex</CardDescription>
+            <CardDescription>Your assets on ZyraDex</CardDescription>
           </CardHeader>
-          <CardContent className="grid grid-cols-2 gap-3 text-sm text-muted-foreground">
-            <div className="p-3 rounded-lg bg-muted/40">
-              <p className="font-medium text-foreground">Assets Tracked</p>
-              <p>{balancesLoading ? "Loading..." : balances.length ? `${balances.length} assets` : "None yet"}</p>
-            </div>
-            <div className="p-3 rounded-lg bg-muted/40">
-              <p className="font-medium text-foreground">Total Value</p>
-              <p>{balancesLoading ? "Loading..." : totalBalance.toLocaleString(undefined, { maximumFractionDigits: 2 })}</p>
-            </div>
+          <CardContent>
+            {balancesLoading ? (
+              <div className="flex justify-center py-4">
+                <Loader2 className="h-5 w-5 animate-spin text-slate-400" />
+              </div>
+            ) : balances.length === 0 ? (
+              <div className="text-center py-4 space-y-3">
+                <p className="text-sm text-slate-500">No assets tracked yet</p>
+                <Button asChild variant="outline" size="sm">
+                  <Link href="/swap">Start trading</Link>
+                </Button>
+              </div>
+            ) : (
+              <div className="space-y-2 max-h-64 overflow-y-auto">
+                {balances.map((b, i) => (
+                  <div key={i} className="flex justify-between items-center py-2 border-b border-slate-100 dark:border-slate-800 last:border-0">
+                    <span className="font-medium text-sm">{b.assetType === "native" ? "Pi" : b.assetCode}</span>
+                    <span className="text-sm text-slate-600 dark:text-slate-400">{Number(b.amount).toLocaleString(undefined, { maximumFractionDigits: 6 })}</span>
+                  </div>
+                ))}
+              </div>
+            )}
           </CardContent>
         </Card>
 
+        {/* Navigation Links */}
         <div className="space-y-3">
-          <h2 className="text-lg font-semibold text-foreground">Navigation</h2>
-          {mainNavItems.map((item) => (
+          <h2 className="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Quick Actions</h2>
+          {navItems.map((item) => (
             <Link key={item.title} href={item.href} className="block w-full">
-              <div className="bg-card rounded-xl p-4 hover:bg-muted/50 transition-colors border border-border/30 shadow-sm">
+              <div className="bg-white dark:bg-slate-800 rounded-xl p-4 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors border border-slate-200 dark:border-slate-700 shadow-sm">
                 <div className="flex items-center justify-between">
-                  <div className="flex items-center space-x-3 min-w-0 flex-1">
-                    <item.icon className="h-5 w-5 text-muted-foreground shrink-0" />
+                  <div className="flex items-center gap-3 min-w-0 flex-1">
+                    <item.icon className="h-5 w-5 text-slate-500 dark:text-slate-400 shrink-0" />
                     <div className="min-w-0 flex-1">
-                      <div className="font-semibold text-sm text-foreground truncate">{item.title}</div>
-                      <div className="text-xs text-muted-foreground mt-0.5">{item.description}</div>
+                      <div className="font-semibold text-sm truncate">{item.title}</div>
+                      <div className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">{item.description}</div>
                     </div>
                   </div>
-                  {item.showChevron && <ChevronRight className="h-4 w-4 text-muted-foreground shrink-0 ml-2" />}
+                  <ChevronRight className="h-4 w-4 text-slate-400 shrink-0 ml-2" />
                 </div>
               </div>
             </Link>
           ))}
-          <button
-            type="button"
-            onClick={handleChangeWalletClick}
-            disabled={changingWallet || !isAuthenticated}
-            className="block w-full text-left"
-          >
-            <div className="bg-card rounded-xl p-4 hover:bg-muted/50 transition-colors border border-border/30 shadow-sm">
+
+          {/* Change wallet */}
+          <button type="button" onClick={handleChangeWalletClick} disabled={changingWallet || !isAuthenticated} className="block w-full text-left">
+            <div className="bg-white dark:bg-slate-800 rounded-xl p-4 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors border border-slate-200 dark:border-slate-700 shadow-sm">
               <div className="flex items-center justify-between">
-                <div className="flex items-center space-x-3 min-w-0 flex-1">
-                  <Shield className="h-5 w-5 text-muted-foreground shrink-0" />
-                  <div className="min-w-0 flex-1">
-                    <div className="font-semibold text-sm text-foreground truncate">Change wallet</div>
-                    <div className="text-xs text-muted-foreground mt-0.5">Replace your wallet or set up a new one</div>
+                <div className="flex items-center gap-3 min-w-0 flex-1">
+                  <Shield className="h-5 w-5 text-slate-500 dark:text-slate-400 shrink-0" />
+                  <div>
+                    <div className="font-semibold text-sm">Change wallet</div>
+                    <div className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">Replace or set up a new wallet</div>
                   </div>
                 </div>
-                <ChevronRight className="h-4 w-4 text-muted-foreground shrink-0 ml-2" />
+                <ChevronRight className="h-4 w-4 text-slate-400 shrink-0 ml-2" />
               </div>
             </div>
           </button>
         </div>
 
-        <div className="space-y-3 pt-4">
-          <h2 className="text-lg font-semibold text-foreground">Connect with us</h2>
+        {/* Create Wallet (if no wallet yet) */}
+        {!storedWalletAddress && (
+          <Card className="border border-slate-200 dark:border-slate-700">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2 text-lg">
+                <Shield className="h-5 w-5" />
+                Create Wallet
+              </CardTitle>
+              <CardDescription>Generate a new wallet and receive test Pi</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {createWalletError && (
+                <Alert variant="destructive">
+                  <AlertDescription className="text-sm">{createWalletError.message}</AlertDescription>
+                </Alert>
+              )}
+              <Alert>
+                <AlertDescription className="text-sm">
+                  A new wallet will be created and seeded with test Pi. Save your secret seed securely — we don't store it.
+                </AlertDescription>
+              </Alert>
+              <Button onClick={handleCreateWallet} className="w-full bg-gradient-to-r from-green-600 to-mint-500 text-white" disabled={creatingWallet}>
+                {creatingWallet ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
+                Create New Wallet
+              </Button>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Logout */}
+        <Button onClick={signOut} variant="ghost" className="w-full text-slate-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-950/30">
+          <LogOut className="mr-2 h-4 w-4" />
+          Disconnect Wallet
+        </Button>
+
+        {/* Social Links */}
+        <div className="space-y-3 pt-2">
+          <h2 className="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Connect</h2>
           <div className="flex flex-wrap gap-3">
-            <a
-              href="https://github.com/Pi-Defi-world/Zyradex-frontend"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="flex items-center gap-2 px-4 py-2 rounded-xl bg-card border border-border/30 hover:bg-muted/50 transition-colors text-sm font-medium text-foreground"
-            >
-              <Github className="h-5 w-5" />
-              GitHub
+            <a href="https://github.com/Pi-Defi-world/Zyradex-frontend" target="_blank" rel="noopener noreferrer"
+              className="flex items-center gap-2 px-4 py-2 rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors text-sm font-medium">
+              <Github className="h-4 w-4" /> GitHub
             </a>
-            <a
-              href="https://t.me/zyrachains"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="flex items-center gap-2 px-4 py-2 rounded-xl bg-card border border-border/30 hover:bg-muted/50 transition-colors text-sm font-medium text-foreground"
-            >
-              <Send className="h-5 w-5" />
-              Telegram
+            <a href="https://t.me/zyrachains" target="_blank" rel="noopener noreferrer"
+              className="flex items-center gap-2 px-4 py-2 rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors text-sm font-medium">
+              <Send className="h-4 w-4" /> Telegram
             </a>
-            <a
-              href="https://x.com/intent/follow?screen_name=zyradex"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="flex items-center gap-2 px-4 py-2 rounded-xl bg-card border border-border/30 hover:bg-muted/50 transition-colors text-sm font-medium text-foreground"
-            >
-              <Share2 className="h-5 w-5" />
-              X
+            <a href="https://x.com/intent/follow?screen_name=zyradex" target="_blank" rel="noopener noreferrer"
+              className="flex items-center gap-2 px-4 py-2 rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors text-sm font-medium">
+              <Share2 className="h-4 w-4" /> X
             </a>
           </div>
         </div>
-
       </div>
 
-      <Dialog open={showSecretDialog} onOpenChange={(open) => {
-        setShowSecretDialog(open)
-        if (!open) {
-          setNewWalletSecret(null)
-          setSuccessReplaceWarning(null)
-        }
-      }}>
+      {/* Secret Seed Dialog */}
+      <Dialog open={showSecretDialog} onOpenChange={(open) => { setShowSecretDialog(open); if (!open) { setNewWalletSecret(null); setSuccessReplaceWarning(null) } }}>
         <DialogContent className="max-w-md max-h-[90vh] overflow-y-auto">
           <DialogHeader>
             <DialogTitle>Save Your Secret Seed</DialogTitle>
-            <DialogDescription>
-              Your wallet has been created! Please save your secret seed securely. You'll need it for all transactions.
-            </DialogDescription>
+            <DialogDescription>Your wallet has been created. Save your secret seed securely — you'll need it for all transactions.</DialogDescription>
           </DialogHeader>
           <div className="space-y-4 mt-4">
-            {successReplaceWarning && (
-              <Alert variant="destructive">
-                <AlertDescription className="text-sm break-words">
-                  {successReplaceWarning}
-                </AlertDescription>
-              </Alert>
-            )}
-            <Alert variant="destructive">
-              <AlertDescription className="text-sm break-words">
-                <strong>IMPORTANT:</strong> Save this secret seed in a secure location. We don't store it, 
-                and you cannot recover it if lost. You'll need to provide it for every transaction.
-              </AlertDescription>
-            </Alert>
+            {successReplaceWarning && <Alert variant="destructive"><AlertDescription className="text-sm">{successReplaceWarning}</AlertDescription></Alert>}
+            <Alert variant="destructive"><AlertDescription className="text-sm"><strong>IMPORTANT:</strong> We don't store your secret seed. Save it in a secure location.</AlertDescription></Alert>
             <div className="space-y-2">
-              <Label>Wallet Address (Public Key)</Label>
-              <div className="flex items-center gap-2 p-3 bg-muted rounded-md border border-border">
-                <span className="flex-1 break-all font-mono text-xs sm:text-sm min-w-0">{storedWalletAddress}</span>
-                <Button variant="ghost" size="icon" className="h-8 w-8 shrink-0" onClick={handleCopyWalletAddress}>
-                  <Copy className="h-4 w-4" />
-                </Button>
+              <Label>Wallet Address</Label>
+              <div className="flex items-center gap-2 p-3 bg-slate-50 dark:bg-slate-800 rounded-md border">
+                <span className="flex-1 break-all font-mono text-xs min-w-0">{storedWalletAddress}</span>
+                <Button variant="ghost" size="icon" className="h-8 w-8 shrink-0" onClick={handleCopyWalletAddress}><Copy className="h-4 w-4" /></Button>
               </div>
             </div>
             <div className="space-y-2">
-              <Label>Secret Seed (Private Key)</Label>
-              <div className="flex items-start gap-2 p-3 bg-muted rounded-md border border-border min-h-[60px]">
-                <span className="flex-1 break-all font-mono text-xs sm:text-sm min-w-0 leading-relaxed">{newWalletSecret}</span>
-                <Button variant="ghost" size="icon" className="h-8 w-8 shrink-0 mt-0.5" onClick={handleCopySecret}>
-                  <Copy className="h-4 w-4" />
-                </Button>
+              <Label>Secret Seed</Label>
+              <div className="flex items-start gap-2 p-3 bg-slate-50 dark:bg-slate-800 rounded-md border min-h-[60px]">
+                <span className="flex-1 break-all font-mono text-xs leading-relaxed">{newWalletSecret}</span>
+                <Button variant="ghost" size="icon" className="h-8 w-8 shrink-0 mt-0.5" onClick={handleCopySecret}><Copy className="h-4 w-4" /></Button>
               </div>
             </div>
-            <Button
-              onClick={() => {
-                setShowSecretDialog(false)
-                setNewWalletSecret(null)
-                setSuccessReplaceWarning(null)
-              }}
-              className="w-full"
-            >
-              I've Saved My Secret Seed
-            </Button>
+            <Button onClick={() => { setShowSecretDialog(false); setNewWalletSecret(null); setSuccessReplaceWarning(null) }} className="w-full">I've Saved My Secret Seed</Button>
           </div>
         </DialogContent>
       </Dialog>
 
-      <Dialog open={showChangeWalletWarning} onOpenChange={(open) => {
-        setShowChangeWalletWarning(open)
-        if (!open) setChangeWalletConfirm(false)
-      }}>
-        <DialogContent className="max-w-md max-h-[90vh] overflow-y-auto">
+      {/* Change Wallet Warning */}
+      <Dialog open={showChangeWalletWarning} onOpenChange={(open) => { setShowChangeWalletWarning(open); if (!open) setChangeWalletConfirm(false) }}>
+        <DialogContent className="max-w-md">
           <DialogHeader>
             <DialogTitle>Changing your wallet</DialogTitle>
-            <DialogDescription>
-              Your current wallet will be replaced. The old wallet address will no longer be linked to this account.
-            </DialogDescription>
+            <DialogDescription>Your current wallet will be replaced. Funds in the old wallet are not automatically moved.</DialogDescription>
           </DialogHeader>
           <div className="space-y-4 mt-4">
-            <Alert variant="destructive">
-              <AlertDescription className="text-sm break-words space-y-2">
-                <ul className="list-disc list-inside space-y-1">
-                  <li>Any funds in the old wallet are <strong>not</strong> automatically moved to the new one.</li>
-                  <li>You will need to save the <strong>new</strong> secret key securely; the old one will no longer be used for this account.</li>
-                </ul>
-                <p className="mt-2">Are you sure you want to replace your wallet?</p>
-              </AlertDescription>
-            </Alert>
-            {changeWalletError && (
-              <Alert variant="destructive">
-                <AlertDescription className="text-sm break-words">{changeWalletError.message}</AlertDescription>
-              </Alert>
-            )}
-            <div className="flex items-center space-x-2">
-              <Checkbox
-                id="confirm-replace"
-                checked={changeWalletConfirm}
-                onCheckedChange={(checked) => setChangeWalletConfirm(checked === true)}
-              />
-              <label
-                htmlFor="confirm-replace"
-                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
-              >
-                I understand, replace my wallet
-              </label>
+            <Alert variant="destructive"><AlertDescription className="text-sm">Funds in the old wallet are not automatically moved. Save the new secret key securely.</AlertDescription></Alert>
+            {changeWalletError && <Alert variant="destructive"><AlertDescription className="text-sm">{changeWalletError.message}</AlertDescription></Alert>}
+            <div className="flex items-center gap-2">
+              <Checkbox id="confirm-replace" checked={changeWalletConfirm} onCheckedChange={(c) => setChangeWalletConfirm(c === true)} />
+              <label htmlFor="confirm-replace" className="text-sm cursor-pointer">I understand, replace my wallet</label>
             </div>
             <div className="flex gap-2">
-              <Button
-                variant="outline"
-                className="flex-1"
-                onClick={() => { setShowChangeWalletWarning(false); setChangeWalletConfirm(false) }}
-              >
-                Cancel
-              </Button>
-              <Button
-                className="flex-1"
-                disabled={!changeWalletConfirm || changingWallet}
-                onClick={handleChangeWalletConfirm}
-              >
+              <Button variant="outline" className="flex-1" onClick={() => { setShowChangeWalletWarning(false); setChangeWalletConfirm(false) }}>Cancel</Button>
+              <Button className="flex-1" disabled={!changeWalletConfirm || changingWallet} onClick={handleChangeWalletConfirm}>
                 {changingWallet ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
-                Replace my wallet
+                Replace wallet
               </Button>
             </div>
           </div>
diff --git a/app/profile/rewards/page.tsx b/app/profile/rewards/page.tsx
index fcb772f..4fb0b3b 100644
--- a/app/profile/rewards/page.tsx
+++ b/app/profile/rewards/page.tsx
@@ -85,7 +85,7 @@ export default function RewardsPage() {
 
   if (!isAuthenticated) {
     return (
-      <div className="min-h-screen premium-gradient pt-16 pb-20 p-3 sm:p-4">
+      <div className="min-h-screen premium-gradient pt-24 pb-24 lg:pb-6 p-3 sm:p-4">
         <div className="max-w-md mx-auto">
           <Card>
             <CardHeader>
@@ -104,7 +104,7 @@ export default function RewardsPage() {
   }
 
   return (
-    <div className="min-h-screen premium-gradient pt-16 pb-20 p-3 sm:p-4">
+    <div className="min-h-screen premium-gradient pt-24 pb-24 lg:pb-6 p-3 sm:p-4">
       <div className="max-w-md mx-auto space-y-6">
         <div className="flex items-center gap-2">
           <Button variant="ghost" size="icon" asChild>
diff --git a/app/savings/page.tsx b/app/savings/page.tsx
index 146052d..300bc30 100644
--- a/app/savings/page.tsx
+++ b/app/savings/page.tsx
@@ -251,7 +251,7 @@ export default function SavingsPage() {
   }
 
   return (
-    <div className="min-h-screen premium-gradient pt-16 pb-20">
+    <div className="min-h-screen premium-gradient pt-24 pb-24 lg:pb-6">
       <div className="container mx-auto px-4 py-6 space-y-6">
         <PageBackHeader title="Savings" />
         <div>
diff --git a/app/send/page.tsx b/app/send/page.tsx
index 6b6a6e3..b67a632 100644
--- a/app/send/page.tsx
+++ b/app/send/page.tsx
@@ -36,9 +36,12 @@ export default function SendPage() {
     : undefined
 
   return (
-    <div className="min-h-screen premium-gradient pt-16 pb-20">
+    <div className="min-h-screen premium-gradient pt-24 pb-24 lg:pb-6">
       <div className="container mx-auto px-4 py-8 space-y-6 max-w-2xl">
-        <PageBackHeader title="Send Tokens" />
+        <div>
+          <h1 className="text-3xl font-bold text-slate-900 dark:text-white">Send</h1>
+          <p className="text-slate-600 dark:text-slate-400 mt-1">Transfer tokens to any Pi Network wallet</p>
+        </div>
         <SendForm publicKey={publicKey} />
       </div>
     </div>
diff --git a/app/swap/page.tsx b/app/swap/page.tsx
index f0c455d..68b2f6d 100644
--- a/app/swap/page.tsx
+++ b/app/swap/page.tsx
@@ -5,8 +5,10 @@ import { PageBackHeader } from "@/components/ui/page-back-header"
 import { SwapCard } from "@/components/swap/swap-card"
 import { PriceChart, type PricePoint } from "@/components/swap/price-chart"
 import { RecentSwaps } from "@/components/swap/recent-swaps"
+import { Button } from "@/components/ui/button"
 import { useAccountOperations } from "@/hooks/useAccountData"
 import { usePi } from "@/components/providers/pi-provider"
+import { BarChart3, X } from "lucide-react"
 
 const getStoredWallet = () => {
   if (typeof window === "undefined") return null
@@ -24,7 +26,6 @@ const computePriceSeries = (operations: ReturnType<typeof useAccountOperations>[
       if (!Number.isFinite(amount)) return
       series.set(label, (series.get(label) ?? 0) + amount)
     })
-
   return Array.from(series.entries())
     .map(([label, value]) => ({ label, value: Number(value.toFixed(2)) }))
     .sort((a, b) => new Date(a.label).getTime() - new Date(b.label).getTime())
@@ -33,38 +34,81 @@ const computePriceSeries = (operations: ReturnType<typeof useAccountOperations>[
 export default function SwapPage() {
   const { user } = usePi()
   const [localWallet, setLocalWallet] = useState<string | null>(null)
+  const [showMobileChart, setShowMobileChart] = useState(false)
 
   useEffect(() => {
     setLocalWallet(getStoredWallet())
   }, [])
 
   const publicKey = user?.wallet_address || localWallet || undefined
-  const { operations, isLoading, error: operationsError } = useAccountOperations(publicKey, { limit: 40 })
-
+  const { operations, isLoading } = useAccountOperations(publicKey, { limit: 40 })
   const chartSeries = useMemo(() => computePriceSeries(operations), [operations])
 
   return (
-    <div className="min-h-screen premium-gradient pt-16 pb-20">
-      <div className="container mx-auto px-4 py-6 space-y-6">
-        <PageBackHeader title="Swap" />
-        <div className="hidden lg:grid lg:grid-cols-5 lg:gap-6 lg:mb-6">
-          <div className="lg:col-span-3">
-            <PriceChart series={chartSeries} isLoading={isLoading} />
-          </div>
+    <div className="min-h-screen premium-gradient pt-24 pb-24 lg:pb-6">
+      <div className="container mx-auto px-4 py-8 space-y-6 max-w-6xl">
+        <div>
+          <PageBackHeader title="Swap" />
+          <p className="text-slate-600 dark:text-slate-400 mt-1">Trade tokens instantly at the best rates on Pi Network</p>
+        </div>
+
+        {/* Desktop: Swap card + Chart */}
+        <div className="hidden lg:grid lg:grid-cols-5 lg:gap-8">
           <div className="lg:col-span-2">
             <SwapCard />
           </div>
+          <div className="lg:col-span-3">
+            <div className="bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
+              <PriceChart series={chartSeries} isLoading={isLoading} />
+            </div>
+            <div className="mt-6">
+              <h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-3">Recent Transactions</h2>
+              <div className="bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
+                <RecentSwaps operations={operations} isLoading={isLoading} />
+              </div>
+            </div>
+          </div>
         </div>
 
+        {/* Mobile: Swap card + optional chart toggle */}
         <div className="lg:hidden space-y-6">
           <SwapCard />
-          {/* <PriceChart series={chartSeries} isLoading={isLoading} /> */}
-        </div>
 
-        <div className="mt-6">
-          <RecentSwaps operations={operations} isLoading={isLoading} />
+          <div className="flex justify-center">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setShowMobileChart(!showMobileChart)}
+              className="gap-2"
+            >
+              {showMobileChart ? (
+                <>
+                  <X className="h-4 w-4" />
+                  Hide Chart
+                </>
+              ) : (
+                <>
+                  <BarChart3 className="h-4 w-4" />
+                  View Chart
+                </>
+              )}
+            </Button>
+          </div>
+
+          {showMobileChart && (
+            <div className="bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
+              <PriceChart series={chartSeries} isLoading={isLoading} />
+            </div>
+          )}
+
+          <div>
+            <h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-3">Recent Transactions</h2>
+            <div className="bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
+              <RecentSwaps operations={operations} isLoading={isLoading} />
+            </div>
+          </div>
         </div>
       </div>
     </div>
   )
-}
\ No newline at end of file
+}
diff --git a/app/token/[code]/page.tsx b/app/token/[code]/page.tsx
index 9bca256..b87ae76 100644
--- a/app/token/[code]/page.tsx
+++ b/app/token/[code]/page.tsx
@@ -139,7 +139,7 @@ export default function TokenDetailPage({ params }: { params: { code: string } }
   const displayName = isNative ? "Test Pi" : tokenCode
 
   return (
-    <div className="min-h-screen premium-gradient pt-16 pb-20">
+    <div className="min-h-screen premium-gradient pt-24 pb-24 lg:pb-6">
       <div className="container mx-auto px-4 py-8 space-y-6 max-w-4xl">
         {/* Back Button */}
         <Button
diff --git a/app/trade/page.tsx b/app/trade/page.tsx
index 7382739..3d40404 100644
--- a/app/trade/page.tsx
+++ b/app/trade/page.tsx
@@ -46,7 +46,7 @@ export default function TradePage() {
   const { error: profileError } = useUserProfile()
 
   return (
-    <div className="min-h-screen premium-gradient pt-16 pb-20">
+    <div className="min-h-screen premium-gradient pt-24 pb-24 lg:pb-6">
       <div className="container mx-auto px-4 py-6 space-y-6">
         <PageBackHeader title="Trade" />
         <div className="grid gap-6 lg:grid-cols-3">
diff --git a/app/trustlines/page.tsx b/app/trustlines/page.tsx
index 26ce908..78ee2c8 100644
--- a/app/trustlines/page.tsx
+++ b/app/trustlines/page.tsx
@@ -91,7 +91,7 @@ export default function TrustlinesPage() {
   }, [tokens, searchQuery])
 
   return (
-    <div className="min-h-screen premium-gradient pt-16 pb-20">
+    <div className="min-h-screen premium-gradient pt-24 pb-24 lg:pb-6">
       <div className="container mx-auto px-4 py-8 space-y-6 max-w-4xl">
         <PageBackHeader title="Trustlines" />
         <Card className="relative overflow-hidden border border-border/50 bg-card shadow-xl rounded-2xl">
diff --git a/components/navbar.tsx b/components/navbar.tsx
index b13f33d..ff64a19 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { Button } from "@/components/ui/button"
-import { Moon, Sun, Wallet, Home, Coins, Droplets, User, ArrowRightLeft, TrendingUp, PiggyBank, CreditCard } from "lucide-react"
+import { Moon, Sun, Wallet, Home, ArrowRightLeft, Compass, User } from "lucide-react"
 import { useTheme } from "next-themes"
 import Link from "next/link"
 import { usePi } from "@/components/providers/pi-provider"
@@ -9,70 +9,61 @@ import { useUserProfile } from "@/hooks/useUserProfile"
 import { useState, useEffect } from "react"
 import { usePathname } from "next/navigation"
 
-interface NavbarProps {
-  isConnected?: boolean
-  onConnect?: () => void
-}
-
-// Mobile Bottom Navigation Component
+// Mobile Bottom Navigation (4 items)
 function MobileBottomNav() {
   const pathname = usePathname()
   const [isVisible, setIsVisible] = useState(true)
   const [lastScrollY, setLastScrollY] = useState(0)
 
-  // Scroll-based show/hide behavior
   useEffect(() => {
     const handleScroll = () => {
       const currentScrollY = window.scrollY
-      
       if (currentScrollY < lastScrollY || currentScrollY < 100 || currentScrollY > document.body.scrollHeight - window.innerHeight - 100) {
         setIsVisible(true)
       } else {
         setIsVisible(false)
       }
-      
       setLastScrollY(currentScrollY)
     }
-
     window.addEventListener('scroll', handleScroll, { passive: true })
     return () => window.removeEventListener('scroll', handleScroll)
   }, [lastScrollY])
 
   const navItems = [
     { href: "/", icon: Home, label: "Home" },
-    { href: "/invest", icon: TrendingUp, label: "Invest" },
-    { href: "/savings", icon: PiggyBank, label: "Savings" },
-    { href: "/lending", icon: CreditCard, label: "Borrow" },
-    { href: "/swap", icon: ArrowRightLeft, label: "Trade" },
+    { href: "/swap", icon: ArrowRightLeft, label: "Swap" },
+    { href: "/explore", icon: Compass, label: "Explore" },
     { href: "/profile", icon: User, label: "Profile" },
   ]
 
   return (
-    <div 
-      className={`fixed bottom-0 left-0 right-0 z-50 lg:hidden transition-transform duration-300 ease-in-out ${
+    <div
+      className={`fixed bottom-0 left-0 right-0 z-50 lg:hidden transition-all duration-300 ${
         isVisible ? 'translate-y-0' : 'translate-y-full'
       }`}
       style={{
-        paddingBottom: 'env(safe-area-inset-bottom, 1rem)',
+        paddingBottom: 'max(env(safe-area-inset-bottom, 0rem), 1rem)',
         paddingLeft: 'env(safe-area-inset-left, 1rem)',
         paddingRight: 'env(safe-area-inset-right, 1rem)'
       }}
     >
-      <div className="relative max-w-sm mx-auto">
-        <div className="bg-card/80 backdrop-blur-md border border-border rounded-xl shadow-lg px-3 py-1.5">
-          <div className="flex justify-around items-center">
+      <div className="relative max-w-sm mx-auto mb-2">
+        <div className="bg-white/90 dark:bg-slate-900/90 backdrop-blur-xl border border-slate-200 dark:border-slate-800 rounded-2xl shadow-xl px-2 py-3">
+          <div className="flex justify-around items-center gap-1">
             {navItems.map((item) => {
               const isActive = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href))
               return (
-                <Link 
+                <Link
                   key={item.href}
-                  href={item.href} 
-                  className={`flex flex-col items-center justify-center transition-colors p-1.5 ${
-                    isActive ? 'text-primary' : 'text-neutral-400 hover:text-primary'
+                  href={item.href}
+                  className={`flex flex-col items-center justify-center transition-all p-2 rounded-xl ${
+                    isActive
+                      ? 'text-green-600 dark:text-green-400 bg-green-50 dark:bg-green-950/40'
+                      : 'text-slate-500 dark:text-slate-400 hover:text-green-600 dark:hover:text-green-400'
                   }`}
                 >
-                  <item.icon className="h-5 w-5" />
-                  <span className="text-[10px] mt-0.5">{item.label}</span>
+                  <item.icon className="h-6 w-6" />
+                  <span className="text-[10px] mt-1 font-medium">{item.label}</span>
                 </Link>
               )
             })}
@@ -83,7 +74,7 @@ function MobileBottomNav() {
   )
 }
 
-export function Navbar({ isConnected = false, onConnect }: NavbarProps) {
+export function Navbar() {
   const { theme, setTheme } = useTheme()
   const { user, isAuthenticated, authenticate, signOut } = usePi()
   const { profile, isLoading: profileLoading } = useUserProfile()
@@ -113,54 +104,90 @@ export function Navbar({ isConnected = false, onConnect }: NavbarProps) {
   const hasWallet = Boolean(profile?.public_key && profile.public_key.trim() !== "")
   const displayName = profile?.username ?? user?.username ?? "Connected"
 
+  const desktopLinks = [
+    { href: "/", label: "Home" },
+    { href: "/swap", label: "Swap" },
+    { href: "/explore", label: "Explore" },
+    { href: "/profile", label: "Profile" },
+  ]
+
   return (
     <>
-      <nav className="fixed top-0 w-full z-50 border-b border-border bg-background/95 backdrop-blur-sm">
+      <nav className="fixed top-0 w-full z-50 border-b border-slate-200 dark:border-slate-800 bg-white/90 dark:bg-slate-950/90 backdrop-blur-xl">
         <div className="container mx-auto px-4 h-16 flex items-center justify-between">
-          <Link href="/" className="flex items-center gap-2">
-            <span className="font-bold text-xl">ZyraDex</span>
+          {/* Logo */}
+          <Link href="/" className="flex items-center gap-2.5 group">
+            <div className="w-9 h-9 rounded-lg bg-gradient-to-br from-green-600 to-mint-500 flex items-center justify-center shadow group-hover:shadow-md transition-shadow">
+              <span className="text-white font-bold text-base">Z</span>
+            </div>
+            <span className="font-bold text-lg text-slate-900 dark:text-white">
+              ZyraDex
+            </span>
           </Link>
 
           {/* Desktop Navigation */}
-          <div className="hidden md:flex items-center space-x-6">
-            <Link href="/" className="text-sm font-medium text-foreground/60 hover:text-foreground transition-colors">Home</Link>
-            <Link href="/invest" className="text-sm font-medium text-foreground/60 hover:text-foreground transition-colors">Invest</Link>
-            <Link href="/savings" className="text-sm font-medium text-foreground/60 hover:text-foreground transition-colors">Savings</Link>
-            <Link href="/lending" className="text-sm font-medium text-foreground/60 hover:text-foreground transition-colors">Borrow</Link>
-            <Link href="/swap" className="text-sm font-medium text-foreground/60 hover:text-foreground transition-colors">Trade</Link>
-            <Link href="/profile" className="text-sm font-medium text-foreground/60 hover:text-foreground transition-colors">Profile</Link>
+          <div className="hidden md:flex items-center space-x-1">
+            {desktopLinks.map((item) => (
+              <Link
+                key={item.href}
+                href={item.href}
+                className="px-4 py-2 rounded-lg text-sm font-medium text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800 transition-all"
+              >
+                {item.label}
+              </Link>
+            ))}
           </div>
 
-          <div className="flex items-center gap-3">
-            <Button variant="ghost" size="icon" onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
+          {/* Right Actions */}
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+              className="rounded-lg text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800"
+            >
               <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
               <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
               <span className="sr-only">Toggle theme</span>
             </Button>
+
             {!mounted ? (
-              <Button variant="outline" className="gap-2 bg-transparent">
+              <Button variant="outline" size="sm" disabled className="gap-2">
                 <Wallet className="h-4 w-4" />
-                <span className="text-xs sm:text-sm">Loading...</span>
+                <span className="hidden sm:inline text-xs">Loading...</span>
               </Button>
             ) : isAuthenticated ? (
               <div className="flex items-center gap-2">
-                <Button variant="outline" className="gap-2 bg-transparent">
-                  <Wallet className="h-4 w-4" />
-                  <span className="text-xs sm:text-sm max-w-[120px] truncate">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="gap-2 border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800"
+                >
+                  <Wallet className="h-4 w-4 text-green-600" />
+                  <span className="hidden sm:inline text-xs max-w-[120px] truncate font-mono">
                     {hasWallet && profile?.public_key
-                      ? `${profile.public_key.slice(0, 6)}…${profile.public_key.slice(-4)}`
+                      ? `${profile.public_key.slice(0, 6)}...${profile.public_key.slice(-4)}`
                       : displayName}
                   </span>
                 </Button>
-                <Button onClick={signOut} variant="ghost" size="sm" className="text-xs px-2">
-                  <span className="hidden sm:inline">Logout</span>
-                  <span className="sm:hidden">×</span>
+                <Button
+                  onClick={signOut}
+                  variant="ghost"
+                  size="sm"
+                  className="hidden sm:flex text-xs hover:bg-red-50 dark:hover:bg-red-950/30 hover:text-red-600"
+                >
+                  Disconnect
                 </Button>
               </div>
             ) : (
-              <Button onClick={handlePiAuth} disabled={profileLoading} size="sm" className="gap-2 btn-gradient-primary">
+              <Button
+                onClick={handlePiAuth}
+                disabled={profileLoading}
+                size="sm"
+                className="gap-2 bg-gradient-to-r from-green-600 to-mint-500 text-white hover:shadow-lg hover:shadow-green-500/25"
+              >
                 <Wallet className="h-4 w-4" />
-                <span className="text-xs sm:text-sm">{profileLoading ? "Connecting…" : "Connect Pi"}</span>
+                <span className="hidden sm:inline text-xs">Connect Wallet</span>
               </Button>
             )}
           </div>
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index f64632d..b22ce14 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -5,28 +5,28 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm',
         destructive:
           'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
         outline:
-          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground shadow-sm',
         secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm',
         ghost:
-          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+          'hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
-        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-        icon: 'size-9',
-        'icon-sm': 'size-8',
-        'icon-lg': 'size-10',
+        default: 'h-10 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-9 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5 text-xs',
+        lg: 'h-11 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-10',
+        'icon-sm': 'size-9',
+        'icon-lg': 'size-11',
       },
     },
     defaultVariants: {
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
index c5718b4..7490d68 100644
--- a/components/ui/card.tsx
+++ b/components/ui/card.tsx
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="card"
       className={cn(
-        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        'bg-card text-card-foreground flex flex-col gap-4 rounded-xl border py-6 shadow-sm',
         className,
       )}
       {...props}
@@ -20,7 +20,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="card-header"
       className={cn(
-        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
         className,
       )}
       {...props}
@@ -65,7 +65,7 @@ function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card-content"
-      className={cn('px-4', className)}
+      className={cn('px-6', className)}
       {...props}
     />
   )
diff --git a/components/ui/empty-state.tsx b/components/ui/empty-state.tsx
new file mode 100644
index 0000000..f5a3e8d
--- /dev/null
+++ b/components/ui/empty-state.tsx
@@ -0,0 +1,40 @@
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+import { type LucideIcon } from "lucide-react"
+
+interface EmptyStateProps {
+  icon: LucideIcon
+  title: string
+  description: string
+  actionLabel?: string
+  actionHref?: string
+  onAction?: () => void
+  className?: string
+}
+
+export function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  actionLabel,
+  actionHref,
+  onAction,
+  className,
+}: EmptyStateProps) {
+  return (
+    <div className={cn("flex flex-col items-center justify-center py-12 px-4 text-center", className)}>
+      <div className="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center mb-4">
+        <Icon className="h-7 w-7 text-slate-400 dark:text-slate-500" />
+      </div>
+      <p className="font-semibold text-slate-900 dark:text-white mb-1">{title}</p>
+      <p className="text-sm text-slate-500 dark:text-slate-400 max-w-xs mb-4">{description}</p>
+      {actionLabel && (actionHref ? (
+        <Button asChild variant="outline" size="sm">
+          <a href={actionHref}>{actionLabel}</a>
+        </Button>
+      ) : onAction ? (
+        <Button variant="outline" size="sm" onClick={onAction}>{actionLabel}</Button>
+      ) : null)}
+    </div>
+  )
+}
diff --git a/components/ui/page-back-header.tsx b/components/ui/page-back-header.tsx
index 6025152..88f0d50 100644
--- a/components/ui/page-back-header.tsx
+++ b/components/ui/page-back-header.tsx
@@ -15,18 +15,18 @@ export function PageBackHeader({ title, children, className = "" }: PageBackHead
   const router = useRouter()
   return (
     <div className={`flex items-center justify-between gap-4 mb-4 ${className}`}>
-      <div className="flex items-center gap-4 min-w-0">
+      <div className="flex items-center gap-3 min-w-0">
         <Button
           variant="ghost"
           size="icon"
           onClick={() => router.back()}
           aria-label="Back"
-          className="shrink-0"
+          className="shrink-0 hover:bg-green-100/50 dark:hover:bg-green-950/30 text-slate-600 dark:text-slate-300"
         >
           <ArrowLeft className="h-5 w-5" />
         </Button>
         {title && (
-          <h1 className="text-xl font-semibold text-foreground truncate">{title}</h1>
+          <h1 className="text-3xl font-bold bg-gradient-to-r from-slate-900 to-green-600 dark:from-white dark:to-green-400 bg-clip-text text-transparent truncate">{title}</h1>
         )}
       </div>
       {children}