diff --git a/templates/about.html b/templates/about.html
index d8c2c0f..005cae2 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=1775377724"></script>
+<script src="/js/common.js?v=1775379822"></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 6d8a22c..e10d943 100644
--- a/templates/add_spot.html
+++ b/templates/add_spot.html
@@ -69,8 +69,8 @@
 
 </div>
 
-<script src="/js/common.js?v=1775377724"></script>
-<script src="/js/add-spot.js?v=1775377724"></script>
+<script src="/js/common.js?v=1775379822"></script>
+<script src="/js/add-spot.js?v=1775379822"></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 43b3cac..bc3d838 100644
--- a/templates/alerts.html
+++ b/templates/alerts.html
@@ -33,7 +33,7 @@
     <div id="display-area" class="appearing-panel card mb-3">
         {% module Template("widgets/display-area-header.html", web_ui_options=web_ui_options) %}
         <div class="card-body">
-            <div id="display-container" class="row row-cols-1 row-cols-md-3 g-4">
+            <div id="display-container" class="row row-cols-1 row-cols-md-4 g-4">
                 <div class="col">
                     {% module Template("cards/time-zone.html", web_ui_options=web_ui_options) %}
                 </div>
@@ -56,8 +56,8 @@
 
 </div>
 
-<script src="/js/common.js?v=1775377724"></script>
-<script src="/js/alerts.js?v=1775377724"></script>
+<script src="/js/common.js?v=1775379822"></script>
+<script src="/js/alerts.js?v=1775379822"></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 ded7b0f..8f38385 100644
--- a/templates/bands.html
+++ b/templates/bands.html
@@ -62,9 +62,9 @@
 <script>
     let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
 </script>
-<script src="/js/common.js?v=1775377724"></script>
-<script src="/js/spotsbandsandmap.js?v=1775377724"></script>
-<script src="/js/bands.js?v=1775377724"></script>
+<script src="/js/common.js?v=1775379822"></script>
+<script src="/js/spotsbandsandmap.js?v=1775379822"></script>
+<script src="/js/bands.js?v=1775379822"></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 87d0c96..18662b3 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=1775377724"></script>
-    <script src="https://misc.ianrenton.com/jsutils/storage.js?v=1775377724"></script>
-    <script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1775377724"></script>
-    <script src="https://misc.ianrenton.com/jsutils/geo.js?v=1775377724"></script>
+    <script src="https://misc.ianrenton.com/jsutils/utils.js?v=1775379822"></script>
+    <script src="https://misc.ianrenton.com/jsutils/storage.js?v=1775379822"></script>
+    <script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1775379822"></script>
+    <script src="https://misc.ianrenton.com/jsutils/geo.js?v=1775379822"></script>
 
 </head>
 <body>
diff --git a/templates/cards/bands.html b/templates/cards/bands.html
index ea3ed1f..5630097 100644
--- a/templates/cards/bands.html
+++ b/templates/cards/bands.html
@@ -1,6 +1,6 @@
 <div class="card">
     <div class="card-body">
         <h5 class="card-title">Bands</h5>
-        <p id="band-options" class="card-text spothole-card-text"></p>
+        <div id="band-options" class="card-text spothole-card-text"></div>
     </div>
 </div>
\ No newline at end of file
diff --git a/templates/cards/basemap.html b/templates/cards/basemap.html
index 299161d..2255849 100644
--- a/templates/cards/basemap.html
+++ b/templates/cards/basemap.html
@@ -2,7 +2,7 @@
     <div class="card-body">
         <h5 class="card-title">Map Style</h5>
         <p class="card-text spothole-card-text">
-            <label for="basemap" class="form-label">Basemap:</label>
+            <label for="basemap" class="form-label">Basemap</label>
             <select id="basemap" class="storeable-select form-select" oninput="displayUpdated();">
                 <option value="OpenStreetMap.Mapnik" selected>OpenStreetMap Mapnik</option>
                 <option value="Esri.NatGeoWorldMap">ESRI NatGeo World Map</option>
@@ -14,7 +14,7 @@
             </select>
         </p>
         <p class="card-text spothole-card-text">
-            <label for="basemapOpacity" class="form-label">Opacity:</label>
+            <label for="basemapOpacity" class="form-label">Opacity</label>
             <select id="basemapOpacity" class="storeable-select form-select" oninput="displayUpdated();">
                 <option value="1">100%</option>
                 <option value="0.75">75%</option>
diff --git a/templates/cards/de-continent.html b/templates/cards/de-continent.html
index c22e8ca..db0bb93 100644
--- a/templates/cards/de-continent.html
+++ b/templates/cards/de-continent.html
@@ -1,6 +1,6 @@
 <div class="card">
     <div class="card-body">
         <h5 class="card-title">DE Continent</h5>
