diff --git a/client/public/stylesheets/unitcontrolpanel.css b/client/public/stylesheets/unitcontrolpanel.css
index ddb5143d..4d906b79 100644
--- a/client/public/stylesheets/unitcontrolpanel.css
+++ b/client/public/stylesheets/unitcontrolpanel.css
@@ -13,7 +13,7 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
 }
 
 #unit-control-panel #selected-units-container {
-	align-items: center;
+	align-items: left;
 	border-radius: var( --border-radius-md );
 	display:flex;
 	flex-direction: column;
@@ -21,7 +21,11 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
 }
 
 #unit-control-panel #selected-units-container button {
-	font-size: 12px;
+	align-items: center;
+	border-radius: var( --border-radius-lg );
+	display:flex;
+	font-size: 11px;
+	height:30px;
 	padding:8px 0;
 	position: relative;
 	width:90%;
@@ -29,15 +33,42 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
 
 #unit-control-panel #selected-units-container button::before {
 	background-color: var( --accent-light-blue );
-	border-radius: var( --border-radius-sm );
+	border-radius: var( --border-radius-md );
 	content: attr( data-short-label );
-	padding:4px;
-	position: absolute;
-	translate:-40px -4px;
+	margin:0 5px;
+	padding:4px 6px;
+	white-space: nowrap;
+	width:fit-content;
 }
 
 #unit-control-panel #selected-units-container button::after {
 	content: attr( data-callsign );
+	display: block;
+	overflow: hidden;
+	padding:4px;
+	padding-left:0;
+	text-align: left;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	width:fit-content;
+}
+
+
+#unit-control-panel #selected-units-container button:hover::after {
+	overflow: visible;
+	text-overflow:initial;
+}
+
+#unit-control-panel #selected-units-container button:hover::after {
+	background-color: var( --background-grey );
+}
+
+#unit-control-panel #selected-units-container button[data-coalition="blue"]:hover::after {
+	background-color: var( --primary-blue );
+}
+
+#unit-control-panel #selected-units-container button[data-coalition="red"]:hover::after {
+	background-color: var( --primary-red );
 }
 
 #unit-control-panel h4 {
diff --git a/client/src/panels/unitcontrolpanel.ts b/client/src/panels/unitcontrolpanel.ts
index 856d43f5..49cd7386 100644
--- a/client/src/panels/unitcontrolpanel.ts
+++ b/client/src/panels/unitcontrolpanel.ts
@@ -59,17 +59,38 @@ export class UnitControlPanel extends Panel {
         if (this.getElement() != null && units.length > 0)
         {
             this.#showFlightControlSliders(units);
-            this.getElement().querySelector("#selected-units-container")?.replaceChildren(...units.map((unit: Unit) =>
+
+            this.getElement().querySelector("#selected-units-container")?.replaceChildren(...units.map((unit: Unit, index:number) =>
             {
-                var button = document.createElement("button");
-                button.innerText = unit.getBaseData().unitName;
                 
-                if (unit instanceof Aircraft)
-                    button.setAttribute( "data-short-label", aircraftDatabase.getShortLabelByName(unit.getBaseData().name));
-                else if (unit instanceof GroundUnit)
-                    button.setAttribute( "data-short-label", groundUnitsDatabase.getShortLabelByName(unit.getBaseData().name));
-                else 
+                const baseData = unit.getBaseData();
+
+                if ( index === 0 ) {
+
+                    this.getElement().querySelectorAll(`[data-object|="unit"]`).forEach(  marker => {
+                        marker.setAttribute( "data-coalition", unit.getMissionData().coalition );
+                        const shortLabel = <HTMLElement>marker.querySelector( ".unit-short-label" );
+                        if ( shortLabel ) {
+                            shortLabel.innerText = aircraftDatabase.getShortLabelByName( baseData.name );
+                        }
+                    });
+                }
+
+                var button = document.createElement("button");
+                button.innerText = baseData.unitName;
+
+                if (unit instanceof Aircraft) {
+                    button.innerText = "";
+                    button.setAttribute( "data-short-label", aircraftDatabase.getLabelByName( baseData.name ) );
+                    button.setAttribute( "data-callsign", aircraftDatabase.getLabelByName( baseData.unitName ) );
+                } else if (unit instanceof GroundUnit) {
+
+                    button.setAttribute( "data-short-label", groundUnitsDatabase.getShortLabelByName(baseData.name));
+                    button.setAttribute( "data-callsign", groundUnitsDatabase.getLabelByName( baseData.unitName ) );
+                } else {
                     button.setAttribute( "data-short-label", "");
+                    button.setAttribute( "data-callsign", "" );
+                }
 
                 button.setAttribute( "data-coalition", unit.getMissionData().coalition );
                 button.classList.add( "pill", "highlight-coalition" )
diff --git a/client/views/unitcontrolpanel.ejs b/client/views/unitcontrolpanel.ejs
index 50e6db2c..0c8574a7 100644
--- a/client/views/unitcontrolpanel.ejs
+++ b/client/views/unitcontrolpanel.ejs
@@ -5,7 +5,7 @@
         <div id="unit-identification">
             <div data-object="unit-air-aircraft">
                 <div class="unit-marker"></div>
-                <div class="unit-short-label">18</div>
+                <div class="unit-short-label"></div>
             </div>
             
             <input id="unit-name" value="Olympus 1-1" readonly disabled />