diff --git a/modules/ags/config/configurations/wim.ts b/modules/ags/config/configurations/wim.ts
index 02502ecd..2f93afbe 100644
--- a/modules/ags/config/configurations/wim.ts
+++ b/modules/ags/config/configurations/wim.ts
@@ -8,6 +8,7 @@ import AudioWindow from '../widgets/audio/wim';
 import Bar from '../widgets/bar/wim';
 import BgLayer from '../widgets/bg-layer';
 import BluetoothWindow from '../widgets/bluetooth/wim';
+import BrightnessSlider from '../widgets/brightness-slider/main';
 import Calendar from '../widgets/date/wim';
 import Clipboard from '../widgets/clipboard';
 import Corners from '../widgets/corners';
@@ -97,6 +98,7 @@ export default () => {
             AudioWindow();
             Bar();
             BluetoothWindow();
+            BrightnessSlider();
             Calendar();
             Clipboard();
             Corners();
diff --git a/modules/ags/config/widgets/bar/items/brightness.tsx b/modules/ags/config/widgets/bar/items/brightness.tsx
index fe781766..674092f4 100644
--- a/modules/ags/config/widgets/bar/items/brightness.tsx
+++ b/modules/ags/config/widgets/bar/items/brightness.tsx
@@ -1,13 +1,31 @@
 import { bind } from 'astal';
+import { App } from 'astal/gtk3';
 
 import Brightness from '../../../services/brightness';
 
+import PopupWindow from '../../misc/popup-window';
+
+
 export default () => {
     const brightness = Brightness.get_default();
 
     return (
-        <box className="bar-item brightness">
-            <overlay>
+        <button
+            cursor="pointer"
+            className="bar-item brightness"
+
+            onButtonReleaseEvent={(self) => {
+                const win = App.get_window('win-brightness-slider') as PopupWindow;
+
+                win.set_x_pos(
+                    self.get_allocation(),
+                    'right',
+                );
+
+                win.set_visible(!win.get_visible());
+            }}
+        >
+            <overlay passThrough>
                 <circularprogress
                     startAt={0.75}
                     endAt={0.75}
@@ -17,6 +35,6 @@ export default () => {
 
                 <icon icon={bind(brightness, 'screenIcon')} />
             </overlay>
-        </box>
+        </button>
     );
 };
diff --git a/modules/ags/config/widgets/brightness-slider/main.tsx b/modules/ags/config/widgets/brightness-slider/main.tsx
new file mode 100644
index 00000000..e1a01631
--- /dev/null
+++ b/modules/ags/config/widgets/brightness-slider/main.tsx
@@ -0,0 +1,35 @@
+import { bind } from 'astal';
+import { Astal, Gtk } from 'astal/gtk3';
+
+import Brightness from '../../services/brightness';
+
+import PopupWindow from '../misc/popup-window';
+
+
+export default () => {
+    const brightness = Brightness.get_default();
+
+    return (
+        <PopupWindow
+            name="brightness-slider"
+            anchor={Astal.WindowAnchor.RIGHT | Astal.WindowAnchor.TOP}
+        >
+            <box className="widget" widthRequest={500}>
+                <slider
+                    hexpand
+                    halign={Gtk.Align.FILL}
+                    drawValue
+                    cursor="pointer"
+
+                    min={0}
+                    max={100}
+
+                    value={bind(brightness, 'screen').as((v) => v * 100)}
+                    onDragged={(self) => {
+                        brightness.screen = Number((self.value / 100).toFixed(2));
+                    }}
+                />
+            </box>
+        </PopupWindow>
+    );
+};