-        <p id="de-continent-options" class="card-text spothole-card-text"></p>
+        <div id="de-continent-options" class="card-text spothole-card-text"></div>
     </div>
 </div>
\ No newline at end of file
diff --git a/templates/cards/duration-limit-alerts.html b/templates/cards/duration-limit-alerts.html
index 54a4a5c..1a12ca3 100644
--- a/templates/cards/duration-limit-alerts.html
+++ b/templates/cards/duration-limit-alerts.html
@@ -2,7 +2,7 @@
     <div class="card-body">
         <h5 class="card-title">Duration Limit <i class='fa-solid fa-circle-question' title='Some users create long-duration alerts for the period they will be generally in and around xOTA references, when they are not indending to be on the air most of the time. Use this control to restrict the maximum duration of spots that the software will display, and exclude any with a long duration, to avoid these filling up the list. By default, we allow DXpeditions to be displayed even if they are longer than this limit, because on a DXpedition the operators typically ARE on the air most of the time.'></i></h5>
         <p class="card-text spothole-card-text">
-            Hide any alerts lasting more than:<br/>
+            <label for="max-duration" class="form-label">Hide any alerts lasting more than</label>
             <select id="max-duration" class="storeable-select form-select" onclick="filtersUpdated();" style="width: 8em; display: inline-block;">
                 <option value="10800">3 hours</option>
                 <option value="43200">12 hours</option>
diff --git a/templates/cards/dx-continent.html b/templates/cards/dx-continent.html
index a721c71..d619ff1 100644
--- a/templates/cards/dx-continent.html
+++ b/templates/cards/dx-continent.html
@@ -1,6 +1,6 @@
 <div class="card">
     <div class="card-body">
         <h5 class="card-title">DX Continent</h5>
-        <p id="dx-continent-options" class="card-text spothole-card-text"></p>
+        <div id="dx-continent-options" class="card-text spothole-card-text"></div>
     </div>
 </div>
\ No newline at end of file
diff --git a/templates/cards/modes.html b/templates/cards/modes.html
index dc2cc75..3315994 100644
--- a/templates/cards/modes.html
+++ b/templates/cards/modes.html
@@ -1,6 +1,6 @@
 <div class="card">
     <div class="card-body">
         <h5 class="card-title">Modes</h5>
-        <p id="mode-options" class="card-text spothole-card-text"></p>
+        <div id="mode-options" class="card-text spothole-card-text"></div>
     </div>
 </div>
\ No newline at end of file
diff --git a/templates/cards/number-of-alerts.html b/templates/cards/number-of-alerts.html
index 67c13fb..13df781 100644
--- a/templates/cards/number-of-alerts.html
+++ b/templates/cards/number-of-alerts.html
@@ -2,7 +2,7 @@
     <div class="card-body">
         <h5 class="card-title">Number of Alerts</h5>
         <p class="card-text spothole-card-text">Show up to
-            <select id="alerts-to-fetch" class="storeable-select form-select ms-2" oninput="filtersUpdated();"  style="width: 5em;display: inline-block;">
+            <select id="alerts-to-fetch" class="storeable-select form-select ms-2 me-2" oninput="filtersUpdated();"  style="width: 5em;display: inline-block;">
             {% for c in web_ui_options["alert-count"] %}
                 <option value="{{c}}" {% if web_ui_options["alert-count-default"] == c %}selected{% end %}>{{c}}</option>
             {% end %}
diff --git a/templates/cards/sigs.html b/templates/cards/sigs.html
index e847186..1f4c3fd 100644
--- a/templates/cards/sigs.html
+++ b/templates/cards/sigs.html
@@ -1,6 +1,6 @@
 <div class="card">
     <div class="card-body">
         <h5 class="card-title">SIGs</h5>
-        <p id="sig-options" class="card-text spothole-card-text"></p>
+        <div id="sig-options" class="card-text spothole-card-text"></div>
     </div>
 </div>
\ No newline at end of file
diff --git a/templates/cards/sources.html b/templates/cards/sources.html
index 5970cba..eb5174a 100644
--- a/templates/cards/sources.html
+++ b/templates/cards/sources.html
@@ -1,6 +1,6 @@
 <div class="card">
     <div class="card-body">
         <h5 class="card-title">Sources</h5>
-        <p id="source-options" class="card-text spothole-card-text"></p>
+        <div id="source-options" class="card-text spothole-card-text"></div>
     </div>
 </div>
