diff --git a/templates/about.html b/templates/about.html
index 8923dd2..8ff4aff 100644
--- a/templates/about.html
+++ b/templates/about.html
@@ -67,7 +67,7 @@
     <p>This software is dedicated to the memory of Tom G1PJB, SK, a friend and colleague who sadly passed away around the time I started writing it in Autumn 2025. I was looking forward to showing it to you when it was done.</p>
 </div>
 
-<script src="/js/common.js?v=1774694366"></script>
+<script src="/js/common.js?v=1774695038"></script>
 <script>$(document).ready(function() { $("#nav-link-about").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}
\ No newline at end of file
diff --git a/templates/add_spot.html b/templates/add_spot.html
index 5cf875b..0a65c2d 100644
--- a/templates/add_spot.html
+++ b/templates/add_spot.html
@@ -69,8 +69,8 @@
 
 </div>
 
-<script src="/js/common.js?v=1774694366"></script>
-<script src="/js/add-spot.js?v=1774694366"></script>
+<script src="/js/common.js?v=1774695038"></script>
+<script src="/js/add-spot.js?v=1774695038"></script>
 <script>$(document).ready(function() { $("#nav-link-add-spot").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}
\ No newline at end of file
diff --git a/templates/alerts.html b/templates/alerts.html
index ba3a25d..f5caee3 100644
--- a/templates/alerts.html
+++ b/templates/alerts.html
@@ -50,14 +50,18 @@
         </div>
     </div>
 
+    <div id="conditions-area" class="appearing-panel card mb-3">
+        {% module Template("widgets/conditions-area-header.html", web_ui_options=web_ui_options) %}
+    </div>
+
     <div id="table-container">
         <table id="table" class="table"><thead><tr class="table-primary"></tr></thead><tbody></tbody></table>
     </div>
 
 </div>
 
-<script src="/js/common.js?v=1774694367"></script>
-<script src="/js/alerts.js?v=1774694367"></script>
+<script src="/js/common.js?v=1774695038"></script>
+<script src="/js/alerts.js?v=1774695038"></script>
 <script>$(document).ready(function() { $("#nav-link-alerts").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}
\ No newline at end of file
diff --git a/templates/bands.html b/templates/bands.html
index 4ee4211..1c9e7f0 100644
--- a/templates/bands.html
+++ b/templates/bands.html
@@ -55,6 +55,10 @@
         </div>
     </div>
 
+    <div id="conditions-area" class="appearing-panel card mb-3">
+        {% module Template("widgets/conditions-area-header.html", web_ui_options=web_ui_options) %}
+    </div>
+
     <div id="bands-container"></div>
 
 </div>
@@ -62,9 +66,9 @@
 <script>
     let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
 </script>
-<script src="/js/common.js?v=1774694366"></script>
-<script src="/js/spotsbandsandmap.js?v=1774694366"></script>
-<script src="/js/bands.js?v=1774694366"></script>
+<script src="/js/common.js?v=1774695038"></script>
+<script src="/js/spotsbandsandmap.js?v=1774695038"></script>
+<script src="/js/bands.js?v=1774695038"></script>
 <script>$(document).ready(function() { $("#nav-link-bands").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index fb06721..eb96968 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -46,10 +46,10 @@
             crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/tinycolor2@1.6.0/cjs/tinycolor.min.js"></script>
 
-    <script src="https://misc.ianrenton.com/jsutils/utils.js?v=1774694366"></script>
-    <script src="https://misc.ianrenton.com/jsutils/storage.js?v=1774694366"></script>
-    <script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1774694366"></script>
-    <script src="https://misc.ianrenton.com/jsutils/geo.js?v=1774694366"></script>
+    <script src="https://misc.ianrenton.com/jsutils/utils.js?v=1774695038"></script>
+    <script src="https://misc.ianrenton.com/jsutils/storage.js?v=1774695038"></script>
+    <script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1774695038"></script>
+    <script src="https://misc.ianrenton.com/jsutils/geo.js?v=1774695038"></script>
 
 </head>
 <body>
diff --git a/templates/map.html b/templates/map.html
index ccffb1f..6849c4c 100644
--- a/templates/map.html
+++ b/templates/map.html
@@ -56,6 +56,10 @@
                 </div>
             </div>
         </div>
+
+        <div id="conditions-area" class="appearing-panel card mb-3">
+            {% module Template("widgets/conditions-area-header.html", web_ui_options=web_ui_options) %}
+        </div>
     </div>
 </div>
 
@@ -70,9 +74,9 @@
 <script>
     let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
 </script>
-<script src="/js/common.js?v=1774694367"></script>
-<script src="/js/spotsbandsandmap.js?v=1774694367"></script>
-<script src="/js/map.js?v=1774694367"></script>
+<script src="/js/common.js?v=1774695038"></script>
+<script src="/js/spotsbandsandmap.js?v=1774695038"></script>
+<script src="/js/map.js?v=1774695038"></script>
 <script>$(document).ready(function() { $("#nav-link-map").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}
\ No newline at end of file
diff --git a/templates/spots.html b/templates/spots.html
index d198b5b..cbccc69 100644
--- a/templates/spots.html
+++ b/templates/spots.html
@@ -78,6 +78,10 @@
         </div>
     </div>
 
+    <div id="conditions-area" class="appearing-panel card mb-3">
+        {% module Template("widgets/conditions-area-header.html", web_ui_options=web_ui_options) %}
+    </div>
+
     <div id="table-container">
         <table id="table" class="table"><thead><tr class="table-primary"></tr></thead><tbody></tbody></table>
     </div>
@@ -87,9 +91,9 @@
 <script>
     let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
 </script>
-<script src="/js/common.js?v=1774694366"></script>
-<script src="/js/spotsbandsandmap.js?v=1774694366"></script>
-<script src="/js/spots.js?v=1774694366"></script>
+<script src="/js/common.js?v=1774695038"></script>
+<script src="/js/spotsbandsandmap.js?v=1774695038"></script>
+<script src="/js/spots.js?v=1774695038"></script>
 <script>$(document).ready(function() { $("#nav-link-spots").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}
\ No newline at end of file
diff --git a/templates/status.html b/templates/status.html
index 75c19d2..b9bc25c 100644
--- a/templates/status.html
+++ b/templates/status.html
@@ -3,8 +3,8 @@
 
 <div id="status-container" class="row row-cols-1 row-cols-md-4 g-4 mt-4"></div>
 
-<script src="/js/common.js?v=1774694366"></script>
-<script src="/js/status.js?v=1774694366"></script>
+<script src="/js/common.js?v=1774695038"></script>
+<script src="/js/status.js?v=1774695038"></script>
 <script>$(document).ready(function() { $("#nav-link-status").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}
\ No newline at end of file
diff --git a/templates/widgets/conditions-area-header.html b/templates/widgets/conditions-area-header.html
new file mode 100644
index 0000000..942413e
--- /dev/null
+++ b/templates/widgets/conditions-area-header.html
@@ -0,0 +1,10 @@
+<div class="card-header">
+    <div class="row">
+        <div class="col-auto me-auto">
+            Conditions
+        </div>
+        <div class="col-auto d-inline-flex">
+            <button id="close-conditions-button" type="button" class="btn-close btn-close-white" aria-label="Close" onclick="closeConditionsPanel();"></button>
+        </div>
+    </div>
+</div>
diff --git a/webassets/css/style.css b/webassets/css/style.css
index da7d1f8..b9cd5b6 100644
--- a/webassets/css/style.css
+++ b/webassets/css/style.css
@@ -206,6 +206,13 @@ tr.new td {
 }
 
 
+/* TABLE */
+#table-container {
+    border-radius: 3px;
+    overflow: hidden;
+}
+
+
 /* MAP */
 div#map {
     width: auto;
diff --git a/webassets/js/alerts.js b/webassets/js/alerts.js
index 646e4c0..b32ae55 100644
--- a/webassets/js/alerts.js
+++ b/webassets/js/alerts.js
@@ -306,33 +306,6 @@ function filtersUpdated() {
     saveSettings();
 }
 
-// React to toggling/closing panels
-function toggleFiltersPanel() {
-    // If we are going to display the filters panel, hide the display panel
-    if (!$("#filters-area").is(":visible") && $("#display-area").is(":visible")) {
-        $("#display-area").hide();
-        $("#display-button").button("toggle");
-    }
-    $("#filters-area").toggle();
-}
-function closeFiltersPanel() {
-    $("#filters-button").button("toggle");
-    $("#filters-area").hide();
-}
-
-function toggleDisplayPanel() {
-    // If we are going to display status, load the data for the status panel, and hide the filters panel
-    if (!$("#display-area").is(":visible") && $("#filters-area").is(":visible")) {
-        $("#filters-area").hide();
-        $("#filters-button").button("toggle");
-    }
-    $("#display-area").toggle();
-}
-function closeDisplayPanel() {
-    $("#display-button").button("toggle");
-    $("#display-area").hide();
-}
-
 // Startup
 $(document).ready(function() {
     // Call loadOptions(), this will then trigger loading alerts and setting up timers.
diff --git a/webassets/js/bands.js b/webassets/js/bands.js
index 67707d7..9c227df 100644
--- a/webassets/js/bands.js
+++ b/webassets/js/bands.js
@@ -265,33 +265,6 @@ function displayUpdated() {
     saveSettings();
 }
 
-// React to toggling/closing panels
-function toggleFiltersPanel() {
-    // If we are going to show the filters panel, hide the display panel
-    if (!$("#filters-area").is(":visible") && $("#display-area").is(":visible")) {
-        $("#display-area").hide();
-        $("#display-button").button("toggle");
-    }
-    $("#filters-area").toggle();
-}
-function closeFiltersPanel() {
-    $("#filters-button").button("toggle");
-    $("#filters-area").hide();
-}
-
-function toggleDisplayPanel() {
-    // If we are going to show the display panel, hide the filters panel
-    if (!$("#display-area").is(":visible") && $("#filters-area").is(":visible")) {
-        $("#filters-area").hide();
-        $("#filters-button").button("toggle");
-    }
-    $("#display-area").toggle();
-}
-function closeDisplayPanel() {
-    $("#display-button").button("toggle");
-    $("#display-area").hide();
-}
-
 // Startup
 $(document).ready(function() {
     // Call loadOptions(), this will then trigger loading spots and setting up timers.
diff --git a/webassets/js/common.js b/webassets/js/common.js
index 6906f26..d3b3f4d 100644
--- a/webassets/js/common.js
+++ b/webassets/js/common.js
@@ -183,6 +183,44 @@ function listenForOSThemeChange() {
     });
 }
 
+// Panel toggle functions.
+// PANELS is the single registry of all collapsible panels. To add a new panel, add an entry here
+// and provide named wrappers below. The toggle logic will automatically handle hiding other panels.
+const PANELS = [
+    { area: "#filters-area",    button: "#filters-button" },
+    { area: "#display-area",    button: "#display-button" },
+    { area: "#conditions-area", button: "#conditions-button" },
+];
+
+// Toggle a panel open or closed. If opening, all other visible panels are closed first.
+// areaId is the jQuery selector for the panel's content area, e.g. "#filters-area".
+function togglePanel(areaId) {
+    if (!$(areaId).is(":visible")) {
+        PANELS.forEach(p => {
+            if (p.area !== areaId && $(p.area).is(":visible")) {
+                $(p.area).hide();
+                $(p.button).button("toggle");
+            }
+        });
+    }
+    $(areaId).toggle();
+}
+
+// Close a panel and deactivate its toggle button.
+function closePanel(areaId) {
+    const panel = PANELS.find(p => p.area === areaId);
+    if (panel) { $(panel.button).button("toggle"); }
+    $(areaId).hide();
+}
+
+function toggleFiltersPanel()    { togglePanel("#filters-area"); }
+function closeFiltersPanel()     { closePanel("#filters-area"); }
+function toggleDisplayPanel()    { togglePanel("#display-area"); }
+function closeDisplayPanel()     { closePanel("#display-area"); }
+function toggleConditionsPanel() { togglePanel("#conditions-area"); }
+function closeConditionsPanel()  { closePanel("#conditions-area"); }
+
+
 // Startup
 $(document).ready(function() {
     usePreferredTheme();
diff --git a/webassets/js/map.js b/webassets/js/map.js
index d4c8ce8..c09cc82 100644
--- a/webassets/js/map.js
+++ b/webassets/js/map.js
@@ -196,33 +196,6 @@ function displayUpdated() {
     saveSettings();
 }
 
-// React to toggling/closing panels
-function toggleFiltersPanel() {
-    // If we are going to show the filters panel, hide the display panel
-    if (!$("#filters-area").is(":visible") && $("#display-area").is(":visible")) {
-        $("#display-area").hide();
-        $("#display-button").button("toggle");
-    }
-    $("#filters-area").toggle();
-}
-function closeFiltersPanel() {
-    $("#filters-button").button("toggle");
-    $("#filters-area").hide();
-}
-
-function toggleDisplayPanel() {
-    // If we are going to show the display panel, hide the filters panel
-    if (!$("#display-area").is(":visible") && $("#filters-area").is(":visible")) {
-        $("#filters-area").hide();
-        $("#filters-button").button("toggle");
-    }
-    $("#display-area").toggle();
-}
-function closeDisplayPanel() {
-    $("#display-button").button("toggle");
-    $("#display-area").hide();
-}
-
 // Set up the map
 function setUpMap() {
     // Create map
diff --git a/webassets/js/spots.js b/webassets/js/spots.js
index 727193d..aea499b 100644
--- a/webassets/js/spots.js
+++ b/webassets/js/spots.js
@@ -462,33 +462,6 @@ function userGridUpdated() {
     saveSettings();
 }
 
-// React to toggling/closing panels
-function toggleFiltersPanel() {
-    // If we are going to show the filters panel, hide the display and add spot panels
-    if (!$("#filters-area").is(":visible") && $("#display-area").is(":visible")) {
-        $("#display-area").hide();
-        $("#display-button").button("toggle");
-    }
-    $("#filters-area").toggle();
-}
-function closeFiltersPanel() {
-    $("#filters-button").button("toggle");
-    $("#filters-area").hide();
-}
-
-function toggleDisplayPanel() {
-    // If we are going to show the display panel, hide the filters and add spot panels
-    if (!$("#display-area").is(":visible") && $("#filters-area").is(":visible")) {
-        $("#filters-area").hide();
-        $("#filters-button").button("toggle");
-    }
-    $("#display-area").toggle();
-}
-function closeDisplayPanel() {
-    $("#display-button").button("toggle");
-    $("#display-area").hide();
-}
-
 // Display the intro box, unless the user has already dismissed it once.
 function displayIntroBox() {
     if (localStorage.getItem("intro-box-dismissed") == null) {