diff --git a/Site Web/client/src/components/Log/SuivreAussi.css b/Site Web/client/src/components/Log/SuivreAussi.css
new file mode 100644
index 00000000..161590cc
--- /dev/null
+++ b/Site Web/client/src/components/Log/SuivreAussi.css	
@@ -0,0 +1,33 @@
+#suivreAussi{
+    font-size: 8px;
+    text-align: center;
+    border: 2px solid;
+    border-radius: 30px;
+    width: 200px; 
+}
+
+#listeCompteASuivre{
+    border-top: 2px solid;
+    
+}
+
+.infoPersonne{
+    display: flex;
+}
+
+.name{
+    font-size: 12px;
+}
+
+.arobase{
+    color:gray;
+}
+
+.PhotoProfile{
+	margin: 10px 15px 0px 20px;
+	width: 40px;
+	height:40px;
+	border-radius: 20px;
+	border: 2px solid #555;
+}
+
diff --git a/Site Web/client/src/components/Log/SuivreAussi.html b/Site Web/client/src/components/Log/SuivreAussi.html
new file mode 100644
index 00000000..893538a3
--- /dev/null
+++ b/Site Web/client/src/components/Log/SuivreAussi.html	
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Ma page de test</title>
+    <link rel="stylesheet" href="SuivreAussi.css" />
+  </head>
+  <body>
+	<div id="suivreAussi">
+        <h1>Suivre aussi</h1>
+        <div id="listeCompteASuivre">
+            <div class="infoPersonne">
+                <img class="PhotoProfile" src="https://i.pinimg.com/originals/5c/a0/cf/5ca0cf624647dced23ec5329ed0cde6f.png"/>
+                <div class="cadreName">
+                    <h2 class="name">personne 1</h2>
+                    <h3 class="arobase">@personne1</h3>
+                </div>
+            </div>
+            <div class="infoPersonne">
+                <img class="PhotoProfile" src="https://i.pinimg.com/originals/5c/a0/cf/5ca0cf624647dced23ec5329ed0cde6f.png"/>
+                <div class="cadreName">
+                    <h2 class="name">personne 1</h2>
+                    <h3 class="arobase">@personne1</h3>
+                </div>
+            </div>
+            <div class="infoPersonne">
+                <img class="PhotoProfile" src="https://i.pinimg.com/originals/5c/a0/cf/5ca0cf624647dced23ec5329ed0cde6f.png"/>
+                <div class="cadreName">
+                    <h2 class="name">personne 1</h2>
+                    <h3 class="arobase">@personne1</h3>
+                </div>
+            </div>
+        </div>
+    </div>
+  </body>
+</html>
diff --git a/Site Web/client/src/components/Log/poste.css b/Site Web/client/src/components/Log/poste.css
new file mode 100644
index 00000000..d347bf4d
--- /dev/null
+++ b/Site Web/client/src/components/Log/poste.css	
@@ -0,0 +1,74 @@
+body{
+background: green;
+
+}
+
+#cadrePoste{
+	background: white;
+  	border-radius: 5px;
+  	width: 40%;
+  	margin-left: auto;
+    	margin-right: auto;
+}
+
+/*haut du poste*/
+/*
+#cadreInfoPoste{
+	display: flex;
+	align-items:center;
+	
+}
+
+#PhotoProfile{
+	margin: 10px 15px 0px 20px;
+	width: 40px;
+	height:40px;
+	border-radius: 20px;
+	border: 2px solid #555;
+}
+
+#NomProfile{
+	  font-family: arial;
+	    font-size: 18px;
+
+}*/
+
+#hautPoste{
+	display: flex;
+	align-items:center;
+	justify-content: space-between;
+	margin-right: 15px;
+}
+
+#cadreInfoPoste{
+	display: flex;
+	align-items:center;
+	
+}
+#PhotoProfile{
+	margin: 10px 15px 0px 20px;
+	width: 40px;
+	height:40px;
+	border-radius: 20px;
+	border: 2px solid #555;
+}
+
+#NomProfile{
+	  font-family: arial;
+	  font-size: 18px;
+
+}
+
+/*bas poste*/
+#basPoste{
+	display: flex;
+	align-items:center;
+	justify-content: space-between;
+	margin-left: 10px;
+	margin-right: 10px;
+}
+
+#like, #commentaire{
+	display: flex;
+	align-items:center;
+}
diff --git a/Site Web/client/src/components/Log/poste.html b/Site Web/client/src/components/Log/poste.html
new file mode 100644
index 00000000..058e33e8
--- /dev/null
+++ b/Site Web/client/src/components/Log/poste.html	
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Ma page de test</title>
+    <link rel="stylesheet" href="poste.css" />
+  </head>
+  <body>
+	<!--<div id="cadrePoste">
+		<div id="cadreInfoPoste">
+			<img id="PhotoProfile" src="https://i.pinimg.com/originals/5c/a0/cf/5ca0cf624647dced23ec5329ed0cde6f.png"/>
+			<h6 id="NomProfile">Lena 1er</h6>
+		</div>
+	</div>-->
+	
+	<div id="cadrePoste">
+		<div id="hautPoste">
+			<div id="cadreInfoPoste">
+				<img id="PhotoProfile" src="https://i.pinimg.com/originals/5c/a0/cf/5ca0cf624647dced23ec5329ed0cde6f.png"/>
+				<h6 id="NomProfile">Lena 1er</h6>
+			</div>
+			<div>6 jours</div>
+		</div>
+		
+		<div id="contenuePoste">
+			/*utliser leakpreview*/
+		</div>
+		
+		<div id="basPoste">
+			<div id="like">
+				<img src="coeurs.png">
+				<div>10k</div>
+			</div>
+			<div id="commentaire">
+				<img src="commentaire.png">
+				<div>10k</div>
+			</div>
+		</div>
+	</div>
+  </body>
+</html>
+
+
