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"
                   >
Index: chapterx-frontend/src/pages/story/StoryDetailPage.tsx
===================================================================
--- chapterx-frontend/src/pages/story/StoryDetailPage.tsx	(revision b62cefc14094ca5ac7154f7d48797a1e6c444935)
+++ chapterx-frontend/src/pages/story/StoryDetailPage.tsx	(revision acf690c1403ecbecd948a46d950278f177f2d408)
@@ -39,5 +39,5 @@
   const myLists = currentUser ? readingLists.filter(l => l.user_id === currentUser.user_id) : []
 
-  const handleAddToList = (listId: number) => {
+  const handleAddToList = async (listId: number) => {
     const list = readingLists.find(l => l.list_id === listId)
     if (!list) return
@@ -55,10 +55,19 @@
       genres: story.genres,
     }
-    addStoryToList(listId, item)
-    addToast(`Added to "${list.name}"!`)
+    try {
+      await addStoryToList(listId, item)
+      addToast(`Added to "${list.name}"!`)
+    } catch (err: any) {
+      const msg = err?.response?.data?.message || ''
+      if (msg.includes('already') || msg.includes('duplicate') || err?.response?.status === 400) {
+        addToast('Already in this list', 'info')
+      } else {
+        addToast('Failed to add to list.', 'error')
+      }
+    }
     setListModalOpen(false)
   }
 
-  const handleCreateList = () => {
+  const handleCreateList = async () => {
     if (!newListName.trim() || !currentUser) return
     const newList = {
@@ -69,7 +78,11 @@
       is_public: false,
       created_at: new Date().toISOString(),
-      stories: [{
+      stories: [],
+    }
+    try {
+      const realListId = await createReadingList(newList)
+      await addStoryToList(realListId, {
         item_id: Date.now() + 1,
-        list_id: Date.now(),
+        list_id: realListId,
         story_id: story.story_id,
         story_title: story.title,
@@ -77,8 +90,9 @@
         added_at: new Date().toISOString(),
         genres: story.genres,
-      }],
-    }
-    createReadingList(newList)
-    addToast(`Created "${newListName}" and added story!`)
+      })
+      addToast(`Created "${newListName}" and added story!`)
+    } catch {
+      addToast('Failed to create list.', 'error')
+    }
     setNewListName('')
     setListModalOpen(false)
Index: chapterx-frontend/src/pages/writer/CreateChapterPage.tsx
===================================================================
--- chapterx-frontend/src/pages/writer/CreateChapterPage.tsx	(revision b62cefc14094ca5ac7154f7d48797a1e6c444935)
+++ chapterx-frontend/src/pages/writer/CreateChapterPage.tsx	(revision acf690c1403ecbecd948a46d950278f177f2d408)
@@ -56,7 +56,14 @@
       is_published: isPublished,
     }
-    addChapter(chapter)
+    try {
+      await addChapter(chapter)
+    } catch (err: any) {
+      const msg = err?.response?.data?.message || err?.message || 'Failed to save chapter.'
+      addToast(msg, 'error')
+      setLoading(false)
+      return
+    }
     addToast(isPublished ? 'Chapter published!' : 'Chapter saved as draft!')
-    navigate(`/writer/edit-story/${storyId}`)
+    navigate(isPublished ? `/story/${storyId}` : `/writer/edit-story/${storyId}`)
     setLoading(false)
   }
Index: chapterx-frontend/src/pages/writer/CreateStoryPage.tsx
===================================================================
--- chapterx-frontend/src/pages/writer/CreateStoryPage.tsx	(revision b62cefc14094ca5ac7154f7d48797a1e6c444935)
+++ chapterx-frontend/src/pages/writer/CreateStoryPage.tsx	(revision acf690c1403ecbecd948a46d950278f177f2d408)
@@ -1,3 +1,3 @@
-import React, { useState } from 'react'
+import React, { useState, useRef } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { Feather, ArrowLeft, X } from 'lucide-react'
@@ -6,4 +6,5 @@
 import { useUIStore } from '../../store/uiStore'
 import { Button } from '../../components/ui/Button'
