diff --git a/config/ags/js/media-player/mpris.js b/config/ags/js/media-player/mpris.js
index 46e8477..cc1304b 100644
--- a/config/ags/js/media-player/mpris.js
+++ b/config/ags/js/media-player/mpris.js
@@ -113,7 +113,7 @@ export const PositionSlider = (player, params) => EventBox({
         if (player.colors.value)
           s.setCss(`highlight { background-color: ${player.colors.value.buttonAccent}; }
                     slider { background-color: ${player.colors.value.buttonAccent}; }
-                    slider:hover { background-color: #303240; }
+                    slider:hover { background-color: ${player.colors.value.hoverAccent}; }
                     trough { background-color: ${player.colors.value.buttonAccent}; }`);
       }],
     ],
@@ -152,9 +152,34 @@ export const Slash = player => Label({
   }]],
 });
 
+// TODO: use label instead of stack to fix UI issues
 const PlayerButton = ({ player, items, onClick, prop }) => Button({
   child: Stack({ items }),
   onPrimaryClickRelease: () => player[onClick](),
+  onHover: box => {
+    if (! box.child.sensitive || ! box.sensitive) {
+      box.window.set_cursor(Gdk.Cursor.new_from_name(display, 'not-allowed'));
+    }
+    else {
+      box.window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer'));
+    }
+
+    if (prop == 'playBackStatus') {
+      items.forEach(item => {
+        item[1].setStyle(`background-color: ${player.colors.value.hoverAccent};
+                          color: ${player.colors.value.buttonText};`);
+      });
+    }
+  },
+  onHoverLost: box => {
+    box.window.set_cursor(null);
+    if (prop == 'playBackStatus') {
+      items.forEach(item => {
+        item[1].setStyle(`background-color: ${player.colors.value.buttonAccent};
+                          color: ${player.colors.value.buttonText};`);
+      });
+    }
+  },
   connections: [
     [player, button => {
       button.child.shown = `${player[prop]}`;
@@ -169,7 +194,8 @@ const PlayerButton = ({ player, items, onClick, prop }) => Button({
           });
         }
         else {
-          button.setStyle(`color: ${player.colors.value.buttonAccent};`);
+          button.setCss(`* { color: ${player.colors.value.buttonAccent}; }
+                         *:hover { color: ${player.colors.value.hoverAccent}; }`);
         }
       }
     }],
diff --git a/config/ags/scss/widgets/player.scss b/config/ags/scss/widgets/player.scss
index 2dcd183..440a0ee 100644
--- a/config/ags/scss/widgets/player.scss
+++ b/config/ags/scss/widgets/player.scss
@@ -63,11 +63,11 @@
 .shuffle,
 .loop {
   border-radius: 100%;
-  transition: background-color 200ms;
+  transition: color 200ms;
   &:hover {
     border-radius: 100%;
     background-color: rgba(127, 132, 156, 0.4);
-    transition: background-color 200ms;
+    transition: color 200ms;
   }
 }
 
diff --git a/config/ags/style.css b/config/ags/style.css
index f3ada8b..63c22e5 100644
--- a/config/ags/style.css
+++ b/config/ags/style.css
@@ -638,14 +638,14 @@ calendar:indeterminate {
 .shuffle,
 .loop {
   border-radius: 100%;
-  transition: background-color 200ms; }
+  transition: color 200ms; }
   .previous:hover,
   .next:hover,
   .shuffle:hover,
   .loop:hover {
     border-radius: 100%;
     background-color: rgba(127, 132, 156, 0.4);
-    transition: background-color 200ms; }
+    transition: color 200ms; }
 
 .loop label {
   padding-right: 8px; }