diff --git a/htdocs/css/map.css b/htdocs/css/map.css
index 70702b96..2ff1e6a2 100644
--- a/htdocs/css/map.css
+++ b/htdocs/css/map.css
@@ -30,6 +30,24 @@ ul {
     user-select: none;
 }
 
+.openwebrx-arrow-up {
+    margin-top: 5px;
+    width: 0;
+    height: 0;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-bottom: 10px solid black;
+}
+
+.openwebrx-arrow-down {
+    margin-top: 5px;
+    width: 0;
+    height: 0;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-top: 10px solid black;
+}
+
 /* show it as soon as google maps has moved it to its container */
 .openwebrx-map .openwebrx-map-legend {
     display: block;
diff --git a/htdocs/lib/MapManager.js b/htdocs/lib/MapManager.js
index 28d0ebb2..973ef1e7 100644
--- a/htdocs/lib/MapManager.js
+++ b/htdocs/lib/MapManager.js
@@ -28,16 +28,21 @@ function MapManager() {
     }, 1000);
 
     // When stuff loads...
-    $(function() {
+    $(function () {
         // Create clock display
         self.clock = new Clock($('#openwebrx-clock-utc'));
 
         // Clicking clock display toggles legend box on/off
-        $('#openwebrx-clock-utc').css('cursor', 'pointer').on('click', function() {
+        $('#openwebrx-legend-toggle').css({
+            'cursor': 'pointer',
+            'display': 'flex',
+            'justify-content': 'space-between'
+        }).on('click', function () {
             var el = document.getElementById('openwebrx-map-selectors');
             if (el) {
-                el.style.display = el.style.display === 'none'?
-                    'block' : 'none';
+                $(this).find('i').removeClass()
+                    .addClass('openwebrx-arrow-' + (el.style.display === 'none' ? 'down' : 'up'));
+                el.style.display = el.style.display === 'none' ? 'block' : 'none';
             }
         });
 
diff --git a/htdocs/map-google.html b/htdocs/map-google.html
index 21a536e2..de382c6a 100644
--- a/htdocs/map-google.html
+++ b/htdocs/map-google.html
@@ -27,7 +27,10 @@
             <ul class="features">
             </ul>
         </div>
-        <h3 id="openwebrx-clock-utc" style="margin: 20px 0 0 0;">00:00 UTC</h3>
+        <div id='openwebrx-legend-toggle'>
+          <i class="openwebrx-arrow-down"></i>
+          <h3 id="openwebrx-clock-utc" style="margin: 0;">00:00 UTC</h3>
+        </div>
     </div>
 </body>
 </html>
diff --git a/htdocs/map-leaflet.html b/htdocs/map-leaflet.html
index 930bf2c3..6ec55dba 100644
--- a/htdocs/map-leaflet.html
+++ b/htdocs/map-leaflet.html
@@ -30,7 +30,10 @@
             <ul class="features">
             </ul>
         </div>
-        <h3 id="openwebrx-clock-utc" style="margin: 20px 0 0 0;">00:00 UTC</h3>
+        <div id='openwebrx-legend-toggle'>
+          <i class="openwebrx-arrow-down"></i>
+          <h3 id="openwebrx-clock-utc" style="margin: 0;">00:00 UTC</h3>
+        </div>
     </div>
 </body>
 </html>