diff --git a/assets/css/style.css b/assets/css/style.css
new file mode 100644
index 0000000..aa6bd12
--- /dev/null
+++ b/assets/css/style.css
@@ -0,0 +1,22 @@
+:root {
+  background-color: white;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+.Header {
+  display: flex;
+  flex-direction: row;
+}
+.Header h1 {
+  margin: auto;
+  align-self: center;
+}
+.Header input {
+  margin-top: auto;
+  margin-bottom: auto;
+  align-self: flex-end;
+}/*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/assets/css/style.css.map b/assets/css/style.css.map
new file mode 100644
index 0000000..19aeeba
--- /dev/null
+++ b/assets/css/style.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,uBAAA;ACCJ;;ADEA;EACI,aAAA;EACA,sBAAA;ACCJ;;ADEA;EACI,aAAA;EACA,mBAAA;ACCJ;ADCI;EACI,YAAA;EACA,kBAAA;ACCR;ADEI;EACI,gBAAA;EACA,mBAAA;EACA,oBAAA;ACAR","file":"style.css"}
\ No newline at end of file
diff --git a/assets/css/style.scss b/assets/css/style.scss
new file mode 100644
index 0000000..4fa4976
--- /dev/null
+++ b/assets/css/style.scss
@@ -0,0 +1,32 @@
+:root {
+    background-color: white;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+}
+
+.Header {
+    display: flex;
+    flex-direction: row;
+
+    h1 {
+        margin: auto;
+        align-self: center;
+    }
+    
+    input {
+        margin-top: auto;
+        margin-bottom: auto;
+        align-self: flex-end;
+    }
+    
+}
+
+
+
+
+
+
+
diff --git a/index.html b/index.html
index 09d46e2..d14db9e 100644
--- a/index.html
+++ b/index.html
@@ -1,30 +1,49 @@
 <!DOCTYPE html>
 <html lang="fr">
+
 <head>
     <meta charset="UTF-8">
     <title>Acceuil de la tanière solidaire</title>
 </head>
-    <link rel="stylesheet" href="style.css">
+<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">    
+        <h1>La Tanière Solidaire</h1>
+        <input type="checkbox" id="darkMode" name="darkMode">
     </div>
-
-     
-    <h2>Les services :</h2>
-    <ul>
-        <li>
-            <div class="icon">
-
-            </div>
-        </li>
-        <li>OwO</li>
-        <li>OwO</li>
-        <li>OwO</li>
-    </ul>
-
     
+    <p>
+        Bienvenue sur le server de la tanière solidaire, un <a href="https://la-taniere-solidaire.gay/asso">projet associatif</a>
+    </p>
+
+    <h2>Les services :</h2>
+    <a href="-/">
+        <h3>Nextcloud</h3>
+        <div class="service_icon">
+
+        </div>
+    </a>
+    <a href="https://bitwarden.la-taniere-solidaire.gay/">
+        <h3>Bitwarden</h3>
+        <div class="service_icon">
+
+        </div>
+    </a>
+    <a href="https://forgejo.la-taniere-solidaire.gay/">
+        <h3>Forgejo</h3>
+        <div class="service_icon">
+
+        </div>
+    </a>
+    <a href="https://la-taniere-solidaire.gay/">
+        <h3>Email</h3>
+        <div class="service_icon">
+
+        </div>
+    </a>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/script.js b/script.js
deleted file mode 100644
index 028a91f..0000000
--- a/script.js
+++ /dev/null
@@ -1,5 +0,0 @@
-"use strict";
-
-window.addEventListener("DOMContentLoaded",function(){
-    console.log("Loaded")
-})
\ No newline at end of file
diff --git a/style.css b/style.css
deleted file mode 100644
index ac9f550..0000000
--- a/style.css
+++ /dev/null
@@ -1,25 +0,0 @@
-:root {
-    background-color: white;
-}
-
-body {
-    display: flex;
-    flex-direction: column;
-}
-
-.Header {
-    display: flex;
-    flex-direction: row;
-}
-
-h1 {
-    align-self: center;
-}
-
-input {
-    align-self: flex-end;
-}
-
-
-
-
