diff --git a/client/public/stylesheets/layout.css b/client/public/stylesheets/layout.css
index c8e31a4d..fd0fb636 100644
--- a/client/public/stylesheets/layout.css
+++ b/client/public/stylesheets/layout.css
@@ -58,6 +58,36 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
 	display:block !important;
 }
 
+#unit-control-panel #selected-units-container {
+	align-items: center;
+	border-radius: var( --border-radius-md );
+	display:flex;
+	flex-direction: column;
+	row-gap: 4px;
+}
+
+#unit-control-panel #selected-units-container button {
+	font-size: 12px;
+	padding:8px 0;
+	position: relative;
+	width:90%;
+}
+
+#unit-control-panel #selected-units-container button::before {
+	background-color: var( --accent-light-blue );
+	border-radius: var( --border-radius-sm );
+	content: attr( data-short-label );
+	padding:4px;
+	position: absolute;
+	translate:-40px -4px;
+}
+
+#unit-control-panel #selected-units-container button::after {
+	content: attr( data-callsign );
+}
+
+
+
 dl.data-grid {
 	align-items: center;
 	display:flex;
diff --git a/client/public/stylesheets/olympus.css b/client/public/stylesheets/olympus.css
index 33296617..e22b7d82 100644
--- a/client/public/stylesheets/olympus.css
+++ b/client/public/stylesheets/olympus.css
@@ -392,6 +392,7 @@ nav.ol-panel> :last-child {
 
 .highlight-coalition[data-coalition="red"], .highlight-redfor {
     background-color: var(--primary-red);
+    color: white;
 }
 
 
diff --git a/client/src/panels/unitcontrolpanel.ts b/client/src/panels/unitcontrolpanel.ts
index 3f1d92b8..e9a8c3a1 100644
--- a/client/src/panels/unitcontrolpanel.ts
+++ b/client/src/panels/unitcontrolpanel.ts
@@ -69,6 +69,12 @@ export class UnitControlPanel extends Panel {
             {
                 var button = document.createElement("button");
                 button.innerText = unit.getBaseData().unitName;
+                button.setAttribute( "data-short-label", unit.getBaseData().name );
+                button.classList.add( "pill", "highlight-coalition" )
+                
+                //  TODO: make this dynamic, Mr. Weltro.
+                button.setAttribute( "data-coalition", "blue" );
+
                 button.addEventListener("click", () => getUnitsManager().selectUnit(unit.ID, true));
                 return (button);
             }));
diff --git a/client/views/unitcontrolpanel.ejs b/client/views/unitcontrolpanel.ejs
index 3471393a..aed04d5e 100644
--- a/client/views/unitcontrolpanel.ejs
+++ b/client/views/unitcontrolpanel.ejs
@@ -15,6 +15,7 @@
 
         <div id="selected-units-container" class="ol-scroll">
             <!-- This is where all the unit selection buttons will be shown-->
+            <button class="pill highlight-coalition" data-coalition="blue" data-short-label="18">Olympus 1-1</button>
         </div>
 
         <div id="flight-data">