diff --git a/Site Web/client/src/components/Log/likeEtCommantaire.html b/Site Web/client/src/components/Log/likeEtCommantaire.html
new file mode 100644
index 00000000..bb623be3
--- /dev/null
+++ b/Site Web/client/src/components/Log/likeEtCommantaire.html	
@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Titre du document</title>
+    <style>
+    
+    #likeCommentaire{
+    	background-color: white;
+        position:fixed;
+
+        margin-left:33%;
+        margin-right: 33%;
+        border: 2px solid #666;
+        border-radius:10px;
+        width: 33%;
+    }
+    
+    #divButton{
+   	display:flex;
+      	justify-content: space-between;
+    }
+    
+    #divButton > div{
+          width:50%;
+    }
+    
+    #buttonLike,#buttonCommentaire {
+    	margin-top:10px;
+ 	background-color: white; 
+ 	border:none;
+ 	width:100%;
+ 	height:25px;
+    }
+    
+    #buttonLike{
+    	border-bottom:solid 5px black;
+    }
+    
+    #like{
+    	display: block;
+    	
+    }
+    
+    #buttonCommentaire{
+    	border-bottom: none;
+    }
+    
+    #commentaire{
+        display: none;
+    }
+    
+    
+    
+    /*like et commentaire*/
+#like, #commentaire{
+    font-size: 8px;
+    text-align: center;
+}
+
+#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;
+}
+
+      
+      
+      
+    </style>
+  </head>
+  <body>
+  	<div id="likeCommentaire">
+  		<div id="divButton">
+  			
+  			<div><button type="button" id="buttonLike" onclick="openLike()">like</button></div>
+  			<div><button type="button" id="buttonCommentaire" onclick="openCommentaire()">commentaire</button></div>
+   		</div>
+   		
+   		<div id="like">
+       			<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 id="commentaire">
+       			<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>
+                    			<h4>texte du commantaire</h4>
+                		</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>
+                    			<h4>texte du commantaire</h4>
+                		</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>
+                    			<h4>texte du commantaire</h4>
+                		</div>
+           		 </div>
+    		</div>
+    	</div>
+    
+  </body>
+  
+  <script>
+      function openLike() {
+        	document.getElementById("like").style.display = "block";
+        	document.getElementById("buttonLike").style.borderBottom = "solid 5px black";
+       		document.getElementById("commentaire").style.display = "none";
+       		document.getElementById("buttonCommentaire").style.borderBottom = "none";
+      }
+
+      function openCommentaire() {
+      		document.getElementById("like").style.display = "none";
+       		document.getElementById("buttonLike").style.borderBottom = "none";
+                document.getElementById("commentaire").style.display = "block";
+        	document.getElementById("buttonCommentaire").style.borderBottom = "solid 5px black";
+      }
+    </script>
+</html>
diff --git a/Site Web/client/src/components/Log/newPoste.html b/Site Web/client/src/components/Log/newPoste.html
new file mode 100644
index 00000000..b009eff7
--- /dev/null
+++ b/Site Web/client/src/components/Log/newPoste.html	
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Titre du document</title>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      body {
+        font-family: Roboto, Helvetica, sans-serif;
+      }
+
+      .form-popup {
+        background-color: white;
+        display: none;
+        position:fixed;
+
+        margin-left:33%;
+        margin-right: 33%;
+        border: 2px solid #666;
+        border-radius:10px;
+        width: 33%;
+      }
+      
+      /* Largeur complète pour les champs de saisie */
+      .form-container input[name="lien"],
+      .form-container textarea[name="description"],
+      .form-container label{
+        width: 80%;
+        margin: 10px 10% 50px 10%;
+      }
+      
+      textarea{
+        resize: none;
+        height: 100px;
+       }
+      
+      input[name="lien"],
+      textarea[name="description"]{
+      	margin-left: 100px;
+        border: none;
+        background: #D9D9D9;
+      }
+      
+      .input{
+      	margin-top:20px;
+      }
+   
+      #buttonForm{
+      	margin-left:10%;
+      	margin-right:10%;
+      	margin-bottom:10px;
+      	display:flex;
+      	justify-content: space-between;
+      }
+      
+      
+      
+      
+    </style>
+  </head>
+  <body>
+    <h2>Forme Popup</h2>
+    <p>Cliquez sur le bouton "Ouvrir la forme" pour ouvrir la fdbjfndbfhbdbnfhdbfnbdhbfhbdhbfhdbfhdhbfhdbhfforme Popup.</p>
+
+    
+    <div class="open-btn">
+      <button class="open-button" onclick="openForm()"><strong>Ouvrir la forme</strong></button>
+    </div>
+    
+    
+    <div>
+      <div class="form-popup" id="popupFormulaireCreationPoste">
+        <form action="/action_page.php" class="form-container">
+          
+          <div class="input">
+          	<label for="lien">Lien:</label>
+          	<input type="text" name="lien" required />
+          </div>
+          
+          <div class="input">
+          	<label for="description">Description:</label>
+          	<textarea name="description" row =250></textarea>
+          </div>
+          
+          <div id="buttonForm">
+            <div>
+          	<button type="button" class="btn cancel" onclick="closeForm()">retour</button>
+            </div>
+            <div>
+          	<button type="submit" class="btn">Poster</button>
+            </div>
+          </div>
+          
+          
+        </form>
+      </div>
+    </div>
+    
+    
+    <script>
+      function openForm() {
+        document.getElementById("popupFormulaireCreationPoste").style.display = "block";
+      }
+
+      function closeForm() {
+        document.getElementById("popupFormulaireCreationPoste").style.display = "none";
+      }
+    </script>
+  </body>
+</html>
