diff --git a/modules/bar/components/Pipewire.qml b/modules/bar/components/Pipewire.qml
index 0b50354..a06afba 100644
--- a/modules/bar/components/Pipewire.qml
+++ b/modules/bar/components/Pipewire.qml
@@ -1,53 +1,34 @@
 import qs.config
+import qs.services
 import qs.widgets
 import QtQuick
-import Quickshell.Services.Pipewire
 
 StyledButton {
-    id: button
-
-    property var sink: Pipewire.defaultAudioSink
-
-    PwObjectTracker {
-        id: bound
-        objects: [button.sink]
-    }
+    id: root
 
     onClicked: mouse => {
-        if (!sink) {
-            return;
-        }
         if (mouse.button == Qt.LeftButton) {
-            sink.audio.muted = !sink?.audio.muted;
-        } else if (mouse.button == Qt.RightButton)
-        // show menu
-        {}
+            Pipewire.toggleMute();
+        } else if (mouse.button == Qt.RightButton) {
+            popup.opened = !popup.opened;
+        }
     }
 
     onWheel: event => {
         if (event.angleDelta.y > 0) {
-            sink.audio.volume = Math.min(sink.audio.volume + 0.02, 1.0);
+            Pipewire.incrementVolume();
         } else if (event.angleDelta.y < 0) {
-            sink.audio.volume -= 0.02;
+            Pipewire.decrementVolume();
         }
     }
 
     states: [
         State {
             name: "muted"
-            when: button.sink?.audio.muted ?? false
+            when: Pipewire.muted
             PropertyChanges {
-                text {
-                    icon: " "
-                }
-            }
-        },
-        State {
-            name: "off"
-            when: button.sink?.audio.volume <= 0
-            PropertyChanges {
-                text {
-                    icon: " "
+                root {
+                    color: Theme.palette.error
                 }
             }
         }
@@ -55,9 +36,9 @@ StyledButton {
 
     content: StyledText {
         id: text
-        property string icon: " "
-        text: `${icon} ${(button.sink?.audio.volume * 100).toFixed()}%`
+        property string icon: Pipewire.muted ? " " : Pipewire.volume <= 0 ? " " : " "
+        text: `${icon} ${(Pipewire.volume * 100).toFixed()}%`
         font.pixelSize: Dimensions.pipewire.fontSize
-        color: button.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent
+        color: root.containsMouse || Pipewire.muted ? Theme.palette.base300 : Theme.palette.basecontent
     }
 }
diff --git a/services/Pipewire.qml b/services/Pipewire.qml
new file mode 100644
index 0000000..53cc141
--- /dev/null
+++ b/services/Pipewire.qml
@@ -0,0 +1,48 @@
+pragma Singleton
+
+import QtQuick
+import Quickshell
+import Quickshell.Services.Pipewire
+
+Singleton {
+    id: root
+
+    readonly property PwNode sink: Pipewire.defaultAudioSink
+    readonly property PwNode source: Pipewire.defaultAudioSource
+
+    readonly property bool muted: sink?.audio?.muted ?? false
+    readonly property real volume: sink?.audio?.volume ?? 0
+
+    function setVolume(volume: real): void {
+        if (sink?.ready && sink?.audio) {
+            sink.audio.muted = false;
+            sink.audio.volume = volume;
+        }
+    }
+
+    function incrementVolume() {
+        if (!sink?.ready || !sink?.audio) {
+            return;
+        }
+        sink.audio.muted = false;
+        sink.audio.volume = Math.min(sink.audio.volume + 0.02, 1.0);
+    }
+
+    function decrementVolume() {
+        if (!sink?.ready || !sink?.audio) {
+            return;
+        }
+        sink.audio.volume -= 0.02;
+    }
+
+    function toggleMute() {
+        if (!sink?.ready || !sink?.audio) {
+            return;
+        }
+        sink.audio.muted = !sink.audio.muted;
+    }
+
+    PwObjectTracker {
+        objects: [Pipewire.defaultAudioSink, Pipewire.defaultAudioSource]
+    }
+}