diff --git a/frontend/src/components/WaterSoftenerDiagram.tsx b/frontend/src/components/WaterSoftenerDiagram.tsx
index 9ae431d..491259d 100644
--- a/frontend/src/components/WaterSoftenerDiagram.tsx
+++ b/frontend/src/components/WaterSoftenerDiagram.tsx
@@ -1,4 +1,4 @@
-import { RefreshCw, ChevronsRight } from 'lucide-react'
+import { RefreshCw, ChevronsRight, ChevronsLeft } from 'lucide-react'
 import type { AssetStatus, TelemetryField } from '../types'
 
 function fieldByKey(latest: TelemetryField[], key: string | null): TelemetryField | undefined {
@@ -96,12 +96,16 @@ export default function WaterSoftenerDiagram({ asset }: { asset: AssetStatus })
   const aRegenerating = single ? regenActive : regenActive && bInService
   const bRegenerating = regenActive && !bInService
 
-  function Flow({ active }: { active: boolean }) {
+  // Brine flows FROM the brine tank INTO whichever resin tank is
+  // regenerating, so the chevrons point away from the (now centred) brine
+  // tank toward the tank they lead to.
+  function Flow({ active, direction }: { active: boolean; direction: 'left' | 'right' }) {
+    const Icon = direction === 'left' ? ChevronsLeft : ChevronsRight
     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 className={`softener-flow softener-flow-${direction} ${active ? 'softener-flow-active' : ''}`} aria-hidden="true">
+        <Icon size={16} strokeWidth={2} />
+        <Icon size={16} strokeWidth={2} />
+        <Icon size={16} strokeWidth={2} />
       </div>
     )
   }
@@ -115,14 +119,6 @@ export default function WaterSoftenerDiagram({ asset }: { asset: AssetStatus })
         </div>
       )}
       <div className="softener-diagram-row">
-        <Tank
-          label="Brine tank"
-          pct={brinePct}
-          valueLabel={brinePct === null ? 'No reading' : `${Math.round(brinePct)}% salt/brine`}
-          variant="single"
-          regenerating={false}
-        />
-        <Flow active={aRegenerating} />
         <Tank
           label={single ? 'Resin tank' : 'Tank A'}
           pct={aPct}
@@ -130,9 +126,17 @@ export default function WaterSoftenerDiagram({ asset }: { asset: AssetStatus })
           variant={tankVariant(!bInService, aRegenerating, single)}
           regenerating={aRegenerating}
         />
+        <Flow active={aRegenerating} direction="left" />
+        <Tank
+          label="Brine tank"
+          pct={brinePct}
+          valueLabel={brinePct === null ? 'No reading' : `${Math.round(brinePct)}% salt/brine`}
+          variant="single"
+          regenerating={false}
+        />
         {!single && (
           <>
-            <Flow active={bRegenerating} />
+            <Flow active={bRegenerating} direction="right" />
             <Tank
               label="Tank B"
               pct={bPct}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index ddda421..f84a2da 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -245,7 +245,8 @@ html, body, #root { height: 100%; margin: 0; font-size: 14px; }
   color: var(--card-border);
   flex-shrink: 0;
 }
-.softener-flow svg { margin-left: -6px; }
+.softener-flow-right svg { margin-left: -6px; }
+.softener-flow-left svg { margin-right: -6px; }
 .softener-flow-active svg { color: var(--app-primary); animation: softener-flow-pulse 1.1s ease-in-out infinite; }
 .softener-flow-active svg:nth-child(2) { animation-delay: .15s; }
 .softener-flow-active svg:nth-child(3) { animation-delay: .3s; }