diff --git a/apps/web/src/views/home.ejs b/apps/web/src/views/home.ejs
index bc549bd..43fe173 100644
--- a/apps/web/src/views/home.ejs
+++ b/apps/web/src/views/home.ejs
@@ -25,8 +25,20 @@
       <% } else { %>
         <% it.monitors.forEach(function(m) {
           const latencies = (m.pings || []).filter(p => p.latency_ms != null);
-          const latencyVals = latencies.map(p => p.latency_ms);
-          const avgLatency = latencyVals.length ? Math.round(latencyVals.reduce((a, b) => a + b, 0) / latencyVals.length) : null;
+          // Pick the region with the lowest avg latency (same logic as sparklineFromPings)
+          const byRegion = {};
+          for (const p of latencies) {
+            const key = p.region || '__none__';
+            if (!byRegion[key]) byRegion[key] = [];
+            byRegion[key].push(p.latency_ms);
+          }
+          let bestRegion = '__none__', bestAvg = Infinity;
+          for (const [region, vals] of Object.entries(byRegion)) {
+            const avg = vals.reduce((a, b) => a + b, 0) / vals.length;
+            if (avg < bestAvg) { bestAvg = avg; bestRegion = region; }
+          }
+          const bestVals = byRegion[bestRegion] || [];
+          const avgLatency = bestVals.length ? bestVals[bestVals.length - 1] : null;
         %>
           <a href="/dashboard/monitors/<%= m.id %>" data-monitor-id="<%= m.id %>" class="block bg-gray-900 hover:bg-gray-800/80 border border-gray-800 rounded-xl p-4 transition-colors group">
             <div class="flex items-center justify-between">
@@ -96,16 +108,22 @@
       sparkData[mid][region] = vals;
     });
 
-    function redrawSparkline(card, monitorId) {
+    function getBestRegion(monitorId) {
       const regions = sparkData[monitorId] || {};
-      // Pick region with lowest average latency (same as SSR)
       let bestRegion = '__none__', bestAvg = Infinity;
       for (const [region, vals] of Object.entries(regions)) {
         if (!vals.length) continue;
         const avg = vals.reduce((a, b) => a + b, 0) / vals.length;
         if (avg < bestAvg) { bestAvg = avg; bestRegion = region; }
       }
-      const vals = regions[bestRegion];
+      const vals = (regions[bestRegion] || []);
+      const latest = vals.length ? vals[vals.length - 1] : null;
+      return { region: bestRegion, latest };
+    }
+
+    function redrawSparkline(card, monitorId) {
+      const { region: bestRegion } = getBestRegion(monitorId);
+      const vals = (sparkData[monitorId] || {})[bestRegion];
       if (!vals || !vals.length) return;
       const color = REGION_COLORS[bestRegion] || '#60a5fa';
       const W = 120, H = 32;
@@ -129,8 +147,7 @@
       const dot = card.querySelector('.status-dot');
       if (dot) dot.className = `status-dot w-2.5 h-2.5 rounded-full ${ping.up ? 'bg-green-500' : 'bg-red-500'}`;
 
-      // Last latency + last ping time
-      if (ping.latency_ms != null) card.querySelector('.stat-latency').textContent = ping.latency_ms + 'ms';
+      // Last ping time
       card.querySelector('.stat-last').innerHTML = timeAgo(ping.checked_at);
 
       // Update sparkline data per region, then redraw picking best region
@@ -142,6 +159,9 @@
         sparkData[mid][region].push(ping.latency_ms);
         if (sparkData[mid][region].length > 20) sparkData[mid][region].shift();
         redrawSparkline(card, mid);
+        // Show best region's latest latency
+        const { latest } = getBestRegion(mid);
+        if (latest != null) card.querySelector('.stat-latency').textContent = latest + 'ms';
       }
     });
   </script>