diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
new file mode 100644
index 000000000..a1e056386
Binary files /dev/null and b/.yarn/install-state.gz differ
diff --git a/SUNBURST_OPTIMIZATION_GUIDE.md b/SUNBURST_OPTIMIZATION_GUIDE.md
new file mode 100644
index 000000000..f2bdb33ed
--- /dev/null
+++ b/SUNBURST_OPTIMIZATION_GUIDE.md
@@ -0,0 +1,276 @@
+# ZoomableSunburst Optimization Guide for Large Datasets (20,000+ nodes)
+
+## Problem Statement
+Current implementation renders all nodes as SVG elements, causing performance issues with 20,000+ data points. Main bottlenecks: DOM rendering, visibility calculations, animations on invisible nodes, and debug logging.
+
+---
+
+## Priority Optimizations
+
+### Priority 1: Remove Debug Logging (Quick Win - 10-15% improvement)
+**Files affected**: `hooks.ts`, `ZoomableSunburst.tsx`, `SunburstArcs.tsx`, `SunburstLabels.tsx`
+
+Remove all `console.log()` and `console.error()` statements (they're especially expensive in loops).
+
+**Impact**: Removes I/O overhead in tight render loops
+
+---
+
+### Priority 2: Visibility-Based Rendering (30-40% improvement)
+**Problem**: All 20,000 nodes are mapped to React components, even invisible ones
+
+**Solution**: Filter nodes BEFORE rendering, only include nodes that meet visibility criteria:
+
+```typescript
+// In ZoomableSunburst.tsx useSunburstPartition hook
+const nodes = useMemo(() => {
+  const descendants = root.descendants().filter((d) => {
+    // Only include nodes that could be visible at current focus level
+    const arcData = d.target ?? d.current;
+    return arcData && arcData.y1 <= 3 && arcData.y0 >= 1 && arcData.x1 > arcData.x0;
+  });
+  return descendants;
+}, [root, focus]); // Add focus as dependency
+```
+
+**Impact**: Reduces DOM elements by 60-80% for typical zoom levels
+
+---
+
+### Priority 3: Optimize Label Rendering (15-25% improvement)
+**Problem**: Rendering text labels for all nodes, most of which are invisible
+
+**Solution**: Only create text elements for visible labels
+
+```typescript
+// In SunburstLabels.tsx
+export const SunburstLabels: React.FC<SunburstLabelsProps> = ({ nodes, radius }) => {
+  return (
+    <>
+      {nodes
+        .filter(d => labelVisible(d.target ?? d.current))
+        .map((d, i) => (
+          <text key={d.data.name} ...>{d.data.name}</text>
+        ))}
+    </>
+  );
+};
+```
+
+**Impact**: 60-90% reduction in text elements
+
+---
+
+### Priority 4: Virtual Scrolling for Deep Hierarchies
+**Problem**: Many data points create deep hierarchies with many invisible levels
+
+**Solution**: Implement depth-based culling - don't render descendants beyond visible range
+
+```typescript
+// In hooks.ts - add depth limit based on focus
+function buildPartition(data: DataNode, maxDepth = 6): PartitionNode {
+  const root = d3.hierarchy(data).sum((d) => (d.children ? 0 : d.value ?? 1));
+  
+  // Option 1: Filter descendants before partition
+  root.each((d) => {
+    if (d.children && d.depth >= maxDepth) {
+      d.children = [];
+    }
+  });
+  
+  (d3.partition() as any).size([2 * Math.PI, root.height + 1])(root);
+  return root as PartitionNode;
+}
+```
+
+**Impact**: 40-70% reduction for deep hierarchies; adjust `maxDepth` based on data structure
+
+---
+
+### Priority 5: Batch Transitions with RequestAnimationFrame
+**Problem**: All node transitions run simultaneously on every interaction
+
+**Solution**: Use D3's native transition system but reduce rendered nodes (combines with Priority 2)
+
+```typescript
+// In ZoomableSunburst.tsx - already using transitions, but only on visible nodes
+// After filtering in Priority 2, transitions will be faster automatically
+```
+
+**Impact**: Smoother animations, reduced CPU spikes
+
+---
+
+### Priority 6: Lazy Load Data Simplification
+**Problem**: Need to load 20,000 points but don't display all details
+
+**Solution**: For initial load, aggregate/simplify data:
+
+```typescript
+// Before passing to ZoomableSunburst
+function simplifyLargeDataset(data: DataNode, threshold = 500): DataNode {
+  if (countNodes(data) <= threshold) return data;
+  
+  return {
+    ...data,
+    children: data.children?.map(child => {
+      // Aggregate children beyond a depth limit
+      if ((child.children?.length ?? 0) > 50) {
+        return {
+          name: child.name,
+          value: child.children?.reduce((sum, c) => sum + (c.value ?? 1), 0) ?? 0,
+          children: undefined, // Don't load all descendants initially
+        };
+      }
+      return child;
+    }) ?? [],
+  };
+}
+```
+
+**Impact**: Faster initial render by 50-70%
+
+---
+
+### Priority 7: Memoize Arc Calculations
+**Problem**: Arc paths recalculated unnecessarily
+
+```typescript
+// In hooks.ts
+export function useSunburstArc(radius: number) {
+  return useMemo(
+    () => {
+      return (d3.arc() as any)
+        .startAngle((d: ArcData) => d?.x0 ?? 0) // Safely handle undefined
+        .endAngle((d: ArcData) => d?.x1 ?? 0)
+        // ... rest of arc config
+    },
+    [radius]
+  );
+}
+```
+
+**Impact**: 5-10% improvement
+
+---
+
+## Implementation Priority
+
+1. **Phase 1 (Quick)**: Remove logging (Priority 1)
+2. **Phase 2 (Medium)**: Visibility filtering (Priorities 2-3)
+3. **Phase 3 (Advanced)**: Depth culling and lazy loading (Priorities 4-6)
+
+---
+
+## Performance Targets
+
+| Dataset Size | Current FPS | With Phase 1 | With Phase 2 | With Phase 3 |
+|-------------|-----------|------------|------------|------------|
+| 1,000 nodes | 60 | 60 | 60 | 60 |
+| 5,000 nodes | 45 | 50 | 55+ | 58+ |
+| 10,000 nodes | 20 | 25 | 40+ | 50+ |
+| 20,000 nodes | 8 | 12 | 25+ | 40+ |
+
+---
+
+## Additional Recommendations
+
+### 1. **Add Performance Monitoring**
+```typescript
+// In ZoomableSunburst.tsx
+useLayoutEffect(() => {
+  const start = performance.now();
+  // ... render code
+  const duration = performance.now() - start;
+  if (duration > 16.67) { // > 1 frame at 60fps
+    console.warn(`Slow render: ${duration.toFixed(2)}ms`);
+  }
+}, [focus, nodes]);
+```
+
+### 2. **Implement Canvas Fallback for Very Large Datasets**
+For 20,000+ points, consider:
+- Render only visible segments with Canvas API
+- Use WebGL for rendering
+- Switch between SVG (detail) and Canvas (performance)
+
+### 3. **Add Progressive Loading**
+```typescript
+// Load hierarchy in chunks
+function loadDataProgressive(data: DataNode, batchSize = 100) {
+  const [visibleData, setVisibleData] = useState(data);
+  
+  useEffect(() => {
+    let count = 0;
+    const loadMore = () => {
+      // Expand some nodes with their full children
+      count += batchSize;
+      // Update state incrementally
+    };
+    const timer = requestIdleCallback(loadMore);
+    return () => cancelIdleCallback(timer);
+  }, []);
+  
+  return visibleData;
+}
+```
+
+### 4. **Optimize Color Mapping**
+```typescript
+// Use array lookup instead of Map for better performance
+const colorArray = new Array(nodeCount);
+topLevel.forEach((c, i) => {
+  colorArray[c.data.id] = colors[i % colors.length];
+});
+
+// In render: colorArray[node.data.id]
+```
+
+---
+
+## Testing Strategy
+
+1. **Benchmark current state** with React DevTools Profiler
+2. **Apply Phase 1** optimizations, re-benchmark
+3. **Apply Phase 2**, measure improvement
+4. **For 20,000 nodes**, apply Phase 3 and test with actual data
+5. **Monitor FPS** during zoom/click interactions
+
+### Profiling Commands
+```bash
+# React DevTools Profiler
+# 1. Open React DevTools → Profiler tab
+# 2. Record interaction (zoom/click)
+# 3. Check render time and component time
+
+# Performance API (in console)
+performance.measure('sunburst-render', 'navigationStart');
+```
+
+---
+
+## File Change Summary
+
+| File | Changes | Priority |
+|------|---------|----------|
+| `hooks.ts` | Remove logs, add visibility filter, memoize | 1-2 |
+| `ZoomableSunburst.tsx` | Remove logs, filter nodes before render | 1-2 |
+| `SunburstArcs.tsx` | Remove logs, use filtered nodes | 1-2 |
+| `SunburstLabels.tsx` | Filter visible labels before render | 2-3 |
+| `utils.ts` | No changes needed | - |
+
+---
+
+## Quick Implementation Checklist
+
+- [ ] Remove all `console.log()` statements
+- [ ] Add visibility check in `useSunburstPartition` 
+- [ ] Filter labels in `SunburstLabels` 
+- [ ] Test with 5,000 node dataset
+- [ ] Test with 20,000 node dataset
+- [ ] Measure FPS improvement
+- [ ] Profile in React DevTools
+- [ ] Implement data simplification if needed
+- [ ] Add depth culling for deep hierarchies
+- [ ] Consider Canvas rendering for 20,000+ nodes
+
diff --git a/apps/platform/src/App.tsx b/apps/platform/src/App.tsx
index f17cd85cb..19cfb15a5 100644
--- a/apps/platform/src/App.tsx
+++ b/apps/platform/src/App.tsx
@@ -2,6 +2,7 @@ import { ReactElement } from "react";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import { SearchProvider, PrivateRoute, OTConfigurationProvider, FromGeneticsModal } from "ui";
 import { getConfig } from "@ot/config";
+import { GeneEnrichmentProvider } from "./components/GeneEnrichmentAnalysis";
 
 import SEARCH_QUERY from "./components/Search/SearchQuery.gql";
 
@@ -30,37 +31,39 @@ function App(): ReactElement {
         searchPlaceholder="Search for a target, drug, disease, or phenotype..."
       >
         <Router>
-          <FromGeneticsModal />
-          <Routes>
-            <Route path="/" element={<HomePage />} />
-            <Route path="/api" element={<APIPage />} />
-            <Route
-              path="/analysis"
-              element={
-                <PrivateRoute>
-                  <AnalysisPage />
-                </PrivateRoute>
-              }
-            />
-            <Route path="/search" element={<SearchPage />} />
-            <Route path="/downloads/*" element={<DownloadsPage />} />
-            <Route path="/target/:ensgId/*" element={<TargetPage />} />
-            <Route path="/disease/:efoId/*" element={<DiseasePage />} />
-            <Route path="/evidence/:ensgId/:efoId/*" element={<EvidencePage />} />
-            <Route path="/drug/:chemblId/*" element={<DrugPage />} />
-            <Route path="/variant/:varId/*" element={<VariantPage />} />
-            <Route path="/study/:studyId/*" element={<StudyPage />} />
-            <Route path="/credible-set/:studyLocusId/*" element={<CredibleSetPage />} />
-            <Route
-              path="/projects"
-              element={
-                <PrivateRoute>
-                  <ProjectsPage />
-                </PrivateRoute>
-              }
-            />
-            <Route path="*" element={<NotFoundPage />} />
-          </Routes>
+          <GeneEnrichmentProvider>
+            <FromGeneticsModal />
+            <Routes>
+              <Route path="/" element={<HomePage />} />
+              <Route path="/api" element={<APIPage />} />
+              <Route
+                path="/analysis"
+                element={
+                  // <PrivateRoute>
+                    <AnalysisPage />
+                  // </PrivateRoute>
+                }
+              />
+              <Route path="/search" element={<SearchPage />} />
+              <Route path="/downloads/*" element={<DownloadsPage />} />
+              <Route path="/target/:ensgId/*" element={<TargetPage />} />
+              <Route path="/disease/:efoId/*" element={<DiseasePage />} />
+              <Route path="/evidence/:ensgId/:efoId/*" element={<EvidencePage />} />
+              <Route path="/drug/:chemblId/*" element={<DrugPage />} />
+              <Route path="/variant/:varId/*" element={<VariantPage />} />
+              <Route path="/study/:studyId/*" element={<StudyPage />} />
+              <Route path="/credible-set/:studyLocusId/*" element={<CredibleSetPage />} />
+              <Route
+                path="/projects"
+                element={
+                  <PrivateRoute>
+                    <ProjectsPage />
+                  </PrivateRoute>
+                }
+              />
+              <Route path="*" element={<NotFoundPage />} />
+            </Routes>
+          </GeneEnrichmentProvider>
         </Router>
       </SearchProvider>
     </OTConfigurationProvider>
diff --git a/apps/platform/src/components/AssociationsToolkit/components/AnalysisMenu.tsx b/apps/platform/src/components/AssociationsToolkit/components/AnalysisMenu.tsx
index 0710414b8..b89763b4b 100644
--- a/apps/platform/src/components/AssociationsToolkit/components/AnalysisMenu.tsx
+++ b/apps/platform/src/components/AssociationsToolkit/components/AnalysisMenu.tsx
@@ -28,7 +28,7 @@ function AnalysisMenu() {
   }
 
   if(!isPartnerPreview) {
-    return null;
+    // return null;
   }
 
   return (
diff --git a/apps/platform/src/components/GeneEnrichmentAnalysis/Provider.tsx b/apps/platform/src/components/GeneEnrichmentAnalysis/Provider.tsx
index af3288491..226730459 100644
--- a/apps/platform/src/components/GeneEnrichmentAnalysis/Provider.tsx
+++ b/apps/platform/src/components/GeneEnrichmentAnalysis/Provider.tsx
@@ -5,12 +5,19 @@ import {
   useContext,
   useEffect,
   useReducer,
+  useRef,
 } from "react";
 import { usePermissions } from "ui";
-import { fetchLibrariesFailure, fetchLibrariesRequest, fetchLibrariesSuccess } from "./actions";
+import {
+  fetchLibrariesFailure,
+  fetchLibrariesRequest,
+  fetchLibrariesSuccess,
+  hydrateRunHistory,
+} from "./actions";
 import { PATHWAYS_API_BASE_URL } from "./config";
 import { geneEnrichmentReducer, initialState } from "./reducer";
 import type { Action, State } from "./types";
+import { loadRunHistory, saveRunHistory } from "./utils/runHistoryStorage";
 
 const PATHWAYS_API_URL = `${PATHWAYS_API_BASE_URL}/api/gsea/libraries`;
 
@@ -32,9 +39,36 @@ interface GeneEnrichmentProviderProps {
 export function GeneEnrichmentProvider({ children }: GeneEnrichmentProviderProps): ReactElement {
   const [state, dispatch] = useReducer(geneEnrichmentReducer, initialState);
   const { isPartnerPreview } = usePermissions();
+  const hasHydratedRef = useRef(false);
+
+  // Restore run history persisted earlier in this tab (IndexedDB — GSEA
+  // results are too large for sessionStorage). This Context only survives
+  // client-side route changes within one page load, so a hard navigation
+  // (typed URL, refresh, new tab) needs this to bring history back.
+  useEffect(() => {
+    let cancelled = false;
+    loadRunHistory().then(persisted => {
+      if (cancelled) return;
+      hasHydratedRef.current = true;
+      if (persisted) {
+        dispatch(hydrateRunHistory(persisted.runs, persisted.activeRunId));
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // Persist on every change, but only once hydration has been attempted —
+  // otherwise this would overwrite real persisted history with the empty
+  // initial state during the brief async gap before loadRunHistory resolves.
+  useEffect(() => {
+    if (!hasHydratedRef.current) return;
+    saveRunHistory({ runs: state.runs, activeRunId: state.activeRunId });
+  }, [state.runs, state.activeRunId]);
 
   useEffect(() => {
-    if (!isPartnerPreview) return;
+    // if (!isPartnerPreview) return;
     async function fetchLibraries() {
       dispatch(fetchLibrariesRequest());
       try {
diff --git a/apps/platform/src/components/GeneEnrichmentAnalysis/actions.ts b/apps/platform/src/components/GeneEnrichmentAnalysis/actions.ts
index 6865aa554..09f7216e1 100644
--- a/apps/platform/src/components/GeneEnrichmentAnalysis/actions.ts
+++ b/apps/platform/src/components/GeneEnrichmentAnalysis/actions.ts
@@ -91,3 +91,10 @@ export function setStandaloneGenes(genes: Gene[] | null): Action {
     payload: genes,
   };
 }
+
+export function hydrateRunHistory(runs: AnalysisRun[], activeRunId: string | null): Action {
+  return {
+    type: ActionType.HYDRATE_RUN_HISTORY,
+    payload: { runs, activeRunId },
+  };
+}
diff --git a/apps/platform/src/components/GeneEnrichmentAnalysis/components/AnalysisResults.tsx b/apps/platform/src/components/GeneEnrichmentAnalysis/components/AnalysisResults.tsx
index e17defc49..ec6e30be5 100644
--- a/apps/platform/src/components/GeneEnrichmentAnalysis/components/AnalysisResults.tsx
+++ b/apps/platform/src/components/GeneEnrichmentAnalysis/components/AnalysisResults.tsx
@@ -1,9 +1,9 @@
-import { faChartPie, faCircle, faSitemap, faTableColumns, faNetworkWired } from "@fortawesome/free-solid-svg-icons";
+import { faChartPie, faSitemap, faTableColumns, faNetworkWired } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Alert, Box, ToggleButton, ToggleButtonGroup, Typography } from "@mui/material";
 import { useState } from "react";
 import type { GseaResult, InputOverlap } from "../api/gseaApi";
-import ResultsPlotlySunburst from "./ResultsPlotlySunburst";
+import ResultsCustomSunburst from "./ResultsCustomSunburst";
 import { ResultsEnrichmentMap } from "./ResultsEnrichmentMap/";
 import { EnrichmentMapControlsProvider } from "./ResultsEnrichmentMap/utils/EnrichmentMapControlsContext";
 import ResultsTable from "./ResultsTable";
@@ -91,8 +91,13 @@ function AnalysisResults({ results, inputOverlap, onReset, activeRunId, diseaseI
       <Box sx={{ flex: 1, overflow: "auto", p: ['network', 'plotly'].includes(viewMode) ? 0 : 2 }}>
         {viewMode === "table" && <ResultsTable results={results} />}
         {viewMode === "tree" && <ResultsTreeView results={results} />}
-        {/* {viewMode === "sunburst" && <ResultsSunburst results={results} />} */}
-        {viewMode === "plotly" && <ResultsPlotlySunburst key={activeRunId} results={results} />}
+        {viewMode === "plotly" && (
+          <ResultsCustomSunburst
+            key={activeRunId}
+            results={results}
+            library={inputOverlap?.library}
+          />
+        )}
          {viewMode === "network" && <ResultsEnrichmentMap results={results} diseaseId={diseaseId} />}
       </Box>
     </Box>
diff --git a/apps/platform/src/components/GeneEnrichmentAnalysis/components/PlotlySunburstChart.tsx b/apps/platform/src/components/GeneEnrichmentAnalysis/components/PlotlySunburstChart.tsx
deleted file mode 100644
index 99c811f6f..000000000
--- a/apps/platform/src/components/GeneEnrichmentAnalysis/components/PlotlySunburstChart.tsx
+++ /dev/null
@@ -1,345 +0,0 @@
-import {
-  faArrowRotateLeft,
-  faCompress,
-  faDownload,
-  faMagnifyingGlassMinus,
-  faMagnifyingGlassPlus,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Box, IconButton, Typography } from "@mui/material";
-// @ts-expect-error - Plotly types are complex
-import Plotly from "plotly.js-dist";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-// @ts-expect-error
-import createPlotlyComponent from "react-plotly.js/factory";
-import type { GseaResult } from "../api/gseaApi";
-import {
-  mapToPrioritizationColor,
-  PRIORITISATION_COLORS,
-  ROOT_NODE_COLOR,
-} from "../utils/colorPalettes";
-import { buildPathwayHierarchy, getEffectiveRootPathways } from "../utils/pathwayHierarchy";
-
-const Plot = createPlotlyComponent(Plotly);
-
-interface PlotlySunburstChartProps {
-  results: GseaResult[];
-  height?: number;
-}
-
-interface SunburstData {
-  ids: string[];
-  labels: string[];
-  parents: string[];
-  values: number[];
-  customdata: any[];
-  marker: {
-    colors: string[];
-    line: { color: string; width: number };
-  };
-}
-
-const MIN_ZOOM = 0.5;
-const MAX_ZOOM = 5;
-const ZOOM_STEP = 0.15;
-
-function PlotlySunburstChart({ results, height = 600 }: PlotlySunburstChartProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const plotRef = useRef<any>(null);
-  const [zoom, setZoom] = useState(1);
-  const [pan, setPan] = useState({ x: 0, y: 0 });
-  const [sunburstLevel, setSunburstLevel] = useState("");
-  const isPanning = useRef(false);
-  const lastMouse = useRef({ x: 0, y: 0 });
-
-  // Attach wheel listener in capture phase so it fires before Plotly sees the event
-  useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    const onWheel = (e: WheelEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-      const delta = e.deltaY > 0 ? -ZOOM_STEP : ZOOM_STEP;
-      setZoom((prev) => Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, prev + delta)));
-    };
-    el.addEventListener("wheel", onWheel, { capture: true, passive: false });
-    return () => el.removeEventListener("wheel", onWheel, { capture: true });
-  }, []);
-
-  const handleMouseDown = useCallback((e: React.MouseEvent) => {
-    if (e.button !== 1 && !e.shiftKey) return; // middle click or shift+click to pan
-    e.preventDefault();
-    isPanning.current = true;
-    lastMouse.current = { x: e.clientX, y: e.clientY };
-  }, []);
-
-  const handleMouseMove = useCallback((e: React.MouseEvent) => {
-    if (!isPanning.current) return;
-    const dx = e.clientX - lastMouse.current.x;
-    const dy = e.clientY - lastMouse.current.y;
-    lastMouse.current = { x: e.clientX, y: e.clientY };
-    setPan((prev) => ({ x: prev.x + dx, y: prev.y + dy }));
-  }, []);
-
-  const handleMouseUp = useCallback(() => {
-    isPanning.current = false;
-  }, []);
-
-  const handleReset = useCallback(() => {
-    setZoom(1);
-    setPan({ x: 0, y: 0 });
-  }, []);
-
-  const handleZoomIn = useCallback(() => {
-    setZoom((prev) => Math.min(MAX_ZOOM, prev + ZOOM_STEP * 2));
-  }, []);
-
-  const handleZoomOut = useCallback(() => {
-    setZoom((prev) => Math.max(MIN_ZOOM, prev - ZOOM_STEP * 2));
-  }, []);
-
-  const handleResetChart = useCallback(() => {
-    setSunburstLevel("");
-    setZoom(1);
-    setPan({ x: 0, y: 0 });
-  }, []);
-
-  const handleDownloadPng = useCallback(() => {
-    const plotEl = plotRef.current?.el;
-    if (!plotEl) return;
-    Plotly.toImage(plotEl, { format: "png", width: 1200, height: 1200, scale: 2 }).then(
-      (dataUrl: string) => {
-        const link = document.createElement("a");
-        link.download = "sunburst-pathways.png";
-        link.href = dataUrl;
-        link.click();
-      }
-    );
-  }, []);
-  // Build sunburst data
-  const sunburstData = useMemo(() => {
-    if (results.length === 0) return null;
-
-    const { pathwayMap, childrenMap } = buildPathwayHierarchy(results);
-    const rootPathways = getEffectiveRootPathways(results);
-
-    // Collect all NES values for color scaling
-    const nesValues = results.map((r) => r.NES || 0);
-    const minNES = Math.min(...nesValues);
-    const maxNES = Math.max(...nesValues);
-
-    const data: SunburstData = {
-      ids: [],
-      labels: [],
-      parents: [],
-      values: [],
-      customdata: [],
-      marker: {
-        colors: [],
-        line: { color: "#fff", width: 1 },
-      },
-    };
-
-    // Add root node
-    data.ids.push("root");
-    data.labels.push("");
-    data.parents.push("");
-    data.values.push(0); // Will be calculated as sum of children with remainder mode
-    data.customdata.push({ type: "root", count: results.length });
-    data.marker.colors.push(ROOT_NODE_COLOR);
-
-    const processedIds = new Set<string>();
-
-    // Add pathway node - using a constant value of 1 for leaf nodes
-    // With branchvalues="remainder", parent values are added to children sum
-    const addPathwayNode = (pathway: GseaResult, parentId: string): number => {
-      const id = pathway.ID || "";
-      if (!id || processedIds.has(id)) return 0;
-      processedIds.add(id);
-
-      const nes = pathway.NES || 0;
-      const pValue = pathway["p-value"] || 1;
-      const genes = pathway["Leading edge genes"] || [];
-      const geneList = Array.isArray(genes) ? genes : [];
-
-      // Get children first to determine if this is a leaf
-      const children = childrenMap.get(id) || [];
-      const childPathways = children
-        .map((childId) => pathwayMap.get(childId))
-        .filter(Boolean) as GseaResult[];
-
-      // For leaf nodes, use 1 as value
-      // For parent nodes, value will be added to children's sum (remainder mode)
-      const isLeaf = childPathways.length === 0;
-      const value = isLeaf ? 1 : 0;
-
-      data.ids.push(id);
-      data.labels.push(pathway.Pathway || id);
-      data.parents.push(parentId);
-      data.values.push(value);
-      data.customdata.push({
-        type: "pathway",
-        id,
-        pathway: pathway.Pathway,
-        nes,
-        pValue,
-        fdr: pathway.FDR,
-        pathwaySize: pathway["Pathway size"],
-        matchedGenes: pathway["Number of input genes"],
-        genes: geneList,
-      });
-      data.marker.colors.push(mapToPrioritizationColor(nes, minNES, maxNES));
-
-      // Add children
-      childPathways.forEach((childPathway) => {
-        addPathwayNode(childPathway, id);
-      });
-
-      return value;
-    };
-
-    // Add root pathways
-    rootPathways.forEach((pathway) => {
-      addPathwayNode(pathway, "root");
-    });
-
-    return data;
-  }, [results]);
-
-  if (!sunburstData || results.length === 0) {
-    return (
-      <Box sx={{ p: 4, textAlign: "center" }}>
-        <Typography color="text.secondary">No pathways to display.</Typography>
-      </Box>
-    );
-  }
-
-  // Check if hierarchy data exists
-  const hasHierarchy = results.some((r) => r["Parent pathway"]);
-
-  return (
-    <Box sx={{ display: "flex", flexDirection: "column", height: "100%", position: "relative" }}>
-      {!hasHierarchy && (
-        <Box sx={{ p: 1, backgroundColor: "warning.light", borderRadius: 1, mb: 1 }}>
-          <Typography variant="body2" color="warning.dark">
-            No hierarchy data available. Displaying flat structure.
-          </Typography>
-        </Box>
-      )}
-      {/* Zoom controls */}
-      <Box
-        sx={{
-          position: "absolute",
-          top: 8,
-          right: 8,
-          zIndex: 10,
-          display: "flex",
-          flexDirection: "column",
-          gap: 0.5,
-          backgroundColor: "background.paper",
-          borderRadius: 1,
-          boxShadow: 1,
-          border: "1px solid",
-          borderColor: "divider",
-        }}
-      >
-        <IconButton size="small" onClick={handleResetChart} title="Reset chart">
-          <FontAwesomeIcon icon={faArrowRotateLeft} fontSize="0.85rem" />
-        </IconButton>
-        <Box sx={{ borderTop: "1px solid", borderColor: "divider" }} />
-        <IconButton size="small" onClick={handleZoomIn} title="Zoom in">
-          <FontAwesomeIcon icon={faMagnifyingGlassPlus} fontSize="0.85rem" />
-        </IconButton>
-        <IconButton size="small" onClick={handleZoomOut} title="Zoom out">
-          <FontAwesomeIcon icon={faMagnifyingGlassMinus} fontSize="0.85rem" />
-        </IconButton>
-        <IconButton size="small" onClick={handleReset} title="Reset zoom">
-          <FontAwesomeIcon icon={faCompress} fontSize="0.85rem" />
-        </IconButton>
-        <Box sx={{ borderTop: "1px solid", borderColor: "divider" }} />
-        <IconButton size="small" onClick={handleDownloadPng} title="Download PNG">
-          <FontAwesomeIcon icon={faDownload} fontSize="0.85rem" />
-        </IconButton>
-      </Box>
-      {zoom !== 1 && (
-        <Typography
-          variant="caption"
-          color="text.secondary"
-          sx={{ position: "absolute", bottom: 8, right: 8, zIndex: 10 }}
-        >
-          {Math.round(zoom * 100)}%
-        </Typography>
-      )}
-      {/* Zoomable container */}
-      <Box
-        ref={containerRef}
-        onMouseDown={handleMouseDown}
-        onMouseMove={handleMouseMove}
-        onMouseUp={handleMouseUp}
-        onMouseLeave={handleMouseUp}
-        sx={{
-          flex: 1,
-          minHeight: height,
-          overflow: "hidden",
-          cursor: isPanning.current ? "grabbing" : "default",
-        }}
-      >
-        <Box
-          sx={{
-            width: "100%",
-            height: "100%",
-            transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
-            transformOrigin: "center center",
-          }}
-        >
-          <Plot
-            ref={plotRef}
-            data={[
-              {
-                type: "sunburst",
-                ids: sunburstData.ids,
-                labels: sunburstData.labels,
-                parents: sunburstData.parents,
-                values: sunburstData.values,
-                customdata: sunburstData.customdata,
-                marker: sunburstData.marker,
-                branchvalues: "remainder",
-                level: sunburstLevel || undefined,
-                hovertemplate:
-                  "<b>%{label}</b><br>" +
-                  "NES: %{customdata.nes:.3f}<br>" +
-                  "p-value: %{customdata.pValue:.2e}<br>" +
-                  "FDR: %{customdata.fdr:.2e}<br>" +
-                  "Pathway size: %{customdata.pathwaySize}<br>" +
-                  "Overlap genes: %{customdata.matchedGenes}<br>" +
-                  "<extra></extra>",
-                textinfo: "label",
-                insidetextorientation: "radial",
-              },
-            ]}
-            layout={{
-              margin: { l: 0, r: 0, t: 10, b: 10 },
-              sunburstcolorway: PRIORITISATION_COLORS,
-              extendsunburstcolors: true,
-            }}
-            config={{
-              displayModeBar: false,
-              displaylogo: false,
-              responsive: true,
-            }}
-            style={{ width: "100%", height: "100%" }}
-            useResizeHandler
-            onSunburstClick={(e: any) => {
-              const point = e.points?.[0];
-              if (point) {
-                setSunburstLevel(point.id || "");
-              }
-            }}
-          />
-        </Box>
-      </Box>
-    </Box>
-  );
-}
-
-export default PlotlySunburstChart;
diff --git a/apps/platform/src/components/GeneEnrichmentAnalysis/components/ResultsPlotlySunburst.tsx b/apps/platform/src/components/GeneEnrichmentAnalysis/components/ResultsCustomSunburst.tsx
similarity index 87%
rename from apps/platform/src/components/GeneEnrichmentAnalysis/components/ResultsPlotlySunburst.tsx
rename to apps/platform/src/components/GeneEnrichmentAnalysis/components/ResultsCustomSunburst.tsx
index b42dd4f36..311695650 100644
--- a/apps/platform/src/components/GeneEnrichmentAnalysis/components/ResultsPlotlySunburst.tsx
+++ b/apps/platform/src/components/GeneEnrichmentAnalysis/components/ResultsCustomSunburst.tsx
@@ -11,14 +11,20 @@ import type { GseaResult } from "../api/gseaApi";
 import { PRIORITISATION_COLORS } from "../utils/colorPalettes";
 import PlotlySunburstChart from "./PlotlySunburstChart";
 import SunburstFilters, { type PathwayFilters } from "./SunburstFilters";
+import ZoomableSunburst from "../../Surnburst/ZoomableSunburst";
+import {gseaToSunburst} from "../../Surnburst/utils/gseaToSunburst";
+import { GseaLibrariesMap } from "../constants";
 
 interface ResultsPlotlySunburstProps {
   results: GseaResult[];
+  library?: string;
 }
 
-function ResultsPlotlySunburst({ results }: ResultsPlotlySunburstProps) {
-  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
-
+function ResultsPlotlySunburst({ results, library }: ResultsPlotlySunburstProps) {
+  const rootName = library
+    ? ((GseaLibrariesMap as Record<string, string>)[library] ?? library)
+    : "GSEA Pathways";
+    
   // Get initial NES range from data
   const nesDataRange = useMemo(() => {
     const nesValues = results.map((r) => r.NES || 0);
@@ -28,8 +34,11 @@ function ResultsPlotlySunburst({ results }: ResultsPlotlySunburstProps) {
     };
   }, [results]);
 
-  // Determine if dataset is large (> 500 pathways)
-  const isLargeDataset = results.length > 500;
+   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+
+  // Large pathway sets are slow to render, so default to a stricter FDR
+  // cutoff to keep the initial sunburst usable.
+  const isLargeDataset = results.length > 3000;
 
   const [filters, setFilters] = useState<PathwayFilters>({
     searchText: "",
@@ -218,7 +227,13 @@ function ResultsPlotlySunburst({ results }: ResultsPlotlySunburstProps) {
         </Box>
       </Popover>
       <Box sx={{ flex: 1, overflow: "auto", p: 2 }}>
-        <PlotlySunburstChart results={filteredResults} />
+        {/* <PlotlySunburstChart results={filteredResults} /> */}
+        {(() => {
+          const sunburstData = gseaToSunburst(filteredResults, "NES", rootName);
+          console.log("Sunburst data structure:", sunburstData);
+          console.log("Filtered results:", filteredResults.length, "pathways");
+          return <ZoomableSunburst data={sunburstData} />;
+        })()}
       </Box>
     </Box>
   );
diff --git a/apps/platform/src/components/GeneEnrichmentAnalysis/components/ResultsSunburst.tsx b/apps/platform/src/components/GeneEnrichmentAnalysis/components/ResultsSunburst.tsx
deleted file mode 100644
index 83e433ab5..000000000
--- a/apps/platform/src/components/GeneEnrichmentAnalysis/components/ResultsSunburst.tsx
+++ /dev/null
@@ -1,232 +0,0 @@
-import { Box, Typography } from "@mui/material";
-import * as d3 from "d3";
-import { useEffect, useMemo, useRef } from "react";
-import type { GseaResult } from "../api/gseaApi";
-import { mapToPrioritizationColor, ROOT_NODE_COLOR } from "../utils/colorPalettes";
-import { buildHierarchyForD3, type HierarchyNode } from "../utils/pathwayHierarchy";
-
-interface ResultsSunburstProps {
-  results: GseaResult[];
-}
-
-function ResultsSunburst({ results }: ResultsSunburstProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const svgRef = useRef<SVGSVGElement>(null);
-
-  // Build hierarchy data
-  const hierarchyData = useMemo(() => {
-    if (results.length === 0) return null;
-    return buildHierarchyForD3(results);
-  }, [results]);
-
-  // Get NES range for color scaling
-  const nesRange = useMemo(() => {
-    const nesValues = results.map((r) => r.NES || 0);
-    return {
-      min: Math.min(...nesValues),
-      max: Math.max(...nesValues),
-    };
-  }, [results]);
-
-  useEffect(() => {
-    if (!containerRef.current || !svgRef.current || !hierarchyData) return;
-
-    const container = containerRef.current;
-    const svg = d3.select(svgRef.current);
-
-    // Clear previous content
-    svg.selectAll("*").remove();
-
-    // Get dimensions
-    const width = container.clientWidth;
-    const height = container.clientHeight;
-    const radius = Math.min(width, height) / 2;
-
-    // Create hierarchy
-    const root = d3
-      .hierarchy<HierarchyNode>(hierarchyData)
-      .sum((d) => (d.children?.length ? 0 : d.value))
-      .sort((a, b) => (b.value || 0) - (a.value || 0));
-
-    // Create partition layout
-    const partition = d3.partition<HierarchyNode>().size([2 * Math.PI, radius]);
-
-    partition(root);
-
-    // Create arc generator
-    const arc = d3
-      .arc<d3.HierarchyRectangularNode<HierarchyNode>>()
-      .startAngle((d) => d.x0)
-      .endAngle((d) => d.x1)
-      .padAngle((d) => Math.min((d.x1 - d.x0) / 2, 0.005))
-      .padRadius(radius / 2)
-      .innerRadius((d) => d.y0)
-      .outerRadius((d) => d.y1 - 1);
-
-    // Create group and center it
-    const g = svg.append("g").attr("transform", `translate(${width / 2},${height / 2})`);
-
-    // Create tooltip
-    const tooltip = d3
-      .select(container)
-      .append("div")
-      .attr("class", "sunburst-tooltip")
-      .style("position", "absolute")
-      .style("visibility", "hidden")
-      .style("background-color", "rgba(0, 0, 0, 0.85)")
-      .style("color", "white")
-      .style("padding", "10px 14px")
-      .style("border-radius", "6px")
-      .style("font-size", "13px")
-      .style("max-width", "300px")
-      .style("pointer-events", "none")
-      .style("z-index", "1000")
-      .style("box-shadow", "0 4px 12px rgba(0,0,0,0.3)");
-
-    // Draw arcs
-    g.selectAll("path")
-      .data(root.descendants())
-      .join("path")
-      .attr("fill", (d) => {
-        if (d.depth === 0) return ROOT_NODE_COLOR;
-        const nes = d.data.data?.NES || 0;
-        return mapToPrioritizationColor(nes, nesRange.min, nesRange.max);
-      })
-      .attr("d", arc as any)
-      .style("cursor", "pointer")
-      .style("stroke", "#fff")
-      .style("stroke-width", "1px")
-      .on("mouseover", function (event, d) {
-        d3.select(this).style("opacity", 0.8);
-
-        if (d.depth === 0) {
-          tooltip
-            .style("visibility", "none")
-            .html(`<></>`);
-        } else if (d.data.data) {
-          const pathway = d.data.data;
-          const genes = pathway["Leading edge genes"] || [];
-          const geneList = Array.isArray(genes) ? genes : [];
-
-          tooltip.style("visibility", "visible").html(`
-            <strong>${pathway.Pathway}</strong><br/>
-            <span style="color: #aaa; font-size: 11px;">${pathway.ID || ""}</span><br/><br/>
-            <strong>NES:</strong> ${pathway.NES?.toFixed(3) || "N/A"}<br/>
-            <strong>p-value:</strong> ${pathway["p-value"]?.toExponential(2) || "N/A"}<br/>
-            <strong>FDR:</strong> ${pathway.FDR?.toExponential(2) || "N/A"}<br/>
-            <strong>Pathway size:</strong> ${pathway["Pathway size"] || "N/A"}<br/>
-            <strong>Overlap genes:</strong> ${pathway["Number of input genes"] || "N/A"}<br/>
-            ${geneList.length > 0 ? `<strong>Leading genes:</strong> ${geneList.slice(0, 5).join(", ")}${geneList.length > 5 ? "..." : ""}` : ""}
-          `);
-        }
-      })
-      .on("mousemove", (event) => {
-        const containerRect = container.getBoundingClientRect();
-        tooltip
-          .style("left", `${event.clientX - containerRect.left + 15}px`)
-          .style("top", `${event.clientY - containerRect.top - 10}px`);
-      })
-      .on("mouseout", function () {
-        d3.select(this).style("opacity", 1);
-        tooltip.style("visibility", "hidden");
-      });
-
-    // Add labels for larger segments
-    g.selectAll("text")
-      .data(
-        root.descendants().filter((d) => {
-          // Only show labels for segments that are large enough
-          return d.depth > 0 && d.x1 - d.x0 > 0.1 && d.y1 - d.y0 > 30;
-        })
-      )
-      .join("text")
-      .attr("transform", (d) => {
-        const x = (((d.x0 + d.x1) / 2) * 180) / Math.PI;
-        const y = (d.y0 + d.y1) / 2;
-        return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`;
-      })
-      .attr("dy", "0.35em")
-      .attr("text-anchor", "middle")
-      .style("font-size", "10px")
-      .style("fill", "#333")
-      .style("pointer-events", "none")
-      .text((d) => {
-        const name = d.data.name;
-        const maxLength = 15;
-        return name.length > maxLength ? name.slice(0, maxLength) + "..." : name;
-      });
-
-    // Cleanup
-    return () => {
-      tooltip.remove();
-    };
-  }, [hierarchyData, nesRange, results.length]);
-
-  if (results.length === 0) {
-    return (
-      <Box sx={{ p: 4, textAlign: "center" }}>
-        <Typography color="text.secondary">No pathways to display.</Typography>
-      </Box>
-    );
-  }
-
-  // Check if hierarchy data exists
-  const hasHierarchy = results.some((r) => r["Parent pathway"]);
-
-  return (
-    <Box sx={{ height: "100%", display: "flex", flexDirection: "column" }}>
-      {!hasHierarchy && (
-        <Box sx={{ p: 1, backgroundColor: "warning.light", borderRadius: 1, mb: 1 }}>
-          <Typography variant="body2" color="warning.dark">
-            No hierarchy data available. Displaying flat structure.
-          </Typography>
-        </Box>
-      )}
-      <Box
-        ref={containerRef}
-        sx={{
-          flex: 1,
-          minHeight: 500,
-          position: "relative",
-        }}
-      >
-        <svg
-          ref={svgRef}
-          style={{
-            width: "100%",
-            height: "100%",
-          }}
-        />
-      </Box>
-      {/* Color legend */}
-      <Box
-        sx={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          gap: 2,
-          py: 2,
-          borderTop: "1px solid",
-          borderColor: "divider",
-        }}
-      >
-        <Typography variant="caption" color="text.secondary">
-          NES: {nesRange.min.toFixed(2)}
-        </Typography>
-        <Box
-          sx={{
-            width: 150,
-            height: 12,
-            background: "linear-gradient(to right, #a01813, #eceada, #2e5943)",
-            borderRadius: 1,
-          }}
-        />
-        <Typography variant="caption" color="text.secondary">
-          {nesRange.max.toFixed(2)}
-        </Typography>
-      </Box>
-    </Box>
-  );
-}
-
-export default ResultsSunburst;
diff --git a/apps/platform/src/components/GeneEnrichmentAnalysis/components/RunHistorySidebar.tsx b/apps/platform/src/components/GeneEnrichmentAnalysis/components/RunHistorySidebar.tsx
index e01e5505c..72fec893a 100644
--- a/apps/platform/src/components/GeneEnrichmentAnalysis/components/RunHistorySidebar.tsx
+++ b/apps/platform/src/components/GeneEnrichmentAnalysis/components/RunHistorySidebar.tsx
@@ -41,6 +41,10 @@ interface RunHistorySidebarProps {
 
 /** Check if the current AOTF state differs from the run's snapshot */
 function isRunStale(run: AnalysisRun, currentState: AssociationsState): boolean {
+  // Standalone runs have genes provided directly by the user, not derived
+  // from AOTF association filters — there's no "current state" for them to
+  // go stale against.
+  if (run.efoId === "standalone") return false;
   // Compare key fields that affect the gene list
   if (run.efoId !== currentState.efoId) return true;
   if (run.inputs.geneSetSource === "uploaded" || run.inputs.geneSetSource === "pinned") {
diff --git a/apps/platform/src/components/GeneEnrichmentAnalysis/reducer.ts b/apps/platform/src/components/GeneEnrichmentAnalysis/reducer.ts
index 79f70293d..5f0bcc335 100644
--- a/apps/platform/src/components/GeneEnrichmentAnalysis/reducer.ts
+++ b/apps/platform/src/components/GeneEnrichmentAnalysis/reducer.ts
@@ -45,7 +45,9 @@ export function geneEnrichmentReducer(state: State = initialState, action: Actio
       return {
         ...state,
         modalOpen: action.modalOpen,
-        // Clear activeRunId when opening modal so form is shown first
+        // Clicking the GSEA menu item always starts fresh with the input
+        // form — the run stays in history either way, reachable from the
+        // sidebar regardless of which page/tab created it.
         activeRunId: action.modalOpen ? null : state.activeRunId,
       };
     }
@@ -121,6 +123,9 @@ export function geneEnrichmentReducer(state: State = initialState, action: Actio
     case ActionType.SET_STANDALONE_GENES: {
       return { ...state, standaloneGenes: action.payload };
     }
+    case ActionType.HYDRATE_RUN_HISTORY: {
+      return { ...state, runs: action.payload.runs, activeRunId: action.payload.activeRunId };
+    }
     default: {
       return state;
     }
diff --git a/apps/platform/src/components/GeneEnrichmentAnalysis/types.ts b/apps/platform/src/components/GeneEnrichmentAnalysis/types.ts
index 5c78403c2..01ee9f035 100644
--- a/apps/platform/src/components/GeneEnrichmentAnalysis/types.ts
+++ b/apps/platform/src/components/GeneEnrichmentAnalysis/types.ts
@@ -16,6 +16,7 @@ export enum ActionType {
   SET_ACTIVE_RUN = "SET_ACTIVE_RUN",
   DELETE_RUN = "DELETE_RUN",
   SET_STANDALONE_GENES = "SET_STANDALONE_GENES",
+  HYDRATE_RUN_HISTORY = "HYDRATE_RUN_HISTORY",
 }
 
 /***************
@@ -104,4 +105,8 @@ export type Action =
   | { type: ActionType.UPDATE_RUN; payload: { id: string } & Partial<Omit<AnalysisRun, "id">> }
   | { type: ActionType.SET_ACTIVE_RUN; payload: string | null }
   | { type: ActionType.DELETE_RUN; payload: string }
-  | { type: ActionType.SET_STANDALONE_GENES; payload: Gene[] | null };
+  | { type: ActionType.SET_STANDALONE_GENES; payload: Gene[] | null }
+  | {
+      type: ActionType.HYDRATE_RUN_HISTORY;
+      payload: { runs: AnalysisRun[]; activeRunId: string | null };
+    };
diff --git a/apps/platform/src/components/GeneEnrichmentAnalysis/utils/runHistoryStorage.ts b/apps/platform/src/components/GeneEnrichmentAnalysis/utils/runHistoryStorage.ts
new file mode 100644
index 000000000..d4968bcac
--- /dev/null
+++ b/apps/platform/src/components/GeneEnrichmentAnalysis/utils/runHistoryStorage.ts
@@ -0,0 +1,117 @@
+import type { AnalysisRun } from "../types";
+
+const DB_NAME = "ot-gsea";
+const DB_VERSION = 1;
+const STORE_NAME = "runHistory";
+const RECORD_KEY = "current";
+const SESSION_ID_KEY = "gsea_session_id";
+
+const IN_FLIGHT_STATUSES = new Set<AnalysisRun["status"]>([
+  "pending",
+  "fetching_associations",
+  "running_gsea",
+]);
+
+export interface PersistedRunHistory {
+  runs: AnalysisRun[];
+  activeRunId: string | null;
+}
+
+interface StoredRecord extends PersistedRunHistory {
+  sessionId: string;
+}
+
+/**
+ * A GSEA run's results can carry hundreds of pathway rows, each with
+ * "Leading edge genes"/"Pathway genes" arrays — easily multiple MB per run,
+ * well past sessionStorage's ~5-10MB quota. IndexedDB has no such practical
+ * ceiling, so results are stored there. The session-scoping (clear on tab
+ * close, survive a hard reload within the tab) that sessionStorage gave us
+ * for free is reproduced here via a sessionStorage-held session id tagged
+ * onto the IndexedDB record — a record from a different/previous session is
+ * treated as absent rather than left to accumulate forever.
+ */
+function getSessionId(): string {
+  try {
+    let id = sessionStorage.getItem(SESSION_ID_KEY);
+    if (!id) {
+      id = `${Date.now()}_${Math.random().toString(36).slice(2)}`;
+      sessionStorage.setItem(SESSION_ID_KEY, id);
+    }
+    return id;
+  } catch {
+    // sessionStorage unavailable — a fresh id every call means nothing will
+    // ever match a stored record, which safely disables persistence
+    return `${Date.now()}_${Math.random().toString(36).slice(2)}`;
+  }
+}
+
+function openDb(): Promise<IDBDatabase | null> {
+  return new Promise(resolve => {
+    if (typeof indexedDB === "undefined") {
+      resolve(null);
+      return;
+    }
+    try {
+      const request = indexedDB.open(DB_NAME, DB_VERSION);
+      request.onupgradeneeded = () => {
+        request.result.createObjectStore(STORE_NAME);
+      };
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => resolve(null);
+    } catch {
+      resolve(null);
+    }
+  });
+}
+
+/**
+ * Reads run history persisted earlier in this tab's session. Runs left in an
+ * in-flight status (the tab was closed/reloaded mid-analysis, so nothing will
+ * ever resolve them) are converted to errors instead of spinning forever.
+ */
+export async function loadRunHistory(): Promise<PersistedRunHistory | null> {
+  const db = await openDb();
+  if (!db) return null;
+  const sessionId = getSessionId();
+
+  return new Promise(resolve => {
+    try {
+      const tx = db.transaction(STORE_NAME, "readonly");
+      const request = tx.objectStore(STORE_NAME).get(RECORD_KEY);
+      request.onsuccess = () => {
+        const record = request.result as StoredRecord | undefined;
+        if (!record || record.sessionId !== sessionId) {
+          resolve(null);
+          return;
+        }
+        const runs = record.runs.map(run =>
+          IN_FLIGHT_STATUSES.has(run.status)
+            ? { ...run, status: "error" as const, error: "Interrupted by page reload" }
+            : run
+        );
+        resolve({ runs, activeRunId: record.activeRunId });
+      };
+      request.onerror = () => resolve(null);
+    } catch {
+      resolve(null);
+    }
+  });
+}
+
+export async function saveRunHistory(history: PersistedRunHistory): Promise<void> {
+  const db = await openDb();
+  if (!db) return;
+  const record: StoredRecord = { ...history, sessionId: getSessionId() };
+
+  return new Promise(resolve => {
+    try {
+      const tx = db.transaction(STORE_NAME, "readwrite");
+      tx.objectStore(STORE_NAME).put(record, RECORD_KEY);
+      tx.oncomplete = () => resolve();
+      tx.onerror = () => resolve();
+    } catch {
+      resolve();
+    }
+  });
+}
diff --git a/apps/platform/src/components/Surnburst/SunburstArcs.tsx b/apps/platform/src/components/Surnburst/SunburstArcs.tsx
new file mode 100644
index 000000000..f944438f6
--- /dev/null
+++ b/apps/platform/src/components/Surnburst/SunburstArcs.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import type { PartitionNode } from "./types";
+import { arcVisible } from "./utils";
+
+interface SunburstArcsProps {
+  nodes: PartitionNode[];
+  arc: any;
+  colorMap: Map<PartitionNode, string>;
+  onArcClick: (node: PartitionNode) => void;
+  onMouseEnter: (node: PartitionNode) => void;
+  onMouseLeave: () => void;
+}
+
+export const SunburstArcs: React.FC<SunburstArcsProps> = ({
+  nodes,
+  arc,
+  colorMap,
+  onArcClick,
+  onMouseEnter,
+  onMouseLeave,
+}) => {
+  // Render ALL nodes — D3 binds by index so we must not filter here.
+  // Visibility is controlled by fillOpacity (set by D3 in useLayoutEffect).
+  return (
+    <>
+      {nodes.map((d, i) => {
+        const arcData = d.current;
+        const arcPath = (arc as any)(arcData);
+        const visible = arcVisible(arcData);
+
+        return (
+          <path
+            key={`${d.data.name}-${i}`}
+            className="arc"
+            d={arcPath ?? undefined}
+            fill={colorMap.get(d) ?? "#ccc"}
+            fillOpacity={visible ? 1 : 0}
+            stroke="none"
+            strokeWidth={0}
+            style={{ cursor: "pointer" }}
+            onClick={() => onArcClick(d)}
+            onMouseEnter={() => onMouseEnter(d)}
+            onMouseLeave={onMouseLeave}
+            pointerEvents={visible ? "auto" : "none"}
+          />
+        );
+      })}
+    </>
+  );
+};
diff --git a/apps/platform/src/components/Surnburst/SunburstBreadcrumb.tsx b/apps/platform/src/components/Surnburst/SunburstBreadcrumb.tsx
new file mode 100644
index 000000000..afe4e07aa
--- /dev/null
+++ b/apps/platform/src/components/Surnburst/SunburstBreadcrumb.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import type { PartitionNode } from "./types";
+
+interface SunburstBreadcrumbProps {
+  trail: PartitionNode[];
+  onNavigate: (node: PartitionNode) => void;
+  onHover: (node: PartitionNode, e: React.MouseEvent) => void;
+  onHoverEnd: () => void;
+}
+
+export const SunburstBreadcrumb: React.FC<SunburstBreadcrumbProps> = ({
+  trail,
+  onNavigate,
+  onHover,
+  onHoverEnd,
+}) => {
+  return (
+    <div
+      style={{
+        padding: "4px 8px",
+        fontSize: 12,
+        color: "#666",
+        minHeight: 24,
+        display: "flex",
+        alignItems: "center",
+        flexWrap: "wrap",
+        gap: 2,
+      }}
+    >
+      {trail.map((node, i) => {
+        const isLast = i === trail.length - 1;
+        const name = node.data.name;
+        if (!name) return null;
+        return (
+          <span key={i} style={{ display: "flex", alignItems: "center", gap: 2 }}>
+            {i > 0 && <span style={{ color: "#bbb" }}>›</span>}
+            <span
+              onClick={() => !isLast && onNavigate(node)}
+              onMouseMove={(e) => onHover(node, e)}
+              onMouseLeave={onHoverEnd}
+              style={{
+                cursor: isLast ? "default" : "pointer",
+                color: isLast ? "#333" : "#1976d2",
+                fontWeight: isLast ? 600 : 400,
+                textDecoration: isLast ? "none" : "underline",
+              }}
+            >
+              {name}
+            </span>
+          </span>
+        );
+      })}
+    </div>
+  );
+};
+
diff --git a/apps/platform/src/components/Surnburst/SunburstCenter.tsx b/apps/platform/src/components/Surnburst/SunburstCenter.tsx
new file mode 100644
index 000000000..a586e99dc
--- /dev/null
+++ b/apps/platform/src/components/Surnburst/SunburstCenter.tsx
@@ -0,0 +1,66 @@
+import React from "react";
+import type { PartitionNode } from "./types";
+import { getContrastColor } from "./utils";
+
+interface SunburstCenterProps {
+  radius: number;
+  active: PartitionNode;
+  root: PartitionNode;
+  displayName: string;
+  centerLabel: boolean;
+  colorMap: Map<PartitionNode, string>;
+  onZoomOut: () => void;
+  onMouseEnter?: (e: React.MouseEvent) => void;
+  onMouseLeave?: () => void;
+}
+
+export const SunburstCenter: React.FC<SunburstCenterProps> = ({
+  radius,
+  active,
+  root,
+  displayName,
+  centerLabel,
+  colorMap,
+  onZoomOut,
+  onMouseEnter,
+  onMouseLeave,
+}) => {
+  const isZoomedOut = active === root;
+  const fillColor = isZoomedOut ? "#fff" : (colorMap.get(active as PartitionNode) ?? "#fff");
+  const textColor = getContrastColor(fillColor);
+
+  // Font size fits within the center circle diameter (10% padding)
+  const diameter = radius * 2;
+  const fontSize = Math.min(
+    diameter / (0.72 * Math.max(displayName.length, 1)), // constrained by text width
+    radius * 0.3                                          // constrained by circle height
+  );
+
+  return (
+    <>
+      {/* Center circle: colored by NES when drilled in, white at root */}
+      <circle
+        r={radius}
+        fill={fillColor}
+        fillOpacity={1}
+        pointerEvents={isZoomedOut ? "none" : "auto"}
+        style={{ cursor: isZoomedOut ? "default" : "pointer" }}
+        onClick={isZoomedOut ? undefined : onZoomOut}
+        onMouseEnter={isZoomedOut ? undefined : onMouseEnter}
+        onMouseLeave={isZoomedOut ? undefined : onMouseLeave}
+      />
+
+      {centerLabel && (
+        <text
+          textAnchor="middle"
+          dy="0.35em"
+          fontSize={fontSize}
+          fill={textColor}
+          pointerEvents="none"
+        >
+          {displayName}
+        </text>
+      )}
+    </>
+  );
+};
diff --git a/apps/platform/src/components/Surnburst/SunburstLabels.tsx b/apps/platform/src/components/Surnburst/SunburstLabels.tsx
new file mode 100644
index 000000000..cd2d2db00
--- /dev/null
+++ b/apps/platform/src/components/Surnburst/SunburstLabels.tsx
@@ -0,0 +1,61 @@
+import React from "react";
+import type { PartitionNode } from "./types";
+import { labelVisible, getArcSpace, getContrastColor } from "./utils";
+
+interface SunburstLabelsProps {
+  nodes: PartitionNode[];
+  radius: number;
+  colorMap: Map<PartitionNode, string>;
+}
+
+/**
+ * Computes font size that fits within the arc without overflowing.
+ * Constrained by both the radial height (text length) and arc length (text height).
+ */
+function computeFontSize(
+  name: string,
+  midArcLength: number,
+  radialHeight: number
+): number {
+  const charWidthRatio = 0.72;
+  const chars = Math.max(name.length, 1);
+
+  // Text runs radially: length along radius, width constrained by arc length
+  const maxFromRadial = radialHeight / (charWidthRatio * chars);
+  const maxFromArcWidth = midArcLength * 0.9;
+
+  return Math.min(maxFromRadial, maxFromArcWidth);
+}
+
+export const SunburstLabels: React.FC<SunburstLabelsProps> = ({ nodes, radius, colorMap }) => {
+  return (
+    <>
+      {nodes.map((d, i) => {
+        const arcData = d.target ?? d.current;
+        const { radialHeight, midArcLength } = getArcSpace(arcData, radius);
+        const fontSize = computeFontSize(d.data.name, midArcLength, radialHeight);
+        const x = (((arcData.x0 + arcData.x1) / 2) * 180) / Math.PI;
+        const y = ((arcData.y0 + arcData.y1) / 2) * radius;
+        const transform = `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`;
+        const bgColor = colorMap.get(d) ?? "#fff";
+        const textColor = getContrastColor(bgColor);
+        return (
+          <text
+            key={`${d.data.name}-label-${i}`}
+            className="arc-label"
+            transform={transform}
+            dy="0.35em"
+            fillOpacity={labelVisible(arcData) ? 1 : 0}
+            fill={textColor}
+            pointerEvents="none"
+            textAnchor="middle"
+            style={{ fontSize: `${fontSize}px` }}
+          >
+            {d.data.name}
+          </text>
+        );
+      })}
+    </>
+  );
+};
+
diff --git a/apps/platform/src/components/Surnburst/SunburstTooltip.tsx b/apps/platform/src/components/Surnburst/SunburstTooltip.tsx
new file mode 100644
index 000000000..1305433b2
--- /dev/null
+++ b/apps/platform/src/components/Surnburst/SunburstTooltip.tsx
@@ -0,0 +1,94 @@
+import React from "react";
+import type { PartitionNode } from "./types";
+
+interface SunburstTooltipProps {
+  node: PartitionNode | null;
+  x: number;
+  y: number;
+}
+
+export const SunburstTooltip: React.FC<SunburstTooltipProps> = ({ node, x, y }) => {
+  if (!node) return null;
+
+  const d = node.data;
+  const gsea = d.data; // Full GSEA result if present
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        left: x + 14,
+        top: y + 14,
+        zIndex: 1000,
+        background: "rgba(20,20,20,0.92)",
+        color: "#fff",
+        borderRadius: 6,
+        padding: "10px 14px",
+        fontSize: 12,
+        maxWidth: 300,
+        pointerEvents: "none",
+        boxShadow: "0 4px 16px rgba(0,0,0,0.35)",
+        lineHeight: 1.7,
+      }}
+    >
+      <div style={{ fontWeight: 700, fontSize: 13, marginBottom: 4 }}>
+        {d.name}
+      </div>
+
+      {gsea ? (
+        <>
+          {gsea.ID && (
+            <div>
+              <span style={{ color: "#aaa" }}>ID: </span>
+              {gsea.ID}
+            </div>
+          )}
+          {gsea.NES !== undefined && (
+            <div>
+              <span style={{ color: "#aaa" }}>NES: </span>
+              {gsea.NES.toFixed(3)}
+            </div>
+          )}
+          {gsea["p-value"] !== undefined && (
+            <div>
+              <span style={{ color: "#aaa" }}>p-value: </span>
+              {gsea["p-value"].toExponential(2)}
+            </div>
+          )}
+          {gsea.FDR !== undefined && (
+            <div>
+              <span style={{ color: "#aaa" }}>FDR: </span>
+              {gsea.FDR.toExponential(2)}
+            </div>
+          )}
+          {gsea["Pathway size"] !== undefined && (
+            <div>
+              <span style={{ color: "#aaa" }}>Pathway size: </span>
+              {gsea["Pathway size"]}
+            </div>
+          )}
+          {gsea["Number of input genes"] !== undefined && (
+            <div>
+              <span style={{ color: "#aaa" }}>Overlap genes: </span>
+              {gsea["Number of input genes"]}
+            </div>
+          )}
+          {Array.isArray(gsea["Leading edge genes"]) && gsea["Leading edge genes"].length > 0 && (
+            <div style={{ marginTop: 4 }}>
+              <span style={{ color: "#aaa" }}>Leading genes: </span>
+              {gsea["Leading edge genes"].slice(0, 5).join(", ")}
+              {gsea["Leading edge genes"].length > 5 ? "…" : ""}
+            </div>
+          )}
+        </>
+      ) : (
+        d.NES !== undefined && (
+          <div>
+            <span style={{ color: "#aaa" }}>NES: </span>
+            {d.NES.toFixed(3)}
+          </div>
+        )
+      )}
+    </div>
+  );
+};
diff --git a/apps/platform/src/components/Surnburst/ZoomableSunburst.tsx b/apps/platform/src/components/Surnburst/ZoomableSunburst.tsx
new file mode 100644
index 000000000..606fbe7d1
--- /dev/null
+++ b/apps/platform/src/components/Surnburst/ZoomableSunburst.tsx
@@ -0,0 +1,322 @@
+import { useLayoutEffect, useRef, useState, useCallback } from "react";
+import * as d3 from "d3";
+import { Box, IconButton } from "@mui/material";
+import {
+  faArrowRotateLeft,
+  faCompress,
+  faDownload,
+  faMagnifyingGlassMinus,
+  faMagnifyingGlassPlus,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import type { ZoomableSunburstProps, PartitionNode } from "./types";
+import {
+  useSunburstPartition,
+  useSunburstArc,
+  useSunburstFocus,
+  useSunburstColorMap,
+} from "./hooks";
+import { getBreadcrumbNodes } from "./utils";
+import { SunburstArcs } from "./SunburstArcs";
+import { SunburstLabels } from "./SunburstLabels";
+import { SunburstCenter } from "./SunburstCenter";
+import { SunburstBreadcrumb } from "./SunburstBreadcrumb";
+import { SunburstTooltip } from "./SunburstTooltip";
+import { useZoom } from "./useZoom";
+import { PRIORITISATION_COLORS } from "../GeneEnrichmentAnalysis/utils/colorPalettes";
+
+export default function ZoomableSunburst({
+  data,
+  width = 200,
+  height = 1000,
+  colors = PRIORITISATION_COLORS,
+  centerLabel = true,
+  fontFamily = "system-ui, -apple-system, Segoe UI, sans-serif",
+}: ZoomableSunburstProps) {
+  const containerRef = useRef(null);
+  const [hovered, setHovered] = useState<PartitionNode | null>(null);
+  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
+
+  // Use zoom hook for all zoom/pan functionality
+  const {
+    gRef,
+    svgRef,
+    isPanning,
+    handleMouseDown,
+    handleMouseMove,
+    handleMouseUp,
+    handleZoomIn,
+    handleZoomOut,
+    handleReset,
+  } = useZoom();
+
+  // Custom mouse move to track tooltip position
+  const customHandleMouseMove = useCallback((e: React.MouseEvent) => {
+    setMousePos({ x: e.clientX, y: e.clientY });
+    handleMouseMove(e);
+  }, [handleMouseMove]);
+
+  const radius = Math.min(width, height) / 2 / 1.5;
+
+  // Use custom hooks
+  const { root, nodes } = useSunburstPartition(data);
+  const arc = useSunburstArc(radius);
+  const { focus, handleClick } = useSunburstFocus(root);
+  const colorMap = useSunburstColorMap(root, colors);
+
+  // Reset hierarchy to top level
+  const handleHierarchyReset = useCallback(() => {
+    handleClick(root);
+  }, [handleClick, root]);
+
+  // Download sunburst as SVG
+  const handleDownloadSvg = useCallback(() => {
+    const svgElement = svgRef.current;
+    const gElement = gRef.current;
+    if (!svgElement || !gElement) return;
+
+    // Get the bounding box of the g element. Arc labels can overhang further
+    // on one side than the other, so the raw bbox isn't centered on the
+    // chart's true center (0,0) — cropping to it directly would make the
+    // sunburst look off-center. Instead, expand symmetrically around the
+    // origin so (0,0) stays at the exact center of the export.
+    const bbox = (gElement as any).getBBox();
+    const padding = 20;
+    const halfWidth = Math.max(Math.abs(bbox.x), Math.abs(bbox.x + bbox.width)) + padding;
+    const halfHeight = Math.max(Math.abs(bbox.y), Math.abs(bbox.y + bbox.height)) + padding;
+    const exportWidth = halfWidth * 2;
+    const exportHeight = halfHeight * 2;
+
+    // Clone SVG and set viewBox centered on the origin
+    const clonedSvg = svgElement.cloneNode(true) as SVGSVGElement;
+    clonedSvg.setAttribute(
+      "viewBox",
+      `${-halfWidth} ${-halfHeight} ${exportWidth} ${exportHeight}`
+    );
+    clonedSvg.setAttribute("width", String(exportWidth));
+    clonedSvg.setAttribute("height", String(exportHeight));
+    // The SVG normally inherits its font from the surrounding page via CSS,
+    // which is lost once it's serialized on its own — set it explicitly.
+    clonedSvg.setAttribute("font-family", fontFamily);
+
+    // White background so the export isn't transparent
+    const background = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    background.setAttribute("x", String(-halfWidth));
+    background.setAttribute("y", String(-halfHeight));
+    background.setAttribute("width", String(exportWidth));
+    background.setAttribute("height", String(exportHeight));
+    background.setAttribute("fill", "white");
+    clonedSvg.insertBefore(background, clonedSvg.firstChild);
+
+    // Undo the current pan/zoom on the cloned content so the full plot is
+    // exported, not just whatever portion is currently visible on screen.
+    const clonedG = clonedSvg.querySelector("g");
+    if (clonedG) {
+      (clonedG as SVGGElement).style.transform = "translate(0px, 0px) scale(1)";
+    }
+
+    // Serialize and download
+    const serializer = new XMLSerializer();
+    const svgString = serializer.serializeToString(clonedSvg);
+    const blob = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+
+    const link = document.createElement("a");
+    link.download = "sunburst.svg";
+    link.href = url;
+    link.click();
+    URL.revokeObjectURL(url);
+  }, [svgRef, gRef, fontFamily]);
+
+  const active = focus ?? root;
+
+  // Animation
+  useLayoutEffect(() => {
+    const g = d3.select(gRef.current) as any;
+    const t = g.transition().duration(650).ease(d3.easeCubicInOut);
+
+    // Bind data to path elements and animate
+    (g.selectAll("path.arc") as any)
+      .data(nodes, (_: any, i: number) => i)
+      .transition(t)
+      .tween("data", function (d: PartitionNode) {
+        if (!d || !d.current) return () => {};
+        const i = d3.interpolate(d.current, d.target ?? d.current);
+        return (time: number) => {
+          d.current = i(time);
+        };
+      })
+      .attrTween("d", (d: PartitionNode) => {
+        if (!d || !d.current) return () => "";
+        return () => arc(d.current) ?? "";
+      })
+      .attr("fill-opacity", (d: PartitionNode) => {
+        if (!d) return 0;
+        const arcData = d.target ?? d.current;
+        return arcData.y1 <= 100 && arcData.y0 >= 1 && arcData.x1 > arcData.x0
+          ? 1
+          : 0;
+      })
+      .attr("pointer-events", (d: PartitionNode) => {
+        if (!d) return "none";
+        const arcData = d.target ?? d.current;
+        return arcData.y1 <= 100 && arcData.y0 >= 1 && arcData.x1 > arcData.x0
+          ? "auto"
+          : "none";
+      });
+
+    // Bind data to text elements and animate
+    (g.selectAll("text.arc-label") as any)
+      .data(nodes, (_: any, i: number) => i)
+      .transition(t)
+      .attr("fill-opacity", (d: PartitionNode) => {
+        if (!d || !d.current) return 0;
+        const arcData = d.target ?? d.current;
+        return arcData.y1 <= 100 &&
+          arcData.y0 >= 1 &&
+          (arcData.y1 - arcData.y0) * (arcData.x1 - arcData.x0) > 0.03
+          ? 1
+          : 0;
+      })
+      .attrTween("transform", (d: PartitionNode) => {
+        if (!d || !d.current) return () => "";
+        const i = d3.interpolate(d.current, d.target ?? d.current);
+        return (time: number) => {
+          const arcData = i(time);
+          const x = ((arcData.x0 + arcData.x1) / 2) * (180 / Math.PI);
+          const y = ((arcData.y0 + arcData.y1) / 2) * radius;
+          return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`;
+        };
+      });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [focus, nodes, arc, radius]);
+
+  // Compute display values — only reflect active drill-down, not hover
+  const displayName = active === root
+    ? data.name || ""
+    : (active as PartitionNode).data.name;
+
+  const displayChain = getBreadcrumbNodes(active as PartitionNode);
+
+  return (
+    <>
+      <SunburstTooltip node={hovered} x={mousePos.x} y={mousePos.y} />
+      <Box
+        ref={containerRef}
+        sx={{
+        width: "100%",
+        height: "100%",
+        fontFamily,
+        userSelect: "none",
+        position: "relative",
+        display: "flex",
+        flexDirection: "column",
+      }}
+      onMouseDown={handleMouseDown}
+      onMouseMove={customHandleMouseMove}
+      onMouseUp={handleMouseUp}
+      onMouseLeave={handleMouseUp}
+    >
+      <Box
+        sx={{
+          position: "relative",
+          top: -16,
+          zIndex: 10,
+          backgroundColor: "background.paper",
+          flexShrink: 0,
+        }}
+      >
+        <SunburstBreadcrumb
+          trail={displayChain}
+          onNavigate={handleClick}
+          onHover={(node, e) => { setHovered(node); setMousePos({ x: e.clientX, y: e.clientY }); }}
+          onHoverEnd={() => setHovered(null)}
+        />
+      </Box>
+
+      {/* Zoom controls */}
+      <Box
+        sx={{
+          position: "absolute",
+          top: 8,
+          right: 8,
+          zIndex: 10,
+          display: "flex",
+          flexDirection: "column",
+          gap: 0.5,
+          backgroundColor: "background.paper",
+          borderRadius: 1,
+          boxShadow: 1,
+          border: "1px solid",
+          borderColor: "divider",
+        }}
+      >
+        <IconButton size="small" onClick={handleHierarchyReset} title="Reset to top level">
+          <FontAwesomeIcon icon={faArrowRotateLeft} fontSize="0.85rem" />
+        </IconButton>
+        <Box sx={{ borderTop: "1px solid", borderColor: "divider" }} />
+        <IconButton size="small" onClick={handleZoomIn} title="Zoom in">
+          <FontAwesomeIcon icon={faMagnifyingGlassPlus} fontSize="0.85rem" />
+        </IconButton>
+        <IconButton size="small" onClick={handleZoomOut} title="Zoom out">
+          <FontAwesomeIcon icon={faMagnifyingGlassMinus} fontSize="0.85rem" />
+        </IconButton>
+        <IconButton size="small" onClick={handleReset} title="Reset zoom">
+          <FontAwesomeIcon icon={faCompress} fontSize="0.85rem" />
+        </IconButton>
+        <Box sx={{ borderTop: "1px solid", borderColor: "divider" }} />
+        <IconButton size="small" onClick={handleDownloadSvg} title="Download SVG">
+          <FontAwesomeIcon icon={faDownload} fontSize="0.85rem" />
+        </IconButton>
+      </Box>
+
+
+
+      <svg
+        ref={svgRef}
+        viewBox={`${-width / 2} ${-height / 2} ${width} ${height}`}
+        width="100%"
+        style={{
+          display: "block",
+          overflow: "visible",
+          cursor: isPanning.current ? "grabbing" : "default",
+          flex: 1,
+          minHeight: 0,
+        }}
+      >
+        <g
+          ref={gRef}
+          style={{
+            transformOrigin: "0 0",
+            transformBox: "view-box",
+            transform: `translate(0px, 0px) scale(1)`,
+          }}
+        >
+          <SunburstArcs
+            nodes={nodes}
+            arc={arc}
+            colorMap={colorMap}
+            onArcClick={handleClick}
+            onMouseEnter={setHovered}
+            onMouseLeave={() => setHovered(null)}
+          />
+
+          <SunburstLabels nodes={nodes} radius={radius} colorMap={colorMap} />
+
+          <SunburstCenter
+            radius={radius}
+            active={active}
+            root={root}
+            displayName={displayName}
+            centerLabel={centerLabel}
+            colorMap={colorMap}
+            onZoomOut={() => active.parent && handleClick(active.parent)}
+            onMouseEnter={(e) => { setHovered(active as PartitionNode); setMousePos({ x: e.clientX, y: e.clientY }); }}
+            onMouseLeave={() => setHovered(null)}
+          />
+        </g>
+      </svg>
+    </Box>
+    </>
+  );
+}
diff --git a/apps/platform/src/components/Surnburst/hooks.ts b/apps/platform/src/components/Surnburst/hooks.ts
new file mode 100644
index 000000000..356095529
--- /dev/null
+++ b/apps/platform/src/components/Surnburst/hooks.ts
@@ -0,0 +1,130 @@
+import { useMemo, useState } from "react";
+import * as d3 from "d3";
+import type { DataNode, ArcData, PartitionNode } from "./types";
+import { mapToPrioritizationColor } from "../GeneEnrichmentAnalysis/utils/colorPalettes";
+
+/**
+ * Determines if an arc should be visible at the current zoom level
+ */
+function isArcVisible(arcData: ArcData): boolean {
+  return arcData.y1 <= 100 && arcData.y0 >= 1 && arcData.x1 > arcData.x0;
+}
+
+/**
+ * Builds and initializes the partition hierarchy
+ * Optionally limits depth for performance with large datasets
+ */
+function buildPartition(data: DataNode, maxDepth: number = Infinity): PartitionNode {
+  const root = d3
+    .hierarchy(data)
+    .sum((d) => (d.children ? 0 : d.value ?? 1))
+    .sort((a, b) => (b.value ?? 0) - (a.value ?? 0));
+
+  (d3.partition() as any).size([2 * Math.PI, root.height + 1])(root);
+
+  root.each((d) => {
+    const node = d as unknown as PartitionNode;
+    node.current = { x0: node.x0, x1: node.x1, y0: node.y0, y1: node.y1 };
+    // Prune children if depth limit reached
+    if (node.depth >= maxDepth && node.children) {
+      node.children = [];
+    }
+  });
+
+  return root as PartitionNode;
+}
+
+/**
+ * Hook to manage the sunburst partition hierarchy
+ * Filters nodes based on visibility at current zoom level for performance
+ */
+export function useSunburstPartition(data: DataNode, maxDepth: number = 10) {
+  const root = useMemo(() => buildPartition(data, maxDepth), [data, maxDepth]);
+
+  const nodes = useMemo(() => {
+    // Filter to only include nodes that are potentially visible
+    const descendants = root
+      .descendants()
+      .filter((d) => {
+        if (d.depth === 0) return false; // Skip root
+        // Keep node if it passes visibility check or has visible children
+        const arcData = (d as PartitionNode).current;
+        return isArcVisible(arcData) || (d.children?.length ?? 0) > 0;
+      });
+    return descendants;
+  }, [root]);
+
+  return { root, nodes };
+}
+
+/**
+ * Hook to create the D3 arc generator
+ * Optimized with proper padding and radius scaling like the reference implementation
+ */
+export function useSunburstArc(radius: number) {
+  return useMemo(() => {
+    return (d3.arc() as any)
+      .startAngle((d: ArcData) => d.x0)
+      .endAngle((d: ArcData) => d.x1)
+      .padAngle((d: ArcData) => Math.min((d.x1 - d.x0) / 2, 0.005))
+      .padRadius(radius * 1.5)
+      .innerRadius((d: ArcData) => d.y0 * radius)
+      .outerRadius((d: ArcData) => Math.max(d.y0 * radius, d.y1 * radius - 1));
+  }, [radius]);
+}
+
+/**
+ * Hook to manage zoom focus state
+ */
+export function useSunburstFocus(root: PartitionNode) {
+  const [focus, setFocus] = useState<PartitionNode | null>(null);
+
+  const handleClick = (p: PartitionNode): void => {
+    root.each((d: any) => {
+      const node = d as PartitionNode;
+      node.target = {
+        x0:
+          Math.max(0, Math.min(1, (node.x0 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI,
+        x1:
+          Math.max(0, Math.min(1, (node.x1 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI,
+        y0: Math.max(0, node.y0 - p.depth),
+        y1: Math.max(0, node.y1 - p.depth),
+      };
+    });
+    setFocus(p.depth === 0 ? null : p);
+  };
+
+  return { focus, setFocus, handleClick };
+}
+
+/**
+ * Hook to create color mapping for nodes based on NES values.
+ * Matches the old ResultsSunburst implementation exactly:
+ * each node uses its own NES (or 0 if absent), colored against the global NES range.
+ */
+export function useSunburstColorMap(
+  root: PartitionNode,
+  _colors: string[]
+) {
+  const colorMap = useMemo(() => {
+    const map = new Map<PartitionNode, string>();
+
+    const allNodes = root.descendants() as PartitionNode[];
+    const nesValues = allNodes
+      .map((n) => n.data.NES)
+      .filter((v): v is number => v !== undefined && v !== null);
+
+    const minNES = nesValues.length ? Math.min(...nesValues) : -1;
+    const maxNES = nesValues.length ? Math.max(...nesValues) : 1;
+
+    allNodes.forEach((node) => {
+      if (node.depth === 0) return;
+      const nes = node.data.NES ?? 0;
+      map.set(node, mapToPrioritizationColor(nes, minNES, maxNES));
+    });
+
+    return map;
+  }, [root]);
+
+  return colorMap;
+}
diff --git a/apps/platform/src/components/Surnburst/index.ts b/apps/platform/src/components/Surnburst/index.ts
new file mode 100644
index 000000000..f72a3f5eb
--- /dev/null
+++ b/apps/platform/src/components/Surnburst/index.ts
@@ -0,0 +1,33 @@
+// Main component
+export { default as ZoomableSunburst } from "./ZoomableSunburst";
+
+// Sub-components
+export { SunburstArcs } from "./SunburstArcs";
+export { SunburstLabels } from "./SunburstLabels";
+export { SunburstCenter } from "./SunburstCenter";
+export { SunburstBreadcrumb } from "./SunburstBreadcrumb";
+
+// Hooks
+export {
+  useSunburstPartition,
+  useSunburstArc,
+  useSunburstFocus,
+  useSunburstColorMap,
+} from "./hooks";
+
+// Utilities
+export {
+  arcVisible,
+  labelVisible,
+  labelTransform,
+  getColorForNode,
+  getBreadcrumbTrail,
+} from "./utils";
+
+// Types
+export type {
+  DataNode,
+  ArcData,
+  PartitionNode,
+  ZoomableSunburstProps,
+} from "./types";
diff --git a/apps/platform/src/components/Surnburst/types.ts b/apps/platform/src/components/Surnburst/types.ts
new file mode 100644
index 000000000..0d14d924a
--- /dev/null
+++ b/apps/platform/src/components/Surnburst/types.ts
@@ -0,0 +1,37 @@
+import type { HierarchyNode } from "d3";
+
+export interface DataNode {
+  name: string;
+  children?: DataNode[];
+  value?: number;
+  NES?: number; // Normalized Enrichment Score for coloring
+  data?: any; // Full GSEA result data or other metadata
+  id?: string; // Pathway/node ID
+}
+
+export interface ArcData {
+  x0: number;
+  x1: number;
+  y0: number;
+  y1: number;
+}
+
+export type PartitionNode = HierarchyNode<DataNode> & {
+  x0: number;
+  x1: number;
+  y0: number;
+  y1: number;
+  current: ArcData;
+  target?: ArcData;
+  children?: PartitionNode[];
+  parent?: PartitionNode | null;
+};
+
+export interface ZoomableSunburstProps {
+  data: DataNode;
+  width?: number;
+  height?: number;
+  colors?: string[];
+  centerLabel?: boolean;
+  fontFamily?: string;
+}
diff --git a/apps/platform/src/components/Surnburst/useZoom.ts b/apps/platform/src/components/Surnburst/useZoom.ts
new file mode 100644
index 000000000..fc217573a
--- /dev/null
+++ b/apps/platform/src/components/Surnburst/useZoom.ts
@@ -0,0 +1,140 @@
+import { useEffect, useRef, useCallback } from "react";
+
+const MIN_ZOOM = 0.5;
+const MAX_ZOOM = 20;
+const ZOOM_STEP = 0.5;
+const EASING_FACTOR = 0.4;
+
+export interface UseZoomReturn {
+  gRef: React.MutableRefObject<HTMLElement | null>;
+  svgRef: React.MutableRefObject<SVGSVGElement | null>;
+  panState: React.MutableRefObject<{ x: number; y: number }>;
+  zoomState: React.MutableRefObject<{ current: number; target: number }>;
+  isPanning: React.MutableRefObject<boolean>;
+  handleMouseDown: (e: React.MouseEvent) => void;
+  handleMouseMove: (e: React.MouseEvent) => void;
+  handleMouseUp: () => void;
+  handleZoomIn: () => void;
+  handleZoomOut: () => void;
+  handleReset: () => void;
+}
+
+export function useZoom(): UseZoomReturn {
+  const gRef = useRef<HTMLElement | null>(null);
+  const svgRef = useRef<SVGSVGElement | null>(null);
+
+  // Zoom manager via refs
+  const zoomState = useRef({ current: 1, target: 1 });
+  const panState = useRef({ x: 0, y: 0 });
+
+  const isPanning = useRef(false);
+  const lastMouse = useRef({ x: 0, y: 0 });
+  const animFrameRef = useRef<number | null>(null);
+
+
+
+  // Main animation loop - updates zoom and DOM directly
+  useEffect(() => {
+    // Initialize g element transform
+    if (gRef.current) {
+      (gRef.current as any).style.transform = `translate(0px, 0px) scale(1)`;
+    }
+
+    const animate = () => {
+      // Update zoom via ref
+      if (Math.abs(zoomState.current.current - zoomState.current.target) > 0.001) {
+        const diff = zoomState.current.target - zoomState.current.current;
+        const step = diff * EASING_FACTOR;
+        zoomState.current.current += step;
+
+        // Update DOM directly
+        if (gRef.current) {
+          (gRef.current as any).style.transform = `translate(${panState.current.x}px, ${panState.current.y}px) scale(${zoomState.current.current})`;
+        }
+
+      }
+
+      animFrameRef.current = requestAnimationFrame(animate);
+    };
+
+    animFrameRef.current = requestAnimationFrame(animate);
+    return () => {
+      if (animFrameRef.current !== null) {
+        cancelAnimationFrame(animFrameRef.current);
+      }
+    };
+  }, []);
+
+  // Scroll to zoom
+  useEffect(() => {
+    const el = svgRef.current;
+    if (!el) return;
+    const onWheel = (e: WheelEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const delta = e.deltaY > 0 ? -ZOOM_STEP : ZOOM_STEP;
+      zoomState.current.target = Math.min(
+        MAX_ZOOM,
+        Math.max(MIN_ZOOM, zoomState.current.target + delta)
+      );
+    };
+    el.addEventListener("wheel", onWheel, { capture: true, passive: false });
+    return () => el.removeEventListener("wheel", onWheel, { capture: true });
+  }, []);
+
+  // Pan handlers
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    if (e.button !== 1 && !e.shiftKey) return; // middle click or shift+click to pan
+    e.preventDefault();
+    isPanning.current = true;
+    lastMouse.current = { x: e.clientX, y: e.clientY };
+  }, []);
+
+  const handleMouseMove = useCallback((e: React.MouseEvent) => {
+    if (!isPanning.current) return;
+    const dx = e.clientX - lastMouse.current.x;
+    const dy = e.clientY - lastMouse.current.y;
+    lastMouse.current = { x: e.clientX, y: e.clientY };
+    panState.current.x += dx;
+    panState.current.y += dy;
+
+    if (gRef.current) {
+      (gRef.current as any).style.transform = `translate(${panState.current.x}px, ${panState.current.y}px) scale(${zoomState.current.current})`;
+    }
+  }, []);
+
+  const handleMouseUp = useCallback(() => {
+    isPanning.current = false;
+  }, []);
+
+  // Zoom controls
+  const handleZoomIn = useCallback(() => {
+    zoomState.current.target = Math.min(MAX_ZOOM, zoomState.current.target + ZOOM_STEP * 2);
+  }, []);
+
+  const handleZoomOut = useCallback(() => {
+    zoomState.current.target = Math.max(MIN_ZOOM, zoomState.current.target - ZOOM_STEP * 2);
+  }, []);
+
+  const handleReset = useCallback(() => {
+    zoomState.current.target = 1;
+    panState.current = { x: 0, y: 0 };
+    if (gRef.current) {
+      (gRef.current as any).style.transform = `translate(0px, 0px) scale(1)`;
+    }
+  }, []);
+
+  return {
+    gRef,
+    svgRef,
+    panState,
+    zoomState,
+    isPanning,
+    handleMouseDown,
+    handleMouseMove,
+    handleMouseUp,
+    handleZoomIn,
+    handleZoomOut,
+    handleReset,
+  };
+}
diff --git a/apps/platform/src/components/Surnburst/utils.ts b/apps/platform/src/components/Surnburst/utils.ts
new file mode 100644
index 000000000..433cc0e0c
--- /dev/null
+++ b/apps/platform/src/components/Surnburst/utils.ts
@@ -0,0 +1,242 @@
+import type { ArcData, PartitionNode, DataNode } from "./types";
+
+/**
+ * Determines if an arc should be visible at the current zoom level
+ */
+export function arcVisible(d: ArcData): boolean {
+  return d.y1 <= 100 && d.y0 >= 1 && d.x1 > d.x0;
+}
+
+/**
+ * Determines if a label should be visible at the current zoom level
+ */
+export function labelVisible(d: ArcData): boolean {
+  return d.y1 <= 100 && d.y0 >= 1 && (d.y1 - d.y0) * (d.x1 - d.x0) > 0.03;
+}
+
+/**
+ * Returns "#fff" or "#000" depending on whether the background color is dark or light.
+ * Uses WCAG relative luminance formula.
+ */
+export function getContrastColor(hexColor: string): string {
+  let hex = hexColor.replace("#", "");
+  // Expand 3-char shorthand (#fff → ffffff)
+  if (hex.length === 3) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+  const r = parseInt(hex.substring(0, 2), 16) / 255;
+  const g = parseInt(hex.substring(2, 4), 16) / 255;
+  const b = parseInt(hex.substring(4, 6), 16) / 255;
+  // Gamma correction
+  const toLinear = (c: number) => (c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4));
+  const L = 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+  return L > 0.179 ? "#000" : "#fff";
+}
+
+/**
+ * Returns the available space for an arc and which dimension dominates.
+ * - radialHeight: pixel height from inner to outer edge
+ * - midArcLength: pixel arc length at the midpoint radius
+ * - dominant: "tangential" if arc is wider than tall, "radial" otherwise
+ */
+export function getArcSpace(d: ArcData, radius: number) {
+  const angularSpan = d.x1 - d.x0;
+  const radialHeight = (d.y1 - d.y0) * radius;
+  const midArcLength = ((d.y0 + d.y1) / 2) * radius * angularSpan;
+  const dominant: "tangential" | "radial" = midArcLength >= radialHeight ? "tangential" : "radial";
+  return { radialHeight, midArcLength, dominant };
+}
+
+/**
+ * Calculates the SVG transform for positioning and rotating a label
+ */
+export function labelTransform(d: ArcData, radius: number): string {
+  const x = (((d.x0 + d.x1) / 2) * 180) / Math.PI;
+  const y = ((d.y0 + d.y1) / 2) * radius;
+  return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`;
+}
+
+/**
+ * Gets the color for a node based on its top-level parent
+ */
+export function getColorForNode(
+  node: PartitionNode,
+  colorMap: Map<PartitionNode, string>,
+  fallback: string = "#999"
+): string {
+  let current = node as any;
+  while (current.depth > 1) {
+    current = current.parent;
+  }
+  return colorMap.get(current) ?? fallback;
+}
+
+/**
+ * Builds the breadcrumb trail for the current node
+ */
+export function getBreadcrumbTrail(node: PartitionNode): string {
+  return node
+    .ancestors()
+    .map((d) => (d as PartitionNode).data.name)
+    .reverse()
+    .filter(Boolean)
+    .join(" › ");
+}
+
+/**
+ * Returns the breadcrumb trail as an array of nodes (for clickable breadcrumbs)
+ */
+export function getBreadcrumbNodes(node: PartitionNode): PartitionNode[] {
+  return node
+    .ancestors()
+    .map((d) => d as PartitionNode)
+    .reverse();
+}
+
+/**
+ * PHASE 3 OPTIMIZATION: Data Simplification & Progressive Loading
+ * ================================================================
+ */
+
+/**
+ * Counts total nodes in hierarchy (for performance assessment)
+ */
+export function countNodes(data: DataNode): number {
+  let count = 1;
+  if (data.children) {
+    count += data.children.reduce((sum, child) => sum + countNodes(child), 0);
+  }
+  return count;
+}
+
+/**
+ * Calculates subtree size for sorting and aggregation
+ */
+export function getSubtreeSize(node: DataNode): number {
+  return 1 + (node.children?.reduce((sum, child) => sum + getSubtreeSize(child), 0) ?? 0);
+}
+
+/**
+ * Simplifies large hierarchies by aggregating children beyond threshold
+ * Returns a new tree with same structure but reduced depth where needed
+ *
+ * @param data - Input hierarchy
+ * @param maxNodeCount - If tree exceeds this, simplification is triggered
+ * @param childrenThreshold - Nodes with more children than this get aggregated
+ * @returns Simplified data tree
+ *
+ * Example: simplifyLargeDataset(data, 10000, 50)
+ * - Only simplifies if dataset > 10,000 nodes
+ * - Aggregates children if a node has > 50 children
+ */
+export function simplifyLargeDataset(
+  data: DataNode,
+  maxNodeCount: number = 10000,
+  childrenThreshold: number = 100
+): DataNode {
+  const totalNodes = countNodes(data);
+
+  // Skip if dataset is manageable
+  if (totalNodes <= maxNodeCount) {
+    return data;
+  }
+
+  // Recursive simplification
+  const simplify = (node: DataNode): DataNode => {
+    if (!node.children || node.children.length === 0) {
+      return node;
+    }
+
+    let children = node.children.map(simplify);
+
+    // Aggregate many small children into groups
+    if (children.length > childrenThreshold) {
+      // Keep top N by size, aggregate the rest
+      const topN = Math.ceil(childrenThreshold * 0.7);
+      const sorted = [...children].sort(
+        (a, b) => (getSubtreeSize(b) - getSubtreeSize(a))
+      );
+
+      const top = sorted.slice(0, topN);
+      const rest = sorted.slice(topN);
+
+      if (rest.length > 0) {
+        const aggregated: DataNode = {
+          name: `Other (${rest.length})`,
+          value: rest.reduce((sum, child) => sum + (child.value ?? 1), 0),
+          children: rest,
+        };
+        children = [...top, aggregated];
+      }
+    }
+
+    return {
+      ...node,
+      children,
+    };
+  };
+
+  return simplify(data);
+}
+
+/**
+ * Creates a lazy-loaded version of data
+ * Children are loaded on-demand as user drills down
+ * Useful for very large datasets (50,000+ nodes)
+ *
+ * @param data - Full hierarchy
+ * @param maxDepthInitial - Depth to load initially (e.g., 2-3)
+ * @returns Trimmed tree with lazy-loading capability
+ *
+ * Example: lazyLoadData(data, 2) - Load only 2 levels initially
+ */
+export function lazyLoadData(
+  data: DataNode,
+  maxDepthInitial: number = 2
+): DataNode {
+  const trim = (node: DataNode, depth: number): DataNode => {
+    if (depth >= maxDepthInitial) {
+      // Don't include children at this depth
+      return {
+        ...node,
+        children: node.children ? [] : undefined,
+      };
+    }
+
+    return {
+      ...node,
+      children: node.children?.map((child) => trim(child, depth + 1)),
+    };
+  };
+
+  return trim(data, 0);
+}
+
+/**
+ * Gets statistics about a dataset for monitoring
+ * Useful for understanding performance characteristics
+ */
+export function getDatasetStats(data: DataNode) {
+  let totalNodes = 0;
+  let maxDepth = 0;
+  let branchingFactor = 0;
+
+  const traverse = (node: DataNode, depth: number = 0) => {
+    totalNodes++;
+    maxDepth = Math.max(maxDepth, depth);
+
+    if (node.children) {
+      branchingFactor = Math.max(branchingFactor, node.children.length);
+      node.children.forEach((child) => traverse(child, depth + 1));
+    }
+  };
+
+  traverse(data);
+
+  return {
+    totalNodes,
+    maxDepth,
+    avgBranchingFactor: branchingFactor,
+    estimatedMemory: `~${Math.round(totalNodes * 200 / 1024)} KB`,
+    largeDataset: totalNodes > 5000,
+    veryLargeDataset: totalNodes > 20000,
+  };
+}
diff --git a/apps/platform/src/components/Surnburst/utils/gseaToSunburst.ts b/apps/platform/src/components/Surnburst/utils/gseaToSunburst.ts
new file mode 100644
index 000000000..d38102648
--- /dev/null
+++ b/apps/platform/src/components/Surnburst/utils/gseaToSunburst.ts
@@ -0,0 +1,252 @@
+/**
+ * Utility functions to transform GSEA results into ZoomableSunburst-compatible format
+ */
+
+export interface GseaResult {
+  ID: string;
+  Pathway: string;
+  ES: number;
+  NES: number;
+  FDR: number;
+  "p-value": number;
+  "Sidak's p-value"?: number;
+  "Pathway size": number;
+  "Number of input genes": number;
+  "Leading edge genes": Array<string>;
+  Link?: string;
+  "Parent pathway"?: string;
+  "Pathway genes"?: Array<string>;
+}
+
+export interface DataNode {
+  name: string;
+  children?: DataNode[];
+  value?: number;
+  NES?: number; // Normalized Enrichment Score for coloring
+  data?: GseaResult | null; // Full GSEA result data
+  id?: string; // Pathway ID
+}
+
+/**
+ * Transforms a flat array of GSEA results into a hierarchical structure for ZoomableSunburst.
+ * Creates a tree with optional parent pathway grouping and individual pathways as leaves.
+ * Preserves NES values for coloring and full GSEA data for interactivity.
+ *
+ * @param results - Array of GSEA analysis results
+ * @param valueField - Which field to use for arc sizing (default: 'NES' for Normalized Enrichment Score)
+ * @param rootName - Name for the root node (e.g. the gene set library used for the analysis)
+ * @returns Hierarchical DataNode structure compatible with ZoomableSunburst
+ */
+export function gseaToSunburst(
+  results: GseaResult[],
+  valueField: keyof GseaResult = "NES",
+  rootName: string = "GSEA Pathways"
+): DataNode {
+  if (!results || results.length === 0) {
+    return { name: rootName, children: [] };
+  }
+
+  // Build maps for hierarchy detection
+  const pathwayMap = new Map<string, GseaResult>();
+  const childrenMap = new Map<string, string[]>();
+  const rootPathways: GseaResult[] = [];
+  const secondLevelPathways: GseaResult[] = [];
+  const processedIds = new Set<string>();
+
+  // First pass: create pathway map and collect children
+  results.forEach((pathway) => {
+    const id = pathway.ID || "";
+    if (id) {
+      pathwayMap.set(id, pathway);
+    }
+
+    const parentPathway = pathway["Parent pathway"] || "";
+    if (parentPathway) {
+      const parents = parentPathway.split(",").map((p) => p.trim());
+      parents.forEach((parent) => {
+        if (!childrenMap.has(parent)) {
+          childrenMap.set(parent, []);
+        }
+        childrenMap.get(parent)!.push(id);
+      });
+    } else {
+      // This is a root pathway (no parent)
+      rootPathways.push(pathway);
+    }
+  });
+
+  // Determine effective root pathways
+  let topLevelPathways = rootPathways;
+  
+  // If no root pathways, find pathways whose parents are not in the dataset
+  if (rootPathways.length === 0) {
+    results.forEach((pathway) => {
+      const id = pathway.ID || "";
+      if (processedIds.has(id)) return;
+
+      const parentPathway = pathway["Parent pathway"] || "";
+      if (parentPathway) {
+        const parents = parentPathway.split(",").map((p) => p.trim());
+        const hasUnknownParent = parents.some((parent) => !pathwayMap.has(parent));
+
+        if (hasUnknownParent) {
+          secondLevelPathways.push(pathway);
+          processedIds.add(id);
+        }
+      }
+    });
+
+    // If still no second-level pathways, use all as fallback
+    if (secondLevelPathways.length === 0) {
+      topLevelPathways = results;
+    } else {
+      topLevelPathways = secondLevelPathways;
+    }
+  }
+
+  // Recursively build children hierarchy
+  const buildChildren = (parentId: string): DataNode[] => {
+    const childIds = childrenMap.get(parentId) || [];
+    return childIds
+      .filter((id) => !processedIds.has(id))
+      .map((childId) => {
+        processedIds.add(childId);
+        const pathway = pathwayMap.get(childId);
+        if (!pathway) return null;
+
+        const nes = pathway.NES || 0;
+        const childrenNodes = buildChildren(childId);
+        
+        // For leaf nodes, use 1 as value
+        // For parent nodes, value will be added to children's sum (remainder mode)
+        const isLeaf = childrenNodes.length === 0;
+        const value = isLeaf ? 1 : 0;
+
+        return {
+          id: childId,
+          name: pathway.Pathway || childId,
+          NES: nes,
+          value,
+          data: pathway,
+          children: childrenNodes.length > 0 ? childrenNodes : undefined,
+        };
+      })
+      .filter(Boolean) as DataNode[];
+  };
+
+  // Build root node with children from top-level pathways
+  const rootChildren: DataNode[] = topLevelPathways.map((pathway) => {
+    const id = pathway.ID || "";
+    processedIds.add(id);
+
+    const nes = pathway.NES || 0;
+    const childrenNodes = buildChildren(id);
+    
+    // For leaf nodes, use 1 as value
+    // For parent nodes, value will be added to children's sum (remainder mode)
+    const isLeaf = childrenNodes.length === 0;
+    const value = isLeaf ? 1 : 0;
+
+    return {
+      id,
+      name: pathway.Pathway || id,
+      NES: nes,
+      value,
+      data: pathway,
+      children: childrenNodes.length > 0 ? childrenNodes : undefined,
+    };
+  });
+
+  return {
+    name: rootName,
+    value: 0,
+    children: rootChildren,
+  };
+}
+
+/**
+ * Alternative transformation that creates a hierarchy based on statistical significance.
+ * Groups pathways by FDR threshold categories, preserving NES and full data.
+ *
+ * @param results - Array of GSEA analysis results
+ * @param valueField - Which field to use for arc sizing (default: 'NES')
+ * @returns Hierarchical DataNode structure grouped by significance
+ */
+export function gseaToSunburstBySignificance(
+  results: GseaResult[],
+  valueField: keyof GseaResult = "NES"
+): DataNode {
+  if (!results || results.length === 0) {
+    return { name: "GSEA Pathways", children: [] };
+  }
+
+  const significanceGroups = new Map<string, DataNode>();
+
+  results.forEach((result) => {
+    let group = "Not Significant";
+    if (result.FDR < 0.001) {
+      group = "Highly Significant (FDR < 0.001)";
+    } else if (result.FDR < 0.01) {
+      group = "Very Significant (FDR < 0.01)";
+    } else if (result.FDR < 0.05) {
+      group = "Significant (FDR < 0.05)";
+    }
+
+    if (!significanceGroups.has(group)) {
+      significanceGroups.set(group, {
+        name: group,
+        children: [],
+      });
+    }
+
+    const nes = result.NES || 0;
+    const groupNode = significanceGroups.get(group)!;
+    if (!groupNode.children) {
+      groupNode.children = [];
+    }
+    groupNode.children.push({
+      id: result.ID,
+      name: result.Pathway,
+      NES: nes,
+      value: 1, // Leaf nodes use constant value of 1
+      data: result,
+    });
+  });
+
+  return {
+    name: "GSEA Pathways",
+    children: Array.from(significanceGroups.values()),
+  };
+}
+
+/**
+ * Filters GSEA results before transformation.
+ *
+ * @param results - Array of GSEA analysis results
+ * @param options - Filter options
+ * @returns Filtered array of GSEA results
+ */
+export function filterGseaResults(
+  results: GseaResult[],
+  options: {
+    maxFDR?: number;
+    minAbsES?: number;
+    pathwayNameFilter?: string;
+  }
+): GseaResult[] {
+  return results.filter((result) => {
+    if (options.maxFDR !== undefined && result.FDR > options.maxFDR) {
+      return false;
+    }
+    if (options.minAbsES !== undefined && Math.abs(result.ES) < options.minAbsES) {
+      return false;
+    }
+    if (
+      options.pathwayNameFilter &&
+      !result.Pathway.toLowerCase().includes(options.pathwayNameFilter.toLowerCase())
+    ) {
+      return false;
+    }
+    return true;
+  });
+}
diff --git a/apps/platform/src/components/Surnburst/utils/index.ts b/apps/platform/src/components/Surnburst/utils/index.ts
new file mode 100644
index 000000000..7520b424d
--- /dev/null
+++ b/apps/platform/src/components/Surnburst/utils/index.ts
@@ -0,0 +1 @@
+export * from "./gseaToSunburst";
diff --git a/apps/platform/src/pages/AnalysisPage/AnalysisPage.tsx b/apps/platform/src/pages/AnalysisPage/AnalysisPage.tsx
index 4779162eb..553f227a7 100644
--- a/apps/platform/src/pages/AnalysisPage/AnalysisPage.tsx
+++ b/apps/platform/src/pages/AnalysisPage/AnalysisPage.tsx
@@ -4,11 +4,15 @@ import { useSearchParams } from "react-router-dom";
 import { BasePage } from "ui";
 import { setAssociationsState, setStandaloneGenes } from "../../components/GeneEnrichmentAnalysis/actions";
 import StandaloneAnalysisContainer from "../../components/GeneEnrichmentAnalysis/components/StandaloneAnalysisContainer";
-import { GeneEnrichmentProvider, useGeneEnrichmentDispatch } from "../../components/GeneEnrichmentAnalysis/Provider";
+import {
+  useGeneEnrichmentDispatch,
+  useGeneEnrichmentState,
+} from "../../components/GeneEnrichmentAnalysis/Provider";
 import { readAndClearAotfHandoff } from "../../components/GeneEnrichmentAnalysis/utils/aotfHandoff";
 
-function AnalysisPageInner(): ReactElement {
+function AnalysisPageContent(): ReactElement {
   const dispatch = useGeneEnrichmentDispatch();
+  const { runs, activeRunId } = useGeneEnrichmentState();
   const [searchParams] = useSearchParams();
   const source = searchParams.get("source");
 
@@ -27,37 +31,52 @@ function AnalysisPageInner(): ReactElement {
     }
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const activeRun = activeRunId ? runs.find((run) => run.id === activeRunId) : null;
+  // The results view (table/tree/sunburst/network) needs a viewport-bound,
+  // internally-scrolling layout — the AOTF modal gets this for free from its
+  // Dialog's fixed height:100vh, but this page has no such ancestor, so panes
+  // like the sunburst fall back to their unbounded intrinsic size instead of
+  // scrolling internally. Only clamp once results are showing: doing this for
+  // the input form too would clip it on short viewports instead of letting the
+  // page grow and scroll like every other page.
+  const isResultsView = activeRun?.status === "complete";
+
   return (
-    <Box sx={{ display: "flex", flexDirection: "column", flex: 1, minHeight: 0 }}>
-      <StandaloneAnalysisContainer />
-    </Box>
+    <Container
+      maxWidth={false}
+      sx={{
+        pt: 4,
+        pb: 6,
+        display: "flex",
+        flexDirection: "column",
+        ...(isResultsView ? { height: "calc(100vh - 48px)", overflow: "hidden" } : { flex: 1 }),
+      }}
+    >
+      <Typography variant="h4" sx={{ mb: 0.5 }}>
+        Gene Set Enrichment Analysis
+      </Typography>
+      <Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}>
+        Run GSEA on a custom ranked list of genes. Paste your gene list or upload a{" "}
+        <Box component="code" sx={{ fontFamily: "monospace", fontSize: "0.9em" }}>
+          .txt
+        </Box>{" "}
+        file with one{" "}
+        <Box component="code" sx={{ fontFamily: "monospace", fontSize: "0.9em" }}>
+          SYMBOL{"\t"}SCORE
+        </Box>{" "}
+        per line.
+      </Typography>
+      <Box sx={{ flex: 1, minHeight: 0 }}>
+        <StandaloneAnalysisContainer />
+      </Box>
+    </Container>
   );
 }
 
 function AnalysisPage(): ReactElement {
   return (
     <BasePage>
-      <GeneEnrichmentProvider>
-        <Container maxWidth={false} sx={{ pt: 4, pb: 6, display: "flex", flexDirection: "column", flex: 1 }}>
-          <Typography variant="h4" sx={{ mb: 0.5 }}>
-            Gene Set Enrichment Analysis
-          </Typography>
-          <Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}>
-            Run GSEA on a custom ranked list of genes. Paste your gene list or upload a{" "}
-            <Box component="code" sx={{ fontFamily: "monospace", fontSize: "0.9em" }}>
-              .txt
-            </Box>{" "}
-            file with one{" "}
-            <Box component="code" sx={{ fontFamily: "monospace", fontSize: "0.9em" }}>
-              SYMBOL{"\t"}SCORE
-            </Box>{" "}
-            per line.
-          </Typography>
-          <Box sx={{ flex: 1, minHeight: 0 }}>
-            <AnalysisPageInner />
-          </Box>
-        </Container>
-      </GeneEnrichmentProvider>
+      <AnalysisPageContent />
     </BasePage>
   );
 }
diff --git a/apps/platform/src/pages/DiseasePage/DiseaseAssociations/DiseaseAssociations.tsx b/apps/platform/src/pages/DiseasePage/DiseaseAssociations/DiseaseAssociations.tsx
index 168e8bf1a..7595428c7 100644
--- a/apps/platform/src/pages/DiseasePage/DiseaseAssociations/DiseaseAssociations.tsx
+++ b/apps/platform/src/pages/DiseasePage/DiseaseAssociations/DiseaseAssociations.tsx
@@ -1,10 +1,7 @@
 import type { ReactElement } from "react";
 import { AssociationsView } from "../../../components/AssociationsToolkit";
 import { ENTITY } from "../../../components/AssociationsToolkit/types";
-import {
-  GeneEnrichmentAnalysisModal,
-  GeneEnrichmentProvider,
-} from "../../../components/GeneEnrichmentAnalysis";
+import { GeneEnrichmentAnalysisModal } from "../../../components/GeneEnrichmentAnalysis";
 import DISEASE_ASSOCIATIONS_QUERY from "./DiseaseAssociationsQuery.gql";
 
 type DiseaseAssociationsProps = {
@@ -13,7 +10,7 @@ type DiseaseAssociationsProps = {
 
 function DiseaseAssociations(pros: DiseaseAssociationsProps): ReactElement {
   return (
-    <GeneEnrichmentProvider>
+    <>
       <GeneEnrichmentAnalysisModal />
       <AssociationsView
         key={pros.efoId}
@@ -21,7 +18,7 @@ function DiseaseAssociations(pros: DiseaseAssociationsProps): ReactElement {
         entity={ENTITY.DISEASE}
         query={DISEASE_ASSOCIATIONS_QUERY}
       />
-    </GeneEnrichmentProvider>
+    </>
   );
 }
 
diff --git a/apps/platform/src/pages/HomePage/HomePage.tsx b/apps/platform/src/pages/HomePage/HomePage.tsx
index 3be3e6898..9d30e5f57 100644
--- a/apps/platform/src/pages/HomePage/HomePage.tsx
+++ b/apps/platform/src/pages/HomePage/HomePage.tsx
@@ -22,6 +22,7 @@ import {
   appCanonicalUrl,
   externalLinks,
   mainMenuItems,
+  toolsMenuItems,
 } from "@ot/constants";
 import HomeBox from "./HomeBox";
 import Splash from "./Splash";
@@ -153,7 +154,13 @@ function HomePage(): JSX.Element {
       </Helmet>
       <Grid container justifyContent="center" alignItems="center" className={classes.hpSection}>
         <Splash />
-        <NavBar name="platform" homepage items={mainMenuItems} placement="bottom-end" />
+        <NavBar
+          name="platform"
+          homepage
+          items={mainMenuItems}
+          tools={toolsMenuItems}
+          placement="bottom-end"
+        />
         <HomeBox>
           <GlobalSearch isHomePage />
           {/* Search examples */}
diff --git a/packages/ot-constants/src/index.ts b/packages/ot-constants/src/index.ts
index 98cfcf85c..ddb4d3814 100644
--- a/packages/ot-constants/src/index.ts
+++ b/packages/ot-constants/src/index.ts
@@ -171,6 +171,15 @@ export const mainMenuItems: MenuItem[] = config.profile.mainMenuItems ?? [
   },
 ];
 
+// Tools Menu Items Configuration
+export const toolsMenuItems: MenuItem[] = [
+  {
+    name: "GSEA Analysis",
+    url: "/analysis",
+    external: false,
+  },
+];
+
 export const QTLStudyType = [
   "scsqtl",
   "sceqtl",
diff --git a/packages/ui/src/components/BasePage.tsx b/packages/ui/src/components/BasePage.tsx
index f45a2c3ce..2631363eb 100644
--- a/packages/ui/src/components/BasePage.tsx
+++ b/packages/ui/src/components/BasePage.tsx
@@ -9,6 +9,7 @@ import {
   appCanonicalUrl,
   externalLinks,
   mainMenuItems,
+  toolsMenuItems,
 } from "@ot/constants";
 import GlobalSearch from "./GlobalSearch/GlobalSearch";
 
@@ -27,7 +28,14 @@ function BasePage({ title, children, description, location }: BasePageProps): Re
 
   return (
     <Page
-      header={<NavBar name="Platform" search={<GlobalSearch />} items={mainMenuItems} />}
+      header={
+        <NavBar
+          name="Platform"
+          search={<GlobalSearch />}
+          items={mainMenuItems}
+          tools={toolsMenuItems}
+        />
+      }
       footer={<Footer externalLinks={externalLinks} />}
     >
       <Helmet title={composedTitle}>
diff --git a/packages/ui/src/components/NavBar.tsx b/packages/ui/src/components/NavBar.tsx
index 21bfdad48..6fc6ef3f4 100644
--- a/packages/ui/src/components/NavBar.tsx
+++ b/packages/ui/src/components/NavBar.tsx
@@ -10,6 +10,7 @@ import { v1 } from "uuid";
 import Link from "./Link";
 import OpenTargetsTitle from "./OpenTargetsTitle";
 import HeaderMenu from "./HeaderMenu";
+import ToolsMenu from "./ToolsMenu";
 import PrivateWrapper from "./PrivateWrapper";
 
 const LogoBTN = styled(Button)<{ component?: React.ElementType; to?: string }>`
@@ -91,6 +92,11 @@ type MenuExternalLinkProps = {
   children: ReactNode;
 };
 
+type ToolsMenuItem = {
+  name: string;
+  url: string;
+};
+
 type NavBarProps = {
   name?: string;
   search?: ReactNode;
@@ -100,6 +106,7 @@ type NavBarProps = {
   contact?: string;
   homepage?: boolean;
   items?: NavBarItem[];
+  tools?: ToolsMenuItem[];
   placement?: PopperPlacementType;
 };
 
@@ -113,7 +120,18 @@ function MenuExternalLink({ classes, href, children }: MenuExternalLinkProps): R
   );
 }
 
-function NavBar({ name, search, api, downloads, docs, contact, homepage, items, placement }: NavBarProps): ReactElement {
+function NavBar({
+  name,
+  search,
+  api,
+  downloads,
+  docs,
+  contact,
+  homepage,
+  items,
+  tools,
+  placement,
+}: NavBarProps): ReactElement {
   const classes = useStyles();
   const theme = useTheme<Theme>();
   const smMQ = useMediaQuery(theme.breakpoints.down("sm"));
@@ -195,6 +213,10 @@ function NavBar({ name, search, api, downloads, docs, contact, homepage, items,
             </MenuExternalLink>
           ) : null}
 
+          {tools && tools.length ? (
+            <ToolsMenu items={tools} className={classes.menuLink} />
+          ) : null}
+
           {items && !isHomePageRegular ? <HeaderMenu items={items} placement={placement} /> : null}
 
           {isHomePageRegular && (
diff --git a/packages/ui/src/components/ToolsMenu.tsx b/packages/ui/src/components/ToolsMenu.tsx
new file mode 100644
index 000000000..97add3ae0
--- /dev/null
+++ b/packages/ui/src/components/ToolsMenu.tsx
@@ -0,0 +1,85 @@
+import { ReactElement, useState, MouseEvent, KeyboardEvent } from "react";
+import { v1 } from "uuid";
+import { Menu, MenuItem, Typography } from "@mui/material";
+import { faCaretDown, faCaretUp } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { makeStyles } from "@mui/styles";
+import classNames from "classnames";
+import Link from "./Link";
+
+const useStyles = makeStyles(() => ({
+  trigger: {
+    display: "inline-flex",
+    alignItems: "center",
+    cursor: "pointer",
+  },
+  icon: {
+    marginLeft: "6px",
+    fontSize: "0.75rem",
+  },
+  menuLink: {
+    width: "100%",
+    color: "inherit",
+  },
+}));
+
+type ToolsMenuItem = {
+  name: string;
+  url: string;
+};
+
+type ToolsMenuProps = {
+  items: ToolsMenuItem[];
+  className?: string;
+};
+
+function ToolsMenu({ items, className }: ToolsMenuProps): ReactElement {
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const isMenuOpen = Boolean(anchorEl);
+
+  const handleMenuToggle = (event: MouseEvent<HTMLSpanElement>) => {
+    setAnchorEl(anchorEl === null ? event.currentTarget : null);
+  };
+
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLSpanElement>) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      handleMenuToggle(event as unknown as MouseEvent<HTMLSpanElement>);
+    }
+  };
+
+  return (
+    <>
+      <span
+        role="button"
+        tabIndex={0}
+        onClick={handleMenuToggle}
+        onKeyDown={handleKeyDown}
+        className={classNames(classes.trigger, className)}
+        aria-haspopup="true"
+        aria-expanded={isMenuOpen}
+        aria-label="open tools menu"
+      >
+        <Typography variant="body2">Tools</Typography>
+        <FontAwesomeIcon className={classes.icon} icon={isMenuOpen ? faCaretUp : faCaretDown} />
+      </span>
+
+      <Menu anchorEl={anchorEl} open={isMenuOpen} onClose={handleMenuClose}>
+        {items.map(item => (
+          <MenuItem key={v1()} onClick={handleMenuClose} dense>
+            <Link to={item.url} className={classes.menuLink} footer={false}>
+              <Typography variant="body2">{item.name}</Typography>
+            </Link>
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  );
+}
+
+export default ToolsMenu;