diff --git a/src/Bar.qml b/src/Bar.qml
index 5a473de..c686e53 100644
--- a/src/Bar.qml
+++ b/src/Bar.qml
@@ -3,6 +3,7 @@ import QtQuick // for Text
 import QtQuick.Layouts
 import "widgets/systray"
 import "widgets/workspaces"
+import "widgets/battery"
 
 Scope {
     Variants {
@@ -39,6 +40,7 @@ Scope {
 
                 Workspaces {}
 
+                Battery {}
                 Item {
                     Layout.fillHeight: true
                 }
diff --git a/src/widgets/battery/Battery.qml b/src/widgets/battery/Battery.qml
new file mode 100644
index 0000000..60830d0
--- /dev/null
+++ b/src/widgets/battery/Battery.qml
@@ -0,0 +1,33 @@
+import "root:base"
+import Quickshell.Services.UPower
+import QtQuick
+import QtQuick.Layouts
+
+BRectangle {
+    visible: UPower.displayDevice != null
+    height: width * 2
+
+    Rectangle {
+        anchors.fill: parent
+        anchors.margins: 5
+        color: "transparent"
+
+        Pill {
+            id: health
+            width: parent.width * 4 / 5
+            height: parent.height
+            anchors.right: parent.right
+            percentage: UPower.displayDevice.healthPercentage
+            visible: UPower.displayDevice.healthSupported
+        }
+        Pill {
+            id: battery
+            width: parent.width * (!UPower.displayDevice.healthSupported || 3 / 5)
+            height: parent.height
+            anchors.left: parent.left
+
+            percentage: UPower.displayDevice.percentage
+            color: 100 * percentage / 360
+        }
+    }
+}
diff --git a/src/widgets/battery/Pill.qml b/src/widgets/battery/Pill.qml
new file mode 100644
index 0000000..e2faaad
--- /dev/null
+++ b/src/widgets/battery/Pill.qml
@@ -0,0 +1,23 @@
+import QtQuick
+
+Item {
+    property real percentage: 0.3 // Percentage of fullness
+    property real color: 0.7
+    property int radius: 5
+
+    Rectangle {
+        id: background
+        anchors.fill: parent
+        radius: parent.radius
+        color: `${Qt.hsla(parent.color, 0.2, 0.6, 1)}`
+    }
+
+    Rectangle {
+        id: foreground
+        radius: parent.radius
+        height: parent.height * parent.percentage
+        width: parent.width
+        anchors.bottom: parent.bottom
+        color: `${Qt.hsla(parent.color, 0.8, 0.6, 1)}`
+    }
+}