diff --git a/src/backend/configure.ts b/src/backend/configure.ts
index 28b2500a..6f2295ef 100644
--- a/src/backend/configure.ts
+++ b/src/backend/configure.ts
@@ -152,6 +152,7 @@ export async function configure(command: Configure) {
 
   await codemods.makeUsingStub(stubsRoot, 'resources/layout.stub', {});
   await codemods.makeUsingStub(stubsRoot, 'resources/views/preview.stub', {});
+  await codemods.makeUsingStub(stubsRoot, 'resources/views/preview_devotion.stub', {});
   await codemods.makeUsingStub(stubsRoot, 'resources/views/scripture.stub', {});
 
   await codemods.makeUsingStub(stubsRoot, 'commands/migrate.stub', {});
diff --git a/src/backend/index.ts b/src/backend/index.ts
index 0ca3236b..f845d0c7 100644
--- a/src/backend/index.ts
+++ b/src/backend/index.ts
@@ -54,6 +54,17 @@ export * from './validators/invitation.js';
 export * from './validators/bundle.js';
 export * from './validators/chapter.js';
 export * from './validators/course.js';
+export * from './validators/devotion_draft.js';
+export {
+  createDevotionDraftBundle,
+  normalizeDevotionDraftBundle,
+} from '../shared/devotion_draft.js';
+export { resolvePreviewBundle } from '../shared/preview_bundle.js';
+export { cloneBlocksStructure } from '../shared/block_structure.js';
+export {
+  getPreviousDevotionChapterBlocks,
+  type StoryChapterSpecifier,
+} from '../shared/previous_chapter_blocks.js';
 export { default as DropValidator } from './validators/drop.js';
 export { default as PageValidator } from './validators/page.js';
 export * from './validators/user.js';
diff --git a/src/backend/services/draft_service.ts b/src/backend/services/draft_service.ts
index 46163318..12a88a06 100644
--- a/src/backend/services/draft_service.ts
+++ b/src/backend/services/draft_service.ts
@@ -2,6 +2,8 @@ import Chapter from '../models/chapter.js';
 import type { FieldMap, FieldSpec, StorySpec, StoryVersion, JSON } from '../../types';
 import { BundleService } from './bundle_service.js';
 import { CmsService } from './cms_service.js';
+import { createDevotionDraftBundle } from '../../shared/devotion_draft.js';
+import { isDevotionTemplate } from '../../shared/story_helpers.js';
 
 export class DraftService {
   public story: StorySpec;
@@ -25,6 +27,10 @@ export class DraftService {
   ): Promise<JSON<any> | null> {
     // is this the source language?
     if (version.locale === this.cms.sourceLocale) {
+      if (isDevotionTemplate(this.story.template)) {
+        return JSON.stringify(createDevotionDraftBundle(number));
+      }
+
       const bundleService = new BundleService(this.story.fields);
       return bundleService.defaultBundle;
     }
diff --git a/src/backend/services/helpers.ts b/src/backend/services/helpers.ts
index cdc4e7bb..0c564e76 100644
--- a/src/backend/services/helpers.ts
+++ b/src/backend/services/helpers.ts
@@ -8,6 +8,8 @@ export {
   canPublishStory,
   canPublishStoryMetadata,
   canPublishStoryReady,
+  DEVOTION_TEMPLATE_ID,
+  isDevotionTemplate,
   missingPublishedChapters,
   storyDetailsBlockedMessages,
   publishBlockedMessage,
diff --git a/src/backend/services/story_service.ts b/src/backend/services/story_service.ts
index ac3bb652..0420d32f 100644
--- a/src/backend/services/story_service.ts
+++ b/src/backend/services/story_service.ts
@@ -429,6 +429,7 @@ export class StoryService {
     return {
       id: story.id,
       name: localisation?.title ?? '',
+      template: story.template,
       coverImage: localisation?.coverImage ?? '',
       chapterLimit: story.chapterLimit,
       chapterType: story.chapterType ?? '',
diff --git a/src/backend/stubs/controllers/chapters_controller.stub b/src/backend/stubs/controllers/chapters_controller.stub
index 561847ec..4138ec70 100644
--- a/src/backend/stubs/controllers/chapters_controller.stub
+++ b/src/backend/stubs/controllers/chapters_controller.stub
@@ -10,7 +10,10 @@ import {
   type AddStatus,
   IndexService,
   Chapter,
+  Draft,
+  Story,
   StoryService,
+  resolvePreviewBundle,
 } from '@story-cms/kit';
 import cms from '#services/cms';
 
@@ -47,8 +50,15 @@ export default class ChaptersController {
     };
 
     const chapter = await Chapter.query().where(specifier).firstOrFail();
-    const bundleView = await edge.render({{ '`preview_${story.id}`' }}, {
-      bundle: chapter.bundle,
+    const draft = await Draft.query().where(specifier).first();
+    const storyRecord = await Story.findOrFail(story.id);
+    const bundle = resolvePreviewBundle({
+      chapter,
+      draft,
+      template: storyRecord.template,
+    });
+    const bundleView = await edge.render(`preview_${storyRecord.template}`, {
+      bundle,
       marked: marked,
       number: chapter.number,
     });
@@ -56,8 +66,8 @@ export default class ChaptersController {
     const props: PreviewProps = {
       chapter: chapter.meta,
       bundleView: bundleView,
-      title: chapter.index.title,
-      bundle: chapter.bundle,
+      title: (typeof bundle.title === 'string' ? bundle.title : '') || chapter.index.title,
+      bundle,
       story,
     };
 
diff --git a/src/backend/stubs/controllers/drafts_controller.stub b/src/backend/stubs/controllers/drafts_controller.stub
index ad42d259..87e4446b 100644
--- a/src/backend/stubs/controllers/drafts_controller.stub
+++ b/src/backend/stubs/controllers/drafts_controller.stub
@@ -10,7 +10,12 @@ import {
   Draft,
   DraftService,
   IndexService,
+  ResourceService,
   StoryService,
+  isDevotionTemplate,
+  normalizeDevotionDraftBundle,
+  getPreviousDevotionChapterBlocks,
+  type DevotionDraftEditProps,
   type DraftEditProps,
 } from '@story-cms/kit';
 import cms from '#services/cms';
@@ -33,12 +38,19 @@ export default class DraftsController {
     const bundle = await service.getDraftBundle(version, number);
     if (bundle === null) return ctx.response.redirect('/');
 
-    await Draft.create({
+    const draft = await Draft.create({
       ...version,
       number,
       bundle,
     });
 
+    if (
+      version.locale === cms.sourceLocale &&
+      isDevotionTemplate(story.template)
+    ) {
+      ctx.session.flash('newDevotionDraftId', draft.id);
+    }
+
     await Activity.create({
       userId: ctx.auth.user?.id,
       locale: version.locale,
@@ -100,6 +112,44 @@ export default class DraftsController {
     const isTranslation = version.locale !== cms.sourceLocale;
 
     if (!isTranslation) {
+      if (isDevotionTemplate(story.template)) {
+        const bundle = normalizeDevotionDraftBundle(draft.bundle, draft.number);
+        const resourceService = new ResourceService();
+        const [availableResources, resources] = await Promise.all([
+          resourceService.listForLocale(version.locale),
+          resourceService.hydrate(bundle.resources),
+        ]);
+        const createdDraftId = ctx.session.flashMessages.get('newDevotionDraftId');
+        const previousChapterBlocks =
+          draft.number > 1
+            ? await getPreviousDevotionChapterBlocks(
+                { ...specifier, number: draft.number },
+                async (spec) => {
+                  const previousDraft = await Draft.query().where(spec).first();
+                  if (previousDraft) {
+                    return previousDraft.bundle;
+                  }
+
+                  const previousChapter = await Chapter.query().where(spec).first();
+                  return previousChapter?.bundle ?? null;
+                },
+              )
+            : [];
+        const devotionData: DevotionDraftEditProps = {
+          ...data,
+          bundle: {
+            ...bundle,
+            resources,
+          },
+          availableResources,
+          isCreate: Number(createdDraftId) === draft.id,
+          previousChapterBlocks,
+        };
+
+        // @ts-expect-error Inertia page name
+        return ctx.inertia.render('DevotionDraftEdit', devotionData);
+      }
+
       // @ts-expect-error Inertia page name
       return ctx.inertia.render('DraftIndex', data);
     }
diff --git a/src/backend/stubs/resources/views/preview_devotion.stub b/src/backend/stubs/resources/views/preview_devotion.stub
new file mode 100644
index 00000000..ddb0f66c
--- /dev/null
+++ b/src/backend/stubs/resources/views/preview_devotion.stub
@@ -0,0 +1,92 @@
+{{{
+  exports({ to: app.makePath('resources/views/preview_devotion.edge') })
+}}}
+<section>
+  @if(bundle.number)
+  <div class="mb-1 text-sm font-medium leading-5 text-gray-400">Number</div>
+  <div class="text-lg">\{\{ bundle.number \}\}</div>
+  @end
+
+  @if(bundle.title)
+  <div class="mt-6 mb-1 text-sm font-medium leading-5 text-gray-400">Title</div>
+  <div class="text-2xl">\{\{ bundle.title \}\}</div>
+  @end
+
+  @if(bundle.description)
+  <div class="mt-6 mb-1 text-sm font-medium leading-5 text-gray-400">Description</div>
+  <div class="max-w-none prose prose-sm">\{\{\{ marked.parse(bundle.description) \}\}\}</div>
+  @end
+
+  @if(bundle.coverImage)
+  <div class="mt-6 mb-1 text-sm font-medium leading-5 text-gray-400">Cover Image</div>
+  <img src="\{\{ bundle.coverImage \}\}" alt="\{\{ bundle.title \}\}" class="w-full max-w-xl h-auto rounded" />
+  @end
+
+  @if(bundle.devotionAudio && bundle.devotionAudio.url)
+  <div class="mt-6 mb-1 text-sm font-medium leading-5 text-gray-400">Devotion Audio</div>
+  <audio controls>
+    <source src="\{\{ bundle.devotionAudio.url \}\}" type="audio/mpeg" />
+  </audio>
+  @end
+
+  @if(bundle.blocks)
+  @each(block in bundle.blocks)
+  @if(!block.visibility || !block.visibility.hidden)
+  <div class="pt-8 mt-8 border-t border-gray-200">
+    @if(block.blockName)
+    <div class="mb-1 text-xs font-medium tracking-wide text-gray-400 uppercase">\{\{ block.blockName \}\}</div>
+    @end
+
+    @if(block.kind === 'title')
+    @if(block.title)
+    <div class="text-2xl font-semibold">\{\{ block.title \}\}</div>
+    @end
+    @if(block.subtitle)
+    <div class="mt-2 text-lg text-gray-600">\{\{ block.subtitle \}\}</div>
+    @end
+    @if(block.coverImage)
+    <img src="\{\{ block.coverImage \}\}" alt="\{\{ block.title \}\}" class="mt-4 w-full max-w-xl h-auto rounded">
+    @end
+    @end
+
+    @if(block.kind === 'scripture')
+    @if(block.displayName)
+    <div class="mb-2 text-xl font-semibold">\{\{ block.displayName \}\}</div>
+    @end
+    @if(block.scripture)
+    @!component('components/scripture', {passage: block.scripture})
+    @end
+    @end
+
+    @if(!block.kind || block.kind === 'content')
+    @if(block.displayName)
+    <div class="mb-2 text-xl font-semibold">\{\{ block.displayName \}\}</div>
+    @end
+    @if(block.content)
+    <div class="max-w-none prose prose-sm">\{\{\{ marked.parse(block.content) \}\}\}</div>
+    @end
+    @if(block.items)
+    @each(item in block.items)
+    @if(item.kind === 'image' && item.imageUrl)
+    <div class="mt-4">
+      <img src="\{\{ item.imageUrl \}\}" alt="" class="w-full max-w-xl h-auto rounded">
+    </div>
+    @end
+    @if(item.kind === 'video' && item.video && item.video.url)
+    <div class="mt-4 w-full max-w-xl">
+      @!component('components/video', {url: item.video.url, librayId: librayId})
+    </div>
+    @end
+    @if(item.kind === 'scripture' && item.scripture)
+    <div class="mt-4">
+      @!component('components/scripture', {passage: item.scripture})
+    </div>
+    @end
+    @endeach
+    @end
+    @end
+  </div>
+  @end
+  @endeach
+  @end
+</section>
diff --git a/src/backend/stubs/validators/story_validator.stub b/src/backend/stubs/validators/story_validator.stub
index 8e29cf98..06c0f025 100644
--- a/src/backend/stubs/validators/story_validator.stub
+++ b/src/backend/stubs/validators/story_validator.stub
@@ -2,7 +2,12 @@
   exports({ to: app.makePath('app/validators/story_validator.ts') })
 }}}
 import vine, { SimpleMessagesProvider } from '@vinejs/vine';
-import type { StorySpec, ValidatorType } from '@story-cms/kit';
+import {
+  DevotionDraftValidator,
+  isDevotionTemplate,
+  type StorySpec,
+  type ValidatorType,
+} from '@story-cms/kit';
 
 // to save us from setting vine.string().trim().minLength(1) everywhere
 vine.convertEmptyStringsToNull = true;
@@ -41,6 +46,10 @@ export default class Story1 implements ValidatorType {
 }
 
 export const storyValidator = (story: StorySpec): ValidatorType => {
+  if (isDevotionTemplate(story.template)) {
+    return new DevotionDraftValidator();
+  }
+
   switch (story.id) {
     case 1:
       return new Story1();
diff --git a/src/backend/validators/devotion_draft.ts b/src/backend/validators/devotion_draft.ts
new file mode 100644
index 00000000..b0f6699b
--- /dev/null
+++ b/src/backend/validators/devotion_draft.ts
@@ -0,0 +1,162 @@
+import vine, { SimpleMessagesProvider } from '@vinejs/vine';
+import type { FieldContext } from '@vinejs/vine/types';
+import type { ValidatorType } from '../../types.js';
+import audioRule from './audio_rule.js';
+import videoRule from './video_rule.js';
+
+const requiredString = () => vine.string().trim().minLength(1);
+
+const visibilitySchema = vine.object({
+  presenter: vine.boolean({ strict: true }),
+  personal: vine.boolean({ strict: true }),
+  inNavigation: vine.boolean({ strict: true }),
+  hidden: vine.boolean({ strict: true }),
+});
+
+const scriptureSchema = vine.object({
+  reference: requiredString(),
+  verse: requiredString(),
+});
+
+const imageItemSchema = vine.object({
+  id: requiredString(),
+  kind: vine.literal('image'),
+  imageUrl: vine.string().trim().url({ require_protocol: true }),
+});
+
+const videoItemSchema = vine.object({
+  id: requiredString(),
+  kind: vine.literal('video'),
+  video: vine
+    .object({
+      url: vine.string().nullable(),
+    })
+    .use(videoRule(null)),
+});
+
+const scriptureItemSchema = vine.object({
+  id: requiredString(),
+  kind: vine.literal('scripture'),
+  scripture: scriptureSchema,
+});
+
+const itemSchema = vine.union([
+  vine.union.if((value) => value.kind === 'image', imageItemSchema),
+  vine.union.if((value) => value.kind === 'video', videoItemSchema),
+  vine.union.if((value) => value.kind === 'scripture', scriptureItemSchema),
+  vine.union.else(
+    vine.object({
+      id: requiredString(),
+      kind: vine.enum(['image', 'video', 'scripture'] as const),
+    }),
+  ),
+]);
+
+const blockBase = {
+  id: requiredString(),
+  blockName: requiredString(),
+  visibility: visibilitySchema,
+};
+
+const contentOrItemRule = vine.createRule(
+  (value: unknown, _options: undefined, field: FieldContext) => {
+    if (!value || typeof value !== 'object' || Array.isArray(value)) return;
+
+    const block = value as Record<string, unknown>;
+    const hasContent = typeof block.content === 'string' && block.content.trim().length > 0;
+    const hasItems = Array.isArray(block.items) && block.items.length > 0;
+    if (!hasContent && !hasItems) {
+      field.report(
+        'A content block must have text or at least one media or scripture item',
+        'contentOrItem',
+        field,
+      );
+    }
+  },
+);
+
+const contentBlockSchema = vine
+  .object({
+    ...blockBase,
+    kind: vine.literal('content'),
+    displayName: requiredString(),
+    blockRole: requiredString(),
+    style: requiredString(),
+    content: vine.string().optional(),
+    items: vine.array(itemSchema).optional(),
+    leadersNotes: vine.string().optional(),
+    showLeadersNotes: vine.boolean({ strict: true }).optional(),
+  })
+  .bail(false)
+  .use(contentOrItemRule());
+
+const titleBlockSchema = vine.object({
+  ...blockBase,
+  kind: vine.literal('title'),
+  title: requiredString(),
+  subtitle: vine.string().optional(),
+  coverImage: vine.string().optional(),
+});
+
+const scriptureBlockSchema = vine.object({
+  ...blockBase,
+  kind: vine.literal('scripture'),
+  displayName: requiredString(),
+  scripture: scriptureSchema,
+  leadersNotes: vine.string().optional(),
+  showLeadersNotes: vine.boolean({ strict: true }).optional(),
+});
+
+const blockSchema = vine.union([
+  vine.union.if((value) => value.kind === 'content', contentBlockSchema),
+  vine.union.if((value) => value.kind === 'title', titleBlockSchema),
+  vine.union.if((value) => value.kind === 'scripture', scriptureBlockSchema),
+  vine.union.else(
+    vine.object({
+      ...blockBase,
+      kind: vine.enum(['content', 'title', 'scripture'] as const),
+    }),
+  ),
+]);
+
+const devotionAudioSchema = vine
+  .object({
+    url: vine.string().nullable(),
+    length: vine.number().nullable(),
+  })
+  .use(audioRule({ canBeEmpty: true }))
+  .optional();
+
+export const devotionDraftErrorMessages = new SimpleMessagesProvider({
+  'bundle.number.required': 'The devotion must have a number',
+  'bundle.number.minLength': 'The devotion must have a number',
+  'bundle.title.required': 'The devotion must have a title',
+  'bundle.title.minLength': 'The devotion must have a title',
+  'bundle.blocks.required': 'The devotion must have at least one block',
+  'bundle.blocks.minLength': 'The devotion must have at least one block',
+  'bundle.blocks.*.id.required': 'Every block must have an ID',
+  'bundle.blocks.*.id.minLength': 'Every block must have an ID',
+  'bundle.blocks.*.blockName.required': 'Every block must have a name',
+  'bundle.blocks.*.blockName.minLength': 'Every block must have a name',
+  'bundle.resources.*.uuid': 'Invalid resource',
+});
+
+export class DevotionDraftValidator implements ValidatorType {
+  validate(data: any): Promise<any> {
+    vine.messagesProvider = devotionDraftErrorMessages;
+
+    const schema = vine.create({
+      bundle: vine.object({
+        number: requiredString(),
+        title: requiredString(),
+        description: vine.string().optional(),
+        coverImage: vine.string().optional(),
+        devotionAudio: devotionAudioSchema,
+        blocks: vine.array(blockSchema).minLength(1),
+        resources: vine.array(vine.string().uuid()).optional(),
+      }),
+    });
+
+    return schema.validate(data);
+  }
+}
diff --git a/src/frontend/dashboard/action-card.story.vue b/src/frontend/dashboard/action-card.story.vue
index fc01894b..c7294477 100644
--- a/src/frontend/dashboard/action-card.story.vue
+++ b/src/frontend/dashboard/action-card.story.vue
@@ -31,8 +31,8 @@
         :icon="FileText"
         title="New Page"
         description="Engage your audience morning, noon, and night. Create healthy daily rhythms with content that reaches them throughout the day."
-        @action="handleAction"
         disabled
+        @action="handleAction"
       />
     </Variant>
   </Story>
diff --git a/src/frontend/fields/attachments/attachment-field.vue b/src/frontend/fields/attachments/attachment-field.vue
index a573203a..2e2de99e 100644
--- a/src/frontend/fields/attachments/attachment-field.vue
+++ b/src/frontend/fields/attachments/attachment-field.vue
@@ -3,6 +3,7 @@
     <div class="relative">
       <div class="relative">
         <label
+          v-if="field.label"
           class="input-label"
           :class="{ 'text-error': hasError, 'text-gray-600': isReadOnly }"
           >{{ field.label }}</label
diff --git a/src/frontend/index.ts b/src/frontend/index.ts
index c2d902b4..8314a4e3 100644
--- a/src/frontend/index.ts
+++ b/src/frontend/index.ts
@@ -8,6 +8,9 @@ import BooleanField from './fields/boolean-field.vue';
 import InvitationsEdit from './invitation/invitations-edit.vue';
 import InvitationsIndex from './invitation/invitations-index.vue';
 import ChapterPreview from './stories/chapter-preview.vue';
+import DevotionDraftEdit from './stories/devotion-draft-edit.vue';
+import DevotionDraftEditDetails from './stories/components/devotion-draft-edit-details.vue';
+import DevotionDraftEditBlocks from './stories/components/devotion-draft-edit-blocks.vue';
 import ContextMenu from './shared/context-menu.vue';
 import CreateAccount from './auth/create-account.vue';
 import DashboardIndex from './dashboard/dashboard-index.vue';
@@ -79,6 +82,9 @@ export {
   AudioField,
   BooleanField,
   ChapterPreview,
+  DevotionDraftEdit,
+  DevotionDraftEditBlocks,
+  DevotionDraftEditDetails,
   ContextMenu,
   CreateAccount,
   DashboardIndex,
diff --git a/src/frontend/stories/components/blocks/add-block-toolbar.vue b/src/frontend/stories/components/blocks/add-block-toolbar.vue
new file mode 100644
index 00000000..6e4daf0a
--- /dev/null
+++ b/src/frontend/stories/components/blocks/add-block-toolbar.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="space-y-3">
+    <div class="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
+      <button
+        type="button"
+        class="inline-flex w-full items-center justify-center rounded-xl border border-dashed border-studio-forest px-3 py-[18px] text-sm font-medium leading-4 text-studio-forest shadow-sm hover:bg-studio-lime"
+        @click.prevent="$emit('addTitle')"
+      >
+        <div class="inline-flex items-center justify-center gap-2">
+          <Plus class="size-5" aria-hidden="true" />
+          <span>Add Title Block</span>
+        </div>
+      </button>
+      <button
+        type="button"
+        class="inline-flex w-full items-center justify-center rounded-xl border border-dashed border-studio-forest px-3 py-[18px] text-sm font-medium leading-4 text-studio-forest shadow-sm hover:bg-studio-lime"
+        @click.prevent="$emit('addScripture')"
+      >
+        <div class="inline-flex items-center justify-center gap-2">
+          <Plus class="size-5" aria-hidden="true" />
+          <span>Add Scripture Block</span>
+        </div>
+      </button>
+      <button
+        type="button"
+        class="inline-flex w-full items-center justify-center rounded-xl border border-dashed border-studio-forest px-3 py-[18px] text-sm font-medium leading-4 text-studio-forest shadow-sm hover:bg-studio-lime"
+        @click.prevent="$emit('addContent')"
+      >
+        <div class="inline-flex items-center justify-center gap-2">
+          <Plus class="size-5" aria-hidden="true" />
+          <span>Add Content Block</span>
+        </div>
+      </button>
+    </div>
+
+    <button
+      v-if="showReusePrevious"
+      type="button"
+      class="inline-flex w-full items-center justify-center rounded-xl border border-dashed border-studio-forest px-3 py-[18px] text-sm font-medium leading-4 text-studio-forest shadow-sm hover:bg-studio-lime"
+      @click.prevent="$emit('reusePrevious')"
+    >
+      <div class="inline-flex items-center justify-center gap-2">
+        <Plus class="size-5" aria-hidden="true" />
+        <span>Reuse Previous Structure</span>
+      </div>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Plus } from '@lucide/vue';
+
+withDefaults(
+  defineProps<{
+    showReusePrevious?: boolean;
+  }>(),
+  {
+    showReusePrevious: false,
+  },
+);
+
+defineEmits<{
+  addTitle: [];
+  addScripture: [];
+  addContent: [];
+  reusePrevious: [];
+}>();
+</script>
diff --git a/src/frontend/stories/components/blocks/add-leaders-notes-button.vue b/src/frontend/stories/components/blocks/add-leaders-notes-button.vue
new file mode 100644
index 00000000..fe4201c8
--- /dev/null
+++ b/src/frontend/stories/components/blocks/add-leaders-notes-button.vue
@@ -0,0 +1,16 @@
+<template>
+  <DashedAddButton @click="$emit('click')">
+    <UserCog class="size-4" aria-hidden="true" />
+    <span>Add Leader Notes</span>
+  </DashedAddButton>
+</template>
+
+<script setup lang="ts">
+import { UserCog } from '@lucide/vue';
+
+import DashedAddButton from './dashed-add-button.vue';
+
+defineEmits<{
+  click: [];
+}>();
+</script>
diff --git a/src/frontend/stories/components/blocks/block-card-shell.vue b/src/frontend/stories/components/blocks/block-card-shell.vue
new file mode 100644
index 00000000..3b6c106d
--- /dev/null
+++ b/src/frontend/stories/components/blocks/block-card-shell.vue
@@ -0,0 +1,120 @@
+<template>
+  <div
+    class="relative my-2 list-none rounded-xl border border-gray-200 p-0"
+    draggable="true"
+    @dragstart="emit('dragstart')"
+    @dragover.prevent
+    @drop="emit('drop')"
+    @dragend="emit('dragend')"
+  >
+    <div class="rounded-xl bg-white">
+      <div
+        :class="[
+          'flex items-center justify-between gap-3 overflow-hidden px-4 py-3',
+          { 'border-b border-gray-100': expanded },
+        ]"
+      >
+        <div class="flex min-w-0 items-center gap-3">
+          <button
+            type="button"
+            class="cursor-move text-gray-400"
+            :aria-label="`Reorder ${kindLabel} block`"
+          >
+            <GripVertical class="size-4" aria-hidden="true" />
+          </button>
+          <button
+            type="button"
+            class="inline-flex min-w-0 items-center gap-2 text-left text-sm font-semibold text-gray-800"
+            @click="emit('toggle')"
+          >
+            <component
+              :is="kindIcon"
+              class="size-4 shrink-0 text-gray-700"
+              aria-hidden="true"
+            />
+            <span class="truncate">{{ title }}</span>
+            <div
+              v-if="presenterVisible"
+              class="flex shrink-0 items-center rounded bg-studio-yellow p-[5px]"
+            >
+              <Monitor class="size-[14px] text-studio-forest" aria-hidden="true" />
+            </div>
+            <div
+              v-if="personalVisible"
+              class="flex shrink-0 items-center rounded bg-studio-lime p-[5px]"
+            >
+              <User class="size-[14px] text-studio-forest" aria-hidden="true" />
+            </div>
+            <div
+              v-if="navigationVisible"
+              class="flex shrink-0 items-center rounded bg-studio-forest p-[5px]"
+            >
+              <Send class="size-[14px] text-white" aria-hidden="true" />
+            </div>
+          </button>
+        </div>
+        <div class="flex items-center justify-center gap-1">
+          <div v-if="hasError" class="text-error">
+            <CircleAlert class="size-5" aria-hidden="true" />
+          </div>
+          <button
+            type="button"
+            class="rounded-xl p-1.5 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600"
+            :aria-label="`Delete ${kindLabel} block`"
+            @click="emit('delete')"
+          >
+            <Trash2 class="size-4" aria-hidden="true" />
+          </button>
+          <button
+            type="button"
+            class="rounded-xl p-1.5 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
+            :aria-label="
+              expanded ? `Collapse ${kindLabel} block` : `Expand ${kindLabel} block`
+            "
+            @click="emit('toggle')"
+          >
+            <ChevronDown
+              class="size-4 origin-center transition-transform duration-200 ease-out"
+              :class="{ 'rotate-180': expanded }"
+              aria-hidden="true"
+            />
+          </button>
+        </div>
+      </div>
+
+      <div v-if="expanded" class="space-y-6 p-6">
+        <slot />
+      </div>
+      <div
+        v-if="expanded && $slots.footer"
+        class="rounded-b-xl border-t border-gray-200 bg-gray-50 px-4 py-3"
+      >
+        <slot name="footer" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Component } from 'vue';
+import { ChevronDown, CircleAlert, GripVertical, Monitor, Send, Trash2, User } from '@lucide/vue';
+
+defineProps<{
+  title: string;
+  kindIcon: Component;
+  expanded: boolean;
+  presenterVisible: boolean;
+  personalVisible: boolean;
+  navigationVisible: boolean;
+  kindLabel: string;
+  hasError?: boolean;
+}>();
+
+const emit = defineEmits<{
+  toggle: [];
+  delete: [];
+  dragstart: [];
+  drop: [];
+  dragend: [];
+}>();
+</script>
diff --git a/src/frontend/stories/components/blocks/block-empty-state.vue b/src/frontend/stories/components/blocks/block-empty-state.vue
new file mode 100644
index 00000000..62c42539
--- /dev/null
+++ b/src/frontend/stories/components/blocks/block-empty-state.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="py-11">
+    <p
+      v-if="errorMessage"
+      class="mb-4 text-center text-sm text-error"
+    >
+      {{ errorMessage }}
+    </p>
+    <p class="text-center font-dmsans text-base font-normal leading-7 text-studio-forest">
+      Add blocks to build out a chapter and shape your content. <br />
+      You can add as many blocks as you like. <br />
+      If you're working with repeatable content you'll have the chance to reuse this
+      structure on future chapters.
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  errorMessage?: string;
+}>();
+</script>
diff --git a/src/frontend/stories/components/blocks/block-field-errors.ts b/src/frontend/stories/components/blocks/block-field-errors.ts
new file mode 100644
index 00000000..c0058039
--- /dev/null
+++ b/src/frontend/stories/components/blocks/block-field-errors.ts
@@ -0,0 +1,48 @@
+type ValidationErrors = Record<string, string | string[]>;
+
+function normalizeMessages(messages: string | string[] | undefined): string[] {
+  if (!messages) return [];
+  return Array.isArray(messages) ? messages : [messages];
+}
+
+function blockPrefix(blockIndex: number): string {
+  return `bundle.blocks.${blockIndex}`;
+}
+
+export function blockFieldErrorMessages(
+  errors: ValidationErrors,
+  blockIndex: number,
+  field: string,
+): string[] {
+  return normalizeMessages(errors[`${blockPrefix(blockIndex)}.${field}`]);
+}
+
+export function blockItemFieldErrorMessages(
+  errors: ValidationErrors,
+  blockIndex: number,
+  itemIndex: number,
+  field: string,
+): string[] {
+  return normalizeMessages(
+    errors[`${blockPrefix(blockIndex)}.items.${itemIndex}.${field}`],
+  );
+}
+
+export function blockHasError(errors: ValidationErrors, blockIndex: number): boolean {
+  const prefix = blockPrefix(blockIndex);
+  return Object.keys(errors).some((key) => key === prefix || key.startsWith(`${prefix}.`));
+}
+
+export function blockLevelErrorMessages(
+  errors: ValidationErrors,
+  blockIndex: number,
+): string[] {
+  return normalizeMessages(errors[blockPrefix(blockIndex)]);
+}
+
+export function blocksArrayErrorMessages(errors: ValidationErrors): string[] {
+  return [
+    ...normalizeMessages(errors['bundle.blocks']),
+    ...normalizeMessages(errors['bundle.blocks.minLength']),
+  ];
+}
diff --git a/src/frontend/stories/components/blocks/block-image-field.vue b/src/frontend/stories/components/blocks/block-image-field.vue
new file mode 100644
index 00000000..3d6ad8b4
--- /dev/null
+++ b/src/frontend/stories/components/blocks/block-image-field.vue
@@ -0,0 +1,68 @@
+<template>
+  <ImageField :field="fieldSpec" :root-path="rootPath" :is-nested="true" />
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, watch } from 'vue';
+
+import type { FieldSpec } from '../../../../types';
+import ImageField from '../../../fields/image-field.vue';
+import { useModelStore } from '../../../store';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string;
+    blockIndex: number;
+    itemIndex?: number;
+    label?: string;
+  }>(),
+  {
+    itemIndex: undefined,
+    label: 'Cover Image',
+  },
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+}>();
+
+const model = useModelStore();
+const rootPath = computed(() => `blocks.${props.blockIndex}`);
+const fieldName = computed(() =>
+  props.itemIndex === undefined
+    ? 'coverImage'
+    : `items.${props.itemIndex}.imageUrl`,
+);
+const fieldPath = computed(() => `${rootPath.value}.${fieldName.value}`);
+
+const fieldSpec = computed((): FieldSpec => ({
+  label: props.label,
+  name: fieldName.value,
+  widget: 'image',
+  description: 'PNG, JPG • Recommended 1280x720px',
+  extensions: ['.jpeg', '.jpg', '.png'],
+  maxSize: 5662310,
+}));
+
+const readValue = (): string => model.getField(fieldPath.value, '') as string;
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    const current = readValue();
+    if (current === value) return;
+    model.setField(fieldPath.value, value);
+  },
+  { immediate: true },
+);
+
+const unsubscribe = model.$subscribe(() => {
+  const fresh = readValue();
+  if (fresh === props.modelValue) return;
+  emit('update:modelValue', fresh);
+});
+
+onBeforeUnmount(() => {
+  unsubscribe();
+});
+</script>
diff --git a/src/frontend/stories/components/blocks/block-rich-text-editor.vue b/src/frontend/stories/components/blocks/block-rich-text-editor.vue
new file mode 100644
index 00000000..79486dfd
--- /dev/null
+++ b/src/frontend/stories/components/blocks/block-rich-text-editor.vue
@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <label v-if="label" class="input-label mb-2 block">{{ label }}</label>
+    <div class="mt-1">
+      <div class="cm-s-easymde rounded-xl">
+        <textarea ref="textArea" data-testid="block-rich-text-editor" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import type { Editor, EditorChange } from 'codemirror';
+import type EasyMDE from '../../../fields/markdown/types';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string;
+    label?: string;
+    placeholder?: string;
+  }>(),
+  {
+    label: '',
+    placeholder: 'Enter your content...',
+  },
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+}>();
+
+const textArea = ref<HTMLTextAreaElement>();
+let mde: EasyMDE | null = null;
+let isSettingValue = false;
+
+const toolbar = [
+  'bold',
+  'italic',
+  'strikethrough',
+  'unordered-list',
+  'ordered-list',
+  '|',
+  'link',
+];
+
+const update = (_editor: Editor, change: EditorChange) => {
+  if (change.origin === 'setValue' || isSettingValue) return;
+  emit('update:modelValue', mde?.value() ?? '');
+};
+
+const syncValue = (value: string) => {
+  if (!mde || mde.value() === value) return;
+  isSettingValue = true;
+  mde.codemirror.setValue(value);
+  isSettingValue = false;
+};
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    syncValue(value);
+  },
+);
+
+onMounted(async () => {
+  const easymdeModule = await import('easymde');
+  const EasyMDEConstructor = easymdeModule.default;
+  mde = new EasyMDEConstructor({
+    minHeight: '200px',
+    element: textArea.value,
+    spellChecker: false,
+    nativeSpellcheck: false,
+    status: false,
+    placeholder: props.placeholder,
+    // @ts-expect-error toolbar is not typed
+    toolbar,
+  });
+  mde.codemirror.on('change', update);
+  syncValue(props.modelValue);
+});
+
+onBeforeUnmount(() => {
+  mde?.toTextArea();
+  mde?.codemirror.off('change', update);
+  mde = null;
+});
+</script>
+
+<style>
+@import 'easymde/dist/easymde.min.css';
+
+.editor-toolbar {
+  background-color: white !important;
+}
+</style>
diff --git a/src/frontend/stories/components/blocks/block-role-options.ts b/src/frontend/stories/components/blocks/block-role-options.ts
new file mode 100644
index 00000000..6f324e64
--- /dev/null
+++ b/src/frontend/stories/components/blocks/block-role-options.ts
@@ -0,0 +1,104 @@
+import {
+  BookMarked,
+  BookOpen,
+  Eye,
+  FileText,
+  HandHeart,
+  Heart,
+  Lightbulb,
+  ShieldOff,
+} from '@lucide/vue';
+
+import type { RichListboxOption } from '../../../shared/rich-listbox.vue';
+
+export type BlockRoleOption = RichListboxOption;
+
+const fallbackBlockRoleOptions: BlockRoleOption[] = [
+  {
+    value: 'summary',
+    label: 'Summary',
+    description: 'Recap or overview of the session',
+    icon: BookOpen,
+  },
+  {
+    value: 'introduction',
+    label: 'Introduction',
+    description: 'Opening context for the content',
+    icon: BookOpen,
+  },
+  {
+    value: 'reflection',
+    label: 'Reflection',
+    description: 'Prompt for personal reflection',
+    icon: BookOpen,
+  },
+];
+
+const devotionBlockRoleOptions: BlockRoleOption[] = [
+  {
+    value: 'introduction',
+    label: 'Introduction',
+    description: 'Opens the devotion and sets the context',
+    icon: BookOpen,
+  },
+  {
+    value: 'scripture',
+    label: 'Scripture',
+    description: 'A Bible passage central to the devotion',
+    icon: BookMarked,
+  },
+  {
+    value: 'commentary',
+    label: 'Commentary',
+    description:
+      'Explanation, interpretation, context, or theological reflection on the Scripture',
+    icon: Lightbulb,
+  },
+  {
+    value: 'reflection',
+    label: 'Reflection',
+    description: 'A moment for personal reflection',
+    icon: Eye,
+  },
+  {
+    value: 'prayer',
+    label: 'Prayer',
+    description: 'A guided or prompted prayer element',
+    icon: Heart,
+  },
+  {
+    value: 'response',
+    label: 'Response',
+    description: 'A call to act or respond to what was shared',
+    icon: HandHeart,
+  },
+  {
+    value: 'conclusion',
+    label: 'Conclusion',
+    description: 'Closes and summarises the devotion',
+    icon: FileText,
+  },
+  {
+    value: 'unclassified',
+    label: 'Unclassified',
+    description: 'For legacy content or where you are unsure of the role',
+    icon: ShieldOff,
+  },
+];
+
+const normalizeChapterType = (chapterType?: string | null): string =>
+  chapterType?.trim().toLowerCase() ?? '';
+
+export function isDevotionChapterType(chapterType?: string | null): boolean {
+  return normalizeChapterType(chapterType) === 'devotion';
+}
+
+export function getBlockRoleOptions(chapterType?: string | null): BlockRoleOption[] {
+  return isDevotionChapterType(chapterType)
+    ? devotionBlockRoleOptions
+    : fallbackBlockRoleOptions;
+}
+
+export function getDefaultBlockRole(chapterType?: string | null): string {
+  return isDevotionChapterType(chapterType) ? 'introduction' : 'summary';
+}
diff --git a/src/frontend/stories/components/blocks/block-scripture-field.vue b/src/frontend/stories/components/blocks/block-scripture-field.vue
new file mode 100644
index 00000000..bb8b9575
--- /dev/null
+++ b/src/frontend/stories/components/blocks/block-scripture-field.vue
@@ -0,0 +1,227 @@
+<template>
+  <ScriptureField
+    v-if="!useCustomLabels"
+    :field="fieldSpec"
+    :root-path="rootPath"
+    :is-nested="true"
+  />
+  <div v-else class="space-y-4">
+    <div>
+      <label :for="referenceInputId" class="input-label">{{ referenceLabel }}</label>
+      <input
+        :id="referenceInputId"
+        v-model="reference"
+        type="text"
+        :placeholder="referencePlaceholder"
+        class="input-field mt-[2px]"
+        :class="{ 'border-error': referenceHasError }"
+        @input="emitScripture"
+        @blur="lookup"
+      />
+      <p v-if="referenceHasError" class="text-sm text-error">
+        {{ referenceErrorMessage }}
+      </p>
+    </div>
+    <div>
+      <label :for="passageInputId" class="input-label">{{ passageLabel }}</label>
+      <textarea
+        :id="passageInputId"
+        v-model="verse"
+        rows="6"
+        :placeholder="passagePlaceholder"
+        class="input-field mt-[2px] min-h-[120px] resize-y"
+        :class="{ 'border-error': verseHasError }"
+        @input="emitScripture"
+      />
+      <p v-if="verseHasError" class="text-sm text-error">
+        {{ verseErrorMessage }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+
+import type { FieldSpec, Scripture } from '../../../../types';
+import ScriptureField from '../../../fields/scripture-field.vue';
+import { parseReference } from '../../../shared/helpers';
+import { useModelStore, useSharedStore, useWidgetsStore } from '../../../store';
+import {
+  blockFieldErrorMessages,
+  blockItemFieldErrorMessages,
+} from './block-field-errors';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: Scripture;
+    blockIndex: number;
+    itemIndex?: number;
+    label?: string;
+    referenceLabel?: string;
+    passageLabel?: string;
+    referencePlaceholder?: string;
+    passagePlaceholder?: string;
+  }>(),
+  {
+    itemIndex: undefined,
+    label: 'Scripture',
+    referenceLabel: undefined,
+    passageLabel: undefined,
+    referencePlaceholder: 'John 1 or John 1:3-4',
+    passagePlaceholder: 'Verse',
+  },
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [value: Scripture];
+}>();
+
+const model = useModelStore();
+const shared = useSharedStore();
+const provider = useWidgetsStore().providers.scripture;
+const rootPath = computed(() => `blocks.${props.blockIndex}`);
+const fieldName = computed(() =>
+  props.itemIndex === undefined
+    ? 'scripture'
+    : `items.${props.itemIndex}.scripture`,
+);
+const scripturePath = computed(() => `${rootPath.value}.${fieldName.value}`);
+const useCustomLabels = computed(() =>
+  Boolean(props.referenceLabel && props.passageLabel),
+);
+const referenceInputId = computed(
+  () => `${props.blockIndex}-${fieldName.value}-reference`,
+);
+const passageInputId = computed(() => `${props.blockIndex}-${fieldName.value}-verse`);
+
+const fieldSpec = computed((): FieldSpec => ({
+  label: props.label,
+  name: fieldName.value,
+  widget: 'scripture',
+}));
+
+const readScripture = (): Scripture =>
+  model.getField(scripturePath.value, { reference: '', verse: '' }) as Scripture;
+
+const reference = ref(props.modelValue.reference);
+const verse = ref(props.modelValue.verse);
+
+const scriptureReferenceMessages = computed(() => {
+  if (props.itemIndex === undefined) {
+    return blockFieldErrorMessages(shared.errors, props.blockIndex, 'scripture.reference');
+  }
+  return blockItemFieldErrorMessages(
+    shared.errors,
+    props.blockIndex,
+    props.itemIndex,
+    'scripture.reference',
+  );
+});
+
+const scriptureVerseMessages = computed(() => {
+  if (props.itemIndex === undefined) {
+    return blockFieldErrorMessages(shared.errors, props.blockIndex, 'scripture.verse');
+  }
+  return blockItemFieldErrorMessages(
+    shared.errors,
+    props.blockIndex,
+    props.itemIndex,
+    'scripture.verse',
+  );
+});
+
+const referenceHasError = computed(() => scriptureReferenceMessages.value.length > 0);
+const verseHasError = computed(() => scriptureVerseMessages.value.length > 0);
+const referenceErrorMessage = computed(() => scriptureReferenceMessages.value[0] ?? '');
+const verseErrorMessage = computed(() => scriptureVerseMessages.value[0] ?? '');
+
+const syncPropsToModel = (value: Scripture) => {
+  const current = readScripture();
+  if (current.reference === value.reference && current.verse === value.verse) {
+    return;
+  }
+  if (
+    current.reference === value.reference &&
+    current.verse.trim() &&
+    !value.verse.trim()
+  ) {
+    return;
+  }
+  model.setField(scripturePath.value, value);
+};
+
+const emitScripture = () => {
+  const next = { reference: reference.value, verse: verse.value };
+  syncPropsToModel(next);
+  emit('update:modelValue', next);
+};
+
+const lookup = async () => {
+  if (!useCustomLabels.value || !provider?.bibleApiKey || !reference.value.trim()) {
+    return;
+  }
+  if (verse.value.trim()) return;
+
+  const code = parseReference(reference.value);
+  if (code === '') return;
+
+  const query = ['content-type=text', 'include-titles=false'].join('&');
+  const response = await fetch(
+    `https://api.scripture.api.bible/v1/bibles/${shared.bibleVersion}/passages/${code}?${query}`,
+    {
+      headers: {
+        'Content-Type': 'application/json',
+        'api-key': provider.bibleApiKey,
+      },
+    },
+  );
+
+  if (response.status !== 200) return;
+
+  const data = await response.json();
+  verse.value = data.data.content
+    .trim()
+    .replace(/\[(\d+)\]/g, '\n`$1`')
+    .replace(/¶\s/g, '')
+    .replace(/^\n/, '')
+    .replace(/\n\s+\n/g, '\n\n')
+    .replace(/\n+/g, '\n');
+  emitScripture();
+};
+
+watch(
+  () => props.blockIndex,
+  () => {
+    model.setField(scripturePath.value, { ...props.modelValue });
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    reference.value = value.reference;
+    verse.value = value.verse;
+    syncPropsToModel(value);
+  },
+  { deep: true },
+);
+
+const unsubscribe = model.$subscribe(() => {
+  const fresh = readScripture();
+  if (
+    fresh.reference === props.modelValue.reference &&
+    fresh.verse === props.modelValue.verse
+  ) {
+    return;
+  }
+  reference.value = fresh.reference;
+  verse.value = fresh.verse;
+  emit('update:modelValue', { ...fresh });
+});
+
+onBeforeUnmount(() => {
+  unsubscribe();
+});
+</script>
diff --git a/src/frontend/stories/components/blocks/block-style-options.ts b/src/frontend/stories/components/blocks/block-style-options.ts
new file mode 100644
index 00000000..14e2cf6e
--- /dev/null
+++ b/src/frontend/stories/components/blocks/block-style-options.ts
@@ -0,0 +1,24 @@
+import { Bookmark, Star, Tag } from '@lucide/vue';
+
+import type { RichListboxOption } from '../../../shared/rich-listbox.vue';
+
+export const blockStyleOptions: RichListboxOption[] = [
+  {
+    value: 'primary',
+    label: 'Primary',
+    description: 'Main featured content for this block',
+    icon: Star,
+  },
+  {
+    value: 'secondary',
+    label: 'Secondary',
+    description: 'Supporting content that complements the primary',
+    icon: Bookmark,
+  },
+  {
+    value: 'tertiary',
+    label: 'Tertiary',
+    description: 'Supplementary or additional content',
+    icon: Tag,
+  },
+];
diff --git a/src/frontend/stories/components/blocks/block-utils.ts b/src/frontend/stories/components/blocks/block-utils.ts
new file mode 100644
index 00000000..7336c262
--- /dev/null
+++ b/src/frontend/stories/components/blocks/block-utils.ts
@@ -0,0 +1,129 @@
+import type {
+  ChapterBlock,
+  ChapterContentBlock,
+  ChapterContentItem,
+  ChapterScriptureBlock,
+  ChapterTitleBlock,
+  ResourceType,
+  Scripture,
+} from '../../../../types';
+
+export const DEFAULT_BLOCK_ROLE = 'summary';
+export const DEFAULT_BLOCK_STYLE = 'primary';
+
+const defaultVisibility = {
+  presenter: false,
+  personal: false,
+  inNavigation: false,
+  hidden: false,
+};
+
+type LegacyChapterContentBlock = ChapterContentBlock & {
+  blockType?: ResourceType;
+  url?: string;
+  video?: { url: string | null };
+};
+
+export function createBlockId(): string {
+  return crypto.randomUUID();
+}
+
+export function createEmptyContentBlock(): ChapterContentBlock {
+  return {
+    id: createBlockId(),
+    kind: 'content',
+    blockName: '',
+    displayName: '',
+    blockRole: DEFAULT_BLOCK_ROLE,
+    style: DEFAULT_BLOCK_STYLE,
+    content: '',
+    items: [],
+    visibility: { ...defaultVisibility },
+    leadersNotes: '',
+    showLeadersNotes: false,
+  };
+}
+
+export function createContentItem(kind: ChapterContentItem['kind']): ChapterContentItem {
+  const id = createBlockId();
+
+  if (kind === 'image') {
+    return { id, kind, imageUrl: '' };
+  }
+
+  if (kind === 'video') {
+    return { id, kind, video: { url: null } };
+  }
+
+  return { id, kind, scripture: { reference: '', verse: '' } };
+}
+
+export function normalizeContentBlock(block: ChapterContentBlock): ChapterContentBlock {
+  if (Array.isArray(block.items)) {
+    return block;
+  }
+
+  const legacy = block as LegacyChapterContentBlock;
+  const items: ChapterContentItem[] = [];
+  let content = block.content ?? '';
+
+  if (legacy.blockType === 'video') {
+    items.push(createContentItem('video'));
+    if (items[0]?.video) {
+      items[0].video = legacy.video ?? { url: null };
+    }
+  } else if (legacy.blockType === 'url' && legacy.url) {
+    content = legacy.url;
+  }
+
+  const normalized: ChapterContentBlock = {
+    id: block.id,
+    kind: 'content',
+    blockName: block.blockName,
+    displayName: block.displayName,
+    blockRole: block.blockRole,
+    style: block.style,
+    content,
+    items,
+    visibility: block.visibility,
+    leadersNotes: block.leadersNotes,
+    showLeadersNotes: block.showLeadersNotes,
+  };
+
+  return normalized;
+}
+
+export function normalizeBlocks(blocks: ChapterBlock[]): ChapterBlock[] {
+  return blocks.map((block) =>
+    block.kind === 'content' ? normalizeContentBlock(block) : block,
+  );
+}
+
+export function createEmptyTitleBlock(): ChapterTitleBlock {
+  return {
+    id: createBlockId(),
+    kind: 'title',
+    blockName: '',
+    title: '',
+    subtitle: '',
+    coverImage: '',
+    visibility: { ...defaultVisibility },
+  };
+}
+
+export function createEmptyScriptureBlock(): ChapterScriptureBlock {
+  return {
+    id: createBlockId(),
+    kind: 'scripture',
+    blockName: '',
+    displayName: '',
+    scripture: { reference: '', verse: '' } satisfies Scripture,
+    visibility: { ...defaultVisibility },
+    leadersNotes: '',
+    showLeadersNotes: false,
+  };
+}
+
+export function blockKind(block: ChapterBlock): ChapterBlock['kind'] {
+  return block.kind ?? 'content';
+}
diff --git a/src/frontend/stories/components/blocks/block-video-field.vue b/src/frontend/stories/components/blocks/block-video-field.vue
new file mode 100644
index 00000000..ecfbde14
--- /dev/null
+++ b/src/frontend/stories/components/blocks/block-video-field.vue
@@ -0,0 +1,69 @@
+<template>
+  <VideoField :field="fieldSpec" :root-path="rootPath" :is-nested="true" />
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, watch } from 'vue';
+
+import type { FieldSpec } from '../../../../types';
+import VideoField from '../../../fields/video-field.vue';
+import { useModelStore } from '../../../store';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: { url: string | null };
+    collectionId: string;
+    blockIndex: number;
+    itemIndex?: number;
+    label?: string;
+  }>(),
+  {
+    itemIndex: undefined,
+    label: 'Video',
+  },
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [value: { url: string | null }];
+}>();
+
+const model = useModelStore();
+const rootPath = computed(() => `blocks.${props.blockIndex}`);
+const fieldName = computed(() =>
+  props.itemIndex === undefined ? 'video' : `items.${props.itemIndex}.video`,
+);
+const fieldPath = computed(() => `${rootPath.value}.${fieldName.value}`);
+
+const fieldSpec = computed((): FieldSpec => ({
+  label: props.label,
+  name: fieldName.value,
+  widget: 'video',
+  description: 'MP4 and MOV files up to 500MB',
+  extensions: ['.mp4', '.mov'],
+  collectionId: props.collectionId,
+  maxSize: 500662310,
+}));
+
+const readVideo = (): { url: string | null } =>
+  model.getField(fieldPath.value, { url: null }) as { url: string | null };
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    const current = readVideo();
+    if (current.url === value.url) return;
+    model.setField(fieldPath.value, value);
+  },
+  { immediate: true, deep: true },
+);
+
+const unsubscribe = model.$subscribe(() => {
+  const fresh = readVideo();
+  if (fresh.url === props.modelValue.url) return;
+  emit('update:modelValue', { ...fresh });
+});
+
+onBeforeUnmount(() => {
+  unsubscribe();
+});
+</script>
diff --git a/src/frontend/stories/components/blocks/block-visibility.vue b/src/frontend/stories/components/blocks/block-visibility.vue
new file mode 100644
index 00000000..368e109c
--- /dev/null
+++ b/src/frontend/stories/components/blocks/block-visibility.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="flex flex-wrap items-center gap-2">
+    <span class="text-sm text-gray-500">Visible to</span>
+    <span class="h-4 w-px shrink-0 bg-gray-300" aria-hidden="true" />
+    <button
+      v-for="option in visibilityOptions"
+      :key="option.key"
+      type="button"
+      class="inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium transition-colors"
+      :class="isActive(option.key) ? option.activeClasses : option.inactiveClasses"
+      :aria-pressed="isActive(option.key)"
+      @click="toggleVisibility(option.key)"
+    >
+      <component :is="option.icon" class="size-[14px]" aria-hidden="true" />
+      {{ option.label }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Component } from 'vue';
+import { EyeOff, Monitor, Send, User } from '@lucide/vue';
+
+import type { ChapterBlockVisibility } from '../../../../types';
+
+const props = defineProps<{
+  modelValue: ChapterBlockVisibility;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [value: ChapterBlockVisibility];
+}>();
+
+const toggleVisibility = (key: keyof ChapterBlockVisibility) => {
+  if (key !== 'hidden' && props.modelValue.hidden) {
+    emit('update:modelValue', { ...props.modelValue, hidden: false, [key]: true });
+    return;
+  }
+  emit('update:modelValue', { ...props.modelValue, [key]: !props.modelValue[key] });
+};
+
+const isActive = (key: keyof ChapterBlockVisibility) => {
+  if (key === 'hidden') {
+    return (
+      props.modelValue.hidden ||
+      (!props.modelValue.presenter &&
+        !props.modelValue.personal &&
+        !props.modelValue.inNavigation)
+    );
+  }
+  if (props.modelValue.hidden) {
+    return false;
+  }
+  return props.modelValue[key];
+};
+
+const visibilityOptions: {
+  key: keyof ChapterBlockVisibility;
+  label: string;
+  icon: Component;
+  activeClasses: string;
+  inactiveClasses: string;
+}[] = [
+  {
+    key: 'presenter',
+    label: 'Presenter',
+    icon: Monitor,
+    activeClasses: 'bg-studio-yellow text-studio-forest',
+    inactiveClasses: 'bg-studio-yellow/20 text-studio-forest border border-studio-yellow',
+  },
+  {
+    key: 'personal',
+    label: 'Personal',
+    icon: User,
+    activeClasses: 'bg-studio-lime text-studio-forest',
+    inactiveClasses: 'bg-studio-lime/20 text-studio-forest border border-studio-lime',
+  },
+  {
+    key: 'inNavigation',
+    label: 'In navigation',
+    icon: Send,
+    activeClasses: 'bg-studio-forest text-white',
+    inactiveClasses:
+      'bg-studio-forest/20 text-studio-forest border border-studio-forest ',
+  },
+  {
+    key: 'hidden',
+    label: 'Hidden',
+    icon: EyeOff,
+    activeClasses: 'bg-error-light text-error',
+    inactiveClasses: 'bg-error-light/20 text-error border border-error-light',
+  },
+];
+</script>
diff --git a/src/frontend/stories/components/blocks/content-add-items-toolbar.vue b/src/frontend/stories/components/blocks/content-add-items-toolbar.vue
new file mode 100644
index 00000000..f029d9a8
--- /dev/null
+++ b/src/frontend/stories/components/blocks/content-add-items-toolbar.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="mt-6 space-y-3">
+    <div class="flex flex-wrap gap-3">
+      <DashedAddButton :dashed="false" :full-width="false" @click="$emit('addImage')">
+        <Plus class="size-4" aria-hidden="true" />
+        <Image class="size-4" aria-hidden="true" />
+        <span>Image</span>
+      </DashedAddButton>
+      <DashedAddButton :dashed="false" :full-width="false" @click="$emit('addVideo')">
+        <Plus class="size-4" aria-hidden="true" />
+        <Video class="size-4" aria-hidden="true" />
+        <span>Video</span>
+      </DashedAddButton>
+      <DashedAddButton :dashed="false" :full-width="false" @click="$emit('addScripture')">
+        <Plus class="size-4" aria-hidden="true" />
+        <BookMarked class="size-4" aria-hidden="true" />
+        <span>Scripture</span>
+      </DashedAddButton>
+    </div>
+    <AddLeadersNotesButton v-if="showAddLeadersNotes" @click="$emit('addLeadersNotes')" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { BookMarked, Image, Plus, Video } from '@lucide/vue';
+
+import AddLeadersNotesButton from './add-leaders-notes-button.vue';
+import DashedAddButton from './dashed-add-button.vue';
+
+withDefaults(
+  defineProps<{
+    showAddLeadersNotes?: boolean;
+  }>(),
+  {
+    showAddLeadersNotes: true,
+  },
+);
+
+defineEmits<{
+  addImage: [];
+  addVideo: [];
+  addScripture: [];
+  addLeadersNotes: [];
+}>();
+</script>
diff --git a/src/frontend/stories/components/blocks/content-block-card.vue b/src/frontend/stories/components/blocks/content-block-card.vue
new file mode 100644
index 00000000..21076436
--- /dev/null
+++ b/src/frontend/stories/components/blocks/content-block-card.vue
@@ -0,0 +1,301 @@
+<template>
+  <BlockCardShell
+    :title="blockTitle"
+    :kind-icon="LayoutList"
+    :expanded="expanded"
+    :has-error="hasError"
+    :presenter-visible="block.visibility.presenter && !block.visibility.hidden"
+    :personal-visible="block.visibility.personal && !block.visibility.hidden"
+    :navigation-visible="block.visibility.inNavigation && !block.visibility.hidden"
+    kind-label="content"
+    @toggle="emit('toggle')"
+    @delete="emit('delete')"
+    @dragstart="emit('dragstart')"
+    @drop="emit('drop')"
+    @dragend="emit('dragend')"
+  >
+    <div>
+      <label :for="`${block.id}-block-name`" class="input-label">Block Name</label>
+      <input
+        :id="`${block.id}-block-name`"
+        type="text"
+        :value="block.blockName"
+        placeholder="e.g., Summary, Introduction, Overview"
+        class="input-field mt-[2px]"
+        :class="{ 'border-error': fieldHasError('blockName') }"
+        @input="updateField('blockName', ($event.target as HTMLInputElement).value)"
+      />
+      <p v-if="fieldHasError('blockName')" class="text-sm text-error">
+        {{ fieldMessages('blockName')[0] }}
+      </p>
+      <p v-else class="mt-1 text-sm italic text-gray-500">
+        This becomes the collapsible section name
+      </p>
+    </div>
+
+    <div>
+      <label :for="`${block.id}-display-name`" class="input-label">Display Name</label>
+      <input
+        :id="`${block.id}-display-name`"
+        type="text"
+        :value="block.displayName"
+        placeholder="e.g., Session Summary"
+        class="input-field mt-[2px]"
+        :class="{ 'border-error': fieldHasError('displayName') }"
+        @input="updateField('displayName', ($event.target as HTMLInputElement).value)"
+      />
+      <p v-if="fieldHasError('displayName')" class="text-sm text-error">
+        {{ fieldMessages('displayName')[0] }}
+      </p>
+    </div>
+
+    <div>
+      <RichListbox
+        :model-value="block.blockRole"
+        label="Block Role"
+        :options="blockRoleOptions"
+        @update:model-value="updateField('blockRole', $event)"
+      />
+      <p v-if="fieldHasError('blockRole')" class="text-sm text-error">
+        {{ fieldMessages('blockRole')[0] }}
+      </p>
+    </div>
+
+    <div>
+      <RichListbox
+        :model-value="block.style"
+        label="Block Style"
+        :options="blockStyleOptions"
+        @update:model-value="updateField('style', $event)"
+      />
+      <p v-if="fieldHasError('style')" class="text-sm text-error">
+        {{ fieldMessages('style')[0] }}
+      </p>
+    </div>
+
+    <div>
+      <label class="input-label block">Content Items</label>
+      <p class="text-sm text-gray-500">Add items that serve this block's role.</p>
+      <p v-if="blockLevelErrors.length" class="mt-2 text-sm text-error">
+        {{ blockLevelErrors[0] }}
+      </p>
+
+      <div class="mt-4">
+        <div class="pb-6">
+          <div class="mb-3 flex items-center gap-2">
+            <FileText class="size-4 text-gray-500" aria-hidden="true" />
+            <span class="input-label mb-0">Text</span>
+          </div>
+          <BlockRichTextEditor
+            v-model="contentModel"
+            placeholder="Enter your content..."
+          />
+        </div>
+
+        <template v-for="(item, itemIndex) in block.items" :key="item.id">
+          <div v-if="item.kind === 'image'" class="border-t border-gray-100 pt-6">
+            <div class="mb-2 flex items-center justify-between gap-3">
+              <span class="input-label mb-0">Image</span>
+              <button
+                type="button"
+                class="rounded-xl p-1.5 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600"
+                aria-label="Remove image item"
+                @click="removeItem(item.id)"
+              >
+                <Trash2 class="size-4" aria-hidden="true" />
+              </button>
+            </div>
+            <div class="[&>div]:mt-0">
+              <BlockImageField
+                :model-value="item.imageUrl ?? ''"
+                :block-index="blockIndex"
+                :item-index="itemIndex"
+                label=""
+                @update:model-value="updateItem(item.id, { imageUrl: $event })"
+              />
+            </div>
+          </div>
+
+          <div v-else-if="item.kind === 'video'" class="border-t border-gray-100 pt-6">
+            <div class="mb-2 flex items-center justify-between gap-3">
+              <span class="input-label mb-0">Video</span>
+              <button
+                type="button"
+                class="rounded-xl p-1.5 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600"
+                aria-label="Remove video item"
+                @click="removeItem(item.id)"
+              >
+                <Trash2 class="size-4" aria-hidden="true" />
+              </button>
+            </div>
+            <div class="[&>div]:mt-0">
+              <BlockVideoField
+                :model-value="item.video ?? { url: null }"
+                :collection-id="videoCollectionId ?? ''"
+                :block-index="blockIndex"
+                :item-index="itemIndex"
+                label=""
+                @update:model-value="updateItem(item.id, { video: $event })"
+              />
+            </div>
+          </div>
+
+          <div
+            v-else-if="item.kind === 'scripture'"
+            class="border-t border-gray-100 pt-6"
+          >
+            <div class="mb-2 flex items-center justify-between gap-3">
+              <span class="input-label mb-0">Scripture</span>
+              <button
+                type="button"
+                class="rounded-xl p-1.5 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600"
+                aria-label="Remove scripture item"
+                @click="removeItem(item.id)"
+              >
+                <Trash2 class="size-4" aria-hidden="true" />
+              </button>
+            </div>
+            <BlockScriptureField
+              :model-value="item.scripture ?? { reference: '', verse: '' }"
+              :block-index="blockIndex"
+              :item-index="itemIndex"
+              reference-label="Bible Reference"
+              passage-label="Scripture Text"
+              reference-placeholder="e.g., John 3:16, Romans 8:28–30"
+              passage-placeholder="Paste or type the scripture passage here..."
+              @update:model-value="updateItem(item.id, { scripture: $event })"
+            />
+          </div>
+        </template>
+      </div>
+
+      <ContentAddItemsToolbar
+        :show-add-leaders-notes="!block.showLeadersNotes"
+        @add-image="addItem('image')"
+        @add-video="addItem('video')"
+        @add-scripture="addItem('scripture')"
+        @add-leaders-notes="updateField('showLeadersNotes', true)"
+      />
+    </div>
+
+    <div
+      v-if="block.showLeadersNotes"
+      class="rounded-xl border border-studio-yellow/60 bg-studio-yellow/30 p-4"
+    >
+      <div class="mb-3 flex items-center justify-between gap-3">
+        <div class="flex items-center gap-2">
+          <Crown class="size-[18px] text-studio-forest" aria-hidden="true" />
+          <span class="text-sm font-semibold text-studio-forest">Leaders Notes</span>
+          <span
+            class="rounded-full bg-studio-yellow px-2 py-0.5 text-xs font-medium text-studio-forest"
+          >
+            Leaders Only
+          </span>
+        </div>
+        <button
+          type="button"
+          class="rounded-xl p-1.5 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600"
+          aria-label="Remove leaders notes"
+          @click="updateField('showLeadersNotes', false)"
+        >
+          <Trash2 class="size-4" aria-hidden="true" />
+        </button>
+      </div>
+      <textarea
+        :value="block.leadersNotes"
+        rows="3"
+        placeholder="Add guidance and notes for leaders..."
+        class="input-field min-h-[80px] resize-y"
+        @input="updateField('leadersNotes', ($event.target as HTMLTextAreaElement).value)"
+      />
+    </div>
+
+    <template #footer>
+      <BlockVisibility v-model="visibilityModel" />
+    </template>
+  </BlockCardShell>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Crown, FileText, LayoutList, Trash2 } from '@lucide/vue';
+
+import type { ChapterContentBlock, ChapterContentItem } from '../../../../types';
+import RichListbox from '../../../shared/rich-listbox.vue';
+import BlockCardShell from './block-card-shell.vue';
+import BlockImageField from './block-image-field.vue';
+import BlockRichTextEditor from './block-rich-text-editor.vue';
+import BlockScriptureField from './block-scripture-field.vue';
+import BlockVideoField from './block-video-field.vue';
+import BlockVisibility from './block-visibility.vue';
+import ContentAddItemsToolbar from './content-add-items-toolbar.vue';
+import { createContentItem } from './block-utils';
+import { getBlockRoleOptions } from './block-role-options';
+import { blockStyleOptions } from './block-style-options';
+import { useBlockFieldErrors } from './use-block-field-errors';
+
+const props = defineProps<{
+  block: ChapterContentBlock;
+  blockIndex: number;
+  expanded: boolean;
+  videoCollectionId?: string;
+  chapterType?: string | null;
+}>();
+
+const emit = defineEmits<{
+  'update:block': [block: ChapterContentBlock];
+  delete: [];
+  toggle: [];
+  dragstart: [];
+  drop: [];
+  dragend: [];
+}>();
+
+const {
+  hasError,
+  blockLevelErrors,
+  fieldMessages,
+  fieldHasError,
+} = useBlockFieldErrors(props.blockIndex);
+
+const blockTitle = computed(() =>
+  props.block.blockName.trim() ? props.block.blockName.trim() : 'New Content Block',
+);
+
+const contentModel = computed({
+  get: () => props.block.content,
+  set: (value: string) => updateField('content', value),
+});
+
+const visibilityModel = computed({
+  get: () => props.block.visibility,
+  set: (value: ChapterContentBlock['visibility']) => updateField('visibility', value),
+});
+
+const updateField = <K extends keyof ChapterContentBlock>(
+  key: K,
+  value: ChapterContentBlock[K],
+) => {
+  emit('update:block', { ...props.block, [key]: value });
+};
+
+const addItem = (kind: ChapterContentItem['kind']) => {
+  updateField('items', [...props.block.items, createContentItem(kind)]);
+};
+
+const removeItem = (id: string) => {
+  updateField(
+    'items',
+    props.block.items.filter((item) => item.id !== id),
+  );
+};
+
+const updateItem = (id: string, patch: Partial<ChapterContentItem>) => {
+  updateField(
+    'items',
+    props.block.items.map((item) => (item.id === id ? { ...item, ...patch } : item)),
+  );
+};
+
+const blockRoleOptions = computed(() => getBlockRoleOptions(props.chapterType));
+</script>
diff --git a/src/frontend/stories/components/blocks/dashed-add-button.vue b/src/frontend/stories/components/blocks/dashed-add-button.vue
new file mode 100644
index 00000000..fd12f647
--- /dev/null
+++ b/src/frontend/stories/components/blocks/dashed-add-button.vue
@@ -0,0 +1,32 @@
+<template>
+  <button
+    type="button"
+    class="inline-flex items-center justify-center rounded-xl border border-gray-300 bg-white text-sm font-medium leading-4 text-studio-forest hover:bg-gray-50"
+    :class="[
+      dashed ? 'border-dashed' : '',
+      fullWidth ? 'w-full px-3 py-3' : 'w-auto max-w-fit px-4 py-2',
+    ]"
+    @click.prevent="$emit('click')"
+  >
+    <div class="inline-flex items-center justify-center gap-2">
+      <slot />
+    </div>
+  </button>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    dashed?: boolean;
+    fullWidth?: boolean;
+  }>(),
+  {
+    dashed: true,
+    fullWidth: true,
+  },
+);
+
+defineEmits<{
+  click: [];
+}>();
+</script>
diff --git a/src/frontend/stories/components/blocks/scripture-block-card.vue b/src/frontend/stories/components/blocks/scripture-block-card.vue
new file mode 100644
index 00000000..d86f0b13
--- /dev/null
+++ b/src/frontend/stories/components/blocks/scripture-block-card.vue
@@ -0,0 +1,146 @@
+<template>
+  <BlockCardShell
+    :title="blockTitle"
+    :kind-icon="BookMarked"
+    :expanded="expanded"
+    :has-error="hasError"
+    :presenter-visible="block.visibility.presenter && !block.visibility.hidden"
+    :personal-visible="block.visibility.personal && !block.visibility.hidden"
+    :navigation-visible="block.visibility.inNavigation && !block.visibility.hidden"
+    kind-label="scripture"
+    @toggle="emit('toggle')"
+    @delete="emit('delete')"
+    @dragstart="emit('dragstart')"
+    @drop="emit('drop')"
+    @dragend="emit('dragend')"
+  >
+    <div>
+      <label :for="`${block.id}-block-name`" class="input-label">Block Name</label>
+      <input
+        :id="`${block.id}-block-name`"
+        type="text"
+        :value="block.blockName"
+        placeholder="e.g., Opening Passage, Key Verse"
+        class="input-field mt-[2px]"
+        :class="{ 'border-error': fieldHasError('blockName') }"
+        @input="updateField('blockName', ($event.target as HTMLInputElement).value)"
+      />
+      <p v-if="fieldHasError('blockName')" class="text-sm text-error">
+        {{ fieldMessages('blockName')[0] }}
+      </p>
+      <p v-else class="mt-1 text-sm italic text-gray-500">
+        This becomes the collapsible section name
+      </p>
+    </div>
+
+    <div>
+      <label :for="`${block.id}-display-name`" class="input-label">Display Name</label>
+      <input
+        :id="`${block.id}-display-name`"
+        type="text"
+        :value="block.displayName"
+        placeholder="e.g., Opening Scripture"
+        class="input-field mt-[2px]"
+        :class="{ 'border-error': fieldHasError('displayName') }"
+        @input="updateField('displayName', ($event.target as HTMLInputElement).value)"
+      />
+      <p v-if="fieldHasError('displayName')" class="text-sm text-error">
+        {{ fieldMessages('displayName')[0] }}
+      </p>
+    </div>
+
+    <BlockScriptureField
+      :model-value="block.scripture"
+      :block-index="blockIndex"
+      label="Scripture"
+      @update:model-value="updateField('scripture', $event)"
+    />
+
+    <div
+      v-if="block.showLeadersNotes"
+      class="rounded-xl border border-studio-yellow/60 bg-studio-yellow/30 p-4"
+    >
+      <div class="mb-3 flex items-center justify-between gap-3">
+        <div class="flex items-center gap-2">
+          <Crown class="size-[18px] text-studio-forest" aria-hidden="true" />
+          <span class="text-sm font-semibold text-studio-forest">Leaders Notes</span>
+          <span
+            class="rounded-full bg-studio-yellow px-2 py-0.5 text-xs font-medium text-studio-forest"
+          >
+            Leaders Only
+          </span>
+        </div>
+        <button
+          type="button"
+          class="rounded-xl p-1.5 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600"
+          aria-label="Remove leaders notes"
+          @click="updateField('showLeadersNotes', false)"
+        >
+          <Trash2 class="size-4" aria-hidden="true" />
+        </button>
+      </div>
+      <textarea
+        :value="block.leadersNotes"
+        rows="3"
+        placeholder="Add guidance and notes for leaders..."
+        class="input-field min-h-[80px] resize-y"
+        @input="updateField('leadersNotes', ($event.target as HTMLTextAreaElement).value)"
+      />
+    </div>
+
+    <AddLeadersNotesButton
+      v-else
+      class="mt-6"
+      @click="updateField('showLeadersNotes', true)"
+    />
+
+    <template #footer>
+      <BlockVisibility v-model="visibilityModel" />
+    </template>
+  </BlockCardShell>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { BookMarked, Crown, Trash2 } from '@lucide/vue';
+
+import type { ChapterScriptureBlock } from '../../../../types';
+import BlockCardShell from './block-card-shell.vue';
+import AddLeadersNotesButton from './add-leaders-notes-button.vue';
+import BlockScriptureField from './block-scripture-field.vue';
+import BlockVisibility from './block-visibility.vue';
+import { useBlockFieldErrors } from './use-block-field-errors';
+
+const props = defineProps<{
+  block: ChapterScriptureBlock;
+  blockIndex: number;
+  expanded: boolean;
+}>();
+
+const emit = defineEmits<{
+  'update:block': [block: ChapterScriptureBlock];
+  delete: [];
+  toggle: [];
+  dragstart: [];
+  drop: [];
+  dragend: [];
+}>();
+
+const { hasError, fieldMessages, fieldHasError } = useBlockFieldErrors(props.blockIndex);
+
+const blockTitle = computed(() =>
+  props.block.blockName.trim() ? props.block.blockName.trim() : 'New Scripture Block',
+);
+
+const visibilityModel = computed({
+  get: () => props.block.visibility,
+  set: (value: ChapterScriptureBlock['visibility']) => updateField('visibility', value),
+});
+
+const updateField = <K extends keyof ChapterScriptureBlock>(
+  key: K,
+  value: ChapterScriptureBlock[K],
+) => {
+  emit('update:block', { ...props.block, [key]: value });
+};
+</script>
diff --git a/src/frontend/stories/components/blocks/title-block-card.vue b/src/frontend/stories/components/blocks/title-block-card.vue
new file mode 100644
index 00000000..3696424a
--- /dev/null
+++ b/src/frontend/stories/components/blocks/title-block-card.vue
@@ -0,0 +1,123 @@
+<template>
+  <BlockCardShell
+    :title="blockTitle"
+    :kind-icon="PencilLine"
+    :expanded="expanded"
+    :has-error="hasError"
+    :presenter-visible="block.visibility.presenter && !block.visibility.hidden"
+    :personal-visible="block.visibility.personal && !block.visibility.hidden"
+    :navigation-visible="block.visibility.inNavigation && !block.visibility.hidden"
+    kind-label="title"
+    @toggle="emit('toggle')"
+    @delete="emit('delete')"
+    @dragstart="emit('dragstart')"
+    @drop="emit('drop')"
+    @dragend="emit('dragend')"
+  >
+    <div>
+      <label :for="`${block.id}-block-name`" class="input-label">Block Name</label>
+      <input
+        :id="`${block.id}-block-name`"
+        type="text"
+        :value="block.blockName"
+        placeholder="e.g., Session Title, Chapter Heading"
+        class="input-field mt-[2px]"
+        :class="{ 'border-error': fieldHasError('blockName') }"
+        @input="updateField('blockName', ($event.target as HTMLInputElement).value)"
+      />
+      <p v-if="fieldHasError('blockName')" class="text-sm text-error">
+        {{ fieldMessages('blockName')[0] }}
+      </p>
+      <p v-else class="mt-1 text-sm italic text-gray-500">
+        This becomes the collapsible section name
+      </p>
+    </div>
+
+    <div>
+      <label :for="`${block.id}-title`" class="input-label">Title</label>
+      <input
+        :id="`${block.id}-title`"
+        type="text"
+        :value="block.title"
+        placeholder="e.g., The Gospel of John"
+        class="input-field mt-[2px]"
+        :class="{ 'border-error': fieldHasError('title') }"
+        @input="updateField('title', ($event.target as HTMLInputElement).value)"
+      />
+      <p v-if="fieldHasError('title')" class="text-sm text-error">
+        {{ fieldMessages('title')[0] }}
+      </p>
+    </div>
+
+    <div>
+      <label :for="`${block.id}-subtitle`" class="input-label">Subtitle</label>
+      <input
+        :id="`${block.id}-subtitle`"
+        type="text"
+        :value="block.subtitle"
+        placeholder="e.g., Session 1 of 12"
+        class="input-field mt-[2px]"
+        :class="{ 'border-error': fieldHasError('subtitle') }"
+        @input="updateField('subtitle', ($event.target as HTMLInputElement).value)"
+      />
+      <p v-if="fieldHasError('subtitle')" class="text-sm text-error">
+        {{ fieldMessages('subtitle')[0] }}
+      </p>
+    </div>
+
+    <BlockImageField
+      :model-value="block.coverImage ?? ''"
+      :block-index="blockIndex"
+      label="Cover Image (Optional)"
+      @update:model-value="updateField('coverImage', $event)"
+    />
+    <div class="mt-4"></div>
+    <template #footer>
+      <BlockVisibility v-model="visibilityModel" />
+    </template>
+  </BlockCardShell>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { PencilLine } from '@lucide/vue';
+
+import type { ChapterTitleBlock } from '../../../../types';
+import BlockCardShell from './block-card-shell.vue';
+import BlockImageField from './block-image-field.vue';
+import BlockVisibility from './block-visibility.vue';
+import { useBlockFieldErrors } from './use-block-field-errors';
+
+const props = defineProps<{
+  block: ChapterTitleBlock;
+  blockIndex: number;
+  expanded: boolean;
+}>();
+
+const emit = defineEmits<{
+  'update:block': [block: ChapterTitleBlock];
+  delete: [];
+  toggle: [];
+  dragstart: [];
+  drop: [];
+  dragend: [];
+}>();
+
+const { hasError, fieldMessages, fieldHasError } = useBlockFieldErrors(props.blockIndex);
+
+const blockTitle = computed(() =>
+  props.block.blockName.trim() ? props.block.blockName.trim() : 'New Title Block',
+);
+
+const visibilityModel = computed({
+  get: () => props.block.visibility,
+  set: (value: ChapterTitleBlock['visibility']) => updateField('visibility', value),
+});
+
+const updateField = <K extends keyof ChapterTitleBlock>(
+  key: K,
+  value: ChapterTitleBlock[K],
+) => {
+  emit('update:block', { ...props.block, [key]: value });
+};
+</script>
diff --git a/src/frontend/stories/components/blocks/use-block-field-errors.ts b/src/frontend/stories/components/blocks/use-block-field-errors.ts
new file mode 100644
index 00000000..e861234c
--- /dev/null
+++ b/src/frontend/stories/components/blocks/use-block-field-errors.ts
@@ -0,0 +1,40 @@
+import { computed } from 'vue';
+import { storeToRefs } from 'pinia';
+
+import { useSharedStore } from '../../../store';
+import {
+  blockFieldErrorMessages,
+  blockHasError,
+  blockItemFieldErrorMessages,
+  blockLevelErrorMessages,
+} from './block-field-errors';
+
+export function useBlockFieldErrors(blockIndex: number) {
+  const shared = useSharedStore();
+  const { errors } = storeToRefs(shared);
+
+  const hasError = computed(() => blockHasError(errors.value, blockIndex));
+  const blockLevelErrors = computed(() =>
+    blockLevelErrorMessages(errors.value, blockIndex),
+  );
+
+  const fieldMessages = (field: string) =>
+    blockFieldErrorMessages(errors.value, blockIndex, field);
+
+  const fieldHasError = (field: string) => fieldMessages(field).length > 0;
+
+  const itemFieldMessages = (itemIndex: number, field: string) =>
+    blockItemFieldErrorMessages(errors.value, blockIndex, itemIndex, field);
+
+  const itemFieldHasError = (itemIndex: number, field: string) =>
+    itemFieldMessages(itemIndex, field).length > 0;
+
+  return {
+    hasError,
+    blockLevelErrors,
+    fieldMessages,
+    fieldHasError,
+    itemFieldMessages,
+    itemFieldHasError,
+  };
+}
diff --git a/src/frontend/stories/components/devotion-draft-edit-blocks.story.vue b/src/frontend/stories/components/devotion-draft-edit-blocks.story.vue
new file mode 100644
index 00000000..f1e4c3ab
--- /dev/null
+++ b/src/frontend/stories/components/devotion-draft-edit-blocks.story.vue
@@ -0,0 +1,138 @@
+<template>
+  <Story title="Devotion Draft Edit Blocks" group="stories" :setup-app="setupProviders">
+    <Variant title="Default">
+      <DevotionDraftEditBlocks
+        v-model:blocks="defaultBlocks"
+        :video-collection-id="sharedProps.config.videoCollectionId"
+      />
+    </Variant>
+
+    <Variant title="Empty">
+      <DevotionDraftEditBlocks
+        v-model:blocks="emptyBlocks"
+        :video-collection-id="sharedProps.config.videoCollectionId"
+      />
+    </Variant>
+
+    <Variant title="Multiple blocks">
+      <DevotionDraftEditBlocks
+        v-model:blocks="multipleBlocks"
+        :video-collection-id="sharedProps.config.videoCollectionId"
+      />
+    </Variant>
+
+    <Variant title="Mixed block kinds">
+      <DevotionDraftEditBlocks
+        v-model:blocks="mixedBlocks"
+        :video-collection-id="sharedProps.config.videoCollectionId"
+      />
+    </Variant>
+
+    <Variant title="Devotion">
+      <DevotionDraftEditBlocks
+        v-model:blocks="devotionBlocks"
+        :video-collection-id="sharedProps.config.videoCollectionId"
+        chapter-type="Devotion"
+      />
+    </Variant>
+
+    <Variant title="Reuse previous structure">
+      <DevotionDraftEditBlocks
+        v-model:blocks="emptyBlocks"
+        :previous-chapter-blocks="previousChapterBlocks"
+        :video-collection-id="sharedProps.config.videoCollectionId"
+        chapter-type="Devotion"
+      />
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import type { ChapterBlock } from '../../../types';
+import {
+  mockResourceProviders,
+  sampleMixedChapterBlocks,
+  samplePreviousDevotionChapterBlocks,
+  sharedProps,
+} from '../../test/mocks';
+import { useWidgetsStore } from '../../store';
+import type { StoryHandler } from '../../shared/helpers';
+import DevotionDraftEditBlocks from './devotion-draft-edit-blocks.vue';
+import { createEmptyContentBlock, createContentItem } from './blocks/block-utils';
+
+const setupProviders: StoryHandler = (): void => {
+  useWidgetsStore().setProviders(mockResourceProviders);
+};
+
+const defaultBlocks = ref<ChapterBlock[]>([createEmptyContentBlock()]);
+
+const emptyBlocks = ref<ChapterBlock[]>([]);
+
+const previousChapterBlocks = samplePreviousDevotionChapterBlocks;
+
+const multipleBlocks = ref<ChapterBlock[]>([
+  {
+    ...createEmptyContentBlock(),
+    blockName: 'Introduction',
+    displayName: 'Session Introduction',
+    blockRole: 'introduction',
+    style: 'primary',
+    content: 'Welcome to this session.',
+  },
+  {
+    ...createEmptyContentBlock(),
+    blockName: 'External Link',
+    displayName: 'Further Reading',
+    blockRole: 'summary',
+    style: 'secondary',
+    content: 'https://example.com/article',
+  },
+  {
+    ...createEmptyContentBlock(),
+    blockName: 'Summary',
+    displayName: 'Session Summary',
+    blockRole: 'summary',
+    style: 'primary',
+    content: 'Key takeaways from today.',
+    visibility: { presenter: true, personal: false, inNavigation: true, hidden: false },
+  },
+  {
+    ...createEmptyContentBlock(),
+    blockName: 'Session Video',
+    displayName: 'Watch Session',
+    blockRole: 'introduction',
+    style: 'tertiary',
+    content: '',
+    items: [createContentItem('video')],
+  },
+  createEmptyContentBlock(),
+]);
+
+const mixedBlocks = ref<ChapterBlock[]>([...sampleMixedChapterBlocks]);
+
+const devotionBlocks = ref<ChapterBlock[]>([
+  {
+    ...createEmptyContentBlock(),
+    blockName: 'Opening',
+    displayName: 'Opening Devotion',
+    blockRole: 'introduction',
+    content: "Welcome to today's devotion.",
+  },
+  {
+    ...createEmptyContentBlock(),
+    blockName: 'Passage',
+    displayName: 'Scripture Reading',
+    blockRole: 'scripture',
+    content: '',
+    items: [createContentItem('scripture')],
+  },
+]);
+</script>
+
+<docs lang="md">
+# Devotion Draft Edit Blocks
+
+Content block editor for the Blocks tab on devotion draft edit pages. Supports content, title, and scripture blocks with add, remove, reorder, collapse, visibility toggles, leaders notes, and reuse previous structure on chapter 2+.
+</docs>
diff --git a/src/frontend/stories/components/devotion-draft-edit-blocks.vue b/src/frontend/stories/components/devotion-draft-edit-blocks.vue
new file mode 100644
index 00000000..da491685
--- /dev/null
+++ b/src/frontend/stories/components/devotion-draft-edit-blocks.vue
@@ -0,0 +1,244 @@
+<template>
+  <div class="min-w-0 space-y-6 overflow-x-clip">
+    <AddBlockToolbar
+      v-if="blocks.length === 0"
+      :show-reuse-previous="canReusePrevious"
+      @add-title="addTitleBlock"
+      @add-scripture="addScriptureBlock"
+      @add-content="addContentBlock"
+      @reuse-previous="reusePreviousStructure"
+    />
+
+    <BlockEmptyState
+      v-if="blocks.length === 0"
+      :error-message="blocksArrayError"
+    />
+
+    <template v-for="(block, index) in blocks" :key="block.id">
+      <ContentBlockCard
+        v-if="isContentBlock(block)"
+        :block="block"
+        :block-index="index"
+        :expanded="isExpanded(index)"
+        :video-collection-id="videoCollectionId"
+        :chapter-type="chapterType"
+        @update:block="updateBlock(index, $event)"
+        @delete="deleteBlock(index)"
+        @toggle="toggle(index)"
+        @dragstart="onDragStart(index)"
+        @drop="onDrop(index)"
+        @dragend="onDragEnd"
+      />
+      <TitleBlockCard
+        v-else-if="block.kind === 'title'"
+        :block="block"
+        :block-index="index"
+        :expanded="isExpanded(index)"
+        @update:block="updateBlock(index, $event)"
+        @delete="deleteBlock(index)"
+        @toggle="toggle(index)"
+        @dragstart="onDragStart(index)"
+        @drop="onDrop(index)"
+        @dragend="onDragEnd"
+      />
+      <ScriptureBlockCard
+        v-else-if="block.kind === 'scripture'"
+        :block="block"
+        :block-index="index"
+        :expanded="isExpanded(index)"
+        @update:block="updateBlock(index, $event)"
+        @delete="deleteBlock(index)"
+        @toggle="toggle(index)"
+        @dragstart="onDragStart(index)"
+        @drop="onDrop(index)"
+        @dragend="onDragEnd"
+      />
+    </template>
+
+    <AddBlockToolbar
+      v-if="blocks.length > 0"
+      @add-title="addTitleBlock"
+      @add-scripture="addScriptureBlock"
+      @add-content="addContentBlock"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { storeToRefs } from 'pinia';
+
+import type { ChapterBlock, ChapterContentBlock } from '../../../types';
+import { useSharedStore } from '../../store';
+import AddBlockToolbar from './blocks/add-block-toolbar.vue';
+import BlockEmptyState from './blocks/block-empty-state.vue';
+import { blockHasError, blocksArrayErrorMessages } from './blocks/block-field-errors';
+import ContentBlockCard from './blocks/content-block-card.vue';
+import ScriptureBlockCard from './blocks/scripture-block-card.vue';
+import TitleBlockCard from './blocks/title-block-card.vue';
+import {
+  blockKind,
+  createEmptyContentBlock,
+  createEmptyScriptureBlock,
+  createEmptyTitleBlock,
+  normalizeBlocks,
+} from './blocks/block-utils';
+import { cloneBlocksStructure } from '../../../shared/block_structure';
+
+const props = defineProps<{
+  blocks: ChapterBlock[];
+  videoCollectionId?: string;
+  chapterType?: string | null;
+  previousChapterBlocks?: ChapterBlock[];
+}>();
+
+const emit = defineEmits<{
+  'update:blocks': [blocks: ChapterBlock[]];
+}>();
+
+const shared = useSharedStore();
+const { errors } = storeToRefs(shared);
+
+const blocks = computed({
+  get: () => props.blocks,
+  set: (value: ChapterBlock[]) => emit('update:blocks', value),
+});
+
+const blocksArrayError = computed(() => blocksArrayErrorMessages(errors.value)[0] ?? '');
+
+const canReusePrevious = computed(
+  () => (props.previousChapterBlocks?.length ?? 0) > 0 && blocks.value.length === 0,
+);
+
+const expanded = ref<boolean[]>([]);
+const newlyAddedBlockId = ref<string | null>(null);
+const hasInitialized = ref(false);
+
+const expandSingleEmptyStarter = () => {
+  if (blocks.value.length !== 1) return;
+  const block = blocks.value[0];
+  if (block.blockName.trim()) return;
+  expanded.value = [true];
+};
+
+const expandErroredBlocks = () => {
+  const count = blocks.value.length;
+  if (count === 0) return;
+
+  const fresh = [...expanded.value];
+  while (fresh.length < count) fresh.push(false);
+
+  let changed = false;
+  for (let index = 0; index < count; index++) {
+    if (blockHasError(errors.value, index) && !fresh[index]) {
+      fresh[index] = true;
+      changed = true;
+    }
+  }
+
+  if (changed) {
+    expanded.value = fresh;
+  }
+};
+
+const syncExpanded = () => {
+  const count = blocks.value.length;
+  if (expanded.value.length === count) return;
+  const fresh = [...expanded.value];
+  while (fresh.length < count) {
+    const block = blocks.value[fresh.length];
+    fresh.push(block.id === newlyAddedBlockId.value);
+  }
+  fresh.length = count;
+  expanded.value = fresh;
+  newlyAddedBlockId.value = null;
+
+  if (!hasInitialized.value) {
+    hasInitialized.value = true;
+    expandSingleEmptyStarter();
+  }
+};
+
+watch(blocks, syncExpanded, { deep: true, immediate: true });
+watch(errors, expandErroredBlocks, { deep: true, immediate: true });
+
+const isContentBlock = (block: ChapterBlock): block is ChapterContentBlock =>
+  blockKind(block) === 'content';
+
+const isExpanded = (index: number): boolean => expanded.value[index] ?? false;
+
+const toggle = (index: number) => {
+  const fresh = [...expanded.value];
+  fresh[index] = !isExpanded(index);
+  expanded.value = fresh;
+};
+
+const updateBlock = (index: number, block: ChapterBlock) => {
+  const next = [...blocks.value];
+  next[index] = block;
+  blocks.value = next;
+};
+
+const appendBlock = (block: ChapterBlock) => {
+  newlyAddedBlockId.value = block.id;
+  blocks.value = [...blocks.value, block];
+};
+
+const addContentBlock = () => {
+  appendBlock(createEmptyContentBlock());
+};
+
+const addTitleBlock = () => {
+  appendBlock(createEmptyTitleBlock());
+};
+
+const addScriptureBlock = () => {
+  appendBlock(createEmptyScriptureBlock());
+};
+
+const reusePreviousStructure = () => {
+  if (!props.previousChapterBlocks?.length) return;
+
+  const cloned = cloneBlocksStructure(normalizeBlocks([...props.previousChapterBlocks]));
+  blocks.value = cloned;
+  expanded.value = cloned.map((_, index) => index === 0);
+  hasInitialized.value = true;
+};
+
+const deleteBlock = (index: number) => {
+  const next = [...blocks.value];
+  next.splice(index, 1);
+  blocks.value = next;
+
+  const toggles = [...expanded.value];
+  toggles.splice(index, 1);
+  expanded.value = toggles;
+};
+
+const dragFromIndex = ref<number | null>(null);
+
+const onDragStart = (index: number) => {
+  dragFromIndex.value = index;
+};
+
+const onDragEnd = () => {
+  dragFromIndex.value = null;
+};
+
+const onDrop = (toIndex: number) => {
+  if (dragFromIndex.value === null) return;
+  if (dragFromIndex.value === toIndex) return;
+
+  const items = [...blocks.value];
+  const [moved] = items.splice(dragFromIndex.value, 1);
+  if (!moved) return;
+  items.splice(toIndex, 0, moved);
+  blocks.value = items;
+
+  const toggles = [...expanded.value];
+  const [movedToggle] = toggles.splice(dragFromIndex.value, 1);
+  toggles.splice(toIndex, 0, movedToggle ?? false);
+  expanded.value = toggles;
+  dragFromIndex.value = null;
+};
+</script>
diff --git a/src/frontend/stories/components/devotion-draft-edit-details.story.vue b/src/frontend/stories/components/devotion-draft-edit-details.story.vue
new file mode 100644
index 00000000..3a73919d
--- /dev/null
+++ b/src/frontend/stories/components/devotion-draft-edit-details.story.vue
@@ -0,0 +1,56 @@
+<template>
+  <Story title="Devotion Draft Edit Details" group="stories">
+    <Variant title="Create" :setup-app="loadCreate">
+      <DevotionDraftEditDetails chapter-type="Day" />
+      <ModelControl :model="emptyChapterModel" :is-inspect-only="true" />
+    </Variant>
+
+    <Variant title="Populated" :setup-app="loadPopulated">
+      <DevotionDraftEditDetails chapter-type="Day" />
+      <ModelControl :model="populatedChapterModel" :is-inspect-only="true" />
+    </Variant>
+
+    <Variant title="Episode chapter type" :setup-app="loadPopulated">
+      <DevotionDraftEditDetails chapter-type="Episode" />
+      <ModelControl :model="populatedChapterModel" :is-inspect-only="true" />
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import DevotionDraftEditDetails from './devotion-draft-edit-details.vue';
+import ModelControl from '../../test/model-control.vue';
+import { useModelStore } from '../../store';
+import type { StoryHandler } from '../../shared/helpers';
+
+const emptyChapterModel = {
+  number: '',
+  title: '',
+  description: '',
+  coverImage: '',
+  devotionAudio: { url: null, length: null },
+};
+
+const populatedChapterModel = {
+  number: '01',
+  title: 'Is there more to life than this?',
+  description: 'An introduction to the Christian faith.',
+  coverImage:
+    'https://res.cloudinary.com/journeys/image/upload/v1756121793/mountain-placeholder_yuflkz.jpg',
+  devotionAudio: { url: null, length: null },
+};
+
+const loadCreate: StoryHandler = (): void => {
+  useModelStore().setModel(emptyChapterModel);
+};
+
+const loadPopulated: StoryHandler = (): void => {
+  useModelStore().setModel(populatedChapterModel);
+};
+</script>
+
+<docs lang="md">
+# Devotion Draft Edit Details
+
+Fixed metadata fields for the Details tab on devotion draft edit pages. Field labels use the story chapter type (e.g. Day Number, Episode Title).
+</docs>
diff --git a/src/frontend/stories/components/devotion-draft-edit-details.vue b/src/frontend/stories/components/devotion-draft-edit-details.vue
new file mode 100644
index 00000000..b5c30583
--- /dev/null
+++ b/src/frontend/stories/components/devotion-draft-edit-details.vue
@@ -0,0 +1,71 @@
+<template>
+  <div
+    class="flex flex-col gap-y-2 rounded-xl border border-gray-200 bg-white px-6 pb-11"
+  >
+    <StringField :field="numberField" :is-nested="true" />
+    <StringField :field="titleField" :is-nested="true" />
+    <MarkdownField :field="descriptionField" :is-nested="true" />
+    <ImageField :field="coverImageField" :is-nested="true" />
+    <div class="mt-4">
+      <AudioField :field="devotionAudioField" :is-nested="true" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import type { FieldSpec } from '../../../types';
+import AudioField from '../../fields/audio-field.vue';
+import ImageField from '../../fields/image-field.vue';
+import MarkdownField from '../../fields/markdown-field.vue';
+import StringField from '../../fields/string-field.vue';
+
+const props = defineProps<{
+  chapterType?: string | null;
+}>();
+
+const chapterLabel = computed(() => props.chapterType?.trim() || 'Chapter');
+
+const numberField = computed((): FieldSpec => ({
+  name: 'number',
+  label: `${chapterLabel.value} Number`,
+  widget: 'string',
+  placeholderText: 'e.g., 01',
+}));
+
+const titleField = computed((): FieldSpec => ({
+  name: 'title',
+  label: `${chapterLabel.value} Title`,
+  widget: 'string',
+  placeholderText: 'e.g., Is there more to life than this?',
+}));
+
+const descriptionField: FieldSpec = {
+  name: 'description',
+  label: 'Description',
+  widget: 'markdown',
+  noMarkup: true,
+  minimal: true,
+  toolbar: [],
+  placeholderText: 'Brief overview of this session...',
+};
+
+const coverImageField: FieldSpec = {
+  label: 'Cover Image',
+  name: 'coverImage',
+  widget: 'image',
+  description: 'PNG, JPG • Recommended 1280x720px',
+  extensions: ['.jpeg', '.jpg', '.png'],
+  maxSize: 5662310,
+};
+
+const devotionAudioField: FieldSpec = {
+  label: 'Devotion Audio',
+  name: 'devotionAudio',
+  widget: 'audio',
+  description: 'MP3, M4A, WAV up to 200 MB',
+  extensions: ['.mp3', '.m4a', '.wav'],
+  maxSize: 209715200,
+};
+</script>
diff --git a/src/frontend/stories/devotion-draft-edit-tab-errors.ts b/src/frontend/stories/devotion-draft-edit-tab-errors.ts
new file mode 100644
index 00000000..ebf3f887
--- /dev/null
+++ b/src/frontend/stories/devotion-draft-edit-tab-errors.ts
@@ -0,0 +1,49 @@
+export type DevotionDraftEditTab = 'details' | 'blocks' | 'resources';
+
+const DEVOTION_DRAFT_EDIT_TAB_ORDER: DevotionDraftEditTab[] = [
+  'details',
+  'blocks',
+  'resources',
+];
+
+const DEVOTION_DRAFT_EDIT_TAB_LABELS: Record<DevotionDraftEditTab, string> = {
+  details: 'Details',
+  blocks: 'Blocks',
+  resources: 'Resources',
+};
+
+function matchesErrorPrefix(key: string, prefix: string): boolean {
+  return key === prefix || key.startsWith(`${prefix}.`);
+}
+
+function errorKeyBelongsToTab(key: string, tab: DevotionDraftEditTab): boolean {
+  if (tab === 'blocks') {
+    return matchesErrorPrefix(key, 'bundle.blocks');
+  }
+  if (tab === 'resources') {
+    return matchesErrorPrefix(key, 'bundle.resources');
+  }
+  return (
+    key.startsWith('bundle.') &&
+    !matchesErrorPrefix(key, 'bundle.blocks') &&
+    !matchesErrorPrefix(key, 'bundle.resources')
+  );
+}
+
+export function devotionDraftEditTabHasError(
+  tab: DevotionDraftEditTab,
+  errors: Record<string, string | string[]>,
+): boolean {
+  return Object.keys(errors).some((key) => errorKeyBelongsToTab(key, tab));
+}
+
+export function firstDevotionDraftEditTabWithError(
+  errors: Record<string, string | string[]>,
+): string | null {
+  for (const tab of DEVOTION_DRAFT_EDIT_TAB_ORDER) {
+    if (!devotionDraftEditTabHasError(tab, errors)) continue;
+    return DEVOTION_DRAFT_EDIT_TAB_LABELS[tab];
+  }
+
+  return null;
+}
diff --git a/src/frontend/stories/devotion-draft-edit.story.vue b/src/frontend/stories/devotion-draft-edit.story.vue
new file mode 100644
index 00000000..48c2fa02
--- /dev/null
+++ b/src/frontend/stories/devotion-draft-edit.story.vue
@@ -0,0 +1,270 @@
+<template>
+  <Story title="Devotion Draft Edit" group="stories">
+    <Variant title="Create" :setup-app="loadCreate">
+      <DevotionDraftEdit
+        :config="sharedProps.config"
+        :user="sharedProps.user"
+        :language="sharedProps.language"
+        :errors="{}"
+        :bookmarks="sharedProps.bookmarks"
+        :draft="sampleDevotionDraft"
+        :bundle="emptyDevotionDraftBundle"
+        :story="devotionDraftEditStory"
+        :available-resources="availableResources"
+        :has-edit-review="false"
+        :last-published="''"
+        :is-create="true"
+        :providers="mockResourceProviders"
+      />
+    </Variant>
+
+    <Variant title="Chapter 2 create" :setup-app="loadChapterTwoCreate">
+      <DevotionDraftEdit
+        :config="sharedProps.config"
+        :user="sharedProps.user"
+        :language="sharedProps.language"
+        :errors="{}"
+        :bookmarks="sharedProps.bookmarks"
+        :draft="devotionDraftEditChapterTwoCreateProps.draft"
+        :bundle="devotionDraftEditChapterTwoCreateProps.bundle"
+        :story="devotionDraftEditDevotionStory"
+        :available-resources="availableResources"
+        :has-edit-review="false"
+        :last-published="''"
+        :is-create="true"
+        :previous-chapter-blocks="devotionDraftEditChapterTwoCreateProps.previousChapterBlocks"
+        :providers="mockResourceProviders"
+      />
+    </Variant>
+
+    <Variant title="Edit" :setup-app="loadEdit">
+      <DevotionDraftEdit
+        :config="sharedProps.config"
+        :user="sharedProps.user"
+        :language="sharedProps.language"
+        :errors="{}"
+        :bookmarks="sharedProps.bookmarks"
+        :draft="sampleDevotionDraft"
+        :bundle="sampleDevotionDraftBundle"
+        :story="devotionDraftEditStory"
+        :available-resources="availableResources"
+        :has-edit-review="false"
+        :last-published="'2025-10-24T06:10:38.483+00:00'"
+        :providers="mockResourceProviders"
+      />
+      <ModelControl :model="sampleDevotionDraftBundle" :is-inspect-only="true" />
+    </Variant>
+
+    <Variant title="Blocks tab" :setup-app="loadBlocksTab">
+      <DevotionDraftEdit
+        :config="sharedProps.config"
+        :user="sharedProps.user"
+        :language="sharedProps.language"
+        :errors="{}"
+        :bookmarks="sharedProps.bookmarks"
+        :draft="sampleDevotionDraft"
+        :bundle="sampleDevotionDraftBundle"
+        :story="devotionDraftEditStory"
+        :available-resources="availableResources"
+        :has-edit-review="false"
+        :last-published="''"
+        :providers="mockResourceProviders"
+      />
+    </Variant>
+
+    <Variant title="Devotion" :setup-app="loadDevotionBlocksTab">
+      <DevotionDraftEdit
+        :config="sharedProps.config"
+        :user="sharedProps.user"
+        :language="sharedProps.language"
+        :errors="{}"
+        :bookmarks="sharedProps.bookmarks"
+        :draft="sampleDevotionDraft"
+        :bundle="sampleDevotionChapterBundle"
+        :story="devotionDraftEditDevotionStory"
+        :available-resources="availableResources"
+        :has-edit-review="false"
+        :last-published="''"
+        :providers="mockResourceProviders"
+      />
+    </Variant>
+
+    <Variant title="Resources tab" :setup-app="loadResourcesTab">
+      <DevotionDraftEdit
+        :config="sharedProps.config"
+        :user="sharedProps.user"
+        :language="sharedProps.language"
+        :errors="{}"
+        :bookmarks="sharedProps.bookmarks"
+        :draft="sampleDevotionDraft"
+        :bundle="sampleDevotionDraftBundle"
+        :story="devotionDraftEditStory"
+        :available-resources="availableResources"
+        :has-edit-review="false"
+        :last-published="''"
+        :providers="mockResourceProviders"
+      />
+    </Variant>
+
+    <Variant title="Validation errors on tabs" :setup-app="loadValidationErrors">
+      <DevotionDraftEdit
+        :config="sharedProps.config"
+        :user="sharedProps.user"
+        :language="sharedProps.language"
+        :errors="devotionDraftEditValidationErrors"
+        :bookmarks="sharedProps.bookmarks"
+        :draft="sampleDevotionDraft"
+        :bundle="sampleDevotionDraftBundle"
+        :story="devotionDraftEditStory"
+        :available-resources="availableResources"
+        :has-edit-review="false"
+        :last-published="''"
+        :providers="mockResourceProviders"
+      />
+    </Variant>
+
+    <Variant title="Edit review: Submit" :setup-app="loadEdit">
+      <DevotionDraftEdit
+        :config="sharedProps.config"
+        :user="editorUser"
+        :language="sharedProps.language"
+        :errors="{}"
+        :bookmarks="sharedProps.bookmarks"
+        :draft="sampleDevotionDraft"
+        :bundle="sampleDevotionDraftBundle"
+        :story="devotionDraftEditStory"
+        :available-resources="availableResources"
+        :has-edit-review="true"
+        :last-published="''"
+        :providers="mockResourceProviders"
+      />
+    </Variant>
+
+    <Variant title="Edit review: Request change" :setup-app="loadEdit">
+      <DevotionDraftEdit
+        :config="sharedProps.config"
+        :user="adminUser"
+        :language="sharedProps.language"
+        :errors="{}"
+        :bookmarks="sharedProps.bookmarks"
+        :draft="sampleDevotionDraftSubmitted"
+        :bundle="sampleDevotionDraftBundle"
+        :story="devotionDraftEditStory"
+        :available-resources="availableResources"
+        :has-edit-review="true"
+        :last-published="'2025-10-24T06:10:38.483+00:00'"
+        :providers="mockResourceProviders"
+      />
+    </Variant>
+
+    <Variant title="Mark Ready" :setup-app="loadEdit">
+      <DevotionDraftEdit
+        :config="sharedProps.config"
+        :user="adminUser"
+        :language="sharedProps.language"
+        :errors="{}"
+        :bookmarks="sharedProps.bookmarks"
+        :draft="sampleDevotionDraft"
+        :bundle="sampleDevotionDraftBundle"
+        :story="devotionDraftEditStory"
+        :available-resources="availableResources"
+        :has-edit-review="true"
+        :last-published="''"
+        :providers="mockResourceProviders"
+      />
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import DevotionDraftEdit from './devotion-draft-edit.vue';
+import ModelControl from '../test/model-control.vue';
+import {
+  adminUser,
+  availableResources,
+  devotionDraftEditStory,
+  devotionDraftEditDevotionStory,
+  devotionDraftEditChapterTwoCreateProps,
+  devotionDraftEditValidationErrors,
+  editorUser,
+  emptyDevotionDraftBundle,
+  mockResourceProviders,
+  sampleDevotionDraftBundle,
+  sampleDevotionChapterBundle,
+  sampleDevotionDraft,
+  sampleDevotionDraftSubmitted,
+  sharedProps,
+  miniSidebar,
+} from '../test/mocks';
+import { useSharedStore } from '../store';
+import type { StoryHandler } from '../shared/helpers';
+
+const loadCreate: StoryHandler = (context): void => {
+  miniSidebar(context);
+  const url = new URL(window.location.href);
+  url.searchParams.delete('tab');
+  window.history.replaceState({}, '', url.toString());
+};
+
+const loadChapterTwoCreate: StoryHandler = (context): void => {
+  miniSidebar(context);
+  const url = new URL(window.location.href);
+  url.searchParams.set('tab', 'Blocks');
+  window.history.replaceState({}, '', url.toString());
+};
+
+const loadEdit: StoryHandler = (context): void => {
+  miniSidebar(context);
+  const url = new URL(window.location.href);
+  url.searchParams.delete('tab');
+  window.history.replaceState({}, '', url.toString());
+};
+
+const loadBlocksTab: StoryHandler = (context): void => {
+  miniSidebar(context);
+  const url = new URL(window.location.href);
+  url.searchParams.set('tab', 'Blocks');
+  window.history.replaceState({}, '', url.toString());
+};
+
+const loadDevotionBlocksTab: StoryHandler = (context): void => {
+  miniSidebar(context);
+  const url = new URL(window.location.href);
+  url.searchParams.set('tab', 'Blocks');
+  window.history.replaceState({}, '', url.toString());
+};
+
+const loadResourcesTab: StoryHandler = (context): void => {
+  miniSidebar(context);
+  const url = new URL(window.location.href);
+  url.searchParams.set('tab', 'Resources');
+  window.history.replaceState({}, '', url.toString());
+};
+
+const loadValidationErrors: StoryHandler = (context): void => {
+  miniSidebar(context);
+  useSharedStore().setErrors(devotionDraftEditValidationErrors);
+  const url = new URL(window.location.href);
+  url.searchParams.set('tab', 'Blocks');
+  window.history.replaceState({}, '', url.toString());
+};
+</script>
+
+<docs lang="md">
+# Devotion Draft Edit
+
+Tabbed devotion draft editor with Details, Blocks, and Resources. Includes draft lifecycle actions (delete, submit, publish, request change), 2s autosave, and an explicit Save button. No sidebar meta/preview.
+
+## Variants
+
+- **Create** — empty chapter with Create Chapter action
+- **Chapter 2 create** — empty chapter 2 on Blocks tab with Reuse Previous Structure
+- **Edit** — populated chapter with Publish changes (no edit-review)
+- **Blocks tab** — opens directly on the Blocks tab
+- **Devotion** — Devotion chapter type with sample blocks, opens on the Blocks tab
+- **Resources tab** — opens directly on the Resources tab
+- **Validation errors on tabs** — Blocks tab with inline field errors and tab indicators
+- **Edit review: Submit** — editor with edit-review sees Submit
+- **Edit review: Request change** — admin reviewing a submitted draft
+- **Mark Ready** — admin publish label when never published
+</docs>
diff --git a/src/frontend/stories/devotion-draft-edit.vue b/src/frontend/stories/devotion-draft-edit.vue
new file mode 100644
index 00000000..57ee45ee
--- /dev/null
+++ b/src/frontend/stories/devotion-draft-edit.vue
@@ -0,0 +1,394 @@
+<template>
+  <AppLayout :title="pageTitle" :subtitle="headerSubtitle">
+    <template #actions>
+      <div class="flex flex-col flex-wrap items-start gap-1 md:flex-row md:items-center">
+        <button
+          type="button"
+          class="rounded-xl p-1.5 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600"
+          aria-label="Delete draft"
+          @click="deleteDraft"
+        >
+          <Trash2 class="size-5" aria-hidden="true" />
+        </button>
+        <WorkflowActions
+          :has-edit-review="props.hasEditReview"
+          @publish="publish"
+          @request-change="reject"
+          @submit="submit"
+        />
+        <StudioButton
+          :label="saveButtonLabel"
+          variant="primary"
+          :disabled="isSaving"
+          @click="saveDevotionDraft"
+        />
+      </div>
+    </template>
+    <template #controls>
+      <TabNavigation
+        :tabs="devotionDraftEditTabs"
+        :icons="devotionDraftEditTabIcons"
+        :current-tab="currentDevotionDraftTab"
+        @change="onDevotionDraftTabChange"
+      />
+    </template>
+    <template #main>
+      <div class="relative">
+        <form :dir="shared.isRtl ? 'rtl' : 'ltr'">
+          <DevotionDraftEditDetails
+            v-if="currentDevotionDraftTab === 'Details'"
+            :chapter-type="props.story.chapterType"
+          />
+          <div v-if="currentDevotionDraftTab === 'Blocks'" dir="ltr">
+            <DevotionDraftEditBlocks
+              v-model:blocks="blocks"
+              :previous-chapter-blocks="props.previousChapterBlocks ?? []"
+              :video-collection-id="props.config.videoCollectionId"
+              :chapter-type="props.story.chapterType"
+            />
+          </div>
+          <div v-if="currentDevotionDraftTab === 'Resources'" dir="ltr">
+            <StoryEditResources
+              v-model:resources="attachedResources"
+              :available-resources="availableResources"
+              @create="createResource"
+            />
+          </div>
+        </form>
+      </div>
+    </template>
+  </AppLayout>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { storeToRefs } from 'pinia';
+import { router } from '@inertiajs/vue3';
+import type { Errors } from '@inertiajs/core';
+import { BookOpen, FolderClosed, Blocks, Trash2 } from '@lucide/vue';
+
+import type {
+  DevotionDraftEditProps,
+  DraftEditProps,
+  NavigationPaneTab,
+  ResourceItem,
+  SharedPageProps,
+  ChapterBlock,
+} from '../../types';
+import { ResponseStatus } from '../../types';
+import { useSharedStore, useWidgetsStore, useModelStore, useDraftsStore } from '../store';
+import AppLayout from '../shared/app-layout.vue';
+import StudioButton from '../shared/studio-button.vue';
+import TabNavigation from '../shared/tab-navigation.vue';
+import DevotionDraftEditDetails from './components/devotion-draft-edit-details.vue';
+import DevotionDraftEditBlocks from './components/devotion-draft-edit-blocks.vue';
+import StoryEditResources from './components/story-edit-resources.vue';
+import WorkflowActions from './components/workflow-actions.vue';
+import { resourceIds } from './components/resource-utils';
+import {
+  devotionDraftEditTabHasError,
+  firstDevotionDraftEditTabWithError,
+} from './devotion-draft-edit-tab-errors';
+import { normalizeBlocks } from './components/blocks/block-utils';
+
+const resolveDevotionDraftTab = (
+  value: string | null,
+  tabs: NavigationPaneTab[],
+): string => {
+  if (!value) return 'Details';
+  const match = tabs.find((tab) => tab.label.toLowerCase() === value.toLowerCase());
+  return match?.label ?? 'Details';
+};
+
+const props = defineProps<DevotionDraftEditProps & SharedPageProps>();
+
+const shared = useSharedStore();
+const { errors } = storeToRefs(shared);
+shared.setFromProps(props);
+if (Object.keys(props.errors ?? {}).length === 0) {
+  shared.clearErrors();
+}
+
+const widgets = useWidgetsStore();
+widgets.setProviders(props.providers);
+
+const drafts = useDraftsStore();
+drafts.setFromProps(props as DraftEditProps);
+
+watch(
+  () => props.draft.updatedAt,
+  (updatedAt) => drafts.setUpdatedAt(updatedAt),
+  { immediate: true },
+);
+
+const model = useModelStore();
+model.setModel(props.bundle);
+
+const blocks = ref<ChapterBlock[]>(
+  props.bundle.blocks?.length ? normalizeBlocks([...props.bundle.blocks]) : [],
+);
+const attachedResources = ref<ResourceItem[]>([...(props.bundle.resources ?? [])]);
+const availableResources = props.availableResources ?? [];
+const isSaving = ref(false);
+
+let isSettingErrors = false;
+let autosaveTimeout: ReturnType<typeof setTimeout> | null = null;
+
+watch(
+  blocks,
+  (value) => {
+    model.setField('blocks', value);
+  },
+  { deep: true, immediate: true },
+);
+
+watch(
+  attachedResources,
+  (value) => {
+    model.setField('resources', value);
+  },
+  { deep: true, immediate: true },
+);
+
+const attachResourceId = new URLSearchParams(window.location.search).get(
+  'attachResource',
+);
+if (attachResourceId) {
+  const resource = availableResources.find((item) => item.id === attachResourceId);
+  if (resource && !attachedResources.value.some((item) => item.id === attachResourceId)) {
+    attachedResources.value = [...attachedResources.value, resource];
+  }
+}
+
+const defaultTitle = computed(() => `New ${props.story.chapterType}`);
+const title = ref(props.bundle.title);
+
+const pageTitle = computed(() =>
+  props.isCreate ? 'Add Chapter' : `Edit ${props.story.chapterType ?? 'Chapter'}`,
+);
+
+const headerSubtitle = computed(() => {
+  if (props.isCreate) return 'Create a new chapter';
+  return title.value?.trim() || `Edit ${props.story.chapterType ?? 'Chapter'}`;
+});
+
+const saveButtonLabel = computed(() =>
+  props.isCreate ? 'Create Chapter' : 'Save Changes',
+);
+
+const devotionDraftEditTabs = computed((): NavigationPaneTab[] => [
+  {
+    label: 'Details',
+    hasError: devotionDraftEditTabHasError('details', errors.value),
+  },
+  {
+    label: 'Blocks',
+    hasError: devotionDraftEditTabHasError('blocks', errors.value),
+  },
+  {
+    label: 'Resources',
+    hasError: devotionDraftEditTabHasError('resources', errors.value),
+  },
+]);
+
+const devotionDraftEditTabIcons = computed(() => ({
+  Details: BookOpen,
+  Blocks: Blocks,
+  Resources: FolderClosed,
+}));
+
+const initialTabs: NavigationPaneTab[] = [
+  { label: 'Details' },
+  { label: 'Blocks' },
+  { label: 'Resources' },
+];
+
+const currentDevotionDraftTab = ref(
+  resolveDevotionDraftTab(
+    new URLSearchParams(window.location.search).get('tab'),
+    initialTabs,
+  ),
+);
+
+const onDevotionDraftTabChange = (tab: string) => {
+  currentDevotionDraftTab.value = tab;
+};
+
+const focusFirstErroredTab = () => {
+  const tab = firstDevotionDraftEditTabWithError(errors.value);
+  if (tab) {
+    currentDevotionDraftTab.value = tab;
+  }
+};
+
+const validationFailureMessage = (validationErrors: Record<string, string | string[]>) =>
+  Object.keys(validationErrors).length > 0
+    ? 'Some required fields are missing'
+    : 'Something went wrong. Please try again.';
+
+const getBundle = () => ({
+  number: model.getField('number', ''),
+  title: model.getField('title', ''),
+  description: model.getField('description', ''),
+  coverImage: model.getField('coverImage', ''),
+  devotionAudio: model.getField('devotionAudio', { url: null, length: null }),
+  blocks: model.getField('blocks', []),
+  resources: resourceIds(attachedResources.value),
+});
+
+const getPayload = () => ({
+  feedback: '',
+  bundle: getBundle(),
+});
+
+const cancelAutosave = () => {
+  if (autosaveTimeout !== null) {
+    clearTimeout(autosaveTimeout);
+    autosaveTimeout = null;
+  }
+};
+
+const onSaveSuccess = (message?: string) => {
+  widgets.setIsDirty(false);
+  if (!message) return;
+  shared.addMessage(ResponseStatus.Confirmation, message);
+};
+
+const onSaveError = (validationErrors: Errors, message: string) => {
+  widgets.setIsDirty(false);
+  isSettingErrors = true;
+  shared.setErrors(validationErrors);
+  focusFirstErroredTab();
+  shared.addMessage(ResponseStatus.Failure, message);
+};
+
+const postSave = (options?: { message?: string; focusErrors?: boolean }) => {
+  router.post(
+    `/${shared.locale}/story/${props.story.id}/draft/${props.draft.id}/save`,
+    getPayload(),
+    {
+      preserveScroll: true,
+      onSuccess: () => {
+        onSaveSuccess(options?.message);
+        if (props.user.role === 'admin') return;
+        drafts.setStatus('started');
+      },
+      onError: (validationErrors) => {
+        widgets.setIsDirty(false);
+        isSettingErrors = true;
+        shared.setErrors(validationErrors);
+        if (options?.focusErrors) {
+          focusFirstErroredTab();
+        }
+        shared.addMessage(
+          ResponseStatus.Failure,
+          options?.focusErrors
+            ? validationFailureMessage(validationErrors)
+            : `${props.story.chapterType} not saved`,
+        );
+      },
+      onFinish: () => {
+        isSaving.value = false;
+      },
+    },
+  );
+};
+
+const scheduleAutosave = () => {
+  cancelAutosave();
+  autosaveTimeout = setTimeout(() => {
+    autosaveTimeout = null;
+    postSave();
+  }, 2000);
+};
+
+const saveDevotionDraft = () => {
+  cancelAutosave();
+  shared.clearErrors();
+  isSaving.value = true;
+  postSave({
+    message: props.isCreate
+      ? 'Chapter created successfully'
+      : 'Chapter saved successfully',
+    focusErrors: true,
+  });
+};
+
+const deleteDraft = () => {
+  cancelAutosave();
+  router.delete(`/${shared.locale}/story/${props.story.id}/draft/${props.draft.id}`, {
+    onSuccess: () => onSaveSuccess('Draft successfully deleted'),
+    onError: (e) => onSaveError(e, 'Error deleting draft'),
+  });
+};
+
+const submit = () => {
+  cancelAutosave();
+  router.post(
+    `/${shared.locale}/story/${props.story.id}/draft/${props.draft.id}/submit`,
+    getPayload(),
+    {
+      onSuccess: () => onSaveSuccess(`${props.story.chapterType} submitted for review`),
+      onError: (e) =>
+        onSaveError(e, 'Draft not submitted. Please review and correct any errors.'),
+    },
+  );
+};
+
+const publish = () => {
+  cancelAutosave();
+  widgets.setIsDirty(true);
+  router.post(
+    `/${shared.locale}/story/${props.story.id}/draft/${props.draft.id}/publish`,
+    getPayload(),
+    {
+      onSuccess: () => onSaveSuccess(`${props.story.chapterType} published successfully`),
+      onError: (e) =>
+        onSaveError(
+          e,
+          `${props.story.chapterType} not published. Please review and correct any errors.`,
+        ),
+    },
+  );
+};
+
+const reject = () => {
+  cancelAutosave();
+  router.post(
+    `/${shared.locale}/story/${props.story.id}/draft/${props.draft.id}/reject`,
+    getPayload(),
+    {
+      onSuccess: () => onSaveSuccess('Draft sent back for fixing'),
+      onError: (e) => onSaveError(e, 'Error sending draft back'),
+    },
+  );
+};
+
+const createResource = () => {
+  const params = new URLSearchParams(window.location.search);
+  params.set('tab', 'Resources');
+  const returnTo = `${window.location.pathname}?${params.toString()}`;
+  const encodedReturnTo = encodeURIComponent(returnTo);
+  router.visit(`/${shared.locale}/resource/create?returnTo=${encodedReturnTo}`);
+};
+
+onMounted(() => {
+  if (Object.keys(props.errors ?? {}).length > 0) {
+    focusFirstErroredTab();
+  }
+
+  model.$subscribe(() => {
+    if (isSettingErrors) {
+      isSettingErrors = false;
+      return;
+    }
+    widgets.setIsDirty(true);
+    scheduleAutosave();
+    title.value = model.getField('title', defaultTitle.value);
+  });
+});
+
+onUnmounted(() => {
+  cancelAutosave();
+});
+</script>
diff --git a/src/frontend/stories/story-edit-tab-errors.ts b/src/frontend/stories/story-edit-tab-errors.ts
index 282ce3b0..eb6a90bd 100644
--- a/src/frontend/stories/story-edit-tab-errors.ts
+++ b/src/frontend/stories/story-edit-tab-errors.ts
@@ -2,12 +2,35 @@ export type StoryEditTab = 'details' | 'sections' | 'resources';
 
 const STORY_EDIT_TAB_ORDER: StoryEditTab[] = ['details', 'sections', 'resources'];
 
