diff --git a/res/css/views/messages/_ReactionsRow.pcss b/res/css/views/messages/_ReactionsRow.pcss
index 36e4ec26ea..3a820cfdc7 100644
--- a/res/css/views/messages/_ReactionsRow.pcss
+++ b/res/css/views/messages/_ReactionsRow.pcss
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_ReactionsRow {
     margin: 6px 0;
-    color: $primary-content;
+    color: var(--cpd-color-text-primary);
 
     .mx_ReactionsRow_addReactionButton {
         position: relative;
diff --git a/res/css/views/messages/_ReactionsRowButton.pcss b/res/css/views/messages/_ReactionsRowButton.pcss
index f2e3885de4..dd9d7ddb47 100644
--- a/res/css/views/messages/_ReactionsRowButton.pcss
+++ b/res/css/views/messages/_ReactionsRowButton.pcss
@@ -9,16 +9,12 @@ Please see LICENSE files in the repository root for full details.
     display: inline-flex;
     line-height: $font-20px;
     padding: 1px 6px;
-    border: 1px solid $quinary-content;
+    border: 1px solid var(--cpd-color-gray-400);
     border-radius: 10px;
-    background-color: $secondary-hairline-color;
+    background-color: var(--cpd-color-gray-200);
     user-select: none;
     align-items: center;
 
-    &:hover {
-        border-color: $quinary-content;
-    }
-
     &.mx_ReactionsRowButton_selected {
         background-color: $accent-300;
         border-color: $accent-800;