diff --git a/app/Config/bootstrap.php b/app/Config/bootstrap.php
old mode 100755
new mode 100644
diff --git a/app/View/Elements/artists_view.ctp b/app/View/Elements/artists_view.ctp
index 7e5367a..6675677 100644
--- a/app/View/Elements/artists_view.ctp
+++ b/app/View/Elements/artists_view.ctp
@@ -15,7 +15,7 @@
         </p>
         </div>
         <div class="col-xs-2">
-            <h3 class="text-right">
+            <h3 class="text-right hidden-xs">
                 <small>
                     <span class="glyphicon glyphicon-play song-controls action-play-artist" title="<?php echo __('Play all albums'); ?>"></span>
                     <span class="glyphicon glyphicon-random song-controls action-shuffle-artist" title="<?php echo __('Shuffle this artist'); ?>"></span>
@@ -56,7 +56,7 @@
                             <small class="album-year">
                                 <?php echo h($album['year']); ?>
                             </small>
-                            <small>
+                            <small class="hidden-xs">
                                 <span class="glyphicon glyphicon-play song-controls action-play-album" title="<?php echo __('Play all tracks'); ?>"></span>
                                 <span class="glyphicon glyphicon-random song-controls action-shuffle-album" title="<?php echo __('Shuffle this album'); ?>"></span>
                                 <span class="dropdown">
diff --git a/app/View/Layouts/default.ctp b/app/View/Layouts/default.ctp
index d168a0d..2c51155 100644
--- a/app/View/Layouts/default.ctp
+++ b/app/View/Layouts/default.ctp
@@ -57,16 +57,17 @@
     </div>
 </nav>
 <!-- Player -->
-<div class="navbar navbar-default navbar-fixed-top navbar-player">
+<div class="navbar navbar-default navbar-fixed-bottom navbar-player">
     <div class="container">
-        <!-- Play/Pause buttons -->
-        <div class="col-md-2 col-xs-3">
+        <!-- Playlist management -->
+        <div class="col-md-2 col-xs-1">
             <ul class="player-controls">
-                <li><span class="glyphicon glyphicon-backward" id="backward"></span></li>
-                <li class="play"><span class="glyphicon glyphicon-play" id="play"></span></li>
-                <li><span class="glyphicon glyphicon-forward" id="forward"></span></li>
+                <li class="hidden-xs"><span class="glyphicon glyphicon-th-list" id="queue-button"></span></li>
+                <li class="hidden-xs"><span class="glyphicon glyphicon-repeat" id="queue-repeat"></span></li>
+                <li><span class="glyphicon glyphicon-random" id="queue-shuffle"></span></li>
             </ul>
         </div>
+
         <!-- Volume control -->
         <div class="col-md-2 hidden-xs hidden-sm">
             <ul class="player-controls volume">
@@ -77,25 +78,28 @@
         <!-- Current playing -->
         <div class="col-md-6 col-xs-6">
             <?php echo $this->Html->image("no-cover.png", array('class' => "song-cover hidden-xs")); ?>
-            <div class="song-infos truncated-name">
-                <span class="song-name"></span>
-                -
-                <span class="song-artist"></span>
+            <div class="song-infos truncated-name hidden-xs">
+                <span class="song-artist truncated"></span> - <span class="song-name truncated"></span>
+            </div>
+            <div class="song-infos truncated-name hidden-sm hidden-md hidden-lg">
+                <div class="song-artist truncated"></div>
+                <div class="song-name truncated"></div>
             </div>
-            <ul class="timebar">
-                <li><span class="badge badge-timer currentTime"></span></li>
+            <ul class="timebar hidden-xs">
+                <li class=""><span class="badge badge-timer currentTime"></span></li>
                 <li class="bar"><div id="timebar"></div></li>
                 <li><span class="badge badge-timer totalTime"></span></li>
             </ul>
         </div>
-        <!-- Playlist management -->
-        <div class="col-md-2 col-xs-2">
+        <!-- Play/Pause buttons -->
+        <div class="col-md-2 col-xs-5">
             <ul class="player-controls">
-                <li><span class="glyphicon glyphicon-th-list" id="queue-button"></span></li>
-                <li><span class="glyphicon glyphicon-repeat" id="queue-repeat"></span></li>
-                <li><span class="glyphicon glyphicon-random" id="queue-shuffle"></span></li>
+                <li><span class="glyphicon glyphicon-step-backward" id="backward"></span></li>
+                <li class="play"><span class="glyphicon glyphicon-play" id="play"></span></li>
+                <li><span class="glyphicon glyphicon-step-forward" id="forward"></span></li>
             </ul>
         </div>
+
     </div>
 </div>
 
diff --git a/app/webroot/css/style.css b/app/webroot/css/style.css
index 5c4f8df..f101ede 100644
--- a/app/webroot/css/style.css
+++ b/app/webroot/css/style.css
@@ -11,7 +11,8 @@
 
 body {
     font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    padding-top: 120px;
+    padding-top: 60px;
+    padding-bottom: 60px;
 }
 
 h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
