diff --git a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
index 494289d42..87028565e 100644
--- a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
+++ b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
@@ -12,13 +12,15 @@
   spacing-columns: $base_padding*2;
 }
 
-.quick-toggle {
+.quick-toggle, .quick-menu-toggle {
   border-radius: 99px;
   min-width: 12em;
   max-width: 12em;
   min-height: 48px;
   border:none;
+}
 
+.quick-toggle {
   &:checked { @include button(default, $c:$selected_bg_color); }
 
   & > StBoxLayout { spacing: $base_padding*1.5; }
@@ -37,16 +39,26 @@
     font-size: 12px;
   }
 
-  .quick-toggle-icon, .quick-toggle-arrow { icon-size: $base_icon_size; }
+  .quick-toggle-icon { icon-size: $base_icon_size; }
 }
 
 .quick-menu-toggle {
-  &:ltr > StBoxLayout { padding-right: 0; }
-  &:rtl > StBoxLayout { padding-left: 0; }
+  & .quick-toggle {
+    min-width: auto;
+    max-width: auto;
+
+    &:ltr { border-radius: 99px 0 0 99px; }
+    &:rtl { border-radius: 0 99px 99px 0; }
+
+    &:ltr:last-child { border-radius: 99px; }
+    &:rtl:last-child { border-radius: 99px; }
+  }
 
   & .quick-toggle-arrow {
-    background-color: transparentize($fg_color, 0.9);
     padding: $base_padding $base_padding*1.75;
+    border: none;
+
+    &:checked { @include button(default, $c:$selected_bg_color); }
 
     &:ltr { border-radius: 0 99px 99px 0; }
     &:rtl { border-radius: 99px 0 0 99px; }
diff --git a/js/ui/quickSettings.js b/js/ui/quickSettings.js
index fd584e2b4..fe42e504f 100644
--- a/js/ui/quickSettings.js
+++ b/js/ui/quickSettings.js
@@ -10,6 +10,8 @@ const {PopupAnimation} = imports.ui.boxpointer;
 const DIM_BRIGHTNESS = -0.4;
 const POPUP_ANIMATION_TIME = 400;
 
+const MENU_BUTTON_BRIGHTNESS = 0.1;
+
 var QuickSettingsItem = GObject.registerClass({
     Properties: {
         'has-menu': GObject.ParamSpec.boolean(
@@ -130,12 +132,22 @@ var QuickToggle = GObject.registerClass({
 
 var QuickMenuToggle = GObject.registerClass({
     Properties: {
+        'title': GObject.ParamSpec.string('title', '', '',
+            GObject.ParamFlags.READWRITE,
+            null),
+        'subtitle': GObject.ParamSpec.string('subtitle', '', '',
+            GObject.ParamFlags.READWRITE,
+            null),
+        'icon-name': GObject.ParamSpec.override('icon-name', St.Button),
+        'gicon': GObject.ParamSpec.object('gicon', '', '',
+            GObject.ParamFlags.READWRITE,
+            Gio.Icon),
         'menu-enabled': GObject.ParamSpec.boolean(
             'menu-enabled', '', '',
             GObject.ParamFlags.READWRITE,
             true),
     },
-}, class QuickMenuToggle extends QuickToggle {
+}, class QuickMenuToggle extends QuickSettingsItem {
     _init(params) {
         super._init({
             ...params,
@@ -144,23 +156,59 @@ var QuickMenuToggle = GObject.registerClass({
 
         this.add_style_class_name('quick-menu-toggle');
 
+        this._box = new St.BoxLayout();
+        this.set_child(this._box);
+
+        const contents = new QuickToggle({
+            x_expand: true,
+        });
+        this._box.add_child(contents);
+
+        // Use an effect to lighten the menu button a bit, so we don't
+        // have to define two full sets of button styles (normal/default)
+        // with slightly different colors
+        const menuHighlight = new Clutter.BrightnessContrastEffect();
+        menuHighlight.set_brightness(MENU_BUTTON_BRIGHTNESS);
+
         this._menuButton = new St.Button({
-            child: new St.Icon({
-                style_class: 'quick-toggle-arrow',
-                icon_name: 'go-next-symbolic',
-            }),
+            style_class: 'quick-toggle-arrow icon-button',
+            child: new St.Icon({icon_name: 'go-next-symbolic'}),
+            accessible_name: _('Open menu'),
+            effect: menuHighlight,
+            can_focus: true,
             x_expand: false,
             y_expand: true,
         });
         this._box.add_child(this._menuButton);
 
+        this.bind_property('checked',
+            contents, 'checked',
+            GObject.BindingFlags.SYNC_CREATE);
+        this.bind_property('title',
+            contents, 'title',
+            GObject.BindingFlags.SYNC_CREATE);
+        this.bind_property('subtitle',
+            contents, 'subtitle',
+            GObject.BindingFlags.SYNC_CREATE);
+        this.bind_property('icon-name',
+            contents, 'icon-name',
+            GObject.BindingFlags.SYNC_CREATE);
+        this.bind_property('gicon',
+            contents, 'gicon',
+            GObject.BindingFlags.SYNC_CREATE);
+
         this.bind_property('menu-enabled',
             this._menuButton, 'visible',
             GObject.BindingFlags.SYNC_CREATE);
         this.bind_property('reactive',
             this._menuButton, 'reactive',
             GObject.BindingFlags.SYNC_CREATE);
+        this.bind_property('checked',
+            this._menuButton, 'checked',
+            GObject.BindingFlags.SYNC_CREATE);
         this._menuButton.connect('clicked', () => this.menu.open());
+        this._menuButton.connect('popup-menu', () => this.emit('popup-menu'));
+        contents.connect('popup-menu', () => this.emit('popup-menu'));
         this.connect('popup-menu', () => {
             if (this.menuEnabled)
                 this.menu.open();
diff --git a/po/POTFILES.in b/po/POTFILES.in
index ac35c70ea..5ceecebcb 100644
--- a/po/POTFILES.in
+++ b/po/POTFILES.in
@@ -48,6 +48,7 @@ js/ui/overview.js
 js/ui/padOsd.js
 js/ui/panel.js
 js/ui/popupMenu.js
+js/ui/quickSettings.js
 js/ui/runDialog.js
 js/ui/screenShield.js
 js/ui/screenshot.js