diff --git a/views/webpage_bands.tpl b/views/webpage_bands.tpl
index d02410f..9bc73ea 100644
--- a/views/webpage_bands.tpl
+++ b/views/webpage_bands.tpl
@@ -26,7 +26,7 @@
 
         </div>
         <div class="card-body">
-            <div class="row row-cols-1 g-4 mb-4">
+            <div class="row row-cols-1 g-4 mb-4 row-cols-md-3">
                 <div class="col">
                     <div class="card">
                         <div class="card-body">
@@ -35,8 +35,24 @@
                         </div>
                     </div>
                 </div>
+                <div class="col">
+                    <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>
+                    </div>
+                </div>
+                <div class="col">
+                    <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>
+                    </div>
+                </div>
             </div>
-            <div class="row row-cols-1 row-cols-md-4 g-4">
+            <div class="row row-cols-1 row-cols-md-3 g-4">
                 <div class="col">
                     <div class="card">
                         <div class="card-body">
@@ -61,14 +77,6 @@
                         </div>
                     </div>
                 </div>
-                <div class="col">
-                    <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>
-                    </div>
-                </div>
             </div>
         </div>
     </div>
@@ -108,6 +116,6 @@
 </div>
 
 <script src="/js/common.js"></script>
-<script src="/js/spotandmap.js"></script>
+<script src="/js/spotsbandsandmap.js"></script>
 <script src="/js/bands.js"></script>
 <script>$(document).ready(function() { $("#nav-link-bands").addClass("active"); }); <!-- highlight active page in nav --></script>
\ No newline at end of file
diff --git a/views/webpage_map.tpl b/views/webpage_map.tpl
index 5712ffe..b904d64 100644
--- a/views/webpage_map.tpl
+++ b/views/webpage_map.tpl
@@ -25,7 +25,7 @@
 
             </div>
             <div class="card-body">
-                <div class="row row-cols-1 g-4 mb-4">
+                <div class="row row-cols-1 g-4 mb-4 row-cols-md-3">
                     <div class="col">
                         <div class="card">
                             <div class="card-body">
@@ -34,8 +34,24 @@
                             </div>
                         </div>
                     </div>
+                    <div class="col">
+                        <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>
+                        </div>
+                    </div>
+                    <div class="col">
+                        <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>
+                        </div>
+                    </div>
                 </div>
-                <div class="row row-cols-1 row-cols-md-4 g-4">
+                <div class="row row-cols-1 row-cols-md-3 g-4">
                     <div class="col">
                         <div class="card">
                             <div class="card-body">
@@ -60,14 +76,6 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col">
-                        <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>
-                        </div>
-                    </div>
                 </div>
             </div>
         </div>
@@ -126,6 +134,6 @@
 <script src="https://cdn.jsdelivr.net/npm/@joergdietrich/leaflet.terminator@1.1.0/L.Terminator.min.js"></script>
 
 <script src="/js/common.js"></script>
-<script src="/js/spotandmap.js"></script>
+<script src="/js/spotsbandsandmap.js"></script>
 <script src="/js/map.js"></script>
 <script>$(document).ready(function() { $("#nav-link-map").addClass("active"); }); <!-- highlight active page in nav --></script>
\ No newline at end of file
diff --git a/views/webpage_spots.tpl b/views/webpage_spots.tpl
index 2e785ae..d46256b 100644
--- a/views/webpage_spots.tpl
+++ b/views/webpage_spots.tpl
@@ -37,7 +37,7 @@
 
         </div>
         <div class="card-body">
-            <div class="row row-cols-1 g-4 mb-4">
+            <div class="row row-cols-1 g-4 mb-4 row-cols-md-3">
                 <div class="col">
                     <div class="card">
                         <div class="card-body">
@@ -46,8 +46,24 @@
                         </div>
                     </div>
                 </div>
+                <div class="col">
+                    <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>
+                    </div>
+                </div>
+                <div class="col">
+                    <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>
+                    </div>
+                </div>
             </div>
-            <div class="row row-cols-1 row-cols-md-4 g-4">
+            <div class="row row-cols-1 row-cols-md-3 g-4">
                 <div class="col">
                     <div class="card">
                         <div class="card-body">
@@ -72,14 +88,6 @@
                         </div>
                     </div>
                 </div>
-                <div class="col">
-                    <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>
-                    </div>
-                </div>
             </div>
         </div>
     </div>
@@ -188,6 +196,6 @@
 </div>
 
 <script src="/js/common.js"></script>
-<script src="/js/spotandmap.js"></script>
+<script src="/js/spotsbandsandmap.js"></script>
 <script src="/js/spots.js"></script>
 <script>$(document).ready(function() { $("#nav-link-spots").addClass("active"); }); <!-- highlight active page in nav --></script>
