diff --git a/playlist/static/img/muted.png b/playlist/static/img/muted.png
new file mode 100644
index 0000000..7cfe7db
Binary files /dev/null and b/playlist/static/img/muted.png differ
diff --git a/playlist/static/img/pawel.png b/playlist/static/img/pawel.png
new file mode 100644
index 0000000..ace3351
Binary files /dev/null and b/playlist/static/img/pawel.png differ
diff --git a/playlist/static/style.css b/playlist/static/style.css
index ea5657c..de3ff32 100644
--- a/playlist/static/style.css
+++ b/playlist/static/style.css
@@ -285,13 +285,17 @@ input[type="range"]#seek::-webkit-slider-runnable-track{
 }
 
 #media-control #volume {
-	background-image:url(img/volume.png);
+	background-image:url(img/muted.png);
 	background-repeat:no-repeat;
 	padding-left: 24px;
 	background-position: 0 50%;
 	max-width: 120px;
 }
 
+#media-control #volume.playing {
+	background-image:url(img/pawel.png);
+}
+
 #volume::-moz-range-thumb {
 	background: transparent;
 	background-image:url(img/vol-select.svg);
diff --git a/playlist/templates/MediaPlayer.html b/playlist/templates/MediaPlayer.html
index 93649eb..0053610 100644
--- a/playlist/templates/MediaPlayer.html
+++ b/playlist/templates/MediaPlayer.html
@@ -100,8 +100,12 @@
     //document.getElementById("stop").click();
     console.log(event);
     let volume = event.target.value / 11;
+    event.target.classList.add("playing");
     kankerherrie.play();
-    if (volume <= 1/11) kankerherrie.pause();
+    if (volume <= 1/11) {
+      kankerherrie.pause();
+    event.target.classList.remove("playing");
+    }
     kankerherrie.volume = volume;
   })
 </script>
\ No newline at end of file