diff --git a/GRONDINClarel/index.html b/GRONDINClarel/index.html
index a4a4289..e575981 100644
--- a/GRONDINClarel/index.html
+++ b/GRONDINClarel/index.html
@@ -10,13 +10,19 @@
 <body style="background-image: url('expernet.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">
+        <div class="pl-5 pr-5 d-flex justify-content-between">
+            <a href="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>
+            </a>
+            <a href="index2.html" class="btn btn-primary">
+                Nouvelle Table
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
+                    <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"/>
+                  </svg>
+                </a>
         </div>
 
     <div class="pt-5">
diff --git a/GRONDINClarel/index2.html b/GRONDINClarel/index2.html
new file mode 100644
index 0000000..2956a0f
--- /dev/null
+++ b/GRONDINClarel/index2.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <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">
+    <link rel="stylesheet" href="https://cdn.datatables.net/2.1.8/css/dataTables.dataTables.css" />
+  
+</head>
+<body style="background-image: url('expernet.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 pr-5 d-flex justify-content-between">
+            <a href="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>
+            <a href="index.html" class="btn btn-primary">
+                Ancienne Table
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
+                    <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"/>
+                  </svg>
+                </a>
+        </div>
+
+    <div class="pt-5">
+        <table class="table compact" id="myTable">
+            <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>
+    <script src="https://cdn.datatables.net/2.1.8/js/dataTables.js"></script>
+    <script>
+        $(document).ready( function () {
+        $('#myTable').DataTable();
+} );
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/GRONDINClarel/navbar.html b/GRONDINClarel/navbar.html
new file mode 100644
index 0000000..3e73383
--- /dev/null
+++ b/GRONDINClarel/navbar.html
@@ -0,0 +1,63 @@
+<html lang="en"><head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+
+    <title>Jumbotron Template for Bootstrap</title>
+
+    <link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/jumbotron/">
+
+    <!-- Bootstrap core CSS -->
+    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
+
+    <!-- Custom styles for this template -->
+    <link href="jumbotron.css" rel="stylesheet">
+  </head>
+
+  <body>
+
+    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
+      <a class="navbar-brand" href="#">Navbar</a>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+
+      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
+        <ul class="navbar-nav mr-auto">
+          <li class="nav-item active">
+            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Link</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link disabled" href="#">Disabled</a>
+          </li>
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+            <div class="dropdown-menu" aria-labelledby="dropdown01">
+              <a class="dropdown-item" href="#">Action</a>
+              <a class="dropdown-item" href="#">Another action</a>
+              <a class="dropdown-item" href="#">Something else here</a>
+            </div>
+          </li>
+        </ul>
+        <form class="form-inline my-2 my-lg-0">
+          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
+          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
+        </form>
+      </div>
+    </nav>
+    <!-- Bootstrap core JavaScript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
+    <script src="../../assets/js/vendor/popper.min.js"></script>
+    <script src="../../dist/js/bootstrap.min.js"></script>
+  
+
+</body></html>
\ No newline at end of file

NOM :	Prénom :
AHOVEY	Saint-George
BARRET	Toma
CELEMANI	Théo
RAMASSY	Cheun
DEMONTIS	Matisse
DORIAN	Dorian
GRONDIN	Clarel
HOARAU	Jérèmy
MUNIER	Jérome
PEDRE	Gabriel
NOEL	Thomy