diff --git a/client/public/stylesheets/olympus.css b/client/public/stylesheets/olympus.css
index 78e1b34d..9849cf36 100644
--- a/client/public/stylesheets/olympus.css
+++ b/client/public/stylesheets/olympus.css
@@ -32,12 +32,12 @@
     --unit-marker-centre-y: calc( var( --unit-marker-height ) / 2 );
     --unit-marker-font-size: 12px;
     --unit-marker-font-weight: bold;
-    --unit-marker-height: 80px;
+    --unit-marker-height: 100px;
     --unit-marker-spotlight-fill: var( --secondary-yellow );
     --unit-marker-spotlight-opacity: 68%;
     --unit-marker-spotlight-radius: 28px;
     --unit-marker-stroke-width: 2px;
-    --unit-marker-width: 80px;
+    --unit-marker-width: 150px;
 
     --unit-marker-hotgroup-height: 12px;
     --unit-marker-hotgroup-width: var( --unit-marker-hotgroup-height );
@@ -255,9 +255,9 @@ svg.unit rect.unit-hotgroup {
     fill: var( --secondary-neutral );
     height: var( --unit-marker-hotgroup-height );
     transform: rotate( -45deg );
+    transform-origin: center;
+    translate: calc( var( --unit-marker-centre-x ) + ( var( --unit-marker-hotgroup-width ) / 2 ) ) -44px;
     width: var( --unit-marker-hotgroup-height );
-    x: 13px;
-    y: 33px;
 }
 
 svg.unit text.unit-hotgroup-id {
@@ -363,6 +363,14 @@ svg.unit[data-has-other-ammo="true"] circle.unit-ammo-other {
     fill: var( --secondary-gunmetal-grey );
 }
 
+svg.unit .unit-summary text {
+    fill:white;
+    font-size:10px;
+    paint-order: stroke;
+    stroke: black;
+    stroke-width: 2px;
+}
+
 
 
 /***  Default style  **/
diff --git a/client/public/stylesheets/uikit.css b/client/public/stylesheets/uikit.css
index 9c8bcc2f..44052611 100644
--- a/client/public/stylesheets/uikit.css
+++ b/client/public/stylesheets/uikit.css
@@ -39,6 +39,7 @@ section {
     column-gap: 20px;
     display:flex;
     flex-direction: row;
+    flex-wrap: wrap;
 }
 
 .example {
@@ -65,9 +66,22 @@ section {
 }
 
 #tabs > div {
-    background:rgb(226, 166, 54);
+    background:rgb(199, 174, 120);
     border-radius: 5px;
     color:#333;
     cursor: pointer;
     padding:6px 10px;
+}
+
+
+#overlaying-planes {
+    background-color:#99ccff;
+    padding:20px;
+    position:relative;
+}
+
+#overlaying-planes svg:nth-of-type(2) {
+    position: absolute;
+    left: 40px;
+    top: 10px;
 }
\ No newline at end of file
diff --git a/client/public/uikit.html b/client/public/uikit.html
index cdcaa143..12d1ca8c 100644
--- a/client/public/uikit.html
+++ b/client/public/uikit.html
@@ -224,10 +224,10 @@
                             <svg class="unit" data-coalition="blue" xmlns="http://www.w3.org/2000/svg">
                                 <circle class="unit-spotlight" />
                                 <rect class="unit-hotgroup"></rect>
-                                <text x="38" y="17" class="unit-hotgroup-id">3</text>
+                                <text x="74" y="27" class="unit-hotgroup-id">3</text>
                                 <rect class="unit-selected-border" />
                                 <rect class="unit-marker" />
-                                <text x="50%" y="44px" class="unit-short-label">18</text>
+                                <text x="50%" y="54px" class="unit-short-label">18</text>
                                 <rect class="unit-fuel" />
                                 <rect class="unit-fuel-level" />
                                 <circle class="unit-ammo unit-ammo-fox-1" />
@@ -245,10 +245,10 @@
                             <svg class="unit" data-coalition="blue" data-is-selected="true"  data-has-fox-2="true" xmlns="http://www.w3.org/2000/svg">
                                 <circle class="unit-spotlight" />
                                 <rect class="unit-hotgroup"></rect>
-                                <text x="38" y="17" class="unit-hotgroup-id">4</text>
+                                <text x="74" y="27" class="unit-hotgroup-id">4</text>
                                 <rect class="unit-selected-border" />
                                 <rect class="unit-marker"  />
-                                <text x="50%" y="44px" class="unit-short-label">16</text>
+                                <text x="50%" y="54px" class="unit-short-label">16</text>
                                 <rect class="unit-fuel" />
                                 <rect class="unit-fuel-level" />
                                 <circle class="unit-ammo unit-ammo-fox-1" />
@@ -268,10 +268,10 @@
                             <svg class="unit" data-coalition="red" data-has-fox-2="true" xmlns="http://www.w3.org/2000/svg">
                                 <circle class="unit-spotlight" />
                                 <rect class="unit-hotgroup"></rect>
-                                <text x="38" y="17" class="unit-hotgroup-id">4</text>
+                                <text x="74" y="27" class="unit-hotgroup-id">4</text>
                                 <rect class="unit-selected-border" />
                                 <rect class="unit-marker"  />
