diff --git a/api/main.py b/api/main.py
index 15d1eeb8ce..01826ead78 100644
--- a/api/main.py
+++ b/api/main.py
@@ -27,6 +27,7 @@
     health_router,
     libraries_router,
     plots_router,
+    proxy_router,
     seo_router,
     specs_router,
     stats_router,
@@ -128,6 +129,7 @@ async def add_cache_headers(request: Request, call_next):
 app.include_router(plots_router)
 app.include_router(download_router)
 app.include_router(seo_router)
+app.include_router(proxy_router)
 
 
 if __name__ == "__main__":
diff --git a/api/routers/__init__.py b/api/routers/__init__.py
index aa35c53263..e30046154a 100644
--- a/api/routers/__init__.py
+++ b/api/routers/__init__.py
@@ -4,6 +4,7 @@
 from api.routers.health import router as health_router
 from api.routers.libraries import router as libraries_router
 from api.routers.plots import router as plots_router
+from api.routers.proxy import router as proxy_router
 from api.routers.seo import router as seo_router
 from api.routers.specs import router as specs_router
 from api.routers.stats import router as stats_router
@@ -14,6 +15,7 @@
     "health_router",
     "libraries_router",
     "plots_router",
+    "proxy_router",
     "seo_router",
     "specs_router",
     "stats_router",
diff --git a/api/routers/proxy.py b/api/routers/proxy.py
new file mode 100644
index 0000000000..806d761034
--- /dev/null
+++ b/api/routers/proxy.py
@@ -0,0 +1,151 @@
+"""HTML proxy endpoint for interactive plots with size reporting."""
+
+from urllib.parse import urlparse
+
+import httpx
+from fastapi import APIRouter, HTTPException
+from fastapi.responses import HTMLResponse
+
+
+router = APIRouter(tags=["proxy"])
+
+# Script injected to report content size to parent window
+# Uses specific origin (pyplots.ai) for postMessage security
+SIZE_REPORTER_SCRIPT = """
+<script>
+(function() {
+  function reportSize() {
+    try {
+      // Find the main content element (try common patterns for different libraries)
+      var content = document.querySelector(
+        '.bk-root, .vega-embed, .plotly, .chart-container, #container, .lp-plot, svg, canvas'
+      ) || document.body.firstElementChild || document.body;
+
+      // Get actual rendered size
+      var rect = content.getBoundingClientRect();
+      var width = Math.max(rect.width, content.scrollWidth || 0, document.body.scrollWidth || 0);
+      var height = Math.max(rect.height, content.scrollHeight || 0, document.body.scrollHeight || 0);
+
+      // Add padding to account for action buttons, toolbars, and other UI elements
+      var padding = 40;
+      width += padding;
+      height += padding;
+
+      // Send to parent with specific origin for security
+      if (width > 0 && height > 0 && window.parent !== window) {
+        window.parent.postMessage({
+          type: 'pyplots-size',
+          width: Math.ceil(width),
+          height: Math.ceil(height)
+        }, 'https://pyplots.ai');
+      }
+    } catch (e) {
+      // Silently fail if postMessage is blocked
+    }
+  }
+
+  // Report after load and after delays (for async rendering libraries)
+  if (document.readyState === 'complete') {
+    setTimeout(reportSize, 100);
+    setTimeout(reportSize, 500);
+    setTimeout(reportSize, 1000);
+  } else {
+    window.addEventListener('load', function() {
+      setTimeout(reportSize, 100);
+      setTimeout(reportSize, 500);
+      setTimeout(reportSize, 1000);
+    });
+  }
+})();
+</script>
+"""
+
+# Allowed GCS bucket for security
+ALLOWED_HOST = "storage.googleapis.com"
+ALLOWED_BUCKET = "pyplots-images"
+
+
+def build_safe_gcs_url(url: str) -> str | None:
+    """
+    Validate URL and return a reconstructed safe GCS URL.
+
+    This prevents SSRF by constructing the URL from hardcoded values
+    instead of passing user input directly.
+
+    Args:
+        url: User-provided URL to validate
+
+    Returns:
+        Reconstructed safe URL or None if validation fails
+    """
+    try:
+        parsed = urlparse(url)
+        # Must be HTTPS
+        if parsed.scheme != "https":
+            return None
+        # Must be exact host (no subdomains)
+        if parsed.netloc != ALLOWED_HOST:
+            return None
+        # Path must start with bucket name
+        path_parts = parsed.path.strip("/").split("/")
+        if len(path_parts) < 2:
+            return None
+        if path_parts[0] != ALLOWED_BUCKET:
+            return None
+        # Check for path traversal attempts
+        if ".." in parsed.path:
+            return None
+        # Validate path contains only safe characters (alphanumeric, hyphens, underscores, dots, slashes)
+        safe_path = parsed.path.strip("/")
+        if not all(c.isalnum() or c in "-_./+" for c in safe_path):
+            return None
+        # Reconstruct URL from hardcoded values to prevent SSRF
+        # This breaks the taint flow by not using the original URL
+        return f"https://{ALLOWED_HOST}/{safe_path}"
+    except Exception:
+        return None
+
+
+@router.get("/proxy/html", response_class=HTMLResponse)
+async def proxy_html(url: str):
+    """
+    Proxy an HTML file and inject size reporting script.
+
+    This endpoint fetches HTML from GCS, injects a script that reports
+    the content's actual dimensions via postMessage, and returns the
+    modified HTML. This allows the frontend to dynamically scale the
+    iframe based on actual content size.
+
+    Args:
+        url: The GCS URL to fetch (must be from allowed bucket)
+
+    Returns:
+        Modified HTML with size reporting script injected
+    """
+    # Security: Validate and reconstruct URL to prevent SSRF
+    safe_url = build_safe_gcs_url(url)
+    if safe_url is None:
+        raise HTTPException(status_code=400, detail=f"Only URLs from {ALLOWED_HOST}/{ALLOWED_BUCKET} are allowed")
+
+    # Fetch the HTML with shorter timeout
+    async with httpx.AsyncClient(timeout=10.0) as client:
+        try:
+            response = await client.get(safe_url)
+            response.raise_for_status()
+        except httpx.HTTPStatusError as e:
+            raise HTTPException(status_code=e.response.status_code, detail="Failed to fetch HTML") from e
+        except httpx.RequestError as e:
+            raise HTTPException(status_code=502, detail="Failed to connect to storage") from e
+
+    html_content = response.text
+
+    # Inject the size reporter script before </body>
+    if "</body>" in html_content:
+        html_content = html_content.replace("</body>", f"{SIZE_REPORTER_SCRIPT}</body>")
+    elif "</html>" in html_content:
+        html_content = html_content.replace("</html>", f"{SIZE_REPORTER_SCRIPT}</html>")
+    else:
+        # Fallback: append to end
+        html_content += SIZE_REPORTER_SCRIPT
+
+    return HTMLResponse(content=html_content)
diff --git a/api/routers/seo.py b/api/routers/seo.py
index 7784cd1df7..e8d865990a 100644
--- a/api/routers/seo.py
+++ b/api/routers/seo.py
@@ -8,7 +8,6 @@
 
 from api.cache import cache_key, get_cache, set_cache
 from api.dependencies import optional_db
-from core.constants import LIBRARIES_METADATA
 from core.database import SpecRepository
 
 
@@ -20,7 +19,7 @@ async def get_sitemap(db: AsyncSession | None = Depends(optional_db)):
     """
     Generate dynamic XML sitemap for SEO.
 
-    Includes all specs with implementations and all libraries.
+    Includes root, catalog page, and all specs with implementations.
     """
     key = cache_key("sitemap_xml")
     cached = get_cache(key)
@@ -32,6 +31,7 @@ async def get_sitemap(db: AsyncSession | None = Depends(optional_db)):
         '<?xml version="1.0" encoding="UTF-8"?>',
         '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">',
         "  <url><loc>https://pyplots.ai/</loc></url>",
+        "  <url><loc>https://pyplots.ai/catalog</loc></url>",
     ]
 
     # Add spec URLs (only specs with implementations)
@@ -41,12 +41,7 @@ async def get_sitemap(db: AsyncSession | None = Depends(optional_db)):
         for spec in specs:
             if spec.impls:  # Only include specs with implementations
                 spec_id = html.escape(spec.id)
-                xml_lines.append(f"  <url><loc>https://pyplots.ai/?spec={spec_id}</loc></url>")
-
-    # Add library URLs (static list)
-    for lib in LIBRARIES_METADATA:
-        lib_id = html.escape(lib["id"])
-        xml_lines.append(f"  <url><loc>https://pyplots.ai/?lib={lib_id}</loc></url>")
+                xml_lines.append(f"  <url><loc>https://pyplots.ai/{spec_id}</loc></url>")
 
     xml_lines.append("</urlset>")
     xml = "\n".join(xml_lines)
diff --git a/api/routers/specs.py b/api/routers/specs.py
index b013eeef63..edb20162bb 100644
--- a/api/routers/specs.py
+++ b/api/routers/specs.py
@@ -81,6 +81,11 @@ async def get_spec(spec_id: str, db: AsyncSession = Depends(require_db)):
             generated_by=impl.generated_by,
             python_version=impl.python_version,
             library_version=impl.library_version,
+            review_strengths=impl.review_strengths or [],
+            review_weaknesses=impl.review_weaknesses or [],
+            review_image_description=impl.review_image_description,
+            review_criteria_checklist=impl.review_criteria_checklist,
+            review_verdict=impl.review_verdict,
         )
         for impl in spec.impls
     ]
@@ -95,6 +100,8 @@ async def get_spec(spec_id: str, db: AsyncSession = Depends(require_db)):
         tags=spec.tags,
         issue=spec.issue,
         suggested=spec.suggested,
+        created=spec.created.isoformat() if spec.created else None,
+        updated=spec.updated.isoformat() if spec.updated else None,
         implementations=impls,
     )
     set_cache(key, result)
diff --git a/api/schemas.py b/api/schemas.py
index 4dac2e63c2..236c42a92d 100644
--- a/api/schemas.py
+++ b/api/schemas.py
@@ -23,6 +23,12 @@ class ImplementationResponse(BaseModel):
     generated_by: Optional[str] = None
     python_version: Optional[str] = None
     library_version: Optional[str] = None
+    # Review fields
+    review_strengths: list[str] = []
+    review_weaknesses: list[str] = []
+    review_image_description: Optional[str] = None
+    review_criteria_checklist: Optional[dict] = None
+    review_verdict: Optional[str] = None
 
 
 class SpecDetailResponse(BaseModel):
@@ -37,6 +43,8 @@ class SpecDetailResponse(BaseModel):
     tags: Optional[dict] = None
     issue: Optional[int] = None
     suggested: Optional[str] = None
+    created: Optional[str] = None
+    updated: Optional[str] = None
     implementations: list[ImplementationResponse] = []
 
 
diff --git a/app/package.json b/app/package.json
index be2ea33756..16e0290a73 100644
--- a/app/package.json
+++ b/app/package.json
@@ -22,6 +22,8 @@
     "@mui/material": "^7.3.6",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
+    "react-helmet-async": "^2.0.5",
+    "react-router-dom": "^7.11.0",
     "react-syntax-highlighter": "^16.1.0"
   },
   "devDependencies": {
diff --git a/app/src/components/FilterBar.tsx b/app/src/components/FilterBar.tsx
index 550a64709e..2c52555952 100644
--- a/app/src/components/FilterBar.tsx
+++ b/app/src/components/FilterBar.tsx
@@ -1,4 +1,5 @@
 import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import { Link } from 'react-router-dom';
 import Box from '@mui/material/Box';
 import Chip from '@mui/material/Chip';
 import Menu from '@mui/material/Menu';
@@ -7,11 +8,13 @@ import ListItemText from '@mui/material/ListItemText';
 import Typography from '@mui/material/Typography';
 import InputBase from '@mui/material/InputBase';
 import Divider from '@mui/material/Divider';
+import Tooltip from '@mui/material/Tooltip';
 import CloseIcon from '@mui/icons-material/Close';
 import SearchIcon from '@mui/icons-material/Search';
 import AddIcon from '@mui/icons-material/Add';
 import ViewAgendaIcon from '@mui/icons-material/ViewAgenda';
 import ViewModuleIcon from '@mui/icons-material/ViewModule';
+import ListIcon from '@mui/icons-material/List';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useTheme } from '@mui/material/styles';
 
