diff --git a/BToma/list.html b/BToma/list.html
index b2933b4..3b11224 100644
--- a/BToma/list.html
+++ b/BToma/list.html
@@ -39,104 +39,90 @@
         <thead>
           <tr>
             <th scope="col">#</th>
-            <th scope="col">Nom et prénom</th>
+            <th scope="col">Nom</th>
+            <th scope="col">Prénom</th>
           </tr>
         </thead>
         <tbody>
           <tr>
             <th scope="row">1</th>
-            <td>Ludovic RASSABY</td>
+            <td>RASSABY</td>
+            <td>Ludovic</td>
           </tr>
           <tr>
             <th scope="row">2</th>
-            <td>AHOVEY Saint-George</td>
+            <td>AHOVEY</td>
+            <td>Saint-George</td>
           </tr>
           <tr>
             <th scope="row">3</th>
-            <td>AHYONG Emjy</td>
+            <td>AHYONG</td>
+            <td>Emjy</td>
           </tr>
           <tr>
             <th scope="row">4</th>
-            <td>BARRET Toma</td>
+            <td>BARRET</td>
+            <td>Toma</td>
           </tr>
           <tr>
             <th scope="row">5</th>
-            <td>CELEMANI Theo</td>
+            <td>CELEMANI</td>
+            <td>Theo</td>
           </tr>
           <tr>
             <th scope="row">6</th>
-            <td>Cheun RAMASSY</td>
+            <td>RAMASSY</td>
+            <td>Cheun</td>
           </tr>
           <tr>
             <th scope="row">7</th>
-            <td>Demontis matisse</td>
+            <td>Demontis</td>
+            <td>matisse</td>
           </tr>
           <tr>
             <th scope="row">8</th>
-            <td>GRONDIN Clarel</td>
+            <td>GRONDIN</td>
+            <td>Clarel</td>
           </tr>
           <tr>
             <th scope="row">9</th>
-            <td>Hoarau Jeremy</td>
+            <td>Hoarau</td>
+            <td>Jeremy</td>
           </tr>
           <tr>
             <th scope="row">10</th>
-            <td>Julien HOARAU</td>
+            <td>HOARAU</td>
+            <td>Julien</td>
           </tr>
           <tr>
             <th scope="row">11</th>
-            <td>Thomy NOEL</td>
+            <td>NOEL</td>
+            <td>Thomy</td>
           </tr>
           <tr>
             <th scope="row">12</th>
-            <td>Lou DUCAUROY</td>
+            <td>DUCAUROY</td>
+            <td>Lou</td>
           </tr>
           <tr>
             <th scope="row">13</th>
-            <td>PEDRE Gabriel</td>
+            <td>PEDRE</td>
+            <td>Gabriel</td>
           </tr>
           <tr>
             <th scope="row">14</th>
-            <td>MUNIER Jerome</td>
+            <td>MUNIER</td>
+            <td>Jerome</td>
           </tr>
           <tr>
             <th scope="row">15</th>
-            <td>BOYER Dorian</td>
+            <td>BOYER</td>
+            <td>Dorian</td>
           </tr>
         </tbody>
       </table>
     </div>
   </div>
-    <!-- <div class="container">
-        <div class="position-absolute top-50 start-50 translate-middle">
-            <div class="d-flex justify-content-center align-items-center">
-                <div class="spinner-border text-primary" role="status">
-                    <span class="visually-hidden">Loading...</span>
-                </div>
-                <div class="spinner-border text-secondary" role="status">
-                    <span class="visually-hidden">Loading...</span>
-                </div>
-                <div class="spinner-border text-success" role="status">
-                    <span class="visually-hidden">Loading...</span>
-                </div>
-                <div class="spinner-border text-danger" role="status">
-                    <span class="visually-hidden">Loading...</span>
-                </div>
-                <div class="spinner-border text-warning" role="status">
-                    <span class="visually-hidden">Loading...</span>
-                </div>
-                <div class="spinner-border text-info" role="status">
-                    <span class="visually-hidden">Loading...</span>
-                </div>
-                <div class="spinner-border text-light" role="status">
-                    <span class="visually-hidden">Loading...</span>
-                </div>
-                <div class="spinner-border text-dark" role="status">
-                    <span class="visually-hidden">Loading...</span>
-                </div>
-            </div>
-        </div>
-    </div> -->
 
       <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
       <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
