UI/UX redesign: unified refined-glass design system

- Add shared UI primitives: Button, Field/Input/Select, PageHeader,
  Section, Callout, Tabs, Disclosure
- Replace gradient buttons with single blue-accent btn-primary
- Reserve gradient text for the brand wordmark only
- Rework Scanner page onto the glass system; collapse explainer and
  glossary into a disclosure, move filters into a glass toolbar
- Restructure Ticker Detail into tabs (Analysis / Indicators / S/R)
  with chart and recommendation always visible
- Align Watchlist, Rankings, Admin, Login/Register to shared primitives
- Unify stray indigo/violet/gray accents into the blue family

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/pages/AdminPage.tsx

@@ -7,6 +7,8 @@ import { SettingsForm } from '../components/admin/SettingsForm';
 import { TickerManagement } from '../components/admin/TickerManagement';
 import { TickerUniverseBootstrap } from '../components/admin/TickerUniverseBootstrap';
 import { UserTable } from '../components/admin/UserTable';
+import { PageHeader } from '../components/ui/PageHeader';
+import { Tabs } from '../components/ui/Tabs';
 
 const tabs = ['Users', 'Tickers', 'Settings', 'Jobs', 'Cleanup'] as const;
 type Tab = (typeof tabs)[number];
@@ -16,27 +18,9 @@ export default function AdminPage() {
 
   return (
     <div className="space-y-6 animate-slide-up">
-      <div>
-        <h1 className="text-2xl font-bold text-gradient">Admin</h1>
-        <p className="text-xs text-gray-500 mt-1">System management</p>
-      </div>
+      <PageHeader title="Admin" subtitle="System management" />
 
-      {/* Tab bar */}
-      <div className="flex gap-1 glass-sm p-1 w-fit">
-        {tabs.map((tab) => (
-          <button
-            key={tab}
-            onClick={() => setActiveTab(tab)}
-            className={`px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200 ${
-              activeTab === tab
-                ? 'bg-white/[0.1] text-white shadow-lg shadow-blue-500/10'
-                : 'text-gray-400 hover:text-gray-200 hover:bg-white/[0.04]'
-            }`}
-          >
-            {tab}
-          </button>
-        ))}
-      </div>
+      <Tabs tabs={tabs} active={activeTab} onChange={setActiveTab} />
 
       {/* Tab content */}
       <div className="animate-fade-in">

frontend/src/pages/LoginPage.tsx

@@ -25,7 +25,7 @@ export default function LoginPage() {
     <div className="min-h-screen flex items-center justify-center px-4 relative overflow-hidden">
       {/* Ambient glow orbs */}
       <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-500/10 rounded-full blur-[120px] animate-glow-pulse" />
-      <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-violet-500/10 rounded-full blur-[100px] animate-glow-pulse" style={{ animationDelay: '1.5s' }} />
+      <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-sky-500/10 rounded-full blur-[100px] animate-glow-pulse" style={{ animationDelay: '1.5s' }} />
 
       <div className="w-full max-w-sm space-y-8 animate-slide-up">
         <div className="text-center">
@@ -73,7 +73,7 @@ export default function LoginPage() {
           <button
             type="submit"
             disabled={login.isPending}
-            className="w-full btn-gradient px-4 py-2.5 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+            className="w-full btn-primary px-4 py-2.5 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
           >
             <span>{login.isPending ? 'Signing in…' : 'Sign in'}</span>
           </button>

frontend/src/pages/RankingsPage.tsx

@@ -1,41 +1,29 @@
 import { useRankings } from '../hooks/useScores';
 import { RankingsTable } from '../components/rankings/RankingsTable';
 import { WeightsForm } from '../components/rankings/WeightsForm';
+import { Callout } from '../components/ui/Callout';
+import { PageHeader } from '../components/ui/PageHeader';
 import { SkeletonTable } from '../components/ui/Skeleton';
 
 export default function RankingsPage() {
   const { data, isLoading, isError, error } = useRankings();
 
-  if (isLoading) {
-    return (
-      <div className="space-y-6 animate-slide-up">
-        <h1 className="text-2xl font-bold text-gradient">Rankings</h1>
-        <SkeletonTable rows={8} cols={6} />
-      </div>
-    );
-  }
-
-  if (isError) {
-    return (
-      <div className="animate-slide-up">
-        <h1 className="text-2xl font-bold text-gradient">Rankings</h1>
-        <p className="mt-4 text-sm text-red-400">
-          Failed to load rankings: {(error as Error).message}
-        </p>
-      </div>
-    );
-  }
-
-  if (!data) return null;
-
   return (
     <div className="space-y-6 animate-slide-up">
-      <div>
-        <h1 className="text-2xl font-bold text-gradient">Rankings</h1>
-        <p className="text-xs text-gray-500 mt-1">Composite scoring leaderboard</p>
-      </div>
-      <WeightsForm weights={data.weights} />
-      <RankingsTable rankings={data.rankings} />
+      <PageHeader title="Rankings" subtitle="Composite scoring leaderboard" />
+
+      {isLoading && <SkeletonTable rows={8} cols={6} />}
+
+      {isError && (
+        <Callout variant="error">Failed to load rankings: {(error as Error).message}</Callout>
+      )}
+
+      {data && (
+        <>
+          <WeightsForm weights={data.weights} />
+          <RankingsTable rankings={data.rankings} />
+        </>
+      )}
     </div>
   );
 }

frontend/src/pages/RegisterPage.tsx

@@ -40,7 +40,7 @@ export default function RegisterPage() {
           </div>
           <Link
             to="/login"
-            className="inline-block btn-gradient px-6 py-2.5 text-sm font-medium"
+            className="inline-block btn-primary px-6 py-2.5 text-sm font-medium"
           >
             <span>Go to Login</span>
           </Link>
@@ -51,7 +51,7 @@ export default function RegisterPage() {
 
   return (
     <div className="min-h-screen flex items-center justify-center px-4 relative overflow-hidden">
-      <div className="absolute top-1/4 right-1/4 w-96 h-96 bg-violet-500/10 rounded-full blur-[120px] animate-glow-pulse" />
+      <div className="absolute top-1/4 right-1/4 w-96 h-96 bg-sky-500/10 rounded-full blur-[120px] animate-glow-pulse" />
       <div className="absolute bottom-1/3 left-1/3 w-80 h-80 bg-blue-500/10 rounded-full blur-[100px] animate-glow-pulse" style={{ animationDelay: '1.5s' }} />
 
       <div className="w-full max-w-sm space-y-8 animate-slide-up">
@@ -104,7 +104,7 @@ export default function RegisterPage() {
           <button
             type="submit"
             disabled={register.isPending}
-            className="w-full btn-gradient px-4 py-2.5 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+            className="w-full btn-primary px-4 py-2.5 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
           >
             <span>{register.isPending ? 'Creating account…' : 'Create account'}</span>
           </button>

frontend/src/pages/ScannerPage.tsx

@@ -4,6 +4,11 @@ import { useTrades } from '../hooks/useTrades';
 import { TradeTable, type SortColumn, type SortDirection, computeTradeAnalysis } from '../components/scanner/TradeTable';
 import { SkeletonTable } from '../components/ui/Skeleton';
 import { useToast } from '../components/ui/Toast';
+import { Button } from '../components/ui/Button';
+import { Callout } from '../components/ui/Callout';
+import { Disclosure } from '../components/ui/Disclosure';
+import { Field, Input, Select } from '../components/ui/Field';
+import { PageHeader } from '../components/ui/PageHeader';
 import { triggerJob } from '../api/admin';
 import type { TradeSetup } from '../lib/types';
 import { RECOMMENDATION_ACTION_GLOSSARY, RECOMMENDATION_ACTION_LABELS } from '../lib/recommendation';
@@ -127,66 +132,46 @@ export default function ScannerPage() {
   }, [trades, minRR, directionFilter, minConfidence, actionFilter, sortColumn, sortDirection]);
 
   return (
-    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-bold text-gray-100">Trade Scanner</h1>
-        <button
-          type="button"
-          onClick={() => scanMutation.mutate()}
-          disabled={scanMutation.isPending}
-          className="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-500 disabled:opacity-50 transition-colors duration-150"
-        >
-          {scanMutation.isPending ? 'Scanning...' : 'Run Scanner'}
-        </button>
-      </div>
+    <div className="space-y-6 animate-slide-up">
+      <PageHeader
+        title="Trade Scanner"
+        subtitle="Asymmetric risk:reward setups across the ticker universe"
+        actions={
+          <Button onClick={() => scanMutation.mutate()} loading={scanMutation.isPending}>
+            {scanMutation.isPending ? 'Scanning…' : 'Run Scanner'}
+          </Button>
+        }
+      />
 
-      {/* Explainer banner */}
-      <div className="rounded-lg border border-blue-500/20 bg-blue-500/10 px-4 py-3 text-sm text-blue-300">
-        The scanner identifies asymmetric risk-reward trade setups by analyzing S/R levels
-        as price targets and using ATR-based stops to define risk.
-        Click <span className="font-medium">Run Scanner</span> to scan all tickers now,
-        or wait for the scheduled run.
-      </div>
-
-      {/* Filter controls */}
-      <div className="flex flex-wrap items-end gap-4">
-        <div>
-          <label htmlFor="min-rr" className="mb-1 block text-xs text-gray-400">
-            Min Risk:Reward
-          </label>
+      {/* Filter toolbar */}
+      <div className="glass-sm flex flex-wrap items-end gap-4 p-4">
+        <Field label="Min Risk:Reward" htmlFor="min-rr">
           <div className="flex items-center gap-1">
             <span className="text-sm text-gray-400">1 :</span>
-            <input
+            <Input
               id="min-rr"
               type="number"
               min={0}
               step={0.1}
               value={minRR}
               onChange={(e) => setMinRR(Number(e.target.value) || 0)}
-              className="w-20 rounded border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-gray-200 focus:border-blue-500 focus:outline-none transition-colors duration-150"
+              className="w-20"
             />
           </div>
-        </div>
-        <div>
-          <label htmlFor="direction" className="mb-1 block text-xs text-gray-400">
-            Direction
-          </label>
-          <select
+        </Field>
+        <Field label="Direction" htmlFor="direction">
+          <Select
             id="direction"
             value={directionFilter}
             onChange={(e) => setDirectionFilter(e.target.value as DirectionFilter)}
-            className="rounded border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-gray-200 focus:border-blue-500 focus:outline-none transition-colors duration-150"
           >
             <option value="both">Both</option>
             <option value="long">Long</option>
             <option value="short">Short</option>
-          </select>
-        </div>
-        <div>
-          <label htmlFor="min-confidence" className="mb-1 block text-xs text-gray-400">
-            Min Confidence
-          </label>
-          <input
+          </Select>
+        </Field>
+        <Field label="Min Confidence" htmlFor="min-confidence">
+          <Input
             id="min-confidence"
             type="number"
             min={0}
@@ -194,54 +179,55 @@ export default function ScannerPage() {
             step={1}
             value={minConfidence}
             onChange={(e) => setMinConfidence(Number(e.target.value) || 0)}
-            className="w-24 rounded border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-gray-200 focus:border-blue-500 focus:outline-none transition-colors duration-150"
+            className="w-24"
           />
-        </div>
-        <div>
-          <label htmlFor="action" className="mb-1 block text-xs text-gray-400">
-            Recommended Action
-          </label>
-          <select
+        </Field>
+        <Field label="Recommended Action" htmlFor="action">
+          <Select
             id="action"
             value={actionFilter}
             onChange={(e) => setActionFilter(e.target.value as ActionFilter)}
-            className="rounded border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-gray-200 focus:border-blue-500 focus:outline-none transition-colors duration-150"
           >
             <option value="all">All</option>
-            <option value="LONG_HIGH">LONG_HIGH</option>
-            <option value="LONG_MODERATE">LONG_MODERATE</option>
-            <option value="SHORT_HIGH">SHORT_HIGH</option>
-            <option value="SHORT_MODERATE">SHORT_MODERATE</option>
-            <option value="NEUTRAL">NEUTRAL</option>
-          </select>
-        </div>
+            <option value="LONG_HIGH">{RECOMMENDATION_ACTION_LABELS.LONG_HIGH}</option>
+            <option value="LONG_MODERATE">{RECOMMENDATION_ACTION_LABELS.LONG_MODERATE}</option>
+            <option value="SHORT_HIGH">{RECOMMENDATION_ACTION_LABELS.SHORT_HIGH}</option>
+            <option value="SHORT_MODERATE">{RECOMMENDATION_ACTION_LABELS.SHORT_MODERATE}</option>
+            <option value="NEUTRAL">{RECOMMENDATION_ACTION_LABELS.NEUTRAL}</option>
+          </Select>
+        </Field>
       </div>
 
-      <div className="rounded-lg border border-white/[0.08] bg-white/[0.02] px-4 py-3">
-        <p className="text-xs uppercase tracking-wider text-gray-500 mb-2">Recommended Action Glossary (Ticker-Level Bias)</p>
+      <Disclosure summary="How the scanner works & action glossary">
+        <p className="mb-3 text-xs text-gray-400">
+          The scanner identifies asymmetric risk-reward trade setups by analyzing S/R levels as
+          price targets and using ATR-based stops to define risk. Click{' '}
+          <span className="font-medium text-gray-300">Run Scanner</span> to scan all tickers now,
+          or wait for the scheduled run.
+        </p>
         <div className="grid gap-1 md:grid-cols-2">
           {RECOMMENDATION_ACTION_GLOSSARY.map((item) => (
             <p key={item.action} className="text-xs text-gray-300">
-              <span className="font-semibold text-indigo-300">{RECOMMENDATION_ACTION_LABELS[item.action]}:</span>{' '}
+              <span className="font-semibold text-blue-300">{RECOMMENDATION_ACTION_LABELS[item.action]}:</span>{' '}
               {item.description}
             </p>
           ))}
         </div>
-      </div>
+      </Disclosure>
 
       {/* Content */}
       {isLoading && <SkeletonTable rows={8} cols={8} />}
 
       {isError && (
-        <div className="rounded-lg border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-400">
+        <Callout variant="error">
           {error instanceof Error ? error.message : 'Failed to load trade setups'}
-        </div>
+        </Callout>
       )}
 
       {trades && processed.length === 0 && !isLoading && (
-        <div className="rounded-lg border border-gray-700 bg-gray-800/50 px-4 py-8 text-center text-sm text-gray-400">
+        <Callout variant="empty">
           No trade setups match the current filters. Try lowering the Min R:R or click Run Scanner to refresh.
-        </div>
+        </Callout>
       )}
 
       {trades && processed.length > 0 && (

frontend/src/pages/TickerDetailPage.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useEffect } from 'react';
+import { useMemo, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { useTickerDetail } from '../hooks/useTickerDetail';
 import { useFetchSymbolData } from '../hooks/useFetchSymbolData';
@@ -9,19 +9,21 @@ import { SentimentPanel } from '../components/ticker/SentimentPanel';
 import { FundamentalsPanel } from '../components/ticker/FundamentalsPanel';
 import { IndicatorSelector } from '../components/ticker/IndicatorSelector';
 import { RecommendationPanel } from '../components/ticker/RecommendationPanel';
+import { Button } from '../components/ui/Button';
+import { Callout } from '../components/ui/Callout';
+import { Section } from '../components/ui/Section';
+import { Tabs } from '../components/ui/Tabs';
 import { formatPrice } from '../lib/format';
 import type { TradeSetup } from '../lib/types';
 
+const detailTabs = ['Analysis', 'Indicators', 'S/R Levels'] as const;
+type DetailTab = (typeof detailTabs)[number];
+
 function SectionError({ message, onRetry }: { message: string; onRetry?: () => void }) {
   return (
-    <div className="glass-sm bg-red-500/10 border-red-500/20 p-4 text-sm text-red-400">
-      <p>{message}</p>
-      {onRetry && (
-        <button onClick={onRetry} className="mt-2 text-xs font-medium text-red-300 underline hover:text-red-200">
-          Retry
-        </button>
-      )}
-    </div>
+    <Callout variant="error" onRetry={onRetry}>
+      {message}
+    </Callout>
   );
 }
 
@@ -67,6 +69,7 @@ export default function TickerDetailPage() {
   const { symbol = '' } = useParams<{ symbol: string }>();
   const { ohlcv, scores, srLevels, sentiment, fundamentals, trades } = useTickerDetail(symbol);
   const ingestion = useFetchSymbolData();
+  const [activeTab, setActiveTab] = useState<DetailTab>('Analysis');
 
   const dataStatus: DataStatusItem[] = useMemo(() => [
     {
@@ -134,24 +137,14 @@ export default function TickerDetailPage() {
   return (
     <div className="space-y-6 animate-slide-up">
       {/* Header */}
-      <div className="flex items-center justify-between">
+      <div className="flex flex-wrap items-center justify-between gap-4">
         <div>
-          <h1 className="text-3xl font-bold text-gradient">{symbol.toUpperCase()}</h1>
+          <h1 className="text-3xl font-semibold text-gray-100">{symbol.toUpperCase()}</h1>
           <p className="text-sm text-gray-500 mt-0.5">Ticker Detail</p>
         </div>
-        <button
-          onClick={() => ingestion.mutate(symbol)}
-          disabled={ingestion.isPending}
-          className="btn-gradient inline-flex items-center gap-2 px-5 py-2.5 text-sm disabled:opacity-60 disabled:cursor-not-allowed"
-        >
-          {ingestion.isPending && (
-            <svg className="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
-              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
-            </svg>
-          )}
-          <span>{ingestion.isPending ? 'Fetching…' : 'Fetch Data'}</span>
-        </button>
+        <Button onClick={() => ingestion.mutate(symbol)} loading={ingestion.isPending}>
+          {ingestion.isPending ? 'Fetching…' : 'Fetch Data'}
+        </Button>
       </div>
 
       {/* Data freshness bar */}
@@ -159,9 +152,8 @@ export default function TickerDetailPage() {
 
       <RecommendationPanel symbol={symbol} longSetup={longSetup} shortSetup={shortSetup} />
 
-      {/* Chart Section */}
-      <section>
-        <h2 className="mb-3 text-xs font-medium uppercase tracking-widest text-gray-500">Price Chart</h2>
+      {/* Chart — always visible */}
+      <Section title="Price Chart">
         {ohlcv.isLoading && <SkeletonCard className="h-[400px]" />}
         {ohlcv.isError && (
           <SectionError
@@ -173,82 +165,86 @@ export default function TickerDetailPage() {
           <div className="glass p-5">
             <CandlestickChart data={ohlcv.data} srLevels={srLevels.data?.levels} zones={srLevels.data?.zones} tradeSetup={tradeSetup} />
             {srLevels.isError && (
-              <p className="mt-2 text-xs text-yellow-500/80">S/R levels unavailable — chart shown without overlays</p>
+              <p className="mt-2 text-xs text-amber-500/80">S/R levels unavailable — chart shown without overlays</p>
             )}
           </div>
         )}
-      </section>
+      </Section>
 
-      {/* Scores + Side Panels */}
-      <div className="grid gap-6 lg:grid-cols-3">
-        <section>
-          <h2 className="mb-3 text-xs font-medium uppercase tracking-widest text-gray-500">Scores</h2>
-          {scores.isLoading && <SkeletonCard />}
-          {scores.isError && (
-            <SectionError message={scores.error instanceof Error ? scores.error.message : 'Failed to load scores'} onRetry={() => scores.refetch()} />
-          )}
-          {scores.data && (
-            <ScoreCard compositeScore={scores.data.composite_score} dimensions={scores.data.dimensions} compositeBreakdown={scores.data.composite_breakdown} />
-          )}
-        </section>
+      {/* Detail tabs */}
+      <Tabs tabs={detailTabs} active={activeTab} onChange={setActiveTab} />
 
-        <section>
-          <h2 className="mb-3 text-xs font-medium uppercase tracking-widest text-gray-500">Sentiment</h2>
-          {sentiment.isLoading && <SkeletonCard />}
-          {sentiment.isError && (
-            <SectionError message={sentiment.error instanceof Error ? sentiment.error.message : 'Failed to load sentiment'} onRetry={() => sentiment.refetch()} />
-          )}
-          {sentiment.data && <SentimentPanel data={sentiment.data} />}
-        </section>
+      {activeTab === 'Analysis' && (
+        <div className="grid gap-6 lg:grid-cols-3 animate-fade-in">
+          <Section title="Scores">
+            {scores.isLoading && <SkeletonCard />}
+            {scores.isError && (
+              <SectionError message={scores.error instanceof Error ? scores.error.message : 'Failed to load scores'} onRetry={() => scores.refetch()} />
+            )}
+            {scores.data && (
+              <ScoreCard compositeScore={scores.data.composite_score} dimensions={scores.data.dimensions} compositeBreakdown={scores.data.composite_breakdown} />
+            )}
+          </Section>
 
-        <section>
-          <h2 className="mb-3 text-xs font-medium uppercase tracking-widest text-gray-500">Fundamentals</h2>
-          {fundamentals.isLoading && <SkeletonCard />}
-          {fundamentals.isError && (
-            <SectionError message={fundamentals.error instanceof Error ? fundamentals.error.message : 'Failed to load fundamentals'} onRetry={() => fundamentals.refetch()} />
-          )}
-          {fundamentals.data && <FundamentalsPanel data={fundamentals.data} />}
-        </section>
-      </div>
+          <Section title="Sentiment">
+            {sentiment.isLoading && <SkeletonCard />}
+            {sentiment.isError && (
+              <SectionError message={sentiment.error instanceof Error ? sentiment.error.message : 'Failed to load sentiment'} onRetry={() => sentiment.refetch()} />
+            )}
+            {sentiment.data && <SentimentPanel data={sentiment.data} />}
+          </Section>
 
-      {/* Indicators */}
-      <section>
-        <h2 className="mb-3 text-xs font-medium uppercase tracking-widest text-gray-500">Technical Indicators</h2>
-        <IndicatorSelector symbol={symbol} />
-      </section>
+          <Section title="Fundamentals">
+            {fundamentals.isLoading && <SkeletonCard />}
+            {fundamentals.isError && (
+              <SectionError message={fundamentals.error instanceof Error ? fundamentals.error.message : 'Failed to load fundamentals'} onRetry={() => fundamentals.refetch()} />
+            )}
+            {fundamentals.data && <FundamentalsPanel data={fundamentals.data} />}
+          </Section>
+        </div>
+      )}
 
-      {/* S/R Levels Table — sorted by strength */}
-      {sortedLevels.length > 0 && (
-        <section>
-          <h2 className="mb-3 text-xs font-medium uppercase tracking-widest text-gray-500">
-            Support &amp; Resistance Levels
-            <span className="ml-2 text-gray-600 normal-case tracking-normal">sorted by strength</span>
-          </h2>
-          <div className="glass overflow-x-auto">
-            <table className="w-full text-sm">
-              <thead>
-                <tr className="border-b border-white/[0.06] text-left text-xs uppercase tracking-wider text-gray-500">
-                  <th className="px-4 py-3">Type</th>
-                  <th className="px-4 py-3">Price Level</th>
-                  <th className="px-4 py-3">Strength</th>
-                  <th className="px-4 py-3">Method</th>
-                </tr>
-              </thead>
-              <tbody>
-                {sortedLevels.map((level) => (
-                  <tr key={level.id} className="border-b border-white/[0.04] transition-colors duration-150 hover:bg-white/[0.03]">
-                    <td className="px-4 py-3">
-                      <span className={level.type === 'support' ? 'text-emerald-400' : 'text-red-400'}>{level.type}</span>
-                    </td>
-                    <td className="px-4 py-3 text-gray-200 font-mono">{formatPrice(level.price_level)}</td>
-                    <td className="px-4 py-3 text-gray-200">{level.strength}</td>
-                    <td className="px-4 py-3 text-gray-400">{level.detection_method}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </section>
+      {activeTab === 'Indicators' && (
+        <div className="animate-fade-in">
+          <Section title="Technical Indicators">
+            <IndicatorSelector symbol={symbol} />
+          </Section>
+        </div>
+      )}
+
+      {activeTab === 'S/R Levels' && (
+        <div className="animate-fade-in">
+          <Section title="Support & Resistance Levels" hint="sorted by strength">
+            {sortedLevels.length === 0 ? (
+              <Callout variant="empty">No S/R levels detected for this ticker yet.</Callout>
+            ) : (
+              <div className="glass overflow-x-auto">
+                <table className="w-full text-sm">
+                  <thead>
+                    <tr className="border-b border-white/[0.06] text-left text-xs uppercase tracking-wider text-gray-500">
+                      <th className="px-4 py-3">Type</th>
+                      <th className="px-4 py-3">Price Level</th>
+                      <th className="px-4 py-3">Strength</th>
+                      <th className="px-4 py-3">Method</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {sortedLevels.map((level) => (
+                      <tr key={level.id} className="border-b border-white/[0.04] transition-colors duration-150 hover:bg-white/[0.03]">
+                        <td className="px-4 py-3">
+                          <span className={level.type === 'support' ? 'text-emerald-400' : 'text-red-400'}>{level.type}</span>
+                        </td>
+                        <td className="px-4 py-3 text-gray-200 font-mono">{formatPrice(level.price_level)}</td>
+                        <td className="px-4 py-3 text-gray-200">{level.strength}</td>
+                        <td className="px-4 py-3 text-gray-400">{level.detection_method}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </Section>
+        </div>
       )}
     </div>
   );

frontend/src/pages/WatchlistPage.tsx

@@ -2,6 +2,9 @@ import { useMemo, useState } from 'react';
 import { useWatchlist } from '../hooks/useWatchlist';
 import { WatchlistTable } from '../components/watchlist/WatchlistTable';
 import { AddTickerForm } from '../components/watchlist/AddTickerForm';
+import { Callout } from '../components/ui/Callout';
+import { Select } from '../components/ui/Field';
+import { PageHeader } from '../components/ui/PageHeader';
 import { SkeletonTable } from '../components/ui/Skeleton';
 import type { WatchlistEntry } from '../lib/types';
 
@@ -50,37 +53,27 @@ export default function WatchlistPage() {
 
   return (
     <div className="space-y-6 animate-slide-up">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-gradient">Watchlist</h1>
-          <p className="text-xs text-gray-500 mt-1">Track your favorite tickers</p>
-        </div>
-        <AddTickerForm />
-      </div>
+      <PageHeader title="Watchlist" subtitle="Track your favorite tickers" actions={<AddTickerForm />} />
 
       {isLoading && <SkeletonTable rows={6} cols={8} />}
 
-      {isError && (
-        <div className="glass-sm bg-red-500/10 border-red-500/20 px-4 py-3 text-sm text-red-400">
-          {error?.message || 'Failed to load watchlist'}
-        </div>
-      )}
+      {isError && <Callout variant="error">{error?.message || 'Failed to load watchlist'}</Callout>}
 
       {data && (
         <div className="space-y-3">
           <div className="flex justify-end">
             <label className="flex items-center gap-2 text-xs text-gray-400">
               <span>Sort by</span>
-              <select
+              <Select
                 value={sortMode}
                 onChange={(event) => setSortMode(event.target.value as SortMode)}
-                className="rounded-lg border border-white/10 bg-white/[0.03] px-2 py-1.5 text-xs text-gray-200 outline-none focus:border-blue-500/40"
+                className="!py-1 !text-xs"
               >
                 <option value="score_desc">Score (high → low)</option>
                 <option value="score_asc">Score (low → high)</option>
                 <option value="name_asc">Name (A → Z)</option>
                 <option value="name_desc">Name (Z → A)</option>
-              </select>
+              </Select>
             </label>
           </div>