-                                <text x="50%" y="44px" class="unit-short-label">16</text>
+                                <text x="50%" y="54px" class="unit-short-label">16</text>
                                 <rect class="unit-fuel" />
                                 <rect class="unit-fuel-level" />
                                 <circle class="unit-ammo unit-ammo-fox-1" />
@@ -291,10 +291,10 @@
                             <svg class="unit" data-coalition="red" data-is-selected="true" data-has-fox-2="true" xmlns="http://www.w3.org/2000/svg">
                                 <circle class="unit-spotlight" />
                                 <rect class="unit-hotgroup"></rect>
-                                <text x="38" y="17" class="unit-hotgroup-id">4</text>
+                                <text x="74" y="27" class="unit-hotgroup-id">4</text>
                                 <rect class="unit-selected-border" />
                                 <rect class="unit-marker"  />
-                                <text x="50%" y="44px" class="unit-short-label">16</text>
+                                <text x="50%" y="54px" class="unit-short-label">16</text>
                                 <rect class="unit-fuel" />
                                 <rect class="unit-fuel-level" />
                                 <circle class="unit-ammo unit-ammo-fox-1" />
@@ -324,7 +324,7 @@
                                 <circle class="unit-spotlight" />
                                 <rect class="unit-selected-border" />
                                 <rect class="unit-marker" />
-                                <text x="50%" y="44px" class="unit-short-label">U</text>
+                                <text x="50%" y="54px" class="unit-short-label">U</text>
                                 <rect class="unit-fuel" />
                                 <rect class="unit-fuel-level" />
                                 <circle class="unit-ammo unit-ammo-fox-1" />
@@ -343,7 +343,7 @@
                                 <circle class="unit-spotlight" />
                                 <rect class="unit-selected-border" />
                                 <rect class="unit-marker" />
-                                <text x="50%" y="44px" class="unit-short-label">U</text>
+                                <text x="50%" y="54px" class="unit-short-label">U</text>
                                 <rect class="unit-fuel" />
                                 <rect class="unit-fuel-level" />
                                 <circle class="unit-ammo unit-ammo-fox-1" />
@@ -361,10 +361,10 @@
                             <svg class="unit" data-is-in-hotgroup="true" xmlns="http://www.w3.org/2000/svg">
                                 <circle class="unit-spotlight" />
                                 <rect class="unit-hotgroup"></rect>
-                                <text x="38" y="17" class="unit-hotgroup-id">4</text>
+                                <text x="74" y="27" class="unit-hotgroup-id">4</text>
                                 <rect class="unit-selected-border" />
                                 <rect class="unit-marker" />
-                                <text x="50%" y="44px" class="unit-short-label">U</text>
+                                <text x="50%" y="54px" class="unit-short-label">U</text>
                                 <rect class="unit-fuel" />
                                 <rect class="unit-fuel-level" />
                                 <circle class="unit-ammo unit-ammo-fox-1" />
@@ -381,10 +381,10 @@
                             <svg class="unit" data-is-selected="true" data-is-in-hotgroup="true" xmlns="http://www.w3.org/2000/svg">
                                 <circle class="unit-spotlight" />
                                 <rect class="unit-hotgroup"></rect>
-                                <text x="38" y="17" class="unit-hotgroup-id">4</text>
+                                <text x="74" y="27" class="unit-hotgroup-id">4</text>
                                 <rect class="unit-selected-border" />
                                 <rect class="unit-marker" />
-                                <text x="50%" y="44px" class="unit-short-label">U</text>
+                                <text x="50%" y="54px" class="unit-short-label">U</text>
                                 <rect class="unit-fuel" />
                                 <rect class="unit-fuel-level" />
                                 <circle class="unit-ammo unit-ammo-fox-1" />
@@ -410,10 +410,10 @@
                             <svg class="unit" data-coalition="blue" xmlns="http://www.w3.org/2000/svg">
                                 <circle class="unit-spotlight" />
                                 <rect class="unit-hotgroup"></rect>
-                                <text x="38" y="17" class="unit-hotgroup-id">4</text>
+                                <text x="74" y="27" class="unit-hotgroup-id">4</text>
                                 <rect class="unit-selected-border" />
                                 <rect class="unit-marker" />
-                                <text x="50%" y="44px" class="unit-short-label">18</text>
+                                <text x="50%" y="54px" class="unit-short-label">18</text>
                                 <rect class="unit-fuel" />
                                 <rect class="unit-fuel-level" />
                                 <circle class="unit-ammo unit-ammo-fox-1" />
@@ -431,10 +431,10 @@
                             <svg class="unit" data-coalition="blue" data-is-selected="true" xmlns="http://www.w3.org/2000/svg">
                                 <circle class="unit-spotlight" />
                                 <rect class="unit-hotgroup"></rect>
-                                <text x="38" y="17" class="unit-hotgroup-id">4</text>
+                                <text x="74" y="27" class="unit-hotgroup-id">4</text>
                                 <rect class="unit-selected-border" />
                                 <rect class="unit-marker" />
