diff --git a/data/js/mouse.js b/data/js/mouse.js
index de24acf..120708e 100644
--- a/data/js/mouse.js
+++ b/data/js/mouse.js
@@ -17,6 +17,7 @@ var Loco = {
     Dir: LOCO_DIR.FORWARD,
     Scale: 1,    // Example real loco speed is 45Kmh/max, so what are step (128 for digital to represent 0-200Kmh) per Kmh
     MaxSpeed: 100, // Max speed in DCC step (<129) to reach scale speed (e.g. 45Kmh)
+    TotalDist: 0, // Total distance traveled in kilometers (scaled)
     setMode: function(mode) {
         this.Mode = mode;
     },
diff --git a/data/mouse.html b/data/mouse.html
index f014f09..4703e67 100644
--- a/data/mouse.html
+++ b/data/mouse.html
@@ -32,6 +32,9 @@
       <svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
         <image href="img/Speed.png" x="0" y="0" width="300" height="200"/>
         <line id="needle" x1="150" y1="120" x2="150" y2="70" stroke="#e74c3c" stroke-width="6" stroke-linecap="round" />
+        <text id="kmText" x="280" y="160" font-size="20" text-anchor="end" fill="#333">
+          0 
+        </text>
       </svg>
     </div>
     <div style="text-align:center; margin-top:20px;">
diff --git a/data/speed.svg b/data/speed.svg
index 7ec83cb..5870035 100644
--- a/data/speed.svg
+++ b/data/speed.svg
@@ -1,6 +1,7 @@
-<svg width="500" height="405" xmlns="http://www.w3.org/2000/svg">
-  <image href="speed.png" x="0" y="0" width="500" height="405"/>
-  <!-- SVG needle overlay -->
-  <line id="needle" x1="200" y1="200" x2="150" y2="50" stroke="#e74c3c" stroke-width="6"/>
-</svg>
-
+<svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
+        <image href="img/Speed.png" x="0" y="0" width="300" height="200"/>
+        <line id="needle" x1="150" y1="120" x2="150" y2="70" stroke="#e74c3c" stroke-width="6" stroke-linecap="round" />
+        <text id="kmText" x="280" y="160" font-size="20" text-anchor="end" fill="#333">
+          0 
+        </text>
+      </svg>