diff --git a/app/views/bubbles/show.html.erb b/app/views/bubbles/show.html.erb
index ce4870b8a..aff283ffc 100644
--- a/app/views/bubbles/show.html.erb
+++ b/app/views/bubbles/show.html.erb
@@ -3,7 +3,7 @@
<% content_for :header do %>
<% if @bubble.creating? && @bubble.can_recover_abandoned_creation? %>
+ style="view-transition-name: draft-banner; --bubble-color: <%= @bubble.color %>;">
You have an unsaved work. Would you like to continue where you left off?
<%= button_to bucket_bubble_recover_path(@bubble.bucket, @bubble), class: "btn btn--reversed", data: { turbo_action: "replace" } do %>
Restore
@@ -13,25 +13,19 @@
<% if @bubble.drafted? %>
+ style="view-transition-name: draft-banner;">
This is a draft, it’s only visible to you.
<%= render "bubbles/publish", bubble: @bubble %>