diff --git a/meshview/templates/node.html b/meshview/templates/node.html
index 155b6fd..c7031e8 100644
--- a/meshview/templates/node.html
+++ b/meshview/templates/node.html
@@ -143,19 +143,20 @@
 
     <!-- Node Info -->
     <div id="node-info" class="node-info">
-        <div><strong data-translate-lang="node_id">Node ID</strong><strong>:</strong><span id="info-node-id">—</span></div>
-        <div><strong data-translate-lang="long_name">Long Name</strong><strong>:</strong> <span id="info-long-name">—</span></div>
-        <div><strong data-translate-lang="short_name">Short Name</strong><strong>:</strong> <span id="info-short-name">—</span></div>
+        <div><strong data-translate-lang="node_id">Node ID</strong><strong>: </strong><span id="info-node-id">—</span></div>
+        <div><strong data-translate-lang="id">Hex ID</strong><strong>: </strong><span id="info-id">—</span></div>
+        <div><strong data-translate-lang="long_name">Long Name</strong><strong>: </strong> <span id="info-long-name">—</span></div>
+        <div><strong data-translate-lang="short_name">Short Name</strong><strong>: </strong> <span id="info-short-name">—</span></div>
 
-        <div><strong data-translate-lang="hw_model">Hardware Model</strong><strong>:</strong> <span id="info-hw-model">—</span></div>
-        <div><strong data-translate-lang="firmware">Firmware</strong><strong>:</strong> <span id="info-firmware">—</span></div>
-        <div><strong data-translate-lang="role">Role</strong><strong>:</strong> <span id="info-role">—</span></div>
+        <div><strong data-translate-lang="hw_model">Hardware Model</strong><strong>: </strong> <span id="info-hw-model">—</span></div>
+        <div><strong data-translate-lang="firmware">Firmware</strong><strong>: </strong> <span id="info-firmware">—</span></div>
+        <div><strong data-translate-lang="role">Role</strong><strong>: </strong> <span id="info-role">—</span></div>
 
-        <div><strong data-translate-lang="channel">Channel</strong><strong>:</strong> <span id="info-channel">—</span></div>
-        <div><strong data-translate-lang="latitude">Latitude</strong><strong>:</strong> <span id="info-lat">—</span></div>
-        <div><strong data-translate-lang="longitude">Longitude</strong><strong>:</strong> <span id="info-lon">—</span></div>
+        <div><strong data-translate-lang="channel">Channel</strong><strong>: </strong> <span id="info-channel">—</span></div>
+        <div><strong data-translate-lang="latitude">Latitude</strong><strong>: </strong> <span id="info-lat">—</span></div>
+        <div><strong data-translate-lang="longitude">Longitude</strong><strong>: </strong> <span id="info-lon">—</span></div>
 
-        <div><strong data-translate-lang="last_update">Last Update</strong><strong>:</strong> <span id="info-last-update">—</span></div>
+        <div><strong data-translate-lang="last_update">Last Update</strong><strong>: </strong> <span id="info-last-update">—</span></div>
     </div>
 
     <!-- Map. -->
@@ -406,6 +407,7 @@ async function loadNodeInfo(){
             nodeMap[fromNodeId] || fromNodeId;
 
         // Info card
+        document.getElementById("info-id").textContent    = node.id ?? "—";
         document.getElementById("info-node-id").textContent    = node.node_id ?? "—";
         document.getElementById("info-long-name").textContent  = node.long_name ?? "—";
         document.getElementById("info-short-name").textContent = node.short_name ?? "—";
diff --git a/meshview/templates/nodelist.html b/meshview/templates/nodelist.html
index f89849c..4f199f3 100644
--- a/meshview/templates/nodelist.html
+++ b/meshview/templates/nodelist.html
@@ -2,23 +2,32 @@
 
 {% block css %}
 <style>
+    html, body {
+    overflow-x: auto !important;
+}
+
 table {
-    width: 80%;
+    /* FIX: allow table to keep natural width so scrolling works */
+    width: max-content;
+    min-width: 100%;
     border-collapse: collapse;
     margin: 1em auto;
 }
 
-/* Ensure table centered visually */
+/* Desktop scroll wrapper */
 #node-list {
-    display: flex;
-    justify-content: center;
+    width: 100%;
+    overflow-x: auto;     /* allows horizontal scroll */
+    overflow-y: hidden;
+    /* !!! removed display:flex because it prevents scrolling */
 }
 
 #node-list table {
-    margin-left: auto;
-    margin-right: auto;
+    width: max-content;   /* table keeps its natural width */
+    min-width: 100%;      /* won't shrink smaller than viewport */
 }
 
+
 th, td {
     padding: 10px;
     border: 1px solid #333;
@@ -134,16 +143,20 @@ select, .export-btn, .search-box, .clear-btn {
 /* --------------------------------------------- */
 @media (max-width: 768px) {
 
-    /* Hide desktop table */
+    /* Hide desktop view */
     #node-list table {
         display: none;
     }
 
-    /* Show mobile card list */
+    /* Show mobile cards */
     #mobile-node-list {
         display: block !important;
         width: 100%;
         padding: 0 10px;
+
+        /* If you want horizontal swiping, uncomment:
+        overflow-x: auto;
+        white-space: nowrap; */
     }
 
     .node-card {
@@ -177,6 +190,7 @@ select, .export-btn, .search-box, .clear-btn {
         font-size: 1.4em;
     }
 }
+
 </style>
 {% endblock %}