diff --git a/frontend/login.html b/frontend/login.html
new file mode 100644
index 0000000000000000000000000000000000000000..6a94fa39550e8d8ec6f586e493eff51fa08de02e
--- /dev/null
+++ b/frontend/login.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="fr">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>LookMyClaim</title>
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+        <header>
+            <h1>LookMyClaim!</h1>
+            <nav>
+                <ul>
+                    <li><a href="index.html">Accueil</a></li>
+                    <li><a href="petitions.html">Pétitions</a></li>
+                    <li><a href="registration.html">S'enregistrer</a></li>
+                    <li><a href="login.html">Se connecter</a></li>
+                </ul>
+            </nav>
+        </header>
+        
+        <main id="home">
+            <section id="login">
+                <h2>Connexion</h2>
+                <div id="authForms">
+                    <form id="loginForm">
+                        <input type="text" id="loginUsername" placeholder="Nom d'utilisateur" required>
+                        <input type="password" id="loginPassword" placeholder="Mot de passe" required>
+                        <button type="submit">Se connecter</button>
+                    </form>
+                </div>
+            </section>
+        </main>
+
+        <footer>
+            <p>&copy; 2025 LookMyClaim. Tous droits réservés.</p>
+        </footer>
+
+        <script src="script.js"></script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/frontend/petitions.html b/frontend/petitions.html
new file mode 100644
index 0000000000000000000000000000000000000000..8e68826414c02b270bdb79d75af1b6d440aa4a97
--- /dev/null
+++ b/frontend/petitions.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="fr">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>LookMyClaim</title>
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+        <header>
+            <h1>LookMyClaim!</h1>
+            <nav>
+                <ul>
+                    <li><a href="index.html">Accueil</a></li>
+                    <li><a href="petitions.html">Pétitions</a></li>
+                    <li><a href="registration.html">S'enregistrer</a></li>
+                    <li><a href="login.html">Se connecter</a></li>
+                </ul>
+            </nav>
+        </header>
+        
+        <main>
+            <section>
+              <h2>Nos Pétitions</h2>
+              <ul>
+                <li>Pétition 1 : <button disabled>Signer</button></li>
+                <li>Pétition 2 : <button disabled>Signer</button></li>
+                <li>Pétition 3 : <button disabled>Signer</button></li>
+              </ul>
+            </section>
+        </main>
+
+        <footer>
+            <p>&copy; 2025 LookMyClaim. Tous droits réservés.</p>
+        </footer>
+
+        <script src="script.js"></script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/frontend/registration.html b/frontend/registration.html
new file mode 100644
index 0000000000000000000000000000000000000000..c7abe7559220cfbf95fbcfd86aa6d08b1a8118dd
--- /dev/null
+++ b/frontend/registration.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="fr">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>LookMyClaim</title>
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+        <header>
+            <h1>LookMyClaim!</h1>
+            <nav>
+                <ul>
+                    <li><a href="index.html">Accueil</a></li>
+                    <li><a href="petitions.html">Pétitions</a></li>
+                    <li><a href="registration.html">S'enregistrer</a></li>
+                    <li><a href="login.html">Se connecter</a></li>
+                </ul>
+            </nav>
+        </header>
+        
+        <main id="home">
+            <section id="registration">
+                <h2>S'enregistrer</h2>
+                <div id="authForms">
+                    <form id="registerForm">
+                        <input type="text" id="registerUsername" placeholder="Nom d'utilisateur" required>
+                        <input type="password" id="registerPassword" placeholder="Mot de passe" required>
+                        <button type="submit">S'inscrire</button>
+                    </form>
+                    <p id="authMessage"></p>
+                </div>
+            </section>
+        </main>
+
+        <footer>
+            <p>&copy; 2025 LookMyClaim. Tous droits réservés.</p>
+        </footer>
+
+        <script src="script.js"></script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/frontend/script.js b/frontend/script.js
new file mode 100644
index 0000000000000000000000000000000000000000..f17f8b81b9028f57dbb885a9c174922f7660f9e2
--- /dev/null
+++ b/frontend/script.js
@@ -0,0 +1,42 @@
+// Simuler un système d'authentification
+const users = [];
+
+document.getElementById('registerForm').addEventListener('submit', function (e) {
+  e.preventDefault();
+  const username = document.getElementById('registerUsername').value;
+  const password = document.getElementById('registerPassword').value;
+
+  const userExists = users.some(user => user.username === username);
+  if (userExists) {
+    document.getElementById('authMessage').textContent = "Nom d'utilisateur déjà pris.";
+    return;
+  }
+
+  users.push({ username, password });
+  document.getElementById('authMessage').textContent = "Inscription réussie ! Vous pouvez maintenant vous connecter.";
+  this.reset();
+});
+
+document.getElementById('loginForm').addEventListener('submit', function (e) {
+  e.preventDefault();
+  const username = document.getElementById('loginUsername').value;
+  const password = document.getElementById('loginPassword').value;
+
+  const user = users.find(user => user.username === username && user.password === password);
+  if (user) {
+    document.getElementById('authMessage').textContent = `Bienvenue, ${username} ! Vous pouvez signer des pétitions.`;
+    enablePetitions();
+  } else {
+    document.getElementById('authMessage').textContent = "Nom d'utilisateur ou mot de passe incorrect.";
+  }
+  this.reset();
+});
+
+function enablePetitions() {
+  const buttons = document.querySelectorAll('button[disabled]');
+  buttons.forEach(button => {
+    button.disabled = false;
+    button.style.background = '#007BFF';
+    button.style.cursor = 'pointer';
+  });
+}
\ No newline at end of file
diff --git a/frontend/style.css b/frontend/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..9bce2118c7877eab842e188852d3d05bf142d919
--- /dev/null
+++ b/frontend/style.css
@@ -0,0 +1,64 @@
+/* Style de base pour le site */
+body {
+    font-family: Arial, sans-serif;
+    line-height: 1.6;
+    margin: 0;
+    padding: 0;
+    color: #333;
+    background-color: #f9f9f9;
+}
+
+header {
+    background: #333;
+    color: #fff;
+    padding: 1em 0;
+    text-align: center;
+}
+
+header h1 {
+    margin: 0;
+}
+
+nav ul {
+    list-style: none;
+    padding: 0;
+}
+
+nav ul li {
+    display: inline;
+    margin: 0 10px;
+}
+
+nav ul li a {
+    color: #fff;
+    text-decoration: none;
+}
+
+main {
+    padding: 2em;
+}
+
+main section {
+    margin-bottom: 2em;
+}
+
+footer {
+    background: #333;
+    color: #fff;
+    text-align: center;
+    padding: 1em 0;
+    bottom: 0;
+    width: 100%;
+}
+
+button {
+    background: #007BFF;
+    color: #fff;
+    border: none;
+    padding: 0.5em 1em;
+    cursor: pointer;
+}
+
+button:hover {
+    background: #0056b3;
+}
\ No newline at end of file