diff --git a/components/StyledPopup.qml b/components/StyledPopupWindow.qml
similarity index 51%
rename from components/StyledPopup.qml
rename to components/StyledPopupWindow.qml
index c335b7a..955f92d 100644
--- a/components/StyledPopup.qml
+++ b/components/StyledPopupWindow.qml
@@ -6,9 +6,10 @@ import Quickshell.Hyprland
 PopupWindow {
     id: root
 
-    implicitWidth: background.implicitWidth
-    implicitHeight: background.implicitHeight
+    implicitWidth: contentItem.children.reduce((prev, child) => Math.max(prev, child.width), 0)
+    implicitHeight: contentItem.children.reduce((prev, child) => prev + child.height, 0)
     color: "transparent"
+    contentItem.focus: visible
 
     function open() {
         visible = true;
@@ -18,19 +19,19 @@ PopupWindow {
         visible = false;
     }
 
+    // WlrLayershell.layer: WlrLayer.Top
+    // WlrLayershell.keyboardFocus: root.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
     HyprlandFocusGrab {
-        id: grab
+        active: root.visible
         windows: [root]
         onCleared: {
             root.close();
         }
-      }
+    }
 
     Rectangle {
         id: background
-        anchors.centerIn: root
-        implicitWidth: root.contentItem.children.reduce((prev, child) => Math.max(prev, child.width), 0)
-        implicitHeight: root.contentItem.children.reduce((prev, child) => prev + child.height, 0)
+        anchors.fill: parent
         color: Theme.palette.base200
         radius: 8
     }
diff --git a/modules/Shell.qml b/modules/Shell.qml
index 9971716..69e9e2b 100644
--- a/modules/Shell.qml
+++ b/modules/Shell.qml
@@ -78,7 +78,11 @@ Variants {
         Launcher {}
         Pomodoro {}
         PowerMenu {}
-        Storybook {}
+        Storybook {
+            anchor.window: topWindow
+            anchor.rect.x: topWindow.width / 2 - width / 2
+            anchor.rect.y: topWindow.height / 4
+        }
         Drawers {}
     }
 }
diff --git a/modules/storybook/Storybook.qml b/modules/storybook/Storybook.qml
index 1b5af0a..0021fcb 100644
--- a/modules/storybook/Storybook.qml
+++ b/modules/storybook/Storybook.qml
@@ -4,8 +4,6 @@ import qs.components
 import qs.config
 import qs.constants
 import qs.services
