diff --git a/src/main.js b/src/main.js
index 69f50d7..54d8bf3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -20,6 +20,9 @@ io.on('connection', function(socket){
   io.emit('status', {"users": users.length});
   get_dirs(socket);
 
+  socket.on('log', function(msg){
+    console.log('id: ' + this.id + ' LOG:' + msg);
+  });
 
   socket.on('disconnect', function(){
     console.log('id: ' + this.id + ' disconnected');
diff --git a/src/static/css/main.css b/src/static/css/main.css
index c55cd71..93fdf52 100644
--- a/src/static/css/main.css
+++ b/src/static/css/main.css
@@ -25,7 +25,7 @@ body {
   text-align: right;
 }
 
-#txt-duration {
+.align-right {
   float: right;
   text-align: right;
 }
diff --git a/src/static/index.html b/src/static/index.html
index 3cf01ab..5c20261 100644
--- a/src/static/index.html
+++ b/src/static/index.html
@@ -21,15 +21,18 @@
     <script src='/socket.io/socket.io.js'></script>
     <script src='/js/index.js'></script>
 
-    <title>Slowdowner</title>
+    <title>SlowDowner</title>
   </head>
 
 
   <body>
     <nav class='navbar navbar-inverse'>
+      <a class="navbar-brand" href="/">
+        <img src="/img/favicon.ico" width="25" height="25" alt="SlowDowner Logo">
+      </a>
       <div class='container-fluid'>
         <div class='navbar-header'>
-          <a class='navbar-brand' href=''>Slowdowner</a>
+          <a class='navbar-brand' href='/'>SlowDowner</a>
         </div>
         <p class='navbar-text navbar-right'><span>&zwnj;</span></p>
         <ul class='nav navbar-nav navbar-right'>
@@ -53,11 +56,11 @@
             </thead>
           </table>
         </div>
-        <div class='well  col-sm-7'>
+        <div class='well col-sm-7'>
           <label class="info-txt" id="txt-titel">Titel</label><br>
           <br>
           <label class="info-txt-small" id="txt-timer">0:00</label>
-          <label class="info-txt-small" id="txt-duration">0:00</label>
+          <label class="info-txt-small align-right" id="txt-duration">0:00</label>
           <div class="slidecontainer">
             <input type="range" min="0" max="1000" value="0" class="slider" id="position-slider">
           </div>
@@ -70,11 +73,13 @@
               <button id='stopBtn' class='btn btn-danger'><i class='fa fa-stop'></i></button>
             </div>
             <div class="col-xs-4">
-              <label>Geschwindigkeit:</label>
+              <label class="info-txt-small">Geschwindigkeit:</label>
+              <label class="info-txt-small align-right" id="txt-speed">100%</label>
               <input type="range" min="50" max="200" value="100" class="slider" id="speed-slider">
             </div>
             <div class="col-xs-4">
-              <label>Lautstärke:</label>
+              <label class="info-txt-small">Lautstärke:</label>
+              <label class="info-txt-small align-right" id="txt-volume">70%</label>
               <input type="range" min="0" max="1000" value="700" class="slider" id="volume-slider">
             </div>
           </div>
diff --git a/src/static/js/index.js b/src/static/js/index.js
index e42c9a6..67f374f 100644
--- a/src/static/js/index.js
+++ b/src/static/js/index.js
@@ -32,6 +32,7 @@ $(function () {
       songDir.forEach(function(dir){
         $( '#dir-dropdown' ).append('<option>'+dir.name+'</option>');
       });
+      updateTable();
     }
   });
 
@@ -64,30 +65,59 @@ $(function () {
   //dropdown  
 
   $( '#dir-dropdown' ).change(function () {
-    updateTable()
+    updateTable();
   });
 
   //sliders
 
   $( '#position-slider' ).change(function () {
-    if(player == null)
-      return
     player.seek(this.value/1000);
+    updateDisplay();
   });
 
   $( '#speed-slider' ).change(function () {
-    if(player == null)
-      return
-    player.rate(this.value/100);
+    updateDisplay();
   });
 
   $( '#volume-slider' ).change(function () {
-    if(player == null)
-      return
-    player.volume(this.value/1000);
+    updateDisplay();
   });
+
+  $('input[type=range]').on('input', function () {
+    $(this).trigger('change');
+  });
+
+  updateDisplay();
 });
 
+function updateDisplay(){
+  playBtn     = $( '#playBtn' );
+  stopBtn     = $( '#stopBtn' );
+
+  volumeSl    = $( '#volume-slider' );
+  speedSl     = $( '#speed-slider' );
+  positionSl  = $( '#position-slider' );
+
+  speedTxt    = $( '#txt-speed' );
+  volumeTxt   = $( '#txt-volume' );
+  timerTxt    = $( '#txt-timer' );
+  durationTxt = $( '#txt-duration' );
+  titelTxt    = $( '#txt-titel' );
+
+  if(player == null){
+    playBtn.prop("disabled", true);
+    stopBtn.prop("disabled", true);
+    positionSl.prop("disabled", true);
+  }else{
+    stopBtn.prop("disabled", false);
+    positionSl.prop("disabled", false);
+    player.rate(speedSl[0].value/100);
+    player.volume(volumeSl[0].value/1000);
+  }
+  speedTxt.html((speedSl[0].value) + '%');
+  volumeTxt.html(Math.round(volumeSl[0].value/10) + '%');
+}
+
 function updateTable(){
   songDir.forEach(function(dir){
     if($( '#dir-dropdown' ).find(":selected").text() == dir.name){
@@ -113,6 +143,8 @@ function tableClickListener(){
     if(player != null && player.isPlaying())
       player.pause();
     player = new Player(songName);
+    player.init();
+    updateDisplay();
   });
 }
 
@@ -125,13 +157,13 @@ var Player = function(songName) {
 
   // Display the title of the first track.
   $( '#txt-titel' ).text(songName);
-  console.log(songName);
 };
 Player.prototype = {
   /**
    * Play a song.
    */
-  play: function() {
+  init: function() {
+    $( '#playBtn' ).prop("disabled", true);
     let self = this;
     let sound;
     // If we already loaded this track, use the current one.
@@ -143,21 +175,22 @@ Player.prototype = {
         src: [self.url],
         html5: true, // Force to HTML5 so that the audio can stream in (best for large files).
         onplay: function() {
-          // Display the duration.
-          $( '#txt-duration' ).text(self.formatTime(Math.round(sound.duration())));
+          updateDisplay();
           $( '#playBtn' ).removeClass('btn-succes').addClass('btn-warning');
           $( '#playBtn i' ).removeClass('fa-play').addClass('fa-pause');
           // Start upating the progress of the track.
           requestAnimationFrame(self.step.bind(self));
         },
         onload: function() {
-
+          $( '#txt-duration' ).text(self.formatTime(Math.round(sound.duration())));
+          $( '#playBtn' ).prop("disabled", false);
         },
         onend: function() {
+          $( '#playBtn' ).removeClass('btn-warning').addClass('btn-succes');
+          $( '#playBtn i' ).removeClass('fa-pause').addClass('fa-play');
           self.seek(0);
         },
         onpause: function() {
-          console.log("pause");
           $( '#playBtn' ).removeClass('btn-warning').addClass('btn-succes');
           $( '#playBtn i' ).removeClass('fa-pause').addClass('fa-play');
         },
@@ -168,8 +201,15 @@ Player.prototype = {
         }
       });
     }
+  },
 
-    // Begin playing the sound.
+  play: function() {
+    var self = this;
+
+    // Get the Howl we want to manipulate.
+    var sound = self.howl;
+
+    // Puase the sound.
     sound.play();
   },
 
@@ -285,4 +325,9 @@ Player.prototype = {
 
     return minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
   }
-};
\ No newline at end of file
+};
+
+function clog(msg){
+  console.log(msg);
+  socket.emit('log', msg);
+}
\ No newline at end of file