-                                <text x="50%" y="44px" class="unit-short-label">18</text>
+                                <text x="50%" y="54px" class="unit-short-label">18</text>
                                 <rect class="unit-fuel" />
                                 <rect class="unit-fuel-level" />
                                 <circle class="unit-ammo unit-ammo-fox-1" />
@@ -452,10 +452,10 @@
                             <svg class="unit" data-coalition="blue" data-is-in-hotgroup="true" xmlns="http://www.w3.org/2000/svg">
                                 <circle class="unit-spotlight" />
                                 <rect class="unit-hotgroup"></rect>
-                                <text x="38" y="17" class="unit-hotgroup-id">2</text>
+                                <text x="74" y="27" class="unit-hotgroup-id">2</text>
                                 <rect class="unit-selected-border" />
                                 <rect class="unit-marker" />
-                                <text x="50%" y="44px" class="unit-short-label">18</text>
+                                <text x="50%" y="54px" class="unit-short-label">18</text>
                                 <rect class="unit-fuel" />
                                 <rect class="unit-fuel-level" />
                                 <circle class="unit-ammo unit-ammo-fox-1" />
@@ -473,10 +473,10 @@
                             <svg class="unit" data-coalition="blue" data-is-in-hotgroup="true" data-is-selected="true" xmlns="http://www.w3.org/2000/svg">
                                 <circle class="unit-spotlight" />
                                 <rect class="unit-hotgroup"></rect>
-                                <text x="38" y="17" class="unit-hotgroup-id">2</text>
+                                <text x="74" y="27" class="unit-hotgroup-id">2</text>
                                 <rect class="unit-selected-border" />
                                 <rect class="unit-marker" />
-                                <text x="50%" y="44px" class="unit-short-label">18</text>
+                                <text x="50%" y="54px" class="unit-short-label">18</text>
                                 <rect class="unit-fuel" />
                                 <rect class="unit-fuel-level" />
                                 <circle class="unit-ammo unit-ammo-fox-1" />
@@ -502,10 +502,10 @@
                             <svg class="unit" data-coalition="red" xmlns="http://www.w3.org/2000/svg">
                                 <circle class="unit-spotlight" />
                                 <rect class="unit-hotgroup"></rect>
-                                <text x="38" y="17" class="unit-hotgroup-id">4</text>
+                                <text x="74" y="27" class="unit-hotgroup-id">4</text>
                                 <rect class="unit-selected-border" />
                                 <rect class="unit-marker" />
-                                <text x="50%" y="44px" class="unit-short-label">29</text>
+                                <text x="50%" y="54px" class="unit-short-label">29</text>
                                 <rect class="unit-fuel" />
                                 <rect class="unit-fuel-level" />
                                 <circle class="unit-ammo unit-ammo-fox-1" />
@@ -523,10 +523,10 @@
                             <svg class="unit" data-coalition="red" data-is-selected="true" xmlns="http://www.w3.org/2000/svg">
                                 <circle class="unit-spotlight" />
                                 <rect class="unit-hotgroup"></rect>
-                                <text x="38" y="17" class="unit-hotgroup-id">4</text>
+                                <text x="74" y="27" class="unit-hotgroup-id">4</text>
                                 <rect class="unit-selected-border" />
                                 <rect class="unit-marker" />
-                                <text x="50%" y="44px" class="unit-short-label">29</text>
+                                <text x="50%" y="54px" class="unit-short-label">29</text>
                                 <rect class="unit-fuel" />
                                 <rect class="unit-fuel-level" />
                                 <circle class="unit-ammo unit-ammo-fox-1" />
@@ -544,10 +544,10 @@
                             <svg class="unit" data-coalition="red" data-is-in-hotgroup="true" xmlns="http://www.w3.org/2000/svg">
                                 <circle class="unit-spotlight" />
                                 <rect class="unit-hotgroup"></rect>
-                                <text x="38" y="17" class="unit-hotgroup-id">2</text>
+                                <text x="74" y="27" class="unit-hotgroup-id">2</text>
                                 <rect class="unit-selected-border" />
                                 <rect class="unit-marker" />
-                                <text x="50%" y="44px" class="unit-short-label">5</text>
+                                <text x="50%" y="54px" class="unit-short-label">5</text>
                                 <rect class="unit-fuel" />
                                 <rect class="unit-fuel-level" />
                                 <circle class="unit-ammo unit-ammo-fox-1" />
@@ -565,10 +565,10 @@
                             <svg class="unit" data-coalition="red" data-is-in-hotgroup="true" data-is-selected="true" xmlns="http://www.w3.org/2000/svg">
                                 <circle class="unit-spotlight" />
                                 <rect class="unit-hotgroup"></rect>
-                                <text x="38" y="17" class="unit-hotgroup-id">2</text>
+                                <text x="74" y="27" class="unit-hotgroup-id">2</text>
                                 <rect class="unit-selected-border" />
                                 <rect class="unit-marker" />
-                                <text x="50%" y="44px" class="unit-short-label">5</text>
+                                <text x="50%" y="54px" class="unit-short-label">5</text>
                                 <rect class="unit-fuel" />
                                 <rect class="unit-fuel-level" />
                                 <circle class="unit-ammo unit-ammo-fox-1" />
