diff --git a/ags/style/_bar.scss b/ags/style/_bar.scss
index 2da1998..69c9e48 100644
--- a/ags/style/_bar.scss
+++ b/ags/style/_bar.scss
@@ -251,14 +251,13 @@
         font-size: 14px;
       }
     }
-    &:hover {
-      & > box {
+    &:hover > box,
+    &.open > box {
         background: colors.$bg-primary;
+    }
 
-        & > icon {
-          -gtk-icon-transform: scale(1.14);
-        }
-      }
+    &:hover > box > icon {
+      -gtk-icon-transform: scale(1.14);
     }
   }
 }
diff --git a/ags/widget/bar/Apps.ts b/ags/widget/bar/Apps.ts
index df77fb4..c182c45 100644
--- a/ags/widget/bar/Apps.ts
+++ b/ags/widget/bar/Apps.ts
@@ -1,11 +1,13 @@
 import { Gtk, Widget } from "astal/gtk3";
 import { tr } from "../../i18n/intl";
 import { Windows } from "../../windows";
+import { bind } from "astal";
 
 export function Apps(): Gtk.Widget {
     return new Widget.EventBox({
         onClickRelease: () => Windows.open("apps-window"),
-        className: "apps",
+        className: bind(Windows, "openWindows").as((openWindows) => 
+            Object.hasOwn(openWindows, "apps-window") ? "apps open" : "apps"),
         child: new Widget.Box({
             child: new Widget.Icon({
                 tooltipText: tr("bar.apps.tooltip"),