feat: MARKET - Complete UI Overhaul (Award-Winning Style)

Changes:
- Redesigned Metric Grid with trend indicators
- New separated Control Bar for search & filters
- High-end Data Grid with ultra-thin borders and hover effects
- Custom SVG 'Score Ring' component for Pounce Score
- Modern typography and spacing
- Removed 'clutter' badges, replaced with minimal indicators

frontend/src/app/terminal/market/page.tsx

@@ -21,6 +21,10 @@ import {
   Activity,
   Flame,
   Clock,
+  Search,
+  LayoutGrid,
+  List,
+  SlidersHorizontal
 } from 'lucide-react'
 import clsx from 'clsx'
 
@@ -131,143 +135,123 @@ function parseTimeToSeconds(timeStr?: string): number {
 // COMPONENTS
 // ============================================================================
 
-// Score Badge with color coding
+// Stat Card
-function ScoreBadge({ score }: { score: number }) {
+function StatCard({ 
-  const color = score >= 80 
+  label, 
-    ? 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30' 
+  value, 
-    : score >= 40 
+  subValue, 
-      ? 'bg-amber-500/20 text-amber-400 border-amber-500/30' 
+  icon: Icon, 
-      : 'bg-red-500/20 text-red-400 border-red-500/30'
+  trend 
-  
+}: { 
+  label: string
+  value: string | number
+  subValue?: string
+  icon: any
+  trend?: 'up' | 'down' | 'neutral'
+}) {
   return (
-    <div className={clsx(
+    <div className="bg-zinc-900/40 border border-white/5 rounded-xl p-4 flex items-start justify-between group hover:border-white/10 transition-all">
-      "inline-flex items-center justify-center w-12 h-8 rounded-md border font-mono text-sm font-bold",
+      <div>
-      color
+        <p className="text-xs font-medium text-zinc-500 uppercase tracking-wider mb-1">{label}</p>
-    )}>
+        <div className="flex items-baseline gap-2">
-      {score}
+          <span className="text-2xl font-bold text-white tracking-tight">{value}</span>
+          {subValue && <span className="text-xs text-zinc-500 font-medium">{subValue}</span>}
+        </div>
+      </div>
+      <div className={clsx(
+        "p-2 rounded-lg bg-zinc-800/50 text-zinc-400 group-hover:text-white transition-colors",
+        trend === 'up' && "text-emerald-400 bg-emerald-500/10",
+        trend === 'down' && "text-red-400 bg-red-500/10"
+      )}>
+        <Icon className="w-5 h-5" />
+      </div>
     </div>
   )
 }
 
-// Source Badge
+// Modern Score Indicator
-function SourceBadge({ source, isPounce }: { source: string; isPounce: boolean }) {
+function ScoreRing({ score }: { score: number }) {
-  if (isPounce) {
+  const color = score >= 80 ? 'text-emerald-500' : score >= 50 ? 'text-amber-500' : 'text-zinc-600'
-    return (
+  const size = 32
-      <div className="inline-flex items-center gap-1.5 px-2.5 py-1 bg-emerald-500/10 border border-emerald-500/30 rounded-md">
+  const strokeWidth = 3
-        <Diamond className="w-3.5 h-3.5 text-emerald-400" />
+  const radius = (size - strokeWidth) / 2
-        <span className="text-xs font-semibold text-emerald-400">Pounce</span>
+  const circumference = radius * 2 * Math.PI
-      </div>
+  const offset = circumference - (score / 100) * circumference
-    )
-  }
-  
-  const colors: Record<string, string> = {
-    GoDaddy: 'bg-orange-500/10 border-orange-500/20 text-orange-400',
-    Sedo: 'bg-blue-500/10 border-blue-500/20 text-blue-400',
-    NameJet: 'bg-purple-500/10 border-purple-500/20 text-purple-400',
-    DropCatch: 'bg-cyan-500/10 border-cyan-500/20 text-cyan-400',
-  }
-  
-  return (
-    <span className={clsx(
-      "inline-flex items-center px-2.5 py-1 rounded-md border text-xs font-medium",
-      colors[source] || 'bg-zinc-800 border-zinc-700 text-zinc-400'
-    )}>
-      {source}
-    </span>
-  )
-}
 
-// Status Badge
-function StatusBadge({ status, timeLeft }: { status: 'auction' | 'instant'; timeLeft?: string }) {
-  if (status === 'instant') {
-    return (
-      <div className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-emerald-500/20 border border-emerald-500/30 rounded-md">
-        <Zap className="w-3.5 h-3.5 text-emerald-400" />
-        <span className="text-xs font-bold text-emerald-400">Instant</span>
-      </div>
-    )
-  }
-  
-  const isUrgent = timeLeft?.includes('m') && !timeLeft?.includes('d') && !timeLeft?.includes('h')
-  const isWarning = timeLeft?.includes('h') && parseInt(timeLeft) <= 4
-  
   return (
-    <div className={clsx(
+    <div className="relative flex items-center justify-center" style={{ width: size, height: size }}>
-      "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md border",
+      {/* Background Ring */}
-      isUrgent ? "bg-red-500/20 border-red-500/30" :
+      <svg className="absolute w-full h-full -rotate-90">
-      isWarning ? "bg-amber-500/20 border-amber-500/30" :
+        <circle
-      "bg-zinc-800 border-zinc-700"
+          cx={size / 2}
-    )}>
+          cy={size / 2}
-      <Timer className={clsx(
+          r={radius}
-        "w-3.5 h-3.5",
+          className="stroke-zinc-800"
-        isUrgent ? "text-red-400" : isWarning ? "text-amber-400" : "text-zinc-400"
+          strokeWidth={strokeWidth}
-      )} />
+          fill="none"
-      <span className={clsx(
+        />
-        "text-xs font-medium",
+        {/* Progress Ring */}
-        isUrgent ? "text-red-400" : isWarning ? "text-amber-400" : "text-zinc-400"
+        <circle
-      )}>
+          cx={size / 2}
-        {timeLeft}
+          cy={size / 2}
+          r={radius}
+          className={clsx("transition-all duration-500 ease-out", color)}
+          strokeWidth={strokeWidth}
+          strokeDasharray={circumference}
+          strokeDashoffset={offset}
+          strokeLinecap="round"
+          fill="none"
+        />
+      </svg>
+      <span className={clsx("text-[10px] font-bold font-mono", score >= 80 ? 'text-emerald-400' : 'text-zinc-400')}>
+        {score}
       </span>
     </div>
   )
 }
 
-// Toggle Button
+// Refined Source Badge
-function ToggleButton({ 
+function SourceBadge({ source, isPounce }: { source: string; isPounce: boolean }) {
+  if (isPounce) return (
+    <div className="flex items-center gap-1.5">
+      <div className="w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.5)]" />
+      <span className="text-xs font-semibold text-white tracking-tight">Pounce</span>
+    </div>
+  )
+  
+  return (
+    <span className="text-xs font-medium text-zinc-500 hover:text-zinc-300 transition-colors">
+      {source}
+    </span>
+  )
+}
+
+// Minimal Toggle
+function FilterToggle({ 
   active, 
   onClick, 
-  children 
+  label 
 }: { 
   active: boolean
   onClick: () => void
-  children: React.ReactNode 
+  label: string 
 }) {
   return (
     <button
       onClick={onClick}
       className={clsx(
-        "flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all",
+        "px-3 py-1.5 rounded-full text-xs font-medium transition-all border",
         active
-          ? "bg-emerald-500/20 text-emerald-400 border border-emerald-500/30"
+          ? "bg-white text-zinc-950 border-white"
-          : "bg-zinc-800/50 text-zinc-400 border border-zinc-700/50 hover:bg-zinc-800 hover:text-zinc-300"
+          : "bg-transparent text-zinc-400 border-zinc-800 hover:border-zinc-700 hover:text-zinc-300"
       )}
     >
-      {children}
+      {label}
-      {active && <Check className="w-3.5 h-3.5" />}
     </button>
   )
 }
 
-// Dropdown Select
+// Sort Header
-function DropdownSelect({ 
-  value, 
-  onChange, 
-  options,
-}: { 
-  value: string
-  onChange: (v: string) => void
-  options: { value: string; label: string }[]
-}) {
-  return (
-    <div className="relative">
-      <select
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        className="appearance-none px-4 py-2 pr-10 bg-zinc-800/50 border border-zinc-700/50 rounded-lg 
-                   text-sm text-zinc-300 font-medium cursor-pointer
-                   hover:bg-zinc-800 hover:border-zinc-600 transition-all
-                   focus:outline-none focus:border-emerald-500/50"
-      >
-        {options.map(opt => (
-          <option key={opt.value} value={opt.value}>{opt.label}</option>
-        ))}
-      </select>
-      <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-500 pointer-events-none" />
-    </div>
-  )
-}
-
-// Sortable Column Header
 function SortableHeader({
   label,
   field,
@@ -289,28 +273,23 @@ function SortableHeader({
     <button
       onClick={() => onSort(field)}
       className={clsx(
-        "flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider transition-colors group",
+        "flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest transition-all group select-none",
         align === 'right' && "justify-end ml-auto",
         align === 'center' && "justify-center mx-auto",
-        isActive ? "text-emerald-400" : "text-zinc-500 hover:text-zinc-300"
+        isActive ? "text-white" : "text-zinc-500 hover:text-zinc-300"
       )}
     >
       {label}
-      <span className={clsx("transition-all", isActive ? "opacity-100" : "opacity-0 group-hover:opacity-50")}>
+      <div className={clsx("flex flex-col -space-y-1", isActive ? "opacity-100" : "opacity-0 group-hover:opacity-50")}>
-        {isActive && currentDirection === 'desc' ? (
+        <ChevronUp className={clsx("w-2 h-2", isActive && currentDirection === 'asc' ? "text-white" : "text-zinc-600")} />
-          <ChevronDown className="w-4 h-4" />
+        <ChevronDown className={clsx("w-2 h-2", isActive && currentDirection === 'desc' ? "text-white" : "text-zinc-600")} />
-        ) : isActive && currentDirection === 'asc' ? (
+      </div>
-          <ChevronUp className="w-4 h-4" />
-        ) : (
-          <ArrowUpDown className="w-3.5 h-3.5" />
-        )}
-      </span>
     </button>
   )
 }
 
 // ============================================================================
-// MAIN COMPONENT
+// MAIN PAGE
 // ============================================================================
 
 export default function MarketPage() {
@@ -324,35 +303,17 @@ export default function MarketPage() {
   // Filter State
   const [hideSpam, setHideSpam] = useState(true)
   const [pounceOnly, setPounceOnly] = useState(false)
-  const [selectedTld, setSelectedTld] = useState('all')
-  const [selectedPrice, setSelectedPrice] = useState('all')
   const [searchQuery, setSearchQuery] = useState('')
+  const [priceRange, setPriceRange] = useState<'all' | 'low' | 'mid' | 'high'>('all')
   
   // Sort State
   const [sortField, setSortField] = useState<SortField>('score')
   const [sortDirection, setSortDirection] = useState<SortDirection>('desc')
   
-  // Watchlist State
+  // Watchlist
   const [trackedDomains, setTrackedDomains] = useState<Set<string>>(new Set())
   const [trackingInProgress, setTrackingInProgress] = useState<string | null>(null)
 
-  // Options
-  const TLD_OPTIONS = [
-    { value: 'all', label: 'All TLDs' },
-    { value: 'com', label: '.com' },
-    { value: 'ai', label: '.ai' },
-    { value: 'io', label: '.io' },
-    { value: 'ch', label: '.ch' },
-    { value: 'net', label: '.net' },
-  ]
-
-  const PRICE_OPTIONS = [
-    { value: 'all', label: 'Any Price' },
-    { value: '100', label: '< $100' },
-    { value: '1000', label: '< $1,000' },
-    { value: '10000', label: 'High Roller' },
-  ]
-
   // Load Data
   const loadData = useCallback(async () => {
     setLoading(true)
@@ -381,14 +342,12 @@ export default function MarketPage() {
       setSortDirection(d => d === 'asc' ? 'desc' : 'asc')
     } else {
       setSortField(field)
-      // Default direction based on field type
       setSortDirection(field === 'score' || field === 'price' ? 'desc' : 'asc')
     }
   }, [sortField])
 
   const handleTrack = useCallback(async (domain: string) => {
     if (trackedDomains.has(domain) || trackingInProgress) return
-    
     setTrackingInProgress(domain)
     try {
       await api.addDomain(domain)
@@ -400,9 +359,8 @@ export default function MarketPage() {
     }
   }, [trackedDomains, trackingInProgress])
 
-  // Transform and Filter Data
+  // Transform Data
   const marketItems = useMemo(() => {
-    // Convert auctions to market items
     const items: MarketItem[] = auctions.map(auction => ({
       id: `${auction.domain}-${auction.platform}`,
       domain: auction.domain,
@@ -419,368 +377,276 @@ export default function MarketPage() {
       numBids: auction.num_bids,
     }))
 
-    // Apply Filters
     let filtered = items
 
-    if (hideSpam) {
+    // Filters
-      filtered = filtered.filter(item => !isSpamDomain(item.domain, item.tld))
+    if (hideSpam) filtered = filtered.filter(item => !isSpamDomain(item.domain, item.tld))
-    }
+    if (pounceOnly) filtered = filtered.filter(item => item.isPounce)
-
+    if (priceRange === 'low') filtered = filtered.filter(item => item.price < 100)
-    if (pounceOnly) {
+    if (priceRange === 'mid') filtered = filtered.filter(item => item.price >= 100 && item.price < 1000)
-      filtered = filtered.filter(item => item.isPounce)
+    if (priceRange === 'high') filtered = filtered.filter(item => item.price >= 1000)
-    }
+    
-
-    if (selectedTld !== 'all') {
-      filtered = filtered.filter(item => item.tld === selectedTld)
-    }
-
-    if (selectedPrice !== 'all') {
-      const maxPrice = parseInt(selectedPrice)
-      if (selectedPrice === '10000') {
-        filtered = filtered.filter(item => item.price >= 10000)
-      } else {
-        filtered = filtered.filter(item => item.price < maxPrice)
-      }
-    }
-
     if (searchQuery) {
       const q = searchQuery.toLowerCase()
       filtered = filtered.filter(item => item.domain.toLowerCase().includes(q))
     }
 
-    // Apply Sort
+    // Sort
     const mult = sortDirection === 'asc' ? 1 : -1
     filtered.sort((a, b) => {
       switch (sortField) {
-        case 'domain':
+        case 'domain': return mult * a.domain.localeCompare(b.domain)
-          return mult * a.domain.localeCompare(b.domain)
+        case 'score': return mult * (a.pounceScore - b.pounceScore)
-        case 'score':
+        case 'price': return mult * (a.price - b.price)
-          return mult * (a.pounceScore - b.pounceScore)
+        case 'time': return mult * (parseTimeToSeconds(a.timeLeft) - parseTimeToSeconds(b.timeLeft))
-        case 'price':
+        case 'source': return mult * a.source.localeCompare(b.source)
-          return mult * (a.price - b.price)
+        default: return 0
-        case 'time':
-          return mult * (parseTimeToSeconds(a.timeLeft) - parseTimeToSeconds(b.timeLeft))
-        case 'source':
-          return mult * a.source.localeCompare(b.source)
-        default:
-          return 0
       }
     })
 
     return filtered
-  }, [auctions, hideSpam, pounceOnly, selectedTld, selectedPrice, searchQuery, sortField, sortDirection])
+  }, [auctions, hideSpam, pounceOnly, priceRange, searchQuery, sortField, sortDirection])
 
   // Stats
   const stats = useMemo(() => ({
     total: marketItems.length,
     highScore: marketItems.filter(i => i.pounceScore >= 80).length,
-    endingSoon: marketItems.filter(i => {
+    endingSoon: marketItems.filter(i => parseTimeToSeconds(i.timeLeft) < 3600).length,
-      const seconds = parseTimeToSeconds(i.timeLeft)
+    avgPrice: marketItems.length > 0 
-      return seconds < 3600 // Less than 1 hour
+      ? Math.round(marketItems.reduce((acc, i) => acc + i.price, 0) / marketItems.length)
-    }).length,
+      : 0
   }), [marketItems])
 
-  // Format currency
   const formatPrice = (price: number) => {
-    if (price >= 1000000) return `$${(price / 1000000).toFixed(1)}M`
+    return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(price)
-    if (price >= 1000) return `$${(price / 1000).toFixed(1)}k`
-    return `$${price.toLocaleString()}`
   }
 
   return (
-    <TerminalLayout title="Market" subtitle="">
+    <TerminalLayout title="Market" subtitle="Real-time Domain Auctions">
-      <div className="space-y-6">
+      <div className="space-y-8">
         
-        {/* ================================================================ */}
+        {/* ============================================================================ */}
-        {/* HEADER - Live Feed Style */}
+        {/* METRICS GRID */}
-        {/* ================================================================ */}
+        {/* ============================================================================ */}
-        <div className="flex items-center justify-between">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-          {/* Left: Title with Live Indicator */}
+          <StatCard 
-          <div className="flex items-center gap-4">
+            label="Active Listings" 
-            <div className="flex items-center gap-3">
+            value={stats.total} 
-              <div className="relative">
+            icon={Activity} 
-                <Activity className="w-5 h-5 text-emerald-400" />
+            trend="neutral"
-                <span className="absolute -top-0.5 -right-0.5 w-2 h-2 bg-emerald-400 rounded-full animate-pulse" />
+          />
-              </div>
+          <StatCard 
-              <div>
+            label="High Potential" 
-                <h1 className="text-lg font-bold text-white">Live Market Feed</h1>
+            value={stats.highScore} 
-                <p className="text-xs text-zinc-500">Updated in real-time</p>
+            subValue="Score 80+"
-              </div>
+            icon={TrendingUp} 
-            </div>
+            trend="up"
-            
+          />
-            {/* Quick Stats Pills */}
+          <StatCard 
-            <div className="hidden md:flex items-center gap-2">
+            label="Ending Soon" 
-              <div className="flex items-center gap-1.5 px-3 py-1.5 bg-zinc-800/50 border border-zinc-700/50 rounded-full">
+            value={stats.endingSoon} 
-                <span className="text-xs text-zinc-400">{stats.total}</span>
+            subValue="< 1h"
-                <span className="text-xs text-zinc-600">listings</span>
+            icon={Flame} 
-              </div>
+            trend={stats.endingSoon > 5 ? 'down' : 'neutral'}
-              <div className="flex items-center gap-1.5 px-3 py-1.5 bg-emerald-500/10 border border-emerald-500/20 rounded-full">
+          />
-                <TrendingUp className="w-3 h-3 text-emerald-400" />
+           <StatCard 
-                <span className="text-xs text-emerald-400">{stats.highScore}</span>
+            label="Avg. Price" 
-                <span className="text-xs text-emerald-400/60">high score</span>
+            value={formatPrice(stats.avgPrice)}
-              </div>
+            icon={Zap} 
-              {stats.endingSoon > 0 && (
+            trend="neutral"
-                <div className="flex items-center gap-1.5 px-3 py-1.5 bg-amber-500/10 border border-amber-500/20 rounded-full">
+          />
-                  <Flame className="w-3 h-3 text-amber-400" />
+        </div>
-                  <span className="text-xs text-amber-400">{stats.endingSoon}</span>
+
-                  <span className="text-xs text-amber-400/60">ending soon</span>
+        {/* ============================================================================ */}
-                </div>
+        {/* CONTROL BAR */}
-              )}
+        {/* ============================================================================ */}
+        <div className="flex flex-col md:flex-row items-center gap-4 p-1">
+          
+          {/* Search */}
+          <div className="relative w-full md:w-96 group">
+            <div className="absolute inset-y-0 left-3 flex items-center pointer-events-none">
+              <Search className="w-4 h-4 text-zinc-500 group-focus-within:text-white transition-colors" />
             </div>
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Search domains..."
+              className="w-full pl-10 pr-4 py-2.5 bg-zinc-900/50 border border-white/5 rounded-lg 
+                         text-sm text-white placeholder:text-zinc-600
+                         focus:outline-none focus:border-white/20 focus:bg-zinc-900 transition-all"
+            />
           </div>
 
-          {/* Right: Refresh */}
+          <div className="w-px h-6 bg-white/10 hidden md:block" />
+
+          {/* Filters */}
+          <div className="flex items-center gap-2 overflow-x-auto w-full md:w-auto pb-2 md:pb-0 scrollbar-hide">
+            <FilterToggle active={hideSpam} onClick={() => setHideSpam(!hideSpam)} label="Hide Spam" />
+            <FilterToggle active={pounceOnly} onClick={() => setPounceOnly(!pounceOnly)} label="Pounce Exclusive" />
+            <div className="w-px h-4 bg-white/10 mx-1" />
+            <FilterToggle active={priceRange === 'low'} onClick={() => setPriceRange(p => p === 'low' ? 'all' : 'low')} label="< $100" />
+            <FilterToggle active={priceRange === 'high'} onClick={() => setPriceRange(p => p === 'high' ? 'all' : 'high')} label="$1k+" />
+          </div>
+
+          <div className="flex-1" />
+
+          {/* Refresh */}
           <button
             onClick={handleRefresh}
-            disabled={refreshing}
+            className={clsx(
-            className="flex items-center gap-2 px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-lg
+              "flex items-center gap-2 text-xs font-medium text-zinc-500 hover:text-white transition-colors",
-                       text-sm font-medium text-zinc-400 hover:text-white hover:border-zinc-600 transition-all
+              refreshing && "opacity-50 cursor-not-allowed"
-                       disabled:opacity-50"
+            )}
           >
-            <RefreshCw className={clsx("w-4 h-4", refreshing && "animate-spin")} />
+            <RefreshCw className={clsx("w-3.5 h-3.5", refreshing && "animate-spin")} />
-            <span className="hidden sm:inline">Refresh</span>
+            <span className="hidden sm:inline">Refresh Data</span>
           </button>
         </div>
 
-        {/* ================================================================ */}
+        {/* ============================================================================ */}
-        {/* FILTER BAR */}
+        {/* DATA GRID */}
-        {/* ================================================================ */}
+        {/* ============================================================================ */}
-        <div className="p-4 bg-zinc-900/50 border border-zinc-800 rounded-xl">
+        <div className="border border-white/5 rounded-xl overflow-hidden bg-zinc-900/20 backdrop-blur-sm">
-          <div className="flex flex-wrap items-center gap-3">
-            <div className="flex items-center gap-2 text-zinc-500 mr-2">
-              <Filter className="w-4 h-4" />
-              <span className="text-sm font-medium hidden sm:inline">Filters</span>
-            </div>
-
-            <ToggleButton active={hideSpam} onClick={() => setHideSpam(!hideSpam)}>
-              Hide Spam
-            </ToggleButton>
-
-            <ToggleButton active={pounceOnly} onClick={() => setPounceOnly(!pounceOnly)}>
-              <Diamond className="w-3.5 h-3.5" />
-              Pounce Only
-            </ToggleButton>
-
-            <div className="w-px h-8 bg-zinc-700 hidden sm:block" />
-
-            <DropdownSelect
-              value={selectedTld}
-              onChange={setSelectedTld}
-              options={TLD_OPTIONS}
-            />
-
-            <DropdownSelect
-              value={selectedPrice}
-              onChange={setSelectedPrice}
-              options={PRICE_OPTIONS}
-            />
-
-            <div className="flex-1 min-w-[200px]">
-              <input
-                type="text"
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                placeholder="Search domains..."
-                className="w-full px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-lg
-                           text-sm text-zinc-300 placeholder:text-zinc-600
-                           focus:outline-none focus:border-emerald-500/50 transition-all"
-              />
-            </div>
-          </div>
-        </div>
-
-        {/* ================================================================ */}
-        {/* MARKET TABLE */}
-        {/* ================================================================ */}
-        <div className="bg-zinc-900/30 border border-zinc-800 rounded-xl overflow-hidden">
           
-          {/* Table Header - Sortable */}
+          {/* Header */}
-          <div className="grid grid-cols-12 gap-4 px-6 py-4 bg-zinc-900/50 border-b border-zinc-800">
+          <div className="grid grid-cols-12 gap-4 px-6 py-3 border-b border-white/5 bg-zinc-900/50">
-            <div className="col-span-4">
+            <div className="col-span-5 md:col-span-4">
-              <SortableHeader 
+              <SortableHeader label="Domain Asset" field="domain" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} />
-                label="Domain" 
-                field="domain" 
-                currentSort={sortField} 
-                currentDirection={sortDirection} 
-                onSort={handleSort} 
-              />
             </div>
-            <div className="col-span-1 hidden lg:block">
+            <div className="col-span-2 hidden md:block text-center">
-              <SortableHeader 
+              <SortableHeader label="Pounce Score" field="score" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} align="center" />
-                label="Score" 
-                field="score" 
-                currentSort={sortField} 
-                currentDirection={sortDirection} 
-                onSort={handleSort}
-                align="center"
-              />
             </div>
-            <div className="col-span-2">
+            <div className="col-span-3 md:col-span-2 text-right">
-              <SortableHeader 
+              <SortableHeader label="Bid Price" field="price" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} align="right" />
-                label="Price" 
-                field="price" 
-                currentSort={sortField} 
-                currentDirection={sortDirection} 
-                onSort={handleSort}
-                align="right"
-              />
             </div>
-            <div className="col-span-2 hidden md:block">
+            <div className="col-span-2 hidden lg:block text-center">
-              <SortableHeader 
+              <SortableHeader label="Time Left" field="time" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} align="center" />
-                label="Time Left" 
-                field="time" 
-                currentSort={sortField} 
-                currentDirection={sortDirection} 
-                onSort={handleSort}
-                align="center"
-              />
             </div>
-            <div className="col-span-1 hidden lg:block">
+            <div className="col-span-2 hidden xl:block text-center">
-              <SortableHeader 
+              <SortableHeader label="Source" field="source" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} align="center" />
-                label="Source" 
-                field="source" 
-                currentSort={sortField} 
-                currentDirection={sortDirection} 
-                onSort={handleSort}
-                align="center"
-              />
             </div>
-            <div className="col-span-2 text-right">
+            <div className="col-span-4 md:col-span-2 xl:col-span-2 text-right">
-              <span className="text-xs font-semibold uppercase tracking-wider text-zinc-500">Action</span>
+              <span className="text-[10px] font-bold uppercase tracking-widest text-zinc-600">Action</span>
             </div>
           </div>
 
-          {/* Table Body */}
+          {/* Body */}
           {loading ? (
-            <div className="flex items-center justify-center py-20">
+            <div className="flex flex-col items-center justify-center py-32 space-y-4">
-              <Loader2 className="w-6 h-6 text-emerald-500 animate-spin" />
+              <Loader2 className="w-8 h-8 text-emerald-500 animate-spin" />
+              <p className="text-zinc-500 text-sm animate-pulse">Scanning global markets...</p>
             </div>
           ) : marketItems.length === 0 ? (
-            <div className="text-center py-20">
+            <div className="flex flex-col items-center justify-center py-32 text-center">
-              <TrendingUp className="w-12 h-12 text-zinc-700 mx-auto mb-4" />
+              <div className="w-16 h-16 bg-zinc-900 rounded-full flex items-center justify-center mb-4 border border-zinc-800">
-              <p className="text-zinc-500 font-medium">No domains match your filters</p>
+                <Search className="w-6 h-6 text-zinc-600" />
-              <p className="text-zinc-600 text-sm mt-1">Try adjusting your filter settings</p>
+              </div>
+              <h3 className="text-white font-medium mb-1">No assets found</h3>
+              <p className="text-zinc-500 text-sm">Adjust filters to see more results</p>
             </div>
           ) : (
-            <div className="divide-y divide-zinc-800/50">
+            <div className="divide-y divide-white/5">
-              {marketItems.map((item) => (
+              {marketItems.map((item) => {
-                <div 
+                const timeLeftSec = parseTimeToSeconds(item.timeLeft)
-                  key={item.id}
+                const isUrgent = timeLeftSec < 3600
-                  className={clsx(
+                
-                    "grid grid-cols-12 gap-4 px-6 py-4 items-center transition-colors",
+                return (
-                    item.isPounce 
+                  <div 
-                      ? "bg-emerald-500/[0.03] hover:bg-emerald-500/[0.06]" 
+                    key={item.id}
-                      : "hover:bg-zinc-800/30"
+                    className="grid grid-cols-12 gap-4 px-6 py-3.5 items-center hover:bg-white/[0.02] transition-colors group"
-                  )}
+                  >
-                >
+                    {/* Domain */}
-                  {/* Domain */}
+                    <div className="col-span-5 md:col-span-4 min-w-0">
-                  <div className="col-span-4">
+                      <div className="flex items-center gap-3">
-                    <div className="flex items-center gap-3">
+                        <div className={clsx(
-                      {item.isPounce && (
+                          "w-1.5 h-1.5 rounded-full flex-shrink-0",
-                        <Diamond className="w-4 h-4 text-emerald-400 flex-shrink-0" />
+                          item.isPounce ? "bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.5)]" : "bg-zinc-700"
-                      )}
+                        )} />
-                      <div>
+                        <div className="truncate">
-                        <span className="font-mono font-semibold text-white">{item.domain}</span>
+                          <div className="flex items-baseline gap-0.5 truncate">
-                        {item.verified && (
+                            <span className="font-medium text-white text-[15px] tracking-tight">{item.domain.split('.')[0]}</span>
-                          <span className="ml-2 text-xs bg-emerald-500/20 text-emerald-400 px-1.5 py-0.5 rounded">
+                            <span className="text-zinc-500 text-sm">.{item.tld}</span>
-                            ✓ Verified
+                          </div>
-                          </span>
+                          <div className="flex items-center gap-2 mt-0.5 lg:hidden">
-                        )}
+                            <span className={clsx("text-xs", item.pounceScore >= 80 ? "text-emerald-400" : "text-zinc-500")}>
-                        {/* Mobile: Show score inline */}
+                              Score {item.pounceScore}
-                        <div className="flex items-center gap-2 mt-1 lg:hidden">
+                            </span>
-                          <ScoreBadge score={item.pounceScore} />
+                            <span className="text-zinc-700 text-[10px]">•</span>
-                          <SourceBadge source={item.source} isPounce={item.isPounce} />
+                            <span className={clsx("text-xs", isUrgent ? "text-red-400" : "text-zinc-500")}>
+                              {item.timeLeft}
+                            </span>
+                          </div>
                         </div>
                       </div>
                     </div>
-                  </div>
 
-                  {/* Pounce Score */}
+                    {/* Score */}
-                  <div className="col-span-1 hidden lg:flex justify-center">
+                    <div className="col-span-2 hidden md:flex justify-center">
-                    <ScoreBadge score={item.pounceScore} />
+                      <ScoreRing score={item.pounceScore} />
-                  </div>
+                    </div>
 
-                  {/* Price / Bid */}
+                    {/* Price */}
-                  <div className="col-span-2 text-right">
+                    <div className="col-span-3 md:col-span-2 text-right">
-                    <span className="font-semibold text-white font-mono">
+                      <div className="font-mono text-white font-medium tracking-tight">
-                      {formatPrice(item.price)}
+                        {formatPrice(item.price)}
-                    </span>
+                      </div>
-                    {item.priceType === 'bid' && (
+                      {item.numBids !== undefined && item.numBids > 0 && (
-                      <span className="text-zinc-500 text-xs ml-1">(bid)</span>
+                        <div className="text-[11px] text-zinc-500 mt-0.5">
-                    )}
+                          {item.numBids} bids
-                    {item.numBids && item.numBids > 0 && (
+                        </div>
-                      <p className="text-xs text-zinc-500 mt-0.5">{item.numBids} bids</p>
-                    )}
-                  </div>
-
-                  {/* Status / Time */}
-                  <div className="col-span-2 hidden md:flex justify-center">
-                    <StatusBadge status={item.status} timeLeft={item.timeLeft} />
-                  </div>
-
-                  {/* Source */}
-                  <div className="col-span-1 hidden lg:flex justify-center">
-                    <SourceBadge source={item.source} isPounce={item.isPounce} />
-                  </div>
-
-                  {/* Actions */}
-                  <div className="col-span-2 flex items-center gap-2 justify-end">
-                    {/* Track Button */}
-                    <button
-                      onClick={() => handleTrack(item.domain)}
-                      disabled={trackedDomains.has(item.domain) || trackingInProgress === item.domain}
-                      className={clsx(
-                        "p-2 rounded-lg transition-all",
-                        trackedDomains.has(item.domain)
-                          ? "bg-emerald-500/20 text-emerald-400"
-                          : "bg-zinc-800 text-zinc-400 hover:text-white hover:bg-zinc-700"
                       )}
-                      title={trackedDomains.has(item.domain) ? 'Tracked' : 'Add to Watchlist'}
+                    </div>
-                    >
-                      {trackingInProgress === item.domain ? (
-                        <Loader2 className="w-4 h-4 animate-spin" />
-                      ) : trackedDomains.has(item.domain) ? (
-                        <Check className="w-4 h-4" />
-                      ) : (
-                        <Plus className="w-4 h-4" />
-                      )}
-                    </button>
 
-                    {/* Action Button */}
+                    {/* Time */}
-                    <a
+                    <div className="col-span-2 hidden lg:flex justify-center">
-                      href={item.affiliateUrl || '#'}
+                      <div className={clsx(
-                      target="_blank"
+                        "flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium border",
-                      rel="noopener noreferrer"
+                        isUrgent 
-                      className={clsx(
+                          ? "bg-red-500/10 text-red-400 border-red-500/20" 
-                        "inline-flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-semibold transition-all",
+                          : "bg-zinc-900 border-zinc-800 text-zinc-400"
-                        item.isPounce
+                      )}>
-                          ? "bg-emerald-500 text-black hover:bg-emerald-400"
+                        <Clock className="w-3 h-3" />
-                          : "bg-white text-black hover:bg-zinc-200"
+                        {item.timeLeft}
-                      )}
+                      </div>
-                    >
+                    </div>
-                      {item.isPounce ? 'Buy' : 'Bid'}
+
-                      <ExternalLink className="w-3.5 h-3.5" />
+                    {/* Source */}
-                    </a>
+                    <div className="col-span-2 hidden xl:flex justify-center">
+                      <SourceBadge source={item.source} isPounce={item.isPounce} />
+                    </div>
+
+                    {/* Action */}
+                    <div className="col-span-4 md:col-span-2 xl:col-span-2 flex items-center justify-end gap-2 opacity-100 lg:opacity-60 lg:group-hover:opacity-100 transition-opacity">
+                      <button
+                        onClick={() => handleTrack(item.domain)}
+                        disabled={trackedDomains.has(item.domain)}
+                        className={clsx(
+                          "w-8 h-8 flex items-center justify-center rounded-lg border transition-all",
+                          trackedDomains.has(item.domain)
+                            ? "bg-emerald-500 text-white border-emerald-500"
+                            : "border-zinc-700 text-zinc-400 hover:text-white hover:border-zinc-500 hover:bg-zinc-800"
+                        )}
+                      >
+                        {trackedDomains.has(item.domain) ? <Check className="w-4 h-4" /> : <Plus className="w-4 h-4" />}
+                      </button>
+                      
+                      <a
+                        href={item.affiliateUrl || '#'}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="h-8 px-3 flex items-center gap-2 bg-white text-zinc-950 rounded-lg text-xs font-semibold hover:bg-zinc-200 transition-colors"
+                      >
+                        {item.isPounce ? 'Buy' : 'Bid'}
+                        <ExternalLink className="w-3 h-3" />
+                      </a>
+                    </div>
                   </div>
-                </div>
+                )
-              ))}
+              })}
             </div>
           )}
         </div>
-
-        {/* ================================================================ */}
-        {/* FOOTER INFO */}
-        {/* ================================================================ */}
-        <div className="flex items-center justify-between text-xs text-zinc-600">
-          <span>
-            Showing {marketItems.length} of {auctions.length} total listings
-          </span>
-          <span className="flex items-center gap-1.5">
-            <Clock className="w-3.5 h-3.5" />
-            Data from GoDaddy, Sedo, NameJet, DropCatch
-          </span>
-        </div>
-
       </div>
     </TerminalLayout>
   )