Index: chapterx-frontend/src/store/notificationStore.ts
===================================================================
--- chapterx-frontend/src/store/notificationStore.ts	(revision acf690c1403ecbecd948a46d950278f177f2d408)
+++ chapterx-frontend/src/store/notificationStore.ts	(revision 73b69b22fa1e9888b8530a66db4a150efb8f52bc)
@@ -1,41 +1,86 @@
 import { create } from 'zustand'
+import axios from 'axios'
 import { Notification } from '../types'
-import { mockNotifications } from '../data/mockData'
+
+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 NotificationStore {
   notifications: Notification[]
-  addNotification: (n: Omit<Notification, 'notification_id' | 'created_at' | 'is_read'>) => void
-  markAllRead: () => void
-  markRead: (id: number) => void
+  fetchUserNotifications: (userId: number) => Promise<void>
+  addNotification: (n: { recipientUserId: number; type: string; content: string; link?: string }) => Promise<void>
+  markAllRead: () => Promise<void>
+  markRead: (id: number) => Promise<void>
   getUnreadCount: () => number
 }
 
 export const useNotificationStore = create<NotificationStore>((set, get) => ({
-  notifications: [...mockNotifications],
+  notifications: [],
 
-  addNotification: (n) =>
-    set(state => ({
-      notifications: [
-        {
-          ...n,
-          notification_id: Date.now(),
-          created_at: new Date().toISOString(),
-          is_read: false,
-        },
-        ...state.notifications,
-      ],
-    })),
+  fetchUserNotifications: async (userId) => {
+    try {
+      const res = await axios.get(`${API}/notifications/user/${userId}`, { headers: getAuthHeaders() })
+      const data: any[] = res.data ?? []
+      const notifications: Notification[] = data.map(n => ({
+        notification_id: n.id,
+        user_id: userId,
+        type: n.type ?? 'info',
+        title: n.type ?? 'Notification',
+        message: n.content,
+        link: n.link,
+        is_read: n.isRead,
+        created_at: n.createdAt,
+      }))
+      set({ notifications })
+    } catch {
+      // keep existing
+    }
+  },
 
-  markAllRead: () =>
-    set(state => ({
-      notifications: state.notifications.map(n => ({ ...n, is_read: true })),
-    })),
+  addNotification: async ({ recipientUserId, type, content, link }) => {
+    try {
+      await axios.post(`${API}/notifications`, {
+        content,
+        recipientUserId,
+        type,
+        link,
+      }, { headers: getAuthHeaders() })
+    } catch {
+      // silent — notification is for recipient, not current user
+    }
+  },
 
-  markRead: (id) =>
+  markAllRead: async () => {
+    const unread = get().notifications.filter(n => !n.is_read)
+    set(state => ({ notifications: state.notifications.map(n => ({ ...n, is_read: true })) }))
+    try {
+      await Promise.all(unread.map(n =>
+        axios.put(`${API}/notifications/${n.notification_id}/read`, {}, { headers: getAuthHeaders() })
+      ))
+    } catch {
+      // keep optimistic
+    }
+  },
+
+  markRead: async (id) => {
     set(state => ({
       notifications: state.notifications.map(n =>
         n.notification_id === id ? { ...n, is_read: true } : n
       ),
-    })),
+    }))
+    try {
+      await axios.put(`${API}/notifications/${id}/read`, {}, { headers: getAuthHeaders() })
+    } catch {
+      // keep optimistic
+    }
+  },
 
   getUnreadCount: () => get().notifications.filter(n => !n.is_read).length,
Index: chapterx-frontend/src/store/storyStore.ts
===================================================================
--- chapterx-frontend/src/store/storyStore.ts	(revision acf690c1403ecbecd948a46d950278f177f2d408)
+++ chapterx-frontend/src/store/storyStore.ts	(revision 73b69b22fa1e9888b8530a66db4a150efb8f52bc)
@@ -25,4 +25,25 @@
 const API = 'https://localhost:7125/api'
 
+function mapReadingList(l: any): ReadingList {
+  return {
+    list_id: l.id,
+    user_id: l.userId,
+    username: l.username ?? '',
+    name: l.name,
+    description: l.content ?? '',
+    is_public: l.isPublic,
+    created_at: l.createdAt,
+    stories: (l.readingListItems ?? []).map((i: any) => ({
+      item_id: i.listId ?? 0,
+      list_id: l.id,
+      story_id: i.storyId,
+      story_title: i.storyTitle ?? `Story #${i.storyId}`,
+      author_username: i.authorUsername ?? '',
+      added_at: i.addedAt ?? new Date().toISOString(),
+      genres: i.genres ?? [],
+    })),
+  }
+}
+
 function getAuthHeaders() {
   try {
@@ -53,4 +74,6 @@
   fetchChapters: () => Promise<void>
   fetchReadingLists: () => Promise<void>
+  fetchUserReadingLists: (userId: number) => Promise<void>
+  fetchGenres: () => Promise<void>
 
   // Story actions
@@ -86,6 +109,6 @@
 
   // Genre actions
-  addGenre: (genre: Genre) => void
-  deleteGenre: (id: number) => void
+  addGenre: (name: string) => Promise<void>
+  deleteGenre: (id: number) => Promise<void>
 
   // Reading list actions
@@ -103,5 +126,5 @@
   aiSuggestions: [...mockAISuggestions],
   genres: [...mockGenres],
-  readingLists: [...mockReadingLists],
+  readingLists: [],
   likedStories: [],
 
@@ -118,5 +141,5 @@
         mature_content: s.matureContent,
         status: 'published' as StoryStatus,
-        author_username: '',
+        author_username: s.writer?.user?.username ?? '',
         created_at: s.createdAt,
         updated_at: s.updatedAt,
@@ -125,5 +148,5 @@
         total_chapters: 0,
         total_views: 0,
-        genres: [],
+        genres: (s.hasGenres ?? []).map((hg: any) => hg.genre?.name ?? hg.name).filter(Boolean),
       }))
       if (stories.length > 0) set({ stories })
