diff --git a/client/public/stylesheets/other/toolbar.css b/client/public/stylesheets/other/toolbar.css
index c90df5f8..27550908 100644
--- a/client/public/stylesheets/other/toolbar.css
+++ b/client/public/stylesheets/other/toolbar.css
@@ -14,6 +14,10 @@
 	width: fit-content;
 }
 
+#app-icon>.ol-select-value {
+	box-shadow: none;
+}
+
 #toolbar-summary {
 	background-image: url("/images/icon-round.png");
 	background-position: 20px 22px;
@@ -29,22 +33,56 @@
 	white-space: nowrap;
 }
 
-#toolbar-container>*:nth-child(2)>svg {
-    display: none;
-    width: 0px;
-    height: 0px;
+.ol-panel-tab {
+	align-items: center;
+    display:flex;
+	flex-direction: row;
+	margin-right:6px;
+}
+
+.ol-panel-tab svg {
+	height:24;
+	width:24px;
+}
+
+.ol-panel-tab svg * {
+	fill:white;
+}
+
+.ol-panel-tab span {
+	font-size:13px;
+	font-weight:400;
+	padding:0 6px;
 }
 
 #toolbar-container>*:nth-child(3)>svg {
     display: none;
 }
 
+#unit-visibility-control > div:nth-child(3),
+#coalition-visibility-control {
+	border-left: 4px solid white;
+	padding-left: 12px;
+}
+
 @media (max-width: 1145px) {
 	#toolbar-container {
 		flex-direction: column;
 		align-items: start;
 	}
 
+	#toolbar-container .ol-panel .ol-panel-tab {
+		margin-right:0;
+	}
+
+	#toolbar-container .ol-panel:hover .ol-panel-tab {
+		display:none;
+	}
+
+	#toolbar-container .ol-panel-tab span {
+		display:none;
+	}
+
 	#toolbar-container>*:nth-child(1):not(:hover) {
 		width: fit-content;
 		height: fit-content;
@@ -62,10 +100,10 @@
     }
 
 	#toolbar-container>*:not(:first-child):not(:hover)>svg {
-        display: block;
-		width: 24px;
-		height: 24px;
+		display: block;
         filter: invert();
+		height: 24px;
+		width: 24px;
 	}
 
 	#toolbar-container>*:not(:first-child):not(:hover)>*:not(:first-child) {
diff --git a/client/public/stylesheets/style/style.css b/client/public/stylesheets/style/style.css
index 31f08e62..485c6b5a 100644
--- a/client/public/stylesheets/style/style.css
+++ b/client/public/stylesheets/style/style.css
@@ -72,6 +72,18 @@ form {
     padding: 0;
 }
 