\ No newline at end of file
diff --git a/templates/cards/table-columns-alerts.html b/templates/cards/table-columns-alerts.html
index 3dba2b0..f3df35d 100644
--- a/templates/cards/table-columns-alerts.html
+++ b/templates/cards/table-columns-alerts.html
@@ -1,35 +1,35 @@
 <div class="card">
     <div class="card-body">
         <h5 class="card-title">Table Columns</h5>
-        <div class="form-group">
-            <div class="form-check form-check-inline">
-              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowStartTime" value="tableShowStartTime" oninput="columnsUpdated();" checked>
-              <label class="form-check-label" for="tableShowStartTime">Start Time</label>
-            </div>
-            <div class="form-check form-check-inline">
-              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowEndTime" value="tableShowEndTime" oninput="columnsUpdated();" checked>
-              <label class="form-check-label" for="tableShowEndTime">End Time</label>
-            </div>
-            <div class="form-check form-check-inline">
-              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowDX" value="tableShowDX" oninput="columnsUpdated();" checked>
-              <label class="form-check-label" for="tableShowDX">DX</label>
-            </div>
-            <div class="form-check form-check-inline">
-              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowFreqsModes" value="tableShowFreqsModes" oninput="columnsUpdated();" checked>
-              <label class="form-check-label" for="tableShowFreqsModes">Frequencies & Modes</label>
-            </div>
-            <div class="form-check form-check-inline">
-              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowComment" value="tableShowComment" oninput="columnsUpdated();" checked>
-              <label class="form-check-label" for="tableShowComment">Comment</label>
-            </div>
-            <div class="form-check form-check-inline">
-              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowSource" value="tableShowSource" oninput="columnsUpdated();" checked>
-              <label class="form-check-label" for="tableShowSource">Source</label>
-            </div>
-            <div class="form-check form-check-inline">
-              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowRef" value="tableShowRef" oninput="columnsUpdated();" checked>
-              <label class="form-check-label" for="tableShowRef">Ref.</label>
-            </div>
+        <div class="row row-cols-2 g-1">
+            <div class="col"><div class="form-check">
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowStartTime" value="tableShowStartTime" oninput="columnsUpdated();" checked>
+                <label class="form-check-label" for="tableShowStartTime">Start Time</label>
+            </div></div>
+            <div class="col"><div class="form-check">
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowEndTime" value="tableShowEndTime" oninput="columnsUpdated();" checked>
+                <label class="form-check-label" for="tableShowEndTime">End Time</label>
+            </div></div>
+            <div class="col"><div class="form-check">
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowDX" value="tableShowDX" oninput="columnsUpdated();" checked>
+                <label class="form-check-label" for="tableShowDX">DX</label>
+            </div></div>
+            <div class="col"><div class="form-check">
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowFreqsModes" value="tableShowFreqsModes" oninput="columnsUpdated();" checked>
+                <label class="form-check-label" for="tableShowFreqsModes">Freq &amp; Mode</label>
+            </div></div>
+            <div class="col"><div class="form-check">
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowComment" value="tableShowComment" oninput="columnsUpdated();" checked>
+                <label class="form-check-label" for="tableShowComment">Comment</label>
+            </div></div>
+            <div class="col"><div class="form-check">
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowSource" value="tableShowSource" oninput="columnsUpdated();" checked>
+                <label class="form-check-label" for="tableShowSource">Source</label>
+            </div></div>
+            <div class="col"><div class="form-check">
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowRef" value="tableShowRef" oninput="columnsUpdated();" checked>
+                <label class="form-check-label" for="tableShowRef">Ref.</label>
+            </div></div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/templates/cards/table-columns-spots.html b/templates/cards/table-columns-spots.html
index f58f579..d43e630 100644
--- a/templates/cards/table-columns-spots.html
+++ b/templates/cards/table-columns-spots.html
@@ -1,47 +1,47 @@
 <div class="card">
     <div class="card-body">
         <h5 class="card-title">Table Columns</h5>
