diff --git a/srcs/frontend/src/app.js b/srcs/frontend/src/app.js
index 0d5a39e..718acfa 100644
--- a/srcs/frontend/src/app.js
+++ b/srcs/frontend/src/app.js
@@ -1,138 +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 = 300, height = 150) {
-        this.width = width;
-        this.height = height;
-        this.main = document.createElement("div");
-        this.main.style.width = this.width + "px";
-        this.main.style.height = this.height + "px";
-        this.main.style.position = "absolute";
-        this.main.style.top = "50%";
-        this.main.style.left = "50%";
-        this.main.style.transform = "translate(-50%, -50%)";
-        this.main.style.backgroundColor = '#000000ff';
-        this.main.style.border = "1.4mm ridge white";
-        this.body = document.createElement("div");
-        this.body.style.width = "50%";
-        this.body.style.height = "50%";
-        this.body.style.backgroundColor = '#faeaea';
-        document.body.appendChild(this.main);
-        this.main.appendChild(this.body);
-    }
-}
 
 const menuElement = new Element("menu");
 const loginElement = new MenuElement("login");
@@ -145,4 +20,9 @@ const gridgreen = new Grid('#143a0fff', -1, 25, 0.12, "normal");
 const gridReverseRed = new Grid('#3a0f0f75', -1, 12.5, 0.09, "reverse");
 
 //Ajouter les fenetres
-const loginWindow = new fenetre();
\ No newline at end of file
+const test = new fenetre();
+const loginWindow = new LoginWindow();
+
+document.getElementById("login").addEventListener("click", () => {
+    loginWindow.show();
+});
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 9b43ecd..108c931 100644
--- a/srcs/frontend/src/index.html
+++ b/srcs/frontend/src/index.html
@@ -14,13 +14,10 @@
         <li><button id="accueil">Accueil</button></li>
         <li><button id="explorer">Explorer</button></li>
         <li><button id="registered">Enregistré</button></li>
-        <svg id ="login" version="1.1" width="15" height="15" >
-            <circle cx="50%" cy="30%" r="5" fill="black" />
-            <circle cx="50%" cy="100%" r="7" fill="black" />
-        </svg>
+        <li><button id="login">Login</button></li>
     </menu>
-    <button onclick="direBonjour()" style="position: absolute; top: 20%; left: 50%; z-index: 1;">Click me !</button>
+    <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..fc3024c
--- /dev/null
+++ b/srcs/frontend/src/windows.js
@@ -0,0 +1,126 @@
+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";
+    }
+
+    connexion(){
+        console.log("methode connexion lancée");
+    }
+
+    inscription(){
+        console.log("methode inscription lancée");
+    }
+
+    bindEvents() {
+        this.switch.onclick = () => this.toggleMode();
+
+        this.submit.onclick = () => {
+            this.message.innerText = this.mode === "login"
+                                                    ? "Tentative de connexion..."
+                                                    : "Tentative d'inscription...";
+            if (this.mode === "login"){
+                this.connexion();
+            }
+            else {
+                this.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