diff --git a/app/assets/javascripts/content_editor/components/bubble_menus/link_bubble_menu.vue b/app/assets/javascripts/content_editor/components/bubble_menus/link_bubble_menu.vue
index 01fcd6f3e07df8fb242bc8616797b3b1b63e2b73..7a1567b9249452f161344c1b08995365bafe0472 100644
--- a/app/assets/javascripts/content_editor/components/bubble_menus/link_bubble_menu.vue
+++ b/app/assets/javascripts/content_editor/components/bubble_menus/link_bubble_menu.vue
@@ -208,7 +208,7 @@ export default {
   >
     <bubble-menu
       data-testid="link-bubble-menu"
-      class="gl-rounded-base gl-bg-white gl-shadow"
+      class="gl-rounded-base gl-bg-dropdown gl-shadow"
       plugin-key="bubbleMenuLink"
       :should-show="shouldShow"
       :tippy-options="$options.tippyOptions"
diff --git a/app/assets/javascripts/content_editor/components/toolbar_button.vue b/app/assets/javascripts/content_editor/components/toolbar_button.vue
index 1beae6b23512b6548d92d86c71e74b03e71aad3a..f581c07a837556cf8d1a77c1825c90ca69f2e26c 100644
--- a/app/assets/javascripts/content_editor/components/toolbar_button.vue
+++ b/app/assets/javascripts/content_editor/components/toolbar_button.vue
@@ -83,7 +83,7 @@ export default {
       :variant="variant"
       :category="category"
       :size="size"
-      :class="{ '!gl-bg-gray-100': showActiveState && isActive }"
+      :selected="showActiveState && isActive"
       :aria-label="label"
       :title="label"
       :icon="iconName"
diff --git a/app/assets/javascripts/content_editor/components/toolbar_table_button.vue b/app/assets/javascripts/content_editor/components/toolbar_table_button.vue
index 3d7e981088a5f90a1efd25d401bbde5e00c90396..7f54379548fea837f473ce069e774b86cea505c0 100644
--- a/app/assets/javascripts/content_editor/components/toolbar_table_button.vue
+++ b/app/assets/javascripts/content_editor/components/toolbar_table_button.vue
@@ -101,7 +101,7 @@ export default {
           <div v-for="c of list(maxCols)" :key="c" role="gridcell">
             <gl-button
               :ref="`table-${r}-${c}`"
-              :class="{ 'active !gl-bg-blue-50': r <= rows && c <= cols }"
+              :class="{ active: r <= rows && c <= cols }"
               :aria-label="getButtonLabel(r, c)"
               class="table-creator-grid-item gl-m-2 !gl-rounded-none !gl-p-0"
               @mouseover="setRowsAndCols(r, c)"
diff --git a/app/assets/stylesheets/components/content_editor.scss b/app/assets/stylesheets/components/content_editor.scss
index 3a9a9d9536425ac5b263a18971e60a6e7aeca914..05601d8b4d8a2af83959d4ce6b9f67f2d617aa16 100644
--- a/app/assets/stylesheets/components/content_editor.scss
+++ b/app/assets/stylesheets/components/content_editor.scss
@@ -342,7 +342,8 @@
   min-width: 1rem !important;
 
   &.active {
-    border-color: $blue-500 !important;
+    border-color: var(--gl-feedback-info-text-color) !important;
+    background-color: var(--gl-feedback-info-background-color) !important;
     border-width: 2px;
   }
 
diff --git a/spec/frontend/content_editor/components/bubble_menus/link_bubble_menu_spec.js b/spec/frontend/content_editor/components/bubble_menus/link_bubble_menu_spec.js
index edb3b34dac8bdf12ebe1a82c847d743386b626ba..cbcd58474b15721319c7d098a490df2da3e6a206 100644
--- a/spec/frontend/content_editor/components/bubble_menus/link_bubble_menu_spec.js
+++ b/spec/frontend/content_editor/components/bubble_menus/link_bubble_menu_spec.js
@@ -74,7 +74,7 @@ describe('content_editor/components/bubble_menus/link_bubble_menu', () => {
   it('renders bubble menu component', async () => {
     await buildWrapperAndDisplayMenu();
 
-    expect(findBubbleMenu().classes()).toEqual(['gl-rounded-base', 'gl-bg-white', 'gl-shadow']);
+    expect(findBubbleMenu().classes()).toEqual(['gl-rounded-base', 'gl-bg-dropdown', 'gl-shadow']);
   });
 
   it('shows a clickable link to the URL in the link node', async () => {
diff --git a/spec/frontend/content_editor/components/toolbar_button_spec.js b/spec/frontend/content_editor/components/toolbar_button_spec.js
index b8dab0d8bd13bed71ac817025c155c2f736e29ce..67701494d276c5f69a5629b2d92aaaf91e0a50f5 100644
--- a/spec/frontend/content_editor/components/toolbar_button_spec.js
+++ b/spec/frontend/content_editor/components/toolbar_button_spec.js
@@ -81,7 +81,7 @@ describe('content_editor/components/toolbar_button', () => {
 
       await emitEditorEvent({ event: 'transaction', tiptapEditor });
 
-      expect(findButton().classes().includes('!gl-bg-gray-100')).toBe(outcome);
+      expect(findButton().props('selected')).toBe(outcome);
       expect(tiptapEditor.isActive).toHaveBeenCalledWith(CONTENT_TYPE);
     },
   );