diff --git a/Hostelia/Site/Images/Banniere_hostelia.png b/Hostelia/Site/Images/Banniere_hostelia.png
new file mode 100644
index 0000000..90c897a
Binary files /dev/null and b/Hostelia/Site/Images/Banniere_hostelia.png differ
diff --git a/Hostelia/Site/Images/PP_Hostelia.png b/Hostelia/Site/Images/PP_Hostelia.png
new file mode 100644
index 0000000..3f6eebf
Binary files /dev/null and b/Hostelia/Site/Images/PP_Hostelia.png differ
diff --git a/Hostelia/Site/le_serv.css b/Hostelia/Site/le_serv.css
deleted file mode 100644
index b5717e1..0000000
--- a/Hostelia/Site/le_serv.css
+++ /dev/null
@@ -1,4 +0,0 @@
-body{
-    background: url(Images/Fond_Hostelia.png);
-    background-size: cover;
-}
\ No newline at end of file
diff --git a/Hostelia/Site/le_serv.html b/Hostelia/Site/le_serv.html
deleted file mode 100644
index 1b9ef9b..0000000
--- a/Hostelia/Site/le_serv.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="shortcut icon" href="Images/Logo_H.png" type="images/png">
-    <link rel="stylesheet" href="le_serv.css">
-    <title>Le site</title>
-</head>
-<body>
-    
-</body>
-<p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><a property="dct:title" rel="cc:attributionURL" href="https://github.com/Over441/Hostelia">Hostelia Site</a> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://github.com/Over441">Loo Dessart</a> is licensed under <a href="http://creativecommons.org/licenses/by-nc-nd/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-NC-ND 4.0<img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nd.svg?ref=chooser-v1"></a></p>
-</html>
\ No newline at end of file
diff --git "a/Hostelia/Site/nos_r\303\251seaux.css" "b/Hostelia/Site/nos_r\303\251seaux.css"
deleted file mode 100644
index 5f08666..0000000
--- "a/Hostelia/Site/nos_r\303\251seaux.css"
+++ /dev/null
@@ -1,22 +0,0 @@
-body{
-    background: url(Images/Fond_Hostelia.png);
-    background-size: cover;
-}
-#kofi{
-    align-content: center;
-    align-items: center;
-    text-align: center;
-    font-family: Work Sans;
-    font-size: 30px;
-    color: #cfb230;
-    -webkit-text-stroke: 3px black;
-}
-#discord{
-    align-content: center;
-    align-items: center;
-    text-align: center;
-    font-family: Work Sans;
-    font-size: 30px;
-    color: #cfb230;
-    -webkit-text-stroke: 3px black;
-}
\ No newline at end of file
diff --git "a/Hostelia/Site/nos_r\303\251seaux.html" "b/Hostelia/Site/nos_r\303\251seaux.html"
deleted file mode 100644
index 71aee1b..0000000
--- "a/Hostelia/Site/nos_r\303\251seaux.html"
+++ /dev/null
@@ -1,25 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="shortcut icon" href="./Hostelia/Site/Images/Logo_H.png" type="images/png">
-    <link rel="stylesheet" href="nos_réseaux.css">
-    <title>Nos Réseaux</title>
-</head>
-<body>
-    <div id="kofi">
-        <h1>Ko-Fi :</h1>
-        <a href="https://ko-fi.com/hostelia" target="_blank">
-            <img src="https://ko-fi.com/img/kofi2.png?v=2" border="0" alt="Buy Me a Coffee at ko-fi.com">
-        </a>
-    </div>
-    <div id="discord">
-        <h1>Discord :</h1>
-        <a href="https://discord.gg/QKKY3dSW8S" target="_blank">
-            <img src="./Images/icon_clyde_blurple_RGB.png" alt="Hostelia Discord">
-        </a>
-    </div>
-</body>
-</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 4b5252e..749953c 100644
--- a/index.html
+++ b/index.html
@@ -5,19 +5,34 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="style.css">
-    <link rel="shortcut icon" href="./Hostelia/Site/Images/Logo_H.png" type="images/png">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+<link rel="shortcut icon" href="./Hostelia/Site/Images/Logo_H.png" type="images/png">
     <title>Hostelia</title>
 </head>
 <body>
-    <div id="menu">
-        <h1>Bienvenue sur Hostelia</h1>
-        <br>
-        <a href="./Hostelia/Site/le_serv.html"><h2>Le Serveur</h2></a>
-        <br>
-        <a href="./Hostelia/Site/nos_réseaux.html"><h2>Nos Réseaux</h2></a>
-        <br>
-        <a href="https://ko-fi.com/hostelia"><h2>Boutique</h2></a>
+    <h1>Ceci est le contenu de la balise H1 de mise en forme</h1>
+<div class="navigation" id="nav">
+      <ul>
+        <li class="list active"> <a href="#"> <span class="icon"><i class="fa-solid fa-globe"></i></span> <span class="title">Network</span></a></li>
+        <li class="list"> <a href="#"> <span class="icon"><i class="fa-solid fa-cart-shopping"></i></span> <span class="title">Shop</span></a></li>
+        <li class="list"> <a href="#"> <span class="icon"><i class="fa-solid fa-server"></i></span> <span class="title">Server</span></a></li>
+        <div class="indicator"></div>
+      </ul>
     </div>
