diff --git a/app/javascript/controllers/modal_controller.js b/app/javascript/controllers/modal_controller.js
index 011c1254..20154f79 100644
--- a/app/javascript/controllers/modal_controller.js
+++ b/app/javascript/controllers/modal_controller.js
@@ -6,13 +6,16 @@ export default class extends Controller {
   // TODO: Stimulus >1
   connect() {
     this.showEvent = this.show.bind(this);
+    this.hideEvent = this.hide.bind(this);
 
     window.addEventListener("modal:show", this.showEvent);
+    window.addEventListener("modal:hide", this.hideEvent);
   }
 
   // TODO: Stimulus >1
   disconnect() {
     window.removeEventListener("modal:show", this.showEvent);
+    window.removeEventListener("modal:hide", this.hideEvent);
   }
 
   /*
@@ -41,6 +44,9 @@ export default class extends Controller {
 
   hide(event = undefined) {
     event?.preventDefault();
+    const modalId = event?.detail?.id;
+
+    if (modalId && this.element.id !== modalId) return;
 
     this.backdropTarget.classList.remove("show");
     this.modalTarget.classList.remove("show");