diff --git a/resources/style.css b/resources/style.css
index 8de2cdcd..cca30d99 100644
--- a/resources/style.css
+++ b/resources/style.css
@@ -140,7 +140,7 @@ window#waybar.hidded {
 }
 
 #mpd {
-    background-color: #ba2880;
+    background: #ba2880;
 }
 
 #mpd.disconnected {
@@ -151,3 +151,7 @@ window#waybar.hidded {
     background: #90b1b1;
     color: #2a5c45;
 }
+
+#mpd.paused {
+    background: #ce68a6;
+}
diff --git a/src/modules/mpd.cpp b/src/modules/mpd.cpp
index 7e4e88b5..ae3bc853 100644
--- a/src/modules/mpd.cpp
+++ b/src/modules/mpd.cpp
@@ -104,8 +104,17 @@ void waybar::modules::MPD::setLabel() {
     format =
         config_["format-stopped"].isString() ? config_["format-stopped"].asString() : "stopped";
     label_.get_style_context()->add_class("stopped");
+    label_.get_style_context()->remove_class("playing");
+    label_.get_style_context()->remove_class("paused");
   } else {
     label_.get_style_context()->remove_class("stopped");
+    if (playing()) {
+      label_.get_style_context()->add_class("playing");
+      label_.get_style_context()->remove_class("paused");
+    } else {
+      label_.get_style_context()->add_class("paused");
+      label_.get_style_context()->remove_class("playing");
+    }
 
     stateIcon = getStateIcon();