diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css
index d8c12c593..8f9b26172 100644
--- a/app/assets/stylesheets/comments.css
+++ b/app/assets/stylesheets/comments.css
@@ -81,6 +81,20 @@
     }
   }
 
+  .comment__reaction {
+    opacity: 0.66;
+
+    @media (any-hover: hover) {
+      .comment:not(:hover) & {
+        opacity: 0;
+      }
+    }
+
+    .comment--mine & {
+      display: none;
+    }
+  }
+
   .comment__event {
     max-inline-size: var(--comment-max);
 
diff --git a/app/assets/stylesheets/reactions.css b/app/assets/stylesheets/reactions.css
index cfc8f9b25..51f797456 100644
--- a/app/assets/stylesheets/reactions.css
+++ b/app/assets/stylesheets/reactions.css
@@ -108,6 +108,10 @@
     --btn-size: var(--reaction-size);
 
     font-size: 0.75em;
+
+    .reactions:not(:has(.reaction)) & {
+      display: none;
+    }
   }
 
   /* Quick reactions
diff --git a/app/views/cards/comments/_comment.html.erb b/app/views/cards/comments/_comment.html.erb
index b561ed0f9..9c41c81d6 100644
--- a/app/views/cards/comments/_comment.html.erb
+++ b/app/views/cards/comments/_comment.html.erb
@@ -22,8 +22,8 @@
           <% end %>
 
           <%= render "cards/comments/reactions/quick_reaction", comment: comment do %>
-            <button class="comment__reaction btn btn--circle borderless fill-transparent translucent" data-action="click->dialog#open:stop">
-              <%= icon_tag "reaction" %>
+            <button class="comment__reaction btn btn--circle borderless fill-transparent" data-action="click->dialog#open:stop">
+              <%= icon_tag "menu-dots-horizontal" %>
             </button>
           <% end %>
         </div>