diff --git a/man/waybar.5.scd.in b/man/waybar.5.scd.in
index 1b7992759..e50e07675 100644
--- a/man/waybar.5.scd.in
+++ b/man/waybar.5.scd.in
@@ -369,6 +369,22 @@ A group may hide all but one element, showing them only on mouse hover. In order
 	Defines the direction of the transition animation. If true, the hidden elements will slide from left to right. If false, they will slide from right to left.
 	When the bar is vertical, it reads as top-to-bottom.
 
+## Drawer CSS state classes
+
+When a group drawer is rendered, the following additional CSS classes
+are applied dynamically to the drawer element based on its state:
+
+* .drawer-open ++
+    Applied when the drawer is in the open state.
+
+* .drawer-closed ++
+    Applied when the drawer is in the closed state.
+
+These classes can be used in the `style.css` file to customize the
+appearance of group drawers depending on whether they are expanded
+or collapsed.
+
+
 ```
 "group/power": {
     "orientation": "inherit",
diff --git a/src/group.cpp b/src/group.cpp
index 294743d73..dcf6b4a17 100644
--- a/src/group.cpp
+++ b/src/group.cpp
@@ -9,6 +9,17 @@
 
 namespace waybar {
 
+static void set_drawer_css_state(Gtk::Widget& w, bool open) {
+  auto ctx = w.get_style_context();
+  if (open) {
+    ctx->add_class("drawer-open");
+    ctx->remove_class("drawer-closed");
+  } else {
+    ctx->add_class("drawer-closed");
+    ctx->remove_class("drawer-open");
+  }
+}
+
 Gtk::RevealerTransitionType getPreferredTransitionType(bool is_vertical) {
   /* The transition direction of a drawer is not actually determined by the transition type,
    * but rather by the order of 'box' and 'revealer_box':
@@ -72,8 +83,12 @@ Group::Group(const std::string& name, const std::string& id, const Json::Value&
 
     revealer.get_style_context()->add_class("drawer");
 
+    set_drawer_css_state(revealer, /*open=*/false);
+
     revealer.add(revealer_box);
 
+
+
     if (left_to_right) {
       box.pack_end(revealer);
     } else {
@@ -87,11 +102,25 @@ Group::Group(const std::string& name, const std::string& id, const Json::Value&
 void Group::show_group() {
   box.set_state_flags(Gtk::StateFlags::STATE_FLAG_PRELIGHT);
   revealer.set_reveal_child(true);
+
+  if (is_drawer) {
+    set_drawer_css_state(revealer, /*open=*/true);
+    set_drawer_css_state(box, true);
+}
+
+
 }
 
 void Group::hide_group() {
   box.unset_state_flags(Gtk::StateFlags::STATE_FLAG_PRELIGHT);
   revealer.set_reveal_child(false);
+
+
+  if (is_drawer) {
+    set_drawer_css_state(revealer, /*open=*/false);
+    set_drawer_css_state(box, false);
+  }
+
 }
 
 bool Group::handleMouseEnter(GdkEventCrossing* const& e) {