diff --git a/app/assets/javascripts/sidebar/components/attention_requested_toggle.vue b/app/assets/javascripts/sidebar/components/attention_requested_toggle.vue
index cd1aae155d29db5d80d653fd91ea7269c074d860..031de6694890f446eced5cd15b46d805cd12324e 100644
--- a/app/assets/javascripts/sidebar/components/attention_requested_toggle.vue
+++ b/app/assets/javascripts/sidebar/components/attention_requested_toggle.vue
@@ -47,6 +47,23 @@ export default {
 
       return this.$options.i18n.noAttentionRequestedNoPermission;
     },
+    request() {
+      const state = {
+        variant: 'default',
+        icon: 'attention',
+        direction: 'add',
+      };
+
+      if (this.user.attention_requested) {
+        Object.assign(state, {
+          variant: 'warning',
+          icon: 'attention-solid',
+          direction: 'remove',
+        });
+      }
+
+      return state;
+    },
   },
   methods: {
     toggleAttentionRequired() {
@@ -57,6 +74,7 @@ export default {
       this.$emit('toggle-attention-requested', {
         user: this.user,
         callback: this.toggleAttentionRequiredComplete,
+        direction: this.request.direction,
       });
     },
     toggleAttentionRequiredComplete() {
@@ -74,8 +92,8 @@ export default {
     >
       <gl-button
         :loading="loading"
-        :variant="user.attention_requested ? 'warning' : 'default'"
-        :icon="user.attention_requested ? 'attention-solid' : 'attention'"
+        :variant="request.variant"
+        :icon="request.icon"
         :aria-label="tooltipTitle"
         :class="{ 'gl-pointer-events-none': !user.can_update_merge_request }"
         size="small"
diff --git a/app/assets/javascripts/sidebar/queries/remove_attention_request.mutation.graphql b/app/assets/javascripts/sidebar/queries/remove_attention_request.mutation.graphql
new file mode 100644
index 0000000000000000000000000000000000000000..1a7a9629b07a48b69c8ab51cca4eccf2f726a263
--- /dev/null
+++ b/app/assets/javascripts/sidebar/queries/remove_attention_request.mutation.graphql
@@ -0,0 +1,7 @@
+mutation mergeRequestRemoveAttentionRequest($projectPath: ID!, $iid: String!, $userId: ID!) {
+  mergeRequestRemoveAttentionRequest(
+    input: { projectPath: $projectPath, iid: $iid, userId: $userId }
+  ) {
+    errors
+  }
+}
diff --git a/app/assets/javascripts/sidebar/queries/request_attention.mutation.graphql b/app/assets/javascripts/sidebar/queries/request_attention.mutation.graphql
new file mode 100644
index 0000000000000000000000000000000000000000..99f9beea17b071f4b9be7a5a372253b8b16bbda6
--- /dev/null
+++ b/app/assets/javascripts/sidebar/queries/request_attention.mutation.graphql
@@ -0,0 +1,5 @@
+mutation mergeRequestRequestAttention($projectPath: ID!, $iid: String!, $userId: ID!) {
+  mergeRequestRequestAttention(input: { projectPath: $projectPath, iid: $iid, userId: $userId }) {
+    errors
+  }
+}
diff --git a/app/assets/javascripts/sidebar/queries/toggle_attention_requested.mutation.graphql b/app/assets/javascripts/sidebar/queries/toggle_attention_requested.mutation.graphql
deleted file mode 100644
index 495d272b698288fbcbe655d6b80208180e759369..0000000000000000000000000000000000000000
--- a/app/assets/javascripts/sidebar/queries/toggle_attention_requested.mutation.graphql
+++ /dev/null
@@ -1,7 +0,0 @@
-mutation mergeRequestToggleAttentionRequested($projectPath: ID!, $iid: String!, $userId: UserID!) {
-  mergeRequestToggleAttentionRequested(
-    input: { projectPath: $projectPath, iid: $iid, userId: $userId }
-  ) {
-    errors
-  }
-}
diff --git a/app/assets/javascripts/sidebar/services/sidebar_service.js b/app/assets/javascripts/sidebar/services/sidebar_service.js
index 90d8f2098bb325f46258ce046a363aef73674da9..ea1702035768cc876abcc4cacc69aabfae5e3337 100644
--- a/app/assets/javascripts/sidebar/services/sidebar_service.js
+++ b/app/assets/javascripts/sidebar/services/sidebar_service.js
@@ -5,7 +5,8 @@ import createGqClient, { fetchPolicies } from '~/lib/graphql';
 import axios from '~/lib/utils/axios_utils';
 import reviewerRereviewMutation from '../queries/reviewer_rereview.mutation.graphql';
 import sidebarDetailsMRQuery from '../queries/sidebar_details_mr.query.graphql';
-import toggleAttentionRequestedMutation from '../queries/toggle_attention_requested.mutation.graphql';
+import requestAttentionMutation from '../queries/request_attention.mutation.graphql';
+import removeAttentionRequestMutation from '../queries/remove_attention_request.mutation.graphql';
 
 const queries = {
   merge_request: sidebarDetailsMRQuery,
@@ -92,9 +93,19 @@ export default class SidebarService {
     });
   }
 
-  toggleAttentionRequested(userId) {
+  requestAttention(userId) {
     return gqClient.mutate({
-      mutation: toggleAttentionRequestedMutation,
+      mutation: requestAttentionMutation,
+      variables: {
+        userId: convertToGraphQLId(TYPE_USER, `${userId}`),
+        projectPath: this.fullPath,
+        iid: this.iid.toString(),
+      },
+    });
+  }
+  removeAttentionRequest(userId) {
+    return gqClient.mutate({
+      mutation: removeAttentionRequestMutation,
       variables: {
         userId: convertToGraphQLId(TYPE_USER, `${userId}`),
         projectPath: this.fullPath,
diff --git a/app/assets/javascripts/sidebar/sidebar_mediator.js b/app/assets/javascripts/sidebar/sidebar_mediator.js
index 83fb8f31dfbf480bc6cd013363676c0d524d15c7..75a1d00fe19fcf6efe6dd3d4fe3fa57de74e285e 100644
--- a/app/assets/javascripts/sidebar/sidebar_mediator.js
+++ b/app/assets/javascripts/sidebar/sidebar_mediator.js
@@ -98,14 +98,19 @@ export default class SidebarMediator {
     }
   }
 
-  async toggleAttentionRequested(type, { user, callback }) {
+  async toggleAttentionRequested(type, { user, callback, direction }) {
+    const mutations = {
+      add: (id) => this.service.requestAttention(id),
+      remove: (id) => this.service.removeAttentionRequest(id),
+    };
+
     try {
       const isReviewer = type === 'reviewer';
       const reviewerOrAssignee = isReviewer
         ? this.store.findReviewer(user)
         : this.store.findAssignee(user);
 
-      await this.service.toggleAttentionRequested(user.id);
+      await mutations[direction]?.(user.id);
 
       if (reviewerOrAssignee.attention_requested) {
         toast(
@@ -138,7 +143,7 @@ export default class SidebarMediator {
         captureError: true,
         actionConfig: {
           title: __('Try again'),
-          clickHandler: () => this.toggleAttentionRequired(type, { user, callback }),
+          clickHandler: () => this.toggleAttentionRequired(type, { user, callback, direction }),
         },
       });
     }
diff --git a/spec/frontend/sidebar/components/attention_requested_toggle_spec.js b/spec/frontend/sidebar/components/attention_requested_toggle_spec.js
index e3eabc6a0f6ab86070e1cdb94c810baf1fbccd86..959fa799eb737ce83e8882eef2c7755741ea3ca8 100644
--- a/spec/frontend/sidebar/components/attention_requested_toggle_spec.js
+++ b/spec/frontend/sidebar/components/attention_requested_toggle_spec.js
@@ -68,6 +68,7 @@ describe('Attention require toggle', () => {
       {
         user: { attention_requested: true, can_update_merge_request: true },
         callback: expect.anything(),
+        direction: 'remove',
       },
     ]);
   });
diff --git a/spec/frontend/sidebar/sidebar_mediator_spec.js b/spec/frontend/sidebar/sidebar_mediator_spec.js
index c472a98bf0b11cbe4440bd595b41584be32db3de..82fb10ab1d27bca180b487c7d292e5cc6cff60a8 100644
--- a/spec/frontend/sidebar/sidebar_mediator_spec.js
+++ b/spec/frontend/sidebar/sidebar_mediator_spec.js
@@ -1,4 +1,5 @@
 import MockAdapter from 'axios-mock-adapter';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import * as urlUtility from '~/lib/utils/url_utility';
 import SidebarService, { gqClient } from '~/sidebar/services/sidebar_service';
@@ -8,6 +9,7 @@ import toast from '~/vue_shared/plugins/global_toast';
 import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests';
 import Mock from './mock_data';
 
+jest.mock('~/flash');
 jest.mock('~/vue_shared/plugins/global_toast');
 jest.mock('~/commons/nav/user_merge_requests');
 
@@ -122,25 +124,39 @@ describe('Sidebar mediator', () => {
   });
 
   describe('toggleAttentionRequested', () => {
-    let attentionRequiredService;
+    let requestAttentionMock;
+    let removeAttentionRequestMock;
 
     beforeEach(() => {
-      attentionRequiredService = jest
-        .spyOn(mediator.service, 'toggleAttentionRequested')
+      requestAttentionMock = jest.spyOn(mediator.service, 'requestAttention').mockResolvedValue();
+      removeAttentionRequestMock = jest
+        .spyOn(mediator.service, 'removeAttentionRequest')
         .mockResolvedValue();
     });
 
-    it('calls attentionRequired service method', async () => {
-      mediator.store.reviewers = [{ id: 1, attention_requested: false, username: 'root' }];
+    it.each`
+      attentionIsCurrentlyRequested | serviceMethod
+      ${true}                       | ${'remove'}
+      ${false}                      | ${'add'}
+    `(
+      "calls the $serviceMethod service method when the user's attention request is set to $attentionIsCurrentlyRequested",
+      async ({ serviceMethod }) => {
+        const methods = {
+          add: requestAttentionMock,
+          remove: removeAttentionRequestMock,
+        };
+        mediator.store.reviewers = [{ id: 1, attention_requested: false, username: 'root' }];
 
-      await mediator.toggleAttentionRequested('reviewer', {
-        user: { id: 1, username: 'root' },
-        callback: jest.fn(),
-      });
+        await mediator.toggleAttentionRequested('reviewer', {
+          user: { id: 1, username: 'root' },
+          callback: jest.fn(),
+          direction: serviceMethod,
+        });
 
-      expect(attentionRequiredService).toHaveBeenCalledWith(1);
-      expect(refreshUserMergeRequestCounts).toHaveBeenCalled();
-    });
+        expect(methods[serviceMethod]).toHaveBeenCalledWith(1);
+        expect(refreshUserMergeRequestCounts).toHaveBeenCalled();
+      },
+    );
 
     it.each`
       type          | method
@@ -172,5 +188,27 @@ describe('Sidebar mediator', () => {
         expect(toast).toHaveBeenCalledWith(toastMessage);
       },
     );
+
+    describe('errors', () => {
+      beforeEach(() => {
+        jest
+          .spyOn(mediator.service, 'removeAttentionRequest')
+          .mockRejectedValueOnce(new Error('Something went wrong'));
+      });
+
+      it('shows an error message', async () => {
+        await mediator.toggleAttentionRequested('reviewer', {
+          user: { id: 1, username: 'root' },
+          callback: jest.fn(),
+          direction: 'remove',
+        });
+
+        expect(createFlash).toHaveBeenCalledWith(
+          expect.objectContaining({
+            message: 'Updating the attention request for root failed.',
+          }),
+        );
+      });
+    });
   });
 });