diff --git a/Video 84 - Project 2 - Spotify Clone/css/style.css b/Video 84 - Project 2 - Spotify Clone/css/style.css
index 85eac9b0..b53c039a 100644
--- a/Video 84 - Project 2 - Spotify Clone/css/style.css	
+++ b/Video 84 - Project 2 - Spotify Clone/css/style.css	
@@ -268,6 +268,24 @@ body {
     cursor: pointer;
 }
 
+
+.progress {
+  position: absolute;
+  height: 100%;
+  width: 0%;
+  background: #0b44ff;   /* filled color */
+  border-radius: 3px;
+}
+
+
+.seekbar:hover .progress{
+    background-color: #E0209B;
+}
+
+.seekbar:hover .circle{
+    display: block;
+}
+
 .circle {
     width: 13px;
     height: 13px;
@@ -277,6 +295,7 @@ body {
     bottom: 5px;
     left: 0%;
     transition: left 0.5s;
+    display: none;
 }
 
 .songbuttons img {
diff --git a/Video 84 - Project 2 - Spotify Clone/index.html b/Video 84 - Project 2 - Spotify Clone/index.html
index ea254107..d9ed5ee9 100644
--- a/Video 84 - Project 2 - Spotify Clone/index.html	
+++ b/Video 84 - Project 2 - Spotify Clone/index.html	
@@ -79,6 +79,7 @@ <h1>Spotify Playlists</h1>
                 <div class="cardContainer">  </div>
                 <div class="playbar">
                     <div class="seekbar">
+                        <div class="progress"></div>
                         <div class="circle">
 
                         </div>
diff --git a/Video 84 - Project 2 - Spotify Clone/js/script.js b/Video 84 - Project 2 - Spotify Clone/js/script.js
index 32e76b89..7ba36a65 100644
--- a/Video 84 - Project 2 - Spotify Clone/js/script.js	
+++ b/Video 84 - Project 2 - Spotify Clone/js/script.js	
@@ -149,6 +149,25 @@ async function main() {
         currentSong.currentTime = ((currentSong.duration) * percent) / 100
     })
 
+    let seekbar = document.querySelector(".seekbar");
+let progress = document.querySelector(".progress");
+
+
+// event listener for the progress of current songs 
+seekbar.addEventListener("click", (e) => {
+  let percent = (e.offsetX / seekbar.getBoundingClientRect().width) * 100;
+  progress.style.width = percent + "%";
+
+  currentSong.currentTime = (currentsong.duration) * percent / 100;
+});
+
+// auto update while playing
+currentSong.addEventListener("timeupdate", () => {
+  let percent = (currentSong.currentTime / currentSong.duration) * 100;
+  progress.style.width = percent + "%";
+});
+
+
     // Add an event listener for hamburger
     document.querySelector(".hamburger").addEventListener("click", () => {
         document.querySelector(".left").style.left = "0"