@@ -62,10 +63,14 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 }
 
 .navbar-inverse .navbar-header>a,
-.navbar-inverse .navbar-nav>li>a,
+.navbar-inverse .navbar-nav>li>a{
+    background-color:transparent;
+    transition: background-color 0.2s;
+}
+
 .navbar-inverse .navbar-nav>.active>a,
 .navbar-inverse .navbar-nav>.active>a:focus {
-    background-color: transparent;
+    background-color:#58A7D2;
     transition: background-color 0.2s;
 }
 .navbar-inverse .navbar-header>a:hover,
@@ -73,17 +78,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 .navbar-inverse .navbar-nav>.active>a:hover {
     background-color: #337AB7;
 }
-.navbar-inverse .navbar-nav>.active>a:after{
-    content: " ";
-    display: block;
-    position: absolute;
-    border-width: 7px;
-    border-style: solid;
-    border-color: transparent transparent #f8f8f8;
-    bottom: 0;
-    left: 50%;
-    margin-left: -7px;
-}
+
 
 nav .search .search-input{
     height: 25px;
@@ -123,7 +118,6 @@ nav .search .search-input{
     margin-top: 50px;
     height: 65px;
     z-index: 1020;
-    border: none;
     box-shadow: 0 2px 4px 0 rgba(0,0,0,.15);
 }
 
@@ -146,6 +140,24 @@ ul.player-controls li{
     cursor: default;
     color: #808080;
 }
+
+ul.player-controls li.disable span,
+ul.player-controls li.disable div{
+    cursor: default;
+}
+
+ul.player-controls li span,
+ul.player-controls li div,
+div#timebar.slider{
+    cursor: pointer;
+}
+
+ul.player-controls li span{
+    height: 100%;
+    width: 100%;
+    line-height: 65px;
+}
+
 ul.player-controls.volume li.volumeicon .glyphicon{
     margin-right: 5px;
 }
@@ -216,7 +228,7 @@ ul.player-controls li.play{
 
 .queue {
     border-bottom: 1px solid transparent;
-    top: -196px;
+    top: -250px;
     left: 0;
     position: fixed;
     width: 100%;
@@ -226,7 +238,7 @@ ul.player-controls li.play{
 }
 
 .queue.queue-open {
-    top: 114px;
+    top: 50px;
 }
 
 .queue > .queue-wrapper {
@@ -267,7 +279,7 @@ body, body.modal-open {
     position: fixed;
     width: 250px;
     z-index: 100;
-    bottom: 15px;
+    top: 35px;
     right: -300px;
 }
 
@@ -289,7 +301,7 @@ body, body.modal-open {
 }
 
  tr[data-id]{
- 	cursor: pointer;
+     cursor: pointer;
  }
 
 .table>tbody>tr>td.track-number{
@@ -302,11 +314,14 @@ body, body.modal-open {
 }
 
 .truncated-name {
-    white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
+.truncated {
+    white-space: nowrap;
+}
+
 .separator-right {
     border-right: 1px solid #DDD;
 }
@@ -386,17 +401,17 @@ body, body.modal-open {
 }
 
 .band-name{
-	margin-bottom: 25px;
+    margin-bottom: 25px;
 }
 
 .band-stats{
-	margin: -8px auto;
-	font-style: italic;
-	color: #999;
+    margin: -8px auto;
+    font-style: italic;
+    color: #999;
 }
 
 .disc-number{
-	margin: 10px 0;
+    margin: 10px 0;
     text-transform: uppercase;
 }
 
@@ -410,9 +425,9 @@ body, body.modal-open {
 }
 
 .song-controls {
-	color: #999;
-	margin: 0 2px;
-	padding: 0 2px;
+    color: #999;
+    margin: 0 2px;
+    padding: 0 2px;
     cursor: pointer;
 }
 
diff --git a/app/webroot/js/navigation.js b/app/webroot/js/navigation.js
index f236b95..8502da8 100644
--- a/app/webroot/js/navigation.js
+++ b/app/webroot/js/navigation.js
@@ -139,4 +139,11 @@ $(function(){
         $(this).find('.hidden-fields').empty();
     });
 
-});
\ No newline at end of file
+    
+    $('.nav a').on('click', function(){
+        if($('.navbar-toggle').css('display') != 'none'){
+            $('.navbar-toggle').click();
+        }
+    });
+
+});
diff --git a/app/webroot/js/player-nav.js b/app/webroot/js/player-nav.js
index f16ed41..916009a 100644
--- a/app/webroot/js/player-nav.js
+++ b/app/webroot/js/player-nav.js
@@ -445,7 +445,7 @@ function init() {
     });
 
     player.volume(0);
-    player.volume(volume ? volume : 50);
+    player.volume(volume ? volume : 100);
     if (mute == "true") {
         player.mute();
     }