-        <div class="form-group">
-            <div class="form-check form-check-inline">
-              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowTime" value="tableShowTime" oninput="columnsUpdated();" checked>
-              <label class="form-check-label" for="tableShowTime">Time</label>
-            </div>
-            <div class="form-check form-check-inline">
-              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowDX" value="tableShowDX" oninput="columnsUpdated();" checked>
-              <label class="form-check-label" for="tableShowDX">DX</label>
-            </div>
-            <div class="form-check form-check-inline">
-              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowFreq" value="tableShowFreq" oninput="columnsUpdated();" checked>
-              <label class="form-check-label" for="tableShowFreq">Frequency</label>
-            </div>
-            <div class="form-check form-check-inline">
-              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowMode" value="tableShowMode" oninput="columnsUpdated();" checked>
-              <label class="form-check-label" for="tableShowMode">Mode</label>
-            </div>
-            <div class="form-check form-check-inline">
-              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowComment" value="tableShowComment" oninput="columnsUpdated();" checked>
-              <label class="form-check-label" for="tableShowComment">Comment</label>
-            </div>
-            <div class="form-check form-check-inline">
-              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowBearing" value="tableShowBearing" oninput="columnsUpdated();">
-              <label class="form-check-label" for="tableShowBearing">Bearing</label>
-            </div>
-            <div class="form-check form-check-inline">
-              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowType" value="tableShowType" oninput="columnsUpdated();" checked>
-              <label class="form-check-label" for="tableShowType">Type</label>
-            </div>
-            <div class="form-check form-check-inline">
-              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowRef" value="tableShowRef" oninput="columnsUpdated();" checked>
-              <label class="form-check-label" for="tableShowRef">Ref.</label>
-            </div>
-            <div class="form-check form-check-inline">
-              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowDE" value="tableShowDE" oninput="columnsUpdated();" checked>
-              <label class="form-check-label" for="tableShowDE">DE</label>
-            </div>
-            <div class="form-check form-check-inline">
-              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowWorkedCheckbox" value="tableShowWorkedCheckbox" oninput="columnsUpdated();" checked>
-              <label class="form-check-label" for="tableShowWorkedCheckbox">Worked?</label>
-            </div>
+        <div class="row row-cols-2 g-1">
+            <div class="col"><div class="form-check">
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowTime" value="tableShowTime" oninput="columnsUpdated();" checked>
+                <label class="form-check-label" for="tableShowTime">Time</label>
+            </div></div>
+            <div class="col"><div class="form-check">
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowDX" value="tableShowDX" oninput="columnsUpdated();" checked>
+                <label class="form-check-label" for="tableShowDX">DX</label>
+            </div></div>
+            <div class="col"><div class="form-check">
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowFreq" value="tableShowFreq" oninput="columnsUpdated();" checked>
+                <label class="form-check-label" for="tableShowFreq">Frequency</label>
+            </div></div>
+            <div class="col"><div class="form-check">
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowMode" value="tableShowMode" oninput="columnsUpdated();" checked>
+                <label class="form-check-label" for="tableShowMode">Mode</label>
+            </div></div>
+            <div class="col"><div class="form-check">
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowComment" value="tableShowComment" oninput="columnsUpdated();" checked>
+                <label class="form-check-label" for="tableShowComment">Comment</label>
+            </div></div>
+            <div class="col"><div class="form-check">
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowBearing" value="tableShowBearing" oninput="columnsUpdated();">
+                <label class="form-check-label" for="tableShowBearing">Bearing</label>
+            </div></div>
+            <div class="col"><div class="form-check">
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowType" value="tableShowType" oninput="columnsUpdated();" checked>
+                <label class="form-check-label" for="tableShowType">Type</label>
+            </div></div>
+            <div class="col"><div class="form-check">
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowRef" value="tableShowRef" oninput="columnsUpdated();" checked>
+                <label class="form-check-label" for="tableShowRef">Ref.</label>
+            </div></div>
+            <div class="col"><div class="form-check">
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowDE" value="tableShowDE" oninput="columnsUpdated();" checked>
+                <label class="form-check-label" for="tableShowDE">DE</label>
+            </div></div>
+            <div class="col"><div class="form-check">
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowWorkedCheckbox" value="tableShowWorkedCheckbox" oninput="columnsUpdated();" checked>
+                <label class="form-check-label" for="tableShowWorkedCheckbox">Worked?</label>
+            </div></div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/templates/conditions.html b/templates/conditions.html
index 5fd953a..50338be 100644
--- a/templates/conditions.html
+++ b/templates/conditions.html
@@ -230,8 +230,8 @@
 </div>
 
 <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.umd.min.js"></script>
-<script src="/js/common.js?v=1775377724"></script>
-<script src="/js/conditions.js?v=1775377724"></script>
+<script src="/js/common.js?v=1775379822"></script>
+<script src="/js/conditions.js?v=1775379822"></script>
 <script>$(document).ready(function () {
     $("#nav-link-conditions").addClass("active");
 }); <!-- highlight active page in nav --></script>
diff --git a/templates/map.html b/templates/map.html
index 0919aeb..66d8303 100644
--- a/templates/map.html
+++ b/templates/map.html
@@ -79,9 +79,9 @@
 <script>
     let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
 </script>