@@ -56,8 +59,10 @@ export function FilterBar({
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
 
-  // Scroll percentage - estimate based on total plots, not just loaded ones
+  // Scroll percentage and sticky detection
   const [scrollPercent, setScrollPercent] = useState(0);
+  const [isSticky, setIsSticky] = useState(false);
+  const filterBarRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const calculatePercent = () => {
@@ -73,6 +78,10 @@ export function FilterBar({
 
       const percent = Math.round((scrollY / estimatedTotalHeight) * 100);
       setScrollPercent(Math.min(100, Math.max(0, percent || 0)));
+
+      // Detect if bar is in sticky mode (scrolled past threshold)
+      // The bar becomes sticky when scrollY > ~200px (header height)
+      setIsSticky(scrollY > 200);
     };
     calculatePercent();
     window.addEventListener('scroll', calculatePercent);
@@ -288,16 +297,27 @@ export function FilterBar({
 
   return (
     <Box
+      ref={filterBarRef}
       sx={{
         mb: 4,
-        px: 2,
-        py: 1.5,
         position: 'sticky',
         top: 0,
         zIndex: 100,
-        bgcolor: '#fafafa',
-        backdropFilter: 'blur(8px)',
-        backgroundColor: 'rgba(250, 250, 250, 0.9)',
+        py: 1,
+        transition: 'background-color 0.2s, border-color 0.2s, margin 0.2s, padding 0.2s',
+        // Only apply full-width styling when sticky
+        ...(isSticky
+          ? {
+              mx: { xs: -2, sm: -4, md: -8, lg: -12 },
+              px: { xs: 2, sm: 4, md: 8, lg: 12 },
+              bgcolor: '#f3f4f6',
+              borderBottom: '1px solid #e5e7eb',
+            }
+          : {
+              px: 2,
+              bgcolor: 'transparent',
+              borderBottom: '1px solid transparent',
+            }),
       }}
     >
       {/* Filter chips row */}
@@ -326,28 +346,57 @@ export function FilterBar({
             {scrollPercent}% · {currentTotal}
           </Typography>
         )}
-        {/* Grid size toggle - absolute right (desktop only) */}
+        {/* Catalog icon + Grid size toggle - absolute right (desktop only) */}
         {!isMobile && (
           <Box
-            onClick={() => onImageSizeChange(imageSize === 'normal' ? 'compact' : 'normal')}
             sx={{
               position: 'absolute',
               right: 0,
               display: 'flex',
               alignItems: 'center',
-              justifyContent: 'center',
-              width: 32,
-              height: 32,
-              cursor: 'pointer',
-              color: '#9ca3af',
-              '&:hover': { color: '#3776AB' },
+              gap: 0.5,
             }}
           >
-            {imageSize === 'normal' ? (
-              <ViewAgendaIcon sx={{ fontSize: '1.25rem' }} />
-            ) : (
-              <ViewModuleIcon sx={{ fontSize: '1.25rem' }} />
-            )}
+            {/* Catalog icon */}
+            <Tooltip title="catalog">
+              <Box
+                component={Link}
+                to="/catalog"
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  width: 32,
+                  height: 32,
+                  color: '#9ca3af',
+                  '&:hover': { color: '#3776AB' },
+                }}
+              >
+                <ListIcon sx={{ fontSize: '1.25rem' }} />
+              </Box>
+            </Tooltip>
+            {/* Grid size toggle */}
+            <Tooltip title={imageSize === 'normal' ? 'compact view' : 'normal view'}>
+              <Box
+                onClick={() => onImageSizeChange(imageSize === 'normal' ? 'compact' : 'normal')}
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  width: 32,
+                  height: 32,
+                  cursor: 'pointer',
+                  color: '#9ca3af',
+                  '&:hover': { color: '#3776AB' },
+                }}
+              >
+                {imageSize === 'normal' ? (
+                  <ViewAgendaIcon sx={{ fontSize: '1.25rem' }} />
+                ) : (
+                  <ViewModuleIcon sx={{ fontSize: '1.25rem' }} />
+                )}
+              </Box>
+            </Tooltip>
           </Box>
         )}
         {/* Active filter chips */}
@@ -426,17 +475,22 @@ export function FilterBar({
             },
           }}
         >
-          <SearchIcon
-            className="search-icon"
-            sx={{
-              color: '#9ca3af',
-              fontSize: isSearchExpanded ? '1rem' : '1.25rem',
-              transition: 'all 0.2s ease',
-              flexShrink: 0,
-            }}
-          />
+          <Tooltip title={isSearchExpanded ? '' : 'search'}>
+            <SearchIcon
+              className="search-icon"
+              sx={{
+                color: '#9ca3af',
+                fontSize: isSearchExpanded ? '1rem' : '1.25rem',
+                transition: 'all 0.2s ease',
+                flexShrink: 0,
+              }}
+            />
+          </Tooltip>
           <InputBase
             inputRef={inputRef}
+            id="filter-search"
+            name="filter-search"
+            aria-label={selectedCategory ? `Search ${FILTER_LABELS[selectedCategory]}` : 'Search filters'}
             placeholder={selectedCategory ? FILTER_LABELS[selectedCategory] : ''}
             value={searchQuery}
             onChange={(e) => {
@@ -512,24 +566,47 @@ export function FilterBar({
           ) : (
             <Box />
           )}
-          <Box
-            onClick={() => onImageSizeChange(imageSize === 'normal' ? 'compact' : 'normal')}
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              width: 32,
-              height: 32,
-              cursor: 'pointer',
-              color: '#9ca3af',
-              '&:hover': { color: '#3776AB' },
-            }}
-          >
-            {imageSize === 'normal' ? (
-              <ViewAgendaIcon sx={{ fontSize: '1.25rem' }} />
-            ) : (
-              <ViewModuleIcon sx={{ fontSize: '1.25rem' }} />
-            )}
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+            {/* Catalog icon */}
+            <Tooltip title="catalog">
+              <Box
+                component={Link}
+                to="/catalog"
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  width: 32,
+                  height: 32,
+                  color: '#9ca3af',
+                  '&:hover': { color: '#3776AB' },
+                }}
+              >
+                <ListIcon sx={{ fontSize: '1.25rem' }} />
+              </Box>
+            </Tooltip>
+            {/* Grid size toggle */}
+            <Tooltip title={imageSize === 'normal' ? 'compact view' : 'normal view'}>
+              <Box
+                onClick={() => onImageSizeChange(imageSize === 'normal' ? 'compact' : 'normal')}
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  width: 32,
+                  height: 32,
+                  cursor: 'pointer',
+                  color: '#9ca3af',
+                  '&:hover': { color: '#3776AB' },
+                }}
+              >
+                {imageSize === 'normal' ? (
+                  <ViewAgendaIcon sx={{ fontSize: '1.25rem' }} />
+                ) : (
+                  <ViewModuleIcon sx={{ fontSize: '1.25rem' }} />
+                )}
+              </Box>
+            </Tooltip>
           </Box>
         </Box>
       )}
diff --git a/app/src/components/FullscreenModal.tsx b/app/src/components/FullscreenModal.tsx
deleted file mode 100644
index 58840e3d2a..0000000000
--- a/app/src/components/FullscreenModal.tsx
+++ /dev/null
@@ -1,372 +0,0 @@
-import { useState, useMemo, useCallback, useEffect } from 'react';
-import Box from '@mui/material/Box';
-import Modal from '@mui/material/Modal';
-import IconButton from '@mui/material/IconButton';
-import Typography from '@mui/material/Typography';
-import CircularProgress from '@mui/material/CircularProgress';
-import CloseIcon from '@mui/icons-material/Close';
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import DownloadIcon from '@mui/icons-material/Download';
-import CodeIcon from '@mui/icons-material/Code';
-import ImageIcon from '@mui/icons-material/Image';
-import CheckIcon from '@mui/icons-material/Check';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
-import type { PlotImage } from '../types';
-import { API_URL } from '../constants';
-import { useCopyCode, useCodeFetch } from '../hooks';
-
-interface FullscreenModalProps {
-  image: PlotImage | null;
-  selectedSpec: string;
-  onClose: () => void;
-  onTrackEvent?: (name: string, props?: Record<string, string | undefined>) => void;
-}
-
-export function FullscreenModal({ image, selectedSpec, onClose, onTrackEvent }: FullscreenModalProps) {
-  const [showCode, setShowCode] = useState(false);
-  const [blinkCodeButton, setBlinkCodeButton] = useState(false);
-  const [downloaded, setDownloaded] = useState(false);
-  const [fetchedCode, setFetchedCode] = useState<string | null>(null);
-  const [codeLoading, setCodeLoading] = useState(false);
-
-  const { fetchCode } = useCodeFetch();
-  const { copied, copyToClipboard, reset: resetCopied } = useCopyCode({
-    onCopy: () => {
-      const specId = selectedSpec || image?.spec_id;
-      onTrackEvent?.('copy_code', { spec: specId, library: image?.library, method: 'button' });
-    },
-  });
-
-  // Code to display - prefer image.code if available, otherwise fetched
-  const displayCode = image?.code ?? fetchedCode;
-
-  // Fetch code when modal opens (if not already present in image)
-  useEffect(() => {
-    if (image && !image.code && image.spec_id) {
-      setCodeLoading(true);
-      fetchCode(image.spec_id, image.library).then((code) => {
-        setFetchedCode(code);
-        setCodeLoading(false);
-      });
-    } else {
-      setFetchedCode(null);
-    }
-  }, [image, fetchCode]);
-
-  // Reset state when modal opens
-  const handleOpen = useCallback(() => {
-    setShowCode(false);
-    setBlinkCodeButton(true);
-    resetCopied();
-    setDownloaded(false);
-    setTimeout(() => setBlinkCodeButton(false), 1000);
-  }, [resetCopied]);
-
-  // Memoize syntax-highlighted code to avoid expensive re-renders
-  const highlightedCode = useMemo(() => {
-    if (!displayCode) return null;
-    return (
-      <SyntaxHighlighter
-        language="python"
-        style={oneLight}
-        customStyle={{
-          margin: 0,
-          fontSize: '0.85rem',
-          fontFamily: '"MonoLisa", "MonoLisa Fallback", monospace',
-          background: 'transparent',
-        }}
-      >
-        {displayCode}
-      </SyntaxHighlighter>
-    );
-  }, [displayCode]);
-
-  // Copy code to clipboard
-  const handleCopyCode = useCallback(() => {
-    if (displayCode) {
-      copyToClipboard(displayCode);
-    }
-  }, [displayCode, copyToClipboard]);
-
-  // Track native copy events (Ctrl+C, Cmd+C)
-  const handleNativeCopy = useCallback(() => {
-    const specId = selectedSpec || image?.spec_id;
-    onTrackEvent?.('copy_code', { spec: specId, library: image?.library, method: 'keyboard' });
-  }, [onTrackEvent, selectedSpec, image?.library, image?.spec_id]);
-
-  // Track contextmenu (right-click) - user may copy from context menu
-  const handleContextMenu = useCallback(() => {
-    const specId = selectedSpec || image?.spec_id;
-    onTrackEvent?.('copy_code', { spec: specId, library: image?.library, method: 'keyboard' });
-  }, [onTrackEvent, selectedSpec, image?.library, image?.spec_id]);
-
-  // Download image via backend proxy
-  const downloadImage = useCallback(() => {
-    const specId = selectedSpec || image?.spec_id;
-    if (image?.library && specId) {
-      const link = document.createElement('a');
-      link.href = `${API_URL}/download/${specId}/${image.library}`;
-      link.download = `${specId}-${image.library}.png`;
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      setDownloaded(true);
-      onTrackEvent?.('download_image', { spec: specId, library: image.library });
-      setTimeout(() => setDownloaded(false), 2000);
-    }
-  }, [image?.library, image?.spec_id, selectedSpec, onTrackEvent]);
-
-  const handleClose = useCallback(() => {
-    setShowCode(false);
-    onClose();
-  }, [onClose]);
-
-  return (
-    <Modal
-      open={!!image}
-      onClose={handleClose}
-      aria-labelledby="plot-modal-title"
-      disableRestoreFocus
-      onTransitionEnter={handleOpen}
-      sx={{
-        display: 'flex',
-        alignItems: { xs: 'flex-start', sm: 'center' },
-        justifyContent: 'center',
-        pt: { xs: 5, sm: 0 },
-        '@media (orientation: landscape)': {
-          alignItems: 'center',
-          pt: 0,
-        },
-      }}
-    >
-      <Box
-        sx={{
-          position: 'relative',
-          maxWidth: '90vw',
-          maxHeight: { xs: '92vh', sm: '90vh' },
-          outline: 'none',
-        }}
-        role="dialog"
-      >
-        {/* Modal Header - Close only */}
-        <Box sx={{ position: 'absolute', top: { xs: -36, sm: -40 }, right: 0, zIndex: 10 }}>
-          <IconButton
-            onClick={handleClose}
-            aria-label="Close"
-            sx={{
-              color: '#fff',
-              '&:hover': { bgcolor: 'rgba(255,255,255,0.1)' },
-            }}
-          >
-            <CloseIcon />
-          </IconButton>
-        </Box>
-
-        {/* Modal Content */}
-        {image && (
-          <Box sx={{ position: 'relative' }}>
-            {/* Code View - only rendered when needed */}
-            {showCode && (
-              <Box
-                sx={{
-                  position: 'relative',
-                  bgcolor: '#fafafa',
-                  borderRadius: '8px',
-                  width: 'min(90vw, calc(85vh * 16 / 9))',
-                  height: 'min(85vh, calc(90vw * 9 / 16))',
-                  overflow: 'hidden',
-                  boxShadow: 'none',
-                  '@media (orientation: portrait)': {
-                    height: '85vh',
-                  },
-                }}
-              >
-                {/* Button bar */}
-                <Box
-                  sx={{
-                    position: 'absolute',
-                    top: 6,
-                    right: 16,
-                    display: 'flex',
-                    gap: 0.5,
-                    zIndex: 1,
-                  }}
-                >
-                  <Box
-                    onClick={() => {
-                      setShowCode(false);
-                      onTrackEvent?.('view_image', { spec: selectedSpec || image?.spec_id, library: image?.library });
-                    }}
-                    sx={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      gap: 0.5,
-                      px: 1,
-                      py: 0.5,
-                      borderRadius: 1,
-                      cursor: 'pointer',
-                      color: '#6b7280',
-                      bgcolor: 'rgba(255,255,255,0.9)',
-                      fontSize: '0.85rem',
-                      fontFamily: '"MonoLisa", "MonoLisa Fallback", monospace',
-                      '&:hover': { color: '#3776AB', bgcolor: '#fff' },
-                    }}
-                  >
-                    <ImageIcon sx={{ fontSize: 20 }} />
-                    plot
-                  </Box>
-                  <Box
-                    onClick={handleCopyCode}
-                    sx={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      px: 1,
-                      py: 0.5,
-                      borderRadius: 1,
-                      cursor: 'pointer',
-                      color: copied ? '#22c55e' : '#6b7280',
-                      bgcolor: 'rgba(255,255,255,0.9)',
-                      transition: 'color 0.2s ease',
-                      '&:hover': { color: copied ? '#22c55e' : '#1f2937', bgcolor: '#fff' },
-                    }}
-                  >
-                    {copied ? <CheckIcon sx={{ fontSize: 20 }} /> : <ContentCopyIcon sx={{ fontSize: 20 }} />}
-                  </Box>
-                </Box>
-                <Box
-                  onCopy={handleNativeCopy}
-                  onContextMenu={handleContextMenu}
-                  sx={{
-                    height: '100%',
-                    overflow: 'auto',
-                    p: 3,
-                  }}
-                >
-                  {highlightedCode}
-                </Box>
-              </Box>
-            )}
-            {/* PNG image - always rendered, hidden when code is shown */}
-            <Box
-              sx={{
-                position: 'relative',
-                display: showCode ? 'none' : 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                bgcolor: '#fff',
-                borderRadius: '8px',
-                width: 'min(90vw, calc(85vh * 16 / 9))',
-                height: 'min(85vh, calc(90vw * 9 / 16))',
-                overflow: 'hidden',
-                boxShadow: 'none',
-              }}
-            >
-              {/* Button bar */}
-              <Box
-                sx={{
-                  position: 'absolute',
-                  top: 6,
-                  right: 16,
-                  display: 'flex',
-                  gap: 0.5,
-                  zIndex: 1,
-                }}
-              >
-                {(displayCode || codeLoading) && (
-                  <Box
-                    onClick={() => {
-                      if (displayCode) {
-                        setShowCode(true);
-                        onTrackEvent?.('view_code', { spec: selectedSpec || image?.spec_id, library: image?.library });
-                      }
-                    }}
-                    sx={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      gap: 0.5,
-                      px: 1,
-                      py: 0.5,
-                      borderRadius: 1,
-                      cursor: displayCode ? 'pointer' : 'default',
-                      color: '#6b7280',
-                      bgcolor: 'rgba(255,255,255,0.9)',
-                      fontSize: '0.85rem',
-                      fontFamily: '"MonoLisa", "MonoLisa Fallback", monospace',
-                      '&:hover': displayCode ? { color: '#3776AB', bgcolor: '#fff' } : {},
-                      ...(blinkCodeButton && {
-                        animation: 'bounce 0.6s ease-in-out',
-                        '@keyframes bounce': {
-                          '0%, 100%': { transform: 'translateY(0)' },
-                          '25%': { transform: 'translateY(-4px)' },
-                          '50%': { transform: 'translateY(0)' },
-                          '75%': { transform: 'translateY(-2px)' },
-                        },
-                      }),
-                    }}
-                  >
-                    {codeLoading ? (
-                      <CircularProgress size={16} sx={{ color: '#6b7280' }} />
-                    ) : (
-                      <CodeIcon sx={{ fontSize: 20 }} />
-                    )}
-                    code
-                  </Box>
-                )}
-                <Box
-                  onClick={downloadImage}
-                  sx={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    px: 1,
-                    py: 0.5,
-                    borderRadius: 1,
-                    cursor: 'pointer',
-                    color: downloaded ? '#22c55e' : '#6b7280',
-                    bgcolor: 'rgba(255,255,255,0.9)',
-                    transition: 'color 0.2s ease',
-                    '&:hover': { color: downloaded ? '#22c55e' : '#1f2937', bgcolor: '#fff' },
-                    ...(blinkCodeButton && {
-                      animation: 'bounce 0.6s ease-in-out',
-                      '@keyframes bounce': {
-                        '0%, 100%': { transform: 'translateY(0)' },
-                        '25%': { transform: 'translateY(-4px)' },
-                        '50%': { transform: 'translateY(0)' },
-                        '75%': { transform: 'translateY(-2px)' },
-                      },
-                    }),
-                  }}
-                >
-                  {downloaded ? <CheckIcon sx={{ fontSize: 20 }} /> : <DownloadIcon sx={{ fontSize: 20 }} />}
-                </Box>
-              </Box>
-              <img
-                src={image.url}
-                alt={`${selectedSpec} - ${image.library}`}
-                style={{
-                  maxWidth: '100%',
-                  maxHeight: '100%',
-                  objectFit: 'contain',
-                  borderRadius: '8px',
-                }}
-              />
-            </Box>
-            <Typography
-              id="plot-modal-title"
-              sx={{
-                textAlign: 'center',
-                mt: 2,
-                color: '#fff',
-                fontWeight: 600,
-                fontFamily: '"MonoLisa", "MonoLisa Fallback", monospace',
-                fontSize: '1rem',
-              }}
-            >
-              {image.library}
-            </Typography>
-          </Box>
-        )}
-      </Box>
-    </Modal>
-  );
-}
diff --git a/app/src/components/Header.tsx b/app/src/components/Header.tsx
index 9947c50e87..f3ca3197ff 100644
--- a/app/src/components/Header.tsx
+++ b/app/src/components/Header.tsx
@@ -187,6 +187,7 @@ export const Header = memo(function Header({ stats, onRandom }: HeaderProps) {
         )}
         {isXs ? '. copy. create.' : '. grab the code. make it yours.'}
       </Typography>
