diff --git a/email.html b/email.html
new file mode 100644
index 0000000..93706db
--- /dev/null
+++ b/email.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Tanière solidaire - Email</title>
+    <link rel="stylesheet" href="/assets/css/style.css">
+</head>
+<body>
+    
+</body>
\ No newline at end of file
diff --git a/index.html b/index.html
index d14db9e..c90b0d0 100644
--- a/index.html
+++ b/index.html
@@ -4,46 +4,44 @@
 <head>
     <meta charset="UTF-8">
     <title>Acceuil de la tanière solidaire</title>
+    <link rel="stylesheet" href="/assets/css/style-acceuil.css">
 </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="/assets/css/style.css">
-
 <body>
-
-    <div class="Header">
-        <h1>La Tanière Solidaire</h1>
-        <input type="checkbox" id="darkMode" name="darkMode">
-    </div>
-    
+    <h1>La Tanière Solidaire</h1>
     <p>
-        Bienvenue sur le server de la tanière solidaire, un <a href="https://la-taniere-solidaire.gay/asso">projet associatif</a>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea variari voluptas distinguique possit, augeri amplificarique non possit. At etiam Athenis, ut e patre audiebam
     </p>
-
-    <h2>Les services :</h2>
-    <a href="-/">
-        <h3>Nextcloud</h3>
-        <div class="service_icon">
-
+    <h2>Les services</h2>
+    <div class="services">
+        <div>
+            <a href="https://nextcloud.la-taniere-solidaire.gay/">
+                <h3>Nextcloud</h3>
+                <img src="assets/img/logo_nextcloud_white.svg" alt="Nextcloud logo">
+            </a>
+            <p>Nextcloud est une suite de services en ligne, vrai remplacement pour la suite google Nextcloud peux synchronisé et partagé vos calendrier, listes de tâches, fichiers, flux RSS, contacts, photos. Si une fonctionalité manque à l'appel, Nextcloud propose un répertoire d'application crée par la communauté qui nous permet de combler tout les besoins.</p>
         </div>
-    </a>
-    <a href="https://bitwarden.la-taniere-solidaire.gay/">
-        <h3>Bitwarden</h3>
-        <div class="service_icon">
-
+        <div>
+            <a href="https://bitwarden.la-taniere-solidaire.gay/">
+                <h3>VaultWarden</h3>
+                <img src="assets/img/vaultwarden-icon.svg" alt="VaultWarden logo">
+            </a>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea</p>
         </div>
-    </a>
-    <a href="https://forgejo.la-taniere-solidaire.gay/">
-        <h3>Forgejo</h3>
-        <div class="service_icon">
-
+        <div>
+            <a href="https://forgejo.la-taniere-solidaire.gay/">
+                <h3>Forgejo</h3>
+                <img src="assets/img/forgejo-logo.svg" alt="Forgejo logo">
+            </a>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea</p>
         </div>
-    </a>
-    <a href="https://la-taniere-solidaire.gay/">
-        <h3>Email</h3>
-        <div class="service_icon">
-
+        <div>
+            <a href="https://la-taniere-solidaire.gay/email">
+                <h3>Email</h3>
+                <img src="assets/img/email.svg" alt="Email logo">
+            </a>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea</p>
         </div>
-    </a>
+    </div>
 </body>
 
 </html>
\ No newline at end of file
