diff --git a/components/StyledRectangle.qml b/components/StyledRectangle.qml
index aefab71..3682786 100644
--- a/components/StyledRectangle.qml
+++ b/components/StyledRectangle.qml
@@ -1,9 +1,12 @@
 import qs.config
 import QtQuick
+import Quickshell.Widgets
 
-Rectangle {
+WrapperRectangle {
+    id: root
+    margin: 8
     radius: Styling.theme.radiusBox
-    color: Styling.theme.base100
+    color: Styling.theme.base200
     Behavior on color {
         ColorAnimation {
             duration: Styling.animations.speed.normal
diff --git a/components/StyledPanelWindow.qml b/components/StyledWindow.qml
similarity index 100%
rename from components/StyledPanelWindow.qml
rename to components/StyledWindow.qml
diff --git a/components/StyledWrapperRectangle.qml b/components/StyledWrapperRectangle.qml
index 1a89fa8..f2453d0 100644
--- a/components/StyledWrapperRectangle.qml
+++ b/components/StyledWrapperRectangle.qml
@@ -3,7 +3,6 @@ import QtQuick
 import Quickshell.Widgets
 
 WrapperRectangle {
-    margin: 8
     radius: Styling.theme.radiusBox
     color: Styling.theme.base100
     Behavior on color {
diff --git a/modules/bar/Bar.qml b/modules/bar/Bar.qml
index bbbc6ec..37d8226 100644
--- a/modules/bar/Bar.qml
+++ b/modules/bar/Bar.qml
@@ -22,7 +22,6 @@ StyledWrapperRectangle {
     border.color: Styling.theme.base200
 
     margin: 4
-    color: Styling.theme.base100
 
     RowLayout {
 
diff --git a/modules/bar/components/Clock.qml b/modules/bar/components/Clock.qml
index 1941417..3ddb5a7 100644
--- a/modules/bar/components/Clock.qml
+++ b/modules/bar/components/Clock.qml
@@ -1,10 +1,12 @@
 import qs.components
 import Quickshell
 
-StyledText {
-    text: ` ${Qt.formatDateTime(clock.date, "hh:mm:ss AP")}`
-    SystemClock {
-        id: clock
-        precision: SystemClock.Seconds
+StyledRectangle {
+    StyledText {
+        text: ` ${Qt.formatDateTime(clock.date, "hh:mm:ss AP")}`
+        SystemClock {
+            id: clock
+            precision: SystemClock.Seconds
+        }
     }
 }
diff --git a/modules/bar/components/Memory.qml b/modules/bar/components/Memory.qml
index deafda7..55f90df 100644
--- a/modules/bar/components/Memory.qml
+++ b/modules/bar/components/Memory.qml
@@ -5,17 +5,20 @@ import qs.utils
 import QtQuick
 import QtQuick.Layouts
 
-RowLayout {
+StyledRectangle {
 
-    Ref {
-        service: SystemInfo
-    }
+    RowLayout {
 
-    LucideIcon {
-        text: Styling.lucide.icons.memoryStick
-    }
+        Ref {
+            service: SystemInfo
+        }
 
-    StyledText {
-        text: ` ${(SystemInfo.memPerc * 100).toFixed()}%`
+        LucideIcon {
+            text: Styling.lucide.icons.memoryStick
+        }
+
+        StyledText {
+            text: ` ${(SystemInfo.memPerc * 100).toFixed()}%`
+        }
     }
 }
diff --git a/modules/bar/components/Network.qml b/modules/bar/components/Network.qml
index 7b65d2c..57a0905 100644
--- a/modules/bar/components/Network.qml
+++ b/modules/bar/components/Network.qml
@@ -5,48 +5,51 @@ import qs.utils
 import QtQuick
 import QtQuick.Layouts
 
-RowLayout {
+StyledRectangle {
 
-    Ref {
-        service: NetworkService
-    }
+    RowLayout {
 
-    LucideIcon {
-        id: icon
-        text: Styling.lucide.icons.wifiOff
-        states: [
-            State {
-                name: "high"
-                when: NetworkService.active?.strength > 50
-                PropertyChanges {
-                    icon {
-                        text: Styling.lucide.icons.wifi
+        Ref {
+            service: NetworkService
+        }
+
+        LucideIcon {
+            id: icon
+            text: Styling.lucide.icons.wifiOff
+            states: [
+                State {
+                    name: "high"
+                    when: NetworkService.active?.strength > 50
+                    PropertyChanges {
+                        icon {
+                            text: Styling.lucide.icons.wifi
+                        }
+                    }
+                },
+                State {
+                    name: "medium"
+                    when: NetworkService.active?.strength > 25
+                    PropertyChanges {
+                        icon {
+                            text: Styling.lucide.icons.wifiHigh
+                        }
+                    }
+                },
+                State {
+                    name: "low"
+                    when: NetworkService.active?.strength > 0
+                    PropertyChanges {
+                        icon {
+                            text: Styling.lucide.icons.wifiLow
+                        }
                     }
                 }
-            },
-            State {
-                name: "medium"
-                when: NetworkService.active?.strength > 25
-                PropertyChanges {
-                    icon {
-                        text: Styling.lucide.icons.wifiHigh
-                    }
-                }
-            },
-            State {
-                name: "low"
-                when: NetworkService.active?.strength > 0
-                PropertyChanges {
-                    icon {
-                        text: Styling.lucide.icons.wifiLow
-                    }
-                }
-            }
-        ]
-    }
+            ]
+        }
 
-    StyledText {
-        id: text
-        text: ` ${(NetworkService.active?.strength ?? 0).toFixed()}%`
+        StyledText {
+            id: text
+            text: ` ${(NetworkService.active?.strength ?? 0).toFixed()}%`
+        }
     }
 }
diff --git a/modules/bar/components/Storage.qml b/modules/bar/components/Storage.qml
index 7450969..0a1d2b7 100644
--- a/modules/bar/components/Storage.qml
+++ b/modules/bar/components/Storage.qml
@@ -5,19 +5,22 @@ import qs.utils
 import QtQuick
 import QtQuick.Layouts
 
-RowLayout {
+StyledRectangle {
 
-    Ref {
-        service: SystemInfo
-    }
+    RowLayout {
 
-    LucideIcon {
-        text: Styling.lucide.icons.hardDrive
-    }
+        Ref {
+            service: SystemInfo
+        }
 
-    StyledText {
-        id: text
+        LucideIcon {
+            text: Styling.lucide.icons.hardDrive
+        }
 
-        text: ` ${(SystemInfo.storagePerc * 100).toFixed()}%`
+        StyledText {
+            id: text
+
+            text: ` ${(SystemInfo.storagePerc * 100).toFixed()}%`
+        }
     }
 }
diff --git a/modules/bar/components/bluetooth/AvailableDevice.qml b/modules/bar/components/bluetooth/AvailableDevice.qml
index 9196210..62a65f5 100644
--- a/modules/bar/components/bluetooth/AvailableDevice.qml
+++ b/modules/bar/components/bluetooth/AvailableDevice.qml
@@ -1,21 +1,20 @@
 pragma ComponentBehavior: Bound
 
 import qs.components
-import qs.config
 import QtQuick
 import QtQuick.Layouts
 import Quickshell
 import Quickshell.Bluetooth
 import Quickshell.Widgets
 
-StyledWrapperRectangle {
+StyledRectangle {
     id: root
     required property BluetoothDevice modelData
 
     RowLayout {
         id: row
 
-        spacing: Styling.layout.spacing.base
+        spacing: 8
 
         Loader {
             active: root.modelData?.icon != undefined
diff --git a/modules/bar/components/bluetooth/ConnectedDevice.qml b/modules/bar/components/bluetooth/ConnectedDevice.qml
index 960acf9..2b6f079 100644
--- a/modules/bar/components/bluetooth/ConnectedDevice.qml
+++ b/modules/bar/components/bluetooth/ConnectedDevice.qml
@@ -8,14 +8,14 @@ import Quickshell
 import Quickshell.Bluetooth
 import Quickshell.Widgets
 
-StyledWrapperRectangle {
+StyledRectangle {
     id: root
     required property BluetoothDevice modelData
 
     RowLayout {
         id: row
 
-        spacing: Styling.layout.spacing.base
+        spacing: 8
 
         Loader {
             active: root.modelData?.icon != undefined
diff --git a/modules/bar/components/bluetooth/PairedDevice.qml b/modules/bar/components/bluetooth/PairedDevice.qml
index f8583b0..297c63f 100644
--- a/modules/bar/components/bluetooth/PairedDevice.qml
+++ b/modules/bar/components/bluetooth/PairedDevice.qml
@@ -2,20 +2,21 @@ pragma ComponentBehavior: Bound
 
 import qs.components
 import qs.config
+import qs.widgets
 import QtQuick
 import QtQuick.Layouts
 import Quickshell
 import Quickshell.Bluetooth
 import Quickshell.Widgets
 
-StyledWrapperRectangle {
+StyledRectangle {
     id: root
     required property BluetoothDevice modelData
 
     RowLayout {
         id: row
 
-        spacing: Styling.layout.spacing.base
+        spacing: 8
 
         Loader {
             active: root.modelData?.icon != undefined
diff --git a/modules/bar/components/notifications/NotificationItem.qml b/modules/bar/components/notifications/NotificationItem.qml
index 21b69f5..b2c45fb 100644
--- a/modules/bar/components/notifications/NotificationItem.qml
+++ b/modules/bar/components/notifications/NotificationItem.qml
@@ -1,16 +1,18 @@
 pragma ComponentBehavior: Bound
 
 import qs.components
+import qs.widgets
 import QtQuick
 import QtQuick.Layouts
 import Quickshell
 import Quickshell.Widgets
 
-StyledWrapperRectangle {
+StyledRectangle {
     id: root
 
     required property var modelData
 
+    margin: 16
     anchors.left: parent.left
     anchors.right: parent.right
 
diff --git a/modules/bar/components/notifications/NotificationMenu.qml b/modules/bar/components/notifications/NotificationMenu.qml
index 43f2f19..d608fd8 100644
--- a/modules/bar/components/notifications/NotificationMenu.qml
+++ b/modules/bar/components/notifications/NotificationMenu.qml
@@ -1,6 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import qs.components
+import qs.config
 import qs.services
 import QtQuick
 import QtQuick.Layouts
@@ -24,8 +25,9 @@ StyledPopupWindow {
             onClicked: Notifications.clear()
         }
 
-        StyledWrapperRectangle {
+        StyledRectangle {
             Layout.columnSpan: 2
+            color: Styling.theme.base200
             StyledListView {
                 id: notifications
 
diff --git a/modules/launcher/Launcher.qml b/modules/launcher/Launcher.qml
index 7a2b0d0..d04ce1b 100644
--- a/modules/launcher/Launcher.qml
+++ b/modules/launcher/Launcher.qml
@@ -9,7 +9,7 @@ import Quickshell.Wayland
 import QtQuick
 import QtQuick.Layouts
 
-StyledPanelWindow {
+StyledWindow {
     id: root
     name: "launcher"
 
diff --git a/modules/pomodoro/Pomodoro.qml b/modules/pomodoro/Pomodoro.qml
index 88d3e96..8c3d7ee 100644
--- a/modules/pomodoro/Pomodoro.qml
+++ b/modules/pomodoro/Pomodoro.qml
@@ -9,7 +9,7 @@ import Quickshell.Wayland
 import QtQuick
 import QtQuick.Layouts
 
-StyledPanelWindow {
+StyledWindow {
     id: root
     name: "pomodoro"
 
diff --git a/modules/powermenu/PowerMenu.qml b/modules/powermenu/PowerMenu.qml
index 739bcee..e204b20 100644
--- a/modules/powermenu/PowerMenu.qml
+++ b/modules/powermenu/PowerMenu.qml
@@ -9,7 +9,7 @@ import Quickshell.Wayland
 import QtQuick
 import QtQuick.Layouts
 
-StyledPanelWindow {
+StyledWindow {
     id: root
     name: "powermenu"
 
diff --git a/modules/storybook/Storybook.qml b/modules/storybook/Storybook.qml
index 68d5776..59962cc 100644
--- a/modules/storybook/Storybook.qml
+++ b/modules/storybook/Storybook.qml
@@ -9,7 +9,7 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 
-StyledPanelWindow {
+StyledWindow {
     id: root
     name: "storybook"