diff --git a/.config/quickshell/modules/common/widgets/NavigationRailTabArray.qml b/.config/quickshell/modules/common/widgets/NavigationRailTabArray.qml
new file mode 100644
index 000000000..e13ea76c9
--- /dev/null
+++ b/.config/quickshell/modules/common/widgets/NavigationRailTabArray.qml
@@ -0,0 +1,44 @@
+import "root:/modules/common"
+import "root:/modules/common/widgets"
+import "root:/modules/common/functions/color_utils.js" as ColorUtils
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell.Io
+
+Item {
+    id: root
+    property int currentIndex: 0
+    property bool expanded: false
+    default property alias data: tabBarColumn.data  
+    implicitHeight: tabBarColumn.implicitHeight
+    implicitWidth: tabBarColumn.implicitWidth
+    Layout.topMargin: 25
+    Rectangle {
+        property real itemHeight: tabBarColumn.children[0].baseSize
+        property real baseHighlightHeight: tabBarColumn.children[0].baseHighlightHeight
+        anchors {
+            top: tabBarColumn.top
+            left: tabBarColumn.left
+            topMargin: itemHeight * root.currentIndex + (root.expanded ? 0 : ((itemHeight - baseHighlightHeight) / 2))
+        }
+        radius: Appearance.rounding.full
+        color: Appearance.colors.colSecondaryContainer
+        implicitHeight: root.expanded ? itemHeight : baseHighlightHeight
+        implicitWidth: tabBarColumn.children[root.currentIndex].visualWidth
+
+        Behavior on anchors.topMargin {
+            NumberAnimation {
+                duration: Appearance.animationCurves.expressiveFastSpatialDuration
+                easing.type: Appearance.animation.elementMove.type
+                easing.bezierCurve: Appearance.animationCurves.expressiveFastSpatial
+            }
+        }
+    }
+    ColumnLayout {
+        id: tabBarColumn
+        anchors.fill: parent
+        spacing: 0
+
+    }
+}
diff --git a/.config/quickshell/settings.qml b/.config/quickshell/settings.qml
index 58d853f32..2ac803068 100644
--- a/.config/quickshell/settings.qml
+++ b/.config/quickshell/settings.qml
@@ -142,48 +142,20 @@ ApplicationWindow {
                         }
                     }
 
-                    Item {
-                        implicitHeight: tabBarColumn.implicitHeight
-                        implicitWidth: tabBarColumn.implicitWidth
-                        Layout.topMargin: 25
-                        Rectangle {
-                            property real itemHeight: tabBarColumn.children[0].baseSize
-                            property real baseHighlightHeight: tabBarColumn.children[0].baseHighlightHeight
-                            anchors {
-                                top: tabBarColumn.top
-                                left: tabBarColumn.left
-                                topMargin: itemHeight * root.currentPage + (navRail.expanded ? 0 : ((itemHeight - baseHighlightHeight) / 2))
-                            }
-                            radius: Appearance.rounding.full
-                            color: Appearance.colors.colSecondaryContainer
-                            implicitHeight: navRail.expanded ? itemHeight : baseHighlightHeight
-                            implicitWidth: tabBarColumn.children[root.currentPage].visualWidth
-
-                            Behavior on anchors.topMargin {
-                                NumberAnimation {
-                                    duration: Appearance.animationCurves.expressiveFastSpatialDuration
-                                    easing.type: Appearance.animation.elementMove.type
-                                    easing.bezierCurve: Appearance.animationCurves.expressiveFastSpatial
-                                }
-                            }
-                        }
-                        ColumnLayout {
-                            id: tabBarColumn
-                            anchors.fill: parent
-                            spacing: 0
-
-                            Repeater {
-                                model: root.pages
-                                NavigationRailButton {
-                                    required property var index
-                                    required property var modelData
-                                    toggled: root.currentPage === index
-                                    onClicked: root.currentPage = index;
-                                    expanded: navRail.expanded
-                                    buttonIcon: modelData.icon
-                                    buttonText: modelData.name
-                                    showToggledHighlight: false
-                                }
+                    NavigationRailTabArray {
+                        currentIndex: root.currentPage
+                        expanded: navRail.expanded
+                        Repeater {
+                            model: root.pages
+                            NavigationRailButton {
+                                required property var index
+                                required property var modelData
+                                toggled: root.currentPage === index
+                                onClicked: root.currentPage = index;
+                                expanded: navRail.expanded
+                                buttonIcon: modelData.icon
+                                buttonText: modelData.name
+                                showToggledHighlight: false
                             }
                         }
                     }