@@ -594,10 +594,10 @@
                             <svg class="unit" data-pilot="ai" data-coalition="red" data-is-selected="true" data-has-low-fuel="true" xmlns="http://www.w3.org/2000/svg">
                                 <circle class="unit-spotlight" />
                                 <rect class="unit-hotgroup"></rect>
-                                <text x="38" y="17" class="unit-hotgroup-id">2</text>
+                                <text x="74" y="27" class="unit-hotgroup-id">2</text>
                                 <rect class="unit-selected-border" />
                                 <rect class="unit-marker" />
-                                <text x="50%" y="44px" class="unit-short-label">5</text>
+                                <text x="50%" y="54px" class="unit-short-label">5</text>
                                 <rect class="unit-fuel" />
                                 <rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 0 );" />
                                 <circle class="unit-ammo unit-ammo-fox-1" />
@@ -615,10 +615,10 @@
                             <svg class="unit" data-pilot="ai" data-coalition="red" data-is-selected="true" data-has-low-fuel="true" xmlns="http://www.w3.org/2000/svg">
                                 <circle class="unit-spotlight" />
                                 <rect class="unit-hotgroup"></rect>
-                                <text x="38" y="17" class="unit-hotgroup-id">2</text>
+                                <text x="74" y="27" class="unit-hotgroup-id">2</text>
                                 <rect class="unit-selected-border" />
                                 <rect class="unit-marker" />
-                                <text x="50%" y="44px" class="unit-short-label">5</text>
+                                <text x="50%" y="54px" class="unit-short-label">5</text>
                                 <rect class="unit-fuel" />
                                 <rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 0.1 );" />
                                 <circle class="unit-ammo unit-ammo-fox-1" />
@@ -635,10 +635,10 @@
                             <svg class="unit" data-pilot="ai" data-coalition="red" data-is-selected="true" data-has-low-fuel="true" xmlns="http://www.w3.org/2000/svg">
                                 <circle class="unit-spotlight" />
                                 <rect class="unit-hotgroup"></rect>
-                                <text x="38" y="17" class="unit-hotgroup-id">2</text>
+                                <text x="74" y="27" class="unit-hotgroup-id">2</text>
                                 <rect class="unit-selected-border" />
                                 <rect class="unit-marker" />
-                                <text x="50%" y="44px" class="unit-short-label">5</text>
+                                <text x="50%" y="54px" class="unit-short-label">5</text>
                                 <rect class="unit-fuel" />
                                 <rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 0.2 );" />
                                 <circle class="unit-ammo unit-ammo-fox-1" />
@@ -655,10 +655,10 @@
                             <svg class="unit" data-pilot="ai" data-coalition="red" data-is-selected="true" data-has-low-fuel="true" xmlns="http://www.w3.org/2000/svg">
                                 <circle class="unit-spotlight" />
                                 <rect class="unit-hotgroup"></rect>
-                                <text x="38" y="17" class="unit-hotgroup-id">2</text>
+                                <text x="74" y="27" class="unit-hotgroup-id">2</text>
                                 <rect class="unit-selected-border" />
                                 <rect class="unit-marker" />
-                                <text x="50%" y="44px" class="unit-short-label">5</text>
+                                <text x="50%" y="54px" class="unit-short-label">5</text>
                                 <rect class="unit-fuel" />
                                 <rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 0.3 );" />
                                 <circle class="unit-ammo unit-ammo-fox-1" />
@@ -675,10 +675,10 @@
                             <svg class="unit" data-pilot="ai" data-coalition="red" data-is-selected="true" xmlns="http://www.w3.org/2000/svg">
                                 <circle class="unit-spotlight" />
                                 <rect class="unit-hotgroup"></rect>
-                                <text x="38" y="17" class="unit-hotgroup-id">2</text>
+                                <text x="74" y="27" class="unit-hotgroup-id">2</text>
                                 <rect class="unit-selected-border" />
                                 <rect class="unit-marker" />
-                                <text x="50%" y="44px" class="unit-short-label">5</text>
+                                <text x="50%" y="54px" class="unit-short-label">5</text>
                                 <rect class="unit-fuel" />
                                 <rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 0.33);" />
                                 <circle class="unit-ammo unit-ammo-fox-1" />
@@ -695,10 +695,10 @@
                             <svg class="unit" data-pilot="ai" data-coalition="red" data-is-selected="true" xmlns="http://www.w3.org/2000/svg">
                                 <circle class="unit-spotlight" />
                                 <rect class="unit-hotgroup"></rect>
-                                <text x="38" y="17" class="unit-hotgroup-id">2</text>
+                                <text x="74" y="27" class="unit-hotgroup-id">2</text>
                                 <rect class="unit-selected-border" />
                                 <rect class="unit-marker" />
-                                <text x="50%" y="44px" class="unit-short-label">5</text>
+                                <text x="50%" y="54px" class="unit-short-label">5</text>
                                 <rect class="unit-fuel" />
                                 <rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 0.5 );" />
                                 <circle class="unit-ammo unit-ammo-fox-1" />
