diff --git a/app/assets/stylesheets/notifications.css b/app/assets/stylesheets/notifications.css
index 847d1fc5e..21bf884ce 100644
--- a/app/assets/stylesheets/notifications.css
+++ b/app/assets/stylesheets/notifications.css
@@ -55,6 +55,42 @@
     scale: 1;
     transform: translateY(0);
   }
+
+  .notification-tray:has(.notification) & {
+    .btn img {
+      display: none;
+    }
+  }
+
+  .notification-tray:not(:has(.notification)) & {
+    opacity: 1;
+    scale: 1;
+    transform: none;
+    transition: none;
+
+    .notification-tray__all_action {
+      --btn-border-radius: 50%;
+      --btn-padding: 0;
+
+      aspect-ratio: 1;
+      block-size: var(--btn-size);
+      display: grid;
+      inline-size: var(--btn-size);
+      place-items: center;
+
+      > * {
+        grid-area: 1/1;
+      }
+
+      span {
+        display: none;
+      }
+    }
+
+    .notification-tray__read_action {
+      display: none;
+    }
+  }
 }
 
 .notification__content {
@@ -75,7 +111,8 @@
   position: absolute;
   z-index: 6;
 
-  .notification-tray[open] & {
+  .notification-tray[open] &,
+  .notification-tray:not(:has(.notification)) & {
     display: none;
   }
 }
diff --git a/app/javascript/controllers/dialog_controller.js b/app/javascript/controllers/dialog_controller.js
index dcea9bdf9..fd4d122e0 100644
--- a/app/javascript/controllers/dialog_controller.js
+++ b/app/javascript/controllers/dialog_controller.js
@@ -26,6 +26,7 @@ export default class extends Controller {
 
   close() {
     this.dialogTarget.close()
+    this.dialogTarget.blur()
   }
 
   closeOnClickOutside({ target }) {
diff --git a/app/views/notifications/_tray.html.erb b/app/views/notifications/_tray.html.erb
index 86c0cc9f5..fa4c650b4 100644
--- a/app/views/notifications/_tray.html.erb
+++ b/app/views/notifications/_tray.html.erb
@@ -1,20 +1,19 @@
 <%= turbo_stream_from Current.user, :notifications %>
 
-<%= tag.dialog id: "notification-tray", class: "notification-tray flex flex-column gap unpad borderless justify-end",
-      data: { controller: "dialog", turbo_permanent: true, dialog_modal_value: false, dialog_target: "dialog", action: "keydown.esc@document->dialog#close click@document->dialog#closeOnClickOutside" } do %>
-  <%=  turbo_frame_tag("notifications", src: notifications_tray_path) %>
-
-  <div class="notification-tray__actions flex align-center gap-half justify-space-between">
-    <button class="btn">
+<%= tag.dialog id: "notification-tray", class: "notification-tray flex flex-column gap unpad borderless justify-end fill-transparent",
+      data: { controller: "dialog", turbo_permanent: true, dialog_modal_value: false, dialog_target: "dialog", action: "keydown.esc->dialog#close:stop click@document->dialog#closeOnClickOutside" } do %>
+  <%= turbo_frame_tag("notifications", src: notifications_tray_path) -%>
+  <div class="notification-tray__actions flex align-center gap-half">
+    <button class="notification-tray__read_action btn flex-item-justify-start">
       Mark all as read
     </button>
 
-    <%= link_to notifications_path, class: "btn" do %>
+    <%= link_to notifications_path, class: "notification-tray__all_action btn flex-item-justify-end" do %>
       <%= image_tag "bell.svg", aria: { hidden: true }, size: 24 %>
       <span>See all notifications</span>
     <% end %>
   </div>
 
-  <button class="notification-tray__expander borderless unpad fill-transparent" data-action="dialog#toggle">
+  <button class="notification-tray__expander borderless unpad fill-transparent" data-action="dialog#toggle" aria-label="Expand notifications stack">
   </button>
 <% end %>