diff --git a/app/assets/javascripts/sidebar/components/assignees/assignees.vue b/app/assets/javascripts/sidebar/components/assignees/assignees.vue
index 5e1eecc463977b1dbb44bbbcae9c3f9494640810..92b72f8932060e6cf93f747653203a437d94deac 100644
--- a/app/assets/javascripts/sidebar/components/assignees/assignees.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/assignees.vue
@@ -56,8 +56,13 @@ export default {
         {{ __('None') }}
         <template v-if="editable">
           -
-          <gl-button variant="link" data-testid="assign-yourself" @click="assignSelf">
-            <span class="gl-text-subtle hover:gl-text-blue-800">{{ __('assign yourself') }}</span>
+          <gl-button
+            class="!gl-text-inherit hover:!gl-text-link"
+            variant="link"
+            data-testid="assign-yourself"
+            @click="assignSelf"
+          >
+            {{ __('assign yourself') }}
           </gl-button>
         </template>
       </span>
diff --git a/app/assets/javascripts/sidebar/components/assignees/issuable_assignees.vue b/app/assets/javascripts/sidebar/components/assignees/issuable_assignees.vue
index 0b97c3fc99c139e7e194b3bf80d274996e01d98a..cdfe3ddc10a872eba32eceffaab1375309d9cbe2 100644
--- a/app/assets/javascripts/sidebar/components/assignees/issuable_assignees.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/issuable_assignees.vue
@@ -52,12 +52,11 @@ export default {
         <span class="gl-ml-2">-</span>
         <gl-button
           data-testid="assign-yourself"
-          category="tertiary"
+          class="gl-ml-2 !gl-text-inherit hover:!gl-text-link"
           variant="link"
-          class="gl-ml-2"
           @click="$emit('assign-self')"
         >
-          <span class="gl-text-subtle hover:gl-text-blue-800">{{ __('assign yourself') }}</span>
+          {{ __('assign yourself') }}
         </gl-button>
       </template>
     </div>
diff --git a/app/assets/javascripts/sidebar/components/assignees/sidebar_invite_members.vue b/app/assets/javascripts/sidebar/components/assignees/sidebar_invite_members.vue
index 361392f1de5c515201f8d599f67624881a78f216..40263243e8a9eee8e7c68d7c7d8ad181b7daae10 100644
--- a/app/assets/javascripts/sidebar/components/assignees/sidebar_invite_members.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/sidebar_invite_members.vue
@@ -26,6 +26,6 @@ export default {
     trigger-element="anchor"
     :display-text="$options.displayText"
     :trigger-source="triggerSource"
-    classes="gl-block gl-pl-0 hover:gl-no-underline hover:!gl-text-blue-800"
+    classes="gl-block gl-pl-0 hover:gl-no-underline hover:!gl-text-link"
   />
 </template>
diff --git a/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue b/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue
index 53a9a063dc11e7cbeb9316290a92577d4ffe385d..c451da83ae0e8c436f4e3dbc86711e1b6710b4e5 100644
--- a/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue
+++ b/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue
@@ -53,7 +53,7 @@ export default {
     :data-username="user.username"
     :data-cannot-merge="cannotMerge"
     data-placement="left"
-    class="js-user-link gl-inline-block !gl-text-inherit hover:!gl-text-blue-800"
+    class="js-user-link gl-inline-block !gl-text-inherit hover:!gl-text-link"
   >
     <!-- use gl-flex so that slot can be appropriately styled -->
     <span class="gl-flex">
diff --git a/app/assets/javascripts/sidebar/components/reviewers/reviewers.vue b/app/assets/javascripts/sidebar/components/reviewers/reviewers.vue
index 974de02e3e8c1ec7269ed064850fc294b9b083dc..faf7ab3f84d0aa061dccaf970db31c439c3154a1 100644
--- a/app/assets/javascripts/sidebar/components/reviewers/reviewers.vue
+++ b/app/assets/javascripts/sidebar/components/reviewers/reviewers.vue
@@ -70,13 +70,12 @@ export default {
         <template v-if="editable">
           -
           <gl-button
-            category="tertiary"
+            class="gl-ml-2 !gl-text-inherit hover:!gl-text-link"
             variant="link"
-            class="gl-ml-2"
             data-testid="assign-yourself"
             @click="assignSelf"
           >
-            <span class="gl-text-subtle hover:gl-text-blue-800">{{ __('assign yourself') }}</span>
+            {{ __('assign yourself') }}
           </gl-button>
         </template>
       </span>
diff --git a/app/assets/javascripts/work_items/components/work_item_assignees.vue b/app/assets/javascripts/work_items/components/work_item_assignees.vue
index 3f7683e03055b045ab53c7ec7bdf20fc7545f6d1..b392cb003d32426f99502c3a1fa90095b28ebbd8 100644
--- a/app/assets/javascripts/work_items/components/work_item_assignees.vue
+++ b/app/assets/javascripts/work_items/components/work_item_assignees.vue
@@ -362,11 +362,14 @@ export default {
         <span>{{ __('None') }}</span>
         <template v-if="currentUser && canUpdate">
           <span>-</span>
-          <gl-button variant="link" data-testid="assign-self" @click.stop="assignToCurrentUser"
-            ><span class="gl-text-subtle hover:gl-text-blue-800">{{
-              __('assign yourself')
-            }}</span></gl-button
+          <gl-button
+            class="!gl-text-inherit hover:!gl-text-link"
+            variant="link"
+            data-testid="assign-self"
+            @click.stop="assignToCurrentUser"
           >
+            {{ __('assign yourself') }}
+          </gl-button>
         </template>
       </div>
     </template>
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 3901f0771382a5dce98177dada6a6fd50923c8fc..720bba87ab21125701d47c0c36f91315afec568b 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -340,7 +340,7 @@
     color: inherit;
 
     &:hover {
-      color: $blue-800;
+      @apply gl-text-link;
     }
   }
 
diff --git a/spec/frontend/sidebar/components/assignees/issuable_assignees_spec.js b/spec/frontend/sidebar/components/assignees/issuable_assignees_spec.js
index 82145b82e21f7d3c5908a382bd536c89f1d96bc9..35d783b7051764ea8dcb4c883fda6bc2cf48be59 100644
--- a/spec/frontend/sidebar/components/assignees/issuable_assignees_spec.js
+++ b/spec/frontend/sidebar/components/assignees/issuable_assignees_spec.js
@@ -31,7 +31,7 @@ describe('IssuableAssignees', () => {
       'renders "$message" when signedIn is $signedIn and editable is $editable',
       ({ signedIn, editable, message }) => {
         createComponent({ signedIn, editable });
-        expect(findEmptyAssignee().text()).toBe(message);
+        expect(findEmptyAssignee().text().replace(/\s\s+/g, ' ')).toBe(message);
       },
     );
   });