diff --git a/src/app/(tabs)/compare.tsx b/src/app/(tabs)/compare.tsx
index 7c4fef7..9f3bc2e 100644
--- a/src/app/(tabs)/compare.tsx
+++ b/src/app/(tabs)/compare.tsx
@@ -61,13 +61,13 @@ export default function CompareScreen() {
         ))}
       </View>
 
-      <Link href="/grind" asChild>
+      <Link href="/water" asChild>
         <Pressable style={({ pressed }) => ({ opacity: pressed ? 0.75 : 1 })}>
           <View style={[styles.cta, { borderColor: c.line, backgroundColor: c.card }]}>
             <View style={styles.ctaText}>
-              <Type variant="heading">Grind guide</Type>
+              <Type variant="heading">Water</Type>
               <Type variant="caption" tone="muted">
-                What fine, medium and coarse actually mean
+                Temperature and minerals, the other 98% of the cup
               </Type>
             </View>
             <Type variant="title" tone="roast" style={styles.chevron}>
diff --git a/src/app/_layout.tsx b/src/app/_layout.tsx
index 69a9531..55101f9 100644
--- a/src/app/_layout.tsx
+++ b/src/app/_layout.tsx
@@ -21,7 +21,7 @@ export default function RootLayout() {
         <Stack.Screen name="method/aeropress" options={{ title: 'AeroPress' }} />
         <Stack.Screen name="method/french-press" options={{ title: 'French Press' }} />
         <Stack.Screen name="brew/[id]" options={{ title: 'Brew timer' }} />
-        <Stack.Screen name="grind" options={{ title: 'Grind guide' }} />
+        <Stack.Screen name="water" options={{ title: 'Water' }} />
         <Stack.Screen name="about" options={{ presentation: 'modal', title: 'About Brew' }} />
       </Stack>
     </ThemeProvider>
diff --git a/src/app/grind.tsx b/src/app/grind.tsx
deleted file mode 100644
index ae0dbcd..0000000
--- a/src/app/grind.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { Stack } from 'expo-router';
-import { StyleSheet, View } from 'react-native';
-
-import { Card, Chip, Eyebrow, Rule, Screen, Type } from '@/components/ui';
-import { Spacing } from '@/constants/theme';
-import { GRIND_NOTES, GRIND_SCALE, METHODS } from '@/data/methods';
-import { usePalette } from '@/hooks/use-palette';
-
-export default function GrindScreen() {
-  const c = usePalette();
-  return (
-    <>
-      <Stack.Screen options={{ title: 'Grind guide' }} />
-      <Screen>
-        <View style={styles.masthead}>
-          <Eyebrow>Particle size</Eyebrow>
-          <Type variant="display">Grind</Type>
-          <Type variant="body" tone="muted">
-            Grind size sets how fast water can move through the bed. Everything else — dose,
-            temperature, time — is a correction on top of it.
-          </Type>
-        </View>
-
-        <Card style={styles.scale}>
-          {GRIND_SCALE.map((g, i) => {
-            const users = METHODS.filter((m) => m.grind === g);
-            return (
-              <View key={g}>
-                {i > 0 && <Rule />}
-                <View style={styles.step}>
-                  <View style={styles.stepHead}>
-                    <View style={styles.dots}>
-                      {Array.from({ length: 5 - i }, (_, d) => (
-                        <View
-                          key={d}
-                          style={[
-                            styles.dot,
-                            { backgroundColor: c.roast, width: 3 + i * 1.6, height: 3 + i * 1.6 },
-                          ]}
-                        />
-                      ))}
-                    </View>
-                    <Type variant="heading" style={styles.stepName}>
-                      {g}
-                    </Type>
-                  </View>
-                  <Type variant="caption" tone="muted">
-                    {GRIND_NOTES[g]}
-                  </Type>
-                  {users.length > 0 && (
-                    <View style={styles.users}>
-                      {users.map((m) => (
-                        <Chip key={m.id} tone="roast">
-                          {m.name}
-                        </Chip>
-                      ))}
-                    </View>
-                  )}
-                </View>
-              </View>
-            );
-          })}
-        </Card>
-
-        <View style={styles.note}>
-          <Eyebrow>Rule of thumb</Eyebrow>
-          <Type variant="body" tone="muted">
-            Sour and thin means the water left too early — go finer. Harsh and drying means it
-            stayed too long — go coarser. Change one thing at a time.
-          </Type>
-        </View>
-      </Screen>
-    </>
-  );
-}
-
-const styles = StyleSheet.create({
-  masthead: { gap: Spacing.two, paddingTop: Spacing.two },
-  scale: { paddingVertical: 0 },
-  step: { paddingVertical: Spacing.four, gap: Spacing.two },
-  stepHead: { flexDirection: 'row', alignItems: 'center', gap: Spacing.three },
-  dots: { flexDirection: 'row', alignItems: 'center', gap: 2, width: 46 },
-  dot: { borderRadius: 4 },
-  stepName: { textTransform: 'capitalize' },
-  users: { flexDirection: 'row', flexWrap: 'wrap', gap: Spacing.two, paddingTop: Spacing.one },
-  note: { gap: Spacing.two },
-});
diff --git a/src/app/water.tsx b/src/app/water.tsx
new file mode 100644
index 0000000..4eefd28
--- /dev/null
+++ b/src/app/water.tsx
@@ -0,0 +1,126 @@
+import { Stack } from 'expo-router';
+import { StyleSheet, View } from 'react-native';
+
+import { Card, Chip, Eyebrow, Rule, Screen, Type } from '@/components/ui';
+import { Spacing } from '@/constants/theme';
+import { usePalette } from '@/hooks/use-palette';
+
+/* Temperature bands, coolest first. The chips name the methods that sit in
+   each band, which is the same shape the grind guide used. */
+const BANDS = [
+  {
+    range: '80–88°C',
+    name: 'cool',
+    note: 'Light roasts stay sweet instead of turning sharp. Slower to extract, so give it time.',
+    methods: ['AeroPress'],
+  },
+  {
+    range: '90–94°C',
+    name: 'standard',
+    note: 'Where most recipes land. Hot enough to pull sugars, not so hot it strips the cup.',
+    methods: ['V60', 'French press'],
+  },
+  {
+    range: '95–100°C',
+    name: 'hot',
+    note: 'Dark roasts and stale beans need the extra energy. Anything fresh will taste harsh.',
+    methods: [],
+  },
+];
+
+const MINERALS = [
+  ['Calcium + magnesium', 'Carry flavour. Too little and the cup reads flat and watery.'],
+  ['Bicarbonate', 'Buffers acidity. Too much and everything tastes dull and chalky.'],
+  ['Chlorine', 'Ruins a cup on its own. Filter it out before anything else.'],
+];
+
+export default function WaterScreen() {
+  const c = usePalette();
+  return (
+    <>
+      <Stack.Screen options={{ title: 'Water' }} />
+      <Screen>
+        <View style={styles.masthead}>
+          <Eyebrow>98% of the cup</Eyebrow>
+          <Type variant="display">Water</Type>
+          <Type variant="body" tone="muted">
+            Coffee is almost entirely water, so the water decides how much of the bean you ever
+            taste. Temperature sets the pace, minerals decide what comes through.
+          </Type>
+        </View>
+
+        <Card style={styles.bands}>
+          {BANDS.map((band, i) => (
+            <View key={band.range}>
+              {i > 0 && <Rule />}
+              <View style={styles.band}>
+                <View style={styles.bandHead}>
+                  <View
+                    style={[styles.gauge, { borderColor: c.line }]}
+                  >
+                    <View
+                      style={[
+                        styles.gaugeFill,
+                        { backgroundColor: c.roast, height: `${34 + i * 33}%` },
+                      ]}
+                    />
+                  </View>
+                  <View style={styles.bandTitle}>
+                    <Type variant="heading">{band.range}</Type>
+                    <Type variant="label" tone="muted">
+                      {band.name}
+                    </Type>
+                  </View>
+                </View>
+                <Type variant="caption" tone="muted">
+                  {band.note}
+                </Type>
+                {band.methods.length > 0 && (
+                  <View style={styles.methods}>
+                    {band.methods.map((m) => (
+                      <Chip key={m} tone="roast">
+                        {m}
+                      </Chip>
+                    ))}
+                  </View>
+                )}
+              </View>
+            </View>
+          ))}
+        </Card>
+
+        <View style={styles.note}>
+          <Eyebrow>What is in it</Eyebrow>
+          {MINERALS.map(([label, text]) => (
+            <View key={label} style={styles.mineral}>
+              <Type variant="label">{label}</Type>
+              <Type variant="caption" tone="muted">
+                {text}
+              </Type>
+            </View>
+          ))}
+        </View>
+      </Screen>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  masthead: { gap: Spacing.two, paddingTop: Spacing.two },
+  bands: { paddingVertical: 0 },
+  band: { paddingVertical: Spacing.four, gap: Spacing.two },
+  bandHead: { flexDirection: 'row', alignItems: 'center', gap: Spacing.three },
+  gauge: {
+    width: 14,
+    height: 34,
+    borderWidth: 1,
+    borderRadius: 3,
+    justifyContent: 'flex-end',
+    overflow: 'hidden',
+  },
+  gaugeFill: { width: '100%' },
+  bandTitle: { gap: 2 },
+  methods: { flexDirection: 'row', flexWrap: 'wrap', gap: Spacing.two, paddingTop: Spacing.one },
+  note: { gap: Spacing.three },
+  mineral: { gap: 2 },
+});