diff --git a/WEB-INF/vue/chat.jsp b/WEB-INF/vue/chat.jsp
index bd183e58183e9ae3e91f7035dba2029b4fa7ea1b..b63016b048f2f2bc54dfa9277d95afd30040f522 100644
--- a/WEB-INF/vue/chat.jsp
+++ b/WEB-INF/vue/chat.jsp
@@ -89,24 +89,32 @@
                     <% for (Message message : messages) {
                         String sender;
                         String color;
+                        String icon;
                         boolean userIsSender = message.getSender().equals(user.getUsername());
+                        boolean messageIsLikedByUser = daoLike.isAlreadyLike(message.getId_message(), user.getUsername());
                         if (userIsSender) {
                             sender = "vous";
                             color = "primary";
                         } else {
                             sender = message.getSender();
                             color = "secondary";
-                        } %>
+                        } 
+                        if(messageIsLikedByUser){
+                            icon = "bi bi-heart-fill";
+                        } else {
+                            icon = "bi bi-heart";
+                        }
+                        %>
 
                         <div id="me" class="row d-inline-block m-3">
-                            <label class="ms-3 fs-6 text-secondary">par <%=sender %>, <%=message.getTime().format(formatter)%></label>
-                            <div class="p-3 border border-3 border-<%=color %> rounded-pill bg-<%=color %>-subtle">
-                                <label><%=message.getMessage() %></label>
+                            <label class="ms-3 fs-6 text-secondary">par <strong><%=sender %></strong>, <%=message.getTime().format(formatter)%></label>
+                            <div>
+                                <label class="p-3 border border-3 border-<%=color %> rounded-pill bg-<%=color %>-subtle"><%=message.getMessage() %></label>
+                                <span class="ms-3">
+                                    <a href="message?action=like&message=<%=message.getId_message()%>&thread=<%=id%>"><i class="text-danger <%= icon %>"></i></a>
+                                    <%=daoLike.countLikesByMessage(message.getId_message())%>
+                                </span>
                             </div>
-                            <a href="message?action=like&message=<%=message.getId_message()%>&thread=<%=id%>">
-                                like
-                            </a>
-                            nombre de like : <%=daoLike.countLikesByMessage(message.getId_message())%>
                         </div>
                         <br>
                     <% } %>