diff --git a/packages/client/src/components/reactions-viewer.reaction.vue b/packages/client/src/components/reactions-viewer.reaction.vue
index 7dc079fde..bab6d9ac5 100644
--- a/packages/client/src/components/reactions-viewer.reaction.vue
+++ b/packages/client/src/components/reactions-viewer.reaction.vue
@@ -121,12 +121,15 @@ export default defineComponent({
 	margin: 2px;
 	padding: 0 6px;
 	border-radius: 4px;
+	box-shadow: 0px 0px 4px 2px var(--bg) inset;
+  background-color: var(--accent);
 
 	&.canToggle {
-		background: rgba(0, 0, 0, 0.05);
+		box-shadow: 0px 0px 4px 0px var(--accent) inset;
+    background-color: var(--bg);
 
 		&:hover {
-			background: rgba(0, 0, 0, 0.1);
+			background: var(--bg);
 		}
 	}
 
@@ -137,6 +140,11 @@ export default defineComponent({
 	&.reacted {
 		background: var(--accent);
 
+		&.canToggle {
+			box-shadow: 0px 0px 4px 0px var(--accent) inset;
+			background-color: var(--bg);
+		}
+
 		&:hover {
 			background: var(--accent);
 		}