+import { StoryCreationAIPanel, StoryCreationAIPanelRef } from '../../components/writer/StoryCreationAIPanel'
 import { Story } from '../../types'
 
@@ -13,6 +14,7 @@
   const navigate = useNavigate()
   const { currentUser } = useAuthStore()
-  const { addStory } = useStoryStore()
+  const { addStory, addSuggestion } = useStoryStore()
   const { addToast } = useUIStore()
+  const aiPanelRef = useRef<StoryCreationAIPanelRef>(null)
   const [form, setForm] = useState({
     title: '',
@@ -53,7 +55,16 @@
       total_views: 0,
     }
-    addStory(story)
+    let realId: number
+    try {
+      realId = await addStory(story)
+    } catch (err: any) {
+      const msg = err?.response?.data?.message || err?.message || 'Failed to save story.'
+      addToast(msg, 'error')
+      setLoading(false)
+      return
+    }
+
     addToast(status === 'published' ? 'Story published!' : 'Draft saved!')
-    navigate(`/writer/edit-story/${story.story_id}`)
+    navigate(`/writer/edit-story/${realId}`)
     setLoading(false)
   }
@@ -73,5 +84,5 @@
 
   return (
-    <div className="max-w-3xl mx-auto px-4 py-8">
+    <div className="max-w-6xl mx-auto px-4 py-8">
       <div className="flex items-center gap-3 mb-8">
         <button onClick={() => navigate('/writer')} className="text-slate-400 hover:text-white transition-colors">
@@ -84,104 +95,117 @@
       </div>
 
-      <div className="space-y-6">
-        {/* Title */}
-        <div>
-          <label className="block text-sm font-medium text-slate-300 mb-1.5">Story Title *</label>
-          <input
-            value={form.title}
-            onChange={e => setField('title', e.target.value)}
-            placeholder="The Chronicles of Eldoria..."
-            className={`w-full px-4 py-3 bg-slate-800 border rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 text-lg font-serif ${errors.title ? 'border-rose-500' : 'border-slate-700'}`}
-          />
-          {errors.title && <p className="text-rose-400 text-xs mt-1">{errors.title}</p>}
-        </div>
-
-        {/* Short description */}
-        <div>
-          <label className="block text-sm font-medium text-slate-300 mb-1.5">Short Description * <span className="text-slate-500 font-normal">(shown on story cards)</span></label>
-          <textarea
-            value={form.short_description}
-            onChange={e => setField('short_description', e.target.value)}
-            placeholder="When the last dragon awakens..."
-            rows={3}
-            maxLength={280}
-            className={`w-full px-4 py-3 bg-slate-800 border rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 resize-none ${errors.short_description ? 'border-rose-500' : 'border-slate-700'}`}
-          />
-          <div className="flex justify-between items-center mt-1">
-            {errors.short_description ? <p className="text-rose-400 text-xs">{errors.short_description}</p> : <span />}
-            <span className="text-slate-600 text-xs">{form.short_description.length}/280</span>
-          </div>
-        </div>
-
-        {/* Content */}
-        <div>
-          <label className="block text-sm font-medium text-slate-300 mb-1.5">Story Content *</label>
-          <textarea
-            value={form.content}
-            onChange={e => setField('content', e.target.value)}
-            placeholder="Begin your story here. This is the introduction that readers will see..."
-            rows={8}
-            className={`w-full px-4 py-3 bg-slate-800 border rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 resize-y font-serif ${errors.content ? 'border-rose-500' : 'border-slate-700'}`}
-          />
-          {errors.content && <p className="text-rose-400 text-xs mt-1">{errors.content}</p>}
-        </div>
-
-        {/* Genres */}
-        <div>
-          <label className="block text-sm font-medium text-slate-300 mb-2">Genres * <span className="text-slate-500 font-normal">(select 1-3)</span></label>
-          <div className="flex flex-wrap gap-2 mb-2">
-            {ALL_GENRES.map(g => (
-              <button
-                key={g}
-                type="button"
-                onClick={() => toggleGenre(g)}
-                className={`px-3 py-1.5 rounded-full text-sm border transition-all ${
-                  form.genres.includes(g)
-                    ? 'bg-indigo-500/30 text-indigo-300 border-indigo-500/50'
-                    : 'bg-slate-800 text-slate-400 border-slate-700 hover:border-slate-500'
-                }`}
-              >
-                {form.genres.includes(g) && <span className="mr-1">✓</span>}
-                {g}
-              </button>
-            ))}
-          </div>
-          {form.genres.length > 0 && (
-            <div className="flex flex-wrap gap-1 mt-1">
-              {form.genres.map(g => (
-                <span key={g} className="flex items-center gap-1 text-xs px-2 py-0.5 bg-indigo-500/20 text-indigo-300 rounded-full">
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        <div className="lg:col-span-2 space-y-6">
+          {/* Title */}
+          <div>
+            <label className="block text-sm font-medium text-slate-300 mb-1.5">Story Title *</label>
+            <input
+              value={form.title}
+              onChange={e => setField('title', e.target.value)}
+              placeholder="The Chronicles of Eldoria..."
+              className={`w-full px-4 py-3 bg-slate-800 border rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 text-lg font-serif ${errors.title ? 'border-rose-500' : 'border-slate-700'}`}
+            />
+            {errors.title && <p className="text-rose-400 text-xs mt-1">{errors.title}</p>}
+          </div>
+
+          {/* Short description */}
+          <div>
+            <label className="block text-sm font-medium text-slate-300 mb-1.5">Short Description * <span className="text-slate-500 font-normal">(shown on story cards)</span></label>
+            <textarea
+              value={form.short_description}
+              onChange={e => setField('short_description', e.target.value)}
+              placeholder="When the last dragon awakens..."
+              rows={3}
+              maxLength={280}
+              className={`w-full px-4 py-3 bg-slate-800 border rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 resize-none ${errors.short_description ? 'border-rose-500' : 'border-slate-700'}`}
+            />
+            <div className="flex justify-between items-center mt-1">
+              {errors.short_description ? <p className="text-rose-400 text-xs">{errors.short_description}</p> : <span />}
+              <span className="text-slate-600 text-xs">{form.short_description.length}/280</span>
+            </div>
+          </div>
+
+          {/* Content */}
+          <div>
+            <label className="block text-sm font-medium text-slate-300 mb-1.5">Story Content *</label>
+            <textarea
+              value={form.content}
+              onChange={e => setField('content', e.target.value)}
+              placeholder="Begin your story here. This is the introduction that readers will see..."
+              rows={8}
+              className={`w-full px-4 py-3 bg-slate-800 border rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 resize-y font-serif ${errors.content ? 'border-rose-500' : 'border-slate-700'}`}
+            />
+            {errors.content && <p className="text-rose-400 text-xs mt-1">{errors.content}</p>}
+          </div>
+
+          {/* Genres */}
+          <div>
+            <label className="block text-sm font-medium text-slate-300 mb-2">Genres * <span className="text-slate-500 font-normal">(select 1-3)</span></label>
+            <div className="flex flex-wrap gap-2 mb-2">
+              {ALL_GENRES.map(g => (
+                <button
+                  key={g}
+                  type="button"
+                  onClick={() => toggleGenre(g)}
+                  className={`px-3 py-1.5 rounded-full text-sm border transition-all ${
+                    form.genres.includes(g)
+                      ? 'bg-indigo-500/30 text-indigo-300 border-indigo-500/50'
+                      : 'bg-slate-800 text-slate-400 border-slate-700 hover:border-slate-500'
+                  }`}
+                >
+                  {form.genres.includes(g) && <span className="mr-1">✓</span>}
                   {g}
-                  <button onClick={() => toggleGenre(g)}><X size={10} /></button>
-                </span>
+                </button>
               ))}
             </div>
-          )}
-          {errors.genres && <p className="text-rose-400 text-xs mt-1">{errors.genres}</p>}
+            {form.genres.length > 0 && (
+              <div className="flex flex-wrap gap-1 mt-1">
+                {form.genres.map(g => (
+                  <span key={g} className="flex items-center gap-1 text-xs px-2 py-0.5 bg-indigo-500/20 text-indigo-300 rounded-full">
+                    {g}
+                    <button onClick={() => toggleGenre(g)}><X size={10} /></button>
+                  </span>
+                ))}
+              </div>
+            )}
+            {errors.genres && <p className="text-rose-400 text-xs mt-1">{errors.genres}</p>}
+          </div>
+
+          {/* Mature content */}
+          <div className="flex items-center gap-3">
+            <button
+              type="button"
+              onClick={() => setField('mature_content', !form.mature_content)}
+              className={`w-11 h-6 rounded-full transition-colors ${form.mature_content ? 'bg-rose-500' : 'bg-slate-600'} relative flex-shrink-0`}
+            >
+              <div className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-transform ${form.mature_content ? 'translate-x-6' : 'translate-x-1'}`} />
+            </button>
+            <div>
+              <p className="text-white text-sm font-medium">Mature Content (18+)</p>
+              <p className="text-slate-500 text-xs">Enable for stories with adult themes</p>
+            </div>
+          </div>
+
+          {/* Actions */}
+          <div className="flex gap-3 pt-4 border-t border-slate-700">
+            <Button variant="secondary" className="flex-1" onClick={() => handleSubmit('draft')} loading={loading}>
+              Save as Draft
+            </Button>
+            <Button className="flex-1" onClick={() => handleSubmit('published')} loading={loading}>
+              <Feather size={16} />
+              Publish Story
+            </Button>
+          </div>
         </div>
 
-        {/* Mature content */}
-        <div className="flex items-center gap-3">
-          <button
-            type="button"
-            onClick={() => setField('mature_content', !form.mature_content)}
-            className={`w-11 h-6 rounded-full transition-colors ${form.mature_content ? 'bg-rose-500' : 'bg-slate-600'} relative flex-shrink-0`}
-          >
-            <div className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-transform ${form.mature_content ? 'translate-x-6' : 'translate-x-1'}`} />
-          </button>
-          <div>
-            <p className="text-white text-sm font-medium">Mature Content (18+)</p>
-            <p className="text-slate-500 text-xs">Enable for stories with adult themes</p>
-          </div>
-        </div>
-
-        {/* Actions */}
-        <div className="flex gap-3 pt-4 border-t border-slate-700">
-          <Button variant="secondary" className="flex-1" onClick={() => handleSubmit('draft')} loading={loading}>
-            Save as Draft
-          </Button>
-          <Button className="flex-1" onClick={() => handleSubmit('published')} loading={loading}>
-            <Feather size={16} />
-            Publish Story
-          </Button>
+        {/* AI Suggestions Sidebar */}
+        <div className="lg:col-span-1">
+          <StoryCreationAIPanel
+            ref={aiPanelRef}
+            title={form.title}
+            description={form.short_description}
+            content={form.content}
+            genres={form.genres}
+          />
         </div>
       </div>
Index: chapterx-frontend/src/pages/writer/EditStoryPage.tsx
===================================================================
--- chapterx-frontend/src/pages/writer/EditStoryPage.tsx	(revision b62cefc14094ca5ac7154f7d48797a1e6c444935)
+++ chapterx-frontend/src/pages/writer/EditStoryPage.tsx	(revision acf690c1403ecbecd948a46d950278f177f2d408)
@@ -63,4 +63,5 @@
     addToast('Story updated!')
     setSaving(false)
+    navigate(`/story/${story.story_id}`)
   }