diff --git a/assets/js/propagation_map_hook.js b/assets/js/propagation_map_hook.js
index 3ce90cce..433a43ef 100644
--- a/assets/js/propagation_map_hook.js
+++ b/assets/js/propagation_map_hook.js
@@ -631,40 +631,39 @@ export const PropagationMap = {
     }
 
     const now = new Date()
-    const items = this.timelineData.map(t => {
+    const items = this.timelineData.map((t, idx) => {
       const dt = new Date(t.time)
       const isSelected = t.time === this.selectedTime
-      const isPast = dt < now
-      const isNow = Math.abs(dt - now) < 3600000 // within 1 hour
+      const isPast = dt < new Date(now - 1800000) // 30min grace
       const offsetH = Math.round((dt - now) / 3600000)
-      const label = isNow ? "Now" : (offsetH > 0 ? `+${offsetH}h` : `${offsetH}h`)
-      return { ...t, dt, isSelected, isPast, isNow, label, offsetH }
+      return { ...t, dt, isSelected, isPast, offsetH, idx }
     })
 
-    // Find trend: compare first (now) vs a few hours ahead
-    const nowItem = items.find(i => i.isNow) || items[0]
-    const futureItem = items.find(i => i.offsetH >= 3) || items[items.length - 1]
+    // "Now" = the item closest to current time
+    const closestIdx = items.reduce((best, item, i) =>
+      Math.abs(item.dt - now) < Math.abs(items[best].dt - now) ? i : best, 0)
 
-    let trendHint = ""
-    if (nowItem && futureItem && this.gridLookup) {
-      // Sample center of viewport
-      const center = this.map.getCenter()
-      const nowScore = this.lookupPoint(center.lat, center.lng)
-      // Can't look up future scores client-side, so just show the time range
-      trendHint = ""
-    }
+    items.forEach((t, i) => {
+      if (i === closestIdx) {
+        t.label = "Now"
+      } else {
+        const diff = t.offsetH
+        t.label = diff > 0 ? `+${diff}h` : `${diff}h`
+      }
+    })
 
     const buttons = items.map(t => {
       const bg = t.isSelected ? "#00ffa3" : (t.isPast ? "rgba(255,255,255,0.08)" : "rgba(255,255,255,0.15)")
       const fg = t.isSelected ? "#000" : (t.isPast ? "rgba(255,255,255,0.4)" : "#fff")
       const border = t.isSelected ? "2px solid #00ffa3" : "1px solid rgba(255,255,255,0.2)"
-      const weight = t.isSelected || t.isNow ? "700" : "400"
+      const weight = t.isSelected ? "700" : "400"
+      const utcLabel = `${t.dt.getUTCHours().toString().padStart(2, "0")}:00`
       return `<button data-time="${t.time}" style="
         padding:4px 8px;font-size:11px;font-weight:${weight};
         background:${bg};color:${fg};border:${border};border-radius:6px;
         cursor:pointer;white-space:nowrap;min-width:38px;
         transition:background 0.15s;
-      ">${t.label}<br><span style="font-size:9px;opacity:0.7;">${t.dt.getUTCHours().toString().padStart(2, "0")}:00</span></button>`
+      ">${t.label}<br><span style="font-size:9px;opacity:0.7;">${utcLabel}</span></button>`
     }).join("")
 
     this.timelineEl.style.display = "block"