diff --git a/config/astal/components/QuickActions/modules/Brightness/Brightness.tsx b/config/astal/components/QuickActions/modules/Brightness/Brightness.tsx
index 5ddaa36..34da61f 100644
--- a/config/astal/components/QuickActions/modules/Brightness/Brightness.tsx
+++ b/config/astal/components/QuickActions/modules/Brightness/Brightness.tsx
@@ -4,11 +4,22 @@ import Brightness from "../../../../util/brightness";
 const brightness = Brightness.get_default();
 
 const BrightnessModule = () => {
+    const setBrightness = ( value: number ) => {
+        brightness.set_property('screen', value);
+    }
     return (
         <box visible={bind(brightness, 'screenAvailable')}>
             <image iconName={"brightness-high-symbolic"}></image>
             <label label={bind(brightness, "screen").as(b => b + "%")}></label>
-            <slider></slider>
+            <slider
+                value={bind(brightness, "screen")}
+                hexpand
+                max={100}
+                min={0}
+                step={1}
+                vexpand
+                onChangeValue={self => setBrightness(self.value)}
+            ></slider>
         </box>
     );
 };
diff --git a/config/astal/components/bar/bar.scss b/config/astal/components/bar/bar.scss
index 0e84599..3f13c37 100644
--- a/config/astal/components/bar/bar.scss
+++ b/config/astal/components/bar/bar.scss
@@ -61,6 +61,6 @@ window.Bar {
   }
   
   .quick-view-symbol {
-    margin: 3px;
+    margin: 2px;
   }
 }
diff --git a/config/astal/components/bar/modules/QuickView.tsx b/config/astal/components/bar/modules/QuickView.tsx
index 88e00f4..a0efc95 100644
--- a/config/astal/components/bar/modules/QuickView.tsx
+++ b/config/astal/components/bar/modules/QuickView.tsx
@@ -143,11 +143,13 @@ const BrightnessWidget = () => {
     const screen_brightness = bind(brightness, "screen");
 
     return (
-        <label
-            label={"🌣" + screen_brightness}
-            visible={bind(brightness, "screenAvailable")}
-            cssClasses={["quick-view-symbol"]}
-        ></label>
+        <box cssClasses={["quick-view-symbol"]}>
+            <image iconName={"brightness-high-symbolic"}></image>
+            <label
+                label={screen_brightness.as(b => '' + Math.round(100 * b))}
+                visible={bind(brightness, "screenAvailable")}
+            ></label>
+        </box>
     );
 };