diff --git a/frontend/src/scenes/experiments/Experiment.scss b/frontend/src/scenes/experiments/Experiment.scss
index 8d0d2c667d705..8aa584d525f4d 100644
--- a/frontend/src/scenes/experiments/Experiment.scss
+++ b/frontend/src/scenes/experiments/Experiment.scss
@@ -187,4 +187,16 @@
     .InsightViz .LemonTable__cell--sticky::before {
         background: var(--bg-table);
     }
+
+    .secondary-metrics-table .LemonTable__content > table > {
+        thead > tr > th {
+            padding-top: 0;
+            padding-bottom: 0;
+        }
+
+        tbody > tr > td {
+            padding-top: 0;
+            padding-bottom: 0;
+        }
+    }
 }
diff --git a/frontend/src/scenes/experiments/ExperimentNext.tsx b/frontend/src/scenes/experiments/ExperimentNext.tsx
index 01557833d7f80..e4f716d947190 100644
--- a/frontend/src/scenes/experiments/ExperimentNext.tsx
+++ b/frontend/src/scenes/experiments/ExperimentNext.tsx
@@ -39,12 +39,6 @@ export function ExperimentView(): JSX.Element {
                                 <ProgressBar />
                                 <Goal />
                                 <Results />
-                                <SecondaryMetricsTable
-                                    experimentId={experiment.id}
-                                    onMetricsChange={(metrics) => updateExperimentSecondaryMetrics(metrics)}
-                                    initialMetrics={experiment.secondary_metrics}
-                                    defaultAggregationType={experiment.parameters?.aggregation_group_type_index}
-                                />
                                 <ExperimentGoalModal experimentId={experimentId} />
                                 <ExperimentExposureModal experimentId={experimentId} />
                             </>
@@ -55,6 +49,12 @@ export function ExperimentView(): JSX.Element {
                                 {experiment.start_date && <NoResultsEmptyState />}
                             </>
                         )}
+                        <SecondaryMetricsTable
+                            experimentId={experiment.id}
+                            onMetricsChange={(metrics) => updateExperimentSecondaryMetrics(metrics)}
+                            initialMetrics={experiment.secondary_metrics}
+                            defaultAggregationType={experiment.parameters?.aggregation_group_type_index}
+                        />
                         <DistributionTable />
                         <ReleaseConditionsTable />
                     </>
diff --git a/frontend/src/scenes/experiments/ExperimentView/SecondaryMetricsTable.tsx b/frontend/src/scenes/experiments/ExperimentView/SecondaryMetricsTable.tsx
index ea9c7befcdd7f..56195a8b9c7b3 100644
--- a/frontend/src/scenes/experiments/ExperimentView/SecondaryMetricsTable.tsx
+++ b/frontend/src/scenes/experiments/ExperimentView/SecondaryMetricsTable.tsx
@@ -1,113 +1,67 @@
 import '../Experiment.scss'
 
-import { IconPlus } from '@posthog/icons'
-import { LemonButton, LemonInput, LemonModal, LemonTable, LemonTableColumns } from '@posthog/lemon-ui'
-import { useActions, useValues } from 'kea'
+import { IconPencil, IconPlus } from '@posthog/icons'
+import { LemonBanner, LemonButton, LemonInput, LemonModal, LemonTable, LemonTableColumns } from '@posthog/lemon-ui'
+import { BindLogic, useActions, useValues } from 'kea'
 import { Form } from 'kea-forms'
+import { EXPERIMENT_DEFAULT_DURATION } from 'lib/constants'
 import { IconAreaChart } from 'lib/lemon-ui/icons'
 import { LemonField } from 'lib/lemon-ui/LemonField'
-import { capitalizeFirstLetter, humanFriendlyNumber } from 'lib/utils'
+import { capitalizeFirstLetter } from 'lib/utils'
+import { insightDataLogic } from 'scenes/insights/insightDataLogic'
+import { insightLogic } from 'scenes/insights/insightLogic'
 
