diff --git a/open-isle-cli/src/components/BaseTimeline.vue b/open-isle-cli/src/components/BaseTimeline.vue
index 0c14729c6..38389b94c 100644
--- a/open-isle-cli/src/components/BaseTimeline.vue
+++ b/open-isle-cli/src/components/BaseTimeline.vue
@@ -8,6 +8,7 @@
       >
         <img v-if="item.src" :src="item.src" class="timeline-img" />
         <i v-else-if="item.icon" :class="item.icon"></i>
+        <span v-else-if="item.emoji" class="timeline-emoji">{{ item.emoji }}</span>
       </div>
       <div class="timeline-content">
         <slot name="item" :item="item">{{ item.content }}</slot>
@@ -63,6 +64,11 @@ export default {
   border-radius: 50%;
 }
 
+.timeline-emoji {
+  font-size: 20px;
+  line-height: 1;
+}
+
 .timeline-item::before {
   content: '';
   position: absolute;
diff --git a/open-isle-cli/src/views/MessagePageView.vue b/open-isle-cli/src/views/MessagePageView.vue
index 5705ddb58..ec450e569 100644
--- a/open-isle-cli/src/views/MessagePageView.vue
+++ b/open-isle-cli/src/views/MessagePageView.vue
@@ -45,6 +45,28 @@
                 </span>
               </div>
             </template>
+            <template v-else-if="item.type === 'REACTION' && item.post && !item.comment">
+              <div class="notif-content-container">
+                <span class="notif-user">{{ item.fromUser.username }} </span> 对我的文章
+                <span>
+                  <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}`">
+                    {{ sanitizeDescription(item.post.title) }}
+                  </router-link>
+                </span>
+                表达了 "{{ item.emoji }}"
+              </div>
+            </template>
+            <template v-else-if="item.type === 'REACTION' && item.comment">
+              <div class="notif-content-container">
+                <span class="notif-user">{{ item.fromUser.username }} </span> 对我的评论
+                <span>
+                  <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}#comment-${item.comment.id}`">
+                    {{ sanitizeDescription(item.comment.content) }}
+                  </router-link>
+                </span>
+                表达了 "{{ item.emoji }}"
+              </div>
+            </template>
             <template v-else>
               <div class="notif-content-container">
                 {{ formatType(item.type) }}
@@ -91,12 +113,18 @@ export default {
     const iconMap = {
       POST_VIEWED: 'fas fa-eye',
       COMMENT_REPLY: 'fas fa-reply',
-      REACTION: 'fas fa-thumbs-up',
       POST_REVIEWED: 'fas fa-check',
       POST_UPDATED: 'fas fa-comment-dots',
       USER_ACTIVITY: 'fas fa-user'
     }
 
+    const reactionEmojiMap = {
+      LIKE: '❤️',
+      DISLIKE: '👎',
+      RECOMMEND: '👏',
+      ANGRY: '😡'
+    }
+
     const sanitizeDescription = (text) => {
       return stripMarkdown(text)
     }
@@ -131,6 +159,17 @@ export default {
                 router.push(`/users/${n.comment.author.id}`)
               }
             })
