diff --git a/mobile/src/screens/AnalyticsScreen.tsx b/mobile/src/screens/AnalyticsScreen.tsx
index 3eaced1..692fe7b 100644
--- a/mobile/src/screens/AnalyticsScreen.tsx
+++ b/mobile/src/screens/AnalyticsScreen.tsx
@@ -1,32 +1,22 @@
 import React, { useCallback, useState } from 'react';
 import {
-  View, Text, ScrollView, StyleSheet
+  View, Text, ScrollView, StyleSheet, Platform,
 } from 'react-native';
+import Svg, { Rect, Line, Text as SvgText } from 'react-native-svg';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useFocusEffect } from '@react-navigation/native';
-import { colors, spacing, radius, font, shadow } from '../lib/theme';
+import { ios } from '../lib/theme';
 import { listRecords, type ScanRecord } from '../lib/storage';
 
-function StatRow({ label, value, accent = colors.text }: { label: string; value: string; accent?: string }) {
-  return (
-    <View style={styles.statRow}>
-      <Text style={styles.statLabel}>{label}</Text>
-      <Text style={[styles.statValue, { color: accent }]}>{value}</Text>
-    </View>
-  );
-}
+const CHART_H = 140;
+const CHART_PAD_X = 16;
+const CHART_PAD_TOP = 14;
+const CHART_PAD_BOTTOM = 28;
+const BAR_W = 22;
 
-function WeightBar({ value, max, label }: { value: number; max: number; label: string }) {
-  const pct = max > 0 ? (value / max) * 100 : 0;
-  return (
-    <View style={styles.barItem}>
-      <Text style={styles.barLabel}>{label}</Text>
-      <View style={styles.barTrack}>
-        <View style={[styles.barFill, { width: `${pct}%` as any }]} />
-      </View>
-      <Text style={styles.barValue}>{value.toFixed(0)} kg</Text>
-    </View>
-  );
+function prettyBreed(b: string): string {
+  if (b === 'default') return 'Unspecified';
+  return b.charAt(0).toUpperCase() + b.slice(1);
 }
 
 export default function AnalyticsScreen() {
@@ -37,9 +27,10 @@ export default function AnalyticsScreen() {
     listRecords().then(setRecords);
   }, []));
 
-  const weights = records.map(r => r.result.estimated_weight_kg);
   const totalScans = records.length;
   const realAnimals = records.filter(r => r.detection.is_real_animal).length;
+
+  const weights = records.map(r => r.result.estimated_weight_kg);
   const avgWeight = weights.length ? weights.reduce((a, b) => a + b, 0) / weights.length : 0;
   const maxWeight = weights.length ? Math.max(...weights) : 0;
   const minWeight = weights.length ? Math.min(...weights) : 0;
@@ -57,6 +48,7 @@ export default function AnalyticsScreen() {
     avg: ws.reduce((a, b) => a + b, 0) / ws.length,
     count: ws.length,
   })).sort((a, b) => b.avg - a.avg);
+  const breedMax = breedStats.length ? Math.max(...breedStats.map(b => b.avg)) : 0;
 
   const last7: number[] = Array(7).fill(0);
   const now = Date.now();
@@ -64,138 +56,354 @@ export default function AnalyticsScreen() {
     const daysAgo = Math.floor((now - r.scannedAt) / 86400000);
     if (daysAgo < 7) last7[6 - daysAgo]++;
   });