@@ -159,8 +182,9 @@
     const res = await axios.post(`${API}/stories`, {
       matureContent: story.mature_content,
-      shortDescription: story.title || story.short_description,
+      shortDescription: story.short_description || story.title,
       image: null,
       content: story.content,
       userId: story.user_id,
+      genres: story.genres ?? [],
     }, { headers: getAuthHeaders() })
     const backendId = res.data?.id ?? res.data
@@ -443,42 +467,54 @@
   },
 
-  addGenre: (genre) =>
-    set(state => ({ genres: [...state.genres, genre] })),
-
-  deleteGenre: (id) =>
-    set(state => ({ genres: state.genres.filter(g => g.genre_id !== id) })),
+  fetchGenres: async () => {
+    try {
+      const res = await axios.get(`${API}/genres`)
+      const data: any[] = res.data?.genres ?? res.data ?? []
+      const genres: Genre[] = data.map((g: any) => ({ genre_id: g.id, name: g.name }))
+      if (genres.length > 0) set({ genres })
+    } catch {
+      // keep mock data on failure
+    }
+  },
+
+  addGenre: async (name) => {
+    const res = await axios.post(`${API}/genres`, { name }, { headers: getAuthHeaders() })
+    const id = res.data?.id ?? res.data
+    set(state => ({ genres: [...state.genres, { genre_id: id, name }] }))
+  },
+
+  deleteGenre: async (id) => {
+    set(state => ({ genres: state.genres.filter(g => g.genre_id !== id) }))
+    try {
+      await axios.delete(`${API}/genres/${id}`, { headers: getAuthHeaders() })
+    } catch {
+      // optimistic delete already applied
+    }
+  },
 
   fetchReadingLists: async () => {
     try {
-      const [listsRes, storiesRes] = await Promise.all([
-        axios.get(`${API}/readinglists`),
-        axios.get(`${API}/stories`),
-      ])
-      const data: any[] = listsRes.data?.readingLists ?? listsRes.data ?? []
-      const storiesData: any[] = storiesRes.data?.stories ?? storiesRes.data ?? []
-      const lists: ReadingList[] = data.map((l: any) => ({
-        list_id: l.id,
-        user_id: l.userId,
-        username: '',
-        name: l.name,
-        description: l.content ?? '',
-        is_public: l.isPublic,
-        created_at: l.createdAt,
-        stories: (l.readingListItems ?? []).map((i: any) => {
-          const story = storiesData.find((s: any) => s.id === i.storyId)
-          return {
-            item_id: i.id ?? 0,
-            list_id: l.id,
-            story_id: i.storyId,
-            story_title: story?.title ?? story?.shortDescription ?? `Story #${i.storyId}`,
-            author_username: story?.authorUsername ?? '',
-            added_at: i.addedAt ?? new Date().toISOString(),
-            genres: story?.genres ?? [],
-          }
-        }),
-      }))
-      if (lists.length > 0) set({ readingLists: lists })
-    } catch {
-      // keep mock data on failure
+      const res = await axios.get(`${API}/readinglists`)
+      const data: any[] = res.data ?? []
+      const lists: ReadingList[] = data.map(mapReadingList)
+      set({ readingLists: lists })
+    } catch {
+      // keep existing data on failure
+    }
+  },
+
+  fetchUserReadingLists: async (userId) => {
+    try {
+      const res = await axios.get(`${API}/readinglists/user/${userId}`, { headers: getAuthHeaders() })
+      const data: any[] = res.data ?? []
+      const lists: ReadingList[] = data.map(mapReadingList)
+      set(state => ({
+        readingLists: [
+          ...state.readingLists.filter(l => l.user_id !== userId),
+          ...lists,
+        ]
+      }))
+    } catch (err) {
+      console.error('fetchUserReadingLists failed:', err)
     }
   },
@@ -525,9 +561,5 @@
     }))
     try {
-      // find the item id from backend list items to delete
-      const res = await axios.get(`${API}/readinglistitems`)
-      const items: any[] = res.data?.readingListItems ?? res.data ?? []
-      const item = items.find((i: any) => i.readingListId === listId && i.storyId === storyId)
-      if (item) await axios.delete(`${API}/readinglistitems/${item.id}`, { headers: getAuthHeaders() })
+      await axios.delete(`${API}/readinglistitems/${listId}/story/${storyId}`, { headers: getAuthHeaders() })
     } catch {
       // optimistic update already applied