diff --git a/client/public/stylesheets/layout.css b/client/public/stylesheets/layout.css
index faf6ebcf..ea0754c7 100644
--- a/client/public/stylesheets/layout.css
+++ b/client/public/stylesheets/layout.css
@@ -63,6 +63,7 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
 }
 
 dl.data-grid {
+	align-items: center;
 	display:flex;
 	flex-direction: row;
 	flex-wrap: wrap;
@@ -71,11 +72,11 @@ dl.data-grid {
 }
 
 dl.data-grid dt {
-	width:40%;
+	width:60%;
 }
 
 dl.data-grid dd {
-	width:60%;
+	width:40%;
 }
 
 
@@ -108,6 +109,10 @@ dl.data-grid dd {
 	margin-left: auto;
 }
 
+dl.data-grid dd.br-info[data-bearing][data-distance][data-distance-units]::after {
+	content: attr( data-bearing ) '\00B0  / ' attr( data-distance ) attr( data-distance-units );
+}
+
 
 
 
@@ -138,13 +143,35 @@ dl.data-grid dd {
 
 #connection-status-panel {
 	bottom: 20px;
-	height: 30px;
+	font-size:12px;
 	position: absolute;
 	right: 10px;
 	width: 160px;
 	z-index: 1000;
 }
 
+#connection-status-panel dt::before {
+	content: "No connection";
+}
+
+#connection-status-panel dd::after {
+	border-radius: 50%;
+	background: red;
+	content: " ";
+	height:12px;
+	width:12px;
+}
+
+
+#connection-status-panel[data-is-connected] dt::before {
+	content: "Connected";
+}
+
+#connection-status-panel[data-is-connected] dd::after {
+	background:var( --accent-green );
+}
+
+
 #mouse-info-panel {
 	bottom: 60px;
 	height: fit-content;
@@ -154,9 +181,58 @@ dl.data-grid dd {
 	z-index: 1000;
 }
 
-.content #mouse-info-panel {
-	margin-bottom: 100px;
-	position: static;
+
+#mouse-info-panel dl {
+	row-gap: 14px;
+}
+
+#mouse-info-panel dt {
+	height:20px;
+	width:40%;
+}
+
+
+#mouse-info-panel dt {
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+	background-size:24px 24px;
+	display:inline-block;
+}
+
+#mouse-info-panel dt[data-tooltip]:hover::before {
+	background-color: var( --background-steel );
+	border-radius: 5px;
+	content: attr( data-tooltip );
+	display:flex;
+	flex-wrap: nowrap;
+	padding: 5px;
+	position: absolute;
+	translate: calc( -100% - 15px ) 0;
+	white-space: nowrap;
+}
+
+#ref-measure-position {
+	background-image: url( "/images/pin.png" );
+}
+
+#ref-unit-position {
+	background-image: url( "/images/unit.png" );
+}
+
+#ref-bullseye-0 {
+	background-image: url( "/images/bullseye0.png" );
+}
+
+#ref-bullseye-1 {
+	background-image: url( "/images/bullseye1.png" );
+}
+
+#ref-bullseye-2 {
+	background-image: url( "/images/bullseye2.png" );
+}
+
+#mouse-info-panel dd {
+	width:60%;
 }
 
 
diff --git a/client/src/panels/connectionstatuspanel.ts b/client/src/panels/connectionstatuspanel.ts
index ccde1ba2..54a3f7f6 100644
--- a/client/src/panels/connectionstatuspanel.ts
+++ b/client/src/panels/connectionstatuspanel.ts
@@ -6,18 +6,6 @@ export class ConnectionStatusPanel extends Panel {
     }
 
     update(connected: boolean) {
-        var div = this.getElement().querySelector("#status-string");
-        if (div != null) {
-            if (connected) {
-                div.innerHTML = "Connected";
-                div.classList.add("ol-status-connected");
-                div.classList.remove("ol-status-disconnected");
-            }
-            else {
-                div.innerHTML = "Disconnected";
-                div.classList.add("ol-status-disconnected");
-                div.classList.remove("ol-status-connected");
-            }
-        }
+        this.getElement().toggleAttribute( "data-is-connected", connected );
     }
 }
