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 b62cefc14094ca5ac7154f7d48797a1e6c444935)
@@ -0,0 +1,120 @@
+import React, { useState } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import { ArrowLeft, BookOpen } from 'lucide-react'
+import { useAuthStore } from '../../store/authStore'
+import { useStoryStore } from '../../store/storyStore'
+import { useUIStore } from '../../store/uiStore'
+import { Button } from '../../components/ui/Button'
+import { Chapter } from '../../types'
+
+export const CreateChapterPage: React.FC = () => {
+  const { storyId } = useParams<{ storyId: string }>()
+  const navigate = useNavigate()
+  const { currentUser } = useAuthStore()
+  const { stories, chapters, addChapter } = useStoryStore()
+  const { addToast } = useUIStore()
+  const [form, setForm] = useState({ title: '', content: '' })
+  const [errors, setErrors] = useState<Record<string, string>>({})
+  const [loading, setLoading] = useState(false)
+
+  const story = stories.find(s => s.story_id === Number(storyId))
+  const storyChapters = chapters.filter(c => c.story_id === Number(storyId))
+  const wordCount = form.content.trim().split(/\s+/).filter(Boolean).length
+
+  if (!story) {
+    return (
+      <div className="max-w-4xl mx-auto px-4 py-20 text-center">
+        <h2 className="text-2xl text-white mb-4">Story not found</h2>
+        <Button onClick={() => navigate('/writer')}>Back</Button>
+      </div>
+    )
+  }
+
+  const validate = () => {
+    const e: Record<string, string> = {}
+    if (!form.title.trim()) e.title = 'Chapter title is required'
+    if (!form.content.trim()) e.content = 'Chapter content is required'
+    if (wordCount < 10) e.content = 'Chapter must be at least 10 words'
+    setErrors(e)
+    return Object.keys(e).length === 0
+  }
+
+  const handleSubmit = async (isPublished: boolean) => {
+    if (!validate() || !currentUser) return
+    setLoading(true)
+    await new Promise(r => setTimeout(r, 400))
+    const chapter: Chapter = {
+      chapter_id: Date.now(),
+      story_id: Number(storyId),
+      title: form.title.trim(),
+      content: form.content.trim(),
+      chapter_number: storyChapters.length + 1,
+      word_count: wordCount,
+      view_count: 0,
+      created_at: new Date().toISOString(),
+      updated_at: new Date().toISOString(),
+      is_published: isPublished,
+    }
+    addChapter(chapter)
+    addToast(isPublished ? 'Chapter published!' : 'Chapter saved as draft!')
+    navigate(`/writer/edit-story/${storyId}`)
+    setLoading(false)
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto px-4 py-8">
+      <div className="flex items-center gap-3 mb-8">
+        <button onClick={() => navigate(`/writer/edit-story/${storyId}`)} className="text-slate-400 hover:text-white transition-colors">
+          <ArrowLeft size={20} />
+        </button>
+        <div>
+          <p className="text-slate-400 text-sm">{story.title}</p>
+          <h1 className="font-serif text-2xl font-bold text-white">New Chapter</h1>
+          <p className="text-slate-500 text-xs mt-0.5">Chapter {storyChapters.length + 1}</p>
+        </div>
+      </div>
+
+      <div className="space-y-6">
+        <div>
+          <label className="block text-sm font-medium text-slate-300 mb-1.5">Chapter Title *</label>
+          <input
+            value={form.title}
+            onChange={e => { setForm(f => ({ ...f, title: e.target.value })); setErrors(e => ({ ...e, title: '' })) }}
+            placeholder="The Awakening..."
+            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 font-serif text-lg ${errors.title ? 'border-rose-500' : 'border-slate-700'}`}
+          />
+          {errors.title && <p className="text-rose-400 text-xs mt-1">{errors.title}</p>}
+        </div>
+
+        <div>
+          <div className="flex items-center justify-between mb-1.5">
+            <label className="text-sm font-medium text-slate-300">Chapter Content *</label>
+            <div className="flex items-center gap-2 text-xs text-slate-500">
+              <BookOpen size={12} />
+              <span className={wordCount > 100 ? 'text-emerald-400' : wordCount > 50 ? 'text-amber-400' : 'text-slate-500'}>
+                {wordCount.toLocaleString()} words
+              </span>
+            </div>
+          </div>
+          <textarea
+            value={form.content}
+            onChange={e => { setForm(f => ({ ...f, content: e.target.value })); setErrors(e => ({ ...e, content: '' })) }}
+            placeholder="Begin your chapter here..."
+            rows={20}
+            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 text-base leading-relaxed ${errors.content ? 'border-rose-500' : 'border-slate-700'}`}
+          />
+          {errors.content && <p className="text-rose-400 text-xs mt-1">{errors.content}</p>}
+        </div>
+
+        <div className="flex gap-3 pt-4 border-t border-slate-700">
+          <Button variant="secondary" className="flex-1" onClick={() => handleSubmit(false)} loading={loading}>
+            Save as Draft
+          </Button>
+          <Button className="flex-1" onClick={() => handleSubmit(true)} loading={loading}>
+            Publish Chapter
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}