diff --git a/app/javascript/controllers/bubble_controller.js b/app/javascript/controllers/bubble_controller.js
index e841ffaab..21dee1a67 100644
--- a/app/javascript/controllers/bubble_controller.js
+++ b/app/javascript/controllers/bubble_controller.js
@@ -4,7 +4,7 @@ import { signedDifferenceInDays } from "helpers/date_helpers"
 const REFRESH_INTERVAL = 3_600_000 // 1 hour (in milliseconds)
 
 export default class extends Controller {
-  static targets = [ "entropy", "entropyTop", "entropyDays", "entropyBottom", "stalled" ]
+  static targets = [ "entropy", "top", "center", "bottom", "stalled" ]
   static values = { entropy: Object, stalled: Object }
 
   #timer
@@ -38,16 +38,23 @@ export default class extends Controller {
   }
 
   #showEntropy() {
-    this.entropyTopTarget.innerHTML = this.#entropyCleanupInDays < 1 ? this.entropyValue.action : `${this.entropyValue.action} in`
-    this.entropyDaysTarget.innerHTML = this.#entropyCleanupInDays < 1 ? "!" : this.#entropyCleanupInDays
-    this.entropyBottomTarget.innerHTML = this.#entropyCleanupInDays < 1 ? "Today" : (this.#entropyCleanupInDays === 1 ? "day" : "days")
-
-    this.#toggleDisplayedContainer(true)
+    this.#render({
+      target: "entropy",
+      top: this.#entropyCleanupInDays < 1 ? this.entropyValue.action : `${this.entropyValue.action} in`,
+      center: this.#entropyCleanupInDays < 1 ? "!" : this.#entropyCleanupInDays,
+      bottom: this.#entropyCleanupInDays < 1 ? "Today" : (this.#entropyCleanupInDays === 1 ? "day" : "days"),
+    })
   }
 
-  #toggleDisplayedContainer(entropyOrStalled) {
-    this.entropyTarget.toggleAttribute("hidden", !entropyOrStalled)
-    this.stalledTarget.toggleAttribute("hidden", entropyOrStalled)
+  #render({ target, top, center, bottom }) {
+    this.topTarget.innerHTML = top
+    this.centerTarget.innerHTML = center
+    this.bottomTarget.innerHTML = bottom
+
+    const entropyTarget = target === "entropy"
+    this.entropyTarget.toggleAttribute("hidden", !entropyTarget)
+    this.stalledTarget.toggleAttribute("hidden", entropyTarget)
+
     this.#show()
   }
 
@@ -56,11 +63,12 @@ export default class extends Controller {
   }
 
   #showStalled() {
-    this.entropyTopTarget.innerHTML = "Stalled for"
-    this.entropyDaysTarget.innerHTML = signedDifferenceInDays(new Date(this.stalledValue.lastActivitySpikeAt), new Date())
-    this.entropyBottomTarget.innerHTML = "days"
-
-    this.#toggleDisplayedContainer(true)
+    this.#render({
+      target: "stalled",
+      top: "Stalled for",
+      center: signedDifferenceInDays(new Date(this.stalledValue.lastActivitySpikeAt), new Date()),
+      bottom: "days"
+    })
   }
 
   #hide() {
diff --git a/app/views/cards/display/preview/_bubble.html.erb b/app/views/cards/display/preview/_bubble.html.erb
index d7c29717a..3cd81af88 100644
--- a/app/views/cards/display/preview/_bubble.html.erb
+++ b/app/views/cards/display/preview/_bubble.html.erb
@@ -10,16 +10,16 @@
     <svg viewBox="0 0 200 100">
       <path id="top-half" fill="transparent" d="M 20,100 A 80,80 0 0,1 180,100"/>
       <text text-anchor="middle" fill="currentColor">
-        <textPath href="#top-half" startOffset="50%" dominant-baseline="middle" data-bubble-target="entropyTop"></textPath>
+        <textPath href="#top-half" startOffset="50%" dominant-baseline="middle" data-bubble-target="top"></textPath>
       </text>
     </svg>
 
-    <span class="bubble__number" data-bubble-target="entropyDays"></span>
+    <span class="bubble__number" data-bubble-target="center"></span>
 
     <svg viewBox="0 0 200 100">
       <path id="bottom-half" d="M 20,0 A 80,80 0 0,0 180,0" fill="transparent"/>
       <text text-anchor="middle" fill="currentColor">
-        <textPath href="#bottom-half" startOffset="50%" dominant-baseline="middle" data-bubble-target="entropyBottom"></textPath>
+        <textPath href="#bottom-half" startOffset="50%" dominant-baseline="middle" data-bubble-target="bottom"></textPath>
       </text>
     </svg>
   </div>
@@ -28,16 +28,16 @@
     <svg viewBox="0 0 200 100">
       <path id="top-half" fill="transparent" d="M 20,100 A 80,80 0 0,1 180,100"/>
       <text text-anchor="middle" fill="currentColor">
-        <textPath href="#top-half" startOffset="50%" dominant-baseline="middle" data-bubble-target="entropyTop"></textPath>
+        <textPath href="#top-half" startOffset="50%" dominant-baseline="middle" data-bubble-target="top"></textPath>
       </text>
     </svg>
 
-    <span class="bubble__number" data-bubble-target="entropyDays"></span>
+    <span class="bubble__number" data-bubble-target="center"></span>
 
     <svg viewBox="0 0 200 100">
       <path id="bottom-half" d="M 20,0 A 80,80 0 0,0 180,0" fill="transparent"/>
       <text text-anchor="middle" fill="currentColor">
-        <textPath href="#bottom-half" startOffset="50%" dominant-baseline="middle" data-bubble-target="entropyBottom"></textPath>
+        <textPath href="#bottom-half" startOffset="50%" dominant-baseline="middle" data-bubble-target="bottom"></textPath>
       </text>
     </svg>
   </div>