diff --git a/assets/css/app.css b/assets/css/app.css
index 4a523439..2b4bb0bd 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -2,6 +2,7 @@
 @source "../css";
 @source "../js";
 @source "../../lib/music_library_web";
+@source "../../deps/fluxon/**/*.*ex";
 
 /* A Tailwind plugin that makes "hero-#{ICON}" classes available.
    The heroicons installation itself is managed by your mix.exs */
diff --git a/assets/js/app.js b/assets/js/app.js
index 2e6e191a..c3e2eb92 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -21,10 +21,11 @@ import "phoenix_html";
 import { Socket } from "phoenix";
 import { LiveSocket } from "phoenix_live_view";
 import topbar from "../vendor/topbar";
+import { Hooks as FluxonHooks, DOM as FluxonDOM } from "fluxon";
 import BarcodeScannerHook from "./barcode-scanner";
 import confetti from "canvas-confetti";
 
-let Hooks = {};
+let Hooks = FluxonHooks;
 Hooks.BarcodeScanner = BarcodeScannerHook;
 
 let csrfToken = document
@@ -34,6 +35,11 @@ let liveSocket = new LiveSocket("/live", Socket, {
   longPollFallbackMs: 2500,
   params: { _csrf_token: csrfToken },
   hooks: Hooks,
+  dom: {
+    onBeforeElUpdated(from, to) {
+      FluxonDOM.onBeforeElUpdated(from, to);
+    },
+  },
 });
 
 // Show progress bar on live navigation and form submits