diff --git a/layouts/custom/current_location.html b/layouts/custom/current_location.html
index 1aaa4ff..16c1aad 100644
--- a/layouts/custom/current_location.html
+++ b/layouts/custom/current_location.html
@@ -2,19 +2,39 @@
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin=""/>
   <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
   <style>
-    #map { height: 480px; }
     #location-name { min-height: 1.5em; }
-    #weather { margin-top: 1.5rem; }
-    #weather table { border-collapse: collapse; }
-    #weather td { padding: 0.2rem 0.8rem 0.2rem 0; }
-    #weather td:first-child { color: #888; white-space: nowrap; }
+    .container { max-width: 1200px; width: 95%; }
+    #page-grid {
+      display: grid;
+      grid-template-columns: 3fr 2fr;
+      gap: 1rem;
+      align-items: start;
+    }
+    @media (max-width: 700px) {
+      #page-grid { grid-template-columns: 1fr; }
+    }
+    #map { height: 520px; }
+    #weather-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 0.4rem 1rem;
+    }
+    .wx-card {
+      border-left: 2px solid #ddd;
+      padding: 0.2rem 0 0.2rem 0.5rem;
+    }
+    .wx-label { font-size: 0.72em; color: #888; margin: 0; line-height: 1.2; }
+    .wx-value { font-size: 1.05em; margin: 0; line-height: 1.3; }
+    #weather-updated { font-size: 0.75em; color: #888; margin-bottom: 0.6rem; }
   </style>
 
   <div class="container" role="main">
     <h2 id="location-name">Fetching location&hellip;</h2>
-    <div id="map"></div>
 
-    <div id="weather"></div>
+    <div id="page-grid">
+      <div id="map"></div>
+      <div id="weather"></div>
+    </div>
 
     <script>
       var map = L.map('map').setView([0, 0], 2);
@@ -52,29 +72,35 @@
       fetch('https://jellybee.bison-lizard.ts.net/weather')
         .then(function(r) { if (!r.ok) throw new Error(r.status); return r.json(); })
         .then(function(w) {
-          var rows = [];
-          function row(label, val, unit) {
-            if (val === undefined || val === null) return;
-            rows.push('<tr><td>' + label + '</td><td>' + val + (unit ? ' ' + unit : '') + '</td></tr>');
-          }
-          row('Temperature', w.tempf !== undefined ? Math.round(w.tempf * 10) / 10 : undefined, '°F');
-          row('Feels like', w.feelsLike !== undefined ? Math.round(w.feelsLike * 10) / 10 : undefined, '°F');
-          row('Humidity', w.humidity !== undefined ? Math.round(w.humidity) : undefined, '%');
-          row('Dew point', w.dewPoint !== undefined ? Math.round(w.dewPoint * 10) / 10 : undefined, '°F');
-          row('Wind', w.windspeedmph !== undefined ? Math.round(w.windspeedmph * 10) / 10 : undefined, 'mph');
-          row('Wind gust', w.windgustmph !== undefined ? Math.round(w.windgustmph * 10) / 10 : undefined, 'mph');
-          row('UV index', w.uv !== undefined ? Math.round(w.uv) : undefined, '');
-          row('Solar radiation', w.solarradiation !== undefined ? Math.round(w.solarradiation) : undefined, 'W/m²');
-          row('Rain (hourly)', w.hourlyrainin, 'in');
-          row('Rain (daily)', w.dailyrainin, 'in');
-          row('Pressure (rel)', w.baromrelin, 'inHg');
-          row('Indoor temp', w.tempinf !== undefined ? Math.round(w.tempinf * 10) / 10 : undefined, '°F');
-          row('Indoor humidity', w.humidityin !== undefined ? Math.round(w.humidityin) : undefined, '%');
-          if (rows.length === 0) return;
+          function fmt1(v) { return v !== undefined && v !== null ? Math.round(v * 10) / 10 : null; }
+          function fmt0(v) { return v !== undefined && v !== null ? Math.round(v) : null; }
+          var cards = [
+            { label: 'Temperature',     value: fmt1(w.tempf),          unit: '°F' },
+            { label: 'Feels like',      value: fmt1(w.feelsLike),      unit: '°F' },
+            { label: 'Humidity',        value: fmt0(w.humidity),       unit: '%' },
+            { label: 'Dew point',       value: fmt1(w.dewPoint),       unit: '°F' },
+            { label: 'Wind speed',      value: fmt1(w.windspeedmph),   unit: 'mph' },
+            { label: 'Wind gust',       value: fmt1(w.windgustmph),    unit: 'mph' },
+            { label: 'Pressure',        value: fmt1(w.baromrelin),     unit: 'inHg' },
+            { label: 'UV index',        value: fmt0(w.uv),             unit: '' },
+            { label: 'Solar',           value: fmt0(w.solarradiation), unit: 'W/m²' },
+            { label: 'Rain (hourly)',   value: w.hourlyrainin,         unit: 'in' },
+            { label: 'Rain (daily)',    value: w.dailyrainin,          unit: 'in' },
+            { label: 'Indoor temp',     value: fmt1(w.tempinf),        unit: '°F' },
+            { label: 'Indoor humidity', value: fmt0(w.humidityin),     unit: '%' },
+          ].filter(function(c) { return c.value !== null && c.value !== undefined; });
+
+          if (cards.length === 0) return;
+
           var updated = w.lastUpdated ? new Date(w.lastUpdated).toLocaleTimeString() : '';
-          document.getElementById('weather').innerHTML =
-            '<h3>Local Weather' + (updated ? ' <small style="font-weight:normal;font-size:0.7em;color:#888">updated ' + updated + '</small>' : '') + '</h3>' +
-            '<table>' + rows.join('') + '</table>';
+          var html = '<h3 style="margin-bottom:0.3rem">Local Weather</h3>';
+          if (updated) html += '<div id="weather-updated">updated ' + updated + '</div>';
+          html += '<div id="weather-grid">';
+          cards.forEach(function(c) {
+            html += '<div class="wx-card"><p class="wx-label">' + c.label + '</p><p class="wx-value">' + c.value + (c.unit ? ' ' + c.unit : '') + '</p></div>';
+          });
+          html += '</div>';
+          document.getElementById('weather').innerHTML = html;
         })
         .catch(function() {});
     </script>