diff --git a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
index eeb7420e0..4f8a62f27 100644
--- a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
+++ b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
@@ -35,6 +35,8 @@
       border-radius: 999px;
       padding: 1.5 * $base_padding;
       background-color: lighten($bg_color, 10%);
+
+      &.active { background-color: $selected_bg_color; }
     }
 
     & .title {
diff --git a/js/ui/quickSettings.js b/js/ui/quickSettings.js
index a7ae84088..634a0703f 100644
--- a/js/ui/quickSettings.js
+++ b/js/ui/quickSettings.js
@@ -154,6 +154,10 @@ class QuickToggleMenu extends PopupMenu.PopupMenuBase {
             this._headerTitle, side, 1, 1);
         headerLayout.attach_next_to(this._headerSubtitle,
             this._headerTitle, Clutter.GridPosition.BOTTOM, 1, 1);
+
+        sourceActor.connect('notify::checked',
+            () => this._syncChecked());
+        this._syncChecked();
     }
 
     setHeader(icon, title, subtitle = '') {
@@ -238,6 +242,13 @@ class QuickToggleMenu extends PopupMenu.PopupMenuBase {
         this.emit('open-state-changed', false);
     }
 
+    _syncChecked() {
+        if (this.sourceActor.checked)
+            this._headerIcon.add_style_class_name('active');
+        else
+            this._headerIcon.remove_style_class_name('active');
+    }
+
     // expected on toplevel menus
     _setOpenedSubMenu(submenu) {
         this._openedSubMenu?.close(true);