diff --git a/client/public/stylesheets/layout.css b/client/public/stylesheets/layout.css
index 8de7e858..af9cc9cc 100644
--- a/client/public/stylesheets/layout.css
+++ b/client/public/stylesheets/layout.css
@@ -150,20 +150,11 @@ dl.data-grid dd.br-info[data-bearing][data-distance][data-distance-units]::after
 }
 
 .ol-button-box button {
+	background-repeat: no-repeat;;
 	border:1px solid var( --accent-light-blue );
 	color: var( --accent-light-blue );
 }
 
-.ol-button-box button:first-of-type, .ol-button-box button.selected {
-	border-color: white;
-	background-color: white;
-	color: var( --background-steel );
-}
-
-.ol-button-box button:after {
-	content: "[]";
-}
-
 
 #connection-status-panel {
 	bottom: 20px;
diff --git a/client/public/stylesheets/olympus.css b/client/public/stylesheets/olympus.css
index 5d24df02..7b949ea6 100644
--- a/client/public/stylesheets/olympus.css
+++ b/client/public/stylesheets/olympus.css
@@ -54,7 +54,7 @@ button {
     color: whitesmoke;
     cursor: pointer;
     font-weight: var(--font-weight-bolder);
-    padding: 8px;
+    padding: 6px;
 }
 
 button[disabled="disabled"] {
@@ -668,3 +668,111 @@ body[data-hide-naval] #unit-visibility-control-naval {
 .toggle-input:checked ~ .toggle-fill::after {
     transform: translateX(var(--height));
 }
+
+
+#roe-buttons-container button {
+    background-color:transparent;
+    border:1px solid var( --accent-light-blue );
+}
+
+#roe-buttons-container button.selected, #reaction-to-threat-buttons-container button.selected {
+    background-color: white;
+    border-color: white;
+}
+
+#roe-buttons-container button::before, #reaction-to-threat-buttons-container button::before {
+    background-repeat: no-repeat;
+    background-size:16px 16px;
+    content: "";
+    display:block;
+    height:16px;
+    width:16px;
+}
+
+
+
+#roe-buttons-container button[title="Free"]::before {
+    background-image: url( "/themes/olympus/images/icons_roe_free_light.svg");
+}
+
+#roe-buttons-container button[title="Designated free"]::before {
+    background-image: url( "/themes/olympus/images/icons_roe_stop_light.svg");
+}
+
+#roe-buttons-container button[title="Designated"]::before {
+    background-image: url( "/themes/olympus/images/icons_roe_stop_light.svg");
+}
+
+#roe-buttons-container button[title="Return"]::before {
+    background-image: url( "/themes/olympus/images/icons_roe_target_light.svg");
+}
+
+#roe-buttons-container button[title="Hold"]::before {
+    background-image: url( "/themes/olympus/images/icons_actions_nothing_light.svg");
+}
+
+#roe-buttons-container button[title="Free"].selected::before {
+    background-image: url( "/themes/olympus/images/icons_roe_free_dark.svg");
+}
+
+#roe-buttons-container button[title="Designated free"].selected::before {
+    background-image: url( "/themes/olympus/images/icons_roe_stop_dark.svg");
+}
+
+#roe-buttons-container button[title="Designated"].selected::before {
+    background-image: url( "/themes/olympus/images/icons_roe_stop_dark.svg");
+}
+
+#roe-buttons-container button[title="Return"].selected::before {
+    background-image: url( "/themes/olympus/images/icons_roe_target_dark.svg");
+}
+
+#roe-buttons-container button[title="Hold"].selected::before {
+    background-image: url( "/themes/olympus/images/icons_actions_nothing_dark.svg");
+}
+
+
+
+#reaction-to-threat-buttons-container button[title="None"]::before {
+    background-image: url( "/themes/olympus/images/icons_actions_nothing_light.svg");
+}
+
+#reaction-to-threat-buttons-container button[title="Passive"]::before {
+    background-image: url( "/themes/olympus/images/icons_roe_stop_light.svg");
+}
+
+#reaction-to-threat-buttons-container button[title="Evade"]::before {
+    background-image: url( "/themes/olympus/images/icons_roe_stop_light.svg");
+}
+
+#reaction-to-threat-buttons-container button[title="Escape"]::before {
+    background-image: url( "/themes/olympus/images/icons_threat_retreat_light.svg");
+}
+
+#reaction-to-threat-buttons-container button[title="Abort"]::before {
+    background-image: url( "/themes/olympus/images/icons_roe_stop_light.svg");
+}
+#reaction-to-threat-buttons-container button[title="None"]::before {
+    background-image: url( "/themes/olympus/images/icons_actions_nothing_light.svg");
+}
+
+
+#reaction-to-threat-buttons-container button[title="None"].selected::before {
+    background-image: url( "/themes/olympus/images/icons_actions_nothing_dark.svg");
+}
+
+#reaction-to-threat-buttons-container button[title="Passive"].selected::before {
+    background-image: url( "/themes/olympus/images/icons_roe_stop_dark.svg");
+}
+
+#reaction-to-threat-buttons-container button[title="Evade"].selected::before {
+    background-image: url( "/themes/olympus/images/icons_roe_stop_dark.svg");
+}
+
+#reaction-to-threat-buttons-container button[title="Escape"].selected::before {
+    background-image: url( "/themes/olympus/images/icons_threat_retreat_dark.svg");
+}
+
+#reaction-to-threat-buttons-container button[title="Abort"].selected::before {
+    background-image: url( "/themes/olympus/images/icons_roe_stop_dark.svg");
+}
\ No newline at end of file
diff --git a/client/src/panels/unitcontrolpanel.ts b/client/src/panels/unitcontrolpanel.ts
index 191d11d1..1e9d75e0 100644
--- a/client/src/panels/unitcontrolpanel.ts
+++ b/client/src/panels/unitcontrolpanel.ts
@@ -23,19 +23,34 @@ export class UnitControlPanel extends Panel {
         this.#airspeedSlider = new Slider("airspeed-slider", 0, 100, "kts", (value: number) => getUnitsManager().selectedUnitsSetSpeed(value / 1.94384));
 
         /* Option buttons */
-        this.#optionButtons["ROE"] = ROEs.map((option: string) => {
+        this.#optionButtons["ROE"] = ROEs.map((option: string, index:number) => {
             var button = document.createElement("button");
             button.title = option;
-            button.addEventListener("click", () => getUnitsManager().selectedUnitsSetROE(button.title));
+            if ( index === 0 ) {
+                button.classList.add( "selected" );
+            }
+            button.addEventListener("click", () => {
+                this.getElement().querySelector("#roe-buttons-container button.selected")?.classList.remove( "selected" );
+                button.classList.add( "selected" );
+                getUnitsManager().selectedUnitsSetROE(button.title);
+            });
             return button;
-        })
+        });
 
-        this.#optionButtons["reactionToThreat"] = reactionsToThreat.map((option: string) => {
+        this.#optionButtons["reactionToThreat"] = reactionsToThreat.map((option: string, index:number) => {
             var button = document.createElement("button");
             button.title = option;
-            button.addEventListener("click", () => getUnitsManager().selectedUnitsSetROE(button.title));
+            if ( index === 0 ) {
+                button.classList.add( "selected" );
+            }
+            button.addEventListener("click", () => {
+                this.getElement().querySelector("#reaction-to-threat-buttons-container button.selected")?.classList.remove( "selected" );
+                button.classList.add( "selected" );
+
+                getUnitsManager().selectedUnitsSetROE(button.title);
+            });
             return button;
-        })
+        });
 
         this.getElement().querySelector("#roe-buttons-container")?.append(...this.#optionButtons["ROE"]);
         this.getElement().querySelector("#reaction-to-threat-buttons-container")?.append(...this.#optionButtons["reactionToThreat"]);