\ No newline at end of file
diff --git a/webassets/js/bands.js b/webassets/js/bands.js
index 52f4945..eaca368 100644
--- a/webassets/js/bands.js
+++ b/webassets/js/bands.js
@@ -23,7 +23,7 @@ function loadSpots() {
 // Build a query string for the API, based on the filters that the user has selected.
 function buildQueryString() {
     var str =  "?";
-    ["dx_continent", "de_continent", "mode_type", "source", "band"].forEach(fn => {
+    ["dx_continent", "de_continent", "mode_type", "source", "band", "sig"].forEach(fn => {
         if (!allFilterOptionsSelected(fn)) {
             str = str + getQueryStringFor(fn) + "&";
         }
@@ -230,6 +230,7 @@ function loadOptions() {
 
         // Populate the filters panel
         generateBandsMultiToggleFilterCard(options["bands"]);
+        generateSIGsMultiToggleFilterCard(options["sigs"]);
         generateMultiToggleFilterCard("#dx-continent-options", "dx_continent", options["continents"]);
         generateMultiToggleFilterCard("#de-continent-options", "de_continent", options["continents"]);
         generateMultiToggleFilterCard("#mode-options", "mode_type", options["mode_types"]);
diff --git a/webassets/js/map.js b/webassets/js/map.js
index 0837d21..db61445 100644
--- a/webassets/js/map.js
+++ b/webassets/js/map.js
@@ -17,7 +17,7 @@ function loadSpots() {
 // Build a query string for the API, based on the filters that the user has selected.
 function buildQueryString() {
     var str =  "?";
-    ["dx_continent", "de_continent", "mode_type", "source", "band"].forEach(fn => {
+    ["dx_continent", "de_continent", "mode_type", "source", "band", "sig"].forEach(fn => {
         if (!allFilterOptionsSelected(fn)) {
             str = str + getQueryStringFor(fn) + "&";
         }
@@ -158,6 +158,7 @@ function loadOptions() {
 
         // Populate the filters panel
         generateBandsMultiToggleFilterCard(options["bands"]);
+        generateSIGsMultiToggleFilterCard(options["sigs"]);
         generateMultiToggleFilterCard("#dx-continent-options", "dx_continent", options["continents"]);
         generateMultiToggleFilterCard("#de-continent-options", "de_continent", options["continents"]);
         generateMultiToggleFilterCard("#mode-options", "mode_type", options["mode_types"]);
diff --git a/webassets/js/spots.js b/webassets/js/spots.js
index aa33f35..fcaad5a 100644
--- a/webassets/js/spots.js
+++ b/webassets/js/spots.js
@@ -14,7 +14,7 @@ function loadSpots() {
 // Build a query string for the API, based on the filters that the user has selected.
 function buildQueryString() {
     var str =  "?";
-    ["dx_continent", "de_continent", "mode_type", "source", "band"].forEach(fn => {
+    ["dx_continent", "de_continent", "mode_type", "source", "band", "sig"].forEach(fn => {
         if (!allFilterOptionsSelected(fn)) {
             str = str + getQueryStringFor(fn) + "&";
         }
@@ -282,6 +282,7 @@ function loadOptions() {
 
         // Populate the filters panel
         generateBandsMultiToggleFilterCard(options["bands"]);
+        generateSIGsMultiToggleFilterCard(options["sigs"]);console.log(options["sigs"]);
         generateMultiToggleFilterCard("#dx-continent-options", "dx_continent", options["continents"]);
         generateMultiToggleFilterCard("#de-continent-options", "de_continent", options["continents"]);
         generateMultiToggleFilterCard("#mode-options", "mode_type", options["mode_types"]);
diff --git a/webassets/js/spotandmap.js b/webassets/js/spotsbandsandmap.js
similarity index 61%
rename from webassets/js/spotandmap.js
rename to webassets/js/spotsbandsandmap.js
index 58a8c37..fd43f28 100644
--- a/webassets/js/spotandmap.js
+++ b/webassets/js/spotsbandsandmap.js
@@ -30,6 +30,18 @@ function generateBandsMultiToggleFilterCard(band_options) {
     $("#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>&nbsp;<button id="filter-button-band-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('band', false);">None</button></span>`);
 }
 
+// Generate SIGs filter card. This one is also a special case.
+function generateSIGsMultiToggleFilterCard(sig_options) {
+    // Create a button for each option
+    sig_options.forEach(o => {
+        $("#sig-options").append(`<input type="checkbox" class="btn-check filter-button-sig storeable-checkbox" name="options" id="filter-button-sig-${o['name']}" value="${o['name']}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline-primary" id="filter-button-label-sig-${o['name']}" for="filter-button-sig-${o['name']}" title="${o['description']}"><i class="fa-solid fa-${o['icon']}"></i> ${o['name']}</label> `);
+    });
+    // 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-primary" 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>`);
+}
+
 // Method called when any filter is changed to reload the spots and persist the filter settings.
 function filtersUpdated() {
     loadSpots();