diff --git a/AudioWidget.qml b/AudioWidget.qml
index f110f48..911685d 100644
--- a/AudioWidget.qml
+++ b/AudioWidget.qml
@@ -6,7 +6,7 @@ import qs.Common.Styled
 import qs.Services
 
 BackgroundRectangle {
-    id: audioWidget
+    id: root
 
     property string monitor: ""
     property string icon: " "
@@ -20,26 +20,26 @@ BackgroundRectangle {
     states: [
         State {
             name: "Mute"
-            when: audioWidget.volume == 0 || audioWidget.sink.audio.muted
+            when: root.volume == 0 || root.sink.audio.muted
 
             PropertyChanges {
-                audioWidget.icon: " "
+                root.icon: " "
             }
         },
         State {
             name: "low volume"
-            when: audioWidget.volume <= 25
+            when: root.volume <= 25
 
             PropertyChanges {
-                audioWidget.icon: " "
+                root.icon: " "
             }
         },
         State {
             name: "high volume"
-            when: audioWidget.volume > 25
+            when: root.volume > 25
 
             PropertyChanges {
-                audioWidget.icon: " "
+                root.icon: " "
             }
         }
     ]
@@ -50,23 +50,23 @@ BackgroundRectangle {
 
     Connections {
         function onVolumeChanged() {
-            audioWidget.volume = Math.round(Pipewire.defaultAudioSink.audio.volume * 100);
+            root.volume = Math.round(Pipewire.defaultAudioSink.audio.volume * 100);
         }
 
-        target: audioWidget.audioPipewireActive ? Pipewire.defaultAudioSink.audio : null
+        target: root.audioPipewireActive ? Pipewire.defaultAudioSink.audio : null
     }
 
     StyledText {
         id: audioText
 
-        property string audioTextText: audioWidget.audioPipewireActive ? audioWidget.icon + "  " + Math.round(Pipewire.defaultAudioSink.audio.volume * 100).toString() + "%" : ""
+        property string audioTextText: root.audioPipewireActive ? root.icon + "  " + Math.round(Pipewire.defaultAudioSink.audio.volume * 100).toString() + "%" : ""
 
         anchors.centerIn: parent
         text: audioTextText
     }
 
     Process {
-        id: audioWidgetProcess
+        id: rootProcess
 
         running: false
         command: ["pavucontrol"]
@@ -77,7 +77,7 @@ BackgroundRectangle {
         acceptedButtons: Qt.LeftButton | Qt.RightButton
         hoverEnabled: true
         onEntered: {
-            PopUpHover.start(audioWidget, "audio");
+            PopUpHover.start(root, "audio");
         }
         onExited: {
             // PopUpHover.exit()
@@ -87,7 +87,7 @@ BackgroundRectangle {
             if (mouse.button === Qt.RightButton) {
                 parent.sink.audio.muted = !parent.sink.audio.muted;
             } else if (mouse.button === Qt.LeftButton) {
-                audioWidgetProcess.startDetached();
+                rootProcess.startDetached();
             }
         }
         onWheel: wheel => {
@@ -95,12 +95,12 @@ BackgroundRectangle {
                 if (0)
                     return;
 
-                Pipewire.defaultAudioSink.audio.volume = (audioWidget.volume + 5) / 100;
+                Pipewire.defaultAudioSink.audio.volume = (root.volume + 5) / 100;
             } else if (wheel.angleDelta.y < 0) {
                 if (0)
                     return;
 
-                Pipewire.defaultAudioSink.audio.volume = (audioWidget.volume - 5) / 100;
+                Pipewire.defaultAudioSink.audio.volume = (root.volume - 5) / 100;
             }
         }
     }
diff --git a/BarArea.qml b/BarArea.qml
index 39edd98..01790e4 100644
--- a/BarArea.qml
+++ b/BarArea.qml
@@ -5,7 +5,7 @@ import Quickshell.Widgets
 import qs.Common
 
 WrapperRectangle {
-    id: barArea
+    id: root
 
     property var monitor: "DP-1"
     property var components: [] // Add this new property
@@ -16,14 +16,14 @@ WrapperRectangle {
 
     RowLayout {
         Repeater {
-            model: barArea.components
+            model: root.components
 
             delegate: Loader {
                 required property var modelData
                 // The source of the loader is the component from the model
                 source: modelData
                 onLoaded: {
-                    item.monitor = barArea.monitor;
+                    item.monitor = root.monitor;
                 }
             }
         }
diff --git a/Common/CalendarComponent.qml b/Common/CalendarComponent.qml
index 2a7d9f1..527cec3 100644
--- a/Common/CalendarComponent.qml
+++ b/Common/CalendarComponent.qml
@@ -5,6 +5,7 @@ import qs.Common.Styled
 
 Item {
     id: root
+
     property int targetYear: new Date().getFullYear()
     property int targetMonth: new Date().getMonth() // 0-11
     property date currentDate: new Date()
diff --git a/Common/HoverMediator.qml b/Common/HoverMediator.qml
index 4359f65..40acdcc 100644
--- a/Common/HoverMediator.qml
+++ b/Common/HoverMediator.qml
@@ -4,11 +4,10 @@ import Quickshell
 import qs.Common
 
 Singleton {
-    id: mediatorRoot
+    id: root
 
     property var component: null
     property string type: ""
-    property int x: component? component.implicitWidth : 0
-    property int y: component? (component.implicitHeight + Theme.gaps) : 100
-
+    property int x: component ? component.implicitWidth : 0
+    property int y: component ? (component.implicitHeight + Theme.gaps) : 100
 }
diff --git a/Common/NotificationWrapper.qml b/Common/NotificationWrapper.qml
index 0aa2833..91ae704 100644
--- a/Common/NotificationWrapper.qml
+++ b/Common/NotificationWrapper.qml
@@ -5,7 +5,7 @@ import Quickshell.Widgets
 import qs.Common.Styled
 
 BackgroundRectangle {
-    id: notificationWrapper
+    id: root
 
     signal dismissed
     signal timedout
@@ -33,7 +33,7 @@ BackgroundRectangle {
     // implicitHeight: Math.max(notifLayout.implicitHeight, 100)
 
     Component.onCompleted: {
-        notificationWrapper.implicitHeight = targetHeight;
+        root.implicitHeight = targetHeight;
     }
     clip: true
 
@@ -46,9 +46,9 @@ BackgroundRectangle {
             ScriptAction {
                 script: {
                     if (clicked)
-                        notificationWrapper.dismissed();
-                    if (notificationWrapper.implicitHeight === 0)
-                        notificationWrapper.timedout();
+                        root.dismissed();
+                    if (root.implicitHeight === 0)
+                        root.timedout();
                 }
             }
         }
@@ -57,8 +57,8 @@ BackgroundRectangle {
     MouseArea {
         anchors.fill: parent
         onClicked: {
-            notificationWrapper.clicked = true;
-            notificationWrapper.implicitHeight = 0;
+            root.clicked = true;
+            root.implicitHeight = 0;
         }
     }
 
@@ -66,10 +66,10 @@ BackgroundRectangle {
         id: notifTimer
 
         interval: timerDuration
-        running: notificationWrapper.startTimer
+        running: root.startTimer
 
         onTriggered: {
-            notificationWrapper.implicitHeight = 0;
+            root.implicitHeight = 0;
         }
     }
 
@@ -88,8 +88,8 @@ BackgroundRectangle {
             Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
             Layout.leftMargin: 10
             implicitSize: 80
-            visible: notificationWrapper.image ? true : false
-            source: notificationWrapper.image
+            visible: root.image ? true : false
+            source: root.image
         }
 
         ColumnLayout {
@@ -118,7 +118,7 @@ BackgroundRectangle {
 
                     anchors.fill: parent
 
-                    text: notificationWrapper.notification ? notificationWrapper.notification.summary : ""
+                    text: root.notification ? root.notification.summary : ""
                 }
             }
 
@@ -140,7 +140,7 @@ BackgroundRectangle {
 
                     anchors.fill: parent
 
-                    text: notificationWrapper.notification ? notificationWrapper.notification.body : ""
+                    text: root.notification ? root.notification.body : ""
                 }
             }
         }
diff --git a/Common/Styled/BackgroundRectangle.qml b/Common/Styled/BackgroundRectangle.qml
index c3821a2..59cc619 100644
--- a/Common/Styled/BackgroundRectangle.qml
+++ b/Common/Styled/BackgroundRectangle.qml
@@ -2,9 +2,10 @@ import QtQuick
 import qs.Common
 
 Rectangle {
+    id: root
 
     color: Theme.backgroudColor
-    border.width: 1
+    border.width: 2
     border.color: Theme.color2
     radius: 20
 }
diff --git a/Common/Styled/ForegroundRectangle.qml b/Common/Styled/ForegroundRectangle.qml
index 548b575..8f7d819 100644
--- a/Common/Styled/ForegroundRectangle.qml
+++ b/Common/Styled/ForegroundRectangle.qml
@@ -2,6 +2,7 @@ import QtQuick
 import qs.Common
 
 Rectangle {
+    id: root
 
     color: Theme.backgroudColorBright
     radius: 20
diff --git a/Common/Styled/StyledText.qml b/Common/Styled/StyledText.qml
index 1bdee8b..05b6c50 100644
--- a/Common/Styled/StyledText.qml
+++ b/Common/Styled/StyledText.qml
@@ -2,7 +2,7 @@ import QtQuick
 import qs.Common
 
 Text {
-    id: clockText
+    id: root
 
     anchors.margins: 5
     horizontalAlignment: Text.AlignHCenter
diff --git a/Common/Theme.qml b/Common/Theme.qml
index a79f8d2..38db0ef 100644
--- a/Common/Theme.qml
+++ b/Common/Theme.qml
@@ -5,7 +5,7 @@ import Quickshell
 import Quickshell.Io
 
 Singleton {
-    id: timeRoot
+    id: root
 
     readonly property int barSize: 35
     readonly property double heightGaps: barSize * 0.8
@@ -18,7 +18,7 @@ Singleton {
     // Colors
     FileView {
         id: walColors
-        path: Qt.resolvedUrl(Quickshell.env("XDG_CACHE_HOME")+"/wal/colors")
+        path: Qt.resolvedUrl(Quickshell.env("XDG_CACHE_HOME") + "/wal/colors")
         blockLoading: true
         watchChanges: true
         onFileChanged: this.reload()
diff --git a/Services/Time.qml b/Services/Time.qml
index 8b17825..e02d491 100644
--- a/Services/Time.qml
+++ b/Services/Time.qml
@@ -3,7 +3,7 @@ pragma Singleton
 import Quickshell
 
 Singleton {
-    id: timeRoot
+    id: root
 
     readonly property string time: {
         Qt.formatDateTime(clock.date, "hh:mm");
diff --git a/SysTrayWidget.qml b/SysTrayWidget.qml
index 97a8737..1aa26fe 100644
--- a/SysTrayWidget.qml
+++ b/SysTrayWidget.qml
@@ -10,7 +10,7 @@ import qs.Common.Styled
 import qs.Services
 
 BackgroundRectangle {
-    id: systrayRoot
+    id: root
 
     MarginWrapperManager {
         rightMargin: Theme.gaps
diff --git a/Widgets/NotificationWindow.qml b/Widgets/NotificationWindow.qml
index 32622a8..322e95a 100644
--- a/Widgets/NotificationWindow.qml
+++ b/Widgets/NotificationWindow.qml
@@ -11,7 +11,7 @@ import qs.Common
 import Quickshell.Wayland
 
 PanelWindow {
-    id: notificationRoot
+    id: root
 
     anchors {
         left: true
@@ -33,12 +33,12 @@ PanelWindow {
         focus: true
         Keys.onPressed: event => {
             if (event.key == Qt.Key_Escape)
-                notificationRoot.clear();
+                root.clear();
         }
     }
     MouseArea {
         anchors.fill: parent
-        onClicked: notificationRoot.clear()
+        onClicked: root.clear()
     }
 
     Rectangle {
diff --git a/Workspaces.qml b/Workspaces.qml
index eecfb42..dcc2f9b 100644
--- a/Workspaces.qml
+++ b/Workspaces.qml
@@ -11,7 +11,7 @@ import qs.Common.Styled
 import qs.Services
 
 WrapperMouseArea {
-    id: workspacesWidget
+    id: root
 
     property var monitor: "black"
 
@@ -31,7 +31,7 @@ WrapperMouseArea {
 
     RowLayout {
 
-        property var monitor: workspacesWidget.monitor
+        property var monitor: root.monitor
 
         Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter