diff --git a/frontend/documentation/pages/onboarding/OnboardingNextSteps.stories.tsx b/frontend/documentation/pages/onboarding/OnboardingNextSteps.stories.tsx
new file mode 100644
index 000000000000..bbbf3e0802fa
--- /dev/null
+++ b/frontend/documentation/pages/onboarding/OnboardingNextSteps.stories.tsx
@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from 'storybook'
+
+import OnboardingNextSteps from 'components/pages/onboarding/OnboardingNextSteps'
+
+const meta: Meta<typeof OnboardingNextSteps> = {
+  args: {
+    locked: false,
+    onSelect: () => {},
+  },
+  component: OnboardingNextSteps,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The "Choose your next quest" section at the bottom of the onboarding flow: the three ways the demo flag can level up (gradual rollout, experiment, remote config), each linking to its real config. Locked and dimmed until the app connects.',
+      },
+    },
+    layout: 'padded',
+  },
+  title: 'Pages/Onboarding/OnboardingNextSteps',
+}
+export default meta
+
+type Story = StoryObj<typeof OnboardingNextSteps>
+
+export const Connected: Story = {}
+
+export const Locked: Story = {
+  args: { locked: true },
+}
diff --git a/frontend/e2e/tests/onboarding-tests.pw.ts b/frontend/e2e/tests/onboarding-tests.pw.ts
index a529760f6399..762da7b82585 100644
--- a/frontend/e2e/tests/onboarding-tests.pw.ts
+++ b/frontend/e2e/tests/onboarding-tests.pw.ts
@@ -48,6 +48,11 @@ test.describe('Onboarding', () => {
     await expect(page.getByText('LISTENING')).toBeVisible();
     await expect(page.getByText('Copy install command')).not.toContainText('✓');
 
+    // Before the first evaluation, the next-quest cards are locked.
+    await expect(
+      page.getByText('Unlocks after your first evaluation'),
+    ).toBeVisible();
+
     log('Copy snippets, checklist ticks');
     await page.getByRole('button', { name: 'Copy install command' }).click();
     await expect(page.getByText('Copy install command')).toContainText('✓');
@@ -101,5 +106,27 @@ test.describe('Onboarding', () => {
         .getByText('Onboarding', { exact: true }),
     ).toBeVisible();
     await visualSnapshot(page, 'onboarding-renamed', testInfo);
+
+    // The next-quest cards unlock once connected, each deep-linking to the
+    // flag's real config (nothing faked).
+    log('Next-quest cards link to the real config');
+    await expect(
+      page.getByRole('heading', { name: 'Choose your next quest' }),
+    ).toBeVisible();
+
+    await page.getByRole('button', { name: /Gradual rollout/ }).click();
+    await expect(page).toHaveURL(
+      /\/features\?feature=\d+&tab=segment-overrides/,
+    );
+
+    await page.goto('/getting-started?connected');
+    await flowReady();
+    await page.getByRole('button', { name: /Remote config/ }).click();
+    await expect(page).toHaveURL(/\/features\?feature=\d+&tab=value/);
+
+    await page.goto('/getting-started?connected');
+    await flowReady();
+    await page.getByRole('button', { name: /Experiment/ }).click();
+    await expect(page).toHaveURL(/\/experiments$/);
   });
 });
diff --git a/frontend/web/components/base/SelectableCard/SelectableCard.scss b/frontend/web/components/base/SelectableCard/SelectableCard.scss
index 0315b3f4a852..72eae4590544 100644
--- a/frontend/web/components/base/SelectableCard/SelectableCard.scss
+++ b/frontend/web/components/base/SelectableCard/SelectableCard.scss
@@ -36,6 +36,8 @@
     display: flex;
     flex-direction: column;
     gap: 4px;
