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;
+  }
 }