diff --git a/open-isle-cli/src/components/BaseTimeline.vue b/open-isle-cli/src/components/BaseTimeline.vue
index e3ebadc12..0c14729c6 100644
--- a/open-isle-cli/src/components/BaseTimeline.vue
+++ b/open-isle-cli/src/components/BaseTimeline.vue
@@ -44,7 +44,7 @@ export default {
   width: 32px;
   height: 32px;
   border-radius: 50%;
-  color: white;
+  color: var(--text-color);
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/open-isle-cli/src/components/CommentItem.vue b/open-isle-cli/src/components/CommentItem.vue
index b4e7c9dfa..17ae9e420 100644
--- a/open-isle-cli/src/components/CommentItem.vue
+++ b/open-isle-cli/src/components/CommentItem.vue
@@ -18,27 +18,14 @@
       </div>
       <div class="info-content-text" v-html="renderMarkdown(comment.text)"></div>
       <div class="article-footer-container">
-        <div class="reactions-container">
-          <div class="reactions-viewer">
-            <div class="reactions-viewer-item-container">
-              <div class="reactions-viewer-item">🤣</div>
-              <div class="reactions-viewer-item">❤️</div>
-              <div class="reactions-viewer-item">👏</div>
-            </div>
-            <div class="reactions-count">1882</div>
-          </div>
-          <div class="make-reaction-container">
+        <ReactionsGroup v-model="comment.reactions" content-type="comment" :content-id="comment.id">
           <div class="make-reaction-item comment-reaction" @click="toggleEditor">
             <i class="far fa-comment"></i>
           </div>
-            <div class="make-reaction-item like-reaction">
-              <i class="far fa-heart"></i>
-            </div>
-            <div class="make-reaction-item copy-link" @click="copyCommentLink">
-              <i class="fas fa-link"></i>
-            </div>
+          <div class="make-reaction-item copy-link" @click="copyCommentLink">
+            <i class="fas fa-link"></i>
           </div>
-        </div>
+        </ReactionsGroup>
       </div>
       <CommentEditor v-if="showEditor" @submit="submitReply" :loading="isWaitingForReply" />
       <div
@@ -82,6 +69,7 @@ import { renderMarkdown } from '../utils/markdown'
 import BaseTimeline from './BaseTimeline.vue'
 import { API_BASE_URL, toast } from '../main'
 import { getToken } from '../utils/auth'
+import ReactionsGroup from './ReactionsGroup.vue'
 const CommentItem = {
   name: 'CommentItem',
   props: {
@@ -139,12 +127,14 @@ const CommentItem = {
             time: new Date(data.createdAt).toLocaleDateString('zh-CN', { month: 'numeric', day: 'numeric' }),
             avatar: data.author.avatar,
             text: data.content,
+            reactions: [],
             reply: (data.replies || []).map(r => ({
               id: r.id,
               userName: r.author.username,
               time: new Date(r.createdAt).toLocaleDateString('zh-CN', { month: 'numeric', day: 'numeric' }),
               avatar: r.author.avatar,
               text: r.content,
+              reactions: r.reactions || [],
               reply: [],
               openReplies: false,
               src: r.author.avatar,
@@ -174,7 +164,7 @@ const CommentItem = {
     return { showReplies, toggleReplies, showEditor, toggleEditor, submitReply, copyCommentLink, renderMarkdown, isWaitingForReply }
   }
 }
-CommentItem.components = { CommentItem, CommentEditor, BaseTimeline }
+CommentItem.components = { CommentItem, CommentEditor, BaseTimeline, ReactionsGroup }
 export default CommentItem
 </script>
 
diff --git a/open-isle-cli/src/components/ReactionsGroup.vue b/open-isle-cli/src/components/ReactionsGroup.vue
new file mode 100644
index 000000000..fa563e939
--- /dev/null
+++ b/open-isle-cli/src/components/ReactionsGroup.vue
@@ -0,0 +1,175 @@
+<template>
+  <div class="reactions-container">
+    <div class="reactions-viewer">
+      <div class="reactions-viewer-item-container" @click="openPanel" @mouseenter="cancelHide" @mouseleave="scheduleHide">
+        <template v-if="displayedReactions.length">
+          <div v-for="r in displayedReactions" :key="r.type" class="reactions-viewer-item">{{ iconMap[r.type] }}</div>
+        </template>
+        <div v-else class="reactions-viewer-item placeholder">点击以表态</div>
+      </div>
+      <div class="reactions-count">{{ totalCount }}</div>
+    </div>
+    <div class="make-reaction-container">
+      <div class="make-reaction-item like-reaction" @click="toggleReaction('LIKE')" :class="{ selected: userReacted('LIKE') }">
+        <i class="far fa-heart"></i>
+        <span v-if="likeCount">{{ likeCount }}</span>
+      </div>
+      <slot></slot>
+    </div>
+    <div v-if="panelVisible" class="reactions-panel" @mouseenter="cancelHide" @mouseleave="scheduleHide">
+      <div v-for="t in panelTypes" :key="t" class="reaction-option" @click="toggleReaction(t)" :class="{ selected: userReacted(t) }">
+        {{ iconMap[t] }}<span v-if="counts[t]">{{ counts[t] }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, computed, watch, onMounted } from 'vue'
+import { API_BASE_URL, toast } from '../main'
+import { getToken, authState } from '../utils/auth'
+
+let cachedTypes = null
+const fetchTypes = async () => {
+  if (cachedTypes) return cachedTypes
+  try {
+    const token = getToken()
+    const res = await fetch(`${API_BASE_URL}/api/reaction-types`, {
+      headers: { Authorization: `Bearer ${token}` }
+    })
+    if (res.ok) {
+      cachedTypes = await res.json()
+    } else {
+      cachedTypes = []
+    }
+  } catch {
+    cachedTypes = []
+  }
+  return cachedTypes
+}
+
+const iconMap = {
+  LIKE: '❤️',
+  DISLIKE: '👎',
+  RECOMMEND: '👏',
+  ANGRY: '😡'
+}
+
+export default {
+  name: 'ReactionsGroup',
+  props: {
+    modelValue: { type: Array, default: () => [] },
+    contentType: { type: String, required: true },
+    contentId: { type: [Number, String], required: true }
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    const reactions = ref(props.modelValue)
+    watch(() => props.modelValue, v => reactions.value = v)
+
+    const reactionTypes = ref([])
+    onMounted(async () => {
+      reactionTypes.value = await fetchTypes()
+    })
+
+    const counts = computed(() => {
+      const c = {}
+      for (const r of reactions.value) {
+        c[r.type] = (c[r.type] || 0) + 1
+      }
+      return c
+    })
+
+    const totalCount = computed(() => Object.values(counts.value).reduce((a, b) => a + b, 0))
+    const likeCount = computed(() => counts.value['LIKE'] || 0)
+
+    const userReacted = type => reactions.value.some(r => r.type === type && r.user === authState.username)
+
+    const displayedReactions = computed(() => {
+      return Object.entries(counts.value)
+        .sort((a, b) => b[1] - a[1])
+        .slice(0, 3)
+        .map(([type]) => ({ type }))
+    })
+
+    const panelTypes = computed(() => reactionTypes.value.filter(t => t !== 'LIKE'))
+
+    const panelVisible = ref(false)
+    let hideTimer = null
+    const openPanel = () => {
+      clearTimeout(hideTimer)
+      panelVisible.value = true
+    }
+    const scheduleHide = () => {
+      clearTimeout(hideTimer)
+      hideTimer = setTimeout(() => { panelVisible.value = false }, 2000)
+    }
+    const cancelHide = () => {
+      clearTimeout(hideTimer)
+    }
+
+    const toggleReaction = async (type) => {
+      const token = getToken()
+      if (!token) {
+        toast.error('请先登录')
+        return
+      }
+      try {
+        const url = props.contentType === 'post'
+          ? `${API_BASE_URL}/api/posts/${props.contentId}/reactions`
+          : `${API_BASE_URL}/api/comments/${props.contentId}/reactions`
+        const res = await fetch(url, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+          body: JSON.stringify({ type })
+        })
+        if (res.ok) {
+          if (res.status === 204) {
+            const idx = reactions.value.findIndex(r => r.type === type && r.user === authState.username)
+            if (idx > -1) reactions.value.splice(idx, 1)
+          } else {
+            const data = await res.json()
+            reactions.value.push(data)
+          }
+          emit('update:modelValue', reactions.value)
+        } else {
+          toast.error('操作失败')
+        }
+      } catch (e) {
+        toast.error('操作失败')
+      }
+    }
+
+    return {
+      iconMap,
+      counts,
+      totalCount,
+      likeCount,
+      displayedReactions,
+      panelTypes,
+      panelVisible,
+      openPanel,
+      scheduleHide,
+      cancelHide,
+      toggleReaction,
+      userReacted
+    }
+  }
+}
+</script>
+
+<style scoped>
+.reactions-container { position: relative; display: flex; flex-direction: row; gap: 10px; align-items: center; width: 100%; justify-content: space-between; }
+.reactions-viewer { display: flex; flex-direction: row; gap: 20px; align-items: center; }
+.reactions-viewer-item-container { display: flex; flex-direction: row; gap: 2px; align-items: center; cursor: pointer; }
+.reactions-viewer-item { font-size: 16px; }
+.reactions-viewer-item.placeholder { opacity: 0.5; }
+.reactions-count { font-size: 16px; opacity: 0.5; }
+.make-reaction-container { display: flex; flex-direction: row; gap: 10px; }
+.make-reaction-item { cursor: pointer; padding: 10px; border-radius: 50%; opacity: 0.5; font-size: 20px; }
+.like-reaction { color: #ff0000; }
+.like-reaction.selected { background-color: #ffe2e2; }
+.reactions-panel { position: absolute; bottom: 30px; left: 0; background-color: var(--background-color); border: 1px solid #ccc; border-radius: 5px; padding: 5px; display: flex; flex-direction: row; gap: 5px; z-index: 10; }
+.reaction-option { cursor: pointer; padding: 5px; border-radius: 4px; }
+.reaction-option.selected { background-color: #e2e2e2; }
+</style>
diff --git a/open-isle-cli/src/utils/notification.js b/open-isle-cli/src/utils/notification.js
index 8e912d8f9..6cce96cab 100644
--- a/open-isle-cli/src/utils/notification.js
+++ b/open-isle-cli/src/utils/notification.js
@@ -15,3 +15,21 @@ export async function fetchUnreadCount() {
     return 0
   }
 }
+
+export async function markNotificationsRead(ids) {
+  try {
+    const token = getToken()
+    if (!token || !ids || ids.length === 0) return false
+    const res = await fetch(`${API_BASE_URL}/api/notifications/read`, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${token}`,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ ids })
+    })
+    return res.ok
+  } catch (e) {
+    return false
+  }
+}
diff --git a/open-isle-cli/src/views/HomePageView.vue b/open-isle-cli/src/views/HomePageView.vue
index 84920a147..ced03100b 100644
--- a/open-isle-cli/src/views/HomePageView.vue
+++ b/open-isle-cli/src/views/HomePageView.vue
@@ -9,7 +9,13 @@
 
     <div class="topic-container">
       <div class="topic-item-container">
-        <div v-for="topic in topics" :key="topic" class="topic-item" :class="{ selected: topic === selectedTopic }">
+        <div
+          v-for="topic in topics"
+          :key="topic"
+          class="topic-item"
+          :class="{ selected: topic === selectedTopic }"
+          @click="selectedTopic = topic"
+        >
           {{ topic }}
         </div>
         <CategorySelect v-model="selectedCategory" />
@@ -18,60 +24,71 @@
     </div>
 
     <div class="article-container">
-      <div class="header-container">
-        <div class="header-item main-item">
-          <div class="header-item-text">话题</div>
-        </div>
-        <div class="header-item avatars">
-          <div class="header-item-text">参与人员</div>
-        </div>
-        <div class="header-item">
-          <div class="header-item-text">回复</div>
-        </div>
-        <div class="header-item">
-          <div class="header-item-text">浏览</div>
-        </div>
-        <div class="header-item">
-          <div class="header-item-text">活动</div>
-        </div>
-      </div>
-
-      <div v-if="isLoadingPosts && articles.length === 0" class="loading-container">
-        <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
-      </div>
-
-      <div v-else-if="articles.length === 0">
-        <div class="no-posts-container">
-          <div class="no-posts-text">暂时没有帖子 :( 点击发帖发送第一篇相关帖子吧!</div>
-        </div>
-      </div>
-
-      <div class="article-item" v-for="article in articles" :key="article.id">
-        <div class="article-main-container">
-          <router-link class="article-item-title main-item" :to="`/posts/${article.id}`">
-            {{ article.title }}
-          </router-link>
-          <div class="article-item-description main-item">{{ sanitizeDescription(article.description) }}</div>
-          <div class="article-info-container main-item">
-            <ArticleTags :tags="[article.category]" />
-            <ArticleTags :tags="article.tags" />
+      <template v-if="selectedTopic === '最新'">
+        <div class="header-container">
+          <div class="header-item main-item">
+            <div class="header-item-text">话题</div>
+          </div>
+          <div class="header-item avatars">
+            <div class="header-item-text">参与人员</div>
+          </div>
+          <div class="header-item">
+            <div class="header-item-text">回复</div>
+          </div>
+          <div class="header-item">
+            <div class="header-item-text">浏览</div>
+          </div>
+          <div class="header-item">
+            <div class="header-item-text">活动</div>
           </div>
         </div>
 
-        <div class="article-member-avatars-container">
-          <div class="article-member-avatar-item" v-for="(avatar, idx) in article.members" :key="idx">
-            <img class="article-member-avatar-item-img" :src="avatar" alt="avatar">
+        <div v-if="isLoadingPosts && articles.length === 0" class="loading-container">
+          <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
+        </div>
+
+        <div v-else-if="articles.length === 0">
+          <div class="no-posts-container">
+            <div class="no-posts-text">暂时没有帖子 :( 点击发帖发送第一篇相关帖子吧!</div>
           </div>
         </div>
-        <div class="article-comments">
-          {{ article.comments }}
-        </div>
-        <div class="article-views">
-          {{ article.views }}
-        </div>
-        <div class="article-time">
-          {{ article.time }}
+
+        <div class="article-item" v-for="article in articles" :key="article.id">
+          <div class="article-main-container">
+            <router-link class="article-item-title main-item" :to="`/posts/${article.id}`">
+              {{ article.title }}
+            </router-link>
+            <div class="article-item-description main-item">{{ sanitizeDescription(article.description) }}</div>
+            <div class="article-info-container main-item">
+              <ArticleTags :tags="[article.category]" />
+              <ArticleTags :tags="article.tags" />
+            </div>
+          </div>
+
+          <div class="article-member-avatars-container">
+            <div class="article-member-avatar-item" v-for="(avatar, idx) in article.members" :key="idx">
+              <img class="article-member-avatar-item-img" :src="avatar" alt="avatar">
+            </div>
+          </div>
+          <div class="article-comments">
+            {{ article.comments }}
+          </div>
+          <div class="article-views">
+            {{ article.views }}
+          </div>
+          <div class="article-time">
+            {{ article.time }}
+          </div>
         </div>
+      </template>
+      <div v-else-if="selectedTopic === '排行榜'" class="placeholder-container">
+        排行榜功能开发中，敬请期待。
+      </div>
+      <div v-else-if="selectedTopic === '热门'" class="placeholder-container">
+        热门帖子功能开发中，敬请期待。
+      </div>
+      <div v-else class="placeholder-container">
+        分类浏览功能开发中，敬请期待。
       </div>
       <div v-if="isLoadingPosts && articles.length > 0" class="loading-container bottom-loading">
         <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
@@ -350,4 +367,13 @@ export default {
   height: 100%;
   object-fit: cover;
 }
+
+.placeholder-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+  font-size: 16px;
+  opacity: 0.7;
+}
 </style>
diff --git a/open-isle-cli/src/views/MessagePageView.vue b/open-isle-cli/src/views/MessagePageView.vue
index 7dde55195..8b841a4ec 100644
--- a/open-isle-cli/src/views/MessagePageView.vue
+++ b/open-isle-cli/src/views/MessagePageView.vue
@@ -13,18 +13,19 @@
 
     <BaseTimeline :items="notifications">
       <template #item="{ item }">
-        <div class="notif-content">
+        <div class="notif-content" :class="{ read: item.read }">
+          <span v-if="!item.read" class="unread-dot"></span>
           <span class="notif-type">
             <template v-if="item.type === 'COMMENT_REPLY' && item.parentComment">
               <div class="notif-content-container">
                 <span class="notif-user">{{ item.comment.author.username }} </span> 对我的评论
                 <span>
-                  <router-link class="notif-content-text"
+                  <router-link class="notif-content-text" @click="markRead(item.id)"
                     :to="`/posts/${item.post.id}#comment-${item.parentComment.id}`">
                     {{ sanitizeDescription(item.parentComment.content) }}
                   </router-link>
                 </span> 回复了 <span>
-                  <router-link class="notif-content-text" :to="`/posts/${item.post.id}#comment-${item.comment.id}`">
+                  <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>
@@ -34,11 +35,11 @@
               <div class="notif-content-container">
                 <span class="notif-user">{{ item.comment.author.username }} </span> 对我的文章
                 <span>
-                  <router-link class="notif-content-text" :to="`/posts/${item.post.id}`">
+                  <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}`">
                     {{ sanitizeDescription(item.post.title) }}
                   </router-link>
                 </span> 回复了 <span>
-                  <router-link class="notif-content-text" :to="`/posts/${item.post.id}#comment-${item.comment.id}`">
+                  <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>
@@ -63,6 +64,7 @@ import { useRouter } from 'vue-router'
 import { API_BASE_URL } from '../main'
 import BaseTimeline from '../components/BaseTimeline.vue'
 import { getToken } from '../utils/auth'
+import { markNotificationsRead } from '../utils/notification'
 import { toast } from '../main'
 import { stripMarkdown } from '../utils/markdown'
 import { hatch } from 'ldrs'
@@ -76,6 +78,15 @@ export default {
     const notifications = ref([])
     const isLoadingMessage = ref(false)
 
+    const markRead = async id => {
+      if (!id) return
+      const ok = await markNotificationsRead([id])
+      if (ok) {
+        const n = notifications.value.find(n => n.id === id)
+        if (n) n.read = true
+      }
+    }
+
     const iconMap = {
       POST_VIEWED: 'fas fa-eye',
       COMMENT_REPLY: 'fas fa-reply',
@@ -114,7 +125,10 @@ export default {
             notifications.value.push({
               ...n,
               src: n.comment.author.avatar,
-              iconClick: () => router.push(`/users/${n.comment.author.id}`)
+              iconClick: () => {
+                markRead(n.id)
+                router.push(`/users/${n.comment.author.id}`)
+              }
             })
           } else {
             notifications.value.push({
@@ -149,7 +163,7 @@ export default {
 
     onMounted(fetchNotifications)
 
-    return { notifications, formatType, sanitizeDescription, isLoadingMessage }
+    return { notifications, formatType, sanitizeDescription, isLoadingMessage, markRead }
   }
 }
 </script>
@@ -187,6 +201,21 @@ export default {
   display: flex;
   flex-direction: column;
   margin-bottom: 30px;
+  position: relative;
+}
+
+.notif-content.read {
+  opacity: 0.7;
+}
+
+.unread-dot {
+  position: absolute;
+  left: -10px;
+  top: 4px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #ff4d4f;
 }
 
 .notif-type {
diff --git a/open-isle-cli/src/views/PostPageView.vue b/open-isle-cli/src/views/PostPageView.vue
index 10d2c2702..9926e98d7 100644
--- a/open-isle-cli/src/views/PostPageView.vue
+++ b/open-isle-cli/src/views/PostPageView.vue
@@ -27,31 +27,11 @@
           <div class="info-content-text" v-html="renderMarkdown(postContent)"></div>
 
           <div class="article-footer-container">
-            <div class="reactions-container">
-              <div class="reactions-viewer">
-                <div class="reactions-viewer-item-container">
-                  <div class="reactions-viewer-item">
-                    🤣
-                  </div>
-                  <div class="reactions-viewer-item">
-                    ❤️
-                  </div>
-                  <div class="reactions-viewer-item">
-                    👏
-                  </div>
-                </div>
-                <div class="reactions-count">1882</div>
+            <ReactionsGroup v-model="postReactions" content-type="post" :content-id="postId">
+              <div class="make-reaction-item copy-link" @click="copyPostLink">
+                <i class="fas fa-link"></i>
               </div>
-
-              <div class="make-reaction-container">
-                <div class="make-reaction-item like-reaction">
-                  <i class="far fa-heart"></i>
-                </div>
-                <div class="make-reaction-item copy-link" @click="copyPostLink">
-                  <i class="fas fa-link"></i>
-                </div>
-              </div>
-            </div>
+            </ReactionsGroup>
           </div>
         </div>
       </div>
@@ -98,6 +78,7 @@ import CommentItem from '../components/CommentItem.vue'
 import CommentEditor from '../components/CommentEditor.vue'
 import BaseTimeline from '../components/BaseTimeline.vue'
 import ArticleTags from '../components/ArticleTags.vue'
+import ReactionsGroup from '../components/ReactionsGroup.vue'
 import { renderMarkdown } from '../utils/markdown'
 import { API_BASE_URL, toast } from '../main'
 import { getToken } from '../utils/auth'
@@ -107,7 +88,7 @@ hatch.register()
 
 export default {
   name: 'PostPageView',
-  components: { CommentItem, CommentEditor, BaseTimeline, ArticleTags },
+  components: { CommentItem, CommentEditor, BaseTimeline, ArticleTags, ReactionsGroup },
   setup() {
     const route = useRoute()
     const postId = route.params.id
@@ -118,6 +99,7 @@ export default {
     const postContent = ref('')
     const category = ref('')
     const tags = ref([])
+    const postReactions = ref([])
     const comments = ref([])
     const isWaitingFetchingPost = ref(false);
     const isWaitingPostingComment = ref(false);
@@ -150,6 +132,7 @@ export default {
       time: new Date(c.createdAt).toLocaleDateString('zh-CN', { month: 'numeric', day: 'numeric' }),
       avatar: c.author.avatar,
       text: c.content,
+      reactions: c.reactions || [],
       reply: (c.replies || []).map(mapComment),
       openReplies: false,
       src: c.author.avatar,
@@ -196,6 +179,7 @@ export default {
         title.value = data.title
         category.value = data.category
         tags.value = data.tags || []
+        postReactions.value = data.reactions || []
         comments.value = (data.comments || []).map(mapComment)
         postTime.value = new Date(data.createdAt).toLocaleDateString('zh-CN', { month: 'numeric', day: 'numeric' })
         await nextTick()
@@ -323,6 +307,8 @@ export default {
       mainContainer,
       currentIndex,
       totalPosts,
+      postReactions,
+      postId,
       postComment,
       onSliderInput,
       onScroll: updateCurrentIndex,
diff --git a/src/main/java/com/openisle/controller/ReactionController.java b/src/main/java/com/openisle/controller/ReactionController.java
index bef570999..ef8ddd1fa 100644
--- a/src/main/java/com/openisle/controller/ReactionController.java
+++ b/src/main/java/com/openisle/controller/ReactionController.java
@@ -28,6 +28,9 @@ public class ReactionController {
                                                   @RequestBody ReactionRequest req,
                                                   Authentication auth) {
         Reaction reaction = reactionService.reactToPost(auth.getName(), postId, req.getType());
+        if (reaction == null) {
+            return ResponseEntity.noContent().build();
+        }
         return ResponseEntity.ok(toDto(reaction));
     }
 
@@ -36,6 +39,9 @@ public class ReactionController {
                                                      @RequestBody ReactionRequest req,
                                                      Authentication auth) {
         Reaction reaction = reactionService.reactToComment(auth.getName(), commentId, req.getType());
+        if (reaction == null) {
+            return ResponseEntity.noContent().build();
+        }
         return ResponseEntity.ok(toDto(reaction));
     }
 
diff --git a/src/main/java/com/openisle/model/Reaction.java b/src/main/java/com/openisle/model/Reaction.java
index 380d2ceb9..9fb71d8c1 100644
--- a/src/main/java/com/openisle/model/Reaction.java
+++ b/src/main/java/com/openisle/model/Reaction.java
@@ -14,8 +14,8 @@ import lombok.Setter;
 @NoArgsConstructor
 @Table(name = "reactions",
        uniqueConstraints = {
-           @UniqueConstraint(columnNames = {"user_id", "post_id"}),
-           @UniqueConstraint(columnNames = {"user_id", "comment_id"})
+           @UniqueConstraint(columnNames = {"user_id", "post_id", "type"}),
+           @UniqueConstraint(columnNames = {"user_id", "comment_id", "type"})
        })
 public class Reaction {
     @Id
diff --git a/src/main/java/com/openisle/repository/ReactionRepository.java b/src/main/java/com/openisle/repository/ReactionRepository.java
index a9ffa9c43..c5ba190ac 100644
--- a/src/main/java/com/openisle/repository/ReactionRepository.java
+++ b/src/main/java/com/openisle/repository/ReactionRepository.java
@@ -13,8 +13,8 @@ import java.util.List;
 import java.util.Optional;
 
 public interface ReactionRepository extends JpaRepository<Reaction, Long> {
-    Optional<Reaction> findByUserAndPost(User user, Post post);
-    Optional<Reaction> findByUserAndComment(User user, Comment comment);
+    Optional<Reaction> findByUserAndPostAndType(User user, Post post, com.openisle.model.ReactionType type);
+    Optional<Reaction> findByUserAndCommentAndType(User user, Comment comment, com.openisle.model.ReactionType type);
     List<Reaction> findByPost(Post post);
     List<Reaction> findByComment(Comment comment);
 
diff --git a/src/main/java/com/openisle/service/ReactionService.java b/src/main/java/com/openisle/service/ReactionService.java
index 57c39a28e..cfbea0c33 100644
--- a/src/main/java/com/openisle/service/ReactionService.java
+++ b/src/main/java/com/openisle/service/ReactionService.java
@@ -28,8 +28,12 @@ public class ReactionService {
                 .orElseThrow(() -> new IllegalArgumentException("User not found"));
         Post post = postRepository.findById(postId)
                 .orElseThrow(() -> new IllegalArgumentException("Post not found"));
-        Reaction reaction = reactionRepository.findByUserAndPost(user, post)
-                .orElseGet(Reaction::new);
+        java.util.Optional<Reaction> existing = reactionRepository.findByUserAndPostAndType(user, post, type);
+        if (existing.isPresent()) {
+            reactionRepository.delete(existing.get());
+            return null;
+        }
+        Reaction reaction = new Reaction();
         reaction.setUser(user);
         reaction.setPost(post);
         reaction.setType(type);
@@ -45,8 +49,12 @@ public class ReactionService {
                 .orElseThrow(() -> new IllegalArgumentException("User not found"));
         Comment comment = commentRepository.findById(commentId)
                 .orElseThrow(() -> new IllegalArgumentException("Comment not found"));
-        Reaction reaction = reactionRepository.findByUserAndComment(user, comment)
-                .orElseGet(Reaction::new);
+        java.util.Optional<Reaction> existing = reactionRepository.findByUserAndCommentAndType(user, comment, type);
+        if (existing.isPresent()) {
+            reactionRepository.delete(existing.get());
+            return null;
+        }
+        Reaction reaction = new Reaction();
         reaction.setUser(user);
         reaction.setComment(comment);
         reaction.setPost(null);