diff --git a/src/components/Charts/Map2D/Map2D.tsx b/src/components/Charts/Map2D/Map2D.tsx
index 23560bcb6..b9a86ac12 100644
--- a/src/components/Charts/Map2D/Map2D.tsx
+++ b/src/components/Charts/Map2D/Map2D.tsx
@@ -119,6 +119,7 @@ function Map2DChartComponent({
   // Create a memoized function to generate scatter series config
   const createScatterSeries = useCallback(
     (data: Array<{ name?: string; value: number[] }>) => ({
+      id: 'scatter-points',
       type: 'scatter',
       coordinateSystem: 'geo',
       zlevel: 3,
@@ -222,21 +223,14 @@ function Map2DChartComponent({
       nodes: point.nodes,
     }));
 
-    // Use cached scatter series index (routes don't change after init)
-    const scatterSeriesIndex = routes.length > 0 ? 1 : 0;
-
-    // Build minimal series update array
-    const seriesUpdate: (Record<string, unknown> | null)[] = [];
-    for (let i = 0; i <= scatterSeriesIndex; i++) {
-      seriesUpdate.push(i === scatterSeriesIndex ? { data: pointData } : null);
-    }
-
-    // Update chart with lazy update enabled for better performance
-    chart.setOption({ series: seriesUpdate }, { notMerge: false, lazyUpdate: true });
+    // Update the scatter series by stable ID to avoid index mismatches
+    // when stories or props toggle route series on/off.
+    chart.setOption({ series: [{ id: 'scatter-points', data: pointData }] }, { notMerge: false, lazyUpdate: true });
   }, [points, mapLoaded, resetKey, routes.length]);
 
-  // Prepare initial options - only calculated once on mount
-  // We update data via setOption in useEffect, so option should never recalculate
+  // Prepare initial options.
+  // Route and geo settings must update when related props change, while point data
+  // is still streamed via setOption in the points effect above.
   const option = useMemo(() => {
     // Don't create option until map is loaded to avoid accessing undefined map data
     if (!mapLoaded) {
@@ -326,8 +320,19 @@ function Map2DChartComponent({
       },
       series,
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mapLoaded]); // Only recalculate when map loads - after that we update via setOption
+  }, [
+    mapLoaded,
+    routes,
+    showEffect,
+    lineColor,
+    title,
+    roam,
+    createScatterSeries,
+    themeColors.primary,
+    themeColors.foreground,
+    themeColors.muted,
+    themeColors.border,
+  ]);
 
   // Handle chart events for hover panel
   const onEvents = useMemo(
diff --git a/src/components/Ethereum/NetworkIcon/NetworkIcon.tsx b/src/components/Ethereum/NetworkIcon/NetworkIcon.tsx
index 5a5e45166..a4e9fadab 100644
--- a/src/components/Ethereum/NetworkIcon/NetworkIcon.tsx
+++ b/src/components/Ethereum/NetworkIcon/NetworkIcon.tsx
@@ -65,20 +65,25 @@ export function NetworkIcon({ networkName, className }: NetworkIconProps): JSX.E
     );
   }
 
-  // Emoji icons: render in a flex container for proper centering
-  // Use the className for sizing the container, and scale emoji to fit
+  // Emoji icons: @container lets the emoji scale with the container via cqw units
   if (icon?.type === 'emoji') {
     return (
-      <span className={clsx('inline-flex items-center justify-center', className || 'size-6')} aria-hidden="true">
-        <span className="text-[1.1em] leading-none">{icon.content}</span>
+      <span
+        className={clsx('@container inline-flex items-center justify-center', className || 'size-6')}
+        aria-hidden="true"
+      >
+        <span className="text-[70cqw] leading-none">{icon.content}</span>
       </span>
     );
   }
 
   // Fallback for unknown networks
   return (
-    <span className={clsx('inline-flex items-center justify-center', className || 'size-6')} aria-hidden="true">
-      <span className="text-[1.1em] leading-none">🧪</span>
+    <span
+      className={clsx('@container inline-flex items-center justify-center', className || 'size-6')}
+      aria-hidden="true"
+    >
+      <span className="text-[70cqw] leading-none">🧪</span>
     </span>
   );
 }
