diff --git a/srcs/frontend/src/app.js b/srcs/frontend/src/app.js
index e643b39..718acfa 100644
--- a/srcs/frontend/src/app.js
+++ b/srcs/frontend/src/app.js
@@ -1,231 +1,13 @@
+import {Element, MenuElement} from "./element.js";
+import {Grid} from "./grid.js";
+import {fenetre, LoginWindow} from "./windows.js";
 function direBonjour() {
     alert("clicked !");
 }
 
-class Element {
-    constructor(id) {
-        this.element = document.getElementById(id);
-        this.element.addEventListener("mouseenter", () => { 
-            console.log("La souris est sur le bouton " + id + " !");
-        });
-        this.element.addEventListener("mouseleave", () => { 
-            console.log("La souris a quitté le bouton " + id + ".");
-        });
-    }
-}
-
-class MenuElement extends Element {
-    constructor(id) {
-        super(id);
-        this.element.addEventListener("click", () => { 
-            console.log("Le bouton " + id + " a été cliqué !");
-        });
-        this.element.addEventListener("mouseenter", () => { 
-            this.element.style.backgroundColor = "lightgrey";
-            this.element.style.fontSize = "1.2em";
-            this.element.style.cursor = "move";
-        });
-        this.element.addEventListener("mouseleave", () => { 
-            this.element.style.backgroundColor = "";
-            this.element.style.fontSize = "";
-            this.element.style.cursor = "";
-            this.element.getAnimations().forEach(animation => animation.cancel());
-        });
-    }
-}
 
 
 
