diff --git a/GRONDINClarel/expernet.png b/GRONDINClarel/expernet.png
new file mode 100644
index 0000000..b770e78
Binary files /dev/null and b/GRONDINClarel/expernet.png differ
diff --git a/GRONDINClarel/index.html b/GRONDINClarel/index.html
index 72bcddd..4bb8a49 100644
--- a/GRONDINClarel/index.html
+++ b/GRONDINClarel/index.html
@@ -6,15 +6,76 @@
     <title>Page de Clarel</title>
     <meta name='viewport' content='width=device-width, initial-scale=1'>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-    <script src='main.js'></script>
 </head>
-<body style="background-image: url('https://wallpaperaccess.com/full/4623107.png');" class="text-white">
-    <p class="text-center"><i>Ceci est la page de Clarel</i></p>
-    <div class="d-flex align-middle justify-content-center">
-        <div class="d-flex flex-column bg-dark rounded p-2">
-            <div class="text-center pb-2">Bienvenue mon Rèf</div>
-            <div class="d-flex justify-content-center"><a href="https://github.com/Farad77/Bidule" class="btn btn-primary mb-3">GitHub</a></div>
+<body style="background-image: url('https://expernet-campus.re/wp-content/uploads/2021/12/entree-expernet-campus-informatique-1024x576.png');" class="text-white">
+    <h1><p class="text-center pt-3 pb-5"><i>CDA8 : Expernet 2024-2026</i></p></h1>
+
+        <div class="pl-5">
+            <a href="C:\Users\lenovo\Documents\RemoteRepository\ExternalWorkspace\Bidule\GRONDINClarel\login.html" class="btn btn-primary">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
+                <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8"/>
+            </svg>
+            Retour
+        </a>
         </div>
+
+    <div class="pt-5">
+        <table class="table table-bordered container">
+            <thead class="thead-dark">
+              <tr>
+                <th scope="col">NOM :</th>
+                <th scope="col">Prénom :</th>
+    
+              </tr>
+            </thead>
+            <tbody>
+            <tr class="table-active">
+                <td>AHOVEY</td>
+                <td>Saint-George</td>
+            </tr>
+            <tr class="table-active">
+                <td>BARRET</td>
+                <td>Toma</td>
+            </tr>
+            <tr class="table-active">
+                <td>CELEMANI</td>
+                <td>Théo</td>
+            </tr>
+            <tr class="table-active">
+                <td>RAMASSY</td>
+                <td>Cheun</td>
+            </tr>
+            <tr class="table-active">
+                <td>DEMONTIS</td>
+                <td>Matisse</td>
+            </tr>
+            <tr class="table-active">
+                <td>DORIAN</td>
+                <td>Dorian</td>
+            </tr>
+            <tr class="table-active">
+                <td>GRONDIN</td>
+                <td>Clarel</td>
+            </tr>
+            <tr class="table-active">
+                <td>HOARAU</td>
+                <td>Jérèmy</td>
+            </tr>
+            <tr class="table-active">
+                <td>MUNIER</td>
+                <td>Jérome</td>
+            </tr>
+            <tr class="table-active">
+                <td>PEDRE</td>
+                <td>Gabriel</td>
+            </tr>
+            <tr class="table-active">
+                <td>NOEL</td>
+                <td>Thomy</td>
+            </tr>
+                
+            </tbody>
+        </table>
     </div>
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
diff --git a/GRONDINClarel/login.html b/GRONDINClarel/login.html
new file mode 100644
index 0000000..02bafaf
--- /dev/null
+++ b/GRONDINClarel/login.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <title>Connexion</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+
+</head>
+<body>
+    <div class="col-md pb-2 d-flex justify-content-center">
+        <form class="d-flex flex-column rounded p-5 card">
+            <img src="https://expernet.re/wp-content/themes/tm-bootstrap/images/logo.png" alt="expernet" class=" pb-4 img-fluid">
+
+        <!-- Email input -->
+        <div data-mdb-input-init class="form-outline mb-4">
+            <label class="form-label" for="form2Example1">Adresse mail :</label>
+            <input type="email" id="form2Example1" class="form-control" />
+        </div>
+      
+        <!-- Password input -->
+        <div data-mdb-input-init class="form-outline mb-4">
+            <label class="form-label" for="form2Example2">Mot de passe :</label>
+            <input type="password" id="form2Example2" class="form-control" />
+        </div>
+      
+        <!-- 2 column grid layout for inline styling -->
+        <div class="row mb-4">
+          <div class="col d-flex justify-content-center">
+            <!-- Checkbox -->
+            <div class="form-check">
+                <label class="form-check-label" for="form2Example31"> Se souvenir de moi </label>
+                <input class="form-check-input" type="checkbox" value="" id="form2Example31" checked />
+            </div>
+          </div>
+      
+          <div class="col">
+            <!-- Simple link -->
+            <a href="#!">Mot de passe oublié</a>
+          </div>
+        </div>
+      
+        <!-- Submit button -->
+        <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-block mb-4">Se connecter</button>
+      
+        <!-- Register buttons -->
+        <div class="text-center">
+          <p>Pas inscrit ? <a href="#!">S'inscrire</a></p>
+          <p>ou se connecter en anonyme avec :</p>
+            <a href="C:\Users\lenovo\Documents\RemoteRepository\ExternalWorkspace\Bidule\GRONDINClarel\index.html" class="">Anonyme</a>
+      </form>
+    </div>
+</body>
+</html>
\ No newline at end of file
