diff --git a/web/script.js b/web/script.js
index cbe2650..3e2c12a 100644
--- a/web/script.js
+++ b/web/script.js
@@ -12,6 +12,17 @@ var currentSongLength = 0;
 var isPlaying = false;
 var userIsInteracting = false; // Flag to track user interaction with the slider
 
+// Format seconds into mm:ss or hh:mm:ss when needed
+function formatTime(totalSec) {
+  totalSec = Number.isFinite(totalSec) ? Math.max(0, Math.floor(totalSec)) : 0;
+  var h = Math.floor(totalSec / 3600);
+  var m = Math.floor((totalSec % 3600) / 60);
+  var s = totalSec % 60;
+  function pad(n) { return n < 10 ? '0' + n : '' + n; }
+  if (h > 0) return h + ':' + pad(m) + ':' + pad(s);
+  return m + ':' + pad(s);
+}
+
 // Add click event listener to each <li> element
 liElements.forEach(function(li) {
   li.addEventListener('click', function() {
@@ -74,7 +85,8 @@ function updateProgress() {
    }
    var progressElement = document.getElementById('progressSlider');
    progressElement.value = elapsedTime / 1000; // Convert to seconds
-   document.getElementById("progressLabel").innerHTML = Math.floor(elapsedTime / 1000);
+   var seconds = Math.floor(elapsedTime / 1000);
+   document.getElementById("progressLabel").innerHTML = formatTime(seconds);
  }
 }
 
@@ -86,10 +98,10 @@ function displayState(state) {
  if (bigTitleEl) bigTitleEl.innerText = title;
 
  var progressLabel = document.getElementById("progressLabel");
- if (progressLabel) progressLabel.innerHTML = state['time'];
+ if (progressLabel) progressLabel.innerHTML = formatTime(Math.floor(state['time'] || 0));
 
  var progressMax = document.getElementById("progressMax");
- if (progressMax) progressMax.innerHTML = state['length'] || 0;
+ if (progressMax) progressMax.innerHTML = formatTime(Math.floor(state['length'] || 0));
 
  var voltageEl = document.getElementById("voltage");
  if (voltageEl) voltageEl.innerHTML = (state['voltage'] || '') + ' mV';