diff --git a/shell/bar/control/ControlCenter.qml b/shell/bar/control/ControlCenter.qml
new file mode 100644
index 0000000..68698bf
--- /dev/null
+++ b/shell/bar/control/ControlCenter.qml
@@ -0,0 +1,84 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Qt5Compat.GraphicalEffects
+import Quickshell.Services.Pipewire
+import Quickshell.Widgets
+import qs.widgets
+import qs.bar
+
+StyledMouseArea {
+    id: root
+    onClicked: showMenu = !showMenu
+
+    required property var bar
+    property bool showMenu: false
+
+    IconImage {
+        id: icon
+        source: "root:resources/control/controls-button.svg"
+
+        anchors {
+            fill: parent
+            margins: 3
+        }
+    }
+
+    property PopupItem menu: PopupItem {
+        id: menu
+        owner: root
+        popup: root.bar.popup
+        show: root.showMenu
+        onClosed: root.showMenu = false
+
+        property real padding: 10
+
+        implicitWidth: 275
+        implicitHeight: 350 
+
+        ColumnLayout {
+            id: container
+            spacing: 4
+
+            anchors {
+                fill: parent
+                margins: 8
+            }
+
+            ControlCenterCard {
+                title: "Wi-Fi"
+                description: "Wifi Network"
+                Layout.fillWidth: true
+                Layout.preferredHeight: 40
+            }
+
+            ControlCenterCard {
+                title: "Bluetooth"
+                description: "Manage bluetooth devices."
+                Layout.fillWidth: true
+                Layout.preferredHeight: 40
+            }
+
+            // ControlCenterCard {
+            //     title: "Bluetooth"
+            //     description: "Manage bluetooth devices."
+            //     Layout.fillWidth: true
+            //     Layout.preferredHeight: 40
+            // }
+            //
+            // ControlCenterCard {
+            //     title: "Bluetooth"
+            //     description: "Manage bluetooth devices."
+            //     Layout.fillWidth: true
+            //     Layout.preferredHeight: 40
+            // }
+
+            Item {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+            }
+        }
+    }
+}
diff --git a/shell/bar/control/ControlCenterCard.qml b/shell/bar/control/ControlCenterCard.qml
new file mode 100644
index 0000000..5017202
--- /dev/null
+++ b/shell/bar/control/ControlCenterCard.qml
@@ -0,0 +1,45 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Widgets
+import qs
+
+WrapperMouseArea {
+    id: root
+
+    required property var title
+    required property var description
+
+    RowLayout {
+        ColumnLayout {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+
+            Text {
+                text: root.title
+                color: ShellSettings.colors.active
+                font.pointSize: 10
+            }
+
+            Text {
+                text: root.description
+                color: ShellSettings.colors.active.darker(2.0)
+                font.pointSize: 9
+            }
+        }
+
+        IconImage {
+            source: "root:resources/general/right-arrow.svg"
+            Layout.preferredWidth: height
+            Layout.fillHeight: true
+            Layout.alignment: Qt.AlignRight
+            Layout.margins: 2
+        }
+
+        // Rectangle {
+        //     Layout.preferredWidth: height
+        //     Layout.fillHeight: true
+        //     Layout.alignment: Qt.AlignRight
+        //     Layout.margins: 2
+        // }
+    }
+}
diff --git a/shell/resources/volume/volume-low.svg b/shell/resources/volume/volume-low.svg
new file mode 100644
index 0000000..69e95e5
--- /dev/null
+++ b/shell/resources/volume/volume-low.svg
@@ -0,0 +1,9 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="#ffffff" width="800px" height="800px" viewBox="-64 0 512 512" xmlns="http://www.w3.org/2000/svg">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier">
+
<path d="M215.03 72.04L126.06 161H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V89.02c0-21.47-25.96-31.98-40.97-16.98zm123.2 108.08c-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61C327.98 229.28 336 242.62 336 257c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88s-17.54-61.32-45.78-76.87z"/>
+
</g>
+
</svg>
\ No newline at end of file
diff --git a/shell/resources/volume/volume-off.svg b/shell/resources/volume/volume-off.svg
new file mode 100644
index 0000000..f975a8b
--- /dev/null
+++ b/shell/resources/volume/volume-off.svg
@@ -0,0 +1,9 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="#ffffff" width="800px" height="800px" viewBox="-128 0 512 512" xmlns="http://www.w3.org/2000/svg">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier">
+
<path d="M215 71l-89 89H24a24 24 0 0 0-24 24v144a24 24 0 0 0 24 24h102.06L215 441c15 15 41 4.47 41-17V88c0-21.47-26-32-41-17z"/>
+
</g>
+
</svg>
\ No newline at end of file
diff --git a/shell/widgets/StyledSlider.qml b/shell/widgets/StyledSlider.qml
new file mode 100644
index 0000000..11b653a
--- /dev/null
+++ b/shell/widgets/StyledSlider.qml
@@ -0,0 +1,55 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Controls
+import Qt5Compat.GraphicalEffects
+import ".."
+
+Slider {
+    id: slider
+    implicitHeight: 8
+    property var accentColor: ShellSettings.colors.active
+
+    background: Rectangle {
+        id: sliderContainer
+        width: slider.availableWidth
+        height: slider.implicitHeight
+        color: ShellSettings.colors.inactive
+        radius: 4
+        anchors.verticalCenter: parent.verticalCenter
+
+        layer.enabled: true
+        layer.effect: OpacityMask {
+            source: Rectangle {
+                width: sliderContainer.width
+                height: sliderContainer.height
+                radius: sliderContainer.radius
+                color: "white"
+            }
+
+            maskSource: Rectangle {
+                width: sliderContainer.width
+                height: sliderContainer.height
+                radius: sliderContainer.radius
+                color: "black"
+            }
+        }
+
+        Rectangle {
+            id: fill
+            width: slider.handle.width / 2 + slider.visualPosition * (sliderContainer.width - slider.handle.width)
+            height: sliderContainer.height
+            color: Qt.color(slider.accentColor ?? "purple").darker(1.2)
+        }
+    }
+
+    handle: Rectangle {
+        id: handleRect
+        x: slider.visualPosition * (slider.availableWidth - width)
+        y: slider.topPadding + slider.availableHeight / 2 - height / 2
+        width: 16
+        height: 16
+        radius: width / 2
+        color: slider.pressed ? Qt.color(slider.accentColor ?? "purple").darker(1.5) : slider.accentColor ?? "purple"
+    }
+}