+  const last7Max = Math.max(...last7, 1);
+  const last7Total = last7.reduce((a, b) => a + b, 0);
 
   return (
     <ScrollView
-      style={styles.container}
-      contentContainerStyle={{ paddingBottom: insets.bottom + spacing.xl }}
+      style={styles.scroll}
+      contentContainerStyle={{ paddingBottom: insets.bottom + 32 }}
     >
-      <View style={[styles.header, { paddingTop: insets.top + spacing.md }]}>
-        <Text style={styles.title}>Análises</Text>
-        <Text style={styles.subtitle}>{totalScans} scan{totalScans !== 1 ? 's' : ''} no total</Text>
+      <View style={[styles.largeTitle, { paddingTop: insets.top + 8 }]}>
+        <View>
+          <Text style={styles.title}>Analytics</Text>
+          <Text style={styles.subtitle}>
+            {totalScans === 0
+              ? 'No data yet'
+              : `${totalScans} scan${totalScans !== 1 ? 's' : ''} · all time`}
+          </Text>
+        </View>
       </View>
 
       {totalScans === 0 ? (
         <View style={styles.empty}>
-          <Text style={styles.emptyText}>Nenhum dado para exibir ainda.</Text>
-          <Text style={styles.emptySubText}>Faça scans para ver as análises aqui.</Text>
+          <Text style={styles.emptyTitle}>No data to show</Text>
+          <Text style={styles.emptySub}>
+            Record a few scans to see weight trends, breed distribution and activity here.
+          </Text>
         </View>
       ) : (
         <>
-          {/* KPIs */}
-          <View style={styles.section}>
-            <Text style={styles.sectionTitle}>Resumo</Text>
-            <View style={styles.kpiCard}>
-              <StatRow label="Peso médio" value={`${avgWeight.toFixed(1)} kg`} accent={colors.primary} />
-              <StatRow label="Peso máximo" value={`${maxWeight.toFixed(1)} kg`} accent={colors.secondary} />
-              <StatRow label="Peso mínimo" value={`${minWeight.toFixed(1)} kg`} accent={colors.warning} />
-              <StatRow label="Confiança média" value={`${avgConf.toFixed(1)}%`} accent={colors.primary} />
-              <StatRow label="Animais reais" value={`${realAnimals} / ${totalScans}`} />
+          {/* Hero — Mean live weight */}
+          <View style={[styles.group, { marginTop: 22 }]}>
+            <View style={styles.card}>
+              <View style={styles.hero}>
+                <Text style={styles.eyebrow}>Mean live weight</Text>
+                <View style={styles.valueRow}>
+                  <Text style={styles.value}>{avgWeight.toFixed(0)}</Text>
+                  <Text style={styles.valueUnit}>kg</Text>
+                </View>
+                <Text style={styles.heroMeta}>
+                  Range {minWeight.toFixed(0)}–{maxWeight.toFixed(0)} kg
+                  {'  ·  '}
+                  Avg confidence {avgConf.toFixed(0)}%
+                </Text>
+              </View>
+              <View style={styles.heroDivider} />
+              <View style={styles.tiles}>
+                <View style={styles.tile}>
+                  <Text style={styles.tileValue}>{totalScans}</Text>
+                  <Text style={styles.tileLabel}>scans</Text>
+                </View>
+                <View style={[styles.tile, styles.tileMid]}>
+                  <Text style={styles.tileValue}>{realAnimals}</Text>
+                  <Text style={styles.tileLabel}>real animals</Text>
+                </View>
+                <View style={styles.tile}>
+                  <Text style={styles.tileValue}>{Object.keys(breedMap).length}</Text>
+                  <Text style={styles.tileLabel}>breeds</Text>
+                </View>
+              </View>
             </View>
           </View>
 
-          {/* Activity last 7 days */}
-          <View style={styles.section}>
-            <Text style={styles.sectionTitle}>Scans — Últimos 7 dias</Text>
-            <View style={styles.kpiCard}>
-              <View style={styles.chartRow}>
-                {last7.map((count, i) => {
-                  const maxVal = Math.max(...last7, 1);
-                  const h = (count / maxVal) * 80;
-                  const day = new Date(now - (6 - i) * 86400000).toLocaleDateString('pt-BR', { weekday: 'short' });
+          {/* Activity chart */}
+          <Text style={styles.sectionHeader}>Activity</Text>
+          <View style={styles.card}>
+            <View style={styles.activityHeader}>
+              <Text style={styles.activityTitle}>Last 7 days</Text>
+              <Text style={styles.activityTotal}>{last7Total} scans</Text>
+            </View>
+            <ActivityChart values={last7} max={last7Max} now={now} />
+          </View>
+
+          {/* Weight by breed */}
+          {breedStats.length > 0 && (
+            <>
+              <Text style={styles.sectionHeader}>Mean weight by breed</Text>
+              <View style={styles.card}>
+                {breedStats.map((b, i, arr) => {
+                  const pct = breedMax > 0 ? (b.avg / breedMax) * 100 : 0;
                   return (
-                    <View key={i} style={styles.chartCol}>
-                      <Text style={styles.chartCount}>{count > 0 ? count : ''}</Text>
-                      <View style={styles.chartBarTrack}>
-                        <View style={[styles.chartBar, { height: h || 4 }]} />
+                    <View key={b.breed}>
+                      <View style={styles.breedRow}>
+                        <View style={styles.breedTop}>
+                          <Text style={styles.breedLabel}>
+                            {prettyBreed(b.breed)}
+                            <Text style={styles.breedCount}>  · {b.count}</Text>
+                          </Text>
+                          <Text style={styles.breedValue}>{b.avg.toFixed(0)} kg</Text>
+                        </View>
+                        <View style={styles.breedTrack}>
+                          <View style={[styles.breedFill, { width: `${pct}%` as `${number}%` }]} />
+                        </View>
                       </View>
-                      <Text style={styles.chartDay}>{day.slice(0, 3)}</Text>
+                      {i < arr.length - 1 && <View style={styles.rowDivider} />}
                     </View>
                   );
                 })}
               </View>
-            </View>
-          </View>
+            </>
+          )}
 
-          {/* By breed */}
-          {breedStats.length > 0 && (
-            <View style={styles.section}>
-              <Text style={styles.sectionTitle}>Por Raça</Text>
-              <View style={styles.kpiCard}>
-                {breedStats.map(b => (
-                  <WeightBar
-                    key={b.breed}
-                    label={`${b.breed} (${b.count})`}
-                    value={b.avg}
-                    max={maxWeight}
-                  />
-                ))}
+          {/* Summary */}
+          <Text style={styles.sectionHeader}>Summary</Text>
+          <View style={styles.card}>
+            {[
+              { k: 'Max weight',      v: `${maxWeight.toFixed(1)} kg` },
+              { k: 'Min weight',      v: `${minWeight.toFixed(1)} kg` },
+              { k: 'Mean confidence', v: `${avgConf.toFixed(1)}%` },
+              { k: 'Real animals',    v: `${realAnimals} / ${totalScans}` },
+            ].map(({ k, v }, i, arr) => (
+              <View key={k}>
+                <View style={styles.row}>
+                  <Text style={styles.rowKey}>{k}</Text>
+                  <Text style={styles.rowVal}>{v}</Text>
+                </View>
+                {i < arr.length - 1 && <View style={styles.rowDivider} />}
               </View>
-            </View>
-          )}
+            ))}
+          </View>
+          <Text style={styles.sectionFooter}>
+            All figures computed from locally stored scans. Trend over longer windows requires backend sync.
+          </Text>
         </>
       )}
     </ScrollView>
   );
 }
 
+function ActivityChart({ values, max, now }: { values: number[]; max: number; now: number }) {
+  const chartWidthFallback = 320; // recomputed via onLayout in real usage; static fallback for SSR / first paint
+  const [width, setWidth] = useState(chartWidthFallback);
+
+  const innerW = width - CHART_PAD_X * 2;
+  const innerH = CHART_H - CHART_PAD_TOP - CHART_PAD_BOTTOM;
+  const slot = innerW / values.length;
+  const barOffset = (slot - BAR_W) / 2;
+
+  return (
+    <View
+      style={{ width: '100%', height: CHART_H }}
+      onLayout={e => setWidth(e.nativeEvent.layout.width)}
+    >
+      <Svg width={width} height={CHART_H}>
+        {/* baseline */}
+        <Line
+          x1={CHART_PAD_X} x2={width - CHART_PAD_X}
+          y1={CHART_H - CHART_PAD_BOTTOM + 0.5}
+          y2={CHART_H - CHART_PAD_BOTTOM + 0.5}
+          stroke={ios.separator} strokeWidth={1}
+        />
+
+        {values.map((count, i) => {
+          const h = max > 0 ? (count / max) * innerH : 0;
+          const x = CHART_PAD_X + slot * i + barOffset;
+          const y = CHART_H - CHART_PAD_BOTTOM - h;
+          const dayDate = new Date(now - (6 - i) * 86400000);
+          const dayLabel = dayDate.toLocaleDateString('en-GB', { weekday: 'short' }).slice(0, 1);
+
+          return (
+            <React.Fragment key={i}>
+              {/* bar */}
+              <Rect
+                x={x} y={y}
+                width={BAR_W}
+                height={Math.max(h, 3)}
+                rx={4} ry={4}
+                fill={count > 0 ? ios.accent : '#E5E5EA'}
+              />
+              {/* count label above bar */}
+              {count > 0 && (
+                <SvgText
+                  x={x + BAR_W / 2} y={y - 6}
+                  fontSize={11} fontWeight="600"
+                  fill={ios.label} textAnchor="middle"
+                >
+                  {String(count)}
+                </SvgText>
+              )}
+              {/* day letter under bar */}
+              <SvgText
+                x={x + BAR_W / 2} y={CHART_H - 10}
+                fontSize={11}
+                fill={ios.secondaryLabel} textAnchor="middle"
+              >
+                {dayLabel}
+              </SvgText>
+            </React.Fragment>
+          );
+        })}
+      </Svg>
+    </View>
+  );
+}
+
+const displayFont = Platform.select({ ios: 'System', android: undefined, default: undefined });
+
 const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: colors.background },
-  header: {
-    paddingHorizontal: spacing.md, paddingBottom: spacing.md,
-    backgroundColor: colors.surface,
-    borderBottomWidth: 1, borderBottomColor: colors.border,
-  },
-  title: { color: colors.text, fontSize: font.lg, fontWeight: '700' },
-  subtitle: { color: colors.textMuted, fontSize: font.sm, marginTop: 2 },
-  section: { paddingHorizontal: spacing.md, marginTop: spacing.md },
-  sectionTitle: { color: colors.text, fontSize: font.md, fontWeight: '700', marginBottom: spacing.sm },
-  kpiCard: {
-    backgroundColor: colors.surface,
-    borderRadius: radius.lg,
-    borderWidth: 1, borderColor: colors.border,
+  scroll: { flex: 1, backgroundColor: ios.systemGroupedBackground },
+
+  largeTitle: { paddingHorizontal: 20, paddingBottom: 6 },
+  title: {
+    fontFamily: displayFont,
+    fontSize: 34, fontWeight: '700',
+    letterSpacing: -0.95, color: ios.label, lineHeight: 36,
+  },
+  subtitle: {
+    fontSize: 13, color: ios.tertiaryLabel,
+    marginTop: 4, letterSpacing: -0.05,
+  },
+
+  // Sections
+  group: { paddingHorizontal: 16 },
+  sectionHeader: {
+    marginTop: 28, marginBottom: 8,
+    paddingHorizontal: 32,
+    fontSize: 13, fontWeight: '400',
+    color: ios.secondaryLabel,
+    textTransform: 'uppercase', letterSpacing: 0.5,
+  },
+  sectionFooter: {
+    marginTop: 8,
+    paddingHorizontal: 32,
+    fontSize: 13, lineHeight: 18,
+    color: ios.secondaryLabel,
+    letterSpacing: -0.05,
+  },
+  card: {
+    marginHorizontal: 16,
+    backgroundColor: ios.secondarySystemGroupedBackground,
+    borderRadius: 12,
     overflow: 'hidden',
-    ...shadow.sm,
-  },
-  statRow: {
-    flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',
-    paddingHorizontal: spacing.md, paddingVertical: 12,
-    borderBottomWidth: 1, borderBottomColor: colors.border,
-  },
-  statLabel: { color: colors.textMuted, fontSize: font.sm },
-  statValue: { fontSize: font.md, fontWeight: '700' },
-  barItem: {
-    flexDirection: 'row', alignItems: 'center', gap: spacing.sm,
-    paddingHorizontal: spacing.md, paddingVertical: 10,
-    borderBottomWidth: 1, borderBottomColor: colors.border,
-  },
-  barLabel: { color: colors.textMuted, fontSize: font.xs, width: 90 },
-  barTrack: {
-    flex: 1, height: 6, backgroundColor: 'rgba(255,255,255,0.06)',
+  },
+
+  // Hero
+  hero: { padding: 22, gap: 8 },
+  eyebrow: {
+    fontSize: 13, fontWeight: '600',
+    color: ios.accent, letterSpacing: -0.05,
+  },
+  valueRow: { flexDirection: 'row', alignItems: 'baseline', gap: 6 },
+  value: {
+    fontFamily: displayFont,
+    fontSize: 56, fontWeight: '700',
+    lineHeight: 56, letterSpacing: -2.2, color: ios.label,
+  },
+  valueUnit: {
+    fontFamily: displayFont,
+    fontSize: 22, fontWeight: '500',
+    color: ios.secondaryLabel, letterSpacing: -0.2,
+  },
+  heroMeta: {
+    fontSize: 13, color: ios.secondaryLabel,
+    marginTop: 4, letterSpacing: -0.05,
+  },
+  heroDivider: {
+    height: StyleSheet.hairlineWidth,
+    backgroundColor: ios.separator,
+  },
+
+  // Tiles inside hero card
+  tiles: { flexDirection: 'row' },
+  tile: {
+    flex: 1, alignItems: 'center',
+    paddingVertical: 14, gap: 4,
+  },
+  tileMid: {
+    borderLeftWidth: StyleSheet.hairlineWidth,
+    borderRightWidth: StyleSheet.hairlineWidth,
+    borderColor: ios.separator,
+  },
+  tileValue: {
+    fontFamily: displayFont,
+    fontSize: 24, fontWeight: '700',
+    letterSpacing: -0.6, color: ios.label,
+  },
+  tileLabel: {
+    fontSize: 11, color: ios.secondaryLabel,
+    letterSpacing: -0.05,
+  },
+
+  // Activity chart
+  activityHeader: {
+    flexDirection: 'row', justifyContent: 'space-between', alignItems: 'baseline',
+    paddingHorizontal: 16, paddingTop: 14, paddingBottom: 6,
+  },
+  activityTitle: {
+    fontSize: 15, fontWeight: '600',
+    color: ios.label, letterSpacing: -0.2,
+  },
+  activityTotal: {
+    fontSize: 13, color: ios.secondaryLabel,
+    letterSpacing: -0.05,
+  },
+
+  // Breed bars
+  breedRow: { paddingHorizontal: 16, paddingVertical: 12, gap: 6 },
+  breedTop: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'baseline' },
+  breedLabel: {
+    fontSize: 15, color: ios.label, letterSpacing: -0.2,
+  },
+  breedCount: {
+    fontSize: 13, color: ios.tertiaryLabel,
+    fontWeight: '400',
+  },
+  breedValue: {
+    fontFamily: displayFont,
+    fontSize: 15, fontWeight: '600',
+    color: ios.label, letterSpacing: -0.2,
+  },
+  breedTrack: {
+    height: 6, backgroundColor: '#E5E5EA',
     borderRadius: 3, overflow: 'hidden',
   },
-  barFill: { height: 6, backgroundColor: colors.primary, borderRadius: 3 },
-  barValue: { color: colors.text, fontSize: font.xs, width: 52, textAlign: 'right' },
-  chartRow: {
-    flexDirection: 'row', justifyContent: 'space-around',
-    alignItems: 'flex-end', paddingHorizontal: spacing.md,
-    paddingTop: spacing.md, paddingBottom: spacing.sm,
-    height: 130,
-  },
-  chartCol: { alignItems: 'center', gap: 4, flex: 1 },
-  chartCount: { color: colors.textMuted, fontSize: font.xs, height: 16 },
-  chartBarTrack: {
-    width: 20, height: 80,
-    backgroundColor: 'rgba(255,255,255,0.06)', borderRadius: 4,
-    justifyContent: 'flex-end', overflow: 'hidden',
-  },
-  chartBar: { width: 20, backgroundColor: colors.primary, borderRadius: 4 },
-  chartDay: { color: colors.textDim, fontSize: font.xs },
+  breedFill: {
+    height: 6, backgroundColor: ios.accent, borderRadius: 3,
+  },
+
+  // Summary rows
+  row: {
+    minHeight: 44,
+    paddingHorizontal: 16, paddingVertical: 11,
+    flexDirection: 'row', alignItems: 'center', gap: 12,
+  },
+  rowDivider: {
+    marginLeft: 16,
+    height: StyleSheet.hairlineWidth,
+    backgroundColor: ios.separator,
+  },
+  rowKey: {
+    flex: 1,
+    fontSize: 17, color: ios.label, letterSpacing: -0.3,
+  },
+  rowVal: {
+    fontFamily: displayFont,
+    fontSize: 17, fontWeight: '500',
+    color: ios.secondaryLabel, letterSpacing: -0.3,
+  },
+
+  // Empty
   empty: {
-    alignItems: 'center', gap: spacing.sm,
-    paddingVertical: spacing.xxl,
-    paddingHorizontal: spacing.xl,
+    alignItems: 'center', gap: 8,
+    paddingTop: 60, paddingBottom: 40, paddingHorizontal: 40,
+  },
+  emptyTitle: {
+    fontSize: 17, fontWeight: '600',
+    color: ios.label, letterSpacing: -0.3,
+  },
+  emptySub: {
+    fontSize: 13, color: ios.secondaryLabel,
+    textAlign: 'center', letterSpacing: -0.05, lineHeight: 18,
   },
-  emptyText: { color: colors.textMuted, fontSize: font.lg, fontWeight: '600' },
-  emptySubText: { color: colors.textDim, fontSize: font.sm, textAlign: 'center' },
 });
diff --git a/mobile/src/screens/HerdScreen.tsx b/mobile/src/screens/HerdScreen.tsx
index 2305e90..e474c72 100644
--- a/mobile/src/screens/HerdScreen.tsx
+++ b/mobile/src/screens/HerdScreen.tsx
@@ -1,19 +1,48 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import {
-  View, Text, FlatList, StyleSheet,
-  TouchableOpacity, Alert, TextInput,
+  View, Text, ScrollView, StyleSheet,
+  TouchableOpacity, Alert, TextInput, Platform,
 } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useFocusEffect, useNavigation } from '@react-navigation/native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { colors, spacing, radius, font, shadow } from '../lib/theme';
+import { ios } from '../lib/theme';
 import { listRecords, deleteRecord, type ScanRecord } from '../lib/storage';
-import StatusBadge from '../components/StatusBadge';
 import type { RootStackParamList } from '../navigation/types';
 
 type Nav = NativeStackNavigationProp<RootStackParamList>;
 
