diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 5b1f80520..e3cd890fc 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -344,13 +344,18 @@
       --card-color: var(--color-card-complete) !important;
     }
 
+    .card__body {
+      padding-block-end: 0;
+    }
+
     .card__collection {
       font-size: var(--text-xx-small);
       padding-block: 0.5ch;
     }
 
-    .card__body {
-      padding-block-end: 0;
+    .card__header {
+      margin-inline: calc(-1 * var(--card-padding-inline)) calc(-1 * var(--inline-space-half));
+      max-inline-size: unset;
     }
 
     .card__notification-body {
@@ -378,8 +383,7 @@
     --btn-size: 1.25em;
     --hover-size: 0;
 
-    inset: 0 0 auto auto;
-    position: absolute;
+    position: relative;
     z-index: 1;
 
     &:before,
diff --git a/app/assets/stylesheets/notifications.css b/app/assets/stylesheets/notifications.css
index de22274ab..e8659a268 100644
--- a/app/assets/stylesheets/notifications.css
+++ b/app/assets/stylesheets/notifications.css
@@ -13,6 +13,14 @@
       }
     }
 
+    .card__header {
+      column-gap: var(--inline-space-half);
+    }
+
+    .card__notification-unread-indicator {
+      font-size: var(--text-small);
+    }
+
     &:has(.card--notification) {
       .notifications-list__empty-message {
         display: none;
diff --git a/app/helpers/notifications_helper.rb b/app/helpers/notifications_helper.rb
index b5ace000c..4638e0590 100644
--- a/app/helpers/notifications_helper.rb
+++ b/app/helpers/notifications_helper.rb
@@ -28,7 +28,6 @@ module NotificationsHelper
           style: { "--card-color:": notification.card.color },
           &)
       )
-      concat(notification_mark_read_button(notification))
     end
   end
 
diff --git a/app/views/notifications/notification/event/_header.html.erb b/app/views/notifications/notification/event/_header.html.erb
index 96f8fa90a..1716da3f9 100644
--- a/app/views/notifications/notification/event/_header.html.erb
+++ b/app/views/notifications/notification/event/_header.html.erb
@@ -12,3 +12,7 @@
 <div class="card__notification-meta overflow-ellipsis flex-item-no-shrink">
   <span class="card__timestamp"><%= local_datetime_tag(notification.created_at) %></span>
 </div>
+
+<div class="card__notification-meta flex-item-no-shrink">
+  <%= notification_mark_read_button(notification) %>
+</div>
diff --git a/app/views/notifications/notification/mention/_header.html.erb b/app/views/notifications/notification/mention/_header.html.erb
index 65e04ea69..d0af4a644 100644
--- a/app/views/notifications/notification/mention/_header.html.erb
+++ b/app/views/notifications/notification/mention/_header.html.erb
@@ -13,3 +13,7 @@
   <span class="card__timestamp"><%= local_datetime_tag(notification.created_at) %></span>
 </div>
 
+<div class="card__notification-meta flex-item-no-shrink">
+  <%= notification_mark_read_button(notification) %>
+</div>
+