-class Grid {
-    constructor(color = '#143a0fff', zIndex = 1, gridSize = 25, speed = 0.35, sens = "normal") {
-        // Initialisation des propriétés de l'instance
-        this.canvas = document.createElement('canvas');
-        this.ctx = this.canvas.getContext('2d');
-        this.offset = 0;
-        this.gridSize = gridSize;
-        this.speed = speed;
-        this.color = color;
-
-        // Configuration du style
-        document.body.appendChild(this.canvas);
-        this.canvas.style.position = 'fixed';
-        this.canvas.style.top = '0';
-        this.canvas.style.left = '0';
-        this.canvas.style.zIndex = zIndex;
-        this.canvas.style.pointerEvents = 'none'; // Pour ne pas bloquer les clics sur les boutons
-
-        // Gestion du redimensionnement
-        window.addEventListener('resize', () => this.resize());
-        this.resize();
-        this.draw(sens);
-    }
-
-    resize() {
-        this.canvas.width = window.innerWidth;
-        this.canvas.height = window.innerHeight;
-    }
-
-    draw(sens = "normal") {
-        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-        this.ctx.strokeStyle = this.color;
-        this.ctx.lineWidth = 1;
-
-        // Mise à jour de l'offset
-        this.offset = (this.offset + this.speed) % this.gridSize;
-        if (sens === "normal") {
-            // Lignes verticales
-            for (let x = this.offset; x < this.canvas.width; x += this.gridSize) {
-                this.ctx.beginPath();
-                this.ctx.moveTo(x, 0);
-                this.ctx.lineTo(x, this.canvas.height);
-                this.ctx.stroke();
-            }
-
-            // Lignes horizontales
-            for (let y = this.offset; y < this.canvas.height; y += this.gridSize) {
-                this.ctx.beginPath();
-                this.ctx.moveTo(0, y);
-                this.ctx.lineTo(this.canvas.width, y);
-                this.ctx.stroke();
-            }
-        }
-        //pareillement pour le sens reverse
-        else if (sens === "reverse") {
-            // Lignes verticales
-            for (let x = this.gridSize - this.offset; x < this.canvas.width; x += this.gridSize) {
-                this.ctx.beginPath();
-                this.ctx.moveTo(x, 0);
-                this.ctx.lineTo(x, this.canvas.height);
-                this.ctx.stroke();
-            }
-            // Lignes horizontales
-            for (let y = this.gridSize - this.offset; y < this.canvas.height; y += this.gridSize) {
-                this.ctx.beginPath();
-                this.ctx.moveTo(0, y);
-                this.ctx.lineTo(this.canvas.width, y);
-                this.ctx.stroke();
-            }
-        }
-        // Appel récursif pour l'animation
-        requestAnimationFrame(() => this.draw(sens));
-    }
-    
-}
-
-class fenetre {
-    constructor(width = 320, height = 220, title = "Window") {
-        this.main = document.createElement("div");
-        this.main.style.width = width + "px";
-        this.main.style.height = height + "px";
-        this.main.style.position = "fixed";
-        this.main.style.top = "50%";
-        this.main.style.left = "50%";
-        this.main.style.transform = "translate(-50%, -50%)";
-        this.main.style.backgroundColor = "#000";
-        this.main.style.border = "2px ridge white";
-        this.main.style.color = "white";
-        this.main.style.zIndex = "100";
-        this.main.style.display = "none";
-
-        // Header
-        this.header = document.createElement("div");
-        this.header.innerText = title;
-        this.header.style.padding = "6px";
-        this.header.style.background = "#222";
-        this.header.style.cursor = "move";
-
-        // Close
-        this.closeBtn = document.createElement("span");
-        this.closeBtn.innerText = "✖";
-        this.closeBtn.style.float = "right";
-        this.closeBtn.style.cursor = "pointer";
-        this.closeBtn.onclick = () => this.hide();
-
-        this.header.appendChild(this.closeBtn);
-
-        // Body
-        this.body = document.createElement("div");
-        this.body.style.padding = "10px";
-
-        this.main.append(this.header, this.body);
-        document.body.appendChild(this.main);
-    }
-
-    show() {
-        this.main.style.display = "block";
-    }
-
-    hide() {
-        this.main.style.display = "none";
-    }
-}
-
-class LoginWindow extends fenetre {
-    constructor() {
-        super(320, 240, "Connexion");
-
-        this.mode = "login"; // login | register
-
-        this.username = document.createElement("input");
-        this.username.placeholder = "Username";
-
-        this.password = document.createElement("input");
-        this.password.type = "password";
-        this.password.placeholder = "Password";
-
-        this.submit = document.createElement("button");
-        this.submit.innerText = "Se connecter";
-
-        this.switch = document.createElement("button");
-        this.switch.innerText = "S'inscrire";
-
-        this.message = document.createElement("div");
-        this.message.style.fontSize = "0.8em";
-
-        this.body.append(
-            this.username,
-            this.password,
-            this.submit,
-            this.switch,
-            this.message
-        );
-
-        this.applyStyles();
-        this.bindEvents();
-    }
-
-    applyStyles() {
-        this.body.style.display = "flex";
-        this.body.style.flexDirection = "column";
-        this.body.style.gap = "8px";
-    }
-
-    bindEvents() {
-        this.switch.onclick = () => this.toggleMode();
-
-        this.submit.onclick = () => {
-            this.message.innerText =
-                this.mode === "login"
-                    ? "Tentative de connexion..."
-                    : "Tentative d'inscription...";
-        };
-    }
-
-    toggleMode() {
-        if (this.mode === "login") {
-            this.mode = "register";
-            this.header.firstChild.textContent = "Inscription";
-            this.submit.innerText = "S'inscrire";
-            this.switch.innerText = "Se connecter";
-        } else {
-            this.mode = "login";
-            this.header.firstChild.textContent = "Connexion";
-            this.submit.innerText = "Se connecter";
-            this.switch.innerText = "S'inscrire";
-        }
-    }
-}
-
 
 const menuElement = new Element("menu");
 const loginElement = new MenuElement("login");
