diff --git a/web/src/player/player.tsx b/web/src/player/player.tsx
index 9fa68c4..ef00104 100644
--- a/web/src/player/player.tsx
+++ b/web/src/player/player.tsx
@@ -115,14 +115,24 @@ export const Player = () => {
             className="bg-red-500 h-full"
           ></div>
         </div>
-        <p className="min-w-[50px] text-right">{formatTime(currentTime)}</p>
+        <p
+          className={`${Math.floor(duration / 3600) > 0 ? "min-w-[70px]" : "min-w-[50px]"} text-right`}
+        >
+          {formatTime(currentTime)}
+        </p>
       </div>
     </div>
   );
 };
 
-const formatTime = (seconds: number): string => {
-  const m = Math.floor(seconds / 60);
-  const s = Math.floor(seconds % 60);
-  return `${m}:${String(s).padStart(2, "0")}`;
+const formatTime = (time: number): string => {
+  let hours = Math.floor(time / 3600);
+  let minutes = Math.floor((time % 3600) / 60);
+  let seconds = Math.floor(time % 60);
+
+  const h = String(hours).padStart(2, "0");
+  const m = String(minutes).padStart(2, "0");
+  const s = String(seconds).padStart(2, "0");
+
+  return [h, m, s].join(":");
 };