diff --git a/frontend/src/scenes/experiments/ExperimentImplementationDetails.tsx b/frontend/src/scenes/experiments/ExperimentImplementationDetails.tsx
index 526bd52595f4d..50d7c81373ef0 100644
--- a/frontend/src/scenes/experiments/ExperimentImplementationDetails.tsx
+++ b/frontend/src/scenes/experiments/ExperimentImplementationDetails.tsx
@@ -192,7 +192,7 @@ export function ExperimentImplementationDetails({ experiment }: ExperimentImplem
     }
 
     return (
-        <div>
+        <div className="mb-4">
             <h2 className="font-semibold text-lg mb-2">Implementation</h2>
             <div className="border rounded bg-bg-light">
                 <div className="p-6 space-y-4">
diff --git a/frontend/src/scenes/experiments/ExperimentView/ExperimentView.tsx b/frontend/src/scenes/experiments/ExperimentView/ExperimentView.tsx
index 96d3dd3ff86e4..06c1ba1707b22 100644
--- a/frontend/src/scenes/experiments/ExperimentView/ExperimentView.tsx
+++ b/frontend/src/scenes/experiments/ExperimentView/ExperimentView.tsx
@@ -12,10 +12,12 @@ import { SavedMetricModal } from '../Metrics/SavedMetricModal'
 import { MetricsView } from '../MetricsView/MetricsView'
 import {
     ExperimentLoadingAnimation,
+    ExploreButton,
     LoadingState,
     NoResultsEmptyState,
     PageHeaderCustom,
     ResultsHeader,
+    ResultsQuery,
 } from './components'
 import { CumulativeExposuresChart } from './CumulativeExposuresChart'
 import { DataCollection } from './DataCollection'
@@ -26,17 +28,58 @@ import { Overview } from './Overview'
 import { ReleaseConditionsModal, ReleaseConditionsTable } from './ReleaseConditionsTable'
 import { Results } from './Results'
 import { SecondaryMetricsTable } from './SecondaryMetricsTable'
+import { SummaryTable } from './SummaryTable'
 
-const ResultsTab = (): JSX.Element => {
-    const { experiment, metricResults, featureFlags } = useValues(experimentLogic)
-    const result = metricResults?.[0]
-    const hasResultsInsight = result && result.insight
+const NewResultsTab = (): JSX.Element => {
+    const { experiment, metricResults } = useValues(experimentLogic)
+    const hasSomeResults = metricResults?.some((result) => result?.insight)
+
+    const hasSinglePrimaryMetric = experiment.metrics.length === 1
 
     return (
-        <div className="space-y-8">
-            {featureFlags[FEATURE_FLAGS.EXPERIMENTS_MULTIPLE_METRICS] ? (
-                <MetricsView />
-            ) : hasResultsInsight ? (
+        <>
+            {!hasSomeResults && (
+                <>
+                    {experiment.type === 'web' ? (
+                        <WebExperimentImplementationDetails experiment={experiment} />
+                    ) : (
+                        <ExperimentImplementationDetails experiment={experiment} />
+                    )}
+                </>
+            )}
+            {/* Show overview if there's only a single primary metric */}
+            {hasSinglePrimaryMetric && (
+                <div className="mb-4">
+                    <Overview />
+                </div>
+            )}
+            <MetricsView isSecondary={false} />
+            {/* Show detailed results if there's only a single primary metric */}
+            {hasSomeResults && hasSinglePrimaryMetric && (
+                <div>
+                    <div className="pb-4">
+                        <SummaryTable metric={experiment.metrics[0]} metricIndex={0} isSecondary={false} />
+                    </div>
+                    <div className="flex justify-end">
+                        <ExploreButton result={metricResults?.[0] || null} size="xsmall" />
+                    </div>
+                    <div className="pb-4">
+                        <ResultsQuery result={metricResults?.[0] || null} showTable={true} />
+                    </div>
+                </div>
+            )}
+            <MetricsView isSecondary={true} />
+        </>
+    )
+}
+
+const OldResultsTab = (): JSX.Element => {
+    const { experiment, metricResults } = useValues(experimentLogic)
+    const hasSomeResults = metricResults?.some((result) => result?.insight)
+
+    return (
+        <>
+            {hasSomeResults ? (
                 <Results />
             ) : (
                 <>
@@ -54,15 +97,16 @@ const ResultsTab = (): JSX.Element => {
                     )}
                 </>
             )}
-            {featureFlags[FEATURE_FLAGS.EXPERIMENTS_MULTIPLE_METRICS] ? (
-                <MetricsView isSecondary={true} />
-            ) : (
-                <SecondaryMetricsTable experimentId={experiment.id} />
-            )}
-        </div>
+            <SecondaryMetricsTable experimentId={experiment.id} />
+        </>
     )
 }
 
+const ResultsTab = (): JSX.Element => {
+    const { featureFlags } = useValues(experimentLogic)
+    return <>{featureFlags[FEATURE_FLAGS.EXPERIMENTS_MULTIPLE_METRICS] ? <NewResultsTab /> : <OldResultsTab />}</>
+}
+
 const VariantsTab = (): JSX.Element => {
     return (
         <div className="space-y-8">
@@ -87,8 +131,8 @@ export function ExperimentView(): JSX.Element {
     } = useValues(experimentLogic)
 
     const { setTabKey } = useActions(experimentLogic)
-    const result = metricResults?.[0]
-    const hasResultsInsight = result && result.insight
+    // Instead, check if any result in the array has an insight
+    const hasSomeResults = metricResults?.some((result) => result?.insight)
 
     return (
         <>
@@ -103,8 +147,9 @@ export function ExperimentView(): JSX.Element {
                             <ExperimentLoadingAnimation />
                         ) : (
                             <>
-                                {hasResultsInsight && !featureFlags[FEATURE_FLAGS.EXPERIMENTS_MULTIPLE_METRICS] ? (
+                                {hasSomeResults && !featureFlags[FEATURE_FLAGS.EXPERIMENTS_MULTIPLE_METRICS] ? (
                                     <div>
+                                        <h2 className="font-semibold text-lg">Summary</h2>
                                         <Overview />
                                         <LemonDivider className="mt-4" />
                                     </div>
diff --git a/frontend/src/scenes/experiments/ExperimentView/Overview.tsx b/frontend/src/scenes/experiments/ExperimentView/Overview.tsx
index 351e58e946646..a6765a64f3f9f 100644
--- a/frontend/src/scenes/experiments/ExperimentView/Overview.tsx
+++ b/frontend/src/scenes/experiments/ExperimentView/Overview.tsx
@@ -71,7 +71,6 @@ export function Overview({ metricIndex = 0 }: { metricIndex?: number }): JSX.Ele
 
     return (
         <div>
-            <h2 className="font-semibold text-lg">Summary</h2>
             <div className="items-center inline-flex flex-wrap">
                 <WinningVariantText result={result} experimentId={experimentId} />
                 <SignificanceText metricIndex={metricIndex} />
diff --git a/frontend/src/scenes/experiments/ExperimentView/Results.tsx b/frontend/src/scenes/experiments/ExperimentView/Results.tsx
index b0b291554ef90..b031ae5bdf594 100644
--- a/frontend/src/scenes/experiments/ExperimentView/Results.tsx
+++ b/frontend/src/scenes/experiments/ExperimentView/Results.tsx
@@ -15,7 +15,7 @@ export function Results(): JSX.Element {
         <div>
             <ResultsHeader />
             <SummaryTable metric={experiment.metrics[0]} />
-            <ResultsQuery targetResults={result} showTable={true} />
+            <ResultsQuery result={result} showTable={true} />
         </div>
     )
 }
diff --git a/frontend/src/scenes/experiments/ExperimentView/components.tsx b/frontend/src/scenes/experiments/ExperimentView/components.tsx
index cd252785b116c..b52df2d7207a8 100644
--- a/frontend/src/scenes/experiments/ExperimentView/components.tsx
+++ b/frontend/src/scenes/experiments/ExperimentView/components.tsx
@@ -20,35 +20,23 @@ import { FEATURE_FLAGS } from 'lib/constants'
 import { dayjs } from 'lib/dayjs'
 import { IconAreaChart } from 'lib/lemon-ui/icons'
 import { More } from 'lib/lemon-ui/LemonButton/More'
-import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { useEffect, useState } from 'react'
 import { urls } from 'scenes/urls'
 
 import { groupsModel } from '~/models/groupsModel'
-import { filtersToQueryNode } from '~/queries/nodes/InsightQuery/utils/filtersToQueryNode'
-import { queryFromFilters } from '~/queries/nodes/InsightViz/utils'
 import { Query } from '~/queries/Query/Query'
 import {
-    CachedExperimentFunnelsQueryResponse,
-    CachedExperimentTrendsQueryResponse,
     ExperimentFunnelsQueryResponse,
     ExperimentTrendsQueryResponse,
     InsightQueryNode,
     InsightVizNode,
     NodeKind,
 } from '~/queries/schema'
-import {
-    Experiment,
-    Experiment as ExperimentType,
-    ExperimentIdType,
-    ExperimentResults,
-    InsightShortId,
-    InsightType,
-} from '~/types'
+import { Experiment, Experiment as ExperimentType, ExperimentIdType, InsightShortId, InsightType } from '~/types'
 
 import { experimentLogic } from '../experimentLogic'
 import { getExperimentStatus, getExperimentStatusColor } from '../experimentsLogic'
-import { getExperimentInsightColour, transformResultFilters } from '../utils'
+import { getExperimentInsightColour } from '../utils'
 
 export function VariantTag({
     experimentId,
@@ -128,79 +116,39 @@ export function ResultsTag({ metricIndex = 0 }: { metricIndex?: number }): JSX.E
 }
 
 export function ResultsQuery({
-    targetResults,
+    result,
     showTable,
 }: {
-    targetResults: ExperimentResults['result'] | ExperimentTrendsQueryResponse | ExperimentFunnelsQueryResponse | null
+    result: ExperimentTrendsQueryResponse | ExperimentFunnelsQueryResponse | null
     showTable: boolean
 }): JSX.Element {
-    const { featureFlags } = useValues(featureFlagLogic)
-    if (featureFlags[FEATURE_FLAGS.EXPERIMENTS_HOGQL]) {
-        const newQueryResults = targetResults as unknown as
-            | CachedExperimentTrendsQueryResponse
-            | CachedExperimentFunnelsQueryResponse
-
-        const query =
-            newQueryResults.kind === NodeKind.ExperimentTrendsQuery
-                ? newQueryResults.count_query
-                : newQueryResults.funnels_query
-        const fakeInsightId = Math.random().toString(36).substring(2, 15)
-
-        return (
-            <Query
-                query={{
-                    kind: NodeKind.InsightVizNode,
-                    source: query,
-                    showTable,
-                    showLastComputation: true,
-                    showLastComputationRefresh: false,
-                }}
-                context={{
-                    insightProps: {
-                        dashboardItemId: fakeInsightId as InsightShortId,
-                        cachedInsight: {
-                            short_id: fakeInsightId as InsightShortId,
-                            query: {
-                                kind: NodeKind.InsightVizNode,
-                                source: query,
-                            } as InsightVizNode,
-                            result: newQueryResults?.insight,
-                            disable_baseline: true,
-                        },
-                        doNotLoad: true,
-                    },
-                }}
-                readOnly
-            />
-        )
-    }
-
-    const oldQueryResults = targetResults as ExperimentResults['result']
-
-    if (!oldQueryResults?.filters) {
+    if (!result) {
         return <></>
     }
 
+    const query = result.kind === NodeKind.ExperimentTrendsQuery ? result.count_query : result.funnels_query
+    const fakeInsightId = Math.random().toString(36).substring(2, 15)
+
     return (
         <Query
             query={{
                 kind: NodeKind.InsightVizNode,
-                source: filtersToQueryNode(transformResultFilters(oldQueryResults?.filters ?? {})),
+                source: query,
                 showTable,
                 showLastComputation: true,
                 showLastComputationRefresh: false,
             }}
             context={{
                 insightProps: {
-                    dashboardItemId: oldQueryResults?.fakeInsightId as InsightShortId,
+                    dashboardItemId: fakeInsightId as InsightShortId,
                     cachedInsight: {
-                        short_id: oldQueryResults?.fakeInsightId as InsightShortId,
-                        query: oldQueryResults?.filters
-                            ? queryFromFilters(transformResultFilters(oldQueryResults.filters))
-                            : null,
-                        result: oldQueryResults?.insight,
+                        short_id: fakeInsightId as InsightShortId,
+                        query: {
+                            kind: NodeKind.InsightVizNode,
+                            source: query,
+                        } as InsightVizNode,
+                        result: result?.insight,
                         disable_baseline: true,
-                        last_refresh: oldQueryResults?.last_refresh,
                     },
                     doNotLoad: true,
                 },
@@ -211,15 +159,12 @@ export function ResultsQuery({
 }
 
 export function ExploreButton({
-    metricIndex = 0,
-    isSecondary = false,
+    result,
+    size = 'small',
 }: {
-    metricIndex?: number
-    isSecondary?: boolean
+    result: ExperimentTrendsQueryResponse | ExperimentFunnelsQueryResponse | null
+    size?: 'xsmall' | 'small' | 'large'
 }): JSX.Element {
-    const { metricResults, secondaryMetricResults } = useValues(experimentLogic)
-    const result = isSecondary ? secondaryMetricResults?.[metricIndex] : metricResults?.[metricIndex]
-
     if (!result) {
         return <></>
     }
@@ -234,7 +179,7 @@ export function ExploreButton({
     return (
         <LemonButton
             className="ml-auto -translate-y-2"
-            size="small"
+            size={size}
             type="primary"
             icon={<IconAreaChart />}
             to={urls.insightNew(undefined, undefined, query)}
@@ -260,7 +205,7 @@ export function ResultsHeader(): JSX.Element {
             </div>
 
             <div className="w-1/2 flex flex-col justify-end">
-                <div className="ml-auto">{result && <ExploreButton />}</div>
+                <div className="ml-auto">{result && <ExploreButton result={result} />}</div>
             </div>
         </div>
     )
@@ -580,12 +525,17 @@ export function PageHeaderCustom(): JSX.Element {
 }
 
 export function ShipVariantModal({ experimentId }: { experimentId: Experiment['id'] }): JSX.Element {
-    const { experiment, sortedWinProbabilities, isShipVariantModalOpen } = useValues(experimentLogic({ experimentId }))
+    const { experiment, isShipVariantModalOpen } = useValues(experimentLogic({ experimentId }))
     const { closeShipVariantModal, shipVariant } = useActions(experimentLogic({ experimentId }))
     const { aggregationLabel } = useValues(groupsModel)
 
     const [selectedVariantKey, setSelectedVariantKey] = useState<string | null>()
-    useEffect(() => setSelectedVariantKey(sortedWinProbabilities(0)[0]?.key), [sortedWinProbabilities(0)])
+    useEffect(() => {
+        if (experiment.parameters?.feature_flag_variants?.length > 1) {
+            // First test variant selected by default
+            setSelectedVariantKey(experiment.parameters.feature_flag_variants[1].key)
+        }
+    }, [experiment])
 
     const aggregationTargetName =
         experiment.filters.aggregation_group_type_index != null
@@ -625,20 +575,19 @@ export function ShipVariantModal({ experimentId }: { experimentId: Experiment['i
                             className="w-full"
                             data-attr="metrics-selector"
                             value={selectedVariantKey}
-                            onChange={(variantKey) => setSelectedVariantKey(variantKey)}
-                            options={sortedWinProbabilities(0).map(({ key }) => ({
-                                value: key,
-                                label: (
-                                    <div className="space-x-2 inline-flex">
-                                        <VariantTag experimentId={experimentId} variantKey={key} />
-                                        {key === sortedWinProbabilities(0)[0]?.key && (
-                                            <LemonTag type="success">
-                                                <b className="uppercase">Winning</b>
-                                            </LemonTag>
-                                        )}
-                                    </div>
-                                ),
-                            }))}
+                            onChange={(variantKey) => {
+                                setSelectedVariantKey(variantKey)
+                            }}
+                            options={
+                                experiment.parameters?.feature_flag_variants?.map(({ key }) => ({
+                                    value: key,
+                                    label: (
+                                        <div className="space-x-2 inline-flex">
+                                            <VariantTag experimentId={experimentId} variantKey={key} />
+                                        </div>
+                                    ),
+                                })) || []
+                            }
                         />
                     </div>
                 </div>
diff --git a/frontend/src/scenes/experiments/Metrics/SecondaryMetricChartModal.tsx b/frontend/src/scenes/experiments/Metrics/SecondaryMetricChartModal.tsx
index ec540aa43c056..184137bb59be6 100644
--- a/frontend/src/scenes/experiments/Metrics/SecondaryMetricChartModal.tsx
+++ b/frontend/src/scenes/experiments/Metrics/SecondaryMetricChartModal.tsx
@@ -32,7 +32,7 @@ export function SecondaryMetricChartModal({
                 </LemonButton>
             }
         >
-            <ResultsQuery targetResults={targetResults} showTable={false} />
+            <ResultsQuery result={targetResults} showTable={false} />
         </LemonModal>
     )
 }
diff --git a/frontend/src/scenes/experiments/MetricsView/DeltaChart.tsx b/frontend/src/scenes/experiments/MetricsView/DeltaChart.tsx
index 820b7b38acfd3..88d24827fa63a 100644
--- a/frontend/src/scenes/experiments/MetricsView/DeltaChart.tsx
+++ b/frontend/src/scenes/experiments/MetricsView/DeltaChart.tsx
@@ -1,4 +1,12 @@
-import { IconActivity, IconGraph, IconMinus, IconPencil, IconTrending } from '@posthog/icons'
+import {
+    IconActivity,
+    IconArrowRight,
+    IconFunnels,
+    IconGraph,
+    IconMinus,
+    IconPencil,
+    IconTrending,
+} from '@posthog/icons'
 import { LemonBanner, LemonButton, LemonModal, LemonTag, LemonTagType, Tooltip } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { LemonProgress } from 'lib/lemon-ui/LemonProgress'
@@ -35,6 +43,34 @@ function formatTickValue(value: number): string {
 
     return `${(value * 100).toFixed(decimals)}%`
 }
+const getMetricTitle = (metric: any, metricType: InsightType): JSX.Element => {
+    if (metric.name) {
+        return <span className="truncate">{metric.name}</span>
+    }
+
+    if (metricType === InsightType.TRENDS && metric.count_query?.series?.[0]?.name) {
+        return <span className="truncate">{metric.count_query.series[0].name}</span>
+    }
+
+    if (metricType === InsightType.FUNNELS && metric.funnels_query?.series) {
+        const series = metric.funnels_query.series
+        if (series.length > 0) {
+            const firstStep = series[0]?.name
+            const lastStep = series[series.length - 1]?.name
+
+            return (
+                <span className="inline-flex items-center gap-1 min-w-0">
+                    <IconFunnels className="text-muted flex-shrink-0" fontSize="14" />
+                    <span className="truncate">{firstStep}</span>
+                    <IconArrowRight className="text-muted flex-shrink-0" fontSize="14" />
+                    <span className="truncate">{lastStep}</span>
+                </span>
+            )
+        }
+    }
+
+    return <span className="text-muted truncate">Untitled metric</span>
+}
 
 export function DeltaChart({
     isSecondary,
@@ -183,9 +219,9 @@ export function DeltaChart({
                     <div className="text-xs font-semibold whitespace-nowrap overflow-hidden">
                         <div className="space-y-1 pl-1">
                             <div className="flex items-center gap-2">
-                                <div className="cursor-default text-xs font-semibold whitespace-nowrap overflow-hidden text-ellipsis flex-grow">
-                                    {metricIndex + 1}.{' '}
-                                    {metric.name || <span className="text-muted">Untitled metric</span>}
+                                <div className="cursor-default text-xs font-semibold whitespace-nowrap overflow-hidden text-ellipsis flex-grow flex items-center">
+                                    <span className="mr-1">{metricIndex + 1}.</span>
+                                    {getMetricTitle(metric, metricType)}
                                 </div>
                                 <LemonButton
                                     className="flex-shrink-0"
@@ -248,17 +284,19 @@ export function DeltaChart({
                         }}
                     >
                         <SignificanceHighlight metricIndex={metricIndex} isSecondary={isSecondary} />
-                        <div className="flex justify-center">
-                            <LemonButton
-                                className="mt-1"
-                                type="secondary"
-                                size="xsmall"
-                                icon={<IconGraph />}
-                                onClick={() => setIsModalOpen(true)}
-                            >
-                                Detailed results
-                            </LemonButton>
-                        </div>
+                        {experiment.metrics.length > 1 && (
+                            <div className="flex justify-center">
+                                <LemonButton
+                                    className="mt-1"
+                                    type="secondary"
+                                    size="xsmall"
+                                    icon={<IconGraph />}
+                                    onClick={() => setIsModalOpen(true)}
+                                >
+                                    Detailed results
+                                </LemonButton>
+                            </div>
+                        )}
                     </div>
                 )}
             </div>
@@ -274,34 +312,40 @@ export function DeltaChart({
                 {isFirstMetric && <div className="w-full border-t border-border" />}
                 {/* eslint-disable-next-line react/forbid-dom-props */}
                 <div style={{ height: `${chartSvgHeight}px` }}>
-                    {variants.map((variant) => (
-                        <div
-                            key={variant.key}
-                            // eslint-disable-next-line react/forbid-dom-props
-                            style={{
-                                height: `${100 / variants.length}%`,
-                                display: 'flex',
-                                alignItems: 'center',
-                                paddingLeft: '10px',
-                                position: 'relative',
-                                minWidth: 0,
-                                overflow: 'hidden',
-                            }}
-                        >
+                    {result &&
+                        variants.map((variant) => (
                             <div
-                                className="absolute inset-0"
+                                key={variant.key}
                                 // eslint-disable-next-line react/forbid-dom-props
                                 style={{
-                                    backgroundColor: 'var(--bg-light)',
-                                    opacity: 0.4,
-                                    pointerEvents: 'none',
+                                    height: `${100 / variants.length}%`,
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    paddingLeft: '10px',
+                                    position: 'relative',
+                                    minWidth: 0,
+                                    overflow: 'hidden',
                                 }}
-                            />
-                            <div className="w-full overflow-hidden whitespace-nowrap">
-                                <VariantTag experimentId={experimentId} variantKey={variant.key} fontSize={11} muted />
+                            >
+                                <div
+                                    className="absolute inset-0"
+                                    // eslint-disable-next-line react/forbid-dom-props
+                                    style={{
+                                        backgroundColor: 'var(--bg-light)',
+                                        opacity: 0.4,
+                                        pointerEvents: 'none',
+                                    }}
+                                />
+                                <div className="w-full overflow-hidden whitespace-nowrap">
+                                    <VariantTag
+                                        experimentId={experimentId}
+                                        variantKey={variant.key}
+                                        fontSize={11}
+                                        muted
+                                    />
+                                </div>
                             </div>
-                        </div>
-                    ))}
+                        ))}
                 </div>
             </div>
             {/* SVGs container */}
@@ -537,7 +581,7 @@ export function DeltaChart({
                             </foreignObject>
                         ) : (
                             <foreignObject
-                                x={VIEW_BOX_WIDTH / 2 - 100}
+                                x={VIEW_BOX_WIDTH / 2 - 100 - (result ? 0 : 200)}
                                 y={chartHeight / 2 - 10}
                                 width="250"
                                 height="20"
@@ -783,7 +827,7 @@ export function DeltaChart({
                 }
             >
                 <div className="flex justify-end">
-                    <ExploreButton metricIndex={metricIndex} isSecondary={isSecondary} />
+                    <ExploreButton result={result} />
                 </div>
                 <LemonBanner type="info" className="mb-4">
                     <div className="items-center inline-flex flex-wrap">
@@ -792,7 +836,7 @@ export function DeltaChart({
                     </div>
                 </LemonBanner>
                 <SummaryTable metric={metric} metricIndex={metricIndex} isSecondary={isSecondary} />
-                <ResultsQuery targetResults={result} showTable={true} />
+                <ResultsQuery result={result} showTable={true} />
             </LemonModal>
         </div>
     )
diff --git a/frontend/src/scenes/experiments/MetricsView/MetricsView.tsx b/frontend/src/scenes/experiments/MetricsView/MetricsView.tsx
index 9a362d9961974..2b5735778e1c3 100644
--- a/frontend/src/scenes/experiments/MetricsView/MetricsView.tsx
+++ b/frontend/src/scenes/experiments/MetricsView/MetricsView.tsx
@@ -1,5 +1,5 @@
 import { IconInfo, IconPlus } from '@posthog/icons'
-import { LemonButton, Tooltip } from '@posthog/lemon-ui'
+import { LemonButton, LemonDivider, Tooltip } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { IconAreaChart } from 'lib/lemon-ui/icons'
 
@@ -101,6 +101,7 @@ export function MetricsView({ isSecondary }: { isSecondary?: boolean }): JSX.Ele
     const variants = experiment.parameters.feature_flag_variants
     const results = isSecondary ? secondaryMetricResults : metricResults
     const errors = isSecondary ? secondaryMetricsResultErrors : primaryMetricsResultErrors
+    const hasSomeResults = results?.some((result) => result?.insight)
 
     let metrics = isSecondary ? experiment.metrics_secondary : experiment.metrics
     const savedMetrics = experiment.saved_metrics
@@ -155,6 +156,52 @@ export function MetricsView({ isSecondary }: { isSecondary?: boolean }): JSX.Ele
                                 <IconInfo className="text-muted-alt text-lg" />
                             </Tooltip>
                         )}
+                        {hasSomeResults && !isSecondary && (
+                            <>
+                                <LemonDivider vertical className="mx-2" />
+                                <Tooltip
+                                    title={
+                                        <div className="p-2">
+                                            <p className="mb-4">
+                                                Each bar shows how a variant is performing compared to the control (the
+                                                gray bar) for this metric, using a{' '}
+                                                <strong>95% credible interval.</strong> That means there's a 95% chance
+                                                the true difference for that variant falls within this range. The
+                                                vertical "0%" line is your baseline:
+                                            </p>
+                                            <ul className="mb-4 list-disc pl-4">
+                                                <li>
+                                                    <strong>To the right (green):</strong> The metric is higher (an
+                                                    improvement).
+                                                </li>
+                                                <li>
+                                                    <strong>To the left (red):</strong> The metric is lower (a
+                                                    decrease).
+                                                </li>
+                                            </ul>
+                                            <p className="mb-4">
+                                                The <strong>width of the bar</strong> represents uncertainty. A{' '}
+                                                <strong>narrower bar</strong> means we're more confident in that result,
+                                                while a <strong>wider bar</strong> means it could shift either way.
+                                            </p>
+                                            <p className="mb-4">
+                                                The control (baseline) is always shown in gray. Other bars will be green
+                                                or red—or even a mix—depending on whether the change is positive or
+                                                negative.
+                                            </p>
+                                            <img
+                                                src="https://res.cloudinary.com/dmukukwp6/image/upload/Screenshot_2024_12_28_at_21_09_55_8828faf254.png"
+                                                width={700}
+                                                className="rounded border object-contain"
+                                                alt="How to read metrics"
+                                            />
+                                        </div>
+                                    }
+                                >
+                                    <span className="text-xs text-muted-alt cursor-help">How to read</span>
+                                </Tooltip>
+                            </>
+                        )}
                     </div>
                 </div>
 
diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodeExperiment.tsx b/frontend/src/scenes/notebooks/Nodes/NotebookNodeExperiment.tsx
index c87e65370cd23..eb980c068129e 100644
--- a/frontend/src/scenes/notebooks/Nodes/NotebookNodeExperiment.tsx
+++ b/frontend/src/scenes/notebooks/Nodes/NotebookNodeExperiment.tsx
@@ -82,7 +82,7 @@ const Component = ({ attributes }: NotebookNodeProps<NotebookNodeExperimentAttri
                                 <LemonDivider className="my-0" />
                                 <div className="p-2">
                                     <SummaryTable metric={experiment.metrics[0]} />
-                                    <ResultsQuery targetResults={metricResults[0]} showTable={true} />
+                                    <ResultsQuery result={metricResults[0]} showTable={true} />
                                 </div>
                             </>
                         )}