diff --git a/nginx/vue/src/views/home/Gym2.vue b/nginx/vue/src/views/home/Gym2.vue
new file mode 100644
index 0000000..df9a0a2
--- /dev/null
+++ b/nginx/vue/src/views/home/Gym2.vue
@@ -0,0 +1,267 @@
+<script setup>
+import { ref, computed, onMounted } from "vue";
+import axios from "axios";
+import Header from "@/components/text/Header.vue";
+
+const rows = ref([]);
+const loading = ref(true);
+const error = ref(null);
+const metric = ref("distance");
+const hovered = ref(null);
+
+const METRICS = [
+    { key: "distance", label: "Distance (m)", color: "#55ffbb" },
+    { key: "timePer500m", label: "Pace /500m", color: "#ff579a" },
+    { key: "calories", label: "Calories", color: "#62ff57" },
+];
+
+onMounted(async () => {
+    try {
+        const res = await axios.get("https://www.adam-french.co.uk/api/rowing");
+        rows.value = res.data.slice().reverse(); // API returns DESC, reverse to chronological
+    } catch (e) {
+        error.value = e.message;
+    } finally {
+        loading.value = false;
+    }
+});
+
+const activeMetric = computed(() => METRICS.find((m) => m.key === metric.value));
+
+// SVG layout constants
+const W = 290;
+const H = 120;
+const PL = 38; // padding left
+const PT = 8;  // padding top
+const PR = 8;  // padding right
+const PB = 22; // padding bottom
+const PLOT_W = W - PL - PR;
+const PLOT_H = H - PT - PB;
+
+const chartData = computed(() =>
+    rows.value.map((r) => ({
+        date: new Date(r.date),
+        value: r[metric.value],
+        raw: r,
+    }))
+);
+
+const minVal = computed(() => Math.min(...chartData.value.map((d) => d.value)));
+const maxVal = computed(() => Math.max(...chartData.value.map((d) => d.value)));
+
+const points = computed(() => {
+    const data = chartData.value;
+    const n = data.length;
+    if (!n) return [];
+    const min = minVal.value;
+    const range = maxVal.value - min || 1;
+    return data.map((d, i) => ({
+        x: PL + (n <= 1 ? PLOT_W / 2 : (i / (n - 1)) * PLOT_W),
+        y: PT + PLOT_H - ((d.value - min) / range) * PLOT_H,
+        date: d.date,
+        value: d.value,
+        raw: d.raw,
+    }));
+});
+
+const polyline = computed(() => points.value.map((p) => `${p.x},${p.y}`).join(" "));
+
+const xLabels = computed(() => {
+    const data = chartData.value;
+    const pts = points.value;
+    if (!data.length) return [];
+    const indices = new Set([0, Math.floor((data.length - 1) / 2), data.length - 1]);
+    return [...indices].map((i) => ({
+        x: pts[i].x,
+        label: data[i].date.toLocaleDateString("en-GB", { month: "short", day: "numeric" }),
+    }));
+});
+
+const yLabels = computed(() => {
+    const min = minVal.value;
+    const max = maxVal.value;
+    return [0, 0.5, 1].map((t) => ({
+        y: PT + PLOT_H - t * PLOT_H,
+        label: Math.round(min + t * (max - min)),
+    }));
+});
+
+function formatTime(secs) {
+    const m = Math.floor(secs / 60);
+    const s = Math.round(secs % 60);
+    return `${m}:${String(s).padStart(2, "0")}`;
+}
+
+function formatValue(key, val) {
+    if (key === "timePer500m") return formatTime(val) + " /500m";
+    if (key === "distance") return val + " m";
+    if (key === "calories") return Math.round(val) + " kcal";
+    return val;
+}
+</script>
+
+<template>
+    <div class="flex flex-col h-full overflow-hidden">
+        <Header>Rowing</Header>
+
+        <div v-if="loading" class="flex-1 flex items-center justify-center">
+            <p>Loading...</p>
+        </div>
+        <div v-else-if="error" class="flex-1 flex items-center justify-center">
+            <p class="text-tertiary text-xs">{{ error }}</p>
+        </div>
+        <div v-else class="flex flex-col flex-1 px-1 pb-1 gap-1 overflow-hidden">
+            <!-- Metric tabs -->
+            <div class="flex gap-1 pt-1">
+                <button
+                    v-for="m in METRICS"
+                    :key="m.key"
+                    class="metric-btn text-xs px-2 py-0.5 font-heading border"
+                    :style="{
+                        borderColor: m.color,
+                        color: metric === m.key ? '#1b110e' : m.color,
+                        backgroundColor: metric === m.key ? m.color : 'transparent',
+                    }"
+                    @click="metric = m.key"
+                >
+                    {{ m.label }}
+                </button>
+            </div>
+
+            <!-- SVG Chart -->
+            <div class="flex-1 relative">
+                <svg
+                    :viewBox="`0 0 ${W} ${H}`"
+                    width="100%"
+                    height="100%"
+                    preserveAspectRatio="none"
+                    class="overflow-visible"
+                >
+                    <!-- Grid lines -->
+                    <line
+                        v-for="yl in yLabels"
+                        :key="yl.y"
+                        :x1="PL"
+                        :y1="yl.y"
+                        :x2="W - PR"
+                        :y2="yl.y"
+                        stroke="var(--quaternary)"
+                        stroke-width="0.5"
+                    />
+
+                    <!-- Area fill -->
+                    <polygon
+                        v-if="points.length"
+                        :points="`${PL},${PT + PLOT_H} ${polyline} ${W - PR},${PT + PLOT_H}`"
+                        :fill="activeMetric.color"
+                        fill-opacity="0.08"
+                    />
+
+                    <!-- Line -->
+                    <polyline
+                        v-if="points.length"
+                        :points="polyline"
+                        :stroke="activeMetric.color"
+                        stroke-width="1.5"
+                        fill="none"
+                        stroke-linejoin="round"
+                        stroke-linecap="round"
+                    />
+
+                    <!-- Data points -->
+                    <circle
+                        v-for="(p, i) in points"
+                        :key="i"
+                        :cx="p.x"
+                        :cy="p.y"
+                        :r="hovered === i ? 4 : 2"
+                        :fill="activeMetric.color"
+                        style="cursor: pointer"
+                        @mouseenter="hovered = i"
+                        @mouseleave="hovered = null"
+                    />
+
+                    <!-- Y axis labels -->
+                    <text
+                        v-for="yl in yLabels"
+                        :key="`y${yl.y}`"
+                        :x="PL - 3"
+                        :y="yl.y + 3"
+                        text-anchor="end"
+                        font-size="6"
+                        fill="var(--primary)"
+                        font-family="var(--font_heading)"
+                    >{{ yl.label }}</text>
+
+                    <!-- X axis labels -->
+                    <text
+                        v-for="xl in xLabels"
+                        :key="`x${xl.x}`"
+                        :x="xl.x"
+                        :y="H - 4"
+                        text-anchor="middle"
+                        font-size="6"
+                        fill="var(--primary)"
+                        font-family="var(--font_heading)"
+                    >{{ xl.label }}</text>
+
+                    <!-- Axes -->
+                    <line :x1="PL" :y1="PT" :x2="PL" :y2="PT + PLOT_H" stroke="var(--primary)" stroke-width="0.5" />
+                    <line :x1="PL" :y1="PT + PLOT_H" :x2="W - PR" :y2="PT + PLOT_H" stroke="var(--primary)" stroke-width="0.5" />
+
+                    <!-- Tooltip -->
+                    <g v-if="hovered !== null && points[hovered]">
+                        <rect
+                            :x="Math.min(points[hovered].x + 4, W - 60)"
+                            :y="points[hovered].y - 16"
+                            width="58"
+                            height="20"
+                            fill="var(--bg_primary)"
+                            :stroke="activeMetric.color"
+                            stroke-width="0.5"
+                            rx="1"
+                        />
+                        <text
+                            :x="Math.min(points[hovered].x + 7, W - 57)"
+                            :y="points[hovered].y - 7"
+                            font-size="5.5"
+                            fill="var(--secondary)"
+                            font-family="var(--font_heading)"
+                        >{{ points[hovered].date.toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "2-digit" }) }}</text>
+                        <text
+                            :x="Math.min(points[hovered].x + 7, W - 57)"
+                            :y="points[hovered].y + 1"
+                            font-size="6"
+                            :fill="activeMetric.color"
+                            font-family="var(--font_heading)"
+                        >{{ formatValue(metric, points[hovered].value) }}</text>
+                    </g>
+                </svg>
+            </div>
+
+            <!-- Summary stats -->
+            <div class="flex justify-between text-xs border-t border-quaternary pt-1">
+                <div class="flex flex-col items-center">
+                    <span class="text-primary font-heading">{{ rows.length }}</span>
+                    <span class="text-quaternary" style="font-size: 0.6rem">sessions</span>
+                </div>
+                <div class="flex flex-col items-center">
+                    <span class="text-primary font-heading">{{ rows.reduce((s, r) => s + r.distance, 0).toLocaleString() }}m</span>
+                    <span class="text-quaternary" style="font-size: 0.6rem">total dist</span>
+                </div>
+                <div class="flex flex-col items-center">
+                    <span class="text-primary font-heading">{{ formatTime(rows.reduce((s, r) => s + r.timePer500m, 0) / (rows.length || 1)) }}</span>
+                    <span class="text-quaternary" style="font-size: 0.6rem">avg pace</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.metric-btn {
+    cursor: pointer;
+    transition: background-color 0.15s, color 0.15s;
+    letter-spacing: 0.03em;
+}
+</style>
diff --git a/nginx/vue/src/views/home/Home.vue b/nginx/vue/src/views/home/Home.vue
index 0e7bebb..2ada004 100644
--- a/nginx/vue/src/views/home/Home.vue
+++ b/nginx/vue/src/views/home/Home.vue
@@ -17,7 +17,8 @@ import Links from "./Links.vue";
 import Feed from "./Feed.vue";
 import Collage from "./Collage.vue";
 import Favorites from "./Favorites.vue";
-import Gym from "./Gym.vue";
+// import Gym from "./Gym.vue";
+import Gym2 from "./Gym2.vue";
 import Consumption from "./Consumption.vue";
 </script>
 
@@ -47,7 +48,8 @@ import Consumption from "./Consumption.vue";
                 <Collage class="collage" />
                 <Consumption class="consumption" />
                 <Favorites class="favorites" />
-                <Gym class="gym" />
+                <!-- <Gym class="gym" /> -->
+                <Gym2 class="gym" />
             </div>
             <div
                 class="sidebar place-content-between flex-1 flex flex-col m-10 w-60"