diff --git a/e2e/tests/functional/plugins/notebook/notebookWithCouchDB.e2e.spec.js b/e2e/tests/functional/plugins/notebook/notebookWithCouchDB.e2e.spec.js
index fa84fc6562..9a37ba487e 100644
--- a/e2e/tests/functional/plugins/notebook/notebookWithCouchDB.e2e.spec.js
+++ b/e2e/tests/functional/plugins/notebook/notebookWithCouchDB.e2e.spec.js
@@ -131,13 +131,13 @@ test.describe('Notebook Tests with CouchDB @couchdb', () => {
         // This happens for 3 tags so 12 requests
         addingNotebookElementsRequests = [];
         await page.hover('[aria-label="Tag"]:has-text("Driving")');
-        await page.locator('[aria-label="Tag"]:has-text("Driving") ~ .c-completed-tag-deletion').click();
+        await page.locator('[aria-label="Remove tag Driving"]').click();
         await page.waitForSelector('[aria-label="Tag"]:has-text("Driving")', {state: 'hidden'});
         await page.hover('[aria-label="Tag"]:has-text("Drilling")');
-        await page.locator('[aria-label="Tag"]:has-text("Drilling") ~ .c-completed-tag-deletion').click();
+        await page.locator('[aria-label="Remove tag Drilling"]').click();
         await page.waitForSelector('[aria-label="Tag"]:has-text("Drilling")', {state: 'hidden'});
         page.hover('[aria-label="Tag"]:has-text("Science")');
-        await page.locator('[aria-label="Tag"]:has-text("Science") ~ .c-completed-tag-deletion').click();
+        await page.locator('[aria-label="Remove tag Science"]').click();
         await page.waitForSelector('[aria-label="Tag"]:has-text("Science")', {state: 'hidden'});
         page.waitForLoadState('networkidle');
         expect(filterNonFetchRequests(addingNotebookElementsRequests).length).toBeLessThanOrEqual(12);
diff --git a/e2e/tests/functional/plugins/notebook/tags.e2e.spec.js b/e2e/tests/functional/plugins/notebook/tags.e2e.spec.js
index dc003185e6..b04dfa7f34 100644
--- a/e2e/tests/functional/plugins/notebook/tags.e2e.spec.js
+++ b/e2e/tests/functional/plugins/notebook/tags.e2e.spec.js
@@ -145,7 +145,7 @@ test.describe('Tagging in Notebooks @addInit', () => {
         await createNotebookEntryAndTags(page);
         // Delete Driving
         await page.hover('[aria-label="Tag"]:has-text("Driving")');
-        await page.locator('[aria-label="Tag"]:has-text("Driving") ~ .c-completed-tag-deletion').click();
+        await page.locator('[aria-label="Remove tag Driving"]').click();
 
         await expect(page.locator('[aria-label="Tags Inspector"]')).toContainText("Science");
         await expect(page.locator('[aria-label="Tags Inspector"]')).not.toContainText("Driving");
diff --git a/src/ui/components/tags/TagEditor.vue b/src/ui/components/tags/TagEditor.vue
index 996d7b9018..4735560e82 100644
--- a/src/ui/components/tags/TagEditor.vue
+++ b/src/ui/components/tags/TagEditor.vue
@@ -21,7 +21,7 @@
  *****************************************************************************/
 
 <template>
-<div class="c-tag-applier has-tag-applier">
+<div class="c-tag-applier">
     <TagSelection
         v-for="(addedTag, index) in addedTags"
         :key="index"
diff --git a/src/ui/components/tags/TagSelection.vue b/src/ui/components/tags/TagSelection.vue
index bbb9c8b81a..882111f845 100644
--- a/src/ui/components/tags/TagSelection.vue
+++ b/src/ui/components/tags/TagSelection.vue
@@ -21,7 +21,7 @@
  *****************************************************************************/
 
 <template>
-<div class="w-tag-wrapper">
+<div class="w-tag-wrapper has-tag-applier">
     <template v-if="newTag">
         <AutoCompleteField
             v-if="newTag"
@@ -40,15 +40,17 @@
             :class="{'c-tag-edit': !readOnly}"
             :style="{ background: selectedBackgroundColor, color: selectedForegroundColor }"
         >
+            <button
+                v-show="!readOnly"
+                class="c-completed-tag-deletion c-tag__remove-btn icon-x-in-circle"
+                :style="{ textShadow: selectedBackgroundColor + ' 0 0 4px' }"
+                :aria-label="`Remove tag ${selectedTagLabel}`"
+                @click="removeTag"
+            ></button>
             <div
                 class="c-tag__label"
                 aria-label="Tag"
             >{{ selectedTagLabel }} </div>
-            <button
-                v-show="!readOnly"
-                class="c-completed-tag-deletion c-tag__remove-btn icon-x-in-circle"
-                @click="removeTag"
-            ></button>
         </div>
     </template>
 </div>
diff --git a/src/ui/components/tags/tags.scss b/src/ui/components/tags/tags.scss
index 23157937e3..7afb7a326a 100644
--- a/src/ui/components/tags/tags.scss
+++ b/src/ui/components/tags/tags.scss
@@ -93,17 +93,30 @@
   // Apply this class to all components that should trigger tag removal btn on hover
    &:hover {
      .c-tag {
-       padding-right: 17px !important;
+       @include userSelectNone();
        transition: $transOut;
      }
-
+     .c-tag__label {
+        opacity: 0.7;
+    }
      .c-tag__remove-btn {
-       //display: block;
-       //margin-left: $interiorMarginSm;
-       width: 1em;
+       width: 1.3em;
        opacity: 0.8;
+       padding: 2px !important;
        transition: $transOut;
-       //transition-delay: 250ms;
+       right: 5%;
+       text-align: center;
+       z-index: 2;
+
+       &:hover {
+         opacity: 1;
+
+         & ~ * {
+           // This sibling selector further dims the label
+           // to make the remove button stand out
+           opacity: 0.4
+         }
+       }
      }
    }
  }