@@ -715,10 +715,10 @@
                             <svg class="unit" data-pilot="ai" data-coalition="red" data-is-selected="true" xmlns="http://www.w3.org/2000/svg">
                                 <circle class="unit-spotlight" />
                                 <rect class="unit-hotgroup"></rect>
-                                <text x="38" y="17" class="unit-hotgroup-id">2</text>
+                                <text x="74" y="27" class="unit-hotgroup-id">2</text>
                                 <rect class="unit-selected-border" />
                                 <rect class="unit-marker" />
-                                <text x="50%" y="44px" class="unit-short-label">5</text>
+                                <text x="50%" y="54px" class="unit-short-label">5</text>
                                 <rect class="unit-fuel" />
                                 <rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 0.75 );" />
                                 <circle class="unit-ammo unit-ammo-fox-1" />
@@ -735,10 +735,10 @@
                             <svg class="unit" data-pilot="ai" data-coalition="red" data-is-selected="true" xmlns="http://www.w3.org/2000/svg">
                                 <circle class="unit-spotlight" />
                                 <rect class="unit-hotgroup"></rect>
-                                <text x="38" y="17" class="unit-hotgroup-id">2</text>
+                                <text x="74" y="27" class="unit-hotgroup-id">2</text>
                                 <rect class="unit-selected-border" />
                                 <rect class="unit-marker" />
-                                <text x="50%" y="44px" class="unit-short-label">5</text>
+                                <text x="50%" y="54px" class="unit-short-label">5</text>
                                 <rect class="unit-fuel" />
                                 <rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 1 );" />
                                 <circle class="unit-ammo unit-ammo-fox-1" />
@@ -764,10 +764,10 @@
                             <svg class="unit" data-pilot="ai" data-coalition="blue" data-has-fox-1="true" data-is-selected="true" xmlns="http://www.w3.org/2000/svg">
                                 <circle class="unit-spotlight" />
                                 <rect class="unit-hotgroup"></rect>
-                                <text x="38" y="17" class="unit-hotgroup-id">2</text>
+                                <text x="74" y="27" class="unit-hotgroup-id">2</text>
                                 <rect class="unit-selected-border" />
                                 <rect class="unit-marker" />
-                                <text x="50%" y="44px" class="unit-short-label">16</text>
+                                <text x="50%" y="54px" class="unit-short-label">16</text>
                                 <rect class="unit-fuel" />
                                 <rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 1 );" />
                                 <circle class="unit-ammo unit-ammo-fox-1" />
@@ -784,10 +784,10 @@
                             <svg class="unit" data-pilot="ai" data-coalition="blue" data-has-fox-2="true" data-is-selected="true" xmlns="http://www.w3.org/2000/svg">
                                 <circle class="unit-spotlight" />
                                 <rect class="unit-hotgroup"></rect>
-                                <text x="38" y="17" class="unit-hotgroup-id">2</text>
+                                <text x="74" y="27" class="unit-hotgroup-id">2</text>
                                 <rect class="unit-selected-border" />
                                 <rect class="unit-marker" />
-                                <text x="50%" y="44px" class="unit-short-label">14</text>
+                                <text x="50%" y="54px" class="unit-short-label">14</text>
                                 <rect class="unit-fuel" />
                                 <rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 1 );" />
                                 <circle class="unit-ammo unit-ammo-fox-1" />
@@ -805,10 +805,10 @@
                             <svg class="unit" data-pilot="ai" data-coalition="red" data-has-fox-3="true" data-is-selected="true" xmlns="http://www.w3.org/2000/svg">
                                 <circle class="unit-spotlight" />
                                 <rect class="unit-hotgroup"></rect>
-                                <text x="38" y="17" class="unit-hotgroup-id">2</text>
+                                <text x="74" y="27" class="unit-hotgroup-id">2</text>
                                 <rect class="unit-selected-border" />
                                 <rect class="unit-marker" />
-                                <text x="50%" y="44px" class="unit-short-label">5</text>
+                                <text x="50%" y="54px" class="unit-short-label">5</text>
                                 <rect class="unit-fuel" />
                                 <rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 1 );" />
                                 <circle class="unit-ammo unit-ammo-fox-1" />
@@ -826,10 +826,10 @@
                             <svg class="unit" data-pilot="ai" data-coalition="red" data-has-other-ammo="true" data-is-selected="true" xmlns="http://www.w3.org/2000/svg">
                                 <circle class="unit-spotlight" />
                                 <rect class="unit-hotgroup"></rect>
-                                <text x="38" y="17" class="unit-hotgroup-id">2</text>
+                                <text x="74" y="27" class="unit-hotgroup-id">2</text>
                                 <rect class="unit-selected-border" />
                                 <rect class="unit-marker" />
-                                <text x="50%" y="44px" class="unit-short-label">31</text>
+                                <text x="50%" y="54px" class="unit-short-label">31</text>
                                 <rect class="unit-fuel" />
                                 <rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 1 );" />
                                 <circle class="unit-ammo unit-ammo-fox-1" />
@@ -847,10 +847,10 @@
                             <svg class="unit" data-pilot="ai" data-has-fox-1="true" data-has-fox-2="true" data-has-fox-3="true" data-has-other-ammo="true" data-is-selected="true" xmlns="http://www.w3.org/2000/svg">
                                 <circle class="unit-spotlight" />
                                 <rect class="unit-hotgroup"></rect>
