diff --git a/frontend/src/app/dashboard/page.tsx b/frontend/src/app/dashboard/page.tsx
index 94d540d..ab61950 100644
--- a/frontend/src/app/dashboard/page.tsx
+++ b/frontend/src/app/dashboard/page.tsx
@@ -24,7 +24,6 @@ import {
   Zap,
   Crown,
   TrendingUp,
-  TrendingDown,
   Briefcase,
   Eye,
   DollarSign,
@@ -34,13 +33,9 @@ import {
   Sparkles,
   BarChart3,
   CreditCard,
-  Target,
-  Crosshair,
-  Shield,
-  Activity,
+  Globe,
   ArrowUpRight,
   ArrowDownRight,
-  Globe,
 } from 'lucide-react'
 import clsx from 'clsx'
 import Link from 'next/link'
@@ -67,10 +62,7 @@ export default function DashboardPage() {
     refreshDomain,
   } = useStore()
 
-  // Tab state
   const [activeTab, setActiveTab] = useState<TabType>('watchlist')
-
-  // Watchlist state
   const [newDomain, setNewDomain] = useState('')
   const [adding, setAdding] = useState(false)
   const [refreshingId, setRefreshingId] = useState<number | null>(null)
@@ -78,8 +70,6 @@ export default function DashboardPage() {
   const [selectedDomainId, setSelectedDomainId] = useState<number | null>(null)
   const [domainHistory, setDomainHistory] = useState<DomainHistory[] | null>(null)
   const [loadingHistory, setLoadingHistory] = useState(false)
-
-  // Portfolio state
   const [portfolio, setPortfolio] = useState<PortfolioDomain[]>([])
   const [portfolioSummary, setPortfolioSummary] = useState<PortfolioSummary | null>(null)
   const [loadingPortfolio, setLoadingPortfolio] = useState(false)
@@ -88,8 +78,6 @@ export default function DashboardPage() {
   const [valuationResult, setValuationResult] = useState<DomainValuation | null>(null)
   const [valuatingDomain, setValuatingDomain] = useState<string>('')
   const [refreshingPortfolioId, setRefreshingPortfolioId] = useState<number | null>(null)
-
-  // Portfolio form state
   const [portfolioForm, setPortfolioForm] = useState({
     domain: '',
     purchase_price: '',
@@ -100,8 +88,6 @@ export default function DashboardPage() {
     notes: '',
   })
   const [addingPortfolio, setAddingPortfolio] = useState(false)
-
-  // Edit Portfolio Modal state
   const [showEditPortfolioModal, setShowEditPortfolioModal] = useState(false)
   const [editingPortfolioDomain, setEditingPortfolioDomain] = useState<PortfolioDomain | null>(null)
   const [editPortfolioForm, setEditPortfolioForm] = useState({
@@ -113,8 +99,6 @@ export default function DashboardPage() {
     notes: '',
   })
   const [savingEdit, setSavingEdit] = useState(false)
-
-  // Sell Domain Modal state
   const [showSellModal, setShowSellModal] = useState(false)
   const [sellingDomain, setSellingDomain] = useState<PortfolioDomain | null>(null)
   const [sellForm, setSellForm] = useState({
@@ -122,8 +106,6 @@ export default function DashboardPage() {
     sale_price: '',
   })
   const [processingSale, setProcessingSale] = useState(false)
-
-  // Notification toggle state
   const [togglingNotifyId, setTogglingNotifyId] = useState<number | null>(null)
 
   useEffect(() => {
@@ -142,7 +124,6 @@ export default function DashboardPage() {
     }
   }, [isAuthenticated, activeTab])
 
-  // Open Stripe billing portal
   const handleOpenBillingPortal = async () => {
     try {
       const { portal_url } = await api.createPortalSession()
@@ -171,10 +152,8 @@ export default function DashboardPage() {
   const handleAddDomain = async (e: React.FormEvent) => {
     e.preventDefault()
     if (!newDomain.trim()) return
-
     setAdding(true)
     setError(null)
-
     try {
       await addDomain(newDomain)
       setNewDomain('')
@@ -204,7 +183,6 @@ export default function DashboardPage() {
       setError('Check history requires Trader or Tycoon plan')
       return
     }
-    
     setSelectedDomainId(domainId)
     setLoadingHistory(true)
     try {
@@ -220,7 +198,6 @@ export default function DashboardPage() {
   const handleAddPortfolioDomain = async (e: React.FormEvent) => {
     e.preventDefault()
     if (!portfolioForm.domain.trim()) return
-
     setAddingPortfolio(true)
     try {
       await api.addPortfolioDomain({
@@ -232,15 +209,7 @@ export default function DashboardPage() {
         renewal_cost: portfolioForm.renewal_cost ? parseFloat(portfolioForm.renewal_cost) : undefined,
         notes: portfolioForm.notes || undefined,
       })
-      setPortfolioForm({
-        domain: '',
-        purchase_price: '',
-        purchase_date: '',
-        registrar: '',
-        renewal_date: '',
-        renewal_cost: '',
-        notes: '',
-      })
+      setPortfolioForm({ domain: '', purchase_price: '', purchase_date: '', registrar: '', renewal_date: '', renewal_cost: '', notes: '' })
       setShowAddPortfolioModal(false)
       loadPortfolio()
     } catch (err) {
@@ -286,12 +255,10 @@ export default function DashboardPage() {
     }
   }
 
-  // Toggle domain notification
   const handleToggleNotify = async (domainId: number, currentNotify: boolean) => {
     setTogglingNotifyId(domainId)
     try {
       await api.updateDomainNotify(domainId, !currentNotify)
-      // Refresh domains list
       const { fetchDomains } = useStore.getState()
       await fetchDomains()
     } catch (err) {
@@ -301,7 +268,6 @@ export default function DashboardPage() {
     }
   }
 
-  // Open Edit Portfolio Modal
   const handleOpenEditPortfolio = (domain: PortfolioDomain) => {
     setEditingPortfolioDomain(domain)
     setEditPortfolioForm({
@@ -315,11 +281,9 @@ export default function DashboardPage() {
     setShowEditPortfolioModal(true)
   }
 
-  // Save Edit Portfolio
   const handleSaveEditPortfolio = async (e: React.FormEvent) => {
     e.preventDefault()
     if (!editingPortfolioDomain) return
-
     setSavingEdit(true)
     try {
       await api.updatePortfolioDomain(editingPortfolioDomain.id, {
@@ -340,21 +304,15 @@ export default function DashboardPage() {
     }
   }
 
-  // Open Sell Modal
   const handleOpenSellModal = (domain: PortfolioDomain) => {
     setSellingDomain(domain)
-    setSellForm({
-      sale_date: new Date().toISOString().split('T')[0],
-      sale_price: '',
-    })
+    setSellForm({ sale_date: new Date().toISOString().split('T')[0], sale_price: '' })
     setShowSellModal(true)
   }
 
-  // Process Sale
   const handleSellDomain = async (e: React.FormEvent) => {
     e.preventDefault()
     if (!sellingDomain || !sellForm.sale_price) return
-
     setProcessingSale(true)
     try {
       await api.markDomainSold(sellingDomain.id, sellForm.sale_date, parseFloat(sellForm.sale_price))
@@ -369,14 +327,9 @@ export default function DashboardPage() {
   }
 
   const formatDate = (dateStr: string | null) => {
-    if (!dateStr) return 'Not checked yet'
+    if (!dateStr) return 'Not checked'
     const date = new Date(dateStr)
-    return date.toLocaleDateString('en-US', {
-      month: 'short',
-      day: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit',
-    })
+    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })
   }
 
   const formatExpirationDate = (dateStr: string | null) => {
@@ -384,7 +337,6 @@ export default function DashboardPage() {
     const date = new Date(dateStr)
     const now = new Date()
     const daysUntil = Math.ceil((date.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))
-    
     if (daysUntil < 0) return { text: 'Expired', urgent: true }
     if (daysUntil <= 7) return { text: `${daysUntil}d`, urgent: true }
     if (daysUntil <= 30) return { text: `${daysUntil}d`, urgent: false }
@@ -393,35 +345,21 @@ export default function DashboardPage() {
 
   const formatCurrency = (value: number | null) => {
     if (value === null) return '—'
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD',
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 0,
-    }).format(value)
+    return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(value)
   }
 
   if (isLoading) {
     return (
       <div className="min-h-screen flex items-center justify-center bg-background">
-        <div className="flex flex-col items-center gap-4">
-          <div className="w-8 h-8 border-2 border-accent border-t-transparent rounded-full animate-spin" />
-          <p className="text-body-sm text-foreground-muted">Loading your command center...</p>
-        </div>
+        <Loader2 className="w-6 h-6 animate-spin text-accent" />
       </div>
     )
   }
 
-  if (!isAuthenticated) {
-    return null
-  }
-
-  const canAddMore = subscription
-    ? subscription.domains_used < subscription.domain_limit
-    : true
+  if (!isAuthenticated) return null
 
+  const canAddMore = subscription ? subscription.domains_used < subscription.domain_limit : true
   const availableCount = domains.filter(d => d.is_available).length
-  const takenCount = domains.filter(d => !d.is_available).length
   const expiringCount = domains.filter(d => {
     if (!d.expiration_date) return false
     const daysUntil = Math.ceil((new Date(d.expiration_date).getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24))
@@ -433,342 +371,197 @@ export default function DashboardPage() {
   const isEnterprise = tierName === 'Enterprise' || tierName === 'Tycoon'
 
   return (
-    <div className="min-h-screen bg-background relative flex flex-col">
-      {/* Background elements */}
-      <div className="fixed inset-0 pointer-events-none overflow-hidden">
-        <div className="absolute top-0 left-1/3 w-[600px] h-[400px] bg-accent/[0.015] rounded-full blur-[100px]" />
-        <div className="absolute bottom-1/4 right-1/4 w-[400px] h-[300px] bg-accent/[0.01] rounded-full blur-[80px]" />
-      </div>
-      
+    <div className="min-h-screen bg-background flex flex-col">
       <Header />
 
-      <main className="relative pt-24 sm:pt-28 pb-16 px-4 sm:px-6 flex-1">
-        <div className="max-w-7xl mx-auto">
-          {/* Hero Section */}
-          <div className="mb-12 animate-fade-in">
-            <div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6">
-              <div>
-                <div className="flex items-center gap-3 mb-3">
-                  <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-accent/20 to-accent/5 border border-accent/20 flex items-center justify-center">
-                    <Crosshair className="w-5 h-5 text-accent" />
-                  </div>
-                  <span className={clsx(
-                    "flex items-center gap-1.5 text-ui-sm px-3 py-1 rounded-full border",
-                    isEnterprise 
-                      ? "bg-accent/10 border-accent/30 text-accent" 
-                      : isProOrHigher 
-                        ? "bg-foreground/5 border-foreground/20 text-foreground-muted"
-                        : "bg-background-secondary border-border text-foreground-subtle"
-                  )}>
-                    {isEnterprise && <Crown className="w-3.5 h-3.5" />}
-                    {tierName}
-                  </span>
-                </div>
-                <h1 className="font-display text-[2.5rem] sm:text-[3rem] lg:text-[3.5rem] leading-[1] tracking-[-0.04em] text-foreground mb-2">
-                  Command Center
-                </h1>
-                <p className="text-body text-foreground-muted max-w-md">
-                  Your domains. Your intel. Your edge.
-                </p>
-              </div>
-
-              <div className="flex items-center gap-3">
-                {isProOrHigher ? (
-                  <button
-                    onClick={handleOpenBillingPortal}
-                    className="flex items-center gap-2 px-4 py-2.5 text-ui-sm text-foreground-muted hover:text-foreground bg-background-secondary/50 border border-border rounded-xl hover:border-border-hover transition-all"
-                  >
-                    <CreditCard className="w-4 h-4" />
-                    Billing
-                  </button>
-                ) : (
-                  <Link
-                    href="/pricing"
-                    className="flex items-center gap-2 px-4 py-2.5 text-ui-sm font-medium text-background bg-accent rounded-xl hover:bg-accent-hover transition-all"
-                  >
-                    <Zap className="w-4 h-4" />
-                    Upgrade
-                  </Link>
-                )}
-              </div>
+      <main className="flex-1 pt-24 pb-16 px-4 sm:px-6">
+        <div className="max-w-6xl mx-auto">
+          {/* Header */}
+          <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-8">
+            <div>
+              <h1 className="font-display text-3xl sm:text-4xl tracking-tight text-foreground">
+                Command Center
+              </h1>
+              <p className="text-body-sm text-foreground-muted mt-1">
+                Your domains. Your intel. Your edge.
+              </p>
+            </div>
+            <div className="flex items-center gap-3">
+              <span className={clsx(
+                "flex items-center gap-1.5 text-ui-sm px-3 py-1.5 rounded-lg border",
+                isEnterprise ? "bg-accent/10 border-accent/20 text-accent" : "bg-background-secondary border-border text-foreground-muted"
+              )}>
+                {isEnterprise && <Crown className="w-3.5 h-3.5" />}
+                {tierName}
+              </span>
+              {isProOrHigher ? (
+                <button onClick={handleOpenBillingPortal} className="flex items-center gap-2 px-3 py-1.5 text-ui-sm text-foreground-muted hover:text-foreground border border-border rounded-lg hover:border-border-hover transition-all">
+                  <CreditCard className="w-4 h-4" />
+                  Billing
+                </button>
+              ) : (
+                <Link href="/pricing" className="flex items-center gap-2 px-3 py-1.5 text-ui-sm font-medium text-background bg-accent rounded-lg hover:bg-accent-hover transition-all">
+                  <Zap className="w-4 h-4" />
+                  Upgrade
+                </Link>
+              )}
             </div>
           </div>
 
-          {/* Tab Navigation */}
-          <div className="mb-8 animate-fade-in" style={{ animationDelay: '100ms' }}>
-            <div className="inline-flex items-center p-1 bg-background-secondary/50 backdrop-blur-sm border border-border rounded-2xl">
-              <button
-                onClick={() => setActiveTab('watchlist')}
-                className={clsx(
-                  "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"
-                )}
-              >
-                <Target className="w-4 h-4" />
-                Watchlist
-                {domains.length > 0 && (
-                  <span className={clsx(
-                    "text-ui-xs px-2 py-0.5 rounded-full",
-                    activeTab === 'watchlist' ? "bg-background/20" : "bg-foreground/10"
-                  )}>{domains.length}</span>
-                )}
-              </button>
-              <button
-                onClick={() => setActiveTab('portfolio')}
-                className={clsx(
-                  "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"
-                )}
-              >
-                <Briefcase className="w-4 h-4" />
-                Portfolio
-                {portfolio.length > 0 && (
-                  <span className={clsx(
-                    "text-ui-xs px-2 py-0.5 rounded-full",
-                    activeTab === 'portfolio' ? "bg-background/20" : "bg-foreground/10"
-                  )}>{portfolio.length}</span>
-                )}
-              </button>
-            </div>
+          {/* Tabs */}
+          <div className="flex items-center gap-1 p-1 bg-background-secondary border border-border rounded-xl w-fit mb-8">
+            <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"
+              )}
+            >
+              <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>}
+            </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"
+              )}
+            >
+              <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>}
+            </button>
           </div>
 
           {error && (
-            <div className="mb-6 p-4 bg-danger/10 border border-danger/20 rounded-xl flex items-center gap-3 animate-fade-in">
+            <div className="mb-6 p-4 bg-danger/10 border border-danger/20 rounded-xl flex items-center gap-3">
               <AlertCircle className="w-5 h-5 text-danger shrink-0" />
               <p className="text-body-sm text-danger flex-1">{error}</p>
-              <button onClick={() => setError(null)} className="p-1 text-danger hover:text-danger/80 rounded">
-                <X className="w-4 h-4" />
-              </button>
+              <button onClick={() => setError(null)} className="text-danger hover:text-danger/80"><X className="w-4 h-4" /></button>
             </div>
           )}
 
           {/* Watchlist Tab */}
           {activeTab === 'watchlist' && (
-            <div className="space-y-8 animate-fade-in" style={{ animationDelay: '150ms' }}>
-              {/* Stats Grid */}
-              <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-                <div className="group p-5 bg-gradient-to-br from-background-secondary/80 to-background-secondary/40 border border-border rounded-2xl hover:border-border-hover transition-all">
-                  <div className="flex items-center justify-between mb-3">
-                    <div className="w-9 h-9 rounded-xl bg-foreground/5 flex items-center justify-center">
-                      <Target className="w-4.5 h-4.5 text-foreground-muted" />
-                    </div>
-                    <span className="text-ui-xs text-foreground-subtle">Total</span>
-                  </div>
-                  <p className="text-[2rem] font-display tracking-tight text-foreground leading-none">{domains.length}</p>
-                  <p className="text-body-sm text-foreground-muted mt-1">targets tracked</p>
+            <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>
-                
-                <div className="group p-5 bg-gradient-to-br from-accent/10 to-accent/5 border border-accent/20 rounded-2xl hover:border-accent/30 transition-all">
-                  <div className="flex items-center justify-between mb-3">
-                    <div className="w-9 h-9 rounded-xl bg-accent/10 flex items-center justify-center">
-                      <Check className="w-4.5 h-4.5 text-accent" />
-                    </div>
-                    <span className="text-ui-xs text-accent/70">Hunt Ready</span>
-                  </div>
-                  <p className="text-[2rem] font-display tracking-tight text-accent leading-none">{availableCount}</p>
-                  <p className="text-body-sm text-accent/70 mt-1">available now</p>
+                <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>
-                
-                <div className="group p-5 bg-gradient-to-br from-background-secondary/80 to-background-secondary/40 border border-border rounded-2xl hover:border-border-hover transition-all">
-                  <div className="flex items-center justify-between mb-3">
-                    <div className="w-9 h-9 rounded-xl bg-foreground/5 flex items-center justify-center">
-                      <Shield className="w-4.5 h-4.5 text-foreground-muted" />
-                    </div>
-                    <span className="text-ui-xs text-foreground-subtle">Claimed</span>
-                  </div>
-                  <p className="text-[2rem] font-display tracking-tight text-foreground leading-none">{takenCount}</p>
-                  <p className="text-body-sm text-foreground-muted mt-1">registered</p>
+                <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>
-                
-                <div className={clsx(
-                  "group p-5 border rounded-2xl transition-all",
-                  expiringCount > 0 
-                    ? "bg-gradient-to-br from-warning/10 to-warning/5 border-warning/20 hover:border-warning/30"
-                    : "bg-gradient-to-br from-background-secondary/80 to-background-secondary/40 border-border hover:border-border-hover"
-                )}>
-                  <div className="flex items-center justify-between mb-3">
-                    <div className={clsx(
-                      "w-9 h-9 rounded-xl flex items-center justify-center",
-                      expiringCount > 0 ? "bg-warning/10" : "bg-foreground/5"
-                    )}>
-                      <Calendar className={clsx("w-4.5 h-4.5", expiringCount > 0 ? "text-warning" : "text-foreground-muted")} />
-                    </div>
-                    <span className={clsx("text-ui-xs", expiringCount > 0 ? "text-warning/70" : "text-foreground-subtle")}>Expiring</span>
-                  </div>
-                  <p className={clsx(
-                    "text-[2rem] font-display tracking-tight leading-none",
-                    expiringCount > 0 ? "text-warning" : "text-foreground"
-                  )}>{expiringCount}</p>
-                  <p className={clsx("text-body-sm mt-1", expiringCount > 0 ? "text-warning/70" : "text-foreground-muted")}>
-                    in 30 days
-                  </p>
+                <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>
               </div>
 
-              {/* Add Domain Form */}
-              <form onSubmit={handleAddDomain}>
-                <div className="flex gap-3">
-                  <div className="flex-1 relative group">
-                    <div className="absolute left-4 top-1/2 -translate-y-1/2">
-                      <Search className="w-5 h-5 text-foreground-subtle group-focus-within:text-accent transition-colors" />
-                    </div>
-                    <input
-                      type="text"
-                      value={newDomain}
-                      onChange={(e) => setNewDomain(e.target.value)}
-                      placeholder="Add domain to hunt (e.g., dream.io)"
-                      disabled={!canAddMore}
-                      className="w-full pl-12 pr-4 py-4 bg-background-secondary/50 border border-border rounded-2xl
-                                 text-body text-foreground placeholder:text-foreground-subtle
-                                 focus:outline-none focus:border-accent/50 focus:ring-2 focus:ring-accent/10
-                                 disabled:opacity-50 disabled:cursor-not-allowed
-                                 transition-all"
-                    />
-                  </div>
-                  <button
-                    type="submit"
-                    disabled={adding || !newDomain.trim() || !canAddMore}
-                    className="px-6 py-4 bg-foreground text-background text-ui font-medium rounded-2xl
-                               hover:bg-foreground/90 disabled:opacity-40 disabled:cursor-not-allowed
-                               transition-all flex items-center gap-2 shadow-lg shadow-foreground/10"
-                  >
-                    {adding ? <Loader2 className="w-4 h-4 animate-spin" /> : <Plus className="w-4 h-4" />}
-                    <span className="hidden sm:inline">Add Target</span>
-                  </button>
+              {/* Add Domain */}
+              <form onSubmit={handleAddDomain} className="flex gap-3">
+                <div className="flex-1 relative">
+                  <Plus className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-foreground-subtle" />
+                  <input
+                    type="text"
+                    value={newDomain}
+                    onChange={(e) => setNewDomain(e.target.value)}
+                    placeholder="Add domain to watchlist..."
+                    disabled={!canAddMore}
+                    className="w-full pl-12 pr-4 py-3 bg-background-secondary border border-border rounded-xl text-body text-foreground placeholder:text-foreground-subtle focus:outline-none focus:border-accent/50 disabled:opacity-50 transition-all"
+                  />
                 </div>
-                {!canAddMore && (
-                  <p className="mt-2 text-body-sm text-warning flex items-center gap-2">
-                    <AlertCircle className="w-4 h-4" />
-                    Watchlist limit reached. <Link href="/pricing" className="underline hover:no-underline">Upgrade</Link> for more.
-                  </p>
-                )}
+                <button type="submit" disabled={adding || !newDomain.trim() || !canAddMore} className="px-5 py-3 bg-foreground text-background text-ui-sm font-medium rounded-xl hover:bg-foreground/90 disabled:opacity-40 transition-all flex items-center gap-2">
+                  {adding ? <Loader2 className="w-4 h-4 animate-spin" /> : <Plus className="w-4 h-4" />}
+                  Add
+                </button>
               </form>
 
-              {/* Domain List */}
+              {/* Domain Table */}
               {domains.length === 0 ? (
-                <div className="text-center py-20 border border-dashed border-border rounded-2xl bg-background-secondary/20">
-                  <div className="w-16 h-16 bg-gradient-to-br from-foreground/10 to-foreground/5 rounded-2xl flex items-center justify-center mx-auto mb-5">
-                    <Target className="w-8 h-8 text-foreground-subtle" />
-                  </div>
-                  <h3 className="text-body-lg font-medium text-foreground mb-2">No targets yet</h3>
-                  <p className="text-body-sm text-foreground-muted max-w-sm mx-auto">
-                    Add your first domain above to start tracking availability
-                  </p>
+                <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>
               ) : (
-                <div className="space-y-3">
-                  {domains.map((domain, index) => {
-                    const expiration = formatExpirationDate(domain.expiration_date)
-                    return (
-                      <div 
-                        key={domain.id} 
-                        className="group p-4 sm:p-5 bg-background-secondary/30 border border-border rounded-2xl hover:border-border-hover hover:bg-background-secondary/50 transition-all"
-                        style={{ animationDelay: `${index * 50}ms` }}
-                      >
-                        <div className="flex items-center justify-between gap-4">
-                          <div className="flex items-center gap-4 min-w-0 flex-1">
-                            {/* Status indicator */}
-                            <div className={clsx(
-                              "w-3 h-3 rounded-full ring-4 shrink-0",
-                              domain.is_available 
-                                ? "bg-accent ring-accent/20" 
-                                : "bg-foreground-subtle ring-foreground-subtle/10"
-                            )} />
-                            
-                            {/* Domain info */}
-                            <div className="min-w-0 flex-1">
-                              <div className="flex items-center gap-3 flex-wrap">
-                                <span className="font-mono text-body font-medium text-foreground truncate">
-                                  {domain.name}
+                <div className="border border-border rounded-xl overflow-hidden">
+                  <table className="w-full">
+                    <thead className="bg-background-secondary">
+                      <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>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-border">
+                      {domains.map((domain) => {
+                        const exp = formatExpirationDate(domain.expiration_date)
+                        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>
+                              </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'}
+                              </span>
+                            </td>
+                            <td className="px-4 py-3 hidden lg:table-cell">
+                              {exp ? (
+                                <span className={clsx("text-body-sm flex items-center gap-1", exp.urgent ? "text-warning" : "text-foreground-subtle")}>
+                                  <Calendar className="w-3.5 h-3.5" />{exp.text}
                                 </span>
-                                <span className={clsx(
-                                  "text-ui-xs px-2.5 py-1 rounded-full shrink-0",
-                                  domain.is_available 
-                                    ? "text-accent bg-accent/10" 
-                                    : "text-foreground-muted bg-foreground/5"
-                                )}>
-                                  {domain.is_available ? 'Available' : 'Registered'}
-                                </span>
-                                {expiration && (
-                                  <span className={clsx(
-                                    "text-ui-xs px-2.5 py-1 rounded-full flex items-center gap-1 shrink-0",
-                                    expiration.urgent 
-                                      ? "text-warning bg-warning/10"
-                                      : "text-foreground-subtle bg-foreground/5"
-                                  )}>
-                                    <Calendar className="w-3 h-3" />
-                                    {expiration.text}
-                                  </span>
+                              ) : <span className="text-foreground-subtle">—</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">
+                                <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">
+                                {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">
+                                    <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">
+                                  <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"}
+                                >
+                                  {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">
+                                  <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">
+                                  <Trash2 className="w-4 h-4" />
+                                </button>
                               </div>
-                              <div className="flex items-center gap-2 mt-1.5 text-body-sm text-foreground-subtle">
-                                <Clock className="w-3.5 h-3.5" />
-                                {formatDate(domain.last_checked)}
-                              </div>
-                            </div>
-                          </div>
-
-                          {/* Actions */}
-                          <div className="flex items-center gap-1 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity">
-                            {isProOrHigher && (
-                              <button
-                                onClick={() => loadDomainHistory(domain.id)}
-                                className="p-2.5 text-foreground-subtle hover:text-foreground hover:bg-foreground/5 rounded-xl transition-all"
-                                title="View history"
-                              >
-                                <History className="w-4 h-4" />
-                              </button>
-                            )}
-                            <button
-                              onClick={() => handleGetValuation(domain.name)}
-                              className="p-2.5 text-foreground-subtle hover:text-foreground hover:bg-foreground/5 rounded-xl transition-all"
-                              title="Get 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.5 rounded-xl transition-all",
-                                domain.notify_on_available 
-                                  ? "text-accent hover:text-accent-hover hover:bg-accent/10" 
-                                  : "text-foreground-subtle hover:text-foreground hover:bg-foreground/5"
-                              )}
-                              title={domain.notify_on_available ? "Alerts on" : "Alerts off"}
-                            >
-                              {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.5 text-foreground-subtle hover:text-foreground hover:bg-foreground/5 rounded-xl 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.5 text-foreground-subtle hover:text-danger hover:bg-danger/10 rounded-xl transition-all"
-                              title="Remove"
-                            >
-                              <Trash2 className="w-4 h-4" />
-                            </button>
-                          </div>
-                        </div>
-                      </div>
-                    )
-                  })}
+                            </td>
+                          </tr>
+                        )
+                      })}
+                    </tbody>
+                  </table>
                 </div>
               )}
             </div>
@@ -776,230 +569,83 @@ export default function DashboardPage() {
 
           {/* Portfolio Tab */}
           {activeTab === 'portfolio' && (
-            <div className="space-y-8 animate-fade-in" style={{ animationDelay: '150ms' }}>
-              {/* Portfolio Summary */}
+            <div className="space-y-6">
+              {/* Portfolio Stats */}
               {portfolioSummary && (
-                <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-                  <div className="p-5 bg-gradient-to-br from-background-secondary/80 to-background-secondary/40 border border-border rounded-2xl">
-                    <div className="flex items-center justify-between mb-3">
-                      <div className="w-9 h-9 rounded-xl bg-foreground/5 flex items-center justify-center">
-                        <DollarSign className="w-4.5 h-4.5 text-foreground-muted" />
-                      </div>
-                    </div>
-                    <p className="text-[1.75rem] font-display tracking-tight text-foreground leading-none">
-                      {formatCurrency(portfolioSummary.total_value)}
-                    </p>
-                    <p className="text-body-sm text-foreground-muted mt-1">total value</p>
+                <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>
-                  
-                  <div className="p-5 bg-gradient-to-br from-background-secondary/80 to-background-secondary/40 border border-border rounded-2xl">
-                    <div className="flex items-center justify-between mb-3">
-                      <div className="w-9 h-9 rounded-xl bg-foreground/5 flex items-center justify-center">
-                        <Tag className="w-4.5 h-4.5 text-foreground-muted" />
-                      </div>
-                    </div>
-                    <p className="text-[1.75rem] font-display tracking-tight text-foreground leading-none">
-                      {formatCurrency(portfolioSummary.total_invested)}
-                    </p>
-                    <p className="text-body-sm text-foreground-muted mt-1">invested</p>
+                  <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>
-                  
-                  <div className={clsx(
-                    "p-5 border rounded-2xl",
-                    portfolioSummary.unrealized_profit >= 0 
-                      ? "bg-gradient-to-br from-accent/10 to-accent/5 border-accent/20"
-                      : "bg-gradient-to-br from-danger/10 to-danger/5 border-danger/20"
-                  )}>
-                    <div className="flex items-center justify-between mb-3">
-                      <div className={clsx(
-                        "w-9 h-9 rounded-xl flex items-center justify-center",
-                        portfolioSummary.unrealized_profit >= 0 ? "bg-accent/10" : "bg-danger/10"
-                      )}>
-                        {portfolioSummary.unrealized_profit >= 0 ? (
-                          <ArrowUpRight className="w-4.5 h-4.5 text-accent" />
-                        ) : (
-                          <ArrowDownRight className="w-4.5 h-4.5 text-danger" />
-                        )}
-                      </div>
-                    </div>
-                    <p className={clsx(
-                      "text-[1.75rem] font-display tracking-tight leading-none",
-                      portfolioSummary.unrealized_profit >= 0 ? "text-accent" : "text-danger"
-                    )}>
-                      {portfolioSummary.unrealized_profit >= 0 ? '+' : ''}{formatCurrency(portfolioSummary.unrealized_profit)}
+                  <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))}
                     </p>
-                    <p className={clsx(
-                      "text-body-sm mt-1",
-                      portfolioSummary.unrealized_profit >= 0 ? "text-accent/70" : "text-danger/70"
-                    )}>unrealized P/L</p>
                   </div>
-                  
-                  <div className={clsx(
-                    "p-5 border rounded-2xl",
-                    portfolioSummary.overall_roi >= 0 
-                      ? "bg-gradient-to-br from-accent/10 to-accent/5 border-accent/20"
-                      : "bg-gradient-to-br from-danger/10 to-danger/5 border-danger/20"
-                  )}>
-                    <div className="flex items-center justify-between mb-3">
-                      <div className={clsx(
-                        "w-9 h-9 rounded-xl flex items-center justify-center",
-                        portfolioSummary.overall_roi >= 0 ? "bg-accent/10" : "bg-danger/10"
-                      )}>
-                        <BarChart3 className={clsx(
-                          "w-4.5 h-4.5",
-                          portfolioSummary.overall_roi >= 0 ? "text-accent" : "text-danger"
-                        )} />
-                      </div>
-                    </div>
-                    <p className={clsx(
-                      "text-[1.75rem] font-display tracking-tight leading-none",
-                      portfolioSummary.overall_roi >= 0 ? "text-accent" : "text-danger"
-                    )}>
+                  <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")}>
                       {portfolioSummary.overall_roi >= 0 ? '+' : ''}{portfolioSummary.overall_roi.toFixed(1)}%
                     </p>
-                    <p className={clsx(
-                      "text-body-sm mt-1",
-                      portfolioSummary.overall_roi >= 0 ? "text-accent/70" : "text-danger/70"
-                    )}>overall ROI</p>
                   </div>
                 </div>
               )}
 
-              {/* Add Domain Button */}
-              <div>
-                <button
-                  onClick={() => setShowAddPortfolioModal(true)}
-                  className="flex items-center gap-2 px-5 py-3.5 bg-foreground text-background text-ui font-medium rounded-2xl
-                             hover:bg-foreground/90 transition-all shadow-lg shadow-foreground/10"
-                >
-                  <Plus className="w-4 h-4" />
-                  Add Domain to Portfolio
-                </button>
-              </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">
+                <Plus className="w-4 h-4" />
+                Add Domain
+              </button>
 
-              {/* Portfolio List */}
               {loadingPortfolio ? (
-                <div className="flex flex-col items-center justify-center py-20 gap-4">
-                  <Loader2 className="w-8 h-8 animate-spin text-accent" />
-                  <p className="text-body-sm text-foreground-muted">Loading portfolio...</p>
-                </div>
+                <div className="flex justify-center py-16"><Loader2 className="w-6 h-6 animate-spin text-accent" /></div>
               ) : portfolio.length === 0 ? (
-                <div className="text-center py-20 border border-dashed border-border rounded-2xl bg-background-secondary/20">
-                  <div className="w-16 h-16 bg-gradient-to-br from-foreground/10 to-foreground/5 rounded-2xl flex items-center justify-center mx-auto mb-5">
-                    <Briefcase className="w-8 h-8 text-foreground-subtle" />
-                  </div>
-                  <h3 className="text-body-lg font-medium text-foreground mb-2">Your portfolio is empty</h3>
-                  <p className="text-body-sm text-foreground-muted max-w-sm mx-auto">
-                    Add domains you own to track their value and ROI
-                  </p>
+                <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>
               ) : (
                 <div className="space-y-3">
-                  {portfolio.map((domain, index) => {
+                  {portfolio.map((domain) => {
                     const roi = domain.roi
                     const renewal = formatExpirationDate(domain.renewal_date)
                     return (
-                      <div
-                        key={domain.id}
-                        className="group p-5 bg-background-secondary/30 border border-border rounded-2xl hover:border-border-hover hover:bg-background-secondary/50 transition-all"
-                        style={{ animationDelay: `${index * 50}ms` }}
-                      >
+                      <div key={domain.id} className="group p-4 bg-background-secondary border border-border rounded-xl hover:border-border-hover transition-all">
                         <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
-                          <div className="flex-1 min-w-0">
-                            <div className="flex items-center gap-3 flex-wrap mb-2">
-                              <h3 className="font-mono text-body-lg font-medium text-foreground">
-                                {domain.domain}
-                              </h3>
-                              {domain.status === 'sold' && (
-                                <span className="text-ui-xs px-2.5 py-1 bg-accent/10 text-accent rounded-full">Sold</span>
-                              )}
+                          <div className="flex-1">
+                            <div className="flex items-center gap-2 mb-1">
+                              <h3 className="font-mono text-body font-medium text-foreground">{domain.domain}</h3>
+                              {domain.status === 'sold' && <span className="text-ui-xs px-2 py-0.5 bg-accent/10 text-accent rounded-full">Sold</span>}
                             </div>
-                            <div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-body-sm text-foreground-muted">
-                              {domain.purchase_price && (
-                                <span className="flex items-center gap-1.5">
-                                  <Tag className="w-3.5 h-3.5" />
-                                  {formatCurrency(domain.purchase_price)}
-                                </span>
-                              )}
-                              {domain.estimated_value && (
-                                <span className="flex items-center gap-1.5">
-                                  <Sparkles className="w-3.5 h-3.5" />
-                                  {formatCurrency(domain.estimated_value)}
-                                </span>
-                              )}
-                              {renewal && (
-                                <span className={clsx(
-                                  "flex items-center gap-1.5",
-                                  renewal.urgent && "text-warning"
-                                )}>
-                                  <Calendar className="w-3.5 h-3.5" />
-                                  {renewal.text}
-                                </span>
-                              )}
-                              {domain.registrar && (
-                                <span className="flex items-center gap-1.5">
-                                  <Globe className="w-3.5 h-3.5" />
-                                  {domain.registrar}
-                                </span>
-                              )}
+                            <div className="flex flex-wrap items-center gap-3 text-body-sm text-foreground-muted">
+                              {domain.purchase_price && <span className="flex items-center gap-1"><Tag className="w-3.5 h-3.5" />{formatCurrency(domain.purchase_price)}</span>}
+                              {domain.estimated_value && <span className="flex items-center gap-1"><Sparkles className="w-3.5 h-3.5" />{formatCurrency(domain.estimated_value)}</span>}
+                              {renewal && <span className={clsx("flex items-center gap-1", renewal.urgent && "text-warning")}><Calendar className="w-3.5 h-3.5" />{renewal.text}</span>}
+                              {domain.registrar && <span className="flex items-center gap-1"><Globe className="w-3.5 h-3.5" />{domain.registrar}</span>}
                             </div>
                           </div>
-                          
                           <div className="flex items-center gap-3">
                             {roi !== null && (
-                              <div className={clsx(
-                                "text-right px-4 py-2 rounded-xl",
-                                roi >= 0 ? "bg-accent/10" : "bg-danger/10"
-                              )}>
+                              <div className={clsx("text-right px-3 py-1 rounded-lg", roi >= 0 ? "bg-accent/10" : "bg-danger/10")}>
                                 <p className="text-ui-xs text-foreground-muted">ROI</p>
-                                <p className={clsx(
-                                  "text-body-lg font-medium",
-                                  roi >= 0 ? "text-accent" : "text-danger"
-                                )}>
-                                  {roi >= 0 ? '+' : ''}{roi.toFixed(1)}%
-                                </p>
+                                <p className={clsx("text-body font-medium", roi >= 0 ? "text-accent" : "text-danger")}>{roi >= 0 ? '+' : ''}{roi.toFixed(1)}%</p>
                               </div>
                             )}
-                            <div className="flex items-center gap-1 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity">
-                              {domain.status !== 'sold' && (
-                                <button
-                                  onClick={() => handleOpenSellModal(domain)}
-                                  className="p-2.5 text-foreground-subtle hover:text-accent hover:bg-accent/10 rounded-xl transition-all"
-                                  title="Mark as sold"
-                                >
-                                  <DollarSign className="w-4 h-4" />
-                                </button>
-                              )}
-                              <button
-                                onClick={() => handleOpenEditPortfolio(domain)}
-                                className="p-2.5 text-foreground-subtle hover:text-foreground hover:bg-foreground/5 rounded-xl transition-all"
-                                title="Edit"
-                              >
-                                <Edit2 className="w-4 h-4" />
-                              </button>
-                              <button
-                                onClick={() => handleRefreshPortfolioValue(domain.id)}
-                                disabled={refreshingPortfolioId === domain.id}
-                                className="p-2.5 text-foreground-subtle hover:text-foreground hover:bg-foreground/5 rounded-xl transition-all"
-                                title="Refresh value"
-                              >
-                                <RefreshCw className={clsx("w-4 h-4", refreshingPortfolioId === domain.id && "animate-spin")} />
-                              </button>
-                              <button
-                                onClick={() => handleDeletePortfolioDomain(domain.id)}
-                                className="p-2.5 text-foreground-subtle hover:text-danger hover:bg-danger/10 rounded-xl transition-all"
-                                title="Remove"
-                              >
-                                <Trash2 className="w-4 h-4" />
-                              </button>
+                            <div className="flex items-center gap-1 opacity-60 group-hover:opacity-100 transition-opacity">
+                              {domain.status !== 'sold' && <button onClick={() => handleOpenSellModal(domain)} className="p-2 text-foreground-subtle hover:text-accent hover:bg-accent/10 rounded-lg transition-all" title="Sell"><DollarSign className="w-4 h-4" /></button>}
+                              <button onClick={() => handleOpenEditPortfolio(domain)} className="p-2 text-foreground-subtle hover:text-foreground hover:bg-foreground/5 rounded-lg transition-all" title="Edit"><Edit2 className="w-4 h-4" /></button>
+                              <button onClick={() => handleRefreshPortfolioValue(domain.id)} disabled={refreshingPortfolioId === domain.id} className="p-2 text-foreground-subtle hover:text-foreground hover:bg-foreground/5 rounded-lg transition-all" title="Refresh"><RefreshCw className={clsx("w-4 h-4", refreshingPortfolioId === domain.id && "animate-spin")} /></button>
+                              <button onClick={() => handleDeletePortfolioDomain(domain.id)} className="p-2 text-foreground-subtle hover:text-danger hover:bg-danger/10 rounded-lg transition-all" title="Remove"><Trash2 className="w-4 h-4" /></button>
                             </div>
                           </div>
                         </div>
-                        {domain.notes && (
-                          <p className="mt-4 pt-4 border-t border-border text-body-sm text-foreground-subtle">
-                            {domain.notes}
-                          </p>
-                        )}
+                        {domain.notes && <p className="mt-3 pt-3 border-t border-border text-body-sm text-foreground-subtle">{domain.notes}</p>}
                       </div>
                     )
                   })}
@@ -1009,170 +655,70 @@ export default function DashboardPage() {
           )}
 
           {/* Quick Links */}
-          <div className="mt-12 grid sm:grid-cols-2 gap-4 animate-fade-in" style={{ animationDelay: '200ms' }}>
-            <Link
-              href="/tld-pricing"
-              className="group p-5 bg-background-secondary/30 border border-border rounded-2xl hover:border-accent/30 hover:bg-accent/5 transition-all"
-            >
-              <div className="flex items-center justify-between">
-                <div className="flex items-center gap-4">
-                  <div className="w-11 h-11 rounded-xl bg-accent/10 flex items-center justify-center group-hover:bg-accent/20 transition-colors">
-                    <TrendingUp className="w-5 h-5 text-accent" />
-                  </div>
-                  <div>
-                    <p className="text-body font-medium text-foreground">TLD Price Intelligence</p>
-                    <p className="text-body-sm text-foreground-muted">Track 886+ domain extensions</p>
-                  </div>
-                </div>
-                <ChevronRight className="w-5 h-5 text-foreground-subtle group-hover:text-accent group-hover:translate-x-1 transition-all" />
+          <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="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>
-            </Link>
-            
-            <Link
-              href="/auctions"
-              className="group p-5 bg-background-secondary/30 border border-border rounded-2xl hover:border-accent/30 hover:bg-accent/5 transition-all"
-            >
-              <div className="flex items-center justify-between">
-                <div className="flex items-center gap-4">
-                  <div className="w-11 h-11 rounded-xl bg-accent/10 flex items-center justify-center group-hover:bg-accent/20 transition-colors">
-                    <Activity className="w-5 h-5 text-accent" />
-                  </div>
-                  <div>
-                    <p className="text-body font-medium text-foreground">Smart Pounce Auctions</p>
-                    <p className="text-body-sm text-foreground-muted">Find undervalued domains</p>
-                  </div>
-                </div>
-                <ChevronRight className="w-5 h-5 text-foreground-subtle group-hover:text-accent group-hover:translate-x-1 transition-all" />
+              <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>
               </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>
           </div>
         </div>
       </main>
 
       {/* Modals */}
-      {/* Add Portfolio Domain Modal */}
       {showAddPortfolioModal && (
-        <div className="fixed inset-0 bg-background/90 backdrop-blur-md z-50 flex items-center justify-center p-4">
-          <div className="bg-background-secondary border border-border rounded-3xl max-w-lg w-full max-h-[90vh] overflow-auto shadow-2xl">
-            <div className="p-6 sm:p-8">
-              <div className="flex items-center justify-between mb-8">
-                <h3 className="text-heading-sm font-display text-foreground">Add to Portfolio</h3>
-                <button
-                  onClick={() => setShowAddPortfolioModal(false)}
-                  className="p-2 text-foreground-subtle hover:text-foreground hover:bg-foreground/5 rounded-xl transition-all"
-                >
-                  <X className="w-5 h-5" />
-                </button>
+        <div className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+          <div className="bg-background-secondary border border-border rounded-2xl max-w-lg w-full max-h-[90vh] overflow-auto">
+            <div className="p-6">
+              <div className="flex items-center justify-between mb-6">
+                <h3 className="text-body-lg font-medium text-foreground">Add to Portfolio</h3>
+                <button onClick={() => setShowAddPortfolioModal(false)} className="p-2 text-foreground-subtle hover:text-foreground hover:bg-foreground/5 rounded-lg"><X className="w-5 h-5" /></button>
               </div>
-
-              <form onSubmit={handleAddPortfolioDomain} className="space-y-5">
+              <form onSubmit={handleAddPortfolioDomain} className="space-y-4">
                 <div>
                   <label className="block text-ui-sm text-foreground-muted mb-2">Domain *</label>
-                  <input
-                    type="text"
-                    value={portfolioForm.domain}
-                    onChange={(e) => setPortfolioForm({ ...portfolioForm, domain: e.target.value })}
-                    placeholder="example.com"
-                    required
-                    className="w-full px-4 py-3.5 bg-background border border-border rounded-xl text-body text-foreground
-                               placeholder:text-foreground-subtle focus:outline-none focus:border-accent/50 focus:ring-2 focus:ring-accent/10 transition-all"
-                  />
+                  <input type="text" value={portfolioForm.domain} onChange={(e) => setPortfolioForm({ ...portfolioForm, domain: e.target.value })} placeholder="example.com" required className="w-full px-4 py-3 bg-background border border-border rounded-xl text-body text-foreground placeholder:text-foreground-subtle focus:outline-none focus:border-accent/50 transition-all" />
                 </div>
-
                 <div className="grid grid-cols-2 gap-4">
                   <div>
                     <label className="block text-ui-sm text-foreground-muted mb-2">Purchase Price</label>
-                    <input
-                      type="number"
-                      step="0.01"
-                      min="0"
-                      value={portfolioForm.purchase_price}
-                      onChange={(e) => setPortfolioForm({ ...portfolioForm, purchase_price: e.target.value })}
-                      placeholder="0.00"
-                      className="w-full px-4 py-3.5 bg-background border border-border rounded-xl text-body text-foreground
-                                 placeholder:text-foreground-subtle focus:outline-none focus:border-accent/50 focus:ring-2 focus:ring-accent/10 transition-all"
-                    />
+                    <input type="number" step="0.01" min="0" value={portfolioForm.purchase_price} onChange={(e) => setPortfolioForm({ ...portfolioForm, purchase_price: e.target.value })} placeholder="0.00" className="w-full px-4 py-3 bg-background border border-border rounded-xl text-body text-foreground placeholder:text-foreground-subtle focus:outline-none focus:border-accent/50 transition-all" />
                   </div>
                   <div>
                     <label className="block text-ui-sm text-foreground-muted mb-2">Purchase Date</label>
-                    <input
-                      type="date"
-                      value={portfolioForm.purchase_date}
-                      onChange={(e) => setPortfolioForm({ ...portfolioForm, purchase_date: e.target.value })}
-                      className="w-full px-4 py-3.5 bg-background border border-border rounded-xl text-body text-foreground
-                                 focus:outline-none focus:border-accent/50 focus:ring-2 focus:ring-accent/10 transition-all"
-                    />
+                    <input type="date" value={portfolioForm.purchase_date} onChange={(e) => setPortfolioForm({ ...portfolioForm, purchase_date: e.target.value })} className="w-full px-4 py-3 bg-background border border-border rounded-xl text-body text-foreground focus:outline-none focus:border-accent/50 transition-all" />
                   </div>
                 </div>
-
                 <div>
                   <label className="block text-ui-sm text-foreground-muted mb-2">Registrar</label>
-                  <input
-                    type="text"
-                    value={portfolioForm.registrar}
-                    onChange={(e) => setPortfolioForm({ ...portfolioForm, registrar: e.target.value })}
-                    placeholder="e.g., Porkbun"
-                    className="w-full px-4 py-3.5 bg-background border border-border rounded-xl text-body text-foreground
-                               placeholder:text-foreground-subtle focus:outline-none focus:border-accent/50 focus:ring-2 focus:ring-accent/10 transition-all"
-                  />
+                  <input type="text" value={portfolioForm.registrar} onChange={(e) => setPortfolioForm({ ...portfolioForm, registrar: e.target.value })} placeholder="e.g., Porkbun" className="w-full px-4 py-3 bg-background border border-border rounded-xl text-body text-foreground placeholder:text-foreground-subtle focus:outline-none focus:border-accent/50 transition-all" />
                 </div>
-
                 <div className="grid grid-cols-2 gap-4">
                   <div>
                     <label className="block text-ui-sm text-foreground-muted mb-2">Renewal Date</label>
-                    <input
-                      type="date"
-                      value={portfolioForm.renewal_date}
-                      onChange={(e) => setPortfolioForm({ ...portfolioForm, renewal_date: e.target.value })}
-                      className="w-full px-4 py-3.5 bg-background border border-border rounded-xl text-body text-foreground
-                                 focus:outline-none focus:border-accent/50 focus:ring-2 focus:ring-accent/10 transition-all"
-                    />
+                    <input type="date" value={portfolioForm.renewal_date} onChange={(e) => setPortfolioForm({ ...portfolioForm, renewal_date: e.target.value })} className="w-full px-4 py-3 bg-background border border-border rounded-xl text-body text-foreground focus:outline-none focus:border-accent/50 transition-all" />
                   </div>
                   <div>
                     <label className="block text-ui-sm text-foreground-muted mb-2">Renewal Cost</label>
-                    <input
-                      type="number"
-                      step="0.01"
-                      min="0"
-                      value={portfolioForm.renewal_cost}
-                      onChange={(e) => setPortfolioForm({ ...portfolioForm, renewal_cost: e.target.value })}
-                      placeholder="0.00"
-                      className="w-full px-4 py-3.5 bg-background border border-border rounded-xl text-body text-foreground
-                                 placeholder:text-foreground-subtle focus:outline-none focus:border-accent/50 focus:ring-2 focus:ring-accent/10 transition-all"
-                    />
+                    <input type="number" step="0.01" min="0" value={portfolioForm.renewal_cost} onChange={(e) => setPortfolioForm({ ...portfolioForm, renewal_cost: e.target.value })} placeholder="0.00" className="w-full px-4 py-3 bg-background border border-border rounded-xl text-body text-foreground placeholder:text-foreground-subtle focus:outline-none focus:border-accent/50 transition-all" />
                   </div>
                 </div>
-
                 <div>
                   <label className="block text-ui-sm text-foreground-muted mb-2">Notes</label>
-                  <textarea
-                    value={portfolioForm.notes}
-                    onChange={(e) => setPortfolioForm({ ...portfolioForm, notes: e.target.value })}
-                    placeholder="Add notes..."
-                    rows={3}
-                    className="w-full px-4 py-3.5 bg-background border border-border rounded-xl text-body text-foreground
-                               placeholder:text-foreground-subtle focus:outline-none focus:border-accent/50 focus:ring-2 focus:ring-accent/10 transition-all resize-none"
-                  />
+                  <textarea value={portfolioForm.notes} onChange={(e) => setPortfolioForm({ ...portfolioForm, notes: e.target.value })} placeholder="Add notes..." rows={3} className="w-full px-4 py-3 bg-background border border-border rounded-xl text-body text-foreground placeholder:text-foreground-subtle focus:outline-none focus:border-accent/50 transition-all resize-none" />
                 </div>
-
-                <div className="flex gap-3 pt-3">
-                  <button
-                    type="button"
-                    onClick={() => setShowAddPortfolioModal(false)}
-                    className="flex-1 py-3.5 bg-foreground/5 text-foreground text-ui font-medium rounded-xl
-                               hover:bg-foreground/10 transition-all"
-                  >
-                    Cancel
-                  </button>
-                  <button
-                    type="submit"
-                    disabled={addingPortfolio || !portfolioForm.domain.trim()}
-                    className="flex-1 py-3.5 bg-foreground text-background text-ui font-medium rounded-xl
-                               hover:bg-foreground/90 disabled:opacity-40 disabled:cursor-not-allowed transition-all
-                               flex items-center justify-center gap-2"
-                  >
+                <div className="flex gap-3 pt-2">
+                  <button type="button" onClick={() => setShowAddPortfolioModal(false)} className="flex-1 py-3 bg-foreground/5 text-foreground text-ui-sm font-medium rounded-xl hover:bg-foreground/10 transition-all">Cancel</button>
+                  <button type="submit" disabled={addingPortfolio || !portfolioForm.domain.trim()} className="flex-1 py-3 bg-foreground text-background text-ui-sm font-medium rounded-xl hover:bg-foreground/90 disabled:opacity-40 transition-all flex items-center justify-center gap-2">
                     {addingPortfolio ? <Loader2 className="w-4 h-4 animate-spin" /> : <Plus className="w-4 h-4" />}
-                    Add Domain
+                    Add
                   </button>
                 </div>
               </form>
@@ -1181,78 +727,45 @@ export default function DashboardPage() {
         </div>
       )}
 
-      {/* Valuation Modal */}
       {showValuationModal && (
-        <div className="fixed inset-0 bg-background/90 backdrop-blur-md z-50 flex items-center justify-center p-4">
-          <div className="bg-background-secondary border border-border rounded-3xl max-w-md w-full shadow-2xl">
-            <div className="p-6 sm:p-8">
+        <div className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+          <div className="bg-background-secondary border border-border rounded-2xl max-w-md w-full">
+            <div className="p-6">
               <div className="flex items-center justify-between mb-6">
-                <h3 className="text-heading-sm font-display text-foreground">Domain Valuation</h3>
-                <button
-                  onClick={() => {
-                    setShowValuationModal(false)
-                    setValuationResult(null)
-                  }}
-                  className="p-2 text-foreground-subtle hover:text-foreground hover:bg-foreground/5 rounded-xl transition-all"
-                >
-                  <X className="w-5 h-5" />
-                </button>
+                <h3 className="text-body-lg font-medium text-foreground">Domain Valuation</h3>
+                <button onClick={() => { setShowValuationModal(false); setValuationResult(null) }} className="p-2 text-foreground-subtle hover:text-foreground hover:bg-foreground/5 rounded-lg"><X className="w-5 h-5" /></button>
               </div>
-
               {valuatingDomain ? (
-                <div className="py-16 flex flex-col items-center justify-center gap-4">
-                  <div className="w-12 h-12 rounded-2xl bg-accent/10 flex items-center justify-center">
-                    <Loader2 className="w-6 h-6 animate-spin text-accent" />
-                  </div>
+                <div className="py-12 flex flex-col items-center gap-4">
+                  <Loader2 className="w-8 h-8 animate-spin text-accent" />
                   <p className="text-body-sm text-foreground-muted">Analyzing {valuatingDomain}...</p>
                 </div>
               ) : valuationResult ? (
                 <div className="space-y-6">
-                  <div className="text-center p-8 bg-gradient-to-br from-accent/10 to-accent/5 border border-accent/20 rounded-2xl">
-                    <p className="font-mono text-body-lg text-foreground mb-3">{valuationResult.domain}</p>
-                    <p className="text-[3rem] font-display text-accent leading-none tracking-tight">
-                      {formatCurrency(valuationResult.estimated_value)}
-                    </p>
-                    <p className="text-ui-sm text-foreground-muted mt-3 capitalize">
-                      {valuationResult.confidence} confidence
-                    </p>
+                  <div className="text-center p-6 bg-accent/5 border border-accent/20 rounded-xl">
+                    <p className="font-mono text-body-lg text-foreground mb-2">{valuationResult.domain}</p>
+                    <p className="text-4xl font-display text-accent">{formatCurrency(valuationResult.estimated_value)}</p>
+                    <p className="text-ui-sm text-foreground-muted mt-2 capitalize">{valuationResult.confidence} confidence</p>
                   </div>
-
                   <div className="grid grid-cols-2 gap-3">
-                    {Object.entries(valuationResult.scores).map(([key, value]) => (
-                      key !== 'overall' && (
-                        <div key={key} className="p-4 bg-foreground/5 rounded-xl">
-                          <p className="text-ui-xs text-foreground-muted capitalize mb-2">{key}</p>
-                          <div className="flex items-center gap-3">
-                            <div className="flex-1 h-2 bg-background rounded-full overflow-hidden">
-                              <div 
-                                className="h-full bg-accent rounded-full transition-all duration-500"
-                                style={{ width: `${value}%` }}
-                              />
-                            </div>
-                            <span className="text-ui-sm text-foreground font-medium w-8 text-right">{value}</span>
+                    {Object.entries(valuationResult.scores).map(([key, value]) => key !== 'overall' && (
+                      <div key={key} className="p-3 bg-foreground/5 rounded-lg">
+                        <p className="text-ui-xs text-foreground-muted capitalize mb-1">{key}</p>
+                        <div className="flex items-center gap-2">
+                          <div className="flex-1 h-1.5 bg-background rounded-full overflow-hidden">
+                            <div className="h-full bg-accent rounded-full" style={{ width: `${value}%` }} />
                           </div>
+                          <span className="text-ui-sm text-foreground font-medium">{value}</span>
                         </div>
-                      )
+                      </div>
                     ))}
                   </div>
-
                   <div className="flex flex-wrap gap-2">
-                    {valuationResult.factors.has_numbers && (
-                      <span className="text-ui-xs px-3 py-1.5 bg-warning/10 text-warning rounded-full">Has numbers</span>
-                    )}
-                    {valuationResult.factors.has_hyphens && (
-                      <span className="text-ui-xs px-3 py-1.5 bg-warning/10 text-warning rounded-full">Has hyphens</span>
-                    )}
-                    {valuationResult.factors.is_dictionary_word && (
-                      <span className="text-ui-xs px-3 py-1.5 bg-accent/10 text-accent rounded-full">Dictionary word</span>
-                    )}
-                    <span className="text-ui-xs px-3 py-1.5 bg-foreground/5 text-foreground-muted rounded-full">
-                      {valuationResult.factors.length} chars
-                    </span>
-                    <span className="text-ui-xs px-3 py-1.5 bg-foreground/5 text-foreground-muted rounded-full">
-                      .{valuationResult.factors.tld}
-                    </span>
+                    {valuationResult.factors.has_numbers && <span className="text-ui-xs px-2 py-1 bg-warning/10 text-warning rounded-full">Has numbers</span>}
+                    {valuationResult.factors.has_hyphens && <span className="text-ui-xs px-2 py-1 bg-warning/10 text-warning rounded-full">Has hyphens</span>}
+                    {valuationResult.factors.is_dictionary_word && <span className="text-ui-xs px-2 py-1 bg-accent/10 text-accent rounded-full">Dictionary word</span>}
+                    <span className="text-ui-xs px-2 py-1 bg-foreground/5 text-foreground-muted rounded-full">{valuationResult.factors.length} chars</span>
+                    <span className="text-ui-xs px-2 py-1 bg-foreground/5 text-foreground-muted rounded-full">.{valuationResult.factors.tld}</span>
                   </div>
                 </div>
               ) : null}
@@ -1261,58 +774,30 @@ export default function DashboardPage() {
         </div>
       )}
 
-      {/* Domain History Modal */}
       {selectedDomainId && domainHistory && (
-        <div className="fixed inset-0 bg-background/90 backdrop-blur-md z-50 flex items-center justify-center p-4">
-          <div className="bg-background-secondary border border-border rounded-3xl max-w-md w-full max-h-[80vh] overflow-auto shadow-2xl">
-            <div className="p-6 sm:p-8">
+        <div className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+          <div className="bg-background-secondary border border-border rounded-2xl max-w-md w-full max-h-[80vh] overflow-auto">
+            <div className="p-6">
               <div className="flex items-center justify-between mb-6">
                 <div>
-                  <h3 className="text-heading-sm font-display text-foreground">Check History</h3>
-                  <p className="text-body-sm text-foreground-muted font-mono mt-1">
-                    {domains.find(d => d.id === selectedDomainId)?.name}
-                  </p>
+                  <h3 className="text-body-lg font-medium text-foreground">Check History</h3>
+                  <p className="text-body-sm text-foreground-muted font-mono">{domains.find(d => d.id === selectedDomainId)?.name}</p>
                 </div>
-                <button
-                  onClick={() => {
-                    setSelectedDomainId(null)
-                    setDomainHistory(null)
-                  }}
-                  className="p-2 text-foreground-subtle hover:text-foreground hover:bg-foreground/5 rounded-xl transition-all"
-                >
-                  <X className="w-5 h-5" />
-                </button>
+                <button onClick={() => { setSelectedDomainId(null); setDomainHistory(null) }} className="p-2 text-foreground-subtle hover:text-foreground hover:bg-foreground/5 rounded-lg"><X className="w-5 h-5" /></button>
               </div>
-
               {loadingHistory ? (
-                <div className="py-12 flex items-center justify-center">
-                  <Loader2 className="w-6 h-6 animate-spin text-accent" />
-                </div>
+                <div className="py-8 flex justify-center"><Loader2 className="w-5 h-5 animate-spin text-accent" /></div>
               ) : domainHistory.length === 0 ? (
-                <p className="py-12 text-center text-body-sm text-foreground-muted">No history yet</p>
+                <p className="py-8 text-center text-body-sm text-foreground-muted">No history yet</p>
               ) : (
                 <div className="space-y-2">
-                  {domainHistory.map((check, index) => (
-                    <div
-                      key={check.id}
-                      className="flex items-center justify-between p-4 bg-foreground/5 rounded-xl"
-                      style={{ animationDelay: `${index * 30}ms` }}
-                    >
+                  {domainHistory.map((check) => (
+                    <div key={check.id} className="flex items-center justify-between p-3 bg-foreground/5 rounded-lg">
                       <div className="flex items-center gap-3">
-                        <div className={clsx(
-                          "w-2.5 h-2.5 rounded-full",
-                          check.is_available ? "bg-accent" : "bg-foreground-subtle"
-                        )} />
-                        <span className={clsx(
-                          "text-body-sm",
-                          check.is_available ? "text-accent" : "text-foreground-muted"
-                        )}>
-                          {check.is_available ? 'Available' : 'Registered'}
-                        </span>
+                        <div className={clsx("w-2 h-2 rounded-full", check.is_available ? "bg-accent" : "bg-foreground-subtle")} />
+                        <span className={clsx("text-body-sm", check.is_available ? "text-accent" : "text-foreground-muted")}>{check.is_available ? 'Available' : 'Registered'}</span>
                       </div>
-                      <span className="text-body-xs text-foreground-subtle">
-                        {formatDate(check.checked_at)}
-                      </span>
+                      <span className="text-body-xs text-foreground-subtle">{formatDate(check.checked_at)}</span>
                     </div>
                   ))}
                 </div>
@@ -1322,125 +807,51 @@ export default function DashboardPage() {
         </div>
       )}
 
-      {/* Edit Portfolio Modal */}
       {showEditPortfolioModal && editingPortfolioDomain && (
-        <div className="fixed inset-0 bg-background/90 backdrop-blur-md z-50 flex items-center justify-center p-4">
-          <div className="bg-background-secondary border border-border rounded-3xl max-w-lg w-full max-h-[90vh] overflow-auto shadow-2xl">
-            <div className="p-6 sm:p-8">
-              <div className="flex items-center justify-between mb-8">
+        <div className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+          <div className="bg-background-secondary border border-border rounded-2xl max-w-lg w-full max-h-[90vh] overflow-auto">
+            <div className="p-6">
+              <div className="flex items-center justify-between mb-6">
                 <div>
-                  <h3 className="text-heading-sm font-display text-foreground">Edit Domain</h3>
-                  <p className="text-body-sm text-foreground-muted font-mono mt-1">{editingPortfolioDomain.domain}</p>
+                  <h3 className="text-body-lg font-medium text-foreground">Edit Domain</h3>
+                  <p className="text-body-sm text-foreground-muted font-mono">{editingPortfolioDomain.domain}</p>
                 </div>
-                <button
-                  onClick={() => {
-                    setShowEditPortfolioModal(false)
-                    setEditingPortfolioDomain(null)
-                  }}
-                  className="p-2 text-foreground-subtle hover:text-foreground hover:bg-foreground/5 rounded-xl transition-all"
-                >
-                  <X className="w-5 h-5" />
-                </button>
+                <button onClick={() => { setShowEditPortfolioModal(false); setEditingPortfolioDomain(null) }} className="p-2 text-foreground-subtle hover:text-foreground hover:bg-foreground/5 rounded-lg"><X className="w-5 h-5" /></button>
               </div>
-
-              <form onSubmit={handleSaveEditPortfolio} className="space-y-5">
+              <form onSubmit={handleSaveEditPortfolio} className="space-y-4">
                 <div className="grid grid-cols-2 gap-4">
                   <div>
                     <label className="block text-ui-sm text-foreground-muted mb-2">Purchase Price</label>
-                    <input
-                      type="number"
-                      step="0.01"
-                      min="0"
-                      value={editPortfolioForm.purchase_price}
-                      onChange={(e) => setEditPortfolioForm({ ...editPortfolioForm, purchase_price: e.target.value })}
-                      placeholder="0.00"
-                      className="w-full px-4 py-3.5 bg-background border border-border rounded-xl text-body text-foreground
-                                 placeholder:text-foreground-subtle focus:outline-none focus:border-accent/50 focus:ring-2 focus:ring-accent/10 transition-all"
-                    />
+                    <input type="number" step="0.01" min="0" value={editPortfolioForm.purchase_price} onChange={(e) => setEditPortfolioForm({ ...editPortfolioForm, purchase_price: e.target.value })} placeholder="0.00" className="w-full px-4 py-3 bg-background border border-border rounded-xl text-body text-foreground placeholder:text-foreground-subtle focus:outline-none focus:border-accent/50 transition-all" />
                   </div>
                   <div>
                     <label className="block text-ui-sm text-foreground-muted mb-2">Purchase Date</label>
-                    <input
-                      type="date"
-                      value={editPortfolioForm.purchase_date}
-                      onChange={(e) => setEditPortfolioForm({ ...editPortfolioForm, purchase_date: e.target.value })}
-                      className="w-full px-4 py-3.5 bg-background border border-border rounded-xl text-body text-foreground
-                                 focus:outline-none focus:border-accent/50 focus:ring-2 focus:ring-accent/10 transition-all"
-                    />
+                    <input type="date" value={editPortfolioForm.purchase_date} onChange={(e) => setEditPortfolioForm({ ...editPortfolioForm, purchase_date: e.target.value })} className="w-full px-4 py-3 bg-background border border-border rounded-xl text-body text-foreground focus:outline-none focus:border-accent/50 transition-all" />
                   </div>
                 </div>
-
                 <div>
                   <label className="block text-ui-sm text-foreground-muted mb-2">Registrar</label>
-                  <input
-                    type="text"
-                    value={editPortfolioForm.registrar}
-                    onChange={(e) => setEditPortfolioForm({ ...editPortfolioForm, registrar: e.target.value })}
-                    placeholder="e.g., Namecheap"
-                    className="w-full px-4 py-3.5 bg-background border border-border rounded-xl text-body text-foreground
-                               placeholder:text-foreground-subtle focus:outline-none focus:border-accent/50 focus:ring-2 focus:ring-accent/10 transition-all"
-                  />
+                  <input type="text" value={editPortfolioForm.registrar} onChange={(e) => setEditPortfolioForm({ ...editPortfolioForm, registrar: e.target.value })} placeholder="e.g., Namecheap" className="w-full px-4 py-3 bg-background border border-border rounded-xl text-body text-foreground placeholder:text-foreground-subtle focus:outline-none focus:border-accent/50 transition-all" />
                 </div>
-
                 <div className="grid grid-cols-2 gap-4">
                   <div>
                     <label className="block text-ui-sm text-foreground-muted mb-2">Renewal Date</label>
-                    <input
-                      type="date"
-                      value={editPortfolioForm.renewal_date}
-                      onChange={(e) => setEditPortfolioForm({ ...editPortfolioForm, renewal_date: e.target.value })}
-                      className="w-full px-4 py-3.5 bg-background border border-border rounded-xl text-body text-foreground
-                                 focus:outline-none focus:border-accent/50 focus:ring-2 focus:ring-accent/10 transition-all"
-                    />
+                    <input type="date" value={editPortfolioForm.renewal_date} onChange={(e) => setEditPortfolioForm({ ...editPortfolioForm, renewal_date: e.target.value })} className="w-full px-4 py-3 bg-background border border-border rounded-xl text-body text-foreground focus:outline-none focus:border-accent/50 transition-all" />
                   </div>
                   <div>
                     <label className="block text-ui-sm text-foreground-muted mb-2">Renewal Cost</label>
-                    <input
-                      type="number"
-                      step="0.01"
-                      min="0"
-                      value={editPortfolioForm.renewal_cost}
-                      onChange={(e) => setEditPortfolioForm({ ...editPortfolioForm, renewal_cost: e.target.value })}
-                      placeholder="0.00"
-                      className="w-full px-4 py-3.5 bg-background border border-border rounded-xl text-body text-foreground
-                                 placeholder:text-foreground-subtle focus:outline-none focus:border-accent/50 focus:ring-2 focus:ring-accent/10 transition-all"
-                    />
+                    <input type="number" step="0.01" min="0" value={editPortfolioForm.renewal_cost} onChange={(e) => setEditPortfolioForm({ ...editPortfolioForm, renewal_cost: e.target.value })} placeholder="0.00" className="w-full px-4 py-3 bg-background border border-border rounded-xl text-body text-foreground placeholder:text-foreground-subtle focus:outline-none focus:border-accent/50 transition-all" />
                   </div>
                 </div>
-
                 <div>
                   <label className="block text-ui-sm text-foreground-muted mb-2">Notes</label>
-                  <textarea
-                    value={editPortfolioForm.notes}
-                    onChange={(e) => setEditPortfolioForm({ ...editPortfolioForm, notes: e.target.value })}
-                    placeholder="Add notes..."
-                    rows={3}
-                    className="w-full px-4 py-3.5 bg-background border border-border rounded-xl text-body text-foreground
-                               placeholder:text-foreground-subtle focus:outline-none focus:border-accent/50 focus:ring-2 focus:ring-accent/10 transition-all resize-none"
-                  />
+                  <textarea value={editPortfolioForm.notes} onChange={(e) => setEditPortfolioForm({ ...editPortfolioForm, notes: e.target.value })} placeholder="Add notes..." rows={3} className="w-full px-4 py-3 bg-background border border-border rounded-xl text-body text-foreground placeholder:text-foreground-subtle focus:outline-none focus:border-accent/50 transition-all resize-none" />
                 </div>
-
-                <div className="flex gap-3 pt-3">
-                  <button
-                    type="button"
-                    onClick={() => {
-                      setShowEditPortfolioModal(false)
-                      setEditingPortfolioDomain(null)
-                    }}
-                    className="flex-1 py-3.5 bg-foreground/5 text-foreground text-ui font-medium rounded-xl
-                               hover:bg-foreground/10 transition-all"
-                  >
-                    Cancel
-                  </button>
-                  <button
-                    type="submit"
-                    disabled={savingEdit}
-                    className="flex-1 py-3.5 bg-foreground text-background text-ui font-medium rounded-xl
-                               hover:bg-foreground/90 disabled:opacity-40 disabled:cursor-not-allowed transition-all
-                               flex items-center justify-center gap-2"
-                  >
+                <div className="flex gap-3 pt-2">
+                  <button type="button" onClick={() => { setShowEditPortfolioModal(false); setEditingPortfolioDomain(null) }} className="flex-1 py-3 bg-foreground/5 text-foreground text-ui-sm font-medium rounded-xl hover:bg-foreground/10 transition-all">Cancel</button>
+                  <button type="submit" disabled={savingEdit} className="flex-1 py-3 bg-foreground text-background text-ui-sm font-medium rounded-xl hover:bg-foreground/90 disabled:opacity-40 transition-all flex items-center justify-center gap-2">
                     {savingEdit ? <Loader2 className="w-4 h-4 animate-spin" /> : <Check className="w-4 h-4" />}
-                    Save Changes
+                    Save
                   </button>
                 </div>
               </form>
@@ -1449,27 +860,17 @@ export default function DashboardPage() {
         </div>
       )}
 
-      {/* Sell Domain Modal */}
       {showSellModal && sellingDomain && (
-        <div className="fixed inset-0 bg-background/90 backdrop-blur-md z-50 flex items-center justify-center p-4">
-          <div className="bg-background-secondary border border-border rounded-3xl max-w-md w-full shadow-2xl">
-            <div className="p-6 sm:p-8">
+        <div className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+          <div className="bg-background-secondary border border-border rounded-2xl max-w-md w-full">
+            <div className="p-6">
               <div className="flex items-center justify-between mb-6">
                 <div>
-                  <h3 className="text-heading-sm font-display text-foreground">Mark as Sold</h3>
-                  <p className="text-body-sm text-foreground-muted font-mono mt-1">{sellingDomain.domain}</p>
+                  <h3 className="text-body-lg font-medium text-foreground">Mark as Sold</h3>
+                  <p className="text-body-sm text-foreground-muted font-mono">{sellingDomain.domain}</p>
                 </div>
-                <button
-                  onClick={() => {
-                    setShowSellModal(false)
-                    setSellingDomain(null)
-                  }}
-                  className="p-2 text-foreground-subtle hover:text-foreground hover:bg-foreground/5 rounded-xl transition-all"
-                >
-                  <X className="w-5 h-5" />
-                </button>
+                <button onClick={() => { setShowSellModal(false); setSellingDomain(null) }} className="p-2 text-foreground-subtle hover:text-foreground hover:bg-foreground/5 rounded-lg"><X className="w-5 h-5" /></button>
               </div>
-
               {sellingDomain.estimated_value && (
                 <div className="mb-6 p-4 bg-foreground/5 rounded-xl">
                   <div className="flex items-center justify-between">
@@ -1484,73 +885,30 @@ export default function DashboardPage() {
                   )}
                 </div>
               )}
-
-              <form onSubmit={handleSellDomain} className="space-y-5">
+              <form onSubmit={handleSellDomain} className="space-y-4">
                 <div>
                   <label className="block text-ui-sm text-foreground-muted mb-2">Sale Price *</label>
-                  <input
-                    type="number"
-                    step="0.01"
-                    min="0"
-                    value={sellForm.sale_price}
-                    onChange={(e) => setSellForm({ ...sellForm, sale_price: e.target.value })}
-                    placeholder="Enter sale price..."
-                    required
-                    className="w-full px-4 py-3.5 bg-background border border-border rounded-xl text-body text-foreground
-                               placeholder:text-foreground-subtle focus:outline-none focus:border-accent/50 focus:ring-2 focus:ring-accent/10 transition-all"
-                  />
+                  <input type="number" step="0.01" min="0" value={sellForm.sale_price} onChange={(e) => setSellForm({ ...sellForm, sale_price: e.target.value })} placeholder="Enter sale price..." required className="w-full px-4 py-3 bg-background border border-border rounded-xl text-body text-foreground placeholder:text-foreground-subtle focus:outline-none focus:border-accent/50 transition-all" />
                 </div>
-
                 <div>
                   <label className="block text-ui-sm text-foreground-muted mb-2">Sale Date</label>
-                  <input
-                    type="date"
-                    value={sellForm.sale_date}
-                    onChange={(e) => setSellForm({ ...sellForm, sale_date: e.target.value })}
-                    className="w-full px-4 py-3.5 bg-background border border-border rounded-xl text-body text-foreground
-                               focus:outline-none focus:border-accent/50 focus:ring-2 focus:ring-accent/10 transition-all"
-                  />
+                  <input type="date" value={sellForm.sale_date} onChange={(e) => setSellForm({ ...sellForm, sale_date: e.target.value })} className="w-full px-4 py-3 bg-background border border-border rounded-xl text-body text-foreground focus:outline-none focus:border-accent/50 transition-all" />
                 </div>
-
                 {sellForm.sale_price && sellingDomain.purchase_price && (
-                  <div className={clsx(
-                    "p-4 rounded-xl",
-                    parseFloat(sellForm.sale_price) - sellingDomain.purchase_price >= 0 ? "bg-accent/10" : "bg-danger/10"
-                  )}>
+                  <div className={clsx("p-4 rounded-xl", parseFloat(sellForm.sale_price) - sellingDomain.purchase_price >= 0 ? "bg-accent/10" : "bg-danger/10")}>
                     <div className="flex items-center justify-between">
                       <span className="text-body-sm text-foreground-muted">Profit</span>
-                      <span className={clsx(
-                        "text-body-lg font-medium",
-                        parseFloat(sellForm.sale_price) - sellingDomain.purchase_price >= 0 ? "text-accent" : "text-danger"
-                      )}>
-                        {parseFloat(sellForm.sale_price) - sellingDomain.purchase_price >= 0 ? '+' : ''}
-                        {formatCurrency(parseFloat(sellForm.sale_price) - sellingDomain.purchase_price)}
+                      <span className={clsx("text-body-lg font-medium", parseFloat(sellForm.sale_price) - sellingDomain.purchase_price >= 0 ? "text-accent" : "text-danger")}>
+                        {parseFloat(sellForm.sale_price) - sellingDomain.purchase_price >= 0 ? '+' : ''}{formatCurrency(parseFloat(sellForm.sale_price) - sellingDomain.purchase_price)}
                       </span>
                     </div>
                   </div>
                 )}
-
-                <div className="flex gap-3 pt-3">
-                  <button
-                    type="button"
-                    onClick={() => {
-                      setShowSellModal(false)
-                      setSellingDomain(null)
-                    }}
-                    className="flex-1 py-3.5 bg-foreground/5 text-foreground text-ui font-medium rounded-xl
-                               hover:bg-foreground/10 transition-all"
-                  >
-                    Cancel
-                  </button>
-                  <button
-                    type="submit"
-                    disabled={processingSale || !sellForm.sale_price}
-                    className="flex-1 py-3.5 bg-accent text-background text-ui font-medium rounded-xl
-                               hover:bg-accent-hover disabled:opacity-40 disabled:cursor-not-allowed transition-all
-                               flex items-center justify-center gap-2"
-                  >
+                <div className="flex gap-3 pt-2">
+                  <button type="button" onClick={() => { setShowSellModal(false); setSellingDomain(null) }} className="flex-1 py-3 bg-foreground/5 text-foreground text-ui-sm font-medium rounded-xl hover:bg-foreground/10 transition-all">Cancel</button>
+                  <button type="submit" disabled={processingSale || !sellForm.sale_price} className="flex-1 py-3 bg-accent text-background text-ui-sm font-medium rounded-xl hover:bg-accent-hover disabled:opacity-40 transition-all flex items-center justify-center gap-2">
                     {processingSale ? <Loader2 className="w-4 h-4 animate-spin" /> : <DollarSign className="w-4 h-4" />}
-                    Confirm Sale
+                    Confirm
                   </button>
                 </div>
               </form>
@@ -1558,7 +916,7 @@ export default function DashboardPage() {
           </div>
         </div>
       )}
-      
+
       <Footer />
     </div>
   )