diff --git a/src/components/mini-widgets/DepthIndicator.vue b/src/components/mini-widgets/DepthIndicator.vue
index 467e41493..fa02f0d4c 100644
--- a/src/components/mini-widgets/DepthIndicator.vue
+++ b/src/components/mini-widgets/DepthIndicator.vue
@@ -2,7 +2,10 @@
   <div class="flex items-center w-fit min-w-[8rem] max-w-[9rem] h-12 p-1 text-white justify-center">
     <img src="@/assets/depth-icon.svg" class="h-full" :draggable="false" />
     <div class="flex flex-col items-start justify-center ml-1 min-w-[4rem] max-w-[6rem] select-none">
-      <span class="text-xl font-semibold leading-6 w-fit">{{ round(averageDepth, 2) }} m</span>
+      <div>
+        <span class="font-mono text-xl font-semibold leading-6 w-fit">{{ round(averageDepth, 2) }}</span>
+        <span class="text-xl font-semibold leading-6 w-fit"> m</span>
+      </div>
       <span class="w-full text-sm font-semibold leading-4 whitespace-nowrap">Depth</span>
     </div>
   </div>