Index: chapterx-frontend/src/components/story/LikeButton.tsx
===================================================================
--- chapterx-frontend/src/components/story/LikeButton.tsx	(revision b62cefc14094ca5ac7154f7d48797a1e6c444935)
+++ chapterx-frontend/src/components/story/LikeButton.tsx	(revision 73b69b22fa1e9888b8530a66db4a150efb8f52bc)
@@ -1,9 +1,18 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { Heart } from 'lucide-react'
 import { useNavigate } from 'react-router-dom'
+import axios from 'axios'
 import { useAuthStore } from '../../store/authStore'
-import { useStoryStore } from '../../store/storyStore'
 import { useNotificationStore } from '../../store/notificationStore'
 import { useUIStore } from '../../store/uiStore'
+
+const API = 'https://localhost:7125/api'
+
+function getAuthHeaders() {
+  try {
+    const token = JSON.parse(localStorage.getItem('chapterx-auth') || '{}')?.state?.token
+    return token ? { Authorization: `Bearer ${token}` } : {}
+  } catch { return {} }
+}
 
 interface LikeButtonProps {
@@ -11,16 +20,30 @@
   authorUserId: number
   totalLikes: number
+  onCountChange?: (count: number) => void
 }
 
-export const LikeButton: React.FC<LikeButtonProps> = ({ storyId, authorUserId, totalLikes }) => {
+export const LikeButton: React.FC<LikeButtonProps> = ({ storyId, authorUserId, totalLikes, onCountChange }) => {
   const navigate = useNavigate()
   const { currentUser } = useAuthStore()
-  const { toggleLike, isLiked } = useStoryStore()
   const { addNotification } = useNotificationStore()
   const { addToast } = useUIStore()
+  const [liked, setLiked] = useState(false)
+  const [count, setCount] = useState(totalLikes)
+  const [loading, setLoading] = useState(false)
 
-  const liked = currentUser ? isLiked(currentUser.user_id, storyId) : false
+  useEffect(() => {
+    axios.get(`${API}/likes/story/${storyId}`)
+      .then(res => {
+        const c = res.data?.count ?? totalLikes
+        setCount(c)
+        onCountChange?.(c)
+        if (currentUser) {
+          setLiked((res.data?.userIds ?? []).includes(currentUser.user_id))
+        }
+      })
+      .catch(() => {})
+  }, [storyId, currentUser?.user_id])
 
-  const handleClick = () => {
+  const handleClick = async () => {
     if (!currentUser) {
       addToast('Please sign in to like stories.', 'info')
@@ -28,15 +51,30 @@
       return
     }
-    toggleLike(currentUser.user_id, storyId)
-    if (!liked && currentUser.user_id !== authorUserId) {
-      addNotification({
-        user_id: authorUserId,
-        type: 'like',
-        title: 'New Like',
-        message: `${currentUser.username} liked your story.`,
-        link: `/story/${storyId}`,
-      })
+    if (loading) return
+    setLoading(true)
+    try {
+      if (liked) {
+        await axios.delete(`${API}/likes/user/${currentUser.user_id}/story/${storyId}`, { headers: getAuthHeaders() })
+        setLiked(false)
+        setCount(c => { const n = c - 1; onCountChange?.(n); return n })
+        addToast('Removed from likes', 'info')
+      } else {
+        await axios.post(`${API}/likes`, { userId: currentUser.user_id, storyId }, { headers: getAuthHeaders() })
+        setLiked(true)
+        setCount(c => { const n = c + 1; onCountChange?.(n); return n })
+        if (currentUser.user_id !== authorUserId) {
+          await addNotification({
+            recipientUserId: authorUserId,
+            type: 'like',
+            content: `${currentUser.username} liked your story.`,
+            link: `/story/${storyId}`,
+          })
+        }
+        addToast('Added to likes!', 'success')
+      }
+    } catch {
+      addToast('Something went wrong.', 'error')
     }
-    addToast(liked ? 'Removed from likes' : 'Added to likes!', liked ? 'info' : 'success')
+    setLoading(false)
   }
 
@@ -44,4 +82,5 @@
     <button
       onClick={handleClick}
+      disabled={loading}
       className={`flex items-center gap-2 px-4 py-2 rounded-xl border transition-all duration-200 ${
         liked
@@ -51,5 +90,5 @@
     >
       <Heart size={16} className={liked ? 'fill-rose-400' : ''} />
-      <span className="text-sm font-medium">{totalLikes.toLocaleString()}</span>
+      <span className="text-sm font-medium">{count.toLocaleString()}</span>
     </button>
   )