diff --git a/frontend/src/components/WaterSoftenerDiagram.tsx b/frontend/src/components/WaterSoftenerDiagram.tsx
index edc79da..4531c67 100644
--- a/frontend/src/components/WaterSoftenerDiagram.tsx
+++ b/frontend/src/components/WaterSoftenerDiagram.tsx
@@ -89,6 +89,23 @@ export default function WaterSoftenerDiagram({ asset }: { asset: AssetStatus })
   const bPct = bValL !== null && cfg.tank_b_max_l ? (bValL / cfg.tank_b_max_l) * 100 : null
   const brinePct = numericValue(brineField)
 
+  // On an alternating twin-tank softener, service switches to the other tank
+  // the moment one depletes, and the just-depleted tank regenerates offline —
+  // so the regenerating tank is whichever one is NOT tank_in_service. A single
+  // tank has no partner to switch to, so it simply tracks regen_active.
+  const aRegenerating = single ? regenActive : regenActive && bInService
+  const bRegenerating = regenActive && !bInService
+
+  function Flow({ active }: { active: boolean }) {
+    return (
+      <div className={`softener-flow ${active ? 'softener-flow-active' : ''}`} aria-hidden="true">
+        <ChevronsRight size={16} strokeWidth={2} />
+        <ChevronsRight size={16} strokeWidth={2} />
+        <ChevronsRight size={16} strokeWidth={2} />
+      </div>
+    )
+  }
+
   return (
     <div className="softener-diagram">
       {regenActive && (
@@ -105,26 +122,25 @@ export default function WaterSoftenerDiagram({ asset }: { asset: AssetStatus })
           variant="single"
           regenerating={false}
         />
-        <div className={`softener-flow ${regenActive ? 'softener-flow-active' : ''}`} aria-hidden="true">
-          <ChevronsRight size={16} strokeWidth={2} />
-          <ChevronsRight size={16} strokeWidth={2} />
-          <ChevronsRight size={16} strokeWidth={2} />
-        </div>
+        <Flow active={aRegenerating} />
         <Tank
           label={single ? 'Resin tank' : 'Tank A'}
           pct={aPct}
           valueLabel={aValL === null ? 'No reading' : cfg.tank_a_max_l ? `${Math.round(aValL)} / ${cfg.tank_a_max_l} L` : `${Math.round(aValL)} L`}
-          variant={tankVariant(!bInService, regenActive && !bInService, single)}
-          regenerating={regenActive && !bInService}
+          variant={tankVariant(!bInService, aRegenerating, single)}
+          regenerating={aRegenerating}
         />
         {!single && (
-          <Tank
-            label="Tank B"
-            pct={bPct}
-            valueLabel={bValL === null ? 'No reading' : cfg.tank_b_max_l ? `${Math.round(bValL)} / ${cfg.tank_b_max_l} L` : `${Math.round(bValL)} L`}
-            variant={tankVariant(bInService, regenActive && bInService, false)}
-            regenerating={regenActive && bInService}
-          />
+          <>
+            <Flow active={bRegenerating} />
+            <Tank
+              label="Tank B"
+              pct={bPct}
+              valueLabel={bValL === null ? 'No reading' : cfg.tank_b_max_l ? `${Math.round(bValL)} / ${cfg.tank_b_max_l} L` : `${Math.round(bValL)} L`}
+              variant={tankVariant(bInService, bRegenerating, false)}
+              regenerating={bRegenerating}
+            />
+          </>
         )}
       </div>
     </div>