diff --git a/arches/app/media/css/arches.css b/arches/app/media/css/arches.css
index f9a5839ddd9..0bc2b2f6bb7 100644
--- a/arches/app/media/css/arches.css
+++ b/arches/app/media/css/arches.css
@@ -560,6 +560,7 @@ input[type="checkbox"] {
     height: 100%;
     width: 92px;
     background-color: rgb(247, 247, 247);
+    border-left: 1px solid rgb(216, 216, 216);
 }
 
 .map-card-sidebar-tab {
@@ -569,12 +570,30 @@ input[type="checkbox"] {
     text-align: center;
     font-size: 1.1em;
     border-bottom: 1px solid rgb(216, 216, 216);
-    border-left: 1px solid rgb(216, 216, 216);
+    cursor: pointer;
+}
+
+.map-card-sidebar-tab.active {
+    background-color: white;
+    border-left: solid 1px white;
+    margin-left: -1px;
 }
+
 .map-card-sidebar-tab i {
     font-size: 1.7em;
     display: block;
-    padding-bottom: 4px;
+    padding-bottom: 6px;
+}
+
+.map-card-sidepanel {
+    position:absolute;
+    z-index: 10;
+    right: 92px;
+    height: 100%;
+    width: 400px;
+    background: white;
+    border-left: 1px solid rgb(216, 216, 216);
+    padding: 16px;
 }
 
 #map-settings {
diff --git a/arches/app/media/js/views/components/cards/map.js b/arches/app/media/js/views/components/cards/map.js
index a716c462714..24e5d194537 100644
--- a/arches/app/media/js/views/components/cards/map.js
+++ b/arches/app/media/js/views/components/cards/map.js
@@ -18,6 +18,7 @@ define([
                 "glyphs": arches.mapboxGlyphs,
                 "layers": layers
             };
+            this.activeTab = ko.observable();
 
             CardComponentViewModel.apply(this, [params]);
         },
diff --git a/arches/app/templates/views/components/cards/map.htm b/arches/app/templates/views/components/cards/map.htm
index eb57362da1f..c891079967a 100644
--- a/arches/app/templates/views/components/cards/map.htm
+++ b/arches/app/templates/views/components/cards/map.htm
@@ -4,19 +4,47 @@
 {% block form %}
 <div class="map-card-wrapper">
     <div class="map-card-sidebar">
-        <div class="map-card-sidebar-tab">
+        <div class="map-card-sidebar-tab" data-bind="click: function() {
+            if (activeTab() === 'legend') {
+                activeTab(null);
+            } else {
+                activeTab('legend');
+            }
+        }, css: {
+            'active': activeTab() === 'legend'
+        }">
             <i class="fa fa-list-alt"></i>
-            Legend
+            {% trans "Legend" %}
         </div>
-        <div class="map-card-sidebar-tab">
+        <div class="map-card-sidebar-tab" data-bind="click: function() {
+            if (activeTab() === 'basemap') {
+                activeTab(null);
+            } else {
+                activeTab('basemap');
+            }
+        }, css: {
+            'active': activeTab() === 'basemap'
+        }">
             <i class="fa fa-globe"></i>
-            Basemap
+            {% trans "Basemap" %}
         </div>
-        <div class="map-card-sidebar-tab">
+        <div class="map-card-sidebar-tab" data-bind="click: function() {
+            if (activeTab() === 'overlays') {
+                activeTab(null);
+            } else {
+                activeTab('overlays');
+            }
+        }, css: {
+            'active': activeTab() === 'overlays'
+        }">
             <i class="fa fa-list"></i>
-            Overlays
+            {% trans "Overlays" %}
         </div>
     </div>
+    <!--ko if: activeTab() -->
+        <div class="map-card-sidepanel" data-bind="text: activeTab">
+        </div>
+    <!--/ko -->
     <div class="map-card-container" data-bind="mapboxgl: {
             mapOptions: { style: mapStyle }
         }">