-import Quickshell.Hyprland
-import Quickshell.Wayland
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
@@ -14,184 +12,165 @@ StyledPopupWindow {
     id: root
 
     visible: Visibility.storybook
-    implicitWidth: rect.width
-    implicitHeight: rect.height
 
-    WlrLayershell.layer: WlrLayer.Top
-    WlrLayershell.keyboardFocus: root.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
+    GridLayout {
+        id: grid
 
-    HyprlandFocusGrab {
-        active: Visibility.storybook
-        windows: [root]
-        onCleared: {
-            Visibility.storybook = false;
+        flow: GridLayout.TopToBottom
+        columns: 2
+        rows: 10
+
+        StyledText {
+            Layout.columnSpan: grid.columns
+            Layout.alignment: Qt.AlignHCenter
+            text: "Components"
+            font.pixelSize: 24
+            font.bold: true
+            font.underline: true
+            bottomPadding: 24
         }
-    }
-
-    StyledWrapperRectangle {
-        id: rect
-
-        margin: 48
-
-        GridLayout {
-            id: grid
-
-            flow: GridLayout.TopToBottom
-            columns: 2
-            rows: 10
 
+        ColumnLayout {
             StyledText {
-                Layout.columnSpan: grid.columns
-                Layout.alignment: Qt.AlignHCenter
-                text: "Components"
-                font.pixelSize: 24
-                font.bold: true
-                font.underline: true
-                bottomPadding: 24
+                text: "Icon Button"
+                font.pixelSize: 18
+            }
+            StyledIconButton {
+                text: Icons.square
+            }
+        }
+
+        ColumnLayout {
+            StyledText {
+                text: "Switch"
+                font.pixelSize: 18
             }
 
-            ColumnLayout {
-                StyledText {
-                    text: "Icon Button"
-                    font.pixelSize: 18
-                }
-                StyledIconButton {
-                    text: Icons.square
+            StyledSwitch {
+                text: "Enable"
+            }
+        }
+
+        ColumnLayout {
+            StyledText {
+                text: "ToolTip"
+                font.pixelSize: 18
+            }
+            Button {
+                id: toolTipButton
+                text: "Hello world!"
+                StyledToolTip {
+                    visible: toolTipButton.hovered
+                    text: qsTr("Save the active project")
                 }
             }
+        }
 
-            ColumnLayout {
-                StyledText {
-                    text: "Switch"
-                    font.pixelSize: 18
-                }
+        ColumnLayout {
+            StyledText {
+                text: "Slider"
+                font.pixelSize: 18
+            }
+            StyledSlider {
+                id: slider
+                from: 0
+                to: 100
+                value: 50
+            }
+        }
 
-                StyledSwitch {
-                    text: "Enable"
+        ColumnLayout {
+            StyledText {
+                text: "ProgressBar"
+                font.pixelSize: 18
+            }
+            StyledProgressBar {
+                id: progressBar
+                indeterminate: true
+                implicitHeight: 10
+                from: 0
+                to: 100
+                value: 50
+            }
+        }
+
+        ColumnLayout {
+            StyledText {
+                text: "ListView"
+                font.pixelSize: 18
+            }
+            StyledWrapperRectangle {
+                border.color: Theme.palette.base100
+                border.width: 2
+                StyledListView {
+                    implicitWidth: 200
+                    implicitHeight: 100
+                    model: 10
+                    delegate: StyledText {
+                        text: "Hello world!"
+                    }
                 }
             }
+        }
 
-            ColumnLayout {
-                StyledText {
-                    text: "ToolTip"
-                    font.pixelSize: 18
+        ColumnLayout {
+            StyledText {
+                text: "Mpris Player Selector"
+                font.pixelSize: 18
+            }
+            MprisPlayerSelector {}
+        }
+
+        ColumnLayout {
+            StyledText {
+                text: "Mpris Controller"
+                font.pixelSize: 18
+            }
+            MprisController {
+                player: Mpris.active ?? null
+            }
+        }
+
+        ColumnLayout {
+            StyledText {
+                text: "Drawer"
+                font.pixelSize: 18
+            }
+            RowLayout {
+                Button {
+                    text: "Top"
+                    onClicked: {
+                        drawer.x = root.width / 2 - drawer.width / 2;
+                        drawer.y = 0;
+                        drawer.edge = Qt.TopEdge;
+                        drawer.open();
+                    }
                 }
                 Button {
-                    id: toolTipButton
-                    text: "Hello world!"
-                    StyledToolTip {
-                        visible: toolTipButton.hovered
-                        text: qsTr("Save the active project")
+                    text: "Left"
+                    onClicked: {
+                        drawer.y = root.height / 2 - drawer.height / 2;
+                        drawer.x = 0;
+                        drawer.edge = Qt.LeftEdge;
+                        drawer.open();
                     }
                 }
-            }
-
-            ColumnLayout {
-                StyledText {
-                    text: "Slider"
-                    font.pixelSize: 18
-                }
-                StyledSlider {
-                    id: slider
-                    from: 0
-                    to: 100
-                    value: 50
-                }
-            }
-
-            ColumnLayout {
-                StyledText {
-                    text: "ProgressBar"
-                    font.pixelSize: 18
-                }
-                StyledProgressBar {
-                    id: progressBar
-                    indeterminate: true
-                    implicitHeight: 10
-                    from: 0
-                    to: 100
-                    value: 50
-                }
-            }
-
-            ColumnLayout {
-                StyledText {
-                    text: "ListView"
-                    font.pixelSize: 18
-                }
-                StyledWrapperRectangle {
-                    border.color: Theme.palette.base100
-                    border.width: 2
-                    StyledListView {
-                        implicitWidth: 200
-                        implicitHeight: 100
-                        model: 10
-                        delegate: StyledText {
-                            text: "Hello world!"
-                        }
+                Button {
+                    text: "Right"
+                    onClicked: {
+                        drawer.y = root.height / 2 - drawer.height / 2;
+                        drawer.x = 0;
+                        drawer.edge = Qt.RightEdge;
+                        drawer.open();
                     }
                 }
-            }
-
-            ColumnLayout {
-                StyledText {
-                    text: "Mpris Player Selector"
-                    font.pixelSize: 18
-                }
-                MprisPlayerSelector {}
-            }
-
-            ColumnLayout {
-                StyledText {
-                    text: "Mpris Controller"
-                    font.pixelSize: 18
-                }
-                MprisController {
-                    player: Mpris.active ?? null
-                }
-            }
-
-            ColumnLayout {
-                StyledText {
-                    text: "Drawer"
-                    font.pixelSize: 18
-                }
-                RowLayout {
-                    Button {
-                        text: "Top"
-                        onClicked: {
-                            drawer.x = root.width / 2 - drawer.width / 2;
-                            drawer.y = 0;
-                            drawer.edge = Qt.TopEdge;
-                            drawer.open();
-                        }
-                    }
-                    Button {
-                        text: "Left"
-                        onClicked: {
-                            drawer.y = root.height / 2 - drawer.height / 2;
-                            drawer.x = 0;
-                            drawer.edge = Qt.LeftEdge;
-                            drawer.open();
-                        }
-                    }
-                    Button {
-                        text: "Right"
-                        onClicked: {
-                            drawer.y = root.height / 2 - drawer.height / 2;
-                            drawer.x = 0;
-                            drawer.edge = Qt.RightEdge;
-                            drawer.open();
-                        }
-                    }
-                    Button {
-                        text: "Bottom"
-                        onClicked: {
-                            drawer.x = root.width / 2 - drawer.width / 2;
-                            drawer.y = 0;
-                            drawer.edge = Qt.BottomEdge;
-                            drawer.open();
-                        }
+                Button {
+                    text: "Bottom"
+                    onClicked: {
+                        drawer.x = root.width / 2 - drawer.width / 2;
+                        drawer.y = 0;
+                        drawer.edge = Qt.BottomEdge;
+                        drawer.open();
                     }
                 }
             }