+
     </Box>
   );
 });
diff --git a/app/src/components/ImagesGrid.tsx b/app/src/components/ImagesGrid.tsx
index 3e87e1bc26..9c14d82c43 100644
--- a/app/src/components/ImagesGrid.tsx
+++ b/app/src/components/ImagesGrid.tsx
@@ -115,14 +115,14 @@ export function ImagesGrid({
             No images found for this spec.
           </Alert>
         ) : (
-          <Grid
-            container
-            spacing={3}
-            sx={{
-              opacity: isTransitioning ? 0 : 1,
-              transition: 'opacity 0.15s ease-in-out',
-            }}
-          >
+            <Grid
+              container
+              spacing={3}
+              sx={{
+                opacity: isTransitioning ? 0 : 1,
+                transition: 'opacity 0.15s ease-in-out',
+              }}
+            >
             {images.map((image, index) => {
               const lib = libraryMap.get(image.library);
               const spec = specMap.get(image.spec_id || '');
@@ -148,7 +148,7 @@ export function ImagesGrid({
                 </Grid>
               );
             })}
-          </Grid>
+            </Grid>
         )}
         {/* Load more trigger (invisible) */}
         {hasMore && (
diff --git a/app/src/components/Layout.tsx b/app/src/components/Layout.tsx
new file mode 100644
index 0000000000..70c10ea33a
--- /dev/null
+++ b/app/src/components/Layout.tsx
@@ -0,0 +1,136 @@
+import { useState, useEffect, createContext, useContext, useRef, useCallback, type ReactNode } from 'react';
+import { Outlet } from 'react-router-dom';
+import Box from '@mui/material/Box';
+import Container from '@mui/material/Container';
+
+import { API_URL } from '../constants';
+import type { LibraryInfo, SpecInfo, PlotImage, ActiveFilters, FilterCounts } from '../types';
+
+interface AppData {
+  specsData: SpecInfo[];
+  librariesData: LibraryInfo[];
+  stats: { specs: number; plots: number; libraries: number } | null;
+}
+
+// Persistent home state that survives navigation
+interface HomeState {
+  allImages: PlotImage[];
+  displayedImages: PlotImage[];
+  activeFilters: ActiveFilters;
+  filterCounts: FilterCounts | null;
+  globalCounts: FilterCounts | null;
+  orCounts: Record<string, number>[];
+  hasMore: boolean;
+  scrollY: number;
+  initialized: boolean;
+}
+
+interface HomeStateContext {
+  homeState: HomeState;
+  homeStateRef: React.MutableRefObject<HomeState>;
+  setHomeState: React.Dispatch<React.SetStateAction<HomeState>>;
+  saveScrollPosition: () => void;
+}
+
+const initialHomeState: HomeState = {
+  allImages: [],
+  displayedImages: [],
+  activeFilters: [],
+  filterCounts: null,
+  globalCounts: null,
+  orCounts: [],
+  hasMore: false,
+  scrollY: 0,
+  initialized: false,
+};
+
+const AppDataContext = createContext<AppData | null>(null);
+const HomeStateContext = createContext<HomeStateContext | null>(null);
+
+export function useAppData() {
+  const context = useContext(AppDataContext);
+  if (!context) {
+    throw new Error('useAppData must be used within AppDataProvider');
+  }
+  return context;
+}
+
+export function useHomeState() {
+  const context = useContext(HomeStateContext);
+  if (!context) {
+    throw new Error('useHomeState must be used within AppDataProvider');
+  }
+  return context;
+}
+
+// Global provider that wraps the entire router (persists across all pages including InteractivePage)
+export function AppDataProvider({ children }: { children: ReactNode }) {
+  const [specsData, setSpecsData] = useState<SpecInfo[]>([]);
+  const [librariesData, setLibrariesData] = useState<LibraryInfo[]>([]);
+  const [stats, setStats] = useState<{ specs: number; plots: number; libraries: number } | null>(null);
+
+  // Persistent home state (both ref for sync access and state for reactivity)
+  const [homeState, setHomeState] = useState<HomeState>(initialHomeState);
+  const homeStateRef = useRef<HomeState>(initialHomeState);
+
+  // Keep ref in sync with state
+  useEffect(() => {
+    homeStateRef.current = homeState;
+  }, [homeState]);
+
+  // Save scroll position synchronously to ref (called before navigation)
+  const saveScrollPosition = useCallback(() => {
+    homeStateRef.current = { ...homeStateRef.current, scrollY: window.scrollY };
+    setHomeState((prev) => ({ ...prev, scrollY: window.scrollY }));
+  }, []);
+
+  // Load shared data on mount
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const [specsRes, libsRes, statsRes] = await Promise.all([
+          fetch(`${API_URL}/specs`),
+          fetch(`${API_URL}/libraries`),
+          fetch(`${API_URL}/stats`),
+        ]);
+
+        if (specsRes.ok) {
+          const data = await specsRes.json();
+          setSpecsData(Array.isArray(data) ? data : data.specs || []);
+        }
+
+        if (libsRes.ok) {
+          const data = await libsRes.json();
+          setLibrariesData(data.libraries || []);
+        }
+
+        if (statsRes.ok) {
+          const data = await statsRes.json();
+          setStats(data);
+        }
+      } catch (err) {
+        console.error('Error loading initial data:', err);
+      }
+    };
+    fetchData();
+  }, []);
+
+  return (
+    <AppDataContext.Provider value={{ specsData, librariesData, stats }}>
+      <HomeStateContext.Provider value={{ homeState, homeStateRef, setHomeState, saveScrollPosition }}>
+        {children}
+      </HomeStateContext.Provider>
+    </AppDataContext.Provider>
+  );
+}
+
+// Layout component for pages with standard layout (HomePage, SpecPage, CatalogPage)
+export function Layout() {
+  return (
+    <Box sx={{ minHeight: '100vh', bgcolor: '#fafafa', py: 5, position: 'relative' }}>
+      <Container maxWidth={false} sx={{ px: { xs: 2, sm: 4, md: 8, lg: 12 } }}>
+        <Outlet />
+      </Container>
+    </Box>
+  );
+}
diff --git a/app/src/components/LibraryPills.tsx b/app/src/components/LibraryPills.tsx
new file mode 100644
index 0000000000..9e8d8a02ba
--- /dev/null
+++ b/app/src/components/LibraryPills.tsx
@@ -0,0 +1,181 @@
+import { memo, useMemo } from 'react';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+
+// Library abbreviations (same as filter display)
+const LIBRARY_ABBREV: Record<string, string> = {
+  matplotlib: 'mpl',
+  seaborn: 'sns',
+  plotly: 'ply',
+  bokeh: 'bok',
+  altair: 'alt',
+  plotnine: 'p9',
+  pygal: 'pyg',
+  highcharts: 'hc',
+  letsplot: 'lp',
+};
+
+interface Implementation {
+  library_id: string;
+  library_name: string;
+  quality_score: number | null;
+}
+
+interface LibraryPillsProps {
+  implementations: Implementation[];
+  selectedLibrary: string;
+  onSelect: (libraryId: string) => void;
+}
+
+export const LibraryPills = memo(function LibraryPills({
+  implementations,
+  selectedLibrary,
+  onSelect,
+}: LibraryPillsProps) {
+  // Sort implementations alphabetically
+  const sortedImpls = useMemo(() => {
+    return [...implementations].sort((a, b) => a.library_id.localeCompare(b.library_id));
+  }, [implementations]);
+
+  // Get current index
+  const currentIndex = useMemo(() => {
+    const idx = sortedImpls.findIndex((impl) => impl.library_id === selectedLibrary);
+    return idx >= 0 ? idx : 0;
+  }, [sortedImpls, selectedLibrary]);
+
+  // Get visible items (prev, current, next) with wrap-around
+  const visibleItems = useMemo(() => {
+    const len = sortedImpls.length;
+    if (len === 0) return [];
+    if (len === 1) return [{ impl: sortedImpls[0], position: 'center' as const }];
+    if (len === 2) {
+      return [
+        { impl: sortedImpls[(currentIndex - 1 + len) % len], position: 'left' as const },
+        { impl: sortedImpls[currentIndex], position: 'center' as const },
+      ];
+    }
+
+    const prevIdx = (currentIndex - 1 + len) % len;
+    const nextIdx = (currentIndex + 1) % len;
+
+    return [
+      { impl: sortedImpls[prevIdx], position: 'left' as const },
+      { impl: sortedImpls[currentIndex], position: 'center' as const },
+      { impl: sortedImpls[nextIdx], position: 'right' as const },
+    ];
+  }, [sortedImpls, currentIndex]);
+
+  const handlePrev = () => {
+    const len = sortedImpls.length;
+    const newIndex = (currentIndex - 1 + len) % len;
+    onSelect(sortedImpls[newIndex].library_id);
+  };
+
+  const handleNext = () => {
+    const len = sortedImpls.length;
+    const newIndex = (currentIndex + 1) % len;
+    onSelect(sortedImpls[newIndex].library_id);
+  };
+
+  if (sortedImpls.length === 0) return null;
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 0.5,
+        py: 2,
+      }}
+    >
+      {/* Left Arrow */}
+      <IconButton
+        onClick={handlePrev}
+        size="small"
+        sx={{
+          color: '#9ca3af',
+          '&:hover': { color: '#3776AB', bgcolor: '#f3f4f6' },
+        }}
+      >
+        <ChevronLeftIcon />
+      </IconButton>
+
+      {/* Pills Container */}
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 0.75,
+          justifyContent: 'center',
+        }}
+      >
+        {visibleItems.map(({ impl, position }) => {
+          const isCenter = position === 'center';
+          const score = impl.quality_score;
+
+          return (
+            <Box
+              key={impl.library_id}
+              onClick={() => onSelect(impl.library_id)}
+              title={!isCenter ? impl.library_id : undefined}
+              sx={{
+                px: 1.5,
+                py: 0.5,
+                borderRadius: 2,
+                fontFamily: '"MonoLisa", monospace',
+                fontSize: '0.85rem',
+                fontWeight: isCenter ? 600 : 400,
+                bgcolor: '#f3f4f6',
+                border: isCenter ? '1px solid #3776AB' : '1px solid transparent',
+                color: isCenter ? '#374151' : '#9ca3af',
+                cursor: 'pointer',
+                transition: 'all 0.2s ease',
+                whiteSpace: 'nowrap',
+                '&:hover': {
+                  bgcolor: '#e5e7eb',
+                  borderColor: '#3776AB',
+                  color: '#374151',
+                },
+              }}
+            >
+              {/* Full name on desktop, abbreviated on mobile */}
+              <Box component="span" sx={{ display: { xs: 'none', sm: 'inline' } }}>
+                {impl.library_id}
+              </Box>
+              <Box component="span" sx={{ display: { xs: 'inline', sm: 'none' } }}>
+                {isCenter ? impl.library_id : (LIBRARY_ABBREV[impl.library_id] || impl.library_id)}
+              </Box>
+              {score && isCenter && (
+                <Box
+                  component="span"
+                  sx={{
+                    ml: 0.5,
+                    fontSize: '0.7rem',
+                    color: '#6b7280',
+                  }}
+                >
+                  {Math.round(score)}
+                </Box>
+              )}
+            </Box>
+          );
+        })}
+      </Box>
+
+      {/* Right Arrow */}
+      <IconButton
+        onClick={handleNext}
+        size="small"
+        sx={{
+          color: '#9ca3af',
+          '&:hover': { color: '#3776AB', bgcolor: '#f3f4f6' },
+        }}
+      >
+        <ChevronRightIcon />
+      </IconButton>
+    </Box>
+  );
+});
diff --git a/app/src/components/SpecTabs.tsx b/app/src/components/SpecTabs.tsx
new file mode 100644
index 0000000000..e15f817dd2
--- /dev/null
+++ b/app/src/components/SpecTabs.tsx
@@ -0,0 +1,540 @@
+import { useState, useCallback, useMemo } from 'react';
+import Box from '@mui/material/Box';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import Chip from '@mui/material/Chip';
+import Collapse from '@mui/material/Collapse';
+import CodeIcon from '@mui/icons-material/Code';
+import DescriptionIcon from '@mui/icons-material/Description';
+import ImageIcon from '@mui/icons-material/Image';
+import StarIcon from '@mui/icons-material/Star';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import CheckIcon from '@mui/icons-material/Check';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+interface SpecTabsProps {
+  // Code tab
+  code: string | null;
+  // Specification tab
+  specId: string;
+  title: string;
+  description: string;
+  applications?: string[];
+  data?: string[];
+  notes?: string[];
+  tags?: Record<string, string[]>;
+  created?: string;
+  // Implementation tab
+  imageDescription?: string;
+  strengths?: string[];
+  weaknesses?: string[];
+  // Quality tab
+  qualityScore: number | null;
+  criteriaChecklist?: Record<string, unknown>;
+  // Common
+  libraryId: string;
+  onTrackEvent?: (name: string, props?: Record<string, string | undefined>) => void;
+}
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+function TabPanel({ children, value, index }: TabPanelProps) {
+  return (
+    <Box role="tabpanel" hidden={value !== index} sx={{ py: 2 }}>
+      {value === index && children}
+    </Box>
+  );
+}
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <Typography
+      sx={{
+        fontFamily: '"MonoLisa", monospace',
+        fontSize: '0.75rem',
+        fontWeight: 600,
+        color: '#9ca3af',
+        textTransform: 'uppercase',
+        letterSpacing: '0.05em',
+        mb: 0.5,
+      }}
+    >
+      {children}
+    </Typography>
+  );
+}
+
+function SectionContent({ children }: { children: React.ReactNode }) {
+  return (
+    <Typography
+      sx={{
+        fontFamily: '"MonoLisa", monospace',
+        fontSize: '0.85rem',
+        color: '#374151',
+        lineHeight: 1.6,
+      }}
+    >
+      {children}
+    </Typography>
+  );
+}
+
+export function SpecTabs({
+  code,
+  specId,
+  title,
+  description,
+  applications,
+  data,
+  notes,
+  tags,
+  created,
+  imageDescription,
+  strengths,
+  weaknesses,
+  qualityScore,
+  criteriaChecklist,
+  libraryId,
+  onTrackEvent,
+}: SpecTabsProps) {
+  const [copied, setCopied] = useState(false);
+  const [tabIndex, setTabIndex] = useState(0); // Code is default (index 0)
+  const [expandedCategories, setExpandedCategories] = useState<Record<string, boolean>>({});
+
+  const toggleCategory = (category: string) => {
+    setExpandedCategories((prev) => ({ ...prev, [category]: !prev[category] }));
+  };
+
+  const handleCopy = useCallback(async () => {
+    if (!code) return;
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      onTrackEvent?.('copy_code', { library: libraryId, method: 'tab' });
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Copy failed:', err);
+    }
+  }, [code, libraryId, onTrackEvent]);
+
+  const handleTabChange = (_: React.SyntheticEvent, newValue: number) => {
+    setTabIndex(newValue);
+    const tabNames = ['code', 'specification', 'implementation', 'quality'];
+    onTrackEvent?.('tab_click', { tab: tabNames[newValue], library: libraryId });
+  };
+
+  // Memoize syntax-highlighted code
+  const highlightedCode = useMemo(() => {
+    if (!code) return null;
+    return (
+      <SyntaxHighlighter
+        language="python"
+        style={oneLight}
+        customStyle={{
+          margin: 0,
+          fontSize: '0.85rem',
+          fontFamily: '"MonoLisa", "MonoLisa Fallback", monospace',
+          background: 'transparent',
+        }}
+      >
+        {code}
+      </SyntaxHighlighter>
+    );
+  }, [code]);
+
+  // Format date
+  const formatDate = (dateStr?: string) => {
+    if (!dateStr) return null;
+    try {
+      return new Date(dateStr).toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+      });
+    } catch {
+      return dateStr;
+    }
+  };
+
+  // Flatten tags for display
+  const allTags = useMemo(() => {
+    if (!tags) return [];
+    return Object.entries(tags).flatMap(([category, values]) =>
+      values.map((v) => ({ category, value: v }))
+    );
+  }, [tags]);
+
+  return (
+    <Box sx={{ mt: 3, maxWidth: { xs: '100%', md: 1200, lg: 1400, xl: 1600 }, mx: 'auto' }}>
+      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+        <Tabs
+          value={tabIndex}
+          onChange={handleTabChange}
+          variant="fullWidth"
+          sx={{
+            '& .MuiTab-root': {
+              fontFamily: '"MonoLisa", monospace',
+              textTransform: 'none',
+              fontSize: '0.875rem',
+              minHeight: 48,
+            },
+            '& .Mui-selected': {
+              color: '#3776AB',
+            },
+            '& .MuiTabs-indicator': {
+              backgroundColor: '#3776AB',
+            },
+          }}
+        >
+          <Tab icon={<CodeIcon sx={{ fontSize: '1.1rem' }} />} iconPosition="start" label="Code" />
+          <Tab icon={<DescriptionIcon sx={{ fontSize: '1.1rem' }} />} iconPosition="start" label="Spec" />
+          <Tab icon={<ImageIcon sx={{ fontSize: '1.1rem' }} />} iconPosition="start" label="Impl" />
+          <Tab
+            icon={<StarIcon sx={{ fontSize: '1.1rem', color: tabIndex === 3 ? '#3776AB' : '#f59e0b' }} />}
+            iconPosition="start"
+            label={qualityScore ? `${Math.round(qualityScore)}` : 'Quality'}
+          />
+        </Tabs>
+      </Box>
+
+      {/* Code Tab */}
+      <TabPanel value={tabIndex} index={0}>
+        <Box sx={{ position: 'relative' }}>
+          <Tooltip title={copied ? 'Copied!' : 'Copy code'}>
+            <IconButton
+              onClick={handleCopy}
+              sx={{
+                position: 'absolute',
+                top: 8,
+                right: 8,
+                bgcolor: 'rgba(255,255,255,0.9)',
+                zIndex: 1,
+                '&:hover': { bgcolor: '#fff' },
+              }}
+              size="small"
+            >
+              {copied ? <CheckIcon color="success" /> : <ContentCopyIcon fontSize="small" />}
+            </IconButton>
+          </Tooltip>
+          <Box
+            sx={{
+              bgcolor: '#fafafa',
+              p: 3,
+              borderRadius: 1,
+              overflow: 'auto',
+              maxHeight: 400,
+            }}
+          >
+            {highlightedCode}
+          </Box>
+        </Box>
+      </TabPanel>
+
+      {/* Specification Tab */}
+      <TabPanel value={tabIndex} index={1}>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+          {/* ID */}
+          <Box>
+            <SectionTitle>ID</SectionTitle>
+            <SectionContent>{specId}</SectionContent>
+          </Box>
+
+          {/* Title */}
+          <Box>
+            <SectionTitle>Title</SectionTitle>
+            <SectionContent>{title}</SectionContent>
+          </Box>
+
+          {/* Description */}
+          <Box>
+            <SectionTitle>Description</SectionTitle>
+            <SectionContent>{description}</SectionContent>
+          </Box>
+
+          {/* Applications */}
+          {applications && applications.length > 0 && (
+            <Box>
+              <SectionTitle>Applications</SectionTitle>
+              <Box component="ul" sx={{ m: 0, pl: 2 }}>
+                {applications.map((app, i) => (
+                  <Typography
+                    key={i}
+                    component="li"
+                    sx={{ fontFamily: '"MonoLisa", monospace', fontSize: '0.85rem', color: '#4b5563', mb: 0.5 }}
+                  >
+                    {app}
+                  </Typography>
+                ))}
+              </Box>
+            </Box>
+          )}
+
+          {/* Data */}
+          {data && data.length > 0 && (
+            <Box>
+              <SectionTitle>Data</SectionTitle>
+              <Box component="ul" sx={{ m: 0, pl: 2 }}>
+                {data.map((d, i) => (
+                  <Typography
+                    key={i}
+                    component="li"
+                    sx={{ fontFamily: '"MonoLisa", monospace', fontSize: '0.85rem', color: '#4b5563', mb: 0.5 }}
+                  >
+                    {d}
+                  </Typography>
+                ))}
+              </Box>
+            </Box>
+          )}
+
+          {/* Notes */}
+          {notes && notes.length > 0 && (
+            <Box>
+              <SectionTitle>Notes</SectionTitle>
+              <Box component="ul" sx={{ m: 0, pl: 2 }}>
+                {notes.map((note, i) => (
+                  <Typography
+                    key={i}
+                    component="li"
+                    sx={{ fontFamily: '"MonoLisa", monospace', fontSize: '0.85rem', color: '#4b5563', mb: 0.5 }}
+                  >
+                    {note}
+                  </Typography>
+                ))}
+              </Box>
+            </Box>
+          )}
+
+          {/* Tags */}
+          {allTags.length > 0 && (
+            <Box>
+              <SectionTitle>Tags</SectionTitle>
+              <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, mt: 0.5 }}>
+                {allTags.map(({ value }, i) => (
+                  <Chip
+                    key={i}
+                    label={value}
+                    size="small"
+                    sx={{
+                      fontFamily: '"MonoLisa", monospace',
+                      fontSize: '0.7rem',
+                      bgcolor: '#f3f4f6',
+                      color: '#6b7280',
+                    }}
+                  />
+                ))}
+              </Box>
+            </Box>
+          )}
+
+          {/* Created */}
+          {created && (
+            <Box>
+              <SectionTitle>Created</SectionTitle>
+              <SectionContent>{formatDate(created)}</SectionContent>
+            </Box>
+          )}
+        </Box>
+      </TabPanel>
+
+      {/* Implementation Tab */}
+      <TabPanel value={tabIndex} index={2}>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+          {/* Image Description */}
+          {imageDescription && (
+            <Box>
+              <SectionTitle>AI Description</SectionTitle>
+              <SectionContent>{imageDescription}</SectionContent>
+            </Box>
+          )}
+
+          {/* Strengths */}
+          {strengths && strengths.length > 0 && (
+            <Box>
+              <SectionTitle>Strengths</SectionTitle>
+              <Box component="ul" sx={{ m: 0, pl: 2 }}>
+                {strengths.map((s, i) => (
+                  <Typography
+                    key={i}
+                    component="li"
+                    sx={{ fontFamily: '"MonoLisa", monospace', fontSize: '0.85rem', color: '#22c55e', mb: 0.5 }}
+                  >
+                    {s}
+                  </Typography>
+                ))}
+              </Box>
+            </Box>
+          )}
+
+          {/* Weaknesses */}
+          {weaknesses && weaknesses.length > 0 && (
+            <Box>
+              <SectionTitle>Weaknesses</SectionTitle>
+              <Box component="ul" sx={{ m: 0, pl: 2 }}>
+                {weaknesses.map((w, i) => (
+                  <Typography
+                    key={i}
+                    component="li"
+                    sx={{ fontFamily: '"MonoLisa", monospace', fontSize: '0.85rem', color: '#ef4444', mb: 0.5 }}
+                  >
+                    {w}
+                  </Typography>
+                ))}
+              </Box>
+            </Box>
+          )}
+
+          {/* No data message */}
+          {!imageDescription && (!strengths || strengths.length === 0) && (!weaknesses || weaknesses.length === 0) && (
+            <Typography sx={{ fontFamily: '"MonoLisa", monospace', fontSize: '0.9rem', color: '#9ca3af' }}>
+              No implementation review data available.
+            </Typography>
+          )}
+        </Box>
+      </TabPanel>
+
+      {/* Quality Tab */}
+      <TabPanel value={tabIndex} index={3}>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+          {/* Score */}
+          <Box>
+            <SectionTitle>Quality Score</SectionTitle>
+            <Typography
+              sx={{
+                fontFamily: '"MonoLisa", monospace',
+                fontSize: '2rem',
+                fontWeight: 700,
+                color: qualityScore && qualityScore >= 90 ? '#22c55e' : qualityScore && qualityScore >= 70 ? '#f59e0b' : '#ef4444',
+              }}
+            >
+              {qualityScore ? `${Math.round(qualityScore)}/100` : 'N/A'}
+            </Typography>
+          </Box>
+
+          {/* Criteria Checklist */}
+          {criteriaChecklist && Object.keys(criteriaChecklist).length > 0 && (
+            <Box>
+              <SectionTitle>Criteria Breakdown</SectionTitle>
+              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5, mt: 1 }}>
+                {Object.entries(criteriaChecklist).map(([category, data]) => {
+                  const catData = data as { score?: number; max?: number; items?: Array<{ id: string; name: string; score: number; max: number; passed: boolean; comment?: string }> };
+                  const score = catData.score ?? 0;
+                  const max = catData.max ?? 0;
+                  const pct = max > 0 ? (score / max) * 100 : 0;
+                  const items = catData.items || [];
+                  const isExpanded = expandedCategories[category] ?? false;
+
+                  return (
+                    <Box key={category}>
+                      {/* Category header - clickable */}
+                      <Box
+                        onClick={() => items.length > 0 && toggleCategory(category)}
+                        sx={{
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'space-between',
+                          mb: 0.5,
+                          cursor: items.length > 0 ? 'pointer' : 'default',
+                          '&:hover': items.length > 0 ? { opacity: 0.8 } : {},
+                        }}
+                      >
+                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                          {items.length > 0 && (
+                            isExpanded ? (
+                              <ExpandLessIcon sx={{ fontSize: '1rem', color: '#9ca3af' }} />
+                            ) : (
+                              <ExpandMoreIcon sx={{ fontSize: '1rem', color: '#9ca3af' }} />
+                            )
+                          )}
+                          <Typography sx={{ fontFamily: '"MonoLisa", monospace', fontSize: '0.8rem', color: '#4b5563' }}>
+                            {category.replace(/_/g, ' ')}
+                          </Typography>
+                        </Box>
+                        <Typography sx={{ fontFamily: '"MonoLisa", monospace', fontSize: '0.8rem', color: '#6b7280' }}>
+                          {score}/{max}
+                        </Typography>
+                      </Box>
+                      {/* Progress bar */}
+                      <Box sx={{ height: 4, bgcolor: '#e5e7eb', borderRadius: 2, overflow: 'hidden' }}>
+                        <Box
+                          sx={{
+                            height: '100%',
+                            width: `${pct}%`,
+                            bgcolor: pct >= 90 ? '#22c55e' : pct >= 70 ? '#f59e0b' : '#ef4444',
+                            borderRadius: 2,
+                          }}
+                        />
+                      </Box>
+                      {/* Expandable items */}
+                      <Collapse in={isExpanded}>
+                        <Box sx={{ mt: 1, ml: 2, display: 'flex', flexDirection: 'column', gap: 0.75 }}>
+                          {items.map((item) => (
+                            <Box key={item.id} sx={{ display: 'flex', flexDirection: 'column', gap: 0.25 }}>
+                              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                                  <Box
+                                    sx={{
+                                      width: 6,
+                                      height: 6,
+                                      borderRadius: '50%',
+                                      bgcolor:
+                                        item.score === 0
+                                          ? '#ef4444' // red for 0
+                                          : item.score === item.max
+                                            ? '#22c55e' // green for full
+                                            : '#f59e0b', // yellow for partial
+                                    }}
+                                  />
+                                  <Typography sx={{ fontFamily: '"MonoLisa", monospace', fontSize: '0.75rem', color: '#4b5563' }}>
+                                    {item.name}
+                                  </Typography>
+                                </Box>
+                                <Typography sx={{ fontFamily: '"MonoLisa", monospace', fontSize: '0.7rem', color: '#9ca3af' }}>
+                                  {item.score}/{item.max}
+                                </Typography>
+                              </Box>
+                              {item.comment && (
+                                <Typography
+                                  sx={{
+                                    fontFamily: '"MonoLisa", monospace',
+                                    fontSize: '0.7rem',
+                                    color: '#6b7280',
+                                    ml: 1.5,
+                                    fontStyle: 'italic',
+                                  }}
+                                >
+                                  {item.comment}
+                                </Typography>
+                              )}
+                            </Box>
+                          ))}
+                        </Box>
+                      </Collapse>
+                    </Box>
+                  );
+                })}
+              </Box>
+            </Box>
+          )}
+
+          {/* No data message */}
+          {!qualityScore && (!criteriaChecklist || Object.keys(criteriaChecklist).length === 0) && (
+            <Typography sx={{ fontFamily: '"MonoLisa", monospace', fontSize: '0.9rem', color: '#9ca3af' }}>
+              No quality data available.
+            </Typography>
+          )}
+        </Box>
+      </TabPanel>
+    </Box>
+  );
+}
diff --git a/app/src/components/index.ts b/app/src/components/index.ts
index 01c83c4a03..3cb9e7beb0 100644
--- a/app/src/components/index.ts
+++ b/app/src/components/index.ts
@@ -4,4 +4,3 @@ export { LoaderSpinner } from './LoaderSpinner';
 export { FilterBar } from './FilterBar';
 export { ImagesGrid } from './ImagesGrid';
 export { ImageCard } from './ImageCard';