+type Section = { title: string; data: ScanRecord[] };
+
+function startOfDay(d: Date) {
+  const x = new Date(d);
+  x.setHours(0, 0, 0, 0);
+  return x;
+}
+
+function groupRecords(records: ScanRecord[]): Section[] {
+  const today = startOfDay(new Date()).getTime();
+  const weekAgo = today - 6 * 24 * 60 * 60 * 1000;
+
+  const buckets: { today: ScanRecord[]; week: ScanRecord[]; earlier: ScanRecord[] } = {
+    today: [], week: [], earlier: [],
+  };
+
+  for (const r of records) {
+    const t = new Date(r.scannedAt).getTime();
+    if (t >= today) buckets.today.push(r);
+    else if (t >= weekAgo) buckets.week.push(r);
+    else buckets.earlier.push(r);
+  }
+
+  const sections: Section[] = [];
+  if (buckets.today.length)   sections.push({ title: 'Today',     data: buckets.today });
+  if (buckets.week.length)    sections.push({ title: 'This week', data: buckets.week });
+  if (buckets.earlier.length) sections.push({ title: 'Earlier',   data: buckets.earlier });
+  return sections;
+}
+
 export default function HerdScreen() {
   const insets = useSafeAreaInsets();
   const nav = useNavigation<Nav>();
@@ -26,145 +55,244 @@ export default function HerdScreen() {
 
   useFocusEffect(useCallback(() => { load(); }, [load]));
 
-  const filtered = records.filter(r =>
-    r.animal_id.toLowerCase().includes(query.toLowerCase()) ||
-    r.breed.toLowerCase().includes(query.toLowerCase())
+  const filtered = useMemo(
+    () => records.filter(r => {
+      const q = query.toLowerCase().trim();
+      if (!q) return true;
+      return r.animal_id.toLowerCase().includes(q)
+          || r.breed.toLowerCase().includes(q);
+    }),
+    [records, query]
   );
 
-  const handleDelete = (id: string, animalId: string) => {
-    Alert.alert('Remover scan', `Remover o scan de ${animalId}?`, [
-      { text: 'Cancelar', style: 'cancel' },
-      { text: 'Remover', style: 'destructive', onPress: async () => { await deleteRecord(id); load(); } },
-    ]);
+  const sections = useMemo(() => groupRecords(filtered), [filtered]);
+
+  const handleLongPress = (rec: ScanRecord) => {
+    Alert.alert(
+      `Remove scan of ${rec.animal_id}?`,
+      'This permanently deletes the scan from local storage. Backend data is not affected.',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        { text: 'Remove', style: 'destructive', onPress: async () => {
+          await deleteRecord(rec.id);
+          load();
+        } },
+      ]
+    );
   };
 
-  const renderItem = ({ item, index }: { item: ScanRecord; index: number }) => (
-    <TouchableOpacity
-      style={[styles.card, index === 0 && styles.cardFirst]}
-      onPress={() => nav.navigate('Result', { record: item })}
-      activeOpacity={0.75}
+  return (
+    <ScrollView
+      style={styles.scroll}
+      contentContainerStyle={{ paddingBottom: insets.bottom + 32 }}
+      keyboardShouldPersistTaps="handled"
     >
-      <View style={styles.cardLeft}>
-        <View style={[styles.avatar, { backgroundColor: item.detection.is_real_animal ? colors.primaryLight : colors.warningLight }]}>
-          <Ionicons
-            name={item.detection.is_real_animal ? 'paw' : 'cube-outline'}
-            size={18}
-            color={item.detection.is_real_animal ? colors.primary : colors.warning}
-          />
-        </View>
-        <View style={styles.cardInfo}>
-          <Text style={styles.cardId}>{item.animal_id}</Text>
-          <Text style={styles.cardMeta}>{item.breed} · {new Date(item.scannedAt).toLocaleDateString('pt-BR')}</Text>
+      <View style={[styles.largeTitle, { paddingTop: insets.top + 8 }]}>
+        <View style={{ flex: 1 }}>
+          <Text style={styles.title}>Herd</Text>
+          <Text style={styles.subtitle}>
+            {filtered.length === records.length
+              ? `${records.length} scan${records.length !== 1 ? 's' : ''}`
+              : `${filtered.length} of ${records.length}`}
+          </Text>
         </View>
-      </View>
-      <View style={styles.cardRight}>
-        <Text style={styles.cardWeight}>{item.result.estimated_weight_kg.toFixed(0)} kg</Text>
-        <View style={styles.cardActions}>
-          <StatusBadge
-            label={`${Math.round(item.result.confidence_pct)}%`}
-            variant={item.result.confidence_pct >= 85 ? 'success' : 'warning'}
-          />
-          <TouchableOpacity onPress={() => handleDelete(item.id, item.animal_id)} hitSlop={12}>
-            <Ionicons name="trash-outline" size={16} color={colors.textDim} />
-          </TouchableOpacity>
-        </View>
-      </View>
-    </TouchableOpacity>
-  );
-
-  return (
-    <View style={[styles.container, { paddingTop: insets.top }]}>
-      <View style={styles.header}>
-        <Text style={styles.title}>Rebanho</Text>
-        <TouchableOpacity style={styles.scanBtn} onPress={() => nav.navigate('Scan')}>
-          <Ionicons name="scan" size={16} color={colors.primary} />
-          <Text style={styles.scanBtnText}>Novo scan</Text>
+        <TouchableOpacity style={styles.headerAction} onPress={() => nav.navigate('Scan')} activeOpacity={0.6}>
+          <Ionicons name="add" size={26} color={ios.accent} />
         </TouchableOpacity>
       </View>
 
       <View style={styles.searchWrap}>
-        <Ionicons name="search-outline" size={16} color={colors.textDim} />
-        <TextInput
-          style={styles.searchInput}
-          placeholder="Buscar por ID ou raça..."
-          placeholderTextColor={colors.textDim}
-          value={query}
-          onChangeText={setQuery}
-        />
-        {query.length > 0 && (
-          <TouchableOpacity onPress={() => setQuery('')}>
-            <Ionicons name="close-circle" size={16} color={colors.textDim} />
-          </TouchableOpacity>
-        )}
+        <View style={styles.searchField}>
+          <Ionicons name="search" size={16} color={ios.tertiaryLabel} />
+          <TextInput
+            style={styles.searchInput}
+            placeholder="Search by ID or breed"
+            placeholderTextColor={ios.tertiaryLabel}
+            value={query}
+            onChangeText={setQuery}
+            autoCapitalize="none"
+            autoCorrect={false}
+            clearButtonMode="while-editing"
+            returnKeyType="search"
+          />
+        </View>
       </View>
 
-      <Text style={styles.count}>{filtered.length} registro{filtered.length !== 1 ? 's' : ''}</Text>
-
-      <FlatList
-        data={filtered}
-        keyExtractor={i => i.id}
-        renderItem={renderItem}
-        contentContainerStyle={styles.list}
-        ListEmptyComponent={
-          <View style={styles.empty}>
-            <Ionicons name="paw-outline" size={36} color={colors.textDim} />
-            <Text style={styles.emptyText}>{query ? 'Nenhum resultado' : 'Nenhum scan ainda'}</Text>
+      {sections.length === 0 ? (
+        <View style={styles.empty}>
+          <Ionicons name="paw-outline" size={36} color={ios.tertiaryLabel} />
+          <Text style={styles.emptyTitle}>
+            {query ? 'No matches' : 'No scans yet'}
+          </Text>
+          <Text style={styles.emptySub}>
+            {query
+              ? 'Try a different ID or breed.'
+              : 'Tap + to record the first scan of the herd.'}
+          </Text>
+        </View>
+      ) : (
+        sections.map(section => (
+          <View key={section.title}>
+            <Text style={styles.sectionHeader}>{section.title}</Text>
+            <View style={styles.card}>
+              {section.data.map((rec, i) => (
+                <View key={rec.id}>
+                  <TouchableOpacity
+                    style={styles.row}
+                    onPress={() => nav.navigate('Result', { record: rec })}
+                    onLongPress={() => handleLongPress(rec)}
+                    delayLongPress={350}
+                    activeOpacity={0.6}
+                  >
+                    <View style={[
+                      styles.rowIcon,
+                      { backgroundColor: rec.detection.is_real_animal ? ios.accentLight : '#FFF4D6' },
+                    ]}>
+                      <Ionicons
+                        name={rec.detection.is_real_animal ? 'paw' : 'cube-outline'}
+                        size={16}
+                        color={rec.detection.is_real_animal ? ios.accent : '#B4641A'}
+                      />
+                    </View>
+                    <View style={styles.rowInfo}>
+                      <Text style={styles.rowId}>{rec.animal_id}</Text>
+                      <Text style={styles.rowMeta} numberOfLines={1}>
+                        {rec.breed === 'default'
+                          ? 'Unspecified breed'
+                          : rec.breed.charAt(0).toUpperCase() + rec.breed.slice(1)}
+                        {'  ·  '}
+                        {new Date(rec.scannedAt).toLocaleString('pt-PT', {
+                          day: '2-digit', month: 'short',
+                          hour: '2-digit', minute: '2-digit',
+                        })}
+                        {'  ·  '}
+                        {Math.round(rec.result.confidence_pct)}%
+                      </Text>
+                    </View>
+                    <Text style={styles.rowWeight}>
+                      {rec.result.estimated_weight_kg.toFixed(0)} kg
+                    </Text>
+                    <Text style={styles.rowChev}>›</Text>
+                  </TouchableOpacity>
+                  {i < section.data.length - 1 && <View style={styles.rowDivider} />}
+                </View>
+              ))}
+            </View>
           </View>
-        }
-      />
-    </View>
+        ))
+      )}
+
+      {sections.length > 0 && (
+        <Text style={styles.footerHint}>
+          Long-press a row to remove it.
+        </Text>
+      )}
+    </ScrollView>
   );
 }
 
+const displayFont = Platform.select({ ios: 'System', android: undefined, default: undefined });
+
 const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: colors.background },
-  header: {
-    flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between',
-    paddingHorizontal: spacing.md, paddingVertical: spacing.md,
-    backgroundColor: colors.surface,
-    borderBottomWidth: 1, borderBottomColor: colors.border,
-  },
-  title: { color: colors.text, fontSize: font.lg, fontWeight: '800' },
-  scanBtn: {
-    flexDirection: 'row', alignItems: 'center', gap: spacing.xs,
-    backgroundColor: colors.primaryLight,
-    borderRadius: radius.md,
-    borderWidth: 1, borderColor: colors.primary,
-    paddingHorizontal: spacing.sm, paddingVertical: 7,
-  },
-  scanBtnText: { color: colors.primary, fontSize: font.sm, fontWeight: '600' },
-  searchWrap: {
-    flexDirection: 'row', alignItems: 'center', gap: spacing.sm,
-    margin: spacing.md, marginBottom: spacing.xs,
-    backgroundColor: colors.surface,
-    borderRadius: radius.md,
-    borderWidth: 1, borderColor: colors.border,
-    paddingHorizontal: spacing.md,
-    ...shadow.sm,
-  },
-  searchInput: { flex: 1, color: colors.text, fontSize: font.sm, paddingVertical: 11 },
-  count: { color: colors.textMuted, fontSize: font.xs, paddingHorizontal: spacing.md, marginBottom: spacing.sm },
-  list: { paddingHorizontal: spacing.md, paddingBottom: spacing.xl, gap: spacing.sm },
+  scroll: { flex: 1, backgroundColor: ios.systemGroupedBackground },
+
+  // Large title
+  largeTitle: {
+    paddingHorizontal: 20, paddingBottom: 6,
+    flexDirection: 'row', alignItems: 'flex-end',
+  },
+  title: {
+    fontFamily: displayFont,
+    fontSize: 34, fontWeight: '700',
+    letterSpacing: -0.95, color: ios.label, lineHeight: 36,
+  },
+  subtitle: {
+    fontSize: 13, color: ios.tertiaryLabel,
+    marginTop: 4, letterSpacing: -0.05,
+  },
+  headerAction: {
+    width: 36, height: 36, borderRadius: 18,
+    alignItems: 'center', justifyContent: 'center',
+  },
+
+  // Search field iOS HIG
+  searchWrap: { paddingHorizontal: 16, marginTop: 12, marginBottom: 4 },
+  searchField: {
+    flexDirection: 'row', alignItems: 'center', gap: 6,
+    backgroundColor: '#E8E8EC',
+    borderRadius: 10,
+    paddingHorizontal: 10, paddingVertical: 8,
+  },
+  searchInput: {
+    flex: 1,
+    fontSize: 17, color: ios.label, letterSpacing: -0.3,
+    padding: 0,
+  },
+
+  // Sections
+  sectionHeader: {
+    marginTop: 24, marginBottom: 8,
+    paddingHorizontal: 32,
+    fontSize: 13, fontWeight: '400',
+    color: ios.secondaryLabel,
+    textTransform: 'uppercase', letterSpacing: 0.5,
+  },
   card: {
-    backgroundColor: colors.surface,
-    borderRadius: radius.lg,
-    borderWidth: 1, borderColor: colors.border,
-    padding: spacing.md,
-    flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',
-    ...shadow.sm,
-  },
-  cardFirst: {},
-  cardLeft: { flexDirection: 'row', alignItems: 'center', gap: spacing.sm, flex: 1 },
-  avatar: {
-    width: 38, height: 38, borderRadius: radius.sm,
+    marginHorizontal: 16,
+    backgroundColor: ios.secondarySystemGroupedBackground,
+    borderRadius: 12,
+    overflow: 'hidden',
+  },
+  row: {
+    minHeight: 60,
+    paddingHorizontal: 16, paddingVertical: 11,
+    flexDirection: 'row', alignItems: 'center', gap: 12,
+  },
+  rowDivider: {
+    marginLeft: 58,
+    height: StyleSheet.hairlineWidth,
+    backgroundColor: ios.separator,
+  },
+  rowIcon: {
+    width: 30, height: 30, borderRadius: 8,
     alignItems: 'center', justifyContent: 'center',
   },
-  cardInfo: { flex: 1 },
-  cardId: { color: colors.text, fontSize: font.md, fontWeight: '700' },
-  cardMeta: { color: colors.textMuted, fontSize: font.xs, marginTop: 2 },
-  cardRight: { alignItems: 'flex-end', gap: 4 },
-  cardWeight: { color: colors.primary, fontSize: font.lg, fontWeight: '800' },
-  cardActions: { flexDirection: 'row', alignItems: 'center', gap: spacing.sm },
-  empty: { alignItems: 'center', gap: spacing.sm, paddingVertical: spacing.xxl },
-  emptyText: { color: colors.textMuted, fontSize: font.md },
+  rowInfo: { flex: 1, minWidth: 0 },
+  rowId: {
+    fontSize: 16, fontWeight: '500',
+    letterSpacing: -0.3, color: ios.label,
+  },
+  rowMeta: {
+    fontSize: 13, color: ios.secondaryLabel,
+    marginTop: 1, letterSpacing: -0.05,
+  },
+  rowWeight: {
+    fontFamily: displayFont,
+    fontSize: 17, fontWeight: '600',
+    letterSpacing: -0.3, color: ios.label,
+  },
+  rowChev: {
+    fontSize: 20, color: ios.tertiaryLabel,
+    marginLeft: 2,
+  },
+
+  // Empty
+  empty: {
+    alignItems: 'center', gap: 8,
+    paddingTop: 60, paddingBottom: 40, paddingHorizontal: 40,
+  },
+  emptyTitle: {
+    fontSize: 17, fontWeight: '600',
+    color: ios.label, letterSpacing: -0.3, marginTop: 6,
+  },
+  emptySub: {
+    fontSize: 13, color: ios.secondaryLabel,
+    textAlign: 'center', letterSpacing: -0.05,
+  },
+
+  footerHint: {
+    marginTop: 24, paddingHorizontal: 32,
+    fontSize: 12, color: ios.tertiaryLabel,
+    textAlign: 'center', letterSpacing: -0.05,
+  },
 });
