diff --git a/.cursor/hooks.json b/.cursor/hooks.json
index 76fdb74..3de648a 100644
--- a/.cursor/hooks.json
+++ b/.cursor/hooks.json
@@ -16,8 +16,7 @@
     "stop": [
       {
         "command": ".cursor/hooks/stop-quality-check.sh",
-        "timeout": 600,
-        "loop_limit": 0
+        "timeout": 600
       }
     ]
   }
diff --git a/.cursor/hooks/after-file-edit.sh b/.cursor/hooks/after-file-edit.sh
index cd8e797..cdadaf6 100755
--- a/.cursor/hooks/after-file-edit.sh
+++ b/.cursor/hooks/after-file-edit.sh
@@ -4,6 +4,9 @@
 
 set -euo pipefail
 
+# Cursor hook processes often inherit a minimal PATH; bun is usually in ~/.bun/bin.
+export PATH="${HOME}/.bun/bin:/opt/homebrew/bin:/usr/local/bin:${PATH:-}"
+
 input=$(cat)
 file_path=$(
   printf '%s' "$input" | python3 -c "import sys, json; print(json.load(sys.stdin).get('file_path', ''))"
diff --git a/.cursor/hooks/stop-quality-check.sh b/.cursor/hooks/stop-quality-check.sh
index ea07395..736558d 100755
--- a/.cursor/hooks/stop-quality-check.sh
+++ b/.cursor/hooks/stop-quality-check.sh
@@ -3,6 +3,9 @@
 
 set -euo pipefail
 
+# Cursor hook processes often inherit a minimal PATH; bun is usually in ~/.bun/bin.
+export PATH="${HOME}/.bun/bin:/opt/homebrew/bin:/usr/local/bin:${PATH:-}"
+
 cat >/dev/null
 
 project_root="${CURSOR_PROJECT_DIR:-$(cd "$(dirname "$0")/../.." && pwd)}"
diff --git a/app/(main)/home-page-client.tsx b/app/(main)/home-page-client.tsx
index 64f33b7..69d5178 100644
--- a/app/(main)/home-page-client.tsx
+++ b/app/(main)/home-page-client.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import dynamic from "next/dynamic";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import {
   SymbolData,
@@ -23,6 +23,12 @@ import { EXPLANATIONS_PROVIDER_CHANGED_EVENT } from "@/lib/explanation-provider"
 import { fetchAIPredictionForCurrentProvider } from "@/lib/local-ollama-ai-prediction";
 import { fetchStockOfTheDayForCurrentProvider } from "@/lib/local-ollama-stock-of-the-day";
 import { MARKET_UI_COPY } from "@/lib/market-ui-copy";
+import {
+  fetchHistoricalData,
+  fetchPrimarySymbolData,
+  fetchSecondarySymbolData,
+} from "@/lib/home-page-symbol-fetch";
+import { normalizeMarketSymbol } from "@/lib/market-symbol";
 import { AIPredictionPanel } from "@/components/AIPredictionPanel";
 import { HomeHub } from "@/components/HomeHub";
 import { StockOfTheDayPanel } from "@/components/StockOfTheDayPanel";
@@ -122,6 +128,8 @@ export function HomePageClient() {
   const [activeTab, setActiveTab] = useState<TabType>("overview");
   const [symbolData, setSymbolData] = useState<SymbolData | null>(null);
   const [historicalData, setHistoricalData] = useState<PriceData[]>([]);
+  const [loadedHistoryRange, setLoadedHistoryRange] = useState<TimeRange>("1M");
+  const [historyLoading, setHistoryLoading] = useState(false);
   const [timeRange, setTimeRange] = useState<TimeRange>("1M");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -147,11 +155,7 @@ export function HomePageClient() {
   );
 
   useEffect(() => {
-    if (symbolFromUrl && symbolFromUrl.trim()) {
-      setSelectedSymbol(symbolFromUrl.trim().toUpperCase());
-    } else {
-      setSelectedSymbol(null);
-    }
+    setSelectedSymbol(normalizeMarketSymbol(symbolFromUrl));
   }, [symbolFromUrl]);
 
   const clearSymbol = () => {
@@ -159,77 +163,81 @@ export function HomePageClient() {
     router.replace("/", { scroll: false });
   };
 
-  useEffect(() => {
-    const fetchSymbolData = async () => {
-      if (!selectedSymbol) return;
-
-      setLoading(true);
-      setError(null);
+  const loadedSymbolRef = useRef<string | null>(null);
 
-      try {
-        const symbolResponse = await fetch(
-          `/api/market/symbol/${selectedSymbol}`
-        );
-        if (!symbolResponse.ok) {
-          const body = (await symbolResponse.json().catch(() => ({}))) as {
-            error?: string;
-          };
-          throw new Error(body.error ?? MARKET_UI_COPY.load.symbolData);
-        }
-        const symbolResult = await symbolResponse.json();
-        setSymbolData(symbolResult.data);
-
-        const historicalResponse = await fetch(
-          `/api/market/historical/${selectedSymbol}?range=${timeRange}`
-        );
-        if (!historicalResponse.ok) {
-          throw new Error(MARKET_UI_COPY.load.historicalData);
-        }
-        const historicalResult = await historicalResponse.json();
-        setHistoricalData(historicalResult.data);
+  useEffect(() => {
+    if (!selectedSymbol) {
+      loadedSymbolRef.current = null;
+      return;
+    }
 
-        const indicatorsResponse = await fetch(
-          `/api/market/indicators/${selectedSymbol}`
-        );
-        if (indicatorsResponse.ok) {
-          const indicatorsResult = await indicatorsResponse.json();
-          setTechnicalIndicators(indicatorsResult.data);
+    let cancelled = false;
+    const symbolChanged = loadedSymbolRef.current !== selectedSymbol;
+    loadedSymbolRef.current = selectedSymbol;
+
+    const load = async () => {
+      if (symbolChanged) {
+        setLoading(true);
+        setError(null);
+        setSymbolData(null);
+        setHistoricalData([]);
+        setTechnicalIndicators(null);
+        setForecastData(null);
+        setSeasonalData(null);
+        setFinancialData(null);
+
+        try {
+          const primary = await fetchPrimarySymbolData(
+            selectedSymbol,
+            timeRange
+          );
+          if (cancelled) return;
+          setSymbolData(primary.symbolData);
+          setHistoricalData(primary.historicalData);
+          setLoadedHistoryRange(timeRange);
+        } catch (err) {
+          if (cancelled) return;
+          console.error("Error fetching symbol data:", err);
+          setError(
+            err instanceof Error ? err.message : MARKET_UI_COPY.load.symbolData
+          );
+        } finally {
+          if (!cancelled) setLoading(false);
         }
 
-        const forecastResponse = await fetch(
-          `/api/market/forecast/${selectedSymbol}`
-        );
-        if (forecastResponse.ok) {
-          const forecastResult = await forecastResponse.json();
-          setForecastData(forecastResult.data);
+        try {
+          const secondary = await fetchSecondarySymbolData(selectedSymbol);
+          if (cancelled) return;
+          setTechnicalIndicators(secondary.technicalIndicators);
+          setForecastData(secondary.forecastData);
+          setSeasonalData(secondary.seasonalData);
+          setFinancialData(secondary.financialData);
+        } catch (err) {
+          console.warn("Error fetching secondary symbol data:", err);
         }
+        return;
+      }
 
-        const seasonalResponse = await fetch(
-          `/api/market/seasonal/${selectedSymbol}`
-        );
-        if (seasonalResponse.ok) {
-          const seasonalResult = await seasonalResponse.json();
-          setSeasonalData(seasonalResult.data);
-        }
+      setHistoryLoading(true);
+      setHistoricalData([]);
 
-        const financialsResponse = await fetch(
-          `/api/market/financials/${selectedSymbol}`
-        );
-        if (financialsResponse.ok) {
-          const financialsResult = await financialsResponse.json();
-          setFinancialData(financialsResult.data);
-        }
+      try {
+        const historical = await fetchHistoricalData(selectedSymbol, timeRange);
+        if (cancelled) return;
+        setHistoricalData(historical);
+        setLoadedHistoryRange(timeRange);
       } catch (err) {
-        console.error("Error fetching symbol data:", err);
-        setError(
-          err instanceof Error ? err.message : MARKET_UI_COPY.load.symbolData
-        );
+        console.warn("Error fetching historical data for range:", err);
       } finally {
-        setLoading(false);
+        if (!cancelled) setHistoryLoading(false);
       }
     };
 
-    fetchSymbolData();
+    void load();
+
+    return () => {
+      cancelled = true;
+    };
   }, [selectedSymbol, timeRange]);
 
   useEffect(() => {
@@ -410,6 +418,8 @@ export function HomePageClient() {
                     symbolData={symbolData}
                     historicalData={historicalData}
                     timeRange={timeRange}
+                    dataTimeRange={loadedHistoryRange}
+                    historyLoading={historyLoading}
                     onTimeRangeChange={handleTimeRangeChange}
                   />
                 )}
diff --git a/app/globals.css b/app/globals.css
index 011a40f..bd4a613 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -43,3 +43,348 @@ h6 {
     display: none;
   }
 }
+
+/* Revolut-style chart sparkle — full-width ambient splash (area charts) */
+@keyframes chart-sparkle-sweep {
+  0% {
+    transform: translateX(-130%) skewX(-14deg);
+    opacity: 0;
+  }
+  12% {
+    opacity: 1;
+  }
+  88% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(130%) skewX(-14deg);
+    opacity: 0;
+  }
+}
+
+@keyframes chart-sparkle-flash {
+  0%,
+  100% {
+    opacity: 0.2;
+  }
+  50% {
+    opacity: 0.45;
+  }
+}
+
+.chart-sparkle-sweep {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  mix-blend-mode: screen;
+  opacity: 0;
+  z-index: 4;
+}
+
+.chart-sparkle-sweep--loading {
+  opacity: 1;
+  /* Duration/loops set inline from chart-effects; fallback matches 1200ms × 1 */
+  animation: chart-sparkle-sweep 1200ms ease-in-out 1;
+}
+
+.chart-sparkle-sweep--up {
+  background: linear-gradient(
+    100deg,
+    transparent 38%,
+    rgba(52, 211, 153, 0.08) 44%,
+    rgba(167, 243, 208, 0.42) 50%,
+    rgba(52, 211, 153, 0.08) 56%,
+    transparent 62%
+  );
+}
+
+.chart-sparkle-sweep--down {
+  background: linear-gradient(
+    100deg,
+    transparent 38%,
+    rgba(244, 63, 94, 0.08) 44%,
+    rgba(253, 164, 175, 0.42) 50%,
+    rgba(244, 63, 94, 0.08) 56%,
+    transparent 62%
+  );
+}
+
+.chart-sparkle-flash {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0;
+  z-index: 3;
+}
+
+.chart-sparkle-flash--loading {
+  opacity: 1;
+  animation: chart-sparkle-flash 1200ms ease-in-out 1;
+}
+
+.chart-sparkle-flash--up {
+  background: radial-gradient(
+    ellipse 35% 25% at 92% 22%,
+    rgba(16, 185, 129, 0.12) 0%,
+    rgba(16, 185, 129, 0.04) 45%,
+    transparent 70%
+  );
+}
+
+.chart-sparkle-flash--down {
+  background: radial-gradient(
+    ellipse 35% 25% at 92% 22%,
+    rgba(244, 63, 94, 0.12) 0%,
+    rgba(244, 63, 94, 0.04) 45%,
+    transparent 70%
+  );
+}
+
+/* TradingView-style magnifier tooltip — frosted card along top edge */
+.chart-magnifier-tooltip {
+  padding: 8px 10px;
+  border-radius: 6px 6px 0 0;
+  border-bottom: none;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  background: rgba(255, 255, 255, 0.88);
+  color: #1c1917;
+}
+
+.dark .chart-magnifier-tooltip,
+.chart-magnifier-tooltip--dark {
+  background: rgba(28, 25, 23, 0.85);
+  color: #fafaf9;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
+}
+
+.chart-magnifier-tooltip__date {
+  opacity: 0.72;
+}
+
+/* Revolut-style chart glow: scrub beam + live flash */
+
+@keyframes chart-scrub-point-pulse {
+  0%,
+  100% {
+    transform: translate(-50%, -50%) scale(0.92);
+    opacity: 0.85;
+  }
+  50% {
+    transform: translate(-50%, -50%) scale(1.08);
+    opacity: 1;
+  }
+}
+
+@keyframes chart-scrub-beam-breathe {
+  0%,
+  100% {
+    opacity: 0.82;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes chart-live-flash-ring {
+  0% {
+    transform: translate(-50%, -50%) scale(0.55);
+    opacity: 0.9;
+  }
+  70% {
+    transform: translate(-50%, -50%) scale(2.6);
+    opacity: 0;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(2.6);
+    opacity: 0;
+  }
+}
+
+@keyframes chart-live-flash-core {
+  0%,
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: translate(-50%, -50%) scale(1.3);
+    opacity: 0.8;
+  }
+}
+
+@keyframes chart-live-flash-core-down {
+  0%,
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: translate(-50%, -50%) scale(1.3);
+    opacity: 0.8;
+  }
+}
+
+.chart-scrub-beam {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 112px;
+  transform: translateX(-50%);
+  pointer-events: none;
+  opacity: 0;
+  mix-blend-mode: screen;
+  transition:
+    opacity 0.1s ease-out,
+    left 0.04s linear;
+  will-change: left, opacity;
+  z-index: 6;
+}
+
+.chart-scrub-beam--active {
+  opacity: 1;
+  animation: chart-scrub-beam-breathe 1.6s ease-in-out infinite;
+}
+
+.chart-scrub-beam--up {
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(16, 185, 129, 0.1) 28%,
+    rgba(167, 243, 208, 0.55) 50%,
+    rgba(16, 185, 129, 0.1) 72%,
+    transparent 100%
+  );
+}
+
+.chart-scrub-beam--down {
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(244, 63, 94, 0.1) 28%,
+    rgba(253, 164, 175, 0.55) 50%,
+    rgba(244, 63, 94, 0.1) 72%,
+    transparent 100%
+  );
+}
+
+.chart-scrub-point {
+  position: absolute;
+  width: 64px;
+  height: 64px;
+  transform: translate(-50%, -50%);
+  border-radius: 9999px;
+  pointer-events: none;
+  opacity: 0;
+  filter: blur(8px);
+  transition:
+    opacity 0.1s ease-out,
+    left 0.04s linear,
+    top 0.04s linear;
+  will-change: left, top, opacity;
+  z-index: 7;
+}
+
+.chart-scrub-point--active {
+  opacity: 1;
+  animation: chart-scrub-point-pulse 1.4s ease-in-out infinite;
+}
+
+.chart-scrub-point--up {
+  background: radial-gradient(
+    circle,
+    rgba(255, 255, 255, 0.98) 0%,
+    rgba(167, 243, 208, 0.85) 20%,
+    rgba(16, 185, 129, 0.45) 45%,
+    transparent 72%
+  );
+}
+
+.chart-scrub-point--down {
+  background: radial-gradient(
+    circle,
+    rgba(255, 255, 255, 0.98) 0%,
+    rgba(253, 164, 175, 0.85) 20%,
+    rgba(244, 63, 94, 0.45) 45%,
+    transparent 72%
+  );
+}
+
+.chart-live-flash {
+  position: absolute;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+  z-index: 4;
+}
+
+.chart-live-flash-ring {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 1.35rem;
+  height: 1.35rem;
+  border-radius: 9999px;
+  animation: chart-live-flash-ring 1.8s ease-out infinite;
+}
+
+.chart-live-flash-ring--up {
+  background: rgba(52, 211, 153, 0.4);
+  box-shadow: 0 0 20px rgba(52, 211, 153, 0.75);
+}
+
+.chart-live-flash-ring--down {
+  background: rgba(244, 63, 94, 0.4);
+  box-shadow: 0 0 20px rgba(244, 63, 94, 0.75);
+}
+
+.chart-live-flash-core {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 9999px;
+}
+
+.chart-live-flash-core--up {
+  background: #ffffff;
+  border: 2px solid #34d399;
+  box-shadow:
+    0 0 10px rgba(255, 255, 255, 0.95),
+    0 0 18px rgba(52, 211, 153, 0.85);
+  animation: chart-live-flash-core 1.8s ease-in-out infinite;
+}
+
+.chart-live-flash-core--down {
+  background: #ffffff;
+  border: 2px solid #fb7185;
+  box-shadow:
+    0 0 10px rgba(255, 255, 255, 0.95),
+    0 0 18px rgba(244, 63, 94, 0.85);
+  animation: chart-live-flash-core-down 1.8s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chart-sparkle-sweep--loading,
+  .chart-sparkle-flash--loading,
+  .chart-scrub-beam--active,
+  .chart-scrub-point--active,
+  .chart-live-flash-ring,
+  .chart-live-flash-core--up,
+  .chart-live-flash-core--down {
+    animation: none;
+  }
+
+  .chart-scrub-beam--active,
+  .chart-scrub-point--active {
+    opacity: 1;
+  }
+
+  .chart-sparkle-flash--loading {
+    opacity: 0.55;
+  }
+}
diff --git a/components/ChartComponent.tsx b/components/ChartComponent.tsx
index 9d88d8b..561b335 100644
--- a/components/ChartComponent.tsx
+++ b/components/ChartComponent.tsx
@@ -8,20 +8,42 @@
  * Requirements: 4.2, 11.2, 11.3, 11.4, 11.5
  */
 
+import { LoadingSpinner } from "@/components/LoadingSpinner";
 import { DNA_CAPTION } from "@/lib/design-dna";
-import { useState, useCallback } from "react";
+import { useState, useCallback, useRef, useEffect, useMemo } from "react";
 import { ChartWrapper, IChartApi } from "./ChartWrapper";
+import {
+  ChartSparkleOverlay,
+  type ChartSparkleOverlayHandle,
+} from "./ChartSparkleOverlay";
+import { ChartMagnifierTooltip } from "./ChartMagnifierTooltip";
 import { PriceData, TimeRange, ChartType, ChartIndicator } from "@/types";
 import { useTheme } from "@/lib/theme-context";
-import { homeChipClasses, HOME_CALLOUT } from "@/lib/home-ui";
+import { homeChipClasses } from "@/lib/home-ui";
+import { animateChartTrail, type ChartTrailCancel } from "@/lib/chart-trail";
+import {
+  applyPlotClip,
+  clearPlotClip,
+  computePlotClipPathFromRatio,
+  computePlotClipPathFromX,
+  HIDDEN_PLOT_CLIP,
+} from "@/lib/chart-plot-clip";
 import {
   getMarketChartColors,
+  marketChartAtmosphereGradient,
   marketChartOverlayColor,
   marketChartSignedColor,
   MARKET_DOWN_TEXT,
   MARKET_ERROR_SURFACE,
 } from "@/lib/market-semantics";
+import {
+  CHART_MAGNIFIER_TOOLTIP_WIDTH,
+  clampMagnifierTooltipLeft,
+  resolveMagnifierPoint,
+} from "@/lib/chart-magnifier-tooltip";
 import { MARKET_UI_COPY } from "@/lib/market-ui-copy";
+import { validatePriceDataSeries } from "@/lib/chart-price-data";
+import { filterPriceDataByTimeRange } from "@/lib/chart-time-range";
 import {
   calculateRSI,
   calculateMACD,
@@ -37,20 +59,33 @@ import {
   AreaSeries,
   LineSeries,
   HistogramSeries,
+  LineType,
   Time,
 } from "lightweight-charts";
 
 export interface ChartComponentProps {
   data: PriceData[];
+  symbol?: string;
+  symbolName?: string;
   type?: ChartType;
+  /** Active range — required when `serverRangeScoped` (parent-controlled). */
+  timeRange?: TimeRange;
   initialTimeRange?: TimeRange;
+  /** Range the current `data` was fetched for (server-scoped charts). */
+  dataTimeRange?: TimeRange;
+  /** Parent is refetching history for a new range. */
+  historyLoading?: boolean;
   indicators?: ChartIndicator[];
   onTimeRangeChange?: (range: TimeRange) => void;
   onDataPointHover?: (point: PriceData | null) => void;
   responsive?: boolean;
   height?: number;
+  /** Parent already fetches history for the active range (symbol overview). */
+  serverRangeScoped?: boolean;
 }
 
+const EMPTY_INDICATORS: ChartIndicator[] = [];
+
 const TIME_RANGES: TimeRange[] = [
   "1D",
   "1W",
@@ -68,81 +103,186 @@ const TIME_RANGES: TimeRange[] = [
  */
 export function ChartComponent({
   data,
-  type = "line",
+  symbol,
+  symbolName,
+  type = "area",
+  timeRange: controlledTimeRange,
   initialTimeRange = "1M",
-  indicators = [],
+  dataTimeRange,
+  historyLoading = false,
+  indicators = EMPTY_INDICATORS,
   onTimeRangeChange,
   onDataPointHover,
   height = 400,
+  serverRangeScoped = false,
 }: ChartComponentProps) {
-  const [selectedTimeRange, setSelectedTimeRange] =
+  const priceData = useMemo(() => validatePriceDataSeries(data), [data]);
+  const [localTimeRange, setLocalTimeRange] =
     useState<TimeRange>(initialTimeRange);
-  const [chartType, setChartType] = useState<ChartType>(type);
+  const activeTimeRange = serverRangeScoped
+    ? (controlledTimeRange ?? initialTimeRange)
+    : localTimeRange;
+  const dataMatchesRange =
+    !serverRangeScoped ||
+    (!historyLoading &&
+      dataTimeRange === activeTimeRange &&
+      priceData.length > 0);
+  const [chartType, setChartType] = useState<ChartType>(
+    type === "candlestick" ? "candlestick" : "area"
+  );
   const [error, setError] = useState<string | null>(null);
-  const [hoveredPoint, setHoveredPoint] = useState<PriceData | null>(null);
+  const [magnifier, setMagnifier] = useState<{
+    left: number;
+    point: PriceData;
+  } | null>(null);
+  const [plotClipPath, setPlotClipPath] = useState<string | null>(null);
   const [chartKey, setChartKey] = useState(0);
+  const chartApiRef = useRef<IChartApi | null>(null);
+  const mainSeriesRef = useRef<ISeriesApi<"Area"> | null>(null);
+  const plotContainerRef = useRef<HTMLDivElement | null>(null);
+  const sparkleRef = useRef<ChartSparkleOverlayHandle>(null);
+  const isChartLoadingRef = useRef(false);
+  const isPointerDownRef = useRef(false);
+  const isPanningRef = useRef(false);
+  const lastHoverTimeRef = useRef<Time | undefined>(undefined);
+  const trailCancelRef = useRef<ChartTrailCancel | null>(null);
+  const trailRevealProgressRef = useRef(0);
   const { resolvedTheme } = useTheme();
   const isDark = resolvedTheme === "dark";
 
-  // Filter data based on selected time range
-  const getFilteredData = useCallback(
-    (allData: PriceData[], range: TimeRange): PriceData[] => {
-      if (!allData || allData.length === 0) return [];
-
-      const now = new Date();
-      const startDate = new Date();
-
-      switch (range) {
-        case "1D":
-          startDate.setHours(now.getHours() - 24);
-          break;
-        case "1W":
-          startDate.setDate(now.getDate() - 7);
-          break;
-        case "1M":
-          startDate.setMonth(now.getMonth() - 1);
-          break;
-        case "3M":
-          startDate.setMonth(now.getMonth() - 3);
-          break;
-        case "1Y":
-          startDate.setFullYear(now.getFullYear() - 1);
-          break;
-        case "5Y":
-          startDate.setFullYear(now.getFullYear() - 5);
-          break;
-        case "Max":
-          return allData;
-      }
+  const finishTrailAnimation = useCallback(() => {
+    trailCancelRef.current?.(true);
+    trailCancelRef.current = null;
+  }, []);
 
-      const filtered = allData.filter(
-        (d) => new Date(d.timestamp) >= startDate
-      );
+  const handlePointerDown = useCallback(() => {
+    isPointerDownRef.current = true;
+    isPanningRef.current = false;
+    finishTrailAnimation();
+  }, [finishTrailAnimation]);
+
+  const handlePointerUp = useCallback(() => {
+    isPointerDownRef.current = false;
+    isPanningRef.current = false;
+    sparkleRef.current?.setCrosshairGlow(null);
+    sparkleRef.current?.syncLivePoint();
+    setMagnifier(null);
+  }, []);
+
+  const disposeTrailAnimation = useCallback(() => {
+    trailCancelRef.current?.(true);
+    trailCancelRef.current = null;
+    clearPlotClip(plotContainerRef.current);
+    setPlotClipPath(null);
+  }, []);
 
-      // If no data found, return at least the last few points
-      if (filtered.length === 0 && allData.length > 0) {
-        const count = Math.min(10, allData.length);
-        return allData.slice(-count);
+  const applyRevealClip = useCallback((progress: number, tipIndex: number) => {
+    trailRevealProgressRef.current = progress;
+
+    const chart = chartApiRef.current;
+    const series = mainSeriesRef.current;
+    const plotEl = plotContainerRef.current;
+    let clip = computePlotClipPathFromRatio(progress, plotEl);
+
+    if (chart && series) {
+      const data = series.data() as LineData[];
+      const point = data[tipIndex];
+      if (point) {
+        const frontierX = chart.timeScale().timeToCoordinate(point.time);
+        if (frontierX !== null) {
+          clip = computePlotClipPathFromX(frontierX, plotEl);
+        }
       }
+    }
 
-      return filtered;
-    },
-    []
-  );
+    applyPlotClip(plotEl, clip);
+    sparkleRef.current?.syncLiveTip(tipIndex);
+    sparkleRef.current?.setRevealProgress(progress);
+  }, []);
 
-  const filteredData = getFilteredData(data, selectedTimeRange);
+  const filteredData = useMemo(() => {
+    if (serverRangeScoped) return priceData;
+    return filterPriceDataByTimeRange(priceData, activeTimeRange);
+  }, [priceData, activeTimeRange, serverRangeScoped]);
+  const filteredDataRef = useRef(filteredData);
+  filteredDataRef.current = filteredData;
+  const onDataPointHoverRef = useRef(onDataPointHover);
+  onDataPointHoverRef.current = onDataPointHover;
+
+  const isPeriodPositive =
+    filteredData.length >= 2
+      ? filteredData[filteredData.length - 1]!.close >= filteredData[0]!.close
+      : true;
+
+  const chartDataRevision = useMemo(() => {
+    if (!dataMatchesRange) return `pending:${activeTimeRange}`;
+    if (filteredData.length === 0) return `${activeTimeRange}:empty`;
+    const first = filteredData[0]!.timestamp;
+    const last = filteredData[filteredData.length - 1]!.timestamp;
+    const revisionRange = serverRangeScoped
+      ? (dataTimeRange ?? activeTimeRange)
+      : activeTimeRange;
+    return `${revisionRange}:${chartType}:${filteredData.length}:${String(first)}:${String(last)}`;
+  }, [
+    filteredData,
+    activeTimeRange,
+    dataTimeRange,
+    chartType,
+    dataMatchesRange,
+    serverRangeScoped,
+  ]);
+
+  useEffect(() => {
+    if (!dataMatchesRange) return;
+    if (priceData.length === 0 || filteredData.length === 0) {
+      setError(MARKET_UI_COPY.chart.noData);
+      return;
+    }
+    setError(null);
+  }, [priceData, filteredData, dataMatchesRange]);
 
   // Handle time range change
   const handleTimeRangeChange = useCallback(
     (range: TimeRange) => {
-      setSelectedTimeRange(range);
-      if (onTimeRangeChange) {
-        onTimeRangeChange(range);
+      finishTrailAnimation();
+      if (!serverRangeScoped) {
+        setLocalTimeRange(range);
       }
+      onTimeRangeChange?.(range);
     },
-    [onTimeRangeChange]
+    [onTimeRangeChange, finishTrailAnimation, serverRangeScoped]
   );
 
+  useEffect(() => () => disposeTrailAnimation(), [disposeTrailAnimation]);
+
+  useEffect(() => {
+    if (!plotClipPath) return;
+
+    const recalc = () => {
+      if (trailRevealProgressRef.current <= 0) return;
+      applyRevealClip(
+        trailRevealProgressRef.current,
+        Math.max(
+          0,
+          Math.round(
+            trailRevealProgressRef.current *
+              (mainSeriesRef.current?.data().length ?? 0)
+          ) - 1
+        )
+      );
+    };
+
+    window.addEventListener("resize", recalc);
+    chartApiRef.current?.timeScale().subscribeVisibleLogicalRangeChange(recalc);
+
+    return () => {
+      window.removeEventListener("resize", recalc);
+      chartApiRef.current
+        ?.timeScale()
+        .unsubscribeVisibleLogicalRangeChange(recalc);
+    };
+  }, [plotClipPath, applyRevealClip]);
+
   // Handle chart type change
   const handleChartTypeChange = useCallback((newType: ChartType) => {
     setChartType(newType);
@@ -163,10 +303,18 @@ export function ChartComponent({
       }
 
       // For line and area charts
-      return priceData.map((d) => ({
-        time: Math.floor(new Date(d.timestamp).getTime() / 1000) as Time,
-        value: d.close,
-      }));
+      return priceData
+        .map((d) => {
+          const close = d.close;
+          if (close == null || !Number.isFinite(close)) return null;
+          const ms = new Date(d.timestamp).getTime();
+          if (!Number.isFinite(ms)) return null;
+          return {
+            time: Math.floor(ms / 1000) as Time,
+            value: close,
+          };
+        })
+        .filter((point): point is LineData => point !== null);
     },
     [chartType]
   );
@@ -194,13 +342,13 @@ export function ChartComponent({
         setError(null);
         const chartData = convertToChartData(filteredData);
         const volumeData = convertVolumeData(filteredData);
-        const chartColors = getMarketChartColors(isDark);
+        const chartColors = getMarketChartColors(isDark, {
+          signed: true,
+          isPositive: isPeriodPositive,
+          variant: "area",
+        });
 
-        // Create main series based on chart type
-        let mainSeries:
-          | ISeriesApi<"Candlestick">
-          | ISeriesApi<"Area">
-          | ISeriesApi<"Line">;
+        let mainSeries: ISeriesApi<"Candlestick"> | ISeriesApi<"Area">;
 
         if (chartType === "candlestick") {
           mainSeries = chart.addSeries(CandlestickSeries, {
@@ -210,40 +358,83 @@ export function ChartComponent({
             wickUpColor: chartColors.wickUp,
             wickDownColor: chartColors.wickDown,
           });
-        } else if (chartType === "area") {
+        } else {
+          chart.timeScale().applyOptions({
+            fixLeftEdge: true,
+            fixRightEdge: true,
+            shiftVisibleRangeOnNewBar: false,
+            rightOffset: 0,
+          });
+
           mainSeries = chart.addSeries(AreaSeries, {
             lineColor: chartColors.series,
             topColor: chartColors.areaTop,
             bottomColor: chartColors.areaBottom,
-            lineWidth: 2,
+            lineWidth: chartColors.lineWidth,
+            lineType: LineType.Curved,
+            crosshairMarkerVisible: true,
+            crosshairMarkerRadius: 5,
+            lastValueVisible: false,
+            priceLineVisible: false,
           });
+        }
+
+        disposeTrailAnimation();
+
+        chartApiRef.current = chart;
+        mainSeriesRef.current =
+          chartType === "candlestick"
+            ? null
+            : (mainSeries as ISeriesApi<"Area">);
+
+        if (chartType === "candlestick") {
+          mainSeries.setData(chartData);
         } else {
-          // line chart
-          mainSeries = chart.addSeries(LineSeries, {
-            color: chartColors.series,
-            lineWidth: 2,
+          const lineData = chartData as LineData[];
+          const areaSeries = mainSeries as ISeriesApi<"Area">;
+
+          applyPlotClip(plotContainerRef.current, HIDDEN_PLOT_CLIP);
+          setPlotClipPath(HIDDEN_PLOT_CLIP);
+
+          isChartLoadingRef.current = true;
+          sparkleRef.current?.setLoadingSplash(true);
+          setMagnifier(null);
+
+          trailCancelRef.current = animateChartTrail(areaSeries, lineData, {
+            chart,
+            onStep: (progress, tipIndex) => {
+              applyRevealClip(progress, tipIndex);
+            },
+            onComplete: () => {
+              isChartLoadingRef.current = false;
+              trailRevealProgressRef.current = 0;
+              clearPlotClip(plotContainerRef.current);
+              setPlotClipPath(null);
+              areaSeries.applyOptions({ lastValueVisible: true });
+              sparkleRef.current?.setLoadingSplash(false);
+              sparkleRef.current?.syncLivePoint();
+            },
           });
         }
 
-        mainSeries.setData(chartData);
-
-        // Add volume histogram
-        const volumeSeries = chart.addSeries(HistogramSeries, {
-          color: chartColors.up,
-          priceFormat: {
-            type: "volume",
-          },
-          priceScaleId: "",
-        });
+        if (chartType === "candlestick") {
+          const volumeSeries = chart.addSeries(HistogramSeries, {
+            color: chartColors.up,
+            priceFormat: {
+              type: "volume",
+            },
+            priceScaleId: "",
+          });
 
-        volumeSeries.priceScale().applyOptions({
-          scaleMargins: {
-            top: 0.8,
-            bottom: 0,
-          },
-        });
+          volumeSeries.priceScale().applyOptions({
+            scaleMargins: {
+              top: 0.8,
+              bottom: 0,
+            },
+          });
 
-        volumeSeries.setData(volumeData);
+          volumeSeries.setData(volumeData);
+        }
 
         // Add technical indicators
         indicators.forEach((indicator) => {
@@ -375,27 +566,83 @@ export function ChartComponent({
           }
         });
 
-        // Setup crosshair move handler for hover events
+        chart.timeScale().subscribeVisibleLogicalRangeChange(() => {
+          if (!isPointerDownRef.current) return;
+          isPanningRef.current = true;
+          sparkleRef.current?.setCrosshairGlow(null);
+          setMagnifier(null);
+        });
+
         chart.subscribeCrosshairMove((param) => {
-          if (!param.time) {
-            setHoveredPoint(null);
-            if (onDataPointHover) onDataPointHover(null);
+          if (!param.point || param.time === undefined) {
+            sparkleRef.current?.setCrosshairGlow(null);
+            setMagnifier(null);
+            if (lastHoverTimeRef.current !== undefined) {
+              lastHoverTimeRef.current = undefined;
+              onDataPointHoverRef.current?.(null);
+            }
             return;
           }
 
-          const point = filteredData.find(
-            (d) =>
-              Math.floor(new Date(d.timestamp).getTime() / 1000) === param.time
+          if (
+            chartType !== "candlestick" &&
+            !isChartLoadingRef.current &&
+            !isPanningRef.current
+          ) {
+            const seriesPoint = param.seriesData.get(mainSeries);
+            if (
+              seriesPoint &&
+              "value" in seriesPoint &&
+              seriesPoint.value !== undefined
+            ) {
+              const y = mainSeries.priceToCoordinate(seriesPoint.value);
+              if (y !== null) {
+                sparkleRef.current?.setCrosshairGlow({
+                  x: param.point.x,
+                  y,
+                });
+              }
+            }
+          }
+
+          const point = resolveMagnifierPoint(
+            filteredDataRef.current,
+            param.time,
+            mainSeries,
+            param.seriesData
           );
 
+          if (
+            point &&
+            !isChartLoadingRef.current &&
+            !isPanningRef.current &&
+            param.point.x >= 0 &&
+            param.point.y >= 0
+          ) {
+            const plotWidth = chart.timeScale().width();
+            const left = clampMagnifierTooltipLeft(
+              param.point.x,
+              CHART_MAGNIFIER_TOOLTIP_WIDTH,
+              plotWidth
+            );
+            setMagnifier({ left, point });
+          } else {
+            setMagnifier(null);
+          }
+
+          if (param.time === lastHoverTimeRef.current) return;
+
+          lastHoverTimeRef.current = param.time as Time;
           if (point) {
-            setHoveredPoint(point);
-            if (onDataPointHover) onDataPointHover(point);
+            onDataPointHoverRef.current?.(point);
           }
         });
 
-        // Fit content to visible range
-        chart.timeScale().fitContent();
+        if (chartType === "candlestick") {
+          chart.timeScale().fitContent();
+        }
+
+        return disposeTrailAnimation;
       } catch (err) {
         console.error("Error initializing chart:", err);
         setError(MARKET_UI_COPY.chart.initFailed);
@@ -407,8 +654,10 @@ export function ChartComponent({
       indicators,
       convertToChartData,
       convertVolumeData,
-      onDataPointHover,
       isDark,
+      isPeriodPositive,
+      disposeTrailAnimation,
+      applyRevealClip,
     ]
   );
 
@@ -440,7 +689,7 @@ export function ChartComponent({
       <div className="chart-container">
         <div className="chart-controls">
           <TimeRangeSelector
-            selectedRange={selectedTimeRange}
+            selectedRange={activeTimeRange}
             onRangeChange={handleTimeRangeChange}
           />
           <ChartTypeSelector
@@ -465,7 +714,7 @@ export function ChartComponent({
       {/* Chart Controls */}
       <div className="chart-controls mb-4 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
         <TimeRangeSelector
-          selectedRange={selectedTimeRange}
+          selectedRange={activeTimeRange}
           onRangeChange={handleTimeRangeChange}
         />
         <ChartTypeSelector
@@ -474,36 +723,59 @@ export function ChartComponent({
         />
       </div>
 
-      {/* Hovered Point Info */}
-      {hoveredPoint && (
-        <div className={`mb-2 rounded p-2 text-xs sm:text-sm ${HOME_CALLOUT}`}>
-          <span className="font-semibold">
-            {new Date(hoveredPoint.timestamp).toLocaleDateString()}
-          </span>
-          <span className="hidden sm:inline">
-            {" - "}
-            <span>O: ${hoveredPoint.open.toFixed(2)}</span>
-            {" | "}
-            <span>H: ${hoveredPoint.high.toFixed(2)}</span>
-            {" | "}
-            <span>L: ${hoveredPoint.low.toFixed(2)}</span>
-            {" | "}
-            <span>C: ${hoveredPoint.close.toFixed(2)}</span>
-            {" | "}
-            <span>Vol: {(hoveredPoint.volume / 1000000).toFixed(2)}M</span>
-          </span>
-          <div className="sm:hidden mt-1 flex flex-wrap gap-x-3 gap-y-0.5">
-            <span>C: ${hoveredPoint.close.toFixed(2)}</span>
-            <span>H: ${hoveredPoint.high.toFixed(2)}</span>
-            <span>L: ${hoveredPoint.low.toFixed(2)}</span>
+      {/* Chart — tooltip is absolutely positioned so hover never shifts layout */}
+      <div
+        className="relative"
+        onMouseDown={handlePointerDown}
+        onMouseUp={handlePointerUp}
+        onMouseLeave={handlePointerUp}
+        onTouchStart={handlePointerDown}
+        onTouchEnd={handlePointerUp}
+      >
+        {dataMatchesRange && !error ? (
+          <ChartWrapper
+            key={chartKey}
+            dataRevision={chartDataRevision}
+            height={height}
+            isDark={isDark}
+            chartType={chartType}
+            plotClipPath={plotClipPath}
+            plotContainerRef={plotContainerRef}
+            atmosphereGradient={marketChartAtmosphereGradient(
+              isPeriodPositive,
+              isDark
+            )}
+            overlay={
+              <>
+                <ChartMagnifierTooltip
+                  symbol={symbol ?? symbolName}
+                  isDark={isDark}
+                  isPositive={isPeriodPositive}
+                  left={magnifier?.left}
+                  point={magnifier?.point ?? null}
+                />
+                <ChartSparkleOverlay
+                  ref={sparkleRef}
+                  chartRef={chartApiRef}
+                  seriesRef={mainSeriesRef}
+                  chartType={chartType}
+                  isPositive={isPeriodPositive}
+                  dataRevision={chartDataRevision}
+                />
+              </>
+            }
+          >
+            {initializeChart}
+          </ChartWrapper>
+        ) : (
+          <div
+            className="flex items-center justify-center rounded-xl bg-stone-100/50 dark:bg-stone-900/40"
+            style={{ height: `${height}px` }}
+          >
+            <LoadingSpinner size="md" message="Updating chart..." />
           </div>
-        </div>
-      )}
-
-      {/* Chart */}
-      <ChartWrapper key={chartKey} height={height} isDark={isDark}>
-        {initializeChart}
-      </ChartWrapper>
+        )}
+      </div>
 
       {/* Chart Instructions */}
       <div className={`mt-2 ${DNA_CAPTION}`}>
@@ -562,7 +834,6 @@ function ChartTypeSelector({
   onTypeChange,
 }: ChartTypeSelectorProps) {
   const types: { value: ChartType; label: string }[] = [
-    { value: "line", label: "Line" },
     { value: "area", label: "Area" },
     { value: "candlestick", label: "Candles" },
   ];
diff --git a/components/ChartMagnifierTooltip.tsx b/components/ChartMagnifierTooltip.tsx
new file mode 100644
index 0000000..5022c42
--- /dev/null
+++ b/components/ChartMagnifierTooltip.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import type { PriceData } from "@/types";
+import {
+  CHART_MAGNIFIER_TOOLTIP_WIDTH,
+  formatMagnifierDate,
+  formatMagnifierPrice,
+  magnifierPriceFromPoint,
+} from "@/lib/chart-magnifier-tooltip";
+import { marketChartSignedColor } from "@/lib/market-semantics";
+
+export interface ChartMagnifierTooltipProps {
+  symbol?: string;
+  isDark?: boolean;
+  isPositive?: boolean;
+  left?: number;
+  point?: PriceData | null;
+}
+
+export function ChartMagnifierTooltip({
+  symbol = "—",
+  isDark = false,
+  isPositive = true,
+  left = 0,
+  point = null,
+}: ChartMagnifierTooltipProps) {
+  const visible = point !== null;
+  const accentColor = marketChartSignedColor(isPositive, isDark);
+
+  return (
+    <div
+      aria-live="polite"
+      data-testid="chart-magnifier-tooltip"
+      className={`chart-magnifier-tooltip pointer-events-none absolute top-0 z-20 transition-opacity duration-100 ${
+        isDark ? "chart-magnifier-tooltip--dark" : ""
+      } ${visible ? "opacity-100" : "opacity-0"}`}
+      style={{
+        width: CHART_MAGNIFIER_TOOLTIP_WIDTH,
+        left: `${left}px`,
+      }}
+    >
+      <div
+        className="chart-magnifier-tooltip__symbol truncate text-xs font-medium"
+        style={{ color: accentColor }}
+      >
+        ● {symbol}
+      </div>
+      <div className="chart-magnifier-tooltip__price mt-1 text-2xl font-semibold tabular-nums leading-none">
+        {point ? formatMagnifierPrice(magnifierPriceFromPoint(point)) : "—"}
+      </div>
+      <div className="chart-magnifier-tooltip__date mt-1 text-xs tabular-nums">
+        {point ? formatMagnifierDate(new Date(point.timestamp)) : "—"}
+      </div>
+    </div>
+  );
+}
diff --git a/components/ChartSparkleOverlay.tsx b/components/ChartSparkleOverlay.tsx
new file mode 100644
index 0000000..618d87f
--- /dev/null
+++ b/components/ChartSparkleOverlay.tsx
@@ -0,0 +1,342 @@
+"use client";
+
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from "react";
+import type { IChartApi, ISeriesApi, LineData } from "lightweight-charts";
+import type { ChartType } from "@/types";
+import {
+  chartAtmosphereEnabled,
+  chartEffectTone,
+  CHART_LOAD_SPLASH_LOOP_MS,
+  CHART_LOAD_SPLASH_LOOPS,
+  chartLiveFlashClass,
+  chartLiveFlashCoreClass,
+  chartLiveFlashRingClass,
+  chartScrubBeamClass,
+  chartScrubPointClass,
+  chartSparkleEnabled,
+  chartSparkleFlashClass,
+  chartSparkleSweepClass,
+  type ChartGlowPoint,
+} from "@/lib/chart-effects";
+
+type MainSeries = ISeriesApi<"Area">;
+
+function restartLoadSplashAnimation(
+  sweep: HTMLDivElement | null,
+  flash: HTMLDivElement | null
+) {
+  const timing = `${CHART_LOAD_SPLASH_LOOP_MS}ms ease-in-out ${CHART_LOAD_SPLASH_LOOPS}`;
+
+  for (const el of [sweep, flash]) {
+    if (!el) continue;
+    el.style.animation = "none";
+    void el.offsetWidth;
+    el.style.animation = "";
+  }
+
+  if (sweep) {
+    sweep.style.animation = `chart-sparkle-sweep ${timing}`;
+  }
+  if (flash) {
+    flash.style.animation = `chart-sparkle-flash ${timing}`;
+  }
+}
+
+function stopLoadSplashAnimation(
+  sweep: HTMLDivElement | null,
+  flash: HTMLDivElement | null
+) {
+  for (const el of [sweep, flash]) {
+    if (!el) continue;
+    el.style.animation = "none";
+  }
+}
+
+export type ChartSparkleOverlayHandle = {
+  setCrosshairGlow: (glow: ChartGlowPoint | null) => void;
+  syncLivePoint: () => void;
+  syncLiveTip: (tipIndex: number) => void;
+  setLoadingSplash: (active: boolean) => void;
+  /** 0–1 reveal progress; drives the right-side void panel during load. */
+  setRevealProgress: (ratio: number) => void;
+};
+
+export interface ChartSparkleOverlayProps {
+  chartRef: React.RefObject<IChartApi | null>;
+  seriesRef: React.RefObject<MainSeries | null>;
+  chartType: ChartType;
+  isPositive: boolean;
+  dataRevision: string;
+}
+
+function applyVoidMask(
+  voidEl: HTMLDivElement,
+  ratio: number,
+  frontierX: number | null
+) {
+  voidEl.style.left = "0";
+  voidEl.style.right = "0";
+  voidEl.style.width = "100%";
+  voidEl.style.willChange = "clip-path";
+  voidEl.style.opacity = "1";
+
+  if (frontierX !== null) {
+    voidEl.style.clipPath = `inset(0 0 0 ${frontierX}px)`;
+    return;
+  }
+
+  voidEl.style.clipPath = `inset(0 0 0 ${ratio * 100}%)`;
+}
+
+export const ChartSparkleOverlay = forwardRef<
+  ChartSparkleOverlayHandle,
+  ChartSparkleOverlayProps
+>(function ChartSparkleOverlay(
+  { chartRef, seriesRef, chartType, isPositive, dataRevision },
+  ref
+) {
+  const tone = chartEffectTone(isPositive);
+  const showSparkle = chartSparkleEnabled(chartType);
+  const showAmbient = chartAtmosphereEnabled(chartType);
+  const sweepRef = useRef<HTMLDivElement>(null);
+  const flashRef = useRef<HTMLDivElement>(null);
+  const beamRef = useRef<HTMLDivElement>(null);
+  const crosshairPointRef = useRef<HTMLDivElement>(null);
+  const liveRef = useRef<HTMLDivElement>(null);
+  const voidRef = useRef<HTMLDivElement>(null);
+  const crosshairGlowRef = useRef(false);
+  const loadingSplashRef = useRef(false);
+  const revealRatioRef = useRef(0);
+  const frontierXRef = useRef<number | null>(null);
+  const liveTipIndexRef = useRef<number | null>(null);
+  const pendingGlowRef = useRef<ChartGlowPoint | null | undefined>(undefined);
+  const glowRafRef = useRef(0);
+
+  const positionLivePoint = useCallback(() => {
+    const chart = chartRef.current;
+    const series = seriesRef.current;
+    const live = liveRef.current;
+    if (!chart || !series || !live) return;
+
+    if (crosshairGlowRef.current) {
+      live.style.opacity = "0";
+      return;
+    }
+
+    const data = series.data() as LineData[];
+    const index = liveTipIndexRef.current ?? data.length - 1;
+    const point = data[index];
+    if (!point || point.value === undefined) {
+      live.style.opacity = "0";
+      return;
+    }
+
+    const x = chart.timeScale().timeToCoordinate(point.time);
+    const y = series.priceToCoordinate(point.value);
+    if (x === null || y === null) {
+      live.style.opacity = "0";
+      frontierXRef.current = null;
+      return;
+    }
+
+    frontierXRef.current = x;
+    live.style.left = `${x}px`;
+    live.style.top = `${y}px`;
+    live.style.opacity = loadingSplashRef.current ? "0" : "1";
+
+    if (loadingSplashRef.current) {
+      const voidEl = voidRef.current;
+      if (voidEl) {
+        applyVoidMask(voidEl, revealRatioRef.current, x);
+      }
+    }
+  }, [chartRef, seriesRef]);
+
+  const applyCrosshairGlow = (glow: ChartGlowPoint | null) => {
+    const beam = beamRef.current;
+    const crosshairPoint = crosshairPointRef.current;
+    if (!beam || !crosshairPoint) return;
+
+    crosshairGlowRef.current = glow !== null;
+    const active = glow !== null;
+
+    beam.classList.toggle("chart-scrub-beam--active", active);
+    crosshairPoint.classList.toggle("chart-scrub-point--active", active);
+
+    if (!glow) {
+      beam.style.left = "";
+      crosshairPoint.style.left = "";
+      crosshairPoint.style.top = "";
+      positionLivePoint();
+      return;
+    }
+
+    beam.style.left = `${glow.x}px`;
+    crosshairPoint.style.left = `${glow.x}px`;
+    crosshairPoint.style.top = `${glow.y}px`;
+
+    if (liveRef.current) liveRef.current.style.opacity = "0";
+  };
+
+  const scheduleCrosshairGlow = (glow: ChartGlowPoint | null) => {
+    pendingGlowRef.current = glow;
+    if (glowRafRef.current) {
+      cancelAnimationFrame(glowRafRef.current);
+    }
+    glowRafRef.current = requestAnimationFrame(() => {
+      glowRafRef.current = 0;
+      applyCrosshairGlow(pendingGlowRef.current ?? null);
+    });
+  };
+
+  const setRevealProgress = (ratio: number) => {
+    revealRatioRef.current = Math.max(0, Math.min(1, ratio));
+    const voidEl = voidRef.current;
+
+    if (!loadingSplashRef.current) {
+      if (voidEl) {
+        voidEl.style.opacity = "0";
+        voidEl.style.left = "100%";
+      }
+      return;
+    }
+
+    if (voidEl) {
+      applyVoidMask(voidEl, revealRatioRef.current, frontierXRef.current);
+    }
+  };
+
+  const setLoadingSplash = (active: boolean) => {
+    loadingSplashRef.current = active;
+
+    if (showAmbient) {
+      sweepRef.current?.classList.toggle(
+        "chart-sparkle-sweep--loading",
+        active
+      );
+      flashRef.current?.classList.toggle(
+        "chart-sparkle-flash--loading",
+        active
+      );
+      if (active) {
+        restartLoadSplashAnimation(sweepRef.current, flashRef.current);
+      } else {
+        stopLoadSplashAnimation(sweepRef.current, flashRef.current);
+      }
+    }
+
+    if (active) {
+      scheduleCrosshairGlow(null);
+      setRevealProgress(revealRatioRef.current);
+    } else {
+      liveTipIndexRef.current = null;
+      setRevealProgress(1);
+      positionLivePoint();
+    }
+  };
+
+  const syncLiveTip = (tipIndex: number) => {
+    liveTipIndexRef.current = tipIndex;
+    positionLivePoint();
+  };
+
+  useImperativeHandle(ref, () => ({
+    setCrosshairGlow: scheduleCrosshairGlow,
+    syncLivePoint: () => {
+      liveTipIndexRef.current = null;
+      positionLivePoint();
+    },
+    syncLiveTip,
+    setLoadingSplash,
+    setRevealProgress,
+  }));
+
+  useEffect(() => {
+    if (!showSparkle) return;
+
+    let cancelled = false;
+    let frame = 0;
+    let chart: IChartApi | null = null;
+
+    const attach = () => {
+      if (cancelled) return;
+
+      chart = chartRef.current;
+      if (!chart || !seriesRef.current) {
+        frame = requestAnimationFrame(attach);
+        return;
+      }
+
+      positionLivePoint();
+      chart.timeScale().subscribeVisibleLogicalRangeChange(positionLivePoint);
+      window.addEventListener("resize", positionLivePoint);
+    };
+
+    attach();
+
+    return () => {
+      cancelled = true;
+      cancelAnimationFrame(frame);
+      if (glowRafRef.current) cancelAnimationFrame(glowRafRef.current);
+      if (chart) {
+        chart
+          .timeScale()
+          .unsubscribeVisibleLogicalRangeChange(positionLivePoint);
+      }
+      window.removeEventListener("resize", positionLivePoint);
+    };
+  }, [chartRef, seriesRef, showSparkle, dataRevision, positionLivePoint]);
+
+  if (!showSparkle) return null;
+
+  return (
+    <>
+      {showAmbient ? (
+        <>
+          <div
+            ref={voidRef}
+            aria-hidden
+            className="pointer-events-none absolute inset-y-0 right-0 z-[1] bg-stone-50 dark:bg-stone-950"
+            style={{ left: "100%", opacity: 0 }}
+          />
+          <div
+            ref={flashRef}
+            aria-hidden
+            className={chartSparkleFlashClass(tone)}
+          />
+          <div
+            ref={sweepRef}
+            aria-hidden
+            className={chartSparkleSweepClass(tone)}
+          />
+        </>
+      ) : null}
+
+      <div
+        ref={beamRef}
+        aria-hidden
+        className={chartScrubBeamClass(tone, false)}
+      />
+      <div
+        ref={crosshairPointRef}
+        aria-hidden
+        className={chartScrubPointClass(tone, false)}
+      />
+      <div
+        ref={liveRef}
+        aria-hidden
+        className={`${chartLiveFlashClass(tone)} z-[8]`}
+        style={{ opacity: 0 }}
+      >
+        <div className={chartLiveFlashRingClass(tone)} />
+        <div className={chartLiveFlashCoreClass(tone)} />
+      </div>
+    </>
+  );
+});
diff --git a/components/ChartWithIndicators.tsx b/components/ChartWithIndicators.tsx
index ea71ba4..89108d0 100644
--- a/components/ChartWithIndicators.tsx
+++ b/components/ChartWithIndicators.tsx
@@ -27,7 +27,7 @@ export interface ChartWithIndicatorsProps {
  */
 export function ChartWithIndicators({
   data,
-  type = "line",
+  type = "area",
   initialTimeRange = "1M",
   onTimeRangeChange,
   responsive = true,
diff --git a/components/ChartWrapper.tsx b/components/ChartWrapper.tsx
index f40fe07..0efdb7c 100644
--- a/components/ChartWrapper.tsx
+++ b/components/ChartWrapper.tsx
@@ -6,7 +6,13 @@
  * Provides default chart settings and theme for the application
  */
 
-import { useEffect, useRef } from "react";
+import {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  type ReactNode,
+  type RefObject,
+} from "react";
 import {
   createChart,
   IChartApi,
@@ -17,11 +23,26 @@ import {
   CrosshairMode,
   LineStyle,
 } from "lightweight-charts";
+import type { ChartType } from "@/types";
+import { chartAtmosphereEnabled } from "@/lib/chart-effects";
+
+export type ChartVisualStyle = "default" | "atmospheric";
+
+export type ChartInitCallback = (chart: IChartApi) => void | (() => void);
 
 export interface ChartWrapperProps {
-  children?: (chart: IChartApi) => void;
+  children?: ChartInitCallback;
+  /** Bumps when series data should be re-initialized without remounting the wrapper. */
+  dataRevision?: string;
   height?: number;
   isDark?: boolean;
+  visualStyle?: ChartVisualStyle;
+  atmosphereGradient?: string;
+  chartType?: ChartType;
+  overlay?: ReactNode;
+  /** Clips the plot canvas during trail reveal (overlay stays full width for splash). */
+  plotClipPath?: string | null;
+  plotContainerRef?: RefObject<HTMLDivElement | null>;
 }
 
 /**
@@ -31,65 +52,102 @@ export interface ChartWrapperProps {
 export const getDefaultChartOptions = (
   width: number,
   height: number,
-  isDark: boolean = false
-) => ({
-  width,
-  height,
-  layout: {
-    background: {
-      type: ColorType.Solid,
-      color: isDark ? "#1e1e1e" : "#ffffff",
+  isDark: boolean = false,
+  visualStyle: ChartVisualStyle = "default"
+) => {
+  const atmospheric = visualStyle === "atmospheric";
+  const crosshairColor = atmospheric
+    ? isDark
+      ? "rgba(168, 162, 158, 0.55)"
+      : "rgba(120, 113, 108, 0.55)"
+    : "#9B7DFF";
+  const gridColor = isDark ? "#2d2d2d" : "#f0f0f0";
+
+  return {
+    width,
+    height,
+    layout: {
+      background: {
+        type: ColorType.Solid,
+        color: atmospheric ? "transparent" : isDark ? "#1e1e1e" : "#ffffff",
+      },
+      textColor: isDark ? "#a8a29e" : "#57534e",
+    },
+    grid: {
+      vertLines: {
+        visible: !atmospheric,
+        color: gridColor,
+      },
+      horzLines: {
+        visible: !atmospheric,
+        color: gridColor,
+      },
+    },
+    crosshair: {
+      mode: CrosshairMode.Normal,
+      vertLine: {
+        visible: true,
+        width: 1 as const,
+        color: crosshairColor,
+        style: LineStyle.Dashed,
+      },
+      horzLine: {
+        visible: true,
+        width: 1 as const,
+        color: crosshairColor,
+        style: LineStyle.Dashed,
+      },
     },
-    textColor: isDark ? "#d1d5db" : "#333",
-  },
-  grid: {
-    vertLines: { color: isDark ? "#2d2d2d" : "#f0f0f0" },
-    horzLines: { color: isDark ? "#2d2d2d" : "#f0f0f0" },
-  },
-  crosshair: {
-    mode: CrosshairMode.Normal,
-    vertLine: {
-      width: 1 as const,
-      color: "#9B7DFF",
-      style: LineStyle.Dashed,
+    rightPriceScale: {
+      borderVisible: !atmospheric,
+      borderColor: isDark ? "#2d2d2d" : "#e0e0e0",
     },
-    horzLine: {
-      width: 1 as const,
-      color: "#9B7DFF",
-      style: LineStyle.Dashed,
+    timeScale: {
+      borderVisible: !atmospheric,
+      borderColor: isDark ? "#2d2d2d" : "#e0e0e0",
+      timeVisible: true,
+      secondsVisible: false,
+      fixLeftEdge: true,
+      fixRightEdge: true,
+      shiftVisibleRangeOnNewBar: false,
+      rightOffset: 0,
     },
-  },
-  rightPriceScale: {
-    borderColor: isDark ? "#2d2d2d" : "#e0e0e0",
-  },
-  timeScale: {
-    borderColor: isDark ? "#2d2d2d" : "#e0e0e0",
-    timeVisible: true,
-    secondsVisible: false,
-  },
-  handleScroll: {
-    mouseWheel: true,
-    pressedMouseMove: true,
-    horzTouchDrag: true,
-    vertTouchDrag: true,
-  },
-  handleScale: {
-    axisPressedMouseMove: true,
-    mouseWheel: true,
-    pinch: true,
-  },
-});
+    handleScroll: {
+      mouseWheel: true,
+      pressedMouseMove: true,
+      horzTouchDrag: true,
+      vertTouchDrag: true,
+    },
+    handleScale: {
+      axisPressedMouseMove: true,
+      mouseWheel: true,
+      pinch: true,
+    },
+  };
+};
 
 /**
  * ChartWrapper component that initializes and manages a Lightweight Chart instance
  */
 export function ChartWrapper({
   children,
+  dataRevision = "0",
   height = 400,
   isDark = false,
+  visualStyle = "atmospheric",
+  atmosphereGradient,
+  chartType = "area",
+  overlay,
+  plotClipPath = null,
+  plotContainerRef,
 }: ChartWrapperProps) {
-  const chartContainerRef = useRef<HTMLDivElement>(null);
+  const showAtmosphere =
+    visualStyle === "atmospheric" && chartAtmosphereEnabled(chartType);
+  const internalPlotRef = useRef<HTMLDivElement>(null);
+  const chartContainerRef = plotContainerRef ?? internalPlotRef;
   const chartRef = useRef<IChartApi | null>(null);
+  const childrenRef = useRef(children);
+  childrenRef.current = children;
 
   useEffect(() => {
     if (!chartContainerRef.current) return;
@@ -100,22 +158,21 @@ export function ChartWrapper({
     // Create chart with default options
     const chart = createChart(
       chartContainerRef.current,
-      getDefaultChartOptions(containerWidth, height, isDark)
+      getDefaultChartOptions(containerWidth, height, isDark, visualStyle)
     );
 
     chartRef.current = chart;
 
-    // Call children function with chart instance
-    if (children) {
-      children(chart);
-    }
+    const init = childrenRef.current;
+    const cleanupChildren =
+      typeof init === "function" ? init(chart) : undefined;
 
-    // Cleanup on unmount
     return () => {
+      cleanupChildren?.();
       chart.remove();
       chartRef.current = null;
     };
-  }, [children, height, isDark]);
+  }, [height, isDark, visualStyle, dataRevision, chartContainerRef]);
 
   // Handle responsive resize
   useEffect(() => {
@@ -137,16 +194,45 @@ export function ChartWrapper({
     return () => {
       window.removeEventListener("resize", handleResize);
     };
-  }, [height]);
+  }, [height, chartContainerRef]);
+
+  useLayoutEffect(() => {
+    const plot = chartContainerRef.current;
+    if (!plot) return;
+    if (plotClipPath) {
+      plot.style.clipPath = plotClipPath;
+      plot.style.overflow = "hidden";
+    } else {
+      plot.style.clipPath = "";
+      plot.style.overflow = "";
+    }
+  }, [plotClipPath, chartContainerRef]);
 
   return (
     <div
-      ref={chartContainerRef}
-      className="chart-wrapper"
-      style={{ position: "relative", width: "100%", height: `${height}px` }}
+      className="chart-wrapper relative w-full overflow-hidden rounded-xl"
+      style={{ height: `${height}px` }}
       role="img"
       aria-label="Financial price chart"
-    />
+    >
+      {showAtmosphere && atmosphereGradient ? (
+        <div
+          aria-hidden
+          className="pointer-events-none absolute inset-0 z-0"
+          style={{ background: atmosphereGradient }}
+        />
+      ) : null}
+      <div
+        ref={chartContainerRef}
+        className="relative z-[1] h-full w-full overflow-hidden"
+        style={plotClipPath ? { clipPath: plotClipPath } : undefined}
+      />
+      {overlay ? (
+        <div className="pointer-events-none absolute inset-0 z-[2] overflow-hidden rounded-xl">
+          {overlay}
+        </div>
+      ) : null}
+    </div>
   );
 }
 
diff --git a/components/OverviewTab.tsx b/components/OverviewTab.tsx
index 8438175..6cc98d0 100644
--- a/components/OverviewTab.tsx
+++ b/components/OverviewTab.tsx
@@ -22,6 +22,8 @@ export interface OverviewTabProps {
   symbolData: SymbolData;
   historicalData: PriceData[];
   timeRange: TimeRange;
+  dataTimeRange: TimeRange;
+  historyLoading?: boolean;
   onTimeRangeChange: (range: TimeRange) => void;
 }
 
@@ -29,6 +31,8 @@ export function OverviewTab({
   symbolData,
   historicalData,
   timeRange,
+  dataTimeRange,
+  historyLoading = false,
   onTimeRangeChange,
 }: OverviewTabProps) {
   return (
@@ -43,9 +47,14 @@ export function OverviewTab({
         <div className="h-[300px] md:h-[380px] lg:h-[420px] xl:h-[500px]">
           <ChartComponent
             data={historicalData}
+            symbol={symbolData.symbol}
+            symbolName={symbolData.name}
             type="area"
-            initialTimeRange={timeRange}
+            timeRange={timeRange}
+            dataTimeRange={dataTimeRange}
+            historyLoading={historyLoading}
             onTimeRangeChange={onTimeRangeChange}
+            serverRangeScoped
             responsive={true}
             height={300}
           />
diff --git a/components/__tests__/ChartComponent.test.tsx b/components/__tests__/ChartComponent.test.tsx
index c758227..1812399 100644
--- a/components/__tests__/ChartComponent.test.tsx
+++ b/components/__tests__/ChartComponent.test.tsx
@@ -60,26 +60,30 @@ describe("ChartComponent", () => {
   });
 
   describe("Chart Type Switching", () => {
-    it("should render with default line chart type", () => {
-      render(<ChartWithTheme data={mockData} type="line" />);
+    it("should render with default area chart type", () => {
+      render(<ChartWithTheme data={mockData} />);
 
-      const lineButton = screen.getByText("Line");
-      expect(lineButton).toHaveClass("bg-stone-900");
+      expect(screen.getByText("Area")).toHaveClass("bg-stone-900");
+      expect(screen.queryByText("Line")).not.toBeInTheDocument();
     });
 
-    it("should switch to area chart when Area button is clicked", async () => {
-      render(<ChartWithTheme data={mockData} type="line" />);
-
-      const areaButton = screen.getByText("Area");
-      fireEvent.click(areaButton);
+    it("should render area chart with magnifier tooltip shell", async () => {
+      const { container } = render(
+        <ChartWithTheme data={mockData} type="area" symbol="AAPL" />
+      );
 
       await waitFor(() => {
-        expect(areaButton).toHaveClass("bg-stone-900");
+        expect(container.querySelector(".chart-wrapper")).toBeInTheDocument();
       });
+
+      const tooltip = screen.getByTestId("chart-magnifier-tooltip");
+      expect(tooltip).toHaveClass("chart-magnifier-tooltip");
+      expect(tooltip).toHaveClass("pointer-events-none");
+      expect(tooltip).toHaveClass("absolute");
     });
 
     it("should switch to candlestick chart when Candles button is clicked", async () => {
-      render(<ChartWithTheme data={mockData} type="line" />);
+      render(<ChartWithTheme data={mockData} type="area" />);
 
       const candlesButton = screen.getByText("Candles");
       fireEvent.click(candlesButton);
@@ -90,29 +94,22 @@ describe("ChartComponent", () => {
     });
 
     it("should maintain selected chart type after switching", async () => {
-      render(<ChartWithTheme data={mockData} type="line" />);
+      render(<ChartWithTheme data={mockData} type="area" />);
 
-      const areaButton = screen.getByText("Area");
-      fireEvent.click(areaButton);
+      const candlesButton = screen.getByText("Candles");
+      fireEvent.click(candlesButton);
 
       await waitFor(() => {
-        expect(areaButton).toHaveClass("bg-stone-900");
-        expect(screen.getByText("Line")).not.toHaveClass("bg-stone-900");
+        expect(candlesButton).toHaveClass("bg-stone-900");
+        expect(screen.getByText("Area")).not.toHaveClass("bg-stone-900");
       });
     });
 
-    it("should render with area chart as initial type", () => {
-      render(<ChartWithTheme data={mockData} type="area" />);
-
-      expect(screen.getByText("Area")).toHaveClass("bg-stone-900");
-      expect(screen.getByText("Line")).not.toHaveClass("bg-stone-900");
-    });
-
     it("should render with candlestick chart as initial type", () => {
       render(<ChartWithTheme data={mockData} type="candlestick" />);
 
       expect(screen.getByText("Candles")).toHaveClass("bg-stone-900");
-      expect(screen.getByText("Line")).not.toHaveClass("bg-stone-900");
+      expect(screen.queryByText("Line")).not.toBeInTheDocument();
     });
   });
 
@@ -179,7 +176,7 @@ describe("ChartComponent", () => {
       render(<ChartWithTheme data={mockData} indicators={indicators} />);
 
       // Chart should render without errors
-      expect(screen.getByText("Line")).toBeInTheDocument();
+      expect(screen.getByTestId("price-chart-panel")).toBeInTheDocument();
     });
 
     it("should handle multiple indicators", () => {
@@ -190,7 +187,7 @@ describe("ChartComponent", () => {
 
       render(<ChartWithTheme data={mockData} indicators={indicators} />);
 
-      expect(screen.getByText("Line")).toBeInTheDocument();
+      expect(screen.getByTestId("price-chart-panel")).toBeInTheDocument();
     });
 
     it("should not render invisible indicators", () => {
@@ -201,7 +198,7 @@ describe("ChartComponent", () => {
       render(<ChartWithTheme data={mockData} indicators={indicators} />);
 
       // Chart should render without errors
-      expect(screen.getByText("Line")).toBeInTheDocument();
+      expect(screen.getByTestId("price-chart-panel")).toBeInTheDocument();
     });
 
     it("should render RSI indicator without errors", () => {
@@ -211,7 +208,7 @@ describe("ChartComponent", () => {
 
       render(<ChartWithTheme data={mockData} indicators={indicators} />);
 
-      expect(screen.getByText("Line")).toBeInTheDocument();
+      expect(screen.getByTestId("price-chart-panel")).toBeInTheDocument();
     });
 
     it("should render MACD indicator without errors", () => {
@@ -219,7 +216,7 @@ describe("ChartComponent", () => {
 
       render(<ChartWithTheme data={mockData} indicators={indicators} />);
 
-      expect(screen.getByText("Line")).toBeInTheDocument();
+      expect(screen.getByTestId("price-chart-panel")).toBeInTheDocument();
     });
 
     it("should render Bollinger Bands indicator without errors", () => {
@@ -229,7 +226,7 @@ describe("ChartComponent", () => {
 
       render(<ChartWithTheme data={mockData} indicators={indicators} />);
 
-      expect(screen.getByText("Line")).toBeInTheDocument();
+      expect(screen.getByTestId("price-chart-panel")).toBeInTheDocument();
     });
 
     it("should render all indicator types simultaneously", () => {
@@ -243,7 +240,7 @@ describe("ChartComponent", () => {
 
       render(<ChartWithTheme data={mockData} indicators={indicators} />);
 
-      expect(screen.getByText("Line")).toBeInTheDocument();
+      expect(screen.getByTestId("price-chart-panel")).toBeInTheDocument();
     });
   });
 
@@ -306,7 +303,7 @@ describe("ChartComponent", () => {
       );
 
       // Chart should render
-      expect(screen.getByText("Line")).toBeInTheDocument();
+      expect(screen.getByTestId("price-chart-panel")).toBeInTheDocument();
     });
   });
 
diff --git a/components/__tests__/OverviewTab.test.tsx b/components/__tests__/OverviewTab.test.tsx
index 296cd12..629d880 100644
--- a/components/__tests__/OverviewTab.test.tsx
+++ b/components/__tests__/OverviewTab.test.tsx
@@ -70,6 +70,7 @@ describe("OverviewTab", () => {
           symbolData={mockSymbolData}
           historicalData={mockHistoricalData}
           timeRange="1M"
+          dataTimeRange="1M"
           onTimeRangeChange={onTimeRangeChange}
         />
       );
@@ -85,6 +86,7 @@ describe("OverviewTab", () => {
           symbolData={mockSymbolData}
           historicalData={mockHistoricalData}
           timeRange="1M"
+          dataTimeRange="1M"
           onTimeRangeChange={onTimeRangeChange}
         />
       );
@@ -381,6 +383,7 @@ describe("OverviewTab", () => {
           }}
           historicalData={mockHistoricalData}
           timeRange="1M"
+          dataTimeRange="1M"
           onTimeRangeChange={onTimeRangeChange}
         />
       );
diff --git a/e2e/chart.spec.ts b/e2e/chart.spec.ts
index 9681379..a9440c0 100644
--- a/e2e/chart.spec.ts
+++ b/e2e/chart.spec.ts
@@ -1,26 +1,28 @@
 /**
  * E2E tests for Chart Component
  * Tests chart interactions, time range switching, and visual rendering
- * Playwright E2E tests for Task 6
  */
 
 import { test, expect } from "./fixtures";
+import { selectSymbol } from "./helpers";
 
 test.describe("Chart Component E2E Tests", () => {
   test.beforeEach(async ({ page }) => {
     await page.goto("/");
     await page.waitForLoadState("networkidle");
+    await selectSymbol(page, "AAPL");
   });
 
   test("should load the chart page successfully", async ({ page }) => {
     const nav = page.getByRole("navigation", { name: "Main navigation" });
     await expect(nav).toContainText(/The Open Stock|Open Stock/);
+    await expect(page.getByTestId("price-chart-panel")).toBeVisible();
   });
 
   test("should display all chart type buttons", async ({ page }) => {
-    await expect(page.getByRole("button", { name: "Line" })).toBeVisible();
     await expect(page.getByRole("button", { name: "Area" })).toBeVisible();
     await expect(page.getByRole("button", { name: "Candles" })).toBeVisible();
+    await expect(page.getByRole("button", { name: "Line" })).toHaveCount(0);
   });
 
   test("should display all time range buttons", async ({ page }) => {
@@ -36,151 +38,77 @@ test.describe("Chart Component E2E Tests", () => {
   test("should switch chart type to Area", async ({ page }) => {
     const areaButton = page.getByRole("button", { name: "Area" });
     await areaButton.click();
-
-    // Wait for chart to re-render
-    await page.waitForTimeout(500);
-
-    // Check if Area button is now active (stone range chip)
     await expect(areaButton).toHaveClass(/bg-stone-900|dark:bg-stone-100/);
   });
 
   test("should switch chart type to Candlestick", async ({ page }) => {
     const candlesButton = page.getByRole("button", { name: "Candles" });
     await candlesButton.click();
-
-    await page.waitForTimeout(500);
-
     await expect(candlesButton).toHaveClass(/bg-stone-900|dark:bg-stone-100/);
   });
 
   test("should switch time range to 1W", async ({ page }) => {
     const oneWeekButton = page.getByRole("button", { name: "1W" });
     await oneWeekButton.click();
-
-    await page.waitForTimeout(300);
-
     await expect(oneWeekButton).toHaveClass(/bg-stone-900|dark:bg-stone-100/);
   });
 
   test("should switch time range to 1Y", async ({ page }) => {
     const oneYearButton = page.getByRole("button", { name: "1Y" });
     await oneYearButton.click();
-
-    await page.waitForTimeout(300);
-
     await expect(oneYearButton).toHaveClass(/bg-stone-900|dark:bg-stone-100/);
   });
 
-  test("should display technical indicators panel", async ({ page }) => {
-    // Look for the header specifically, not the text in instructions
-    await expect(page.locator(".technical-indicator-overlay")).toBeVisible();
-  });
-
-  test("should expand technical indicators panel", async ({ page }) => {
-    // Click on the technical indicators header (first occurrence)
-    const indicatorsPanel = page.locator(".technical-indicator-overlay");
-    await indicatorsPanel.click();
-
-    await page.waitForTimeout(300);
-
-    // Check if indicators are visible (check for the first MA indicator specifically)
-    await expect(page.getByText("MA(50)").first()).toBeVisible();
-  });
-
-  test("should toggle theme", async ({ page }) => {
-    const themeToggle = page
-      .locator("button")
-      .filter({ hasText: /Light|Dark|System/ });
-    await themeToggle.click();
-
-    await page.waitForTimeout(300);
-
-    // Theme should have changed
-    await expect(themeToggle).toBeVisible();
+  test("should display chart section heading", async ({ page }) => {
+    await expect(page.getByRole("heading", { name: "Chart" })).toBeVisible();
+    await expect(page.getByText(/Price trend/i)).toBeVisible();
   });
 
   test("should display chart instructions", async ({ page }) => {
-    // Chart instructions are not on the main page, skip this test
-    const nav = page.getByRole("navigation", { name: "Main navigation" });
-    await expect(nav).toContainText(/The Open Stock|Open Stock/);
-  });
-
-  test("should display test instructions", async ({ page }) => {
-    // Test instructions are not on the main page, skip this test
-    const nav = page.getByRole("navigation", { name: "Main navigation" });
-    await expect(nav).toContainText(/The Open Stock|Open Stock/);
+    await expect(
+      page.getByText(/Use mouse wheel to zoom, drag to pan, hover for details/)
+    ).toBeVisible();
   });
 
   test("should handle multiple chart type switches", async ({ page }) => {
-    // Switch to Area
     await page.getByRole("button", { name: "Area" }).click();
-    await page.waitForTimeout(500);
-
-    // Switch to Candles
     await page.getByRole("button", { name: "Candles" }).click();
-    await page.waitForTimeout(500);
-
-    // Switch back to Line
-    await page.getByRole("button", { name: "Line" }).click();
-    await page.waitForTimeout(500);
+    await page.getByRole("button", { name: "Area" }).click();
 
-    // Line should be active
-    await expect(page.getByRole("button", { name: "Line" })).toHaveClass(
+    await expect(page.getByRole("button", { name: "Area" })).toHaveClass(
       /bg-stone-900|dark:bg-stone-100/
     );
   });
 
   test("should handle multiple time range switches", async ({ page }) => {
-    // Switch through different time ranges
     await page.getByRole("button", { name: "1W" }).click();
-    await page.waitForTimeout(300);
-
     await page.getByRole("button", { name: "1M" }).click();
-    await page.waitForTimeout(300);
-
     await page.getByRole("button", { name: "1Y" }).click();
-    await page.waitForTimeout(300);
 
-    // 1Y should be active
     await expect(page.getByRole("button", { name: "1Y" })).toHaveClass(
       /bg-stone-900|dark:bg-stone-100/
     );
   });
 
   test("should render chart canvas", async ({ page }) => {
-    // Check if chart wrapper exists
-    const chartWrapper = page.locator(".chart-wrapper");
-    await expect(chartWrapper).toBeVisible();
+    await expect(page.locator(".chart-wrapper")).toBeVisible();
   });
 
   test("should be responsive on mobile viewport", async ({ page }) => {
     await page.setViewportSize({ width: 375, height: 667 });
-    await page.waitForTimeout(500);
-
-    // Chart should still be visible
     await expect(page.locator(".chart-wrapper")).toBeVisible();
-
-    // Buttons should be visible
-    await expect(page.getByRole("button", { name: "Line" })).toBeVisible();
+    await expect(page.getByRole("button", { name: "Area" })).toBeVisible();
   });
 
   test("should be responsive on tablet viewport", async ({ page }) => {
     await page.setViewportSize({ width: 768, height: 1024 });
-    await page.waitForTimeout(500);
-
     await expect(page.locator(".chart-wrapper")).toBeVisible();
   });
 
   test("should maintain state after page interaction", async ({ page }) => {
-    // Change chart type
     await page.getByRole("button", { name: "Area" }).click();
-    await page.waitForTimeout(500);
-
-    // Change time range
     await page.getByRole("button", { name: "1Y" }).click();
-    await page.waitForTimeout(300);
 
-    // Both should remain active
     await expect(page.getByRole("button", { name: "Area" })).toHaveClass(
       /bg-stone-900|dark:bg-stone-100/
     );
diff --git a/e2e/fixtures.ts b/e2e/fixtures.ts
index c2e249f..b3b61ff 100644
--- a/e2e/fixtures.ts
+++ b/e2e/fixtures.ts
@@ -1,5 +1,64 @@
 import { test as base, expect } from "@playwright/test";
 import type { Page } from "@playwright/test";
+import { installMarketDataMocks } from "./market-mocks";
+
+const STABLE_TS = "2024-01-15T12:00:00.000Z";
+
+const STABLE_SCREENER_RESULTS = [
+  {
+    symbol: "AAPL",
+    name: "Apple Inc.",
+    sector: "Technology",
+    price: 175.5,
+    changePercent: 1.2,
+    volume: 50_000_000,
+    marketCap: 2_800_000_000_000,
+    peRatio: 28,
+    pbRatio: 45,
+    pegRatio: 2.5,
+    valuationContext: "overpriced",
+    matchScore: 0,
+  },
+];
+
+const STABLE_SCREENER_PRESETS = [
+  {
+    id: "day-gainers",
+    name: "Day Gainers",
+    description: "Stocks with the highest daily gains",
+    filters: [
+      {
+        field: "changePercent",
+        operator: "gt",
+        value: 3,
+        label: "Change > 3%",
+      },
+    ],
+    isDefault: true,
+    createdAt: STABLE_TS,
+  },
+];
+
+const STABLE_SECTORS = [
+  {
+    sector: "Technology",
+    performance: 2.1,
+    changePercent: 1.2,
+    constituents: 120,
+  },
+  {
+    sector: "Financial",
+    performance: -0.8,
+    changePercent: -0.4,
+    constituents: 95,
+  },
+  {
+    sector: "Healthcare",
+    performance: 0.5,
+    changePercent: 0.3,
+    constituents: 80,
+  },
+];
 
 const STABLE_TRIAL_STATUS = {
   isActive: true,
@@ -114,11 +173,102 @@ export async function installE2eMocks(page: Page) {
             change: 12.34,
             changePercent: 0.16,
           },
+          {
+            symbol: "N225",
+            name: "Nikkei 225",
+            region: "Asia-Pacific",
+            value: 38400.5,
+            change: -120.2,
+            changePercent: -0.31,
+          },
+          {
+            symbol: "FTSE",
+            name: "FTSE 100",
+            region: "Europe",
+            value: 8120.4,
+            change: 8.5,
+            changePercent: 0.1,
+          },
         ],
-        timestamp: "2024-01-15T12:00:00.000Z",
+        timestamp: STABLE_TS,
+      }),
+    })
+  );
+
+  await page.route("**/api/market/sectors*", (route) =>
+    route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({
+        success: true,
+        data: STABLE_SECTORS,
+        timestamp: STABLE_TS,
       }),
     })
   );
+
+  await page.route("**/api/screener/**", async (route) => {
+    const url = route.request().url();
+    const method = route.request().method();
+
+    if (url.includes("/presets")) {
+      if (method === "POST") {
+        const body = route.request().postDataJSON() as {
+          name?: string;
+          description?: string;
+        };
+        await route.fulfill({
+          status: 200,
+          contentType: "application/json",
+          body: JSON.stringify({
+            success: true,
+            data: {
+              id: "custom-e2e",
+              name: body.name ?? "Custom Preset",
+              description: body.description ?? "",
+              filters: [],
+              isDefault: false,
+              createdAt: STABLE_TS,
+            },
+            timestamp: STABLE_TS,
+          }),
+        });
+        return;
+      }
+
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({
+          success: true,
+          data: STABLE_SCREENER_PRESETS,
+          timestamp: STABLE_TS,
+        }),
+      });
+      return;
+    }
+
+    if (url.includes("/search") && method === "POST") {
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({
+          success: true,
+          data: STABLE_SCREENER_RESULTS,
+          timestamp: STABLE_TS,
+        }),
+      });
+      return;
+    }
+
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({ success: true, data: [], timestamp: STABLE_TS }),
+    });
+  });
+
+  await installMarketDataMocks(page);
 }
 
 export const test = base.extend({
diff --git a/e2e/helpers.ts b/e2e/helpers.ts
new file mode 100644
index 0000000..15176eb
--- /dev/null
+++ b/e2e/helpers.ts
@@ -0,0 +1,24 @@
+import { expect, type Page } from "@playwright/test";
+
+/** Search for a symbol and wait until the overview chart is ready. */
+export async function selectSymbol(page: Page, symbol: string) {
+  const searchInput = page.getByPlaceholder(/search stocks/i);
+  await searchInput.fill(symbol);
+  await searchInput.press("Enter");
+
+  await expect(
+    page.getByRole("heading", { level: 1, name: symbol })
+  ).toBeVisible({ timeout: 15000 });
+  await expect(page.getByTestId("price-chart-panel")).toBeVisible({
+    timeout: 15000,
+  });
+}
+
+/** Wait until chart trail reveal and load splash finish (stable for screenshots). */
+export async function waitForChartReveal(page: Page) {
+  const panel = page.getByTestId("price-chart-panel");
+  await expect(panel).toBeVisible({ timeout: 15000 });
+  await expect(panel.locator(".chart-sparkle-sweep--loading")).toHaveCount(0, {
+    timeout: 15000,
+  });
+}
diff --git a/e2e/market-mocks.ts b/e2e/market-mocks.ts
new file mode 100644
index 0000000..c9c3fd7
--- /dev/null
+++ b/e2e/market-mocks.ts
@@ -0,0 +1,223 @@
+import type { Page } from "@playwright/test";
+
+const STABLE_TS = "2024-01-15T12:00:00.000Z";
+
+/** Enough daily bars for chart trail animation in E2E. */
+export function buildStableHistorical(pointCount = 90) {
+  const data: Array<{
+    timestamp: string;
+    open: number;
+    high: number;
+    low: number;
+    close: number;
+    volume: number;
+  }> = [];
+  const end = new Date(STABLE_TS);
+
+  for (let i = pointCount; i >= 0; i--) {
+    const day = new Date(end);
+    day.setDate(day.getDate() - i);
+    const close = 180 + (pointCount - i) * 0.15 + Math.sin(i / 5) * 2;
+    data.push({
+      timestamp: day.toISOString(),
+      open: close - 0.5,
+      high: close + 1,
+      low: close - 1,
+      close,
+      volume: 40_000_000,
+    });
+  }
+
+  return data;
+}
+
+const STABLE_HISTORICAL = buildStableHistorical();
+
+const STABLE_INDICATORS = {
+  rsi: { value: 72.5, signal: "overpriced" as const },
+  macd: {
+    value: 1.2345,
+    signal: 0.9876,
+    histogram: 0.2469,
+    trend: "underpriced" as const,
+  },
+  movingAverages: { ma50: 155.0, ma200: 140.0, signal: "fair" as const },
+  bollingerBands: {
+    upper: 170.0,
+    middle: 150.0,
+    lower: 130.0,
+    signal: "overpriced" as const,
+  },
+  overallSentiment: "overpriced" as const,
+};
+
+const STABLE_SEASONAL = {
+  heatmap: Array.from({ length: 24 }, (_, i) => ({
+    year: 2023 + Math.floor(i / 12),
+    month: (i % 12) + 1,
+    return: (i % 5) - 2,
+  })),
+  averageByMonth: {
+    1: 2.25,
+    2: -2.3,
+    3: 3.0,
+    4: 1.1,
+    5: 0.5,
+    6: -1.65,
+    7: 2.0,
+    8: 1.2,
+    9: -0.8,
+    10: 2.5,
+    11: 1.8,
+    12: 2.2,
+  },
+};
+
+const STABLE_FORECAST = {
+  priceTargets: { low: 120.0, average: 165.0, high: 210.0 },
+  analystRatings: {
+    strongBuy: 8,
+    buy: 12,
+    hold: 6,
+    sell: 2,
+    strongSell: 1,
+  },
+  epsForecasts: [
+    { quarter: "Q1 2025", estimate: 1.42 },
+    { quarter: "Q2 2025", estimate: 1.55 },
+  ],
+  revenueForecasts: [
+    { quarter: "Q1 2025", estimate: 94_000_000_000 },
+    { quarter: "Q2 2025", estimate: 96_500_000_000 },
+  ],
+};
+
+const STABLE_FINANCIALS = {
+  keyFacts: {
+    revenue: 394_000_000_000,
+    netIncome: 97_000_000_000,
+    profitMargin: 24.6,
+  },
+  valuation: { peRatio: 30.5, pbRatio: 45.2, pegRatio: 2.1 },
+  growth: { revenueGrowth: 8.2, earningsGrowth: 11.4 },
+  profitability: { roe: 147.5, roa: 28.4, operatingMargin: 30.1 },
+};
+
+/** Stable symbol + historical mocks so E2E does not hit external market APIs. */
+export async function installMarketDataMocks(page: Page) {
+  await page.route("**/api/market/symbol/**", async (route) => {
+    const match = route
+      .request()
+      .url()
+      .match(/\/symbol\/([^/?]+)/);
+    const symbol = decodeURIComponent(match?.[1] ?? "AAPL").toUpperCase();
+
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({
+        success: true,
+        data: {
+          symbol,
+          name: `${symbol} Test Co.`,
+          price: 189.42,
+          change: 1.25,
+          changePercent: 0.66,
+          marketCap: 2_900_000_000_000,
+          volume: 48_500_000,
+          fiftyTwoWeekHigh: 199.62,
+          fiftyTwoWeekLow: 164.08,
+          lastUpdated: STABLE_TS,
+        },
+        timestamp: STABLE_TS,
+      }),
+    });
+  });
+
+  await page.route("**/api/market/historical/**", async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({
+        success: true,
+        data: STABLE_HISTORICAL,
+        timestamp: STABLE_TS,
+      }),
+    });
+  });
+
+  await page.route("**/api/market/search*", async (route) => {
+    const q = new URL(route.request().url()).searchParams.get("q") ?? "";
+    const symbol = q.trim().toUpperCase();
+
+    if (!symbol || symbol === "ZZZZNOTFOUND" || symbol.includes("INVALID")) {
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({
+          success: true,
+          data: [],
+          timestamp: STABLE_TS,
+        }),
+      });
+      return;
+    }
+
+    if (symbol === "AA") {
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({
+          success: true,
+          data: [
+            { symbol: "AAPL", name: "Apple Inc.", type: "equity" },
+            { symbol: "AAL", name: "American Airlines Group", type: "equity" },
+            { symbol: "AA", name: "Alcoa Corporation", type: "equity" },
+          ],
+          timestamp: STABLE_TS,
+        }),
+      });
+      return;
+    }
+
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({
+        success: true,
+        data: symbol
+          ? [{ symbol, name: `${symbol} Test Co.`, type: "equity" }]
+          : [],
+        timestamp: STABLE_TS,
+      }),
+    });
+  });
+
+  await page.route(
+    /\/api\/market\/(indicators|forecast|seasonal|financials)\//,
+    async (route) => {
+      const url = route.request().url();
+      let data: unknown = null;
+
+      if (url.includes("/indicators/")) {
+        data = STABLE_INDICATORS;
+      } else if (url.includes("/seasonal/")) {
+        data = STABLE_SEASONAL;
+      } else if (url.includes("/forecast/")) {
+        data = STABLE_FORECAST;
+      } else if (url.includes("/financials/")) {
+        data = STABLE_FINANCIALS;
+      }
+
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({
+          success: true,
+          data,
+          timestamp: STABLE_TS,
+        }),
+      });
+    }
+  );
+}
diff --git a/e2e/screener.spec.ts b/e2e/screener.spec.ts
index 1e176b9..a0f98c6 100644
--- a/e2e/screener.spec.ts
+++ b/e2e/screener.spec.ts
@@ -10,7 +10,7 @@ import { test, expect } from "./fixtures";
 
 test.describe("Asset Screener", () => {
   test.beforeEach(async ({ page }) => {
-    await page.goto("/");
+    await page.goto("/screener");
   });
 
   // --- Screener visible on home page ---
@@ -18,7 +18,7 @@ test.describe("Asset Screener", () => {
   test("should display the Asset Screener section", async ({ page }) => {
     const hub = page.getByTestId("screener-hub");
     await expect(hub).toBeVisible({ timeout: 15000 });
-    await expect(page.getByText("Asset Screener")).toBeVisible();
+    await expect(page.getByRole("heading", { name: "Screener" })).toBeVisible();
   });
 
   // --- Filter selection (Req 26.1) ---
diff --git a/e2e/search.spec.ts b/e2e/search.spec.ts
index ace6888..22a4f1d 100644
--- a/e2e/search.spec.ts
+++ b/e2e/search.spec.ts
@@ -31,6 +31,23 @@ test.describe("SearchBar Component E2E Tests", () => {
   });
 
   test("should show loading spinner while searching", async ({ page }) => {
+    await page.route("**/api/market/search*", async (route) => {
+      await new Promise((r) => setTimeout(r, 400));
+      const q = new URL(route.request().url()).searchParams.get("q") ?? "";
+      const symbol = q.trim().toUpperCase();
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({
+          success: true,
+          data: symbol
+            ? [{ symbol, name: `${symbol} Test Co.`, type: "equity" }]
+            : [],
+          timestamp: "2024-01-15T12:00:00.000Z",
+        }),
+      });
+    });
+
     const searchInput = page.getByPlaceholder(
       "Search stocks by symbol (e.g., AAPL, TSLA, MSFT)..."
     );
@@ -246,7 +263,7 @@ test.describe("SearchBar Component E2E Tests", () => {
     await page.waitForTimeout(500);
 
     // Should show no results message
-    await expect(page.getByText("No results found")).toBeVisible({
+    await expect(page.getByText("No symbols match that search.")).toBeVisible({
       timeout: 2000,
     });
   });
diff --git a/e2e/seasonal.spec.ts b/e2e/seasonal.spec.ts
index 9544b07..bc82c50 100644
--- a/e2e/seasonal.spec.ts
+++ b/e2e/seasonal.spec.ts
@@ -1,32 +1,32 @@
 import { test, expect } from "./fixtures";
+import { selectSymbol } from "./helpers";
 
 test.describe("Seasonals Tab", () => {
-  /**
-   * Helper: search for a symbol and navigate to the Seasonals tab
-   */
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/");
+  });
+
   async function goToSeasonals(
     page: import("@playwright/test").Page,
     symbol: string
   ) {
-    await page.goto("http://localhost:3000");
-    const searchInput = page.getByPlaceholder(/search stocks/i);
-    await searchInput.fill(symbol);
-    await searchInput.press("Enter");
-    await expect(
-      page.getByRole("heading", { name: new RegExp(symbol, "i") })
-    ).toBeVisible();
+    await selectSymbol(page, symbol);
     await page.getByRole("tab", { name: "Seasonals" }).click();
+    await expect(page.getByText("Typical month (average)")).toBeVisible({
+      timeout: 15000,
+    });
   }
 
   test("should display Seasonal Patterns heading when Seasonals tab is clicked", async ({
     page,
   }) => {
     await goToSeasonals(page, "AAPL");
-    await expect(page.getByText("Seasonal Patterns")).toBeVisible();
+    await expect(page.getByText("Monthly return patterns")).toBeVisible();
   });
 
   test("should display month column headers", async ({ page }) => {
     await goToSeasonals(page, "AAPL");
+    await expect(page.getByText("Monthly return patterns")).toBeVisible();
     const months = [
       "Jan",
       "Feb",
@@ -42,7 +42,9 @@ test.describe("Seasonals Tab", () => {
       "Dec",
     ];
     for (const month of months) {
-      await expect(page.getByText(month, { exact: true })).toBeVisible();
+      await expect(
+        page.getByRole("columnheader", { name: month })
+      ).toBeVisible();
     }
   });
 
@@ -67,7 +69,7 @@ test.describe("Seasonals Tab", () => {
     page,
   }) => {
     await goToSeasonals(page, "AAPL");
-    await expect(page.getByText("Seasonal Patterns")).toBeVisible();
+    await expect(page.getByText("Monthly return patterns")).toBeVisible();
     await page.getByRole("tab", { name: "Overview" }).click();
     await expect(page.getByText("Key Metrics")).toBeVisible();
   });
@@ -76,6 +78,6 @@ test.describe("Seasonals Tab", () => {
   test("should be responsive on mobile viewport", async ({ page }) => {
     await page.setViewportSize({ width: 375, height: 667 });
     await goToSeasonals(page, "NFLX");
-    await expect(page.getByText("Seasonal Patterns")).toBeVisible();
+    await expect(page.getByText("Monthly return patterns")).toBeVisible();
   });
 });
diff --git a/e2e/sectors.spec.ts b/e2e/sectors.spec.ts
index a2db314..36df402 100644
--- a/e2e/sectors.spec.ts
+++ b/e2e/sectors.spec.ts
@@ -2,7 +2,7 @@ import { test, expect } from "./fixtures";
 
 test.describe("Sectors Hub", () => {
   test.beforeEach(async ({ page }) => {
-    await page.goto("/");
+    await page.goto("/sectors");
   });
 
   test("should display the Sectors Hub section on the home page", async ({
@@ -10,7 +10,9 @@ test.describe("Sectors Hub", () => {
   }) => {
     const sectorHub = page.getByTestId("sector-hub");
     await expect(sectorHub).toBeVisible({ timeout: 15000 });
-    await expect(sectorHub.getByText("Sectors Hub")).toBeVisible();
+    await expect(
+      sectorHub.getByRole("heading", { name: "Sectors" })
+    ).toBeVisible();
   });
 
   test("should display sector cards with performance percentages (Req 23.1, 23.3)", async ({
@@ -101,16 +103,31 @@ test.describe("Sectors Hub", () => {
       .locator("[data-testid^='sector-']")
       .first();
     const testId = await firstSector.getAttribute("data-testid");
-    expect(testId).toBe("sector-Communication");
+    expect(testId).toBe("sector-Financial");
   });
 
   test("should show loading state before data arrives", async ({ page }) => {
     await page.route("**/api/market/sectors*", async (route) => {
       await new Promise((r) => setTimeout(r, 3000));
-      await route.continue();
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({
+          success: true,
+          data: [
+            {
+              sector: "Technology",
+              performance: 2.1,
+              changePercent: 1.2,
+              constituents: 120,
+            },
+          ],
+          timestamp: "2024-01-15T12:00:00.000Z",
+        }),
+      });
     });
 
-    await page.goto("/");
+    await page.goto("/sectors");
     const loading = page.getByTestId("sector-hub-loading");
     await expect(loading).toBeVisible({ timeout: 5000 });
   });
diff --git a/e2e/symbol-detail.spec.ts b/e2e/symbol-detail.spec.ts
index 3efd8c9..5df3d25 100644
--- a/e2e/symbol-detail.spec.ts
+++ b/e2e/symbol-detail.spec.ts
@@ -1,54 +1,36 @@
 import { test, expect } from "./fixtures";
+import { selectSymbol } from "./helpers";
 
 test.describe("Symbol Detail on Home Page", () => {
   test.beforeEach(async ({ page }) => {
-    await page.goto("http://localhost:3000");
+    await page.goto("/");
   });
 
-  test("should display welcome message when no symbol selected", async ({
+  test("should display dashboard quick links when no symbol selected", async ({
     page,
   }) => {
-    await expect(page.getByText("Search for a Stock Symbol")).toBeVisible();
-    await expect(
-      page.getByText("Use the search bar above to find and analyze stocks")
-    ).toBeVisible();
+    await expect(page.getByText("Compare sector performance")).toBeVisible();
+    await expect(page.getByText("Visual market overview")).toBeVisible();
+    await expect(page.getByText("Filter and find assets")).toBeVisible();
   });
 
   test("should display symbol header after selecting a symbol", async ({
     page,
   }) => {
-    // Search for a symbol
-    const searchInput = page.getByPlaceholder(/search stocks/i);
-    await searchInput.fill("AAPL");
-    await searchInput.press("Enter");
-
-    // Wait for symbol header to appear
-    await expect(page.getByRole("heading", { name: /AAPL/i })).toBeVisible();
+    await selectSymbol(page, "AAPL");
+    await expect(page.getByText("AAPL Test Co.")).toBeVisible();
   });
 
   test("should display current price with change indicators", async ({
     page,
   }) => {
-    // Select a symbol
-    const searchInput = page.getByPlaceholder(/search stocks/i);
-    await searchInput.fill("AAPL");
-    await searchInput.press("Enter");
-
-    // Check for price display
-    await expect(page.getByText(/\$/)).toBeVisible();
-
-    // Check for change percentage (either positive or negative)
-    const changeText = page.locator("text=/[+-]?\\d+\\.\\d+%/").first();
-    await expect(changeText).toBeVisible();
+    await selectSymbol(page, "AAPL");
+    await expect(page.getByLabel(/Current price: \$189\.42/)).toBeVisible();
+    await expect(page.getByLabel(/Change: \+1\.25 \(\+0\.66%\)/)).toBeVisible();
   });
 
   test("should display tab navigation", async ({ page }) => {
-    // Select a symbol
-    const searchInput = page.getByPlaceholder(/search stocks/i);
-    await searchInput.fill("TSLA");
-    await searchInput.press("Enter");
-
-    // Check for all tabs
+    await selectSymbol(page, "TSLA");
     await expect(page.getByRole("tab", { name: "Overview" })).toBeVisible();
     await expect(page.getByRole("tab", { name: "Financials" })).toBeVisible();
     await expect(page.getByRole("tab", { name: "Technicals" })).toBeVisible();
@@ -57,23 +39,15 @@ test.describe("Symbol Detail on Home Page", () => {
   });
 
   test("should display Overview tab by default", async ({ page }) => {
-    // Select a symbol
-    const searchInput = page.getByPlaceholder(/search stocks/i);
-    await searchInput.fill("MSFT");
-    await searchInput.press("Enter");
-
-    // Overview tab should be active
-    const overviewTab = page.getByRole("tab", { name: "Overview" });
-    await expect(overviewTab).toHaveAttribute("aria-selected", "true");
+    await selectSymbol(page, "MSFT");
+    await expect(page.getByRole("tab", { name: "Overview" })).toHaveAttribute(
+      "aria-selected",
+      "true"
+    );
   });
 
   test("should display key metrics in Overview tab", async ({ page }) => {
-    // Select a symbol
-    const searchInput = page.getByPlaceholder(/search stocks/i);
-    await searchInput.fill("NVDA");
-    await searchInput.press("Enter");
-
-    // Check for key metrics
+    await selectSymbol(page, "NVDA");
     await expect(page.getByText("Key Metrics")).toBeVisible();
     await expect(page.getByText("Market Cap")).toBeVisible();
     await expect(page.getByText("Volume")).toBeVisible();
@@ -82,93 +56,57 @@ test.describe("Symbol Detail on Home Page", () => {
   });
 
   test("should display price chart in Overview tab", async ({ page }) => {
-    // Select a symbol
-    const searchInput = page.getByPlaceholder(/search stocks/i);
-    await searchInput.fill("GOOGL");
-    await searchInput.press("Enter");
-
-    // Check for chart heading
-    await expect(page.getByText("Price Chart")).toBeVisible();
+    await selectSymbol(page, "GOOGL");
+    await expect(page.getByRole("heading", { name: "Chart" })).toBeVisible();
+    await expect(page.getByTestId("price-chart-panel")).toBeVisible();
   });
 
   test("should switch between tabs", async ({ page }) => {
-    // Select a symbol
-    const searchInput = page.getByPlaceholder(/search stocks/i);
-    await searchInput.fill("AMZN");
-    await searchInput.press("Enter");
+    await selectSymbol(page, "AMZN");
 
-    // Click on Financials tab
     await page.getByRole("tab", { name: "Financials" }).click();
-    await expect(page.getByText("Financials")).toBeVisible();
+    await expect(page.getByRole("tab", { name: "Financials" })).toHaveAttribute(
+      "aria-selected",
+      "true"
+    );
 
-    // Click on Technicals tab
     await page.getByRole("tab", { name: "Technicals" }).click();
-    await expect(page.getByText("Technical Indicators")).toBeVisible();
-
-    // Click back to Overview
-    await page.getByRole("tab", { name: "Overview" }).click();
-    await expect(page.getByText("Key Metrics")).toBeVisible();
+    await expect(page.getByRole("tab", { name: "Technicals" })).toHaveAttribute(
+      "aria-selected",
+      "true"
+    );
   });
 
   test("should handle different symbols", async ({ page }) => {
-    // First symbol
-    let searchInput = page.getByPlaceholder(/search stocks/i);
-    await searchInput.fill("AAPL");
-    await searchInput.press("Enter");
-    await expect(page.getByRole("heading", { name: /AAPL/i })).toBeVisible();
+    await selectSymbol(page, "AAPL");
+    await expect(
+      page.getByRole("heading", { level: 1, name: "AAPL" })
+    ).toBeVisible();
 
-    // Second symbol
-    searchInput = page.getByPlaceholder(/search stocks/i);
+    const searchInput = page.getByPlaceholder(/search stocks/i);
     await searchInput.fill("TSLA");
     await searchInput.press("Enter");
-    await expect(page.getByRole("heading", { name: /TSLA/i })).toBeVisible();
+    await expect(
+      page.getByRole("heading", { level: 1, name: "TSLA" })
+    ).toBeVisible();
   });
 
   test("should be responsive on mobile", async ({ page }) => {
     await page.setViewportSize({ width: 375, height: 667 });
-
-    // Select a symbol
-    const searchInput = page.getByPlaceholder(/search stocks/i);
-    await searchInput.fill("NFLX");
-    await searchInput.press("Enter");
-
-    // Check that content is visible on mobile
-    await expect(page.getByRole("heading", { name: /NFLX/i })).toBeVisible();
-    await expect(page.getByText("Key Metrics")).toBeVisible();
+    await selectSymbol(page, "NFLX");
+    await expect(page.getByTestId("price-chart-panel")).toBeVisible();
   });
 
   test("should display tooltips on metric hover", async ({ page }) => {
-    // Select a symbol
-    const searchInput = page.getByPlaceholder(/search stocks/i);
-    await searchInput.fill("AMD");
-    await searchInput.press("Enter");
-
-    // Wait for metrics to load
-    await expect(page.getByText("Market Cap")).toBeVisible();
-
-    // Hover over a metric to show tooltip
-    const marketCapMetric = page.locator("text=Market Cap").locator("..");
-    await marketCapMetric.hover();
-
-    // Tooltip should appear (checking for tooltip content)
-    await expect(
-      page.getByText(/Market Capitalization is the total value/i)
-    ).toBeVisible({ timeout: 2000 });
+    await selectSymbol(page, "AMD");
+    const marketCapLabel = page.getByText("Market Cap").first();
+    await marketCapLabel.hover();
+    await expect(page.getByRole("tooltip")).toBeVisible();
   });
 
   test("should display time range selector in chart", async ({ page }) => {
-    // Select a symbol
-    const searchInput = page.getByPlaceholder(/search stocks/i);
-    await searchInput.fill("INTC");
-    await searchInput.press("Enter");
-
-    // Wait for chart to load
-    await expect(page.getByText("Price Chart")).toBeVisible();
-
-    // Check for time range buttons
-    await expect(page.getByRole("button", { name: "1D" })).toBeVisible();
-    await expect(page.getByRole("button", { name: "1W" })).toBeVisible();
+    await selectSymbol(page, "INTC");
     await expect(page.getByRole("button", { name: "1M" })).toBeVisible();
-    await expect(page.getByRole("button", { name: "1Y" })).toBeVisible();
+    await expect(page.getByRole("button", { name: "3M" })).toBeVisible();
   });
 });
diff --git a/e2e/technical-indicators.spec.ts b/e2e/technical-indicators.spec.ts
index 4b3589a..4cde5a2 100644
--- a/e2e/technical-indicators.spec.ts
+++ b/e2e/technical-indicators.spec.ts
@@ -1,34 +1,31 @@
 import { test, expect } from "./fixtures";
+import { selectSymbol } from "./helpers";
 
 test.describe("Technical Indicators Tab", () => {
-  /**
-   * Helper: search for a symbol and wait for data to load
-   */
-  async function selectSymbol(
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/");
+  });
+
+  async function goToTechnicals(
     page: import("@playwright/test").Page,
     symbol: string
   ) {
-    await page.goto("http://localhost:3000");
-    const searchInput = page.getByPlaceholder(/search stocks/i);
-    await searchInput.fill(symbol);
-    await searchInput.press("Enter");
-    // Wait for symbol header to appear
+    await selectSymbol(page, symbol);
+    await page.getByRole("tab", { name: "Technicals" }).click();
     await expect(
-      page.getByRole("heading", { name: new RegExp(symbol, "i") })
-    ).toBeVisible();
+      page.getByRole("tabpanel", { name: "Technical Indicators" })
+    ).toBeVisible({ timeout: 15000 });
   }
 
   test("should display Technical Indicators heading when Technicals tab is clicked", async ({
     page,
   }) => {
-    await selectSymbol(page, "AAPL");
-    await page.getByRole("tab", { name: "Technicals" }).click();
+    await goToTechnicals(page, "AAPL");
     await expect(page.getByText("Technical Indicators")).toBeVisible();
   });
 
   test("should display all four indicator sections", async ({ page }) => {
-    await selectSymbol(page, "AAPL");
-    await page.getByRole("tab", { name: "Technicals" }).click();
+    await goToTechnicals(page, "AAPL");
 
     await expect(page.getByText("RSI (Relative Strength Index)")).toBeVisible();
     await expect(page.getByText("Moving Averages")).toBeVisible();
@@ -39,8 +36,7 @@ test.describe("Technical Indicators Tab", () => {
   });
 
   test("should display the overall sentiment gauge", async ({ page }) => {
-    await selectSymbol(page, "TSLA");
-    await page.getByRole("tab", { name: "Technicals" }).click();
+    await goToTechnicals(page, "TSLA");
 
     const gauge = page.getByTestId("sentiment-gauge");
     await expect(gauge).toBeVisible();
@@ -51,23 +47,18 @@ test.describe("Technical Indicators Tab", () => {
   });
 
   test("should display signal badges with correct labels", async ({ page }) => {
-    await selectSymbol(page, "MSFT");
-    await page.getByRole("tab", { name: "Technicals" }).click();
+    await goToTechnicals(page, "MSFT");
 
-    // At least one badge should be visible (every indicator has a signal badge)
-    const badges = page.locator(
-      "text=/^(Overpriced|Underpriced|Fairly Priced)$/"
-    );
-    const count = await badges.count();
-    // 4 indicator cards + 1 sentiment badge = 5 badges minimum
-    expect(count).toBeGreaterThanOrEqual(5);
+    const panel = page.getByRole("tabpanel", { name: "Technical Indicators" });
+    await expect(panel.getByText("Overpriced").first()).toBeVisible();
+    await expect(panel.getByText("Underpriced").first()).toBeVisible();
+    await expect(panel.getByText("Fairly Priced").first()).toBeVisible();
   });
 
   test("should show tooltip when hovering over an indicator name", async ({
     page,
   }) => {
-    await selectSymbol(page, "NVDA");
-    await page.getByRole("tab", { name: "Technicals" }).click();
+    await goToTechnicals(page, "NVDA");
 
     // Hover over RSI indicator info button
     const rsiButton = page.getByLabel(
@@ -83,21 +74,18 @@ test.describe("Technical Indicators Tab", () => {
   });
 
   test("should not contain Buy or Sell language", async ({ page }) => {
-    await selectSymbol(page, "GOOGL");
-    await page.getByRole("tab", { name: "Technicals" }).click();
+    await goToTechnicals(page, "GOOGL");
 
-    // Wait for indicators to load
-    await expect(page.getByText("Technical Indicators")).toBeVisible();
+    const panel = page.getByRole("tabpanel", { name: "Technical Indicators" });
+    await expect(panel.getByText("Technical Indicators")).toBeVisible();
 
-    // Get all text content from the technicals section
-    const content = await page.locator(".p-6").first().textContent();
+    const content = await panel.textContent();
     expect(content).not.toMatch(/\bBuy\b/);
     expect(content).not.toMatch(/\bSell\b/);
   });
 
   test("should display numeric values for indicators", async ({ page }) => {
-    await selectSymbol(page, "AMZN");
-    await page.getByRole("tab", { name: "Technicals" }).click();
+    await goToTechnicals(page, "AMZN");
 
     // RSI value should be a number
     await expect(page.getByText("RSI (Relative Strength Index)")).toBeVisible();
@@ -113,23 +101,18 @@ test.describe("Technical Indicators Tab", () => {
   });
 
   test("should display help icons for each indicator", async ({ page }) => {
-    await selectSymbol(page, "META");
-    await page.getByRole("tab", { name: "Technicals" }).click();
+    await goToTechnicals(page, "META");
 
-    // Each indicator card has a "?" help icon
-    const helpIcons = page.locator("text=?");
-    const count = await helpIcons.count();
-    expect(count).toBeGreaterThanOrEqual(4);
+    const helpButtons = page.getByRole("button", {
+      name: /More info about/i,
+    });
+    await expect(helpButtons).toHaveCount(4);
   });
 
   test("should switch back to Overview tab from Technicals", async ({
     page,
   }) => {
-    await selectSymbol(page, "AAPL");
-
-    // Go to Technicals
-    await page.getByRole("tab", { name: "Technicals" }).click();
-    await expect(page.getByText("Technical Indicators")).toBeVisible();
+    await goToTechnicals(page, "AAPL");
 
     // Go back to Overview
     await page.getByRole("tab", { name: "Overview" }).click();
@@ -138,8 +121,7 @@ test.describe("Technical Indicators Tab", () => {
 
   test("should be responsive on mobile viewport", async ({ page }) => {
     await page.setViewportSize({ width: 375, height: 667 });
-    await selectSymbol(page, "NFLX");
-    await page.getByRole("tab", { name: "Technicals" }).click();
+    await goToTechnicals(page, "NFLX");
 
     await expect(page.getByText("Technical Indicators")).toBeVisible();
     await expect(page.getByText("RSI (Relative Strength Index)")).toBeVisible();
diff --git a/e2e/visual-hallmark.spec.ts b/e2e/visual-hallmark.spec.ts
index 1d52a09..8845f70 100644
--- a/e2e/visual-hallmark.spec.ts
+++ b/e2e/visual-hallmark.spec.ts
@@ -1,4 +1,5 @@
 import { test, expect } from "./fixtures";
+import { waitForChartReveal } from "./helpers";
 import type { PricingTierInfo } from "../types";
 
 const STABLE_PRICING_TIERS: PricingTierInfo[] = [
@@ -555,6 +556,7 @@ test.describe("Hallmark visual regression", () => {
 
     const chart = page.getByTestId("price-chart-panel");
     await expect(chart).toBeVisible({ timeout: 15000 });
+    await waitForChartReveal(page);
     await expect(chart).toHaveScreenshot("symbol-price-chart.png", {
       maxDiffPixelRatio: 0.03,
     });
@@ -645,6 +647,7 @@ test.describe("Hallmark visual regression", () => {
 
     const chart = page.getByTestId("price-chart-panel");
     await expect(chart).toBeVisible({ timeout: 15000 });
+    await waitForChartReveal(page);
     await expect(chart).toHaveScreenshot("symbol-price-chart-dark.png", {
       maxDiffPixelRatio: 0.03,
     });
diff --git a/e2e/visual-hallmark.spec.ts-snapshots/symbol-price-chart-dark.png b/e2e/visual-hallmark.spec.ts-snapshots/symbol-price-chart-dark.png
index b81d1b8..8864ae5 100644
Binary files a/e2e/visual-hallmark.spec.ts-snapshots/symbol-price-chart-dark.png and b/e2e/visual-hallmark.spec.ts-snapshots/symbol-price-chart-dark.png differ
diff --git a/e2e/visual-hallmark.spec.ts-snapshots/symbol-price-chart.png b/e2e/visual-hallmark.spec.ts-snapshots/symbol-price-chart.png
index b0e4c10..464976e 100644
Binary files a/e2e/visual-hallmark.spec.ts-snapshots/symbol-price-chart.png and b/e2e/visual-hallmark.spec.ts-snapshots/symbol-price-chart.png differ
diff --git a/lib/__tests__/chart-effects.test.ts b/lib/__tests__/chart-effects.test.ts
new file mode 100644
index 0000000..f3c09c8
--- /dev/null
+++ b/lib/__tests__/chart-effects.test.ts
@@ -0,0 +1,43 @@
+import { describe, expect, it } from "vitest";
+import {
+  chartAtmosphereEnabled,
+  chartEffectTone,
+  CHART_LOAD_SPLASH_LOOPS,
+  CHART_LOAD_SPLASH_LOOP_MS,
+  CHART_REVEAL_DURATION_MS,
+  chartLiveFlashCoreClass,
+  chartLiveFlashRingClass,
+  chartScrubBeamClass,
+  chartSparkleEnabled,
+  chartSparkleFlashClass,
+  chartSparkleSweepClass,
+} from "@/lib/chart-effects";
+
+describe("chart-effects", () => {
+  it("enables sparkle and atmosphere for area charts only", () => {
+    expect(chartSparkleEnabled("area")).toBe(true);
+    expect(chartSparkleEnabled("candlestick")).toBe(false);
+    expect(chartAtmosphereEnabled("area")).toBe(true);
+    expect(chartAtmosphereEnabled("candlestick")).toBe(false);
+  });
+
+  it("exposes sparkle, scrub, and live flash classes", () => {
+    expect(chartEffectTone(false)).toBe("down");
+    expect(CHART_REVEAL_DURATION_MS).toBe(1200);
+    expect(CHART_LOAD_SPLASH_LOOPS).toBe(1);
+    expect(CHART_LOAD_SPLASH_LOOP_MS).toBe(1200);
+    expect(chartSparkleSweepClass("up")).toContain("chart-sparkle-sweep--up");
+    expect(chartSparkleFlashClass("down")).toContain(
+      "chart-sparkle-flash--down"
+    );
+    expect(chartScrubBeamClass("up", true)).toContain(
+      "chart-scrub-beam--active"
+    );
+    expect(chartLiveFlashRingClass("up")).toContain(
+      "chart-live-flash-ring--up"
+    );
+    expect(chartLiveFlashCoreClass("up")).toContain(
+      "chart-live-flash-core--up"
+    );
+  });
+});
diff --git a/lib/__tests__/chart-magnifier-tooltip.test.ts b/lib/__tests__/chart-magnifier-tooltip.test.ts
new file mode 100644
index 0000000..48ce4e2
--- /dev/null
+++ b/lib/__tests__/chart-magnifier-tooltip.test.ts
@@ -0,0 +1,62 @@
+import { describe, expect, it } from "vitest";
+import {
+  CHART_MAGNIFIER_TOOLTIP_WIDTH,
+  clampMagnifierTooltipLeft,
+  findPricePointAtTime,
+  formatMagnifierDate,
+  formatMagnifierPrice,
+  magnifierPriceFromPoint,
+  pricePointFromCrosshair,
+} from "@/lib/chart-magnifier-tooltip";
+import type { PriceData } from "@/types";
+
+describe("chart-magnifier-tooltip", () => {
+  it("centers tooltip on crosshair and clamps within plot width", () => {
+    const half = CHART_MAGNIFIER_TOOLTIP_WIDTH / 2;
+    expect(
+      clampMagnifierTooltipLeft(200, CHART_MAGNIFIER_TOOLTIP_WIDTH, 640)
+    ).toBe(200 - half);
+    expect(
+      clampMagnifierTooltipLeft(10, CHART_MAGNIFIER_TOOLTIP_WIDTH, 640)
+    ).toBe(0);
+    expect(
+      clampMagnifierTooltipLeft(630, CHART_MAGNIFIER_TOOLTIP_WIDTH, 640)
+    ).toBe(640 - CHART_MAGNIFIER_TOOLTIP_WIDTH);
+  });
+
+  it("formats magnifier price and date", () => {
+    const point: PriceData = {
+      timestamp: new Date("2019-03-15"),
+      open: 1,
+      high: 2,
+      low: 0.5,
+      close: 26.11,
+      volume: 1,
+    };
+
+    expect(formatMagnifierPrice(26.114)).toBe("26.11");
+    expect(magnifierPriceFromPoint(point)).toBe(26.11);
+    expect(formatMagnifierDate(new Date("2019-03-15"))).toMatch(/Mar/);
+  });
+
+  it("finds price rows by unix timestamp", () => {
+    const data: PriceData[] = [
+      {
+        timestamp: new Date(1_700_000_000_000),
+        open: 1,
+        high: 2,
+        low: 0.5,
+        close: 100,
+        volume: 1,
+      },
+    ];
+
+    expect(findPricePointAtTime(data, 1_700_000_000)?.close).toBe(100);
+  });
+
+  it("falls back to series crosshair data", () => {
+    const point = pricePointFromCrosshair(1_700_000_000, { value: 42.5 });
+    expect(point?.close).toBe(42.5);
+    expect(point?.timestamp.getTime()).toBe(1_700_000_000_000);
+  });
+});
diff --git a/lib/__tests__/chart-plot-clip.test.ts b/lib/__tests__/chart-plot-clip.test.ts
new file mode 100644
index 0000000..4b9701d
--- /dev/null
+++ b/lib/__tests__/chart-plot-clip.test.ts
@@ -0,0 +1,35 @@
+import { describe, expect, it } from "vitest";
+import {
+  computePlotClipPath,
+  computePlotClipPathFromRatio,
+  computePlotClipPathFromX,
+  HIDDEN_PLOT_CLIP,
+  revealRatio,
+} from "@/lib/chart-plot-clip";
+
+describe("revealRatio", () => {
+  it("maps revealed count to 0–1", () => {
+    expect(revealRatio(50, 100)).toBe(0.5);
+    expect(revealRatio(0, 100)).toBe(0);
+    expect(revealRatio(100, 100)).toBe(1);
+  });
+});
+
+describe("computePlotClipPath", () => {
+  it("returns hidden clip for zero reveal", () => {
+    expect(computePlotClipPath(0, 100, null)).toBe(HIDDEN_PLOT_CLIP);
+  });
+
+  it("uses linear ratio polygon clip", () => {
+    const plot = { clientWidth: 400 } as HTMLElement;
+    expect(computePlotClipPath(50, 100, plot)).toBe(
+      "polygon(0 0, 200px 0, 200px 100%, 0 100%)"
+    );
+    expect(computePlotClipPathFromRatio(0.5, plot)).toBe(
+      "polygon(0 0, 200px 0, 200px 100%, 0 100%)"
+    );
+    expect(computePlotClipPathFromX(200, plot)).toBe(
+      "polygon(0 0, 200px 0, 200px 100%, 0 100%)"
+    );
+  });
+});
diff --git a/lib/__tests__/chart-price-data.test.ts b/lib/__tests__/chart-price-data.test.ts
new file mode 100644
index 0000000..9ef6417
--- /dev/null
+++ b/lib/__tests__/chart-price-data.test.ts
@@ -0,0 +1,89 @@
+import { describe, expect, it } from "vitest";
+import { validatePriceDataSeries } from "@/lib/chart-price-data";
+
+describe("chart-price-data", () => {
+  it("returns empty array for invalid input", () => {
+    expect(validatePriceDataSeries(null)).toEqual([]);
+    expect(validatePriceDataSeries("bad")).toEqual([]);
+    expect(validatePriceDataSeries([{ close: "nope" }])).toEqual([]);
+  });
+
+  it("keeps valid price rows", () => {
+    const ts = new Date("2024-01-02");
+    expect(
+      validatePriceDataSeries([
+        {
+          timestamp: ts,
+          open: 1,
+          high: 2,
+          low: 0.5,
+          close: 1.5,
+          volume: 100,
+        },
+      ])
+    ).toEqual([
+      {
+        timestamp: ts,
+        open: 1,
+        high: 2,
+        low: 0.5,
+        close: 1.5,
+        volume: 100,
+      },
+    ]);
+  });
+
+  it("coerces numeric strings from JSON payloads", () => {
+    const points = validatePriceDataSeries([
+      {
+        timestamp: "2024-01-02T00:00:00.000Z",
+        open: "100",
+        high: "102",
+        low: "99",
+        close: "101.5",
+        volume: "1000",
+      },
+    ]);
+
+    expect(points).toHaveLength(1);
+    expect(points[0]?.close).toBe(101.5);
+  });
+
+  it("rejects zero or negative close values", () => {
+    expect(
+      validatePriceDataSeries([
+        {
+          timestamp: "2024-01-02T00:00:00.000Z",
+          open: 100,
+          high: 101,
+          low: 99,
+          close: 0,
+          volume: 1000,
+        },
+      ])
+    ).toEqual([]);
+  });
+
+  it("sorts points chronologically", () => {
+    const points = validatePriceDataSeries([
+      {
+        timestamp: "2024-01-03T00:00:00.000Z",
+        open: 3,
+        high: 3,
+        low: 3,
+        close: 3,
+        volume: 1,
+      },
+      {
+        timestamp: "2024-01-01T00:00:00.000Z",
+        open: 1,
+        high: 1,
+        low: 1,
+        close: 1,
+        volume: 1,
+      },
+    ]);
+
+    expect(points.map((p) => p.close)).toEqual([1, 3]);
+  });
+});
diff --git a/lib/__tests__/chart-time-range.test.ts b/lib/__tests__/chart-time-range.test.ts
new file mode 100644
index 0000000..cc3ee3a
--- /dev/null
+++ b/lib/__tests__/chart-time-range.test.ts
@@ -0,0 +1,39 @@
+import { describe, expect, it } from "vitest";
+import { filterPriceDataByTimeRange } from "@/lib/chart-time-range";
+import type { PriceData } from "@/types";
+
+function daysAgo(
+  count: number,
+  from = new Date("2026-06-15T12:00:00")
+): PriceData[] {
+  return Array.from({ length: count }, (_, i) => {
+    const day = new Date(from);
+    day.setDate(day.getDate() - (count - 1 - i));
+    return {
+      timestamp: day,
+      open: 100 + i,
+      high: 101 + i,
+      low: 99 + i,
+      close: 100 + i,
+      volume: 1_000_000,
+    };
+  });
+}
+
+describe("chart-time-range", () => {
+  it("returns different slices per range", () => {
+    const data = daysAgo(400);
+    const oneMonth = filterPriceDataByTimeRange(data, "1M");
+    const oneYear = filterPriceDataByTimeRange(data, "1Y");
+    const ytd = filterPriceDataByTimeRange(data, "YTD");
+
+    expect(oneMonth.length).toBeLessThan(oneYear.length);
+    expect(ytd.length).toBeLessThan(oneYear.length);
+    expect(oneMonth.length).toBeGreaterThan(20);
+  });
+
+  it("returns all data for Max", () => {
+    const data = daysAgo(10);
+    expect(filterPriceDataByTimeRange(data, "Max")).toHaveLength(10);
+  });
+});
diff --git a/lib/__tests__/chart-trail.test.ts b/lib/__tests__/chart-trail.test.ts
new file mode 100644
index 0000000..8d522b9
--- /dev/null
+++ b/lib/__tests__/chart-trail.test.ts
@@ -0,0 +1,212 @@
+import { describe, expect, it, vi, beforeEach, afterEach } from "vitest";
+import {
+  animateChartTrail,
+  buildTrailRevealData,
+  computeLineValueRange,
+  revealCountForProgress,
+  sanitizeLineData,
+} from "@/lib/chart-trail";
+
+describe("sanitizeLineData", () => {
+  it("removes invalid points and sorts by time", () => {
+    const clean = sanitizeLineData([
+      { time: 3, value: 30 },
+      { time: 1, value: null as unknown as number },
+      { time: 2, value: 20 },
+    ]);
+
+    expect(clean).toEqual([
+      { time: 2, value: 20 },
+      { time: 3, value: 30 },
+    ]);
+  });
+});
+
+describe("buildTrailRevealData", () => {
+  it("keeps the full timeline with whitespace slots on the right", () => {
+    const clean = [
+      { time: 1, value: 10 },
+      { time: 2, value: 20 },
+      { time: 3, value: 30 },
+    ];
+
+    const partial = buildTrailRevealData(clean, 2);
+
+    expect(partial).toHaveLength(3);
+    expect(partial[0]).toEqual({ time: 1, value: 10 });
+    expect(partial[1]).toEqual({ time: 2, value: 20 });
+    expect(partial[2]).toEqual({ time: 3 });
+  });
+});
+
+describe("revealCountForProgress", () => {
+  it("maps animation progress to an increasing point count", () => {
+    expect(revealCountForProgress(0, 120)).toBeGreaterThanOrEqual(2);
+    expect(revealCountForProgress(0.5, 120)).toBeGreaterThan(2);
+    expect(revealCountForProgress(1, 120)).toBe(120);
+  });
+});
+
+describe("computeLineValueRange", () => {
+  it("pads the min and max values for a stable y-axis", () => {
+    const range = computeLineValueRange([
+      { time: 1, value: 100 },
+      { time: 2, value: 110 },
+    ]);
+
+    expect(range.minValue).toBeLessThan(100);
+    expect(range.maxValue).toBeGreaterThan(110);
+  });
+});
+
+describe("animateChartTrail", () => {
+  beforeEach(() => {
+    vi.stubGlobal("performance", { now: vi.fn(() => 0) });
+    vi.stubGlobal(
+      "requestAnimationFrame",
+      vi.fn((cb: FrameRequestCallback) => {
+        cb(0);
+        return 1;
+      })
+    );
+    vi.stubGlobal("cancelAnimationFrame", vi.fn());
+    vi.stubGlobal(
+      "matchMedia",
+      vi.fn(() => ({ matches: false }))
+    );
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  function createSeriesMock() {
+    return {
+      setData: vi.fn(),
+      applyOptions: vi.fn(),
+    };
+  }
+
+  function countValuedPoints(data: Array<{ value?: number }>) {
+    return data.filter(
+      (point) => point.value != null && Number.isFinite(point.value)
+    ).length;
+  }
+
+  function createChartMock() {
+    const fitContent = vi.fn();
+    const setVisibleRange = vi.fn();
+    const setVisibleLogicalRange = vi.fn();
+    const applyOptions = vi.fn();
+    const subscribeVisibleLogicalRangeChange = vi.fn();
+    const unsubscribeVisibleLogicalRangeChange = vi.fn();
+
+    return {
+      chart: {
+        applyOptions,
+        timeScale: () => ({
+          fitContent,
+          setVisibleRange,
+          setVisibleLogicalRange,
+          applyOptions,
+          subscribeVisibleLogicalRangeChange,
+          unsubscribeVisibleLogicalRangeChange,
+        }),
+      } as never,
+      fitContent,
+      setVisibleRange,
+      setVisibleLogicalRange,
+      applyOptions,
+      subscribeVisibleLogicalRangeChange,
+    };
+  }
+
+  it("loads full data once, pins the window, and reveals via onStep only", () => {
+    const series = createSeriesMock();
+    const onComplete = vi.fn();
+    const onStep = vi.fn();
+    const {
+      chart,
+      setVisibleRange,
+      setVisibleLogicalRange,
+      subscribeVisibleLogicalRangeChange,
+    } = createChartMock();
+    const data = Array.from({ length: 120 }, (_, i) => ({
+      time: i + 1,
+      value: i,
+    }));
+
+    let now = 0;
+    vi.mocked(performance.now).mockImplementation(() => now);
+    vi.mocked(requestAnimationFrame).mockImplementation((cb) => {
+      now += 200;
+      cb(now);
+      return now;
+    });
+
+    animateChartTrail(series as never, data, {
+      chart,
+      durationMs: 1000,
+      onComplete,
+      onStep,
+    });
+
+    expect(series.setData).toHaveBeenCalledTimes(1);
+    expect(setVisibleRange).toHaveBeenCalledWith({ from: 1, to: 120 });
+    expect(setVisibleLogicalRange).toHaveBeenCalledWith({ from: 0, to: 119 });
+    expect(subscribeVisibleLogicalRangeChange).toHaveBeenCalled();
+
+    const loaded = series.setData.mock.calls[0]?.[0] ?? [];
+    expect(loaded).toHaveLength(120);
+    expect(countValuedPoints(loaded)).toBe(120);
+    expect(onStep.mock.calls[0]?.[0]).toBe(0);
+    expect(onStep.mock.calls[0]?.[1]).toBe(0);
+    expect(onStep.mock.calls.length).toBeGreaterThan(1);
+    expect(onStep.mock.calls.at(-1)?.[0]).toBe(1);
+    expect(onComplete).toHaveBeenCalled();
+  });
+
+  it("dispose stops animation without snapping to the full series", () => {
+    const series = createSeriesMock();
+    const { chart } = createChartMock();
+    const data = Array.from({ length: 40 }, (_, i) => ({
+      time: i + 1,
+      value: i,
+    }));
+
+    vi.mocked(requestAnimationFrame).mockReturnValue(42);
+
+    const cancel = animateChartTrail(series as never, data, {
+      chart,
+      durationMs: 1000,
+    });
+    cancel(false);
+
+    expect(cancelAnimationFrame).toHaveBeenCalledWith(42);
+    expect(series.setData).toHaveBeenCalledTimes(1);
+  });
+
+  it("cancel snaps via onComplete without extra setData", () => {
+    const series = createSeriesMock();
+    const onComplete = vi.fn();
+    const { chart, fitContent } = createChartMock();
+    const data = Array.from({ length: 40 }, (_, i) => ({
+      time: i + 1,
+      value: i,
+    }));
+
+    vi.mocked(requestAnimationFrame).mockReturnValue(42);
+
+    const cancel = animateChartTrail(series as never, data, {
+      chart,
+      durationMs: 1000,
+      onComplete,
+    });
+    cancel(true);
+
+    expect(cancelAnimationFrame).toHaveBeenCalledWith(42);
+    expect(series.setData).toHaveBeenCalledTimes(1);
+    expect(onComplete).toHaveBeenCalled();
+    expect(fitContent).not.toHaveBeenCalled();
+  });
+});
diff --git a/lib/__tests__/home-page-symbol-fetch.test.ts b/lib/__tests__/home-page-symbol-fetch.test.ts
new file mode 100644
index 0000000..e6b18cf
--- /dev/null
+++ b/lib/__tests__/home-page-symbol-fetch.test.ts
@@ -0,0 +1,67 @@
+import { describe, expect, it, vi, beforeEach, afterEach } from "vitest";
+import {
+  fetchPrimarySymbolData,
+  fetchSecondarySymbolData,
+} from "@/lib/home-page-symbol-fetch";
+
+describe("home-page-symbol-fetch", () => {
+  beforeEach(() => {
+    vi.stubGlobal("fetch", vi.fn());
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("fetches primary symbol and historical data in parallel", async () => {
+    vi.mocked(fetch)
+      .mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({ data: { symbol: "AAPL", name: "Apple" } }),
+      } as Response)
+      .mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({
+          data: [
+            {
+              timestamp: "2024-01-01",
+              open: 1,
+              high: 2,
+              low: 0.5,
+              close: 1.5,
+              volume: 10,
+            },
+          ],
+        }),
+      } as Response);
+
+    const result = await fetchPrimarySymbolData("AAPL", "1M");
+
+    expect(result.symbolData.symbol).toBe("AAPL");
+    expect(result.historicalData).toHaveLength(1);
+    expect(fetch).toHaveBeenCalledTimes(2);
+  });
+
+  it("returns partial secondary data when some endpoints fail", async () => {
+    vi.mocked(fetch)
+      .mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({ data: { rsi: { value: 50, signal: "fair" } } }),
+      } as Response)
+      .mockResolvedValueOnce({ ok: false } as Response)
+      .mockRejectedValueOnce(new Error("network"))
+      .mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({ data: { revenue: [] } }),
+      } as Response);
+
+    const result = await fetchSecondarySymbolData("AAPL");
+
+    expect(result.technicalIndicators).toEqual({
+      rsi: { value: 50, signal: "fair" },
+    });
+    expect(result.forecastData).toBeNull();
+    expect(result.seasonalData).toBeNull();
+    expect(result.financialData).toEqual({ revenue: [] });
+  });
+});
diff --git a/lib/__tests__/market-semantics.test.ts b/lib/__tests__/market-semantics.test.ts
index 2317ed5..95d2bc2 100644
--- a/lib/__tests__/market-semantics.test.ts
+++ b/lib/__tests__/market-semantics.test.ts
@@ -1,6 +1,7 @@
 import { describe, expect, it } from "vitest";
 import {
   getMarketChartColors,
+  marketChartAtmosphereGradient,
   marketChartSignedColor,
   marketSentimentGaugeColor,
   marketSentimentGaugeArcSegments,
@@ -24,6 +25,37 @@ describe("market chart colors", () => {
     expect(marketChartSignedColor(false, true)).not.toBe(MARKET_CHART_UP_LIGHT);
   });
 
+  it("uses performance-based signed palette for area and line charts", () => {
+    const upArea = getMarketChartColors(false, {
+      signed: true,
+      isPositive: true,
+      variant: "area",
+    });
+    const downArea = getMarketChartColors(false, {
+      signed: true,
+      isPositive: false,
+      variant: "area",
+    });
+    const upLine = getMarketChartColors(false, {
+      signed: true,
+      isPositive: true,
+      variant: "line",
+    });
+
+    expect(upArea.series).toBe(MARKET_CHART_UP_LIGHT);
+    expect(downArea.series).toBe(MARKET_CHART_DOWN_LIGHT);
+    expect(upArea.areaTop).toContain("0.55");
+    expect(upLine.areaTop).toBe("transparent");
+    expect(upLine.lineWidth).toBeGreaterThan(upArea.lineWidth);
+  });
+
+  it("exposes diagonal atmosphere gradients for chart backdrops", () => {
+    expect(marketChartAtmosphereGradient(true, true)).toContain(
+      "linear-gradient"
+    );
+    expect(marketChartAtmosphereGradient(false, true)).toContain("244, 63, 94");
+  });
+
   it("maps fear and greed extremes to rose and emerald", () => {
     expect(marketSentimentGaugeColor(10, false)).toBe(MARKET_CHART_DOWN_LIGHT);
     expect(marketSentimentGaugeColor(90, false)).toBe(MARKET_CHART_UP_LIGHT);
diff --git a/lib/__tests__/market-symbol.test.ts b/lib/__tests__/market-symbol.test.ts
new file mode 100644
index 0000000..8d9309f
--- /dev/null
+++ b/lib/__tests__/market-symbol.test.ts
@@ -0,0 +1,25 @@
+import { describe, expect, it } from "vitest";
+import {
+  isValidMarketSymbol,
+  normalizeMarketSymbol,
+} from "@/lib/market-symbol";
+
+describe("market-symbol", () => {
+  it("normalizes valid symbols", () => {
+    expect(normalizeMarketSymbol(" aapl ")).toBe("AAPL");
+    expect(normalizeMarketSymbol("brk.b")).toBe("BRK.B");
+  });
+
+  it("rejects empty or invalid symbols", () => {
+    expect(normalizeMarketSymbol("")).toBeNull();
+    expect(normalizeMarketSymbol("   ")).toBeNull();
+    expect(normalizeMarketSymbol(null)).toBeNull();
+    expect(normalizeMarketSymbol("AAPL;DROP")).toBeNull();
+    expect(normalizeMarketSymbol("../etc")).toBeNull();
+  });
+
+  it("validates symbol pattern", () => {
+    expect(isValidMarketSymbol("AAPL")).toBe(true);
+    expect(isValidMarketSymbol("")).toBe(false);
+  });
+});
diff --git a/lib/chart-effects.ts b/lib/chart-effects.ts
new file mode 100644
index 0000000..76ed273
--- /dev/null
+++ b/lib/chart-effects.ts
@@ -0,0 +1,77 @@
+import type { ChartType } from "@/types";
+
+export type ChartEffectTone = "up" | "down";
+
+export type ChartGlowPoint = {
+  x: number;
+  y: number;
+};
+
+export function chartEffectTone(isPositive: boolean): ChartEffectTone {
+  return isPositive ? "up" : "down";
+}
+
+export function chartSparkleEnabled(chartType: ChartType): boolean {
+  return chartType === "area";
+}
+
+export function chartAtmosphereEnabled(chartType: ChartType): boolean {
+  return chartType === "area";
+}
+
+/** Chart line reveal duration (ms). */
+export const CHART_REVEAL_DURATION_MS = 1200;
+
+/** Full-chart splash loops during load (independent of reveal frontier). */
+export const CHART_LOAD_SPLASH_LOOPS = 1;
+
+/** One splash sweep across the full chart width (ms). */
+export const CHART_LOAD_SPLASH_LOOP_MS = Math.round(
+  CHART_REVEAL_DURATION_MS / CHART_LOAD_SPLASH_LOOPS
+);
+
+export function chartSparkleSweepClass(tone: ChartEffectTone): string {
+  return `chart-sparkle-sweep chart-sparkle-sweep--${tone}`;
+}
+
+export function chartSparkleFlashClass(tone: ChartEffectTone): string {
+  return `chart-sparkle-flash chart-sparkle-flash--${tone}`;
+}
+
+export function chartScrubBeamClass(
+  tone: ChartEffectTone,
+  active: boolean
+): string {
+  return [
+    "chart-scrub-beam",
+    `chart-scrub-beam--${tone}`,
+    active ? "chart-scrub-beam--active" : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+}
+
+export function chartScrubPointClass(
+  tone: ChartEffectTone,
+  active: boolean
+): string {
+  return [
+    "chart-scrub-point",
+    `chart-scrub-point--${tone}`,
+    active ? "chart-scrub-point--active" : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+}
+
+export function chartLiveFlashClass(tone: ChartEffectTone): string {
+  return `chart-live-flash chart-live-flash--${tone}`;
+}
+
+export function chartLiveFlashRingClass(tone: ChartEffectTone): string {
+  return `chart-live-flash-ring chart-live-flash-ring--${tone}`;
+}
+
+export function chartLiveFlashCoreClass(tone: ChartEffectTone): string {
+  return `chart-live-flash-core chart-live-flash-core--${tone}`;
+}
diff --git a/lib/chart-magnifier-tooltip.ts b/lib/chart-magnifier-tooltip.ts
new file mode 100644
index 0000000..99405ae
--- /dev/null
+++ b/lib/chart-magnifier-tooltip.ts
@@ -0,0 +1,110 @@
+import type { PriceData } from "@/types";
+import type { ISeriesApi, Time } from "lightweight-charts";
+
+/** Fixed width — keep in sync with `.chart-magnifier-tooltip` in globals.css. */
+export const CHART_MAGNIFIER_TOOLTIP_WIDTH = 136;
+
+/** Clamp horizontal position so the magnifier stays over the plot area. */
+export function clampMagnifierTooltipLeft(
+  crosshairX: number,
+  tooltipWidth: number,
+  plotWidth: number
+): number {
+  if (plotWidth <= 0) return 0;
+  const half = tooltipWidth / 2;
+  const left = crosshairX - half;
+  const maxLeft = Math.max(0, plotWidth - tooltipWidth);
+  return Math.max(0, Math.min(left, maxLeft));
+}
+
+export function formatMagnifierDate(timestamp: Date): string {
+  return timestamp.toLocaleDateString(undefined, {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  });
+}
+
+export function formatMagnifierPrice(value: number): string {
+  return value.toFixed(2);
+}
+
+export function magnifierPriceFromPoint(point: PriceData): number {
+  return point.close;
+}
+
+function timeToEpochSeconds(time: Time): number | null {
+  if (typeof time === "number") return time;
+  if (typeof time === "string") {
+    const ms = Date.parse(time);
+    return Number.isFinite(ms) ? Math.floor(ms / 1000) : null;
+  }
+  if (time && typeof time === "object" && "year" in time) {
+    const ms = Date.UTC(time.year, time.month - 1, time.day);
+    return Math.floor(ms / 1000);
+  }
+  return null;
+}
+
+/** Match crosshair time to a row in filtered history (unix-second bars). */
+export function findPricePointAtTime(
+  data: PriceData[],
+  time: Time
+): PriceData | undefined {
+  const target = timeToEpochSeconds(time);
+  if (target === null) return undefined;
+  return data.find(
+    (d) => Math.floor(new Date(d.timestamp).getTime() / 1000) === target
+  );
+}
+
+/** Fallback when history lookup misses — use the series value at the crosshair. */
+export function pricePointFromCrosshair(
+  time: Time,
+  seriesPoint: unknown
+): PriceData | null {
+  const epoch = timeToEpochSeconds(time);
+  if (
+    epoch === null ||
+    seriesPoint == null ||
+    typeof seriesPoint !== "object"
+  ) {
+    return null;
+  }
+
+  const row = seriesPoint as {
+    value?: number;
+    close?: number;
+    open?: number;
+    high?: number;
+    low?: number;
+  };
+
+  const close =
+    row.value !== undefined && Number.isFinite(row.value)
+      ? row.value
+      : row.close;
+  if (close === undefined || !Number.isFinite(close)) return null;
+
+  return {
+    timestamp: new Date(epoch * 1000),
+    open: row.open ?? close,
+    high: row.high ?? close,
+    low: row.low ?? close,
+    close,
+    volume: 0,
+  };
+}
+
+export function resolveMagnifierPoint(
+  data: PriceData[],
+  time: Time,
+  mainSeries: ISeriesApi<"Area"> | ISeriesApi<"Candlestick">,
+  seriesData: Map<unknown, unknown>
+): PriceData | null {
+  return (
+    findPricePointAtTime(data, time) ??
+    pricePointFromCrosshair(time, seriesData.get(mainSeries)) ??
+    null
+  );
+}
diff --git a/lib/chart-plot-clip.ts b/lib/chart-plot-clip.ts
new file mode 100644
index 0000000..ab28f3a
--- /dev/null
+++ b/lib/chart-plot-clip.ts
@@ -0,0 +1,80 @@
+/** Hides the entire plot (Revolut void on the right at t=0). */
+export const HIDDEN_PLOT_CLIP = "inset(0 100% 0 0)";
+
+export function clearPlotClip(element: HTMLElement | null): void {
+  if (!element) return;
+  element.style.clipPath = "";
+}
+
+export function applyPlotClip(
+  element: HTMLElement | null,
+  clipPath: string
+): void {
+  if (!element) return;
+  element.style.clipPath = clipPath;
+}
+
+/** Reveal ratio 0–1 across the plot width (never use timeToCoordinate during load). */
+export function revealRatio(
+  revealedCount: number,
+  totalPoints: number
+): number {
+  if (totalPoints <= 0) return 0;
+  return Math.max(0, Math.min(1, revealedCount / totalPoints));
+}
+
+/** Smooth per-frame clip from eased progress (0–1). */
+export function computePlotClipPathFromRatio(
+  ratio: number,
+  plotEl: HTMLElement | null
+): string {
+  const clamped = Math.max(0, Math.min(1, ratio));
+  if (clamped <= 0) return HIDDEN_PLOT_CLIP;
+
+  const plotWidth = plotEl?.clientWidth ?? 0;
+
+  if (plotWidth > 0) {
+    const x = Math.max(1, Math.ceil(plotWidth * clamped));
+    return `polygon(0 0, ${x}px 0, ${x}px 100%, 0 100%)`;
+  }
+
+  return `inset(0 calc(100% - ${Math.max(1, clamped * 100)}%) 0 0)`;
+}
+
+/** Clip through the chart frontier in plot pixels (matches timeToCoordinate). */
+export function computePlotClipPathFromX(
+  frontierX: number,
+  plotEl: HTMLElement | null
+): string {
+  if (!Number.isFinite(frontierX) || frontierX <= 0) return HIDDEN_PLOT_CLIP;
+
+  const plotWidth = plotEl?.clientWidth ?? 0;
+  const x =
+    plotWidth > 0
+      ? Math.max(1, Math.min(plotWidth, Math.ceil(frontierX)))
+      : Math.max(1, Math.ceil(frontierX));
+
+  return `polygon(0 0, ${x}px 0, ${x}px 100%, 0 100%)`;
+}
+
+/**
+ * Clip the plot from the left edge through the reveal frontier.
+ * Uses ONLY linear ratio so the frontier never tracks LWC's right-anchored fit.
+ */
+export function computePlotClipPath(
+  revealedCount: number,
+  totalPoints: number,
+  plotEl: HTMLElement | null
+): string {
+  if (totalPoints <= 0 || revealedCount <= 0) return HIDDEN_PLOT_CLIP;
+
+  const ratio = revealRatio(revealedCount, totalPoints);
+  const plotWidth = plotEl?.clientWidth ?? 0;
+
+  if (plotWidth > 0) {
+    const x = Math.max(1, Math.ceil(plotWidth * ratio));
+    return `polygon(0 0, ${x}px 0, ${x}px 100%, 0 100%)`;
+  }
+
+  return `inset(0 calc(100% - ${Math.max(1, ratio * 100)}%) 0 0)`;
+}
diff --git a/lib/chart-price-data.ts b/lib/chart-price-data.ts
new file mode 100644
index 0000000..a0ef186
--- /dev/null
+++ b/lib/chart-price-data.ts
@@ -0,0 +1,65 @@
+import type { PriceData } from "@/types";
+
+function isFiniteNumber(value: unknown): value is number {
+  return typeof value === "number" && Number.isFinite(value);
+}
+
+function coerceNumber(value: unknown): number | null {
+  if (isFiniteNumber(value)) return value;
+  if (typeof value === "string" && value.trim() !== "") {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : null;
+  }
+  return null;
+}
+
+function parseTimestamp(value: unknown): Date | null {
+  if (value instanceof Date && Number.isFinite(value.getTime())) {
+    return value;
+  }
+  if (typeof value === "string" || typeof value === "number") {
+    const date = new Date(value);
+    return Number.isFinite(date.getTime()) ? date : null;
+  }
+  return null;
+}
+
+/** Coerce unknown API/prop input into a safe PriceData array for charting. */
+export function validatePriceDataSeries(input: unknown): PriceData[] {
+  if (!Array.isArray(input)) return [];
+
+  const points: PriceData[] = [];
+
+  for (const row of input) {
+    if (row == null || typeof row !== "object") continue;
+
+    const record = row as Record<string, unknown>;
+    const timestamp = parseTimestamp(record.timestamp);
+    const close = coerceNumber(record.close);
+
+    if (!timestamp || close === null || close <= 0) continue;
+
+    points.push({
+      timestamp,
+      open: coerceNumber(record.open) ?? close,
+      high: coerceNumber(record.high) ?? close,
+      low: coerceNumber(record.low) ?? close,
+      close,
+      volume: coerceNumber(record.volume) ?? 0,
+    });
+  }
+
+  points.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
+
+  const deduped: PriceData[] = [];
+  for (const point of points) {
+    const last = deduped[deduped.length - 1];
+    if (last && last.timestamp.getTime() === point.timestamp.getTime()) {
+      deduped[deduped.length - 1] = point;
+    } else {
+      deduped.push(point);
+    }
+  }
+
+  return deduped;
+}
diff --git a/lib/chart-time-range.ts b/lib/chart-time-range.ts
new file mode 100644
index 0000000..ec4e9ef
--- /dev/null
+++ b/lib/chart-time-range.ts
@@ -0,0 +1,53 @@
+import type { PriceData, TimeRange } from "@/types";
+
+/** Start of the window for a chart time range (local time). */
+export function getTimeRangeStart(
+  range: TimeRange,
+  now = new Date()
+): Date | null {
+  if (range === "Max") return null;
+
+  const startDate = new Date(now);
+
+  switch (range) {
+    case "1D":
+      startDate.setHours(now.getHours() - 24);
+      break;
+    case "1W":
+      startDate.setDate(now.getDate() - 7);
+      break;
+    case "1M":
+      startDate.setMonth(now.getMonth() - 1);
+      break;
+    case "3M":
+      startDate.setMonth(now.getMonth() - 3);
+      break;
+    case "1Y":
+      startDate.setFullYear(now.getFullYear() - 1);
+      break;
+    case "5Y":
+      startDate.setFullYear(now.getFullYear() - 5);
+      break;
+    case "YTD":
+      startDate.setMonth(0, 1);
+      startDate.setHours(0, 0, 0, 0);
+      break;
+  }
+
+  return startDate;
+}
+
+/** Slice history for local-only charts (parent does not refetch per range). */
+export function filterPriceDataByTimeRange(
+  allData: PriceData[],
+  range: TimeRange,
+  now = new Date()
+): PriceData[] {
+  if (!allData.length) return [];
+  if (range === "Max") return allData;
+
+  const startDate = getTimeRangeStart(range, now);
+  if (!startDate) return allData;
+
+  return allData.filter((d) => new Date(d.timestamp) >= startDate);
+}
diff --git a/lib/chart-trail.ts b/lib/chart-trail.ts
new file mode 100644
index 0000000..9d12c4b
--- /dev/null
+++ b/lib/chart-trail.ts
@@ -0,0 +1,396 @@
+import type {
+  IChartApi,
+  ISeriesApi,
+  LineData,
+  Time,
+  WhitespaceData,
+} from "lightweight-charts";
+
+const DEFAULT_DURATION_MS = 1200;
+const PRICE_PAD_RATIO = 0.06;
+
+export type ChartTrailOptions = {
+  durationMs?: number;
+  chart?: IChartApi;
+  onComplete?: () => void;
+  /** Called each animation frame with eased progress (0–1) and tip index. */
+  onStep?: (progress: number, tipIndex: number) => void;
+};
+
+function prefersReducedMotion(): boolean {
+  if (typeof window === "undefined") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+/** Drop invalid points and enforce ascending time order for Lightweight Charts. */
+export function sanitizeLineData(data: LineData[]): LineData[] {
+  return data
+    .filter(
+      (point) =>
+        point.time != null &&
+        point.value != null &&
+        Number.isFinite(point.value) &&
+        !Number.isNaN(Number(point.time))
+    )
+    .sort((a, b) => Number(a.time) - Number(b.time));
+}
+
+/** Full timeline with unrevealed slots as whitespace (tests / legacy). */
+export function buildTrailRevealData(
+  clean: LineData[],
+  revealedCount: number
+): Array<LineData | WhitespaceData> {
+  return clean.map((point, index) =>
+    index < revealedCount ? point : { time: point.time as Time }
+  );
+}
+
+export function computeLineValueRange(data: LineData[]): {
+  minValue: number;
+  maxValue: number;
+} {
+  let min = Infinity;
+  let max = -Infinity;
+
+  for (const point of data) {
+    if (!Number.isFinite(point.value)) continue;
+    min = Math.min(min, point.value);
+    max = Math.max(max, point.value);
+  }
+
+  if (!Number.isFinite(min) || !Number.isFinite(max)) {
+    return { minValue: 0, maxValue: 1 };
+  }
+
+  const span = max - min;
+  const pad =
+    span > 0
+      ? span * PRICE_PAD_RATIO
+      : Math.max(Math.abs(max) * PRICE_PAD_RATIO, 1);
+
+  return { minValue: min - pad, maxValue: max + pad };
+}
+
+function easeOutCubic(t: number): number {
+  return 1 - (1 - t) ** 3;
+}
+
+export function revealCountForProgress(
+  progress: number,
+  totalPoints: number
+): number {
+  if (progress >= 1) return totalPoints;
+  const eased = easeOutCubic(Math.max(0, Math.min(1, progress)));
+  const count = Math.round(eased * totalPoints);
+  return Math.max(2, Math.min(totalPoints, count));
+}
+
+function setSeriesDataSafely(
+  series: ISeriesApi<"Line"> | ISeriesApi<"Area">,
+  data: LineData[]
+): boolean {
+  if (data.length === 0) return true;
+  try {
+    series.setData(data);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function lockSeriesPriceRange(
+  series: ISeriesApi<"Line"> | ISeriesApi<"Area">,
+  range: { minValue: number; maxValue: number }
+): void {
+  try {
+    series.applyOptions({
+      autoscaleInfoProvider: () => ({
+        priceRange: range,
+      }),
+    });
+  } catch {
+    // Series may already be removed.
+  }
+}
+
+function unlockSeriesPriceRange(
+  series: ISeriesApi<"Line"> | ISeriesApi<"Area">
+): void {
+  try {
+    series.applyOptions({ autoscaleInfoProvider: undefined });
+  } catch {
+    // Series may already be removed.
+  }
+}
+
+function fitChart(chart: IChartApi | undefined): void {
+  if (!chart) return;
+  try {
+    chart.timeScale().fitContent();
+  } catch {
+    // Chart may already be removed.
+  }
+}
+
+function setVisibleWindow(chart: IChartApi, from: Time, to: Time): void {
+  try {
+    chart.timeScale().setVisibleRange({ from, to });
+  } catch {
+    // Range may not be mappable yet.
+  }
+}
+
+function pinLogicalWindow(chart: IChartApi, totalBars: number): void {
+  if (totalBars < 2) return;
+  try {
+    chart.timeScale().setVisibleLogicalRange({
+      from: 0,
+      to: totalBars - 1,
+    });
+  } catch {
+    // Logical range may not be ready yet.
+  }
+}
+
+function lockTimeScale(chart: IChartApi): void {
+  try {
+    chart.timeScale().applyOptions({
+      fixLeftEdge: true,
+      fixRightEdge: true,
+      shiftVisibleRangeOnNewBar: false,
+      rightOffset: 0,
+    });
+  } catch {
+    // Chart may already be removed.
+  }
+}
+
+function unlockTimeScale(chart: IChartApi): void {
+  try {
+    chart.timeScale().applyOptions({
+      fixLeftEdge: false,
+      fixRightEdge: false,
+      shiftVisibleRangeOnNewBar: true,
+    });
+  } catch {
+    // Chart may already be removed.
+  }
+}
+
+function lockChartInteraction(chart: IChartApi): void {
+  try {
+    chart.applyOptions({
+      handleScroll: false,
+      handleScale: false,
+    });
+  } catch {
+    // Chart may already be removed.
+  }
+}
+
+function unlockChartInteraction(chart: IChartApi): void {
+  try {
+    chart.applyOptions({
+      handleScroll: {
+        mouseWheel: true,
+        pressedMouseMove: true,
+        horzTouchDrag: true,
+        vertTouchDrag: true,
+      },
+      handleScale: {
+        axisPressedMouseMove: true,
+        mouseWheel: true,
+        pinch: true,
+      },
+    });
+  } catch {
+    // Chart may already be removed.
+  }
+}
+
+/** Load full series once and pin the full timeline — never mutate data during reveal. */
+function establishTimeWindow(
+  chart: IChartApi,
+  series: ISeriesApi<"Line"> | ISeriesApi<"Area">,
+  clean: LineData[]
+): boolean {
+  if (clean.length < 2) return false;
+  if (!setSeriesDataSafely(series, clean)) {
+    return false;
+  }
+  pinLogicalWindow(chart, clean.length);
+  setVisibleWindow(
+    chart,
+    clean[0]!.time as Time,
+    clean[clean.length - 1]!.time as Time
+  );
+  return true;
+}
+
+export type ChartTrailCancel = (snapToFull?: boolean) => void;
+
+/**
+ * Revolut-style reveal: full series + pinned x-axis from frame one, then ONLY
+ * move the visual frontier left → right (clip/void). No setData during animation.
+ */
+export function animateChartTrail(
+  series: ISeriesApi<"Line"> | ISeriesApi<"Area">,
+  data: LineData[],
+  options: ChartTrailOptions = {}
+): ChartTrailCancel {
+  const {
+    durationMs = DEFAULT_DURATION_MS,
+    chart,
+    onComplete,
+    onStep,
+  } = options;
+  const clean = sanitizeLineData(data);
+  const priceRange = computeLineValueRange(clean);
+  const fromTime = clean[0]?.time as Time | undefined;
+  const toTime = clean[clean.length - 1]?.time as Time | undefined;
+  let finished = false;
+  let cancelled = false;
+  let raf = 0;
+  let startAt = 0;
+  let timeWindowReady = false;
+  let watchdog: ReturnType<typeof setTimeout> | undefined;
+  let rangeGuard: (() => void) | null = null;
+
+  const clearWatchdog = () => {
+    if (watchdog !== undefined) {
+      clearTimeout(watchdog);
+      watchdog = undefined;
+    }
+  };
+
+  const markFinished = () => {
+    finished = true;
+    clearWatchdog();
+  };
+
+  const pinChartWindow = () => {
+    if (
+      !chart ||
+      !timeWindowReady ||
+      fromTime === undefined ||
+      toTime === undefined
+    ) {
+      return;
+    }
+    pinLogicalWindow(chart, clean.length);
+    setVisibleWindow(chart, fromTime, toTime);
+  };
+
+  const detachRangeGuard = () => {
+    if (chart && rangeGuard) {
+      chart.timeScale().unsubscribeVisibleLogicalRangeChange(rangeGuard);
+    }
+    rangeGuard = null;
+    if (chart) {
+      unlockTimeScale(chart);
+      unlockChartInteraction(chart);
+    }
+  };
+
+  const finalize = () => {
+    if (finished) return;
+    try {
+      detachRangeGuard();
+      pinChartWindow();
+      unlockSeriesPriceRange(series);
+      onStep?.(1, clean.length - 1);
+      onComplete?.();
+      markFinished();
+    } catch {
+      markFinished();
+    }
+  };
+
+  const stop = (snapToFull = true) => {
+    if (finished) return;
+    cancelled = true;
+    cancelAnimationFrame(raf);
+    clearWatchdog();
+    detachRangeGuard();
+    if (snapToFull) {
+      finalize();
+    } else {
+      markFinished();
+    }
+  };
+
+  if (clean.length <= 2 || prefersReducedMotion()) {
+    setSeriesDataSafely(series, clean);
+    fitChart(chart);
+    onStep?.(1, clean.length - 1);
+    onComplete?.();
+    markFinished();
+    return stop;
+  }
+
+  if (!chart || fromTime === undefined || toTime === undefined) {
+    setSeriesDataSafely(series, clean);
+    onStep?.(1, clean.length - 1);
+    onComplete?.();
+    markFinished();
+    return stop;
+  }
+
+  lockSeriesPriceRange(series, priceRange);
+  lockTimeScale(chart);
+  lockChartInteraction(chart);
+  timeWindowReady = establishTimeWindow(chart, series, clean);
+
+  if (!timeWindowReady) {
+    markFinished();
+    return stop;
+  }
+
+  pinChartWindow();
+  onStep?.(0, 0);
+
+  rangeGuard = () => {
+    if (!finished && !cancelled) pinChartWindow();
+  };
+  chart.timeScale().subscribeVisibleLogicalRangeChange(rangeGuard);
+
+  const revealTo = (progress: number) => {
+    if (finished || cancelled) return false;
+    const eased = easeOutCubic(progress);
+    const tipIndex = Math.max(
+      0,
+      Math.min(clean.length - 1, Math.round(eased * clean.length) - 1)
+    );
+    onStep?.(eased, tipIndex);
+    return true;
+  };
+
+  const tick = (now: number) => {
+    if (cancelled || finished) return;
+
+    if (!startAt) startAt = now;
+    const progress = Math.min(1, (now - startAt) / durationMs);
+
+    if (!revealTo(progress)) {
+      stop(false);
+      return;
+    }
+
+    if (progress < 1) {
+      raf = requestAnimationFrame(tick);
+    } else {
+      finalize();
+    }
+  };
+
+  watchdog = setTimeout(() => {
+    if (!finished && !cancelled) finalize();
+  }, durationMs + 300);
+
+  raf = requestAnimationFrame(() => {
+    pinChartWindow();
+    raf = requestAnimationFrame(tick);
+  });
+
+  return stop;
+}
diff --git a/lib/home-page-symbol-fetch.ts b/lib/home-page-symbol-fetch.ts
new file mode 100644
index 0000000..20af16e
--- /dev/null
+++ b/lib/home-page-symbol-fetch.ts
@@ -0,0 +1,108 @@
+import { MARKET_UI_COPY } from "@/lib/market-ui-copy";
+import type {
+  FinancialData,
+  ForecastData,
+  PriceData,
+  SeasonalData,
+  SymbolData,
+  TechnicalIndicators,
+  TimeRange,
+} from "@/types";
+
+type MarketJsonResponse<T> = {
+  data?: T;
+  error?: string;
+};
+
+async function fetchMarketJson<T>(url: string): Promise<T | null> {
+  try {
+    const response = await fetch(url);
+    if (!response.ok) return null;
+    const body = (await response.json()) as MarketJsonResponse<T>;
+    return body.data ?? null;
+  } catch (error) {
+    console.warn(`Market fetch failed (${url}):`, error);
+    return null;
+  }
+}
+
+export async function fetchHistoricalData(
+  symbol: string,
+  timeRange: TimeRange
+): Promise<PriceData[]> {
+  const response = await fetch(
+    `/api/market/historical/${encodeURIComponent(symbol)}?range=${encodeURIComponent(timeRange)}`
+  );
+
+  if (!response.ok) {
+    throw new Error(MARKET_UI_COPY.load.historicalData);
+  }
+
+  const body = (await response.json()) as MarketJsonResponse<PriceData[]>;
+  return body.data ?? [];
+}
+
+export async function fetchPrimarySymbolData(
+  symbol: string,
+  timeRange: TimeRange
+): Promise<{ symbolData: SymbolData; historicalData: PriceData[] }> {
+  const [symbolResponse, historicalResponse] = await Promise.all([
+    fetch(`/api/market/symbol/${encodeURIComponent(symbol)}`),
+    fetch(
+      `/api/market/historical/${encodeURIComponent(symbol)}?range=${encodeURIComponent(timeRange)}`
+    ),
+  ]);
+
+  if (!symbolResponse.ok) {
+    const body = (await symbolResponse.json().catch(() => ({}))) as {
+      error?: string;
+    };
+    throw new Error(body.error ?? MARKET_UI_COPY.load.symbolData);
+  }
+
+  if (!historicalResponse.ok) {
+    throw new Error(MARKET_UI_COPY.load.historicalData);
+  }
+
+  const [symbolResult, historicalResult] = await Promise.all([
+    symbolResponse.json() as Promise<MarketJsonResponse<SymbolData>>,
+    historicalResponse.json() as Promise<MarketJsonResponse<PriceData[]>>,
+  ]);
+
+  if (!symbolResult.data) {
+    throw new Error(MARKET_UI_COPY.load.symbolData);
+  }
+
+  return {
+    symbolData: symbolResult.data,
+    historicalData: historicalResult.data ?? [],
+  };
+}
+
+export type SecondarySymbolData = {
+  technicalIndicators: TechnicalIndicators | null;
+  forecastData: ForecastData | null;
+  seasonalData: SeasonalData | null;
+  financialData: FinancialData | null;
+};
+
+/** Best-effort secondary loads — one failure must not block the others. */
+export async function fetchSecondarySymbolData(
+  symbol: string
+): Promise<SecondarySymbolData> {
+  const encoded = encodeURIComponent(symbol);
+  const [technicalIndicators, forecastData, seasonalData, financialData] =
+    await Promise.all([
+      fetchMarketJson<TechnicalIndicators>(`/api/market/indicators/${encoded}`),
+      fetchMarketJson<ForecastData>(`/api/market/forecast/${encoded}`),
+      fetchMarketJson<SeasonalData>(`/api/market/seasonal/${encoded}`),
+      fetchMarketJson<FinancialData>(`/api/market/financials/${encoded}`),
+    ]);
+
+  return {
+    technicalIndicators,
+    forecastData,
+    seasonalData,
+    financialData,
+  };
+}
diff --git a/lib/market-semantics.ts b/lib/market-semantics.ts
index 451cfed..ca730df 100644
--- a/lib/market-semantics.ts
+++ b/lib/market-semantics.ts
@@ -1,3 +1,5 @@
+import type { LineWidth } from "lightweight-charts";
+
 /** Muted up/down/neutral styling and chart hex palette (emerald / rose). */
 
 /** Lightweight Charts hex palette (emerald / rose; matches heatmap fills). */
@@ -16,12 +18,65 @@ export type MarketChartColors = {
   series: string;
   areaTop: string;
   areaBottom: string;
+  lineWidth: LineWidth;
 };
 
-export function getMarketChartColors(isDark: boolean): MarketChartColors {
+export type MarketChartVariant = "line" | "area";
+
+export function getMarketChartColors(
+  isDark: boolean,
+  options?: {
+    signed?: boolean;
+    isPositive?: boolean;
+    variant?: MarketChartVariant;
+  }
+): MarketChartColors {
   const up = isDark ? MARKET_CHART_UP_DARK : MARKET_CHART_UP_LIGHT;
   const down = isDark ? MARKET_CHART_DOWN_DARK : MARKET_CHART_DOWN_LIGHT;
   const series = isDark ? MARKET_CHART_SERIES_DARK : MARKET_CHART_SERIES_LIGHT;
+  const variant = options?.variant ?? "area";
+
+  if (options?.signed) {
+    const isPositive = options.isPositive ?? true;
+    const signedSeries = marketChartSignedColor(isPositive, isDark);
+
+    if (variant === "line") {
+      return {
+        up,
+        down,
+        wickUp: up,
+        wickDown: down,
+        series: signedSeries,
+        areaTop: "transparent",
+        areaBottom: "transparent",
+        lineWidth: 3,
+      };
+    }
+
+    return {
+      up,
+      down,
+      wickUp: up,
+      wickDown: down,
+      series: signedSeries,
+      areaTop: isPositive
+        ? isDark
+          ? "rgba(16, 185, 129, 0.62)"
+          : "rgba(5, 150, 105, 0.55)"
+        : isDark
+          ? "rgba(244, 63, 94, 0.62)"
+          : "rgba(225, 29, 72, 0.55)",
+      areaBottom: isPositive
+        ? isDark
+          ? "rgba(16, 185, 129, 0.02)"
+          : "rgba(5, 150, 105, 0.04)"
+        : isDark
+          ? "rgba(244, 63, 94, 0.02)"
+          : "rgba(225, 29, 72, 0.04)",
+      lineWidth: 2,
+    };
+  }
+
   return {
     up,
     down,
@@ -30,9 +85,25 @@ export function getMarketChartColors(isDark: boolean): MarketChartColors {
     series,
     areaTop: series,
     areaBottom: isDark ? "rgba(52, 211, 153, 0.22)" : "rgba(5, 150, 105, 0.22)",
+    lineWidth: variant === "line" ? 3 : 2,
   };
 }
 
+/** Revolut-style diagonal glow tint behind charts (CSS linear-gradient stops). */
+export function marketChartAtmosphereGradient(
+  isPositive: boolean,
+  isDark: boolean
+): string {
+  if (isPositive) {
+    return isDark
+      ? "linear-gradient(225deg, rgba(16, 185, 129, 0.18) 0%, rgba(16, 185, 129, 0.04) 28%, transparent 55%)"
+      : "linear-gradient(225deg, rgba(5, 150, 105, 0.14) 0%, rgba(5, 150, 105, 0.03) 28%, transparent 55%)";
+  }
+  return isDark
+    ? "linear-gradient(225deg, rgba(244, 63, 94, 0.18) 0%, rgba(244, 63, 94, 0.04) 28%, transparent 55%)"
+    : "linear-gradient(225deg, rgba(225, 29, 72, 0.14) 0%, rgba(225, 29, 72, 0.03) 28%, transparent 55%)";
+}
+
 export function marketChartSignedColor(
   isPositive: boolean,
   isDark: boolean
diff --git a/lib/market-symbol.ts b/lib/market-symbol.ts
new file mode 100644
index 0000000..9247393
--- /dev/null
+++ b/lib/market-symbol.ts
@@ -0,0 +1,16 @@
+/** US-style tickers: 1–12 chars, letters/digits, optional dots or hyphens. */
+const MARKET_SYMBOL_PATTERN = /^[A-Z0-9][A-Z0-9.-]{0,11}$/;
+
+export function isValidMarketSymbol(symbol: string): boolean {
+  return MARKET_SYMBOL_PATTERN.test(symbol);
+}
+
+/** Trim, uppercase, and reject empty or invalid symbols. */
+export function normalizeMarketSymbol(
+  input: string | null | undefined
+): string | null {
+  if (input == null) return null;
+  const normalized = input.trim().toUpperCase();
+  if (!normalized || !isValidMarketSymbol(normalized)) return null;
+  return normalized;
+}
diff --git a/package.json b/package.json
index 3ffec65..1bfb2c0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "the-open-stock",
-  "version": "0.65.0",
+  "version": "0.66.0",
   "private": true,
   "scripts": {
     "dev": "bun --bun next dev",
diff --git a/services/finnhub.service.ts b/services/finnhub.service.ts
index 1e2c8b1..97d3be3 100644
--- a/services/finnhub.service.ts
+++ b/services/finnhub.service.ts
@@ -51,7 +51,7 @@ function getRangeWindow(range: TimeRange): {
       return { from: toUnixSeconds(fromDate), to, resolution: "D" };
     case "5Y":
       fromDate.setFullYear(now.getFullYear() - 5);
-      return { from: toUnixSeconds(fromDate), to, resolution: "W" };
+      return { from: toUnixSeconds(fromDate), to, resolution: "D" };
     case "YTD":
       fromDate.setMonth(0, 1);
       fromDate.setHours(0, 0, 0, 0);
@@ -195,7 +195,7 @@ export class FinnhubService {
       const points: PriceData[] = [];
       for (let i = 0; i < data.t.length; i++) {
         const close = data.c[i];
-        if (close == null) continue;
+        if (close == null || !Number.isFinite(close) || close <= 0) continue;
         points.push({
           timestamp: new Date(data.t[i] * 1000),
           open: data.o?.[i] ?? close,
diff --git a/services/yahoo-finance.service.ts b/services/yahoo-finance.service.ts
index 86c710b..05a20e2 100644
--- a/services/yahoo-finance.service.ts
+++ b/services/yahoo-finance.service.ts
@@ -1412,14 +1412,46 @@ export class YahooFinanceService {
     const close = quotes.close || [];
     const volume = quotes.volume || [];
 
-    return timestamps.map((timestamp: number, index: number) => ({
-      timestamp: new Date(timestamp * 1000),
-      open: open[index] || 0,
-      high: high[index] || 0,
-      low: low[index] || 0,
-      close: close[index] || 0,
-      volume: volume[index] || 0,
-    }));
+    const points: PriceData[] = [];
+
+    for (let index = 0; index < timestamps.length; index++) {
+      const timestamp = timestamps[index];
+      const closeValue = close[index];
+
+      // Yahoo often emits trailing null/0 placeholders for incomplete bars.
+      if (
+        typeof timestamp !== "number" ||
+        !Number.isFinite(timestamp) ||
+        typeof closeValue !== "number" ||
+        !Number.isFinite(closeValue) ||
+        closeValue <= 0
+      ) {
+        continue;
+      }
+
+      points.push({
+        timestamp: new Date(timestamp * 1000),
+        open:
+          typeof open[index] === "number" && Number.isFinite(open[index])
+            ? open[index]
+            : closeValue,
+        high:
+          typeof high[index] === "number" && Number.isFinite(high[index])
+            ? high[index]
+            : closeValue,
+        low:
+          typeof low[index] === "number" && Number.isFinite(low[index])
+            ? low[index]
+            : closeValue,
+        close: closeValue,
+        volume:
+          typeof volume[index] === "number" && Number.isFinite(volume[index])
+            ? volume[index]
+            : 0,
+      });
+    }
+
+    return points;
   }
 
   /**
diff --git a/types/index.ts b/types/index.ts
index 41bdb26..adaf309 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -53,7 +53,7 @@ export interface AuthResult {
 // ============================================================================
 
 export type TimeRange = "1D" | "1W" | "1M" | "3M" | "1Y" | "5Y" | "YTD" | "Max";
-export type ChartType = "line" | "area" | "candlestick";
+export type ChartType = "area" | "candlestick";
 
 export interface SymbolData {
   symbol: string;
diff --git a/vitest.setup.ts b/vitest.setup.ts
index 1e88ff4..1306ef6 100644
--- a/vitest.setup.ts
+++ b/vitest.setup.ts
@@ -87,6 +87,8 @@ vi.mock("lightweight-charts", () => {
     setData: vi.fn(),
     applyOptions: vi.fn(),
     setMarkers: vi.fn(),
+    data: vi.fn(() => [{ time: 1_700_000_000, value: 100 }]),
+    priceToCoordinate: vi.fn(() => 120),
     priceScale: vi.fn(() => ({
       applyOptions: vi.fn(),
     })),
@@ -107,6 +109,14 @@ vi.mock("lightweight-charts", () => {
         scrollToRealTime: vi.fn(),
         getVisibleRange: vi.fn(),
         setVisibleRange: vi.fn(),
+        setVisibleLogicalRange: vi.fn(),
+        getVisibleLogicalRange: vi.fn(() => ({ from: 0, to: 100 })),
+        timeToCoordinate: vi.fn(() => 180),
+        width: vi.fn(() => 640),
+        subscribeVisibleLogicalRangeChange: vi.fn(),
+        unsubscribeVisibleLogicalRangeChange: vi.fn(),
+        subscribeVisibleTimeRangeChange: vi.fn(),
+        unsubscribeVisibleTimeRangeChange: vi.fn(),
       })),
       priceScale: vi.fn(() => ({
         applyOptions: vi.fn(),