Major navigation overhaul: Add Command Center with Sidebar

- New Sidebar component with collapsible navigation
- New CommandCenterLayout for logged-in users
- Separate routes: /watchlist, /portfolio, /market, /intelligence
- Dashboard with Activity Feed and Market Pulse
- Traffic light status indicators for domain status
- Updated Header for public/logged-in state separation
- Settings page uses new Command Center layout

frontend/src/app/intelligence/page.tsx

@@ -0,0 +1,257 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useStore } from '@/lib/store'
+import { api } from '@/lib/api'
+import { CommandCenterLayout } from '@/components/CommandCenterLayout'
+import {
+  Search,
+  TrendingUp,
+  TrendingDown,
+  Minus,
+  ChevronRight,
+  Globe,
+  ArrowUpDown,
+  ExternalLink,
+  BarChart3,
+  DollarSign,
+} from 'lucide-react'
+import clsx from 'clsx'
+import Link from 'next/link'
+
+interface TLDData {
+  tld: string
+  min_price: number
+  avg_price: number
+  max_price: number
+  cheapest_registrar: string
+  cheapest_registrar_url?: string
+  price_change_7d?: number
+  popularity_rank?: number
+}
+
+export default function IntelligencePage() {
+  const { subscription } = useStore()
+  
+  const [tldData, setTldData] = useState<TLDData[]>([])
+  const [loading, setLoading] = useState(true)
+  const [searchQuery, setSearchQuery] = useState('')
+  const [sortBy, setSortBy] = useState<'popularity' | 'price_asc' | 'price_desc' | 'change'>('popularity')
+  const [page, setPage] = useState(0)
+  const [total, setTotal] = useState(0)
+
+  useEffect(() => {
+    loadTLDData()
+  }, [page, sortBy])
+
+  const loadTLDData = async () => {
+    setLoading(true)
+    try {
+      const response = await api.getTldPrices({
+        limit: 50,
+        offset: page * 50,
+        sort_by: sortBy,
+      })
+      setTldData(response.tlds || [])
+      setTotal(response.total || 0)
+    } catch (error) {
+      console.error('Failed to load TLD data:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  // Filter by search
+  const filteredData = tldData.filter(tld => 
+    tld.tld.toLowerCase().includes(searchQuery.toLowerCase())
+  )
+
+  const getTrendIcon = (change: number | undefined) => {
+    if (!change) return <Minus className="w-4 h-4 text-foreground-muted" />
+    if (change > 0) return <TrendingUp className="w-4 h-4 text-orange-400" />
+    return <TrendingDown className="w-4 h-4 text-accent" />
+  }
+
+  return (
+    <CommandCenterLayout
+      title="TLD Intelligence"
+      subtitle={`Real-time pricing data for ${total}+ TLDs`}
+    >
+      <div className="max-w-7xl mx-auto space-y-6">
+        {/* Stats Overview */}
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+          <div className="p-5 bg-background-secondary/50 border border-border rounded-xl">
+            <div className="flex items-center gap-3 mb-3">
+              <div className="w-10 h-10 bg-accent/10 rounded-xl flex items-center justify-center">
+                <Globe className="w-5 h-5 text-accent" />
+              </div>
+              <div>
+                <p className="text-2xl font-display text-foreground">{total}+</p>
+                <p className="text-sm text-foreground-muted">TLDs Tracked</p>
+              </div>
+            </div>
+          </div>
+          <div className="p-5 bg-background-secondary/50 border border-border rounded-xl">
+            <div className="flex items-center gap-3 mb-3">
+              <div className="w-10 h-10 bg-accent/10 rounded-xl flex items-center justify-center">
+                <DollarSign className="w-5 h-5 text-accent" />
+              </div>
+              <div>
+                <p className="text-2xl font-display text-foreground">$0.99</p>
+                <p className="text-sm text-foreground-muted">Lowest Price</p>
+              </div>
+            </div>
+          </div>
+          <div className="p-5 bg-background-secondary/50 border border-border rounded-xl">
+            <div className="flex items-center gap-3 mb-3">
+              <div className="w-10 h-10 bg-orange-400/10 rounded-xl flex items-center justify-center">
+                <TrendingUp className="w-5 h-5 text-orange-400" />
+              </div>
+              <div>
+                <p className="text-2xl font-display text-foreground">.ai</p>
+                <p className="text-sm text-foreground-muted">Hottest TLD</p>
+              </div>
+            </div>
+          </div>
+          <div className="p-5 bg-background-secondary/50 border border-border rounded-xl">
+            <div className="flex items-center gap-3 mb-3">
+              <div className="w-10 h-10 bg-foreground/5 rounded-xl flex items-center justify-center">
+                <BarChart3 className="w-5 h-5 text-foreground-muted" />
+              </div>
+              <div>
+                <p className="text-2xl font-display text-foreground">24h</p>
+                <p className="text-sm text-foreground-muted">Update Frequency</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Filters */}
+        <div className="flex flex-col sm:flex-row gap-3">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-foreground-muted" />
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Search TLDs..."
+              className="w-full h-10 pl-10 pr-4 bg-background-secondary border border-border rounded-lg
+                         text-sm text-foreground placeholder:text-foreground-subtle
+                         focus:outline-none focus:border-accent"
+            />
+          </div>
+          <div className="relative">
+            <select
+              value={sortBy}
+              onChange={(e) => setSortBy(e.target.value as any)}
+              className="h-10 pl-4 pr-10 bg-background-secondary border border-border rounded-lg
+                         text-sm text-foreground appearance-none cursor-pointer
+                         focus:outline-none focus:border-accent"
+            >
+              <option value="popularity">By Popularity</option>
+              <option value="price_asc">Price: Low to High</option>
+              <option value="price_desc">Price: High to Low</option>
+              <option value="change">By Change %</option>
+            </select>
+            <ArrowUpDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-foreground-muted pointer-events-none" />
+          </div>
+        </div>
+
+        {/* TLD Table */}
+        {loading ? (
+          <div className="space-y-3">
+            {[...Array(10)].map((_, i) => (
+              <div key={i} className="h-16 bg-background-secondary/50 border border-border rounded-xl animate-pulse" />
+            ))}
+          </div>
+        ) : (
+          <div className="overflow-hidden border border-border rounded-xl">
+            {/* Table Header */}
+            <div className="hidden lg:grid lg:grid-cols-12 gap-4 p-4 bg-background-secondary/50 border-b border-border text-sm text-foreground-muted font-medium">
+              <div className="col-span-2">TLD</div>
+              <div className="col-span-2">Min Price</div>
+              <div className="col-span-2">Avg Price</div>
+              <div className="col-span-2">Change</div>
+              <div className="col-span-3">Cheapest Registrar</div>
+              <div className="col-span-1"></div>
+            </div>
+
+            {/* Table Rows */}
+            <div className="divide-y divide-border">
+              {filteredData.map((tld) => (
+                <Link
+                  key={tld.tld}
+                  href={`/tld-pricing/${tld.tld}`}
+                  className="block lg:grid lg:grid-cols-12 gap-4 p-4 hover:bg-foreground/5 transition-colors"
+                >
+                  {/* TLD */}
+                  <div className="col-span-2 flex items-center gap-3 mb-3 lg:mb-0">
+                    <span className="font-mono text-xl font-semibold text-foreground">.{tld.tld}</span>
+                  </div>
+
+                  {/* Min Price */}
+                  <div className="col-span-2 flex items-center">
+                    <span className="text-foreground font-medium">${tld.min_price.toFixed(2)}</span>
+                  </div>
+
+                  {/* Avg Price */}
+                  <div className="col-span-2 flex items-center">
+                    <span className="text-foreground-muted">${tld.avg_price.toFixed(2)}</span>
+                  </div>
+
+                  {/* Change */}
+                  <div className="col-span-2 flex items-center gap-2">
+                    {getTrendIcon(tld.price_change_7d)}
+                    <span className={clsx(
+                      "font-medium",
+                      (tld.price_change_7d || 0) > 0 ? "text-orange-400" :
+                      (tld.price_change_7d || 0) < 0 ? "text-accent" : "text-foreground-muted"
+                    )}>
+                      {(tld.price_change_7d || 0) > 0 ? '+' : ''}{(tld.price_change_7d || 0).toFixed(1)}%
+                    </span>
+                  </div>
+
+                  {/* Registrar */}
+                  <div className="col-span-3 flex items-center">
+                    <span className="text-foreground-muted truncate">{tld.cheapest_registrar}</span>
+                  </div>
+
+                  {/* Arrow */}
+                  <div className="col-span-1 flex items-center justify-end">
+                    <ChevronRight className="w-5 h-5 text-foreground-subtle" />
+                  </div>
+                </Link>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Pagination */}
+        {total > 50 && (
+          <div className="flex items-center justify-center gap-2">
+            <button
+              onClick={() => setPage(Math.max(0, page - 1))}
+              disabled={page === 0}
+              className="px-4 py-2 text-sm text-foreground-muted hover:text-foreground 
+                         disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              Previous
+            </button>
+            <span className="text-sm text-foreground-muted">
+              Page {page + 1} of {Math.ceil(total / 50)}
+            </span>
+            <button
+              onClick={() => setPage(page + 1)}
+              disabled={(page + 1) * 50 >= total}
+              className="px-4 py-2 text-sm text-foreground-muted hover:text-foreground 
+                         disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              Next
+            </button>
+          </div>
+        )}
+      </div>
+    </CommandCenterLayout>
+  )
+}
+

frontend/src/app/market/page.tsx

@@ -0,0 +1,252 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { useStore } from '@/lib/store'
+import { api } from '@/lib/api'
+import { CommandCenterLayout } from '@/components/CommandCenterLayout'
+import {
+  Search,
+  Filter,
+  Clock,
+  TrendingUp,
+  Flame,
+  Sparkles,
+  ExternalLink,
+  ChevronDown,
+  Globe,
+  Gavel,
+  ArrowUpDown,
+} from 'lucide-react'
+import clsx from 'clsx'
+
+type ViewType = 'all' | 'ending' | 'hot' | 'opportunities'
+
+interface Auction {
+  domain: string
+  platform: string
+  current_bid: number
+  num_bids: number
+  end_time: string
+  time_remaining: string
+  affiliate_url: string
+  tld: string
+}
+
+export default function MarketPage() {
+  const router = useRouter()
+  const { subscription } = useStore()
+  
+  const [auctions, setAuctions] = useState<Auction[]>([])
+  const [loading, setLoading] = useState(true)
+  const [activeView, setActiveView] = useState<ViewType>('all')
+  const [searchQuery, setSearchQuery] = useState('')
+  const [platformFilter, setPlatformFilter] = useState<string>('all')
+  const [sortBy, setSortBy] = useState<string>('end_time')
+
+  useEffect(() => {
+    loadAuctions()
+  }, [activeView])
+
+  const loadAuctions = async () => {
+    setLoading(true)
+    try {
+      let data
+      switch (activeView) {
+        case 'ending':
+          data = await api.getEndingSoonAuctions(50)
+          break
+        case 'hot':
+          data = await api.getHotAuctions(50)
+          break
+        case 'opportunities':
+          data = await api.getOpportunityAuctions(50)
+          break
+        default:
+          const response = await api.getAuctions({ limit: 50, sort_by: sortBy })
+          data = response.auctions || []
+      }
+      setAuctions(data)
+    } catch (error) {
+      console.error('Failed to load auctions:', error)
+      setAuctions([])
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  // Filter auctions
+  const filteredAuctions = auctions.filter(auction => {
+    if (searchQuery && !auction.domain.toLowerCase().includes(searchQuery.toLowerCase())) {
+      return false
+    }
+    if (platformFilter !== 'all' && auction.platform !== platformFilter) {
+      return false
+    }
+    return true
+  })
+
+  const platforms = ['GoDaddy', 'Sedo', 'NameJet', 'DropCatch', 'ExpiredDomains']
+
+  const views = [
+    { id: 'all', label: 'All Auctions', icon: Gavel },
+    { id: 'ending', label: 'Ending Soon', icon: Clock },
+    { id: 'hot', label: 'Hot', icon: Flame },
+    { id: 'opportunities', label: 'Opportunities', icon: Sparkles },
+  ]
+
+  return (
+    <CommandCenterLayout
+      title="Market Scanner"
+      subtitle="Live auctions from all major platforms"
+    >
+      <div className="max-w-7xl mx-auto space-y-6">
+        {/* View Tabs */}
+        <div className="flex flex-wrap gap-2 p-1 bg-background-secondary/50 rounded-xl border border-border">
+          {views.map((view) => (
+            <button
+              key={view.id}
+              onClick={() => setActiveView(view.id as ViewType)}
+              className={clsx(
+                "flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium transition-all",
+                activeView === view.id
+                  ? "bg-foreground text-background"
+                  : "text-foreground-muted hover:text-foreground hover:bg-foreground/5"
+              )}
+            >
+              <view.icon className="w-4 h-4" />
+              {view.label}
+            </button>
+          ))}
+        </div>
+
+        {/* Filters */}
+        <div className="flex flex-col sm:flex-row gap-3">
+          {/* Search */}
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-foreground-muted" />
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Search domains..."
+              className="w-full h-10 pl-10 pr-4 bg-background-secondary border border-border rounded-lg
+                         text-sm text-foreground placeholder:text-foreground-subtle
+                         focus:outline-none focus:border-accent"
+            />
+          </div>
+
+          {/* Platform Filter */}
+          <div className="relative">
+            <select
+              value={platformFilter}
+              onChange={(e) => setPlatformFilter(e.target.value)}
+              className="h-10 pl-4 pr-10 bg-background-secondary border border-border rounded-lg
+                         text-sm text-foreground appearance-none cursor-pointer
+                         focus:outline-none focus:border-accent"
+            >
+              <option value="all">All Platforms</option>
+              {platforms.map((p) => (
+                <option key={p} value={p}>{p}</option>
+              ))}
+            </select>
+            <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-foreground-muted pointer-events-none" />
+          </div>
+
+          {/* Sort */}
+          <div className="relative">
+            <select
+              value={sortBy}
+              onChange={(e) => {
+                setSortBy(e.target.value)
+                loadAuctions()
+              }}
+              className="h-10 pl-4 pr-10 bg-background-secondary border border-border rounded-lg
+                         text-sm text-foreground appearance-none cursor-pointer
+                         focus:outline-none focus:border-accent"
+            >
+              <option value="end_time">Ending Soon</option>
+              <option value="bid_asc">Price: Low to High</option>
+              <option value="bid_desc">Price: High to Low</option>
+              <option value="bids">Most Bids</option>
+            </select>
+            <ArrowUpDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-foreground-muted pointer-events-none" />
+          </div>
+        </div>
+
+        {/* Stats Bar */}
+        <div className="flex items-center gap-6 text-sm text-foreground-muted">
+          <span>{filteredAuctions.length} auctions</span>
+          <span>•</span>
+          <span className="flex items-center gap-1.5">
+            <Globe className="w-3.5 h-3.5" />
+            {platforms.length} platforms
+          </span>
+        </div>
+
+        {/* Auction List */}
+        {loading ? (
+          <div className="space-y-3">
+            {[...Array(5)].map((_, i) => (
+              <div key={i} className="h-20 bg-background-secondary/50 border border-border rounded-xl animate-pulse" />
+            ))}
+          </div>
+        ) : filteredAuctions.length === 0 ? (
+          <div className="text-center py-16 bg-background-secondary/30 border border-border rounded-xl">
+            <Gavel className="w-12 h-12 text-foreground-subtle mx-auto mb-4" />
+            <p className="text-foreground-muted">No auctions found</p>
+            <p className="text-sm text-foreground-subtle mt-1">Try adjusting your filters</p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {filteredAuctions.map((auction, idx) => (
+              <div
+                key={`${auction.domain}-${idx}`}
+                className="group p-4 sm:p-5 bg-background-secondary/50 border border-border rounded-xl
+                           hover:border-foreground/20 transition-all"
+              >
+                <div className="flex flex-col sm:flex-row sm:items-center gap-4">
+                  {/* Domain Info */}
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-3 mb-1">
+                      <h3 className="text-lg font-semibold text-foreground truncate">{auction.domain}</h3>
+                      <span className="shrink-0 px-2 py-0.5 bg-foreground/5 text-foreground-muted text-xs rounded">
+                        {auction.platform}
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-4 text-sm text-foreground-muted">
+                      <span className="flex items-center gap-1.5">
+                        <Clock className="w-3.5 h-3.5" />
+                        {auction.time_remaining}
+                      </span>
+                      <span>{auction.num_bids} bids</span>
+                    </div>
+                  </div>
+
+                  {/* Price + Action */}
+                  <div className="flex items-center gap-4 shrink-0">
+                    <div className="text-right">
+                      <p className="text-xl font-semibold text-foreground">${auction.current_bid.toLocaleString()}</p>
+                      <p className="text-xs text-foreground-subtle">Current bid</p>
+                    </div>
+                    <a
+                      href={auction.affiliate_url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center gap-2 px-4 py-2.5 bg-foreground text-background rounded-lg
+                                 font-medium text-sm hover:bg-foreground/90 transition-colors"
+                    >
+                      Bid
+                      <ExternalLink className="w-3.5 h-3.5" />
+                    </a>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </CommandCenterLayout>
+  )
+}
+

frontend/src/app/portfolio/page.tsx

@@ -0,0 +1,529 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useStore } from '@/lib/store'
+import { api, PortfolioDomain, PortfolioSummary, DomainValuation } from '@/lib/api'
+import { CommandCenterLayout } from '@/components/CommandCenterLayout'
+import { Toast, useToast } from '@/components/Toast'
+import {
+  Plus,
+  Trash2,
+  Edit2,
+  DollarSign,
+  Calendar,
+  Building,
+  RefreshCw,
+  Loader2,
+  TrendingUp,
+  TrendingDown,
+  Tag,
+  ExternalLink,
+  Sparkles,
+  ArrowUpRight,
+  X,
+} from 'lucide-react'
+import clsx from 'clsx'
+import Link from 'next/link'
+
+export default function PortfolioPage() {
+  const { subscription } = useStore()
+  const { toast, showToast, hideToast } = useToast()
+  
+  const [portfolio, setPortfolio] = useState<PortfolioDomain[]>([])
+  const [summary, setSummary] = useState<PortfolioSummary | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [showAddModal, setShowAddModal] = useState(false)
+  const [showEditModal, setShowEditModal] = useState(false)
+  const [showSellModal, setShowSellModal] = useState(false)
+  const [showValuationModal, setShowValuationModal] = useState(false)
+  const [selectedDomain, setSelectedDomain] = useState<PortfolioDomain | null>(null)
+  const [valuation, setValuation] = useState<DomainValuation | null>(null)
+  const [valuatingDomain, setValuatingDomain] = useState('')
+  const [addingDomain, setAddingDomain] = useState(false)
+  const [savingEdit, setSavingEdit] = useState(false)
+  const [processingSale, setProcessingSale] = useState(false)
+  const [refreshingId, setRefreshingId] = useState<number | null>(null)
+
+  const [addForm, setAddForm] = useState({
+    domain: '',
+    purchase_price: '',
+    purchase_date: '',
+    registrar: '',
+    renewal_date: '',
+    renewal_cost: '',
+    notes: '',
+  })
+
+  const [editForm, setEditForm] = useState({
+    purchase_price: '',
+    purchase_date: '',
+    registrar: '',
+    renewal_date: '',
+    renewal_cost: '',
+    notes: '',
+  })
+
+  const [sellForm, setSellForm] = useState({
+    sale_date: new Date().toISOString().split('T')[0],
+    sale_price: '',
+  })
+
+  useEffect(() => {
+    loadPortfolio()
+  }, [])
+
+  const loadPortfolio = async () => {
+    setLoading(true)
+    try {
+      const [portfolioData, summaryData] = await Promise.all([
+        api.getPortfolio(),
+        api.getPortfolioSummary(),
+      ])
+      setPortfolio(portfolioData)
+      setSummary(summaryData)
+    } catch (error) {
+      console.error('Failed to load portfolio:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleAddDomain = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!addForm.domain.trim()) return
+
+    setAddingDomain(true)
+    try {
+      await api.addToPortfolio({
+        domain: addForm.domain.trim(),
+        purchase_price: addForm.purchase_price ? parseFloat(addForm.purchase_price) : undefined,
+        purchase_date: addForm.purchase_date || undefined,
+        registrar: addForm.registrar || undefined,
+        renewal_date: addForm.renewal_date || undefined,
+        renewal_cost: addForm.renewal_cost ? parseFloat(addForm.renewal_cost) : undefined,
+        notes: addForm.notes || undefined,
+      })
+      showToast(`Added ${addForm.domain} to portfolio`, 'success')
+      setAddForm({ domain: '', purchase_price: '', purchase_date: '', registrar: '', renewal_date: '', renewal_cost: '', notes: '' })
+      setShowAddModal(false)
+      loadPortfolio()
+    } catch (err: any) {
+      showToast(err.message || 'Failed to add domain', 'error')
+    } finally {
+      setAddingDomain(false)
+    }
+  }
+
+  const handleEditDomain = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!selectedDomain) return
+
+    setSavingEdit(true)
+    try {
+      await api.updatePortfolioDomain(selectedDomain.id, {
+        purchase_price: editForm.purchase_price ? parseFloat(editForm.purchase_price) : undefined,
+        purchase_date: editForm.purchase_date || undefined,
+        registrar: editForm.registrar || undefined,
+        renewal_date: editForm.renewal_date || undefined,
+        renewal_cost: editForm.renewal_cost ? parseFloat(editForm.renewal_cost) : undefined,
+        notes: editForm.notes || undefined,
+      })
+      showToast('Domain updated', 'success')
+      setShowEditModal(false)
+      loadPortfolio()
+    } catch (err: any) {
+      showToast(err.message || 'Failed to update', 'error')
+    } finally {
+      setSavingEdit(false)
+    }
+  }
+
+  const handleSellDomain = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!selectedDomain || !sellForm.sale_price) return
+
+    setProcessingSale(true)
+    try {
+      await api.markAsSold(selectedDomain.id, {
+        sale_date: sellForm.sale_date,
+        sale_price: parseFloat(sellForm.sale_price),
+      })
+      showToast(`Marked ${selectedDomain.domain} as sold`, 'success')
+      setShowSellModal(false)
+      loadPortfolio()
+    } catch (err: any) {
+      showToast(err.message || 'Failed to process sale', 'error')
+    } finally {
+      setProcessingSale(false)
+    }
+  }
+
+  const handleValuate = async (domain: PortfolioDomain) => {
+    setValuatingDomain(domain.domain)
+    setShowValuationModal(true)
+    try {
+      const result = await api.getValuation(domain.domain)
+      setValuation(result)
+    } catch (err: any) {
+      showToast(err.message || 'Failed to get valuation', 'error')
+      setShowValuationModal(false)
+    } finally {
+      setValuatingDomain('')
+    }
+  }
+
+  const handleRefresh = async (domain: PortfolioDomain) => {
+    setRefreshingId(domain.id)
+    try {
+      await api.refreshPortfolioValuation(domain.id)
+      showToast('Valuation refreshed', 'success')
+      loadPortfolio()
+    } catch (err: any) {
+      showToast(err.message || 'Failed to refresh', 'error')
+    } finally {
+      setRefreshingId(null)
+    }
+  }
+
+  const handleDelete = async (domain: PortfolioDomain) => {
+    if (!confirm(`Remove ${domain.domain} from your portfolio?`)) return
+
+    try {
+      await api.removeFromPortfolio(domain.id)
+      showToast(`Removed ${domain.domain}`, 'success')
+      loadPortfolio()
+    } catch (err: any) {
+      showToast(err.message || 'Failed to remove', 'error')
+    }
+  }
+
+  const openEditModal = (domain: PortfolioDomain) => {
+    setSelectedDomain(domain)
+    setEditForm({
+      purchase_price: domain.purchase_price?.toString() || '',
+      purchase_date: domain.purchase_date || '',
+      registrar: domain.registrar || '',
+      renewal_date: domain.renewal_date || '',
+      renewal_cost: domain.renewal_cost?.toString() || '',
+      notes: domain.notes || '',
+    })
+    setShowEditModal(true)
+  }
+
+  const openSellModal = (domain: PortfolioDomain) => {
+    setSelectedDomain(domain)
+    setSellForm({
+      sale_date: new Date().toISOString().split('T')[0],
+      sale_price: '',
+    })
+    setShowSellModal(true)
+  }
+
+  const portfolioLimit = subscription?.portfolio_limit || 0
+  const canAddMore = portfolioLimit === -1 || portfolio.length < portfolioLimit
+
+  return (
+    <CommandCenterLayout
+      title="Portfolio"
+      subtitle={`Track your domain investments`}
+      actions={
+        <button
+          onClick={() => setShowAddModal(true)}
+          disabled={!canAddMore}
+          className="flex items-center gap-2 h-9 px-4 bg-accent text-background rounded-lg 
+                     font-medium text-sm hover:bg-accent-hover transition-colors
+                     disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          <Plus className="w-4 h-4" />
+          Add Domain
+        </button>
+      }
+    >
+      {toast && <Toast message={toast.message} type={toast.type} onClose={hideToast} />}
+
+      <div className="max-w-7xl mx-auto space-y-6">
+        {/* Summary Stats */}
+        {summary && (
+          <div className="grid grid-cols-2 lg:grid-cols-5 gap-4">
+            <div className="p-5 bg-background-secondary/50 border border-border rounded-xl">
+              <p className="text-sm text-foreground-muted mb-1">Total Domains</p>
+              <p className="text-2xl font-display text-foreground">{summary.total_domains}</p>
+            </div>
+            <div className="p-5 bg-background-secondary/50 border border-border rounded-xl">
+              <p className="text-sm text-foreground-muted mb-1">Total Invested</p>
+              <p className="text-2xl font-display text-foreground">${summary.total_invested?.toLocaleString() || 0}</p>
+            </div>
+            <div className="p-5 bg-background-secondary/50 border border-border rounded-xl">
+              <p className="text-sm text-foreground-muted mb-1">Est. Value</p>
+              <p className="text-2xl font-display text-foreground">${summary.total_value?.toLocaleString() || 0}</p>
+            </div>
+            <div className={clsx(
+              "p-5 border rounded-xl",
+              (summary.total_profit || 0) >= 0 
+                ? "bg-accent/5 border-accent/20" 
+                : "bg-red-500/5 border-red-500/20"
+            )}>
+              <p className="text-sm text-foreground-muted mb-1">Profit/Loss</p>
+              <p className={clsx(
+                "text-2xl font-display",
+                (summary.total_profit || 0) >= 0 ? "text-accent" : "text-red-400"
+              )}>
+                {(summary.total_profit || 0) >= 0 ? '+' : ''}${summary.total_profit?.toLocaleString() || 0}
+              </p>
+            </div>
+            <div className="p-5 bg-background-secondary/50 border border-border rounded-xl">
+              <p className="text-sm text-foreground-muted mb-1">Sold</p>
+              <p className="text-2xl font-display text-foreground">{summary.sold_domains || 0}</p>
+            </div>
+          </div>
+        )}
+
+        {!canAddMore && (
+          <div className="flex items-center justify-between p-4 bg-amber-500/10 border border-amber-500/20 rounded-xl">
+            <p className="text-sm text-amber-400">
+              You've reached your portfolio limit. Upgrade to add more.
+            </p>
+            <Link
+              href="/pricing"
+              className="text-sm font-medium text-amber-400 hover:text-amber-300 flex items-center gap-1"
+            >
+              Upgrade <ArrowUpRight className="w-3 h-3" />
+            </Link>
+          </div>
+        )}
+
+        {/* Domain List */}
+        {loading ? (
+          <div className="space-y-3">
+            {[...Array(3)].map((_, i) => (
+              <div key={i} className="h-24 bg-background-secondary/50 border border-border rounded-xl animate-pulse" />
+            ))}
+          </div>
+        ) : portfolio.length === 0 ? (
+          <div className="text-center py-16 bg-background-secondary/30 border border-border rounded-xl">
+            <div className="w-16 h-16 bg-foreground/5 rounded-2xl flex items-center justify-center mx-auto mb-4">
+              <Plus className="w-8 h-8 text-foreground-subtle" />
+            </div>
+            <p className="text-foreground-muted mb-2">Your portfolio is empty</p>
+            <p className="text-sm text-foreground-subtle mb-4">Add your first domain to start tracking investments</p>
+            <button
+              onClick={() => setShowAddModal(true)}
+              className="inline-flex items-center gap-2 px-4 py-2 bg-accent text-background rounded-lg font-medium"
+            >
+              <Plus className="w-4 h-4" />
+              Add Domain
+            </button>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {portfolio.map((domain) => (
+              <div
+                key={domain.id}
+                className="group p-5 bg-background-secondary/50 border border-border rounded-xl 
+                           hover:border-foreground/20 transition-all"
+              >
+                <div className="flex flex-col lg:flex-row lg:items-center gap-4">
+                  {/* Domain Info */}
+                  <div className="flex-1 min-w-0">
+                    <h3 className="text-lg font-semibold text-foreground mb-2">{domain.domain}</h3>
+                    <div className="flex flex-wrap gap-4 text-sm text-foreground-muted">
+                      {domain.purchase_price && (
+                        <span className="flex items-center gap-1.5">
+                          <DollarSign className="w-3.5 h-3.5" />
+                          Bought: ${domain.purchase_price}
+                        </span>
+                      )}
+                      {domain.registrar && (
+                        <span className="flex items-center gap-1.5">
+                          <Building className="w-3.5 h-3.5" />
+                          {domain.registrar}
+                        </span>
+                      )}
+                      {domain.renewal_date && (
+                        <span className="flex items-center gap-1.5">
+                          <Calendar className="w-3.5 h-3.5" />
+                          Renews: {new Date(domain.renewal_date).toLocaleDateString()}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* Valuation */}
+                  {domain.current_valuation && (
+                    <div className="text-right">
+                      <p className="text-xl font-semibold text-foreground">
+                        ${domain.current_valuation.toLocaleString()}
+                      </p>
+                      <p className="text-xs text-foreground-subtle">Est. Value</p>
+                    </div>
+                  )}
+
+                  {/* Actions */}
+                  <div className="flex items-center gap-2">
+                    <button
+                      onClick={() => handleValuate(domain)}
+                      className="p-2 text-foreground-muted hover:text-accent hover:bg-accent/10 rounded-lg transition-colors"
+                      title="Get valuation"
+                    >
+                      <Sparkles className="w-4 h-4" />
+                    </button>
+                    <button
+                      onClick={() => handleRefresh(domain)}
+                      disabled={refreshingId === domain.id}
+                      className="p-2 text-foreground-muted hover:bg-foreground/5 rounded-lg transition-colors"
+                      title="Refresh valuation"
+                    >
+                      <RefreshCw className={clsx("w-4 h-4", refreshingId === domain.id && "animate-spin")} />
+                    </button>
+                    <button
+                      onClick={() => openEditModal(domain)}
+                      className="p-2 text-foreground-muted hover:bg-foreground/5 rounded-lg transition-colors"
+                      title="Edit"
+                    >
+                      <Edit2 className="w-4 h-4" />
+                    </button>
+                    <button
+                      onClick={() => openSellModal(domain)}
+                      className="px-3 py-2 text-sm font-medium text-accent hover:bg-accent/10 rounded-lg transition-colors"
+                    >
+                      Sell
+                    </button>
+                    <button
+                      onClick={() => handleDelete(domain)}
+                      className="p-2 text-foreground-muted hover:text-red-400 hover:bg-red-400/10 rounded-lg transition-colors"
+                      title="Remove"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Add Modal */}
+      {showAddModal && (
+        <Modal title="Add Domain to Portfolio" onClose={() => setShowAddModal(false)}>
+          <form onSubmit={handleAddDomain} className="space-y-4">
+            <div>
+              <label className="block text-sm text-foreground-muted mb-1">Domain *</label>
+              <input
+                type="text"
+                value={addForm.domain}
+                onChange={(e) => setAddForm({ ...addForm, domain: e.target.value })}
+                placeholder="example.com"
+                className="w-full h-10 px-3 bg-background border border-border rounded-lg text-foreground"
+                required
+              />
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm text-foreground-muted mb-1">Purchase Price</label>
+                <input
+                  type="number"
+                  value={addForm.purchase_price}
+                  onChange={(e) => setAddForm({ ...addForm, purchase_price: e.target.value })}
+                  placeholder="100"
+                  className="w-full h-10 px-3 bg-background border border-border rounded-lg text-foreground"
+                />
+              </div>
+              <div>
+                <label className="block text-sm text-foreground-muted mb-1">Purchase Date</label>
+                <input
+                  type="date"
+                  value={addForm.purchase_date}
+                  onChange={(e) => setAddForm({ ...addForm, purchase_date: e.target.value })}
+                  className="w-full h-10 px-3 bg-background border border-border rounded-lg text-foreground"
+                />
+              </div>
+            </div>
+            <div>
+              <label className="block text-sm text-foreground-muted mb-1">Registrar</label>
+              <input
+                type="text"
+                value={addForm.registrar}
+                onChange={(e) => setAddForm({ ...addForm, registrar: e.target.value })}
+                placeholder="Namecheap"
+                className="w-full h-10 px-3 bg-background border border-border rounded-lg text-foreground"
+              />
+            </div>
+            <div className="flex justify-end gap-3">
+              <button
+                type="button"
+                onClick={() => setShowAddModal(false)}
+                className="px-4 py-2 text-foreground-muted hover:text-foreground"
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                disabled={addingDomain || !addForm.domain.trim()}
+                className="flex items-center gap-2 px-4 py-2 bg-accent text-background rounded-lg font-medium
+                           disabled:opacity-50"
+              >
+                {addingDomain && <Loader2 className="w-4 h-4 animate-spin" />}
+                Add Domain
+              </button>
+            </div>
+          </form>
+        </Modal>
+      )}
+
+      {/* Valuation Modal */}
+      {showValuationModal && (
+        <Modal title="Domain Valuation" onClose={() => { setShowValuationModal(false); setValuation(null); }}>
+          {valuatingDomain ? (
+            <div className="flex items-center justify-center py-8">
+              <Loader2 className="w-6 h-6 animate-spin text-accent" />
+            </div>
+          ) : valuation ? (
+            <div className="space-y-4">
+              <div className="text-center p-6 bg-accent/5 border border-accent/20 rounded-xl">
+                <p className="text-4xl font-display text-accent">${valuation.estimated_value.toLocaleString()}</p>
+                <p className="text-sm text-foreground-muted mt-1">Estimated Value</p>
+              </div>
+              <div className="space-y-2 text-sm">
+                <div className="flex justify-between">
+                  <span className="text-foreground-muted">Confidence</span>
+                  <span className="text-foreground capitalize">{valuation.confidence}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-foreground-muted">Formula</span>
+                  <span className="text-foreground font-mono text-xs">{valuation.valuation_formula}</span>
+                </div>
+              </div>
+            </div>
+          ) : null}
+        </Modal>
+      )}
+    </CommandCenterLayout>
+  )
+}
+
+// Simple Modal Component
+function Modal({ title, children, onClose }: { title: string; children: React.ReactNode; onClose: () => void }) {
+  return (
+    <div 
+      className="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm flex items-center justify-center p-4"
+      onClick={onClose}
+    >
+      <div 
+        className="w-full max-w-md bg-background-secondary border border-border rounded-2xl shadow-2xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between p-4 border-b border-border">
+          <h3 className="text-lg font-semibold text-foreground">{title}</h3>
+          <button onClick={onClose} className="text-foreground-muted hover:text-foreground">
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+        <div className="p-4">
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+

frontend/src/app/settings/page.tsx

@@ -2,8 +2,7 @@
 
 import { useEffect, useState } from 'react'
 import { useRouter } from 'next/navigation'
-import { Header } from '@/components/Header'
-import { Footer } from '@/components/Footer'
+import { CommandCenterLayout } from '@/components/CommandCenterLayout'
 import { useStore } from '@/lib/store'
 import { api, PriceAlert } from '@/lib/api'
 import {
@@ -181,34 +180,13 @@ export default function SettingsPage() {
   ]
 
   return (
-    <div className="min-h-screen bg-background relative overflow-hidden">
-      {/* Background Effects - matching landing page */}
-      <div className="fixed inset-0 pointer-events-none">
-        <div className="absolute top-[-20%] left-1/2 -translate-x-1/2 w-[1200px] h-[800px] bg-accent/[0.03] rounded-full blur-[120px]" />
-        <div className="absolute bottom-[-10%] right-[-10%] w-[600px] h-[600px] bg-accent/[0.02] rounded-full blur-[100px]" />
-        <div 
-          className="absolute inset-0 opacity-[0.015]"
-          style={{
-            backgroundImage: `linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px)`,
-            backgroundSize: '64px 64px',
-          }}
-        />
-      </div>
-      
-      <Header />
+    <CommandCenterLayout
+      title="Settings"
+      subtitle="Manage your account"
+    >
 
-      <main className="relative flex-1 pt-32 sm:pt-40 pb-20 sm:pb-28 px-4 sm:px-6 lg:px-8">
-        <div className="max-w-7xl mx-auto">
-          {/* Header */}
-          <div className="mb-12 sm:mb-16 animate-fade-in">
-            <span className="text-sm font-semibold text-accent uppercase tracking-wider">Settings</span>
-            <h1 className="mt-4 font-display text-[2rem] sm:text-[2.75rem] md:text-[3.5rem] leading-[1.1] tracking-[-0.03em] text-foreground">
-              Your account.
-            </h1>
-            <p className="mt-3 text-lg text-foreground-muted">
-              Your rules. Configure everything in one place.
-            </p>
-          </div>
+      <main className="max-w-5xl mx-auto">
+        <div className="space-y-8">
 
           {/* Messages */}
           {error && (
@@ -735,9 +713,7 @@ export default function SettingsPage() {
           </div>
         </div>
       </main>
-
-      <Footer />
-    </div>
+    </CommandCenterLayout>
   )
 }
 

frontend/src/app/watchlist/page.tsx

@@ -0,0 +1,494 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useStore } from '@/lib/store'
+import { api } from '@/lib/api'
+import { CommandCenterLayout } from '@/components/CommandCenterLayout'
+import { Toast, useToast } from '@/components/Toast'
+import {
+  Plus,
+  Trash2,
+  RefreshCw,
+  Loader2,
+  Bell,
+  BellOff,
+  History,
+  ExternalLink,
+  MoreVertical,
+  Search,
+  Filter,
+  ArrowUpRight,
+} from 'lucide-react'
+import clsx from 'clsx'
+import Link from 'next/link'
+
+interface DomainHistory {
+  id: number
+  status: string
+  is_available: boolean
+  checked_at: string
+}
+
+// Status indicator component with traffic light system
+function StatusIndicator({ domain }: { domain: any }) {
+  // Determine status based on domain data
+  let status: 'available' | 'watching' | 'stable' = 'stable'
+  let label = 'Stable'
+  let description = 'Domain is registered and active'
+  
+  if (domain.is_available) {
+    status = 'available'
+    label = 'Available'
+    description = 'Domain is available for registration!'
+  } else if (domain.status === 'checking' || domain.status === 'pending') {
+    status = 'watching'
+    label = 'Watching'
+    description = 'Monitoring for changes'
+  }
+  
+  const colors = {
+    available: 'bg-accent text-accent',
+    watching: 'bg-amber-400 text-amber-400',
+    stable: 'bg-foreground-muted text-foreground-muted',
+  }
+  
+  return (
+    <div className="flex items-center gap-3">
+      <div className="relative">
+        <span className={clsx(
+          "block w-3 h-3 rounded-full",
+          colors[status].split(' ')[0]
+        )} />
+        {status === 'available' && (
+          <span className={clsx(
+            "absolute inset-0 rounded-full animate-ping opacity-75",
+            colors[status].split(' ')[0]
+          )} />
+        )}
+      </div>
+      <div>
+        <p className={clsx(
+          "text-sm font-medium",
+          status === 'available' ? 'text-accent' : 
+          status === 'watching' ? 'text-amber-400' : 'text-foreground-muted'
+        )}>
+          {label}
+        </p>
+        <p className="text-xs text-foreground-subtle hidden sm:block">{description}</p>
+      </div>
+    </div>
+  )
+}
+
+export default function WatchlistPage() {
+  const { domains, addDomain, deleteDomain, refreshDomain, subscription } = useStore()
+  const { toast, showToast, hideToast } = useToast()
+  
+  const [newDomain, setNewDomain] = useState('')
+  const [adding, setAdding] = useState(false)
+  const [refreshingId, setRefreshingId] = useState<number | null>(null)
+  const [deletingId, setDeletingId] = useState<number | null>(null)
+  const [selectedDomainId, setSelectedDomainId] = useState<number | null>(null)
+  const [domainHistory, setDomainHistory] = useState<DomainHistory[] | null>(null)
+  const [loadingHistory, setLoadingHistory] = useState(false)
+  const [togglingNotifyId, setTogglingNotifyId] = useState<number | null>(null)
+  const [filterStatus, setFilterStatus] = useState<'all' | 'available' | 'watching'>('all')
+  const [searchQuery, setSearchQuery] = useState('')
+
+  // Filter domains
+  const filteredDomains = domains?.filter(domain => {
+    // Search filter
+    if (searchQuery && !domain.name.toLowerCase().includes(searchQuery.toLowerCase())) {
+      return false
+    }
+    // Status filter
+    if (filterStatus === 'available' && !domain.is_available) return false
+    if (filterStatus === 'watching' && domain.is_available) return false
+    return true
+  }) || []
+
+  // Stats
+  const availableCount = domains?.filter(d => d.is_available).length || 0
+  const watchingCount = domains?.filter(d => !d.is_available).length || 0
+
+  const handleAddDomain = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!newDomain.trim()) return
+    
+    setAdding(true)
+    try {
+      await addDomain(newDomain.trim())
+      setNewDomain('')
+      showToast(`Added ${newDomain.trim()} to watchlist`, 'success')
+    } catch (err: any) {
+      showToast(err.message || 'Failed to add domain', 'error')
+    } finally {
+      setAdding(false)
+    }
+  }
+
+  const handleRefresh = async (id: number) => {
+    setRefreshingId(id)
+    try {
+      await refreshDomain(id)
+      showToast('Domain status refreshed', 'success')
+    } catch (err: any) {
+      showToast(err.message || 'Failed to refresh', 'error')
+    } finally {
+      setRefreshingId(null)
+    }
+  }
+
+  const handleDelete = async (id: number, name: string) => {
+    if (!confirm(`Remove ${name} from your watchlist?`)) return
+    
+    setDeletingId(id)
+    try {
+      await deleteDomain(id)
+      showToast(`Removed ${name} from watchlist`, 'success')
+    } catch (err: any) {
+      showToast(err.message || 'Failed to remove', 'error')
+    } finally {
+      setDeletingId(null)
+    }
+  }
+
+  const handleToggleNotify = async (id: number, currentState: boolean) => {
+    setTogglingNotifyId(id)
+    try {
+      await api.updateDomainNotify(id, !currentState)
+      showToast(
+        !currentState ? 'Notifications enabled' : 'Notifications disabled',
+        'success'
+      )
+    } catch (err: any) {
+      showToast(err.message || 'Failed to update', 'error')
+    } finally {
+      setTogglingNotifyId(null)
+    }
+  }
+
+  const loadHistory = async (domainId: number) => {
+    if (selectedDomainId === domainId) {
+      setSelectedDomainId(null)
+      setDomainHistory(null)
+      return
+    }
+    
+    setSelectedDomainId(domainId)
+    setLoadingHistory(true)
+    try {
+      const history = await api.getDomainHistory(domainId)
+      setDomainHistory(history)
+    } catch (err) {
+      setDomainHistory([])
+    } finally {
+      setLoadingHistory(false)
+    }
+  }
+
+  const domainLimit = subscription?.domain_limit || 5
+  const domainsUsed = domains?.length || 0
+  const canAddMore = domainsUsed < domainLimit
+
+  return (
+    <CommandCenterLayout
+      title="Watchlist"
+      subtitle={`${domainsUsed}/${domainLimit} domains tracked`}
+    >
+      {toast && <Toast message={toast.message} type={toast.type} onClose={hideToast} />}
+
+      <div className="max-w-6xl mx-auto space-y-6">
+        {/* Stats Cards */}
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+          <div className="p-4 bg-background-secondary/50 border border-border rounded-xl">
+            <p className="text-sm text-foreground-muted mb-1">Total Watched</p>
+            <p className="text-2xl font-display text-foreground">{domainsUsed}</p>
+          </div>
+          <div className="p-4 bg-accent/5 border border-accent/20 rounded-xl">
+            <p className="text-sm text-foreground-muted mb-1">Available</p>
+            <p className="text-2xl font-display text-accent">{availableCount}</p>
+          </div>
+          <div className="p-4 bg-background-secondary/50 border border-border rounded-xl">
+            <p className="text-sm text-foreground-muted mb-1">Watching</p>
+            <p className="text-2xl font-display text-foreground">{watchingCount}</p>
+          </div>
+          <div className="p-4 bg-background-secondary/50 border border-border rounded-xl">
+            <p className="text-sm text-foreground-muted mb-1">Limit</p>
+            <p className="text-2xl font-display text-foreground">{domainLimit === -1 ? '∞' : domainLimit}</p>
+          </div>
+        </div>
+
+        {/* Add Domain Form */}
+        <form onSubmit={handleAddDomain} className="flex gap-3">
+          <div className="flex-1 relative">
+            <input
+              type="text"
+              value={newDomain}
+              onChange={(e) => setNewDomain(e.target.value)}
+              placeholder="Enter domain to track (e.g., dream.com)"
+              disabled={!canAddMore}
+              className={clsx(
+                "w-full h-12 px-4 bg-background-secondary border border-border rounded-xl",
+                "text-foreground placeholder:text-foreground-subtle",
+                "focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent",
+                "disabled:opacity-50 disabled:cursor-not-allowed"
+              )}
+            />
+          </div>
+          <button
+            type="submit"
+            disabled={adding || !newDomain.trim() || !canAddMore}
+            className={clsx(
+              "flex items-center gap-2 h-12 px-6 rounded-xl font-medium transition-all",
+              "bg-accent text-background hover:bg-accent-hover",
+              "disabled:opacity-50 disabled:cursor-not-allowed"
+            )}
+          >
+            {adding ? (
+              <Loader2 className="w-4 h-4 animate-spin" />
+            ) : (
+              <Plus className="w-4 h-4" />
+            )}
+            Add
+          </button>
+        </form>
+
+        {!canAddMore && (
+          <div className="flex items-center justify-between p-4 bg-amber-500/10 border border-amber-500/20 rounded-xl">
+            <p className="text-sm text-amber-400">
+              You've reached your domain limit. Upgrade to track more.
+            </p>
+            <Link
+              href="/pricing"
+              className="text-sm font-medium text-amber-400 hover:text-amber-300 flex items-center gap-1"
+            >
+              Upgrade <ArrowUpRight className="w-3 h-3" />
+            </Link>
+          </div>
+        )}
+
+        {/* Filters */}
+        <div className="flex flex-col sm:flex-row gap-3 sm:items-center sm:justify-between">
+          <div className="flex gap-2">
+            <button
+              onClick={() => setFilterStatus('all')}
+              className={clsx(
+                "px-4 py-2 text-sm rounded-lg transition-colors",
+                filterStatus === 'all' 
+                  ? "bg-foreground/10 text-foreground" 
+                  : "text-foreground-muted hover:bg-foreground/5"
+              )}
+            >
+              All ({domainsUsed})
+            </button>
+            <button
+              onClick={() => setFilterStatus('available')}
+              className={clsx(
+                "px-4 py-2 text-sm rounded-lg transition-colors flex items-center gap-2",
+                filterStatus === 'available' 
+                  ? "bg-accent/10 text-accent" 
+                  : "text-foreground-muted hover:bg-foreground/5"
+              )}
+            >
+              <span className="w-2 h-2 rounded-full bg-accent" />
+              Available ({availableCount})
+            </button>
+            <button
+              onClick={() => setFilterStatus('watching')}
+              className={clsx(
+                "px-4 py-2 text-sm rounded-lg transition-colors flex items-center gap-2",
+                filterStatus === 'watching' 
+                  ? "bg-foreground/10 text-foreground" 
+                  : "text-foreground-muted hover:bg-foreground/5"
+              )}
+            >
+              <span className="w-2 h-2 rounded-full bg-foreground-muted" />
+              Watching ({watchingCount})
+            </button>
+          </div>
+          
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-foreground-muted" />
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Search domains..."
+              className="w-full sm:w-64 h-10 pl-9 pr-4 bg-background-secondary border border-border rounded-lg
+                         text-sm text-foreground placeholder:text-foreground-subtle
+                         focus:outline-none focus:border-accent"
+            />
+          </div>
+        </div>
+
+        {/* Domain List */}
+        <div className="space-y-3">
+          {filteredDomains.length === 0 ? (
+            <div className="text-center py-16 bg-background-secondary/30 border border-border rounded-xl">
+              {domainsUsed === 0 ? (
+                <>
+                  <div className="w-16 h-16 bg-foreground/5 rounded-2xl flex items-center justify-center mx-auto mb-4">
+                    <Plus className="w-8 h-8 text-foreground-subtle" />
+                  </div>
+                  <p className="text-foreground-muted mb-2">Your watchlist is empty</p>
+                  <p className="text-sm text-foreground-subtle">Add a domain above to start tracking</p>
+                </>
+              ) : (
+                <>
+                  <Filter className="w-8 h-8 text-foreground-subtle mx-auto mb-4" />
+                  <p className="text-foreground-muted">No domains match your filters</p>
+                </>
+              )}
+            </div>
+          ) : (
+            filteredDomains.map((domain) => (
+              <div
+                key={domain.id}
+                className={clsx(
+                  "group p-4 sm:p-5 rounded-xl border transition-all duration-200",
+                  domain.is_available
+                    ? "bg-accent/5 border-accent/20 hover:border-accent/40"
+                    : "bg-background-secondary/50 border-border hover:border-foreground/20"
+                )}
+              >
+                <div className="flex flex-col sm:flex-row sm:items-center gap-4">
+                  {/* Domain Name + Status */}
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-3 mb-2">
+                      <h3 className="text-lg font-semibold text-foreground truncate">
+                        {domain.name}
+                      </h3>
+                      {domain.is_available && (
+                        <span className="shrink-0 px-2 py-0.5 bg-accent/20 text-accent text-xs font-semibold rounded-full">
+                          GRAB IT!
+                        </span>
+                      )}
+                    </div>
+                    <StatusIndicator domain={domain} />
+                  </div>
+
+                  {/* Actions */}
+                  <div className="flex items-center gap-2 shrink-0">
+                    {/* Notify Toggle */}
+                    <button
+                      onClick={() => handleToggleNotify(domain.id, domain.notify_on_available)}
+                      disabled={togglingNotifyId === domain.id}
+                      className={clsx(
+                        "p-2 rounded-lg transition-colors",
+                        domain.notify_on_available 
+                          ? "bg-accent/10 text-accent hover:bg-accent/20" 
+                          : "text-foreground-muted hover:bg-foreground/5"
+                      )}
+                      title={domain.notify_on_available ? "Disable alerts" : "Enable alerts"}
+                    >
+                      {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>
+
+                    {/* History */}
+                    <button
+                      onClick={() => loadHistory(domain.id)}
+                      className={clsx(
+                        "p-2 rounded-lg transition-colors",
+                        selectedDomainId === domain.id
+                          ? "bg-foreground/10 text-foreground"
+                          : "text-foreground-muted hover:bg-foreground/5"
+                      )}
+                      title="View history"
+                    >
+                      <History className="w-4 h-4" />
+                    </button>
+
+                    {/* Refresh */}
+                    <button
+                      onClick={() => handleRefresh(domain.id)}
+                      disabled={refreshingId === domain.id}
+                      className="p-2 rounded-lg text-foreground-muted hover:bg-foreground/5 transition-colors"
+                      title="Refresh status"
+                    >
+                      <RefreshCw className={clsx(
+                        "w-4 h-4",
+                        refreshingId === domain.id && "animate-spin"
+                      )} />
+                    </button>
+
+                    {/* Delete */}
+                    <button
+                      onClick={() => handleDelete(domain.id, domain.name)}
+                      disabled={deletingId === domain.id}
+                      className="p-2 rounded-lg text-foreground-muted hover:text-red-400 hover:bg-red-400/10 transition-colors"
+                      title="Remove"
+                    >
+                      {deletingId === domain.id ? (
+                        <Loader2 className="w-4 h-4 animate-spin" />
+                      ) : (
+                        <Trash2 className="w-4 h-4" />
+                      )}
+                    </button>
+
+                    {/* External Link (if available) */}
+                    {domain.is_available && (
+                      <a
+                        href={`https://www.namecheap.com/domains/registration/results/?domain=${domain.name}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="flex items-center gap-2 px-4 py-2 bg-accent text-background rounded-lg 
+                                   font-medium text-sm hover:bg-accent-hover transition-colors"
+                      >
+                        Register
+                        <ExternalLink className="w-3 h-3" />
+                      </a>
+                    )}
+                  </div>
+                </div>
+
+                {/* History Panel */}
+                {selectedDomainId === domain.id && (
+                  <div className="mt-4 pt-4 border-t border-border/50">
+                    <h4 className="text-sm font-medium text-foreground-muted mb-3">Status History</h4>
+                    {loadingHistory ? (
+                      <div className="flex items-center gap-2 text-foreground-muted">
+                        <Loader2 className="w-4 h-4 animate-spin" />
+                        <span className="text-sm">Loading...</span>
+                      </div>
+                    ) : domainHistory && domainHistory.length > 0 ? (
+                      <div className="space-y-2">
+                        {domainHistory.slice(0, 5).map((entry) => (
+                          <div 
+                            key={entry.id}
+                            className="flex items-center gap-3 text-sm"
+                          >
+                            <span className={clsx(
+                              "w-2 h-2 rounded-full",
+                              entry.is_available ? "bg-accent" : "bg-foreground-muted"
+                            )} />
+                            <span className="text-foreground-muted">
+                              {new Date(entry.checked_at).toLocaleDateString()} at{' '}
+                              {new Date(entry.checked_at).toLocaleTimeString()}
+                            </span>
+                            <span className="text-foreground">
+                              {entry.is_available ? 'Available' : 'Registered'}
+                            </span>
+                          </div>
+                        ))}
+                      </div>
+                    ) : (
+                      <p className="text-sm text-foreground-subtle">No history available yet</p>
+                    )}
+                  </div>
+                )}
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+    </CommandCenterLayout>
+  )
+}
+

frontend/src/components/CommandCenterLayout.tsx

@@ -0,0 +1,238 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { useStore } from '@/lib/store'
+import { Sidebar } from './Sidebar'
+import { Bell, Search, X } from 'lucide-react'
+import Link from 'next/link'
+import clsx from 'clsx'
+
+interface CommandCenterLayoutProps {
+  children: React.ReactNode
+  title?: string
+  subtitle?: string
+  actions?: React.ReactNode
+}
+
+export function CommandCenterLayout({ 
+  children, 
+  title, 
+  subtitle,
+  actions 
+}: CommandCenterLayoutProps) {
+  const router = useRouter()
+  const { isAuthenticated, isLoading, checkAuth, domains } = useStore()
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
+  const [notificationsOpen, setNotificationsOpen] = useState(false)
+  const [searchOpen, setSearchOpen] = useState(false)
+  const [searchQuery, setSearchQuery] = useState('')
+
+  // Load sidebar state from localStorage
+  useEffect(() => {
+    const saved = localStorage.getItem('sidebar-collapsed')
+    if (saved) {
+      setSidebarCollapsed(saved === 'true')
+    }
+  }, [])
+
+  useEffect(() => {
+    checkAuth()
+  }, [checkAuth])
+
+  useEffect(() => {
+    if (!isLoading && !isAuthenticated) {
+      router.push('/login')
+    }
+  }, [isLoading, isAuthenticated, router])
+
+  // Available domains for notifications
+  const availableDomains = domains?.filter(d => d.is_available) || []
+  const hasNotifications = availableDomains.length > 0
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-background">
+        <div className="w-6 h-6 border-2 border-accent border-t-transparent rounded-full animate-spin" />
+      </div>
+    )
+  }
+
+  if (!isAuthenticated) {
+    return null
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Sidebar */}
+      <Sidebar 
+        collapsed={sidebarCollapsed} 
+        onCollapsedChange={setSidebarCollapsed} 
+      />
+
+      {/* Main Content Area */}
+      <div 
+        className={clsx(
+          "min-h-screen transition-all duration-300",
+          sidebarCollapsed ? "ml-[72px]" : "ml-[240px]"
+        )}
+      >
+        {/* Top Bar */}
+        <header className="sticky top-0 z-30 h-16 sm:h-20 bg-background/80 backdrop-blur-xl border-b border-border/50">
+          <div className="h-full px-6 flex items-center justify-between">
+            {/* Left: Title */}
+            <div>
+              {title && (
+                <h1 className="text-xl sm:text-2xl font-display text-foreground">{title}</h1>
+              )}
+              {subtitle && (
+                <p className="text-sm text-foreground-muted mt-0.5">{subtitle}</p>
+              )}
+            </div>
+
+            {/* Right: Actions */}
+            <div className="flex items-center gap-3">
+              {/* Quick Search */}
+              <button
+                onClick={() => setSearchOpen(true)}
+                className="hidden sm:flex items-center gap-2 h-9 px-4 bg-foreground/5 hover:bg-foreground/10 
+                           border border-border/50 rounded-lg text-sm text-foreground-muted 
+                           hover:text-foreground transition-all duration-200"
+              >
+                <Search className="w-4 h-4" />
+                <span>Search domains...</span>
+                <kbd className="hidden md:inline-flex items-center h-5 px-1.5 bg-background border border-border 
+                                rounded text-[10px] text-foreground-subtle font-mono">⌘K</kbd>
+              </button>
+
+              {/* Notifications */}
+              <div className="relative">
+                <button
+                  onClick={() => setNotificationsOpen(!notificationsOpen)}
+                  className={clsx(
+                    "relative flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-200",
+                    notificationsOpen 
+                      ? "bg-foreground/10 text-foreground" 
+                      : "text-foreground-muted hover:text-foreground hover:bg-foreground/5"
+                  )}
+                >
+                  <Bell className="w-4.5 h-4.5" />
+                  {hasNotifications && (
+                    <span className="absolute top-1.5 right-1.5 w-2 h-2 bg-accent rounded-full">
+                      <span className="absolute inset-0 rounded-full bg-accent animate-ping opacity-50" />
+                    </span>
+                  )}
+                </button>
+
+                {/* Notifications Dropdown */}
+                {notificationsOpen && (
+                  <div className="absolute right-0 top-full mt-2 w-80 bg-background-secondary border border-border 
+                                  rounded-xl shadow-2xl overflow-hidden">
+                    <div className="p-4 border-b border-border flex items-center justify-between">
+                      <h3 className="text-sm font-medium text-foreground">Notifications</h3>
+                      <button 
+                        onClick={() => setNotificationsOpen(false)}
+                        className="text-foreground-muted hover:text-foreground"
+                      >
+                        <X className="w-4 h-4" />
+                      </button>
+                    </div>
+                    <div className="max-h-80 overflow-y-auto">
+                      {availableDomains.length > 0 ? (
+                        <div className="p-2">
+                          {availableDomains.slice(0, 5).map((domain) => (
+                            <Link
+                              key={domain.id}
+                              href="/watchlist"
+                              onClick={() => setNotificationsOpen(false)}
+                              className="flex items-start gap-3 p-3 hover:bg-foreground/5 rounded-lg transition-colors"
+                            >
+                              <div className="w-8 h-8 bg-accent/10 rounded-lg flex items-center justify-center shrink-0">
+                                <span className="w-2 h-2 bg-accent rounded-full animate-pulse" />
+                              </div>
+                              <div className="flex-1 min-w-0">
+                                <p className="text-sm font-medium text-foreground truncate">{domain.name}</p>
+                                <p className="text-xs text-accent">Available now!</p>
+                              </div>
+                            </Link>
+                          ))}
+                        </div>
+                      ) : (
+                        <div className="p-8 text-center">
+                          <Bell className="w-8 h-8 text-foreground-subtle mx-auto mb-3" />
+                          <p className="text-sm text-foreground-muted">No notifications</p>
+                          <p className="text-xs text-foreground-subtle mt-1">
+                            We'll notify you when domains become available
+                          </p>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              {/* Custom Actions */}
+              {actions}
+            </div>
+          </div>
+        </header>
+
+        {/* Page Content */}
+        <main className="p-6 lg:p-8">
+          {children}
+        </main>
+      </div>
+
+      {/* Quick Search Modal */}
+      {searchOpen && (
+        <div 
+          className="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm flex items-start justify-center pt-[20vh]"
+          onClick={() => setSearchOpen(false)}
+        >
+          <div 
+            className="w-full max-w-xl bg-background-secondary border border-border rounded-2xl shadow-2xl overflow-hidden"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-center gap-3 p-4 border-b border-border">
+              <Search className="w-5 h-5 text-foreground-muted" />
+              <input
+                type="text"
+                placeholder="Search domains, TLDs, auctions..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="flex-1 bg-transparent text-foreground placeholder:text-foreground-subtle 
+                           outline-none text-lg"
+                autoFocus
+              />
+              <kbd className="hidden sm:flex items-center h-6 px-2 bg-background border border-border 
+                              rounded text-xs text-foreground-subtle font-mono">ESC</kbd>
+            </div>
+            <div className="p-4 text-center text-foreground-muted text-sm">
+              Start typing to search...
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Keyboard shortcut for search */}
+      <KeyboardShortcut onTrigger={() => setSearchOpen(true)} keys={['Meta', 'k']} />
+    </div>
+  )
+}
+
+// Keyboard shortcut component
+function KeyboardShortcut({ onTrigger, keys }: { onTrigger: () => void, keys: string[] }) {
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (keys.includes('Meta') && e.metaKey && e.key === 'k') {
+        e.preventDefault()
+        onTrigger()
+      }
+    }
+    document.addEventListener('keydown', handler)
+    return () => document.removeEventListener('keydown', handler)
+  }, [onTrigger, keys])
+  
+  return null
+}
+

frontend/src/components/Header.tsx

@@ -4,79 +4,60 @@ import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { useStore } from '@/lib/store'
 import { 
-  LogOut, 
-  LayoutDashboard, 
   Menu, 
   X, 
-  Settings, 
-  Bell, 
-  User, 
-  ChevronDown, 
   TrendingUp, 
   Gavel,
   CreditCard,
-  Search,
-  Shield,
+  LayoutDashboard,
 } from 'lucide-react'
-import { useState, useRef, useEffect } from 'react'
+import { useState, useEffect } from 'react'
 import clsx from 'clsx'
 
+/**
+ * Public Header Component
+ * 
+ * Used for:
+ * - Landing page (/)
+ * - Public pages (pricing, about, contact, blog, etc.)
+ * - Auth pages (login, register)
+ * 
+ * For logged-in users in the Command Center, use CommandCenterLayout instead.
+ */
 export function Header() {
   const pathname = usePathname()
-  const { isAuthenticated, user, logout, domains, subscription } = useStore()
+  const { isAuthenticated, user, logout, subscription } = useStore()
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
-  const [userMenuOpen, setUserMenuOpen] = useState(false)
-  const [notificationsOpen, setNotificationsOpen] = useState(false)
-  const userMenuRef = useRef<HTMLDivElement>(null)
-  const notificationsRef = useRef<HTMLDivElement>(null)
-
-  // Close dropdowns when clicking outside
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (userMenuRef.current && !userMenuRef.current.contains(event.target as Node)) {
-        setUserMenuOpen(false)
-      }
-      if (notificationsRef.current && !notificationsRef.current.contains(event.target as Node)) {
-        setNotificationsOpen(false)
-      }
-    }
-    document.addEventListener('mousedown', handleClickOutside)
-    return () => document.removeEventListener('mousedown', handleClickOutside)
-  }, [])
 
   // Close mobile menu on route change
   useEffect(() => {
     setMobileMenuOpen(false)
   }, [pathname])
 
-  // Count notifications (available domains, etc.)
-  const availableDomains = domains?.filter(d => d.is_available) || []
-  const hasNotifications = availableDomains.length > 0
-
   const tierName = subscription?.tier_name || subscription?.tier || 'Scout'
 
-  // Public navigation - for visitors (consistent naming with concept)
+  // Public navigation - same for all visitors
   const publicNavItems = [
     { href: '/auctions', label: 'Market', icon: Gavel },
     { href: '/tld-pricing', label: 'TLD Intel', icon: TrendingUp },
     { href: '/pricing', label: 'Pricing', icon: CreditCard },
   ]
 
-  // Command Center navigation - for logged in users
-  const commandCenterNavItems = [
-    { href: '/dashboard', label: 'Dashboard', icon: LayoutDashboard },
-    { href: '/auctions', label: 'Market', icon: Gavel },
-    { href: '/tld-pricing', label: 'Intelligence', icon: TrendingUp },
-  ]
-
-  // Use appropriate nav items based on auth status
-  const navItems = isAuthenticated ? commandCenterNavItems : publicNavItems
-
   const isActive = (href: string) => {
     if (href === '/') return pathname === '/'
     return pathname.startsWith(href)
   }
 
+  // Check if we're on a Command Center page (should use Sidebar instead)
+  const isCommandCenterPage = ['/dashboard', '/watchlist', '/portfolio', '/market', '/intelligence', '/settings', '/admin'].some(
+    path => pathname.startsWith(path)
+  )
+
+  // If logged in and on Command Center page, don't render this header
+  if (isAuthenticated && isCommandCenterPage) {
+    return null
+  }
+
   return (
     <header className="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-xl border-b border-border-subtle">
       <div className="w-full px-4 sm:px-6 lg:px-8 h-16 sm:h-20 flex items-center justify-between">
@@ -97,7 +78,7 @@ export function Header() {
 
           {/* Main Nav Links (Desktop) */}
           <nav className="hidden md:flex items-center h-full gap-1">
-            {navItems.map((item) => (
+            {publicNavItems.map((item) => (
               <Link
                 key={item.href}
                 href={item.href}
@@ -118,144 +99,15 @@ export function Header() {
         <nav className="hidden sm:flex items-center h-full gap-2">
           {isAuthenticated ? (
             <>
-              {/* Notifications */}
-              <div ref={notificationsRef} className="relative">
-                <button
-                  onClick={() => setNotificationsOpen(!notificationsOpen)}
-                  className={clsx(
-                    "relative flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-200",
-                    notificationsOpen 
-                      ? "bg-foreground/10 text-foreground" 
-                      : "text-foreground-muted hover:text-foreground hover:bg-foreground/5"
-                  )}
-                >
-                  <Bell className="w-4 h-4" />
-                  {hasNotifications && (
-                    <span className="absolute top-1.5 right-1.5 w-2 h-2 bg-accent rounded-full">
-                      <span className="absolute inset-0 rounded-full bg-accent animate-ping opacity-50" />
-                    </span>
-                  )}
-                </button>
-
-                {/* Notifications Dropdown */}
-                {notificationsOpen && (
-                  <div className="absolute right-0 top-full mt-2 w-80 bg-background-secondary border border-border rounded-xl shadow-2xl overflow-hidden">
-                    <div className="p-4 border-b border-border">
-                      <h3 className="text-body-sm font-medium text-foreground">Notifications</h3>
-                    </div>
-                    <div className="max-h-80 overflow-y-auto">
-                      {availableDomains.length > 0 ? (
-                        <div className="p-2">
-                          {availableDomains.slice(0, 5).map((domain) => (
-                            <Link
-                              key={domain.id}
-                              href="/dashboard"
-                              onClick={() => setNotificationsOpen(false)}
-                              className="flex items-start gap-3 p-3 hover:bg-foreground/5 rounded-lg transition-colors"
-                            >
-                              <div className="w-8 h-8 bg-accent/10 rounded-lg flex items-center justify-center shrink-0">
-                                <Search className="w-4 h-4 text-accent" />
-                              </div>
-                              <div className="flex-1 min-w-0">
-                                <p className="text-body-sm font-medium text-foreground truncate">{domain.name}</p>
-                                <p className="text-body-xs text-accent">Available now!</p>
-                              </div>
-                            </Link>
-                          ))}
-                          {availableDomains.length > 5 && (
-                            <p className="px-3 py-2 text-body-xs text-foreground-muted">
-                              +{availableDomains.length - 5} more available
-                            </p>
-                          )}
-                        </div>
-                      ) : (
-                        <div className="p-8 text-center">
-                          <Bell className="w-8 h-8 text-foreground-subtle mx-auto mb-3" />
-                          <p className="text-body-sm text-foreground-muted">No notifications</p>
-                          <p className="text-body-xs text-foreground-subtle mt-1">We'll notify you when domains become available</p>
-                        </div>
-                      )}
-                    </div>
-                    <Link
-                      href="/settings"
-                      onClick={() => setNotificationsOpen(false)}
-                      className="block p-3 text-center text-body-xs text-foreground-muted hover:text-foreground hover:bg-foreground/5 border-t border-border transition-colors"
-                    >
-                      Notification settings
-                    </Link>
-                  </div>
-                )}
-              </div>
-
-              {/* User Menu */}
-              <div ref={userMenuRef} className="relative">
-                <button
-                  onClick={() => setUserMenuOpen(!userMenuOpen)}
-                  className={clsx(
-                    "flex items-center gap-2 h-9 pl-3 pr-2 rounded-lg transition-all duration-200",
-                    userMenuOpen ? "bg-foreground/10" : "hover:bg-foreground/5"
-                  )}
-                >
-                  <div className="w-6 h-6 bg-accent/10 rounded-full flex items-center justify-center">
-                    <User className="w-3.5 h-3.5 text-accent" />
-                  </div>
-                  <ChevronDown className={clsx(
-                    "w-3.5 h-3.5 text-foreground-muted transition-transform duration-200",
-                    userMenuOpen && "rotate-180"
-                  )} />
-                </button>
-
-                {/* User Dropdown */}
-                {userMenuOpen && (
-                  <div className="absolute right-0 top-full mt-2 w-64 bg-background-secondary border border-border rounded-xl shadow-2xl overflow-hidden">
-                    {/* User Info */}
-                    <div className="p-4 border-b border-border">
-                      <p className="text-body-sm font-medium text-foreground truncate">{user?.name || user?.email}</p>
-                      <p className="text-body-xs text-foreground-muted truncate">{user?.email}</p>
-                      <div className="flex items-center gap-2 mt-2">
-                        <span className="text-ui-xs px-2 py-0.5 bg-accent/10 text-accent rounded-full font-medium">{tierName}</span>
-                        <span className="text-ui-xs text-foreground-subtle">{subscription?.domains_used || 0}/{subscription?.domain_limit || 5} domains</span>
-                      </div>
-                    </div>
-
-                    {/* Menu Items */}
-                    <div className="p-2">
-                      {user?.is_admin && (
-                        <Link
-                          href="/admin"
-                          onClick={() => setUserMenuOpen(false)}
-                          className="flex items-center gap-3 px-3 py-2.5 text-body-sm text-accent hover:bg-accent/10 rounded-lg transition-colors"
-                        >
-                          <Shield className="w-4 h-4" />
-                          Admin Panel
-                        </Link>
-                      )}
-                      <Link
-                        href="/settings"
-                        onClick={() => setUserMenuOpen(false)}
-                        className="flex items-center gap-3 px-3 py-2.5 text-body-sm text-foreground-muted hover:text-foreground hover:bg-foreground/5 rounded-lg transition-colors"
-                      >
-                        <Settings className="w-4 h-4" />
-                        Settings
-                      </Link>
-                    </div>
-
-                    {/* Logout */}
-                    <div className="p-2 border-t border-border">
-                      <button
-                        onClick={() => {
-                          logout()
-                          setUserMenuOpen(false)
-                        }}
-                        className="flex items-center gap-3 w-full px-3 py-2.5 text-body-sm text-foreground-muted hover:text-foreground hover:bg-foreground/5 rounded-lg transition-colors"
-                      >
-                        <LogOut className="w-4 h-4" />
-                        Sign out
-                      </button>
-                    </div>
-                  </div>
-                )}
-              </div>
+              {/* Go to Command Center */}
+              <Link
+                href="/dashboard"
+                className="flex items-center gap-2 h-9 px-4 text-[0.8125rem] bg-accent text-background 
+                           rounded-lg font-medium hover:bg-accent-hover transition-all duration-200"
+              >
+                <LayoutDashboard className="w-4 h-4" />
+                Command Center
+              </Link>
             </>
           ) : (
             <>
@@ -290,21 +142,8 @@ export function Header() {
       {mobileMenuOpen && (
         <div className="sm:hidden border-t border-border bg-background/95 backdrop-blur-xl">
           <nav className="px-4 py-4 space-y-1">
-            {isAuthenticated && (
-              <>
-                {/* User Info on Mobile */}
-                <div className="px-4 py-3 mb-3 bg-foreground/5 rounded-xl">
-                  <p className="text-body-sm font-medium text-foreground truncate">{user?.name || user?.email}</p>
-                  <div className="flex items-center gap-2 mt-1">
-                    <span className="text-ui-xs px-2 py-0.5 bg-accent/10 text-accent rounded-full font-medium">{tierName}</span>
-                    <span className="text-ui-xs text-foreground-subtle">{subscription?.domains_used || 0}/{subscription?.domain_limit || 5} domains</span>
-                  </div>
-                </div>
-              </>
-            )}
-
             {/* Main Nav */}
-            {navItems.map((item) => (
+            {publicNavItems.map((item) => (
               <Link
                 key={item.href}
                 href={item.href}
@@ -320,43 +159,21 @@ export function Header() {
               </Link>
             ))}
 
+            <div className="my-3 border-t border-border" />
+
             {isAuthenticated ? (
               <>
-                <div className="my-3 border-t border-border" />
-                {user?.is_admin && (
-                  <Link
-                    href="/admin"
-                    onClick={() => setMobileMenuOpen(false)}
-                    className="flex items-center gap-3 px-4 py-3 text-body-sm text-accent 
-                               hover:bg-accent/10 rounded-xl transition-all duration-200"
-                  >
-                    <Shield className="w-5 h-5" />
-                    <span>Admin Panel</span>
-                  </Link>
-                )}
                 <Link
-                  href="/settings"
-                  className="flex items-center gap-3 px-4 py-3 text-body-sm text-foreground-muted 
-                             hover:text-foreground hover:bg-foreground/5 rounded-xl transition-all duration-200"
+                  href="/dashboard"
+                  className="flex items-center gap-3 px-4 py-3 text-body-sm text-center bg-accent text-background 
+                             rounded-xl font-medium hover:bg-accent-hover transition-all duration-200"
                 >
-                  <Settings className="w-5 h-5" />
-                  <span>Settings</span>
+                  <LayoutDashboard className="w-5 h-5" />
+                  <span>Command Center</span>
                 </Link>
-                <button
-                  onClick={() => {
-                    logout()
-                    setMobileMenuOpen(false)
-                  }}
-                  className="flex items-center gap-3 w-full px-4 py-3 text-body-sm text-foreground-muted 
-                             hover:text-foreground hover:bg-foreground/5 rounded-xl transition-all duration-200"
-                >
-                  <LogOut className="w-5 h-5" />
-                  <span>Sign Out</span>
-                </button>
               </>
             ) : (
               <>
-                <div className="my-3 border-t border-border" />
                 <Link
                   href="/login"
                   className="block px-4 py-3 text-body-sm text-foreground-muted 

frontend/src/components/Sidebar.tsx

@@ -0,0 +1,280 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { useStore } from '@/lib/store'
+import { 
+  LayoutDashboard, 
+  Eye, 
+  Briefcase,
+  Gavel,
+  TrendingUp, 
+  Settings,
+  ChevronLeft,
+  ChevronRight,
+  LogOut,
+  Crown,
+  Zap,
+  Shield,
+  CreditCard,
+} from 'lucide-react'
+import { useState, useEffect } from 'react'
+import clsx from 'clsx'
+
+interface SidebarProps {
+  collapsed?: boolean
+  onCollapsedChange?: (collapsed: boolean) => void
+}
+
+export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: SidebarProps) {
+  const pathname = usePathname()
+  const { user, logout, subscription, domains } = useStore()
+  
+  // Internal state for uncontrolled mode
+  const [internalCollapsed, setInternalCollapsed] = useState(false)
+  
+  // Use controlled or uncontrolled state
+  const collapsed = controlledCollapsed ?? internalCollapsed
+  const setCollapsed = onCollapsedChange ?? setInternalCollapsed
+  
+  // Load collapsed state from localStorage
+  useEffect(() => {
+    const saved = localStorage.getItem('sidebar-collapsed')
+    if (saved) {
+      setCollapsed(saved === 'true')
+    }
+  }, [])
+  
+  // Save collapsed state
+  const toggleCollapsed = () => {
+    const newState = !collapsed
+    setCollapsed(newState)
+    localStorage.setItem('sidebar-collapsed', String(newState))
+  }
+
+  const tierName = subscription?.tier_name || subscription?.tier || 'Scout'
+  const tierIcon = tierName === 'Tycoon' ? Crown : tierName === 'Trader' ? TrendingUp : Zap
+  const TierIcon = tierIcon
+
+  // Navigation items
+  const navItems = [
+    { 
+      href: '/dashboard', 
+      label: 'Dashboard', 
+      icon: LayoutDashboard,
+      badge: null,
+    },
+    { 
+      href: '/watchlist', 
+      label: 'Watchlist', 
+      icon: Eye,
+      badge: domains?.filter(d => d.is_available).length || null,
+    },
+    { 
+      href: '/portfolio', 
+      label: 'Portfolio', 
+      icon: Briefcase,
+      badge: null,
+    },
+    { 
+      href: '/market', 
+      label: 'Market', 
+      icon: Gavel,
+      badge: null,
+    },
+    { 
+      href: '/intelligence', 
+      label: 'Intelligence', 
+      icon: TrendingUp,
+      badge: null,
+    },
+  ]
+
+  const bottomItems = [
+    { href: '/settings', label: 'Settings', icon: Settings },
+  ]
+
+  const isActive = (href: string) => {
+    if (href === '/dashboard') return pathname === '/dashboard'
+    return pathname.startsWith(href)
+  }
+
+  return (
+    <aside 
+      className={clsx(
+        "fixed left-0 top-0 bottom-0 z-40 flex flex-col",
+        "bg-background-secondary/50 backdrop-blur-xl border-r border-border",
+        "transition-all duration-300 ease-in-out",
+        collapsed ? "w-[72px]" : "w-[240px]"
+      )}
+    >
+      {/* Logo */}
+      <div className={clsx(
+        "h-16 sm:h-20 flex items-center border-b border-border/50",
+        collapsed ? "justify-center px-2" : "px-5"
+      )}>
+        <Link href="/" className="flex items-center gap-3 group">
+          <div className="w-9 h-9 bg-accent/10 rounded-xl flex items-center justify-center border border-accent/20 
+                          group-hover:bg-accent/20 transition-colors">
+            <span className="font-display text-accent text-lg font-bold">P</span>
+          </div>
+          {!collapsed && (
+            <span 
+              className="text-lg font-bold tracking-[0.1em] text-foreground"
+              style={{ fontFamily: 'var(--font-display), Playfair Display, Georgia, serif' }}
+            >
+              POUNCE
+            </span>
+          )}
+        </Link>
+      </div>
+
+      {/* Main Navigation */}
+      <nav className="flex-1 py-4 px-3 space-y-1 overflow-y-auto">
+        {navItems.map((item) => (
+          <Link
+            key={item.href}
+            href={item.href}
+            className={clsx(
+              "group flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-200",
+              isActive(item.href)
+                ? "bg-accent/10 text-foreground"
+                : "text-foreground-muted hover:text-foreground hover:bg-foreground/5"
+            )}
+            title={collapsed ? item.label : undefined}
+          >
+            <div className="relative">
+              <item.icon className={clsx(
+                "w-5 h-5 transition-colors",
+                isActive(item.href) ? "text-accent" : "group-hover:text-foreground"
+              )} />
+              {/* Badge for notifications */}
+              {item.badge && (
+                <span className="absolute -top-1.5 -right-1.5 w-4 h-4 bg-accent text-background 
+                                 text-[10px] font-bold rounded-full flex items-center justify-center">
+                  {item.badge > 9 ? '9+' : item.badge}
+                </span>
+              )}
+            </div>
+            {!collapsed && (
+              <span className={clsx(
+                "text-sm font-medium transition-colors",
+                isActive(item.href) && "text-foreground"
+              )}>
+                {item.label}
+              </span>
+            )}
+          </Link>
+        ))}
+      </nav>
+
+      {/* Bottom Section */}
+      <div className="border-t border-border/50 py-4 px-3 space-y-1">
+        {/* Admin Link */}
+        {user?.is_admin && (
+          <Link
+            href="/admin"
+            className={clsx(
+              "group flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-200",
+              pathname.startsWith('/admin')
+                ? "bg-accent/10 text-accent"
+                : "text-accent/70 hover:text-accent hover:bg-accent/5"
+            )}
+            title={collapsed ? "Admin Panel" : undefined}
+          >
+            <Shield className="w-5 h-5" />
+            {!collapsed && <span className="text-sm font-medium">Admin Panel</span>}
+          </Link>
+        )}
+        
+        {/* Settings */}
+        {bottomItems.map((item) => (
+          <Link
+            key={item.href}
+            href={item.href}
+            className={clsx(
+              "group flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-200",
+              isActive(item.href)
+                ? "bg-foreground/10 text-foreground"
+                : "text-foreground-muted hover:text-foreground hover:bg-foreground/5"
+            )}
+            title={collapsed ? item.label : undefined}
+          >
+            <item.icon className="w-5 h-5" />
+            {!collapsed && <span className="text-sm font-medium">{item.label}</span>}
+          </Link>
+        ))}
+
+        {/* User Info */}
+        <div className={clsx(
+          "mt-4 p-3 bg-foreground/5 rounded-xl",
+          collapsed && "p-2"
+        )}>
+          {collapsed ? (
+            <div className="flex justify-center">
+              <div className="w-8 h-8 bg-accent/10 rounded-lg flex items-center justify-center">
+                <TierIcon className="w-4 h-4 text-accent" />
+              </div>
+            </div>
+          ) : (
+            <>
+              <div className="flex items-center gap-3 mb-3">
+                <div className="w-9 h-9 bg-accent/10 rounded-lg flex items-center justify-center">
+                  <TierIcon className="w-4 h-4 text-accent" />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-foreground truncate">
+                    {user?.name || user?.email?.split('@')[0]}
+                  </p>
+                  <p className="text-xs text-foreground-muted">{tierName}</p>
+                </div>
+              </div>
+              <div className="flex items-center justify-between text-xs text-foreground-subtle">
+                <span>{subscription?.domains_used || 0}/{subscription?.domain_limit || 5} domains</span>
+                {tierName === 'Scout' && (
+                  <Link 
+                    href="/pricing" 
+                    className="text-accent hover:underline flex items-center gap-1"
+                  >
+                    <CreditCard className="w-3 h-3" />
+                    Upgrade
+                  </Link>
+                )}
+              </div>
+            </>
+          )}
+        </div>
+
+        {/* Logout */}
+        <button
+          onClick={logout}
+          className={clsx(
+            "w-full flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-200",
+            "text-foreground-muted hover:text-foreground hover:bg-foreground/5"
+          )}
+          title={collapsed ? "Sign out" : undefined}
+        >
+          <LogOut className="w-5 h-5" />
+          {!collapsed && <span className="text-sm font-medium">Sign out</span>}
+        </button>
+      </div>
+
+      {/* Collapse Toggle */}
+      <button
+        onClick={toggleCollapsed}
+        className={clsx(
+          "absolute -right-3 top-24 w-6 h-6 bg-background-secondary border border-border rounded-full",
+          "flex items-center justify-center text-foreground-muted hover:text-foreground",
+          "hover:bg-foreground/5 transition-all duration-200 shadow-sm"
+        )}
+      >
+        {collapsed ? (
+          <ChevronRight className="w-3.5 h-3.5" />
+        ) : (
+          <ChevronLeft className="w-3.5 h-3.5" />
+        )}
+      </button>
+    </aside>
+  )
+}
+