-<script src="/js/common.js?v=1775377724"></script>
-<script src="/js/spotsbandsandmap.js?v=1775377724"></script>
-<script src="/js/map.js?v=1775377724"></script>
+<script src="/js/common.js?v=1775379822"></script>
+<script src="/js/spotsbandsandmap.js?v=1775379822"></script>
+<script src="/js/map.js?v=1775379822"></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 994fbd9..546b94d 100644
--- a/templates/spots.html
+++ b/templates/spots.html
@@ -87,9 +87,9 @@
 <script>
     let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
 </script>
-<script src="/js/common.js?v=1775377724"></script>
-<script src="/js/spotsbandsandmap.js?v=1775377724"></script>
-<script src="/js/spots.js?v=1775377724"></script>
+<script src="/js/common.js?v=1775379822"></script>
+<script src="/js/spotsbandsandmap.js?v=1775379822"></script>
+<script src="/js/spots.js?v=1775379822"></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 1b3f709..66e849b 100644
--- a/templates/status.html
+++ b/templates/status.html
@@ -59,8 +59,8 @@
     </div>
 </div>
 
-<script src="/js/common.js?v=1775377724"></script>
-<script src="/js/status.js?v=1775377724"></script>
+<script src="/js/common.js?v=1775379822"></script>
+<script src="/js/status.js?v=1775379822"></script>
 <script>
     $(document).ready(function() { $("#nav-link-status").addClass("active"); }); <!-- highlight active page in nav -->
 </script>
diff --git a/templates/widgets/band-color-scheme.html b/templates/widgets/band-color-scheme.html
index 6e7f1d9..0a81523 100644
--- a/templates/widgets/band-color-scheme.html
+++ b/templates/widgets/band-color-scheme.html
@@ -1,4 +1,4 @@
-<label class="form-check-label" for="band-color-scheme">Band color scheme</label><br/>
+<label class="form-check-label form-label" for="band-color-scheme">Band color scheme</label><br/>
 <select id="band-color-scheme" class="storeable-select form-select d-inline-block" oninput="setBandColorSchemeFromUI();" style="display: inline-block;">
     <option value="PSK Reporter" {% if web_ui_options["band-color-scheme-default"] == "PSK Reporter" %}selected{% end %}>PSK Reporter</option>
     <option value="PSK Reporter (Adjusted)" {% if web_ui_options["band-color-scheme-default"] == "PSK Reporter (Adjusted)" %}selected{% end %}>PSK Reporter (Adjusted)</option>
diff --git a/templates/widgets/color-scheme.html b/templates/widgets/color-scheme.html
index 86a817c..25b8bbb 100644
--- a/templates/widgets/color-scheme.html
+++ b/templates/widgets/color-scheme.html
@@ -1,4 +1,4 @@
-<label class="form-check-label" for="color-scheme">UI color scheme</label>
+<label class="form-check-label form-label" for="color-scheme">UI color scheme</label>
 <select id="color-scheme" class="storeable-select form-select d-inline-block" oninput="setColorSchemeFromUI();" style="display: inline-block;">
     <option value="auto" {% if web_ui_options["color-scheme-default"] == "auto" %}selected{% end %}>Automatic</option>
     <option value="light" {% if web_ui_options["color-scheme-default"] == "light" %}selected{% end %}>Light</option>
diff --git a/webassets/css/style.css b/webassets/css/style.css
index 8014847..b9668d4 100644
--- a/webassets/css/style.css
+++ b/webassets/css/style.css
@@ -100,11 +100,6 @@ div.appearing-panel {
     display: none;
 }
 
-.spothole-card-text {
-    line-height: 2.5em !important;
-}
-
-
 
 /* SPOTS/ALERTS PAGES, MAIN TABLE */
 
diff --git a/webassets/js/common.js b/webassets/js/common.js
index 1945a82..dafe0b9 100644
--- a/webassets/js/common.js
+++ b/webassets/js/common.js
@@ -92,14 +92,14 @@ function allFilterOptionsSelected(parameter) {
 }
 
 