diff --git a/mobile/src/screens/ResultScreen.tsx b/mobile/src/screens/ResultScreen.tsx
index 9b191c9..88854a2 100644
--- a/mobile/src/screens/ResultScreen.tsx
+++ b/mobile/src/screens/ResultScreen.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import {
-  View, Text, ScrollView, StyleSheet, TouchableOpacity,
+  View, Text, ScrollView, StyleSheet, TouchableOpacity, Platform,
   Image, Share, Dimensions,
 } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
@@ -8,15 +8,13 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import type { RouteProp } from '@react-navigation/native';
-import { colors, spacing, radius, font, shadow } from '../lib/theme';
-import StatusBadge from '../components/StatusBadge';
-import MetricCard from '../components/MetricCard';
+import { ios } from '../lib/theme';
 import type { RootStackParamList } from '../navigation/types';
 
 type Nav = NativeStackNavigationProp<RootStackParamList>;
 type Route = RouteProp<RootStackParamList, 'Result'>;
 
-const IMG_H = 220;
+const IMG_H = 240;
 const IMG_W = Dimensions.get('window').width;
 
 type Measurements = {
@@ -28,8 +26,8 @@ type Measurements = {
 };
 
 const MEASURE_LINES = [
-  { key: 'body_length_cm'    as keyof Measurements, color: '#059669', dir: 'h' as const, x1: 0.07, x2: 0.93, yc: 0.57 },
-  { key: 'withers_height_cm' as keyof Measurements, color: '#0284C7', dir: 'v' as const, xc: 0.21, y1: 0.09, y2: 0.84 },
+  { key: 'body_length_cm'    as keyof Measurements, color: ios.accent,    dir: 'h' as const, x1: 0.07, x2: 0.93, yc: 0.57 },
+  { key: 'withers_height_cm' as keyof Measurements, color: ios.systemBlue, dir: 'v' as const, xc: 0.21, y1: 0.09, y2: 0.84 },
 ];
 
 function MeasurementOverlay({ measurements }: { measurements: Measurements }) {
@@ -49,8 +47,8 @@ function MeasurementOverlay({ measurements }: { measurements: Measurements }) {
                 <View style={{ position: 'absolute', left: 0,  top: -4, width: 2,  height: 10, backgroundColor: item.color }} />
                 <View style={{ position: 'absolute', right: 0, top: -4, width: 2,  height: 10, backgroundColor: item.color }} />
               </View>
-              <View style={{ position: 'absolute', left: left + w / 2 - 22, top: top - 19, backgroundColor: item.color, borderRadius: 4, paddingHorizontal: 5, paddingVertical: 2 }}>
-                <Text style={{ color: '#fff', fontSize: 9, fontWeight: '700' }}>{label}</Text>
+              <View style={{ position: 'absolute', left: left + w / 2 - 24, top: top - 22, backgroundColor: item.color, borderRadius: 6, paddingHorizontal: 6, paddingVertical: 2 }}>
+                <Text style={{ color: '#fff', fontSize: 10, fontWeight: '700', letterSpacing: -0.1 }}>{label}</Text>
               </View>
             </View>
           );
@@ -64,8 +62,8 @@ function MeasurementOverlay({ measurements }: { measurements: Measurements }) {
                 <View style={{ position: 'absolute', top: 0,    left: -4, width: 10, height: 2, backgroundColor: item.color }} />
                 <View style={{ position: 'absolute', bottom: 0, left: -4, width: 10, height: 2, backgroundColor: item.color }} />
               </View>
-              <View style={{ position: 'absolute', left: left + 6, top: top + h / 2 - 9, backgroundColor: item.color, borderRadius: 4, paddingHorizontal: 5, paddingVertical: 2 }}>
-                <Text style={{ color: '#fff', fontSize: 9, fontWeight: '700' }}>{label}</Text>
+              <View style={{ position: 'absolute', left: left + 8, top: top + h / 2 - 10, backgroundColor: item.color, borderRadius: 6, paddingHorizontal: 6, paddingVertical: 2 }}>
+                <Text style={{ color: '#fff', fontSize: 10, fontWeight: '700', letterSpacing: -0.1 }}>{label}</Text>
               </View>
             </View>
           );
@@ -88,204 +86,306 @@ export default function ResultScreen() {
   const handleShare = async () => {
     await Share.share({
       message:
-        `BoviScan — ${record.animal_id}\n` +
-        `Raça: ${record.breed}\n` +
-        `Peso estimado: ${result.estimated_weight_kg.toFixed(1)} kg\n` +
-        `Confiança: ${confPct}%\n` +
-        `Data: ${new Date(record.scannedAt).toLocaleDateString('pt-BR')}`,
+        `PondiFarm — ${record.animal_id}\n` +
+        `Breed: ${record.breed}\n` +
+        `Estimated weight: ${result.estimated_weight_kg.toFixed(1)} kg\n` +
+        `Confidence: ${confPct}%\n` +
+        `Date: ${new Date(record.scannedAt).toLocaleDateString('pt-PT')}`,
     });
   };
 
   return (
-    <ScrollView
-      style={styles.container}
-      contentContainerStyle={{ paddingBottom: insets.bottom + spacing.xl }}
-    >
-      {/* Header */}
-      <View style={[styles.header, { paddingTop: insets.top + spacing.sm }]}>
-        <TouchableOpacity onPress={() => nav.navigate('Main')} style={styles.backBtn}>
-          <Ionicons name="chevron-back" size={22} color={colors.text} />
+    <View style={styles.container}>
+      {/* Inline navigation bar (push view, not large title) */}
+      <View style={[styles.navbar, { paddingTop: insets.top + 6 }]}>
+        <TouchableOpacity onPress={() => nav.goBack()} style={styles.navButton} hitSlop={8}>
+          <Text style={styles.navBack}>‹ Back</Text>
         </TouchableOpacity>
-        <View style={styles.headerCenter}>
-          <Text style={styles.headerTitle}>Resultado</Text>
-          <Text style={styles.headerSub}>{record.animal_id}</Text>
+        <View style={styles.navCenter}>
+          <Text style={styles.navTitle}>{record.animal_id}</Text>
         </View>
-        <TouchableOpacity onPress={handleShare} style={styles.shareBtn}>
-          <Ionicons name="share-outline" size={20} color={colors.textMuted} />
+        <TouchableOpacity onPress={handleShare} style={styles.navButton} hitSlop={8}>
+          <Ionicons name="share-outline" size={20} color={ios.accent} />
         </TouchableOpacity>
       </View>
 
-      {/* Demo banner */}
-      {isDemo && (
-        <View style={styles.demoBanner}>
-          <Ionicons name="wifi-outline" size={14} color="#92400E" />
-          <Text style={styles.demoBannerText}>Modo demo offline — servidor não alcançado. Resultados pré-calculados.</Text>
-        </View>
-      )}
-
-      {/* Photo + measurement overlay */}
-      {record.imageUri && (
-        <View style={styles.previewContainer}>
-          <Image source={{ uri: record.imageUri }} style={styles.preview} resizeMode="cover" />
-          {showOverlay && <MeasurementOverlay measurements={measurements} />}
-          <TouchableOpacity style={styles.overlayToggle} onPress={() => setShowOverlay(v => !v)}>
-            <Ionicons name={showOverlay ? 'eye-off-outline' : 'eye-outline'} size={13} color="#fff" />
-            <Text style={styles.overlayToggleText}>{showOverlay ? 'Ocultar medidas' : 'Ver medidas'}</Text>
-          </TouchableOpacity>
-        </View>
-      )}
-
-      <View style={styles.body}>
-        {/* Weight hero */}
-        <View style={styles.heroCard}>
-          <View style={styles.heroTop}>
-            <View style={styles.heroLabel}>
-              <Ionicons name="scale-outline" size={14} color={colors.primary} />
-              <Text style={styles.heroLabelText}>Peso Estimado</Text>
-            </View>
-            <StatusBadge
-              label={detection.is_real_animal ? 'Animal real' : 'Demo'}
-              variant={detection.is_real_animal ? 'success' : 'warning'}
-            />
+      <ScrollView contentContainerStyle={{ paddingBottom: insets.bottom + 32 }}>
+        {/* Demo banner — iOS warning info strip */}
+        {isDemo && (
+          <View style={styles.demoBanner}>
+            <Ionicons name="cloud-offline-outline" size={16} color={ios.label} />
+            <Text style={styles.demoBannerText}>
+              Demo mode — backend unreachable. Showing precomputed result.
+            </Text>
           </View>
-          <View style={styles.heroRow}>
-            <Text style={styles.heroWeight}>{result.estimated_weight_kg.toFixed(1)}</Text>
-            <Text style={styles.heroUnit}>kg</Text>
+        )}
+
+        {/* Photo + measurement overlay */}
+        {record.imageUri && (
+          <View style={styles.previewContainer}>
+            <Image source={{ uri: record.imageUri }} style={styles.preview} resizeMode="cover" />
+            {showOverlay && <MeasurementOverlay measurements={measurements} />}
+            <TouchableOpacity style={styles.overlayToggle} onPress={() => setShowOverlay(v => !v)}>
+              <Ionicons name={showOverlay ? 'eye-off-outline' : 'eye-outline'} size={13} color="#fff" />
+              <Text style={styles.overlayToggleText}>
+                {showOverlay ? 'Hide measurements' : 'Show measurements'}
+              </Text>
+            </TouchableOpacity>
           </View>
-          <View style={styles.confRow}>
-            <View style={styles.confBar}>
-              <View style={[styles.confFill, { width: `${confPct}%` as any }]} />
+        )}
+
+        {/* Hero — Estimated weight */}
+        <View style={[styles.group, { marginTop: 22 }]}>
+          <View style={styles.card}>
+            <View style={styles.hero}>
+              <View style={styles.eyebrow}>
+                <Ionicons name="speedometer-outline" size={14} color={ios.accent} />
+                <Text style={styles.eyebrowText}>Estimated weight</Text>
+              </View>
+              <View style={styles.valueRow}>
+                <Text style={styles.value}>{result.estimated_weight_kg.toFixed(1)}</Text>
+                <Text style={styles.valueUnit}>kg</Text>
+              </View>
+              <View style={styles.confRow}>
+                <View style={styles.confBar}>
+                  <View style={[styles.confFill, { width: `${confPct}%` as `${number}%` }]} />
+                </View>
+                <Text style={styles.confLabel}>{confPct}%</Text>
+              </View>
+              {!!result.accuracy_note && (
+                <Text style={styles.accuracyNote}>{result.accuracy_note}</Text>
+              )}
             </View>
-            <Text style={styles.confLabel}>{confPct}%</Text>
           </View>
-          <Text style={styles.accuracyNote}>{result.accuracy_note}</Text>
         </View>
 
         {/* Detection */}
-        <View style={styles.section}>
-          <Text style={styles.sectionTitle}>Detecção</Text>
-          <View style={styles.infoCard}>
-            {[
-              { k: 'Classe detectada', v: detection.class },
-              { k: 'Confiança do modelo', v: `${Math.round(detection.confidence_pct * 100)}%` },
-              { k: 'Modo', v: detection.mode },
-            ].map(({ k, v }, i, arr) => (
-              <View key={k} style={[styles.infoRow, i < arr.length - 1 && styles.infoRowBorder]}>
-                <Text style={styles.infoKey}>{k}</Text>
-                <Text style={styles.infoVal}>{v}</Text>
+        <Text style={styles.sectionHeader}>Detection</Text>
+        <View style={styles.card}>
+          {[
+            { k: 'Detected class',    v: detection.class },
+            { k: 'Model confidence',  v: `${Math.round(detection.confidence_pct * 100)}%` },
+            { k: 'Mode',              v: detection.mode },
+            { k: 'Breed',             v: record.breed },
+          ].map(({ k, v }, i, arr) => (
+            <View key={k}>
+              <View style={styles.row}>
+                <Text style={styles.rowKey}>{k}</Text>
+                <Text style={styles.rowVal}>{v}</Text>
               </View>
-            ))}
-          </View>
+              {i < arr.length - 1 && <View style={styles.rowDivider} />}
+            </View>
+          ))}
         </View>
 
         {/* Measurements */}
-        <View style={styles.section}>
-          <Text style={styles.sectionTitle}>Medidas Morfométricas</Text>
-          <View style={styles.metricsGrid}>
-            <MetricCard label="Comprimento" value={measurements.body_length_cm.toFixed(1)} unit="cm" icon="resize-outline" accent={colors.primary} />
-            <MetricCard label="Alt. Cernelha" value={measurements.withers_height_cm.toFixed(1)} unit="cm" icon="arrow-up-outline" accent={colors.secondary} />
-            <MetricCard label="Prof. Torácica" value={measurements.thoracic_depth_cm.toFixed(1)} unit="cm" icon="contract-outline" accent={colors.warning} />
-            <MetricCard label="Larg. Garupa" value={measurements.rump_width_cm.toFixed(1)} unit="cm" icon="expand-outline" accent={colors.secondary} />
-          </View>
-          <MetricCard label="Perímetro Torácico" value={measurements.chest_girth_cm.toFixed(1)} unit="cm" icon="radio-button-on-outline" accent={colors.primary} />
+        <Text style={styles.sectionHeader}>Measurements</Text>
+        <View style={styles.card}>
+          {[
+            { k: 'Body length',     v: `${measurements.body_length_cm.toFixed(1)} cm` },
+            { k: 'Withers height',  v: `${measurements.withers_height_cm.toFixed(1)} cm` },
+            { k: 'Thoracic depth',  v: `${measurements.thoracic_depth_cm.toFixed(1)} cm` },
+            { k: 'Rump width',      v: `${measurements.rump_width_cm.toFixed(1)} cm` },
+            { k: 'Chest girth',     v: `${measurements.chest_girth_cm.toFixed(1)} cm` },
+          ].map(({ k, v }, i, arr) => (
+            <View key={k}>
+              <View style={styles.row}>
+                <Text style={styles.rowKey}>{k}</Text>
+                <Text style={styles.rowMeasure}>{v}</Text>
+              </View>
+              {i < arr.length - 1 && <View style={styles.rowDivider} />}
+            </View>
+          ))}
         </View>
+        <Text style={styles.sectionFooter}>
+          Captured at {new Date(record.scannedAt).toLocaleString('pt-PT', {
+            day: '2-digit', month: 'short', year: 'numeric',
+            hour: '2-digit', minute: '2-digit',
+          })}.
+        </Text>
 
         {/* Actions */}
         <View style={styles.actions}>
-          <TouchableOpacity style={styles.actionPrimary} onPress={() => nav.navigate('Scan')}>
-            <Ionicons name="scan" size={18} color="#fff" />
-            <Text style={styles.actionPrimaryText}>Novo Scan</Text>
+          <TouchableOpacity
+            style={styles.actionPrimary}
+            onPress={() => nav.navigate('Scan')}
+            activeOpacity={0.85}
+          >
+            <Ionicons name="scan-outline" size={18} color="#FFFFFF" />
+            <Text style={styles.actionPrimaryText}>New scan</Text>
           </TouchableOpacity>
-          <TouchableOpacity style={styles.actionSecondary} onPress={() => (nav as any).navigate('Main', { screen: 'Herd' })}>
-            <Ionicons name="list" size={18} color={colors.textMuted} />
-            <Text style={styles.actionSecondaryText}>Ver Rebanho</Text>
+          <TouchableOpacity
+            style={styles.actionSecondary}
+            onPress={() => (nav as any).navigate('Main', { screen: 'Herd' })}
+            activeOpacity={0.6}
+          >
+            <Text style={styles.actionSecondaryText}>View herd</Text>
           </TouchableOpacity>
         </View>
-      </View>
-    </ScrollView>
+      </ScrollView>
+    </View>
   );
 }
 
+const displayFont = Platform.select({ ios: 'System', android: undefined, default: undefined });
+
 const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: colors.background },
-  header: {
+  container: { flex: 1, backgroundColor: ios.systemGroupedBackground },
+
+  // Inline nav
+  navbar: {
     flexDirection: 'row', alignItems: 'center',
-    paddingHorizontal: spacing.md, paddingBottom: spacing.sm,
-    backgroundColor: colors.surface,
-    borderBottomWidth: 1, borderBottomColor: colors.border,
+    paddingHorizontal: 12, paddingBottom: 10,
+    backgroundColor: ios.systemGroupedBackground,
   },
-  backBtn: { padding: spacing.xs },
-  headerCenter: { flex: 1, alignItems: 'center' },
-  headerTitle: { color: colors.text, fontSize: font.md, fontWeight: '700' },
-  headerSub: { color: colors.textMuted, fontSize: font.xs, marginTop: 1 },
-  shareBtn: { padding: spacing.xs },
+  navButton: { paddingHorizontal: 8, paddingVertical: 4, minWidth: 56 },
+  navBack: {
+    fontSize: 17, color: ios.accent, letterSpacing: -0.3,
+  },
+  navCenter: { flex: 1, alignItems: 'center' },
+  navTitle: {
+    fontFamily: displayFont,
+    fontSize: 17, fontWeight: '600', color: ios.label, letterSpacing: -0.3,
+  },
+
+  // Demo banner
   demoBanner: {
-    flexDirection: 'row', alignItems: 'center', gap: 6,
-    backgroundColor: '#FEF3C7',
-    paddingHorizontal: spacing.md, paddingVertical: 10,
-    borderBottomWidth: 1, borderBottomColor: '#FDE68A',
+    flexDirection: 'row', alignItems: 'center', gap: 8,
+    marginHorizontal: 16, marginBottom: 8,
+    backgroundColor: '#FFF4D6',
+    paddingHorizontal: 14, paddingVertical: 10,
+    borderRadius: 10,
+  },
+  demoBannerText: {
+    flex: 1, fontSize: 13, color: ios.label, letterSpacing: -0.05,
+  },
+
+  // Photo
+  previewContainer: {
+    position: 'relative',
+    marginHorizontal: 16,
+    height: IMG_H,
+    borderRadius: 18,
+    overflow: 'hidden',
+    backgroundColor: '#000',
   },
-  demoBannerText: { color: '#92400E', fontSize: font.xs, flex: 1 },
-  previewContainer: { position: 'relative', width: '100%', height: IMG_H },
-  preview: { width: '100%', height: IMG_H, backgroundColor: colors.surfaceHigh },
+  preview: { width: '100%', height: IMG_H },
   overlayToggle: {
-    position: 'absolute', bottom: spacing.sm, right: spacing.sm,
-    flexDirection: 'row', alignItems: 'center', gap: 4,
+    position: 'absolute', bottom: 12, right: 12,
+    flexDirection: 'row', alignItems: 'center', gap: 5,
     backgroundColor: 'rgba(0,0,0,0.55)',
-    paddingHorizontal: spacing.sm, paddingVertical: 5,
-    borderRadius: radius.full,
+    paddingHorizontal: 12, paddingVertical: 6,
+    borderRadius: 999,
+  },
+  overlayToggleText: {
+    color: '#FFFFFF', fontSize: 12, fontWeight: '600', letterSpacing: -0.1,
+  },
+
+  // Sections
+  group: { paddingHorizontal: 16 },
+  sectionHeader: {
+    marginTop: 32, marginBottom: 8,
+    paddingHorizontal: 32,
+    fontSize: 13, fontWeight: '400',
+    color: ios.secondaryLabel,
+    textTransform: 'uppercase', letterSpacing: 0.5,
+  },
+  sectionFooter: {
+    marginTop: 8,
+    paddingHorizontal: 32,
+    fontSize: 13, lineHeight: 18,
+    color: ios.secondaryLabel,
+    letterSpacing: -0.05,
+  },
+  card: {
+    marginHorizontal: 16,
+    backgroundColor: ios.secondarySystemGroupedBackground,
+    borderRadius: 12,
+    overflow: 'hidden',
+  },
+
+  // Hero
+  hero: { padding: 22, gap: 10 },
+  eyebrow: {
+    flexDirection: 'row', alignItems: 'center', gap: 6,
+  },
+  eyebrowText: {
+    fontSize: 13, fontWeight: '600',
+    color: ios.accent, letterSpacing: -0.05,
+  },
+  valueRow: { flexDirection: 'row', alignItems: 'baseline', gap: 6 },
+  value: {
+    fontFamily: displayFont,
+    fontSize: 56, fontWeight: '700',
+    lineHeight: 56, letterSpacing: -2.2, color: ios.label,
   },
-  overlayToggleText: { color: '#fff', fontSize: font.xs, fontWeight: '600' },
-  body: { padding: spacing.md, gap: spacing.md },
-  heroCard: {
-    backgroundColor: colors.surface,
-    borderRadius: radius.lg,
-    borderWidth: 1, borderColor: colors.border,
-    padding: spacing.lg,
-    gap: spacing.sm,
-    ...shadow.md,
+  valueUnit: {
+    fontFamily: displayFont,
+    fontSize: 22, fontWeight: '500',
+    color: ios.secondaryLabel, letterSpacing: -0.2,
+  },
+  confRow: {
+    flexDirection: 'row', alignItems: 'center', gap: 12,
+    marginTop: 6,
   },
-  heroTop: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
-  heroLabel: { flexDirection: 'row', alignItems: 'center', gap: 4 },
-  heroLabelText: { color: colors.primary, fontSize: font.xs, fontWeight: '700', textTransform: 'uppercase', letterSpacing: 0.5 },
-  heroRow: { flexDirection: 'row', alignItems: 'flex-end', gap: spacing.xs },
-  heroWeight: { color: colors.text, fontSize: 56, fontWeight: '800', lineHeight: 62, letterSpacing: -1 },
-  heroUnit: { color: colors.textMuted, fontSize: font.xl, marginBottom: 10 },
-  confRow: { flexDirection: 'row', alignItems: 'center', gap: spacing.sm },
   confBar: {
-    flex: 1, height: 6, backgroundColor: colors.border,
+    flex: 1, height: 6, backgroundColor: '#E5E5EA',
     borderRadius: 3, overflow: 'hidden',
   },
-  confFill: { height: 6, backgroundColor: colors.primary, borderRadius: 3 },
-  confLabel: { color: colors.primary, fontSize: font.sm, fontWeight: '700', minWidth: 40 },
-  accuracyNote: { color: colors.textDim, fontSize: font.xs, fontStyle: 'italic' },
-  section: { gap: spacing.sm },
-  sectionTitle: { color: colors.text, fontSize: font.md, fontWeight: '700' },
-  infoCard: {
-    backgroundColor: colors.surface,
-    borderRadius: radius.lg,
-    borderWidth: 1, borderColor: colors.border,
-    overflow: 'hidden',
-    ...shadow.sm,
+  confFill: { height: 6, backgroundColor: ios.accent, borderRadius: 3 },
+  confLabel: {
+    fontFamily: displayFont,
+    fontSize: 13, fontWeight: '600',
+    color: ios.accent, minWidth: 40, letterSpacing: -0.1,
+  },
+  accuracyNote: {
+    fontSize: 13, color: ios.secondaryLabel,
+    marginTop: 4, letterSpacing: -0.05,
+  },
+
+  // Rows
+  row: {
+    minHeight: 44,
+    paddingHorizontal: 16, paddingVertical: 11,
+    flexDirection: 'row', alignItems: 'center', gap: 12,
+  },
+  rowDivider: {
+    marginLeft: 16,
+    height: StyleSheet.hairlineWidth,
+    backgroundColor: ios.separator,
+  },
+  rowKey: {
+    flex: 1,
+    fontSize: 17, color: ios.label, letterSpacing: -0.3,
+  },
+  rowVal: {
+    fontSize: 17, color: ios.secondaryLabel, letterSpacing: -0.3,
+    textAlign: 'right', maxWidth: '60%',
+  },
+  rowMeasure: {
+    fontFamily: displayFont,
+    fontSize: 17, fontWeight: '500',
+    color: ios.label, letterSpacing: -0.3,
+  },
+
+  // Actions
+  actions: {
+    marginTop: 32, marginHorizontal: 16, gap: 10,
   },
-  infoRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: spacing.md, paddingVertical: 13 },
-  infoRowBorder: { borderBottomWidth: 1, borderBottomColor: colors.border },
-  infoKey: { color: colors.textMuted, fontSize: font.sm },
-  infoVal: { color: colors.text, fontSize: font.sm, fontWeight: '600', maxWidth: '55%', textAlign: 'right' },
-  metricsGrid: { flexDirection: 'row', flexWrap: 'wrap', gap: spacing.sm, marginBottom: spacing.sm },
-  actions: { flexDirection: 'row', gap: spacing.sm, marginTop: spacing.sm },
   actionPrimary: {
-    flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center',
-    gap: spacing.sm, backgroundColor: colors.primary,
-    borderRadius: radius.md, paddingVertical: spacing.md,
-    ...shadow.sm,
+    backgroundColor: ios.label,
+    borderRadius: 14, paddingVertical: 16,
+    flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 10,
+  },
+  actionPrimaryText: {
+    color: '#FFFFFF',
+    fontSize: 17, fontWeight: '600', letterSpacing: -0.3,
   },
-  actionPrimaryText: { color: '#fff', fontSize: font.md, fontWeight: '700' },
   actionSecondary: {
-    flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center',
-    gap: spacing.sm, backgroundColor: colors.surface,
-    borderRadius: radius.md, paddingVertical: spacing.md,
-    borderWidth: 1, borderColor: colors.border,
+    paddingVertical: 14,
+    alignItems: 'center', justifyContent: 'center',
+  },
+  actionSecondaryText: {
+    color: ios.accent, fontSize: 17, fontWeight: '500', letterSpacing: -0.3,
   },
-  actionSecondaryText: { color: colors.textMuted, fontSize: font.md, fontWeight: '600' },
 });
diff --git a/mobile/src/screens/ScanScreen.tsx b/mobile/src/screens/ScanScreen.tsx
index f3298de..3809541 100644
--- a/mobile/src/screens/ScanScreen.tsx
+++ b/mobile/src/screens/ScanScreen.tsx
@@ -1,8 +1,8 @@
 import React, { useState, useRef, useEffect } from 'react';
 import {
-  View, Text, StyleSheet, TouchableOpacity,
+  View, Text, StyleSheet, TouchableOpacity, Platform,
   Alert, ActivityIndicator, Dimensions,
-  Modal, TextInput, KeyboardAvoidingView, Platform, ScrollView,
+  Modal, TextInput, KeyboardAvoidingView, ScrollView,
 } from 'react-native';
 import { CameraView, useCameraPermissions } from 'expo-camera';
 import { Ionicons } from '@expo/vector-icons';
@@ -11,7 +11,7 @@ import * as ImagePicker from 'expo-image-picker';
 import * as Haptics from 'expo-haptics';
 import { useNavigation } from '@react-navigation/native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { colors, spacing, radius, font } from '../lib/theme';
+import { ios } from '../lib/theme';
 import { scanAnimal } from '../lib/api';
 import { saveRecord, type ScanRecord } from '../lib/storage';
 import type { RootStackParamList } from '../navigation/types';
@@ -19,69 +19,101 @@ import type { RootStackParamList } from '../navigation/types';
 type Nav = NativeStackNavigationProp<RootStackParamList>;
 
 const { width } = Dimensions.get('window');
-const FRAME = width * 0.72;
-const BREEDS = ['default', 'minhota', 'alentejana', 'barrosã', 'maronesa', 'cachena', 'mirandesa'];
+const FRAME = width * 0.74;
+
+const BREEDS = [
+  { key: 'default',    label: 'Unspecified' },
+  { key: 'minhota',    label: 'Minhota' },
+  { key: 'alentejana', label: 'Alentejana' },
+  { key: 'barrosã',    label: 'Barrosã' },
+  { key: 'maronesa',   label: 'Maronesa' },
+  { key: 'cachena',    label: 'Cachena' },
+  { key: 'mirandesa',  label: 'Mirandesa' },
+];
+
+const PIPELINE_STEPS = [
+  { icon: 'eye-outline'      as const, label: 'Detecting animal'    },
+  { icon: 'git-branch-outline' as const, label: 'Segmenting contour'   },
+  { icon: 'resize-outline'   as const, label: 'Extracting measurements' },
+  { icon: 'analytics-outline' as const, label: 'Estimating weight'     },
+];
 
 function PreScanModal({
-  visible,
-  onConfirm,
-  onCancel,
+  visible, onConfirm, onCancel,
 }: {
   visible: boolean;
   onConfirm: (animalId: string, breed: string) => void;
   onCancel: () => void;
 }) {
+  const insets = useSafeAreaInsets();
   const [animalId, setAnimalId] = useState('');
   const [breed, setBreed] = useState('default');
 
-  const handleConfirm = () => {
-    onConfirm(animalId.trim() || 'DEMO-001', breed);
-  };
-
   return (
     <Modal visible={visible} transparent animationType="slide">
       <KeyboardAvoidingView
         style={styles.modalBackdrop}
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
       >
-        <View style={styles.modalSheet}>
+        <View style={[styles.modalSheet, { paddingBottom: insets.bottom + 24 }]}>
           <View style={styles.modalHandle} />
-          <Text style={styles.modalTitle}>Identificar Animal</Text>
-          <Text style={styles.modalSub}>Opcional — pode deixar em branco</Text>
-
-          <Text style={styles.fieldLabel}>ID / Nome do animal</Text>
-          <TextInput
-            style={styles.input}
-            placeholder="Ex: PT-347821 ou Mimosa"
-            placeholderTextColor={colors.textDim}
-            value={animalId}
-            onChangeText={setAnimalId}
-            autoCapitalize="characters"
-            returnKeyType="done"
-          />
-
-          <Text style={styles.fieldLabel}>Raça</Text>
-          <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.breedScroll} contentContainerStyle={styles.breedRow}>
-            {BREEDS.map(b => (
-              <TouchableOpacity
-                key={b}
-                style={[styles.breedBtn, breed === b && styles.breedBtnActive]}
-                onPress={() => setBreed(b)}
-              >
-                <Text style={[styles.breedLabel, breed === b && styles.breedLabelActive]}>
-                  {b.charAt(0).toUpperCase() + b.slice(1)}
-                </Text>
-              </TouchableOpacity>
-            ))}
-          </ScrollView>
+          <Text style={styles.modalTitle}>New scan</Text>
+          <Text style={styles.modalSub}>
+            Animal ID is optional. Leave blank to auto-generate.
+          </Text>
+
+          <Text style={styles.sectionHeader}>Animal</Text>
+          <View style={styles.card}>
+            <View style={styles.row}>
+              <Text style={styles.rowLabel}>ID</Text>
+              <TextInput
+                style={styles.rowInput}
+                placeholder="e.g. PT-347821"
+                placeholderTextColor={ios.tertiaryLabel}
+                value={animalId}
+                onChangeText={setAnimalId}
+                autoCapitalize="characters"
+                returnKeyType="done"
+              />
+            </View>
+          </View>
 
-          <TouchableOpacity style={styles.confirmBtn} onPress={handleConfirm}>
-            <Ionicons name="camera" size={18} color="#fff" />
-            <Text style={styles.confirmText}>Abrir Câmera</Text>
+          <Text style={styles.sectionHeader}>Breed</Text>
+          <View style={styles.card}>
+            <ScrollView
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              contentContainerStyle={styles.breedScroll}
+            >
+              {BREEDS.map(b => {
+                const active = breed === b.key;
+                return (
+                  <TouchableOpacity
+                    key={b.key}
+                    style={[styles.breedChip, active && styles.breedChipActive]}
+                    onPress={() => setBreed(b.key)}
+                    activeOpacity={0.7}
+                  >
+                    <Text style={[styles.breedLabel, active && styles.breedLabelActive]}>
+                      {b.label}
+                    </Text>
+                  </TouchableOpacity>
+                );
+              })}
+            </ScrollView>
+          </View>
+
+          <TouchableOpacity
+            style={styles.confirmBtn}
+            onPress={() => onConfirm(animalId.trim() || 'DEMO-001', breed)}
+            activeOpacity={0.85}
+          >
+            <Ionicons name="camera-outline" size={18} color="#FFFFFF" />
+            <Text style={styles.confirmText}>Open camera</Text>
           </TouchableOpacity>
 
-          <TouchableOpacity style={styles.cancelBtn} onPress={onCancel}>
-            <Text style={styles.cancelText}>Cancelar</Text>
+          <TouchableOpacity style={styles.cancelBtn} onPress={onCancel} activeOpacity={0.6}>
+            <Text style={styles.cancelText}>Cancel</Text>
           </TouchableOpacity>
         </View>
       </KeyboardAvoidingView>
@@ -89,13 +121,6 @@ function PreScanModal({
   );
 }
 
-const PIPELINE_STEPS = [
-  { icon: 'eye-outline',        label: 'Detectando animal...' },
-  { icon: 'git-branch-outline', label: 'Segmentando contorno...' },
-  { icon: 'resize-outline',     label: 'Extraindo medidas...' },
-  { icon: 'analytics-outline',  label: 'Calculando peso...' },
-];
-
 export default function ScanScreen() {
   const insets = useSafeAreaInsets();
   const nav = useNavigation<Nav>();
@@ -116,8 +141,8 @@ export default function ScanScreen() {
       stepTimer.current = setInterval(() => {
         setPipelineStep(s => (s < PIPELINE_STEPS.length - 1 ? s + 1 : s));
       }, 1500);
-    } else {
-      if (stepTimer.current) clearInterval(stepTimer.current);
+    } else if (stepTimer.current) {
+      clearInterval(stepTimer.current);
     }
     return () => { if (stepTimer.current) clearInterval(stepTimer.current); };
   }, [scanning]);
@@ -144,7 +169,7 @@ export default function ScanScreen() {
       nav.replace('Result', { record });
     } catch (err: any) {
       await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
-      Alert.alert('Erro no scan', err.message, [{ text: 'OK' }]);
+      Alert.alert('Scan failed', err.message ?? 'Unknown error', [{ text: 'OK' }]);
     } finally {
       setScanning(false);
     }
@@ -167,17 +192,28 @@ export default function ScanScreen() {
   };
 
   if (!permission) {
-    return <View style={styles.center}><ActivityIndicator color={colors.primary} /></View>;
+    return (
+      <View style={styles.center}>
+        <ActivityIndicator color={ios.accent} />
+      </View>
+    );
   }
 
   if (!permission.granted) {
     return (
-      <View style={[styles.center, { paddingTop: insets.top }]}>
-        <Ionicons name="camera-outline" size={56} color={colors.textDim} />
-        <Text style={styles.permTitle}>Câmera necessária</Text>
-        <Text style={styles.permDesc}>Precisamos de acesso à câmera para fazer o scan do animal.</Text>
-        <TouchableOpacity style={styles.permBtn} onPress={requestPermission}>
-          <Text style={styles.permBtnText}>Permitir acesso</Text>
+      <View style={[styles.permWrap, { paddingTop: insets.top + 40 }]}>
+        <View style={styles.permIcon}>
+          <Ionicons name="camera-outline" size={36} color={ios.accent} />
+        </View>
+        <Text style={styles.permTitle}>Camera access required</Text>
+        <Text style={styles.permDesc}>
+          PondiFarm needs your camera to capture the animal and estimate its weight.
+        </Text>
+        <TouchableOpacity style={styles.permBtn} onPress={requestPermission} activeOpacity={0.85}>
+          <Text style={styles.permBtnText}>Allow camera access</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={styles.permSecondary} onPress={() => nav.goBack()} activeOpacity={0.6}>
+          <Text style={styles.permSecondaryText}>Back</Text>
         </TouchableOpacity>
       </View>
     );
@@ -185,14 +221,12 @@ export default function ScanScreen() {
 
   return (
     <View style={styles.container}>
-      {/* Modal de identificação */}
       <PreScanModal
         visible={showPreScan}
         onConfirm={handlePreScanConfirm}
         onCancel={() => nav.goBack()}
       />
 
-      {/* Camera — sem filhos */}
       <CameraView
         ref={cameraRef}
         style={StyleSheet.absoluteFill}
@@ -201,23 +235,26 @@ export default function ScanScreen() {
       />
 
       {/* Top bar */}
-      <View style={[styles.topBar, { paddingTop: insets.top + spacing.sm }]}>
-        <TouchableOpacity style={styles.iconBtn} onPress={() => nav.goBack()}>
-          <Ionicons name="close" size={24} color="#fff" />
+      <View style={[styles.topBar, { paddingTop: insets.top + 8 }]}>
+        <TouchableOpacity style={styles.topIcon} onPress={() => nav.goBack()} hitSlop={8}>
+          <Ionicons name="close" size={22} color="#FFFFFF" />
         </TouchableOpacity>
         <View style={styles.topCenter}>
-          <Text style={styles.topTitle}>Scan Animal</Text>
-          <Text style={styles.topSub}>{animalId} · {breed}</Text>
+          <Text style={styles.topTitle} numberOfLines={1}>{animalId}</Text>
+          <Text style={styles.topSub} numberOfLines={1}>
+            {BREEDS.find(b => b.key === breed)?.label ?? breed}
+          </Text>
         </View>
         <TouchableOpacity
-          style={styles.iconBtn}
+          style={styles.topIcon}
           onPress={() => setFacing(f => f === 'back' ? 'front' : 'back')}
+          hitSlop={8}
         >
-          <Ionicons name="camera-reverse-outline" size={24} color="#fff" />
+          <Ionicons name="camera-reverse-outline" size={22} color="#FFFFFF" />
         </TouchableOpacity>
       </View>
 
-      {/* Viewfinder */}
+      {/* Viewfinder corners */}
       <View style={styles.frameArea} pointerEvents="none">
         <View style={styles.frameOuter}>
           <View style={[styles.corner, styles.tl]} />
@@ -225,34 +262,38 @@ export default function ScanScreen() {
           <View style={[styles.corner, styles.bl]} />
           <View style={[styles.corner, styles.br]} />
         </View>
-        <Text style={styles.frameHint}>Posicione o animal de perfil, visível inteiro</Text>
+        <View style={styles.frameHintPill}>
+          <Text style={styles.frameHint}>Frame the animal from the side, fully visible</Text>
+        </View>
       </View>
 
       {/* Bottom controls */}
-      <View style={[styles.bottomBar, { paddingBottom: insets.bottom + spacing.xl }]}>
-        <TouchableOpacity style={styles.galleryBtn} onPress={pickFromGallery} disabled={scanning}>
-          <Ionicons name="image-outline" size={26} color="#fff" />
-          <Text style={styles.galleryLabel}>Galeria</Text>
+      <View style={[styles.bottomBar, { paddingBottom: insets.bottom + 24 }]}>
+        <TouchableOpacity style={styles.sideBtn} onPress={pickFromGallery} disabled={scanning} hitSlop={8}>
+          <Ionicons name="images-outline" size={26} color="#FFFFFF" />
+          <Text style={styles.sideLabel}>Library</Text>
         </TouchableOpacity>
 
         <TouchableOpacity
           style={[styles.captureBtn, (scanning || !cameraReady) && styles.captureBtnDisabled]}
           onPress={takePicture}
           disabled={scanning || !cameraReady}
+          activeOpacity={0.85}
         >
           {scanning
-            ? <ActivityIndicator color={colors.primary} size="small" />
+            ? <ActivityIndicator color={ios.accent} size="small" />
             : <View style={styles.captureInner} />
           }
         </TouchableOpacity>
 
         <TouchableOpacity
-          style={styles.editIdBtn}
+          style={styles.sideBtn}
           onPress={() => setShowPreScan(true)}
           disabled={scanning}
+          hitSlop={8}
         >
-          <Ionicons name="create-outline" size={22} color="#fff" />
-          <Text style={styles.galleryLabel}>Editar</Text>
+          <Ionicons name="create-outline" size={26} color="#FFFFFF" />
+          <Text style={styles.sideLabel}>Edit ID</Text>
         </TouchableOpacity>
       </View>
 
@@ -260,13 +301,13 @@ export default function ScanScreen() {
       {scanning && (
         <View style={styles.overlay}>
           <View style={styles.pipelineCard}>
-            <ActivityIndicator size="small" color={colors.primary} style={{ marginBottom: spacing.md }} />
+            <Text style={styles.pipelineHeader}>Processing</Text>
             {PIPELINE_STEPS.map((step, i) => (
               <View key={step.label} style={styles.pipelineRow}>
                 <Ionicons
-                  name={i < pipelineStep ? 'checkmark-circle' : i === pipelineStep ? (step.icon as any) : 'ellipse-outline'}
+                  name={i < pipelineStep ? 'checkmark-circle' : i === pipelineStep ? step.icon : 'ellipse-outline'}
                   size={18}
-                  color={i <= pipelineStep ? colors.primary : colors.textDim}
+                  color={i < pipelineStep ? ios.accent : i === pipelineStep ? ios.accent : ios.tertiaryLabel}
                 />
                 <Text style={[styles.pipelineLabel, i <= pipelineStep && styles.pipelineLabelActive]}>
                   {step.label}
@@ -280,131 +321,222 @@ export default function ScanScreen() {
   );
 }
 
-const CORNER = 24;
+const displayFont = Platform.select({ ios: 'System', android: undefined, default: undefined });
+const CORNER = 26;
 const BORDER = 3;
 
 const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: '#000' },
   center: {
-    flex: 1, backgroundColor: colors.background,
+    flex: 1, backgroundColor: ios.systemGroupedBackground,
     alignItems: 'center', justifyContent: 'center',
-    padding: spacing.xl, gap: spacing.md,
   },
-  permTitle: { color: colors.text, fontSize: font.lg, fontWeight: '700' },
-  permDesc: { color: colors.textMuted, fontSize: font.sm, textAlign: 'center' },
+
+  // Permission screen
+  permWrap: {
+    flex: 1, backgroundColor: ios.systemGroupedBackground,
+    alignItems: 'center', paddingHorizontal: 32, gap: 12,
+  },
+  permIcon: {
+    width: 76, height: 76, borderRadius: 38,
+    backgroundColor: ios.accentLight,
+    alignItems: 'center', justifyContent: 'center',
+    marginBottom: 8,
+  },
+  permTitle: {
+    fontFamily: displayFont,
+    fontSize: 22, fontWeight: '700',
+    letterSpacing: -0.5, color: ios.label, textAlign: 'center',
+  },
+  permDesc: {
+    fontSize: 15, color: ios.secondaryLabel,
+    textAlign: 'center', letterSpacing: -0.1, lineHeight: 20,
+    paddingHorizontal: 16, marginBottom: 16,
+  },
   permBtn: {
-    backgroundColor: colors.primary, borderRadius: radius.md,
-    paddingHorizontal: spacing.xl, paddingVertical: spacing.md,
+    backgroundColor: ios.label, borderRadius: 14,
+    paddingHorizontal: 32, paddingVertical: 14, minWidth: 240,
+    alignItems: 'center',
+  },
+  permBtnText: {
+    color: '#FFFFFF',
+    fontSize: 17, fontWeight: '600', letterSpacing: -0.3,
+  },
+  permSecondary: { paddingVertical: 14, alignItems: 'center' },
+  permSecondaryText: {
+    color: ios.accent, fontSize: 17, fontWeight: '500', letterSpacing: -0.3,
   },
-  permBtnText: { color: '#fff', fontWeight: '700', fontSize: font.md },
+
+  // Top bar over camera
   topBar: {
     position: 'absolute', top: 0, left: 0, right: 0,
     flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between',
-    paddingHorizontal: spacing.md, paddingBottom: spacing.md,
-  },
-  topCenter: { alignItems: 'center' },
-  topTitle: { color: '#fff', fontSize: font.md, fontWeight: '700' },
-  topSub: { color: 'rgba(255,255,255,0.65)', fontSize: font.xs, marginTop: 1 },
-  iconBtn: {
-    width: 40, height: 40, borderRadius: 20,
-    backgroundColor: 'rgba(0,0,0,0.4)',
+    paddingHorizontal: 16, paddingBottom: 12,
+  },
+  topIcon: {
+    width: 36, height: 36, borderRadius: 18,
+    backgroundColor: 'rgba(0,0,0,0.42)',
     alignItems: 'center', justifyContent: 'center',
   },
+  topCenter: { alignItems: 'center', maxWidth: '60%' },
+  topTitle: {
+    fontFamily: displayFont,
+    color: '#FFFFFF', fontSize: 15, fontWeight: '600', letterSpacing: -0.2,
+  },
+  topSub: {
+    color: 'rgba(255,255,255,0.7)',
+    fontSize: 12, marginTop: 1, letterSpacing: -0.05,
+  },
+
+  // Viewfinder
   frameArea: {
     position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
-    alignItems: 'center', justifyContent: 'center', gap: spacing.lg,
+    alignItems: 'center', justifyContent: 'center', gap: 28,
   },
   frameOuter: { width: FRAME, height: FRAME * 0.75, position: 'relative' },
-  corner: { position: 'absolute', width: CORNER, height: CORNER, borderColor: colors.primary },
-  tl: { top: 0, left: 0, borderTopWidth: BORDER, borderLeftWidth: BORDER, borderTopLeftRadius: 4 },
-  tr: { top: 0, right: 0, borderTopWidth: BORDER, borderRightWidth: BORDER, borderTopRightRadius: 4 },
-  bl: { bottom: 0, left: 0, borderBottomWidth: BORDER, borderLeftWidth: BORDER, borderBottomLeftRadius: 4 },
-  br: { bottom: 0, right: 0, borderBottomWidth: BORDER, borderRightWidth: BORDER, borderBottomRightRadius: 4 },
+  corner: { position: 'absolute', width: CORNER, height: CORNER, borderColor: ios.accent },
+  tl: { top: 0, left: 0,  borderTopWidth: BORDER, borderLeftWidth: BORDER,  borderTopLeftRadius: 6 },
+  tr: { top: 0, right: 0, borderTopWidth: BORDER, borderRightWidth: BORDER, borderTopRightRadius: 6 },
+  bl: { bottom: 0, left: 0,  borderBottomWidth: BORDER, borderLeftWidth: BORDER,  borderBottomLeftRadius: 6 },
+  br: { bottom: 0, right: 0, borderBottomWidth: BORDER, borderRightWidth: BORDER, borderBottomRightRadius: 6 },
+  frameHintPill: {
+    backgroundColor: 'rgba(0,0,0,0.48)',
+    paddingHorizontal: 14, paddingVertical: 7,
+    borderRadius: 999,
+  },
   frameHint: {
-    color: 'rgba(255,255,255,0.75)', fontSize: font.sm,
-    textAlign: 'center', backgroundColor: 'rgba(0,0,0,0.45)',
-    paddingHorizontal: spacing.md, paddingVertical: spacing.xs,
-    borderRadius: radius.full, marginTop: spacing.lg,
+    color: 'rgba(255,255,255,0.92)',
+    fontSize: 13, letterSpacing: -0.05,
   },
+
+  // Bottom controls
   bottomBar: {
     position: 'absolute', bottom: 0, left: 0, right: 0,
-    flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between',
-    paddingHorizontal: spacing.xl, paddingTop: spacing.md,
+    flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around',
+    paddingTop: 16,
+  },
+  sideBtn: { width: 72, alignItems: 'center', gap: 4 },
+  sideLabel: {
+    color: 'rgba(255,255,255,0.78)',
+    fontSize: 11, letterSpacing: -0.05,
   },
-  galleryBtn: { width: 64, alignItems: 'center', gap: 4 },
-  editIdBtn: { width: 64, alignItems: 'center', gap: 4 },
-  galleryLabel: { color: 'rgba(255,255,255,0.7)', fontSize: font.xs },
   captureBtn: {
-    width: 72, height: 72, borderRadius: 36,
-    borderWidth: 3, borderColor: '#fff',
+    width: 76, height: 76, borderRadius: 38,
+    borderWidth: 4, borderColor: '#FFFFFF',
     alignItems: 'center', justifyContent: 'center',
   },
-  captureInner: { width: 58, height: 58, borderRadius: 29, backgroundColor: '#fff' },
+  captureInner: {
+    width: 60, height: 60, borderRadius: 30,
+    backgroundColor: '#FFFFFF',
+  },
   captureBtnDisabled: { opacity: 0.5 },
+
+  // Pipeline processing overlay
   overlay: {
     position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
-    backgroundColor: 'rgba(5,13,26,0.80)',
+    backgroundColor: 'rgba(0,0,0,0.62)',
     alignItems: 'center', justifyContent: 'center',
   },
   pipelineCard: {
-    backgroundColor: colors.surface,
-    borderRadius: radius.xl,
-    padding: spacing.xl,
+    backgroundColor: ios.secondarySystemGroupedBackground,
+    borderRadius: 18,
+    paddingHorizontal: 22, paddingVertical: 22,
     width: width * 0.78,
-    gap: spacing.sm,
+    gap: 12,
+  },
+  pipelineHeader: {
+    fontFamily: displayFont,
+    fontSize: 17, fontWeight: '600',
+    color: ios.label, letterSpacing: -0.3,
+    marginBottom: 6,
   },
   pipelineRow: {
-    flexDirection: 'row', alignItems: 'center', gap: spacing.sm,
-    paddingVertical: 4,
+    flexDirection: 'row', alignItems: 'center', gap: 10,
+    paddingVertical: 3,
   },
-  pipelineLabel: { color: colors.textDim, fontSize: font.sm, flex: 1 },
-  pipelineLabelActive: { color: colors.text, fontWeight: '600' },
+  pipelineLabel: {
+    fontSize: 15, color: ios.secondaryLabel, flex: 1, letterSpacing: -0.1,
+  },
+  pipelineLabelActive: { color: ios.label, fontWeight: '500' },
 
-  // Modal
+  // Pre-scan modal
   modalBackdrop: {
-    flex: 1, backgroundColor: 'rgba(0,0,0,0.6)',
-    justifyContent: 'flex-end',
+    flex: 1, backgroundColor: 'rgba(0,0,0,0.55)', justifyContent: 'flex-end',
   },
   modalSheet: {
-    backgroundColor: colors.surface,
-    borderTopLeftRadius: radius.xl,
-    borderTopRightRadius: radius.xl,
-    padding: spacing.lg,
-    paddingBottom: spacing.xxl,
-    gap: spacing.sm,
+    backgroundColor: ios.systemGroupedBackground,
+    borderTopLeftRadius: 16, borderTopRightRadius: 16,
+    paddingTop: 8, paddingHorizontal: 0,
   },
   modalHandle: {
-    width: 40, height: 4, borderRadius: 2,
-    backgroundColor: colors.border,
-    alignSelf: 'center', marginBottom: spacing.sm,
-  },
-  modalTitle: { color: colors.text, fontSize: font.lg, fontWeight: '700' },
-  modalSub: { color: colors.textMuted, fontSize: font.sm, marginBottom: spacing.sm },
-  fieldLabel: { color: colors.textMuted, fontSize: font.xs, fontWeight: '600', textTransform: 'uppercase', letterSpacing: 0.5 },
-  input: {
-    backgroundColor: colors.background,
-    borderRadius: radius.md, borderWidth: 1, borderColor: colors.border,
-    color: colors.text, fontSize: font.md,
-    paddingHorizontal: spacing.md, paddingVertical: spacing.sm,
-    marginBottom: spacing.sm,
-  },
-  breedScroll: { marginBottom: spacing.md },
-  breedRow: { flexDirection: 'row', gap: spacing.sm, paddingRight: spacing.md },
-  breedBtn: {
-    paddingHorizontal: spacing.md, paddingVertical: spacing.xs,
-    borderRadius: radius.full, borderWidth: 1, borderColor: colors.border,
-    backgroundColor: colors.background,
-  },
-  breedBtnActive: { borderColor: colors.primary, backgroundColor: colors.primaryLight },
-  breedLabel: { color: colors.textMuted, fontSize: font.sm },
-  breedLabelActive: { color: colors.primary, fontWeight: '700' },
+    width: 36, height: 5, borderRadius: 3,
+    backgroundColor: ios.opaqueSeparator,
+    alignSelf: 'center', marginBottom: 14,
+  },
+  modalTitle: {
+    fontFamily: displayFont,
+    fontSize: 22, fontWeight: '700',
+    letterSpacing: -0.5, color: ios.label,
+    paddingHorizontal: 20,
+  },
+  modalSub: {
+    fontSize: 13, color: ios.secondaryLabel,
+    marginTop: 4, letterSpacing: -0.05,
+    paddingHorizontal: 20,
+  },
+
+  sectionHeader: {
+    marginTop: 22, marginBottom: 8,
+    paddingHorizontal: 32,
+    fontSize: 13, fontWeight: '400',
+    color: ios.secondaryLabel,
+    textTransform: 'uppercase', letterSpacing: 0.5,
+  },
+  card: {
+    marginHorizontal: 16,
+    backgroundColor: ios.secondarySystemGroupedBackground,
+    borderRadius: 12, overflow: 'hidden',
+  },
+  row: {
+    minHeight: 44,
+    paddingHorizontal: 16, paddingVertical: 11,
+    flexDirection: 'row', alignItems: 'center', gap: 12,
+  },
+  rowLabel: {
+    fontSize: 17, color: ios.label, letterSpacing: -0.3, width: 44,
+  },
+  rowInput: {
+    flex: 1, fontSize: 17, color: ios.label, letterSpacing: -0.3,
+    padding: 0,
+  },
+
+  breedScroll: {
+    flexDirection: 'row', gap: 8,
+    paddingHorizontal: 12, paddingVertical: 12,
+  },
+  breedChip: {
+    paddingHorizontal: 14, paddingVertical: 8,
+    borderRadius: 999,
+    backgroundColor: '#EFEFF4',
+  },
+  breedChipActive: { backgroundColor: ios.accent },
+  breedLabel: {
+    fontSize: 14, color: ios.label, letterSpacing: -0.1,
+  },
+  breedLabelActive: { color: '#FFFFFF', fontWeight: '600' },
+
   confirmBtn: {
-    flexDirection: 'row', alignItems: 'center', justifyContent: 'center',
-    gap: spacing.sm, backgroundColor: colors.primary,
-    borderRadius: radius.md, paddingVertical: spacing.md,
-    marginTop: spacing.sm,
-  },
-  confirmText: { color: '#fff', fontSize: font.md, fontWeight: '700' },
-  cancelBtn: { alignItems: 'center', paddingVertical: spacing.sm },
-  cancelText: { color: colors.textMuted, fontSize: font.md },
+    marginTop: 22, marginHorizontal: 16,
+    backgroundColor: ios.label,
+    borderRadius: 14, paddingVertical: 16,
+    flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 10,
+  },
+  confirmText: {
+    color: '#FFFFFF',
+    fontSize: 17, fontWeight: '600', letterSpacing: -0.3,
+  },
+  cancelBtn: { paddingVertical: 14, alignItems: 'center', marginTop: 4 },
+  cancelText: {
+    color: ios.accent, fontSize: 17, fontWeight: '500', letterSpacing: -0.3,
+  },
 });