diff --git a/client/public/stylesheets/olympus.css b/client/public/stylesheets/olympus.css
index a1e3e25a..a39ba881 100644
--- a/client/public/stylesheets/olympus.css
+++ b/client/public/stylesheets/olympus.css
@@ -84,80 +84,81 @@ button[disabled="disabled"] {
 
 .ol-select {
     color: var( --nav-text );
-    position: relative;
 }
 
-.ol-select .ol-select-value {
+.ol-select > .ol-select-value {
     align-content: center;
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
     cursor:pointer;
     display:flex;
     justify-content: left;
-    position: relative;
     text-align: center;
+    white-space: nowrap;
+    width: fit-content;
 }
 
-.ol-select:not( .ol-select-image ) .ol-select-value {
+.ol-select:not( .ol-select-image ) > .ol-select-value {
     background-color: var( --background-grey );
     border-radius: var( --border-radius-sm );
     padding:1em;
     width:100%;
 }
 
-.ol-select:not( .ol-select-image ) .ol-select-value:before {
+.ol-select:not( .ol-select-image ) > .ol-select-value:before {
     content: "[ ]";
     margin-right: 10px;
 }
 
-.ol-select:not( .ol-select-image ) .ol-select-value:after {
+.ol-select:not( .ol-select-image ) > .ol-select-value:after {
     content: "[V]";
     margin-left:10px;
 }
 
-.ol-select .ol-select-options {
+.ol-select > .ol-select-options {
     overflow:hidden;
     max-height: 0;
-    position: relative;
     translate:0 -2px;
 }
 
-.ol-select.ol-select-image .ol-select-options {
+.ol-select.ol-select-image > .ol-select-options {
     position:absolute;
 }
 
 
-.ol-select.is-open .ol-select-options {
+.ol-select.is-open > .ol-select-options {
     max-height: fit-content;
+    overflow: visible;
     padding:8px 0;
 }
 
-.ol-select .ol-select-options > div {
+.ol-select > .ol-select-options > div {
     background-color: var( --background-grey );
+    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
     display:flex;
     justify-content: left;
     padding:6px 25px;
     width:100%;
 }
 
-.ol-select .ol-select-options > div:first-of-type {
+.ol-select > .ol-select-options > div:first-of-type {
     border-top-left-radius: var( --border-radius-md );
     border-top-right-radius: var( --border-radius-md );
     padding-top:16px;
 }
 
-.ol-select .ol-select-options > div:last-of-type {
+.ol-select > .ol-select-options > div:last-of-type {
     border-bottom-left-radius: var( --border-radius-md );
     border-bottom-right-radius: var( --border-radius-md );
     padding-bottom:16px;
 }
 
-.ol-select .ol-select-options div hr {
+.ol-select > .ol-select-options div hr {
     background-color: white;
     height:1px;
     width:100%;
 }
 
-.ol-select .ol-select-options div button {
+.ol-select > .ol-select-options div button {
     background-color: transparent;
     border:none;
     border-radius: 0;
@@ -169,7 +170,7 @@ button[disabled="disabled"] {
     width:fit-content;
 }
 
-.ol-select .ol-select-options > div button:hover {
+.ol-select > .ol-select-options > div button:hover {
     text-decoration: underline;
 }
 
diff --git a/client/src/index.ts b/client/src/index.ts
index c12734e8..06bb0ff0 100644
--- a/client/src/index.ts
+++ b/client/src/index.ts
@@ -75,6 +75,8 @@ function setup() {
 
         //  Do open/close toggle
         select.addEventListener( "click", ev => {
+            ev.preventDefault();
+            ev.stopPropagation();
             select.classList.toggle( "is-open" );
         });
 
diff --git a/client/views/navbar.ejs b/client/views/navbar.ejs
index e76018d6..92569e0e 100644
--- a/client/views/navbar.ejs
+++ b/client/views/navbar.ejs
@@ -9,6 +9,22 @@
                 <h2>Olympus</h2>
                 <p>v0.1.0</p>
             </div>
+            <div>
+                <div class="ol-select">
+                    <div class="ol-select-value">Current mode</div>
+                    <div class="ol-select-options">
+                        <div>
+                            <button title="Switch to Mode A">Mode A</button>
+                        </div>
+                        <div>
+                            <button title="Switch to Mode B">Mode B</button>
+                        </div>
+                        <div>
+                            <button title="Switch to Mode C">Mode C</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
             <div>
                 <hr />
             </div>
@@ -67,11 +83,11 @@
     </div>
     
     <div class="ol-group">
-        <button>P</button>
-        <button>G</button>
-        <button>S</button>
-        <button>N</button>
-        <button>T</button>
+        <button title="Toggle planes visibility">P</button>
+        <button title="Toggle vehicle visibility">G</button>
+        <button title="Toggle SAM visibility">S</button>
+        <button title="Toggle navy visibility">N</button>
+        <button title="Toggle threat ring visibility">T</button>
     </div>
 
     <div class="ol-group ol-group-checkbox">