diff --git a/assets/js/app.js b/assets/js/app.js
index 664d3c3a..3d380a4f 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -29,11 +29,13 @@ import {LiveSocket} from "phoenix_live_view"
 import {hooks as colocatedHooks} from "phoenix-colocated/microwaveprop"
 import topbar from "../vendor/topbar"
 
+import {PropagationMap} from "./propagation_map_hook"
+
 const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 const liveSocket = new LiveSocket("/live", Socket, {
   longPollFallbackMs: 2500,
   params: {_csrf_token: csrfToken},
-  hooks: {...colocatedHooks},
+  hooks: {...colocatedHooks, PropagationMap},
 })
 
 // Show progress bar on live navigation and form submits
diff --git a/lib/microwaveprop_web/live/map_live.hooks.js b/assets/js/propagation_map_hook.js
similarity index 100%
rename from lib/microwaveprop_web/live/map_live.hooks.js
rename to assets/js/propagation_map_hook.js