Watchlist: Fixed layout order + TLD Detail: Full techy mobile design

backend/app/api/admin.py

@@ -811,7 +811,7 @@ async def test_email(
     """Send a test email to the admin user."""
     from app.services.email_service import email_service
     
-    if not email_service.is_configured:
+    if not email_service.is_configured():
         raise HTTPException(
             status_code=400,
             detail="Email service is not configured. Check SMTP settings."

backend/app/api/auth.py

@@ -160,7 +160,7 @@ async def register(
     await db.commit()
     
     # Send verification email in background
-    if email_service.is_configured:
+    if email_service.is_configured():
         site_url = os.getenv("SITE_URL", "http://localhost:3000")
         verify_url = f"{site_url}/verify-email?token={verification_token}"
         
@@ -312,7 +312,7 @@ async def forgot_password(
     await db.commit()
     
     # Send reset email in background
-    if email_service.is_configured:
+    if email_service.is_configured():
         site_url = os.getenv("SITE_URL", "http://localhost:3000")
         reset_url = f"{site_url}/reset-password?token={reset_token}"
         
@@ -440,7 +440,7 @@ async def resend_verification(
     await db.commit()
     
     # Send verification email
-    if email_service.is_configured:
+    if email_service.is_configured():
         site_url = os.getenv("SITE_URL", "http://localhost:3000")
         verify_url = f"{site_url}/verify-email?token={verification_token}"
         

frontend/src/app/terminal/intel/[tld]/page.tsx

@@ -1,8 +1,8 @@
 'use client'
 
-import { useEffect, useState, useMemo, useRef, useCallback, memo } from 'react'
+import { useEffect, useState, useMemo, useRef, useCallback } from 'react'
 import { useParams, useRouter } from 'next/navigation'
-import { CommandCenterLayout } from '@/components/CommandCenterLayout'
+import { Sidebar } from '@/components/Sidebar'
 import { useStore } from '@/lib/store'
 import { api } from '@/lib/api'
 import {
@@ -10,7 +10,6 @@ import {
   TrendingUp,
   TrendingDown,
   Minus,
-  Calendar,
   Globe,
   Building,
   ExternalLink,
@@ -19,20 +18,26 @@ import {
   Check,
   X,
   RefreshCw,
-  AlertTriangle,
   DollarSign,
   BarChart3,
-  Shield,
-  ShieldCheck,
   Loader2,
-  Info,
   Lock,
   Sparkles,
   Diamond,
-  Activity,
-  Zap
+  Eye,
+  Gavel,
+  Target,
+  Menu,
+  Settings,
+  Shield,
+  LogOut,
+  Crown,
+  Zap,
+  Coins,
+  Tag
 } from 'lucide-react'
 import Link from 'next/link'
+import Image from 'next/image'
 import clsx from 'clsx'
 
 // ============================================================================
@@ -120,7 +125,7 @@ function PriceChart({
 
   if (data.length === 0) {
     return (
-      <div className="h-64 flex flex-col items-center justify-center text-white/20 text-xs font-mono space-y-2">
+      <div className="h-48 lg:h-64 flex flex-col items-center justify-center text-white/20 text-xs font-mono space-y-2">
         <BarChart3 className="w-8 h-8" />
         <span>No price history available</span>
       </div>
@@ -146,7 +151,7 @@ function PriceChart({
   return (
     <div 
       ref={containerRef}
-      className="relative h-64 w-full cursor-crosshair"
+      className="relative h-48 lg:h-64 w-full cursor-crosshair"
       onMouseLeave={() => setHoveredIndex(null)}
     >
       <svg 
@@ -217,7 +222,7 @@ function PriceChart({
 export default function TldDetailPage() {
   const params = useParams()
   const router = useRouter()
-  const { fetchSubscription, subscription } = useStore()
+  const { fetchSubscription, subscription, user, logout, checkAuth } = useStore()
   const tld = params.tld as string
   
   const userTier: UserTier = (subscription?.tier as UserTier) || 'scout'
@@ -242,10 +247,14 @@ export default function TldDetailPage() {
   const [checkingDomain, setCheckingDomain] = useState(false)
   const [domainResult, setDomainResult] = useState<DomainCheckResult | null>(null)
   
+  // Mobile Menu
+  const [menuOpen, setMenuOpen] = useState(false)
+
   useEffect(() => {
+    checkAuth()
     fetchSubscription()
     if (tld) loadData()
-  }, [tld, fetchSubscription])
+  }, [tld, fetchSubscription, checkAuth])
 
   const loadData = async () => {
     try {
@@ -356,37 +365,140 @@ export default function TldDetailPage() {
 
   const renewalInfo = getRenewalInfo()
   
+  // Mobile Nav
+  const mobileNavItems = [
+    { href: '/terminal/radar', label: 'Radar', icon: Target, active: false },
+    { href: '/terminal/market', label: 'Market', icon: Gavel, active: false },
+    { href: '/terminal/watchlist', label: 'Watch', icon: Eye, active: false },
+    { href: '/terminal/intel', label: 'Intel', icon: TrendingUp, active: true },
+  ]
+  
+  const tierName = subscription?.tier_name || subscription?.tier || 'Scout'
+  const TierIcon = tierName === 'Tycoon' ? Crown : tierName === 'Trader' ? TrendingUp : Zap
+  
+  const drawerNavSections = [
+    {
+      title: 'Discover',
+      items: [
+        { href: '/terminal/radar', label: 'Radar', icon: Target },
+        { href: '/terminal/market', label: 'Market', icon: Gavel },
+        { href: '/terminal/intel', label: 'Intel', icon: TrendingUp },
+      ]
+    },
+    {
+      title: 'Manage',
+      items: [
+        { href: '/terminal/watchlist', label: 'Watchlist', icon: Eye },
+        { href: '/terminal/sniper', label: 'Sniper', icon: Target },
+      ]
+    },
+    {
+      title: 'Monetize',
+      items: [
+        { href: '/terminal/yield', label: 'Yield', icon: Coins, isNew: true },
+        { href: '/terminal/listing', label: 'For Sale', icon: Tag },
+      ]
+    }
+  ]
+
   if (loading) {
     return (
-      <CommandCenterLayout minimal>
-        <div className="flex items-center justify-center min-h-[50vh]">
+      <div className="min-h-screen bg-[#020202] flex items-center justify-center">
         <Loader2 className="w-6 h-6 text-accent animate-spin" />
       </div>
-      </CommandCenterLayout>
     )
   }
 
   if (error || !details) {
     return (
-      <CommandCenterLayout minimal>
-        <div className="flex flex-col items-center justify-center min-h-[50vh] text-white/40">
+      <div className="min-h-screen bg-[#020202] flex flex-col items-center justify-center text-white/40 px-4">
         <X className="w-12 h-12 text-white/10 mb-4" />
         <h1 className="text-xl font-display text-white mb-2">TLD Not Found</h1>
-          <p className="mb-6">The extension .{tld} is not currently tracked.</p>
+        <p className="mb-6 text-center">The extension .{tld} is not currently tracked.</p>
         <Link href="/terminal/intel" className="text-accent hover:text-white flex items-center gap-2 text-sm">
           <ArrowLeft className="w-4 h-4" /> Back to Intel
         </Link>
       </div>
-      </CommandCenterLayout>
     )
   }
 
   return (
-    <CommandCenterLayout minimal>
+    <div className="min-h-screen bg-[#020202]">
+      {/* Desktop Sidebar */}
+      <div className="hidden lg:block">
+        <Sidebar />
+      </div>
+      
+      {/* Main Content */}
+      <main className="lg:pl-[240px]">
+        
         {/* ═══════════════════════════════════════════════════════════════════════ */}
-      {/* HEADER */}
+        {/* MOBILE HEADER */}
         {/* ═══════════════════════════════════════════════════════════════════════ */}
-      <section className="pt-6 lg:pt-8 pb-6 border-b border-white/[0.08]">
+        <header 
+          className="lg:hidden sticky top-0 z-40 bg-[#020202]/95 backdrop-blur-md border-b border-white/[0.08]" 
+          style={{ paddingTop: 'env(safe-area-inset-top)' }}
+        >
+          <div className="px-4 py-3">
+            {/* Back + Title */}
+            <div className="flex items-center gap-3 mb-3">
+              <Link href="/terminal/intel" className="w-8 h-8 flex items-center justify-center border border-white/10 text-white/40">
+                <ArrowLeft className="w-4 h-4" />
+              </Link>
+              <div className="flex items-center gap-2">
+                <div className="w-1 h-6 bg-accent" />
+                <span className="text-lg font-bold text-white font-mono">.{details.tld}</span>
+                <span className={clsx(
+                  "px-1.5 py-0.5 text-[9px] font-mono border",
+                  details.risk_level === 'high' ? "bg-red-500/10 text-red-400 border-red-500/20" :
+                  details.risk_level === 'medium' ? "bg-amber-500/10 text-amber-400 border-amber-500/20" :
+                  "bg-accent/10 text-accent border-accent/20"
+                )}>
+                  {details.risk_level}
+                </span>
+              </div>
+            </div>
+            
+            {/* Stats Grid */}
+            <div className="grid grid-cols-4 gap-2">
+              <div className="bg-white/[0.02] border border-white/[0.08] p-2">
+                <div className="text-sm font-bold text-accent tabular-nums font-mono">${details.pricing.min.toFixed(0)}</div>
+                <div className="text-[8px] font-mono text-white/30 uppercase tracking-wider">Reg</div>
+              </div>
+              <div className="bg-white/[0.02] border border-white/[0.08] p-2">
+                <div className="text-sm font-bold text-white tabular-nums font-mono">
+                  {canSeeRenewal ? `$${details.min_renewal_price.toFixed(0)}` : '—'}
+                </div>
+                <div className="text-[8px] font-mono text-white/30 uppercase tracking-wider">Renew</div>
+              </div>
+              <div className="bg-white/[0.02] border border-white/[0.08] p-2">
+                <div className={clsx(
+                  "text-sm font-bold tabular-nums font-mono",
+                  details.price_change_1y > 5 ? "text-orange-400" : details.price_change_1y < -5 ? "text-accent" : "text-white/40"
+                )}>
+                  {details.price_change_1y > 0 ? '+' : ''}{details.price_change_1y.toFixed(0)}%
+                </div>
+                <div className="text-[8px] font-mono text-white/30 uppercase tracking-wider">1Y</div>
+              </div>
+              <div className="bg-white/[0.02] border border-white/[0.08] p-2">
+                <div className={clsx(
+                  "text-sm font-bold tabular-nums font-mono",
+                  canSeeFullHistory
+                    ? (details.price_change_3y > 10 ? "text-orange-400" : details.price_change_3y < -10 ? "text-accent" : "text-white/40")
+                    : "text-white/20"
+                )}>
+                  {canSeeFullHistory ? `${details.price_change_3y > 0 ? '+' : ''}${details.price_change_3y.toFixed(0)}%` : '—'}
+                </div>
+                <div className="text-[8px] font-mono text-white/30 uppercase tracking-wider">3Y</div>
+              </div>
+            </div>
+          </div>
+        </header>
+
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
+        {/* DESKTOP HEADER */}
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
+        <section className="hidden lg:block px-10 pt-10 pb-6 border-b border-white/[0.08]">
           <div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6">
             <div className="space-y-4">
               {/* Breadcrumb */}
@@ -400,10 +512,9 @@ export default function TldDetailPage() {
                 <div className="w-1 h-12 bg-accent" />
                 <div>
                   <div className="flex items-center gap-3">
-                  <h1 className="font-display text-[2.5rem] lg:text-[3rem] leading-[1] tracking-[-0.02em] text-white">
+                    <h1 className="font-display text-[2.5rem] leading-[1] tracking-[-0.02em] text-white">
                       .{details.tld}
                     </h1>
-                  {/* Risk Badge */}
                     <span className={clsx(
                       "px-2 py-1 text-[10px] font-mono border",
                       details.risk_level === 'high' ? "bg-red-500/10 text-red-400 border-red-500/20" :
@@ -418,96 +529,17 @@ export default function TldDetailPage() {
               </div>
             </div>
             
-          <div className="flex items-center gap-3">
-            <div className={clsx(
-              "px-3 py-1.5 border flex items-center gap-2 text-xs font-mono",
-              userTier === 'tycoon' ? "bg-amber-500/5 border-amber-500/20 text-amber-400" :
-              userTier === 'trader' ? "bg-accent/5 border-accent/20 text-accent" :
-              "bg-white/5 border-white/10 text-white/50"
-            )}>
-              <Diamond className="w-3.5 h-3.5" />
-              {userTier}
+            <div className="flex gap-8">
+              <div className="text-right">
+                <div className="text-2xl font-bold text-accent font-mono">${details.pricing.min.toFixed(2)}</div>
+                <div className="text-[9px] font-mono text-white/30 uppercase tracking-wider">Registration</div>
               </div>
-          </div>
-        </div>
-      </section>
-
-      {/* ═══════════════════════════════════════════════════════════════════════ */}
-      {/* STATS GRID */}
-      {/* ═══════════════════════════════════════════════════════════════════════ */}
-      <section className="py-6">
-        <div className="grid grid-cols-2 lg:grid-cols-4 gap-px bg-white/[0.05]">
-          {/* Registration */}
-          <div className="bg-[#020202] p-5">
-            <div className="flex items-center gap-2 text-white/40 mb-2">
-              <DollarSign className="w-4 h-4" />
-              <span className="text-[10px] font-mono tracking-wide">Registration</span>
-            </div>
-            <div className="text-2xl font-display text-white">${details.pricing.min.toFixed(2)}</div>
-            <div className="text-[10px] text-white/30 mt-1">at {details.cheapest_registrar}</div>
-          </div>
-          
-          {/* Renewal */}
-          <div className="bg-[#020202] p-5">
-            <div className="flex items-center gap-2 text-white/40 mb-2">
-              <RefreshCw className="w-4 h-4" />
-              <span className="text-[10px] font-mono tracking-wide">Renewal</span>
-            </div>
-            {canSeeRenewal ? (
-              <>
-                <div className={clsx(
-                  "text-2xl font-display",
-                  renewalInfo?.isTrap ? "text-amber-400" : "text-white"
-                )}>
+              {canSeeRenewal && (
+                <div className="text-right">
+                  <div className={clsx("text-2xl font-bold font-mono", renewalInfo?.isTrap ? "text-amber-400" : "text-white")}>
                     ${details.min_renewal_price.toFixed(2)}
                   </div>
-                {renewalInfo?.isTrap && (
-                  <div className="text-[10px] text-amber-400 mt-1">{renewalInfo.ratio.toFixed(1)}x markup</div>
-                )}
-              </>
-            ) : (
-              <div className="flex items-center gap-2 text-white/20">
-                <Lock className="w-4 h-4" />
-                <span className="text-lg">—</span>
-              </div>
-            )}
-          </div>
-          
-          {/* 1Y Trend */}
-          <div className="bg-[#020202] p-5">
-            <div className="flex items-center gap-2 text-white/40 mb-2">
-              {details.price_change_1y > 0 ? <TrendingUp className="w-4 h-4" /> : <TrendingDown className="w-4 h-4" />}
-              <span className="text-[10px] font-mono tracking-wide">1Y Trend</span>
-            </div>
-            <div className={clsx(
-              "text-2xl font-display",
-              details.price_change_1y > 5 ? "text-orange-400" : 
-              details.price_change_1y < -5 ? "text-accent" : 
-              "text-white/40"
-            )}>
-              {details.price_change_1y > 0 ? '+' : ''}{details.price_change_1y.toFixed(0)}%
-            </div>
-          </div>
-          
-          {/* 3Y Trend */}
-          <div className="bg-[#020202] p-5">
-            <div className="flex items-center gap-2 text-white/40 mb-2">
-              <BarChart3 className="w-4 h-4" />
-              <span className="text-[10px] font-mono tracking-wide">3Y Trend</span>
-            </div>
-            {canSeeFullHistory ? (
-              <div className={clsx(
-                "text-2xl font-display",
-                details.price_change_3y > 10 ? "text-orange-400" :
-                details.price_change_3y < -10 ? "text-accent" :
-                "text-white/40"
-              )}>
-                {details.price_change_3y > 0 ? '+' : ''}{details.price_change_3y.toFixed(0)}%
-              </div>
-            ) : (
-              <div className="flex items-center gap-2 text-white/20">
-                <Lock className="w-4 h-4" />
-                <span className="text-lg">—</span>
+                  <div className="text-[9px] font-mono text-white/30 uppercase tracking-wider">Renewal</div>
                 </div>
               )}
             </div>
@@ -515,40 +547,38 @@ export default function TldDetailPage() {
         </section>
 
         {/* ═══════════════════════════════════════════════════════════════════════ */}
-      {/* MAIN CONTENT */}
+        {/* CONTENT */}
         {/* ═══════════════════════════════════════════════════════════════════════ */}
-      <section className="pb-12">
+        <section className="px-4 lg:px-10 py-6 pb-28 lg:pb-10">
           <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
             
             {/* Left Column: Chart + Search */}
             <div className="lg:col-span-2 space-y-6">
               
               {/* Price Chart */}
-            <div className="border border-white/[0.08] bg-white/[0.01] p-6 relative">
+              <div className="border border-white/[0.08] bg-white/[0.01] p-4 lg:p-6 relative">
                 {/* Lock overlay for Scout */}
                 {!canAccessDetailPage && (
                   <div className="absolute inset-0 bg-[#020202]/80 backdrop-blur-[2px] flex flex-col items-center justify-center z-20">
-                  <div className="w-14 h-14 border border-white/10 bg-white/5 flex items-center justify-center mb-4">
-                    <Lock className="w-6 h-6 text-white/30" />
+                    <div className="w-12 h-12 border border-white/10 bg-white/5 flex items-center justify-center mb-4">
+                      <Lock className="w-5 h-5 text-white/30" />
                     </div>
-                  <h3 className="text-lg font-display text-white mb-2">Charts Locked</h3>
-                  <p className="text-sm text-white/40 mb-4 text-center max-w-xs">
-                    Upgrade to Trader for detailed price history.
+                    <h3 className="text-sm font-bold text-white mb-2">Charts Locked</h3>
+                    <p className="text-xs text-white/40 mb-4 text-center max-w-xs">
+                      Upgrade for detailed price history.
                     </p>
                     <Link
                       href="/pricing"
-                    className="px-5 py-2 bg-accent text-black text-sm font-semibold hover:bg-white transition-colors flex items-center gap-2"
+                      className="px-4 py-2 bg-accent text-black text-xs font-bold uppercase tracking-wider hover:bg-white transition-colors flex items-center gap-2"
                     >
-                    <Sparkles className="w-4 h-4" />
+                      <Sparkles className="w-3 h-3" />
                       Unlock
                     </Link>
                   </div>
                 )}
                 
-              <div className="flex items-center justify-between mb-6">
-                <div>
-                  <h3 className="text-sm font-mono text-white/40 tracking-wide">Price History</h3>
-                </div>
+                <div className="flex items-center justify-between mb-4">
+                  <h3 className="text-xs font-mono text-white/40 uppercase tracking-wider">Price History</h3>
                   <div className="flex bg-white/5 border border-white/10">
                     {(['1M', '3M', '1Y', 'ALL'] as ChartPeriod[]).map((period) => {
                       const isAvailable = availablePeriods.includes(period)
@@ -559,7 +589,7 @@ export default function TldDetailPage() {
                           onClick={() => isAvailable && setChartPeriod(period)}
                           disabled={!isAvailable}
                           className={clsx(
-                          "px-3 py-1.5 text-[10px] font-mono transition-all",
+                            "px-2 lg:px-3 py-1.5 text-[10px] font-mono transition-all",
                             isActive
                               ? "bg-white/10 text-white"
                               : isAvailable
@@ -574,38 +604,38 @@ export default function TldDetailPage() {
                   </div>
                 </div>
                 
-              <div className={clsx("h-64", !canAccessDetailPage && "blur-sm")}>
+                <div className={clsx(!canAccessDetailPage && "blur-sm")}>
                   <PriceChart data={filteredHistory} chartStats={chartStats} />
                 </div>
                 
-              <div className="grid grid-cols-3 gap-4 mt-6 pt-6 border-t border-white/[0.06]">
+                <div className="grid grid-cols-3 gap-4 mt-4 pt-4 border-t border-white/[0.06]">
                   <div className="text-center">
-                  <div className="text-[10px] text-white/30 font-mono mb-1">High</div>
-                  <div className="text-lg font-mono text-white">${chartStats.high.toFixed(2)}</div>
+                    <div className="text-[9px] text-white/30 font-mono uppercase mb-1">High</div>
+                    <div className="text-sm font-mono text-white">${chartStats.high.toFixed(2)}</div>
                   </div>
                   <div className="text-center border-l border-r border-white/[0.06]">
-                  <div className="text-[10px] text-white/30 font-mono mb-1">Average</div>
-                  <div className="text-lg font-mono text-white">${chartStats.avg.toFixed(2)}</div>
+                    <div className="text-[9px] text-white/30 font-mono uppercase mb-1">Average</div>
+                    <div className="text-sm font-mono text-white">${chartStats.avg.toFixed(2)}</div>
                   </div>
                   <div className="text-center">
-                  <div className="text-[10px] text-white/30 font-mono mb-1">Low</div>
-                  <div className="text-lg font-mono text-accent">${chartStats.low.toFixed(2)}</div>
+                    <div className="text-[9px] text-white/30 font-mono uppercase mb-1">Low</div>
+                    <div className="text-sm font-mono text-accent">${chartStats.low.toFixed(2)}</div>
                   </div>
                 </div>
               </div>
 
               {/* Domain Check */}
-            <div className="border border-white/[0.08] bg-white/[0.01] p-6">
-              <div className="flex flex-col lg:flex-row gap-6 items-start lg:items-center">
-                <div className="flex-1">
-                  <h2 className="text-sm font-mono text-white/40 tracking-wide mb-1 flex items-center gap-2">
-                    <Search className="w-4 h-4" />
+              <div className="border border-white/[0.08] bg-white/[0.01] p-4 lg:p-6">
+                <div className="flex flex-col gap-4">
+                  <div>
+                    <h2 className="text-xs font-mono text-white/40 uppercase tracking-wider mb-1 flex items-center gap-2">
+                      <Search className="w-3 h-3" />
                       Check Availability
                     </h2>
-                  <p className="text-xs text-white/30">Check if your .{details.tld} domain is available</p>
+                    <p className="text-[10px] font-mono text-white/30">Check if your .{details.tld} domain is available</p>
                   </div>
 
-                <div className="flex-1 w-full flex gap-3">
+                  <div className="flex gap-2">
                     <input
                       type="text"
                       value={domainSearch}
@@ -617,7 +647,7 @@ export default function TldDetailPage() {
                     <button
                       onClick={handleDomainCheck}
                       disabled={checkingDomain || !domainSearch.trim()}
-                    className="h-10 px-6 bg-accent text-black text-sm font-semibold hover:bg-white transition-colors disabled:opacity-50"
+                      className="h-10 px-4 bg-accent text-black text-xs font-bold uppercase tracking-wider hover:bg-white transition-colors disabled:opacity-50"
                     >
                       {checkingDomain ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Check'}
                     </button>
@@ -625,9 +655,9 @@ export default function TldDetailPage() {
                 </div>
                 
                 {domainResult && (
-                <div className="mt-6 pt-6 border-t border-white/[0.06]">
+                  <div className="mt-4 pt-4 border-t border-white/[0.06]">
                     <div className={clsx(
-                    "p-4 border flex items-center justify-between",
+                      "p-3 border flex items-center justify-between",
                       domainResult.is_available 
                         ? "bg-accent/5 border-accent/20" 
                         : "bg-red-500/5 border-red-500/20"
@@ -643,7 +673,7 @@ export default function TldDetailPage() {
                           </div>
                         )}
                         <div>
-                        <div className="font-mono font-medium text-white">{domainResult.domain}</div>
+                          <div className="font-mono font-medium text-white text-sm">{domainResult.domain}</div>
                           <div className={clsx("text-[10px] font-mono", domainResult.is_available ? "text-accent" : "text-red-400")}>
                             {domainResult.is_available ? 'Available' : 'Registered'}
                           </div>
@@ -655,9 +685,9 @@ export default function TldDetailPage() {
                           href={getRegistrarUrl(details.cheapest_registrar, domainResult.domain)}
                           target="_blank"
                           rel="noopener noreferrer"
-                        className="px-4 py-2 bg-accent text-black text-xs font-semibold hover:bg-white transition-colors flex items-center gap-2"
+                          className="px-3 py-2 bg-accent text-black text-[10px] font-bold uppercase tracking-wider hover:bg-white transition-colors flex items-center gap-1.5"
                         >
-                        Buy at {details.cheapest_registrar}
+                          Register
                           <ExternalLink className="w-3 h-3" />
                         </a>
                       )}
@@ -671,16 +701,16 @@ export default function TldDetailPage() {
                 <div className="bg-[#020202] p-4">
                   <div className="flex items-center gap-2 text-white/40 mb-2">
                     <Globe className="w-4 h-4" />
-                  <span className="text-[10px] font-mono">Type</span>
+                    <span className="text-[9px] font-mono uppercase tracking-wider">Type</span>
                   </div>
-                <div className="text-sm text-white capitalize">{details.type}</div>
+                  <div className="text-sm text-white capitalize font-mono">{details.type}</div>
                 </div>
                 <div className="bg-[#020202] p-4">
                   <div className="flex items-center gap-2 text-white/40 mb-2">
                     <Building className="w-4 h-4" />
-                  <span className="text-[10px] font-mono">Registry</span>
+                    <span className="text-[9px] font-mono uppercase tracking-wider">Registry</span>
                   </div>
-                <div className="text-sm text-white truncate">{details.registry}</div>
+                  <div className="text-sm text-white truncate font-mono">{details.registry}</div>
                 </div>
               </div>
             </div>
@@ -688,36 +718,30 @@ export default function TldDetailPage() {
             {/* Right Column: Registrars */}
             <div className="border border-white/[0.08] bg-white/[0.01] h-fit">
               <div className="p-4 border-b border-white/[0.06]">
-              <h3 className="text-sm font-mono text-white/40 tracking-wide">Registrar Prices</h3>
+                <h3 className="text-xs font-mono text-white/40 uppercase tracking-wider">Registrar Prices</h3>
               </div>
               
               <div className="divide-y divide-white/[0.05]">
-              {details.registrars.map((registrar, idx) => {
+                {details.registrars.slice(0, 5).map((registrar, idx) => {
                   const hasRenewalTrap = registrar.renewal_price / registrar.registration_price > 1.5
                   const isBest = idx === 0 && !hasRenewalTrap
 
                   return (
                     <div key={registrar.name} className="p-4 hover:bg-white/[0.02] transition-colors">
-                    <div className="flex items-center justify-between">
+                      <div className="flex items-center justify-between mb-2">
                         <div>
-                        <div className="text-sm text-white">{registrar.name}</div>
-                        {isBest && <span className="text-[10px] text-accent font-mono">Best Value</span>}
+                          <div className="text-sm text-white font-mono">{registrar.name}</div>
+                          {isBest && <span className="text-[9px] text-accent font-mono uppercase">Best Value</span>}
                           {idx === 0 && hasRenewalTrap && canSeeRenewal && (
-                          <span className="text-[10px] text-amber-400 font-mono">Renewal Trap</span>
+                            <span className="text-[9px] text-amber-400 font-mono uppercase">Renewal Trap</span>
                           )}
                         </div>
                         <div className="text-right">
-                        <div className={clsx(
-                          "font-mono text-sm",
-                          isBest ? "text-accent" : "text-white"
-                        )}>
+                          <div className={clsx("font-mono text-sm font-bold", isBest ? "text-accent" : "text-white")}>
                             ${registrar.registration_price.toFixed(2)}
                           </div>
                           {canSeeRenewal && (
-                          <div className={clsx(
-                            "text-[10px] font-mono",
-                            hasRenewalTrap ? "text-amber-400" : "text-white/30"
-                          )}>
+                            <div className={clsx("text-[10px] font-mono", hasRenewalTrap ? "text-amber-400" : "text-white/30")}>
                               ${registrar.renewal_price.toFixed(2)}/yr
                             </div>
                           )}
@@ -727,7 +751,7 @@ export default function TldDetailPage() {
                         href={getRegistrarUrl(registrar.name)}
                         target="_blank"
                         rel="noopener noreferrer"
-                      className="mt-3 w-full h-8 bg-white/5 border border-white/10 text-white/50 hover:text-white text-xs font-medium flex items-center justify-center gap-2 transition-colors"
+                        className="w-full h-8 bg-white/5 border border-white/10 text-white/50 hover:text-white text-[10px] font-mono uppercase tracking-wider flex items-center justify-center gap-2 transition-colors"
                       >
                         Visit
                         <ExternalLink className="w-3 h-3" />
@@ -741,7 +765,7 @@ export default function TldDetailPage() {
                 <div className="p-4 border-t border-white/[0.06]">
                   <Link 
                     href="/pricing" 
-                  className="flex items-center justify-center gap-2 text-xs font-mono text-accent hover:text-white transition-colors"
+                    className="flex items-center justify-center gap-2 text-[10px] font-mono text-accent hover:text-white transition-colors uppercase tracking-wider"
                   >
                     <Sparkles className="w-3 h-3" />
                     Upgrade for renewal prices
@@ -751,6 +775,155 @@ export default function TldDetailPage() {
             </div>
           </div>
         </section>
-    </CommandCenterLayout>
+
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
+        {/* MOBILE BOTTOM NAV */}
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
+        <nav 
+          className="lg:hidden fixed bottom-0 left-0 right-0 z-50 bg-[#020202] border-t border-white/[0.08]"
+          style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}
+        >
+          <div className="flex items-stretch h-14">
+            {mobileNavItems.map((item) => (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={clsx(
+                  "flex-1 flex flex-col items-center justify-center gap-0.5 relative transition-colors",
+                  item.active ? "text-accent" : "text-white/40 active:text-white/80"
+                )}
+              >
+                {item.active && (
+                  <div className="absolute top-0 left-1/2 -translate-x-1/2 w-10 h-0.5 bg-accent" />
+                )}
+                <item.icon className="w-5 h-5" />
+                <span className="text-[9px] font-mono uppercase tracking-wider">{item.label}</span>
+              </Link>
+            ))}
+            
+            <button
+              onClick={() => setMenuOpen(true)}
+              className="flex-1 flex flex-col items-center justify-center gap-0.5 text-white/40 active:text-white/80 transition-all"
+            >
+              <Menu className="w-5 h-5" />
+              <span className="text-[9px] font-mono uppercase tracking-wider">Menu</span>
+            </button>
+          </div>
+        </nav>
+        
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
+        {/* MOBILE DRAWER */}
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
+        {menuOpen && (
+          <div className="lg:hidden fixed inset-0 z-[100]">
+            <div 
+              className="absolute inset-0 bg-black/80 animate-in fade-in duration-200"
+              onClick={() => setMenuOpen(false)}
+            />
+            
+            <div className="absolute top-0 right-0 bottom-0 w-[80%] max-w-[300px] bg-[#0A0A0A] border-l border-white/[0.08] animate-in slide-in-from-right duration-300 flex flex-col" style={{ paddingTop: 'env(safe-area-inset-top)', paddingBottom: 'env(safe-area-inset-bottom)' }}>
+              
+              <div className="flex items-center justify-between p-4 border-b border-white/[0.08]">
+                <div className="flex items-center gap-3">
+                  <Image src="/pounce-puma.png" alt="Pounce" width={28} height={28} className="object-contain" />
+                  <div>
+                    <h2 className="text-sm font-bold text-white tracking-wider">POUNCE</h2>
+                    <p className="text-[9px] text-white/40 font-mono uppercase tracking-widest">Terminal v1.0</p>
+                  </div>
+                </div>
+                <button
+                  onClick={() => setMenuOpen(false)}
+                  className="w-8 h-8 flex items-center justify-center border border-white/10 text-white/60 hover:text-white active:bg-white/5 transition-all"
+                >
+                  <X className="w-4 h-4" />
+                </button>
+              </div>
+              
+              <div className="flex-1 overflow-y-auto py-4">
+                {drawerNavSections.map((section) => (
+                  <div key={section.title} className="mb-4">
+                    <div className="flex items-center gap-2 px-4 mb-2">
+                      <div className="w-1 h-3 bg-accent" />
+                      <span className="text-[9px] font-bold text-white/30 uppercase tracking-[0.2em]">{section.title}</span>
+                    </div>
+                    <div>
+                      {section.items.map((item: any) => (
+                        <Link
+                          key={item.href}
+                          href={item.href}
+                          onClick={() => setMenuOpen(false)}
+                          className="flex items-center gap-3 px-4 py-2.5 text-white/60 active:text-white active:bg-white/[0.03] transition-colors border-l-2 border-transparent active:border-accent"
+                        >
+                          <item.icon className="w-4 h-4 text-white/30" />
+                          <span className="text-sm font-medium flex-1">{item.label}</span>
+                          {item.isNew && (
+                            <span className="px-1.5 py-0.5 text-[8px] font-bold bg-accent text-black">NEW</span>
+                          )}
+                        </Link>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+                
+                <div className="pt-3 border-t border-white/[0.08] mx-4">
+                  <Link
+                    href="/terminal/settings"
+                    onClick={() => setMenuOpen(false)}
+                    className="flex items-center gap-3 py-2.5 text-white/50 active:text-white transition-colors"
+                  >
+                    <Settings className="w-4 h-4" />
+                    <span className="text-sm font-medium">Settings</span>
+                  </Link>
+                  
+                  {user?.is_admin && (
+                    <Link
+                      href="/admin"
+                      onClick={() => setMenuOpen(false)}
+                      className="flex items-center gap-3 py-2.5 text-amber-500/70 active:text-amber-400 transition-colors"
+                    >
+                      <Shield className="w-4 h-4" />
+                      <span className="text-sm font-medium">Admin</span>
+                    </Link>
+                  )}
+                </div>
+              </div>
+              
+              <div className="p-4 bg-white/[0.02] border-t border-white/[0.08]">
+                <div className="flex items-center gap-3 mb-3">
+                  <div className="w-8 h-8 bg-accent/10 border border-accent/20 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-bold text-white truncate">
+                      {user?.name || user?.email?.split('@')[0] || 'User'}
+                    </p>
+                    <p className="text-[9px] font-mono text-white/40 uppercase tracking-wider">{tierName}</p>
+                  </div>
+                </div>
+                
+                {tierName === 'Scout' && (
+                  <Link 
+                    href="/pricing"
+                    onClick={() => setMenuOpen(false)}
+                    className="flex items-center justify-center gap-2 w-full py-2.5 bg-accent text-black text-xs font-bold uppercase tracking-wider active:scale-[0.98] transition-all mb-2"
+                  >
+                    <Sparkles className="w-3 h-3" />
+                    Upgrade
+                  </Link>
+                )}
+                
+                <button
+                  onClick={() => { logout(); setMenuOpen(false) }}
+                  className="flex items-center justify-center gap-2 w-full py-2 border border-white/10 text-white/40 text-[10px] font-mono uppercase tracking-wider active:bg-white/5 transition-all"
+                >
+                  <LogOut className="w-3 h-3" />
+                  Sign out
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+      </main>
+    </div>
   )
 }

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

@@ -327,10 +327,41 @@ export default function WatchlistPage() {
         </header>
 
         {/* ═══════════════════════════════════════════════════════════════════════ */}
-        {/* ADD DOMAIN */}
+        {/* DESKTOP HEADER */}
         {/* ═══════════════════════════════════════════════════════════════════════ */}
-        <section className="px-4 lg:px-10 py-4">
-          <form onSubmit={handleAdd} className="relative">
+        <section className="hidden lg:block px-10 pt-10 pb-6">
+          <div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6">
+            <div className="space-y-3">
+              <div className="flex items-center gap-2">
+                <div className="w-1.5 h-1.5 bg-accent animate-pulse" />
+                <span className="text-[10px] font-mono tracking-[0.2em] text-accent uppercase">Domain Surveillance</span>
+              </div>
+              
+              <h1 className="font-display text-[2.5rem] leading-[1] tracking-[-0.02em]">
+                <span className="text-white">Watchlist</span>
+                <span className="text-white/30 ml-3 font-mono text-[2rem]">{stats.total}</span>
+              </h1>
+            </div>
+            
+            <div className="flex gap-8">
+              <div className="text-right">
+                <div className="text-2xl font-bold text-accent font-mono">{stats.available}</div>
+                <div className="text-[9px] font-mono text-white/30 uppercase tracking-wider">Available</div>
+              </div>
+              <div className="text-right">
+                <div className="text-2xl font-bold text-orange-400 font-mono">{stats.expiring}</div>
+                <div className="text-[9px] font-mono text-white/30 uppercase tracking-wider">Expiring</div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
+        {/* ADD DOMAIN + FILTERS */}
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
+        <section className="px-4 lg:px-10 py-4 border-b border-white/[0.08]">
+          {/* Add Domain Form */}
+          <form onSubmit={handleAdd} className="relative mb-4">
             <div className={clsx(
               "flex items-center border-2 transition-all duration-200",
               searchFocused 
@@ -359,12 +390,8 @@ export default function WatchlistPage() {
               </button>
             </div>
           </form>
-        </section>
           
-        {/* ═══════════════════════════════════════════════════════════════════════ */}
-        {/* FILTERS */}
-        {/* ═══════════════════════════════════════════════════════════════════════ */}
-        <section className="px-4 lg:px-10 pb-4 border-b border-white/[0.08]">
+          {/* Filters */}
           <div className="flex items-center gap-1">
             {[
               { value: 'all', label: 'All', count: stats.total },
@@ -387,36 +414,6 @@ export default function WatchlistPage() {
           </div>
         </section>
 
-        {/* ═══════════════════════════════════════════════════════════════════════ */}
-        {/* DESKTOP HEADER */}
-        {/* ═══════════════════════════════════════════════════════════════════════ */}
-        <section className="hidden lg:block px-10 pt-10 pb-6">
-          <div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6">
-            <div className="space-y-3">
-              <div className="flex items-center gap-2">
-                <div className="w-1.5 h-1.5 bg-accent animate-pulse" />
-                <span className="text-[10px] font-mono tracking-[0.2em] text-accent uppercase">Domain Surveillance</span>
-              </div>
-              
-              <h1 className="font-display text-[2.5rem] leading-[1] tracking-[-0.02em]">
-                <span className="text-white">Watchlist</span>
-                <span className="text-white/30 ml-3 font-mono text-[2rem]">{stats.total}</span>
-              </h1>
-            </div>
-            
-            <div className="flex gap-8">
-              <div className="text-right">
-                <div className="text-2xl font-bold text-accent font-mono">{stats.available}</div>
-                <div className="text-[9px] font-mono text-white/30 uppercase tracking-wider">Available</div>
-              </div>
-              <div className="text-right">
-                <div className="text-2xl font-bold text-orange-400 font-mono">{stats.expiring}</div>
-                <div className="text-[9px] font-mono text-white/30 uppercase tracking-wider">Expiring</div>
-              </div>
-            </div>
-          </div>
-        </section>
-
         {/* ═══════════════════════════════════════════════════════════════════════ */}
         {/* DOMAIN LIST */}
         {/* ═══════════════════════════════════════════════════════════════════════ */}