diff --git a/index.html b/index.html
index 6a5c609..e719603 100644
--- a/index.html
+++ b/index.html
@@ -39,7 +39,7 @@ <h1>Audio Player</h1>
 				</div>
 
 				<div class="audio-div">
-					<audio src="./assets/songs/Unheilig_-_Schenk_mir_ein_Wunder.mp3"></audio>
+					<audio src="./assets/songs/Unheilig_-_Schenk_mir_ein_Wunder.mp3" ontimeupdate="timeUpdate()"></audio>
 				</div>
 
 				<div class="controls-div">
diff --git a/scripts.js b/scripts.js
index da37ab6..4e9665f 100644
--- a/scripts.js
+++ b/scripts.js
@@ -173,6 +173,24 @@ function songTimeChange(value) {
 	currTimeDiv.textContent = songTime;
 }
 
+function timeUpdate() {
+
+	songTime = Math.round(audio.currentTime);
+
+	timeConverter();
+
+	currTimeDiv.textContent = songTime;
+}
+
+window.onload = function() {
+
+	songMaxTime = Math.round(audio.duration);
+
+	maxTimeConverter();
+
+	maxTimeDiv.textContent = songMaxTime;
+}
+
 
 /*
 
diff --git a/style.css b/style.css
index 3ffd387..46a1a45 100644
--- a/style.css
+++ b/style.css
@@ -82,7 +82,7 @@ a:hover { color: #DDDDDD; }
 	flex-direction: column;
 	gap: 0.3em;
 	padding: 1.7em;
-    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4));
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
     border-radius: 1.5em;
 }