diff --git a/app/views/first_runs/show.html.erb b/app/views/first_runs/show.html.erb
index 0aa48f667..61778a74f 100644
--- a/app/views/first_runs/show.html.erb
+++ b/app/views/first_runs/show.html.erb
@@ -1,14 +1,11 @@
 <% @page_title = "Set up Fizzy" %>
 
 <div class="panel shadow center margin-block-double <%= "shake" if flash[:alert] %>" style="--panel-size: 55ch;">
-  <div class="bubble center" style="--bubble-color: var(--color-ink); --bubble-rotate: 90deg; --bubble-size: 12cqi;">
-    <svg class="bubble__svg" viewBox="0 0 990 990" xmlns="http://www.w3.org/2000/svg" style="stroke-width: 1.7em;">
-      <path d="m0 0h990v990h-990z" fill="none" stroke="none" />
-      <path d="m391.65 879.47c-110.52-15.95-212.21-91.86-255.92-191.23-66.78-143.65-41.62-347.61 48.08-481.17 368.33-516.3 1252.97 520.2 451.03 660.78-44.07 8.84-88.98 13.49-133.01 15.68-36.69 2-73.37 1.91-109.99-4.03z"/>
-    </svg>
-    <span class="bubble__bubble bubble__meta bubble__date" style="border-width: 0.5em;"></span>
-    <span class="bubble__bubble bubble__meta bubble__tag" style="border-width: 0.5em;">&nbsp; &nbsp; &nbsp; &nbsp;</span>
-    <span class="bubble__bubble bubble__meta bubble__tag" style="border-width: 0.5em;">&nbsp; &nbsp;</span>
+  <div class="bubble center" style="--bubble-size: 12cqi;">
+    <span class="bubble__shape"></span>
+    <span class="bubble__bubble bubble__meta bubble__date">&nbsp; &nbsp; &nbsp; &nbsp;</span>
+    <span class="bubble__bubble bubble__meta bubble__tag">&nbsp; &nbsp; &nbsp; &nbsp;</span>
+    <span class="bubble__bubble bubble__meta bubble__tag">&nbsp; &nbsp;</span>
   </div>
 
   <h1 class="margin-block-start-half margin-block-end-double">Fizzy</h1>
diff --git a/app/views/sessions/new.html.erb b/app/views/sessions/new.html.erb
index 1ef09f9c4..f79adca6b 100644
--- a/app/views/sessions/new.html.erb
+++ b/app/views/sessions/new.html.erb
@@ -1,14 +1,11 @@
 <% @page_title = "Sign in" %>
 
 <div class="panel shadow center margin-block-double <%= "shake" if flash[:alert] %>" style="--panel-size: 55ch;">
-  <div class="bubble center" style="--bubble-color: var(--color-ink); --bubble-rotate: 90deg; --bubble-size: 12cqi;">
-    <svg class="bubble__svg" viewBox="0 0 990 990" xmlns="http://www.w3.org/2000/svg" style="stroke-width: 1.7em;">
-      <path d="m0 0h990v990h-990z" fill="none" stroke="none" />
-      <path d="m391.65 879.47c-110.52-15.95-212.21-91.86-255.92-191.23-66.78-143.65-41.62-347.61 48.08-481.17 368.33-516.3 1252.97 520.2 451.03 660.78-44.07 8.84-88.98 13.49-133.01 15.68-36.69 2-73.37 1.91-109.99-4.03z"/>
-    </svg>
-    <span class="bubble__bubble bubble__meta bubble__date" style="border-width: 0.5em;"></span>
-    <span class="bubble__bubble bubble__meta bubble__tag" style="border-width: 0.5em;">&nbsp; &nbsp; &nbsp; &nbsp;</span>
-    <span class="bubble__bubble bubble__meta bubble__tag" style="border-width: 0.5em;">&nbsp; &nbsp;</span>
+  <div class="bubble center" style="--bubble-size: 12cqi;">
+    <span class="bubble__shape"></span>
+    <span class="bubble__bubble bubble__meta bubble__date">&nbsp; &nbsp; &nbsp; &nbsp;</span>
+    <span class="bubble__bubble bubble__meta bubble__tag">&nbsp; &nbsp; &nbsp; &nbsp;</span>
+    <span class="bubble__bubble bubble__meta bubble__tag">&nbsp; &nbsp;</span>
   </div>
 
   <h1 class="margin-block-start-half margin-block-end-double">Fizzy</h1>