@@ -12,6 +12,7 @@ TopbarRight {
       Module.Timedate {}
       Module.Sunset {}
       Module.Volume {}
+      Class.TopSep{}
       Module.Moonphase {}
       Module.Ram {}
       Module.Taskwarrior {}

@@ -8,4 +8,5 @@ TopbarText {
   id: separator
   text: "|"
   color: Resources.palette.sand
+  padding: 0
 }

@@ -7,6 +7,7 @@ import "../../"
 import "../classes" as Class
 
 Class.RightRowLayout {
+
   Class.TopbarText {
     id: moonphase
     color: Resources.palette.saffron

@@ -11,12 +11,20 @@ Button {
   PwObjectTracker {
     objects: [ Pipewire.defaultAudioSink ]
   }
+  property var muted: Pipewire.defaultAudioSink?.audio.muted
   padding: 0
-  onClicked: Pipewire.defaultAudioSink.audio.muted = !Pipewire.defaultAudioSink.audio.muted
+  MouseArea{
+    id: vol_button
+    anchors.fill: parent
+    hoverEnabled: true
+    cursorShape: Qt.PointingHandCursor
+    onClicked: muted = !muted
+  }
   background: Rectangle {
-    // implicitWidth: 0
-    // implicitHeight: 0
-    color: Resources.palette.bg
+    color:
+      (vol_button.containsMouse)
+      ? Resources.palette.altbg
+      : Resources.palette.bg
   }
 contentItem: Class.RightRowLayout {
   id: volume_module
@@ -24,11 +32,14 @@ Layout.alignment: Qt.AlignVCenter
     Class.TopbarText {
       id: volume_indicator
       property var vol: Math.round((Pipewire.defaultAudioSink?.audio.volume ?? 0) * 100)
-      text: (Pipewire.defaultAudioSink?.audio.muted) ? "" :vol + "%"
-      color: (Pipewire.defaultAudioSink?.audio.muted) ? Resources.palette.grey : Resources.palette.fg
+      text:
+        (muted)
+        ? ""
+        : vol + "%"
+      color: Resources.palette.fg
     }
     Class.TopbarIcon {
-      text: if (Pipewire.defaultAudioSink?.audio.muted) {
+      text: if (muted) {
         Icons.volume.mute
       } else if (volume_indicator.vol == 0) {
         Icons.volume.off
@@ -39,8 +50,10 @@ Icons.volume.high
       } else {
         Icons.volume.low
       }
-      color: (Pipewire.defaultAudioSink?.audio.muted) ? Resources.palette.scarlet : Resources.palette.orange
+      color:
+        (muted)
+        ? Resources.palette.scarlet
+        : Resources.palette.orange
     }
-    Class.TopSep{}
   }
 }

@@ -16,13 +16,22 @@ Repeater {
     model: I3.workspaces.values
     Button {
       padding: 2
-      onClicked: I3.dispatch(`workspace number `+modelData.number);
+      MouseArea{
+        id: ws_button
+        hoverEnabled: true
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        onClicked: I3.dispatch(`workspace number `+modelData.number);
+      }
       background: Rectangle {
         width:16
         height: 24
         anchors.centerIn: parent
-        color: (modelData.name == ws_focused)
+        color:
+          (modelData.name == ws_focused)
           ? Resources.palette.orange
+          : ws_button.containsMouse
+          ? Resources.palette.altbg
           : Resources.palette.bg
       }
       contentItem: Text {
@@ -35,13 +44,16 @@ "11": Icons.workspaces.download,
           "12": Icons.workspaces.volume_mixer
         }) [modelData.name] ?? modelData.name
         padding: 0
-        color: (modelData.name == ws_focused)
+        color:
+          (modelData.name == ws_focused)
           ? Resources.palette.bg
           : Resources.palette.fg
-        font.family: ws_special
+        font.family:
+          (ws_special)
           ? font_icon.name
           : font_proggy.name
-        font.pixelSize: ws_special
+        font.pixelSize:
+          (ws_special)
           ? Resources.fontsize.workspace_icon
           : Resources.fontsize.topbar_text
         renderType: Text.NativeRendering