diff --git a/app/assets/stylesheets/bar.css b/app/assets/stylesheets/bar.css
index 79c85c634..00c456692 100644
--- a/app/assets/stylesheets/bar.css
+++ b/app/assets/stylesheets/bar.css
@@ -14,6 +14,7 @@
     padding-inline: calc(var(--tray-size) + calc(var(--inline-space) * 3));
     place-content: center;
     position: fixed;
+    view-transition-name: bar;
     z-index: var(--z-terminal);
 
     @media (prefers-color-scheme: dark) {
@@ -25,6 +26,10 @@
     }
   }
 
+  ::view-transition-group(bar) {
+    z-index: 99;
+  }
+
   .bar__input {
     transform: translateY(50%);
     transition: transform 350ms cubic-bezier(0.25, 1.25, 0.5, 1);
diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css
index 194057807..09ae687f4 100644
--- a/app/assets/stylesheets/trays.css
+++ b/app/assets/stylesheets/trays.css
@@ -328,6 +328,7 @@
 
   .tray--pins {
     inset-inline: var(--tray-margin) auto;
+    view-transition-name: tray-pins;
 
     #footer:has(.bar__placeholder[hidden]) & {
       inset-inline-start: -100%;
@@ -494,11 +495,16 @@
     }
   }
 
+  ::view-transition-group(tray-pins) {
+    z-index: 100;
+  }
+
   /* Notification-specific styles
   /* ------------------------------------------------------------------------ */
 
   .tray--notifications {
     inset-inline: auto var(--tray-margin);
+    view-transition-name: tray-notifications;
 
     #footer:has(.bar__placeholder[hidden]) & {
       inset-inline-end: -100%;
@@ -554,4 +560,8 @@
       }
     }
   }
+
+  ::view-transition-group(tray-notifications) {
+    z-index: 100;
+  }
 }
diff --git a/app/views/cards/container/footer/_published.html.erb b/app/views/cards/container/footer/_published.html.erb
index ec2fe6527..72d01fdbf 100644
--- a/app/views/cards/container/footer/_published.html.erb
+++ b/app/views/cards/container/footer/_published.html.erb
@@ -1,7 +1,15 @@
 <%# FIXME: Let's move this aside outside of the card container section so these frames don't reload/flicker when card is replaced %>
 <div class="card-perma__actions card-perma__actions--right">
-  <%= turbo_frame_tag card, :watch, src: card_watch_path(card), target: "_top", refresh: :morph %>
-  <%= turbo_frame_tag card, :pin, src: card_pin_path(card), refresh: :morph %>
+  <%= turbo_frame_tag card, :watch, src: card_watch_path(card), target: "_top", refresh: :morph do %>
+    <%= button_to card_watch_path(card), class: "btn", data: { controller: "tooltip" } do %>
+      <%= icon_tag "bell-off" %> <span class="for-screen-reader">Watch this</span>
+    <% end %>
+  <% end %>
+  <%= turbo_frame_tag card, :pin, src: card_pin_path(card), refresh: :morph do %>
+    <%= button_to card_pin_path(card), class: "btn", data: { controller: "tooltip" } do %>
+      <%= icon_tag "unpinned" %> <span class="for-screen-reader">Pin this card</span>
+    <% end %>
+  <% end %>
 </div>
 
 <%= render "cards/container/closure", card: card %>
diff --git a/app/views/webhooks/event.html.erb b/app/views/webhooks/event.html.erb
index dc93c23ab..91500a17b 100644
--- a/app/views/webhooks/event.html.erb
+++ b/app/views/webhooks/event.html.erb
@@ -1,4 +1,4 @@
 <%= event_action_sentence(@event) %>
 <% if @event.eventable %>
-— <%= link_to "↗︎", polymorphic_url(@event.eventable) %>
+<%= link_to "↗︎", polymorphic_url(@event.eventable) %>
 <% end %>