diff --git a/index.css b/index.css
index 9a09c36..def8a40 100644
--- a/index.css
+++ b/index.css
@@ -64,6 +64,7 @@ span:empty {
 #coverImg {
 	width: 6.8rem;
 	height: 6.8rem;
+	margin-bottom: 0.2rem;
 	border-radius: 0.6rem;
 	flex-shrink: 0;
 }
@@ -140,13 +141,23 @@ span:empty {
 /* Song time */
 
 #time {
+	display: flex;
+	flex-direction: column;
 	width: 6.8rem;
 	font-size: 1.35rem;
 	text-align: right;
-	line-height: 1.4;
+	line-height: 1.7;
 	letter-spacing: -0.05em;
 }
 
+#timeBar {
+	max-width: 100%;
+	height: 0.2rem;
+	margin-top: -0.2rem;
+	background: currentColor;
+	border-radius: 0.6rem;
+}
+
 #time,
 #accuracy,
 #mistakes {
@@ -210,7 +221,7 @@ body.bottom {
 }
 
 body.bottom #time {
-	align-self: flex-end;
+	flex-direction: column-reverse;
 }
 
 #settings {
diff --git a/index.html b/index.html
index 17d1567..0665e0e 100644
--- a/index.html
+++ b/index.html
@@ -27,7 +27,10 @@
 		</div>
 	</div>
 	<div class="row">
-		<div id="time">1:23 / 4:56</div>
+		<div id="time">
+			<div id="timeBar" style="width: 28%;"></div>
+			<div id="timeText">1:23 / 4:56</div>
+		</div>
 		<div id="score">
 			<span id="accuracy">96.9</span>
 			<span id="mistakes">7</span>
diff --git a/index.js b/index.js
index 945442f..a70cbd8 100644
--- a/index.js
+++ b/index.js
@@ -121,7 +121,8 @@ async function updateMapInfo(data) {
 
 // Song time
 
-const timeText = document.getElementById("time");
+const timeText = document.getElementById("timeText");
+const timeBar = document.getElementById("timeBar");
 const intervalMs = 500;
 let intervalId = 0;
 let currentTime = 0;
@@ -129,14 +130,17 @@ let currentTime = 0;
 /** @param {number} time @param {boolean} paused */
 function updateTime(time, paused) {
 	if (!settings.time) return;
-	currentTime = time;
-	timeText.textContent = `${formatTime(currentTime)} / ${formatTime(duration)}`;
+	setTime(time);
 	clearInterval(intervalId);
 	if (paused) return;
-	intervalId = window.setInterval(() => {
-		currentTime += intervalMs * timeMultiplier / 1000;
-		timeText.textContent = `${formatTime(currentTime)} / ${formatTime(duration)}`;
-	}, intervalMs);
+	intervalId = window.setInterval(() => setTime(currentTime + intervalMs * timeMultiplier / 1000), intervalMs);
+}
+
+/** @param {number} time */
+function setTime(time) {
+	currentTime = time;
+	timeText.textContent = `${formatTime(currentTime)} / ${formatTime(duration)}`;
+	timeBar.style.width = `${currentTime / (duration || Infinity) * 100}%`;
 }
 
 /** @param {number} t */