Index: chapterx-frontend/src/pages/reading-list/ReadingListPage.tsx
===================================================================
--- chapterx-frontend/src/pages/reading-list/ReadingListPage.tsx	(revision b62cefc14094ca5ac7154f7d48797a1e6c444935)
+++ chapterx-frontend/src/pages/reading-list/ReadingListPage.tsx	(revision acf690c1403ecbecd948a46d950278f177f2d408)
@@ -1,3 +1,3 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { Plus, BookOpen, Lock, Globe, Trash2, X } from 'lucide-react'
@@ -12,5 +12,9 @@
   const navigate = useNavigate()
   const { currentUser } = useAuthStore()
-  const { readingLists, createReadingList, deleteReadingList, removeStoryFromList } = useStoryStore()
+  const { readingLists, fetchReadingLists, createReadingList, deleteReadingList, removeStoryFromList } = useStoryStore()
+
+  useEffect(() => {
+    fetchReadingLists()
+  }, [])
   const { addToast } = useUIStore()
   const [createOpen, setCreateOpen] = useState(false)
@@ -31,17 +35,22 @@
   const myLists = readingLists.filter(l => l.user_id === currentUser.user_id)
 
-  const handleCreate = () => {
+  const handleCreate = async () => {
     if (!newListName.trim()) return
-    createReadingList({
-      list_id: Date.now(),
-      user_id: currentUser.user_id,
-      username: currentUser.username,
-      name: newListName.trim(),
-      description: newListDesc.trim() || undefined,
-      is_public: isPublic,
-      created_at: new Date().toISOString(),
-      stories: [],
-    })
-    addToast(`"${newListName}" created!`)
+    try {
+      await createReadingList({
+        list_id: Date.now(),
+        user_id: currentUser.user_id,
+        username: currentUser.username,
+        name: newListName.trim(),
+        description: newListDesc.trim() || undefined,
+        is_public: isPublic,
+        created_at: new Date().toISOString(),
+        stories: [],
+      })
+      addToast(`"${newListName}" created!`)
+    } catch (err: any) {
+      addToast(err?.response?.data?.message || 'Failed to create list.', 'error')
+      return
+    }
     setNewListName('')
     setNewListDesc('')
@@ -100,5 +109,5 @@
                   </div>
                   <button
-                    onClick={() => { deleteReadingList(list.list_id); addToast('List deleted', 'info') }}
+                    onClick={async () => { try { await deleteReadingList(list.list_id); addToast('List deleted', 'info') } catch { addToast('Failed to delete list.', 'error') } }}
                     className="text-slate-500 hover:text-rose-400 transition-colors p-1"
                   >