+    flex: 1;
+    min-width: 0;
   }
 
   &__icon {
diff --git a/frontend/web/components/base/SelectableCard/SelectableCard.tsx b/frontend/web/components/base/SelectableCard/SelectableCard.tsx
index 3a614f228702..a88d42577312 100644
--- a/frontend/web/components/base/SelectableCard/SelectableCard.tsx
+++ b/frontend/web/components/base/SelectableCard/SelectableCard.tsx
@@ -1,11 +1,14 @@
 import React, { FC, ReactNode } from 'react'
+import cn from 'classnames'
 import BareButton from 'components/base/forms/BareButton'
 import './SelectableCard.scss'
 
 type BadgeVariant = 'primary' | 'secondary'
 
 type SelectableCardProps = {
-  selected: boolean
+  // Selection state. Omit for a card that acts on click without a chosen state
+  // (e.g. a card that navigates).
+  selected?: boolean
   onClick: () => void
   icon?: ReactNode
   title: string
@@ -13,10 +16,15 @@ type SelectableCardProps = {
   badge?: { label: string; variant: BadgeVariant }
   tags?: string[]
   disabled?: boolean
+  className?: string
+  // Extra content below the description (e.g. an illustrative preview).
+  children?: ReactNode
 }
 
 const SelectableCard: FC<SelectableCardProps> = ({
   badge,
+  children,
+  className,
   description,
   disabled,
   icon,
@@ -27,9 +35,14 @@ const SelectableCard: FC<SelectableCardProps> = ({
 }) => {
   return (
     <BareButton
-      className={`selectable-card${
-        selected ? ' selectable-card--selected' : ''
-      }${disabled ? ' selectable-card--disabled' : ''}`}
+      className={cn(
+        'selectable-card',
+        {
+          'selectable-card--disabled': disabled,
+          'selectable-card--selected': selected,
+        },
+        className,
+      )}
       onClick={onClick}
       disabled={disabled}
     >
@@ -46,6 +59,7 @@ const SelectableCard: FC<SelectableCardProps> = ({
             ))}
           </div>
         )}
+        {children}
       </div>
       {badge && (
         <div className='selectable-card__aside'>
diff --git a/frontend/web/components/pages/onboarding/OnboardingFlagsTable/OnboardingFlagsTable.scss b/frontend/web/components/pages/onboarding/OnboardingFlagsTable/OnboardingFlagsTable.scss
index a55b52bb8bce..dc24f8b8f51a 100644
--- a/frontend/web/components/pages/onboarding/OnboardingFlagsTable/OnboardingFlagsTable.scss
+++ b/frontend/web/components/pages/onboarding/OnboardingFlagsTable/OnboardingFlagsTable.scss
@@ -8,6 +8,12 @@
     font-size: 16px;
   }
 
+  // Lock affordance beside the title while the toggle is waiting to connect.
+  &__hint {
+    font-size: 13px;
+    color: var(--color-text-tertiary);
+  }
+
   &__table {
     width: 100%;
     max-width: 760px;
diff --git a/frontend/web/components/pages/onboarding/OnboardingFlagsTable/OnboardingFlagsTable.tsx b/frontend/web/components/pages/onboarding/OnboardingFlagsTable/OnboardingFlagsTable.tsx
index 2b3fcf580760..58dc7fffa825 100644
--- a/frontend/web/components/pages/onboarding/OnboardingFlagsTable/OnboardingFlagsTable.tsx
+++ b/frontend/web/components/pages/onboarding/OnboardingFlagsTable/OnboardingFlagsTable.tsx
@@ -4,6 +4,7 @@ import { Tag as TTag } from 'common/types/responses'
 import FeatureName from 'components/feature-summary/FeatureName'
 import Tag from 'components/tags/Tag'
 import Switch from 'components/Switch'
+import Icon from 'components/icons/Icon'
 import './OnboardingFlagsTable.scss'
 
 export type OnboardingFlagsTableStatus = 'waiting' | 'connected'
@@ -41,12 +42,20 @@ const OnboardingFlagsTable: FC<OnboardingFlagsTableProps> = ({
       className='onboarding-flags d-flex flex-column align-items-center'
       aria-labelledby='onboarding-flags-title'
     >
-      <h3
-        className='onboarding-flags__title m-0 fw-bold'
-        id='onboarding-flags-title'
-      >
-        Your flags
-      </h3>
+      <div className='onboarding-flags__heading d-flex align-items-center gap-2'>
+        <h3
+          className='onboarding-flags__title m-0 fw-bold'
+          id='onboarding-flags-title'
+        >
+          Your flags
+        </h3>
+        {waiting && (
+          <span className='onboarding-flags__hint d-flex align-items-center gap-1'>
+            <Icon name='lock' width={13} />
+            Flip it once your app connects
+          </span>
+        )}
+      </div>
       <div
         className={classNames(
           'onboarding-flags__table bg-surface-default rounded-xl',
diff --git a/frontend/web/components/pages/onboarding/OnboardingFlow/OnboardingFlow.tsx b/frontend/web/components/pages/onboarding/OnboardingFlow/OnboardingFlow.tsx
index b3dcecf573bc..ad32dc2ede47 100644
--- a/frontend/web/components/pages/onboarding/OnboardingFlow/OnboardingFlow.tsx
+++ b/frontend/web/components/pages/onboarding/OnboardingFlow/OnboardingFlow.tsx
@@ -7,6 +7,9 @@ import ThemeToggle from 'components/pages/onboarding/ThemeToggle'
 import OnboardingConnectPanel from 'components/pages/onboarding/OnboardingConnectPanel'
 import OnboardingTerminal from 'components/pages/onboarding/OnboardingTerminal'
 import OnboardingFlagsTable from 'components/pages/onboarding/OnboardingFlagsTable'
+import OnboardingNextSteps, {
+  OnboardingNextStep,
+} from 'components/pages/onboarding/OnboardingNextSteps'
 import { useEnsureOnboardingResources } from 'components/pages/onboarding/hooks/useEnsureOnboardingResources'
 import { useOnboardingFlagRename } from 'components/pages/onboarding/hooks/useOnboardingFlagRename'
 import { useOnboardingFlag } from 'components/pages/onboarding/hooks/useOnboardingFlag'
@@ -64,6 +67,7 @@ const OnboardingFlow: FC = () => {
   const [snippetCopied, setSnippetCopied] = useState(false)
   const {
     enabled: flagEnabled,
+    flagId,
     isToggling,
     ready: flagStateReady,
     tags: flagTags,
@@ -117,6 +121,24 @@ const OnboardingFlow: FC = () => {
     }
   }
 
+  // Each next-step card deep-links to the flag's real config; nothing faked.
+  const goToNextStep = (step: OnboardingNextStep) => {
+    if (projectId === null) {
+      return
+    }
+    const base = `/project/${projectId}/environment/${environmentKey}`
+    if (step === 'experiment') {
+      history.push(`${base}/experiments`)
+      return
+    }
+    if (flagId === null) {
+      return
+    }
+    // Tab param is the slugified tab label (see TabMenu/Tabs urlParam).
+    const tab = step === 'rollout' ? 'segment-overrides' : 'value'
+    history.push(`${base}/features?feature=${flagId}&tab=${tab}`)
+  }
+
   if (status === 'creating') {
     return (
       <div className='onboarding-flow mx-auto text-center'>
@@ -178,6 +200,10 @@ const OnboardingFlow: FC = () => {
         togglingFlag={isToggling ? featureName : null}
         togglesReady={flagStateReady}
       />
+      <OnboardingNextSteps
+        locked={connection !== 'connected'}
+        onSelect={goToNextStep}
+      />
       <div className='d-flex justify-content-end'>
         <Button theme='text' onClick={skipToApp}>
           <span className='d-inline-flex align-items-center gap-1'>
diff --git a/frontend/web/components/pages/onboarding/OnboardingNextSteps/OnboardingNextSteps.scss b/frontend/web/components/pages/onboarding/OnboardingNextSteps/OnboardingNextSteps.scss
new file mode 100644
index 000000000000..073def88fe44
--- /dev/null
+++ b/frontend/web/components/pages/onboarding/OnboardingNextSteps/OnboardingNextSteps.scss
@@ -0,0 +1,90 @@
+// "Choose your next quest" section. Layout comes from utilities in the markup;
+// this file holds the type sizes, secondary text colour, the dimmed locked
+// state, and the small per-card preview shapes (rollout track, A/B segmented,
+// value pill). Secondary text isn't a utility: Bootstrap's .text-secondary
+// (gold, !important) would win over our token utility, so it's set here.
+.onboarding-next-steps {
+  &__title {
+    font-size: 16px;
+  }
+
+  &__subtitle {
+    font-size: 13px;
+    line-height: 1.5;
+    color: var(--color-text-secondary);
+  }
+
+  // Locked affordance: intentionally faint (disabled look). The lock icon
+  // inherits this via currentColor.
+  &__lock {
+    font-size: 12px;
+    color: var(--color-text-tertiary);
+  }
+
+  &__caption {
+    font-size: 12px;
+    color: var(--color-text-secondary);
+  }
+
+  // Dimmed until the app connects (the design's 0.4 locked state). The `inert`
+  // attribute on the same element blocks pointer + keyboard interaction.
+  &__body--locked {
+    opacity: 0.4;
+  }
+
+  // Equal-width cards regardless of their copy length.
+  &__row > * {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  // Illustrative preview sits a little below the card's description.
+  &__preview {
+    margin-top: 6px;
+  }
+
+  // Rollout: a part-filled pill track.
+  &__track {
+    display: block;
+    width: 100%;
+    height: 8px;
+    border-radius: var(--radius-full);
+    background: var(--color-border-default);
+  }
+
+  &__track-fill {
+    display: block;
+    width: 25%;
+    height: 100%;
+    border-radius: var(--radius-full);
+    background: var(--color-surface-action);
+  }
+
+  // Experiment: an A/B segmented control.
+  &__segmented {
+    align-self: flex-start;
+    overflow: hidden;
+    border: 1px solid var(--color-border-default);
+    border-radius: var(--radius-lg);
+  }
+
+  &__segment {
+    padding: 5px 16px;
+    font-size: 12px;
+    color: var(--color-text-secondary);
+    background: var(--color-surface-default);
+
+    &--active {
+      color: var(--color-text-action);
+      background: var(--color-surface-action-subtle);
+    }
+  }
+
+  // Remote config: a value chip.
+  &__value-pill {
+    align-self: flex-start;
+    padding: 5px 10px;
+    border-radius: var(--radius-md);
+    font-size: 12px;
+  }
+}
diff --git a/frontend/web/components/pages/onboarding/OnboardingNextSteps/OnboardingNextSteps.tsx b/frontend/web/components/pages/onboarding/OnboardingNextSteps/OnboardingNextSteps.tsx
new file mode 100644
index 000000000000..e040e335039a
--- /dev/null
+++ b/frontend/web/components/pages/onboarding/OnboardingNextSteps/OnboardingNextSteps.tsx
@@ -0,0 +1,120 @@
+import React, { FC, ReactNode } from 'react'
+import classNames from 'classnames'
+import Icon from 'components/icons/Icon'
+import SelectableCard from 'components/base/SelectableCard/SelectableCard'
+import './OnboardingNextSteps.scss'
+
+export type OnboardingNextStep = 'rollout' | 'experiment' | 'remote-config'
+
+export type OnboardingNextStepsProps = {
+  // Locked (dimmed, non-interactive) until the app connects, like the flags
+  // table - the steps only make sense once the flag is live.
+  locked: boolean
+  onSelect: (step: OnboardingNextStep) => void
+}
+
+// A 25%-filled track: "ship to a % of your users".
+const RolloutPreview: FC = () => (
+  <span className='onboarding-next-steps__track'>
+    <span className='onboarding-next-steps__track-fill' />
+  </span>
+)
+
+// An A/B segmented control, A selected.
+const ExperimentPreview: FC = () => (
+  <span className='onboarding-next-steps__segmented d-inline-flex'>
+    <span className='onboarding-next-steps__segment onboarding-next-steps__segment--active'>
+      A
+    </span>
+    <span className='onboarding-next-steps__segment'>B</span>
+  </span>
+)
+
+// A value chip: "serve a value, not just on/off".
+const RemoteConfigPreview: FC = () => (
+  <span className='onboarding-next-steps__value-pill bg-surface-action-subtle text-action'>
+    {'"theme": "dark"'}
+  </span>
+)
+
+const STEPS: {
+  key: OnboardingNextStep
+  title: string
+  description: string
+  preview: ReactNode
+  caption?: string
+}[] = [
+  {
+    caption: '25% of users',
+    description: 'Ship to a % of your users.',
+    key: 'rollout',
+    preview: <RolloutPreview />,
+    title: 'Gradual rollout',
+  },
+  {
+    description: 'A/B test which variant wins.',
+    key: 'experiment',
+    preview: <ExperimentPreview />,
+    title: 'Experiment',
+  },
+  {
+    description: 'Serve a value, not just on/off.',
+    key: 'remote-config',
+    preview: <RemoteConfigPreview />,
+    title: 'Remote config',
+  },
+]
+
+// "Choose your next quest": the three ways the demo flag can level up, each
+// linking to its real config (the page owns where). Locked until the app
+// connects.
+const OnboardingNextSteps: FC<OnboardingNextStepsProps> = ({
+  locked,
+  onSelect,
+}) => (
+  <section className='onboarding-next-steps d-flex flex-column gap-2'>
+    {locked && (
+      <span className='onboarding-next-steps__lock d-flex align-items-center gap-1'>
+        <Icon name='lock' width={13} />
+        Unlocks after your first evaluation
+      </span>
+    )}
+    <div
+      className={classNames('d-flex flex-column gap-3', {
+        'onboarding-next-steps__body--locked': locked,
+      })}
+      inert={locked || undefined}
+    >
+      <div className='d-flex flex-column gap-1'>
+        <h3 className='onboarding-next-steps__title m-0 fw-bold text-default'>
+          Choose your next quest
+        </h3>
+        <p className='onboarding-next-steps__subtitle m-0'>
+          You&apos;ve built a basic on/off feature toggle. The same flag can
+          evolve into any of these, no new code, just configuration.
+        </p>
+      </div>
+      <div className='onboarding-next-steps__row d-flex gap-3'>
+        {STEPS.map((step) => (
+          <SelectableCard
+            key={step.key}
+            title={step.title}
+            description={step.description}
+            onClick={() => onSelect(step.key)}
+          >
+            <span className='onboarding-next-steps__preview d-flex flex-column gap-2'>
+              {step.preview}
+              {step.caption && (
+                <span className='onboarding-next-steps__caption'>
+                  {step.caption}
+                </span>
+              )}
+            </span>
+          </SelectableCard>
+        ))}
+      </div>
+    </div>
+  </section>
+)
+
+export default OnboardingNextSteps
diff --git a/frontend/web/components/pages/onboarding/OnboardingNextSteps/index.ts b/frontend/web/components/pages/onboarding/OnboardingNextSteps/index.ts
new file mode 100644
index 000000000000..277a26e34374
--- /dev/null
+++ b/frontend/web/components/pages/onboarding/OnboardingNextSteps/index.ts
@@ -0,0 +1,5 @@
+export { default } from './OnboardingNextSteps'
+export type {
+  OnboardingNextStep,
+  OnboardingNextStepsProps,
+} from './OnboardingNextSteps'
diff --git a/frontend/web/components/pages/onboarding/hooks/useOnboardingFlag.ts b/frontend/web/components/pages/onboarding/hooks/useOnboardingFlag.ts
index 62ec6e30832b..a931208c0574 100644
--- a/frontend/web/components/pages/onboarding/hooks/useOnboardingFlag.ts
+++ b/frontend/web/components/pages/onboarding/hooks/useOnboardingFlag.ts
@@ -59,6 +59,8 @@ export const useOnboardingFlag = (
 
   return {
     enabled: !!displayEnabled,
+    // The flag's id, so the next-step cards can deep-link to its config.
+    flagId: flag?.id ?? null,
     isToggling: isLoading,
     ready: !!state,
     tags,