diff --git a/components/StyledLayoutSeparator.qml b/components/StyledLayoutSeparator.qml
new file mode 100644
index 0000000..e5b0295
--- /dev/null
+++ b/components/StyledLayoutSeparator.qml
@@ -0,0 +1,12 @@
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+Rectangle {
+    color: Styling.theme.basecontent
+    opacity: 0.33
+    Layout.fillHeight: true
+    Layout.margins: 2
+    implicitWidth: 0.5
+    radius: 9999
+}
diff --git a/components/StyledPopupWindow.qml b/components/StyledPopupWindow.qml
index cf87fb1..4927cfb 100644
--- a/components/StyledPopupWindow.qml
+++ b/components/StyledPopupWindow.qml
@@ -1,92 +1,102 @@
-import qs.config
+import qs.services
 import QtQuick
 import Quickshell
-import Quickshell.Hyprland
+import Quickshell.Widgets
 
 PopupWindow {
     id: root
-
+    property bool opened: false
+    property int animationDuration: 200
+    property alias margins: background.margin
+    property alias backgroundColor: background.color
+    property alias radius: background.radius
+    property alias state: background.state
     required property Component content
 
-    implicitWidth: background.width
-    implicitHeight: background.height
     color: "transparent"
 
-    HyprlandFocusGrab {
-        id: grab
-        active: root.visible
-        windows: [root]
-        onCleared: {
-            background.state = "closed";
-        }
-    }
-
     function toggle() {
-        background.state = background.state == "opened" ? "closed" : "opened";
+        Visibility.togglePopup(this);
     }
 
-    StyledWrapperRectangle {
-        id: background
-
-        margin: 16
-        focus: true
-        onFocusChanged: {
-            if (!focus) {
-                grab.active = false;
-            }
+    implicitWidth: background.width
+    Behavior on implicitWidth {
+        NumberAnimation {
+            duration: 100
         }
-
-        Behavior on opacity {
-            NumberAnimation {
-                duration: Styling.animations.speed.normal
-            }
+    }
+    implicitHeight: background.height
+    Behavior on implicitHeight {
+        NumberAnimation {
+            duration: 100
         }
+    }
 
-        state: "closed"
-        states: [
-            State {
-                name: "closed"
-                PropertyChanges {
-                    background {
-                        opacity: 0
-                    }
+    Timer {
+        id: timer
+        interval: 750
+        onTriggered: {
+            if (!root.visible) {
+                return;
+            }
+            root.toggle();
+        }
+    }
+
+    WrapperMouseArea {
+        hoverEnabled: true
+        onExited: {
+            timer.start();
+        }
+        onEntered: {
+            timer.stop();
+        }
+        WrapperRectangle {
+            id: background
+
+            opacity: 0
+            Behavior on opacity {
+                NumberAnimation {
+                    duration: root.animationDuration
                 }
-            },
-            State {
+            }
+
+            states: State {
                 name: "opened"
+                when: root.opened
                 PropertyChanges {
                     background {
                         opacity: 1
                     }
                 }
             }
-        ]
 
-        transitions: [
-            Transition {
-                from: "closed"
-                to: "opened"
-                ScriptAction {
-                    script: root.visible = true
-                }
-            },
-            Transition {
-                from: "opened"
-                to: "closed"
-                SequentialAnimation {
-                    PauseAnimation {
-                        duration: root.animationDuration
-                    }
+            transitions: [
+                Transition {
+                    from: ""
+                    to: "opened"
                     ScriptAction {
-                        script: root.visible = false
+                        script: root.visible = true
+                    }
+                },
+                Transition {
+                    from: "opened"
+                    to: ""
+                    SequentialAnimation {
+                        PauseAnimation {
+                            duration: root.animationDuration
+                        }
+                        ScriptAction {
+                            script: root.visible = false
+                        }
                     }
                 }
-            }
-        ]
+            ]
 
-        Loader {
-            active: root.visible
-            sourceComponent: root.content
+            Loader {
+                active: root.visible
+                sourceComponent: root.content
+            }
         }
     }
 }
diff --git a/modules/bar/Bar.qml b/modules/bar/Bar.qml
index 37d8226..afa5947 100644
--- a/modules/bar/Bar.qml
+++ b/modules/bar/Bar.qml
@@ -28,7 +28,7 @@ StyledWrapperRectangle {
         RowLayout {
             id: leftbar
 
-            spacing: Styling.layout.spacing.base
+            spacing: Styling.layout.spacing.lg
 
             SystemLogo {
                 implicitSize: 22
@@ -44,7 +44,7 @@ StyledWrapperRectangle {
 
             Layout.alignment: Qt.AlignHCenter
 
-            spacing: Styling.layout.spacing.base
+            spacing: Styling.layout.spacing.lg
 
             Mpris {}
         }
@@ -54,18 +54,14 @@ StyledWrapperRectangle {
 
             Layout.alignment: Qt.AlignRight
 
-            spacing: Styling.layout.spacing.base
-
-            Pywal {}
+            spacing: Styling.layout.spacing.lg
 
             Pipewire {}
 
-            Caffeine {}
+            StyledLayoutSeparator {}
 
             Network {}
 
-            Bluetooth {}
-
             Storage {}
 
             Memory {}
@@ -74,10 +70,20 @@ StyledWrapperRectangle {
 
             Gpu {}
 
-            Power {}
+            StyledLayoutSeparator {}
+
+            Pywal {}
+
+            Caffeine {}
+
+            Bluetooth {}
+
+            StyledLayoutSeparator {}
 
             Clock {}
 
+            Power {}
+
             Notifications {}
         }
     }
diff --git a/modules/bar/components/Caffeine.qml b/modules/bar/components/Caffeine.qml
index 126ec7a..e45cb45 100644
--- a/modules/bar/components/Caffeine.qml
+++ b/modules/bar/components/Caffeine.qml
@@ -6,7 +6,7 @@ StyledIconButton {
     id: root
 
     border.width: 2
-    border.color: Caffeine.enabled ? Styling.theme.secondary : root.hovered ? Styling.theme.primary : Styling.theme.base300
+    border.color: Caffeine.enabled ? Styling.theme.secondary : root.hovered ? Styling.theme.primary : Styling.theme.base200
     text: Styling.lucide.icons.coffee
 
     onClicked: {
diff --git a/modules/bar/components/Clock.qml b/modules/bar/components/Clock.qml
index 3ddb5a7..1941417 100644
--- a/modules/bar/components/Clock.qml
+++ b/modules/bar/components/Clock.qml
@@ -1,12 +1,10 @@
 import qs.components
 import Quickshell
 
-StyledRectangle {
-    StyledText {
-        text: ` ${Qt.formatDateTime(clock.date, "hh:mm:ss AP")}`
-        SystemClock {
-            id: clock
-            precision: SystemClock.Seconds
-        }
+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 55f90df..deafda7 100644
--- a/modules/bar/components/Memory.qml
+++ b/modules/bar/components/Memory.qml
@@ -5,20 +5,17 @@ import qs.utils
 import QtQuick
 import QtQuick.Layouts
 
-StyledRectangle {
+RowLayout {
 
-    RowLayout {
+    Ref {
+        service: SystemInfo
+    }
 
-        Ref {
-            service: SystemInfo
-        }
+    LucideIcon {
+        text: Styling.lucide.icons.memoryStick
+    }
 
-        LucideIcon {
-            text: Styling.lucide.icons.memoryStick
-        }
-
-        StyledText {
-            text: ` ${(SystemInfo.memPerc * 100).toFixed()}%`
-        }
+    StyledText {
+        text: ` ${(SystemInfo.memPerc * 100).toFixed()}%`
     }
 }
diff --git a/modules/bar/components/Network.qml b/modules/bar/components/Network.qml
index 57a0905..7b65d2c 100644
--- a/modules/bar/components/Network.qml
+++ b/modules/bar/components/Network.qml
@@ -5,51 +5,48 @@ import qs.utils
 import QtQuick
 import QtQuick.Layouts
 
-StyledRectangle {
+RowLayout {
 
-    RowLayout {
+    Ref {
+        service: NetworkService
+    }
 
-        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
-                        }
+    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
+                    }
+                }
+            }
+        ]
+    }
 
-        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 0a1d2b7..7450969 100644
--- a/modules/bar/components/Storage.qml
+++ b/modules/bar/components/Storage.qml
@@ -5,22 +5,19 @@ import qs.utils
 import QtQuick
 import QtQuick.Layouts
 
-StyledRectangle {
+RowLayout {
 
-    RowLayout {
+    Ref {
+        service: SystemInfo
+    }
 
-        Ref {
-            service: SystemInfo
-        }
+    LucideIcon {
+        text: Styling.lucide.icons.hardDrive
+    }
 
-        LucideIcon {
-            text: Styling.lucide.icons.hardDrive
-        }
+    StyledText {
+        id: text
 
-        StyledText {
-            id: text
-
-            text: ` ${(SystemInfo.storagePerc * 100).toFixed()}%`
-        }
+        text: ` ${(SystemInfo.storagePerc * 100).toFixed()}%`
     }
 }
diff --git a/modules/bar/components/bluetooth/BluetoothMenu.qml b/modules/bar/components/bluetooth/BluetoothMenu.qml
index 7e953cf..b9bc688 100644
--- a/modules/bar/components/bluetooth/BluetoothMenu.qml
+++ b/modules/bar/components/bluetooth/BluetoothMenu.qml
@@ -1,6 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import qs.components
+import qs.config
 import QtQuick
 import QtQuick.Layouts
 import Quickshell
@@ -9,6 +10,10 @@ import Quickshell.Bluetooth
 StyledPopupWindow {
     id: root
 
+    backgroundColor: Styling.theme.base300
+    margins: 16
+    radius: 8
+
     content: ColumnLayout {
         spacing: 8
         StyledWrapperRectangle {
diff --git a/modules/bar/components/notifications/NotificationMenu.qml b/modules/bar/components/notifications/NotificationMenu.qml
index d608fd8..877f30f 100644
--- a/modules/bar/components/notifications/NotificationMenu.qml
+++ b/modules/bar/components/notifications/NotificationMenu.qml
@@ -9,6 +9,10 @@ import QtQuick.Layouts
 StyledPopupWindow {
     id: root
 
+    backgroundColor: Styling.theme.base300
+    margins: 16
+    radius: 8
+
     content: GridLayout {
 
         columns: 2
diff --git a/modules/bar/components/tray/menu/Menu.qml b/modules/bar/components/tray/menu/Menu.qml
index db54cfc..43ce6b5 100644
--- a/modules/bar/components/tray/menu/Menu.qml
+++ b/modules/bar/components/tray/menu/Menu.qml
@@ -9,6 +9,10 @@ import Quickshell
 StyledPopupWindow {
     id: window
 
+    backgroundColor: Styling.theme.base300
+    margins: 14
+    radius: 8
+
     property QsMenuOpener menuOpener
 
     content: ColumnLayout {
diff --git a/services/Visibility.qml b/services/Visibility.qml
index d3ea806..57cf887 100644
--- a/services/Visibility.qml
+++ b/services/Visibility.qml
@@ -1,5 +1,6 @@
 pragma Singleton
 
+import qs.components
 import Quickshell
 
 Singleton {
@@ -8,6 +9,15 @@ Singleton {
     property alias pomodoro: properties.pomodoro
     property alias powermenu: properties.powermenu
     property alias storybook: properties.storybook
+    property StyledPopupWindow activePopup
+
+    function togglePopup(popup: StyledPopupWindow) {
+        if (activePopup && popup != activePopup) {
+            activePopup.state = "";
+        }
+        popup.state = popup.state == "opened" ? "" : "opened";
+        activePopup = popup;
+    }
 
     PersistentProperties {
         id: properties