diff --git a/packages/storybook/stories/features/snapshot/surfaces/StatusMoments.stories.tsx b/packages/storybook/stories/features/snapshot/surfaces/StatusMoments.stories.tsx
index 36d6f2bb65..ebc63ccd5a 100644
--- a/packages/storybook/stories/features/snapshot/surfaces/StatusMoments.stories.tsx
+++ b/packages/storybook/stories/features/snapshot/surfaces/StatusMoments.stories.tsx
@@ -1,14 +1,18 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import {
   Button,
   ButtonSize,
   ButtonVariant,
 } from '@dailydotdev/shared/src/components/buttons/Button';
+import CloseButton from '@dailydotdev/shared/src/components/CloseButton';
+import { DownloadIcon } from '@dailydotdev/shared/src/components/icons/Download';
 import {
-  DownloadIcon,
-  MiniCloseIcon,
-} from '@dailydotdev/shared/src/components/icons';
+  ProfileImageSize,
+  ProfilePicture,
+} from '@dailydotdev/shared/src/components/ProfilePicture';
+import { TopRankBadge } from '@dailydotdev/shared/src/components/cards/Leaderboard/TopRankBadge';
 import {
   ART,
   AVATAR,
@@ -18,68 +22,84 @@ import {
   SurfacePage,
   Variant,
 } from '../surfaceChrome';
+import type { StreakMilestone } from '../../../milestone-rewards/data';
+import { StreakTier, streakLadder } from '../../../milestone-rewards/data';
+import {
+  DayStrip,
+  EmberPanel,
+  FlameBadge,
+  FlameSize,
+  NoThanks,
+  TierName,
+} from '../../../milestone-rewards/moment';
+
+/* --------------------------------------------------- streak celebration */
+
+const INFERNO = streakLadder.find(
+  ({ tier }) => tier === StreakTier.Inferno,
+) as StreakMilestone;
 
 /**
- * NewStreakModal: a reminder switch and close at the top, the fire art with
- * the count overlaid in typo-tera, a title, one line of copy, the freeze
- * upsell, and an opt-out checkbox. No share control, and no primary button.
+ * The celebration half of the milestone-rewards popup: tier art over the
+ * ember wash, the tier name, the count. No embers or staged entrance, since
+ * this page compares control placement.
  */
-const StreakScreen = () => (
-  <Screen>
-    <div className="relative flex flex-col items-center gap-2 p-6 text-center">
-      <div className="flex h-10 w-full items-center justify-between">
-        <span className="flex items-center gap-2 text-text-tertiary typo-footnote">
-          <span className="h-4 w-7 rounded-8 bg-accent-cabbage-default" />
-          Remind me
-        </span>
-        <Button
-          aria-label="Close"
-          icon={<MiniCloseIcon />}
-          size={ButtonSize.Small}
-          variant={ButtonVariant.Tertiary}
-        />
-      </div>
-
-      <span className="relative flex items-center justify-center">
-        <span className="text-[6rem] leading-none">🔥</span>
-        <strong className="absolute text-text-primary typo-tera">100</strong>
+const Celebration = () => (
+  <EmberPanel className="flex-col items-center gap-4 p-6 text-center">
+    <FlameBadge
+      milestone={INFERNO}
+      size={FlameSize.Medium}
+      withEmbers={false}
+    />
+    <TierName milestone={INFERNO} />
+    <div className="flex flex-col gap-1">
+      <span className="flex items-baseline justify-center gap-2 text-text-primary">
+        <strong className="font-bold tabular-nums typo-mega2">
+          {INFERNO.day}
+        </strong>
+        <span className="font-normal typo-title3">day streak</span>
       </span>
+      <h2 className="text-text-primary typo-title3">{INFERNO.headline}</h2>
+    </div>
+    <DayStrip />
+  </EmberPanel>
+);
 
-      <strong className="mt-6 text-text-primary typo-title1">
-        100 days streak
-      </strong>
-      <p className="mt-3 text-text-secondary typo-body">
-        New milestone reached! You are unstoppable.
-      </p>
-
-      <span className="mt-6 text-text-link typo-footnote">
-        Protect your streak with streak freezes
-      </span>
+/* -------------------------------------------------------------- surfaces */
 
-      <Control
-        action="Snapshot"
-        className="mt-6"
-        label
-        variant={ButtonVariant.Primary}
+/**
+ * The streak milestone popup from Milestone Rewards/Final review, at phone
+ * width: celebration panel above, the controls below.
+ */
+const StreakScreen = () => (
+  <Screen>
+    <div className="relative flex flex-col">
+      <CloseButton
+        className="absolute right-4 top-4 z-2"
+        size={ButtonSize.Small}
       />
 
-      <span className="mt-6 flex items-center gap-2 text-text-tertiary typo-footnote">
-        <span className="size-4 rounded-4 border border-border-subtlest-tertiary" />
-        Never show this again
-      </span>
+      <Celebration />
+
+      <div className="flex flex-col gap-4 p-6">
+        <Control
+          action="Snapshot"
+          label
+          size={ButtonSize.Medium}
+          variant={ButtonVariant.Float}
+        />
+
+        <NoThanks />
+      </div>
     </div>
   </Screen>
 );
 
-/**
- * AchievementCard: a 48px thumbnail, name and description, then the snapshot
- * button and the points. The snapshot is `opacity-0 group-hover:opacity-100`,
- * so it is invisible until hover — and permanently invisible on touch.
- */
+/** AchievementCard.tsx, the unlock card, with the real achievement. */
 const AchievementScreen = () => (
   <Screen>
     <div className="flex flex-col gap-3 p-4">
-      <div className="flex flex-col gap-3 rounded-16 border border-border-subtlest-tertiary bg-surface-float p-4">
+      <div className="flex flex-col rounded-16 border border-border-subtlest-tertiary bg-surface-float p-4">
         <div className="flex items-start gap-3">
           <img
             alt=""
@@ -91,7 +111,7 @@ const AchievementScreen = () => (
               Can&apos;t spend it all
             </span>
             <span className="mt-0.5 line-clamp-2 text-text-tertiary typo-footnote">
-              Hold more than 10,000 cores without spending any of them.
+              Spend 10000 Cores
             </span>
           </div>
           <div className="flex shrink-0 items-center gap-1 self-center">
@@ -100,32 +120,22 @@ const AchievementScreen = () => (
               size={ButtonSize.XSmall}
               variant={ButtonVariant.Float}
             />
-            <span className="font-bold text-text-primary typo-callout">
-              120
-            </span>
+            <span className="font-bold text-text-primary typo-callout">25</span>
           </div>
         </div>
-
-        <div className="flex flex-col gap-1">
-          <span className="flex justify-between text-text-tertiary typo-footnote">
-            <span>Progress</span>
-            <span>8/10</span>
-          </span>
-          <span className="h-1.5 overflow-hidden rounded-14 bg-surface-invert">
-            <span className="block h-full w-4/5 rounded-14 bg-accent-cabbage-default" />
-          </span>
-        </div>
       </div>
     </div>
   </Screen>
 );
 
-/**
- * UserTopList rows: a w-14 tabular score, TopRankBadge, an optional level
- * ring, then UserHighlight (32px avatar, caption1 name, caption2 handle).
- * The snapshot is `opacity-0 group-hover:opacity-100` at XSmall Float —
- * shipped, and invisible on touch.
- */
+/** Fictional readers for the rank and awards screens. */
+const PEOPLE: [string, string][] = [
+  ['Maya Torres', 'mayatorres'],
+  ['Jonah Pike', 'jonahpike'],
+  ['Lena Brandt', 'lenabrandt'],
+];
+
+/** UserTopList.tsx, the leaderboard rows. */
 const RankScreen = () => (
   <Screen>
     <div className="flex flex-col gap-3 p-4">
@@ -134,28 +144,19 @@ const RankScreen = () => (
       </h3>
 
       <ol className="flex flex-col gap-1.5 typo-body">
-        {[
-          ['Bobby Iliev', 'bobbyiliev', 103],
-          ['Ante Barić', 'antebaric', 99],
-          ['Ido Shamun', 'idoshamun', 95],
-        ].map(([name, handle, score], index) => (
+        {PEOPLE.map(([name, handle], index) => (
           <li
-            key={handle as string}
+            key={handle}
             className={`group flex w-full flex-row items-center rounded-8 px-2 ${
               index === 0 ? 'bg-accent-pepper-subtler' : ''
             }`}
           >
-            <span className="inline-flex w-14 shrink-0 justify-center tabular-nums text-text-quaternary">
-              {score}
-            </span>
-            <span className="flex size-6 shrink-0 items-center justify-center text-text-tertiary typo-caption1">
-              {index === 0 ? '🥇' : `#${index + 1}`}
-            </span>
+            <TopRankBadge rankIndex={index} />
             <div className="flex min-w-0 shrink items-center gap-2 p-2">
-              <img
-                alt=""
-                className="size-8 rounded-full object-cover"
-                src={AVATAR}
+              <ProfilePicture
+                rounded="full"
+                size={ProfileImageSize.Medium}
+                user={{ image: AVATAR, username: handle }}
               />
               <div className="ml-2 flex min-w-0 flex-col">
                 <span className="truncate text-text-primary typo-caption1">
@@ -183,6 +184,7 @@ const RankScreen = () => (
 
 /* -------------------------------------------------- other win moments */
 
+/** TopReaderBadgeModal.tsx, download only, no share route. */
 const TopReaderScreen = () => (
   <Screen>
     <div className="flex flex-col items-center gap-4 p-6 text-center">
@@ -192,9 +194,6 @@ const TopReaderScreen = () => (
       <h1 className="font-bold text-text-primary typo-title1">
         You&apos;ve earned the top reader badge!
       </h1>
-      <p className="text-text-tertiary typo-callout">
-        Top 1% of readers in #typescript this week
-      </p>
       <div className="mt-2 flex items-center gap-2">
         <Button
           icon={<DownloadIcon secondary />}
@@ -209,66 +208,17 @@ const TopReaderScreen = () => (
   </Screen>
 );
 
-const TIER_DAYS = [
-  ['Spark', 3],
-  ['Flame', 7],
-  ['Inferno', 30],
-  ['Supernova', 180],
-];
-
+/** The tier moment on its own: the celebration panel with no decision under it. */
 const StreakTierScreen = () => (
   <Screen>
-    <div className="flex flex-col items-center gap-3 p-6 text-center">
-      <div className="flex size-24 items-center justify-center rounded-full bg-overlay-quaternary-bacon">
-        <span className="text-[2.5rem]">🔥</span>
-      </div>
-      <span className="font-bold uppercase text-accent-bacon-default typo-caption2">
-        Inferno
-      </span>
-      <strong className="text-text-primary typo-tera">30</strong>
-      <h2 className="text-text-primary typo-title3">A full month, unbroken</h2>
-      <div className="my-2 flex gap-1">
-        {['M', 'T', 'W', 'T', 'F', 'S', 'S'].map((day, index) => (
-          <span
-            key={`${day}-${index}`}
-            className={`flex size-7 items-center justify-center rounded-full typo-caption1 ${
-              index < 5
-                ? 'bg-accent-bacon-default text-white'
-                : 'bg-surface-float text-text-quaternary'
-            }`}
-          >
-            {day}
-          </span>
-        ))}
-      </div>
-      <div className="flex flex-wrap justify-center gap-1">
-        {TIER_DAYS.map(([label, day]) => (
-          <span
-            key={label as string}
-            className={`rounded-8 px-2 py-1 typo-caption2 ${
-              label === 'Inferno'
-                ? 'bg-accent-bacon-default text-white'
-                : 'bg-surface-float text-text-tertiary'
-            }`}
-          >
-            {label} · {day}d
-          </span>
-        ))}
-      </div>
-      <Control
-        action="Snapshot"
-        className="mt-3"
-        label
-        variant={ButtonVariant.Primary}
-      />
+    <Celebration />
+    <div className="p-6 pt-0">
+      <Control action="Snapshot" label variant={ButtonVariant.Primary} />
     </div>
   </Screen>
 );
 
-/**
- * The award moment, from the recipient's side. ListAwardsModal shows who gave
- * what and the cores total; the person who received it gets no way to mark it.
- */
+/** ListAwardsModal.tsx, from the recipient's side. */
 const AwardedScreen = () => (
   <Screen>
     <div className="flex flex-col gap-3 p-4">
@@ -276,12 +226,10 @@ const AwardedScreen = () => (
         <span className="font-bold text-text-primary typo-title3">
           Awards given
         </span>
-        <Button
-          aria-label="Close"
-          icon={<MiniCloseIcon />}
-          size={ButtonSize.Small}
-          variant={ButtonVariant.Tertiary}
-        />
+        <div className="flex items-center gap-1">
+          <Control action="Snapshot" />
+          <CloseButton size={ButtonSize.Small} />
+        </div>
       </div>
 
       <div className="flex items-center gap-2 border-b border-border-subtlest-tertiary py-4">
@@ -300,12 +248,12 @@ const AwardedScreen = () => (
         />
       </div>
 
-      {['Bobby Iliev', 'Ante Barić', 'Ido Shamun'].map((name) => (
-        <div key={name} className="flex items-center gap-3">
-          <img
-            alt=""
-            className="size-8 rounded-full object-cover"
-            src={AVATAR}
+      {PEOPLE.map(([name, handle]) => (
+        <div key={handle} className="flex items-center gap-3">
+          <ProfilePicture
+            rounded="full"
+            size={ProfileImageSize.Medium}
+            user={{ image: AVATAR, username: handle }}
           />
           <span className="min-w-0 flex-1 truncate text-text-primary typo-callout">
             {name}
@@ -317,66 +265,20 @@ const AwardedScreen = () => (
   </Screen>
 );
 
-const POST_STATS: [string, string][] = [
-  ['Impressions', '41.2K'],
-  ['Upvotes', '862'],
-  ['Comments', '134'],
-  ['Clicks', '3.8K'],
-  ['Followers gained', '96'],
-  ['Cores earned', '1,250'],
-];
-
-/** posts/[id]/analytics, behind canViewPostAnalytics. */
-const AnalyticsScreen = () => (
-  <Screen>
-    <div className="flex flex-col gap-4 p-4">
-      <div className="flex items-start gap-3">
-        <div className="flex min-w-0 flex-1 flex-col">
-          <span className="font-bold uppercase text-text-quaternary typo-caption2">
-            Post analytics
-          </span>
-          <span className="truncate font-bold text-text-primary typo-callout">
-            Why iconic tech brands lost their dominance
-          </span>
-        </div>
-        <Control action="Snapshot" />
-      </div>
-
-      <div className="h-20 rounded-12 bg-surface-float" />
-
-      <div className="grid grid-cols-2 gap-2">
-        {POST_STATS.map(([label, value]) => (
-          <div
-            key={label}
-            className="flex flex-col rounded-12 bg-surface-float p-3"
-          >
-            <span className="font-bold text-text-primary typo-title3">
-              {value}
-            </span>
-            <span className="text-text-tertiary typo-footnote">{label}</span>
-          </div>
-        ))}
-      </div>
-
-      <Control action="Snapshot" label variant={ButtonVariant.Primary} />
-    </div>
-  </Screen>
-);
-
 const StatusMoments = () => (
   <SurfacePage
-    intro="Seven surfaces that share one property: there is no page to send anyone to. A link to your streak, your rank or your unlocked achievement means nothing to the person receiving it. Snapshot is not the louder option here — it is the only one."
+    intro="Six surfaces that share one property: there is no page to send anyone to. A link to your streak, your rank or your unlocked achievement means nothing to the person receiving it. Snapshot is not the louder option here. It is the only one."
     map="Sharing map: lead with Snapshot on all three (#6358 streak, #6360 achievements, #6359 rank). Copy link is not a secondary option, it is absent, because there is nothing to link to."
     title="Status moments"
   >
     <Category
       covers="#6358 · streak popup"
       title="Reading streak"
-      verdict="Placement is settled; frequency is the real lever. Every day dulls it — 10 / 50 / 100 keeps it an event."
+      verdict="Placement is settled; frequency is the real lever. Every day dulls it, while 10 / 50 / 100 keeps it an event."
     >
       <Variant
-        headline="Snapshot beside Keep reading"
-        note="Recommended. The number is the entire message, and the card is built to carry it at 168px."
+        headline="Snapshot under the celebration"
+        note="Recommended. The number is the entire message, and the card is built to carry it at 168px. It sits under the celebration, above No thanks."
         step="Proposed"
       >
         <StreakScreen />
@@ -390,7 +292,7 @@ const StatusMoments = () => (
     >
       <Variant
         headline="Snapshot on the card"
-        note="Built and live. Overlaid on the artwork in Primary weight — Float disappears over a full-bleed image."
+        note="Built and live. Overlaid on the artwork in Primary weight, because Float disappears over a full-bleed image."
         step="Proposed"
       >
         <AchievementScreen />
@@ -400,49 +302,43 @@ const StatusMoments = () => (
     <Category
       covers="#6359 · leaderboard row"
       title="Your leaderboard rank"
-      verdict="The shipped control is `opacity-0 group-hover:opacity-100` at XSmall Float, pinned right with ml-auto. It works on desktop and does not exist on touch — the third hover-gated share control in the product, after the achievement card and the squad directory card."
+      verdict="The shipped control is `opacity-0 group-hover:opacity-100` at XSmall Float, pinned right with ml-auto. It works on desktop and does not exist on touch: the third hover-gated share control in the product, after the achievement card and the squad directory card."
     >
       <Variant
         headline="Snapshot revealed on your row"
-        note="Built and live. The row is score, rank badge, avatar, name and handle; the snapshot fades in on the right. Clean on desktop, completely absent on mobile — which is most of the audience."
+        note="Built and live. The snapshot fades in on the right of your row. Clean on desktop, completely absent on mobile."
         step="Proposed"
       >
         <RankScreen />
       </Variant>
     </Category>
+
     <Category
-      covers="TopReaderBadgeModal.tsx · StreakOfferCelebration.tsx · ListAwardsModal.tsx · posts/[id]/analytics"
+      covers="TopReaderBadgeModal.tsx · milestone-rewards tier ladder · ListAwardsModal.tsx"
       title="Win moments with no share route"
-      verdict="Four more moments already ship, each one ending in a dismiss. All four are status with no destination, so snapshot is the only action that fits — the same argument as the streak and the achievement above."
+      verdict="Three more moments, each one ending in a dismiss. All three are status with no destination, so snapshot is the only action that fits: the same argument as the streak and the achievement above."
     >
       <Variant
-        headline="Top reader badge — download only"
+        headline="Top reader badge, download only"
         note="The clearest gap on this page. ‘You've earned the top reader badge!’ already generates an image server-side for the Download button, so the payload exists and nothing shares it. Same failure as the DevCard: generated, saved to a downloads folder, never posted."
         step="Proposed"
       >
         <TopReaderScreen />
       </Variant>
       <Variant
-        headline="Streak tier milestones — ten of them, none shareable"
-        note="streakTiers.ts defines Spark, Kindle, Flame, Blaze, Firestorm, Inferno, Scorcher, Eternal Flame, Supernova and Legendary, each with its own art, name and headline. Far richer than the plain day count we draw at the top of this page — and a named tier is more quotable than a number."
+        headline="Streak tier milestones, ten of them, none shareable"
+        note="The milestone-rewards ladder gives every tier its own 3D flame, name and headline. The celebration panel is the whole card already. A named tier is more quotable than a number, and nothing currently shares it."
         step="Proposed"
       >
         <StreakTierScreen />
       </Variant>
       <Variant
-        headline="Being awarded — the only win that came from someone else"
-        note="Someone spent cores on your post. ListAwardsModal shows who gave what and the cores total, and the recipient gets no way to mark it. A win handed over by another person is usually more shareable, not less — and it names them, which gives the card a second reason to travel."
+        headline="Being awarded, the only win that came from someone else"
+        note="Someone spent cores on your post. ListAwardsModal shows who gave what and the cores total, and the recipient gets no way to mark it. A win handed over by another person is usually more shareable, not less, and it names them, which gives the card a second reason to travel."
         step="Proposed"
       >
         <AwardedScreen />
       </Variant>
-      <Variant
-        headline="A post that did well"
-        note="posts/[id]/analytics already reports impressions, upvotes, clicks, comments, followers gained and cores earned, behind canViewPostAnalytics. ‘My post reached 41k developers’ is the most shareable sentence an author can say, and there is nowhere to say it. Two placements drawn: an icon in the header, and a labeled control under the stats where the numbers have just made the case."
-        step="Proposed"
-      >
-        <AnalyticsScreen />
-      </Variant>
     </Category>
   </SurfacePage>
 );
@@ -451,6 +347,13 @@ const meta: Meta<typeof StatusMoments> = {
   title: 'Features/Snapshot/Surfaces/Status moments',
   component: StatusMoments,
   parameters: { layout: 'fullscreen' },
+  decorators: [
+    (Story) => (
+      <QueryClientProvider client={new QueryClient()}>
+        <Story />
+      </QueryClientProvider>
+    ),
+  ],
 };
 
 export default meta;