diff --git a/CELEMANITheo/liste.html b/CELEMANITheo/liste.html
index 7f9d661..ce1366b 100644
--- a/CELEMANITheo/liste.html
+++ b/CELEMANITheo/liste.html
@@ -24,48 +24,62 @@
             <table class="table table-primary">
                 <thead>
                     <tr>
-                        <th scope="col">NOM et Prenom</th>
+                        <th scope="col">NOM</th>
+                        <th scope="col">Prenom</th>
                     </tr>
                 </thead>
                 <tbody>
                     <tr class="">
-                        <td scope="row">AHOVEY Saint-George</td>
+                        <td scope="row">AHOVEY</td>
+                        <td scope="row">Saint-George</td>
                     </tr>
                     <tr class="">
-                        <td scope="row">AH-YONG Emjy</td>
+                        <td scope="row">AH-YONG</td>
+                        <td scope="row">Emjy</td>
                     </tr>
                     <tr class="">
-                        <td scope="row">BARRET Toma</td>
+                        <td scope="row">BARRET</td>
+                        <td scope="row">Toma</td>
                     </tr>
                     <tr class="">
-                        <td scope="row">CELEMANI Theo</td>
+                        <td scope="row">CELEMANI</td>
+                        <td scope="row">Theo</td>
                     </tr>
                     <tr class="">
-                        <td scope="row">RAMASSY Cheun</td>
+                        <td scope="row">RAMASSY</td>
+                        <td scope="row">Cheun</td>
                     </tr>
                     <tr class="">
-                        <td scope="row">DEMONTIS Matisse</td>
+                        <td scope="row">DEMONTIS</td>
+                        <td scope="row">Matisse</td>
                     </tr>
                     <tr class="">
-                        <td scope="row">DUCAUROY Lou</td>
+                        <td scope="row">DUCAUROY</td>
+                        <td scope="row">Lou</td>
                     </tr>
                     <tr class="">
-                        <td scope="row">GRONDIN Clarel</td>
+                        <td scope="row">GRONDIN</td>
+                        <td scope="row">Clarel</td>
                     </tr>
                     <tr class="">
-                        <td scope="row">HOARAU Jeremy</td>
+                        <td scope="row">HOARAU</td>
+                        <td scope="row">Jeremy</td>
                     </tr>
                     <tr class="">
-                        <td scope="row">MUNIER Jerome</td>
+                        <td scope="row">MUNIER</td>
+                        <td scope="row">Jerome</td>
                     </tr>
                     <tr class="">
-                        <td scope="row">PEDRE Gabriel</td>
+                        <td scope="row">PEDRE</td>
+                        <td scope="row">Gabriel</td>
                     </tr>
                     <tr class="">
-                        <td scope="row">NOEL Thomy</td>
+                        <td scope="row">NOEL</td>
+                        <td scope="row">Thomy</td>
                     </tr>
                     <tr class="">
                         <td scope="row">Dorian</td>
+                        <td scope="row">Dorian</td>
                     </tr>
                 </tbody>
             </table>
