diff --git a/app/views/editUser.scala.html b/app/views/editUser.scala.html
index c2acfa13f..908905982 100644
--- a/app/views/editUser.scala.html
+++ b/app/views/editUser.scala.html
@@ -5,6 +5,7 @@
 
 @main(currentUser)(s"Utilisateur ${form("name").value.getOrElse("")}") {
     <link rel="stylesheet" media="screen,print" href='@routes.Assets.versioned("stylesheets/newForm.css")'>
+    <script src='@routes.Assets.versioned("javascripts/dialog.js")'></script>
 }{
     @helper.form(action = routes.UserController.editUserPost(userId), 'class -> "mdl-grid mdl-cell mdl-cell--12-col") {
         @form.value match {
@@ -52,7 +53,7 @@
     @helper.checkbox(form("disabled"), 'type -> "checkbox", 'label -> "Désactiver l'utilisateur", 'class -> "mdl-checkbox__input")
 
         @if(unused) {
-        <button class="mdl-button mdl-js-button mdl-button--raised" type="button" onclick="confirmUserDeletion()">Supprimer cet utilisateur inutilisé.</button>
+        <button class="mdl-button mdl-js-button mdl-button--raised" type="button" onclick="showDialog(document.querySelector('#dialog-delete-user'))">Supprimer cet utilisateur inutilisé.</button>
         <br>
         }
     <b>Délégations</b>
@@ -164,16 +165,26 @@
             }
         }
     </script>
-<div class="modal" id="user-deletion-modal">
-    <div class="modal-dialog">
-        <header class="modal-header">
-            Suppression d'un utilisateur inutilisé.
-        </header>
-        <section class="modal-content">Êtes-vous certain de vouloir supprimer le compte de cet utilisateur?</section>
-        <footer class="modal-footer">
-            <button id="modal-confirm-button" class="confirm-modal" aria-label="confirm modal" onclick="confirmUnusedUserDeletionModal('@userId', '@tokenName', '@tokenValue')">Confirmer</button>
-            <button id="modal-close-button" class="close-modal" aria-label="close modal" onclick="closeModal()">Annuler</button>
-        </footer>
-    </div>
-</div>
+
+    <dialog class="mdl-dialog" id="dialog-delete-user">
+        <h4 class="mdl-dialog__title">Suppression d'un utilisateur inutilisé.</h4>
+        <div class="mdl-dialog__content">
+            <b>Êtes-vous certain de vouloir supprimer le compte de cet utilisateur?</b>
+        </div>
+        <div class="mdl-dialog__actions">
+            <button type="button" class="mdl-button mdl-button--raised mdl-button--colored" onclick="confirmDeletion()">Confirmer</button>
+            <button type="button" class="mdl-button mdl-button--raised" onclick="closeDialog(document.querySelector('#dialog-delete-user'))">Annuler</button>
+        </div>
+    </dialog>
+
+    <script type="text/javascript">
+        var dialog = document.querySelector('#dialog-delete-user');
+        if (!dialog.showModal) {
+            dialogPolyfill.registerDialog(dialog);
+        }
+
+        function confirmDeletion() {
+            document.location = '@routes.UserController.deleteUnusedUserById(userId)';
+        }
+    </script>
 }
\ No newline at end of file
diff --git a/app/views/main.scala.html b/app/views/main.scala.html
index 126f4a75d..78404b840 100644
--- a/app/views/main.scala.html
+++ b/app/views/main.scala.html
@@ -23,9 +23,6 @@
         @webJarsUtil.locate("dialog-polyfill.css").css()
         @webJarsUtil.locate("dialog-polyfill.js").script()
         <script type="text/javascript" src="@routes.JavascriptController.javascriptRoutes"></script>
-
-        <script src='@routes.Assets.versioned("javascripts/modal.js")'></script>
-        <link rel="stylesheet" media="screen,print" href='@routes.Assets.versioned("stylesheets/modal.css")'>
         <style>
                 html, body {
                     max-width: 100%;
diff --git a/public/javascripts/dialog.js b/public/javascripts/dialog.js
new file mode 100644
index 000000000..9a914feda
--- /dev/null
+++ b/public/javascripts/dialog.js
@@ -0,0 +1,7 @@
+function closeDialog(dialog) {
+    dialog.close();
+}
+
+function showDialog(dialog) {
+    dialog.showModal();
+}
\ No newline at end of file
diff --git a/public/javascripts/modal.js b/public/javascripts/modal.js
deleted file mode 100644
index 3fbd8bdf3..000000000
--- a/public/javascripts/modal.js
+++ /dev/null
@@ -1,16 +0,0 @@
-
-function confirmUserDeletion() {
-    document.getElementById('user-deletion-modal').classList.add('is-visible');
-}
-
-function closeModal() {
-    document
-        .getElementById('modal-close-button')
-            .parentElement
-                .parentElement
-                    .parentElement.classList.remove('is-visible');
-}
-
-function confirmUnusedUserDeletionModal(uuid, tokenName, tokenValue) {
-    window.location = '/user/delete/unused/'+uuid;
-}
\ No newline at end of file
diff --git a/public/stylesheets/modal.css b/public/stylesheets/modal.css
deleted file mode 100644
index 271991a18..000000000
--- a/public/stylesheets/modal.css
+++ /dev/null
@@ -1,80 +0,0 @@
-.modal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 1rem;
-    background-color: black;
-    cursor: pointer;
-    visibility: hidden;
-    opacity: 1;
-    transition: all 0.35s ease-in;
-}
-
-.modal-dialog {
-    position: relative;
-    max-width: 800px;
-    max-height: 80vh;
-    border-radius: 5px;
-    background: white;
-    overflow: auto;
-    cursor: default;
-    padding: 1rem 1em;
-    opacity: 1;
-    background-color: lightcoral;
-    z-index: 2;
-}
-
-.modal-dialog > * {
-    opacity: 1;
-    z-index: 2;
-}
-
-.modal-header, .modal-footer {
-    background: lightgray;
-}
-
-.modal-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 2em;
-    margin-bottom: 1em;
-}
-
-.modal-content {
-    margin-bottom: 1em;
-}
-
-.modal-header .modal-close {
-    font-size: 1.5rem;
-    font-color: white;
-}
-
-.modal p + p {
-    margin-top: 1rem;
-}
-
-.modal {
-    visibility: hidden;
-    opacity: 0;
-    transition: all 0.35s ease-in;
-}
-
-.modal.is-visible {
-    visibility: visible;
-    opacity: 1;
-    z-index: 1;
-}
-
-.close-modal {
-    float: right;
-}
-
-.confirm-modal {
-    float: left;
-}
\ No newline at end of file