diff --git a/frontend/src/app/dashboard/page.tsx b/frontend/src/app/dashboard/page.tsx
index ab61950..ea4a867 100644
--- a/frontend/src/app/dashboard/page.tsx
+++ b/frontend/src/app/dashboard/page.tsx
@@ -36,6 +36,10 @@ import {
   Globe,
   ArrowUpRight,
   ArrowDownRight,
+  Radio,
+  CircleCheck,
+  CircleX,
+  CircleAlert,
 } from 'lucide-react'
 import clsx from 'clsx'
 import Link from 'next/link'
@@ -370,12 +374,59 @@ export default function DashboardPage() {
   const isProOrHigher = tierName === 'Professional' || tierName === 'Enterprise' || tierName === 'Trader' || tierName === 'Tycoon'
   const isEnterprise = tierName === 'Enterprise' || tierName === 'Tycoon'
 
+  // Get domain status with icon
+  const getDomainStatus = (domain: any) => {
+    const exp = formatExpirationDate(domain.expiration_date)
+    
+    if (domain.is_available) {
+      return { 
+        icon: CircleCheck, 
+        label: 'Available', 
+        color: 'text-emerald-400', 
+        bg: 'bg-emerald-400/10',
+        ring: 'ring-emerald-400/30',
+        pulse: false 
+      }
+    }
+    
+    if (exp?.urgent) {
+      return { 
+        icon: CircleAlert, 
+        label: 'Expiring', 
+        color: 'text-amber-400', 
+        bg: 'bg-amber-400/10',
+        ring: 'ring-amber-400/30',
+        pulse: true 
+      }
+    }
+    
+    if (domain.notify_on_available) {
+      return { 
+        icon: Radio, 
+        label: 'Monitoring', 
+        color: 'text-cyan-400', 
+        bg: 'bg-cyan-400/10',
+        ring: 'ring-cyan-400/30',
+        pulse: true 
+      }
+    }
+    
+    return { 
+      icon: CircleX, 
+      label: 'Registered', 
+      color: 'text-foreground-subtle', 
+      bg: 'bg-foreground/5',
+      ring: 'ring-foreground/10',
+      pulse: false 
+    }
+  }
+
   return (
     <div className="min-h-screen bg-background flex flex-col">
       <Header />
 
-      <main className="flex-1 pt-24 pb-16 px-4 sm:px-6">
-        <div className="max-w-6xl mx-auto">
+      <main className="flex-1 pt-28 sm:pt-32 pb-20 sm:pb-24 px-4 sm:px-6">
+        <div className="max-w-5xl mx-auto">
           {/* Header */}
           <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-8">
             <div>
@@ -409,28 +460,42 @@ export default function DashboardPage() {
           </div>
 
           {/* Tabs */}
-          <div className="flex items-center gap-1 p-1 bg-background-secondary border border-border rounded-xl w-fit mb-8">
+          <div className="flex items-center gap-1 p-1.5 bg-background-secondary/70 backdrop-blur-sm border border-border rounded-2xl w-fit mb-10">
             <button
               onClick={() => setActiveTab('watchlist')}
               className={clsx(
-                "flex items-center gap-2 px-4 py-2 text-ui-sm font-medium rounded-lg transition-all",
-                activeTab === 'watchlist' ? "bg-foreground text-background" : "text-foreground-muted hover:text-foreground"
+                "flex items-center gap-2.5 px-5 py-2.5 text-ui font-medium rounded-xl transition-all duration-200",
+                activeTab === 'watchlist' 
+                  ? "bg-foreground text-background shadow-lg" 
+                  : "text-foreground-muted hover:text-foreground hover:bg-foreground/5"
               )}
             >
               <Eye className="w-4 h-4" />
               Watchlist
-              {domains.length > 0 && <span className="text-ui-xs px-1.5 py-0.5 bg-background/20 rounded">{domains.length}</span>}
+              {domains.length > 0 && (
+                <span className={clsx(
+                  "text-ui-xs px-2 py-0.5 rounded-md",
+                  activeTab === 'watchlist' ? "bg-background/20" : "bg-foreground/10"
+                )}>{domains.length}</span>
+              )}
             </button>
             <button
               onClick={() => setActiveTab('portfolio')}
               className={clsx(
-                "flex items-center gap-2 px-4 py-2 text-ui-sm font-medium rounded-lg transition-all",
-                activeTab === 'portfolio' ? "bg-foreground text-background" : "text-foreground-muted hover:text-foreground"
+                "flex items-center gap-2.5 px-5 py-2.5 text-ui font-medium rounded-xl transition-all duration-200",
+                activeTab === 'portfolio' 
+                  ? "bg-foreground text-background shadow-lg" 
+                  : "text-foreground-muted hover:text-foreground hover:bg-foreground/5"
               )}
             >
               <Briefcase className="w-4 h-4" />
               Portfolio
-              {portfolio.length > 0 && <span className="text-ui-xs px-1.5 py-0.5 bg-background/20 rounded">{portfolio.length}</span>}
+              {portfolio.length > 0 && (
+                <span className={clsx(
+                  "text-ui-xs px-2 py-0.5 rounded-md",
+                  activeTab === 'portfolio' ? "bg-background/20" : "bg-foreground/10"
+                )}>{portfolio.length}</span>
+              )}
             </button>
           </div>
 
@@ -447,21 +512,49 @@ export default function DashboardPage() {
             <div className="space-y-6">
               {/* Stats Row */}
               <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
-                <div className="p-4 bg-background-secondary border border-border rounded-xl">
-                  <p className="text-ui-xs text-foreground-muted uppercase tracking-wider mb-1">Tracked</p>
-                  <p className="text-2xl font-display text-foreground">{domains.length}</p>
+                <div className="p-5 bg-background-secondary/50 border border-border rounded-2xl hover:border-foreground/20 transition-colors">
+                  <div className="flex items-center gap-2 mb-2">
+                    <div className="w-6 h-6 rounded-md bg-foreground/10 flex items-center justify-center">
+                      <Eye className="w-3.5 h-3.5 text-foreground-muted" />
+                    </div>
+                    <p className="text-ui-xs text-foreground-muted uppercase tracking-wider">Tracked</p>
+                  </div>
+                  <p className="text-3xl font-display text-foreground">{domains.length}</p>
                 </div>
-                <div className="p-4 bg-accent/5 border border-accent/20 rounded-xl">
-                  <p className="text-ui-xs text-accent/70 uppercase tracking-wider mb-1">Available</p>
-                  <p className="text-2xl font-display text-accent">{availableCount}</p>
+                <div className="p-5 bg-emerald-500/5 border border-emerald-500/20 rounded-2xl hover:border-emerald-500/40 transition-colors">
+                  <div className="flex items-center gap-2 mb-2">
+                    <div className="w-6 h-6 rounded-md bg-emerald-500/20 flex items-center justify-center">
+                      <CircleCheck className="w-3.5 h-3.5 text-emerald-400" />
+                    </div>
+                    <p className="text-ui-xs text-emerald-400/80 uppercase tracking-wider">Available</p>
+                  </div>
+                  <p className="text-3xl font-display text-emerald-400">{availableCount}</p>
                 </div>
-                <div className="p-4 bg-background-secondary border border-border rounded-xl">
-                  <p className="text-ui-xs text-foreground-muted uppercase tracking-wider mb-1">Registered</p>
-                  <p className="text-2xl font-display text-foreground">{domains.length - availableCount}</p>
+                <div className="p-5 bg-cyan-500/5 border border-cyan-500/20 rounded-2xl hover:border-cyan-500/40 transition-colors">
+                  <div className="flex items-center gap-2 mb-2">
+                    <div className="w-6 h-6 rounded-md bg-cyan-500/20 flex items-center justify-center">
+                      <Radio className="w-3.5 h-3.5 text-cyan-400" />
+                    </div>
+                    <p className="text-ui-xs text-cyan-400/80 uppercase tracking-wider">Monitoring</p>
+                  </div>
+                  <p className="text-3xl font-display text-cyan-400">{domains.filter(d => d.notify_on_available).length}</p>
                 </div>
-                <div className={clsx("p-4 border rounded-xl", expiringCount > 0 ? "bg-warning/5 border-warning/20" : "bg-background-secondary border-border")}>
-                  <p className={clsx("text-ui-xs uppercase tracking-wider mb-1", expiringCount > 0 ? "text-warning/70" : "text-foreground-muted")}>Expiring</p>
-                  <p className={clsx("text-2xl font-display", expiringCount > 0 ? "text-warning" : "text-foreground")}>{expiringCount}</p>
+                <div className={clsx(
+                  "p-5 border rounded-2xl transition-colors",
+                  expiringCount > 0 
+                    ? "bg-amber-500/5 border-amber-500/20 hover:border-amber-500/40" 
+                    : "bg-background-secondary/50 border-border hover:border-foreground/20"
+                )}>
+                  <div className="flex items-center gap-2 mb-2">
+                    <div className={clsx(
+                      "w-6 h-6 rounded-md flex items-center justify-center",
+                      expiringCount > 0 ? "bg-amber-500/20" : "bg-foreground/10"
+                    )}>
+                      <CircleAlert className={clsx("w-3.5 h-3.5", expiringCount > 0 ? "text-amber-400" : "text-foreground-muted")} />
+                    </div>
+                    <p className={clsx("text-ui-xs uppercase tracking-wider", expiringCount > 0 ? "text-amber-400/80" : "text-foreground-muted")}>Expiring</p>
+                  </div>
+                  <p className={clsx("text-3xl font-display", expiringCount > 0 ? "text-amber-400" : "text-foreground")}>{expiringCount}</p>
                 </div>
               </div>
 
@@ -486,73 +579,102 @@ export default function DashboardPage() {
 
               {/* Domain Table */}
               {domains.length === 0 ? (
-                <div className="text-center py-16 border border-dashed border-border rounded-xl">
-                  <Eye className="w-10 h-10 text-foreground-subtle mx-auto mb-4" />
-                  <p className="text-body text-foreground-muted">No domains yet</p>
-                  <p className="text-body-sm text-foreground-subtle">Add your first domain above</p>
+                <div className="text-center py-20 border border-dashed border-border/50 rounded-2xl bg-background-secondary/20">
+                  <div className="w-14 h-14 bg-foreground/5 rounded-2xl flex items-center justify-center mx-auto mb-5">
+                    <Eye className="w-7 h-7 text-foreground-subtle" />
+                  </div>
+                  <p className="text-body-lg text-foreground-muted mb-1">No domains tracked yet</p>
+                  <p className="text-body-sm text-foreground-subtle">Add your first domain above to start monitoring</p>
                 </div>
               ) : (
-                <div className="border border-border rounded-xl overflow-hidden">
+                <div className="border border-border rounded-2xl overflow-hidden bg-background-secondary/30">
                   <table className="w-full">
-                    <thead className="bg-background-secondary">
+                    <thead className="bg-background-secondary/80 backdrop-blur-sm">
                       <tr className="border-b border-border">
-                        <th className="text-left text-ui-xs font-medium text-foreground-muted uppercase tracking-wider px-4 py-3">Domain</th>
-                        <th className="text-left text-ui-xs font-medium text-foreground-muted uppercase tracking-wider px-4 py-3 hidden sm:table-cell">Status</th>
-                        <th className="text-left text-ui-xs font-medium text-foreground-muted uppercase tracking-wider px-4 py-3 hidden lg:table-cell">Expiration</th>
-                        <th className="text-left text-ui-xs font-medium text-foreground-muted uppercase tracking-wider px-4 py-3 hidden md:table-cell">Last Check</th>
-                        <th className="text-right text-ui-xs font-medium text-foreground-muted uppercase tracking-wider px-4 py-3">Actions</th>
+                        <th className="text-left text-ui-xs font-medium text-foreground-muted uppercase tracking-wider px-5 py-4">Domain</th>
+                        <th className="text-left text-ui-xs font-medium text-foreground-muted uppercase tracking-wider px-5 py-4 hidden sm:table-cell">Status</th>
+                        <th className="text-left text-ui-xs font-medium text-foreground-muted uppercase tracking-wider px-5 py-4 hidden lg:table-cell">Expiration</th>
+                        <th className="text-left text-ui-xs font-medium text-foreground-muted uppercase tracking-wider px-5 py-4 hidden md:table-cell">Last Check</th>
+                        <th className="text-right text-ui-xs font-medium text-foreground-muted uppercase tracking-wider px-5 py-4">Actions</th>
                       </tr>
                     </thead>
-                    <tbody className="divide-y divide-border">
+                    <tbody className="divide-y divide-border/50">
                       {domains.map((domain) => {
                         const exp = formatExpirationDate(domain.expiration_date)
+                        const status = getDomainStatus(domain)
+                        const StatusIcon = status.icon
                         return (
-                          <tr key={domain.id} className="group hover:bg-background-secondary/50 transition-colors">
-                            <td className="px-4 py-3">
-                              <div className="flex items-center gap-3">
-                                <div className={clsx("w-2 h-2 rounded-full", domain.is_available ? "bg-accent" : "bg-foreground-subtle")} />
-                                <span className="font-mono text-body-sm text-foreground">{domain.name}</span>
+                          <tr key={domain.id} className="group hover:bg-background-secondary/60 transition-all duration-200">
+                            <td className="px-5 py-4">
+                              <div className="flex items-center gap-3.5">
+                                <div className={clsx(
+                                  "relative w-8 h-8 rounded-lg flex items-center justify-center ring-1",
+                                  status.bg, status.ring
+                                )}>
+                                  <StatusIcon className={clsx("w-4 h-4", status.color)} />
+                                  {status.pulse && (
+                                    <span className={clsx(
+                                      "absolute inset-0 rounded-lg animate-ping opacity-30",
+                                      status.bg
+                                    )} />
+                                  )}
+                                </div>
+                                <div>
+                                  <span className="font-mono text-body-sm font-medium text-foreground">{domain.name}</span>
+                                  <p className={clsx("text-ui-xs mt-0.5 sm:hidden", status.color)}>{status.label}</p>
+                                </div>
                               </div>
                             </td>
-                            <td className="px-4 py-3 hidden sm:table-cell">
-                              <span className={clsx("text-ui-xs px-2 py-1 rounded-full", domain.is_available ? "text-accent bg-accent/10" : "text-foreground-muted bg-foreground/5")}>
-                                {domain.is_available ? 'Available' : 'Registered'}
+                            <td className="px-5 py-4 hidden sm:table-cell">
+                              <span className={clsx(
+                                "inline-flex items-center gap-1.5 text-ui-xs px-2.5 py-1 rounded-full font-medium",
+                                status.bg, status.color
+                              )}>
+                                {status.label}
                               </span>
                             </td>
-                            <td className="px-4 py-3 hidden lg:table-cell">
+                            <td className="px-5 py-4 hidden lg:table-cell">
                               {exp ? (
-                                <span className={clsx("text-body-sm flex items-center gap-1", exp.urgent ? "text-warning" : "text-foreground-subtle")}>
+                                <span className={clsx(
+                                  "text-body-sm flex items-center gap-1.5",
+                                  exp.urgent ? "text-amber-400 font-medium" : "text-foreground-subtle"
+                                )}>
                                   <Calendar className="w-3.5 h-3.5" />{exp.text}
                                 </span>
-                              ) : <span className="text-foreground-subtle">—</span>}
+                              ) : <span className="text-foreground-subtle/50">—</span>}
                             </td>
-                            <td className="px-4 py-3 hidden md:table-cell">
-                              <span className="text-body-sm text-foreground-subtle flex items-center gap-1">
+                            <td className="px-5 py-4 hidden md:table-cell">
+                              <span className="text-body-sm text-foreground-subtle flex items-center gap-1.5">
                                 <Clock className="w-3.5 h-3.5" />{formatDate(domain.last_checked)}
                               </span>
                             </td>
-                            <td className="px-4 py-3">
-                              <div className="flex items-center justify-end gap-1 opacity-60 group-hover:opacity-100 transition-opacity">
+                            <td className="px-5 py-4">
+                              <div className="flex items-center justify-end gap-0.5 opacity-50 group-hover:opacity-100 transition-opacity">
                                 {isProOrHigher && (
-                                  <button onClick={() => loadDomainHistory(domain.id)} className="p-2 text-foreground-subtle hover:text-foreground hover:bg-foreground/5 rounded-lg transition-all" title="History">
+                                  <button onClick={() => loadDomainHistory(domain.id)} className="p-2 text-foreground-subtle hover:text-foreground hover:bg-foreground/10 rounded-lg transition-all" title="History">
                                     <History className="w-4 h-4" />
                                   </button>
                                 )}
-                                <button onClick={() => handleGetValuation(domain.name)} className="p-2 text-foreground-subtle hover:text-foreground hover:bg-foreground/5 rounded-lg transition-all" title="Valuation">
+                                <button onClick={() => handleGetValuation(domain.name)} className="p-2 text-foreground-subtle hover:text-foreground hover:bg-foreground/10 rounded-lg transition-all" title="Valuation">
                                   <Sparkles className="w-4 h-4" />
                                 </button>
                                 <button
                                   onClick={() => handleToggleNotify(domain.id, domain.notify_on_available)}
                                   disabled={togglingNotifyId === domain.id}
-                                  className={clsx("p-2 rounded-lg transition-all", domain.notify_on_available ? "text-accent hover:bg-accent/10" : "text-foreground-subtle hover:text-foreground hover:bg-foreground/5")}
-                                  title={domain.notify_on_available ? "Alerts on" : "Alerts off"}
+                                  className={clsx(
+                                    "p-2 rounded-lg transition-all",
+                                    domain.notify_on_available 
+                                      ? "text-cyan-400 hover:bg-cyan-400/10" 
+                                      : "text-foreground-subtle hover:text-foreground hover:bg-foreground/10"
+                                  )}
+                                  title={domain.notify_on_available ? "Monitoring active" : "Enable monitoring"}
                                 >
                                   {togglingNotifyId === domain.id ? <Loader2 className="w-4 h-4 animate-spin" /> : domain.notify_on_available ? <Bell className="w-4 h-4" /> : <BellOff className="w-4 h-4" />}
                                 </button>
-                                <button onClick={() => handleRefresh(domain.id)} disabled={refreshingId === domain.id} className="p-2 text-foreground-subtle hover:text-foreground hover:bg-foreground/5 rounded-lg transition-all" title="Refresh">
+                                <button onClick={() => handleRefresh(domain.id)} disabled={refreshingId === domain.id} className="p-2 text-foreground-subtle hover:text-foreground hover:bg-foreground/10 rounded-lg transition-all" title="Refresh">
                                   <RefreshCw className={clsx("w-4 h-4", refreshingId === domain.id && "animate-spin")} />
                                 </button>
-                                <button onClick={() => handleDelete(domain.id)} className="p-2 text-foreground-subtle hover:text-danger hover:bg-danger/10 rounded-lg transition-all" title="Remove">
+                                <button onClick={() => handleDelete(domain.id)} className="p-2 text-foreground-subtle hover:text-rose-400 hover:bg-rose-400/10 rounded-lg transition-all" title="Remove">
                                   <Trash2 className="w-4 h-4" />
                                 </button>
                               </div>
@@ -573,42 +695,82 @@ export default function DashboardPage() {
               {/* Portfolio Stats */}
               {portfolioSummary && (
                 <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
-                  <div className="p-4 bg-background-secondary border border-border rounded-xl">
-                    <p className="text-ui-xs text-foreground-muted uppercase tracking-wider mb-1">Total Value</p>
-                    <p className="text-2xl font-display text-foreground">{formatCurrency(portfolioSummary.total_value)}</p>
+                  <div className="p-5 bg-background-secondary/50 border border-border rounded-2xl hover:border-foreground/20 transition-colors">
+                    <div className="flex items-center gap-2 mb-2">
+                      <div className="w-6 h-6 rounded-md bg-foreground/10 flex items-center justify-center">
+                        <DollarSign className="w-3.5 h-3.5 text-foreground-muted" />
+                      </div>
+                      <p className="text-ui-xs text-foreground-muted uppercase tracking-wider">Total Value</p>
+                    </div>
+                    <p className="text-2xl sm:text-3xl font-display text-foreground">{formatCurrency(portfolioSummary.total_value)}</p>
                   </div>
-                  <div className="p-4 bg-background-secondary border border-border rounded-xl">
-                    <p className="text-ui-xs text-foreground-muted uppercase tracking-wider mb-1">Invested</p>
-                    <p className="text-2xl font-display text-foreground">{formatCurrency(portfolioSummary.total_invested)}</p>
+                  <div className="p-5 bg-violet-500/5 border border-violet-500/20 rounded-2xl hover:border-violet-500/40 transition-colors">
+                    <div className="flex items-center gap-2 mb-2">
+                      <div className="w-6 h-6 rounded-md bg-violet-500/20 flex items-center justify-center">
+                        <Tag className="w-3.5 h-3.5 text-violet-400" />
+                      </div>
+                      <p className="text-ui-xs text-violet-400/80 uppercase tracking-wider">Invested</p>
+                    </div>
+                    <p className="text-2xl sm:text-3xl font-display text-violet-400">{formatCurrency(portfolioSummary.total_invested)}</p>
                   </div>
-                  <div className={clsx("p-4 border rounded-xl", portfolioSummary.unrealized_profit >= 0 ? "bg-accent/5 border-accent/20" : "bg-danger/5 border-danger/20")}>
-                    <p className={clsx("text-ui-xs uppercase tracking-wider mb-1", portfolioSummary.unrealized_profit >= 0 ? "text-accent/70" : "text-danger/70")}>P/L</p>
-                    <p className={clsx("text-2xl font-display flex items-center gap-1", portfolioSummary.unrealized_profit >= 0 ? "text-accent" : "text-danger")}>
-                      {portfolioSummary.unrealized_profit >= 0 ? <ArrowUpRight className="w-5 h-5" /> : <ArrowDownRight className="w-5 h-5" />}
-                      {formatCurrency(Math.abs(portfolioSummary.unrealized_profit))}
+                  <div className={clsx(
+                    "p-5 border rounded-2xl transition-colors",
+                    portfolioSummary.unrealized_profit >= 0 
+                      ? "bg-emerald-500/5 border-emerald-500/20 hover:border-emerald-500/40" 
+                      : "bg-rose-500/5 border-rose-500/20 hover:border-rose-500/40"
+                  )}>
+                    <div className="flex items-center gap-2 mb-2">
+                      <div className={clsx(
+                        "w-6 h-6 rounded-md flex items-center justify-center",
+                        portfolioSummary.unrealized_profit >= 0 ? "bg-emerald-500/20" : "bg-rose-500/20"
+                      )}>
+                        {portfolioSummary.unrealized_profit >= 0 
+                          ? <ArrowUpRight className="w-3.5 h-3.5 text-emerald-400" /> 
+                          : <ArrowDownRight className="w-3.5 h-3.5 text-rose-400" />
+                        }
+                      </div>
+                      <p className={clsx("text-ui-xs uppercase tracking-wider", portfolioSummary.unrealized_profit >= 0 ? "text-emerald-400/80" : "text-rose-400/80")}>P/L</p>
+                    </div>
+                    <p className={clsx("text-2xl sm:text-3xl font-display", portfolioSummary.unrealized_profit >= 0 ? "text-emerald-400" : "text-rose-400")}>
+                      {portfolioSummary.unrealized_profit >= 0 ? '+' : ''}{formatCurrency(portfolioSummary.unrealized_profit)}
                     </p>
                   </div>
-                  <div className={clsx("p-4 border rounded-xl", portfolioSummary.overall_roi >= 0 ? "bg-accent/5 border-accent/20" : "bg-danger/5 border-danger/20")}>
-                    <p className={clsx("text-ui-xs uppercase tracking-wider mb-1", portfolioSummary.overall_roi >= 0 ? "text-accent/70" : "text-danger/70")}>ROI</p>
-                    <p className={clsx("text-2xl font-display", portfolioSummary.overall_roi >= 0 ? "text-accent" : "text-danger")}>
+                  <div className={clsx(
+                    "p-5 border rounded-2xl transition-colors",
+                    portfolioSummary.overall_roi >= 0 
+                      ? "bg-emerald-500/5 border-emerald-500/20 hover:border-emerald-500/40" 
+                      : "bg-rose-500/5 border-rose-500/20 hover:border-rose-500/40"
+                  )}>
+                    <div className="flex items-center gap-2 mb-2">
+                      <div className={clsx(
+                        "w-6 h-6 rounded-md flex items-center justify-center",
+                        portfolioSummary.overall_roi >= 0 ? "bg-emerald-500/20" : "bg-rose-500/20"
+                      )}>
+                        <BarChart3 className={clsx("w-3.5 h-3.5", portfolioSummary.overall_roi >= 0 ? "text-emerald-400" : "text-rose-400")} />
+                      </div>
+                      <p className={clsx("text-ui-xs uppercase tracking-wider", portfolioSummary.overall_roi >= 0 ? "text-emerald-400/80" : "text-rose-400/80")}>ROI</p>
+                    </div>
+                    <p className={clsx("text-2xl sm:text-3xl font-display", portfolioSummary.overall_roi >= 0 ? "text-emerald-400" : "text-rose-400")}>
                       {portfolioSummary.overall_roi >= 0 ? '+' : ''}{portfolioSummary.overall_roi.toFixed(1)}%
                     </p>
                   </div>
                 </div>
               )}
 
-              <button onClick={() => setShowAddPortfolioModal(true)} className="flex items-center gap-2 px-5 py-3 bg-foreground text-background text-ui-sm font-medium rounded-xl hover:bg-foreground/90 transition-all">
+              <button onClick={() => setShowAddPortfolioModal(true)} className="flex items-center gap-2.5 px-6 py-3.5 bg-foreground text-background text-ui font-medium rounded-xl hover:bg-foreground/90 transition-all shadow-lg shadow-foreground/10">
                 <Plus className="w-4 h-4" />
-                Add Domain
+                Add Domain to Portfolio
               </button>
 
               {loadingPortfolio ? (
-                <div className="flex justify-center py-16"><Loader2 className="w-6 h-6 animate-spin text-accent" /></div>
+                <div className="flex justify-center py-20"><Loader2 className="w-7 h-7 animate-spin text-accent" /></div>
               ) : portfolio.length === 0 ? (
-                <div className="text-center py-16 border border-dashed border-border rounded-xl">
-                  <Briefcase className="w-10 h-10 text-foreground-subtle mx-auto mb-4" />
-                  <p className="text-body text-foreground-muted">Portfolio is empty</p>
-                  <p className="text-body-sm text-foreground-subtle">Add domains you own to track their value</p>
+                <div className="text-center py-20 border border-dashed border-border/50 rounded-2xl bg-background-secondary/20">
+                  <div className="w-14 h-14 bg-foreground/5 rounded-2xl flex items-center justify-center mx-auto mb-5">
+                    <Briefcase className="w-7 h-7 text-foreground-subtle" />
+                  </div>
+                  <p className="text-body-lg text-foreground-muted mb-1">Your portfolio is empty</p>
+                  <p className="text-body-sm text-foreground-subtle">Add domains you own to track their value and ROI</p>
                 </div>
               ) : (
                 <div className="space-y-3">
@@ -655,18 +817,19 @@ export default function DashboardPage() {
           )}
 
           {/* Quick Links */}
-          <div className="mt-10 p-5 bg-background-secondary/50 border border-border rounded-xl flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+          <div className="mt-12 p-6 bg-gradient-to-r from-accent/5 via-cyan-500/5 to-violet-500/5 border border-accent/20 rounded-2xl flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
             <div className="flex items-center gap-4">
-              <div className="w-10 h-10 bg-accent/10 rounded-lg flex items-center justify-center">
-                <TrendingUp className="w-5 h-5 text-accent" />
+              <div className="w-12 h-12 bg-accent/10 rounded-xl flex items-center justify-center ring-1 ring-accent/20">
+                <TrendingUp className="w-6 h-6 text-accent" />
               </div>
               <div>
-                <p className="text-body-sm font-medium text-foreground">TLD Price Intelligence</p>
-                <p className="text-body-xs text-foreground-muted">Track 886+ domain extensions</p>
+                <p className="text-body font-medium text-foreground">TLD Price Intelligence</p>
+                <p className="text-body-sm text-foreground-muted">Track 886+ domain extensions in real-time</p>
               </div>
             </div>
-            <Link href="/tld-pricing" className="text-ui-sm text-accent hover:text-accent-hover transition-colors flex items-center gap-1">
-              Explore <ChevronRight className="w-4 h-4" />
+            <Link href="/tld-pricing" className="text-ui font-medium text-accent hover:text-accent-hover transition-colors flex items-center gap-1.5 group">
+              Explore Prices
+              <ChevronRight className="w-4 h-4 group-hover:translate-x-0.5 transition-transform" />
             </Link>
           </div>
         </div>