diff --git a/dorian/index.html b/dorian/index.html
new file mode 100644
index 0000000..6f757bb
--- /dev/null
+++ b/dorian/index.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
+    <link rel="stylesheet" href="style.css">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+    <title>Document</title>
+</head>
+<body>
+    <header>
+        <div class="row d-flex justify-content-end w-100">
+            <div class="w-25 ms-5 d-flex justify-content-center ">
+                <i class="bi bi-instagram me-3"></i>
+                <i class="bi bi-facebook"></i>
+            </div>
+        </div>
+        <div class="flex-row d-flex align-items-center justify-content-center w-100 p-3">
+            <div class="flex-row d-flex align-items-center justify-content-center">
+                <img id="logo" src="public/logo.png" alt="Logo expernet écoles de formation" class="w-20">
+                <h4 class="ms-3 w-50">CENTRE DE FORMATION INFORMATIQUEÀ LA RÉUNION DEPUIS 2002 !</h4>
+            </div>
+            <div class="d-flex flex-column">
+                <button type="button" class="btn btn-warning mb-3"><i class="bi bi-calculator"></i> Demande de devis</button>
+                <button type="button" class="btn btn-warning"><i class="i bi-calculator"></i> Découvrez-notre école</button>
+            </div> 
+        </div>
+        <div></div>
+        <nav class="navbar navbar-expand-lg bg-info">
+            <div class="container-fluid d-flex justify-content-center align-items-center">
+                <ul class="d-flex flex-row gap-4 m-0 p-4">
+                    <li class="list-group-item"><a class="text-decoration-none text-light" href="">NOS CENTRE</a></li>
+                    <li class="list-group-item"><a class="text-decoration-none text-light" href="">FORMATION</a></li>
+                    <li class="list-group-item"><a class="text-decoration-none text-light" href="">PLANNING</a></li>
+                    <li class="list-group-item"><a class="text-decoration-none text-light" href="">FINACEMENT</a></li>
+                    <li class="list-group-item"><a class="text-decoration-none text-light" href="">DIGITAL-LEARNING</a></li>
+                    <li class="list-group-item"><a class="text-decoration-none text-light" href="">BLOG</a></li>
+                </ul>
+            </div>
+        </nav>
+    </header>
+    <main class="row p-5">
+        <div class="col d-flex align-items-center">
+            <p class="text-justify text-light fs-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse sequi animi officia accusamus, ad reprehenderit dolor iusto ab suscipit nihil deleniti, aspernatur at quia cumque delectus, necessitatibus sunt. Accusantium, inventore!</p>
+        </div>
+        <div class="card border-0 col" id="card">
+            <div class="card-body">
+                <form>
+                    <div class="row mb-3">
+                      <div class="col-sm-10">
+                        <input type="email" placeholder="Votre email" class="form-control" id="inputEmail3" required>
+                      </div>
+                    </div>
+                    <div class="row mb-3">
+                      <div class="col-sm-10">
+                        <input type="password" placeholder="Entrez votre mot de passe..." class="form-control" id="inputPassword3" required>
+                      </div>
+                    </div>
+                    <div class="row mb-3">
+                      <div class="col-sm-10 offset-sm-2">
+                      </div>
+                    </div>
+                    <button type="submit" class="btn btn-primary">Connexion</button>
+                    <p class="mt-3">
+                        <a href="list.html" class="link-offset-2 link-underline link-underline-opacity-0" href="#">Direction vers la liste des étudiant</a>
+                    </p>
+                  </form>
+            </div>
+        </div>
+    </main>
+    <footer class="bg-info">
+        <div class="container-fluid d-flex justify-content-center align-items-center">
+            <ul class="d-flex flex-row gap-4 m-0 p-4">
+                <li class="list-group-item"><a class="text-decoration-none text-light" href="">NOS CENTRE</a></li>
+                <li class="list-group-item"><a class="text-decoration-none text-light" href="">FORMATION</a></li>
+                <li class="list-group-item"><a class="text-decoration-none text-light" href="">PLANNING</a></li>
+                <li class="list-group-item"><a class="text-decoration-none text-light" href="">FINACEMENT</a></li>
+                <li class="list-group-item"><a class="text-decoration-none text-light" href="">DIGITAL-LEARNING</a></li>
+                <li class="list-group-item"><a class="text-decoration-none text-light" href="">BLOG</a></li>
+            </ul>
+        </div>
+    </footer>
+</body>
+</html>
\ No newline at end of file
diff --git a/dorian/list.html b/dorian/list.html
new file mode 100644
index 0000000..1e93d2c
--- /dev/null
+++ b/dorian/list.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
+    <link rel="stylesheet" href="style.css">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+    <title>Document</title>
+</head>
+<body>
+    <header>
+        <div class="row d-flex justify-content-end w-100">
+            <div class="w-25 ms-5 d-flex justify-content-center ">
+                <i class="bi bi-instagram me-3"></i>
+                <i class="bi bi-facebook"></i>
+            </div>
+        </div>
+        <div class="flex-row d-flex align-items-center justify-content-center w-100 p-3">
+            <div class="flex-row d-flex align-items-center justify-content-center">
+                <img id="logo" src="public/logo.png" alt="Logo expernet écoles de formation" class="w-20">
+                <h4 class="ms-3 w-50">CENTRE DE FORMATION INFORMATIQUEÀ LA RÉUNION DEPUIS 2002 !</h4>
+            </div>
+            <div class="d-flex flex-column">
+                <button type="button" class="btn btn-warning mb-3"><i class="bi bi-calculator"></i> Demande de devis</button>
+                <button type="button" class="btn btn-warning"><i class="i bi-calculator"></i> Découvrez-notre école</button>
+            </div> 
+        </div>
+        <div></div>
+        <nav class="navbar navbar-expand-lg bg-info">
+            <div class="container-fluid d-flex justify-content-center align-items-center">
+                <ul class="d-flex flex-row gap-4 m-0 p-4">
+                    <li class="list-group-item"><a class="text-decoration-none text-light" href="">NOS CENTRE</a></li>
+                    <li class="list-group-item"><a class="text-decoration-none text-light" href="">FORMATION</a></li>
+                    <li class="list-group-item"><a class="text-decoration-none text-light" href="">PLANNING</a></li>
+                    <li class="list-group-item"><a class="text-decoration-none text-light" href="">FINACEMENT</a></li>
+                    <li class="list-group-item"><a class="text-decoration-none text-light" href="">DIGITAL-LEARNING</a></li>
+                    <li class="list-group-item"><a class="text-decoration-none text-light" href="">BLOG</a></li>
+                </ul>
+            </div>
+        </nav>
+    </header>
+    <main>
+        <table class="table">
+            <thead>
+              <tr>
+                <th scope="col">Num</th>
+                <th scope="col">Nom</th>
+                <th scope="col">Prenom</th>
+                <th scope="col">Formation</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <th scope="row">1</th>
+                <td>Boyer</td>
+                <td>Dorian</td>
+                <td>CDA</td>
+              </tr>
+              <tr>
+                <th scope="row">2</th>
+                <td>Clement</td>
+                <td>Théo</td>
+                <td>CDA</td>
+              </tr>
+              <tr>
+                <th scope="row">3</th>
+                <td>Grondin</td>
+                <td>Clarel</td>
+                <td>CDA</td>
+              </tr>
+              <tr>
+                <th scope="row">3</th>
+                <td>Munier</td>
+                <td>Jerome</td>
+                <td>CDA</td>
+              </tr>
+              <tr>
+                <th scope="row">3</th>
+                <td>Pedre</td>
+                <td>Gabriel</td>
+                <td>CDA</td>
+              </tr>
+              <tr>
+                <th scope="row">3</th>
+                <td>Demontis</td>
+                <td>Matisse</td>
+                <td>CDA</td>
+              </tr>
+              <tr>
+                <th scope="row">3</th>
+                <td>Ahyong</td>
+                <td>Emjy</td>
+                <td>CDA</td>
+              </tr>
+              <tr>
+                <th scope="row">3</th>
+                <td>Ahovey</td>
+                <td>SaintGeorge</td>
+                <td>CDA</td>
+              </tr>
+            </tbody>
+          </table>
+    </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/dorian/public/fond.webp b/dorian/public/fond.webp
new file mode 100644
index 0000000..5065c96
Binary files /dev/null and b/dorian/public/fond.webp differ
diff --git a/dorian/public/logo.png b/dorian/public/logo.png
new file mode 100644
index 0000000..5623447
Binary files /dev/null and b/dorian/public/logo.png differ
diff --git a/dorian/style.css b/dorian/style.css
new file mode 100644
index 0000000..307c5a6
--- /dev/null
+++ b/dorian/style.css
@@ -0,0 +1,10 @@
+#logo{
+    width: 20%;
+}
+main {
+    background: url(public/fond.webp);
+}
+#card{
+    backdrop-filter: blur(10px);
+    background-color: rgba(255, 255, 255, 0.4);
+}
\ No newline at end of file