-    <p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><a property="dct:title" rel="cc:attributionURL" href="https://github.com/Over441/Hostelia">Hostelia Site</a> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://github.com/Over441">Loo Dessart</a> is licensed under <a href="http://creativecommons.org/licenses/by-nc-nd/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-NC-ND 4.0<img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nd.svg?ref=chooser-v1"></a></p>
+<!-- add active class on hovered item -->
+<script>
+		let list = document.querySelectorAll('li');
+		for (let i=0; i<list.length; i++){
+			list[i].onmouseover = function(){
+				let j = 0;
+				while (j < list.length){
+					list[j++].className = 'list';
+				}
+				list[i].className = 'list active';
+			}
+		}
+	</script>
+	
+    <!-- p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><a property="dct:title" rel="cc:attributionURL" href="https://github.com/Over441/Hostelia">Hostelia Site</a> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://github.com/Over441">Loo Dessart</a> is licensed under <a href="http://creativecommons.org/licenses/by-nc-nd/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-NC-ND 4.0<img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nd.svg?ref=chooser-v1"></a></p -->
 </body>
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
index 4a249a9..a1a0481 100644
--- a/style.css
+++ b/style.css
@@ -1,16 +1,144 @@
-#menu{
-    width: 800px0;
-    margin:0 auto ;
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
+*
+{
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	font-family: 'Poppins', sans-serif;
+}
+
+body{
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	min-height: 10vh;
+	background: url("./Hostelia/Site/Images/PP_Hostelia.png") no-repeat;
+    background-size: cover;
+}
+#page{
+	margin:0 auto ;
     text-align: center;
     align-content: center;
     padding: initial;
     margin: auto;
-    font-family: Work Sans;
-    font-size: 30px;
-    color: #cfb230;
-    -webkit-text-stroke: 3px black;
 }
-body{
-    background: url(./Hostelia/Site/Images/Fond_Hostelia.png);
-    background-size: cover;
-}
\ No newline at end of file
+#nav{
+	margin:0 auto ;
+    text-align: center;
+    align-content: center;
+    padding: initial;
+    margin: auto;
+	
+}
+.navigation{
+	position: relative;
+	width: 70px;
+	height: 220px;
+	background: #fff;
+	border-radius: 35px;
+	box-shadow: 0 15px 25px rgba(0,0,0,0.1);
+}
+.navigation ul{
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+}
+.navigation ul li{
+	position: relative;
+	list-style: none;
+	width: 70px;
+	height: 70px;
+	z-index: 1;
+}
+.navigation ul li a{
+	position: relative;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	text-align: center;
+	color: #333;
+	font-weight: 500;
+}
+.navigation ul li a .icon{
+	position: relative;
+	display: block;
+	line-height: 75px;
+	text-align: center;
+	transition: 0.5s;
+}
+.navigation ul li.active a .icon{
+	color: #fff;
+}
+.navigation ul li a .icon i{
+	font-size: 24px;
+}
+.navigation ul li a .title{
+	position: absolute;
+	top: 50%;
+	left: 100px;
+	background: #fff;
+	transform: translateY(-50%);
+	padding: 5px 10px;
+	border-radius: 6px;
+	transition: 0.5s;
+	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+	opacity: 0;
+	visibility: hidden;
+}
+.navigation ul li:hover a .title{
+	opacity: 1;
+	visibility: visible;
+	transform: translateX(-20px) translateY(-50%);
+}
+.navigation ul li a .title::before{
+	content: '';
+	position: absolute;
+	width: 12px;
+	height: 12px;
+	background: #fff;
+	left: -8px;
+	top: 46%;
+	transform: rotate(45deg) translateY(-50%);
+	border-radius: 2px;
+}
+.navigation ul .indicator{
+	position: absolute;
+	left: 0;
+	width: 70px;
+	height: 70px;
+	transition: 0.5s;
+}
+.navigation ul .indicator::before{
+	content: '';
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%,-50%);
+	width: 50px;
+	height: 50px;
+	background: #333;
+	border-radius: 50%;
+	transition: 0.5s;
+}
+.navigation ul li:nth-child(1).active ~ .indicator{
+	transform: translateY(calc(70px * 0));
+}
+.navigation ul li:nth-child(2).active ~ .indicator{
+	transform: translateY(calc(70px * 1));
+}
+.navigation ul li:nth-child(3).active ~ .indicator{
+	transform: translateY(calc(70px * 2));
+}
+.navigation ul li:nth-child(1).active ~ .indicator::before{
+	background: #0093FF
+}
+.navigation ul li:nth-child(2).active ~ .indicator::before{
+	background: #FFC600
+}
+.navigation ul li:nth-child(3).active ~ .indicator::before{
+	background: #FF4848
+}
