diff --git a/client/public/images/buttons/edit.svg b/client/public/images/buttons/edit.svg
new file mode 100644
index 00000000..5b51c67c
--- /dev/null
+++ b/client/public/images/buttons/edit.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.4766 9.25718L11.3099 8.44468C11.4401 8.31772 11.6667 8.40659 11.6667 8.58941V12.2812C11.6667 12.9541 11.1068 13.5 10.4167 13.5H1.25C0.559896 13.5 0 12.9541 0 12.2812V3.3437C0 2.67085 0.559896 2.12495 1.25 2.12495H8.3724C8.55729 2.12495 8.65104 2.34331 8.52083 2.4728L7.6875 3.2853C7.64844 3.32339 7.59635 3.3437 7.53906 3.3437H1.25V12.2812H10.4167V9.39937C10.4167 9.34605 10.4375 9.29526 10.4766 9.25718ZM14.5547 4.13335L7.71615 10.8009L5.36198 11.0548C4.67969 11.1285 4.09896 10.5673 4.17448 9.89702L4.4349 7.60171L11.2734 0.934131C11.8698 0.352686 12.8333 0.352686 13.4271 0.934131L14.5521 2.03101C15.1484 2.61245 15.1484 3.55444 14.5547 4.13335ZM11.9818 4.91792L10.4688 3.44272L5.63021 8.16284L5.4401 9.82085L7.14063 9.6355L11.9818 4.91792ZM13.6693 2.89429L12.5443 1.79741C12.4375 1.69331 12.263 1.69331 12.1589 1.79741L11.3542 2.58198L12.8672 4.05718L13.6719 3.27261C13.776 3.16597 13.776 2.99839 13.6693 2.89429Z" fill="white"/>
+</svg>
diff --git a/client/public/stylesheets/layout.css b/client/public/stylesheets/layout.css
index b75c8f16..1bcc28fa 100644
--- a/client/public/stylesheets/layout.css
+++ b/client/public/stylesheets/layout.css
@@ -57,6 +57,32 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
 	position: static;
 }
 
+
+.ol-button-box {
+	column-gap: 6px;
+	display:flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	margin:5px 0;
+	row-gap: 5px;
+}
+
+.ol-button-box button {
+	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;
 	height: 30px;
diff --git a/client/public/stylesheets/olympus.css b/client/public/stylesheets/olympus.css
index d81d1601..f9259b27 100644
--- a/client/public/stylesheets/olympus.css
+++ b/client/public/stylesheets/olympus.css
@@ -82,6 +82,10 @@ button[disabled="disabled"] {
     width:fit-content;
 }
 
+.ol-panel-padding-lg {
+    padding:24px 30px;
+}
+
 .ol-select {
     color: var( --nav-text );
 }
@@ -228,7 +232,6 @@ button[disabled="disabled"] {
 }
 
 .ol-panel-board h1, .ol-panel-board h2 {
-    font-size:18px;
     font-weight: var( --font-weight-bolder );
     margin: 0;
     padding:0 0 5px 0;
@@ -238,15 +241,31 @@ button[disabled="disabled"] {
     font-size:14px;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
+h1, h2, h3, h4, h5, h6 {
     margin: 0px;
 }
 
+h1 {
+    font-size:36px;
+    font-weight: 800;
+}
+
+h2 {
+    font-size:24px;
+    font-weight: bold;
+}
+
+h3 {
+    font-size:18px;
+    font-weight: bold;
+}
+
+h4 {
+    font-size:14px;
+    font-weight: normal;
+}
+
+
 nav.ol-panel {
     column-gap: 20px;
     display:flex;
@@ -266,10 +285,6 @@ nav.ol-panel > :last-child {
     flex-wrap:nowrap;
 }
 
-.ol-panel .ol-group button {
-    border:1px solid white;
-}
-
 .ol-panel .ol-group  {
     border-radius: var( --border-radius-sm );
 }
@@ -437,12 +452,54 @@ nav.ol-panel > :last-child {
 	font-weight: var(--font-weight-bolder);
 }
 
+
+
 #unit-info-panel {
     display: flex;
     flex-direction: column;
 }
 
+#unit-info-panel #unit-identification {
+    align-items: center;
+    display:flex;
+    margin-bottom:11px;
+}
 
+#unit-info-panel #unit-identification .unit {
+    height:28px;
+    margin-right:10px;
+    width:28px;
+}
+
+#unit-info-panel #unit-identification .unit .unit-marker {
+    background-size: 28px 28px;
+    height:28px;
+    width:28px;
+}
+
+#unit-info-panel #unit-identification .unit .unit-short-label {
+    font-size:12px;
+}
+
+#unit-info-panel #unit-identification #unit-name {
+    background-color:transparent;
+    border:none;
+    color:white;
+    font-size:18px;
+    font-weight: var( --font-weight-bolder );
+    outline:none;
+    overflow: hidden;
+    white-space: nowrap;
+    width: 130px;
+}
+
+#edit-unit-name {
+    background-image: url( "/images/buttons/edit.svg" );
+    background-repeat: no-repeat;
+    height:14px;
+    margin-left:10px;
+    width:15px;
+}
 
 
 