-// Generate a filter card with multiple toggle buttons plus All/None buttons.
+// Generate a filter card with inline checkboxes plus All/None links.
 function generateMultiToggleFilterCard(elementID, filterQuery, options) {
-    // Create a button for each option
+    var $row = $('<div>');
     options.forEach(o => {
-        $(elementID).append(`<input type="checkbox" class="btn-check filter-button-${filterQuery} storeable-checkbox" name="options" id="filter-button-${filterQuery}-${o}" value="${o}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline-success" for="filter-button-${filterQuery}-${o}">${o}</label> `);
+        $row.append(`<div class="form-check form-check-inline"><input type="checkbox" class="form-check-input filter-button-${filterQuery} storeable-checkbox" id="filter-button-${filterQuery}-${o}" value="${o}" autocomplete="off" onClick="filtersUpdated()" checked><label class="form-check-label" for="filter-button-${filterQuery}-${o}">${o}</label></div>`);
     });
-    // Create All/None buttons
-    $(elementID).append(` <span style="display: inline-block"><button id="filter-button-${filterQuery}-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('${filterQuery}', true);">All</button>&nbsp;<button id="filter-button-${filterQuery}-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('${filterQuery}', false);">None</button></span>`);
+    $(elementID).append($row);
+    $(elementID).append(`<div class="mt-1"><a href="#" onclick="toggleFilterButtons('${filterQuery}', true); return false;">All</a> &nbsp; <a href="#" onclick="toggleFilterButtons('${filterQuery}', false); return false;">None</a></div>`);
 }
 
 // Method called when "All" or "None" is clicked
diff --git a/webassets/js/spotsbandsandmap.js b/webassets/js/spotsbandsandmap.js
index 0c65092..23d37ad 100644
--- a/webassets/js/spotsbandsandmap.js
+++ b/webassets/js/spotsbandsandmap.js
@@ -6,27 +6,26 @@ var spots = []
 // to localStorage.
 let worked = []
 
-// Dynamically add CSS code for the band toggle buttons to be in the appropriate colour.
+// Dynamically add CSS code for the band checkboxes to show in the appropriate colour.
 // Some band names contain decimal points which are not allowed in CSS classes, so we text-replace them to "p".
 function addBandToggleColourCSS(band_options) {
     var $style = $('<style>');
     band_options.forEach(o => {
         var domSafeName = o["name"].replace(/^[^A-Za-z0-9]+|[^\w]+/gi, "");
-        $style.append(`#filter-button-label-band-${domSafeName} { border-color: ${bandToColor(o['name'])}; color: var(--bs-secondary);}`);
-        $style.append(`.btn-check:checked + #filter-button-label-band-${domSafeName} { background-color: ${bandToColor(o['name'])}; color: ${bandToContrastColor(o['name'])};}`);
+        $style.append(`#filter-button-label-band-${domSafeName} { padding-left: 0.3em; border-left: 5px solid ${bandToColor(o['name'])};}`);
     });
     $('html > head').append($style);
 }
 
 // Generate bands filter card. This one is a special case.
 function generateBandsMultiToggleFilterCard(band_options) {
-    // Create a button for each option
+    var $grid = $('<div class="row row-cols-4 g-1 mb-1">');
     band_options.forEach(o => {
         var domSafeName = o["name"].replace(/^[^A-Za-z0-9]+|[^\w]+/gi, "");
-        $("#band-options").append(`<input type="checkbox" class="btn-check filter-button-band storeable-checkbox" name="options" id="filter-button-band-${domSafeName}" value="${o['name']}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline-secondary" id="filter-button-label-band-${domSafeName}" for="filter-button-band-${domSafeName}">${o['name']}</label> `);
+        $grid.append(`<div class="col"><div class="form-check"><input type="checkbox" class="form-check-input filter-button-band storeable-checkbox" id="filter-button-band-${domSafeName}" value="${o['name']}" autocomplete="off" onClick="filtersUpdated()" checked> <label class="form-check-label" id="filter-button-label-band-${domSafeName}" for="filter-button-band-${domSafeName}">${o['name']}</label></div></div>`);
     });
-    // Create All/None/Ham HF buttons
-    $("#band-options").append(` <span style="display: inline-block"><button id="filter-button-band-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('band', true);">All</button> <button id="filter-button-band-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('band', false);">None</button> <button id="filter-button-band-none" type="button" class="btn btn-outline-secondary" onclick="setHamHFBandToggles();">Ham HF</button></span>`);
+    $("#band-options").append($grid);
+    $("#band-options").append(`<div class="mt-1"><a href="#" onclick="toggleFilterButtons('band', true); return false;">All</a> &nbsp; <a href="#" onclick="toggleFilterButtons('band', false); return false;">None</a> &nbsp; <a href="#" onclick="setHamHFBandToggles(); return false;">Ham HF only</a></div>`);
 }
 
 // Set the band toggles so that only the amateur radio HF bands are selected. This includes 160m and 6m because that's
