diff --git a/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue b/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue
index e5bee4df9b8498a741677eef0dded1cb1beafe69..61e4aa5a8e6b724a8a5a9faa745ff84675afd43f 100644
--- a/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue
+++ b/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlIcon, GlLoadingIcon, GlToggle, GlTooltipDirective } from '@gitlab/ui';
+import { GlDropdownForm, GlIcon, GlLoadingIcon, GlToggle, GlTooltipDirective } from '@gitlab/ui';
 import createFlash from '~/flash';
 import { IssuableType } from '~/issues/constants';
 import { isLoggedIn } from '~/lib/utils/common_utils';
@@ -22,6 +22,7 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   components: {
+    GlDropdownForm,
     GlIcon,
     GlLoadingIcon,
     GlToggle,
@@ -181,7 +182,7 @@ export default {
 </script>
 
 <template>
-  <div v-if="isMergeRequest" class="gl-new-dropdown-item">
+  <gl-dropdown-form v-if="isMergeRequest" class="gl-new-dropdown-item">
     <div class="gl-px-5 gl-pb-2 gl-pt-1">
       <gl-toggle
         :value="subscribed"
@@ -192,7 +193,7 @@ export default {
         @change="toggleSubscribed"
       />
     </div>
-  </div>
+  </gl-dropdown-form>
   <sidebar-editable-item
     v-else
     ref="editable"
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index 719e4b5aa6de7e4bb789bd666197d1bc03e7c78a..4b7ee575d736f708f14c79dc9b996c7842bd8b4d 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -832,6 +832,8 @@ $tabs-holder-z-index: 250;
 .detail-page-header-actions {
   .gl-toggle {
     @include gl-ml-auto;
+    @include gl-rounded-pill;
+    @include gl-w-9;
   }
 }
 
@@ -844,3 +846,7 @@ $tabs-holder-z-index: 250;
     @include gl-font-weight-normal;
   }
 }
+
+.dropdown-menu li button.gl-toggle:not(.is-checked) {
+  background: $gray-400;
+}
diff --git a/spec/features/merge_request/user_manages_subscription_spec.rb b/spec/features/merge_request/user_manages_subscription_spec.rb
index 9fb85957979d16641361a3551f84ccad29b314de..ec22201b88f334a90d372f343ab402b9870530a6 100644
--- a/spec/features/merge_request/user_manages_subscription_spec.rb
+++ b/spec/features/merge_request/user_manages_subscription_spec.rb
@@ -50,15 +50,11 @@
 
       wait_for_requests
 
-      click_button 'Toggle dropdown'
-
       expect(page).to have_selector('.gl-toggle.is-checked')
       find('[data-testid="notifications-toggle"] .gl-toggle').click
 
       wait_for_requests
 
-      click_button 'Toggle dropdown'
-
       expect(page).to have_selector('.gl-toggle:not(.is-checked)')
     end
   end