diff --git a/playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png b/playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png
index b4c72b6733..db91140763 100644
Binary files a/playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png and b/playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-bubble-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-bubble-layout-linux.png
index 7155942a7c..c0a01c99fb 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-bubble-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-bubble-layout-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-compact-modern-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-compact-modern-layout-linux.png
index 43bf819612..87e65a86ae 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-compact-modern-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-compact-modern-layout-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-layout-linux.png
index fb03037695..45c43f06fe 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-layout-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-modern-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-modern-linux.png
index 7753570160..445d616ea4 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-modern-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-modern-linux.png differ
diff --git a/res/css/views/elements/_Pill.pcss b/res/css/views/elements/_Pill.pcss
index 61cd53b14e..8363fc6641 100644
--- a/res/css/views/elements/_Pill.pcss
+++ b/res/css/views/elements/_Pill.pcss
@@ -42,6 +42,10 @@ limitations under the License.
         background-color: $pill-hover-bg-color !important; /* To override .markdown-body */
     }
 
+    &:active {
+        background-color: $pill-press-bg-color !important; /* To override .markdown-body */
+    }
+
     &.mx_UserPill_me:hover {
         background-color: var(
             --cpd-color-bg-critical-hovered
diff --git a/res/themes/dark/css/_dark.pcss b/res/themes/dark/css/_dark.pcss
index c3760c2981..326debc062 100644
--- a/res/themes/dark/css/_dark.pcss
+++ b/res/themes/dark/css/_dark.pcss
@@ -125,8 +125,9 @@ $roomheader-addroom-fg-color: $primary-content;
 
 /* Rich-text-editor */
 /* ******************** */
-$pill-bg-color: var(--cpd-color-gray-1000);
-$pill-hover-bg-color: var(--cpd-color-gray-1100);
+$pill-bg-color: var(--cpd-color-bg-action-primary-rest);
+$pill-hover-bg-color: var(--cpd-color-bg-action-primary-hovered);
+$pill-press-bg-color: var(--cpd-color-bg-action-primary-pressed);
 /* ******************** */
 
 /* Inputs */
diff --git a/res/themes/legacy-dark/css/_legacy-dark.pcss b/res/themes/legacy-dark/css/_legacy-dark.pcss
index a1c021fa38..7e14e85f10 100644
--- a/res/themes/legacy-dark/css/_legacy-dark.pcss
+++ b/res/themes/legacy-dark/css/_legacy-dark.pcss
@@ -28,8 +28,9 @@ $light-fg-color: $header-panel-text-secondary-color;
 /* used for focusing form controls */
 $focus-bg-color: $room-highlight-color;
 
-$pill-bg-color: var(--cpd-color-gray-1000);
-$pill-hover-bg-color: var(--cpd-color-gray-1100);
+$pill-bg-color: var(--cpd-color-bg-action-primary-rest);
+$pill-hover-bg-color: var(--cpd-color-bg-action-primary-hovered);
+$pill-press-bg-color: var(--cpd-color-bg-action-primary-pressed);
 
 /* informational plinth */
 $info-plinth-bg-color: $header-panel-bg-color;
diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss
index bfdaae6b67..5f9b8fd452 100644
--- a/res/themes/legacy-light/css/_legacy-light.pcss
+++ b/res/themes/legacy-light/css/_legacy-light.pcss
@@ -123,8 +123,9 @@ $rte-code-bg-color: rgba(0, 0, 0, 0.04);
 
 $header-panel-text-primary-color: #91a1c0;
 
-$pill-bg-color: var(--cpd-color-gray-1000);
-$pill-hover-bg-color: var(--cpd-color-gray-1100);
+$pill-bg-color: var(--cpd-color-bg-action-primary-rest);
+$pill-hover-bg-color: var(--cpd-color-bg-action-primary-hovered);
+$pill-press-bg-color: var(--cpd-color-bg-action-primary-pressed);
 
 $topleftmenu-color: #212121;
 $roomheader-bg-color: $primary-bg-color;
diff --git a/res/themes/light-custom/css/_custom.pcss b/res/themes/light-custom/css/_custom.pcss
index 9a4523d605..7fadb2cd0a 100644
--- a/res/themes/light-custom/css/_custom.pcss
+++ b/res/themes/light-custom/css/_custom.pcss
@@ -125,6 +125,7 @@ $reaction-row-button-selected-bg-color: var(
 $menu-selected-color: var(--menu-selected-color, $menu-selected-color);
 $pill-bg-color: var(--other-user-pill-bg-color, $pill-bg-color);
 $pill-hover-bg-color: var(--other-user-pill-bg-color, $pill-hover-bg-color);
+$pill-press-bg-color: var(--other-user-pill-bg-color, $pill-press-bg-color);
 $icon-button-color: var(--icon-button-color, $icon-button-color);
 
 $strong-input-border-color: var(--strong-input-border-color, $strong-input-border-color);
diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss
index cc34276994..730c115514 100644
--- a/res/themes/light/css/_light.pcss
+++ b/res/themes/light/css/_light.pcss
@@ -159,8 +159,9 @@ $roomheader-addroom-fg-color: #5c6470;
 
 /* Rich-text-editor */
 /* ******************** */
-$pill-bg-color: var(--cpd-color-gray-1000);
-$pill-hover-bg-color: var(--cpd-color-gray-1100);
+$pill-bg-color: var(--cpd-color-bg-action-primary-rest);
+$pill-hover-bg-color: var(--cpd-color-bg-action-primary-hovered);
+$pill-press-bg-color: var(--cpd-color-bg-action-primary-pressed);
 $rte-bg-color: #e9e9e9;
 $rte-code-bg-color: rgba(0, 0, 0, 0.04);
 /* ******************** */
diff --git a/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx b/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx
index f9051f3aa1..825192b82c 100644
--- a/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx
+++ b/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx
@@ -81,16 +81,18 @@ export const StatelessNotificationBadge = forwardRef<HTMLDivElement, XOR<Props,
                   : "badge_3char";
 
         const classes = classNames({
-            mx_NotificationBadge: true,
-            mx_NotificationBadge_visible: isEmptyBadge || knocked ? true : hasUnreadCount,
-            mx_NotificationBadge_level_notification: level == NotificationLevel.Notification,
-            mx_NotificationBadge_level_highlight: level >= NotificationLevel.Highlight,
-            mx_NotificationBadge_knocked: knocked,
+            "mx_NotificationBadge": true,
+            "mx_NotificationBadge_visible": isEmptyBadge || knocked ? true : hasUnreadCount,
+            "mx_NotificationBadge_level_notification": level == NotificationLevel.Notification,
+            "mx_NotificationBadge_level_highlight": level >= NotificationLevel.Highlight,
+            "mx_NotificationBadge_knocked": knocked,
 
             // Exactly one of mx_NotificationBadge_dot, mx_NotificationBadge_2char, mx_NotificationBadge_3char
-            mx_NotificationBadge_dot: badgeType === "dot",
-            mx_NotificationBadge_2char: badgeType === "badge_2char",
-            mx_NotificationBadge_3char: badgeType === "badge_3char",
+            "mx_NotificationBadge_dot": badgeType === "dot",
+            "mx_NotificationBadge_2char": badgeType === "badge_2char",
+            "mx_NotificationBadge_3char": badgeType === "badge_3char",
+            // Badges with text should always use light colors
+            "cpd-theme-light": badgeType !== "dot",
         });
 
         if (props.onClick) {
diff --git a/test/components/structures/__snapshots__/RoomStatusBar-test.tsx.snap b/test/components/structures/__snapshots__/RoomStatusBar-test.tsx.snap
index 19b0cd3b49..54d8db3526 100644
--- a/test/components/structures/__snapshots__/RoomStatusBar-test.tsx.snap
+++ b/test/components/structures/__snapshots__/RoomStatusBar-test.tsx.snap
@@ -12,7 +12,7 @@ exports[`RoomStatusBar <RoomStatusBar /> unsent messages should render warning w
         class="mx_RoomStatusBar_unsentBadge"
       >
         <div
-          class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_highlight mx_NotificationBadge_2char"
+          class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_highlight mx_NotificationBadge_2char cpd-theme-light"
         >
           <span
             class="mx_NotificationBadge_count"
@@ -81,7 +81,7 @@ exports[`RoomStatusBar <RoomStatusBar /> unsent messages should render warning w
         class="mx_RoomStatusBar_unsentBadge"
       >
         <div
-          class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_highlight mx_NotificationBadge_2char"
+          class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_highlight mx_NotificationBadge_2char cpd-theme-light"
         >
           <span
             class="mx_NotificationBadge_count"
diff --git a/test/components/structures/__snapshots__/RoomView-test.tsx.snap b/test/components/structures/__snapshots__/RoomView-test.tsx.snap
index 39596973c3..80d6ac7c74 100644
--- a/test/components/structures/__snapshots__/RoomView-test.tsx.snap
+++ b/test/components/structures/__snapshots__/RoomView-test.tsx.snap
@@ -215,7 +215,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
             class="mx_RoomStatusBar_unsentBadge"
           >
             <div
-              class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_highlight mx_NotificationBadge_2char"
+              class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_highlight mx_NotificationBadge_2char cpd-theme-light"
             >
               <span
                 class="mx_NotificationBadge_count"
diff --git a/test/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap b/test/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
index 56d7e77aaa..08e0d86027 100644
--- a/test/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
+++ b/test/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
@@ -480,7 +480,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               <span>
                 Show a badge 
                 <div
-                  class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_notification mx_NotificationBadge_2char"
+                  class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_notification mx_NotificationBadge_2char cpd-theme-light"
                 >
                   <span
                     class="mx_NotificationBadge_count"
@@ -1190,7 +1190,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               <span>
                 Show a badge 
                 <div
-                  class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_notification mx_NotificationBadge_2char"
+                  class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_notification mx_NotificationBadge_2char cpd-theme-light"
                 >
                   <span
                     class="mx_NotificationBadge_count"
diff --git a/test/components/views/spaces/__snapshots__/SpaceTreeLevel-test.tsx.snap b/test/components/views/spaces/__snapshots__/SpaceTreeLevel-test.tsx.snap
index d91a4c5908..ac89c05d0a 100644
--- a/test/components/views/spaces/__snapshots__/SpaceTreeLevel-test.tsx.snap
+++ b/test/components/views/spaces/__snapshots__/SpaceTreeLevel-test.tsx.snap
@@ -26,7 +26,7 @@ exports[`SpaceButton metaspace should render notificationState if one is provide
           class="mx_SpacePanel_badgeContainer"
         >
           <div
-            class="mx_AccessibleButton mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_notification mx_NotificationBadge_2char"
+            class="mx_AccessibleButton mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_notification mx_NotificationBadge_2char cpd-theme-light"
             role="button"
             tabindex="-1"
           >