@@ -41,72 +40,58 @@ function setHamHFBandToggles() {
 
 // Generate SIGs filter card. This one is also a special case.
 function generateSIGsMultiToggleFilterCard(sig_options) {
-    // Create a button for each option
+    var $grid = $('<div class="row row-cols-3 g-1 mb-1">');
     sig_options.forEach(o => {
         var domSafeName = o["name"].replace(/^[^A-Za-z0-9]+|[^\w]+/gi, "");
-        $("#sig-options").append(`<input type="checkbox" class="btn-check filter-button-sig storeable-checkbox" name="options" id="filter-button-sig-${domSafeName}" value="${o['name']}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline-success" id="filter-button-label-sig-${domSafeName}" for="filter-button-sig-${domSafeName}" title="${o['description']}"><i class="fa-solid ${sigToIcon(o['name'], 'fa-tower-cell')}"></i> ${o['name']}</label> `);
+        $grid.append(`<div class="col"><div class="form-check"><input type="checkbox" class="form-check-input filter-button-sig storeable-checkbox" id="filter-button-sig-${domSafeName}" value="${o['name']}" autocomplete="off" onClick="filtersUpdated()" checked><label class="form-check-label" id="filter-button-label-sig-${domSafeName}" for="filter-button-sig-${domSafeName}" title="${o['description']}"><i class="fa-solid ${sigToIcon(o['name'], 'fa-tower-cell')}"></i> ${o['name']}</label></div></div>`);
     });
-    // Create a bonus "NO_SIG" / "General DX" option
-    $("#sig-options").append(`<input type="checkbox" class="btn-check filter-button-sig storeable-checkbox" name="options" id="filter-button-sig-NO_SIG" value="NO_SIG" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline-success" id="filter-button-label-sig-NO_SIG" for="filter-button-sig-NO_SIG"><i class="fa-solid fa-tower-cell"></i> General DX</label> `);
-    // Create All/None buttons
-    $("#sig-options").append(` <span style="display: inline-block"><button id="filter-button-sig-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('sig', true);">All</button>&nbsp;<button id="filter-button-sig-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('sig', false);">None</button></span>`);
+    // Bonus "NO_SIG" / "General DX" option
+    $grid.append(`<div class="col-8"><div class="form-check"><input type="checkbox" class="form-check-input filter-button-sig storeable-checkbox" id="filter-button-sig-NO_SIG" value="NO_SIG" autocomplete="off" onClick="filtersUpdated()" checked><label class="form-check-label" id="filter-button-label-sig-NO_SIG" for="filter-button-sig-NO_SIG"><i class="fa-solid fa-tower-cell"></i> General DX</label></div></div>`);
+    $("#sig-options").append($grid);
+    $("#sig-options").append(`<div class="mt-1"><a href="#" onclick="toggleFilterButtons('sig', true); return false;">All</a> &nbsp; <a href="#" onclick="toggleFilterButtons('sig', false); return false;">None</a></div>`);
 }
 
 // Generate modes filter card. This one is also a special case.
 function generateModesMultiToggleFilterCard(mode_options) {
-    // Create a button for each option
+    var $grid = $('<div class="row row-cols-3 g-1 mb-1">');
     mode_options.forEach(o => {
         var domSafeName = o.replace(/^[^A-Za-z0-9]+|[^\w]+/gi, "");
-        $("#mode-options").append(`<input type="checkbox" class="btn-check filter-button-mode storeable-checkbox" name="options" id="filter-button-mode-${domSafeName}" value="${o}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline-success" id="filter-button-label-mode-${domSafeName}" for="filter-button-mode-${domSafeName}">${o}</label> `);
+        $grid.append(`<div class="col"><div class="form-check"><input type="checkbox" class="form-check-input filter-button-mode storeable-checkbox" id="filter-button-mode-${domSafeName}" value="${o}" autocomplete="off" onClick="filtersUpdated()" checked><label class="form-check-label" id="filter-button-label-mode-${domSafeName}" for="filter-button-mode-${domSafeName}">${o}</label></div></div>`);
     });
-    // Create All/None buttons
-    $("#mode-options").append(` <span style="display: inline-block"><button id="filter-button-mode-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('mode', true);">All</button>&nbsp;<button id="filter-button-mode-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('mode', false);">None</button></span>`);
-    // Create category buttons
-    $("#mode-options").append(` <button id="filter-button-mode-av" type="button" class="btn btn-outline-secondary" onclick="toggleAnalogVoiceModeToggles();">Analog Voice</button>&nbsp;<button id="filter-button-mode-dv" type="button" class="btn btn-outline-secondary" onclick="toggleDigitalVoiceModeToggles();">Digital Voice</button>&nbsp;<button id="filter-button-mode-digi" type="button" class="btn btn-outline-secondary" onclick="toggleDigiModeToggles();">Digimodes</button></span>`);
+    $("#mode-options").append($grid);
+    $("#mode-options").append(`<div class="mt-1"><a href="#" onclick="toggleFilterButtons('mode', true); return false;">All</a> &nbsp; <a href="#" onclick="toggleFilterButtons('mode', false); return false;">None</a> &nbsp; <a href="#" onclick="setVoiceModeToggles(); return false;">Voice only</a> &nbsp; <a href="#" onclick="setDigiModeToggles(); return false;">Digimodes only</a></div>`);
 }
 
-// Toggle the mode toggles that relate to Analog Voice.
-function toggleAnalogVoiceModeToggles() {
-    toggleToggles("mode", ["PHONE", "SSB", "LSB", "USB", "AM", "FM"]);
-}
-
-// Toggle the mode toggles that relate to Digital Voice.
-function toggleDigitalVoiceModeToggles() {
-    toggleToggles("mode", ["DV", "DMR", "DSTAR", "C4FM", "M17"]);
-}
-
-// Toggle the mode toggles that relate to Digimodes.
-function toggleDigiModeToggles() {
-    toggleToggles("mode", ["DATA", "FT8", "FT4", "RTTY", "SSTV", "JS8", "HELL", "PSK", "OLIVIA", "PKT", "MSK144"]);
-}
-
-// Toggle the a set of toggles of the given type (e.g. "mode") that match the given values (e.g. ["SSB", "AM", "FM"]).
-function toggleToggles(type, values) {
-    let toggle = null;
-    $(".filter-button-" + type).each(function() {
-        console.log($(this));
-        if (values.includes($(this).val().replace("filter-button-" + type, ""))) {
-            if (toggle == null) {
-                toggle = !$(this).prop('checked');
-            }
-            $(this).prop('checked', toggle);
-        }
+// Set the mode toggles that relate to Analog Voice.
+function setVoiceModeToggles() {
+    const modes = ["PHONE", "SSB", "LSB", "USB", "AM", "FM", "DV", "DMR", "DSTAR", "C4FM", "M17"];
+    $(".filter-button-mode").each(function() {
+        $(this).prop('checked', modes.includes($(this).val().replace("filter-button-mode-", "")));
     });
     filtersUpdated();
 }
 
-// Generate Sources filter card. This one is a minor special case as we create the buttons in the normal way, but then
+// Set the mode toggles that relate to Digimodes.
+function setDigiModeToggles() {
+    const modes = ["DATA", "FT8", "FT4", "RTTY", "SSTV", "JS8", "HELL", "PSK", "OLIVIA", "PKT", "MSK144"];
+    $(".filter-button-mode").each(function() {
+        $(this).prop('checked', modes.includes($(this).val().replace("filter-button-mode-", "")));
+    });
+    filtersUpdated();
+}
+
+// Generate Sources filter card. This one is a minor special case as we create the checkboxes in the normal way, but
 // set which ones are enabled by default based on config rather than having them all enabled by default. We also sanitise
 // names here for HTML elements.
 function generateSourcesMultiToggleFilterCard(source_options, sources_enabled_by_default) {
-    // Create a button for each option
+    var $grid = $('<div class="row row-cols-3 g-1 mb-1">');
     source_options.forEach(o => {
         var enable = sources_enabled_by_default.includes(o);
         var domSafeName = o.replace(/^[^A-Za-z0-9]+|[^\w]+/gi, "");
-        $("#source-options").append(`<input type="checkbox" class="btn-check filter-button-source storeable-checkbox" name="options" id="filter-button-source-${domSafeName}" value="${o}" autocomplete="off" onClick="filtersUpdated()" ${enable ? "checked" : ""}><label class="btn btn-outline-success" for="filter-button-source-${domSafeName}">${o}</label> `);
+        $grid.append(`<div class="col"><div class="form-check"><input type="checkbox" class="form-check-input filter-button-source storeable-checkbox" id="filter-button-source-${domSafeName}" value="${o}" autocomplete="off" onClick="filtersUpdated()" ${enable ? "checked" : ""}><label class="form-check-label" for="filter-button-source-${domSafeName}">${o}</label></div></div>`);
     });
-    // Create All/None buttons
-    $("#source-options").append(` <span style="display: inline-block"><button id="filter-button-source-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('source', true);">All</button>&nbsp;<button id="filter-button-source-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('source', false);">None</button></span>`);
+    $("#source-options").append($grid);
+    $("#source-options").append(`<div class="mt-1"><a href="#" onclick="toggleFilterButtons('source', true); return false;">All</a> &nbsp; <a href="#" onclick="toggleFilterButtons('source', false); return false;">None</a></div>`);
 }
 
 // Method called when any filter is changed to reload the spots and persist the filter settings.