diff --git a/src/main/resources/static/js/init.js b/src/main/resources/static/js/init.js
index 5423536..9e39df9 100644
--- a/src/main/resources/static/js/init.js
+++ b/src/main/resources/static/js/init.js
@@ -122,6 +122,8 @@ function getCurentMusic() {
                 }
 
                 $('#music_img').attr("src","/img/no_music.jpg");
+                $('#total_time').text("00:00");
+                $('#current_time').text("00:00");
 
                 break;
 
@@ -258,6 +260,9 @@ function updateControl(data){
     }
 
     $('#music_img').attr("src","https://img.youtube.com/vi/"+data.info.identifier+"/hqdefault.jpg");
+    console.log(data);
+    $('#total_time').text(msToTime(data.info.length));
+    $('#current_time').text(msToTime(data.currentPos));
     updateModal(data);
 }
 
diff --git a/src/main/resources/templates/music.html b/src/main/resources/templates/music.html
index ca44919..08e8e68 100644
--- a/src/main/resources/templates/music.html
+++ b/src/main/resources/templates/music.html
@@ -45,11 +45,15 @@
                 <img class="responsive-img z-depth-3" id="music_img" style="max-width: 30%" src=""/>
             </div>
             <h4 class="center" id="music_text"></h4>
-            <div class="row center">
+            <div class="row center" style="margin-bottom: 0px">
                 <div class="progress col s6 offset-s3 z-depth-3">
                     <div class="determinate" id="music_progress" style="width: 0%"></div>
                 </div>
             </div>
+            <div class="row center">
+                <div class="col s2 offset-s3 left-align" style="padding: 0px" id="current_time">0:00</div>
+                <div class="col s2 offset-s2 right-align " style="padding: 0px" id="total_time">0:00</div>
+            </div>
             <div class="row center">
                 <div class="col s2 offset-s3 center">
                     <a class="btn-large blue-grey darken-4 z-depth-3 waves-effect waves-light" id="btn_stop">