diff --git a/home/programs/ags/.gitignore b/home/programs/ags/.gitignore
index e8c7365c..9ec68289 100644
--- a/home/programs/ags/.gitignore
+++ b/home/programs/ags/.gitignore
@@ -1 +1,2 @@
 style.css
+style.css.map
diff --git a/home/programs/ags/services/brightness.js b/home/programs/ags/services/brightness.js
index 46f7ff0a..22122303 100644
--- a/home/programs/ags/services/brightness.js
+++ b/home/programs/ags/services/brightness.js
@@ -29,12 +29,8 @@ class BrightnessService extends Service {
 
     Utils.writeFile(percent * this.#max, this.#brightness)
       .then(() => {
-        // signals has to be explicity emitted
         this.emit("screen-changed", percent);
         this.notify("screen-value");
-
-        // or use Service.changed(propName: string) which does the above two
-        // this.changed("screen");
       })
       .catch(print);
   }
diff --git a/home/programs/ags/utils/popup_window.js b/home/programs/ags/utils/popup_window.js
index edac616d..7d9a2e18 100644
--- a/home/programs/ags/utils/popup_window.js
+++ b/home/programs/ags/utils/popup_window.js
@@ -5,7 +5,7 @@ export default (
   {
     name,
     child,
-    revealerConnections = null,
+    revealerSetup = null,
     transition = "crossfade",
     transitionDuration = 200,
     ...props
@@ -18,6 +18,8 @@ export default (
     visible: false,
     ...props,
 
+    setup: (self) => self.getChild = () => child,
+
     child: Box({
       css: `
         min-height: 1px;
@@ -27,20 +29,21 @@ export default (
       child: Revealer({
         transition,
         transitionDuration,
-        connections: revealerConnections ?? [
-          [
-            App,
-            (self, currentName, visible) => {
-              if (currentName === name) {
-                self.reveal_child = visible;
-              }
-            },
-          ],
-        ],
         child: child,
+
+        setup: revealerSetup ?? ((self) =>
+          self
+            .hook(
+              App,
+              (self, currentName, visible) => {
+                if (currentName === name) {
+                  self.reveal_child = visible;
+                }
+              },
+            )),
       }),
     }),
   });
-  window.getChild = () => child;
+
   return window;
 };
diff --git a/home/programs/ags/windows/osd/main.js b/home/programs/ags/windows/osd/main.js
index 63b94905..7b615e02 100644
--- a/home/programs/ags/windows/osd/main.js
+++ b/home/programs/ags/windows/osd/main.js
@@ -1,4 +1,4 @@
-import { Audio, Hyprland, Widget } from "../../imports.js";
+import { App, Audio, Hyprland, Widget } from "../../imports.js";
 
 import Brightness from "../../services/brightness.js";
 import Indicators from "../../services/osd.js";
@@ -8,14 +8,22 @@ import PopupWindow from "../../utils/popup_window.js";
 Audio.connect("speaker-changed", () =>
   Audio.speaker.connect(
     "changed",
-    () => Indicators.speaker(),
+    () => {
+      if (!App.getWindow("system-menu").visible) {
+        Indicators.speaker();
+      }
+    },
   ));
 Audio.connect(
   "microphone-changed",
   () => Audio.microphone.connect("changed", () => Indicators.mic()),
 );
 
-Brightness.connect("screen-changed", () => Indicators.display());
+Brightness.connect("screen-changed", () => {
+  if (!App.getWindow("system-menu").visible) {
+    Indicators.display();
+  }
+});
 
 let lastMonitor;
 
@@ -25,12 +33,10 @@ const child = Widget.Box({
   className: "osd",
 
   children: [
-    Widget.Icon({
-      connections: [[
-        Indicators,
-        (self, props) => self.icon = props?.icon ?? "",
-      ]],
-    }),
+    Widget.Icon().hook(
+      Indicators,
+      (self, props) => self.icon = props?.icon ?? "",
+    ),
     Widget.Box({
       hexpand: true,
       vertical: true,
@@ -39,24 +45,23 @@ const child = Widget.Box({
           hexpand: false,
           truncate: "end",
           max_width_chars: 24,
-          connections: [[
+        })
+          .hook(
             Indicators,
             (self, props) => self.label = props?.label ?? "",
-          ]],
-        }),
+          ),
+
         Widget.ProgressBar({
           hexpand: true,
           vertical: false,
-          connections: [
-            [
-              Indicators,
-              (self, props) => {
-                self.value = props?.value ?? 0;
-                self.visible = props?.showProgress ?? false;
-              },
-            ],
-          ],
-        }),
+        })
+          .hook(
+            Indicators,
+            (self, props) => {
+              self.value = props?.value ?? 0;
+              self.visible = props?.showProgress ?? false;
+            },
+          ),
       ],
     }),
   ],
@@ -65,26 +70,26 @@ const child = Widget.Box({
 export const Osd = PopupWindow({
   name: "osd",
   monitor: 0,
-  revealerConnections: [[Indicators, (revealer, _, visible) => {
-    revealer.reveal_child = visible;
-  }]],
   child,
-  connections: [
-    [
-      Hyprland.active,
-      (self) => {
-        // prevent useless resets
-        if (lastMonitor === Hyprland.active.monitor) return;
+  revealerSetup: (self) =>
+    self
+      .hook(Indicators, (revealer, _, visible) => {
+        revealer.reveal_child = visible;
+      }),
+})
+  .hook(
+    Hyprland.active,
+    (self) => {
+      // prevent useless resets
+      if (lastMonitor === Hyprland.active.monitor) return;
 
-        self.monitor = Hyprland.monitors.find(({ name }) =>
-          name === Hyprland.active.monitor
-        ).id;
-      },
-    ],
-    [Indicators, (win, _, visible) => {
-      win.visible = visible;
-    }],
-  ],
-});
+      self.monitor =
+        Hyprland.monitors.find(({ name }) => name === Hyprland.active.monitor)
+          .id;
+    },
+  )
+  .hook(Indicators, (win, _, visible) => {
+    win.visible = visible;
+  });
 
 export default Osd;