-                                <text x="38" y="17" class="unit-hotgroup-id">2</text>
+                                <text x="74" y="27" class="unit-hotgroup-id">2</text>
                                 <rect class="unit-selected-border" />
                                 <rect class="unit-marker" />
-                                <text x="50%" y="44px" class="unit-short-label">15</text>
+                                <text x="50%" y="54px" class="unit-short-label">15</text>
                                 <rect class="unit-fuel" />
                                 <rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 1 );" />
                                 <circle class="unit-ammo unit-ammo-fox-1" />
@@ -879,10 +879,10 @@
                             <svg class="unit" data-pilot="ai" data-coalition="blue" xmlns="http://www.w3.org/2000/svg">
                                 <circle class="unit-spotlight" />
                                 <rect class="unit-hotgroup"></rect>
-                                <text x="38" y="17" class="unit-hotgroup-id">2</text>
+                                <text x="74" y="27" class="unit-hotgroup-id">2</text>
                                 <rect class="unit-selected-border" />
                                 <rect class="unit-marker" />
-                                <text x="50%" y="44px" class="unit-short-label">16</text>
+                                <text x="50%" y="54px" class="unit-short-label">16</text>
                                 <rect class="unit-fuel" />
                                 <rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 1 );" />
                                 <circle class="unit-ammo unit-ammo-fox-1" />
@@ -901,10 +901,10 @@
                                 <circle class="unit-spotlight" />
                                 <rect class="unit-vvi" style="transform:rotate( calc( var( --unit-marker-air-vvi-rotation-offset ) ) ); height:calc( ( var( --unit-marker-air-height ) / 2 ) + 45px );" />
                                 <rect class="unit-hotgroup"></rect>
-                                <text x="38" y="17" class="unit-hotgroup-id">2</text>
+                                <text x="74" y="27" class="unit-hotgroup-id">2</text>
                                 <rect class="unit-selected-border" />
                                 <rect class="unit-marker" />
-                                <text x="50%" y="44px" class="unit-short-label">15</text>
+                                <text x="50%" y="54px" class="unit-short-label">15</text>
                                 <rect class="unit-fuel" />
                                 <rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 1 );" />
                                 <circle class="unit-ammo unit-ammo-fox-1" />
@@ -923,10 +923,10 @@
                                 <circle class="unit-spotlight" />
                                 <rect class="unit-vvi" style="transform:rotate( calc( var( --unit-marker-air-vvi-rotation-offset ) + 45deg ) ); height:calc( ( var( --unit-marker-air-height ) / 2 ) + 16px );" />
                                 <rect class="unit-hotgroup"></rect>
-                                <text x="38" y="17" class="unit-hotgroup-id">2</text>
+                                <text x="74" y="27" class="unit-hotgroup-id">2</text>
                                 <rect class="unit-selected-border" />
                                 <rect class="unit-marker" />
-                                <text x="50%" y="44px" class="unit-short-label">15</text>
+                                <text x="50%" y="54px" class="unit-short-label">15</text>
                                 <rect class="unit-fuel" />
                                 <rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 1 );" />
                                 <circle class="unit-ammo unit-ammo-fox-1" />
@@ -945,10 +945,10 @@
                                 <circle class="unit-spotlight" />
                                 <rect class="unit-vvi" style="transform:rotate( calc( var( --unit-marker-air-vvi-rotation-offset ) + 90deg ) ); height:calc( ( var( --unit-marker-air-height ) / 2 ) + 16px );" />
                                 <rect class="unit-hotgroup"></rect>
-                                <text x="38" y="17" class="unit-hotgroup-id">2</text>
+                                <text x="74" y="27" class="unit-hotgroup-id">2</text>
                                 <rect class="unit-selected-border" />
                                 <rect class="unit-marker" />
-                                <text x="50%" y="44px" class="unit-short-label">15</text>
+                                <text x="50%" y="54px" class="unit-short-label">15</text>
                                 <rect class="unit-fuel" />
                                 <rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 1 );" />
                                 <circle class="unit-ammo unit-ammo-fox-1" />
@@ -967,10 +967,10 @@
                                 <circle class="unit-spotlight" />
                                 <rect class="unit-vvi" style="transform:rotate( calc( var( --unit-marker-air-vvi-rotation-offset ) + 121deg ) ); height:calc( ( var( --unit-marker-air-height ) / 2 ) + 10px );" />
                                 <rect class="unit-hotgroup"></rect>
-                                <text x="38" y="17" class="unit-hotgroup-id">2</text>
+                                <text x="74" y="27" class="unit-hotgroup-id">2</text>
                                 <rect class="unit-selected-border" />
                                 <rect class="unit-marker" />
-                                <text x="50%" y="44px" class="unit-short-label">18</text>
+                                <text x="50%" y="54px" class="unit-short-label">18</text>
                                 <rect class="unit-fuel" />
                                 <rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 1 );" />
                                 <circle class="unit-ammo unit-ammo-fox-1" />
