diff --git a/public/index.html b/public/index.html
index cb142a9a..473548b7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -86,7 +86,7 @@
   <script src="hop-display.js?v=1774221736"></script>
   <script src="app.js?v=1774126708"></script>
   <script src="home.js?v=1774042199"></script>
-  <script src="packets.js?v=1774221628"></script>
+  <script src="packets.js?v=1774221842"></script>
   <script src="map.js?v=1774220756" 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=1774221131" onerror="console.error('Failed to load:', this.src)"></script>
diff --git a/public/packets.js b/public/packets.js
index 3eb3f49a..394e31b0 100644
--- a/public/packets.js
+++ b/public/packets.js
@@ -1336,22 +1336,8 @@
       const pathByte = parseInt(buf.slice(2, 4), 16);
       const hashSize = (pathByte >> 6) + 1;
       for (let i = 0; i < pathHops.length; i++) {
-        const hopEntry = hopNameCache[pathHops[i]];
-        const hopName = hopEntry ? (typeof hopEntry === 'string' ? hopEntry : hopEntry.name) : null;
-        const hopPubkey = hopEntry?.pubkey || pathHops[i];
-        const conflicts = hopEntry?.conflicts || [];
-        const distInfo = conflicts.length === 1 && conflicts[0].distKm != null
-          ? ` (${Math.round(conflicts[0].distKm)}km)`
-          : conflicts.length > 1 && conflicts.find(c => c.distKm != null)
-            ? ` (${Math.round(conflicts.find(c => c.distKm != null).distKm)}km)`
-            : '';
-        const conflictInfo = conflicts.length > 1
-          ? ` <span class="hop-warn" title="${conflicts.length} candidates: ${conflicts.map(c => c.name + (c.distKm != null ? ' (' + Math.round(c.distKm) + 'km)' : '') + (c.regional ? '' : ' (global)')).join(', ')}">⚠${conflicts.length}</span>`
-          : '';
-        const nameHtml = hopName
-          ? `<a href="#/nodes/${encodeURIComponent(hopPubkey)}" class="hop-link hop-named" data-hop-link="true">${escapeHtml(hopName)}</a>${distInfo}${conflictInfo}`
-          : '';
-        const label = hopName ? `Hop ${i} — ${nameHtml}` : `Hop ${i}`;
+        const hopHtml = HopDisplay.renderHop(pathHops[i], hopNameCache[pathHops[i]]);
+        const label = `Hop ${i} — ${hopHtml}`;
         rows += fieldRow(off + i * hashSize, label, pathHops[i], '');
       }
       off += hashSize * pathHops.length;