diff --git a/basic_bar/.qmlformat.ini b/basic_bar/.qmlformat.ini
new file mode 100644
index 0000000..0a8a26f
--- /dev/null
+++ b/basic_bar/.qmlformat.ini
@@ -0,0 +1,8 @@
+[General]
+FunctionsSpacing=true
+IndentWidth=2
+MaxColumnWidth=-1
+NewlineType=native
+NormalizeOrder=true
+ObjectsSpacing=true
+UseTabs=false
diff --git a/basic_bar/Containers/Left.qml b/basic_bar/Containers/Left.qml
new file mode 100644
index 0000000..20e8154
--- /dev/null
+++ b/basic_bar/Containers/Left.qml
@@ -0,0 +1,20 @@
+import QtQuick
+import QtQuick.Layouts
+import "../Widgets/" as Wid
+
+Item {
+  RowLayout {
+    anchors.bottom: parent.bottom
+    anchors.left: parent.left
+    anchors.top: parent.top
+
+    Wid.OsText {
+    }
+
+    Wid.Workspaces {
+    }
+
+    Wid.WorkspaceName {
+    }
+  }
+}
diff --git a/basic_bar/Containers/Middle.qml b/basic_bar/Containers/Middle.qml
new file mode 100644
index 0000000..a875d13
--- /dev/null
+++ b/basic_bar/Containers/Middle.qml
@@ -0,0 +1,14 @@
+import QtQuick
+import QtQuick.Layouts
+import "../Widgets/" as Wid
+
+Item {
+  RowLayout {
+    anchors.bottom: parent.bottom
+    anchors.horizontalCenter: parent.horizontalCenter
+    anchors.top: parent.top
+
+    Wid.Clock {
+    }
+  }
+}
diff --git a/basic_bar/Containers/Right.qml b/basic_bar/Containers/Right.qml
new file mode 100644
index 0000000..489321c
--- /dev/null
+++ b/basic_bar/Containers/Right.qml
@@ -0,0 +1,29 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Services.Pipewire
+import "../Widgets/" as Wid
+
+Item {
+  RowLayout {
+    anchors.bottom: parent.bottom
+    anchors.right: parent.right
+    anchors.top: parent.top
+    layoutDirection: Qt.RightToLeft
+
+    Wid.Session {
+    }
+
+    Wid.PowerProfs {
+    }
+
+    Wid.Sound {
+    }
+
+    Wid.Sound {
+      node: Pipewire.defaultAudioSource
+    }
+
+    Wid.Battery {
+    }
+  }
+}
diff --git a/basic_bar/Data/Audio.qml b/basic_bar/Data/Audio.qml
new file mode 100644
index 0000000..4de32d0
--- /dev/null
+++ b/basic_bar/Data/Audio.qml
@@ -0,0 +1,40 @@
+pragma Singleton
+import QtQuick
+import Quickshell
+import Quickshell.Services.Pipewire
+
+// WARNING don't forget to track nodes with PwNodeObjectTracler
+Singleton {
+  id: root
+
+  function getIcon(node: PwNode): string {
+    return (node.isSink) ? getSinkIcon(node) : getSourceIcon(node);
+  }
+
+  function getSinkIcon(node: PwNode): string {
+    return (node.audio.muted) ? "󰝟" : (node.audio.volume > 0.5) ? "󰕾" : (node.audio.volume > 0.01) ? "󰖀" : "󰕿";
+  }
+
+  function getSourceIcon(node: PwNode): string {
+    return (node.audio.muted) ? "󰍭" : "󰍬";
+  }
+
+  function toggleMute(node: PwNode) {
+    node.audio.muted = !node.audio.muted;
+  }
+
+  function wheelAction(event: WheelEvent, node: PwNode) {
+    if (event.angleDelta.y < 0) {
+      node.audio.volume -= 0.01;
+    } else {
+      node.audio.volume += 0.01;
+    }
+
+    if (node.audio.volume > 1.3) {
+      node.audio.volume = 1.3;
+    }
+    if (node.audio.volume < 0) {
+      node.audio.volume = 0.0;
+    }
+  }
+}
diff --git a/basic_bar/Data/Colors.qml b/basic_bar/Data/Colors.qml
new file mode 100644
index 0000000..a86fb44
--- /dev/null
+++ b/basic_bar/Data/Colors.qml
@@ -0,0 +1,58 @@
+pragma Singleton
+import Quickshell
+import QtQuick
+
+Singleton {
+  readonly property color background: "#121318"
+  readonly property color error: "#ffb4ab"
+  readonly property color error_container: "#93000a"
+  readonly property color inverse_on_surface: "#2f3036"
+  readonly property color inverse_primary: "#4d5c92"
+  readonly property color inverse_surface: "#e3e1e9"
+  readonly property color on_background: "#e3e1e9"
+  readonly property color on_error: "#690005"
+  readonly property color on_error_container: "#ffdad6"
+  readonly property color on_primary: "#1d2d61"
+  readonly property color on_primary_container: "#dce1ff"
+  readonly property color on_primary_fixed: "#04174b"
+  readonly property color on_primary_fixed_variant: "#354479"
+  readonly property color on_secondary: "#2b3042"
+  readonly property color on_secondary_container: "#dee1f9"
+  readonly property color on_secondary_fixed: "#161b2c"
+  readonly property color on_secondary_fixed_variant: "#424659"
+  readonly property color on_surface: "#e3e1e9"
+  readonly property color on_surface_variant: "#c6c5d0"
+  readonly property color on_tertiary: "#432740"
+  readonly property color on_tertiary_container: "#ffd7f5"
+  readonly property color on_tertiary_fixed: "#2c122a"
+  readonly property color on_tertiary_fixed_variant: "#5b3d57"
+  readonly property color outline: "#90909a"
+  readonly property color outline_variant: "#45464f"
+  readonly property color primary: "#b6c4ff"
+  readonly property color primary_container: "#354479"
+  readonly property color primary_fixed: "#dce1ff"
+  readonly property color primary_fixed_dim: "#b6c4ff"
+  readonly property color scrim: "#000000"
+  readonly property color secondary: "#c2c5dd"
+  readonly property color secondary_container: "#424659"
+  readonly property color secondary_fixed: "#dee1f9"
+  readonly property color secondary_fixed_dim: "#c2c5dd"
+  readonly property color shadow: "#000000"
+  readonly property color surface: "#121318"
+  readonly property color surface_bright: "#38393f"
+  readonly property color surface_container: "#1e1f25"
+  readonly property color surface_container_high: "#292a2f"
+  readonly property color surface_container_highest: "#34343a"
+  readonly property color surface_container_low: "#1a1b21"
+  readonly property color surface_container_lowest: "#0d0e13"
+  readonly property color surface_dim: "#121318"
+  readonly property color surface_tint: "#b6c4ff"
+  readonly property color tertiary: "#e3bada"
+  readonly property color tertiary_container: "#5b3d57"
+  readonly property color tertiary_fixed: "#ffd7f5"
+  readonly property color tertiary_fixed_dim: "#e3bada"
+
+  function withAlpha(color: color, alpha: real): color {
+    return Qt.rgba(color.r, color.g, color.b, alpha);
+  }
+}
diff --git a/basic_bar/Data/Fonts.qml b/basic_bar/Data/Fonts.qml
new file mode 100644
index 0000000..9afe1d1
--- /dev/null
+++ b/basic_bar/Data/Fonts.qml
@@ -0,0 +1,10 @@
+pragma Singleton
+import Quickshell
+
+Singleton {
+  readonly property string caskaydia: "CaskaydiaMono Nerd"
+  readonly property string dejavuSans: "Dejavu Sans"
+  readonly property string hurricane: "Hurricane"
+  readonly property string jpKaisei: "Kaisei Decol"
+  readonly property string rye: "Rye"
+}
diff --git a/basic_bar/Data/Time.qml b/basic_bar/Data/Time.qml
new file mode 100644
index 0000000..e4ab2e4
--- /dev/null
+++ b/basic_bar/Data/Time.qml
@@ -0,0 +1,10 @@
+pragma Singleton
+import Quickshell
+import QtQuick
+
+SystemClock {
+  id: clock
+
+  enabled: true
+  precision: SystemClock.Seconds
+}
diff --git a/basic_bar/Generics/MatIcon.qml b/basic_bar/Generics/MatIcon.qml
new file mode 100644
index 0000000..81898a7
--- /dev/null
+++ b/basic_bar/Generics/MatIcon.qml
@@ -0,0 +1,31 @@
+// a thin wrapper for Material Symbols
+import QtQuick
+import "../Data/" as Dat
+
+Text {
+  id: root
+
+  property real fill: 0
+  property int grad: 0
+  required property string icon
+
+  font.family: "Material Symbols Rounded"
+  font.hintingPreference: Font.PreferFullHinting
+
+  // refer https://developers.google.com/fonts/docs/material_symbols
+  font.variableAxes: {
+    "FILL": root.fill,
+    "opsz": root.fontInfo.pixelSize,
+    // "GRAD": root.grad,
+    "wght": root.fontInfo.weight
+  }
+  renderType: Text.NativeRendering
+  text: root.icon
+
+  Behavior on fill {
+    NumberAnimation {
+      duration: 180
+      easing.type: Easing.InOutQuad
+    }
+  }
+}
diff --git a/basic_bar/Generics/MouseArea.qml b/basic_bar/Generics/MouseArea.qml
new file mode 100644
index 0000000..a7c6315
--- /dev/null
+++ b/basic_bar/Generics/MouseArea.qml
@@ -0,0 +1,34 @@
+import QtQuick
+
+MouseArea {
+  id: area
+
+  property real clickOpacity: 0.2
+  property real hoverOpacity: 0.08
+  property color layerColor: "white"
+  property NumberAnimation layerOpacityAnimation: NumberAnimation {
+    duration: 200
+    easing.type: Easing.InOutQuad
+  }
+  property int layerRadius: parent?.radius ?? 0
+  property alias layerRect: layer
+
+  anchors.fill: parent
+  hoverEnabled: true
+
+  onContainsMouseChanged: layer.opacity = (area.containsMouse) ? area.hoverOpacity : 0
+  onContainsPressChanged: layer.opacity = (area.containsPress) ? area.clickOpacity : area.hoverOpacity
+
+  Rectangle {
+    id: layer
+
+    anchors.fill: parent
+    color: area.layerColor
+    opacity: 0
+    radius: area.layerRadius
+
+    Behavior on opacity {
+      animation: area.layerOpacityAnimation
+    }
+  }
+}
diff --git a/basic_bar/Generics/RoundedImage.qml b/basic_bar/Generics/RoundedImage.qml
new file mode 100644
index 0000000..6f221a1
--- /dev/null
+++ b/basic_bar/Generics/RoundedImage.qml
@@ -0,0 +1,53 @@
+import QtQuick
+import QtQuick.Effects
+
+Item {
+  id: root
+
+  property alias image: rootIcon
+  property real radius
+  property string source
+
+  Image {
+    id: rootIcon
+
+    anchors.fill: parent
+    antialiasing: true
+    fillMode: Image.PreserveAspectCrop
+    mipmap: true
+    smooth: true
+    source: root.source
+    visible: false
+  }
+
+  MultiEffect {
+    id: effect
+
+    anchors.fill: rootIcon
+    antialiasing: true
+    maskEnabled: true
+    maskSource: rootIconMask
+    maskSpreadAtMin: 1.0
+    maskThresholdMax: 1.0
+    maskThresholdMin: 0.5
+    source: rootIcon
+  }
+
+  Item {
+    id: rootIconMask
+
+    antialiasing: true
+    height: rootIcon.height
+    layer.enabled: true
+    layer.smooth: true
+    smooth: true
+    visible: false
+    width: rootIcon.width
+
+    Rectangle {
+      anchors.fill: parent
+      height: this.width
+      radius: root.radius
+    }
+  }
+}
diff --git a/basic_bar/Generics/WaybarItem.qml b/basic_bar/Generics/WaybarItem.qml
new file mode 100644
index 0000000..a5fabac
--- /dev/null
+++ b/basic_bar/Generics/WaybarItem.qml
@@ -0,0 +1,46 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Wayland
+
+import "../Data/" as Dat
+
+RowLayout {
+  id: root
+
+  property alias icon: icon
+  property alias text: text
+
+  anchors.centerIn: parent
+  height: parent.height ? parent.height : 1
+
+  Item {
+    id: iconContainer
+
+    Layout.fillHeight: true
+    implicitWidth: icon.width
+
+    Text {
+      id: icon
+
+      anchors.centerIn: parent
+      font.family: "Material Symbols Rounded"
+      font.pointSize: 16
+    }
+  }
+
+  Item {
+    id: textContainer
+
+    Layout.fillHeight: true
+    implicitWidth: text.width
+
+    Text {
+      id: text
+
+      anchors.centerIn: parent
+      font.family: Dat.Fonts.dejavuSans
+      font.pointSize: 11
+    }
+  }
+}
diff --git a/basic_bar/Layers/Top.qml b/basic_bar/Layers/Top.qml
new file mode 100644
index 0000000..618a6d5
--- /dev/null
+++ b/basic_bar/Layers/Top.qml
@@ -0,0 +1,62 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Wayland
+import "../Containers/" as Con
+
+Scope {
+  Variants {
+    model: Quickshell.screens
+
+    delegate: WlrLayershell {
+      id: layerShell
+
+      required property ShellScreen modelData
+
+      anchors.left: true
+      anchors.right: true
+      anchors.top: true
+      color: "transparent"
+      exclusionMode: ExclusionMode.Auto
+      focusable: false
+      implicitHeight: 40
+      layer: WlrLayer.Top
+      namespace: "rexies.quebar.top"
+      screen: modelData
+      surfaceFormat.opaque: false
+
+      mask: Region {
+        item: base
+      }
+
+      Item {
+        id: base
+
+        anchors.fill: parent
+        anchors.margins: 4
+
+        // radius: 5
+        // color: Dat.Colors.withAlpha(Dat.Colors.background, 0.79)
+
+        RowLayout {
+          anchors.fill: parent
+
+          Con.Left {
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+          }
+
+          Con.Middle {
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+          }
+
+          Con.Right {
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/basic_bar/Widgets/Battery.qml b/basic_bar/Widgets/Battery.qml
new file mode 100644
index 0000000..0b5f388
--- /dev/null
+++ b/basic_bar/Widgets/Battery.qml
@@ -0,0 +1,54 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Services.UPower
+
+import "../Data/" as Dat
+import "../Generics/" as Gen
+
+Rectangle {
+  id: root
+
+  readonly property bool batCharging: UPower.displayDevice.state == UPowerDeviceState.Charging
+  readonly property string batIcon: {
+    (batPercentage > 0.98) ? batIcons[0] : (batPercentage > 0.90) ? batIcons[1] : (batPercentage > 0.80) ? batIcons[2] : (batPercentage > 0.70) ? batIcons[3] : (batPercentage > 0.60) ? batIcons[4] : (batPercentage > 0.50) ? batIcons[5] : (batPercentage > 0.40) ? batIcons[6] : (batPercentage > 0.30) ? batIcons[7] : (batPercentage > 0.20) ? batIcons[8] : (batPercentage > 0.10) ? batIcons[9] : batIcons[10];
+  }
+  readonly property list<string> batIcons: ["󰁹", "󰂂", "󰂁", "󰂀", "󰁿", "󰁾", "󰁽", "󰁼", "󰁻", "󰁺", "󰂃"]
+  readonly property real batPercentage: UPower.displayDevice.percentage
+  readonly property string chargeIcon: batIcons[10 - chargeIconIndex]
+  property int chargeIconIndex: 0
+  property int padding: 16
+
+  Layout.fillHeight: true
+  color: Dat.Colors.withAlpha(Dat.Colors.background, 0.79)
+  implicitWidth: container.width + padding
+  radius: 5
+
+  Gen.WaybarItem {
+    id: container
+
+    spacing: 10
+
+    icon {
+      color: Dat.Colors.tertiary
+      font.family: Dat.Fonts.caskaydia
+      text: (batCharging) ? root.chargeIcon : root.batIcon
+    }
+
+    text {
+      color: Dat.Colors.tertiary
+      text: (UPower.displayDevice.percentage * 100).toFixed(0) + "%"
+    }
+  }
+
+  Timer {
+    interval: 600
+    repeat: true
+    running: root.batCharging
+    triggeredOnStart: true
+
+    onTriggered: () => {
+      root.chargeIconIndex = root.chargeIconIndex % 10;
+      root.chargeIconIndex += 1;
+    }
+  }
+}
diff --git a/basic_bar/Widgets/Clock.qml b/basic_bar/Widgets/Clock.qml
new file mode 100644
index 0000000..9a32f1d
--- /dev/null
+++ b/basic_bar/Widgets/Clock.qml
@@ -0,0 +1,33 @@
+import QtQuick
+import QtQuick.Layouts
+
+import "../Data/" as Dat
+import "../Generics/" as Gen
+
+Rectangle {
+  property int padding: 16
+
+  Layout.fillHeight: true
+  color: Dat.Colors.withAlpha(Dat.Colors.background, 0.79)
+  implicitWidth: timeContainer.width + padding
+  radius: 5
+
+  Gen.WaybarItem {
+    id: timeContainer
+
+    icon {
+      id: icon
+
+      color: Dat.Colors.on_background
+      text: "schedule"
+    }
+
+    text {
+      id: text
+
+      color: Dat.Colors.on_background
+      font.pointSize: 11
+      text: Qt.formatDateTime(Dat.Time?.date, "h:mm:ss AP")
+    }
+  }
+}
diff --git a/basic_bar/Widgets/OsText.qml b/basic_bar/Widgets/OsText.qml
new file mode 100644
index 0000000..ce2bd0e
--- /dev/null
+++ b/basic_bar/Widgets/OsText.qml
@@ -0,0 +1,29 @@
+import QtQuick
+import QtQuick.Layouts
+
+import "../Data/" as Dat
+import "../Generics/" as Gen
+
+Rectangle {
+  property int padding: 16
+
+  Layout.fillHeight: true
+  color: Dat.Colors.withAlpha(Dat.Colors.background, 0.79)
+  implicitWidth: container.width + padding
+  radius: 5
+
+  Gen.WaybarItem {
+    id: container
+
+    icon {
+      color: Dat.Colors.tertiary
+      font.family: Dat.Fonts.caskaydia
+      text: "󱄅"
+    }
+
+    text {
+      color: Dat.Colors.tertiary
+      text: "NixOS"
+    }
+  }
+}
diff --git a/basic_bar/Widgets/PowerProfs.qml b/basic_bar/Widgets/PowerProfs.qml
new file mode 100644
index 0000000..ac74168
--- /dev/null
+++ b/basic_bar/Widgets/PowerProfs.qml
@@ -0,0 +1,94 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Services.UPower
+
+import "../Data/" as Dat
+import "../Generics/" as Gen
+
+Rectangle {
+  Layout.fillHeight: true
+  clip: true
+  color: Dat.Colors.withAlpha(Dat.Colors.background, 0.79)
+  implicitWidth: container.width
+  radius: 5
+
+  Behavior on implicitWidth {
+    NumberAnimation {
+      duration: 200
+      easing.type: Easing.InOutQuad
+    }
+  }
+
+  MouseArea {
+    id: mArea
+
+    anchors.fill: parent
+    hoverEnabled: true
+
+    RowLayout {
+      id: container
+
+      anchors.bottom: parent.bottom
+      anchors.left: parent.left
+      anchors.top: parent.top
+      clip: true
+
+      Repeater {
+        model: [
+          {
+            icon: "potted_plant",
+            profile: PowerProfile.PowerSaver
+          },
+          {
+            icon: "balance",
+            profile: PowerProfile.Balanced
+          },
+          {
+            icon: "speed",
+            profile: PowerProfile.Performance
+          },
+        ]
+
+        delegate: Item {
+          id: delegateRoot
+
+          required property int index
+          required property var modelData
+
+          Layout.fillHeight: true
+          implicitWidth: this.height ? this.height : 1
+
+          Rectangle {
+            id: bgCon
+
+            anchors.fill: parent
+            anchors.margins: 4
+            color: Dat.Colors.primary
+            radius: 5
+            visible: delegateRoot.modelData.profile == PowerProfiles.profile
+          }
+
+          Gen.MouseArea {
+            anchors.margins: 4
+            layerColor: fgText.color
+            layerRadius: 5
+            visible: !bgCon.visible
+
+            onClicked: PowerProfiles.profile = delegateRoot.modelData.profile
+          }
+
+          Gen.MatIcon {
+            id: fgText
+
+            anchors.centerIn: parent
+            color: bgCon.visible ? Dat.Colors.on_primary : Dat.Colors.on_background
+            fill: bgCon.visible
+            font.pointSize: 14
+            icon: delegateRoot.modelData.icon
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/basic_bar/Widgets/Session.qml b/basic_bar/Widgets/Session.qml
new file mode 100644
index 0000000..4724eaa
--- /dev/null
+++ b/basic_bar/Widgets/Session.qml
@@ -0,0 +1,92 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+
+import "../Data/" as Dat
+import "../Generics/" as Gen
+
+Rectangle {
+  property int padding: 16
+
+  Layout.fillHeight: true
+  color: Dat.Colors.withAlpha(Dat.Colors.background, 0.79)
+  implicitWidth: (mArea.containsMouse ? 3 : 1) * (this.height ? this.height : 1)
+  radius: 5
+
+  Behavior on implicitWidth {
+    NumberAnimation {
+      duration: 200
+      easing.type: Easing.InOutQuad
+    }
+  }
+
+  MouseArea {
+    id: mArea
+
+    anchors.fill: parent
+    hoverEnabled: true
+
+    RowLayout {
+      anchors.fill: parent
+      clip: true
+      layoutDirection: Qt.RightToLeft
+      spacing: 0
+
+      Repeater {
+        model: [
+          {
+            icon: "skull",
+            action: () => {
+              Quickshell.execDetached({
+                command: ["systemctl", "poweroff"]
+              });
+            }
+          },
+          {
+            icon: "change_circle",
+            action: () => {
+              Quickshell.execDetached({
+                command: ["systemctl", "reboot"]
+              });
+            }
+          },
+          {
+            icon: "bedtime",
+            action: () => {
+              Quickshell.execDetached({
+                command: ["systemctl", "suspend"]
+              });
+            }
+          },
+        ]
+
+        delegate: Item {
+          id: delegateRoot
+
+          required property var modelData
+
+          Layout.fillHeight: true
+          implicitWidth: this.height ? this.height : 1
+
+          Gen.MatIcon {
+            anchors.centerIn: parent
+            color: Dat.Colors.primary
+            fill: delegateMArea.containsMouse
+            font.pointSize: 16
+            icon: delegateRoot.modelData.icon
+
+            MouseArea {
+              id: delegateMArea
+
+              anchors.fill: parent
+              cursorShape: Qt.PointingHandCursor
+              hoverEnabled: true
+
+              onClicked: delegateRoot.modelData.action()
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/basic_bar/Widgets/Sound.qml b/basic_bar/Widgets/Sound.qml
new file mode 100644
index 0000000..f036ba1
--- /dev/null
+++ b/basic_bar/Widgets/Sound.qml
@@ -0,0 +1,54 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Services.Pipewire
+
+import "../Data/" as Dat
+import "../Generics/" as Gen
+
+Rectangle {
+  id: root
+
+  property string icon: Dat.Audio.getIcon(root.node)
+  property PwNode node: Pipewire.defaultAudioSink
+  property int padding: 20
+
+  Layout.fillHeight: true
+  color: Dat.Colors.withAlpha(Dat.Colors.background, 0.79)
+  implicitWidth: container.width + padding
+  radius: 5
+
+  Behavior on implicitWidth {
+    NumberAnimation {
+      duration: 200
+      easing.type: Easing.InOutQuad
+    }
+  }
+
+  PwObjectTracker {
+    objects: [root.node]
+  }
+
+  Gen.WaybarItem {
+    id: container
+
+    spacing: 10
+
+    icon {
+      color: Dat.Colors.on_background
+      text: root.icon
+    }
+
+    text {
+      color: Dat.Colors.on_background
+      text: (node.audio.volume * 100).toFixed(0) + "%"
+    }
+  }
+
+  MouseArea {
+    acceptedButtons: Qt.MiddleButton
+    anchors.fill: parent
+
+    onClicked: mevent => Dat.Audio.toggleMute(root.node)
+    onWheel: mevent => Dat.Audio.wheelAction(mevent, root.node)
+  }
+}
diff --git a/basic_bar/Widgets/WorkspaceName.qml b/basic_bar/Widgets/WorkspaceName.qml
new file mode 100644
index 0000000..b121176
--- /dev/null
+++ b/basic_bar/Widgets/WorkspaceName.qml
@@ -0,0 +1,40 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Wayland
+import "../Data/" as Dat
+
+Rectangle {
+  id: root
+
+  property int maximumWidth: 184
+  property int padding: 16
+
+  Layout.fillHeight: true
+  Layout.maximumWidth: maximumWidth + padding
+  clip: true
+  color: Dat.Colors.withAlpha(Dat.Colors.background, 0.79)
+  implicitWidth: windowNameText.contentWidth + padding
+  radius: 5
+
+  Behavior on implicitWidth {
+    NumberAnimation {
+      duration: 100
+      easing.type: Easing.InOutQuad
+    }
+  }
+
+  Text {
+    id: windowNameText
+
+    property string actWinName: activeWindow?.activated ? activeWindow?.appId : "desktop"
+    readonly property Toplevel activeWindow: ToplevelManager.activeToplevel
+
+    anchors.centerIn: parent
+    color: Dat.Colors.on_primary_container
+    elide: Text.ElideMiddle
+    font.pointSize: 11
+    horizontalAlignment: Text.AlignHCenter
+    text: actWinName
+    width: (contentWidth > root.maximumWidth) ? root.maximumWidth : undefined
+  }
+}
diff --git a/basic_bar/Widgets/Workspaces.qml b/basic_bar/Widgets/Workspaces.qml
new file mode 100644
index 0000000..2564239
--- /dev/null
+++ b/basic_bar/Widgets/Workspaces.qml
@@ -0,0 +1,82 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Hyprland
+
+import "../Data/" as Dat
+import "../Generics/" as Gen
+
+Rectangle {
+  Layout.fillHeight: true
+  clip: true
+  color: Dat.Colors.withAlpha(Dat.Colors.background, 0.79)
+  implicitWidth: container.width
+  radius: 5
+
+  Behavior on implicitWidth {
+    NumberAnimation {
+      duration: 200
+      easing.type: Easing.InOutQuad
+    }
+  }
+
+  MouseArea {
+    id: mArea
+
+    anchors.fill: parent
+    hoverEnabled: true
+
+    RowLayout {
+      id: container
+
+      property int focusedWorkspace: Hyprland.focusedWorkspace?.id ?? "0"
+
+      anchors.bottom: parent.bottom
+      anchors.left: parent.left
+      anchors.top: parent.top
+      clip: true
+      spacing: 0
+
+      Repeater {
+        model: 6
+
+        delegate: Item {
+          id: delegateRoot
+
+          required property int index
+
+          Layout.fillHeight: true
+          implicitWidth: this.height ? this.height : 1
+
+          Rectangle {
+            id: bgCon
+
+            anchors.fill: parent
+            anchors.margins: 4
+            color: Dat.Colors.primary
+            radius: 5
+            visible: container.focusedWorkspace == index + 1
+          }
+
+          Gen.MouseArea {
+            anchors.margins: 4
+            layerColor: fgText.color
+            layerRadius: 5
+            visible: !bgCon.visible
+
+            onClicked: Hyprland.dispatch("workspace " + (parent.index + 1))
+          }
+
+          Text {
+            id: fgText
+
+            anchors.centerIn: parent
+            color: bgCon.visible ? Dat.Colors.on_primary : Dat.Colors.on_background
+            font.pointSize: 11
+            text: delegateRoot.index + 1
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/basic_bar/shell.qml b/basic_bar/shell.qml
new file mode 100644
index 0000000..b65bf81
--- /dev/null
+++ b/basic_bar/shell.qml
@@ -0,0 +1,22 @@
+//@ pragma UseQApplication
+import Quickshell
+import QtQuick
+import "Layers" as Lay
+
+ShellRoot {
+  Lay.Top {
+  }
+
+  // inhibit the reload popup
+  Connections {
+    function onReloadCompleted() {
+      Quickshell.inhibitReloadPopup();
+    }
+
+    function onReloadFailed() {
+      Quickshell.inhibitReloadPopup();
+    }
+
+    target: Quickshell
+  }
+}