diff --git a/src/Novelly.Web/src/pages/ChaptersPage.tsx b/src/Novelly.Web/src/pages/ChaptersPage.tsx
index 2c26891..733c7e4 100644
--- a/src/Novelly.Web/src/pages/ChaptersPage.tsx
+++ b/src/Novelly.Web/src/pages/ChaptersPage.tsx
@@ -1,15 +1,19 @@
 import { Link, useParams } from 'react-router-dom'
-import { useChapters, useCreateChapter } from '../api/hooks'
+import { useChapters, useCreateChapter, useProject } from '../api/hooks'
 import { EmptyState, ErrorNote, Spinner, StatusBadge } from '../components/ui'
 import { TagChip } from '../components/TagEditor'
+import { useAuth } from '../auth/AuthContext'
 import { useHotkey } from '../keyboard/HotkeysContext'
 
 export default function ChaptersPage() {
   const { projectId = '' } = useParams()
   const { data: chapters, isPending, error } = useChapters(projectId)
+  const { data: project } = useProject(projectId)
+  const { can } = useAuth()
+  const canCreate = can('CreateContent', project)
   const create = useCreateChapter(projectId)
 
-  useHotkey('n', 'Add chapter', () => create.mutate({ title: 'Untitled chapter' }), { group: 'Chapters' })
+  useHotkey('n', 'Add chapter', () => canCreate && create.mutate({ title: 'Untitled chapter' }), { group: 'Chapters' })
 
   if (isPending) return <Spinner label="Loading chapters" />
   if (error) return <ErrorNote error={error} />
@@ -18,13 +22,15 @@ export default function ChaptersPage() {
     <div>
       <div className="mb-5 flex items-center justify-between gap-4">
         <h2 className="text-xl font-semibold">Chapters</h2>
-        <button
-          className="btn btn-primary"
-          onClick={() => create.mutate({ title: 'Untitled chapter' })}
-          disabled={create.isPending}
-        >
-          Add chapter
-        </button>
+        {canCreate && (
+          <button
+            className="btn btn-primary"
+            onClick={() => create.mutate({ title: 'Untitled chapter' })}
+            disabled={create.isPending}
+          >
+            Add chapter
+          </button>
+        )}
       </div>
 
       {create.error && <ErrorNote error={create.error} />}