@@ -989,10 +989,10 @@
                                 <circle class="unit-spotlight" />
                                 <rect class="unit-vvi" style="transform:rotate( calc( var( --unit-marker-air-vvi-rotation-offset ) + 201deg ) ); height:calc( ( var( --unit-marker-air-height ) / 2 ) + 25px );" />
                                 <rect class="unit-hotgroup"></rect>
-                                <text x="38" y="17" class="unit-hotgroup-id">2</text>
+                                <text x="74" y="27" class="unit-hotgroup-id">2</text>
                                 <rect class="unit-selected-border" />
                                 <rect class="unit-marker" />
-                                <text x="50%" y="44px" class="unit-short-label">29</text>
+                                <text x="50%" y="54px" class="unit-short-label">29</text>
                                 <rect class="unit-fuel" />
                                 <rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 1 );" />
                                 <circle class="unit-ammo unit-ammo-fox-1" />
@@ -1011,10 +1011,10 @@
                                 <circle class="unit-spotlight" />
                                 <rect class="unit-vvi" style="transform:rotate( calc( var( --unit-marker-air-vvi-rotation-offset ) + 329deg ) ); height:calc( ( var( --unit-marker-air-height ) / 2 ) + 25px );" />
                                 <rect class="unit-hotgroup"></rect>
-                                <text x="38" y="17" class="unit-hotgroup-id">2</text>
+                                <text x="74" y="27" class="unit-hotgroup-id">2</text>
                                 <rect class="unit-selected-border" />
                                 <rect class="unit-marker" />
-                                <text x="50%" y="44px" class="unit-short-label">33</text>
+                                <text x="50%" y="54px" class="unit-short-label">33</text>
                                 <rect class="unit-fuel" />
                                 <rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 1 );" />
                                 <circle class="unit-ammo unit-ammo-fox-1" />
@@ -1037,72 +1037,109 @@
 
                         <div class="example">
 
-                            <div class="caption">Olympus 1-1; 090&deg;; 20,000ft</div>
-                            <div class="unit unit-plane"
-                                data-coalition="blue"
-                                data-pilot="human">
-                                <div class="unit-spotlight">
-                                    <div class="unit-selected-border">
-                                        <div class="unit-vvi">
-                                            <div class="unit-vvi-heading" style="transform: rotate(90deg); width:40;"></div>
-                                        </div>
-                                        <div class="unit-id">18</div>
-                                    </div>
-                                </div>
-                                <div class="unit-hotgroup">
-                                    <div class="unit-hotgroup-id"></div>
-                                </div>
-                                <div class="unit-fuel">
-                                    <div class="unit-fuel-level"></div>
-                                </div>
-                                <div class="unit-ammo">
-                                    <div data-ammo-type="fox-1"></div>
-                                    <div data-ammo-type="fox-2"></div>
-                                    <div data-ammo-type="fox-3"></div>
-                                    <div data-ammo-type="other"></div>
-                                </div>
-                                <div class="unit-summary">
-                                    <div class="unit-callsign">Olympus 1-1</div>
-                                    <div class="unit-heading">090</div>
-                                    <div class="unit-altitude">20</div>
-                                </div>
-                            </div>
+                            <div class="caption">Olympus 1-1; 090&deg;; 25,000ft</div>
+                            <svg class="unit" data-pilot="ai" data-coalition="red" xmlns="http://www.w3.org/2000/svg">
+                                <circle class="unit-spotlight" />
+                                <rect class="unit-vvi" style="transform:rotate( calc( var( --unit-marker-air-vvi-rotation-offset ) + 090deg ) ); height:calc( ( var( --unit-marker-air-height ) / 2 ) + 25px );" />
+                                <rect class="unit-hotgroup"></rect>
+                                <text x="74" y="27" class="unit-hotgroup-id">2</text>
+                                <rect class="unit-selected-border" />
+                                <rect class="unit-marker" />
+                                <text x="50%" y="54px" class="unit-short-label">33</text>
+                                <rect class="unit-fuel" />
+                                <rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 1 );" />
+                                <circle class="unit-ammo unit-ammo-fox-1" />
+                                <circle class="unit-ammo unit-ammo-fox-2" />
+                                <circle class="unit-ammo unit-ammo-fox-3" />
+                                <circle class="unit-ammo unit-ammo-other" />
+                                <g class="unit-summary">
+                                    <text class="unit-callsign" x="1" y="46">Olympus 1-1</text>
+                                    <text class="unit-heading" x="20" y="60">090</text>
+                                    <text class="unit-altitude" x="46" y="60">25</text>
+                                </g>
+                            </svg>
                             
                         </div>
 
 
                         <div class="example">
 
