diff --git a/components/StyledTabBar.qml b/components/StyledTabBar.qml
new file mode 100644
index 0000000..895af3a
--- /dev/null
+++ b/components/StyledTabBar.qml
@@ -0,0 +1,11 @@
+import qs.config
+import QtQuick
+import QtQuick.Controls.Basic
+
+TabBar {
+    id: control
+
+    background: Rectangle {
+        color: Styling.theme.base100
+    }
+}
diff --git a/components/StyledTabButton.qml b/components/StyledTabButton.qml
new file mode 100644
index 0000000..7745877
--- /dev/null
+++ b/components/StyledTabButton.qml
@@ -0,0 +1,24 @@
+import qs.config
+import QtQuick
+import QtQuick.Controls.Basic
+
+TextArea {
+    id: control
+
+    font.pixelSize: Styling.typography.textSize.base
+
+    background: Rectangle {
+        id: rectangle
+        color: control.hovered ? Styling.theme.primary : Styling.theme.base200
+        Behavior on color {
+            ColorAnimation {
+                duration: Styling.animations.speed.normal
+            }
+        }
+        radius: Styling.theme.radiusField
+    }
+
+    HoverHandler {
+        cursorShape: Qt.PointingHandCursor
+    }
+}
diff --git a/modules/storybook/Components.qml b/modules/storybook/Components.qml
new file mode 100644
index 0000000..d2b4d20
--- /dev/null
+++ b/modules/storybook/Components.qml
@@ -0,0 +1,136 @@
+import qs.components
+import qs.config
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+GridLayout {
+    flow: GridLayout.TopToBottom
+    columns: 2
+    rows: 10
+
+    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: "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: Styling.theme.base100
+            border.width: 2
+            StyledListView {
+                implicitWidth: 200
+                implicitHeight: 100
+                model: 10
+                delegate: StyledText {
+                    text: "Hello world!"
+                }
+            }
+        }
+    }
+
+    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();
+                }
+            }
+        }
+    }
+
+    StyledDrawer {
+        id: drawer
+        edge: Qt.TopEdge
+        width: 400
+        height: 200
+        Button {
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
+            text: "Close"
+            onClicked: drawer.close()
+        }
+    }
+}
diff --git a/modules/storybook/Fields.qml b/modules/storybook/Fields.qml
new file mode 100644
index 0000000..fa95224
--- /dev/null
+++ b/modules/storybook/Fields.qml
@@ -0,0 +1,33 @@
+import qs.components
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+GridLayout {
+    flow: GridLayout.TopToBottom
+    columns: 2
+    rows: 10
+
+    ColumnLayout {
+        StyledText {
+            text: "Icon Button"
+            font.pixelSize: 18
+        }
+        StyledIconButton {
+            text: Styling.lucide.icons.square
+        }
+    }
+
+    ColumnLayout {
+        StyledText {
+            text: "Slider"
+            font.pixelSize: 18
+        }
+        StyledSlider {
+            id: slider
+            from: 0
+            to: 100
+            value: 50
+        }
+    }
+}
diff --git a/modules/storybook/Selectors.qml b/modules/storybook/Selectors.qml
new file mode 100644
index 0000000..ed22c03
--- /dev/null
+++ b/modules/storybook/Selectors.qml
@@ -0,0 +1,21 @@
+import qs.components
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+GridLayout {
+    flow: GridLayout.TopToBottom
+    columns: 2
+    rows: 10
+
+    ColumnLayout {
+        StyledText {
+            text: "Switch"
+            font.pixelSize: 18
+        }
+
+        StyledSwitch {
+            text: "Enable"
+        }
+    }
+}
diff --git a/modules/storybook/Storybook.qml b/modules/storybook/Storybook.qml
index e402da0..32d47c3 100644
--- a/modules/storybook/Storybook.qml
+++ b/modules/storybook/Storybook.qml
@@ -34,210 +34,35 @@ StyledPanelWindow {
 
         margin: 48
 
-        GridLayout {
-            id: grid
+        ColumnLayout {
+            spacing: 0
 
-            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
-            }
-
-            ColumnLayout {
-                StyledText {
-                    text: "Icon Button"
-                    font.pixelSize: 18
+            StyledTabBar {
+                id: tabs
+                Layout.fillWidth: true
+                TabButton {
+                    text: "Fields"
                 }
-                StyledIconButton {
-                    text: Styling.lucide.icons.square
+                TabButton {
+                    text: "Selectors"
+                }
+                TabButton {
+                    text: "Components"
                 }
             }
 
-            ColumnLayout {
-                StyledText {
-                    text: "Theme Selector"
-                    font.pixelSize: 18
+            StackLayout {
+                currentIndex: tabs.currentIndex
+                Components {
+                    visible: false
                 }
-                RowLayout {
-                    Repeater {
-                        model: Theme.themes
-                        delegate: StyledButton {
-                            required property var modelData
-                            text: modelData
-                            onClicked: Theme.currentTheme = modelData
-                        }
-                    }
+                Fields {
+                    visible: false
+                }
+                Selectors {
+                    visible: false
                 }
             }
-
-            ColumnLayout {
-                StyledText {
-                    text: "Switch"
-                    font.pixelSize: 18
-                }
-
-                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: "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: Styling.theme.base100
-                    border.width: 2
-                    StyledListView {
-                        implicitWidth: 200
-                        implicitHeight: 100
-                        model: 10
-                        delegate: StyledText {
-                            text: "Hello world!"
-                        }
-                    }
-                }
-            }
-
-            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 {
-                    id: fileButton
-                    text: "File"
-                    onPressed: menu.visible ? menu.close() : menu.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();
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    StyledDrawer {
-        id: drawer
-        edge: Qt.TopEdge
-        width: 400
-        height: 200
-        Button {
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.verticalCenter: parent.verticalCenter
-            text: "Close"
-            onClicked: drawer.close()
         }
     }
 }