diff --git a/public/hop-display.js b/public/hop-display.js
index 458f55cf..fc93a018 100644
--- a/public/hop-display.js
+++ b/public/hop-display.js
@@ -26,7 +26,7 @@ window.HopDisplay = (function() {
     const totalRegional = entry.totalRegional || 0;
     const globalFallback = entry.globalFallback || false;
     const unreliable = entry.unreliable || false;
-    const display = name ? escapeHtml(opts.truncate ? name.slice(0, opts.truncate) : name) : h;
+    const display = opts.hexMode ? h : (name ? escapeHtml(opts.truncate ? name.slice(0, opts.truncate) : name) : h);
 
     // Build tooltip
     let title = h;
diff --git a/public/index.html b/public/index.html
index 334ed82a..7071a4c9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -83,10 +83,10 @@
   <script src="roles.js?v=1774325000"></script>
   <script src="region-filter.js?v=1774325000"></script>
   <script src="hop-resolver.js?v=1774221120"></script>
-  <script src="hop-display.js?v=1774221120"></script>
+  <script src="hop-display.js?v=1774221628"></script>
   <script src="app.js?v=1774126708"></script>
   <script src="home.js?v=1774042199"></script>
-  <script src="packets.js?v=1774221131"></script>
+  <script src="packets.js?v=1774221628"></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 ee5f260e..3eb3f49a 100644
--- a/public/packets.js
+++ b/public/packets.js
@@ -130,10 +130,7 @@
   }
 
   function renderHop(h) {
-    if (showHexHashes) {
-      return `<span class="hop">${escapeHtml(h)}</span>`;
-    }
-    return HopDisplay.renderHop(h, hopNameCache[h]);
+    return HopDisplay.renderHop(h, hopNameCache[h], { hexMode: showHexHashes });
   }
 
   function renderPath(hops) {