diff --git a/srcs/frontend/src/element.js b/srcs/frontend/src/element.js
new file mode 100644
index 0000000..c4c7442
--- /dev/null
+++ b/srcs/frontend/src/element.js
@@ -0,0 +1,31 @@
+export class Element {
+    constructor(id) {
+        this.element = document.getElementById(id);
+        this.element.addEventListener("mouseenter", () => { 
+            console.log("La souris est sur le bouton " + id + " !");
+        });
+        this.element.addEventListener("mouseleave", () => { 
+            console.log("La souris a quitté le bouton " + id + ".");
+        });
+    }
+}
+
+export class MenuElement extends Element {
+    constructor(id) {
+        super(id);
+        this.element.addEventListener("click", () => { 
+            console.log("Le bouton " + id + " a été cliqué !");
+        });
+        this.element.addEventListener("mouseenter", () => { 
+            this.element.style.backgroundColor = "lightgrey";
+            this.element.style.fontSize = "1.2em";
+            this.element.style.cursor = "move";
+        });
+        this.element.addEventListener("mouseleave", () => { 
+            this.element.style.backgroundColor = "";
+            this.element.style.fontSize = "";
+            this.element.style.cursor = "";
+            this.element.getAnimations().forEach(animation => animation.cancel());
+        });
+    }
+}
\ No newline at end of file
diff --git a/srcs/frontend/src/grid.js b/srcs/frontend/src/grid.js
new file mode 100644
index 0000000..dc3e876
--- /dev/null
+++ b/srcs/frontend/src/grid.js
@@ -0,0 +1,75 @@
+export class Grid {
+    constructor(color = '#143a0fff', zIndex = 1, gridSize = 25, speed = 0.35, sens = "normal") {
+        // Initialisation des propriétés de l'instance
+        this.canvas = document.createElement('canvas');
+        this.ctx = this.canvas.getContext('2d');
+        this.offset = 0;
+        this.gridSize = gridSize;
+        this.speed = speed;
+        this.color = color;
+
+        // Configuration du style
+        document.body.appendChild(this.canvas);
+        this.canvas.style.position = 'fixed';
+        this.canvas.style.top = '0';
+        this.canvas.style.left = '0';
+        this.canvas.style.zIndex = zIndex;
+        this.canvas.style.pointerEvents = 'none'; // Pour ne pas bloquer les clics sur les boutons
+
+        // Gestion du redimensionnement
+        window.addEventListener('resize', () => this.resize());
+        this.resize();
+        this.draw(sens);
+    }
+
+    resize() {
+        this.canvas.width = window.innerWidth;
+        this.canvas.height = window.innerHeight;
+    }
+
+    draw(sens = "normal") {
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        this.ctx.strokeStyle = this.color;
+        this.ctx.lineWidth = 1;
+
+        // Mise à jour de l'offset
+        this.offset = (this.offset + this.speed) % this.gridSize;
+        if (sens === "normal") {
+            // Lignes verticales
+            for (let x = this.offset; x < this.canvas.width; x += this.gridSize) {
+                this.ctx.beginPath();
+                this.ctx.moveTo(x, 0);
+                this.ctx.lineTo(x, this.canvas.height);
+                this.ctx.stroke();
+            }
+
+            // Lignes horizontales
+            for (let y = this.offset; y < this.canvas.height; y += this.gridSize) {
+                this.ctx.beginPath();
+                this.ctx.moveTo(0, y);
+                this.ctx.lineTo(this.canvas.width, y);
+                this.ctx.stroke();
+            }
+        }
+        //pareillement pour le sens reverse
+        else if (sens === "reverse") {
+            // Lignes verticales
+            for (let x = this.gridSize - this.offset; x < this.canvas.width; x += this.gridSize) {
+                this.ctx.beginPath();
+                this.ctx.moveTo(x, 0);
+                this.ctx.lineTo(x, this.canvas.height);
+                this.ctx.stroke();
+            }
+            // Lignes horizontales
+            for (let y = this.gridSize - this.offset; y < this.canvas.height; y += this.gridSize) {
+                this.ctx.beginPath();
+                this.ctx.moveTo(0, y);
+                this.ctx.lineTo(this.canvas.width, y);
+                this.ctx.stroke();
+            }
+        }
+        // Appel récursif pour l'animation
+        requestAnimationFrame(() => this.draw(sens));
+    }
+    
+}
\ No newline at end of file
diff --git a/srcs/frontend/src/index.html b/srcs/frontend/src/index.html
index c95b318..108c931 100644
--- a/srcs/frontend/src/index.html
+++ b/srcs/frontend/src/index.html
@@ -18,6 +18,6 @@
     </menu>
     <button onclick="direBonjour()" style="position: absolute; top: 20%; left: 50%; z-index: 1;">Dont click !</button>
   </body>
