diff --git a/app/assets/javascripts/work_items/components/work_item_actions.vue b/app/assets/javascripts/work_items/components/work_item_actions.vue
index eed6eb2b6eefb4955f45327b27987162fae3acaf..791a7b277baa12695037eee2476ba0a43b36d815 100644
--- a/app/assets/javascripts/work_items/components/work_item_actions.vue
+++ b/app/assets/javascripts/work_items/components/work_item_actions.vue
@@ -145,6 +145,11 @@ export default {
       required: false,
       default: false,
     },
+    hideSubscribe: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -337,7 +342,7 @@ export default {
       no-caret
       right
     >
-      <template v-if="$options.isLoggedIn">
+      <template v-if="$options.isLoggedIn && !hideSubscribe">
         <gl-disclosure-dropdown-item
           class="gl-display-flex gl-justify-content-end gl-w-full"
           :data-testid="$options.notificationsToggleFormTestId"
diff --git a/app/assets/javascripts/work_items/components/work_item_detail.vue b/app/assets/javascripts/work_items/components/work_item_detail.vue
index df3e8861cbf715751b2cbfc95f53b559d29241e8..6dbfd436ddf442743950ac1f9e43c4602d1cce49 100644
--- a/app/assets/javascripts/work_items/components/work_item_detail.vue
+++ b/app/assets/javascripts/work_items/components/work_item_detail.vue
@@ -34,6 +34,7 @@ import { findHierarchyWidgetChildren } from '../utils';
 import WorkItemTree from './work_item_links/work_item_tree.vue';
 import WorkItemActions from './work_item_actions.vue';
 import WorkItemTodos from './work_item_todos.vue';
+import WorkItemNotificationsWidget from './work_item_notifications_widget.vue';
 import WorkItemTitle from './work_item_title.vue';
 import WorkItemAttributesWrapper from './work_item_attributes_wrapper.vue';
 import WorkItemCreatedUpdated from './work_item_created_updated.vue';
@@ -59,6 +60,7 @@ export default {
     GlEmptyState,
     WorkItemActions,
     WorkItemTodos,
+    WorkItemNotificationsWidget,
     WorkItemCreatedUpdated,
     WorkItemDescription,
     WorkItemAwardEmoji,
@@ -181,6 +183,9 @@ export default {
     workItemsMvc2Enabled() {
       return this.glFeatures.workItemsMvc2;
     },
+    newTodoAndNotificationsEnabled() {
+      return this.glFeatures.notificationsTodosButtons;
+    },
     parentWorkItem() {
       return this.isWidgetPresent(WIDGET_TYPE_HIERARCHY)?.parent;
     },
@@ -485,9 +490,18 @@ export default {
               :current-user-todos="currentUserTodos"
               @error="updateError = $event"
             />
+            <work-item-notifications-widget
+              v-if="newTodoAndNotificationsEnabled"
+              :full-path="fullPath"
+              :work-item-id="workItem.id"
+              :subscribed-to-notifications="workItemNotificationsSubscribed"
+              :can-update="canUpdate"
+              @error="updateError = $event"
+            />
             <work-item-actions
               :full-path="fullPath"
               :work-item-id="workItem.id"
+              :hide-subscribe="newTodoAndNotificationsEnabled"
               :subscribed-to-notifications="workItemNotificationsSubscribed"
               :work-item-type="workItemType"
               :work-item-type-id="workItemTypeId"
diff --git a/app/assets/javascripts/work_items/components/work_item_notifications_widget.vue b/app/assets/javascripts/work_items/components/work_item_notifications_widget.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f9d31f20a2546d66df6acc926b52e565b8425987
--- /dev/null
+++ b/app/assets/javascripts/work_items/components/work_item_notifications_widget.vue
@@ -0,0 +1,134 @@
+<script>
+import { GlButton, GlIcon, GlTooltipDirective } from '@gitlab/ui';
+
+import * as Sentry from '~/sentry/sentry_browser_wrapper';
+
+import { __, s__ } from '~/locale';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import toast from '~/vue_shared/plugins/global_toast';
+import { isLoggedIn } from '~/lib/utils/common_utils';
+
+import updateWorkItemNotificationsMutation from '../graphql/update_work_item_notifications.mutation.graphql';
+import projectWorkItemTypesQuery from '../graphql/project_work_item_types.query.graphql';
+
+const ICON_ON = 'notifications';
+const ICON_OFF = 'notifications-off';
+
+export default {
+  i18n: {
+    notificationOn: s__('WorkItem|Notifications turned on.'),
+    notificationOff: s__('WorkItem|Notifications turned off.'),
+    labelOn: __('Notifications on'),
+    labelOff: __('Notifications off'),
+  },
+  components: {
+    GlButton,
+    GlIcon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  mixins: [glFeatureFlagMixin()],
+  isLoggedIn: isLoggedIn(),
+  inject: ['isGroup'],
+  props: {
+    fullPath: {
+      type: String,
+      required: true,
+    },
+    workItemId: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    canUpdate: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    subscribedToNotifications: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      isLockDiscussionUpdating: false,
+      emailsDisabled: false,
+    };
+  },
+  apollo: {
+    workItemTypes: {
+      query: projectWorkItemTypesQuery,
+      variables() {
+        return {
+          fullPath: this.fullPath,
+        };
+      },
+      update(data) {
+        return data.workspace?.workItemTypes?.nodes;
+      },
+      skip() {
+        return !this.canUpdate;
+      },
+    },
+  },
+  computed: {
+    notificationTooltip() {
+      return this.subscribedToNotifications
+        ? this.$options.i18n.labelOn
+        : this.$options.i18n.labelOff;
+    },
+    notificationIcon() {
+      return this.subscribedToNotifications ? ICON_ON : ICON_OFF;
+    },
+  },
+  methods: {
+    toggleNotifications(subscribed) {
+      this.$apollo
+        .mutate({
+          mutation: updateWorkItemNotificationsMutation,
+          variables: {
+            input: {
+              id: this.workItemId,
+              subscribed,
+            },
+          },
+        })
+        .then(({ data }) => {
+          const { errors } = data.workItemSubscribe;
+          if (errors?.length) {
+            throw new Error(errors[0]);
+          }
+
+          toast(
+            subscribed ? this.$options.i18n.notificationOn : this.$options.i18n.notificationOff,
+          );
+        })
+        .catch((error) => {
+          this.$emit('error', error.message);
+          Sentry.captureException(error);
+        });
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-button
+    ref="tooltip"
+    v-gl-tooltip.hover
+    category="secondary"
+    data-testid="subscribe-button"
+    :title="notificationTooltip"
+    class="btn-icon"
+    @click="toggleNotifications(!subscribedToNotifications)"
+  >
+    <gl-icon
+      :name="notificationIcon"
+      :size="16"
+      :class="{ 'gl-fill-blue-500': subscribedToNotifications }"
+    />
+  </gl-button>
+</template>
diff --git a/app/assets/javascripts/work_items/components/work_item_todos.vue b/app/assets/javascripts/work_items/components/work_item_todos.vue
index 6251861639830443e8690ff4436f38f9edeea7c8..b2ca163afc02d665727e539ccf6cc0352c788b28 100644
--- a/app/assets/javascripts/work_items/components/work_item_todos.vue
+++ b/app/assets/javascripts/work_items/components/work_item_todos.vue
@@ -175,9 +175,10 @@ export default {
 <template>
   <gl-button
     v-gl-tooltip.hover
-    :loading="isLoading"
+    :disabled="isLoading"
     :title="buttonLabel"
     category="secondary"
+    class="btn-icon"
     :aria-label="buttonLabel"
     @click="onToggle"
   >
diff --git a/app/controllers/groups/work_items_controller.rb b/app/controllers/groups/work_items_controller.rb
index c1482f094daea73f14b83c88c0908bd67c63f546..79ac3c14afcb101a6c4ef785b1ecf087b8a96d4d 100644
--- a/app/controllers/groups/work_items_controller.rb
+++ b/app/controllers/groups/work_items_controller.rb
@@ -5,6 +5,7 @@ class WorkItemsController < Groups::ApplicationController
     feature_category :team_planning
 
     before_action do
+      push_frontend_feature_flag(:notifications_todos_buttons)
       push_force_frontend_feature_flag(:work_items, group&.work_items_feature_flag_enabled?)
       push_force_frontend_feature_flag(:work_items_beta, group&.work_items_beta_feature_flag_enabled?)
       push_force_frontend_feature_flag(:work_items_mvc_2, group&.work_items_mvc_2_feature_flag_enabled?)
diff --git a/app/controllers/projects/work_items_controller.rb b/app/controllers/projects/work_items_controller.rb
index 9b75f5e7b9853bedab7888301751b806f9ec1b5d..c8315060b395133d09961dd3b8c5083f31740d01 100644
--- a/app/controllers/projects/work_items_controller.rb
+++ b/app/controllers/projects/work_items_controller.rb
@@ -8,6 +8,7 @@ class Projects::WorkItemsController < Projects::ApplicationController
 
   before_action :authorize_import_access!, only: [:import_csv, :authorize] # rubocop:disable Rails/LexicallyScopedActionFilter
   before_action do
+    push_frontend_feature_flag(:notifications_todos_buttons)
     push_force_frontend_feature_flag(:work_items, project&.work_items_feature_flag_enabled?)
     push_force_frontend_feature_flag(:work_items_beta, project&.work_items_beta_feature_flag_enabled?)
     push_force_frontend_feature_flag(:work_items_mvc_2, project&.work_items_mvc_2_feature_flag_enabled?)
diff --git a/spec/features/projects/work_items/work_item_spec.rb b/spec/features/projects/work_items/work_item_spec.rb
index be286373bc5b03101e61146996131b50246e0b69..8c0e00e5182ec66c196dcbdfb869e96034065f32 100644
--- a/spec/features/projects/work_items/work_item_spec.rb
+++ b/spec/features/projects/work_items/work_item_spec.rb
@@ -3,6 +3,10 @@
 require 'spec_helper'
 
 RSpec.describe 'Work item', :js, feature_category: :team_planning do
+  before do
+    stub_feature_flags(notifications_todos_buttons: false)
+  end
+
   include ListboxHelpers
 
   let_it_be_with_reload(:user) { create(:user) }
@@ -20,6 +24,7 @@
 
   context 'for signed in user' do
     before do
+      stub_feature_flags(notifications_todos_buttons: false)
       stub_const("AutocompleteSources::ExpiresIn::AUTOCOMPLETE_EXPIRES_IN", 0)
       project.add_developer(user)
       sign_in(user)
@@ -73,6 +78,7 @@
     context 'when work_items_beta is enabled' do
       before do
         stub_feature_flags(work_items_beta: true)
+        stub_feature_flags(notifications_todos_buttons: false)
 
         page.refresh
         wait_for_all_requests
diff --git a/spec/frontend/work_items/components/work_item_actions_spec.js b/spec/frontend/work_items/components/work_item_actions_spec.js
index f16960f24145072037c8cac5eb352507dafc6703..4888f68d8e9025dda182055d353457e965ec59a1 100644
--- a/spec/frontend/work_items/components/work_item_actions_spec.js
+++ b/spec/frontend/work_items/components/work_item_actions_spec.js
@@ -115,6 +115,7 @@ describe('WorkItemActions component', () => {
     workItemType = 'Task',
     workItemReference = mockWorkItemReference,
     workItemCreateNoteEmail = mockWorkItemCreateNoteEmail,
+    hideSubscribe = undefined,
   } = {}) => {
     wrapper = shallowMountExtended(WorkItemActions, {
       isLoggedIn: isLoggedIn(),
@@ -137,6 +138,7 @@ describe('WorkItemActions component', () => {
         workItemType,
         workItemReference,
         workItemCreateNoteEmail,
+        hideSubscribe,
       },
       provide: {
         isGroup: false,
@@ -330,8 +332,14 @@ describe('WorkItemActions component', () => {
       isLoggedIn.mockReturnValue(true);
     });
 
-    it('renders toggle button', () => {
-      expect(findNotificationsToggle().exists()).toBe(true);
+    it.each`
+      scenario                                     | hideSubscribe
+      ${'does not show notification subscription'} | ${true}
+      ${'shows notification subscription'}         | ${false}
+      ${'shows notification subscription'}         | ${undefined}
+    `('$scenario when hideSubscribe is set to $hideSubscribe', ({ hideSubscribe }) => {
+      createComponent({ hideSubscribe });
+      expect(findNotificationsToggle().exists()).toBe(!hideSubscribe);
     });
 
     it.each`
diff --git a/spec/frontend/work_items/components/work_item_notifications_widget_spec.js b/spec/frontend/work_items/components/work_item_notifications_widget_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..56c2be0d8008dc7e9ce4a11b27144fdfcadab0b1
--- /dev/null
+++ b/spec/frontend/work_items/components/work_item_notifications_widget_spec.js
@@ -0,0 +1,145 @@
+import { GlButton, GlIcon } from '@gitlab/ui';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+
+import { isLoggedIn } from '~/lib/utils/common_utils';
+import toast from '~/vue_shared/plugins/global_toast';
+import WorkItemNotificationsWidget from '~/work_items/components/work_item_notifications_widget.vue';
+import updateWorkItemNotificationsMutation from '~/work_items/graphql/update_work_item_notifications.mutation.graphql';
+import projectWorkItemTypesQuery from '~/work_items/graphql/project_work_item_types.query.graphql';
+
+import {
+  projectWorkItemTypesQueryResponse,
+  updateWorkItemNotificationsMutationResponse,
+} from '../mock_data';
+
+jest.mock('~/lib/utils/common_utils');
+jest.mock('~/vue_shared/plugins/global_toast');
+
+describe('WorkItemActions component', () => {
+  Vue.use(VueApollo);
+
+  let wrapper;
+  const mockWorkItemReference = 'gitlab-org/gitlab-test#1';
+
+  const findNotificationsButton = () => wrapper.findComponent(GlButton);
+
+  const $toast = {
+    show: jest.fn(),
+    hide: jest.fn(),
+  };
+
+  const typesQuerySuccessHandler = jest.fn().mockResolvedValue(projectWorkItemTypesQueryResponse);
+  const toggleNotificationsOffHandler = jest
+    .fn()
+    .mockResolvedValue(updateWorkItemNotificationsMutationResponse(false));
+  const toggleNotificationsOnHandler = jest
+    .fn()
+    .mockResolvedValue(updateWorkItemNotificationsMutationResponse(true));
+  const toggleNotificationsFailureHandler = jest
+    .fn()
+    .mockRejectedValue(new Error('Failed to subscribe'));
+
+  const createComponent = ({
+    canUpdate = true,
+    subscribedToNotifications = false,
+    notificationsMutationHandler,
+    workItemType = 'Task',
+    workItemReference = mockWorkItemReference,
+  } = {}) => {
+    wrapper = shallowMountExtended(WorkItemNotificationsWidget, {
+      isLoggedIn: isLoggedIn(),
+      apolloProvider: createMockApollo([
+        [projectWorkItemTypesQuery, typesQuerySuccessHandler],
+        [updateWorkItemNotificationsMutation, notificationsMutationHandler],
+      ]),
+      propsData: {
+        fullPath: 'gitlab-org/gitlab-test',
+        workItemId: 'gid://gitlab/WorkItem/1',
+        canUpdate,
+        subscribedToNotifications,
+        workItemType,
+        workItemReference,
+      },
+      provide: {
+        isGroup: false,
+        glFeatures: { workItemsBeta: true, workItemsMvc2: true },
+      },
+      mocks: {
+        $toast,
+      },
+      stubs: {},
+    });
+  };
+
+  beforeEach(() => {
+    isLoggedIn.mockReturnValue(true);
+  });
+
+  it('renders button', () => {
+    createComponent();
+
+    expect(findNotificationsButton().exists()).toBe(true);
+  });
+
+  describe('notifications action', () => {
+    beforeEach(() => {
+      createComponent();
+      isLoggedIn.mockReturnValue(true);
+    });
+
+    it.each`
+      scenario                   | subscribedToNotifications | notificationsMutationHandler     | subscribed | toastMessage
+      ${'notifications are off'} | ${false}                  | ${toggleNotificationsOnHandler}  | ${true}    | ${'Notifications turned on.'}
+      ${'notifications are on'}  | ${true}                   | ${toggleNotificationsOffHandler} | ${false}   | ${'Notifications turned off.'}
+    `(
+      'calls mutation and displays toast when notification button is clicked while $scenario',
+      async ({
+        subscribedToNotifications,
+        notificationsMutationHandler,
+        subscribed,
+        toastMessage,
+      }) => {
+        createComponent({
+          notificationsMutationHandler,
+          subscribedToNotifications,
+        });
+
+        findNotificationsButton().vm.$emit('click');
+        await waitForPromises();
+
+        expect(notificationsMutationHandler).toHaveBeenCalledWith({
+          input: {
+            id: 'gid://gitlab/WorkItem/1',
+            subscribed,
+          },
+        });
+        expect(toast).toHaveBeenCalledWith(toastMessage);
+      },
+    );
+
+    it.each`
+      scenario                   | subscribedToNotifications | icon
+      ${'notifications are off'} | ${false}                  | ${'notifications-off'}
+      ${'notifications are on'}  | ${true}                   | ${'notifications'}
+    `('uses the correct icon when $scenario', ({ subscribedToNotifications, icon }) => {
+      createComponent({ subscribedToNotifications });
+      expect(findNotificationsButton().findComponent(GlIcon).props('name')).toBe(icon);
+    });
+
+    it('emits error when the update notification mutation fails', async () => {
+      createComponent({
+        notificationsMutationHandler: toggleNotificationsFailureHandler,
+      });
+
+      findNotificationsButton().vm.$emit('click');
+      await waitForPromises();
+
+      expect(wrapper.emitted('error')).toEqual([['Failed to subscribe']]);
+    });
+  });
+});
diff --git a/spec/support/shared_examples/features/work_items_shared_examples.rb b/spec/support/shared_examples/features/work_items_shared_examples.rb
index 0989866ee6725203e73303e037925090ca0b72e2..e218c2774b0f68b74a1634251f7817a52ad13ec9 100644
--- a/spec/support/shared_examples/features/work_items_shared_examples.rb
+++ b/spec/support/shared_examples/features/work_items_shared_examples.rb
@@ -3,6 +3,7 @@
 RSpec.shared_context 'with work_items_beta' do |flag|
   before do
     stub_feature_flags(work_items_beta: flag)
+    stub_feature_flags(notifications_todos_buttons: false)
 
     page.refresh
     wait_for_all_requests
@@ -486,6 +487,7 @@ def click_reply_and_enter_slash
 
         before do
           project.add_developer(other_user)
+          stub_feature_flags(notifications_todos_buttons: false)
         end
 
         it 'shows conflict message when description changes', :aggregate_failures do
@@ -624,14 +626,21 @@ def click_reply_and_enter_slash
 
 RSpec.shared_examples 'work items notifications' do
   it 'displays toast when notification is toggled' do
-    click_button _('More actions'), match: :first
-
-    within_testid('notifications-toggle-form') do
-      expect(page).not_to have_button(class: 'gl-toggle is-checked')
+    if Feature.enabled?(:notifications_todos_buttons)
+      def notification_button
+        find('button[data-testid="subscribe-button"]')
+      end
+      notification_button.click
+      expect(page).to have_selector('svg[data-testid="notifications"]')
+    else
+      click_button _('More actions'), match: :first
+      within_testid('notifications-toggle-form') do
+        expect(page).not_to have_button(class: 'gl-toggle is-checked')
 
-      click_button(class: 'gl-toggle')
+        click_button(class: 'gl-toggle')
 
-      expect(page).to have_button(class: 'gl-toggle is-checked')
+        expect(page).to have_button(class: 'gl-toggle is-checked')
+      end
     end
 
     expect(page).to have_css('.gl-toast', text: _('Notifications turned on.'))