diff --git a/_dev/src/scss/components/_modal.scss b/_dev/src/scss/components/_modal.scss
index 5ed1fcb87..c469ad566 100644
--- a/_dev/src/scss/components/_modal.scss
+++ b/_dev/src/scss/components/_modal.scss
@@ -2,7 +2,14 @@
 
 $e: ".modal";
 
+@at-root {
+  ::backdrop {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}
+
 #{$ua-id} {
+
   #{$e} {
     &-content {
       display: flex;
diff --git a/_dev/src/ts/components/ModalContainer.ts b/_dev/src/ts/components/ModalContainer.ts
index f66a1d6fd..6431aee6b 100644
--- a/_dev/src/ts/components/ModalContainer.ts
+++ b/_dev/src/ts/components/ModalContainer.ts
@@ -31,18 +31,21 @@ export default class ModalContainer implements DomLifecycle {
   }
 
   #displayModal(): void {
-    $(
-      document.getElementById(ModalContainer.containerId)?.getElementsByClassName('modal') || []
-    ).modal('show');
+    const modal = document.getElementById(ModalContainer.containerId)?.getElementsByClassName('dialog')[0] as HTMLDialogElement;
+    if (modal) {
+      modal.showModal();
+    }
   }
 
   #onClick(ev: Event): void {
     const target = ev.target ? (ev.target as HTMLElement) : null;
-    const modal = target?.closest('.modal');
+    const modal = target?.closest('.dialog');
 
     if (modal) {
       if (target?.closest("[data-dismiss='modal']")) {
         modal.dispatchEvent(new Event(ModalContainer.cancelEvent, { bubbles: true }));
+      }  else if (!modal.contains(target) || target === modal) {
+        modal.dispatchEvent(new Event(ModalContainer.cancelEvent, { bubbles: true }));
       } else if (target?.closest(".modal-footer button:not([data-dismiss='modal'])")) {
         modal.dispatchEvent(new Event(ModalContainer.okEvent, { bubbles: true }));
       }
@@ -50,9 +53,9 @@ export default class ModalContainer implements DomLifecycle {
   }
 
   #closeModal(ev: Event): void {
-    const modal = ev.target;
+    const modal = ev.target as HTMLDialogElement;
     if (modal) {
-      $(modal).modal('hide');
+      modal.close();
     }
   }
 }
diff --git a/views/templates/components/modal.html.twig b/views/templates/components/modal.html.twig
index 1664374f0..6e968186d 100644
--- a/views/templates/components/modal.html.twig
+++ b/views/templates/components/modal.html.twig
@@ -1,4 +1,4 @@
-<div class="modal fade {% if modalDanger %}modal--danger{% endif %}"
+<dialog class="dialog {% if modalDanger %}modal--danger{% endif %}"
   {% if modalId %}id="{{ modalId }}"{% endif %}
   aria-label="{{ title }}"
   role="dialog"
@@ -44,4 +44,4 @@
       {% endblock %}
     </div>
   </div>
-</div>
+</dialog>