diff --git a/meshview/templates/reach.html b/meshview/templates/reach.html
index 2fd9542..36b53a8 100644
--- a/meshview/templates/reach.html
+++ b/meshview/templates/reach.html
@@ -75,6 +75,21 @@
     font-size: 0.9rem;
 }
 
+.reach-gateway-panels {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 10px;
+    margin-top: 10px;
+}
+
+.reach-gateway-panel {
+    overflow-x: auto;
+}
+
+.reach-gateway-table {
+    min-width: 0;
+}
+
 .reach-table th,
 .reach-table td {
     vertical-align: top;
@@ -116,6 +131,12 @@
 .reach-muted {
     color: rgba(255, 255, 255, 0.62);
 }
+
+@media (max-width: 600px) {
+    .reach-gateway-panels {
+        grid-template-columns: 1fr;
+    }
+}
 {% endblock %}
 
 {% block body %}
@@ -170,22 +191,39 @@
             </div>
         </div>
 
-        <div class="reach-table-wrap">
-            <table class="table table-dark table-sm table-striped reach-table">
-                <thead>
-                    <tr>
-                        <th>Gateway</th>
-                        <th>Heard Packets</th>
-                        <th>Total Packets</th>
-                        <th>Reach</th>
-                    </tr>
-                </thead>
-                <tbody id="reach-packet-body">
-                    <tr>
-                        <td colspan="4" class="reach-muted">Loading packets...</td>
-                    </tr>
-                </tbody>
-            </table>
+        <div class="reach-gateway-panels">
+            <div class="reach-gateway-panel">
+                <table class="table table-dark table-sm table-striped reach-table reach-gateway-table">
+                    <thead>
+                        <tr>
+                            <th>Gateway</th>
+                            <th>Heard</th>
+                            <th>Reach</th>
+                        </tr>
+                    </thead>
+                    <tbody id="reach-packet-body-left">
+                        <tr>
+                            <td colspan="3" class="reach-muted">Loading packets...</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div class="reach-gateway-panel">
+                <table class="table table-dark table-sm table-striped reach-table reach-gateway-table">
+                    <thead>
+                        <tr>
+                            <th>Gateway</th>
+                            <th>Heard</th>
+                            <th>Reach</th>
+                        </tr>
+                    </thead>
+                    <tbody id="reach-packet-body-right">
+                        <tr>
+                            <td colspan="3" class="reach-muted">Loading packets...</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
         </div>
     </section>
 </main>
@@ -258,15 +296,23 @@ async function loadReachReport(nodeId = reachNodeId) {
     reachNodeId = Number(nodeId);
     const packetCountEl = document.getElementById("reach-packet-count");
     const gatewayCountEl = document.getElementById("reach-gateway-count");
-    const bodyEl = document.getElementById("reach-packet-body");
+    const bodyEls = [
+        document.getElementById("reach-packet-body-left"),
+        document.getElementById("reach-packet-body-right"),
+    ];
     const bucketBodyEl = document.getElementById("reach-bucket-body");
     const selectedNodeEl = document.getElementById("reach-node-id");
+    const setGatewayTables = html => {
+        bodyEls.forEach(el => {
+            el.innerHTML = html;
+        });
+    };
 
     selectedNodeEl.textContent = reachNodeId;
     packetCountEl.textContent = "...";
     gatewayCountEl.textContent = "...";
     bucketBodyEl.innerHTML = '<tr><td colspan="2" class="reach-muted">Loading statistics...</td></tr>';
-    bodyEl.innerHTML = '<tr><td colspan="4" class="reach-muted">Loading packets...</td></tr>';
+    setGatewayTables('<tr><td colspan="3" class="reach-muted">Loading packets...</td></tr>');
 
     try {
         const [packetData] = await Promise.all([
@@ -281,7 +327,7 @@ async function loadReachReport(nodeId = reachNodeId) {
         if (packets.length === 0) {
             gatewayCountEl.textContent = "0";
             bucketBodyEl.innerHTML = '<tr><td colspan="2" class="reach-muted">No packets found.</td></tr>';
-            bodyEl.innerHTML = '<tr><td colspan="4" class="reach-muted">No packets found.</td></tr>';
+            setGatewayTables('<tr><td colspan="3" class="reach-muted">No packets found.</td></tr>');
             return;
         }
 
@@ -341,22 +387,26 @@ async function loadReachReport(nodeId = reachNodeId) {
             `;
         }).join("");
 
-        bodyEl.innerHTML = gatewayRows.length
-            ? gatewayRows.map(row => `
+        const renderGatewayRows = rows => rows.length
+            ? rows.map(row => `
                 <tr>
                     <td>${escapeHtml(gatewayLabel(row.nodeId, nodesById))}</td>
                     <td>${row.heardCount}</td>
-                    <td>${packets.length}</td>
                     <td>${row.percent.toFixed(1)}%</td>
                 </tr>
             `).join("")
-            : '<tr><td colspan="4" class="reach-muted">No gateways heard these packets.</td></tr>';
+            : '<tr><td colspan="3" class="reach-muted">No gateways heard these packets.</td></tr>';
+        const splitIndex = Math.ceil(gatewayRows.length / 2);
+        bodyEls[0].innerHTML = renderGatewayRows(gatewayRows.slice(0, splitIndex));
+        bodyEls[1].innerHTML = gatewayRows.length > 1
+            ? renderGatewayRows(gatewayRows.slice(splitIndex))
+            : '<tr><td colspan="3" class="reach-muted">No additional gateways.</td></tr>';
     } catch (err) {
         console.error("Failed to load reach report:", err);
         packetCountEl.textContent = "!";
         gatewayCountEl.textContent = "!";
         bucketBodyEl.innerHTML = '<tr><td colspan="2" class="text-danger">Failed to load statistics.</td></tr>';
-        bodyEl.innerHTML = '<tr><td colspan="4" class="text-danger">Failed to load report.</td></tr>';
+        setGatewayTables('<tr><td colspan="3" class="text-danger">Failed to load report.</td></tr>');
     }
 }
 
@@ -368,8 +418,10 @@ document.addEventListener("DOMContentLoaded", async () => {
         if (!nodeId) {
             document.getElementById("reach-bucket-body").innerHTML =
                 '<tr><td colspan="2" class="text-warning">Enter a valid node ID or select a node.</td></tr>';
-            document.getElementById("reach-packet-body").innerHTML =
-                '<tr><td colspan="4" class="text-warning">Enter a valid node ID or select a node.</td></tr>';
+            document.getElementById("reach-packet-body-left").innerHTML =
+                '<tr><td colspan="3" class="text-warning">Enter a valid node ID or select a node.</td></tr>';
+            document.getElementById("reach-packet-body-right").innerHTML =
+                '<tr><td colspan="3" class="text-warning">Enter a valid node ID or select a node.</td></tr>';
             return;
         }