diff --git a/public/index.html b/public/index.html
index 4a2196fe..86e8fa16 100644
--- a/public/index.html
+++ b/public/index.html
@@ -84,7 +84,7 @@
   <script src="hop-resolver.js?v=1774126708"></script>
   <script src="app.js?v=1774126708"></script>
   <script src="home.js?v=1774042199"></script>
-  <script src="packets.js?v=1774330600"></script>
+  <script src="packets.js?v=1774330800"></script>
   <script src="map.js?v=1774126708" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="channels.js?v=1774331200" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="nodes.js?v=1774126708" onerror="console.error('Failed to load:', this.src)"></script>
diff --git a/public/packets.js b/public/packets.js
index c6027cac..9d90c14f 100644
--- a/public/packets.js
+++ b/public/packets.js
@@ -1216,6 +1216,21 @@
       const group = packets.find(p => p.hash === hash);
       if (group && data.observations) {
         group._children = data.observations.map(o => ({...pkt, ...o, _isObservation: true}));
+        // Sort: group by observer, earliest-observer first, then by time within each observer
+        const earliest = {};
+        for (const c of group._children) {
+          const obs = c.observer || '';
+          const t = c.rx_at || c.created_at || '';
+          if (!earliest[obs] || t < earliest[obs]) earliest[obs] = t;
+        }
+        group._children.sort((a, b) => {
+          const oA = a.observer || '', oB = b.observer || '';
+          const eA = earliest[oA] || '', eB = earliest[oB] || '';
+          if (eA !== eB) return eA < eB ? -1 : 1;
+          if (oA !== oB) return oA < oB ? -1 : 1;
+          const tA = a.rx_at || a.created_at || '', tB = b.rx_at || b.created_at || '';
+          return tA < tB ? -1 : tA > tB ? 1 : 0;
+        });
       }
       // Resolve any new hops from children
       const childHops = new Set();