diff --git a/client/public/stylesheets/units.css b/client/public/stylesheets/units.css
index 7753f574..9d762ce6 100644
--- a/client/public/stylesheets/units.css
+++ b/client/public/stylesheets/units.css
@@ -15,12 +15,15 @@
 
 div.unit {
     align-items: center;
-    cursor:pointer;
     display:flex;
     justify-content: center;
     position:relative;
 }
 
+div.unit:not( .no-function ) {
+    cursor:pointer;
+}
+
 [data-hide-aircraft] div.unit-air,
 [data-hide-ground] div.unit-ground,
 [data-hide-sam] div.unit-sam,
@@ -117,7 +120,7 @@ div.unit-air .unit-marker {
     width: var( --unit-air-marker-width );
 }
 
-div.unit-air:hover .unit-marker, div.unit-air[data-is-selected="true"] .unit-marker {
+div.unit-air:not( .no-function ):hover  .unit-marker, div.unit-air[data-is-selected="true"] .unit-marker {
     background-image: var( --unit-air-marker-neutral-hover-url );
 }
 
@@ -126,7 +129,7 @@ div.unit-air[data-coalition="blue"] .unit-marker {
     background-image: var( --unit-air-marker-blue-url );
 }
 
-div.unit-air[data-coalition="blue"]:hover .unit-marker, div.unit-air[data-coalition="blue"][data-is-selected="true"] .unit-marker {
+div.unit-air[data-coalition="blue"]:not( .no-function ):hover .unit-marker, div.unit-air[data-coalition="blue"][data-is-selected="true"] .unit-marker {
     background-image: var( --unit-air-marker-blue-hover-url );
 }
 
@@ -135,7 +138,7 @@ div.unit-air[data-coalition="red"] .unit-marker {
     background-image: var( --unit-air-marker-red-url );
 }
 
-div.unit-air[data-coalition="red"]:hover .unit-marker, div.unit-air[data-coalition="red"][data-is-selected="true"] .unit-marker {
+div.unit-air[data-coalition="red"]:not( .no-function ):hover .unit-marker, div.unit-air[data-coalition="red"][data-is-selected="true"] .unit-marker {
     background-image: var( --unit-air-marker-red-hover-url );
 }
 
@@ -218,6 +221,7 @@ div.unit-building[data-coalition="red"] .unit-marker {
 
 
 div.unit .unit-short-label {
+    color: var( --secondary-gunmetal-grey );
     font-size: var(--unit-font-size);
     font-weight: var(--unit-font-weight);
     position: absolute;
diff --git a/client/src/index.ts b/client/src/index.ts
index a0779b9d..aa3f717d 100644
--- a/client/src/index.ts
+++ b/client/src/index.ts
@@ -101,6 +101,31 @@ function setup() {
 
     });
 
+    
+    const unitName = document.getElementById( "unit-name" );
+
+    if ( unitName instanceof HTMLInputElement ) {
+
+        unitName.addEventListener( "change", ev => {
+            unitName.setAttribute( "disabled", "true" );
+            unitName.setAttribute( "readonly", "true" );
+            
+            //  Do something with this:
+            console.log( unitName.value );
+        });
+        
+
+        document.addEventListener( "editUnitName", ev => {
+    
+            unitName.removeAttribute( "disabled" );
+            unitName.removeAttribute( "readonly" );
+            unitName.focus();
+
+        });
+
+    }
+
+
 
     document.addEventListener( "toggleCoalitionVisibility", ( ev:CustomEventInit ) => {
         document.body.toggleAttribute( "data-hide-" + ev.detail.coalition );
diff --git a/client/src/panels/unitcontrolpanel.ts b/client/src/panels/unitcontrolpanel.ts
index a8d49fa0..191d11d1 100644
--- a/client/src/panels/unitcontrolpanel.ts
+++ b/client/src/panels/unitcontrolpanel.ts
@@ -25,15 +25,15 @@ export class UnitControlPanel extends Panel {
         /* Option buttons */
         this.#optionButtons["ROE"] = ROEs.map((option: string) => {
             var button = document.createElement("button");
-            button.innerText = option;
-            button.addEventListener("click", () => getUnitsManager().selectedUnitsSetROE(button.value));
+            button.title = option;
+            button.addEventListener("click", () => getUnitsManager().selectedUnitsSetROE(button.title));
             return button;
         })
 
         this.#optionButtons["reactionToThreat"] = reactionsToThreat.map((option: string) => {
             var button = document.createElement("button");
-            button.innerText = option;
-            button.addEventListener("click", () => getUnitsManager().selectedUnitsSetROE(button.value));
+            button.title = option;
+            button.addEventListener("click", () => getUnitsManager().selectedUnitsSetROE(button.title));
             return button;
         })
 
diff --git a/client/views/uikit.ejs b/client/views/uikit.ejs
index fd85f549..648b3f31 100644
--- a/client/views/uikit.ejs
+++ b/client/views/uikit.ejs
@@ -104,7 +104,7 @@
 
                 <div class="content">
 
-                    <div class="content-header">Primary nav</div>
+                    <div class="content-header">Unit Control Panel</div>
                     <div class="content-body">
 
                         <div class="example">
@@ -1612,15 +1612,15 @@
                             <div class="ol-panel">
                                 <div class="ol-panel-board">
                                     <div class="panel-section">
-                                        <h1>Unit Callsign</h1>
+                                        <h3>Unit Callsign</h3>
                                         <div class="pill highlight-primary">Airframe</div>
                                         <div class="pill highlight-neutral">Group</div>
                                     </div>
                                     <div class="panel-section">
-                                        <h2>Flight data</h2>
+                                        <h4>Flight data</h4>
                                     </div>
                                     <div class="panel-section">
-                                        <h2>Loadout</h2>
+                                        <h4>Loadout</h4>
                                     </div>
                                 </div>
                             </div>
@@ -1734,6 +1734,21 @@
                 
             });
 
+
+            const $roe = document.getElementById( "roe-buttons-container" );
+            [ "Free", "Designated free", "Designated", "Return", "Hold" ].forEach( option => {
+                let $btn = document.createElement( "button" );
+                $btn.title = option;
+                $roe.appendChild( $btn );
+            });
+
+            const $threat = document.getElementById( "reaction-to-threat-buttons-container" );
+            [ "None", "Passive", "Evade", "Escape", "Abort" ].forEach( option => {
+                let $btn = document.createElement( "button" );
+                $btn.title = option;
+                $threat.appendChild( $btn );
+            });
+
         </script>
 
     </body>
diff --git a/client/views/unitcontrolpanel.ejs b/client/views/unitcontrolpanel.ejs
index 6c4f6c14..2e6e9bb7 100644
--- a/client/views/unitcontrolpanel.ejs
+++ b/client/views/unitcontrolpanel.ejs
@@ -1,22 +1,30 @@
-<div id="unit-control-panel" class="ol-panel ol-panel-padded">
-    <h2>Selected units</h2>
-    
+<div id="unit-control-panel" class="ol-panel ol-panel-padding-lg"> 
 
     <div id="unit-info-panel">
         <div id="general" class="panel-section">
-            <h3>
-                <div id="unit-name">Olympus 1-1</div>
-                <button>[e]</button>
-            </h3>
+
+            <div id="unit-identification">
+                <div class="unit unit-air no-function">
+                    <div class="unit-marker"></div>
+                    <div class="unit-short-label">18</div>
+                </div>
+                
+                <input id="unit-name" value="Olympus 1-1" readonly disabled />
+
+                <button id="edit-unit-name" data-on-click="editUnitName"></button>
+            </div>
+
             <div id="name" class="pill highlight-primary">Name</div>
             <div id="group-name" class="pill highlight-primary">Group</div>
             <div id="task" class="pill highlight-primary">Task</div>
         </div>
+
         <div id="selected-units-container" class="ol-scroll">
-        <!-- This is where all the unit selection buttons will be shown-->
-    </div>
+            <!-- This is where all the unit selection buttons will be shown-->
+        </div>
+
         <div id="flight-data" class="panel-section">
-            <h3 id="flight-data-label">Flight data</h3>
+            <h4 id="flight-data-label">Flight data</h4>
             <div id="latitude"></div>
             <div id="longitude"></div>
             <div class="data-grid">
@@ -26,7 +34,7 @@
             </div>
         </div>
         <div id="loadout-data" class="panel-section">
-            <h3 id="loadout-label">Loadout</h3>
+            <h4 id="loadout-label">Loadout</h4>
             <div class="data-grid">
                 <div class="data-row"><img class="icon-small" src="images/icons/fuel.svg"><h5>Fuel</h5><h4 id="fuel"></h4></div>
             </div>
@@ -49,18 +57,20 @@
         </div>
     </div>
 
-    <h3>Formation</h3>
-    <div id="formation-buttons-container">
+    <!-- <h3>Formation</h3> -->
+    <!-- <div id="formation-buttons-container"> -->
          <!-- This is where all the formation control buttons will be shown -->
+    <!-- </div> -->
+
+    <div id="roe">
+        <h4>Rules of engagement</h4>
+        <div id="roe-buttons-container" class="ol-group ol-button-box">
+             <!-- This is where the roe buttons will be shown -->
+        </div>
     </div>
 
-    <h3>Rules of engagement</h3>
-    <div id="roe-buttons-container">
-         <!-- This is where the roe buttons will be shown -->
-    </div>
-
-    <h3>Reaction to threat</h3>
-    <div id="reaction-to-threat-buttons-container">
+    <h4>Reaction to threat</h4>
+    <div id="reaction-to-threat-buttons-container" class="ol-group ol-button-box">
          <!-- This is where the reaction to threat buttons will be shown -->
     </div>
 </div>