diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 8b62d9e93..09063e1a2 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -253,6 +253,13 @@
     }
   }
 
+  .card__assignees-trigger {
+    background: transparent;
+    border: none;
+    padding: 0;
+    display: flex;
+  }
+
   .card__meta-text {
     line-height: 1;
     white-space: nowrap;
diff --git a/app/views/cards/display/common/_assignees.html.erb b/app/views/cards/display/common/_assignees.html.erb
index c07ec9e6d..57c520a05 100644
--- a/app/views/cards/display/common/_assignees.html.erb
+++ b/app/views/cards/display/common/_assignees.html.erb
@@ -1,16 +1,16 @@
-<div class="display-contents" id="<%= dom_id(card, :assignees) %>">
-  <% card.assignees.each do |assignee| %>
-    <%= avatar_tag assignee, tabindex: (local_assigns.key?(:preview) && local_assigns[:preview]) ? -1 : 0 %>
-  <% end %>
+<div id="<%= dom_id(card, :assignees) %>" class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" <%= "hidden" if card.closed? %>>
+  <button class="card__assignees-trigger" data-action="click->dialog#open:stop" data-controller="tooltip">
+    <% card.assignees.each do |assignee| %>
+      <%= avatar_preview_tag assignee, tabindex: (local_assigns.key?(:preview) && local_assigns[:preview]) ? -1 : 0 %>
+    <% end %>
 
-  <div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" <%= "hidden" if card.closed? %>>
-    <button class="btn card__hide-on-index" data-action="click->dialog#open:stop" style="--btn-background: var(--card-bg-color);" data-controller="tooltip">
+    <span class="btn card__hide-on-index" style="--btn-background: var(--card-bg-color);">
       <%= icon_tag "person-add" %>
       <span class="for-screen-reader">Assign</span>
-    </button>
+    </span>
+  </button>
 
-    <dialog class="popup panel flex-column align-start gap-half fill-white shadow" data-dialog-target="dialog" data-action="turbo:before-morph-attribute->dialog#preventCloseOnMorphing turbo:submit-end->dialog#close">
-      <%= yield %>
-    </dialog>
-  </div>
+  <dialog class="popup panel flex-column align-start gap-half fill-white shadow" data-dialog-target="dialog" data-action="turbo:before-morph-attribute->dialog#preventCloseOnMorphing turbo:submit-end->dialog#close">
+    <%= yield %>
+  </dialog>
 </div>