-                            <div class="caption">Olympus 3-1; 260&deg;; 30,000ft</div>
-                            <div class="unit unit-plane"
-                                data-coalition="red"
-                                data-pilot="human">
-                                <div class="unit-spotlight">
-                                    <div class="unit-selected-border">
-                                        <div class="unit-vvi">
-                                            <div class="unit-vvi-heading" style="transform: rotate(260deg); width:60px;"></div>
-                                        </div>
-                                        <div class="unit-id">29</div>
-                                    </div>
-                                </div>
-                                <div class="unit-hotgroup">
-                                    <div class="unit-hotgroup-id"></div>
-                                </div>
-                                <div class="unit-fuel">
-                                    <div class="unit-fuel-level"></div>
-                                </div>
-                                <div class="unit-ammo">
-                                    <div data-ammo-type="fox-1"></div>
-                                    <div data-ammo-type="fox-2"></div>
-                                    <div data-ammo-type="fox-3"></div>
-                                    <div data-ammo-type="other"></div>
-                                </div>
-                                <div class="unit-summary">
-                                    <div class="unit-callsign">Olympus 3-1</div>
-                                    <div class="unit-heading">260</div>
-                                    <div class="unit-altitude">30</div>
-                                </div>
-                            </div>
+                            <div class="caption">Olympus 3-1; 260&deg;; 31,000ft</div>
+                            <svg class="unit" data-pilot="ai" data-coalition="red" xmlns="http://www.w3.org/2000/svg">
+                                <circle class="unit-spotlight" />
+                                <rect class="unit-vvi" style="transform:rotate( calc( var( --unit-marker-air-vvi-rotation-offset ) + 260deg ) ); height:calc( ( var( --unit-marker-air-height ) / 2 ) + 25px );" />
+                                <rect class="unit-hotgroup"></rect>
+                                <text x="74" y="27" class="unit-hotgroup-id">2</text>
+                                <rect class="unit-selected-border" />
+                                <rect class="unit-marker" />
+                                <text x="50%" y="54px" class="unit-short-label">33</text>
+                                <rect class="unit-fuel" />
+                                <rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 1 );" />
+                                <circle class="unit-ammo unit-ammo-fox-1" />
+                                <circle class="unit-ammo unit-ammo-fox-2" />
+                                <circle class="unit-ammo unit-ammo-fox-3" />
+                                <circle class="unit-ammo unit-ammo-other" />
+                                <g class="unit-summary">
+                                    <text class="unit-callsign" x="1" y="46">Olympus 3-1</text>
+                                    <text class="unit-heading" x="20" y="60">260</text>
+                                    <text class="unit-altitude" x="46" y="60">31</text>
+                                </g>
+                            </svg>
+                            
+                        </div>
+
+                    </div>
+        
+                </div>
+
+                <div class="content">
+
+                    <div class="content-header">Overlaying planes</div>
+                    <div class="content-body">
+
+                        <div id="overlaying-planes" class="example">
+
+                            <svg class="unit" data-pilot="ai" data-coalition="red" xmlns="http://www.w3.org/2000/svg">
+                                <circle class="unit-spotlight" />
+                                <rect class="unit-vvi" style="transform:rotate( calc( var( --unit-marker-air-vvi-rotation-offset ) + 090deg ) ); height:calc( ( var( --unit-marker-air-height ) / 2 ) + 25px );" />
+                                <rect class="unit-hotgroup"></rect>
+                                <text x="74" y="27" class="unit-hotgroup-id">2</text>
+                                <rect class="unit-selected-border" />
+                                <rect class="unit-marker" />
+                                <text x="50%" y="54px" class="unit-short-label">33</text>
+                                <rect class="unit-fuel" />
+                                <rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 1 );" />
+                                <circle class="unit-ammo unit-ammo-fox-1" />
+                                <circle class="unit-ammo unit-ammo-fox-2" />
+                                <circle class="unit-ammo unit-ammo-fox-3" />
+                                <circle class="unit-ammo unit-ammo-other" />
+                                <g class="unit-summary">
+                                    <text class="unit-callsign" x="1" y="46">Olympus 1-1</text>
+                                    <text class="unit-heading" x="20" y="60">090</text>
+                                    <text class="unit-altitude" x="46" y="60">25</text>
+                                </g>
+                            </svg>
+
+                            <svg class="unit" data-pilot="ai" data-coalition="red" xmlns="http://www.w3.org/2000/svg">
+                                <circle class="unit-spotlight" />
+                                <rect class="unit-vvi" style="transform:rotate( calc( var( --unit-marker-air-vvi-rotation-offset ) + 260deg ) ); height:calc( ( var( --unit-marker-air-height ) / 2 ) + 25px );" />
+                                <rect class="unit-hotgroup"></rect>
+                                <text x="74" y="27" class="unit-hotgroup-id">2</text>
+                                <rect class="unit-selected-border" />
+                                <rect class="unit-marker" />
+                                <text x="50%" y="54px" class="unit-short-label">33</text>
+                                <rect class="unit-fuel" />
+                                <rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 1 );" />
+                                <circle class="unit-ammo unit-ammo-fox-1" />
+                                <circle class="unit-ammo unit-ammo-fox-2" />
+                                <circle class="unit-ammo unit-ammo-fox-3" />
+                                <circle class="unit-ammo unit-ammo-other" />
+                                <g class="unit-summary">
+                                    <text class="unit-callsign" x="1" y="46">Olympus 3-1</text>
+                                    <text class="unit-heading" x="20" y="60">260</text>
+                                    <text class="unit-altitude" x="46" y="60">31</text>
+                                </g>
+                            </svg>
                             
                         </div>