diff --git a/app/helpers/cards_helper.rb b/app/helpers/cards_helper.rb
index ff760794f..e1f9c82ca 100644
--- a/app/helpers/cards_helper.rb
+++ b/app/helpers/cards_helper.rb
@@ -49,14 +49,6 @@ module CardsHelper
     title.join(" ")
   end
 
-  def card_entropy_action(card)
-    if card.doing?
-      "Falls Back"
-    elsif card.considering?
-      "Closes"
-    end
-  end
-
   def cacheable_preview_parts_for(card)
     [ card, card.collection.workflow, Entropy::Configuration.default ]
   end
diff --git a/app/helpers/entropy_helper.rb b/app/helpers/entropy_helper.rb
index b4f4d25ba..ddeaaf30a 100644
--- a/app/helpers/entropy_helper.rb
+++ b/app/helpers/entropy_helper.rb
@@ -2,4 +2,20 @@ module EntropyHelper
   def entropy_auto_close_options
     [ 3, 7, 11, 30, 90, 365 ]
   end
+
+  def entropy_bubble_options_for(card)
+    {
+      daysBeforeReminder: Card::Entropic::ENTROPY_REMINDER_BEFORE.in_days.to_i,
+      closesAt: card.entropy.auto_clean_at.iso8601,
+      action: card_entropy_action(card)
+    }
+  end
+
+  def card_entropy_action(card)
+    if card.doing?
+      "Falls Back"
+    elsif card.considering?
+      "Closes"
+    end
+  end
 end
diff --git a/app/javascript/controllers/bubble_controller.js b/app/javascript/controllers/bubble_controller.js
index 70a2c81e6..1109bd228 100644
--- a/app/javascript/controllers/bubble_controller.js
+++ b/app/javascript/controllers/bubble_controller.js
@@ -5,7 +5,7 @@ const REFRESH_INTERVAL = 3_600_000 // 1 hour (in milliseconds)
 
 export default class extends Controller {
   static targets = [ "top", "days", "bottom" ]
-  static values = { "closesAt": String, "reminderBefore": Number, "entropyAction": String }
+  static values = { entropy: Object }
 
   #timer
 
@@ -19,14 +19,14 @@ export default class extends Controller {
   }
 
   update() {
-    const closesInDays = signedDifferenceInDays(new Date(), new Date(this.closesAtValue))
+    const closesInDays = signedDifferenceInDays(new Date(), new Date(this.entropyValue.closesAt))
 
-    if (closesInDays > this.reminderBeforeValue) {
+    if (closesInDays > this.entropyValue.daysBeforeReminder) {
       this.#hide()
       return
     }
 
-    this.topTarget.innerHTML = closesInDays < 1 ? this.entropyActionValue : `${this.entropyActionValue} in`
+    this.topTarget.innerHTML = closesInDays < 1 ? this.entropyValue.action : `${this.entropyValue.action} in`
     this.daysTarget.innerHTML = closesInDays < 1 ? "!" : closesInDays
     this.bottomTarget.innerHTML = closesInDays < 1 ? "Today" : (closesInDays === 1 ? "day" : "days")
 
diff --git a/app/views/cards/display/preview/_bubble.html.erb b/app/views/cards/display/preview/_bubble.html.erb
index 49ea226dd..8a6b0e1aa 100644
--- a/app/views/cards/display/preview/_bubble.html.erb
+++ b/app/views/cards/display/preview/_bubble.html.erb
@@ -1,10 +1,11 @@
-<div hidden class="bubble bubble--<%= card.engagement_status %>"
-     data-controller="bubble" data-action="turbo:morph-element->bubble#update"
-     data-bubble-reminder-before-value="<%= Card::Entropic::ENTROPY_REMINDER_BEFORE.in_days.to_i %>"
-     data-bubble-closes-at-value="<%= card.entropy.auto_clean_at.iso8601 %>"
-     data-bubble-entropy-action-value="<%= card_entropy_action(card) %>">
+<%= tag.div hidden: true, class: "bubble bubble--#{card.engagement_status}",
+      data: {
+            controller: "bubble",
+            action: "turbo:morph-element->bubble#update",
+            bubble_entropy_value: entropy_bubble_options_for(card).to_json
+      } do %>
   <svg viewBox="0 0 200 100">
-    <path id="top-half" fill="transparent" d="M 20,100 A 80,80 0 0,1 180,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>
     </text>
@@ -14,9 +15,9 @@
   </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" />
+    <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>
     </text>
   </svg>
-</div>
+<% end %>