diff --git a/modules/bar/components/Gpu.qml b/modules/bar/components/Gpu.qml
index be1d799..1d65dc6 100644
--- a/modules/bar/components/Gpu.qml
+++ b/modules/bar/components/Gpu.qml
@@ -1,29 +1,25 @@
+import qs.config
+import qs.constants
+import qs.services
+import qs.utils
+import qs.widgets
 import QtQuick
-import Quickshell
-import "../../../config/"
-import "../../../constants/"
-import "../../../services/"
-import "../../../styled/"
-import "../../../utils/"
+import QtQuick.Layouts
 
-Clickable {
+StyledButton {
     id: root
 
     property bool showTemp: false
 
-    implicitWidth: row.width
-    implicitHeight: Dimensions.gpu.height
-
-    Ref {
-        service: SystemInfo
-    }
-
     onClicked: {
         root.showTemp = !root.showTemp;
     }
 
-    Row {
+    content: RowLayout {
         id: row
+        Ref {
+            service: SystemInfo
+        }
         StyledText {
             id: icon
 
@@ -31,19 +27,10 @@ Clickable {
             font.pixelSize: Dimensions.gpu.iconSize
             font.bold: true
             text: Icons.gpu
-
-            anchors.verticalCenter: parent.verticalCenter
-            topPadding: Dimensions.gpu.verticalPadding
-            bottomPadding: Dimensions.gpu.verticalPadding
-            leftPadding: Dimensions.gpu.horizontalPadding
         }
 
         StyledText {
             id: text
-            anchors.verticalCenter: parent.verticalCenter
-            topPadding: Dimensions.gpu.verticalPadding
-            bottomPadding: Dimensions.gpu.verticalPadding
-            rightPadding: Dimensions.gpu.horizontalPadding
 
             font.pixelSize: Dimensions.gpu.fontSize
 
diff --git a/modules/bar/components/Memory.qml b/modules/bar/components/Memory.qml
index 1454c40..450dfbc 100644
--- a/modules/bar/components/Memory.qml
+++ b/modules/bar/components/Memory.qml
@@ -1,43 +1,26 @@
+import qs.config
+import qs.constants
+import qs.services
+import qs.utils
+import qs.widgets
 import QtQuick
-import Quickshell
-import "../../../config/"
-import "../../../constants/"
-import "../../../services/"
-import "../../../styled/"
-import "../../../utils/"
+import QtQuick.Layouts
 
 StyledLabel {
-    implicitWidth: childrenRect.width
-    implicitHeight: Dimensions.memory.height
-
-    Ref {
-        service: SystemInfo
-    }
-
-    Row {
+    RowLayout {
+        Ref {
+            service: SystemInfo
+        }
         StyledText {
-            id: icon
-
             font.family: Theme.lucide.font.family
             font.pixelSize: Dimensions.memory.iconSize
             font.bold: true
             text: Icons.memoryStick
-
-            anchors.verticalCenter: parent.verticalCenter
-            topPadding: Dimensions.memory.verticalPadding
-            bottomPadding: Dimensions.memory.verticalPadding
-            leftPadding: Dimensions.memory.horizontalPadding
         }
 
         StyledText {
             id: text
-            anchors.verticalCenter: parent.verticalCenter
-            topPadding: Dimensions.memory.verticalPadding
-            bottomPadding: Dimensions.memory.verticalPadding
-            rightPadding: Dimensions.memory.horizontalPadding
-
             font.pixelSize: Dimensions.memory.fontSize
-
             text: ` ${(SystemInfo.memPerc * 100).toFixed()}%`
         }
     }
diff --git a/modules/bar/components/Network.qml b/modules/bar/components/Network.qml
index d94a768..e8f01b2 100644
--- a/modules/bar/components/Network.qml
+++ b/modules/bar/components/Network.qml
@@ -1,24 +1,16 @@
+import qs.config
+import qs.constants
+import qs.services
+import qs.utils
+import qs.widgets
 import QtQuick
-import Quickshell
-import "../../../config/"
-import "../../../constants/"
-import "../../../services/"
-import "../../../styled/"
-import "../../../utils/"
+import QtQuick.Layouts
 
 StyledLabel {
-    id: root
-
-    implicitWidth: row.width
-    implicitHeight: Dimensions.network.height
-
-    Ref {
-        id: ref
-        service: NetworkService
-    }
-
-    Row {
-        id: row
+    RowLayout {
+        Ref {
+            service: NetworkService
+        }
         StyledText {
             id: icon
 
@@ -27,11 +19,6 @@ StyledLabel {
             font.bold: true
             text: Icons.wifiOff
 
-            anchors.verticalCenter: parent.verticalCenter
-            topPadding: Dimensions.network.verticalPadding
-            bottomPadding: Dimensions.network.verticalPadding
-            leftPadding: Dimensions.network.horizontalPadding
-
             states: [
                 State {
                     name: "high"
@@ -65,13 +52,7 @@ StyledLabel {
 
         StyledText {
             id: text
-            anchors.verticalCenter: parent.verticalCenter
-            topPadding: Dimensions.network.verticalPadding
-            bottomPadding: Dimensions.network.verticalPadding
-            rightPadding: Dimensions.network.horizontalPadding
-
             font.pixelSize: Dimensions.network.fontSize
-
             text: ` ${(NetworkService.active?.strength ?? 0).toFixed()}%`
         }
     }
diff --git a/modules/bar/components/Notifications.qml b/modules/bar/components/Notifications.qml
index c9c2b27..d0cb6cd 100644
--- a/modules/bar/components/Notifications.qml
+++ b/modules/bar/components/Notifications.qml
@@ -1,21 +1,17 @@
+import qs.config
+import qs.constants
+import qs.services
+import qs.widgets
 import QtQuick
-import Quickshell.Io
-import "../../../config/"
-import "../../../constants/"
-import "../../../services/"
-import "../../../styled/"
 
-Clickable {
+StyledButton {
     id: clickable
 
-    implicitWidth: text.width
-    implicitHeight: Dimensions.notifications.height
-
     onClicked: {
         Notifications.clear();
     }
 
-    StyledText {
+    content: StyledText {
         id: text
 
         font.family: Theme.lucide.font.family
@@ -25,18 +21,12 @@ Clickable {
 
         color: clickable.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent
 
-        anchors.verticalCenter: parent.verticalCenter
-        topPadding: Dimensions.notifications.verticalPadding
-        bottomPadding: Dimensions.notifications.verticalPadding
-        leftPadding: Dimensions.notifications.horizontalPadding
-        rightPadding: Dimensions.notifications.horizontalPadding
-
         states: State {
             when: Notifications.hasNotifications
             PropertyChanges {
                 text {
-                  text: Icons.bellRing
-                  color: clickable.containsMouse ? Theme.palette.base300 : Theme.palette.secondary
+                    text: Icons.bellRing
+                    color: clickable.containsMouse ? Theme.palette.base300 : Theme.palette.secondary
                 }
             }
         }
diff --git a/modules/bar/components/Pipewire.qml b/modules/bar/components/Pipewire.qml
index 631ca03..94791ad 100644
--- a/modules/bar/components/Pipewire.qml
+++ b/modules/bar/components/Pipewire.qml
@@ -1,16 +1,13 @@
+import qs.config
+import qs.widgets
 import QtQuick
 import Quickshell.Services.Pipewire
-import "../../../config/"
-import "../../../styled/"
 
-Clickable {
+StyledButton {
     id: clickable
 
     property var sink: Pipewire.defaultAudioSink
 
-    implicitWidth: text.width
-    implicitHeight: Dimensions.pipewire.height
-
     PwObjectTracker {
         id: bound
         objects: [clickable.sink]
@@ -18,7 +15,7 @@ Clickable {
 
     onClicked: mouse => {
         if (!sink) {
-          return
+            return;
         }
         if (mouse.button == Qt.LeftButton) {
             sink.audio.muted = !sink?.audio.muted;
@@ -56,20 +53,11 @@ Clickable {
         }
     ]
 
-    StyledText {
+    content: StyledText {
         id: text
-
         property string icon: " "
-
         text: `${icon} ${(clickable.sink?.audio.volume * 100).toFixed()}%`
         font.pixelSize: Dimensions.pipewire.fontSize
-
         color: clickable.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent
-
-        anchors.verticalCenter: parent.verticalCenter
-        topPadding: Dimensions.pipewire.verticalPadding
-        bottomPadding: Dimensions.pipewire.verticalPadding
-        leftPadding: Dimensions.pipewire.horizontalPadding
-        rightPadding: Dimensions.pipewire.horizontalPadding
     }
 }
diff --git a/modules/bar/components/Pywal.qml b/modules/bar/components/Pywal.qml
index 60437b9..b21078b 100644
--- a/modules/bar/components/Pywal.qml
+++ b/modules/bar/components/Pywal.qml
@@ -1,20 +1,17 @@
+import qs.config
+import qs.constants
+import qs.widgets
 import QtQuick
 import Quickshell.Io
-import "../../../config/"
-import "../../../constants/"
-import "../../../styled/"
 
-Clickable {
+StyledButton {
     id: clickable
 
-    implicitWidth: text.width
-    implicitHeight: Dimensions.caffeine.height
-
     onClicked: {
         process.running = true;
     }
 
-    StyledText {
+    content: StyledText {
         id: text
 
         font.family: Theme.lucide.font.family
@@ -23,12 +20,6 @@ Clickable {
         text: Icons.brickWall
 
         color: clickable.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent
-
-        anchors.verticalCenter: parent.verticalCenter
-        topPadding: Dimensions.caffeine.verticalPadding
-        bottomPadding: Dimensions.caffeine.verticalPadding
-        leftPadding: Dimensions.caffeine.horizontalPadding
-        rightPadding: Dimensions.caffeine.horizontalPadding
     }
 
     Process {
diff --git a/services/NetworkService.qml b/services/NetworkService.qml
index 8515ef5..73a91c4 100644
--- a/services/NetworkService.qml
+++ b/services/NetworkService.qml
@@ -9,6 +9,7 @@ Singleton {
 
     readonly property list<AccessPoint> networks: []
     readonly property AccessPoint active: networks.find(n => n.active) ?? null
+    property int refCount
 
     reloadableId: "network"