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 b62cefc14094ca5ac7154f7d48797a1e6c444935)
@@ -0,0 +1,56 @@
+import React from 'react'
+import { Heart } from 'lucide-react'
+import { useNavigate } from 'react-router-dom'
+import { useAuthStore } from '../../store/authStore'
+import { useStoryStore } from '../../store/storyStore'
+import { useNotificationStore } from '../../store/notificationStore'
+import { useUIStore } from '../../store/uiStore'
+
+interface LikeButtonProps {
+  storyId: number
+  authorUserId: number
+  totalLikes: number
+}
+
+export const LikeButton: React.FC<LikeButtonProps> = ({ storyId, authorUserId, totalLikes }) => {
+  const navigate = useNavigate()
+  const { currentUser } = useAuthStore()
+  const { toggleLike, isLiked } = useStoryStore()
+  const { addNotification } = useNotificationStore()
+  const { addToast } = useUIStore()
+
+  const liked = currentUser ? isLiked(currentUser.user_id, storyId) : false
+
+  const handleClick = () => {
+    if (!currentUser) {
+      addToast('Please sign in to like stories.', 'info')
+      navigate('/login')
+      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}`,
+      })
+    }
+    addToast(liked ? 'Removed from likes' : 'Added to likes!', liked ? 'info' : 'success')
+  }
+
+  return (
+    <button
+      onClick={handleClick}
+      className={`flex items-center gap-2 px-4 py-2 rounded-xl border transition-all duration-200 ${
+        liked
+          ? 'bg-rose-500/20 border-rose-500/40 text-rose-400 hover:bg-rose-500/30'
+          : 'bg-slate-800 border-slate-700 text-slate-400 hover:border-rose-500/40 hover:text-rose-400 hover:bg-rose-500/10'
+      }`}
+    >
+      <Heart size={16} className={liked ? 'fill-rose-400' : ''} />
+      <span className="text-sm font-medium">{totalLikes.toLocaleString()}</span>
+    </button>
+  )
+}