diff --git a/css/style.css b/css/style.css
index 4157a3a..67e9b55 100644
--- a/css/style.css
+++ b/css/style.css
@@ -89,4 +89,16 @@ footer {
 .smooth {
     padding: 5px;
     border-radius: 10px;
+}
+
+/* Modal */
+.my-modal {
+    background-color: rgba(255, 255, 255, 0.767);
+    border-radius: 10px;
+    padding: 50px;
+}
+
+.modal-title {
+    font-size: 15px;
+    margin-bottom: 40px;
 }
\ No newline at end of file
diff --git a/html/templates/test_modal.html b/html/templates/test_modal.html
index 59cc753..be548c5 100644
--- a/html/templates/test_modal.html
+++ b/html/templates/test_modal.html
@@ -1,3 +1,3 @@
-<p>Bienvenue dans cet modal</p>
+<p class="modal-title">Bienvenue dans cet modal</p>
 <div id="timer"></div>
 <button id="ok">OK</button>
\ No newline at end of file
diff --git a/js/commun/commun.js b/js/commun/initialzer.js
similarity index 100%
rename from js/commun/commun.js
rename to js/commun/initialzer.js
diff --git a/js/test/tests.js b/js/test/tests.js
index ac99d4a..72688cf 100644
--- a/js/test/tests.js
+++ b/js/test/tests.js
@@ -1,7 +1,7 @@
 import { Timer } from "../ui/timer.js";
 import { Modal } from "../ui/modal.js";
 import { TemplateEngine } from "../ui/templeting_engine.js";
-import { Initialzer } from "../commun/commun.js";
+import { Initialzer } from "../commun/initialzer.js ";
 import { AgentBuilder } from "../api/agent.js";
 import { Auth } from "../auth/auth.js";
 import { PlanetBuilder } from "../api/planet.js";
@@ -54,6 +54,7 @@ let tests  = {
         //});
     },
     modal: function() {
+
         let template_engine = new TemplateEngine(temp_path);
         
         let timer = new Timer(60, 1, "s");
@@ -62,11 +63,10 @@ let tests  = {
                 <p>${time}</p>
             `);
         });
-
         template_engine.render("templates/login.html");
 
-        let modal = new Modal("test-modal",template_engine);
-        modal.enable = false;
+        let modal = new Modal("test-modal", template_engine);
+        modal.add_class("my-modal")
 
         modal.render("templates/test_modal.html");
 
diff --git a/js/ui/modal.js b/js/ui/modal.js
index 244ca3e..0943f87 100644
--- a/js/ui/modal.js
+++ b/js/ui/modal.js
@@ -8,7 +8,7 @@ export class Modal {
 
     render(template) {
         this.template_engine.get_template((reponse) => {
-            $(this.tag).html(`
+            $(this.tag).prepend(`
                 <dialog id="${this.name}" class="${this.modal_class} modal-disable">
                     ${reponse}
                 </dialog>
@@ -16,6 +16,10 @@ export class Modal {
         }, template);
     }
 
+    on_close(callback) {
+        document.querySelector(`#${this.name}`).addEventListener("close", callback);
+    }
+
     add_class(modal_class) {
         this.modal_class = `${this.modal_class} ${modal_class}`;
     }