diff --git a/nixosModules/ags/v2/app.ts b/nixosModules/ags/v2/app.ts
index fc0508dc..7fd4d8c3 100644
--- a/nixosModules/ags/v2/app.ts
+++ b/nixosModules/ags/v2/app.ts
@@ -2,7 +2,7 @@ import { App } from 'astal';
 
 import style from 'inline:./style.scss';
 
-import Bar from './widgets/bar/main';
+import Bar from './widgets/bar/wim';
 
 
 App.start({
diff --git a/nixosModules/ags/v2/widgets/bar/fullscreen.tsx b/nixosModules/ags/v2/widgets/bar/fullscreen.tsx
index 9f1e3d15..eebc0f2d 100644
--- a/nixosModules/ags/v2/widgets/bar/fullscreen.tsx
+++ b/nixosModules/ags/v2/widgets/bar/fullscreen.tsx
@@ -112,7 +112,6 @@ export default ({
     const vertical = anchor >= (Astal.WindowAnchor.LEFT | Astal.WindowAnchor.RIGHT);
     const isBottomOrLeft = (
         anchor === (Astal.WindowAnchor.LEFT | Astal.WindowAnchor.RIGHT | Astal.WindowAnchor.BOTTOM)
-
     ) || (
         anchor === (Astal.WindowAnchor.LEFT | Astal.WindowAnchor.TOP | Astal.WindowAnchor.BOTTOM)
     );
@@ -158,8 +157,8 @@ export default ({
             >
                 <box
                     css="min-height: 1px; padding: 1px;"
-                    hexpand={true}
-                    hpack="fill"
+                    hexpand
+                    halign={Gtk.Align.FILL}
                     vertical={vertical}
                 >
                     {isBottomOrLeft ?
diff --git a/nixosModules/ags/v2/widgets/bar/items/battery.tsx b/nixosModules/ags/v2/widgets/bar/items/battery.tsx
new file mode 100644
index 00000000..358edd84
--- /dev/null
+++ b/nixosModules/ags/v2/widgets/bar/items/battery.tsx
@@ -0,0 +1,31 @@
+import { bind, Widget } from 'astal';
+
+import AstalBattery from 'gi://AstalBattery';
+const Battery = AstalBattery.get_default();
+
+import Separator from '../../misc/separator';
+
+
+const LOW_BATT = 20;
+const SPACING = 5;
+
+export default () => (
+    <box className="toggle-off battery">
+        <icon
+            class_name="battery-indicator"
+            icon={bind(Battery, 'batteryIconName')}
+
+            setup={(self: Widget.Icon) => {
+                Battery.connect('notify::percentage', () => {
+                    self.toggleClassName('charging', Battery.get_charging());
+                    self.toggleClassName('charged', Battery.get_percentage() === 100);
+                    self.toggleClassName('low', Battery.get_percentage() < LOW_BATT);
+                });
+            }}
+        />
+
+        <Separator size={SPACING} />
+
+        <label label={bind(Battery, 'percentage').as((v) => `${v}%`)} />
+    </box>
+);
diff --git a/nixosModules/ags/v2/widgets/bar/main.tsx b/nixosModules/ags/v2/widgets/bar/wim.tsx
similarity index 87%
rename from nixosModules/ags/v2/widgets/bar/main.tsx
rename to nixosModules/ags/v2/widgets/bar/wim.tsx
index 45c75a51..96ba5a27 100644
--- a/nixosModules/ags/v2/widgets/bar/main.tsx
+++ b/nixosModules/ags/v2/widgets/bar/wim.tsx
@@ -1,5 +1,7 @@
 import { Astal } from 'astal';
 
+import Battery from './items/battery';
+
 import BarRevealer from './fullscreen';
 
 
@@ -16,7 +18,7 @@ export default () => {
             <box
                 className="Bar"
             >
-                <label label="hi" />
+                <Battery />
             </box>
         </BarRevealer>
     );
diff --git a/nixosModules/ags/v2/widgets/misc/separator.tsx b/nixosModules/ags/v2/widgets/misc/separator.tsx
new file mode 100644
index 00000000..b22a95ab
--- /dev/null
+++ b/nixosModules/ags/v2/widgets/misc/separator.tsx
@@ -0,0 +1,14 @@
+import { Widget } from 'astal';
+
+
+export default ({
+    size,
+    vertical = false,
+    css = '',
+    ...rest
+}: { size: number } & Widget.BoxProps) => (
+    <box
+        css={`${vertical ? 'min-height' : 'min-width'}: ${size}px; ${css}`}
+        {...rest}
+    />
+);