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>
