diff --git a/app/javascript/controllers/bubble_controller.js b/app/javascript/controllers/bubble_controller.js
index 21dee1a67..4ccc9056b 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", "top", "center", "bottom", "stalled" ]
+  static targets = [ "entropy", "entropyTop", "entropyCenter", "entropyBottom", "stalled", "stalledTop", "stalledCenter", "stalledBottom" ]
   static values = { entropy: Object, stalled: Object }
 
   #timer
@@ -47,9 +47,9 @@ export default class extends Controller {
   }
 
   #render({ target, top, center, bottom }) {
-    this.topTarget.innerHTML = top
-    this.centerTarget.innerHTML = center
-    this.bottomTarget.innerHTML = bottom
+    this[`${target}TopTarget`].innerHTML = top
+    this[`${target}CenterTarget`].innerHTML = center
+    this[`${target}BottomTarget`].innerHTML = bottom
 
     const entropyTarget = target === "entropy"
     this.entropyTarget.toggleAttribute("hidden", !entropyTarget)
diff --git a/app/views/cards/display/preview/_bubble.html.erb b/app/views/cards/display/preview/_bubble.html.erb
index 3cd81af88..2e5c96add 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="top"></textPath>
+        <textPath href="#top-half" startOffset="50%" dominant-baseline="middle" data-bubble-target="entropyTop"></textPath>
       </text>
     </svg>
 
-    <span class="bubble__number" data-bubble-target="center"></span>
+    <span class="bubble__number" data-bubble-target="entropyCenter"></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="bottom"></textPath>
+        <textPath href="#bottom-half" startOffset="50%" dominant-baseline="middle" data-bubble-target="entropyBottom"></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="top"></textPath>
+        <textPath href="#top-half" startOffset="50%" dominant-baseline="middle" data-bubble-target="stalledTop"></textPath>
       </text>
     </svg>
 
-    <span class="bubble__number" data-bubble-target="center"></span>
+    <span class="bubble__number" data-bubble-target="stalledCenter"></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="bottom"></textPath>
+        <textPath href="#bottom-half" startOffset="50%" dominant-baseline="middle" data-bubble-target="stalledBottom"></textPath>
       </text>
     </svg>
   </div>