\ No newline at end of file
diff --git a/client/src/panels/mouseinfopanel.ts b/client/src/panels/mouseinfopanel.ts
index 528ee645..aaebf15b 100644
--- a/client/src/panels/mouseinfopanel.ts
+++ b/client/src/panels/mouseinfopanel.ts
@@ -33,28 +33,44 @@ export class MouseInfoPanel extends Panel {
         var bullseyes = getMissionData().getBullseyes();
         for (let idx in bullseyes)
         {
-            var dist = distance(bullseyes[idx].lat, bullseyes[idx].lng, mousePosition.lat, mousePosition.lng);
-            var bear = bearing(bullseyes[idx].lat, bullseyes[idx].lng, mousePosition.lat, mousePosition.lng);
             var el = <HTMLElement>this.getElement().querySelector(`#bullseye-${idx}`);
-            if (el != null)
-                el.innerText = `${zeroAppend(Math.floor(bear), 3)}° / ${zeroAppend(Math.floor(dist*0.000539957), 3)} NM`
+
+            if ( el != null ) {
+                var dist = distance(bullseyes[idx].lat, bullseyes[idx].lng, mousePosition.lat, mousePosition.lng);
+                var bear = bearing(bullseyes[idx].lat, bullseyes[idx].lng, mousePosition.lat, mousePosition.lng);
+
+                el.dataset.bearing       = zeroAppend(Math.floor(bear), 3);
+                el.dataset.distance      = zeroAppend(Math.floor(dist*0.000539957), 3);
+                el.dataset.distanceUnits = "NM";
+            }
+            
         }
 
         if (measurePosition) {
-            var dist = distance(measurePosition.lat, measurePosition.lng, mousePosition.lat, mousePosition.lng);
-            var bear = bearing(measurePosition.lat, measurePosition.lng, mousePosition.lat, mousePosition.lng);
             var el = <HTMLElement>this.getElement().querySelector(`#measure-position`);
-            if (el != null)
-                el.innerText = `${zeroAppend(Math.floor(bear), 3)}° / ${zeroAppend(Math.floor(dist*0.000539957), 3)} NM`
+
+            if (el != null) {
+                var bear = bearing(measurePosition.lat, measurePosition.lng, mousePosition.lat, mousePosition.lng);
+                var dist = distance(measurePosition.lat, measurePosition.lng, mousePosition.lat, mousePosition.lng);
+
+                el.dataset.bearing       = zeroAppend(Math.floor(bear), 3);
+                el.dataset.distance      = zeroAppend(Math.floor(dist*0.000539957), 3);
+                el.dataset.distanceUnits = "NM";
+
+            }
         }
 
 
         if (unitPosition) {
-            var dist = distance(unitPosition.lat, unitPosition.lng, mousePosition.lat, mousePosition.lng);
-            var bear = bearing(unitPosition.lat, unitPosition.lng, mousePosition.lat, mousePosition.lng);
             var el = <HTMLElement>this.getElement().querySelector(`#unit-position`);
-            if (el != null)
-                el.innerText = `${zeroAppend(Math.floor(bear), 3)}° / ${zeroAppend(Math.floor(dist*0.000539957), 3)} NM`
+            if (el != null) {
+                var dist = distance(unitPosition.lat, unitPosition.lng, mousePosition.lat, mousePosition.lng);
+                var bear = bearing(unitPosition.lat, unitPosition.lng, mousePosition.lat, mousePosition.lng);
+
+                el.dataset.bearing       = zeroAppend(Math.floor(bear), 3);
+                el.dataset.distance      = zeroAppend(Math.floor(dist*0.000539957), 3);
+                el.dataset.distanceUnits = "nm";
+            }
         }
     }
 
@@ -65,7 +81,6 @@ export class MouseInfoPanel extends Panel {
             if (!this.#measurePoint)
             {
                 this.#measureBox.classList.toggle("hide", false);
-                this.getElement().querySelector(`#measure-position`)?.classList.toggle("hide", false);
                 this.#measurePoint = e.latlng;
                 this.#measureMarker.setLatLng(e.latlng);
                 this.#measureMarker.addTo(getMap());
@@ -75,7 +90,6 @@ export class MouseInfoPanel extends Panel {
             else
             {
                 this.#measureBox.classList.toggle("hide", true);
-                this.getElement().querySelector(`#measure-position`)?.classList.toggle("hide", true);
                 this.#measurePoint = null;
                 if (getMap().hasLayer(this.#measureMarker))
                     getMap().removeLayer(this.#measureMarker);
diff --git a/client/views/connectionstatuspanel.ejs b/client/views/connectionstatuspanel.ejs
index 82e47961..81b7f8ba 100644
--- a/client/views/connectionstatuspanel.ejs
+++ b/client/views/connectionstatuspanel.ejs
@@ -1,3 +1,6 @@
 <div id="connection-status-panel" class="ol-panel">
-    <h4 id="status-string"> Connected </h4>
+    <dl class="data-grid">
+        <dt></dt>
+        <dd></dd>
+    </dl>
 </div>
\ No newline at end of file
diff --git a/client/views/mouseinfopanel.ejs b/client/views/mouseinfopanel.ejs
index 32f2d8ae..2527054a 100644
--- a/client/views/mouseinfopanel.ejs
+++ b/client/views/mouseinfopanel.ejs
@@ -1,6 +1,12 @@
 <div id="mouse-info-panel" class="ol-panel">
-    <div class="list-item"><div id="measure-position" class="hide">---° / --- NM</div></div>
-    <div class="list-item"><div id="unit-position" class="hide">---° / --- NM</div></div>
-    <div class="list-item"><div id="bullseye-2">---° / --- NM</div></div>
-    <div class="list-item"><div id="bullseye-1">---° / --- NM</div></div>
+    <dl class="data-grid">
+        <dt id="ref-measure-position" data-tooltip="CTRL-click on the map to activate the measuring tool."></dt>
+        <dd id="measure-position" class="br-info" data-bearing="---" data-distance="---" data-distance-units="nm"></dd>
+        <dt id="ref-unit-position"></dt>
+        <dd id="unit-position" class="br-info" data-bearing="---" data-distance="---" data-distance-units="nm"></dd>
+        <dt id="ref-bullseye-1"></dt>
+        <dd id="bullseye-1" class="br-info" data-bearing="---" data-distance="---" data-distance-units="nm"></dd>
+        <dt id="ref-bullseye-2"></dt>
+        <dd id="bullseye-2" class="br-info" data-bearing="---" data-distance="---" data-distance-units="nm"></dd>
+    </dl>
 </div>
\ No newline at end of file