fix: panels (i'm debugging)

	new file:   modules/bar/components/Settings.qml
	new file:   modules/bar/components/SettingsIcon.qml
	new file:   modules/controlcenter/audio/AudioPane.qml
	new file:   modules/controlcenter/network/Details.qml
	new file:   modules/controlcenter/network/NetworkList.qml
	new file:   modules/controlcenter/network/NetworkPane.qml
	new file:   modules/controlcenter/network/Settings.qml

5 files changed, 1039 insertions, 0 deletions

diff --git a/modules/controlcenter/audio/AudioPane.qml b/modules/controlcenter/audio/AudioPane.qml
new file mode 100644
index 0000000..6c478e5
--- /dev/null
+++ b/modules/controlcenter/audio/AudioPane.qml
@@ -0,0 +1,350 @@
+pragma ComponentBehavior: Bound
+
+import ".."
+import qs.components
+import qs.components.controls
+import qs.components.effects
+import qs.components.containers
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+RowLayout {
+    id: root
+
+    required property Session session
+
+    anchors.fill: parent
+
+    spacing: 0
+
+    Item {
+        Layout.preferredWidth: Math.floor(parent.width * 0.4)
+        Layout.minimumWidth: 420
+        Layout.fillHeight: true
+
+        ColumnLayout {
+            anchors.fill: parent
+            anchors.margins: Appearance.padding.large + Appearance.padding.normal
+            anchors.leftMargin: Appearance.padding.large
+            anchors.rightMargin: Appearance.padding.large + Appearance.padding.normal / 2
+
+            spacing: Appearance.spacing.small
+
+            RowLayout {
+                spacing: Appearance.spacing.smaller
+
+                StyledText {
+                    text: qsTr("Settings")
+                    font.pointSize: Appearance.font.size.large
+                    font.weight: 500
+                }
+
+                Item {
+                    Layout.fillWidth: true
+                }
+            }
+
+            StyledText {
+                text: qsTr("Output devices (%1)").arg(Audio.sinks.length)
+                font.pointSize: Appearance.font.size.large
+                font.weight: 500
+            }
+
+            StyledText {
+                text: qsTr("All available output devices")
+                color: Colours.palette.m3outline
+            }
+
+            StyledListView {
+                id: outputView
+
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+
+                model: Audio.sinks
+                spacing: Appearance.spacing.small / 2
+                clip: true
+
+                StyledScrollBar.vertical: StyledScrollBar {
+                    flickable: outputView
+                }
+
+                delegate: StyledRect {
+                    required property var modelData
+
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+
+                    color: Qt.alpha(Colours.tPalette.m3surfaceContainer, Audio.sink?.id === modelData.id ? Colours.tPalette.m3surfaceContainer.a : 0)
+                    radius: Appearance.rounding.normal
+                    border.width: Audio.sink?.id === modelData.id ? 1 : 0
+                    border.color: Colours.palette.m3primary
+
+                    StateLayer {
+                        function onClicked(): void {
+                            Audio.setAudioSink(modelData);
+                        }
+                    }
+
+                    RowLayout {
+                        id: outputRowLayout
+
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.margins: Appearance.padding.normal
+
+                        spacing: Appearance.spacing.normal
+
+                        MaterialIcon {
+                            text: Audio.sink?.id === modelData.id ? "speaker" : "speaker_group"
+                            font.pointSize: Appearance.font.size.large
+                            fill: Audio.sink?.id === modelData.id ? 1 : 0
+                        }
+
+                        StyledText {
+                            Layout.fillWidth: true
+
+                            text: modelData.description || qsTr("Unknown")
+                            font.weight: Audio.sink?.id === modelData.id ? 500 : 400
+                        }
+                    }
+
+                    implicitHeight: outputRowLayout.implicitHeight + Appearance.padding.normal * 2
+                }
+            }
+
+            StyledText {
+                Layout.topMargin: Appearance.spacing.large
+                text: qsTr("Input devices (%1)").arg(Audio.sources.length)
+                font.pointSize: Appearance.font.size.large
+                font.weight: 500
+            }
+
+            StyledText {
+                text: qsTr("All available input devices")
+                color: Colours.palette.m3outline
+            }
+
+            StyledListView {
+                id: inputView
+
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+
+                model: Audio.sources
+                spacing: Appearance.spacing.small / 2
+                clip: true
+
+                StyledScrollBar.vertical: StyledScrollBar {
+                    flickable: inputView
+                }
+
+                delegate: StyledRect {
+                    required property var modelData
+
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+
+                    color: Qt.alpha(Colours.tPalette.m3surfaceContainer, Audio.source?.id === modelData.id ? Colours.tPalette.m3surfaceContainer.a : 0)
+                    radius: Appearance.rounding.normal
+                    border.width: Audio.source?.id === modelData.id ? 1 : 0
+                    border.color: Colours.palette.m3primary
+
+                    StateLayer {
+                        function onClicked(): void {
+                            Audio.setAudioSource(modelData);
+                        }
+                    }
+
+                    RowLayout {
+                        id: inputRowLayout
+
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.margins: Appearance.padding.normal
+
+                        spacing: Appearance.spacing.normal
+
+                        MaterialIcon {
+                            text: Audio.source?.id === modelData.id ? "mic" : "mic_external_on"
+                            font.pointSize: Appearance.font.size.large
+                            fill: Audio.source?.id === modelData.id ? 1 : 0
+                        }
+
+                        StyledText {
+                            Layout.fillWidth: true
+
+                            text: modelData.description || qsTr("Unknown")
+                            font.weight: Audio.source?.id === modelData.id ? 500 : 400
+                        }
+                    }
+
+                    implicitHeight: inputRowLayout.implicitHeight + Appearance.padding.normal * 2
+                }
+            }
+        }
+
+        InnerBorder {
+            leftThickness: 0
+            rightThickness: Appearance.padding.normal / 2
+        }
+    }
+
+    Item {
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+
+        ColumnLayout {
+            anchors.fill: parent
+            anchors.margins: Appearance.padding.large * 2
+
+            spacing: Appearance.spacing.normal
+
+            MaterialIcon {
+                Layout.alignment: Qt.AlignHCenter
+                text: "volume_up"
+                font.pointSize: Appearance.font.size.extraLarge * 3
+                font.bold: true
+            }
+
+            StyledText {
+                Layout.alignment: Qt.AlignHCenter
+                text: qsTr("Audio settings")
+                font.pointSize: Appearance.font.size.large
+                font.bold: true
+            }
+
+            StyledText {
+                Layout.topMargin: Appearance.spacing.large
+                Layout.alignment: Qt.AlignHCenter
+                text: qsTr("Output volume")
+                font.pointSize: Appearance.font.size.larger
+                font.weight: 500
+            }
+
+            RowLayout {
+                spacing: Appearance.spacing.smaller
+
+                StyledText {
+                    text: qsTr("Volume")
+                    font.pointSize: Appearance.font.size.large
+                    font.weight: 500
+                }
+
+                Item {
+                    Layout.fillWidth: true
+                }
+
+                StyledRect {
+                    implicitWidth: implicitHeight
+                    implicitHeight: muteIcon.implicitHeight + Appearance.padding.normal * 2
+
+                    radius: Appearance.rounding.normal
+                    color: Audio.muted ? Colours.palette.m3secondary : Colours.palette.m3secondaryContainer
+
+                    StateLayer {
+                        function onClicked(): void {
+                            if (Audio.sink?.audio) {
+                                Audio.sink.audio.muted = !Audio.sink.audio.muted;
+                            }
+                        }
+                    }
+
+                    MaterialIcon {
+                        id: muteIcon
+
+                        anchors.centerIn: parent
+                        text: Audio.muted ? "volume_off" : "volume_up"
+                        color: Audio.muted ? Colours.palette.m3onSecondary : Colours.palette.m3onSecondaryContainer
+                    }
+                }
+            }
+
+            StyledText {
+                text: Audio.muted ? qsTr("Muted") : qsTr("%1%").arg(Math.round(Audio.volume * 100))
+                color: Audio.muted ? Colours.palette.m3primary : Colours.palette.m3outline
+            }
+
+            StyledSlider {
+                Layout.fillWidth: true
+                implicitHeight: Appearance.padding.normal * 3
+
+                value: Audio.volume
+                enabled: !Audio.muted
+                opacity: enabled ? 1 : 0.5
+                onMoved: Audio.setVolume(value)
+            }
+
+            StyledText {
+                Layout.topMargin: Appearance.spacing.large
+                Layout.alignment: Qt.AlignHCenter
+                text: qsTr("Input volume")
+                font.pointSize: Appearance.font.size.larger
+                font.weight: 500
+            }
+
+            RowLayout {
+                spacing: Appearance.spacing.smaller
+
+                StyledText {
+                    text: qsTr("Volume")
+                    font.pointSize: Appearance.font.size.large
+                    font.weight: 500
+                }
+
+                Item {
+                    Layout.fillWidth: true
+                }
+
+                StyledRect {
+                    implicitWidth: implicitHeight
+                    implicitHeight: muteInputIcon.implicitHeight + Appearance.padding.normal * 2
+
+                    radius: Appearance.rounding.normal
+                    color: Audio.sourceMuted ? Colours.palette.m3secondary : Colours.palette.m3secondaryContainer
+
+                    StateLayer {
+                        function onClicked(): void {
+                            if (Audio.source?.audio) {
+                                Audio.source.audio.muted = !Audio.source.audio.muted;
+                            }
+                        }
+                    }
+
+                    MaterialIcon {
+                        id: muteInputIcon
+
+                        anchors.centerIn: parent
+                        text: Audio.sourceMuted ? "mic_off" : "mic"
+                        color: Audio.sourceMuted ? Colours.palette.m3onSecondary : Colours.palette.m3onSecondaryContainer
+                    }
+                }
+            }
+
+            StyledText {
+                text: Audio.sourceMuted ? qsTr("Muted") : qsTr("%1%").arg(Math.round(Audio.sourceVolume * 100))
+                color: Audio.sourceMuted ? Colours.palette.m3primary : Colours.palette.m3outline
+            }
+
+            StyledSlider {
+                Layout.fillWidth: true
+                implicitHeight: Appearance.padding.normal * 3
+
+                value: Audio.sourceVolume
+                enabled: !Audio.sourceMuted
+                opacity: enabled ? 1 : 0.5
+                onMoved: Audio.setSourceVolume(value)
+            }
+        }
+
+        InnerBorder {
+            leftThickness: Appearance.padding.normal / 2
+        }
+    }
+}
+
+
diff --git a/modules/controlcenter/network/Details.qml b/modules/controlcenter/network/Details.qml
new file mode 100644
index 0000000..86164f1
--- /dev/null
+++ b/modules/controlcenter/network/Details.qml
@@ -0,0 +1,204 @@
+pragma ComponentBehavior: Bound
+
+import ".."
+import qs.components
+import qs.components.controls
+import qs.components.effects
+import qs.components.containers
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+Item {
+    id: root
+
+    required property Session session
+    readonly property var network: session.network.active
+
+    StyledFlickable {
+        anchors.fill: parent
+
+        flickableDirection: Flickable.VerticalFlick
+        contentHeight: layout.height
+
+        ColumnLayout {
+            id: layout
+
+            anchors.left: parent.left
+            anchors.right: parent.right
+            spacing: Appearance.spacing.normal
+
+            MaterialIcon {
+                Layout.alignment: Qt.AlignHCenter
+                animate: true
+                text: root.network?.isSecure ? "lock" : "wifi"
+                font.pointSize: Appearance.font.size.extraLarge * 3
+                font.bold: true
+            }
+
+            StyledText {
+                Layout.alignment: Qt.AlignHCenter
+                animate: true
+                text: root.network?.ssid ?? qsTr("Unknown")
+                font.pointSize: Appearance.font.size.large
+                font.bold: true
+            }
+
+            StyledText {
+                Layout.topMargin: Appearance.spacing.large
+                text: qsTr("Connection status")
+                font.pointSize: Appearance.font.size.larger
+                font.weight: 500
+            }
+
+            StyledText {
+                text: qsTr("Connection settings for this network")
+                color: Colours.palette.m3outline
+            }
+
+            StyledRect {
+                Layout.fillWidth: true
+                implicitHeight: networkStatus.implicitHeight + Appearance.padding.large * 2
+
+                radius: Appearance.rounding.normal
+                color: Colours.tPalette.m3surfaceContainer
+
+                ColumnLayout {
+                    id: networkStatus
+
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.margins: Appearance.padding.large
+
+                    spacing: Appearance.spacing.larger
+
+                    Toggle {
+                        label: qsTr("Connected")
+                        checked: root.network?.active ?? false
+                        toggle.onToggled: {
+                            if (checked) {
+                                if (root.network.isSecure) {
+                                    // TODO: Show password dialog
+                                    root.session.network.showPasswordDialog = true;
+                                    root.session.network.pendingNetwork = root.network;
+                                } else {
+                                    Network.connectToNetwork(root.network.ssid, "");
+                                }
+                            } else {
+                                Network.disconnectFromNetwork();
+                            }
+                        }
+                    }
+                }
+            }
+
+            StyledText {
+                Layout.topMargin: Appearance.spacing.large
+                text: qsTr("Network properties")
+                font.pointSize: Appearance.font.size.larger
+                font.weight: 500
+            }
+
+            StyledText {
+                text: qsTr("Additional information")
+                color: Colours.palette.m3outline
+            }
+
+            StyledRect {
+                Layout.fillWidth: true
+                implicitHeight: networkProps.implicitHeight + Appearance.padding.large * 2
+
+                radius: Appearance.rounding.normal
+                color: Colours.tPalette.m3surfaceContainer
+
+                ColumnLayout {
+                    id: networkProps
+
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.margins: Appearance.padding.large
+
+                    spacing: Appearance.spacing.small / 2
+
+                    StyledText {
+                        text: qsTr("SSID")
+                    }
+
+                    StyledText {
+                        text: root.network?.ssid ?? qsTr("Unknown")
+                        color: Colours.palette.m3outline
+                        font.pointSize: Appearance.font.size.small
+                    }
+
+                    StyledText {
+                        Layout.topMargin: Appearance.spacing.normal
+                        text: qsTr("BSSID")
+                    }
+
+                    StyledText {
+                        text: root.network?.bssid ?? qsTr("Unknown")
+                        color: Colours.palette.m3outline
+                        font.pointSize: Appearance.font.size.small
+                    }
+
+                    StyledText {
+                        Layout.topMargin: Appearance.spacing.normal
+                        text: qsTr("Signal strength")
+                    }
+
+                    StyledText {
+                        text: root.network ? qsTr("%1%").arg(root.network.strength) : qsTr("N/A")
+                        color: Colours.palette.m3outline
+                        font.pointSize: Appearance.font.size.small
+                    }
+
+                    StyledText {
+                        Layout.topMargin: Appearance.spacing.normal
+                        text: qsTr("Frequency")
+                    }
+
+                    StyledText {
+                        text: root.network ? qsTr("%1 MHz").arg(root.network.frequency) : qsTr("N/A")
+                        color: Colours.palette.m3outline
+                        font.pointSize: Appearance.font.size.small
+                    }
+
+                    StyledText {
+                        Layout.topMargin: Appearance.spacing.normal
+                        text: qsTr("Security")
+                    }
+
+                    StyledText {
+                        text: root.network ? (root.network.isSecure ? root.network.security : qsTr("Open")) : qsTr("N/A")
+                        color: Colours.palette.m3outline
+                        font.pointSize: Appearance.font.size.small
+                    }
+                }
+            }
+        }
+    }
+
+    component Toggle: RowLayout {
+        required property string label
+        property alias checked: toggle.checked
+        property alias toggle: toggle
+
+        Layout.fillWidth: true
+        spacing: Appearance.spacing.normal
+
+        StyledText {
+            Layout.fillWidth: true
+            text: parent.label
+        }
+
+        StyledSwitch {
+            id: toggle
+
+            cLayer: 2
+        }
+    }
+}
+
diff --git a/modules/controlcenter/network/NetworkList.qml b/modules/controlcenter/network/NetworkList.qml
new file mode 100644
index 0000000..8dfebc7
--- /dev/null
+++ b/modules/controlcenter/network/NetworkList.qml
@@ -0,0 +1,240 @@
+pragma ComponentBehavior: Bound
+
+import ".."
+import qs.components
+import qs.components.controls
+import qs.components.containers
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+ColumnLayout {
+    id: root
+
+    required property Session session
+
+    spacing: Appearance.spacing.small
+
+    RowLayout {
+        spacing: Appearance.spacing.smaller
+
+        StyledText {
+            text: qsTr("Settings")
+            font.pointSize: Appearance.font.size.large
+            font.weight: 500
+        }
+
+        Item {
+            Layout.fillWidth: true
+        }
+
+        StyledRect {
+            implicitWidth: implicitHeight
+            implicitHeight: wifiIcon.implicitHeight + Appearance.padding.normal * 2
+
+            radius: Appearance.rounding.normal
+            color: Network.wifiEnabled ? Colours.palette.m3tertiary : Colours.palette.m3tertiaryContainer
+
+            StateLayer {
+                function onClicked(): void {
+                    Network.toggleWifi();
+                }
+            }
+
+            MaterialIcon {
+                id: wifiIcon
+
+                anchors.centerIn: parent
+                text: "wifi"
+                color: Network.wifiEnabled ? Colours.palette.m3onTertiary : Colours.palette.m3onTertiaryContainer
+            }
+        }
+
+        StyledRect {
+            implicitWidth: implicitHeight
+            implicitHeight: scanIcon.implicitHeight + Appearance.padding.normal * 2
+
+            radius: Appearance.rounding.normal
+            color: Network.scanning ? Colours.palette.m3secondary : Colours.palette.m3secondaryContainer
+
+            StateLayer {
+                function onClicked(): void {
+                    Network.rescanWifi();
+                }
+            }
+
+            MaterialIcon {
+                id: scanIcon
+
+                anchors.centerIn: parent
+                text: "wifi_find"
+                color: Network.scanning ? Colours.palette.m3onSecondary : Colours.palette.m3onSecondaryContainer
+            }
+        }
+
+        StyledRect {
+            implicitWidth: implicitHeight
+            implicitHeight: settingsIcon.implicitHeight + Appearance.padding.normal * 2
+
+            radius: Appearance.rounding.normal
+            color: !root.session.network.active ? Colours.palette.m3primary : Colours.palette.m3primaryContainer
+
+            StateLayer {
+                function onClicked(): void {
+                    if (root.session.network.active)
+                        root.session.network.active = null;
+                    else {
+                        root.session.network.active = view.model.get(0)?.modelData ?? null;
+                    }
+                }
+            }
+
+            MaterialIcon {
+                id: settingsIcon
+
+                anchors.centerIn: parent
+                text: "settings"
+                color: !root.session.network.active ? Colours.palette.m3onPrimary : Colours.palette.m3onPrimaryContainer
+            }
+        }
+    }
+
+    RowLayout {
+        Layout.fillWidth: true
+        spacing: Appearance.spacing.small
+
+        StyledText {
+            text: qsTr("Networks (%1)").arg(Network.networks.length)
+            font.pointSize: Appearance.font.size.large
+            font.weight: 500
+        }
+
+        StyledText {
+            visible: Network.scanning
+            text: qsTr("Scanning...")
+            color: Colours.palette.m3primary
+            font.pointSize: Appearance.font.size.small
+        }
+    }
+
+    StyledText {
+        text: qsTr("All available WiFi networks")
+        color: Colours.palette.m3outline
+    }
+
+    StyledListView {
+        id: view
+
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+
+        model: Network.networks
+
+        spacing: Appearance.spacing.small / 2
+        clip: true
+
+        StyledScrollBar.vertical: StyledScrollBar {
+            flickable: view
+        }
+
+        delegate: StyledRect {
+            required property var modelData
+
+            anchors.left: parent.left
+            anchors.right: parent.right
+
+            color: Qt.alpha(Colours.tPalette.m3surfaceContainer, root.session.network.active === modelData ? Colours.tPalette.m3surfaceContainer.a : 0)
+            radius: Appearance.rounding.normal
+            border.width: root.session.network.active === modelData ? 1 : 0
+            border.color: Colours.palette.m3primary
+
+            StateLayer {
+                function onClicked(): void {
+                    root.session.network.active = modelData;
+                }
+            }
+
+            RowLayout {
+                id: rowLayout
+
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.margins: Appearance.padding.normal
+
+                spacing: Appearance.spacing.normal
+
+                StyledRect {
+                    implicitWidth: implicitHeight
+                    implicitHeight: icon.implicitHeight + Appearance.padding.normal * 2
+
+                    radius: Appearance.rounding.normal
+                    color: modelData.active ? Colours.palette.m3primaryContainer : Colours.tPalette.m3surfaceContainerHigh
+
+                    MaterialIcon {
+                        id: icon
+
+                        anchors.centerIn: parent
+                        text: modelData.isSecure ? "lock" : "wifi"
+                        font.pointSize: Appearance.font.size.large
+                        fill: modelData.active ? 1 : 0
+                        color: modelData.active ? Colours.palette.m3onPrimaryContainer : Colours.palette.m3onSurface
+                    }
+                }
+
+                StyledText {
+                    Layout.fillWidth: true
+
+                    text: modelData.ssid || qsTr("Unknown")
+                }
+
+                StyledText {
+                    text: modelData.active ? qsTr("Connected") : (modelData.isSecure ? qsTr("Secured") : qsTr("Open"))
+                    color: modelData.active ? Colours.palette.m3primary : Colours.palette.m3outline
+                    font.pointSize: Appearance.font.size.small
+                    font.weight: modelData.active ? 500 : 400
+                }
+
+                StyledText {
+                    text: qsTr("%1%").arg(modelData.strength)
+                    color: Colours.palette.m3outline
+                    font.pointSize: Appearance.font.size.small
+                }
+
+                StyledRect {
+                    implicitWidth: implicitHeight
+                    implicitHeight: connectIcon.implicitHeight + Appearance.padding.smaller * 2
+
+                    radius: Appearance.rounding.full
+                    color: Qt.alpha(Colours.palette.m3primaryContainer, modelData.active ? 1 : 0)
+
+                    StateLayer {
+                        function onClicked(): void {
+                            if (modelData.active) {
+                                Network.disconnectFromNetwork();
+                            } else {
+                                if (modelData.isSecure) {
+                                    root.session.network.showPasswordDialog = true;
+                                    root.session.network.pendingNetwork = modelData;
+                                } else {
+                                    Network.connectToNetwork(modelData.ssid, "");
+                                }
+                            }
+                        }
+                    }
+
+                    MaterialIcon {
+                        id: connectIcon
+
+                        anchors.centerIn: parent
+                        text: modelData.active ? "link_off" : "link"
+                        color: modelData.active ? Colours.palette.m3onPrimaryContainer : Colours.palette.m3onSurface
+                    }
+                }
+            }
+
+            implicitHeight: rowLayout.implicitHeight + Appearance.padding.normal * 2
+        }
+    }
+}
diff --git a/modules/controlcenter/network/NetworkPane.qml b/modules/controlcenter/network/NetworkPane.qml
new file mode 100644
index 0000000..f37eedd
--- /dev/null
+++ b/modules/controlcenter/network/NetworkPane.qml
@@ -0,0 +1,79 @@
+pragma ComponentBehavior: Bound
+
+import ".."
+import qs.components
+import qs.components.effects
+import qs.components.containers
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+RowLayout {
+    id: root
+
+    required property Session session
+
+    anchors.fill: parent
+
+    spacing: 0
+
+    Item {
+        Layout.preferredWidth: Math.floor(parent.width * 0.4)
+        Layout.minimumWidth: 420
+        Layout.fillHeight: true
+
+        NetworkList {
+            anchors.fill: parent
+            anchors.margins: Appearance.padding.large + Appearance.padding.normal
+            anchors.leftMargin: Appearance.padding.large
+            anchors.rightMargin: Appearance.padding.large + Appearance.padding.normal / 2
+
+            session: root.session
+        }
+
+        InnerBorder {
+            leftThickness: 0
+            rightThickness: Appearance.padding.normal / 2
+        }
+    }
+
+    Item {
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+
+        Loader {
+            id: loader
+
+            anchors.fill: parent
+            anchors.margins: Appearance.padding.large * 2
+
+            sourceComponent: root.session.network.active ? details : settings
+
+            Behavior on opacity {
+                NumberAnimation {
+                    duration: 200
+                }
+            }
+        }
+
+        InnerBorder {
+            leftThickness: Appearance.padding.normal / 2
+        }
+
+        Component {
+            id: settings
+
+            Settings {
+                session: root.session
+            }
+        }
+
+        Component {
+            id: details
+
+            Details {
+                session: root.session
+            }
+        }
+    }
+}
diff --git a/modules/controlcenter/network/Settings.qml b/modules/controlcenter/network/Settings.qml
new file mode 100644
index 0000000..0794e6a
--- /dev/null
+++ b/modules/controlcenter/network/Settings.qml
@@ -0,0 +1,166 @@
+pragma ComponentBehavior: Bound
+
+import ".."
+import qs.components
+import qs.components.controls
+import qs.components.effects
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+ColumnLayout {
+    id: root
+
+    required property Session session
+
+    spacing: Appearance.spacing.normal
+
+    MaterialIcon {
+        Layout.alignment: Qt.AlignHCenter
+        text: "wifi"
+        font.pointSize: Appearance.font.size.extraLarge * 3
+        font.bold: true
+    }
+
+    StyledText {
+        Layout.alignment: Qt.AlignHCenter
+        text: qsTr("Network settings")
+        font.pointSize: Appearance.font.size.large
+        font.bold: true
+    }
+
+    StyledText {
+        Layout.topMargin: Appearance.spacing.large
+        text: qsTr("WiFi status")
+        font.pointSize: Appearance.font.size.larger
+        font.weight: 500
+    }
+
+    StyledText {
+        text: qsTr("General WiFi settings")
+        color: Colours.palette.m3outline
+    }
+
+    StyledRect {
+        Layout.fillWidth: true
+        implicitHeight: wifiStatus.implicitHeight + Appearance.padding.large * 2
+
+        radius: Appearance.rounding.normal
+        color: Colours.tPalette.m3surfaceContainer
+
+        ColumnLayout {
+            id: wifiStatus
+
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.margins: Appearance.padding.large
+
+            spacing: Appearance.spacing.larger
+
+            Toggle {
+                label: qsTr("WiFi enabled")
+                checked: Network.wifiEnabled
+                toggle.onToggled: {
+                    Network.enableWifi(checked);
+                }
+            }
+        }
+    }
+
+    StyledText {
+        Layout.topMargin: Appearance.spacing.large
+        text: qsTr("Network information")
+        font.pointSize: Appearance.font.size.larger
+        font.weight: 500
+    }
+
+    StyledText {
+        text: qsTr("Current network connection")
+        color: Colours.palette.m3outline
+    }
+
+    StyledRect {
+        Layout.fillWidth: true
+        implicitHeight: networkInfo.implicitHeight + Appearance.padding.large * 2
+
+        radius: Appearance.rounding.normal
+        color: Colours.tPalette.m3surfaceContainer
+
+        ColumnLayout {
+            id: networkInfo
+
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.margins: Appearance.padding.large
+
+            spacing: Appearance.spacing.small / 2
+
+            StyledText {
+                text: qsTr("Connected network")
+            }
+
+            StyledText {
+                text: Network.active ? Network.active.ssid : qsTr("Not connected")
+                color: Colours.palette.m3outline
+                font.pointSize: Appearance.font.size.small
+            }
+
+            StyledText {
+                Layout.topMargin: Appearance.spacing.normal
+                text: qsTr("Signal strength")
+            }
+
+            StyledText {
+                text: Network.active ? qsTr("%1%").arg(Network.active.strength) : qsTr("N/A")
+                color: Colours.palette.m3outline
+                font.pointSize: Appearance.font.size.small
+            }
+
+            StyledText {
+                Layout.topMargin: Appearance.spacing.normal
+                text: qsTr("Security")
+            }
+
+            StyledText {
+                text: Network.active ? (Network.active.isSecure ? qsTr("Secured") : qsTr("Open")) : qsTr("N/A")
+                color: Colours.palette.m3outline
+                font.pointSize: Appearance.font.size.small
+            }
+
+            StyledText {
+                Layout.topMargin: Appearance.spacing.normal
+                text: qsTr("Frequency")
+            }
+
+            StyledText {
+                text: Network.active ? qsTr("%1 MHz").arg(Network.active.frequency) : qsTr("N/A")
+                color: Colours.palette.m3outline
+                font.pointSize: Appearance.font.size.small
+            }
+        }
+    }
+
+    component Toggle: RowLayout {
+        required property string label
+        property alias checked: toggle.checked
+        property alias toggle: toggle
+
+        Layout.fillWidth: true
+        spacing: Appearance.spacing.normal
+
+        StyledText {
+            Layout.fillWidth: true
+            text: parent.label
+        }
+
+        StyledSwitch {
+            id: toggle
+
+            cLayer: 2
+        }
+    }
+}
+