-export { FullscreenModal } from './FullscreenModal';
diff --git a/app/src/hooks/useAnalytics.ts b/app/src/hooks/useAnalytics.ts
index b3619418cd..6be08d12f1 100644
--- a/app/src/hooks/useAnalytics.ts
+++ b/app/src/hooks/useAnalytics.ts
@@ -4,12 +4,12 @@ interface EventProps {
   [key: string]: string | undefined;
 }
 
-function debounce<T extends (...args: unknown[]) => void>(fn: T, delay: number) {
+function debounce<T extends (...args: never[]) => void>(fn: T, delay: number): T {
   let timeoutId: ReturnType<typeof setTimeout>;
-  return (...args: Parameters<T>) => {
+  return ((...args: Parameters<T>) => {
     clearTimeout(timeoutId);
     timeoutId = setTimeout(() => fn(...args), delay);
-  };
+  }) as T;
 }
 
 // Konvertiert Query-Params zu Pfad-Segmenten für Plausible
@@ -41,15 +41,28 @@ export function useAnalytics() {
   const lastPageviewRef = useRef<string>('');
   const isProduction = typeof window !== 'undefined' && window.location.hostname === 'pyplots.ai';
 
-  const sendPageview = useCallback(() => {
-    if (!isProduction) return;
+  const sendPageview = useCallback(
+    (urlOverride?: string) => {
+      if (!isProduction) return;
+
+      let url: string;
+      if (urlOverride) {
+        // Validate urlOverride: must start with "/" and contain only safe characters
+        if (!/^\/[\w\-/]*$/.test(urlOverride)) {
+          return; // Invalid URL, skip tracking
+        }
+        url = `https://pyplots.ai${urlOverride}`;
+      } else {
+        url = buildPlausibleUrl();
+      }
 
-    const url = buildPlausibleUrl();
-    if (url === lastPageviewRef.current) return;
-    lastPageviewRef.current = url;
+      if (url === lastPageviewRef.current) return;
+      lastPageviewRef.current = url;
 
-    window.plausible?.('pageview', { url });
-  }, [isProduction]);
+      window.plausible?.('pageview', { url });
+    },
+    [isProduction]
+  );
 
   const trackPageview = useMemo(() => debounce(sendPageview, 300), [sendPageview]);
 
diff --git a/app/src/hooks/useFilterState.ts b/app/src/hooks/useFilterState.ts
index aad1a7fb03..53fc7337ec 100644
--- a/app/src/hooks/useFilterState.ts
+++ b/app/src/hooks/useFilterState.ts
@@ -1,7 +1,7 @@
 /**
  * Hook for managing filter state and URL synchronization.
  *
- * Encapsulates all filter-related state and callbacks used in App.tsx.
+ * Uses persistent state from Layout context to survive navigation.
  */
 
 import { useState, useCallback, useEffect, useRef } from 'react';
@@ -9,19 +9,47 @@ import { useState, useCallback, useEffect, useRef } from 'react';
 import type { PlotImage, FilterCategory, ActiveFilters, FilterCounts } from '../types';
 import { FILTER_CATEGORIES } from '../types';
 import { API_URL, BATCH_SIZE } from '../constants';
+import { useHomeState } from '../components/Layout';
 
 /**
- * Fisher-Yates shuffle algorithm.
+ * Seeded random number generator (mulberry32).
  */
-function shuffleArray<T>(array: T[]): T[] {
+function seededRandom(seed: number): () => number {
+  return () => {
+    let t = (seed += 0x6d2b79f5);
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+/**
+ * Fisher-Yates shuffle algorithm with optional seed for deterministic results.
+ */
+function shuffleArray<T>(array: T[], seed?: number): T[] {
   const shuffled = [...array];
+  const random = seed !== undefined ? seededRandom(seed) : Math.random;
   for (let i = shuffled.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1));
+    const j = Math.floor(random() * (i + 1));
     [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
   }
   return shuffled;
 }
 
+/**
+ * Generate a hash from filter state for deterministic shuffle.
+ */
+function hashFilters(filters: ActiveFilters): number {
+  const str = JSON.stringify(filters);
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash;
+  }
+  return Math.abs(hash);
+}
+
 /**
  * Parse URL params into ActiveFilters.
  * URL format: ?lib=matplotlib&lib=seaborn (AND) or ?lib=matplotlib,seaborn (OR within group)
@@ -106,19 +134,35 @@ export function useFilterState({
   onTrackPageview,
   onTrackEvent,
 }: UseFilterStateOptions): UseFilterStateReturn {
-  // Filter state - initialize from URL params immediately
-  const [activeFilters, setActiveFilters] = useState<ActiveFilters>(() => parseUrlFilters());
-  const [filterCounts, setFilterCounts] = useState<FilterCounts | null>(null);
-  const [globalCounts, setGlobalCounts] = useState<FilterCounts | null>(null);
-  const [orCounts, setOrCounts] = useState<Record<string, number>[]>([]);
+  const { homeStateRef, setHomeState } = useHomeState();
+
+  // Initialize from persistent state (ref) or URL params (all using lazy initializers)
+  const [activeFilters, setActiveFilters] = useState<ActiveFilters>(() =>
+    homeStateRef.current.initialized ? homeStateRef.current.activeFilters : parseUrlFilters()
+  );
+  const [filterCounts, setFilterCounts] = useState<FilterCounts | null>(() =>
+    homeStateRef.current.initialized ? homeStateRef.current.filterCounts : null
+  );
+  const [globalCounts, setGlobalCounts] = useState<FilterCounts | null>(() =>
+    homeStateRef.current.initialized ? homeStateRef.current.globalCounts : null
+  );
+  const [orCounts, setOrCounts] = useState<Record<string, number>[]>(() =>
+    homeStateRef.current.initialized ? homeStateRef.current.orCounts : []
+  );
 
-  // Image state
-  const [allImages, setAllImages] = useState<PlotImage[]>([]);
-  const [displayedImages, setDisplayedImages] = useState<PlotImage[]>([]);
-  const [hasMore, setHasMore] = useState(false);
+  // Image state - restore from persistent state if available
+  const [allImages, setAllImages] = useState<PlotImage[]>(() =>
+    homeStateRef.current.initialized ? homeStateRef.current.allImages : []
+  );
+  const [displayedImages, setDisplayedImages] = useState<PlotImage[]>(() =>
+    homeStateRef.current.initialized ? homeStateRef.current.displayedImages : []
+  );
+  const [hasMore, setHasMore] = useState(() =>
+    homeStateRef.current.initialized ? homeStateRef.current.hasMore : false
+  );
 
   // UI state
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(() => !homeStateRef.current.initialized);
   const [error, setError] = useState<string>('');
   const [randomAnimation, setRandomAnimation] = useState<{
     index: number;
@@ -130,6 +174,23 @@ export function useFilterState({
   const activeFiltersRef = useRef(activeFilters);
   activeFiltersRef.current = activeFilters;
 
+  // Sync state changes back to persistent context
+  useEffect(() => {
+    if (allImages.length > 0 || displayedImages.length > 0) {
+      setHomeState((prev) => ({
+        ...prev,
+        allImages,
+        displayedImages,
+        activeFilters,
+        filterCounts,
+        globalCounts,
+        orCounts,
+        hasMore,
+        initialized: true,
+      }));
+    }
+  }, [allImages, displayedImages, activeFilters, filterCounts, globalCounts, orCounts, hasMore, setHomeState]);
+
   // Add a new filter group (creates new chip - AND with other groups)
   const handleAddFilter = useCallback((category: FilterCategory, value: string) => {
     setActiveFilters((prev) => [...prev, { category, values: [value] }]);
@@ -234,8 +295,23 @@ export function useFilterState({
     onTrackPageview();
   }, [activeFilters, onTrackPageview]);
 
+  // Track if we should skip initial fetch (restored from persistent state)
+  const initializedRef = useRef(homeStateRef.current.initialized);
+  const filtersMatchRef = useRef(
+    homeStateRef.current.initialized && JSON.stringify(homeStateRef.current.activeFilters) === JSON.stringify(activeFilters)
+  );
+
   // Load filtered images when filters change
   useEffect(() => {
+    // Skip fetch on first mount if restored from persistent state with same filters
+    if (initializedRef.current && filtersMatchRef.current) {
+      initializedRef.current = false;
+      filtersMatchRef.current = false;
+      return;
+    }
+    initializedRef.current = false;
+    filtersMatchRef.current = false;
+
     const abortController = new AbortController();
 
     const fetchFilteredImages = async () => {
@@ -265,9 +341,12 @@ export function useFilterState({
         setGlobalCounts(data.globalCounts || data.counts);
         setOrCounts(data.orCounts || []);
 
-        // Shuffle and set images
-        const shuffled = shuffleArray<PlotImage>(data.images || []);
+        // Shuffle with deterministic seed based on filters
+        const seed = hashFilters(activeFilters);
+        const shuffled = shuffleArray<PlotImage>(data.images || [], seed);
         setAllImages(shuffled);
+
+        // Initial display count
         setDisplayedImages(shuffled.slice(0, BATCH_SIZE));
         setHasMore(shuffled.length > BATCH_SIZE);
       } catch (err) {
diff --git a/app/src/main.tsx b/app/src/main.tsx
index 3349aab9a2..16a6f259c4 100644
--- a/app/src/main.tsx
+++ b/app/src/main.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
-import App from './App';
+import { AppRouter } from './router';
 
 // Import MonoLisa font - hosted on GCS (all text uses MonoLisa)
 import './styles/fonts.css';
@@ -42,7 +42,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <ThemeProvider theme={theme}>
       <CssBaseline />
-      <App />
+      <AppRouter />
     </ThemeProvider>
   </React.StrictMode>
 );
diff --git a/app/src/pages/CatalogPage.tsx b/app/src/pages/CatalogPage.tsx
new file mode 100644
index 0000000000..e6d33971c4
--- /dev/null
+++ b/app/src/pages/CatalogPage.tsx
@@ -0,0 +1,400 @@
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { Link } from 'react-router-dom';
+import { Helmet } from 'react-helmet-async';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Skeleton from '@mui/material/Skeleton';
+import Fab from '@mui/material/Fab';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+
+import { API_URL } from '../constants';
+import { useAnalytics } from '../hooks';
+import { useAppData, useHomeState } from '../components/Layout';
+import { Footer } from '../components';
+import type { PlotImage } from '../types';
+
+interface CatalogSpec {
+  id: string;
+  title: string;
+  description?: string;
+  images: PlotImage[];
+}
+
+export function CatalogPage() {
+  const { specsData } = useAppData();
+  const { saveScrollPosition } = useHomeState();
+  const { trackPageview, trackEvent } = useAnalytics();
+
+  // Track catalog page view
+  useEffect(() => {
+    trackPageview('/catalog');
+  }, [trackPageview]);
+
+  const [allImages, setAllImages] = useState<PlotImage[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [rotationIndex, setRotationIndex] = useState<Record<string, number>>({});
+  const [expandedDescs, setExpandedDescs] = useState<Record<string, boolean>>({});
+  const [showScrollTop, setShowScrollTop] = useState(false);
+
+  // Fetch all images
+  useEffect(() => {
+    const abortController = new AbortController();
+
+    const fetchImages = async () => {
+      try {
+        const res = await fetch(`${API_URL}/plots/filter`, {
+          signal: abortController.signal,
+        });
+        if (abortController.signal.aborted) return;
+        if (res.ok) {
+          const data = await res.json();
+          setAllImages(data.images || []);
+        }
+      } catch (err) {
+        if (abortController.signal.aborted) return;
+        console.error('Error fetching images:', err);
+      } finally {
+        if (!abortController.signal.aborted) {
+          setLoading(false);
+        }
+      }
+    };
+    fetchImages();
+
+    return () => abortController.abort();
+  }, []);
+
+  // Group images by spec_id and merge with spec metadata
+  const catalogSpecs = useMemo(() => {
+    // Group images by spec_id
+    const imagesBySpec: Record<string, PlotImage[]> = {};
+    for (const img of allImages) {
+      const specId = img.spec_id || '';
+      if (!imagesBySpec[specId]) {
+        imagesBySpec[specId] = [];
+      }
+      imagesBySpec[specId].push(img);
+    }
+
+    // Merge with spec metadata and sort images by library name
+    const specs: CatalogSpec[] = specsData
+      .filter((spec) => imagesBySpec[spec.id])
+      .map((spec) => ({
+        id: spec.id,
+        title: spec.title,
+        description: spec.description,
+        images: imagesBySpec[spec.id].sort((a, b) => a.library.localeCompare(b.library)),
+      }));
+
+    // Sort alphabetically by title
+    specs.sort((a, b) => a.title.localeCompare(b.title));
+
+    return specs;
+  }, [allImages, specsData]);
+
+  // Initialize random rotation indices once specs are loaded
+  useEffect(() => {
+    if (catalogSpecs.length > 0 && Object.keys(rotationIndex).length === 0) {
+      const initialIndices: Record<string, number> = {};
+      catalogSpecs.forEach((spec) => {
+        initialIndices[spec.id] = Math.floor(Math.random() * spec.images.length);
+      });
+      setRotationIndex(initialIndices);
+    }
+  }, [catalogSpecs, rotationIndex]);
+
+  // Show/hide scroll-to-top button based on scroll position
+  useEffect(() => {
+    const handleScroll = () => {
+      setShowScrollTop(window.scrollY > 300);
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  // Handle image click - rotate to next implementation
+  const handleImageClick = useCallback(
+    (specId: string, totalImages: number) => {
+      setRotationIndex((prev) => ({
+        ...prev,
+        [specId]: ((prev[specId] || 0) + 1) % totalImages,
+      }));
+      trackEvent('catalog_rotate', { spec: specId });
+    },
+    [trackEvent]
+  );
+
+  if (loading) {
+    return (
+      <Box sx={{ py: 4 }}>
+        <Skeleton variant="text" width={200} height={40} sx={{ mb: 4 }} />
+        {[1, 2, 3, 4, 5].map((i) => (
+          <Box key={i} sx={{ display: 'flex', gap: 3, mb: 3 }}>
+            <Skeleton variant="rectangular" width={280} height={158} sx={{ borderRadius: 1, flexShrink: 0 }} />
+            <Box sx={{ flex: 1 }}>
+              <Skeleton variant="text" width="60%" height={28} />
+              <Skeleton variant="text" width="100%" height={20} />
+              <Skeleton variant="text" width="80%" height={20} />
+            </Box>
+          </Box>
+        ))}
+      </Box>
+    );
+  }
+
+  return (
+    <>
+      <Helmet>
+        <title>catalog | pyplots.ai</title>
+        <meta name="description" content="Browse all Python plotting specifications alphabetically" />
+        <meta property="og:title" content="catalog | pyplots.ai" />
+        <meta property="og:description" content="Browse all Python plotting specifications alphabetically" />
+      </Helmet>
+
+      <Box sx={{ pb: 4 }}>
+        {/* Breadcrumb navigation */}
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            mx: { xs: -2, sm: -4, md: -8, lg: -12 },
+            mt: -5,
+            px: 2,
+            py: 1,
+            mb: 3,
+            bgcolor: '#f3f4f6',
+            borderBottom: '1px solid #e5e7eb',
+            fontFamily: '"MonoLisa", monospace',
+            fontSize: '0.85rem',
+            position: 'sticky',
+            top: 0,
+            zIndex: 100,
+          }}
+        >
+          <Box
+            component={Link}
+            to="/"
+            sx={{
+              color: '#3776AB',
+              textDecoration: 'none',
+              '&:hover': { textDecoration: 'underline' },
+            }}
+          >
+            pyplots.ai
+          </Box>
+          <Box component="span" sx={{ mx: 1, color: '#9ca3af' }}>›</Box>
+          <Box component="span" sx={{ color: '#4b5563' }}>
+            catalog
+          </Box>
+        </Box>
+
+        {/* Title */}
+        <Typography
+          variant="h4"
+          component="h1"
+          sx={{
+            fontFamily: '"MonoLisa", monospace',
+            fontWeight: 600,
+            mb: 4,
+            color: '#1f2937',
+          }}
+        >
+          catalog
+          <Typography
+            component="span"
+            sx={{
+              ml: 2,
+              fontSize: '1rem',
+              fontWeight: 400,
+              color: '#9ca3af',
+            }}
+          >
+            {catalogSpecs.length} specifications
+          </Typography>
+        </Typography>
+
+        {/* Spec List */}
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+          {catalogSpecs.map((spec) => {
+            const currentIndex = rotationIndex[spec.id] || 0;
+            const currentImage = spec.images[currentIndex];
+
+            return (
+              <Box
+                key={spec.id}
+                sx={{
+                  display: 'flex',
+                  flexDirection: { xs: 'column', sm: 'row' },
+                  gap: { xs: 2, sm: 3 },
+                  p: 2,
+                  bgcolor: '#fff',
+                  borderRadius: 2,
+                  boxShadow: '0 1px 3px rgba(0,0,0,0.08)',
+                  transition: 'box-shadow 0.2s',
+                  '&:hover': {
+                    boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+                  },
+                }}
+              >
+                {/* Image - Click to rotate */}
+                <Box
+                  onClick={() => handleImageClick(spec.id, spec.images.length)}
+                  sx={{
+                    position: 'relative',
+                    width: { xs: '100%', sm: 280 },
+                    height: { xs: 180, sm: 158 },
+                    borderRadius: 1.5,
+                    overflow: 'hidden',
+                    bgcolor: '#fff',
+                    boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
+                    flexShrink: 0,
+                    cursor: spec.images.length > 1 ? 'pointer' : 'default',
+                    '&:hover .rotate-hint': {
+                      opacity: spec.images.length > 1 ? 1 : 0,
+                    },
+                    '&:hover .library-hint': {
+                      opacity: 1,
+                    },
+                  }}
+                >
+                  {currentImage && (
+                    <Box
+                      component="img"
+                      src={currentImage.thumb || currentImage.url}
+                      alt={spec.title}
+                      sx={{
+                        width: '100%',
+                        height: '100%',
+                        objectFit: 'cover',
+                      }}
+                    />
+                  )}
+
+                  {/* Rotation hint badge */}
+                  {spec.images.length > 1 && (
+                    <Box
+                      className="rotate-hint"
+                      sx={{
+                        position: 'absolute',
+                        bottom: 4,
+                        right: 4,
+                        px: 1,
+                        py: 0.25,
+                        bgcolor: 'rgba(0,0,0,0.6)',
+                        borderRadius: 1,
+                        fontSize: '0.7rem',
+                        fontFamily: '"MonoLisa", monospace',
+                        color: '#fff',
+                        opacity: 0,
+                        transition: 'opacity 0.2s',
+                      }}
+                    >
+                      {currentIndex + 1}/{spec.images.length}
+                    </Box>
+                  )}
+
+                  {/* Current library badge */}
+                  <Box
+                    className="library-hint"
+                    sx={{
+                      position: 'absolute',
+                      top: 4,
+                      left: 4,
+                      px: 0.75,
+                      py: 0.25,
+                      bgcolor: 'rgba(0,0,0,0.6)',
+                      borderRadius: 0.5,
+                      fontSize: '0.65rem',
+                      fontFamily: '"MonoLisa", monospace',
+                      color: '#fff',
+                      opacity: 0,
+                      transition: 'opacity 0.2s',
+                    }}
+                  >
+                    {currentImage?.library}
+                  </Box>
+                </Box>
+
+                {/* Text - Click to navigate */}
+                <Box
+                  component={Link}
+                  to={`/${spec.id}/${currentImage?.library || ''}`}
+                  onClick={saveScrollPosition}
+                  sx={{
+                    flex: 1,
+                    textDecoration: 'none',
+                    color: 'inherit',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'center',
+                  }}
+                >
+                  <Typography
+                    sx={{
+                      fontFamily: '"MonoLisa", monospace',
+                      fontWeight: 600,
+                      fontSize: '1rem',
+                      color: '#1f2937',
+                      mb: 0.5,
+                      '&:hover': { color: '#3776AB' },
+                    }}
+                  >
+                    {spec.title}
+                  </Typography>
+                  {spec.description && (
+                    <Typography
+                      onClick={(e) => {
+                        if (!expandedDescs[spec.id]) {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          setExpandedDescs((prev) => ({ ...prev, [spec.id]: true }));
+                        }
+                      }}
+                      sx={{
+                        fontFamily: '"MonoLisa", monospace',
+                        fontSize: '0.85rem',
+                        color: '#6b7280',
+                        lineHeight: 1.6,
+                        cursor: expandedDescs[spec.id] ? 'default' : 'pointer',
+                        ...(!expandedDescs[spec.id] && {
+                          display: '-webkit-box',
+                          WebkitLineClamp: 5,
+                          WebkitBoxOrient: 'vertical',
+                          overflow: 'hidden',
+                        }),
+                      }}
+                    >
+                      {spec.description}
+                    </Typography>
+                  )}
+                </Box>
+              </Box>
+            );
+          })}
+        </Box>
+
+        {/* Footer */}
+        <Footer onTrackEvent={trackEvent} />
+      </Box>
+
+      {/* Floating scroll-to-top button */}
+      <Fab
+        size="small"
+        onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+        sx={{
+          position: 'fixed',
+          bottom: 24,
+          right: 24,
+          bgcolor: '#f3f4f6',
+          color: '#6b7280',
+          opacity: showScrollTop ? 1 : 0,
+          visibility: showScrollTop ? 'visible' : 'hidden',
+          transition: 'opacity 0.3s, visibility 0.3s',
+          '&:hover': { bgcolor: '#e5e7eb', color: '#3776AB' },
+        }}
+      >
+        <KeyboardArrowUpIcon />
+      </Fab>
+    </>
+  );
+}
diff --git a/app/src/App.tsx b/app/src/pages/HomePage.tsx
similarity index 50%
rename from app/src/App.tsx
rename to app/src/pages/HomePage.tsx
index c0bcb92566..b9b0b73461 100644
--- a/app/src/App.tsx
+++ b/app/src/pages/HomePage.tsx
@@ -1,22 +1,26 @@
 import { useState, useEffect, useCallback, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
 import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
 import Alert from '@mui/material/Alert';
 import Fab from '@mui/material/Fab';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 
-import type { PlotImage, LibraryInfo, SpecInfo } from './types';
-import { API_URL, type ImageSize } from './constants';
-import { useInfiniteScroll, useAnalytics, useFilterState, isFiltersEmpty } from './hooks';
-import { Header, Footer, FilterBar, ImagesGrid, FullscreenModal } from './components';
+import type { PlotImage } from '../types';
+import type { ImageSize } from '../constants';
+import { useInfiniteScroll, useAnalytics, useFilterState, isFiltersEmpty } from '../hooks';
+import { Header, Footer, FilterBar, ImagesGrid } from '../components';
+import { useAppData, useHomeState } from '../components/Layout';
 
-function App() {
-  // Disable browser scroll restoration to prevent F5 reload from cascading infinite scroll
+export function HomePage() {
+  const navigate = useNavigate();
+  const { specsData, librariesData, stats } = useAppData();
+  const { homeStateRef, saveScrollPosition } = useHomeState();
+
+  // Disable browser's automatic scroll restoration
   useEffect(() => {
     if ('scrollRestoration' in history) {
       history.scrollRestoration = 'manual';
     }
-    window.scrollTo(0, 0);
   }, []);
 
   // Custom hooks
@@ -52,13 +56,22 @@ function App() {
     setHasMore,
   });
 
-  // Data state
-  const [specsData, setSpecsData] = useState<SpecInfo[]>([]);
-  const [librariesData, setLibrariesData] = useState<LibraryInfo[]>([]);
-  const [stats, setStats] = useState<{ specs: number; plots: number; libraries: number } | null>(null);
+  // Restore scroll position from persistent state (ref for sync access)
+  const scrollRestoredRef = useRef(false);
+  useEffect(() => {
+    if (scrollRestoredRef.current) return;
+    const savedScrollY = homeStateRef.current.scrollY;
+    if (savedScrollY > 0 && displayedImages.length > 0) {
+      requestAnimationFrame(() => {
+        window.scrollTo(0, savedScrollY);
+        scrollRestoredRef.current = true;
+      });
+    } else if (displayedImages.length > 0) {
+      scrollRestoredRef.current = true;
+    }
+  }, [homeStateRef, displayedImages.length]);
 
   // UI state
-  const [modalImage, setModalImage] = useState<PlotImage | null>(null);
   const [openImageTooltip, setOpenImageTooltip] = useState<string | null>(null);
   const [imageSize, setImageSize] = useState<ImageSize>(() => {
     const stored = localStorage.getItem('imageSize');
@@ -83,16 +96,23 @@ function App() {
     return () => window.removeEventListener('scroll', handleScroll);
   }, []);
 
-  // Handle card click - open modal
+  // Handle card click - navigate to spec page
   const handleCardClick = useCallback(
     (img: PlotImage) => {
       if (document.activeElement instanceof HTMLElement) {
         document.activeElement.blur();
       }
-      setModalImage(img);
-      trackEvent('modal_open', { spec: img.spec_id || '', library: img.library });
+
+      // Save scroll position synchronously to ref before navigation
+      saveScrollPosition();
+
+      // Navigate to spec page immediately
+      const specId = img.spec_id || '';
+      const library = img.library;
+      navigate(`/${specId}/${library}`);
+      trackEvent('navigate_to_spec', { spec: specId, library });
     },
-    [trackEvent]
+    [navigate, trackEvent, saveScrollPosition]
   );
 
   // Close tooltip when clicking anywhere
@@ -109,7 +129,7 @@ function App() {
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       const target = e.target as HTMLElement;
-      if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || modalImage) return;
+      if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') return;
 
       if (e.key === ' ') {
         e.preventDefault();
@@ -125,38 +145,7 @@ function App() {
 
     window.addEventListener('keydown', handleKeyDown);
     return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [handleRandom, handleRemoveGroup, activeFilters.length, modalImage]);
-
-  // Load initial data on mount
-  useEffect(() => {
-    const fetchInitialData = async () => {
-      try {
-        const [specsRes, libsRes, statsRes] = await Promise.all([
-          fetch(`${API_URL}/specs`),
-          fetch(`${API_URL}/libraries`),
-          fetch(`${API_URL}/stats`),
-        ]);
-
-        if (specsRes.ok) {
-          const data = await specsRes.json();
-          setSpecsData(Array.isArray(data) ? data : data.specs || []);
-        }
-
-        if (libsRes.ok) {
-          const data = await libsRes.json();
-          setLibrariesData(data.libraries || []);
-        }
-
-        if (statsRes.ok) {
-          const data = await statsRes.json();
-          setStats(data);
-        }
-      } catch (err) {
-        console.error('Error loading initial data:', err);
-      }
-    };
-    fetchInitialData();
-  }, []);
+  }, [handleRandom, handleRemoveGroup, activeFilters.length]);
 
   // Get selected spec/library for compatibility with existing components
   const specFilter = activeFilters.find((f) => f.category === 'spec');
@@ -165,68 +154,59 @@ function App() {
   const selectedLibrary = libFilter?.values[0] || '';
 
   return (
-    <Box onClick={handleContainerClick} sx={{ minHeight: '100vh', bgcolor: '#fafafa', py: 5, position: 'relative' }}>
-      <Container maxWidth={false} sx={{ px: { xs: 4, sm: 8, lg: 12 } }}>
-        <Header stats={stats} onRandom={handleRandom} />
-
-        {error && (
-          <Alert severity="error" sx={{ mb: 4, maxWidth: 500, mx: 'auto' }}>
-            {error}
-          </Alert>
-        )}
-
-        <FilterBar
-          activeFilters={activeFilters}
-          filterCounts={filterCounts}
-          orCounts={orCounts}
-          currentTotal={allImages.length}
-          displayedCount={displayedImages.length}
-          randomAnimation={randomAnimation}
-          searchInputRef={searchInputRef}
-          imageSize={imageSize}
-          onImageSizeChange={setImageSize}
-          onAddFilter={handleAddFilter}
-          onAddValueToGroup={handleAddValueToGroup}
-          onRemoveFilter={handleRemoveFilter}
-          onRemoveGroup={handleRemoveGroup}
-          onTrackEvent={trackEvent}
-        />
-
-        <ImagesGrid
-          images={displayedImages}
-          viewMode={isFiltersEmpty(activeFilters) ? 'library' : 'spec'}
-          selectedSpec={selectedSpec}
-          selectedLibrary={selectedLibrary}
-          loading={loading}
-          hasMore={hasMore}
-          isLoadingMore={false}
-          isTransitioning={false}
-          librariesData={librariesData}
-          specsData={specsData}
-          openTooltip={openImageTooltip}
-          loadMoreRef={loadMoreRef}
-          imageSize={imageSize}
-          onTooltipToggle={setOpenImageTooltip}
-          onCardClick={handleCardClick}
-          onTrackEvent={trackEvent}
-        />
-
-        {!loading && allImages.length === 0 && !isFiltersEmpty(activeFilters) && (
-          <Alert severity="info" sx={{ maxWidth: 400, mx: 'auto' }}>
-            No plots match these filters.
-          </Alert>
-        )}
-
-        <Footer onTrackEvent={trackEvent} selectedSpec={selectedSpec} selectedLibrary={selectedLibrary} />
-      </Container>
-
-      <FullscreenModal
-        image={modalImage}
-        selectedSpec={modalImage?.spec_id || selectedSpec}
-        onClose={() => setModalImage(null)}
+    <Box onClick={handleContainerClick}>
+      <Header stats={stats} onRandom={handleRandom} />
+
+      {error && (
+        <Alert severity="error" sx={{ mb: 4, maxWidth: 500, mx: 'auto' }}>
+          {error}
+        </Alert>
+      )}
+
+      <FilterBar
+        activeFilters={activeFilters}
+        filterCounts={filterCounts}
+        orCounts={orCounts}
+        currentTotal={allImages.length}
+        displayedCount={displayedImages.length}
+        randomAnimation={randomAnimation}
+        searchInputRef={searchInputRef}
+        imageSize={imageSize}
+        onImageSizeChange={setImageSize}
+        onAddFilter={handleAddFilter}
+        onAddValueToGroup={handleAddValueToGroup}
+        onRemoveFilter={handleRemoveFilter}
+        onRemoveGroup={handleRemoveGroup}
+        onTrackEvent={trackEvent}
+      />
+
+      <ImagesGrid
+        images={displayedImages}
+        viewMode={isFiltersEmpty(activeFilters) ? 'library' : 'spec'}
+        selectedSpec={selectedSpec}
+        selectedLibrary={selectedLibrary}
+        loading={loading}
+        hasMore={hasMore}
+        isLoadingMore={false}
+        isTransitioning={false}
+        librariesData={librariesData}
+        specsData={specsData}
+        openTooltip={openImageTooltip}
+        loadMoreRef={loadMoreRef}
+        imageSize={imageSize}
+        onTooltipToggle={setOpenImageTooltip}
+        onCardClick={handleCardClick}
         onTrackEvent={trackEvent}
       />
 
+      {!loading && allImages.length === 0 && !isFiltersEmpty(activeFilters) && (
+        <Alert severity="info" sx={{ maxWidth: 400, mx: 'auto' }}>
+          No plots match these filters.
+        </Alert>
+      )}
+
+      <Footer onTrackEvent={trackEvent} selectedSpec={selectedSpec} selectedLibrary={selectedLibrary} />
+
       {/* Floating scroll-to-top button */}
       <Fab
         size="small"
@@ -248,5 +228,3 @@ function App() {
     </Box>
   );
 }
-
-export default App;
diff --git a/app/src/pages/InteractivePage.tsx b/app/src/pages/InteractivePage.tsx
new file mode 100644
index 0000000000..2933d8d280
--- /dev/null
+++ b/app/src/pages/InteractivePage.tsx
@@ -0,0 +1,326 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { useParams, useNavigate, Link } from 'react-router-dom';
+import { Helmet } from 'react-helmet-async';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import CircularProgress from '@mui/material/CircularProgress';
+import CloseIcon from '@mui/icons-material/Close';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+
+import { API_URL } from '../constants';
+import { useAnalytics } from '../hooks';
+
+// Initial dimensions - will be updated via postMessage from iframe
+const INITIAL_WIDTH = 1600;
+const INITIAL_HEIGHT = 900;
+
+interface Implementation {
+  library_id: string;
+  preview_html?: string;
+}
+
+interface SpecDetail {
+  id: string;
+  title: string;
+  implementations: Implementation[];
+}
+
+export function InteractivePage() {
+  const { specId, library } = useParams();
+  const navigate = useNavigate();
+  const { trackPageview } = useAnalytics();
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Track interactive page view
+  useEffect(() => {
+    if (specId && library) {
+      trackPageview(`/interactive/${specId}/${library}`);
+    }
+  }, [specId, library, trackPageview]);
+
+  const [htmlUrl, setHtmlUrl] = useState<string | null>(null);
+  const [title, setTitle] = useState<string>('');
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [scale, setScale] = useState(1);
+  const [contentWidth, setContentWidth] = useState(INITIAL_WIDTH);
+  const [contentHeight, setContentHeight] = useState(INITIAL_HEIGHT);
+  const [sizeReady, setSizeReady] = useState(false);
+
+  // Calculate scale to fit container based on current content dimensions
+  const updateScale = useCallback(() => {
+    if (containerRef.current) {
+      // Account for padding (p: 3 = 24px on each side)
+      const padding = 48;
+      const containerWidth = containerRef.current.clientWidth - padding;
+      const containerHeight = containerRef.current.clientHeight - padding;
+      const scaleX = containerWidth / contentWidth;
+      const scaleY = containerHeight / contentHeight;
+      // Use 0.98 safety margin to prevent scrollbars from rounding errors
+      setScale(Math.min(scaleX, scaleY) * 0.98);
+    }
+  }, [contentWidth, contentHeight]);
+
+  // Listen for size reports from iframe
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      // Validate origin - only accept messages from our API domain
+      const allowedOrigins = [
+        window.location.origin, // Same origin (development)
+        'https://pyplots.ai',
+        'https://api.pyplots.ai',
+      ];
+      if (!allowedOrigins.includes(event.origin)) {
+        return;
+      }
+
+      if (event.data?.type === 'pyplots-size') {
+        const { width, height } = event.data;
+        if (typeof width === 'number' && typeof height === 'number' && width > 0 && height > 0) {
+          setContentWidth(width);
+          setContentHeight(height);
+          setSizeReady(true);
+        }
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, []);
+
+  // Update scale on mount, resize, and when content dimensions change
+  useEffect(() => {
+    const timer = setTimeout(updateScale, 100);
+    window.addEventListener('resize', updateScale);
+    return () => {
+      clearTimeout(timer);
+      window.removeEventListener('resize', updateScale);
+    };
+  }, [updateScale]);
+
+  // Fetch spec data to get preview_html URL
+  useEffect(() => {
+    if (!specId || !library) return;
+
+    const fetchSpec = async () => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        const res = await fetch(`${API_URL}/specs/${specId}`);
+        if (!res.ok) {
+          setError('Failed to load interactive plot');
+          return;
+        }
+
+        const data: SpecDetail = await res.json();
+        setTitle(data.title);
+
+        const impl = data.implementations.find((i) => i.library_id === library);
+        if (impl?.preview_html) {
+          setHtmlUrl(impl.preview_html);
+        } else {
+          setError('No interactive version available for this library');
+        }
+      } catch (err) {
+        console.error('Error fetching spec:', err);
+        setError('Failed to load interactive plot');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchSpec();
+  }, [specId, library]);
+
+  const handleClose = () => {
+    navigate(`/${specId}/${library}`);
+  };
+
+  // Open original (unmodified) HTML in new tab
+  const handleOpenExternal = () => {
+    if (htmlUrl) {
+      window.open(htmlUrl, '_blank', 'noopener,noreferrer');
+    }
+  };
+
+  // Build proxy URL for iframe (injects size reporter script)
+  const getProxyUrl = (url: string) => {
+    return `${API_URL}/proxy/html?url=${encodeURIComponent(url)}`;
+  };
+
+  if (loading) {
+    return (
+      <Box
+        sx={{
+          position: 'fixed',
+          inset: 0,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          bgcolor: '#fafafa',
+        }}
+      >
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  if (error || !htmlUrl) {
+    return (
+      <Box
+        sx={{
+          position: 'fixed',
+          inset: 0,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          bgcolor: '#fafafa',
+          fontFamily: '"MonoLisa", monospace',
+          color: '#6b7280',
+        }}
+      >
+        <Box sx={{ mb: 2 }}>{error || 'Interactive plot not available'}</Box>
+        <IconButton onClick={handleClose} sx={{ color: '#3776AB' }}>
+          <CloseIcon />
+        </IconButton>
+      </Box>
+    );
+  }
+
+  return (
+    <>
+      <Helmet>
+        <title>{`${title} - ${library} (Interactive) | pyplots.ai`}</title>
+      </Helmet>
+
+      <Box
+        sx={{
+          position: 'fixed',
+          inset: 0,
+          bgcolor: '#fff',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        {/* Breadcrumb navigation */}
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            px: 2,
+            py: 1,
+            bgcolor: '#f3f4f6',
+            borderBottom: '1px solid #e5e7eb',
+            fontFamily: '"MonoLisa", monospace',
+            fontSize: '0.85rem',
+          }}
+        >
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <Box
+              component={Link}
+              to="/"
+              sx={{
+                color: '#3776AB',
+                textDecoration: 'none',
+                '&:hover': { textDecoration: 'underline' },
+              }}
+            >
+              pyplots.ai
+            </Box>
+            <Box component="span" sx={{ mx: 1, color: '#9ca3af' }}>›</Box>
+            <Box
+              component={Link}
+              to="/catalog"
+              sx={{
+                color: '#3776AB',
+                textDecoration: 'none',
+                '&:hover': { textDecoration: 'underline' },
+              }}
+            >
+              catalog
+            </Box>
+            <Box component="span" sx={{ mx: 1, color: '#9ca3af' }}>›</Box>
+            <Box
+              component={Link}
+              to={`/${specId}`}
+              sx={{
+                color: '#3776AB',
+                textDecoration: 'none',
+                '&:hover': { textDecoration: 'underline' },
+              }}
+            >
+              {specId}
+            </Box>
+            <Box component="span" sx={{ mx: 1, color: '#9ca3af' }}>›</Box>
+            <Box
+              component={Link}
+              to={`/${specId}/${library}`}
+              sx={{
+                color: '#3776AB',
+                textDecoration: 'none',
+                '&:hover': { textDecoration: 'underline' },
+              }}
+            >
+              {library}
+            </Box>
+            <Box component="span" sx={{ mx: 1, color: '#9ca3af' }}>›</Box>
+            <Box component="span" sx={{ color: '#4b5563' }}>
+              interactive
+            </Box>
+          </Box>
+          <Tooltip title="View Raw HTML">
+            <IconButton onClick={handleOpenExternal} size="small">
+              <OpenInNewIcon fontSize="small" />
+            </IconButton>
+          </Tooltip>
+        </Box>
+
+        {/* Fullscreen iframe - scaled to fit container */}
+        <Box
+          ref={containerRef}
+          sx={{
+            flex: 1,
+            position: 'relative',
+            overflow: 'hidden',
+            bgcolor: '#fafafa',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            p: 3,
+          }}
+        >
+          <Box
+            sx={{
+              bgcolor: '#fff',
+              borderRadius: 2,
+              boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
+              overflow: 'hidden',
+              width: contentWidth * scale,
+              height: contentHeight * scale,
+              opacity: sizeReady ? 1 : 0,
+              transition: 'opacity 0.2s ease-in-out',
+            }}
+          >
+            <iframe
+              src={getProxyUrl(htmlUrl)}
+              width={contentWidth}
+              height={contentHeight}
+              style={{
+                width: contentWidth,
+                height: contentHeight,
+                border: 'none',
+                transform: `scale(${scale})`,
+                transformOrigin: 'top left',
+              }}
+              title={`${title} - ${library} interactive`}
+            />
+          </Box>
+        </Box>
+      </Box>
+    </>
+  );
+}
diff --git a/app/src/pages/SpecPage.tsx b/app/src/pages/SpecPage.tsx
new file mode 100644
index 0000000000..d9d510c487
--- /dev/null
+++ b/app/src/pages/SpecPage.tsx
@@ -0,0 +1,461 @@
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { useParams, useNavigate, Link } from 'react-router-dom';
+import { Helmet } from 'react-helmet-async';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import Skeleton from '@mui/material/Skeleton';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import DownloadIcon from '@mui/icons-material/Download';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import CheckIcon from '@mui/icons-material/Check';
+
+import { API_URL } from '../constants';
+import { useAnalytics } from '../hooks';
+import { LibraryPills } from '../components/LibraryPills';
+import { SpecTabs } from '../components/SpecTabs';
+import { Footer } from '../components';
+
+interface Implementation {
+  library_id: string;
+  library_name: string;
+  preview_url: string;
+  preview_thumb?: string;
+  preview_html?: string;
+  quality_score: number | null;
+  code: string | null;
+  generated_at?: string;
+  library_version?: string;
+  // Review fields
+  review_strengths?: string[];
+  review_weaknesses?: string[];
+  review_image_description?: string;
+  review_criteria_checklist?: Record<string, unknown>;
+  review_verdict?: string;
+}
+
+interface SpecDetail {
+  id: string;
+  title: string;
+  description: string;
+  applications?: string[];
+  data?: string[];
+  notes?: string[];
+  tags?: Record<string, string[]>;
+  created?: string;
+  updated?: string;
+  implementations: Implementation[];
+}
+
+export function SpecPage() {
+  const { specId, library: urlLibrary } = useParams();
+  const navigate = useNavigate();
+  const { trackEvent } = useAnalytics();
+
+  const [specData, setSpecData] = useState<SpecDetail | null>(null);
+  const [selectedLibrary, setSelectedLibrary] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [imageLoaded, setImageLoaded] = useState(false);
+  const [descExpanded, setDescExpanded] = useState(false);
+  const [codeCopied, setCodeCopied] = useState(false);
+
+  // Fetch spec data
+  useEffect(() => {
+    if (!specId) return;
+
+    const fetchSpec = async () => {
+      setLoading(true);
+      setError(null);
+      setImageLoaded(false);
+
+      try {
+        const res = await fetch(`${API_URL}/specs/${specId}`);
+        if (!res.ok) {
+          if (res.status === 404) {
+            setError('Spec not found');
+          } else {
+            setError('Failed to load spec');
+          }
+          return;
+        }
+
+        const data: SpecDetail = await res.json();
+        setSpecData(data);
+
+        // Set selected library
+        if (urlLibrary && data.implementations.some((impl) => impl.library_id === urlLibrary)) {
+          setSelectedLibrary(urlLibrary);
+        } else if (data.implementations.length > 0) {
+          // Pick random implementation
+          const randomIdx = Math.floor(Math.random() * data.implementations.length);
+          const randomLib = data.implementations[randomIdx].library_id;
+          setSelectedLibrary(randomLib);
+
+          // Update URL to include the library (without adding to history)
+          if (!urlLibrary) {
+            navigate(`/${specId}/${randomLib}`, { replace: true });
+          }
+        }
+      } catch (err) {
+        console.error('Error fetching spec:', err);
+        setError('Failed to load spec');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchSpec();
+  }, [specId, urlLibrary, navigate]);
+
+  // Get current implementation
+  const currentImpl = useMemo(() => {
+    if (!specData || !selectedLibrary) return null;
+    return specData.implementations.find((impl) => impl.library_id === selectedLibrary) || null;
+  }, [specData, selectedLibrary]);
+
+  // Handle library switch
+  const handleLibrarySelect = useCallback(
+    (libraryId: string) => {
+      setSelectedLibrary(libraryId);
+      setImageLoaded(false);
+      navigate(`/${specId}/${libraryId}`, { replace: true });
+      trackEvent('switch_library', { spec: specId, library: libraryId });
+    },
+    [specId, navigate, trackEvent]
+  );
+
+  // Handle download
+  const handleDownload = useCallback(() => {
+    if (!currentImpl?.preview_url) return;
+    const link = document.createElement('a');
+    link.href = currentImpl.preview_url;
+    link.download = `${specId}-${selectedLibrary}.png`;
+    link.click();
+    trackEvent('download_image', { spec: specId, library: selectedLibrary || undefined });
+  }, [currentImpl, specId, selectedLibrary, trackEvent]);
+
+  // Handle copy code
+  const handleCopyCode = useCallback(async () => {
+    if (!currentImpl?.code) return;
+    try {
+      await navigator.clipboard.writeText(currentImpl.code);
+      setCodeCopied(true);
+      trackEvent('copy_code', { spec: specId, library: selectedLibrary || undefined, method: 'image' });
+      setTimeout(() => setCodeCopied(false), 2000);
+    } catch (err) {
+      console.error('Copy failed:', err);
+    }
+  }, [currentImpl, specId, selectedLibrary, trackEvent]);
+
+  // Track page view
+  useEffect(() => {
+    if (specData && selectedLibrary) {
+      trackEvent('view_spec', { spec: specId, library: selectedLibrary });
+    }
+  }, [specData, selectedLibrary, specId, trackEvent]);
+
+  if (loading) {
+    return (
+      <Box sx={{ textAlign: 'center', py: 8 }}>
+        <Skeleton variant="rectangular" width="100%" height={400} sx={{ maxWidth: 800, mx: 'auto', borderRadius: 2 }} />
+        <Box sx={{ display: 'flex', gap: 1, justifyContent: 'center', mt: 2 }}>
+          {[1, 2, 3, 4].map((i) => (
+            <Skeleton key={i} variant="rounded" width={80} height={32} />
+          ))}
+        </Box>
+      </Box>
+    );
+  }
+
+  if (error || !specData) {
+    return (
+      <Box sx={{ textAlign: 'center', py: 8 }}>
+        <Typography variant="h5" sx={{ mb: 2, color: '#6b7280' }}>
+          {error || 'Spec not found'}
+        </Typography>
+        <Button component={Link} to="/" startIcon={<ArrowBackIcon />} sx={{ color: '#3776AB' }}>
+          Back to Home
+        </Button>
+      </Box>
+    );
+  }
+
+  return (
+    <>
+      <Helmet>
+        <title>{`${specData.title} - ${selectedLibrary} | pyplots.ai`}</title>
+        <meta name="description" content={specData.description} />
+        <meta property="og:title" content={`${specData.title} - ${selectedLibrary} | pyplots.ai`} />
+        <meta property="og:description" content={specData.description} />
+        {currentImpl?.preview_url && <meta property="og:image" content={currentImpl.preview_url} />}
+        <meta property="og:url" content={`https://pyplots.ai/${specId}/${selectedLibrary}`} />
+      </Helmet>
+
+      <Box sx={{ pb: 4 }}>
+        {/* Breadcrumb navigation */}
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            mx: { xs: -2, sm: -4, md: -8, lg: -12 },
+            mt: -5, // Compensate for Layout padding
+            px: 2,
+            py: 1,
+            mb: 2,
+            bgcolor: '#f3f4f6',
+            borderBottom: '1px solid #e5e7eb',
+            fontFamily: '"MonoLisa", monospace',
+            fontSize: '0.85rem',
+          }}
+        >
+          <Box
+            component={Link}
+            to="/"
+            sx={{
+              color: '#3776AB',
+              textDecoration: 'none',
+              '&:hover': { textDecoration: 'underline' },
+            }}
+          >
+            pyplots.ai
+          </Box>
+          <Box component="span" sx={{ mx: 1, color: '#9ca3af' }}>›</Box>
+          <Box
+            component={Link}
+            to="/catalog"
+            sx={{
+              color: '#3776AB',
+              textDecoration: 'none',
+              '&:hover': { textDecoration: 'underline' },
+            }}
+          >
+            catalog
+          </Box>
+          <Box component="span" sx={{ mx: 1, color: '#9ca3af' }}>›</Box>
+          <Box
+            component={Link}
+            to={`/${specId}`}
+            sx={{
+              color: '#3776AB',
+              textDecoration: 'none',
+              '&:hover': { textDecoration: 'underline' },
+            }}
+          >
+            {specId}
+          </Box>
+          <Box component="span" sx={{ mx: 1, color: '#9ca3af' }}>›</Box>
+          <Box component="span" sx={{ color: '#4b5563' }}>
+            {selectedLibrary}
+          </Box>
+        </Box>
+
+        {/* Title */}
+        <Typography
+          variant="h4"
+          component="h1"
+          sx={{
+            textAlign: 'center',
+            fontFamily: '"MonoLisa", monospace',
+            fontWeight: 600,
+            fontSize: { xs: '1.25rem', sm: '1.5rem', md: '2rem' },
+            mb: 1,
+            color: '#1f2937',
+          }}
+        >
+          {specData.title}
+        </Typography>
+
+        {/* Description */}
+        <Typography
+          onClick={() => !descExpanded && setDescExpanded(true)}
+          sx={{
+            textAlign: 'center',
+            fontFamily: '"MonoLisa", monospace',
+            fontSize: { xs: '0.8rem', sm: '0.9rem' },
+            color: '#6b7280',
+            maxWidth: { xs: '100%', md: 800, lg: 950, xl: 1100 },
+            mx: 'auto',
+            mb: 2,
+            lineHeight: 1.6,
+            cursor: descExpanded ? 'default' : 'pointer',
+            ...(!descExpanded && {
+              display: '-webkit-box',
+              WebkitLineClamp: 5,
+              WebkitBoxOrient: 'vertical',
+              overflow: 'hidden',
+            }),
+          }}
+        >
+          {specData.description}
+        </Typography>
+
+        {/* Library Carousel */}
+        <LibraryPills
+          implementations={specData.implementations}
+          selectedLibrary={selectedLibrary || ''}
+          onSelect={handleLibrarySelect}
+        />
+
+        {/* Main Image (full width) */}
+        <Box
+          sx={{
+            maxWidth: { xs: '100%', md: 1200, lg: 1400, xl: 1600 },
+            mx: 'auto',
+          }}
+        >
+          <Box
+            sx={{
+              position: 'relative',
+              borderRadius: 2,
+              overflow: 'hidden',
+              bgcolor: '#fff',
+              boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
+              aspectRatio: '16/9',
+              '&:hover .impl-counter': {
+                opacity: 1,
+              },
+            }}
+          >
+          {!imageLoaded && (
+            <Skeleton
+              variant="rectangular"
+              sx={{
+                position: 'absolute',
+                inset: 0,
+                width: '100%',
+                height: '100%',
+              }}
+            />
+          )}
+          {currentImpl?.preview_url && (
+            <Box
+              component="img"
+              src={currentImpl.preview_url}
+              alt={`${specData.title} - ${selectedLibrary}`}
+              onLoad={() => setImageLoaded(true)}
+              sx={{
+                width: '100%',
+                height: '100%',
+                objectFit: 'contain',
+                display: imageLoaded ? 'block' : 'none',
+              }}
+            />
+          )}
+
+          {/* Action Buttons (top-right) */}
+          <Box
+            sx={{
+              position: 'absolute',
+              top: 8,
+              right: 8,
+              display: 'flex',
+              gap: 0.5,
+            }}
+          >
+            {currentImpl?.code && (
+              <Tooltip title={codeCopied ? 'Copied!' : 'Copy Code'}>
+                <IconButton
+                  onClick={handleCopyCode}
+                  sx={{
+                    bgcolor: 'rgba(255,255,255,0.9)',
+                    '&:hover': { bgcolor: '#fff' },
+                  }}
+                  size="small"
+                >
+                  {codeCopied ? <CheckIcon fontSize="small" color="success" /> : <ContentCopyIcon fontSize="small" />}
+                </IconButton>
+              </Tooltip>
+            )}
+            <Tooltip title="Download PNG">
+              <IconButton
+                onClick={handleDownload}
+                sx={{
+                  bgcolor: 'rgba(255,255,255,0.9)',
+                  '&:hover': { bgcolor: '#fff' },
+                }}
+                size="small"
+              >
+                <DownloadIcon fontSize="small" />
+              </IconButton>
+            </Tooltip>
+            {currentImpl?.preview_html && (
+              <Tooltip title="Open Interactive">
+                <IconButton
+                  component={Link}
+                  to={`/interactive/${specId}/${selectedLibrary}`}
+                  onClick={() => trackEvent('open_interactive', { spec: specId, library: selectedLibrary || undefined })}
+                  sx={{
+                    bgcolor: 'rgba(255,255,255,0.9)',
+                    '&:hover': { bgcolor: '#fff' },
+                  }}
+                  size="small"
+                >
+                  <OpenInNewIcon fontSize="small" />
+                </IconButton>
+              </Tooltip>
+            )}
+          </Box>
+
+          {/* Implementation counter (hover) */}
+          {specData.implementations.length > 1 && (
+            <Box
+              className="impl-counter"
+              sx={{
+                position: 'absolute',
+                bottom: 8,
+                right: 8,
+                px: 1,
+                py: 0.25,
+                bgcolor: 'rgba(0,0,0,0.6)',
+                borderRadius: 1,
+                fontSize: '0.75rem',
+                fontFamily: '"MonoLisa", monospace',
+                color: '#fff',
+                opacity: 0,
+                transition: 'opacity 0.2s',
+              }}
+            >
+              {[...specData.implementations]
+                .sort((a, b) => a.library_id.localeCompare(b.library_id))
+                .findIndex((impl) => impl.library_id === selectedLibrary) + 1}
+              /{specData.implementations.length}
+            </Box>
+          )}
+          </Box>
+        </Box>
+
+        {/* Tabs */}
+        <SpecTabs
+          // Code tab
+          code={currentImpl?.code || null}
+          // Specification tab
+          specId={specData.id}
+          title={specData.title}
+          description={specData.description}
+          applications={specData.applications}
+          data={specData.data}
+          notes={specData.notes}
+          tags={specData.tags}
+          created={specData.created}
+          // Implementation tab
+          imageDescription={currentImpl?.review_image_description}
+          strengths={currentImpl?.review_strengths}
+          weaknesses={currentImpl?.review_weaknesses}
+          // Quality tab
+          qualityScore={currentImpl?.quality_score || null}
+          criteriaChecklist={currentImpl?.review_criteria_checklist}
+          // Common
+          libraryId={selectedLibrary || ''}
+          onTrackEvent={trackEvent}
+        />
+
+        {/* Footer */}
+        <Footer onTrackEvent={trackEvent} selectedSpec={specId} selectedLibrary={selectedLibrary || ''} />
+      </Box>
+    </>
+  );
+}
diff --git a/app/src/router.tsx b/app/src/router.tsx
new file mode 100644
index 0000000000..2d46228e0f
--- /dev/null
+++ b/app/src/router.tsx
@@ -0,0 +1,32 @@
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { HelmetProvider } from 'react-helmet-async';
+import { Layout, AppDataProvider } from './components/Layout';
+import { HomePage } from './pages/HomePage';
+import { SpecPage } from './pages/SpecPage';
+import { CatalogPage } from './pages/CatalogPage';
+import { InteractivePage } from './pages/InteractivePage';
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <Layout />,
+    children: [
+      { index: true, element: <HomePage /> },
+      { path: 'catalog', element: <CatalogPage /> },
+      { path: ':specId', element: <SpecPage /> },
+      { path: ':specId/:library', element: <SpecPage /> },
+    ],
+  },
+  // Fullscreen interactive view (outside Layout but inside AppDataProvider)
+  { path: 'interactive/:specId/:library', element: <InteractivePage /> },
+]);
+
+export function AppRouter() {
+  return (
+    <HelmetProvider>
+      <AppDataProvider>
+        <RouterProvider router={router} />
+      </AppDataProvider>
+    </HelmetProvider>
+  );
+}
diff --git a/app/yarn.lock b/app/yarn.lock
index ae54075ca9..63c5bdcfbc 100644
--- a/app/yarn.lock
+++ b/app/yarn.lock
@@ -324,11 +324,6 @@
   resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.27.1.tgz#5efe5a112938b1180e98c76685ff9185cfa4f16e"
   integrity sha512-d5X6RMYv6taIymSk8JBP+nxv8DQAMY6A51GPgusqLdK9wBz5wWIXy1KjTck6HnjE9hqJzJRdk+1p/t5soSbCtw==
 
-"@fontsource/inter@^5.2.8":
-  version "5.2.8"
-  resolved "https://registry.npmjs.org/@fontsource/inter/-/inter-5.2.8.tgz"
-  integrity sha512-P6r5WnJoKiNVV+zvW2xM13gNdFhAEpQ9dQJHt3naLvfg+LkF2ldgSLiF4T41lf1SQCM9QmkqPTn4TH568IRagg==
-
 "@jridgewell/gen-mapping@^0.3.12":
   version "0.3.13"
   resolved "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz"
@@ -753,6 +748,11 @@ convert-source-map@^1.5.0:
   resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz"
   integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
 
+cookie@^1.0.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-1.1.1.tgz#3bb9bdfc82369db9c2f69c93c9c3ceb310c88b3c"
+  integrity sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==
+
 cosmiconfig@^7.0.0:
   version "7.1.0"
   resolved "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz"
@@ -917,6 +917,13 @@ import-fresh@^3.2.1:
     parent-module "^1.0.0"
     resolve-from "^4.0.0"
 
+invariant@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+  dependencies:
+    loose-envify "^1.0.0"
+
 is-alphabetical@^2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz"
@@ -972,7 +979,7 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
-loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -1087,6 +1094,20 @@ react-dom@^19.2.3:
   dependencies:
     scheduler "^0.27.0"
 
+react-fast-compare@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
+  integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
+
+react-helmet-async@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-2.0.5.tgz#cfc70cd7bb32df7883a8ed55502a1513747223ec"
+  integrity sha512-rYUYHeus+i27MvFE+Jaa4WsyBKGkL6qVgbJvSBoX8mbsWoABJXdEO0bZyi0F6i+4f0NuIb8AvqPMj3iXFHkMwg==
+  dependencies:
+    invariant "^2.2.4"
+    react-fast-compare "^3.2.2"
+    shallowequal "^1.1.0"
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
@@ -1097,6 +1118,21 @@ react-is@^19.2.0:
   resolved "https://registry.npmjs.org/react-is/-/react-is-19.2.0.tgz"
   integrity sha512-x3Ax3kNSMIIkyVYhWPyO09bu0uttcAIoecO/um/rKGQ4EltYWVYtyiGkS/3xMynrbVQdS69Jhlv8FXUEZehlzA==
 
+react-router-dom@^7.11.0:
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-7.11.0.tgz#2165f63e52798bd0eb138480c098ad058cdf3413"
+  integrity sha512-e49Ir/kMGRzFOOrYQBdoitq3ULigw4lKbAyKusnvtDu2t4dBX4AGYPrzNvorXmVuOyeakai6FUPW5MmibvVG8g==
+  dependencies:
+    react-router "7.11.0"
+
+react-router@7.11.0:
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-7.11.0.tgz#d3b91567fdbe910caf9064ea69b7b4d9264f2945"
+  integrity sha512-uI4JkMmjbWCZc01WVP2cH7ZfSzH91JAZUDd7/nIprDgWxBV1TkkmLToFh7EbMTcMak8URFRa2YoBL/W8GWnCTQ==
+  dependencies:
+    cookie "^1.0.1"
+    set-cookie-parser "^2.6.0"
+
 react-syntax-highlighter@^16.1.0:
   version "16.1.0"
   resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-16.1.0.tgz#ebe0bb5ae7a3540859212cedafd767f0189c516c"
@@ -1184,6 +1220,16 @@ scheduler@^0.27.0:
   resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz"
   integrity sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==
 
+set-cookie-parser@^2.6.0:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz#ccd08673a9ae5d2e44ea2a2de25089e67c7edf68"
+  integrity sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==
+
+shallowequal@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
 source-map-js@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz"
diff --git a/tests/unit/api/test_routers.py b/tests/unit/api/test_routers.py
index 43fd47039b..17e252b275 100644
--- a/tests/unit/api/test_routers.py
+++ b/tests/unit/api/test_routers.py
@@ -68,6 +68,12 @@ def mock_spec():
     mock_impl.generated_by = "claude"
     mock_impl.python_version = "3.13"
     mock_impl.library_version = "3.10.0"
+    # Review fields (must be proper types, not MagicMock)
+    mock_impl.review_image_description = "A scatter plot showing data points"
+    mock_impl.review_criteria_checklist = {"visual_quality": {"score": 36, "max": 40}}
+    mock_impl.review_verdict = "APPROVED"
+    mock_impl.review_strengths = ["Clean code", "Good visualization"]
+    mock_impl.review_weaknesses = ["Could use better labels"]
 
     mock_spec = MagicMock()
     mock_spec.id = "scatter-basic"
@@ -84,6 +90,8 @@ def mock_spec():
     }
     mock_spec.issue = 42
     mock_spec.suggested = "contributor"
+    mock_spec.created = None  # Must be None or datetime, not MagicMock
+    mock_spec.updated = None  # Must be None or datetime, not MagicMock
     mock_spec.impls = [mock_impl]
 
     return mock_spec
@@ -425,7 +433,9 @@ def test_sitemap_with_db(self, db_client, mock_spec) -> None:
         ):
             response = client.get("/sitemap.xml")
             assert response.status_code == 200
-            assert "spec=scatter-basic" in response.text
+            # New URL format: /, /catalog, /{spec_id}
+            assert "https://pyplots.ai/catalog" in response.text
+            assert "https://pyplots.ai/scatter-basic" in response.text
 
 
 class TestPlotsRouter: