diff --git a/htdocs/index.html b/htdocs/index.html
index 4c5e951..169ab5a 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -107,7 +107,7 @@
                 ></span>
               </button>
             </div>
-            <div class="btn-group" role="group">
+            <div class="btn-group" role="group" id="volume-group">
               <div class="btn btn-toolbar btn-default">
                 <span
                   id="volume-icon"
diff --git a/htdocs/js/mpd.js b/htdocs/js/mpd.js
index 88d817c..18b5e38 100644
--- a/htdocs/js/mpd.js
+++ b/htdocs/js/mpd.js
@@ -952,11 +952,14 @@ function get_appropriate_ws_url() {
 }
 
 var updateVolumeIcon = function (volume) {
+    $('#volume-group').removeClass('hide');
     $('#volume-icon').removeClass('glyphicon-volume-off');
     $('#volume-icon').removeClass('glyphicon-volume-up');
     $('#volume-icon').removeClass('glyphicon-volume-down');
 
-    if (volume == 0) {
+    if (volume == -1) {
+        $('#volume-group').addClass('hide');
+    } else if (volume == 0) {
         $('#volume-icon').addClass('glyphicon-volume-off');
     } else if (volume < 50) {
         $('#volume-icon').addClass('glyphicon-volume-down');