-  <script src="app.js"></script>
+  <script type= "module" src="app.js"></script>
   
 </html>
\ No newline at end of file
diff --git a/srcs/frontend/src/windows.js b/srcs/frontend/src/windows.js
new file mode 100644
index 0000000..88040c1
--- /dev/null
+++ b/srcs/frontend/src/windows.js
@@ -0,0 +1,113 @@
+export class fenetre {
+    constructor(width = 320, height = 220, title = "Window") {
+        this.main = document.createElement("div");
+        this.main.style.width = width + "px";
+        this.main.style.height = height + "px";
+        this.main.style.position = "fixed";
+        this.main.style.top = "50%";
+        this.main.style.left = "50%";
+        this.main.style.transform = "translate(-50%, -50%)";
+        this.main.style.backgroundColor = "#000";
+        this.main.style.border = "2px ridge white";
+        this.main.style.color = "white";
+        this.main.style.zIndex = "100";
+        this.main.style.display = "none";
+
+        // Header
+        this.header = document.createElement("div");
+        this.header.innerText = title;
+        this.header.style.padding = "6px";
+        this.header.style.background = "#222";
+        this.header.style.cursor = "move";
+
+        // Close
+        this.closeBtn = document.createElement("span");
+        this.closeBtn.innerText = "✖";
+        this.closeBtn.style.float = "right";
+        this.closeBtn.style.cursor = "pointer";
+        this.closeBtn.onclick = () => this.hide();
+
+        this.header.appendChild(this.closeBtn);
+
+        // Body
+        this.body = document.createElement("div");
+        this.body.style.padding = "10px";
+
+        this.main.append(this.header, this.body);
+        document.body.appendChild(this.main);
+    }
+
+    show() {
+        this.main.style.display = "block";
+    }
+
+    hide() {
+        this.main.style.display = "none";
+    }
+}
+
+export class LoginWindow extends fenetre {
+    constructor() {
+        super(320, 240, "Connexion");
+
+        this.mode = "login"; // login | register
+
+        this.username = document.createElement("input");
+        this.username.placeholder = "Username";
+
+        this.password = document.createElement("input");
+        this.password.type = "password";
+        this.password.placeholder = "Password";
+
+        this.submit = document.createElement("button");
+        this.submit.innerText = "Se connecter";
+
+        this.switch = document.createElement("button");
+        this.switch.innerText = "S'inscrire";
+
+        this.message = document.createElement("div");
+        this.message.style.fontSize = "0.8em";
+
+        this.body.append(
+            this.username,
+            this.password,
+            this.submit,
+            this.switch,
+            this.message
+        );
+
+        this.applyStyles();
+        this.bindEvents();
+    }
+
+    applyStyles() {
+        this.body.style.display = "flex";
+        this.body.style.flexDirection = "column";
+        this.body.style.gap = "8px";
+    }
+
+    bindEvents() {
+        this.switch.onclick = () => this.toggleMode();
+
+        this.submit.onclick = () => {
+            this.message.innerText =
+                this.mode === "login"
+                    ? "Tentative de connexion..."
+                    : "Tentative d'inscription...";
+        };
+    }
+
+    toggleMode() {
+        if (this.mode === "login") {
+            this.mode = "register";
+            this.header.firstChild.textContent = "Inscription";
+            this.submit.innerText = "S'inscrire";
+            this.switch.innerText = "Se connecter";
+        } else {
+            this.mode = "login";
+            this.header.firstChild.textContent = "Connexion";
+            this.submit.innerText = "Se connecter";
+            this.switch.innerText = "S'inscrire";
+        }
+    }
+}
\ No newline at end of file