diff --git a/CHANGELOG.md b/CHANGELOG.md
index de042532e..ef877f577 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,7 +9,7 @@
 - The installable app now survives being offline. A network failure on the auth probe was treated as a logged-out session — it wiped the offline caches and redirected to the login page, defeating the entire offline layer. Offline relaunches now render the dashboard from cache with the offline banner; only a real 401/403 or an explicit logout clears anything.
 - Chart text is readable in the light theme again — 23 chart surfaces drew their ticks and axis text in colours measuring near-invisible contrast; they now use the semantic text tokens (measured 13.2:1 in light, dark byte-identical).
 - On the mood insights page, correlation captions no longer escape their tiles on phone widths; the density guard now covers that route too. Row checkboxes gained a 32 px touch target at unchanged visual size.
-- The dashboard hero breathes: the score rings space at 24 px on desktop and the briefing section separates from the greeting row at the same rhythm as the card padding.
+- The dashboard hero breathes: the score rings space at 24 px on desktop, on phones the four rings spread evenly across the full width instead of clustering in the centre, and the briefing section separates from the greeting row at the same rhythm as the card padding.
 
 ### Changed
 
diff --git a/src/components/dashboard/hero/dashboard-hero.tsx b/src/components/dashboard/hero/dashboard-hero.tsx
index 7bc821bb1..48ec8c1e1 100644
--- a/src/components/dashboard/hero/dashboard-hero.tsx
+++ b/src/components/dashboard/hero/dashboard-hero.tsx
@@ -323,7 +323,17 @@ export function DashboardHero({
             collapses; missing selected rings render nothing. */}
           <div
             data-slot="dashboard-hero-rings"
-            className="flex shrink-0 flex-wrap items-center justify-center gap-4 md:justify-end md:gap-6"
+            className={cn(
+              // Mobile: the rings stack under the greeting as a full-width
+              // row that wraps to a 2-up grid at four rings. `justify-evenly`
+              // spreads them with equal space before / between / after so
+              // the block reads symmetric edge-to-edge instead of a centred
+              // cluster with dead outer margin; `gap-y-6` gives the wrapped
+              // rows the same breathing room as the horizontal spread.
+              // Desktop: back to a right-aligned inline row beside the copy.
+              "flex w-full flex-wrap items-center justify-evenly gap-x-3 gap-y-6",
+              "md:w-auto md:shrink-0 md:justify-end md:gap-6",
+            )}
           >
             {scoreRings.map((ring) => (
               <div