diff --git a/webui/react/src/components/CompareHyperparameters.tsx b/webui/react/src/components/CompareHyperparameters.tsx
index 9f5b20529254..0ff91ab0cde4 100644
--- a/webui/react/src/components/CompareHyperparameters.tsx
+++ b/webui/react/src/components/CompareHyperparameters.tsx
@@ -12,7 +12,7 @@ import ExperimentVisualizationFilters, {
   VisualizationFilters,
 } from 'pages/ExperimentDetails/ExperimentVisualization/ExperimentVisualizationFilters';
 import { TrialMetricData } from 'pages/TrialDetails/useTrialMetrics';
-import { ExperimentWithTrial, TrialItem } from 'types';
+import { ExperimentWithTrial, FlatRun, TrialItem, XOR } from 'types';
 
 import CompareHeatMaps from './CompareHeatMaps';
 import {
@@ -23,17 +23,22 @@ import CompareParallelCoordinates from './CompareParallelCoordinates';
 import CompareScatterPlots from './CompareScatterPlots';
 import css from './HpParallelCoordinates.module.scss';
 
-interface Props {
+interface BaseProps {
   projectId: number;
-  selectedExperiments: ExperimentWithTrial[];
-  trials: TrialItem[];
   metricData: TrialMetricData;
 }
 
+type Props = XOR<
+  { selectedExperiments: ExperimentWithTrial[]; trials: TrialItem[] },
+  { selectedRuns: FlatRun[] }
+> &
+  BaseProps;
+
 export const NO_DATA_MESSAGE = 'No data available.';
 
 const CompareHyperparameters: React.FC<Props> = ({
   selectedExperiments,
+  selectedRuns,
   trials,
   projectId,
   metricData,
@@ -42,9 +47,14 @@ const CompareHyperparameters: React.FC<Props> = ({
 
   const fullHParams: string[] = useMemo(() => {
     const hpParams = new Set<string>();
-    trials.forEach((trial) => Object.keys(trial.hyperparameters).forEach((hp) => hpParams.add(hp)));
+    trials?.forEach((trial) =>
+      Object.keys(trial.hyperparameters).forEach((hp) => hpParams.add(hp)),
+    );
+    selectedRuns?.forEach((run) =>
+      Object.keys(run.hyperparameters ?? {}).forEach((hp) => hpParams.add(hp)),
+    );
     return Array.from(hpParams);
-  }, [trials]);
+  }, [selectedRuns, trials]);
 
   const settingsConfig = useMemo(
     () => settingsConfigForCompareHyperparameters(fullHParams, projectId),
@@ -120,11 +130,11 @@ const CompareHyperparameters: React.FC<Props> = ({
     return <Spinner center spinning />;
   }
 
-  if (trials.length === 0) {
+  if ((trials ?? selectedRuns).length === 0) {
     return <Message title={NO_DATA_MESSAGE} />;
   }
 
-  if (selectedExperiments.length !== 0 && metrics.length === 0) {
+  if ((selectedExperiments ?? selectedRuns).length !== 0 && metrics.length === 0) {
     return (
       <div className={css.waiting}>
         <Alert
@@ -140,35 +150,63 @@ const CompareHyperparameters: React.FC<Props> = ({
     <Section bodyBorder bodyScroll filters={visualizationFilters}>
       <div className={css.container}>
         <div className={css.chart}>
-          {selectedExperiments.length > 0 && (
+          {(selectedExperiments ?? selectedRuns).length > 0 && (
             <>
               <Title>Parallel Coordinates</Title>
-              <CompareParallelCoordinates
-                fullHParams={fullHParams}
-                metricData={metricData}
-                projectId={projectId}
-                selectedExperiments={selectedExperiments}
-                settings={settings}
-                trials={trials}
-              />
+              {selectedRuns ? (
+                <CompareParallelCoordinates
+                  fullHParams={fullHParams}
+                  metricData={metricData}
+                  projectId={projectId}
+                  selectedRuns={selectedRuns}
+                  settings={settings}
+                />
+              ) : (
+                <CompareParallelCoordinates
+                  fullHParams={fullHParams}
+                  metricData={metricData}
+                  projectId={projectId}
+                  selectedExperiments={selectedExperiments}
+                  settings={settings}
+                  trials={trials}
+                />
+              )}
               <Divider />
               <Title>Scatter Plots</Title>
-              <CompareScatterPlots
-                fullHParams={fullHParams}
-                metricData={metricData}
-                selectedExperiments={selectedExperiments}
-                settings={settings}
-                trials={trials}
-              />
+              {selectedRuns ? (
+                <CompareScatterPlots
+                  fullHParams={fullHParams}
+                  metricData={metricData}
+                  selectedRuns={selectedRuns}
+                  settings={settings}
+                />
+              ) : (
+                <CompareScatterPlots
+                  fullHParams={fullHParams}
+                  metricData={metricData}
+                  selectedExperiments={selectedExperiments}
+                  settings={settings}
+                  trials={trials}
+                />
+              )}
               <Divider />
               <Title>Heat Maps</Title>
-              <CompareHeatMaps
-                fullHParams={fullHParams}
-                metricData={metricData}
-                selectedExperiments={selectedExperiments}
-                settings={settings}
-                trials={trials}
-              />
+              {selectedRuns ? (
+                <CompareHeatMaps
+                  fullHParams={fullHParams}
+                  metricData={metricData}
+                  selectedRuns={selectedRuns}
+                  settings={settings}
+                />
+              ) : (
+                <CompareHeatMaps
+                  fullHParams={fullHParams}
+                  metricData={metricData}
+                  selectedExperiments={selectedExperiments}
+                  settings={settings}
+                  trials={trials}
+                />
+              )}
             </>
           )}
         </div>
diff --git a/webui/react/src/components/CompareParallelCoordinates.tsx b/webui/react/src/components/CompareParallelCoordinates.tsx
index 16569835b3dc..8fe4ac4ae453 100644
--- a/webui/react/src/components/CompareParallelCoordinates.tsx
+++ b/webui/react/src/components/CompareParallelCoordinates.tsx
@@ -9,16 +9,17 @@ import { useGlasbey } from 'hooks/useGlasbey';
 import { TrialMetricData } from 'pages/TrialDetails/useTrialMetrics';
 import {
   ExperimentWithTrial,
+  FlatRun,
   HpTrialData,
   Hyperparameter,
   HyperparameterType,
   Primitive,
-  Range,
   Scale,
   TrialItem,
   XAxisDomain,
+  XOR,
 } from 'types';
-import { defaultNumericRange, getNumericRange, updateRange } from 'utils/chart';
+import { getNumericRange } from 'utils/chart';
 import { flattenObject, isPrimitive } from 'utils/data';
 import { metricToKey, metricToStr } from 'utils/metric';
 import { numericSorter } from 'utils/sort';
@@ -28,28 +29,37 @@ import css from './HpParallelCoordinates.module.scss';
 
 export const COMPARE_PARALLEL_COORDINATES = 'compare-parallel-coordinates';
 
-interface Props {
+interface BaseProps {
   projectId: number;
-  selectedExperiments: ExperimentWithTrial[];
-  trials: TrialItem[];
   metricData: TrialMetricData;
   settings: CompareHyperparametersSettings;
   fullHParams: string[];
 }
 
+type Props = XOR<
+  { selectedExperiments: ExperimentWithTrial[]; trials: TrialItem[] },
+  { selectedRuns: FlatRun[] }
+> &
+  BaseProps;
+
 const CompareParallelCoordinates: React.FC<Props> = ({
   selectedExperiments,
   trials,
   settings,
   metricData,
   fullHParams,
+  selectedRuns,
 }: Props) => {
   const [chartData, setChartData] = useState<HpTrialData | undefined>();
   const [hermesCreatedFilters, setHermesCreatedFilters] = useState<Hermes.Filters>({});
 
   const { metrics, data, isLoaded, setScale } = metricData;
 
-  const colorMap = useGlasbey(selectedExperiments.map((e) => e.experiment.id));
+  const colorMap = useGlasbey(
+    selectedExperiments
+      ? selectedExperiments.map((e) => e.experiment.id)
+      : selectedRuns.map((r) => r.id),
+  );
   const selectedScale = settings.scale;
 
   useEffect(() => {
@@ -61,7 +71,7 @@ const CompareParallelCoordinates: React.FC<Props> = ({
 
   const experimentHyperparameters = useMemo(() => {
     const hpMap: Record<string, Hyperparameter> = {};
-    selectedExperiments.forEach((exp) => {
+    selectedExperiments?.forEach((exp) => {
       const hps = Object.keys(exp.experiment.hyperparameters);
       hps.forEach((hp) => (hpMap[hp] = exp.experiment.hyperparameters[hp]));
     });
@@ -140,67 +150,99 @@ const CompareParallelCoordinates: React.FC<Props> = ({
 
   useEffect(() => {
     if (!selectedMetric) return;
-    const trialMetricsMap: Record<number, number> = {};
-    const trialHpMap: Record<string, Record<number, Primitive>> = {};
-
-    const trialHpdata: Record<string, Primitive[]> = {};
-    let trialMetricRange: Range<number> = defaultNumericRange(true);
-
-    trials?.forEach((trial) => {
-      const expId = trial.experimentId;
-      const key = metricToKey(selectedMetric);
-
-      // Choose the final metric value for each trial
-      const metricValue = data?.[trial.id]?.[key]?.data?.[XAxisDomain.Batches]?.at(-1)?.[1];
-
-      if (!metricValue) return;
-      trialMetricsMap[expId] = metricValue;
-
-      trialMetricRange = updateRange<number>(trialMetricRange, metricValue);
-      const flatHParams = {
-        ...trial?.hyperparameters,
-        ...flattenObject(trial?.hyperparameters || {}),
-      };
-
-      Object.keys(flatHParams).forEach((hpKey) => {
-        const hpValue = flatHParams[hpKey];
-        trialHpMap[hpKey] = trialHpMap[hpKey] ?? {};
-        trialHpMap[hpKey][expId] = isPrimitive(hpValue)
-          ? (hpValue as Primitive)
-          : JSON.stringify(hpValue);
+    const metricsMap: Record<number, number> = {};
+    const hpMap: Record<string, Record<number, Primitive>> = {};
+
+    const hpData: Record<string, Primitive[]> = {};
+
+    if (trials) {
+      trials.forEach((trial) => {
+        const expId = trial.experimentId;
+        const key = metricToKey(selectedMetric);
+
+        // Choose the final metric value for each trial
+        const metricValue = data?.[trial.id]?.[key]?.data?.[XAxisDomain.Batches]?.at(-1)?.[1];
+
+        if (!metricValue) return;
+        metricsMap[expId] = metricValue;
+
+        const flatHParams = {
+          ...trial?.hyperparameters,
+          ...flattenObject(trial?.hyperparameters || {}),
+        };
+
+        Object.keys(flatHParams).forEach((hpKey) => {
+          const hpValue = flatHParams[hpKey];
+          hpMap[hpKey] = hpMap[hpKey] ?? {};
+          hpMap[hpKey][expId] = isPrimitive(hpValue)
+            ? (hpValue as Primitive)
+            : JSON.stringify(hpValue);
+        });
       });
-    });
+    } else if (selectedRuns) {
+      selectedRuns.forEach((run) => {
+        const key = metricToKey(selectedMetric);
+
+        // Choose the final metric value for each trial
+        const metricValue = data?.[run.id]?.[key]?.data?.[XAxisDomain.Batches]?.at(-1)?.[1];
 
-    const trialIds = Object.keys(trialMetricsMap)
+        if (!metricValue) return;
+        metricsMap[run.id] = metricValue;
+
+        const flatHParams = {
+          ...run.hyperparameters,
+          ...flattenObject(run.hyperparameters || {}),
+        };
+
+        Object.keys(flatHParams).forEach((hpKey) => {
+          const hpValue = flatHParams[hpKey];
+          hpMap[hpKey] = hpMap[hpKey] ?? {};
+          hpMap[hpKey][run.id] = isPrimitive(hpValue)
+            ? (hpValue as Primitive)
+            : JSON.stringify(hpValue);
+        });
+      });
+    }
+
+    const trialIds = Object.keys(metricsMap)
       .map((id) => parseInt(id))
       .sort(numericSorter);
 
-    Object.keys(trialHpMap).forEach((hpKey) => {
-      trialHpdata[hpKey] = trialIds.map((trialId) => trialHpMap[hpKey][trialId]);
+    Object.keys(hpMap).forEach((hpKey) => {
+      hpData[hpKey] = trialIds.map((trialId) => hpMap[hpKey][trialId]);
     });
 
     const metricKey = metricToStr(selectedMetric);
-    const metricValues = trialIds.map((id) => trialMetricsMap[id]);
-    trialHpdata[metricKey] = metricValues;
+    const metricValues = trialIds.map((id) => metricsMap[id]);
+    hpData[metricKey] = metricValues;
 
     const metricRange = getNumericRange(metricValues);
     setChartData({
-      data: trialHpdata,
+      data: hpData,
       metricRange,
       metricValues,
       trialIds,
     });
-  }, [selectedExperiments, selectedMetric, fullHParams, metricData, selectedScale, trials, data]);
+  }, [
+    selectedExperiments,
+    selectedMetric,
+    fullHParams,
+    metricData,
+    selectedScale,
+    trials,
+    data,
+    selectedRuns,
+  ]);
 
   if (!isLoaded) {
     return <Spinner center spinning />;
   }
 
-  if (trials.length === 0) {
+  if ((trials ?? selectedRuns).length === 0) {
     return <Message title="No data available." />;
   }
 
-  if (!chartData || (selectedExperiments.length !== 0 && metrics.length === 0)) {
+  if (!chartData || ((selectedExperiments ?? selectedRuns).length !== 0 && metrics.length === 0)) {
     return (
       <div className={css.waiting}>
         <Alert
@@ -214,7 +256,7 @@ const CompareParallelCoordinates: React.FC<Props> = ({
 
   return (
     <div className={css.container}>
-      {selectedExperiments.length > 0 && (
+      {(selectedExperiments ?? selectedRuns).length > 0 && (
         <div className={css.chart} data-testid={COMPARE_PARALLEL_COORDINATES}>
           <ParallelCoordinates
             config={config}
diff --git a/webui/react/src/components/CompareScatterPlots.tsx b/webui/react/src/components/CompareScatterPlots.tsx
index 6dac423beb26..4c9fb3ebd9bc 100644
--- a/webui/react/src/components/CompareScatterPlots.tsx
+++ b/webui/react/src/components/CompareScatterPlots.tsx
@@ -11,12 +11,15 @@ import useResize from 'hooks/useResize';
 import { TrialMetricData } from 'pages/TrialDetails/useTrialMetrics';
 import {
   ExperimentWithTrial,
+  FlatRun,
   Hyperparameter,
   HyperparameterType,
   Primitive,
   Scale,
+  TrialHyperparameters,
   TrialItem,
   XAxisDomain,
+  XOR,
 } from 'types';
 import { flattenObject, isBoolean, isString } from 'utils/data';
 import { metricToKey, metricToStr } from 'utils/metric';
@@ -25,20 +28,24 @@ import { CompareHyperparametersSettings } from './CompareHyperparameters.setting
 
 export const COMPARE_SCATTER_PLOTS = 'compare-scatterplots';
 
-interface Props {
-  selectedExperiments: ExperimentWithTrial[];
-  trials: TrialItem[];
+interface BaseProps {
   metricData: TrialMetricData;
   fullHParams: string[];
   settings: CompareHyperparametersSettings;
 }
 
+type Props = XOR<
+  { selectedExperiments: ExperimentWithTrial[]; trials: TrialItem[] },
+  { selectedRuns: FlatRun[] }
+> &
+  BaseProps;
+
 interface HpMetricData {
   hpLabels: Record<string, string[]>;
   hpLogScales: Record<string, boolean>;
   hpValues: Record<string, number[]>;
   metricValues: Record<string, (number | undefined)[]>;
-  trialIds: number[];
+  recordIds: number[];
 }
 
 const CompareScatterPlots: React.FC<Props> = ({
@@ -47,6 +54,7 @@ const CompareScatterPlots: React.FC<Props> = ({
   settings,
   metricData,
   selectedExperiments,
+  selectedRuns,
 }: Props) => {
   const baseRef = useRef<HTMLDivElement>(null);
   const [chartData, setChartData] = useState<HpMetricData>();
@@ -92,7 +100,7 @@ const CompareScatterPlots: React.FC<Props> = ({
             null,
             null,
             null,
-            chartData?.trialIds || [],
+            chartData?.recordIds || [],
           ],
         ],
         options: {
@@ -107,7 +115,7 @@ const CompareScatterPlots: React.FC<Props> = ({
           cursor: { drag: { setScale: false, x: false, y: false } },
           title,
         },
-        tooltipLabels: [xLabel, yLabel, null, null, null, 'trial ID'],
+        tooltipLabels: [xLabel, yLabel, null, null, null, 'record ID'],
       };
       return acc;
     }, {});
@@ -139,7 +147,7 @@ const CompareScatterPlots: React.FC<Props> = ({
 
   const experimentHyperparameters = useMemo(() => {
     const hpMap: Record<string, Hyperparameter> = {};
-    selectedExperiments.forEach((exp) => {
+    selectedExperiments?.forEach((exp) => {
       const hps = Object.keys(exp.experiment.hyperparameters);
       hps.forEach((hp) => (hpMap[hp] = exp.experiment.hyperparameters[hp]));
     });
@@ -149,7 +157,7 @@ const CompareScatterPlots: React.FC<Props> = ({
   useEffect(() => {
     if (!selectedMetric) return;
 
-    const trialIds: number[] = [];
+    const recordIds: number[] = [];
     const hpTrialMap: Record<
       string,
       Record<number, { hp: Primitive; metric: number | undefined }>
@@ -160,22 +168,25 @@ const CompareScatterPlots: React.FC<Props> = ({
     const hpLabelMap: Record<string, string[]> = {};
     const hpLogScaleMap: Record<string, boolean> = {};
 
-    trials.forEach((trial) => {
-      const trialId = trial.id;
-      trialIds.push(trialId);
+    const recordHyperparameters: [number, TrialHyperparameters][] = selectedRuns
+      ? selectedRuns.flatMap((run) => (run.hyperparameters ? [[run.id, run.hyperparameters]] : []))
+      : trials.map((trial) => [trial.id, trial.hyperparameters]);
+
+    recordHyperparameters?.forEach(([recordId, recordHp]) => {
+      recordIds.push(recordId);
 
-      const flatHParams = flattenObject(trial.hyperparameters);
+      const flatHParams = flattenObject(recordHp);
       fullHParams.forEach((hParam: string) => {
         /**
          * TODO: filtering NaN, +/- Infinity for now, but handle it later with
          * dynamic min/max ranges via uPlot.Scales.
          */
         const key = metricToKey(selectedMetric);
-        const trialMetric = data?.[trial.id]?.[key]?.data?.[XAxisDomain.Batches]?.at(-1)?.[1];
+        const trialMetric = data?.[recordId]?.[key]?.data?.[XAxisDomain.Batches]?.at(-1)?.[1];
 
         hpTrialMap[hParam] = hpTrialMap[hParam] || {};
-        hpTrialMap[hParam][trialId] = hpTrialMap[hParam][trialId] || {};
-        hpTrialMap[hParam][trialId] = {
+        hpTrialMap[hParam][recordId] = hpTrialMap[hParam][recordId] || {};
+        hpTrialMap[hParam][recordId] = {
           hp: flatHParams[hParam],
           metric: trialMetric,
         };
@@ -185,8 +196,8 @@ const CompareScatterPlots: React.FC<Props> = ({
         hpMetricMap[hParam] = [];
         hpValueMap[hParam] = [];
         hpLabelMap[hParam] = [];
-        trialIds.forEach((trialId) => {
-          const map = hpTrialMap[hParam]?.[trialId] || {};
+        recordIds.forEach((recordId) => {
+          const map = hpTrialMap[hParam]?.[recordId] || {};
           const hpValue = isBoolean(map.hp) ? map.hp.toString() : map.hp;
 
           if (isString(hpValue)) {
@@ -211,9 +222,9 @@ const CompareScatterPlots: React.FC<Props> = ({
       hpLogScales: hpLogScaleMap,
       hpValues: hpValueMap,
       metricValues: hpMetricMap,
-      trialIds,
+      recordIds,
     });
-  }, [fullHParams, experimentHyperparameters, selectedMetric, trials, data]);
+  }, [fullHParams, experimentHyperparameters, selectedMetric, trials, data, selectedRuns]);
 
   if (!metricsLoaded || !chartData) {
     return <Spinner center spinning />;
diff --git a/webui/react/src/components/RunComparisonView.tsx b/webui/react/src/components/RunComparisonView.tsx
index 110f44644438..0133e11cc3ae 100644
--- a/webui/react/src/components/RunComparisonView.tsx
+++ b/webui/react/src/components/RunComparisonView.tsx
@@ -5,10 +5,10 @@ import Pivot, { PivotProps } from 'hew/Pivot';
 import SplitPane, { Pane } from 'hew/SplitPane';
 import React, { useMemo } from 'react';
 
-//import CompareHyperparameters from 'components/CompareHyperparameters';
+import CompareHyperparameters from 'components/CompareHyperparameters';
 import useMobile from 'hooks/useMobile';
 import useScrollbarWidth from 'hooks/useScrollbarWidth';
-//import { TrialsComparisonTable } from 'pages/ExperimentDetails/TrialsComparisonModal';
+import { TrialsComparisonTable } from 'pages/ExperimentDetails/TrialsComparisonModal';
 import { useRunMetrics } from 'pages/FlatRuns/useRunMetrics';
 import { FlatRun } from 'types';
 
@@ -30,7 +30,7 @@ const RunComparisonView: React.FC<Props> = ({
   initialWidth,
   onWidthChange,
   fixedColumnsCount,
-  //projectId,
+  projectId,
   selectedRuns,
 }) => {
   const scrollbarWidth = useScrollbarWidth();
@@ -50,25 +50,24 @@ const RunComparisonView: React.FC<Props> = ({
         key: 'metrics',
         label: 'Metrics',
       },
-      // {
-      //   children: (
-      //     <CompareHyperparameters
-      //       metricData={metricData}
-      //       projectId={projectId}
-      //       selectedExperiments={selectedExperiments}
-      //       trials={trials}
-      //     />
-      //   ),
-      //   key: 'hyperparameters',
-      //   label: 'Hyperparameters',
-      // },
-      // {
-      //   children: <TrialsComparisonTable experiment={experiments} trials={trials} />,
-      //   key: 'details',
-      //   label: 'Details',
-      // },
+      {
+        children: (
+          <CompareHyperparameters
+            metricData={metricData}
+            projectId={projectId}
+            selectedRuns={selectedRuns}
+          />
+        ),
+        key: 'hyperparameters',
+        label: 'Hyperparameters',
+      },
+      {
+        children: <TrialsComparisonTable runs={selectedRuns} />,
+        key: 'details',
+        label: 'Details',
+      },
     ];
-  }, [metricData, selectedRuns]);
+  }, [metricData, projectId, selectedRuns]);
 
   const leftPane =
     open && !hasPinnedColumns ? (