+import { Query } from '~/queries/Query/Query'
 import { InsightType } from '~/types'
 
 import { SECONDARY_METRIC_INSIGHT_ID } from '../constants'
 import { experimentLogic, TabularSecondaryMetricResults } from '../experimentLogic'
-import { MetricSelector } from '../MetricSelector'
+import { ExperimentInsightCreator, MetricSelector } from '../MetricSelector'
 import { secondaryMetricsLogic, SecondaryMetricsProps } from '../secondaryMetricsLogic'
-import { getExperimentInsightColour } from '../utils'
+import { findKeyWithHighestNumber, getExperimentInsightColour } from '../utils'
 
-export function SecondaryMetricsTable({
+export function SecondaryMetricsModal({
     onMetricsChange,
     initialMetrics,
     experimentId,
     defaultAggregationType,
 }: SecondaryMetricsProps): JSX.Element {
     const logic = secondaryMetricsLogic({ onMetricsChange, initialMetrics, experimentId, defaultAggregationType })
-    const { metrics, isModalOpen, isSecondaryMetricModalSubmitting, existingModalSecondaryMetric, metricIdx } =
-        useValues(logic)
-
     const {
-        deleteMetric,
-        openModalToCreateSecondaryMetric,
-        openModalToEditSecondaryMetric,
-        closeModal,
-        saveSecondaryMetric,
-        setPreviewInsight,
-    } = useActions(logic)
+        secondaryMetricModal,
+        isModalOpen,
+        isModalReadOnly,
+        isSecondaryMetricModalSubmitting,
+        existingModalSecondaryMetric,
+        metricIdx,
+    } = useValues(logic)
 
-    const {
-        secondaryMetricResultsLoading,
-        isExperimentRunning,
-        getIndexForVariant,
-        experiment,
-        experimentResults,
-        tabularSecondaryMetricResults,
-    } = useValues(experimentLogic({ experimentId }))
+    const { deleteMetric, closeModal, saveSecondaryMetric, setPreviewInsight } = useActions(logic)
 
-    const columns: LemonTableColumns<TabularSecondaryMetricResults> = [
-        {
-            key: 'variant',
-            title: 'Variant',
-            render: function Key(_, item: TabularSecondaryMetricResults): JSX.Element {
-                return (
-                    <div className="flex items-center">
-                        <div
-                            className="w-2 h-2 rounded-full mr-2"
-                            // eslint-disable-next-line react/forbid-dom-props
-                            style={{
-                                backgroundColor: getExperimentInsightColour(
-                                    getIndexForVariant(experimentResults, item.variant)
-                                ),
-                            }}
-                        />
-                        <span className="font-semibold">{capitalizeFirstLetter(item.variant)}</span>
-                    </div>
-                )
-            },
-        },
-    ]
+    const { isExperimentRunning } = useValues(experimentLogic({ experimentId }))
 
-    experiment.secondary_metrics?.forEach((metric, idx) => {
-        columns.push({
-            key: `results_${idx}`,
-            title: (
-                <span className="inline-flex py-2">
-                    <LemonButton
-                        type="secondary"
-                        size="small"
-                        icon={<IconAreaChart />}
-                        onClick={() => openModalToEditSecondaryMetric(metric, idx)}
-                    >
-                        <b>{capitalizeFirstLetter(metric.name)}</b>
-                    </LemonButton>
-                </span>
-            ),
-            render: function Key(_, item: TabularSecondaryMetricResults): JSX.Element {
-                return (
-                    <div>
-                        {item.results?.[idx].result ? (
-                            item.results[idx].insightType === InsightType.FUNNELS ? (
-                                <>{((item.results[idx].result as number) * 100).toFixed(1)}%</>
-                            ) : (
-                                <>{humanFriendlyNumber(item.results[idx].result as number)}</>
-                            )
-                        ) : (
-                            <>--</>
-                        )}
-                    </div>
-                )
-            },
-        })
-    })
+    const insightLogicInstance = insightLogic({ dashboardItemId: SECONDARY_METRIC_INSIGHT_ID, syncWithUrl: false })
+    const { insightProps } = useValues(insightLogicInstance)
+    const { query } = useValues(insightDataLogic(insightProps))
 
     return (
-        <>
-            <LemonModal
-                isOpen={isModalOpen}
-                onClose={closeModal}
-                width={1000}
-                title={existingModalSecondaryMetric ? 'Edit secondary metric' : 'New secondary metric'}
-                footer={
+        <LemonModal
+            isOpen={isModalOpen}
+            onClose={closeModal}
+            width={1000}
+            title={
+                isModalReadOnly
+                    ? secondaryMetricModal.name
+                    : existingModalSecondaryMetric
+                    ? 'Edit secondary metric'
+                    : 'New secondary metric'
+            }
+            footer={
+                isModalReadOnly ? (
+                    <LemonButton form="secondary-metric-modal-form" type="secondary" onClick={closeModal}>
+                        Close
+                    </LemonButton>
+                ) : (
                     <>
                         {existingModalSecondaryMetric && (
                             <LemonButton
@@ -135,8 +89,23 @@ export function SecondaryMetricsTable({
                             </LemonButton>
                         </div>
                     </>
-                }
-            >
+                )
+            }
+        >
+            {isModalReadOnly ? (
+                <div>
+                    <ExperimentInsightCreator insightProps={insightProps} />
+                    {isExperimentRunning && (
+                        <LemonBanner type="info" className="mt-3 mb-3">
+                            Preview insights are generated based on {EXPERIMENT_DEFAULT_DURATION} days of data. This can
+                            cause a mismatch between the preview and the actual results.
+                        </LemonBanner>
+                    )}
+                    <BindLogic logic={insightLogic} props={insightProps}>
+                        <Query query={query} context={{ insightProps }} readOnly />
+                    </BindLogic>
+                </div>
+            ) : (
                 <Form
                     logic={secondaryMetricsLogic}
                     props={{ onMetricsChange, initialMetrics, experimentId, defaultAggregationType }}
@@ -155,14 +124,182 @@ export function SecondaryMetricsTable({
                         />
                     </LemonField>
                 </Form>
-            </LemonModal>
+            )}
+        </LemonModal>
+    )
+}
+
+export function SecondaryMetricsTable({
+    onMetricsChange,
+    initialMetrics,
+    experimentId,
+    defaultAggregationType,
+}: SecondaryMetricsProps): JSX.Element {
+    const logic = secondaryMetricsLogic({ onMetricsChange, initialMetrics, experimentId, defaultAggregationType })
+    const { metrics } = useValues(logic)
+
+    const { openModalToCreateSecondaryMetric, openModalToEditSecondaryMetric } = useActions(logic)
+
+    const {
+        secondaryMetricResultsLoading,
+        isExperimentRunning,
+        getIndexForVariant,
+        experiment,
+        experimentResults,
+        secondaryMetricResults,
+        tabularSecondaryMetricResults,
+        countDataForVariant,
+        exposureCountDataForVariant,
+        conversionRateForVariant,
+    } = useValues(experimentLogic({ experimentId }))
+
+    const columns: LemonTableColumns<TabularSecondaryMetricResults> = [
+        {
+            key: 'variant',
+            title: 'Variant',
+            render: function Key(_, item: TabularSecondaryMetricResults): JSX.Element {
+                return (
+                    <div className="flex items-center">
+                        <div
+                            className="w-2 h-2 rounded-full mr-2"
+                            // eslint-disable-next-line react/forbid-dom-props
+                            style={{
+                                backgroundColor: getExperimentInsightColour(
+                                    getIndexForVariant(experimentResults, item.variant)
+                                ),
+                            }}
+                        />
+                        <span className="font-semibold">{capitalizeFirstLetter(item.variant)}</span>
+                    </div>
+                )
+            },
+        },
+    ]
+
+    experiment.secondary_metrics?.forEach((metric, idx) => {
+        const Header = (): JSX.Element => (
+            <div className="py-4 px-2 border-l border-r border-b">
+                <div className="flex">
+                    <div className="w-3/4 truncate">{capitalizeFirstLetter(metric.name)}</div>
+                    <div className="w-1/4 flex flex-col justify-end">
+                        <div className="ml-auto space-x-2 pb-1 inline-flex">
+                            <LemonButton
+                                className="max-w-72"
+                                type="secondary"
+                                size="xsmall"
+                                icon={<IconAreaChart />}
+                                onClick={() => openModalToEditSecondaryMetric(metric, idx, true)}
+                            />
+                            <LemonButton
+                                className="max-w-72"
+                                type="secondary"
+                                size="xsmall"
+                                icon={<IconPencil />}
+                                onClick={() => openModalToEditSecondaryMetric(metric, idx, false)}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        )
+
+        if (metric.filters.insight === InsightType.TRENDS) {
+            columns.push({
+                key: `results_${idx}`,
+                title: (
+                    <div className="w-80">
+                        <Header />
+                        <div className="w-80 inline-flex">
+                            <div className="w-1/3 py-1 flex items-center justify-center border-l text-xs">Count</div>
+                            <div className="w-1/3 py-1 flex items-center justify-center border-l text-xs">Exposure</div>
+                            <div className="w-1/3 py-1 flex items-center justify-center text-center border-l border-r text-xs text-wrap">
+                                Win probability
+                            </div>
+                        </div>
+                    </div>
+                ),
+                render: function Key(_, item: TabularSecondaryMetricResults): JSX.Element {
+                    const targetResults = secondaryMetricResults?.[idx]
+
+                    const { variant } = item
+                    const winningVariant = findKeyWithHighestNumber(targetResults?.probability || null)
+
+                    return (
+                        <div className="w-80 py-0 inline-flex">
+                            <div className="w-1/3 leading-10 text-center border-l text-xs">
+                                {targetResults ? countDataForVariant(targetResults, variant) : '--'}
+                            </div>
+                            <div className="w-1/3 leading-10 text-center border-l text-xs">
+                                {targetResults ? exposureCountDataForVariant(targetResults, variant) : '--'}
+                            </div>
+                            <div
+                                className={`w-1/3 leading-10 text-center border-l border-r text-xs ${
+                                    variant === winningVariant ? 'text-success' : ''
+                                }`}
+                            >
+                                <b>
+                                    {targetResults?.probability?.[variant] != undefined
+                                        ? `${(targetResults.probability?.[variant] * 100).toFixed(1)}%`
+                                        : '--'}
+                                </b>
+                            </div>
+                        </div>
+                    )
+                },
+            })
+        } else {
+            columns.push({
+                key: `results_${idx}`,
+                title: (
+                    <div className="w-80">
+                        <Header />
+                        <div className="w-80 inline-flex">
+                            <div className="w-1/2 py-3 flex items-center justify-center border-l text-xs">
+                                Conversion rate
+                            </div>
+                            <div className="w-1/2 py-3 flex items-center justify-center text-center border-l border-r text-xs text-wrap">
+                                Win probability
+                            </div>
+                        </div>
+                    </div>
+                ),
+                render: function Key(_, item: TabularSecondaryMetricResults): JSX.Element {
+                    const targetResults = secondaryMetricResults?.[idx]
+
+                    const { variant } = item
+                    const winningVariant = findKeyWithHighestNumber(targetResults?.probability || null)
+
+                    const conversionRate = conversionRateForVariant(targetResults || null, variant)
+                    return (
+                        <div className="w-80 h-10 py-0 inline-flex">
+                            <div className="w-1/2 leading-10 text-center border-l text-xs">
+                                {conversionRate === '--' ? conversionRate : `${conversionRate}%`}
+                            </div>
+                            <div
+                                className={`w-1/2 leading-10 text-center border-l border-r text-xs ${
+                                    variant === winningVariant ? 'text-success' : ''
+                                }`}
+                            >
+                                <b>
+                                    {targetResults?.probability?.[variant] != undefined
+                                        ? `${(targetResults.probability?.[variant] * 100).toFixed(1)}%`
+                                        : '--'}
+                                </b>
+                            </div>
+                        </div>
+                    )
+                },
+            })
+        }
+    })
+
+    return (
+        <>
             <div>
                 <div className="flex">
                     <div className="w-1/2">
                         <h2 className="mb-0 font-semibold text-lg">Secondary metrics</h2>
-                        {metrics.length > 0 && (
-                            <div className="mb-2">Click a metric name to compare variants on a graph.</div>
-                        )}
+                        {metrics.length > 0 && <div className="mb-2">Monitor side effects of your experiment.</div>}
                     </div>
 
                     <div className="w-1/2 flex flex-col justify-end">
@@ -183,6 +320,7 @@ export function SecondaryMetricsTable({
                 </div>
                 {metrics && metrics.length > 0 ? (
                     <LemonTable
+                        className="secondary-metrics-table"
                         loading={secondaryMetricResultsLoading}
                         columns={columns}
                         dataSource={tabularSecondaryMetricResults}
@@ -206,6 +344,12 @@ export function SecondaryMetricsTable({
                     </div>
                 )}
             </div>
+            <SecondaryMetricsModal
+                onMetricsChange={onMetricsChange}
+                initialMetrics={initialMetrics}
+                experimentId={experimentId}
+                defaultAggregationType={defaultAggregationType}
+            />
         </>
     )
 }
diff --git a/frontend/src/scenes/experiments/secondaryMetricsLogic.ts b/frontend/src/scenes/experiments/secondaryMetricsLogic.ts
index a12bc0f4a7547..9b7a652ad171c 100644
--- a/frontend/src/scenes/experiments/secondaryMetricsLogic.ts
+++ b/frontend/src/scenes/experiments/secondaryMetricsLogic.ts
@@ -65,9 +65,14 @@ export const secondaryMetricsLogic = kea<secondaryMetricsLogicType>([
     actions({
         // modal
         openModalToCreateSecondaryMetric: true,
-        openModalToEditSecondaryMetric: (metric: SecondaryExperimentMetric, metricIdx: number) => ({
+        openModalToEditSecondaryMetric: (
+            metric: SecondaryExperimentMetric,
+            metricIdx: number,
+            readOnly: boolean = false
+        ) => ({
             metric,
             metricIdx,
+            readOnly,
         }),
         saveSecondaryMetric: true,
         closeModal: true,
@@ -90,6 +95,13 @@ export const secondaryMetricsLogic = kea<secondaryMetricsLogicType>([
                 closeModal: () => false,
             },
         ],
+        isModalReadOnly: [
+            false,
+            {
+                openModalToEditSecondaryMetric: (_, { readOnly }) => readOnly,
+                closeModal: () => false,
+            },
+        ],
         existingModalSecondaryMetric: [
             null as SecondaryExperimentMetric | null,
             {
diff --git a/frontend/src/scenes/experiments/utils.ts b/frontend/src/scenes/experiments/utils.ts
index 90d7b2c64f44b..90233f10dbef1 100644
--- a/frontend/src/scenes/experiments/utils.ts
+++ b/frontend/src/scenes/experiments/utils.ts
@@ -17,3 +17,21 @@ export const transformResultFilters = (filters: Partial<FilterType>): Partial<Fi
         display: ChartDisplayType.ActionsLineGraphCumulative,
     }),
 })
+
+export function findKeyWithHighestNumber(obj: Record<string, number> | null): string | null {
+    if (!obj) {
+        return null
+    }
+
+    let highestValue = -Infinity
+    let keyWithHighestValue = null
+
+    Object.keys(obj).forEach((key) => {
+        if (obj[key] > highestValue) {
+            highestValue = obj[key]
+            keyWithHighestValue = key
+        }
+    })
+
+    return keyWithHighestValue
+}