diff --git a/components/StyledMenu.qml b/components/StyledMenu.qml
new file mode 100644
index 0000000..12830d7
--- /dev/null
+++ b/components/StyledMenu.qml
@@ -0,0 +1,34 @@
+import qs.config
+import qs.services
+import QtQuick
+import QtQuick.Controls
+
+Menu {
+    id: root
+
+    palette.window: Theme.palette.base100
+    palette.base: Theme.palette.base100
+
+    focus: true
+    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
+    popupType: Popup.Window
+
+    function toggle() {
+        visible ? close() : open();
+    }
+
+    enter: Transition {
+        NumberAnimation {
+            property: "opacity"
+            from: 0.0
+            to: 1.0
+        }
+    }
+    exit: Transition {
+        NumberAnimation {
+            property: "opacity"
+            from: 1.0
+            to: 0.0
+        }
+    }
+}
diff --git a/components/StyledMenuItem.qml b/components/StyledMenuItem.qml
new file mode 100644
index 0000000..fe078d2
--- /dev/null
+++ b/components/StyledMenuItem.qml
@@ -0,0 +1,9 @@
+import qs.config
+import QtQuick
+import QtQuick.Controls
+
+MenuItem {
+    palette.text: Theme.palette.basecontent
+    palette.highlight: Theme.palette.primary
+    palette.highlightedText: Theme.palette.primarycontent
+}
diff --git a/components/StyledMenuSeparator.qml b/components/StyledMenuSeparator.qml
new file mode 100644
index 0000000..2759e47
--- /dev/null
+++ b/components/StyledMenuSeparator.qml
@@ -0,0 +1,9 @@
+import qs.config
+import QtQuick
+import QtQuick.Controls
+
+MenuSeparator {
+    palette.text: Theme.palette.basecontent
+    palette.highlight: Theme.palette.primary
+    palette.highlightedText: Theme.palette.primarycontent
+}
diff --git a/components/StyledPopupWindow.qml b/components/StyledPopup.qml
similarity index 51%
rename from components/StyledPopupWindow.qml
rename to components/StyledPopup.qml
index 955f92d..c335b7a 100644
--- a/components/StyledPopupWindow.qml
+++ b/components/StyledPopup.qml
@@ -6,10 +6,9 @@ import Quickshell.Hyprland
 PopupWindow {
     id: root
 
-    implicitWidth: contentItem.children.reduce((prev, child) => Math.max(prev, child.width), 0)
-    implicitHeight: contentItem.children.reduce((prev, child) => prev + child.height, 0)
+    implicitWidth: background.implicitWidth
+    implicitHeight: background.implicitHeight
     color: "transparent"
-    contentItem.focus: visible
 
     function open() {
         visible = true;
@@ -19,19 +18,19 @@ PopupWindow {
         visible = false;
     }
 
-    // WlrLayershell.layer: WlrLayer.Top
-    // WlrLayershell.keyboardFocus: root.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
     HyprlandFocusGrab {
-        active: root.visible
+        id: grab
         windows: [root]
         onCleared: {
             root.close();
         }
-    }
+      }
 
     Rectangle {
         id: background
-        anchors.fill: parent
+        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)
         color: Theme.palette.base200
         radius: 8
     }
diff --git a/modules/Shell.qml b/modules/Shell.qml
index 69e9e2b..9971716 100644
--- a/modules/Shell.qml
+++ b/modules/Shell.qml
@@ -78,11 +78,7 @@ Variants {
         Launcher {}
         Pomodoro {}
         PowerMenu {}
-        Storybook {
-            anchor.window: topWindow
-            anchor.rect.x: topWindow.width / 2 - width / 2
-            anchor.rect.y: topWindow.height / 4
-        }
+        Storybook {}
         Drawers {}
     }
 }
diff --git a/modules/storybook/Storybook.qml b/modules/storybook/Storybook.qml
index 0021fcb..5d9d10d 100644
--- a/modules/storybook/Storybook.qml
+++ b/modules/storybook/Storybook.qml
@@ -4,173 +4,225 @@ 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
 