+          } else if (n.type === 'REACTION') {
+            notifications.value.push({
+              ...n,
+              emoji: reactionEmojiMap[n.reactionType],
+              iconClick: () => {
+                if (n.fromUser) {
+                  markRead(n.id)
+                  router.push(`/users/${n.fromUser.id}`)
+                }
+              }
+            })
           } else {
             notifications.value.push({
               ...n,
diff --git a/src/main/java/com/openisle/controller/NotificationController.java b/src/main/java/com/openisle/controller/NotificationController.java
index 90bcdb2e5..a4e1db326 100644
--- a/src/main/java/com/openisle/controller/NotificationController.java
+++ b/src/main/java/com/openisle/controller/NotificationController.java
@@ -2,6 +2,7 @@ package com.openisle.controller;
 
 import com.openisle.model.Notification;
 import com.openisle.model.NotificationType;
+import com.openisle.model.ReactionType;
 import com.openisle.model.Comment;
 import com.openisle.model.Post;
 import com.openisle.service.NotificationService;
@@ -56,6 +57,12 @@ public class NotificationController {
                 dto.setParentComment(toCommentDto(parent));
             }
         }
+        if (n.getFromUser() != null) {
+            dto.setFromUser(toAuthorDto(n.getFromUser()));
+        }
+        if (n.getReactionType() != null) {
+            dto.setReactionType(n.getReactionType());
+        }
         dto.setApproved(n.getApproved());
         dto.setRead(n.isRead());
         dto.setCreatedAt(n.getCreatedAt());
@@ -98,6 +105,8 @@ public class NotificationController {
         private PostDto post;
         private CommentDto comment;
         private CommentDto parentComment;
+        private AuthorDto fromUser;
+        private ReactionType reactionType;
         private Boolean approved;
         private boolean read;
         private LocalDateTime createdAt;
diff --git a/src/main/java/com/openisle/model/Notification.java b/src/main/java/com/openisle/model/Notification.java
index d25c98c53..fa1f2f6c3 100644
--- a/src/main/java/com/openisle/model/Notification.java
+++ b/src/main/java/com/openisle/model/Notification.java
@@ -37,6 +37,14 @@ public class Notification {
     @JoinColumn(name = "comment_id")
     private Comment comment;
 
+    @ManyToOne(fetch = FetchType.LAZY)
+    @JoinColumn(name = "from_user_id")
+    private User fromUser;
+
+    @Enumerated(EnumType.STRING)
+    @Column(name = "reaction_type")
+    private ReactionType reactionType;
+
     @Column
     private Boolean approved;
 
diff --git a/src/main/java/com/openisle/service/NotificationService.java b/src/main/java/com/openisle/service/NotificationService.java
index 5f0f21c37..3d0c9af59 100644
--- a/src/main/java/com/openisle/service/NotificationService.java
+++ b/src/main/java/com/openisle/service/NotificationService.java
@@ -16,12 +16,19 @@ public class NotificationService {
     private final UserRepository userRepository;
 
     public Notification createNotification(User user, NotificationType type, Post post, Comment comment, Boolean approved) {
+        return createNotification(user, type, post, comment, approved, null, null);
+    }
+
+    public Notification createNotification(User user, NotificationType type, Post post, Comment comment, Boolean approved,
+                                           User fromUser, ReactionType reactionType) {
         Notification n = new Notification();
         n.setUser(user);
         n.setType(type);
         n.setPost(post);
         n.setComment(comment);
         n.setApproved(approved);
+        n.setFromUser(fromUser);
+        n.setReactionType(reactionType);
         return notificationRepository.save(n);
     }
 
diff --git a/src/main/java/com/openisle/service/ReactionService.java b/src/main/java/com/openisle/service/ReactionService.java
index 2b90670af..74dccb0fd 100644
--- a/src/main/java/com/openisle/service/ReactionService.java
+++ b/src/main/java/com/openisle/service/ReactionService.java
@@ -34,7 +34,7 @@ public class ReactionService {
         reaction.setType(type);
         reaction = reactionRepository.save(reaction);
         if (!user.getId().equals(post.getAuthor().getId())) {
-            notificationService.createNotification(post.getAuthor(), NotificationType.REACTION, post, null, null);
+            notificationService.createNotification(post.getAuthor(), NotificationType.REACTION, post, null, null, user, type);
         }
         return reaction;
     }
@@ -51,7 +51,7 @@ public class ReactionService {
         reaction.setType(type);
         reaction = reactionRepository.save(reaction);
         if (!user.getId().equals(comment.getAuthor().getId())) {
-            notificationService.createNotification(comment.getAuthor(), NotificationType.REACTION, null, comment, null);
+            notificationService.createNotification(comment.getAuthor(), NotificationType.REACTION, comment.getPost(), comment, null, user, type);
         }
         return reaction;
     }