diff --git a/src/components/Ethereum/NetworkSelect/NetworkSelect.tsx b/src/components/Ethereum/NetworkSelect/NetworkSelect.tsx
index 972e7855b..0498c4d71 100644
--- a/src/components/Ethereum/NetworkSelect/NetworkSelect.tsx
+++ b/src/components/Ethereum/NetworkSelect/NetworkSelect.tsx
@@ -2,10 +2,9 @@ import { type JSX, useMemo } from 'react';
 import { useNetwork, type Network } from '@/hooks/useNetwork';
 import { SelectMenu, type SelectMenuOption } from '@/components/Forms/SelectMenu';
 import { NetworkIcon } from '@/components/Ethereum/NetworkIcon';
+import { NETWORK_ORDER } from '@/utils/networks';
 import type { NetworkSelectProps } from './NetworkSelect.types';
 
-const NETWORK_ORDER = ['mainnet', 'holesky', 'sepolia', 'hoodi'];
-
 /**
  * Sorts networks by the predefined order, then alphabetically for any remaining networks.
  */
diff --git a/src/index.css b/src/index.css
index fec23d48a..b994c404a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -209,6 +209,22 @@
   --animate-fade-in-delay: fade-in 0.8s ease-out 0.2s forwards;
   --animate-fade-in-delay-2: fade-in 0.8s ease-out 0.4s forwards;
   --animate-fade-in-delay-3: fade-in 0.8s ease-out 0.6s forwards;