-StyledPopupWindow {
+StyledWindow {
     id: root
+    name: "storybook"
 
     visible: Visibility.storybook
+    implicitWidth: rect.width
+    implicitHeight: rect.height
 
-    GridLayout {
-        id: grid
+    WlrLayershell.layer: WlrLayer.Top
+    WlrLayershell.keyboardFocus: root.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
 
-        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
+    HyprlandFocusGrab {
+        active: Visibility.storybook
+        windows: [root]
+        onCleared: {
+            Visibility.storybook = false;
         }
+    }
+
+    StyledWrapperRectangle {
+        id: rect
+
+        margin: 48
+
+        GridLayout {
+            id: grid
+
+            flow: GridLayout.TopToBottom
+            columns: 2
+            rows: 10
 
-        ColumnLayout {
             StyledText {
-                text: "Icon Button"
-                font.pixelSize: 18
-            }
-            StyledIconButton {
-                text: Icons.square
-            }
-        }
-
-        ColumnLayout {
-            StyledText {
-                text: "Switch"
-                font.pixelSize: 18
+                Layout.columnSpan: grid.columns
+                Layout.alignment: Qt.AlignHCenter
+                text: "Components"
+                font.pixelSize: 24
+                font.bold: true
+                font.underline: true
+                bottomPadding: 24
             }
 
-            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: "Icon Button"
+                    font.pixelSize: 18
+                }
+                StyledIconButton {
+                    text: Icons.square
                 }
             }
-        }
 
-        ColumnLayout {
-            StyledText {
-                text: "Slider"
-                font.pixelSize: 18
-            }
-            StyledSlider {
-                id: slider
-                from: 0
-                to: 100
-                value: 50
-            }
-        }
+            ColumnLayout {
+                StyledText {
+                    text: "Switch"
+                    font.pixelSize: 18
+                }
 
-        ColumnLayout {
-            StyledText {
-                text: "ProgressBar"
-                font.pixelSize: 18
+                StyledSwitch {
+                    text: "Enable"
+                }
             }
-            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
+                }
+                Button {
+                    id: toolTipButton
+                    text: "Hello world!"
+                    StyledToolTip {
+                        visible: toolTipButton.hovered
+                        text: qsTr("Save the active project")
                     }
                 }
             }
-        }
 
-        ColumnLayout {
-            StyledText {
-                text: "Mpris Player Selector"
-                font.pixelSize: 18
+            ColumnLayout {
+                StyledText {
+                    text: "Slider"
+                    font.pixelSize: 18
+                }
+                StyledSlider {
+                    id: slider
+                    from: 0
+                    to: 100
+                    value: 50
+                }
             }
-            MprisPlayerSelector {}
-        }
 
-        ColumnLayout {
-            StyledText {
-                text: "Mpris Controller"
-                font.pixelSize: 18
+            ColumnLayout {
+                StyledText {
+                    text: "ProgressBar"
+                    font.pixelSize: 18
+                }
+                StyledProgressBar {
+                    id: progressBar
+                    indeterminate: true
+                    implicitHeight: 10
+                    from: 0
+                    to: 100
+                    value: 50
+                }
             }
-            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();
+            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: "Left"
-                    onClicked: {
-                        drawer.y = root.height / 2 - drawer.height / 2;
-                        drawer.x = 0;
-                        drawer.edge = Qt.LeftEdge;
-                        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: "Popup"
+                    font.pixelSize: 18
                 }
                 Button {
-                    text: "Right"
-                    onClicked: {
-                        drawer.y = root.height / 2 - drawer.height / 2;
-                        drawer.x = 0;
-                        drawer.edge = Qt.RightEdge;
-                        drawer.open();
+                    id: fileButton
+                    text: "File"
+                    onPressed: menu.visible ? menu.close() : menu.open()
+
+                    StyledPopup {
+                        id: menu
+
+                        anchor.item: fileButton
+
+                        Column {
+                            StyledButton {
+                                text: "New..."
+                            }
+                            StyledButton {
+                                text: "Open..."
+                            }
+                            StyledText {
+                                text: "Close"
+                            }
+                        }
                     }
                 }
-                Button {
-                    text: "Bottom"
-                    onClicked: {
-                        drawer.x = root.width / 2 - drawer.width / 2;
-                        drawer.y = 0;
-                        drawer.edge = Qt.BottomEdge;
-                        drawer.open();
+            }
+
+            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();
+                        }
                     }
                 }
             }