diff --git a/app/assets/stylesheets/notifications.css b/app/assets/stylesheets/notifications.css
index 66be85591..c99d96ef9 100644
--- a/app/assets/stylesheets/notifications.css
+++ b/app/assets/stylesheets/notifications.css
@@ -7,12 +7,6 @@
 }
 
 .notification-tray__actions {
-  .notification-tray:has(.notification) & {
-    .btn img {
-      display: none;
-    }
-  }
-
   .notification-tray:not(:has(.notification)) & {
     .notification-tray__all_action {
       --btn-border-radius: 50%;
@@ -34,7 +28,7 @@
     }
 
     .notification-tray__read_action {
-      display: none;
+      visibility: hidden;
     }
   }
 }
diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css
index 16c976e3c..8249a553a 100644
--- a/app/assets/stylesheets/trays.css
+++ b/app/assets/stylesheets/trays.css
@@ -3,16 +3,15 @@
 }
 
 .tray {
-  --height: calc(2.57lh + var(--block-space));
+  --height: calc(2.48lh + var(--block-space));
 
   background-color: transparent;
   border: 0;
-  border-radius: 0.5em;
   display: flex;
   flex-direction: column;
   inline-size: var(--tray-size);
   justify-content: end;
-  padding: var(--block-space-half) var(--inline-space);
+  padding: var(--block-space-half) var(--inline-space) calc(var(--block-space-half) / 2);
   position: fixed;
   z-index: 2;
 
@@ -55,9 +54,15 @@
 }
 
 .tray__actions {
-  display: flex;
+  --border-style: dashed;
+  --border-color: color-mix(in srgb, var(--color-always-white) 40%, var(--color-ink));
+  --hover-size: 0;
+
   align-items: center;
+  color: var(--color-ink-reversed);
+  display: flex;
   gap: var(--inline-space-half);
+  justify-content: space-between;
   opacity: 0;
   scale: calc(1 - 1 / 30);
   transform: translateY(100%);
@@ -79,6 +84,12 @@
       display: none;
     }
   }
+
+  @media (prefers-color-scheme: dark) {
+    .btn--reversed {
+      color: var(--color-ink);
+    }
+  }
 }
 
 .tray__expander {
diff --git a/app/views/bubbles/pins/_tray.html.erb b/app/views/bubbles/pins/_tray.html.erb
index 56b95b45e..7551f3781 100644
--- a/app/views/bubbles/pins/_tray.html.erb
+++ b/app/views/bubbles/pins/_tray.html.erb
@@ -4,11 +4,8 @@
       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 "pins", src: bubbles_pins_tray_path %>
 
-  <div class="tray__actions">
-    <%= tag.button type: "button", class: "tray__all_action btn flex-item-justify-start shadow", data: { action: "click->dialog#close"} do %>
-      <%= image_tag "remove-med.svg", aria: { hidden: true }, size: 24 %>
-      <span class="for-screen-reader">Close</span>
-    <% end %>
+  <div class="tray__actions border border-radius">
+    <button class="txt-uppercase btn btn--reversed borderless fill-transparent txt-x-small translucent center" data-action="click->dialog#close">Pinned</button>
   </div>
 
   <button class="tray__expander" data-action="dialog#toggle" aria-label="Expand pins stack">
diff --git a/app/views/notifications/_tray.html.erb b/app/views/notifications/_tray.html.erb
index 444ab83c8..5ec51494a 100644
--- a/app/views/notifications/_tray.html.erb
+++ b/app/views/notifications/_tray.html.erb
@@ -16,19 +16,21 @@
     </div>
   <% end %>
 
-  <div class="tray__actions notification-tray__actions">
+  <div class="tray__actions notification-tray__actions border border-radius">
     <%= button_to notifications_mark_all_read_path, 
-        class: "notification-tray__read_action btn flex-item-justify-start shadow", 
+        class: "notification-tray__read_action btn btn--reversed fill-transparent borderless flex-item-justify-start shadow txt-xx-small", 
         data: { action: "click->dialog#close", turbo_frame: "notifications" } do %>
-      Mark all read
+      <%= image_tag "check.svg", aria: { hidden: true }, size: 24 %>
+      <span class="for-screen-reader">Mark all read</span>
     <% end %>
 
     <%= link_to notifications_path, 
-        class: "notification-tray__all_action btn flex-item-justify-end shadow", 
-        data: { action: "click->dialog#close"} do %>
-      <%= image_tag "bell.svg", aria: { hidden: true }, size: 24 %>
-      <span>See all</span>
+          class: "btn btn--reversed borderless fill-transparent translucent shadow center txt-uppercase txt-x-small", 
+          data: { action: "click->dialog#close"} do %>
+      <span>Notifications</span>
     <% end %>
+
+    <span class="btn btn--placeholder txt-xx-small borderless"></span>
   </div>
 
   <button class="tray__expander" data-action="dialog#toggle" aria-label="Expand notifications stack">