+  --animate-fade-in-delay-4: fade-in 0.8s ease-out 0.8s forwards;
+  --animate-fade-in-delay-5: fade-in 0.8s ease-out 1s forwards;
+  --animate-fade-in-delay-6: fade-in 0.8s ease-out 1.2s forwards;
+  --animate-scroll-travel: scroll-travel 2s ease-in-out infinite;
+
+  @keyframes scroll-travel {
+    0%,
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    50% {
+      opacity: 0.3;
+      transform: translateY(8px);
+    }
+  }
 
   @keyframes shimmer {
     0% {
@@ -340,7 +356,10 @@
   .animate-fade-in,
   .animate-fade-in-delay,
   .animate-fade-in-delay-2,
-  .animate-fade-in-delay-3 {
+  .animate-fade-in-delay-3,
+  .animate-fade-in-delay-4,
+  .animate-fade-in-delay-5,
+  .animate-fade-in-delay-6 {
     opacity: 0;
   }
 
@@ -354,3 +373,28 @@
     display: none; /* Chrome, Safari, Opera */
   }
 }
+
+/* Digit flip animations for scoreboard display.
+ * Placed outside @theme inline so they're always emitted
+ * (keyframes inside @theme are only output when referenced by a token). */
+@keyframes digit-out {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+}
+
+@keyframes digit-in {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
diff --git a/src/pages/home/IndexPage.tsx b/src/pages/home/IndexPage.tsx
index 5c5144a8e..5a0d4f67e 100644
--- a/src/pages/home/IndexPage.tsx
+++ b/src/pages/home/IndexPage.tsx
@@ -1,74 +1,10 @@
 import { type JSX } from 'react';
-import { Link } from '@tanstack/react-router';
-import { Card } from '@/components/Layout/Card';
-import { BeakerIcon, UserGroupIcon } from '@heroicons/react/24/outline';
-import { AlgorithmicArt } from './components/AlgorithmicArt';
+import { HeroSection } from './components/HeroSection';
 
 export function IndexPage(): JSX.Element {
   return (
-    <div className="relative h-[calc(100dvh-65px)] overflow-hidden lg:h-screen">
-      {/* Full-page Network Visualization - fills viewport */}
-      <div className="absolute inset-0 z-0">
-        <AlgorithmicArt height={typeof window !== 'undefined' ? window.innerHeight : 800} seed={12345} speed={1} />
-      </div>
-
-      {/* Content Layer - positioned on top of visualization */}
-      <div className="absolute inset-0 z-20 overflow-y-auto">
-        <div className="flex min-h-full flex-col px-4 pt-20 sm:pt-40">
-          {/* Hero Section - centered and spacious */}
-          <div className="mb-16 flex flex-col items-center text-center sm:mb-48">
-            {/* Main Title - matching sidebar style */}
-            <h1 className="mb-4 animate-fade-in font-sans text-5xl font-bold tracking-tight text-foreground drop-shadow-2xl sm:mb-6 sm:text-7xl md:text-8xl lg:text-9xl">
-              The Lab
-            </h1>
-
-            {/* Subtitle with subtle animation */}
-            <p className="max-w-xl animate-fade-in-delay font-sans text-base font-light tracking-wide text-foreground/80 drop-shadow-lg sm:text-lg md:text-sm">
-              by ethPandaOps
-            </p>
-
-            {/* Optional tagline */}
-            <p className="mt-3 animate-fade-in-delay-2 font-sans text-xs font-light tracking-widest text-muted/60 uppercase sm:mt-4 sm:text-sm">
-              Explore · Analyze · Discover
-            </p>
-          </div>
-
-          {/* Featured Cards - cleaner spacing */}
-          <div className="mx-auto grid w-full max-w-5xl animate-fade-in-delay-3 gap-6 pb-16 sm:grid-cols-2 sm:gap-8 sm:pb-32">
-            {/* Ethereum Live */}
-            <Link to="/ethereum/live" className="group block">
-              <Card
-                isInteractive
-                rounded
-                className="h-full bg-surface/95 backdrop-blur-md transition-all duration-300 hover:bg-surface"
-              >
-                <div className="flex flex-col gap-4">
-                  <BeakerIcon className="size-10 text-primary transition-transform duration-300 group-hover:scale-110" />
-                  <h3 className="text-xl font-semibold tracking-tight text-foreground">Ethereum Live</h3>
-                  <p className="text-base/relaxed text-muted">
-                    Visualize beacon chain slots and block proposals in real-time
-                  </p>
-                </div>
-              </Card>
-            </Link>
-
-            {/* Xatu Contributors */}
-            <Link to="/xatu/contributors" className="group block">
-              <Card
-                isInteractive
-                rounded
-                className="h-full bg-surface/95 backdrop-blur-md transition-all duration-300 hover:bg-surface"
-              >
-                <div className="flex flex-col gap-4">
-                  <UserGroupIcon className="size-10 text-primary transition-transform duration-300 group-hover:scale-110" />
-                  <h3 className="text-xl font-semibold tracking-tight text-foreground">Xatu Contributoors</h3>
-                  <p className="text-base/relaxed text-muted">Explore the contributors to the Xatu project</p>
-                </div>
-              </Card>
-            </Link>
-          </div>
-        </div>
-      </div>
+    <div className="h-dvh overflow-hidden bg-background">
+      <HeroSection />
     </div>
   );
 }
diff --git a/src/pages/home/components/AlgorithmicArt/AlgorithmicArt.tsx b/src/pages/home/components/AlgorithmicArt/AlgorithmicArt.tsx
deleted file mode 100644
index 902a0daf3..000000000
--- a/src/pages/home/components/AlgorithmicArt/AlgorithmicArt.tsx
+++ /dev/null
@@ -1,368 +0,0 @@
-/**
- * AlgorithmicArt - Network Constellation generative art component
- *
- * Creates an animated visualization of network nodes with glowing connections
- * and data packets traveling along edges, representing Ethereum network topology.
- *
- * Uses native Canvas 2D API for minimal memory footprint.
- *
- * @example
- * ```tsx
- * <AlgorithmicArt
- *   height={600}
- *   seed={12345}
- *   showOverlay
- *   overlayTitle="Welcome to The Lab"
- *   overlaySubtitle="Ethereum data visualizations"
- * />
- * ```
- */
-
-import { useEffect, useRef, type JSX } from 'react';
-import { useThemeColors } from '@/hooks/useThemeColors';
-import clsx from 'clsx';
-import type { AlgorithmicArtProps, AlgorithmicArtColors } from './AlgorithmicArt.types';
-
-/** Simple seeded random number generator */
-function seededRandom(seed: number): () => number {
-  let s = seed;
-  return () => {
-    s = (s * 1103515245 + 12345) & 0x7fffffff;
-    return s / 0x7fffffff;
-  };
-}
-
-/** Parse hex color to RGB */
-function parseHexColor(hex: string): { r: number; g: number; b: number } {
-  const clean = hex.replace('#', '');
-  return {
-    r: parseInt(clean.substring(0, 2), 16),
-    g: parseInt(clean.substring(2, 4), 16),
-    b: parseInt(clean.substring(4, 6), 16),
-  };
-}
-
-/** Node in the network */
-interface NetworkNode {
-  x: number;
-  y: number;
-  vx: number;
-  vy: number;
-  radius: number;
-  pulsePhase: number;
-  connections: number[]; // indices of connected nodes
-}
-
-/** Traveling particle */
-interface Particle {
-  fromIdx: number;
-  toIdx: number;
-  progress: number;
-  speed: number;
-  size: number;
-}
-
-/**
- * AlgorithmicArt component - Pure Canvas 2D implementation
- */
-export function AlgorithmicArt({
-  height = 600,
-  width = '100%',
-  seed = 12345,
-  colors,
-  className,
-  speed = 1,
-  showOverlay = false,
-  overlayTitle,
-  overlaySubtitle,
-}: AlgorithmicArtProps): JSX.Element {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const themeColors = useThemeColors();
-  const artColors = colors || themeColors;
-
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    const container = containerRef.current;
-    if (!canvas || !container) return;
-
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return;
-
-    // Animation state
-    let animationId: number;
-    let isRunning = true;
-
-    // Initialize with seeded random
-    const random = seededRandom(seed);
-
-    // Configuration
-    const connectionDistance = 250;
-    const maxConnections = 15;
-    const maxParticles = 30;
-
-    // State arrays - pre-allocated
-    let nodes: NetworkNode[] = [];
-    let particles: Particle[] = [];
-    let frameCounter = 0;
-
-    // Cached colors
-    let bgColor = { r: 0, g: 0, b: 0 };
-    let accentColor = { r: 0, g: 0, b: 0 };
-    let primaryColor = { r: 0, g: 0, b: 0 };
-    let mutedColor = { r: 0, g: 0, b: 0 };
-    let lastColorKey = '';
-
-    /** Update cached colors if theme changed */
-    const updateColors = (colors: AlgorithmicArtColors): void => {
-      const colorKey = colors.background + colors.accent + colors.primary + colors.muted;
-      if (colorKey === lastColorKey) return;
-      lastColorKey = colorKey;
-
-      bgColor = parseHexColor(colors.background);
-      accentColor = parseHexColor(colors.accent);
-      primaryColor = parseHexColor(colors.primary);
-      mutedColor = parseHexColor(colors.muted);
-    };
-
-    /** Initialize nodes and connections */
-    const initializeNodes = (canvasWidth: number, canvasHeight: number): void => {
-      nodes = [];
-      particles = [];
-
-      // Reset random seed for reproducibility
-      const initRandom = seededRandom(seed);
-
-      // Create nodes based on canvas area
-      const nodeCount = Math.floor((canvasWidth * canvasHeight) / 15000);
-      for (let i = 0; i < nodeCount; i++) {
-        nodes.push({
-          x: initRandom() * canvasWidth,
-          y: initRandom() * canvasHeight,
-          vx: (initRandom() - 0.5) * 0.15,
-          vy: (initRandom() - 0.5) * 0.15,
-          radius: 3 + initRandom() * 4,
-          pulsePhase: initRandom() * Math.PI * 2,
-          connections: [],
-        });
-      }
-
-      // Establish connections - each node connects to nearest neighbors
-      for (let i = 0; i < nodes.length; i++) {
-        const node = nodes[i];
-        const distances: { idx: number; dist: number }[] = [];
-
-        for (let j = 0; j < nodes.length; j++) {
-          if (i === j) continue;
-          const other = nodes[j];
-          const dx = node.x - other.x;
-          const dy = node.y - other.y;
-          const dist = Math.sqrt(dx * dx + dy * dy);
-          if (dist < connectionDistance) {
-            distances.push({ idx: j, dist });
-          }
-        }
-
-        distances.sort((a, b) => a.dist - b.dist);
-        node.connections = distances.slice(0, maxConnections).map(d => d.idx);
-      }
-    };
-
-    /** Resize canvas to container */
-    const resizeCanvas = (): void => {
-      const rect = container.getBoundingClientRect();
-      const dpr = window.devicePixelRatio || 1;
-      canvas.width = rect.width * dpr;
-      canvas.height = height * dpr;
-      canvas.style.width = `${rect.width}px`;
-      canvas.style.height = `${height}px`;
-      ctx.scale(dpr, dpr);
-      initializeNodes(rect.width, height);
-    };
-
-    /** Draw a circle with glow effect */
-    const drawGlowCircle = (
-      x: number,
-      y: number,
-      radius: number,
-      r: number,
-      g: number,
-      b: number,
-      alpha: number,
-      pulse: number
-    ): void => {
-      // Outer glow
-      ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${alpha * 0.2 * pulse})`;
-      ctx.beginPath();
-      ctx.arc(x, y, radius * 1.5, 0, Math.PI * 2);
-      ctx.fill();
-
-      // Inner glow
-      ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${alpha * 0.5 * pulse})`;
-      ctx.beginPath();
-      ctx.arc(x, y, radius, 0, Math.PI * 2);
-      ctx.fill();
-
-      // Core
-      ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${alpha * pulse})`;
-      ctx.beginPath();
-      ctx.arc(x, y, radius * 0.5, 0, Math.PI * 2);
-      ctx.fill();
-    };
-
-    /** Main render loop */
-    const render = (): void => {
-      if (!isRunning) return;
-
-      const canvasWidth = canvas.width / (window.devicePixelRatio || 1);
-      const canvasHeight = canvas.height / (window.devicePixelRatio || 1);
-
-      // Update colors
-      updateColors(artColors);
-
-      // Clear with background
-      ctx.fillStyle = `rgb(${bgColor.r}, ${bgColor.g}, ${bgColor.b})`;
-      ctx.fillRect(0, 0, canvasWidth, canvasHeight);
-
-      frameCounter += speed;
-
-      // Update nodes
-      for (const node of nodes) {
-        node.x += node.vx;
-        node.y += node.vy;
-
-        // Bounce off edges
-        if (node.x < 0 || node.x > canvasWidth) node.vx *= -1;
-        if (node.y < 0 || node.y > canvasHeight) node.vy *= -1;
-
-        // Keep within bounds
-        node.x = Math.max(0, Math.min(canvasWidth, node.x));
-        node.y = Math.max(0, Math.min(canvasHeight, node.y));
-
-        node.pulsePhase += 0.01;
-      }
-
-      // Draw connections
-      ctx.lineWidth = 1;
-      for (const node of nodes) {
-        for (const connIdx of node.connections) {
-          const other = nodes[connIdx];
-          const dx = node.x - other.x;
-          const dy = node.y - other.y;
-          const distance = Math.sqrt(dx * dx + dy * dy);
-          const alpha = Math.max(0, Math.min(1, 1 - distance / connectionDistance)) * 0.12;
-
-          ctx.strokeStyle = `rgba(${accentColor.r}, ${accentColor.g}, ${accentColor.b}, ${alpha})`;
-          ctx.beginPath();
-          ctx.moveTo(node.x, node.y);
-          ctx.lineTo(other.x, other.y);
-          ctx.stroke();
-        }
-      }
-
-      // Spawn particles
-      if (frameCounter % 24 === 0 && nodes.length > 0 && particles.length < maxParticles) {
-        const fromIdx = Math.floor(random() * nodes.length);
-        const fromNode = nodes[fromIdx];
-        if (fromNode.connections.length > 0) {
-          const toIdx = fromNode.connections[Math.floor(random() * fromNode.connections.length)];
-          particles.push({
-            fromIdx,
-            toIdx,
-            progress: 0,
-            speed: 0.005 + random() * 0.01,
-            size: 2 + random() * 3,
-          });
-        }
-      }
-
-      // Update and draw particles
-      for (let i = particles.length - 1; i >= 0; i--) {
-        const particle = particles[i];
-        particle.progress += particle.speed;
-
-        if (particle.progress >= 1) {
-          particles.splice(i, 1);
-        } else {
-          const from = nodes[particle.fromIdx];
-          const to = nodes[particle.toIdx];
-          const x = from.x + (to.x - from.x) * particle.progress;
-          const y = from.y + (to.y - from.y) * particle.progress;
-
-          // Glow
-          ctx.fillStyle = `rgba(${primaryColor.r}, ${primaryColor.g}, ${primaryColor.b}, 0.4)`;
-          ctx.beginPath();
-          ctx.arc(x, y, particle.size * 1.5, 0, Math.PI * 2);
-          ctx.fill();
-
-          // Core
-          ctx.fillStyle = `rgba(${primaryColor.r}, ${primaryColor.g}, ${primaryColor.b}, 0.8)`;
-          ctx.beginPath();
-          ctx.arc(x, y, particle.size, 0, Math.PI * 2);
-          ctx.fill();
-        }
-      }
-
-      // Draw nodes
-      for (let i = 0; i < nodes.length; i++) {
-        const node = nodes[i];
-        const pulse = Math.sin(node.pulsePhase) * 0.3 + 0.7;
-
-        // Cycle through colors
-        let color: { r: number; g: number; b: number };
-        if (i % 3 === 0) {
-          color = primaryColor;
-        } else if (i % 3 === 1) {
-          color = accentColor;
-        } else {
-          color = mutedColor;
-        }
-
-        drawGlowCircle(node.x, node.y, node.radius, color.r, color.g, color.b, 0.6, pulse);
-      }
-
-      animationId = requestAnimationFrame(render);
-    };
-
-    // Initialize
-    resizeCanvas();
-    updateColors(artColors);
-    render();
-
-    // Handle resize
-    const resizeObserver = new ResizeObserver(() => {
-      resizeCanvas();
-    });
-    resizeObserver.observe(container);
-
-    // Cleanup
-    return () => {
-      isRunning = false;
-      cancelAnimationFrame(animationId);
-      resizeObserver.disconnect();
-    };
-  }, [height, seed, speed, artColors]);
-
-  return (
-    <div className={clsx('relative overflow-hidden', className)} style={{ width, height }}>
-      <div ref={containerRef} className="absolute inset-0">
-        <canvas ref={canvasRef} className="block size-full" />
-      </div>
-
-      {showOverlay && (overlayTitle || overlaySubtitle) && (
-        <div className="absolute inset-0 z-10 flex items-center justify-center">
-          <div className="text-center">
-            {overlayTitle && (
-              <h1 className="font-sans text-4xl font-bold text-foreground drop-shadow-lg sm:text-5xl lg:text-6xl">
-                {overlayTitle}
-              </h1>
-            )}
-            {overlaySubtitle && (
-              <p className="mt-4 font-sans text-lg text-muted drop-shadow-lg sm:text-xl">{overlaySubtitle}</p>
-            )}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/src/pages/home/components/AlgorithmicArt/AlgorithmicArt.types.ts b/src/pages/home/components/AlgorithmicArt/AlgorithmicArt.types.ts
deleted file mode 100644
index b6362248e..000000000
--- a/src/pages/home/components/AlgorithmicArt/AlgorithmicArt.types.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * AlgorithmicArt Component Types
- *
- * Defines types for the blockchain-inspired algorithmic art component
- */
-
-/**
- * Theme colors for the algorithmic art
- */
-export interface AlgorithmicArtColors {
-  /** Primary color for main elements */
-  primary: string;
-  /** Background color */
-  background: string;
-  /** Accent color for highlights */
-  accent: string;
-  /** Foreground/text color */
-  foreground: string;
-  /** Muted color for secondary elements */
-  muted: string;
-}
-
-/**
- * Props for the AlgorithmicArt component
- */
-export interface AlgorithmicArtProps {
-  /** Height of the canvas in pixels (default: 600) */
-  height?: number;
-  /** Width of the canvas (default: '100%' - responsive) */
-  width?: string | number;
-  /** Seed for reproducible randomness */
-  seed?: number;
-  /** Theme colors to use in the visualization */
-  colors?: AlgorithmicArtColors;
-  /** Additional CSS class names */
-  className?: string;
-  /** Animation speed multiplier (default: 1) */
-  speed?: number;
-  /** Whether to show overlay text */
-  showOverlay?: boolean;
-  /** Overlay title text */
-  overlayTitle?: string;
-  /** Overlay subtitle text */
-  overlaySubtitle?: string;
-}
diff --git a/src/pages/home/components/AlgorithmicArt/index.ts b/src/pages/home/components/AlgorithmicArt/index.ts
deleted file mode 100644
index 9602148c0..000000000
--- a/src/pages/home/components/AlgorithmicArt/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { AlgorithmicArt } from './AlgorithmicArt';
-export type { AlgorithmicArtProps, AlgorithmicArtColors } from './AlgorithmicArt.types';
diff --git a/src/pages/home/components/HeroSection/HeroSection.tsx b/src/pages/home/components/HeroSection/HeroSection.tsx
new file mode 100644
index 000000000..483e6a0ad
--- /dev/null
+++ b/src/pages/home/components/HeroSection/HeroSection.tsx
@@ -0,0 +1,184 @@
+import { type JSX, useEffect, useMemo, useRef, useState } from 'react';
+import { Link } from '@tanstack/react-router';
+import { NetworkIcon } from '@/components/Ethereum/NetworkIcon';
+import { type Network } from '@/hooks/useConfig/useConfig.types';
+import { useNetwork } from '@/hooks/useNetwork';
+import { SECONDS_PER_SLOT, SLOTS_PER_EPOCH } from '@/utils/beacon';
+import { getActiveFork } from '@/utils/forks';
+import { NETWORK_ORDER } from '@/utils/networks';
+import { formatSlot } from '@/utils/number';
+
+/** Compute the current slot for a network from its genesis time. */
+function getCurrentSlot(genesisTime: number, now: number): number {
+  const elapsed = now - genesisTime;
+  if (elapsed < 0) return 0;
+  return Math.floor(elapsed / SECONDS_PER_SLOT);
+}
+
+/** Single scoreboard digit cell — flips vertically when the value changes. */
+function FlipDigit({ digit }: { digit: string }): JSX.Element {
+  const prevRef = useRef(digit);
+  const [outgoing, setOutgoing] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (digit !== prevRef.current) {
+      setOutgoing(prevRef.current);
+      prevRef.current = digit;
+      const timer = setTimeout(() => setOutgoing(null), 350);
+      return () => clearTimeout(timer);
+    }
+  }, [digit]);
+
+  return (
+    <span className="relative inline-flex h-5 w-3.5 items-center justify-center overflow-hidden rounded-[2px] bg-foreground/[0.05]">
+      {outgoing !== null && (
+        <span
+          className="absolute inset-0 flex items-center justify-center"
+          style={{ animation: 'digit-out 350ms ease-in forwards' }}
+        >
+          {outgoing}
+        </span>
+      )}
+      <span
+        className="flex items-center justify-center"
+        style={outgoing !== null ? { animation: 'digit-in 350ms ease-out both' } : undefined}
+      >
+        {digit}
+      </span>
+    </span>
+  );
+}
+
+/** Scoreboard-style slot display — each digit in its own cell with flip animation. */
+function SlotDisplay({ slot }: { slot: number }): JSX.Element {
+  const digits = formatSlot(slot).split('');
+
+  return (
+    <span className="inline-flex gap-0.5 text-[11px]/4 text-muted/70 tabular-nums transition-colors duration-200 group-hover:text-muted">
+      {digits.map((d, i) => (
+        <FlipDigit key={`p${digits.length - 1 - i}`} digit={d} />
+      ))}
+    </span>
+  );
+}
+
+/** Instrument-style network readout panel. */
+function NetworkCard({
+  network,
+  now,
+  onSelectNetwork,
+}: {
+  network: Network;
+  now: number;
+  onSelectNetwork: (network: Network) => void;
+}): JSX.Element {
+  const slot = getCurrentSlot(network.genesis_time, now);
+  const epoch = Math.floor(slot / SLOTS_PER_EPOCH);
+  const activeFork = getActiveFork(network, epoch);
+  const forkLabel = activeFork?.combinedName ?? activeFork?.displayName ?? 'Unknown';
+
+  return (
+    <Link
+      to="/ethereum/live"
+      search={{ network: network.name === 'mainnet' ? undefined : network.name }}
+      onClick={() => onSelectNetwork(network)}
+      className="group flex w-44 cursor-pointer flex-col items-center gap-2.5 rounded-sm border border-border/30 bg-surface px-5 py-5 text-center transition-all duration-200 hover:border-primary/25 focus:outline-hidden focus-visible:border-primary/40 focus-visible:ring-2 focus-visible:ring-primary/70 focus-visible:ring-offset-2 focus-visible:ring-offset-background sm:w-48"
+    >
+      <NetworkIcon networkName={network.name} className="size-12" />
+      <div className="flex items-center gap-1.5">
+        <span className="size-1.5 rounded-full bg-success transition-shadow duration-200 group-hover:shadow-[0_0_6px_var(--color-success)]" />
+        <span className="text-sm/4 font-semibold tracking-tight text-foreground">{network.display_name}</span>
+      </div>
+      <span className="text-[10px]/3 font-medium tracking-wide text-muted uppercase">{forkLabel}</span>
+      <div className="flex flex-col items-center gap-1">
+        <span className="text-[8px]/3 font-medium tracking-[0.2em] text-muted/40 uppercase">Slot</span>
+        <SlotDisplay slot={slot} />
+      </div>
+    </Link>
+  );
+}
+
+/** Hook that returns the current unix timestamp, updating every second. */
+function useNow(): number {
+  const [now, setNow] = useState(() => Math.floor(Date.now() / 1000));
+
+  useEffect(() => {
+    const id = setInterval(() => setNow(Math.floor(Date.now() / 1000)), 1000);
+    return () => clearInterval(id);
+  }, []);
+
+  return now;
+}
+
+/** Hero section — observatory entrance with instrument readout panels. */
+export function HeroSection(): JSX.Element {
+  const { networks, setCurrentNetwork } = useNetwork();
+  const now = useNow();
+
+  const { staticNets, devnets } = useMemo(() => {
+    const s = networks
+      .filter(n => NETWORK_ORDER.includes(n.name))
+      .sort((a, b) => NETWORK_ORDER.indexOf(a.name) - NETWORK_ORDER.indexOf(b.name));
+    const d = networks.filter(n => !NETWORK_ORDER.includes(n.name));
+    return { staticNets: s, devnets: d };
+  }, [networks]);
+
+  return (
+    <div className="relative flex min-h-dvh flex-col justify-center overflow-hidden">
+      {/* Atmosphere: single centered glow behind title */}
+      <div className="pointer-events-none absolute inset-0" aria-hidden="true">
+        <div className="absolute top-1/2 left-1/2 h-[60%] w-[50%] -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary/[0.04] blur-[120px]" />
+      </div>
+
+      {/* Measurement surface: dot grid */}
+      <div
+        className="pointer-events-none absolute inset-0 opacity-[0.03]"
+        aria-hidden="true"
+        style={{
+          backgroundImage: 'radial-gradient(circle, var(--color-foreground) 0.75px, transparent 0.75px)',
+          backgroundSize: '32px 32px',
+        }}
+      />
+
+      {/* Content */}
+      <div className="relative z-10 px-6 py-24 text-center sm:px-12 lg:px-20">
+        <h1 className="animate-fade-in">
+          <span className="block text-lg font-light tracking-wide text-foreground/60 sm:text-xl lg:text-2xl">The</span>
+          <span className="mt-1 block text-[clamp(4rem,12vw,11rem)] leading-[0.85] font-black tracking-tighter text-foreground">
+            Lab
+          </span>
+        </h1>
+
+        <div className="mt-8 flex animate-fade-in-delay items-center justify-center gap-2.5">
+          <img src="/images/lab.png" alt="" className="size-5 opacity-60" />
+          <span className="text-[11px]/3 font-medium tracking-[0.2em] text-muted uppercase">by ethPandaOps</span>
+        </div>
+
+        {/* Network instrument panels */}
+        {(staticNets.length > 0 || devnets.length > 0) && (
+          <div className="mx-auto mt-12 flex max-w-4xl animate-fade-in-delay-2 flex-col items-center gap-3">
+            {staticNets.length > 0 && (
+              <div className="flex flex-wrap justify-center gap-3">
+                {staticNets.map(network => (
+                  <NetworkCard key={network.name} network={network} now={now} onSelectNetwork={setCurrentNetwork} />
+                ))}
+              </div>
+            )}
+            {devnets.length > 0 && (
+              <>
+                <span className="mt-1 text-[10px]/3 font-medium tracking-[0.15em] text-muted/40 uppercase">
+                  Devnets
+                </span>
+                <div className="flex flex-wrap justify-center gap-3">
+                  {devnets.map(network => (
+                    <NetworkCard key={network.name} network={network} now={now} onSelectNetwork={setCurrentNetwork} />
+                  ))}
+                </div>
+              </>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/home/components/HeroSection/index.ts b/src/pages/home/components/HeroSection/index.ts
new file mode 100644
index 000000000..ddcde4942
--- /dev/null
+++ b/src/pages/home/components/HeroSection/index.ts
@@ -0,0 +1 @@
+export { HeroSection } from './HeroSection';
diff --git a/src/utils/networks.ts b/src/utils/networks.ts
new file mode 100644
index 000000000..2cba05162
--- /dev/null
+++ b/src/utils/networks.ts
@@ -0,0 +1,2 @@
+/** Canonical ordering of well-known persistent networks (mainnet + testnets). */
+export const NETWORK_ORDER: readonly string[] = ['mainnet', 'holesky', 'sepolia', 'hoodi'];