+button svg.fill-coalition * {
+    fill: var(--primary-neutral) !important;
+}
+
+button svg.fill-coalition[data-coalition="blue"] * {
+    fill: var(--primary-blue) !important;
+}
+
+button svg.fill-coalition[data-coalition="red"] * {
+    fill: var(--primary-red) !important;
+}
+
 .pill {
     background-color: var(--background-steel);
     border-radius: 999px;
@@ -372,7 +384,7 @@ button.ol-button-warning>svg:first-child {
 }
 
 nav.ol-panel {
-    column-gap: 20px;
+    column-gap: 10px;
     display: flex;
     flex-direction: row;
     height: 58px;
@@ -384,8 +396,7 @@ nav.ol-panel> :last-child {
 
 .ol-panel .ol-group {
     align-items: center;
-    border-radius: var(--border-radius-sm);
-    column-gap: 10px;
+    column-gap: 12px;
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
@@ -652,13 +663,13 @@ nav.ol-panel> :last-child {
 }
 
 .ol-navbar-buttons-group button.off svg * {
-    fill: white !important;
-    stroke: white !important;
+    fill: white;
+    stroke: white;
 }
 
 .ol-navbar-buttons-group button svg * {
-    fill: var(--background-steel) !important;
-    stroke: var(--background-steel) !important;
+    fill: var(--background-steel);
+    stroke: var(--background-steel);
 }
 
 .ol-navbar-buttons-group .protectable button:first-of-type {
@@ -1590,6 +1601,24 @@ input[type=number]::-webkit-outer-spin-button {
     fill: lightgray;
 }
 
+#map-visibility-options .ol-select-options .ol-checkbox {
+    font-size:13px;
+    font-weight:400;
+    padding:6px 15px;
+}
+
+#map-visibility-options .ol-select-options .ol-checkbox:first-of-type {
+    padding-top:12px;
+}
+
+#map-visibility-options .ol-select-options .ol-checkbox:last-of-type {
+    padding-bottom:12px;
+}
+
+#map-visibility-options .ol-select-options .ol-checkbox label:hover span {
+    text-decoration: underline;
+}
+
 .ol-log-entry:first-of-type {
     border-top: 1px solid #FFFFFF44;
 }
@@ -1685,4 +1714,5 @@ input[type=number]::-webkit-outer-spin-button {
     50% {
         opacity: 0;
     }
-}
\ No newline at end of file
+}
+
diff --git a/client/public/themes/olympus/images/buttons/visibility/circle-dot.svg b/client/public/themes/olympus/images/buttons/visibility/circle-dot.svg
new file mode 100644
index 00000000..f98ede3a
--- /dev/null
+++ b/client/public/themes/olympus/images/buttons/visibility/circle-dot.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-352a96 96 0 1 1 0 192 96 96 0 1 1 0-192z"/></svg>
\ No newline at end of file
diff --git a/client/public/themes/olympus/images/buttons/visibility/flag.svg b/client/public/themes/olympus/images/buttons/visibility/flag.svg
new file mode 100644
index 00000000..a1efc147
--- /dev/null
+++ b/client/public/themes/olympus/images/buttons/visibility/flag.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M64 32C64 14.3 49.7 0 32 0S0 14.3 0 32V64 368 480c0 17.7 14.3 32 32 32s32-14.3 32-32V352l64.3-16.1c41.1-10.3 84.6-5.5 122.5 13.4c44.2 22.1 95.5 24.8 141.7 7.4l34.7-13c12.5-4.7 20.8-16.6 20.8-30V66.1c0-23-24.2-38-44.8-27.7l-9.6 4.8c-46.3 23.2-100.8 23.2-147.1 0c-35.1-17.6-75.4-22-113.5-12.5L64 48V32z"/></svg>
\ No newline at end of file
diff --git a/client/public/themes/olympus/images/buttons/visibility/shield.svg b/client/public/themes/olympus/images/buttons/visibility/shield.svg
new file mode 100644
index 00000000..d8ff87ec
--- /dev/null
+++ b/client/public/themes/olympus/images/buttons/visibility/shield.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M256 0c4.6 0 9.2 1 13.4 2.9L457.7 82.8c22 9.3 38.4 31 38.3 57.2c-.5 99.2-41.3 280.7-213.6 363.2c-16.7 8-36.1 8-52.8 0C57.3 420.7 16.5 239.2 16 140c-.1-26.2 16.3-47.9 38.3-57.2L242.7 2.9C246.8 1 251.4 0 256 0zm0 66.8V444.8C394 378 431.1 230.1 432 141.4L256 66.8l0 0z"/></svg>
\ No newline at end of file
diff --git a/client/public/themes/olympus/images/icons/eye-solid.svg b/client/public/themes/olympus/images/icons/eye-solid.svg
index 3b5d2412..63bc71ba 100644
--- a/client/public/themes/olympus/images/icons/eye-solid.svg
+++ b/client/public/themes/olympus/images/icons/eye-solid.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"/></svg>
\ No newline at end of file
diff --git a/client/src/contextmenus/coalitionareacontextmenu.ts b/client/src/contextmenus/coalitionareacontextmenu.ts
index ad6ab040..ca993f6e 100644
--- a/client/src/contextmenus/coalitionareacontextmenu.ts
+++ b/client/src/contextmenus/coalitionareacontextmenu.ts
@@ -27,8 +27,8 @@ export class CoalitionAreaContextMenu extends ContextMenu {
         super(ID);
 
         /* Create the coalition switch */
-        this.#coalitionSwitch = new Switch("coalition-area-switch", (value: boolean) => this.#onSwitchClick(value));
-        this.#coalitionSwitch.setValue(false);
+        this.#coalitionSwitch = new Switch("coalition-area-switch", (value: boolean) => this.#onSwitchClick(value), true);
+        this.#coalitionSwitch.setValue(true);
 
         /* Create the controls of the IADS creation submenu */
         this.#iadsTypesDropdown = new Dropdown("iads-units-type-options", () => { });
@@ -146,11 +146,11 @@ export class CoalitionAreaContextMenu extends ContextMenu {
 
     /** Callback event called when the coalition switch is clicked to change the coalition of the CoalitionArea
      * 
-     * @param value Switch position (false: blue, true: red)
+     * @param value Switch position (false: red, true: blue)
      */
     #onSwitchClick(value: boolean) {
         if (getApp().getMissionManager().getCommandModeOptions().commandMode == GAME_MASTER) {
-            this.getCoalitionArea()?.setCoalition(value ? "red" : "blue");
+            this.getCoalitionArea()?.setCoalition(value ? "blue" : "red");
             this.getContainer()?.querySelectorAll('[data-coalition]').forEach((element: any) => {
                 element.setAttribute("data-coalition", this.getCoalitionArea()?.getCoalition())
             });
diff --git a/client/views/contextmenus/coalitionarea.ejs b/client/views/contextmenus/coalitionarea.ejs
index 50932352..ba10be85 100644
--- a/client/views/contextmenus/coalitionarea.ejs
+++ b/client/views/contextmenus/coalitionarea.ejs
@@ -1,12 +1,12 @@
 <div id="coalition-area-contextmenu" class="ol-context-menu" oncontextmenu="return false;">
     <div id="area-coalition-label" data-coalition="blue"></div>
     <div class="upper-bar ol-panel">
-        <div id="coalition-area-switch" class="ol-switch ol-coalition-switch"></div>
+        <div class="switch-control coalition no-label"><div id="coalition-area-switch" class="ol-switch"></div></div>
         <button data-coalition="blue" id="iads-button" title="Create Integrated Air Defense System" data-on-click="coalitionAreaContextMenuShow"
             data-on-click-params='{ "type": "iads" }' class="ol-contexmenu-button"><img src="/resources/theme/images/buttons/spawn/sam.svg" inject-svg></button>
         <!--<button data-coalition="blue" id="cap-button" title="Create Combat Air Patrols" data-on-click="coalitionAreaContextMenuShow"
             data-on-click-params='{ "type": "cap" }' class="ol-contexmenu-button"></button>-->
-        <button data-coalition="blue" id="coalitionarea-back-button" title="Bring area to back" data-on-click="coalitionAreaBringToBack"
+        <button data-coalition="blue" id="coalitionarea-back-button" title="Make to bottom layer" data-on-click="coalitionAreaBringToBack"
              class="ol-contexmenu-button"><img src="/resources/theme/images/buttons/other/back.svg" inject-svg></button>
         <button data-coalition="blue" id="coalitionarea-delete-button" title="Delete area" data-on-click="coalitionAreaDelete"
              class="ol-contexmenu-button"><img src="/resources/theme/images/buttons/other/delete.svg" inject-svg></button>
diff --git a/client/views/toolbars/primary.ejs b/client/views/toolbars/primary.ejs
index e30a7f30..fc9f7d75 100644
--- a/client/views/toolbars/primary.ejs
+++ b/client/views/toolbars/primary.ejs
@@ -31,14 +31,14 @@
 
     <div class="ol-group">
         <div id="map-type" class="ol-select">
-            <div class="ol-select-value"><img src="resources/theme/images/icons/map-source.svg" inject-svg><span class="ol-select-value-text">ArcGIS Satellite</span></div>
+            <div class="ol-select-value"><img src="resources/theme/images/icons/map-source.svg" inject-svg /><span class="ol-select-value-text">ArcGIS Satellite</span></div>
             <div class="ol-select-options">
                 <!-- Here the available map sources will be listed-->
             </div>
         </div>
 
         <div id="map-visibility-options" class="ol-select">
-            <div class="ol-select-value"><img src="/resources/theme/images/icons/gears-solid.svg" inject-svg>Options</div>
+            <div class="ol-select-value"><img src="/resources/theme/images/icons/gears-solid.svg" inject-svg />Options</div>
             <div class="ol-select-options">
                 <!-- This is where the advanced visibility options will be listed -->
             </div>
@@ -46,25 +46,28 @@
     </div>
 </nav>
 <nav class="ol-panel" oncontextmenu="return false;">
-    <img src="resources/theme/images/icons/eye-solid.svg" inject-svg>
+    <div class="ol-panel-tab">
+        <img src="resources/theme/images/icons/eye-solid.svg" inject-svg />
+        <span>View</span>
+    </div>
     <div id="unit-visibility-control" class="ol-group ol-navbar-buttons-group">
         <!-- Here the available visibility controls will be listed -->
     </div>
 
-    <div id="coalition-visibility-control" class="ol-group ol-group-button-toggle">
+    <div id="coalition-visibility-control" class="ol-group ol-navbar-buttons-group">
         <div>
             <button id="coalition-visibility-control-blue" data-on-click="toggleCoalitionVisibility"
-                data-on-click-params='{ "coalition": "blue" }'><span class="accent-bluefor">BLUEFOR</span></button>
+                data-on-click-params='{ "coalition": "blue" }'><img src="/resources/theme/images/buttons/visibility/shield.svg" class="fill-coalition" data-coalition="blue" inject-svg /></button>
         </div>
 
         <div>
             <button id="coalition-visibility-control-red" data-on-click="toggleCoalitionVisibility"
-                data-on-click-params='{ "coalition": "red" }'><span class="accent-redfor">REDFOR</span></button>
+                data-on-click-params='{ "coalition": "red" }'><img src="/resources/theme/images/buttons/visibility/shield.svg" class="fill-coalition" data-coalition="red" inject-svg /></button>
         </div>
 
         <div>
             <button id="coalition-visibility-control-neutral" data-on-click="toggleCoalitionVisibility"
-                data-on-click-params='{ "coalition": "neutral" }'><span class="accent-neutral">NEUTRAL</span></button>
+                data-on-click-params='{ "coalition": "neutral" }'><img src="/resources/theme/images/buttons/visibility/shield.svg" class="fill-coalition" data-coalition="neutral" inject-svg /></button>
         </div>
     </div>
 </nav>
\ No newline at end of file