-const STORY_EDIT_TAB_LABELS: Record<StoryEditTab, string | ((sectionTabLabel: string) => string)> = {
+const STORY_EDIT_TAB_LABELS: Record<
+  StoryEditTab,
+  string | ((sectionTabLabel: string) => string)
+> = {
   details: 'Details',
   sections: (sectionTabLabel) => sectionTabLabel,
   resources: 'Resources',
 };
 
+const STORY_DETAILS_ERROR_PREFIXES = [
+  'bundle.title',
+  'bundle.coverImage',
+  'bundle.description',
+  'bundle.chapterLimit',
+  'bundle.tags',
+  'bundle.storyType',
+  'bundle.chapterType',
+  'bundle.sectionType',
+  'bundle.visibility',
+  'bundle.template',
+  'bundle.isPublished',
+] as const;
+
+function isStoryDetailsError(key: string): boolean {
+  return STORY_DETAILS_ERROR_PREFIXES.some(
+    (prefix) => key === prefix || key.startsWith(`${prefix}.`),
+  );
+}
+
 function errorKeyBelongsToTab(key: string, tab: StoryEditTab): boolean {
   if (tab === 'sections') {
     return key.startsWith('bundle.sections');
@@ -15,11 +38,7 @@ function errorKeyBelongsToTab(key: string, tab: StoryEditTab): boolean {
   if (tab === 'resources') {
     return key.startsWith('bundle.resources');
   }
-  return (
-    key.startsWith('bundle.') &&
-    !key.startsWith('bundle.sections') &&
-    !key.startsWith('bundle.resources')
-  );
+  return isStoryDetailsError(key);
 }
 
 export function storyEditTabHasError(
diff --git a/src/frontend/stories/story-edit.story.vue b/src/frontend/stories/story-edit.story.vue
index 8d7dcb6f..985b17c2 100644
--- a/src/frontend/stories/story-edit.story.vue
+++ b/src/frontend/stories/story-edit.story.vue
@@ -429,6 +429,7 @@ Saving posts attached resource IDs to the story localisation.
 - **Delete and save** — empty story, published; shows Delete (`red`) and Save Changes (`secondary`)
 - **Delete and save draft** — empty story, unpublished; shows Delete (`red`) and Save Changes (`secondary`)
 - **Without sections** — English source locale with no sections (Sections tab disabled in UI)
+- **Resources tab** — opens directly on the Resources tab
 - **Validation errors on tabs** — failed publish validation; Details tab shows error indicators and inline field messages
 - **Translation locale** — Spanish edit with English source column; source tags shown in read-only column only on Details tab
 - **Arabic translation locale** — Arabic edit on the left, English source on the right; RTL text in the translation column
diff --git a/src/frontend/test/mocks.ts b/src/frontend/test/mocks.ts
index 4b0273f0..c1817a64 100644
--- a/src/frontend/test/mocks.ts
+++ b/src/frontend/test/mocks.ts
@@ -1,4 +1,6 @@
 import type {
+  DevotionDraftEditBundle,
+  DevotionDraftEditProps,
   FieldSpec,
   LanguageSpecification,
   LanguageTableItem,
@@ -7,6 +9,7 @@ import type {
   ResourceEditProps,
   ResourceIndexItem,
   Providers,
+  ChapterBlock,
   StorySpec,
   InvitationItem,
   UiConfig,
@@ -14,6 +17,12 @@ import type {
 } from '../../types.ts';
 import { StoryHandler } from '../shared/helpers.js';
 import { useSharedStore } from '../store/shared.js';
+import {
+  createEmptyContentBlock,
+  createEmptyScriptureBlock,
+  createEmptyTitleBlock,
+  createContentItem,
+} from '../stories/components/blocks/block-utils';
 
 interface Address {
   street: string;
@@ -4527,6 +4536,80 @@ export const sampleAttachedResources: ResourceItem[] = availableResources.filter
   (resource) => attachedStoryResourceIds.includes(resource.id),
 );
 
+export const sampleMixedChapterBlocks: ChapterBlock[] = [
+  {
+    ...createEmptyTitleBlock(),
+    blockName: 'Session Title',
+    title: 'The Gospel of John',
+    subtitle: 'An introduction to the fourth gospel',
+    coverImage:
+      'https://res.cloudinary.com/journeys/image/upload/v1756121793/mountain-placeholder_yuflkz.jpg',
+  },
+  {
+    ...createEmptyContentBlock(),
+    blockName: 'Introduction',
+    displayName: 'Session Introduction',
+    blockRole: 'introduction',
+    style: 'secondary',
+    content:
+      'Welcome to this session on the Gospel of John. We will explore how John presents Jesus as the Word made flesh.',
+  },
+  {
+    ...createEmptyScriptureBlock(),
+    blockName: 'Opening Passage',
+    displayName: 'Opening Scripture',
+    scripture: {
+      reference: 'John 1:1-3',
+      verse:
+        'In the beginning was the Word, and the Word was with God, and the Word was God. He was in the beginning with God. All things were made through him, and without him was not any thing made that was made.',
+    },
+  },
+  {
+    ...createEmptyTitleBlock(),
+    blockName: 'Part One: The Word',
+    title: 'The Word Became Flesh',
+    subtitle: 'Session 1 of 12',
+  },
+  {
+    ...createEmptyContentBlock(),
+    blockName: 'Further Reading',
+    displayName: 'External Resource',
+    blockRole: 'summary',
+    content: 'https://example.com/john-overview',
+  },
+  {
+    ...createEmptyScriptureBlock(),
+    blockName: 'Key Verse',
+    displayName: 'Key Verse',
+    scripture: {
+      reference: 'John 3:16',
+      verse:
+        'For God so loved the world, that he gave his only Son, that whoever believes in him should not perish but have eternal life.',
+    },
+    leadersNotes:
+      'Pause here and invite the group to reflect on the scope of "the world" in this verse.',
+    showLeadersNotes: true,
+  },
+  {
+    ...createEmptyContentBlock(),
+    blockName: 'Summary',
+    displayName: 'Session Summary',
+    blockRole: 'summary',
+    style: 'primary',
+    content:
+      '**Key takeaways:** Jesus is the eternal Word; belief in him brings eternal life.',
+    visibility: { presenter: true, personal: false, inNavigation: true, hidden: false },
+  },
+  {
+    ...createEmptyContentBlock(),
+    blockName: 'Session Video',
+    displayName: 'Watch Session',
+    blockRole: 'introduction',
+    content: '',
+    items: [createContentItem('video')],
+  },
+];
+
 export const mockResourceProviders: Providers = {
   s3: {
     accessKeyId: '',
@@ -4542,7 +4625,7 @@ export const mockResourceProviders: Providers = {
     cloudName: 'almassira',
     defaultPreset: 'session_thumbnail',
   },
-  scripture: { bibleApiKey: 'tmp' },
+  scripture: { bibleApiKey: import.meta.env.VITE_BIBLE_API_KEY ?? '' },
   bunny: {
     accessKey: 'redacted',
     libraryId: '2ef0214d-b18',
@@ -4652,3 +4735,119 @@ export const mockResourceEditErrors: Record<string, string[]> = {
   'bundle.title': ['A resource must have a title'],
   'bundle.url': ['URL resources must have a valid URL'],
 };
+
+export const sampleDevotionDraft = {
+  id: 42,
+  number: 3,
+  status: 'started',
+  updatedAt: '2025-10-24T06:10:38.483+00:00',
+  createdAt: '2025-10-24T06:10:38.482+00:00',
+};
+
+export const sampleDevotionDraftSubmitted = {
+  ...sampleDevotionDraft,
+  status: 'submitted',
+};
+
+export const emptyDevotionDraftBundle: DevotionDraftEditBundle = {
+  number: '',
+  title: '',
+  description: '',
+  coverImage: '',
+  devotionAudio: { url: null, length: null },
+  blocks: [],
+  resources: [],
+};
+
+export const sampleDevotionDraftBundle: DevotionDraftEditBundle = {
+  number: '01',
+  title: 'Is there more to life than this?',
+  description: 'An introduction to the Christian faith.',
+  coverImage:
+    'https://res.cloudinary.com/journeys/image/upload/v1756121793/mountain-placeholder_yuflkz.jpg',
+  devotionAudio: { url: null, length: null },
+  blocks: sampleMixedChapterBlocks,
+  resources: sampleAttachedResources.slice(0, 2),
+};
+
+export const devotionDraftEditStory: StorySpec = {
+  ...story,
+  template: 'devotion',
+  chapterType: 'Day',
+};
+
+export const devotionDraftEditDevotionStory: StorySpec = {
+  ...story,
+  chapterType: 'Devotion',
+};
+
+export const sampleDevotionChapterBundle: DevotionDraftEditBundle = {
+  ...sampleDevotionDraftBundle,
+  number: '01',
+  title: 'Morning Devotion',
+  description: "A short daily devotion on God's love.",
+  blocks: [
+    {
+      ...createEmptyContentBlock(),
+      blockName: 'Opening',
+      displayName: 'Opening Devotion',
+      blockRole: 'introduction',
+      content: "Welcome to today's devotion.",
+    },
+    {
+      ...createEmptyContentBlock(),
+      blockName: 'Passage',
+      displayName: 'Scripture Reading',
+      blockRole: 'scripture',
+      content: '',
+      items: [createContentItem('scripture')],
+    },
+  ],
+};
+
+export const samplePreviousDevotionChapterBlocks: ChapterBlock[] =
+  sampleDevotionChapterBundle.blocks;
+
+export const devotionDraftEditProps: Omit<DevotionDraftEditProps, 'providers'> & {
+  providers: Providers;
+} = {
+  draft: sampleDevotionDraft,
+  bundle: sampleDevotionDraftBundle,
+  story: devotionDraftEditStory,
+  availableResources,
+  providers: mockResourceProviders,
+  hasEditReview: false,
+  lastPublished: '',
+};
+
+export const devotionDraftEditCreateProps: Omit<DevotionDraftEditProps, 'providers'> & {
+  providers: Providers;
+} = {
+  ...devotionDraftEditProps,
+  bundle: emptyDevotionDraftBundle,
+  isCreate: true,
+};
+
+export const devotionDraftEditChapterTwoCreateProps: Omit<DevotionDraftEditProps, 'providers'> & {
+  providers: Providers;
+} = {
+  ...devotionDraftEditCreateProps,
+  draft: {
+    ...sampleDevotionDraft,
+    number: 2,
+  },
+  bundle: {
+    ...emptyDevotionDraftBundle,
+    number: '02',
+  },
+  previousChapterBlocks: samplePreviousDevotionChapterBlocks,
+};
+
+export const devotionDraftEditValidationErrors: Record<string, string[]> = {
+  'bundle.title': ['The title field must have at least 1 character'],
+  'bundle.blocks.0.blockName': ['Every block must have a name'],
+  'bundle.blocks.0': [
+    'A content block must have text or at least one media or scripture item',
+  ],
+  'bundle.resources.0': ['Invalid resource'],
+};
diff --git a/src/shared/block_structure.ts b/src/shared/block_structure.ts
new file mode 100644
index 00000000..f9709ed1
--- /dev/null
+++ b/src/shared/block_structure.ts
@@ -0,0 +1,75 @@
+import type {
+  ChapterBlock,
+  ChapterContentBlock,
+  ChapterContentItem,
+  ChapterScriptureBlock,
+  ChapterTitleBlock,
+} from '../types.js';
+
+const createBlockId = (): string => crypto.randomUUID();
+
+const blockKind = (block: ChapterBlock): ChapterBlock['kind'] => block.kind ?? 'content';
+
+const cloneContentItemStructure = (item: ChapterContentItem): ChapterContentItem => {
+  const id = createBlockId();
+
+  if (item.kind === 'image') {
+    return { id, kind: 'image', imageUrl: '' };
+  }
+
+  if (item.kind === 'video') {
+    return { id, kind: 'video', video: { url: null } };
+  }
+
+  return { id, kind: 'scripture', scripture: { reference: '', verse: '' } };
+};
+
+const cloneBlockStructure = (block: ChapterBlock): ChapterBlock => {
+  const visibility = { ...block.visibility };
+  const kind = blockKind(block);
+
+  if (kind === 'title') {
+    const titleBlock = block as ChapterTitleBlock;
+    return {
+      id: createBlockId(),
+      kind: 'title',
+      blockName: titleBlock.blockName,
+      title: '',
+      subtitle: '',
+      coverImage: '',
+      visibility,
+    };
+  }
+
+  if (kind === 'scripture') {
+    const scriptureBlock = block as ChapterScriptureBlock;
+    return {
+      id: createBlockId(),
+      kind: 'scripture',
+      blockName: scriptureBlock.blockName,
+      displayName: scriptureBlock.displayName,
+      scripture: { reference: '', verse: '' },
+      visibility,
+      leadersNotes: '',
+      showLeadersNotes: false,
+    };
+  }
+
+  const contentBlock = block as ChapterContentBlock;
+  return {
+    id: createBlockId(),
+    kind: 'content',
+    blockName: contentBlock.blockName,
+    displayName: contentBlock.displayName,
+    blockRole: contentBlock.blockRole,
+    style: contentBlock.style,
+    content: '',
+    items: (contentBlock.items ?? []).map(cloneContentItemStructure),
+    visibility,
+    leadersNotes: '',
+    showLeadersNotes: false,
+  };
+};
+
+export const cloneBlocksStructure = (blocks: ChapterBlock[]): ChapterBlock[] =>
+  blocks.map(cloneBlockStructure);
diff --git a/src/shared/devotion_draft.ts b/src/shared/devotion_draft.ts
new file mode 100644
index 00000000..eb784723
--- /dev/null
+++ b/src/shared/devotion_draft.ts
@@ -0,0 +1,67 @@
+import type { ChapterBlock, DevotionDraftBundle } from '../types.js';
+
+const paddedDraftNumber = (number: number): string => String(number).padStart(2, '0');
+
+export const createDevotionDraftBundle = (number: number): DevotionDraftBundle => ({
+  number: paddedDraftNumber(number),
+  title: '',
+  description: '',
+  coverImage: '',
+  devotionAudio: { url: null, length: null },
+  blocks: [],
+  resources: [],
+});
+
+const parsedBundle = (value: unknown): Record<string, unknown> => {
+  if (typeof value === 'string') {
+    try {
+      const parsed = JSON.parse(value) as unknown;
+      return parsed && typeof parsed === 'object' && !Array.isArray(parsed)
+        ? (parsed as Record<string, unknown>)
+        : {};
+    } catch {
+      return {};
+    }
+  }
+
+  return value && typeof value === 'object' && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : {};
+};
+
+const stringValue = (value: unknown, fallback = ''): string =>
+  typeof value === 'string' ? value : fallback;
+
+const normalizedAudio = (
+  value: unknown,
+): DevotionDraftBundle['devotionAudio'] => {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) {
+    return { url: null, length: null };
+  }
+
+  const audio = value as Record<string, unknown>;
+  return {
+    url: typeof audio.url === 'string' ? audio.url : null,
+    length: typeof audio.length === 'number' ? audio.length : null,
+  };
+};
+
+export const normalizeDevotionDraftBundle = (
+  value: unknown,
+  draftNumber: number,
+): DevotionDraftBundle => {
+  const bundle = parsedBundle(value);
+  const fallback = createDevotionDraftBundle(draftNumber);
+
+  return {
+    number: stringValue(bundle.number).trim() || fallback.number,
+    title: stringValue(bundle.title),
+    description: stringValue(bundle.description),
+    coverImage: stringValue(bundle.coverImage),
+    devotionAudio: normalizedAudio(bundle.devotionAudio),
+    blocks: Array.isArray(bundle.blocks) ? (bundle.blocks as ChapterBlock[]) : [],
+    resources: Array.isArray(bundle.resources)
+      ? bundle.resources.filter((id): id is string => typeof id === 'string')
+      : [],
+  };
+};
diff --git a/src/shared/preview_bundle.ts b/src/shared/preview_bundle.ts
new file mode 100644
index 00000000..61051598
--- /dev/null
+++ b/src/shared/preview_bundle.ts
@@ -0,0 +1,35 @@
+import type { PreviewBundle } from '../types.js';
+import { normalizeDevotionDraftBundle } from './devotion_draft.js';
+import { isDevotionTemplate } from './story_helpers.js';
+
+const parseBundle = (value: unknown): Record<string, unknown> => {
+  if (typeof value === 'string') {
+    try {
+      const parsed = JSON.parse(value) as unknown;
+      return parsed && typeof parsed === 'object' && !Array.isArray(parsed)
+        ? (parsed as Record<string, unknown>)
+        : {};
+    } catch {
+      return {};
+    }
+  }
+
+  return value && typeof value === 'object' && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : {};
+};
+
+export function resolvePreviewBundle(options: {
+  chapter: { bundle: unknown; number: number };
+  draft?: { bundle: unknown; number: number } | null;
+  template?: string;
+}): PreviewBundle {
+  const source = options.draft ?? options.chapter;
+  const { number } = source;
+
+  if (isDevotionTemplate(options.template)) {
+    return normalizeDevotionDraftBundle(source.bundle, number);
+  }
+
+  return parseBundle(source.bundle);
+}
diff --git a/src/shared/previous_chapter_blocks.ts b/src/shared/previous_chapter_blocks.ts
new file mode 100644
index 00000000..9ebe9e13
--- /dev/null
+++ b/src/shared/previous_chapter_blocks.ts
@@ -0,0 +1,27 @@
+import type { ChapterBlock } from '../types.js';
+import { normalizeDevotionDraftBundle } from './devotion_draft.js';
+
+export interface StoryChapterSpecifier {
+  apiVersion: number;
+  locale: string;
+  storyId: number;
+  number: number;
+}
+
+export const getPreviousDevotionChapterBlocks = async (
+  specifier: StoryChapterSpecifier,
+  loadBundle: (spec: StoryChapterSpecifier) => Promise<unknown | null>,
+): Promise<ChapterBlock[]> => {
+  if (specifier.number <= 1) {
+    return [];
+  }
+
+  const previousNumber = specifier.number - 1;
+  const bundle = await loadBundle({ ...specifier, number: previousNumber });
+
+  if (bundle === null || bundle === undefined) {
+    return [];
+  }
+
+  return normalizeDevotionDraftBundle(bundle, previousNumber).blocks;
+};
diff --git a/src/shared/story_helpers.ts b/src/shared/story_helpers.ts
index 320b7e14..47c381fa 100644
--- a/src/shared/story_helpers.ts
+++ b/src/shared/story_helpers.ts
@@ -6,6 +6,11 @@ export interface StoryPublishMetadata {
   visibility: string;
 }
 
+export const DEVOTION_TEMPLATE_ID = 'devotion';
+
+export const isDevotionTemplate = (template: string | null | undefined): boolean =>
+  template === DEVOTION_TEMPLATE_ID;
+
 const isBlank = (value: string | null | undefined): boolean => !value?.trim();
 
 export const storyTypeBlockedMessages = (
diff --git a/src/types.ts b/src/types.ts
index 23006fd8..c131d162 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -236,9 +236,65 @@ export interface StorySection {
   description?: string;
 }
 
+export interface ChapterBlockVisibility {
+  presenter: boolean;
+  personal: boolean;
+  inNavigation: boolean;
+  hidden: boolean;
+}
+
+export type ChapterBlockKind = 'content' | 'title' | 'scripture';
+
+interface ChapterBlockBase {
+  id: string;
+  kind: ChapterBlockKind;
+  blockName: string;
+  visibility: ChapterBlockVisibility;
+}
+
+export type ChapterContentItemKind = 'image' | 'video' | 'scripture';
+
+export interface ChapterContentItem {
+  id: string;
+  kind: ChapterContentItemKind;
+  imageUrl?: string;
+  video?: { url: string | null };
+  scripture?: Scripture;
+}
+
+export interface ChapterContentBlock extends ChapterBlockBase {
+  kind: 'content';
+  displayName: string;
+  blockRole: string;
+  style: string;
+  content: string;
+  items: ChapterContentItem[];
+  leadersNotes: string;
+  showLeadersNotes: boolean;
+}
+
+export interface ChapterTitleBlock extends ChapterBlockBase {
+  kind: 'title';
+  title: string;
+  subtitle: string;
+  coverImage?: string;
+}
+
+export interface ChapterScriptureBlock extends ChapterBlockBase {
+  kind: 'scripture';
+  displayName: string;
+  scripture: Scripture;
+  leadersNotes: string;
+  showLeadersNotes: boolean;
+}
+
+export type ChapterBlock =
+  ChapterContentBlock | ChapterTitleBlock | ChapterScriptureBlock;
+
 export interface StorySpec {
   id: number;
   name: string;
+  template?: string;
   coverImage: string;
   chapterLimit: number;
   chapterType: string;
@@ -438,6 +494,38 @@ export interface DraftEditProps {
   hasEditReview: boolean;
 }
 
+export interface DevotionDraftBundle {
+  number: string;
+  title: string;
+  description: string;
+  coverImage: string;
+  devotionAudio: {
+    url: string | null;
+    length: number | null;
+  };
+  blocks: ChapterBlock[];
+  resources: string[];
+}
+
+export type PreviewBundle = DevotionDraftBundle | Record<string, unknown>;
+
+export type DevotionDraftEditBundle = Omit<DevotionDraftBundle, 'resources'> & {
+  resources: ResourceItem[];
+};
+
+export interface DevotionDraftEditProps {
+  draft: DraftMeta;
+  bundle: DevotionDraftEditBundle;
+  story: StorySpec;
+  availableResources: ResourceItem[];
+  providers: Providers;
+  hasEditReview: boolean;
+  lastPublished: string;
+  isCreate?: boolean;
+  source?: DevotionDraftBundle;
+  previousChapterBlocks?: ChapterBlock[];
+}
+
 export interface ChapterMeta {
   number: number;
   createdAt: string;
@@ -446,7 +534,7 @@ export interface ChapterMeta {
 
 export interface PreviewProps {
   chapter: ChapterMeta;
-  bundle: any;
+  bundle: PreviewBundle;
   bundleView: string;
   story: StorySpec;
   title: string;
diff --git a/tests/unit/block-field-errors.spec.ts b/tests/unit/block-field-errors.spec.ts
new file mode 100644
index 00000000..4b6ad448
--- /dev/null
+++ b/tests/unit/block-field-errors.spec.ts
@@ -0,0 +1,82 @@
+import { test, expect } from '@playwright/test';
+
+import {
+  blockFieldErrorMessages,
+  blockHasError,
+  blockItemFieldErrorMessages,
+  blockLevelErrorMessages,
+  blocksArrayErrorMessages,
+} from '../../src/frontend/stories/components/blocks/block-field-errors.js';
+
+test.describe('blockFieldErrorMessages', () => {
+  test('reads field-level block errors', () => {
+    const errors = {
+      'bundle.blocks.0.blockName': ['Every block must have a name'],
+      'bundle.blocks.1.title': ['Title is required'],
+    };
+
+    expect(blockFieldErrorMessages(errors, 0, 'blockName')).toEqual([
+      'Every block must have a name',
+    ]);
+    expect(blockFieldErrorMessages(errors, 1, 'title')).toEqual(['Title is required']);
+    expect(blockFieldErrorMessages(errors, 0, 'title')).toEqual([]);
+  });
+});
+
+test.describe('blockItemFieldErrorMessages', () => {
+  test('reads nested item field errors', () => {
+    const errors = {
+      'bundle.blocks.0.items.0.imageUrl': ['Invalid image URL'],
+    };
+
+    expect(blockItemFieldErrorMessages(errors, 0, 0, 'imageUrl')).toEqual([
+      'Invalid image URL',
+    ]);
+    expect(blockItemFieldErrorMessages(errors, 0, 1, 'imageUrl')).toEqual([]);
+  });
+});
+
+test.describe('blockHasError', () => {
+  test('matches block-level and nested keys', () => {
+    const errors = {
+      'bundle.blocks.0': [
+        'A content block must have text or at least one media or scripture item',
+      ],
+      'bundle.blocks.1.displayName': ['Display name is required'],
+    };
+
+    expect(blockHasError(errors, 0)).toBe(true);
+    expect(blockHasError(errors, 1)).toBe(true);
+    expect(blockHasError(errors, 2)).toBe(false);
+  });
+});
+
+test.describe('blockLevelErrorMessages', () => {
+  test('reads exact block-level contentOrItem errors', () => {
+    const errors = {
+      'bundle.blocks.0': [
+        'A content block must have text or at least one media or scripture item',
+      ],
+      'bundle.blocks.0.blockName': ['Every block must have a name'],
+    };
+
+    expect(blockLevelErrorMessages(errors, 0)).toEqual([
+      'A content block must have text or at least one media or scripture item',
+    ]);
+  });
+});
+
+test.describe('blocksArrayErrorMessages', () => {
+  test('reads empty blocks array errors', () => {
+    const errors = {
+      'bundle.blocks': ['The devotion must have at least one block'],
+      'bundle.blocks.minLength': ['The devotion must have at least one block'],
+    };
+
+    expect(blocksArrayErrorMessages(errors)).toEqual([
+      'The devotion must have at least one block',
+      'The devotion must have at least one block',
+    ]);
+    expect(blocksArrayErrorMessages({})).toEqual([]);
+  });
+});
diff --git a/tests/unit/block_structure.spec.ts b/tests/unit/block_structure.spec.ts
new file mode 100644
index 00000000..ffbdc45c
--- /dev/null
+++ b/tests/unit/block_structure.spec.ts
@@ -0,0 +1,121 @@
+import { expect, test } from '@playwright/test';
+
+import { cloneBlocksStructure } from '../../src/shared/block_structure.js';
+import { createContentItem } from '../../src/frontend/stories/components/blocks/block-utils.js';
+
+test.describe('cloneBlocksStructure', () => {
+  test('preserves block order, kinds, labels, roles, styles, and visibility', () => {
+    const source = cloneBlocksStructure([
+      {
+        id: 'title-1',
+        kind: 'title',
+        blockName: 'Heading',
+        title: 'Old Title',
+        subtitle: 'Old Subtitle',
+        coverImage: 'https://example.com/cover.jpg',
+        visibility: {
+          presenter: true,
+          personal: false,
+          inNavigation: true,
+          hidden: false,
+        },
+      },
+      {
+        id: 'content-1',
+        kind: 'content',
+        blockName: 'Opening',
+        displayName: 'Opening Devotion',
+        blockRole: 'introduction',
+        style: 'secondary',
+        content: 'Old content',
+        items: [createContentItem('video')],
+        visibility: {
+          presenter: false,
+          personal: true,
+          inNavigation: false,
+          hidden: false,
+        },
+        leadersNotes: 'Secret notes',
+        showLeadersNotes: true,
+      },
+      {
+        id: 'scripture-1',
+        kind: 'scripture',
+        blockName: 'Passage',
+        displayName: 'Scripture Reading',
+        scripture: { reference: 'John 3:16', verse: 'For God so loved...' },
+        visibility: {
+          presenter: false,
+          personal: false,
+          inNavigation: false,
+          hidden: false,
+        },
+        leadersNotes: 'More notes',
+        showLeadersNotes: true,
+      },
+    ]);
+
+    expect(source).toHaveLength(3);
+    expect(source.map((block) => block.blockName)).toEqual([
+      'Heading',
+      'Opening',
+      'Passage',
+    ]);
+    expect(source.map((block) => block.kind ?? 'content')).toEqual([
+      'title',
+      'content',
+      'scripture',
+    ]);
+
+    const contentBlock = source[1] as Extract<(typeof source)[number], { kind: 'content' }>;
+    expect(contentBlock.displayName).toBe('Opening Devotion');
+    expect(contentBlock.blockRole).toBe('introduction');
+    expect(contentBlock.style).toBe('secondary');
+    expect(contentBlock.visibility).toEqual({
+      presenter: false,
+      personal: true,
+      inNavigation: false,
+      hidden: false,
+    });
+    expect(contentBlock.items).toHaveLength(1);
+    expect(contentBlock.items[0]?.kind).toBe('video');
+  });
+
+  test('clears content fields and assigns fresh ids', () => {
+    const originalIds = ['block-a', 'item-a'];
+    const cloned = cloneBlocksStructure([
+      {
+        id: originalIds[0],
+        kind: 'content',
+        blockName: 'Media',
+        displayName: 'Media Block',
+        blockRole: 'commentary',
+        style: 'primary',
+        content: 'Filled content',
+        items: [
+          {
+            id: originalIds[1],
+            kind: 'image',
+            imageUrl: 'https://example.com/image.jpg',
+          },
+        ],
+        visibility: {
+          presenter: false,
+          personal: false,
+          inNavigation: false,
+          hidden: false,
+        },
+        leadersNotes: 'Notes',
+        showLeadersNotes: true,
+      },
+    ]);
+
+    const block = cloned[0] as Extract<(typeof cloned)[number], { kind: 'content' }>;
+    expect(block.id).not.toBe(originalIds[0]);
+    expect(block.content).toBe('');
+    expect(block.leadersNotes).toBe('');
+    expect(block.showLeadersNotes).toBe(false);
+    expect(block.items[0]?.id).not.toBe(originalIds[1]);
+    expect(block.items[0]?.imageUrl).toBe('');
+  });
+});
diff --git a/tests/unit/devotion-draft-edit-tab-errors.spec.ts b/tests/unit/devotion-draft-edit-tab-errors.spec.ts
new file mode 100644
index 00000000..a6da1d2a
--- /dev/null
+++ b/tests/unit/devotion-draft-edit-tab-errors.spec.ts
@@ -0,0 +1,68 @@
+import { test, expect } from '@playwright/test';
+import {
+  devotionDraftEditTabHasError,
+  firstDevotionDraftEditTabWithError,
+} from '../../src/frontend/stories/devotion-draft-edit-tab-errors.js';
+
+test.describe('devotionDraftEditTabHasError', () => {
+  test('flags Details for bundle.title', () => {
+    const errors = { 'bundle.title': ['Title is required'] };
+
+    expect(devotionDraftEditTabHasError('details', errors)).toBe(true);
+    expect(devotionDraftEditTabHasError('blocks', errors)).toBe(false);
+    expect(devotionDraftEditTabHasError('resources', errors)).toBe(false);
+  });
+
+  test('flags Blocks for bundle.blocks', () => {
+    const errors = { 'bundle.blocks.0.blockName': ['Block name is required'] };
+
+    expect(devotionDraftEditTabHasError('details', errors)).toBe(false);
+    expect(devotionDraftEditTabHasError('blocks', errors)).toBe(true);
+    expect(devotionDraftEditTabHasError('resources', errors)).toBe(false);
+  });
+
+  test('flags Resources for bundle.resources', () => {
+    const errors = { 'bundle.resources.0': ['Invalid resource'] };
+
+    expect(devotionDraftEditTabHasError('details', errors)).toBe(false);
+    expect(devotionDraftEditTabHasError('blocks', errors)).toBe(false);
+    expect(devotionDraftEditTabHasError('resources', errors)).toBe(true);
+  });
+
+  test('does not treat bundle.blocksmith as a Blocks error', () => {
+    const errors = { 'bundle.blocksmith': ['Unrelated'] };
+
+    expect(devotionDraftEditTabHasError('blocks', errors)).toBe(false);
+    expect(devotionDraftEditTabHasError('details', errors)).toBe(true);
+    expect(devotionDraftEditTabHasError('resources', errors)).toBe(false);
+  });
+
+  test('does not treat bundle.resourcesmith as a Resources error', () => {
+    const errors = { 'bundle.resourcesmith': ['Unrelated'] };
+
+    expect(devotionDraftEditTabHasError('resources', errors)).toBe(false);
+    expect(devotionDraftEditTabHasError('details', errors)).toBe(true);
+    expect(devotionDraftEditTabHasError('blocks', errors)).toBe(false);
+  });
+});
+
+test.describe('firstDevotionDraftEditTabWithError', () => {
+  test('returns Details before Blocks when both have errors', () => {
+    const errors = {
+      'bundle.title': ['Title is required'],
+      'bundle.blocks.0.blockName': ['Block name is required'],
+    };
+
+    expect(firstDevotionDraftEditTabWithError(errors)).toBe('Details');
+  });
+
+  test('returns Blocks when only blocks have errors', () => {
+    const errors = { 'bundle.blocks.0.blockName': ['Block name is required'] };
+
+    expect(firstDevotionDraftEditTabWithError(errors)).toBe('Blocks');
+  });
+
+  test('returns null when there are no errors', () => {
+    expect(firstDevotionDraftEditTabWithError({})).toBeNull();
+  });
+});
diff --git a/tests/unit/devotionDraft.spec.ts b/tests/unit/devotionDraft.spec.ts
new file mode 100644
index 00000000..7983231b
--- /dev/null
+++ b/tests/unit/devotionDraft.spec.ts
@@ -0,0 +1,89 @@
+import { expect, test } from '@playwright/test';
+import {
+  createDevotionDraftBundle,
+  normalizeDevotionDraftBundle,
+} from '../../src/shared/devotion_draft.js';
+import { isDevotionTemplate } from '../../src/shared/story_helpers.js';
+import { resourceIds } from '../../src/frontend/stories/components/resource-utils.js';
+
+test.describe('devotion draft helpers', () => {
+  test('matches only the exact devotion template identifier', () => {
+    expect(isDevotionTemplate('devotion')).toBe(true);
+    expect(isDevotionTemplate('Devotion')).toBe(false);
+    expect(isDevotionTemplate('devotion ')).toBe(false);
+    expect(isDevotionTemplate(undefined)).toBe(false);
+  });
+
+  test('creates the canonical empty bundle with a padded draft number', () => {
+    expect(createDevotionDraftBundle(1)).toEqual({
+      number: '01',
+      title: '',
+      description: '',
+      coverImage: '',
+      devotionAudio: { url: null, length: null },
+      blocks: [],
+      resources: [],
+    });
+    expect(createDevotionDraftBundle(12).number).toBe('12');
+  });
+
+  test('normalizes partial and legacy bundles without discarding content', () => {
+    const block = {
+      id: 'block-1',
+      kind: 'title' as const,
+      blockName: 'Heading',
+      title: 'Welcome',
+      subtitle: '',
+      visibility: {
+        presenter: true,
+        personal: false,
+        inNavigation: true,
+        hidden: false,
+      },
+    };
+
+    expect(
+      normalizeDevotionDraftBundle(
+        {
+          title: 'Existing devotion',
+          devotionAudio: '',
+          blocks: [block],
+          resources: ['resource-1', null, 2],
+        },
+        3,
+      ),
+    ).toEqual({
+      number: '03',
+      title: 'Existing devotion',
+      description: '',
+      coverImage: '',
+      devotionAudio: { url: null, length: null },
+      blocks: [block],
+      resources: ['resource-1'],
+    });
+  });
+
+  test('normalizes a JSON string and nullable audio metadata', () => {
+    expect(
+      normalizeDevotionDraftBundle(
+        JSON.stringify({
+          number: '07',
+          devotionAudio: { url: 'https://example.com/audio.mp3', length: 120 },
+        }),
+        1,
+      ),
+    ).toMatchObject({
+      number: '07',
+      devotionAudio: { url: 'https://example.com/audio.mp3', length: 120 },
+    });
+  });
+
+  test('serializes hydrated editor resources back to persisted IDs', () => {
+    expect(
+      resourceIds([
+        { id: 'resource-2' },
+        { id: 'resource-1' },
+      ] as Parameters<typeof resourceIds>[0]),
+    ).toEqual(['resource-2', 'resource-1']);
+  });
+});
diff --git a/tests/unit/devotionDraftValidator.spec.ts b/tests/unit/devotionDraftValidator.spec.ts
new file mode 100644
index 00000000..a783ef9d
--- /dev/null
+++ b/tests/unit/devotionDraftValidator.spec.ts
@@ -0,0 +1,214 @@
+import { expect, test } from '@playwright/test';
+import vine from '@vinejs/vine';
+import { DevotionDraftValidator } from '../../src/backend/validators/devotion_draft.js';
+
+const visibility = {
+  presenter: true,
+  personal: false,
+  inNavigation: true,
+  hidden: false,
+};
+
+const contentBlock = () => ({
+  id: 'content-1',
+  kind: 'content',
+  blockName: 'Introduction',
+  visibility,
+  displayName: 'Welcome',
+  blockRole: 'introduction',
+  style: 'primary',
+  content: 'A short introduction.',
+  items: [],
+  leadersNotes: '',
+  showLeadersNotes: false,
+});
+
+const titleBlock = () => ({
+  id: 'title-1',
+  kind: 'title',
+  blockName: 'Title',
+  visibility,
+  title: 'God is faithful',
+  subtitle: '',
+  coverImage: '',
+});
+
+const scriptureBlock = () => ({
+  id: 'scripture-1',
+  kind: 'scripture',
+  blockName: 'Scripture',
+  visibility,
+  displayName: 'Read the passage',
+  scripture: { reference: 'John 3:16', verse: 'For God so loved the world.' },
+  leadersNotes: '',
+  showLeadersNotes: false,
+});
+
+const validData = () => ({
+  bundle: {
+    number: '01',
+    title: 'Morning devotion',
+    description: '',
+    coverImage: '',
+    devotionAudio: { url: null, length: null },
+    blocks: [contentBlock(), titleBlock(), scriptureBlock()],
+    resources: ['00000000-0000-4000-8000-000000000001'],
+  },
+});
+
+type ValidationError = {
+  messages?: Array<{ message: string; rule: string; field: string }>;
+};
+
+async function validationFields(data: unknown): Promise<string[]> {
+  try {
+    await new DevotionDraftValidator().validate(data);
+    return [];
+  } catch (error) {
+    return ((error as ValidationError).messages ?? []).map((message) => message.field);
+  }
+}
+
+test.describe('DevotionDraftValidator', () => {
+  test.beforeEach(() => {
+    vine.convertEmptyStringsToNull = false;
+  });
+
+  test('accepts valid mixed blocks and optional fields', async () => {
+    const result = await new DevotionDraftValidator().validate(validData());
+
+    expect(result.bundle.blocks).toHaveLength(3);
+    expect(result.bundle.devotionAudio).toEqual({ url: null, length: null });
+  });
+
+  test('accepts a valid bundle when optional fields are omitted', async () => {
+    const data: any = validData();
+    delete data.bundle.description;
+    delete data.bundle.coverImage;
+    delete data.bundle.devotionAudio;
+    delete data.bundle.resources;
+    delete data.bundle.blocks[0].leadersNotes;
+    delete data.bundle.blocks[0].showLeadersNotes;
+    delete data.bundle.blocks[1].subtitle;
+    delete data.bundle.blocks[1].coverImage;
+    delete data.bundle.blocks[2].leadersNotes;
+    delete data.bundle.blocks[2].showLeadersNotes;
+
+    await expect(new DevotionDraftValidator().validate(data)).resolves.toBeDefined();
+  });
+
+  test('accepts content supplied by a valid image, video, or scripture item', async () => {
+    const itemBlocks = [
+      { id: 'image-1', kind: 'image', imageUrl: 'https://example.com/image.jpg' },
+      { id: 'video-1', kind: 'video', video: { url: 'https://example.com/video.mp4' } },
+      {
+        id: 'verse-1',
+        kind: 'scripture',
+        scripture: { reference: 'Psalm 23:1', verse: 'The Lord is my shepherd.' },
+      },
+    ].map((item, index) => ({
+      ...contentBlock(),
+      id: `content-${index}`,
+      content: '',
+      items: [item],
+    }));
+    const data = validData();
+    data.bundle.blocks = itemBlocks;
+
+    await expect(new DevotionDraftValidator().validate(data)).resolves.toBeDefined();
+  });
+
+  test('accepts content text without an items property', async () => {
+    const withoutItems: Partial<ReturnType<typeof contentBlock>> = {
+      ...contentBlock(),
+    };
+    delete withoutItems.items;
+    const data = validData();
+    data.bundle.blocks = [withoutItems] as typeof data.bundle.blocks;
+
+    await expect(new DevotionDraftValidator().validate(data)).resolves.toBeDefined();
+  });
+
+  test('requires number, title, and at least one block', async () => {
+    const data = validData();
+    data.bundle.number = '';
+    data.bundle.title = '';
+    data.bundle.blocks = [];
+
+    expect(await validationFields(data)).toEqual(
+      expect.arrayContaining(['bundle.number', 'bundle.title', 'bundle.blocks']),
+    );
+  });
+
+  test('requires the shared fields on every block', async () => {
+    const data = validData();
+    data.bundle.blocks = [
+      {
+        ...contentBlock(),
+        id: '',
+        blockName: '',
+        visibility: undefined as never,
+      },
+    ];
+
+    expect(await validationFields(data)).toEqual(
+      expect.arrayContaining([
+        'bundle.blocks.0.id',
+        'bundle.blocks.0.blockName',
+        'bundle.blocks.0.visibility',
+      ]),
+    );
+  });
+
+  test('requires complete content, title, and scripture block details', async () => {
+    const data = validData();
+    data.bundle.blocks = [
+      {
+        ...contentBlock(),
+        displayName: '',
+        blockRole: '',
+        style: '',
+        content: '',
+        items: [],
+      },
+      { ...titleBlock(), title: '' },
+      {
+        ...scriptureBlock(),
+        displayName: '',
+        scripture: { reference: '', verse: '' },
+      },
+    ];
+
+    expect(await validationFields(data)).toEqual(
+      expect.arrayContaining([
+        'bundle.blocks.0.displayName',
+        'bundle.blocks.0.blockRole',
+        'bundle.blocks.0.style',
+        'bundle.blocks.0',
+        'bundle.blocks.1.title',
+        'bundle.blocks.2.displayName',
+        'bundle.blocks.2.scripture.reference',
+        'bundle.blocks.2.scripture.verse',
+      ]),
+    );
+  });
+
+  test('rejects invalid resource and media values with nested paths', async () => {
+    const data = validData();
+    data.bundle.resources = ['not-a-resource-id'];
+    data.bundle.blocks = [
+      {
+        ...contentBlock(),
+        content: '',
+        items: [{ id: 'image-1', kind: 'image', imageUrl: 'not-a-url' }],
+      },
+    ];
+
+    expect(await validationFields(data)).toEqual(
+      expect.arrayContaining([
+        'bundle.resources.0',
+        'bundle.blocks.0.items.0.imageUrl',
+      ]),
+    );
+  });
+});
diff --git a/tests/unit/draftService.spec.ts b/tests/unit/draftService.spec.ts
index 49a9710a..d56555ec 100644
--- a/tests/unit/draftService.spec.ts
+++ b/tests/unit/draftService.spec.ts
@@ -122,6 +122,27 @@ test.describe('DraftService.getDraftBundle', () => {
     expect((mockQueryBuilder as any).lastWhereCall).toBeUndefined();
   });
 
+  test('returns the devotion bundle for a source-locale devotion story', async () => {
+    storySpec.template = 'devotion';
+    const draftService = new DraftService(storySpec, mockCms);
+
+    const result = await draftService.getDraftBundle(
+      { apiVersion: 1, locale: 'en', storyId: storySpec.id },
+      4,
+    );
+
+    expect(JSON.parse(result!)).toEqual({
+      number: '04',
+      title: '',
+      description: '',
+      coverImage: '',
+      devotionAudio: { url: null, length: null },
+      blocks: [],
+      resources: [],
+    });
+    expect((mockQueryBuilder as any).lastWhereCall).toBeUndefined();
+  });
+
   test('returns fresh bundle from source chapter for translation', async () => {
     // arrange
     const draftService = new DraftService(storySpec, mockCms);
diff --git a/tests/unit/preview_bundle.spec.ts b/tests/unit/preview_bundle.spec.ts
new file mode 100644
index 00000000..50bb6839
--- /dev/null
+++ b/tests/unit/preview_bundle.spec.ts
@@ -0,0 +1,77 @@
+import { expect, test } from '@playwright/test';
+
+import { resolvePreviewBundle } from '../../src/shared/preview_bundle.js';
+
+const contentBlock = (blockName: string) => ({
+  id: blockName,
+  kind: 'content' as const,
+  blockName,
+  displayName: blockName,
+  blockRole: 'introduction',
+  style: 'primary',
+  content: `Content for ${blockName}`,
+  items: [],
+  visibility: {
+    presenter: false,
+    personal: false,
+    inNavigation: false,
+    hidden: false,
+  },
+  leadersNotes: '',
+  showLeadersNotes: false,
+});
+
+test.describe('resolvePreviewBundle', () => {
+  test('prefers draft block order over published chapter for devotion', () => {
+    const chapterBlocks = [
+      contentBlock('Block-A'),
+      contentBlock('Block-B'),
+      contentBlock('Block-C'),
+    ];
+    const draftBlocks = [
+      contentBlock('Block-C'),
+      contentBlock('Block-A'),
+      contentBlock('Block-B'),
+    ];
+
+    const result = resolvePreviewBundle({
+      chapter: { bundle: { blocks: chapterBlocks }, number: 1 },
+      draft: { bundle: { blocks: draftBlocks }, number: 1 },
+      template: 'devotion',
+    });
+
+    expect(result.blocks).toHaveLength(3);
+    expect(
+      (result.blocks as Array<{ blockName: string }>).map((block) => block.blockName),
+    ).toEqual(['Block-C', 'Block-A', 'Block-B']);
+  });
+
+  test('uses chapter bundle when no draft exists', () => {
+    const chapterBlocks = [
+      contentBlock('Block-A'),
+      contentBlock('Block-B'),
+    ];
+
+    const result = resolvePreviewBundle({
+      chapter: { bundle: { blocks: chapterBlocks }, number: 2 },
+      draft: null,
+      template: 'devotion',
+    });
+
+    expect(
+      (result.blocks as Array<{ blockName: string }>).map((block) => block.blockName),
+    ).toEqual(['Block-A', 'Block-B']);
+  });
+
+  test('returns parsed chapter bundle for non-devotion templates', () => {
+    const chapterBundle = { title: 'Course chapter', screens: [{ screenName: 'Intro' }] };
+
+    const result = resolvePreviewBundle({
+      chapter: { bundle: chapterBundle, number: 1 },
+      draft: { bundle: { title: 'Draft title' }, number: 1 },
+      template: 'course',
+    });
+
+    expect(result.title).toBe('Draft title');
+  });
+});
diff --git a/tests/unit/previous_chapter_blocks.spec.ts b/tests/unit/previous_chapter_blocks.spec.ts
new file mode 100644
index 00000000..d453d3b5
--- /dev/null
+++ b/tests/unit/previous_chapter_blocks.spec.ts
@@ -0,0 +1,66 @@
+import { expect, test } from '@playwright/test';
+
+import { getPreviousDevotionChapterBlocks } from '../../src/shared/previous_chapter_blocks.js';
+
+test.describe('getPreviousDevotionChapterBlocks', () => {
+  test('returns empty array for the first chapter', async () => {
+    let called = false;
+    const loadBundle = async () => {
+      called = true;
+      return null;
+    };
+
+    await expect(
+      getPreviousDevotionChapterBlocks(
+        { apiVersion: 1, locale: 'en', storyId: 1, number: 1 },
+        loadBundle,
+      ),
+    ).resolves.toEqual([]);
+    expect(called).toBe(false);
+  });
+
+  test('loads blocks from the immediately previous chapter', async () => {
+    const loadBundle = async (spec: { number: number }) => {
+      if (spec.number === 2) {
+        return {
+          blocks: [
+            {
+              id: 'block-2',
+              kind: 'content',
+              blockName: 'Second',
+            },
+          ],
+        };
+      }
+
+      return {
+        blocks: [
+          {
+            id: 'block-1',
+            kind: 'content',
+            blockName: 'First',
+            blockRole: 'introduction',
+            style: 'primary',
+            displayName: 'Intro',
+            content: 'Hello',
+            items: [],
+            visibility: {
+              presenter: false,
+              personal: false,
+              inNavigation: false,
+              hidden: false,
+            },
+          },
+        ],
+      };
+    };
+
+    const blocks = await getPreviousDevotionChapterBlocks(
+      { apiVersion: 1, locale: 'en', storyId: 1, number: 2 },
+      loadBundle,
+    );
+
+    expect(blocks).toHaveLength(1);
+    expect(blocks[0]?.blockName).toBe('First');
+  });
+});