diff --git a/src/api/questionTypeDefinitions.api.ts b/src/api/questionTypeDefinitions.api.ts
new file mode 100644
index 0000000..f1970a6
--- /dev/null
+++ b/src/api/questionTypeDefinitions.api.ts
@@ -0,0 +1,303 @@
+import http from "./http"
+import type {
+  DynamicElementDefinition,
+  QuestionComponentCatalog,
+  QuestionTypeDefinition,
+  QuestionTypeDefinitionCreatePayload,
+  QuestionTypeDefinitionUpdatePayload,
+  QuestionTypeDefinitionValidatePayload,
+  ValidateQuestionTypeDefinitionResult,
+} from "../types/questionTypeDefinition.types"
+
+interface ApiEnvelope<T> {
+  message?: string
+  data?: T
+  /** Some routes use PascalCase in JSON */
+  Data?: T
+  success?: boolean
+  status_code?: number
+  error?: string
+}
+
+/**
+ * Reads the inner payload from a typical API envelope, or the raw body.
+ * Supports `data` / `Data` and list bodies where `res.data` is already an array
+ * (e.g. GET /questions/type-definitions → `data: [ { ID, Key, … }, … ]`).
+ */
+export function unwrapApiPayload(res: { data?: unknown }): unknown {
+  const body = res.data
+  if (body === null || body === undefined) return undefined
+  if (Array.isArray(body)) return body
+  if (typeof body !== "object") return body
+  const o = body as Record<string, unknown>
+  if ("data" in o || "Data" in o) {
+    const inner = o.data ?? o.Data
+    return inner
+  }
+  return body
+}
+
+function fromStringArray(arr: unknown): string[] {
+  return Array.isArray(arr)
+    ? arr.filter((k): k is string => typeof k === "string" && k.length > 0)
+    : []
+}
+
+function sortUniqueStrings(values: string[]): string[] {
+  return [...new Set(values)].sort((a, b) => a.localeCompare(b))
+}
+
+const emptyCatalog = (): QuestionComponentCatalog => ({
+  stimulus_component_kinds: [],
+  response_component_kinds: [],
+})
+
+/**
+ * Parse GET /questions/component-catalog body.
+ * Canonical shape: `data.stimulus_component_kinds` + `data.response_component_kinds`.
+ */
+export function parseComponentCatalog(payload: unknown): QuestionComponentCatalog {
+  if (!payload || typeof payload !== "object") return emptyCatalog()
+  const d = payload as Record<string, unknown>
+
+  if (
+    Array.isArray(d.stimulus_component_kinds) ||
+    Array.isArray(d.response_component_kinds)
+  ) {
+    return {
+      stimulus_component_kinds: sortUniqueStrings(fromStringArray(d.stimulus_component_kinds)),
+      response_component_kinds: sortUniqueStrings(fromStringArray(d.response_component_kinds)),
+    }
+  }
+
+  if (d.data !== undefined && d.data !== null && typeof d.data === "object") {
+    const inner = parseComponentCatalog(d.data)
+    if (
+      inner.stimulus_component_kinds.length > 0 ||
+      inner.response_component_kinds.length > 0
+    ) {
+      return inner
+    }
+  }
+
+  const sk = fromStringArray(d.stimulus_kinds)
+  const rk = fromStringArray(d.response_kinds)
+  if (sk.length || rk.length) {
+    return {
+      stimulus_component_kinds: sortUniqueStrings(sk),
+      response_component_kinds: sortUniqueStrings(rk),
+    }
+  }
+
+  const mergedFlat = sortUniqueStrings([
+    ...fromStringArray(d.kinds),
+    ...fromStringArray(d.codes),
+    ...fromStringArray(d.component_kinds),
+  ])
+  if (mergedFlat.length) {
+    return {
+      stimulus_component_kinds: mergedFlat,
+      response_component_kinds: [...mergedFlat],
+    }
+  }
+
+  if (Array.isArray(payload)) {
+    const merged = sortUniqueStrings(fromStringArray(payload))
+    return {
+      stimulus_component_kinds: merged,
+      response_component_kinds: [...merged],
+    }
+  }
+
+  return emptyCatalog()
+}
+
+export async function getQuestionComponentCatalog(): Promise<QuestionComponentCatalog> {
+  const res = await http.get<ApiEnvelope<unknown>>("/questions/component-catalog")
+  const raw = unwrapApiPayload(res) ?? res.data
+  return parseComponentCatalog(raw)
+}
+
+function parseInnerValidFlag(inner: unknown): boolean | undefined {
+  if (inner == null || typeof inner !== "object") return undefined
+  const o = inner as Record<string, unknown>
+  const v = o.valid ?? o.Valid
+  if (typeof v === "boolean") return v
+  if (v === "true" || v === 1) return true
+  if (v === "false" || v === 0) return false
+  return undefined
+}
+
+/**
+ * POST /questions/validate-question-type-definition
+ * Success: 200 with `data.valid` (envelope `success` may still be false).
+ * Invalid: 400 with `message` / `error` on the JSON body (axios throws).
+ */
+export async function validateQuestionTypeDefinition(
+  body: QuestionTypeDefinitionValidatePayload,
+): Promise<ValidateQuestionTypeDefinitionResult> {
+  try {
+    const res = await http.post<ApiEnvelope<unknown>>("/questions/validate-question-type-definition", body)
+    const envelope = res.data as ApiEnvelope<unknown>
+    const inner = unwrapApiPayload(res)
+    const validFlag = parseInnerValidFlag(inner)
+    if (validFlag === true) {
+      return { valid: true, message: envelope?.message }
+    }
+    const envErr =
+      typeof envelope?.error === "string"
+        ? envelope.error
+        : envelope && typeof envelope === "object" && "Error" in envelope
+          ? String((envelope as { Error?: unknown }).Error)
+          : undefined
+    return {
+      valid: false,
+      message: envelope?.message,
+      error:
+        envErr ||
+        (validFlag === false ? "Definition is not valid." : "Validation response did not include a valid flag."),
+    }
+  } catch (e: unknown) {
+    const err = e as { response?: { data?: { message?: string; error?: string } } }
+    const d = err.response?.data
+    return {
+      valid: false,
+      message: d?.message,
+      error: d?.error || d?.message || "Validation request failed",
+    }
+  }
+}
+
+export async function createQuestionTypeDefinition(body: QuestionTypeDefinitionCreatePayload) {
+  return http.post<ApiEnvelope<unknown>>("/questions/type-definitions", body)
+}
+
+function asStr(v: unknown): string {
+  if (v == null || v === undefined) return ""
+  return String(v)
+}
+
+function asStringArray(v: unknown): string[] {
+  if (!Array.isArray(v)) return []
+  return v.filter((x): x is string => typeof x === "string" && x.length > 0)
+}
+
+function normalizeSchemaRows(v: unknown): DynamicElementDefinition[] {
+  if (!Array.isArray(v)) return []
+  return v.map((row) => {
+    if (!row || typeof row !== "object") {
+      return { id: "", kind: "", required: false, label: undefined, config: undefined }
+    }
+    const r = row as Record<string, unknown>
+    const id = asStr(r.id ?? r.Id)
+    const kind = asStr(r.kind ?? r.Kind)
+    const labelRaw = r.label ?? r.Label
+    const config = (r.config ?? r.Config) as Record<string, unknown> | undefined
+    return {
+      id,
+      kind,
+      label: labelRaw != null && labelRaw !== "" ? asStr(labelRaw) : undefined,
+      required: Boolean(r.required ?? r.Required),
+      config: config && typeof config === "object" && !Array.isArray(config) ? config : undefined,
+    }
+  })
+}
+
+/**
+ * Maps GET/POST definition objects from PascalCase (ID, Key, StimulusSchema, …)
+ * or snake_case into {@link QuestionTypeDefinition}.
+ */
+export function normalizeTypeDefinitionFromApi(raw: unknown): QuestionTypeDefinition | null {
+  if (!raw || typeof raw !== "object") return null
+  const o = raw as Record<string, unknown>
+  const id = Number(o.ID ?? o.id)
+  if (!Number.isFinite(id)) return null
+  const statusRaw = asStr(o.Status ?? o.status).toUpperCase()
+  const status = statusRaw === "INACTIVE" ? "INACTIVE" : "ACTIVE"
+  return {
+    id,
+    key: asStr(o.Key ?? o.key),
+    display_name: asStr(o.DisplayName ?? o.display_name),
+    description: (() => {
+      const d = o.Description ?? o.description
+      if (d == null) return null
+      const s = asStr(d)
+      return s === "" ? null : s
+    })(),
+    stimulus_component_kinds: asStringArray(o.StimulusComponentKinds ?? o.stimulus_component_kinds),
+    response_component_kinds: asStringArray(o.ResponseComponentKinds ?? o.response_component_kinds),
+    stimulus_schema: normalizeSchemaRows(o.StimulusSchema ?? o.stimulus_schema),
+    response_schema: normalizeSchemaRows(o.ResponseSchema ?? o.response_schema),
+    status,
+    is_system: Boolean(o.IsSystem ?? o.is_system),
+    created_at: o.CreatedAt != null ? asStr(o.CreatedAt) : o.created_at != null ? asStr(o.created_at) : undefined,
+    updated_at: o.UpdatedAt != null ? asStr(o.UpdatedAt) : o.updated_at != null ? asStr(o.updated_at) : undefined,
+  }
+}
+
+/**
+ * Definition id from POST create or PUT update (`data.ID`, `data.id`, or PascalCase `Id`).
+ * Example update: `{ "data": { "id": 6 } }`.
+ */
+export function extractDefinitionMutationId(res: { data?: unknown }): number | undefined {
+  const data = unwrapApiPayload(res)
+  if (!data || typeof data !== "object" || Array.isArray(data)) return undefined
+  const o = data as Record<string, unknown>
+  const id = Number(o.ID ?? o.id ?? o.Id)
+  return Number.isFinite(id) && id > 0 ? id : undefined
+}
+
+/** @deprecated use extractDefinitionMutationId */
+export const extractCreatedDefinitionId = extractDefinitionMutationId
+
+export function parseDefinitionsList(payload: unknown): QuestionTypeDefinition[] {
+  if (!payload) return []
+  if (Array.isArray(payload)) {
+    return payload
+      .map((item) => normalizeTypeDefinitionFromApi(item))
+      .filter((x): x is QuestionTypeDefinition => x != null)
+  }
+  if (typeof payload === "object" && payload !== null) {
+    const o = payload as Record<string, unknown>
+    const inner = o.definitions ?? o.items ?? o.rows ?? o.Definitions
+    if (Array.isArray(inner)) return parseDefinitionsList(inner)
+    if (inner && typeof inner === "object") return parseDefinitionsList(inner)
+    const data = o.data ?? o.Data
+    if (Array.isArray(data)) return parseDefinitionsList(data)
+    if (data && typeof data === "object") {
+      const single = normalizeTypeDefinitionFromApi(data)
+      return single ? [single] : []
+    }
+    const single = normalizeTypeDefinitionFromApi(payload)
+    return single ? [single] : []
+  }
+  return []
+}
+
+export async function getQuestionTypeDefinitions(params?: {
+  include_system?: boolean
+  status?: string
+  limit?: number
+  offset?: number
+}) {
+  const res = await http.get<ApiEnvelope<unknown>>("/questions/type-definitions", { params })
+  const raw = unwrapApiPayload(res) ?? res.data
+  return parseDefinitionsList(raw)
+}
+
+export async function getQuestionTypeDefinitionById(id: number) {
+  const res = await http.get<ApiEnvelope<unknown>>(`/questions/type-definitions/${id}`)
+  const def = unwrapApiPayload(res)
+  return normalizeTypeDefinitionFromApi(def) ?? undefined
+}
+
+export async function updateQuestionTypeDefinition(
+  id: number,
+  body: QuestionTypeDefinitionUpdatePayload,
+) {
+  return http.put<ApiEnvelope<unknown>>(`/questions/type-definitions/${id}`, body)
+}
+
+export async function deleteQuestionTypeDefinition(id: number) {
+  return http.delete<ApiEnvelope<unknown>>(`/questions/type-definitions/${id}`)
+}
diff --git a/src/app/AppRoutes.tsx b/src/app/AppRoutes.tsx
index eb3f023..af2a147 100644
--- a/src/app/AppRoutes.tsx
+++ b/src/app/AppRoutes.tsx
@@ -170,6 +170,10 @@ export function AppRoutes() {
           path="/new-content/question-types"
           element={<QuestionTypeLibraryPage />}
         />
+        <Route
+          path="/new-content/question-types/:definitionId/edit"
+          element={<CreateQuestionTypeFlow />}
+        />
         <Route
           path="/new-content/question-types/create"
           element={<CreateQuestionTypeFlow />}
diff --git a/src/pages/content-management/AddQuestionPage.tsx b/src/pages/content-management/AddQuestionPage.tsx
index 9f65077..83eec8a 100644
--- a/src/pages/content-management/AddQuestionPage.tsx
+++ b/src/pages/content-management/AddQuestionPage.tsx
@@ -8,11 +8,18 @@ import { Input } from "../../components/ui/input"
 import { Textarea } from "../../components/ui/textarea"
 import { Select } from "../../components/ui/select"
 import { createQuestion, getQuestionById, updateQuestion } from "../../api/courses.api"
+import { getQuestionTypeDefinitions } from "../../api/questionTypeDefinitions.api"
+import type { QuestionTypeDefinition } from "../../types/questionTypeDefinition.types"
 
-type QuestionType = "MCQ" | "TRUE_FALSE" | "SHORT_ANSWER" | "AUDIO"
+type QuestionType = "MCQ" | "TRUE_FALSE" | "SHORT_ANSWER" | "AUDIO" | "DYNAMIC"
 type Difficulty = "EASY" | "MEDIUM" | "HARD"
 type QuestionStatus = "DRAFT" | "PUBLISHED" | "INACTIVE"
 
+const defaultDynamicPayloadJson = `{
+  "stimulus": [],
+  "response": []
+}`
+
 interface Question {
   id?: number
   question: string
@@ -27,6 +34,9 @@ interface Question {
   voicePrompt: string
   sampleAnswerVoicePrompt: string
   audioCorrectAnswerText: string
+  /** Definition id as string for select value */
+  questionTypeDefinitionId: string
+  dynamicPayloadJson: string
 }
 
 const initialForm: Question = {
@@ -42,6 +52,8 @@ const initialForm: Question = {
   voicePrompt: "",
   sampleAnswerVoicePrompt: "",
   audioCorrectAnswerText: "",
+  questionTypeDefinitionId: "",
+  dynamicPayloadJson: defaultDynamicPayloadJson,
 }
 
 export function AddQuestionPage() {
@@ -52,6 +64,7 @@ export function AddQuestionPage() {
   const [formData, setFormData] = useState<Question>(initialForm)
   const [loading, setLoading] = useState(false)
   const [submitting, setSubmitting] = useState(false)
+  const [typeDefinitions, setTypeDefinitions] = useState<QuestionTypeDefinition[]>([])
 
   useEffect(() => {
     const loadQuestion = async () => {
@@ -64,7 +77,8 @@ export function AddQuestionPage() {
           q.question_type === "MCQ" ||
           q.question_type === "TRUE_FALSE" ||
           q.question_type === "SHORT_ANSWER" ||
-          q.question_type === "AUDIO"
+          q.question_type === "AUDIO" ||
+          q.question_type === "DYNAMIC"
             ? q.question_type
             : "MCQ"
         const shortAnswer = Array.isArray(q.short_answers) && q.short_answers.length > 0
@@ -100,6 +114,14 @@ export function AddQuestionPage() {
           voicePrompt: q.voice_prompt || "",
           sampleAnswerVoicePrompt: q.sample_answer_voice_prompt || "",
           audioCorrectAnswerText: q.audio_correct_answer_text || "",
+          questionTypeDefinitionId:
+            mappedType === "DYNAMIC" && q.question_type_definition_id != null
+              ? String(q.question_type_definition_id)
+              : "",
+          dynamicPayloadJson:
+            mappedType === "DYNAMIC" && q.dynamic_payload
+              ? JSON.stringify(q.dynamic_payload, null, 2)
+              : defaultDynamicPayloadJson,
         })
       } catch (error) {
         console.error("Failed to load question:", error)
@@ -111,6 +133,22 @@ export function AddQuestionPage() {
     loadQuestion()
   }, [isEditing, id])
 
+  useEffect(() => {
+    if (formData.type !== "DYNAMIC") return
+    let cancelled = false
+    ;(async () => {
+      try {
+        const rows = await getQuestionTypeDefinitions({ include_system: true })
+        if (!cancelled) setTypeDefinitions(Array.isArray(rows) ? rows : [])
+      } catch {
+        if (!cancelled) setTypeDefinitions([])
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [formData.type])
+
   const handleTypeChange = (type: QuestionType) => {
     setFormData((prev) => {
       if (type === "TRUE_FALSE") {
@@ -120,6 +158,15 @@ export function AddQuestionPage() {
           options: ["True", "False"],
           correctAnswer: prev.correctAnswer === "True" || prev.correctAnswer === "False" ? prev.correctAnswer : "",
         }
+      } else if (type === "DYNAMIC") {
+        return {
+          ...prev,
+          type,
+          options: [],
+          correctAnswer: "",
+          questionTypeDefinitionId: "",
+          dynamicPayloadJson: defaultDynamicPayloadJson,
+        }
       } else if (type === "SHORT_ANSWER" || type === "AUDIO") {
         return {
           ...prev,
@@ -200,6 +247,27 @@ export function AddQuestionPage() {
         })
         return
       }
+    } else if (formData.type === "DYNAMIC") {
+      const defId = Number(formData.questionTypeDefinitionId)
+      if (!Number.isFinite(defId) || defId < 1) {
+        toast.error("Definition required", { description: "Select a question type definition." })
+        return
+      }
+      try {
+        const parsed = JSON.parse(formData.dynamicPayloadJson || "{}") as {
+          stimulus?: unknown
+          response?: unknown
+        }
+        if (!Array.isArray(parsed.stimulus) || !Array.isArray(parsed.response)) {
+          toast.error("Invalid dynamic payload", {
+            description: 'JSON must include "stimulus" and "response" arrays.',
+          })
+          return
+        }
+      } catch {
+        toast.error("Invalid JSON", { description: "Fix dynamic_payload JSON before saving." })
+        return
+      }
     }
 
     setSubmitting(true)
@@ -221,6 +289,18 @@ export function AddQuestionPage() {
               { acceptable_answer: formData.correctAnswer.trim(), match_type: "CASE_INSENSITIVE" as const },
             ]
           : undefined
+      let dynamicPayload: { stimulus: unknown[]; response: unknown[] } | undefined
+      if (formData.type === "DYNAMIC") {
+        try {
+          dynamicPayload = JSON.parse(formData.dynamicPayloadJson) as {
+            stimulus: unknown[]
+            response: unknown[]
+          }
+        } catch {
+          dynamicPayload = { stimulus: [], response: [] }
+        }
+      }
+
       const payload = {
         question_text: formData.question,
         question_type: formData.type,
@@ -236,6 +316,12 @@ export function AddQuestionPage() {
           formData.type === "AUDIO" ? formData.sampleAnswerVoicePrompt : formData.sampleAnswerVoicePrompt || undefined,
         audio_correct_answer_text:
           formData.type === "AUDIO" ? formData.audioCorrectAnswerText : undefined,
+        ...(formData.type === "DYNAMIC" && dynamicPayload
+          ? {
+              question_type_definition_id: Number(formData.questionTypeDefinitionId),
+              dynamic_payload: dynamicPayload,
+            }
+          : {}),
       }
       if (isEditing && id) {
         await updateQuestion(Number(id), payload)
@@ -303,15 +389,58 @@ export function AddQuestionPage() {
                   <option value="TRUE_FALSE">True/False</option>
                   <option value="SHORT_ANSWER">Short Answer</option>
                   <option value="AUDIO">Audio</option>
+                  <option value="DYNAMIC">Dynamic (schema-driven)</option>
                 </Select>
               </div>
 
+              {formData.type === "DYNAMIC" && (
+                <>
+                  <div>
+                    <label className="mb-1.5 block text-sm font-medium text-grayScale-500">
+                      Question type definition <span className="text-red-500">*</span>
+                    </label>
+                    <Select
+                      value={formData.questionTypeDefinitionId}
+                      onChange={(e) =>
+                        setFormData((prev) => ({ ...prev, questionTypeDefinitionId: e.target.value }))
+                      }
+                      required
+                    >
+                      <option value="">Select definition…</option>
+                      {typeDefinitions.map((d) => (
+                        <option key={d.id} value={String(d.id)}>
+                          {d.display_name} ({d.key})
+                        </option>
+                      ))}
+                    </Select>
+                    <p className="mt-1 text-xs text-grayScale-400">
+                      Loaded from GET /questions/type-definitions?include_system=true&amp;status=ACTIVE
+                    </p>
+                  </div>
+                  <div>
+                    <label className="mb-1.5 block text-sm font-medium text-grayScale-500">
+                      dynamic_payload (JSON) <span className="text-red-500">*</span>
+                    </label>
+                    <Textarea
+                      value={formData.dynamicPayloadJson}
+                      onChange={(e) => setFormData((prev) => ({ ...prev, dynamicPayloadJson: e.target.value }))}
+                      rows={12}
+                      className="font-mono text-xs"
+                      spellCheck={false}
+                    />
+                    <p className="mt-1 text-xs text-grayScale-400">
+                      Must match the selected definition&apos;s stimulus/response schema (see integration guide).
+                    </p>
+                  </div>
+                </>
+              )}
+
               <hr className="border-grayScale-100" />
 
               {/* Question Text */}
               <div>
                 <label htmlFor="question" className="mb-1.5 block text-sm font-medium text-grayScale-500">
-                  Question
+                  {formData.type === "DYNAMIC" ? "Question title / stem" : "Question"}
                 </label>
                 <Textarea
                   id="question"
@@ -368,6 +497,7 @@ export function AddQuestionPage() {
               <hr className="border-grayScale-100" />
 
               {/* Correct Answer */}
+              {formData.type !== "DYNAMIC" && (
               <div>
                 <label className="mb-1.5 block text-sm font-medium text-grayScale-500">
                   {formData.type === "AUDIO" ? "Audio Correct Answer Text" : "Correct Answer"}
@@ -403,6 +533,7 @@ export function AddQuestionPage() {
                   />
                 )}
               </div>
+              )}
 
               <hr className="border-grayScale-100" />
 
diff --git a/src/pages/content-management/CreateQuestionTypeFlow.tsx b/src/pages/content-management/CreateQuestionTypeFlow.tsx
index e5749f7..8c49842 100644
--- a/src/pages/content-management/CreateQuestionTypeFlow.tsx
+++ b/src/pages/content-management/CreateQuestionTypeFlow.tsx
@@ -1,31 +1,279 @@
-import { useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
-import { ArrowLeft } from "lucide-react";
-import { Button } from "../../components/ui/button";
-import { Stepper } from "../../components/ui/stepper";
-import { QuestionTypeBasicInfoStep } from "./components/question-type-steps/QuestionTypeBasicInfoStep";
-import { QuestionTypeConfigStep } from "./components/question-type-steps/QuestionTypeConfigStep";
+import { useEffect, useMemo, useState } from "react"
+import { Link, useNavigate, useParams } from "react-router-dom"
+import { ArrowLeft } from "lucide-react"
+import { toast } from "sonner"
+import { Button } from "../../components/ui/button"
+import { Card } from "../../components/ui/card"
+import { Stepper } from "../../components/ui/stepper"
+import {
+  createQuestionTypeDefinition,
+  validateQuestionTypeDefinition,
+  extractDefinitionMutationId,
+  getQuestionComponentCatalog,
+  getQuestionTypeDefinitionById,
+  updateQuestionTypeDefinition,
+} from "../../api/questionTypeDefinitions.api"
+import type {
+  QuestionComponentCatalog,
+  QuestionTypeDefinition,
+  QuestionTypeDefinitionCreatePayload,
+} from "../../types/questionTypeDefinition.types"
+import {
+  buildCreatePayload,
+  validateDefinitionBasic,
+  validateDefinitionKinds,
+  validateDefinitionSchemas,
+  type FieldErrorMap,
+} from "./lib/questionTypeDefinitionValidation"
+import { QuestionTypeBasicInfoStep } from "./components/question-type-steps/QuestionTypeBasicInfoStep"
+import { QuestionTypeConfigStep } from "./components/question-type-steps/QuestionTypeConfigStep"
+import { QuestionTypeValidatePreviewStep } from "./components/question-type-steps/QuestionTypeValidatePreviewStep"
+import { QuestionTypeReviewPublishStep } from "./components/question-type-steps/QuestionTypeReviewPublishStep"
+
+const initialDraft = (): QuestionTypeDefinitionCreatePayload => ({
+  key: "",
+  display_name: "",
+  description: "",
+  status: "ACTIVE",
+  stimulus_component_kinds: [],
+  response_component_kinds: [],
+  stimulus_schema: [],
+  response_schema: [],
+})
+
+function seedSchemaFromKinds(kinds: string[]) {
+  return kinds.map((k, i) => ({
+    id: `${(k || "field").toLowerCase().replace(/[^a-z0-9]+/g, "_") || "field"}_${i + 1}`,
+    kind: k,
+    label: k.replace(/_/g, " "),
+    required: true as boolean,
+  }))
+}
+
+function definitionToDraft(def: QuestionTypeDefinition): QuestionTypeDefinitionCreatePayload {
+  return {
+    key: def.key,
+    display_name: def.display_name,
+    description: def.description ?? "",
+    status: def.status === "INACTIVE" ? "INACTIVE" : "ACTIVE",
+    stimulus_component_kinds: [...(def.stimulus_component_kinds ?? [])],
+    response_component_kinds: [...(def.response_component_kinds ?? [])],
+    stimulus_schema: (def.stimulus_schema ?? []).map((r) => ({ ...r })),
+    response_schema: (def.response_schema ?? []).map((r) => ({ ...r })),
+  }
+}
 
 export function CreateQuestionTypeFlow() {
-  const navigate = useNavigate();
-  const [currentStep, setCurrentStep] = useState(1);
+  const navigate = useNavigate()
+  const { definitionId: definitionIdParam } = useParams<{ definitionId?: string }>()
+  const editDefinitionId = useMemo(() => {
+    if (!definitionIdParam || !/^\d+$/.test(definitionIdParam)) return null
+    const n = Number(definitionIdParam)
+    return Number.isFinite(n) && n > 0 ? n : null
+  }, [definitionIdParam])
+  const isEdit = editDefinitionId != null
 
-  const steps = [
-    "Basic Info",
-    "Input & Answer Configuration",
-    "Versions",
-    "Review & Publish",
-  ];
+  const [currentStep, setCurrentStep] = useState(1)
+  const [draft, setDraft] = useState<QuestionTypeDefinitionCreatePayload>(initialDraft)
+  const [versionName, setVersionName] = useState("Test 1")
+  const [stepErrors, setStepErrors] = useState<FieldErrorMap>({})
+  const [definitionReady, setDefinitionReady] = useState(!isEdit)
 
-  const handleNext = () =>
-    setCurrentStep((prev) => Math.min(prev + 1, steps.length));
-  const handleBack = () => setCurrentStep((prev) => Math.max(prev - 1, 1));
+  const [componentCatalog, setComponentCatalog] = useState<QuestionComponentCatalog>({
+    stimulus_component_kinds: [],
+    response_component_kinds: [],
+  })
+  const [catalogLoading, setCatalogLoading] = useState(true)
+  const [catalogError, setCatalogError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    ;(async () => {
+      setCatalogLoading(true)
+      setCatalogError(null)
+      try {
+        const cat = await getQuestionComponentCatalog()
+        if (!cancelled) {
+          setComponentCatalog(cat)
+          if (
+            !cat.stimulus_component_kinds.length &&
+            !cat.response_component_kinds.length
+          ) {
+            setCatalogError("Catalog returned no kinds — check API response shape.")
+          }
+        }
+      } catch (e) {
+        if (!cancelled) {
+          console.error(e)
+          setCatalogError("Failed to load component catalog.")
+          toast.error("Failed to load component catalog")
+        }
+      } finally {
+        if (!cancelled) setCatalogLoading(false)
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!isEdit || editDefinitionId == null) {
+      setDefinitionReady(true)
+      return
+    }
+    let cancelled = false
+    setDefinitionReady(false)
+    ;(async () => {
+      try {
+        const def = await getQuestionTypeDefinitionById(editDefinitionId)
+        if (cancelled) return
+        if (!def) {
+          toast.error("Definition not found")
+          navigate("/new-content/question-types")
+          return
+        }
+        setDraft(definitionToDraft(def))
+        setVersionName("Test 1")
+        setCurrentStep(1)
+        setStepErrors({})
+      } catch (e) {
+        if (!cancelled) {
+          console.error(e)
+          toast.error("Failed to load definition")
+          navigate("/new-content/question-types")
+        }
+      } finally {
+        if (!cancelled) setDefinitionReady(true)
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [isEdit, editDefinitionId, navigate])
+
+  useEffect(() => {
+    if (!isEdit) {
+      setDraft(initialDraft())
+      setVersionName("Test 1")
+      setCurrentStep(1)
+      setStepErrors({})
+      setDefinitionReady(true)
+    }
+  }, [isEdit])
+
+  const catalogForSchemaValidation = {
+    stimulus: new Set(componentCatalog.stimulus_component_kinds),
+    response: new Set(componentCatalog.response_component_kinds),
+  }
+
+  const handleNextFromStep1 = () => {
+    const e1 = validateDefinitionBasic(draft)
+    setStepErrors(e1)
+    if (Object.keys(e1).length) {
+      toast.error("Fix the highlighted fields before continuing.")
+      return
+    }
+    setStepErrors({})
+    setCurrentStep(2)
+  }
+
+  const handleNextFromStep2 = () => {
+    const versionErr: FieldErrorMap = {}
+    if (!versionName.trim()) {
+      versionErr.version_name = "Version name is required."
+    }
+    const eKinds = validateDefinitionKinds(draft, componentCatalog)
+    const mergedKinds = { ...versionErr, ...eKinds }
+    setStepErrors(mergedKinds)
+    if (Object.keys(mergedKinds).length) {
+      toast.error("Complete version name and component selections.")
+      return
+    }
+
+    const nextDraft: QuestionTypeDefinitionCreatePayload = { ...draft }
+    if (!nextDraft.stimulus_schema.length && nextDraft.stimulus_component_kinds.length) {
+      nextDraft.stimulus_schema = seedSchemaFromKinds(nextDraft.stimulus_component_kinds)
+    }
+    if (!nextDraft.response_schema.length && nextDraft.response_component_kinds.length) {
+      nextDraft.response_schema = seedSchemaFromKinds(nextDraft.response_component_kinds)
+    }
+    setDraft(nextDraft)
+
+    const mergedSchema = validateDefinitionSchemas(nextDraft, catalogForSchemaValidation)
+    setStepErrors(mergedSchema)
+    if (Object.keys(mergedSchema).length) {
+      toast.error("Fix schema issues (expand Advanced) or adjust selected kinds.", {
+        description: "Open “Advanced: edit schema rows” to fix row ids and kinds.",
+      })
+      return
+    }
+    setStepErrors({})
+    setCurrentStep(3)
+  }
+
+  const handleBack = () => setCurrentStep((prev) => Math.max(prev - 1, 1))
+
+  const handleHeaderSaveDraft = async () => {
+    setDraft((d) => ({ ...d, status: "INACTIVE" }))
+    if (currentStep < 4) {
+      toast.message("Status set to Inactive", {
+        description: "Complete the wizard; on the last step you can save the definition to the server.",
+      })
+      return
+    }
+    const body = { ...buildCreatePayload({ ...draft, status: "INACTIVE" }), status: "INACTIVE" as const }
+    try {
+      if (isEdit && editDefinitionId != null) {
+        const res = await updateQuestionTypeDefinition(editDefinitionId, body)
+        const id = extractDefinitionMutationId(res) ?? editDefinitionId
+        toast.success(res.data?.message || "Definition saved as draft", {
+          description: `Definition id: ${id}`,
+        })
+        navigate(`/new-content/question-types?updated=${id}`)
+        return
+      }
+      const validation = await validateQuestionTypeDefinition(body)
+      if (!validation.valid) {
+        toast.error(validation.message || "Invalid question type definition", {
+          description: validation.error ? String(validation.error) : undefined,
+        })
+        return
+      }
+      const res = await createQuestionTypeDefinition(body)
+      const id = extractDefinitionMutationId(res)
+      if (id == null) {
+        toast.error(res.data?.message ?? "Save failed: missing definition id in response.")
+        return
+      }
+      toast.success(res.data?.message || "Definition saved as draft", {
+        description: `Definition id: ${id}`,
+      })
+      navigate(`/new-content/question-types?created=${id}`)
+    } catch (e: unknown) {
+      const err = e as { response?: { data?: { message?: string; error?: string } } }
+      toast.error(String(err.response?.data?.message || "Save failed"), {
+        description: err.response?.data?.error ? String(err.response.data.error) : undefined,
+      })
+    }
+  }
+
+  const steps = ["Basic Info", "Input & answer types", "Validate", "Review & publish"]
+
+  if (isEdit && !definitionReady) {
+    return (
+      <div className="min-h-screen pb-20 flex items-center justify-center px-6">
+        <Card className="p-10 max-w-md w-full text-center border-grayScale-200">
+          <p className="text-grayScale-600 font-medium">Loading definition…</p>
+        </Card>
+      </div>
+    )
+  }
 
   return (
     <div className="min-h-screen pb-20 overflow-x-hidden">
-      {/* Header */}
-      <div className=" border-b border-grayScale-100 sticky top-0 z-50">
-        <div className="max-w-[1440px] mx-auto py-6">
+      <div className=" border-b border-grayScale-100 sticky top-0 z-50 bg-white/95 backdrop-blur">
+        <div className="max-w-[1440px] mx-auto py-6 px-4 sm:px-6">
           <div className="flex items-center justify-between mb-8">
             <Link
               to="/new-content/question-types"
@@ -36,16 +284,29 @@ export function CreateQuestionTypeFlow() {
             </Link>
           </div>
 
-          <div className="flex items-start justify-between">
+          <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-6">
             <div className="space-y-1">
               <h1 className="text-[28px] font-bold text-grayScale-900 tracking-tight">
-                Create Question Type
+                {isEdit ? "Edit question type definition" : "Create question type definition"}
               </h1>
-              <p className="text-grayScale-500 text-[14px] font-medium">
-                Create a new immersive practice session for students.
+              <p className="text-grayScale-500 text-[14px] font-medium max-w-2xl">
+                {isEdit ? (
+                  <>
+                    Update definition{" "}
+                    <code className="text-xs bg-grayScale-100 px-1 rounded">#{editDefinitionId}</code> via{" "}
+                    <code className="text-xs bg-grayScale-100 px-1 rounded">PUT /questions/type-definitions/:id</code>
+                    .
+                  </>
+                ) : (
+                  <>
+                    Build a reusable dynamic question type (schema + kinds) for{" "}
+                    <code className="text-xs bg-grayScale-100 px-1 rounded">DYNAMIC</code> questions. Data is sent to{" "}
+                    <code className="text-xs bg-grayScale-100 px-1 rounded">POST /questions/type-definitions</code>.
+                  </>
+                )}
               </p>
             </div>
-            <div className="flex items-center gap-4">
+            <div className="flex items-center gap-4 shrink-0">
               <Button
                 variant="outline"
                 className="h-10 px-8 rounded-[6px] border-grayScale-200 text-grayScale-900 font-medium hover:bg-grayScale-50"
@@ -53,7 +314,10 @@ export function CreateQuestionTypeFlow() {
               >
                 Cancel
               </Button>
-              <Button className="h-10 px-8 rounded-[6px] bg-[#9E2891] font-medium text-white shadow-lg shadow-brand-500/10 hover:bg-[#8A237E] transition-all">
+              <Button
+                className="h-10 px-8 rounded-[6px] bg-[#9E2891] font-medium text-white shadow-lg shadow-brand-500/10 hover:bg-[#8A237E] transition-all"
+                onClick={handleHeaderSaveDraft}
+              >
                 Save as Draft
               </Button>
             </div>
@@ -65,23 +329,38 @@ export function CreateQuestionTypeFlow() {
         </div>
       </div>
 
-      {/* Main Content */}
-      <div className="max-w-[1440px] mx-auto px-10 mt-12 animate-in fade-in slide-in-from-bottom-4 duration-500">
-        {currentStep === 1 && <QuestionTypeBasicInfoStep onNext={handleNext} />}
-        {currentStep === 2 && (
-          <QuestionTypeConfigStep onNext={handleNext} onBack={handleBack} />
+      <div className="max-w-[1440px] mx-auto px-4 sm:px-10 mt-12 animate-in fade-in slide-in-from-bottom-4 duration-500">
+        {currentStep === 1 && (
+          <QuestionTypeBasicInfoStep
+            draft={draft}
+            setDraft={setDraft}
+            errors={stepErrors}
+            keyReadOnly={isEdit}
+            onNext={handleNextFromStep1}
+          />
         )}
-        {currentStep > 2 && (
-          <div className="bg-white rounded-2xl p-12 text-center border border-grayScale-100 shadow-sm">
-            <p className="text-grayScale-400 font-medium">
-              Step {currentStep} implementation in progress...
-            </p>
-            <Button onClick={handleBack} variant="outline" className="mt-4">
-              Go Back
-            </Button>
-          </div>
+        {currentStep === 2 && (
+          <QuestionTypeConfigStep
+            draft={draft}
+            setDraft={setDraft}
+            versionName={versionName}
+            setVersionName={setVersionName}
+            stimulusCatalogKinds={componentCatalog.stimulus_component_kinds}
+            responseCatalogKinds={componentCatalog.response_component_kinds}
+            catalogLoading={catalogLoading}
+            catalogError={catalogError}
+            errors={stepErrors}
+            onNext={handleNextFromStep2}
+            onBack={handleBack}
+          />
+        )}
+        {currentStep === 3 && (
+          <QuestionTypeValidatePreviewStep draft={draft} onNext={() => setCurrentStep(4)} onBack={handleBack} />
+        )}
+        {currentStep === 4 && (
+          <QuestionTypeReviewPublishStep draft={draft} onBack={handleBack} editDefinitionId={editDefinitionId} />
         )}
       </div>
     </div>
-  );
+  )
 }
diff --git a/src/pages/content-management/QuestionTypeLibraryPage.tsx b/src/pages/content-management/QuestionTypeLibraryPage.tsx
index 75002f9..90b0d32 100644
--- a/src/pages/content-management/QuestionTypeLibraryPage.tsx
+++ b/src/pages/content-management/QuestionTypeLibraryPage.tsx
@@ -1,50 +1,116 @@
-import { useState } from "react";
-import { Link } from "react-router-dom";
-import { ArrowLeft, Plus, Search } from "lucide-react";
-import { Button } from "../../components/ui/button";
-import { Input } from "../../components/ui/input";
-import { Select } from "../../components/ui/select";
-import { Card } from "../../components/ui/card";
-import { cn } from "../../lib/utils";
-import { QuestionTypeCard } from "./components/QuestionTypeCard";
+import { useCallback, useEffect, useMemo, useState } from "react"
+import { Link, useNavigate, useSearchParams } from "react-router-dom"
+import { ArrowLeft, Plus, Search, Trash2 } from "lucide-react"
+import { toast } from "sonner"
+import { Button } from "../../components/ui/button"
+import { Input } from "../../components/ui/input"
+import { Card } from "../../components/ui/card"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../../components/ui/dialog"
+import { SpinnerIcon } from "../../components/ui/spinner-icon"
+import { cn } from "../../lib/utils"
+import { QuestionTypeCard } from "./components/QuestionTypeCard"
+import {
+  deleteQuestionTypeDefinition,
+  getQuestionTypeDefinitions,
+} from "../../api/questionTypeDefinitions.api"
+import type { QuestionTypeDefinition } from "../../types/questionTypeDefinition.types"
 
 export function QuestionTypeLibraryPage() {
-  const [activeTab, setActiveTab] = useState("All");
+  const navigate = useNavigate()
+  const [searchParams] = useSearchParams()
+  const createdId = searchParams.get("created")
+  const updatedId = searchParams.get("updated")
 
-  const questionTypes = [
-    {
-      title: "Describe a Photo",
-      exam: "DUOLINGO" as const,
-      skill: "Speaking" as const,
-      variations: 12,
-      status: "Published" as const,
-    },
-    {
-      title: "Write About the Topic",
-      exam: "DUOLINGO" as const,
-      skill: "Writing" as const,
-      variations: 12,
-      status: "Published" as const,
-    },
-    {
-      title: "Fill in the Blanks",
-      exam: "IELTS" as const,
-      skill: "Writing" as const,
-      variations: 12,
-      status: "Published" as const,
-    },
-    {
-      title: "Describe a Photo",
-      exam: "DUOLINGO" as const,
-      skill: "Speaking" as const,
-      variations: 12,
-      status: "Published" as const,
-    },
-  ];
+  const [loading, setLoading] = useState(true)
+  const [definitions, setDefinitions] = useState<QuestionTypeDefinition[]>([])
+  const [query, setQuery] = useState("")
+  const [activeTab, setActiveTab] = useState<"All" | "ACTIVE" | "INACTIVE">("All")
+  const [definitionPendingDelete, setDefinitionPendingDelete] = useState<QuestionTypeDefinition | null>(null)
+  const [deleteSubmitting, setDeleteSubmitting] = useState(false)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    try {
+      const rows = await getQuestionTypeDefinitions({ include_system: true })
+      setDefinitions(Array.isArray(rows) ? rows : [])
+    } catch (e) {
+      console.error(e)
+      toast.error("Failed to load question type definitions")
+      setDefinitions([])
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  useEffect(() => {
+    if (createdId) {
+      toast.success("Definition created", { description: `Id ${createdId}` })
+    }
+  }, [createdId])
+
+  useEffect(() => {
+    if (updatedId) {
+      toast.success("Definition updated", { description: `Id ${updatedId}` })
+    }
+  }, [updatedId])
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase()
+    return definitions.filter((d) => {
+      if (activeTab !== "All") {
+        const st = (d.status || "").toString().toUpperCase()
+        if (activeTab === "ACTIVE" && st !== "ACTIVE") return false
+        if (activeTab === "INACTIVE" && st !== "INACTIVE") return false
+      }
+      if (!q) return true
+      const name = (d.display_name || "").toLowerCase()
+      const key = (d.key || "").toLowerCase()
+      return name.includes(q) || key.includes(q) || String(d.id).includes(q)
+    })
+  }, [definitions, query, activeTab])
+
+  const openDeleteConfirm = (row: QuestionTypeDefinition) => {
+    if (row.is_system) {
+      toast.error("System definitions cannot be deleted.")
+      return
+    }
+    setDefinitionPendingDelete(row)
+  }
+
+  const handleDeleteDialogOpenChange = (open: boolean) => {
+    if (!open && !deleteSubmitting) setDefinitionPendingDelete(null)
+  }
+
+  const handleConfirmDeleteDefinition = async () => {
+    const row = definitionPendingDelete
+    if (!row) return
+    setDeleteSubmitting(true)
+    try {
+      await deleteQuestionTypeDefinition(row.id)
+      toast.success("Definition deleted")
+      setDefinitionPendingDelete(null)
+      void load()
+    } catch (e: unknown) {
+      const err = e as { response?: { data?: { message?: string } } }
+      toast.error(String(err.response?.data?.message || "Delete failed"))
+    } finally {
+      setDeleteSubmitting(false)
+    }
+  }
 
   return (
     <div className="space-y-8 animate-in fade-in duration-500 pb-20">
-      {/* Navigation & Header */}
       <div className="space-y-6">
         <Link
           to="/new-content/courses"
@@ -54,54 +120,43 @@ export function QuestionTypeLibraryPage() {
           Back to Courses
         </Link>
 
-        <div className="flex items-start justify-between">
+        <div className="flex items-start justify-between gap-4 flex-wrap">
           <div className="space-y-1">
-            <h1 className="text-[32px] font-medium text-grayScale-900 tracking-tight">
-              Question Type Library
-            </h1>
-            <p className="text-grayScale-500 text-[16px] font-medium">
-              Create and manage reusable question structures for practices and
-              assessments.
+            <h1 className="text-[32px] font-medium text-grayScale-900 tracking-tight">Question type definitions</h1>
+            <p className="text-grayScale-500 text-[16px] font-medium max-w-2xl">
+              Reusable dynamic question type templates from{" "}
+              <code className="text-xs bg-grayScale-100 px-1 rounded">GET /questions/type-definitions</code>. Use them
+              when authoring <code className="text-xs bg-grayScale-100 px-1 rounded">DYNAMIC</code> questions.
             </p>
           </div>
           <Link to="/new-content/question-types/create">
             <Button className="h-12 px-8 rounded-[10px] bg-[#9E2891] font-bold text-white shadow-lg shadow-brand-500/10 hover:bg-[#8A237E] transition-all flex items-center gap-3">
               <Plus className="h-5 w-5" />
-              Create Question Type
+              Create definition
             </Button>
           </Link>
         </div>
       </div>
 
-      {/* Control Bar */}
       <Card className="p-6 border-grayScale-200 rounded-2xl bg-white space-y-6">
-        <div className="flex items-center gap-4">
+        <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-4">
           <div className="relative flex-1">
             <Search className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-grayScale-600" />
             <Input
               className="h-10 pl-12 rounded-[6px] border-grayScale-200 placeholder:text-grayScale-600 bg-[#F8FAFC] transition-all text-sm"
-              placeholder="Search by practice name, ID, or keywords..."
+              placeholder="Search by display name, key, or id…"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
             />
           </div>
-          <Select className="h-10 w-[180px] rounded-[6px] border-grayScale-200 placeholder:text-grayScale-600 text-grayScale-700 bg-[#F8FAFC] transition-all text-sm">
-            <option>All Exams</option>
-            <option>IELTS</option>
-            <option>Duolingo</option>
-          </Select>
-          <Select className="h-10 w-[180px] rounded-[6px] border-grayScale-200 placeholder:text-grayScale-600 text-grayScale-700 bg-[#F8FAFC] transition-all text-sm">
-            <option>All Skills</option>
-            <option>Speaking</option>
-            <option>Writing</option>
-          </Select>
         </div>
 
-        <div className="flex items-center gap-3">
-          <span className="text-[12px] font-medium text-grayScale-400 uppercase tracking-widest mr-2">
-            STATUS:
-          </span>
-          {["All", "Published", "Drafts", "Archived"].map((tab) => (
+        <div className="flex items-center gap-3 flex-wrap">
+          <span className="text-[12px] font-medium text-grayScale-400 uppercase tracking-widest mr-2">Status</span>
+          {(["All", "ACTIVE", "INACTIVE"] as const).map((tab) => (
             <button
               key={tab}
+              type="button"
               onClick={() => setActiveTab(tab)}
               className={cn(
                 "h-10 px-4 rounded-full text-[13px] font-medium transition-all",
@@ -110,18 +165,82 @@ export function QuestionTypeLibraryPage() {
                   : "bg-grayScale-100 text-grayScale-400 hover:bg-grayScale-100",
               )}
             >
-              {tab}
+              {tab === "All" ? "All" : tab === "ACTIVE" ? "Active" : "Inactive"}
             </button>
           ))}
         </div>
       </Card>
 
-      {/* Grid of Cards */}
-      <div className="grid grid-cols-4 gap-6">
-        {questionTypes.map((qt, index) => (
-          <QuestionTypeCard key={index} {...qt} />
-        ))}
-      </div>
+      {loading ? (
+        <p className="text-sm text-grayScale-500 px-2">Loading definitions…</p>
+      ) : filtered.length === 0 ? (
+        <Card className="p-12 text-center border-dashed border-grayScale-200 rounded-2xl">
+          <p className="text-grayScale-600 font-medium">No definitions match your filters.</p>
+          <p className="text-sm text-grayScale-400 mt-2">Create one to get started.</p>
+        </Card>
+      ) : (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+          {filtered.map((d) => (
+            <QuestionTypeCard
+              key={d.id}
+              id={d.id}
+              definitionKey={d.key}
+              display_name={d.display_name}
+              status={d.status}
+              is_system={d.is_system}
+              stimulusKindsCount={d.stimulus_component_kinds?.length ?? 0}
+              responseKindsCount={d.response_component_kinds?.length ?? 0}
+              deleteDisabled={!!d.is_system}
+              onEdit={() => navigate(`/new-content/question-types/${d.id}/edit`)}
+              onDelete={() => openDeleteConfirm(d)}
+            />
+          ))}
+        </div>
+      )}
+
+      <Dialog open={definitionPendingDelete !== null} onOpenChange={handleDeleteDialogOpenChange}>
+        <DialogContent className="max-w-md rounded-2xl border-grayScale-200 sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2 text-lg font-bold text-grayScale-900">
+              <Trash2 className="h-5 w-5 text-red-600 shrink-0" aria-hidden />
+              Delete question type definition?
+            </DialogTitle>
+            <DialogDescription className="text-left text-grayScale-600">
+              This removes the template from the library. Existing questions that reference it may be affected. This
+              action cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          {definitionPendingDelete ? (
+            <div className="rounded-xl border border-grayScale-200 bg-grayScale-50 px-4 py-3 space-y-1">
+              <p className="text-sm font-semibold text-grayScale-900">{definitionPendingDelete.display_name}</p>
+              <p className="text-xs font-mono text-grayScale-500 break-all">
+                #{definitionPendingDelete.id} · {definitionPendingDelete.key}
+              </p>
+            </div>
+          ) : null}
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button
+              type="button"
+              variant="outline"
+              className="border-grayScale-200"
+              disabled={deleteSubmitting}
+              onClick={() => setDefinitionPendingDelete(null)}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              variant="destructive"
+              disabled={deleteSubmitting}
+              className="gap-2"
+              onClick={() => void handleConfirmDeleteDefinition()}
+            >
+              {deleteSubmitting ? <SpinnerIcon className="h-4 w-4" /> : <Trash2 className="h-4 w-4" aria-hidden />}
+              {deleteSubmitting ? "Deleting…" : "Delete definition"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
-  );
+  )
 }
diff --git a/src/pages/content-management/components/QuestionTypeCard.tsx b/src/pages/content-management/components/QuestionTypeCard.tsx
index c58ac2e..d7ce631 100644
--- a/src/pages/content-management/components/QuestionTypeCard.tsx
+++ b/src/pages/content-management/components/QuestionTypeCard.tsx
@@ -1,83 +1,90 @@
-import { Edit2, Trash2, Mic2, Keyboard, Layers, MicIcon } from "lucide-react";
-import { Badge } from "../../../components/ui/badge";
-import { Card } from "../../../components/ui/card";
-import { cn } from "../../../lib/utils";
+import { Edit2, Trash2, Layers, Shield } from "lucide-react"
+import { Badge } from "../../../components/ui/badge"
+import { Card } from "../../../components/ui/card"
+import { Button } from "../../../components/ui/button"
+import { cn } from "../../../lib/utils"
 
-interface QuestionTypeCardProps {
-  title: string;
-  exam: "DUOLINGO" | "IELTS" | "TOEFL";
-  skill: "Speaking" | "Writing" | "Listening" | "Reading";
-  variations: number;
-  status: "Published" | "Draft" | "Archived";
+export interface QuestionTypeDefinitionCardModel {
+  id: number
+  definitionKey: string
+  display_name: string
+  status?: string
+  is_system?: boolean
+  stimulusKindsCount: number
+  responseKindsCount: number
+  onEdit?: () => void
+  onDelete?: () => void
+  deleteDisabled?: boolean
 }
 
 export function QuestionTypeCard({
-  title,
-  exam,
-  skill,
-  variations,
+  id,
+  definitionKey,
+  display_name,
   status,
-}: QuestionTypeCardProps) {
-  const SkillIcon = skill === "Speaking" ? MicIcon : Keyboard;
-
-  const examColors = {
-    DUOLINGO: "bg-[#22C55EE5] text-[#fff] border-transparent",
-    IELTS: "bg-[#EF4444E5] text-[#fff] border-transparent",
-    TOEFL: "bg-[#DBEAFE] text-[#fff] border-transparent",
-  };
-
-  const statusColors = {
-    Published: "bg-[#F0FDF4] text-[#16A34A]",
-    Draft: "bg-grayScale-50 text-grayScale-500",
-    Archived: "bg-red-50 text-red-500",
-  };
+  is_system,
+  stimulusKindsCount,
+  responseKindsCount,
+  onEdit,
+  onDelete,
+  deleteDisabled,
+}: QuestionTypeDefinitionCardModel) {
+  const statusLabel = (status || "—").toString()
+  const isActive = statusLabel.toUpperCase() === "ACTIVE"
 
   return (
-    <Card className="group overflow-hidden border-grayScale-200 rounded-[12px] bg-white  transition-all duration-300">
-      <div className="px-4 py-6 space-y-8">
-        <h3 className="text-[20px] font-bold text-grayScale-900 leading-[1.2]">
-          {title}
-        </h3>
-
-        <div className="flex items-center justify-between">
-          <Badge
-            className={cn(
-              "px-3 py-1 rounded-[4px] text-[11px] font-bold tracking-wider shadow-none border-none",
-              examColors[exam],
-            )}
-          >
-            {exam}
-          </Badge>
-          <div className="flex items-center gap-1 text-grayScale-900 font-bold text-[13px]">
-            <SkillIcon className="h-4 w-4" />
-            {skill}
-          </div>
+    <Card className="group overflow-hidden border-grayScale-200 rounded-[12px] bg-white transition-all duration-300">
+      <div className="px-4 py-6 space-y-4">
+        <div className="flex items-start justify-between gap-2">
+          <h3 className="text-[18px] font-bold text-grayScale-900 leading-[1.2]">{display_name}</h3>
+          {is_system ? (
+            <Badge className="shrink-0 border-none bg-violet-100 text-violet-800 flex items-center gap-1">
+              <Shield className="h-3 w-3" />
+              System
+            </Badge>
+          ) : null}
         </div>
 
-        <div className="flex items-center gap-2.5 text-[#9E2891] font-medium text-[15px]">
-          <Layers className="h-[16px] w-[16px]" />
-          {variations} Variations
+        <p className="text-[12px] font-mono text-grayScale-500 break-all">#{id} · {definitionKey}</p>
+
+        <div className="flex flex-wrap items-center gap-2 text-grayScale-700 font-medium text-[14px]">
+          <Layers className="h-4 w-4 text-[#9E2891]" />
+          <span>
+            {stimulusKindsCount} stimulus kinds · {responseKindsCount} response kinds
+          </span>
         </div>
 
-        <div className="pt-4 flex items-center justify-between border-t border-grayScale-200">
+        <div className="pt-4 flex items-center justify-between border-t border-grayScale-200 gap-2">
           <Badge
             className={cn(
               "px-3 py-1 rounded-[4px] text-[12px] font-bold shadow-none border-none",
-              statusColors[status],
+              isActive ? "bg-[#F0FDF4] text-[#16A34A]" : "bg-grayScale-50 text-grayScale-600",
             )}
           >
-            {status}
+            {statusLabel}
           </Badge>
-          <div className="flex items-center gap-5 transition-opacity">
-            <button className="text-grayScale-500/70 transition-all">
-              <Edit2 className="h-5 w-5" />
-            </button>
-            <button className="text-grayScale-500/70 transition-all">
-              <Trash2 className="h-5 w-5" />
-            </button>
+          <div className="flex items-center gap-1">
+            {onEdit ? (
+              <Button type="button" variant="ghost" size="sm" className="h-9 w-9 p-0" onClick={onEdit} aria-label="Edit">
+                <Edit2 className="h-4 w-4 text-grayScale-500" />
+              </Button>
+            ) : null}
+            {onDelete ? (
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="h-9 w-9 p-0"
+                disabled={deleteDisabled}
+                onClick={onDelete}
+                aria-label="Delete"
+              >
+                <Trash2 className="h-4 w-4 text-grayScale-500 disabled:opacity-30" />
+              </Button>
+            ) : null}
           </div>
         </div>
       </div>
     </Card>
-  );
+  )
 }
diff --git a/src/pages/content-management/components/question-type-steps/ComponentKindCard.tsx b/src/pages/content-management/components/question-type-steps/ComponentKindCard.tsx
new file mode 100644
index 0000000..4b2d1e1
--- /dev/null
+++ b/src/pages/content-management/components/question-type-steps/ComponentKindCard.tsx
@@ -0,0 +1,47 @@
+import { Check } from "lucide-react"
+import { cn } from "../../../../lib/utils"
+import type { LucideIcon } from "lucide-react"
+
+interface ComponentKindCardProps {
+  label: string
+  Icon: LucideIcon
+  selected: boolean
+  onClick: () => void
+}
+
+export function ComponentKindCard({ label, Icon, selected, onClick }: ComponentKindCardProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        "flex flex-col items-start justify-between p-4 min-h-[132px] rounded-[16px] border text-left transition-all group relative",
+        selected
+          ? "border-[#9E2891] bg-white shadow-[0_4px_12px_rgba(158,40,145,0.08)] ring-1 ring-[#9E2891]"
+          : "border-grayScale-200 bg-white hover:border-grayScale-300 hover:bg-grayScale-50/80",
+      )}
+    >
+      <div className="w-full flex items-start justify-between gap-2">
+        <div
+          className={cn(
+            "h-12 w-12 rounded-xl flex items-center justify-center shrink-0 transition-colors",
+            selected ? "bg-[#9E2891] text-white" : "bg-[#F1F5F9] text-grayScale-600 group-hover:bg-grayScale-100",
+          )}
+        >
+          <Icon className="h-6 w-6" />
+        </div>
+        <div
+          className={cn(
+            "h-6 w-6 rounded-full border-2 flex items-center justify-center shrink-0 transition-all",
+            selected ? "border-[#9E2891] bg-white" : "border-grayScale-300 bg-white",
+          )}
+        >
+          {selected ? <Check className="h-3.5 w-3.5 text-[#9E2891] stroke-[3]" /> : null}
+        </div>
+      </div>
+      <span className={cn("text-[15px] font-bold leading-tight mt-2", selected ? "text-grayScale-900" : "text-grayScale-800")}>
+        {label}
+      </span>
+    </button>
+  )
+}
diff --git a/src/pages/content-management/components/question-type-steps/QuestionTypeBasicInfoStep.tsx b/src/pages/content-management/components/question-type-steps/QuestionTypeBasicInfoStep.tsx
index ad75911..299661d 100644
--- a/src/pages/content-management/components/question-type-steps/QuestionTypeBasicInfoStep.tsx
+++ b/src/pages/content-management/components/question-type-steps/QuestionTypeBasicInfoStep.tsx
@@ -1,150 +1,118 @@
-import { useState } from "react";
-import { X, ArrowRight } from "lucide-react";
-import { Button } from "../../../../components/ui/button";
-import { Card } from "../../../../components/ui/card";
-import { Select } from "../../../../components/ui/select";
-import { Badge } from "../../../../components/ui/badge";
+import { ArrowRight } from "lucide-react"
+import { Button } from "../../../../components/ui/button"
+import { Card } from "../../../../components/ui/card"
+import { Input } from "../../../../components/ui/input"
+import { Textarea } from "../../../../components/ui/textarea"
+import { Select } from "../../../../components/ui/select"
+import type { QuestionTypeDefinitionCreatePayload } from "../../../../types/questionTypeDefinition.types"
+import type { FieldErrorMap } from "../../lib/questionTypeDefinitionValidation"
 
 interface QuestionTypeBasicInfoStepProps {
-  onNext: () => void;
+  draft: QuestionTypeDefinitionCreatePayload
+  setDraft: React.Dispatch<React.SetStateAction<QuestionTypeDefinitionCreatePayload>>
+  errors: FieldErrorMap
+  onNext: () => void
+  /** When editing an existing definition, the key is immutable on the server */
+  keyReadOnly?: boolean
 }
 
 export function QuestionTypeBasicInfoStep({
+  draft,
+  setDraft,
+  errors,
   onNext,
+  keyReadOnly,
 }: QuestionTypeBasicInfoStepProps) {
-  const [selectedChips, setSelectedChips] = useState([
-    "Multiple Choice",
-    "Sentence Completion",
-  ]);
-  const suggestions = ["Matching Headings", "True/False/NG"];
-
-  const removeChip = (chip: string) => {
-    setSelectedChips(selectedChips.filter((c) => c !== chip));
-  };
-
-  const addChip = (chip: string) => {
-    if (!selectedChips.includes(chip)) {
-      setSelectedChips([...selectedChips, chip]);
-    }
-  };
-
   return (
     <div className="space-y-8 pb-32">
       <Card className="max-w-4xl mx-auto overflow-hidden border-grayScale-100 shadow-sm rounded-2xl bg-white">
         <div className="p-10 border-b border-grayScale-200">
-          <h2 className="text-[20px] font-medium text-grayScale-900">
-            STEP 1: Basic Info
-          </h2>
+          <h2 className="text-[20px] font-medium text-grayScale-900">STEP 1: Definition basics</h2>
           <p className="text-grayScale-500 font-medium mt-1">
-            Define what this question type is and where it applies.
+            Set the reusable key, display name, and status. On the next step you will pick stimulus and response
+            component types from the live catalog (
+            <code className="text-xs bg-grayScale-100 px-1 rounded">GET /questions/component-catalog</code>
+            ).
           </p>
         </div>
 
-        <div className="p-10 space-y-10">
-          {/* Top Row: Course Type & Skill Category */}
-          <div className="grid grid-cols-2 gap-10">
-            <div className="space-y-3">
+        <div className="p-10 space-y-8">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="space-y-2">
               <label className="text-[14px] font-medium text-grayScale-700 flex items-center gap-1">
-                Course Type <span className="text-red-500">*</span>
+                Key <span className="text-red-500">*</span>
               </label>
-              <Select className="h-12 rounded-[12px] border-grayScale-300 bg-[#F8FAFC] font-medium text-grayScale-900 transition-all ">
-                <option>Select an exam type</option>
-                <option>IELTS</option>
-                <option>Duolingo</option>
-                <option>TOEFL</option>
-              </Select>
-              <p className="text-grayScale-400 text-[13px] font-medium leading-relaxed">
-                The core framework for the practice test.
+              <Input
+                className="h-12 rounded-[12px] border-grayScale-300 bg-[#F8FAFC] disabled:opacity-70"
+                placeholder="e.g. dynamic_visual_mcq_001"
+                value={draft.key}
+                onChange={(e) => setDraft((d) => ({ ...d, key: e.target.value }))}
+                readOnly={keyReadOnly}
+                disabled={keyReadOnly}
+              />
+              {errors.key ? <p className="text-sm text-red-600">{errors.key}</p> : null}
+              <p className="text-grayScale-400 text-[13px] font-medium">
+                {keyReadOnly
+                  ? "Key cannot be changed when editing an existing definition."
+                  : "Unique slug-like identifier stored on the definition."}
               </p>
             </div>
 
-            <div className="space-y-3">
+            <div className="space-y-2">
               <label className="text-[14px] font-medium text-grayScale-700 flex items-center gap-1">
-                Skill Category <span className="text-red-500">*</span>
+                Display name <span className="text-red-500">*</span>
               </label>
-              <Select className="h-12 rounded-[12px] border-grayScale-300 bg-[#F8FAFC] font-medium text-grayScale-900 transition-all ">
-                <option>Select a skill</option>
-                <option>Speaking</option>
-                <option>Writing</option>
-                <option>Listening</option>
-                <option>Reading</option>
-              </Select>
-            </div>
-          </div>
-
-          {/* Question Type */}
-          <div className="space-y-3">
-            <label className="text-[14px] font-bold text-grayScale-700 flex items-center gap-1">
-              Question Type <span className="text-red-500">*</span>
-            </label>
-            <Select className="h-12 rounded-[12px] border-grayScale-300 bg-[#F8FAFC] font-medium text-grayScale-900 transition-all ">
-              <option>Single Format</option>
-              <option>Mixed Format</option>
-            </Select>
-          </div>
-
-          {/* Question Types Chip Input */}
-          <div className="space-y-3">
-            <label className="text-[14px] font-bold text-grayScale-700 flex items-center gap-1">
-              Question Types <span className="text-red-500">*</span>
-            </label>
-            <div className="min-h-[56px] p-3 flex flex-wrap gap-2.5 rounded-[12px] border border-grayScale-300 bg-[#F8FAFC]">
-              {selectedChips.map((chip) => (
-                <Badge
-                  key={chip}
-                  className="bg-[#9E28911A] text-[#9E2891] border-[#9E289133] px-2 py-0 rounded-full text-[13px] font-medium flex items-center gap-2"
-                >
-                  {chip}
-                  <button
-                    onClick={() => removeChip(chip)}
-                    className="hover:text-red-500 transition-colors"
-                  >
-                    <X className="h-3.5 w-3.5" />
-                  </button>
-                </Badge>
-              ))}
-              <input
-                className="flex-1 min-w-[150px] bg-transparent border-none focus:ring-0 text-[14px] font-medium text-grayScale-900 px-3 placeholder:text-grayScale-400"
-                placeholder="Add question types..."
+              <Input
+                className="h-12 rounded-[12px] border-grayScale-300 bg-[#F8FAFC]"
+                placeholder="e.g. Speak About the Photo"
+                value={draft.display_name}
+                onChange={(e) => setDraft((d) => ({ ...d, display_name: e.target.value }))}
               />
+              {errors.display_name ? <p className="text-sm text-red-600">{errors.display_name}</p> : null}
             </div>
+          </div>
 
-            <div className="flex items-center gap-3 pt-1">
-              <span className="text-[13px] font-medium text-grayScale-500">
-                Suggestions:
-              </span>
-              <div className="flex items-center gap-2">
-                {suggestions.map((s) => (
-                  <button
-                    key={s}
-                    onClick={() => addChip(s)}
-                    className="px-3 py-1.5 rounded-[6px] border border-grayScale-300 text-[13px] font-medium text-grayScale-600 hover:bg-grayScale-50 hover:text-[#9E2891] hover:border-[#9E2891]/20 transition-all"
-                  >
-                    {s}
-                  </button>
-                ))}
-              </div>
-            </div>
+          <div className="space-y-2">
+            <label className="text-[14px] font-medium text-grayScale-700">Description</label>
+            <Textarea
+              className="min-h-[100px] rounded-[12px] border-grayScale-300 bg-[#F8FAFC]"
+              placeholder="Optional description for admins"
+              value={draft.description ?? ""}
+              onChange={(e) => setDraft((d) => ({ ...d, description: e.target.value }))}
+            />
+          </div>
+
+          <div className="space-y-2 max-w-xs">
+            <label className="text-[14px] font-medium text-grayScale-700 flex items-center gap-1">
+              Status <span className="text-red-500">*</span>
+            </label>
+            <Select
+              className="h-12 rounded-[12px] border-grayScale-300 bg-[#F8FAFC]"
+              value={draft.status}
+              onChange={(e) =>
+                setDraft((d) => ({
+                  ...d,
+                  status: e.target.value === "INACTIVE" ? "INACTIVE" : "ACTIVE",
+                }))
+              }
+            >
+              <option value="ACTIVE">Active</option>
+              <option value="INACTIVE">Inactive (draft)</option>
+            </Select>
           </div>
         </div>
 
-        {/* Footer */}
-        <div className="px-4 py-4 border border-grayScale-200 flex items-center justify-between bg-[#F8FAFC]">
-          <Button
-            variant="outline"
-            className="h-10 px-6 rounded-[6px] border-none shadow-none text-grayScale-600 font-bold hover:bg-grayScale-100"
-          >
-            Cancel
-          </Button>
+        <div className="px-4 py-4 border border-grayScale-200 flex items-center justify-end bg-[#F8FAFC]">
           <Button
+            type="button"
             onClick={onNext}
             className="h-10 px-10 rounded-[6px] bg-[#9E2891] font-medium text-white shadow-lg shadow-brand-500/10 hover:bg-[#8A237E] transition-all flex items-center gap-3"
           >
-            Next: Structure
+            Next: Input and answer types
             <ArrowRight className="h-5 w-5" />
           </Button>
         </div>
       </Card>
     </div>
-  );
+  )
 }
diff --git a/src/pages/content-management/components/question-type-steps/QuestionTypeConfigStep.tsx b/src/pages/content-management/components/question-type-steps/QuestionTypeConfigStep.tsx
index 110a7ab..a3c6791 100644
--- a/src/pages/content-management/components/question-type-steps/QuestionTypeConfigStep.tsx
+++ b/src/pages/content-management/components/question-type-steps/QuestionTypeConfigStep.tsx
@@ -1,1190 +1,246 @@
-import { useState } from "react";
+import { useState } from "react"
 import {
-  ChevronUp,
-  ChevronDown,
-  Plus,
+  ArrowLeft,
   ArrowRight,
-  Clock,
-  Info,
-  Volume2,
-  FileText,
-  Image as ImageIcon,
-  Link2,
-  CheckSquare,
-  Table as TableIcon,
-  GitBranch,
-  Type,
-  ListTodo,
-  FileUp,
-  GitCompare,
-  MousePointer2,
-  Mic2,
+  ChevronDown,
+  ChevronUp,
   Hourglass,
-  Check,
-  GripVertical,
-  MinusCircle,
-  UploadCloud,
-  ArrowDown,
-  Trash2,
-  X,
-  Sliders,
-  Settings2,
-} from "lucide-react";
-import { Button } from "../../../../components/ui/button";
-import { Input } from "../../../../components/ui/input";
-import { cn } from "../../../../lib/utils";
-
-interface ConfigCardProps {
-  icon: any;
-  label: string;
-  selected: boolean;
-  onClick: () => void;
-}
-
-function ConfigCard({ icon: Icon, label, selected, onClick }: ConfigCardProps) {
-  return (
-    <button
-      onClick={onClick}
-      className={cn(
-        "flex flex-col items-start justify-between p-4 h-[140px] rounded-[16px] border transition-all group relative",
-        selected
-          ? "border-[#9E2891] bg-white shadow-[0_4px_12px_rgba(158,40,145,0.08)] ring-1 ring-[#9E2891]"
-          : "border-grayScale-300 bg-white hover:border-grayScale-200 hover:bg-grayScale-25",
-      )}
-    >
-      <div className="w-full flex items-start justify-between">
-        <div
-          className={cn(
-            "h-12 w-12 rounded-xl flex items-center justify-center transition-colors",
-            selected
-              ? "bg-[#9E2891] text-white"
-              : "bg-[#F1F5F9] text-grayScale-600 group-hover:bg-grayScale-100",
-          )}
-        >
-          <Icon className="h-6 w-6" />
-        </div>
-
-        <div
-          className={cn(
-            "h-6 w-6 rounded-full border-2 flex items-center justify-center transition-all mt-1",
-            selected
-              ? "border-[#9E2891] bg-white"
-              : "border-grayScale-300 bg-white",
-          )}
-        >
-          {selected && (
-            <Check className="h-3.5 w-3.5 text-[#9E2891] stroke-[3]" />
-          )}
-        </div>
-      </div>
-
-      <span
-        className={cn(
-          "text-[15px] font-bold text-left leading-tight",
-          selected ? "text-grayScale-800" : "text-grayScale-800",
-        )}
-      >
-        {label}
-      </span>
-    </button>
-  );
-}
+} from "lucide-react"
+import { Button } from "../../../../components/ui/button"
+import { Card } from "../../../../components/ui/card"
+import { Input } from "../../../../components/ui/input"
+import type { QuestionTypeDefinitionCreatePayload } from "../../../../types/questionTypeDefinition.types"
+import type { FieldErrorMap } from "../../lib/questionTypeDefinitionValidation"
+import { SchemaBuilderSection } from "./SchemaBuilderSection"
+import { ComponentKindCard } from "./ComponentKindCard"
+import { getResponseKindPresentation, getStimulusKindPresentation } from "./componentKindUi"
 
 interface QuestionTypeConfigStepProps {
-  onNext: () => void;
-  onBack: () => void;
+  draft: QuestionTypeDefinitionCreatePayload
+  setDraft: React.Dispatch<React.SetStateAction<QuestionTypeDefinitionCreatePayload>>
+  versionName: string
+  setVersionName: (v: string) => void
+  stimulusCatalogKinds: string[]
+  responseCatalogKinds: string[]
+  catalogLoading: boolean
+  catalogError: string | null
+  errors: FieldErrorMap
+  onNext: () => void
+  onBack: () => void
+}
+
+function toggleKind(list: string[], kind: string): string[] {
+  return list.includes(kind) ? list.filter((k) => k !== kind) : [...list, kind]
+}
+
+function rowErrorMap(side: "stimulus" | "response", errors: FieldErrorMap): Record<number, string> {
+  const prefix = `${side}_`
+  const out: Record<number, string> = {}
+  Object.entries(errors).forEach(([k, v]) => {
+    if (!k.startsWith(prefix)) return
+    const rest = k.slice(prefix.length)
+    const m = /^(\d+)$/.exec(rest)
+    if (m) out[Number(m[1])] = v
+  })
+  return out
 }
 
 export function QuestionTypeConfigStep({
+  draft,
+  setDraft,
+  versionName,
+  setVersionName,
+  stimulusCatalogKinds,
+  responseCatalogKinds,
+  catalogLoading,
+  catalogError,
+  errors,
   onNext,
   onBack,
 }: QuestionTypeConfigStepProps) {
-  const [expandedSection, setExpandedSection] = useState(
-    "Speak About the Photo",
-  );
-  const [selectedInputs, setSelectedInputs] = useState<string[]>([]);
-  const [selectedAnswers, setSelectedAnswers] = useState<string[]>([]);
-  const [matchingKeys, setMatchingKeys] = useState([
-    "Verbose",
-    "Succinct",
-    "Ambiguous",
-  ]);
-  const [matchingValues, setMatchingValues] = useState([
-    "Using more words than needed",
-    "Briefly and clearly expressed",
-    "Open to more than one interpretation",
-  ]);
-  const [shortQuestions, setShortQuestions] = useState([
-    "Verbose",
-    "Succinct",
-    "Ambiguous",
-  ]);
-  const [shortAnswers, setShortAnswers] = useState([
-    "Using more words than needed",
-    "Briefly and clearly expressed",
-    "Open to more than one interpretation",
-  ]);
-  const [answerKeyItems, setAnswerKeyItems] = useState(["C", "B", "A"]);
-  const [selectedLabelSet, setSelectedLabelSet] = useState(
-    "True / False / Not Given",
-  );
-  const [correctLabelAnswer, setCorrectLabelAnswer] = useState("True");
-  const [mcOptions, setMcOptions] = useState([
-    { label: "A", text: "The process of photosynthesis", isCorrect: false },
-    { label: "B", text: "Cellular respiration in plants", isCorrect: true },
-    { label: "C", text: "Enter option text...", isCorrect: false },
-  ]);
-  const [selectionMode, setSelectionMode] = useState<"Single" | "Multiple">(
-    "Single",
-  );
-  const [missingWordTags, setMissingWordTags] = useState(["Jump", "Lazy"]);
-  const [distractors, setDistractors] = useState<
-    Record<string, { id: number; text: string }[]>
-  >({
-    Jump: [
-      { id: 1, text: "sleepy" },
-      { id: 2, text: "runs" },
-    ],
-    Lazy: [
-      { id: 3, text: "sleepy" },
-      { id: 4, text: "runs" },
-    ],
-  });
-  const [tableRows, setTableRows] = useState([
-    {
-      id: "01",
-      content: "Basic introduction and greetings",
-      type: "Read Only",
-    },
-    {
-      id: "02",
-      content: "Identifying main ideas in simple text",
-      type: "Learner Input",
-    },
-    { id: "03", content: "Understanding specific details", type: "Read Only" },
-    { id: "04", content: "Inference and deduction skills", type: "Read Only" },
-    { id: "05", content: "Vocabulary usage in context", type: "Learner Input" },
-  ]);
-  const [flowchartSteps, setFlowchartSteps] = useState([
-    { id: 1, content: "Enter text for step 1...", isBlank: false },
-    { id: 2, content: "Process Data", isBlank: true },
-    { id: 3, content: "Enter text for step 3...", isBlank: false },
-    { id: 4, content: "Enter text for step 4...", isBlank: false },
-    { id: 5, content: "Enter text for step 5...", isBlank: false },
-  ]);
+  const [panelOpen, setPanelOpen] = useState(true)
+  const [advancedOpen, setAdvancedOpen] = useState(false)
 
-  const inputTypes = [
-    { label: "Prep Time", icon: Clock },
-    { label: "Instruction", icon: Info },
-    { label: "Audio Clip", icon: Volume2 },
-    { label: "Text Passage", icon: FileText },
-    { label: "Image", icon: ImageIcon },
-    { label: "Matching Inputs", icon: Link2 },
-    { label: "Select Missing Words", icon: ListTodo },
-    { label: "Table", icon: TableIcon },
-    { label: "Flow Chart", icon: GitBranch },
-  ];
-
-  const answerTypes = [
-    { label: "Audio Clip", icon: Mic2 },
-    { label: "Text Input", icon: Type },
-    { label: "Short Answer", icon: ListTodo },
-    { label: "Multiple Choice", icon: CheckSquare },
-    { label: "Answer Timer", icon: Clock },
-    { label: "Select Missing Words", icon: ListTodo },
-    { label: "PDF Upload", icon: FileUp },
-    { label: "Matching Answer", icon: GitCompare },
-    { label: "Label Selection", icon: MousePointer2 },
-  ];
-
-  const toggleSelection = (list: string[], setList: any, label: string) => {
-    if (list.includes(label)) {
-      setList(list.filter((item) => item !== label));
-    } else {
-      setList([...list, label]);
-    }
-  };
+  const title = draft.display_name?.trim() || "Untitled definition"
 
   return (
-    <div className="space-y-6 pb-32">
-      {/* Variation Accordion */}
-      <div className="space-y-8">
-        <div className="p-4  bg-[#9E289114] flex items-center justify-between cursor-pointer border rounded-[8px] border-[#9E289133]">
-          <div className="flex items-center gap-4">
-            <div className="h-10 w-10 rounded-full bg-[#9E289133] flex items-center justify-center text-[#9E2891]">
+    <div className="space-y-8 pb-32">
+      <Card className="max-w-6xl mx-auto overflow-hidden border border-grayScale-200 shadow-sm rounded-2xl bg-white">
+        <button
+          type="button"
+          onClick={() => setPanelOpen((o) => !o)}
+          className="w-full flex items-center justify-between gap-4 px-5 py-4 bg-violet-100/90 hover:bg-violet-100 border-b border-violet-200/80 text-left transition-colors"
+        >
+          <div className="flex items-center gap-3 min-w-0">
+            <div className="h-10 w-10 rounded-xl bg-white/80 flex items-center justify-center text-violet-700 shrink-0 shadow-sm">
               <Hourglass className="h-5 w-5" />
             </div>
-            <h3 className="text-[18px] font-bold text-grayScale-900">
-              Speak About the Photo
-            </h3>
+            <span className="text-[17px] font-bold text-grayScale-900 truncate">{title}</span>
           </div>
-          {expandedSection === "Speak About the Photo" ? (
-            <ChevronUp className="h-6 w-6 text-brand-500" />
+          {panelOpen ? (
+            <ChevronUp className="h-5 w-5 text-grayScale-600 shrink-0" />
           ) : (
-            <ChevronDown className="h-6 w-6 text-brand-500" />
+            <ChevronDown className="h-5 w-5 text-grayScale-600 shrink-0" />
           )}
-        </div>
+        </button>
 
-        <div className="space-y-3 bg-white p-4 rounded-2xl border border-grayScale-200">
-          <label className="text-[14px] font-medium text-grayScale-700">
-            Version Name <span className="text-red-500">*</span>
-          </label>
-          <Input
-            className="h-12 rounded-[6px] border-grayScale-200 bg-[#F8FAFC] font-medium placeholder:text-grayScale-500"
-            placeholder="Test 1"
-          />
-        </div>
-
-        <div className="grid grid-cols-2 gap-12">
-          {/* SECTION A */}
-          <div className="bg-white p-6 rounded-2xl border border-grayScale-200 space-y-8">
-            <div className="border-b border-grayScale-200 pb-4">
-              <h4 className="text-[16px] font-medium text-grayScale-900 uppercase tracking-tight">
-                SECTION A: Question Input Types
-              </h4>
-              <p className="text-grayScale-500 text-[14px] font-medium mt-1">
-                Choose how the question is presented to the learner.
+        {panelOpen ? (
+          <div className="p-6 sm:p-10 space-y-10">
+            <div className="space-y-2 max-w-xl">
+              <label className="text-[14px] font-semibold text-grayScale-700">
+                Version name <span className="text-red-500">*</span>
+              </label>
+              <Input
+                className="h-11 rounded-[10px] border-grayScale-200 bg-[#F8FAFC]"
+                value={versionName}
+                onChange={(e) => setVersionName(e.target.value)}
+                placeholder="e.g. Test 1"
+              />
+              {errors.version_name ? (
+                <p className="text-sm font-medium text-red-600">{errors.version_name}</p>
+              ) : null}
+              <p className="text-[12px] text-grayScale-400">
+                Local label for this authoring pass (not sent to the API unless you add it to description later).
               </p>
             </div>
 
-            <div className="grid grid-cols-3 gap-4">
-              {inputTypes.map((type) => (
-                <ConfigCard
-                  key={type.label}
-                  {...type}
-                  selected={selectedInputs.includes(type.label)}
-                  onClick={() =>
-                    toggleSelection(
-                      selectedInputs,
-                      setSelectedInputs,
-                      type.label,
-                    )
-                  }
-                />
-              ))}
-            </div>
-
-            {/* Dynamic Inputs for Section A */}
-            {selectedInputs.length > 0 && (
-              <div className="space-y-6 pt-8 border-t border-grayScale-100">
-                {selectedInputs.map((input) => (
-                  <div
-                    key={input}
-                    className="animate-in fade-in slide-in-from-top-2 duration-300"
-                  >
-                    {input === "Prep Time" ? (
-                      <div className="space-y-3">
-                        <label className="text-[14px] font-medium text-grayScale-800">
-                          Prep Time
-                        </label>
-                        <div className="relative">
-                          <Input
-                            className="h-12 rounded-[12px] border-grayScale-300 bg-[#F8FAFC] font-medium text-grayScale-900 pr-12 placeholder:text-grayScale-400"
-                            placeholder="90"
-                          />
-                          <span className="absolute right-4 top-1/2 -translate-y-1/2 text-[13px] font-bold text-grayScale-400">
-                            SEC
-                          </span>
-                        </div>
-                      </div>
-                    ) : input === "Instruction" ? (
-                      <div className="space-y-3">
-                        <label className="text-[14px] font-medium text-grayScale-800">
-                          Instruction Text
-                        </label>
-                        <Input
-                          className="h-12 rounded-[12px] border-grayScale-300 bg-[#F8FAFC] font-medium text-grayScale-900 placeholder:text-grayScale-400"
-                          placeholder="e.g., Look at the image and describe what you see..."
-                        />
-                      </div>
-                    ) : input === "Image" ? (
-                      <div className="space-y-3">
-                        <div className="space-y-1">
-                          <label className="text-[14px] font-medium text-grayScale-800">
-                            Image Upload
-                          </label>
-                          <p className="text-[12px] font-medium text-grayScale-500">
-                            Upload your image. 1280×720px recommended.
-                          </p>
-                        </div>
-                        <div className="h-40 rounded-xl border-2 border-dashed border-grayScale-300 bg-[#F8FAFC] flex flex-col items-center justify-center gap-2 cursor-pointer hover:bg-grayScale-50 transition-all">
-                          <ImageIcon className="h-8 w-8 text-grayScale-400" />
-                          <span className="text-[14px] font-medium text-[#9E2891]">
-                            Click to upload
-                          </span>
-                        </div>
-                      </div>
-                    ) : input === "Text Passage" ? (
-                      <div className="rounded-xl border border-grayScale-200 overflow-hidden bg-white">
-                        <div className="p-4 flex items-center gap-3 bg-white">
-                          <div className="h-10 w-10 rounded-lg bg-[#9E289114] flex items-center justify-center text-[#9E2891]">
-                            <FileText className="h-5 w-5" />
-                          </div>
-                          <h4 className="text-[16px] font-bold text-[#9E2891]">
-                            Text Input
-                          </h4>
-                        </div>
-                        <div className="border-t border-dashed border-grayScale-200 mx-4" />
-                        <div className="p-6 space-y-4">
-                          <textarea
-                            className="w-full h-48 p-4 rounded-xl border border-grayScale-100 bg-[#F8FAFC] text-grayScale-900 placeholder:text-[#94A3B8] focus:outline-none focus:ring-1 focus:ring-[#9E2891] resize-none"
-                            placeholder="Start typing your response here..."
-                          />
-                          <div className="flex items-center justify-between text-[13px] font-bold text-[#64748B]">
-                            <span>Word Count: 0</span>
-                            <span>Min: 150 words</span>
-                          </div>
-                        </div>
-                      </div>
-                    ) : input === "Matching Inputs" ? (
-                      <div className="space-y-8">
-                        <div className="space-y-4">
-                          <div className="flex items-center justify-between">
-                            <label className="text-[12px] font-bold text-grayScale-500 uppercase tracking-wider">
-                              COLUMN A (KEYS)
-                            </label>
-                            <span className="text-[11px] font-medium text-grayScale-400">
-                              Static
-                            </span>
-                          </div>
-                          <div className="space-y-3">
-                            {matchingKeys.map((key, idx) => (
-                              <div
-                                key={idx}
-                                className="flex items-center gap-3"
-                              >
-                                <GripVertical className="h-4 w-4 text-grayScale-300 cursor-grab" />
-                                <span className="text-[14px] font-medium text-grayScale-600 min-w-4">
-                                  {idx + 1}.
-                                </span>
-                                <Input
-                                  value={key}
-                                  className="h-11 rounded-[8px] border-grayScale-200 bg-white font-medium text-grayScale-800"
-                                  readOnly
-                                />
-                                <MinusCircle className="h-5 w-5 text-grayScale-300 cursor-pointer hover:text-red-500 transition-colors" />
-                              </div>
-                            ))}
-                          </div>
-                          <button className="flex items-center gap-2 text-[14px] font-bold text-[#9E2891] hover:underline">
-                            <Plus className="h-4 w-4" />
-                            Add Key Item
-                          </button>
-                        </div>
-
-                        <div className="space-y-4">
-                          <div className="flex items-center justify-between">
-                            <label className="text-[12px] font-bold text-grayScale-500 uppercase tracking-wider">
-                              COLUMN B (OPTIONAL)
-                            </label>
-                            <span className="text-[11px] font-medium text-grayScale-400">
-                              Draggable
-                            </span>
-                          </div>
-                          <div className="space-y-3">
-                            {matchingValues.map((val, idx) => (
-                              <div
-                                key={idx}
-                                className="flex items-center gap-3"
-                              >
-                                <GripVertical className="h-4 w-4 text-grayScale-300 cursor-grab" />
-                                <span className="text-[14px] font-medium text-grayScale-600 min-w-4">
-                                  {String.fromCharCode(65 + idx)}.
-                                </span>
-                                <Input
-                                  value={val}
-                                  className="h-11 rounded-[8px] border-grayScale-200 bg-white font-medium text-grayScale-800"
-                                  readOnly
-                                />
-                                <MinusCircle className="h-5 w-5 text-grayScale-300 cursor-pointer hover:text-red-500 transition-colors" />
-                              </div>
-                            ))}
-                          </div>
-                          <button className="flex items-center gap-2 text-[14px] font-bold text-[#9E2891] hover:underline">
-                            <Plus className="h-4 w-4" />
-                            Add Value Item
-                          </button>
-                        </div>
-                      </div>
-                    ) : input === "Audio Clip" ? (
-                      <div className="space-y-4">
-                        <div className="flex items-center justify-between">
-                          <label className="text-[16px] font-medium text-grayScale-900">
-                            Audio Source
-                          </label>
-                          <span className="text-[14px] font-medium text-[#64748B]">
-                            MP3, WAV, OGG
-                          </span>
-                        </div>
-                        <div className="h-48 rounded-2xl border-2 border-dashed border-grayScale-200 bg-white flex flex-col items-center justify-center gap-4 cursor-pointer hover:bg-grayScale-50 transition-all group">
-                          <div className="h-14 w-14 rounded-full bg-[#9E289114] flex items-center justify-center text-[#9E2891]">
-                            <UploadCloud className="h-7 w-7" />
-                          </div>
-                          <div className="text-center space-y-1">
-                            <p className="text-[16px] font-bold text-grayScale-900">
-                              Click to upload or drag file
-                            </p>
-                            <p className="text-[14px] font-medium text-grayScale-500">
-                              Max size 25MB
-                            </p>
-                          </div>
-                        </div>
-                      </div>
-                    ) : input === "Table" ? (
-                      <div className="space-y-4 overflow-hidden border border-grayScale-100 rounded-xl">
-                        <div className="grid grid-cols-[60px_1fr_140px] px-6 py-3 bg-[#F8FAFC] border-b border-grayScale-100">
-                          <span className="text-[12px] font-bold text-grayScale-500">
-                            #
-                          </span>
-                          <span className="text-[12px] font-bold text-grayScale-500">
-                            ROW CONTENT
-                          </span>
-                          <span className="text-[12px] font-bold text-grayScale-500">
-                            INTERACTION
-                          </span>
-                        </div>
-                        <div className="divide-y divide-grayScale-100">
-                          {tableRows.map((row) => (
-                            <div
-                              key={row.id}
-                              className="grid grid-cols-[60px_1fr_140px] items-center px-6 py-4 group hover:bg-grayScale-25 transition-all"
-                            >
-                              <span
-                                className={cn(
-                                  "text-[14px] font-bold",
-                                  row.type === "Learner Input"
-                                    ? "text-[#9E2891]"
-                                    : "text-grayScale-400",
-                                )}
-                              >
-                                {row.id}
-                              </span>
-                              <div className="pr-8">
-                                <Input
-                                  value={row.content}
-                                  className={cn(
-                                    "h-11 rounded-[10px] border-grayScale-200 bg-white font-medium text-[14px]",
-                                    row.type === "Learner Input"
-                                      ? "border-[#9E2891] ring-1 ring-[#9E28911A]"
-                                      : "border-grayScale-200",
-                                  )}
-                                  readOnly
-                                />
-                              </div>
-                              <div className="flex items-center gap-3">
-                                <button
-                                  className={cn(
-                                    "w-11 h-6 rounded-full transition-all relative shrink-0",
-                                    row.type === "Learner Input"
-                                      ? "bg-[#9E2891]"
-                                      : "bg-grayScale-200",
-                                  )}
-                                >
-                                  <div
-                                    className={cn(
-                                      "absolute top-1 w-4 h-4 rounded-full bg-white transition-all shadow-sm",
-                                      row.type === "Learner Input"
-                                        ? "left-6"
-                                        : "left-1",
-                                    )}
-                                  />
-                                </button>
-                                <span className="text-[11px] font-bold text-grayScale-500 leading-tight w-20">
-                                  {row.type === "Read Only"
-                                    ? "Read\nOnly"
-                                    : "Learner\nInput"}
-                                </span>
-                              </div>
-                            </div>
-                          ))}
-                        </div>
-                        <div className="p-4 bg-white border-t border-grayScale-50">
-                          <button className="flex items-center justify-center h-8 w-8 text-[#9E2891] hover:bg-[#9E289114] rounded-full transition-all">
-                            <Plus className="h-6 w-6 stroke-[3]" />
-                          </button>
-                        </div>
-                      </div>
-                    ) : input === "Flow Chart" ? (
-                      <div className="space-y-6 flex flex-col items-center">
-                        <div className="text-[13px] font-bold text-grayScale-400 uppercase tracking-widest">
-                          Start
-                        </div>
-                        <ArrowDown className="h-5 w-5 text-grayScale-300" />
-
-                        <div className="w-full space-y-6">
-                          {flowchartSteps.map((step, idx) => (
-                            <div
-                              key={step.id}
-                              className="flex flex-col items-center gap-6"
-                            >
-                              <div
-                                className={cn(
-                                  "w-full rounded-2xl border transition-all overflow-hidden bg-white",
-                                  step.isBlank
-                                    ? "border-[#9E2891] border-dashed shadow-[0_8px_20px_rgba(158,40,145,0.08)]"
-                                    : "border-grayScale-200",
-                                )}
-                              >
-                                <div
-                                  className={cn(
-                                    "px-6 py-4 flex items-center justify-between border-b",
-                                    step.isBlank
-                                      ? "border-[#9E28911A]"
-                                      : "border-grayScale-100",
-                                  )}
-                                >
-                                  <div className="flex items-center gap-3">
-                                    <span
-                                      className={cn(
-                                        "text-[12px] font-bold uppercase tracking-wider",
-                                        step.isBlank
-                                          ? "text-[#9E2891]"
-                                          : "text-grayScale-500",
-                                      )}
-                                    >
-                                      STEP {step.id} {step.isBlank && "(BLANK)"}
-                                    </span>
-                                    {step.isBlank && (
-                                      <span className="px-2 py-0.5 rounded-full bg-[#9E2891] text-white text-[10px] font-bold tracking-tight">
-                                        LEARNER INPUT
-                                      </span>
-                                    )}
-                                  </div>
-                                  <GripVertical className="h-5 w-5 text-grayScale-300 cursor-grab" />
-                                </div>
-
-                                <div
-                                  className={cn(
-                                    "p-6 space-y-3",
-                                    step.isBlank && "bg-[#9E289108]",
-                                  )}
-                                >
-                                  <label className="text-[13px] font-bold text-grayScale-600">
-                                    {step.isBlank
-                                      ? "Correct Answer"
-                                      : "Step Content"}
-                                  </label>
-                                  <textarea
-                                    className={cn(
-                                      "w-full h-24 p-3 rounded-xl border font-medium text-[14px] resize-none focus:outline-none",
-                                      step.isBlank
-                                        ? "border-[#9E289133] bg-white text-[#9E2891] placeholder:text-[#9E28914D]"
-                                        : "border-grayScale-200 bg-[#F8FAFC] text-grayScale-800",
-                                    )}
-                                    value={step.content}
-                                    readOnly
-                                  />
-                                </div>
-
-                                <div
-                                  className={cn(
-                                    "px-6 py-4 flex items-center justify-between bg-white border-t",
-                                    step.isBlank
-                                      ? "border-[#9E28911A]"
-                                      : "border-grayScale-100",
-                                  )}
-                                >
-                                  <span className="text-[12px] font-bold text-grayScale-800 uppercase tracking-tight">
-                                    MARK AS BLANK
-                                  </span>
-                                  <button
-                                    className={cn(
-                                      "w-11 h-6 rounded-full transition-all relative shrink-0",
-                                      step.isBlank
-                                        ? "bg-[#9E2891]"
-                                        : "bg-grayScale-200",
-                                    )}
-                                  >
-                                    <div
-                                      className={cn(
-                                        "absolute top-1 w-4 h-4 rounded-full bg-white transition-all shadow-sm",
-                                        step.isBlank ? "left-6" : "left-1",
-                                      )}
-                                    />
-                                  </button>
-                                </div>
-                              </div>
-
-                              {idx < flowchartSteps.length - 1 && (
-                                <ArrowDown className="h-5 w-5 text-grayScale-300" />
-                              )}
-                            </div>
-                          ))}
-                        </div>
-
-                        <ArrowDown className="h-5 w-5 text-grayScale-300" />
-                        <div className="text-[13px] font-bold text-grayScale-400 uppercase tracking-widest">
-                          End
-                        </div>
-                      </div>
-                    ) : (
-                      <div className="space-y-3">
-                        <label className="text-[14px] font-medium text-grayScale-800">
-                          {input} Configuration
-                        </label>
-                        <Input
-                          className="h-12 rounded-[12px] border-grayScale-300 bg-[#F8FAFC] font-medium text-grayScale-900 placeholder:text-grayScale-400"
-                          placeholder={`Enter details for ${input}...`}
-                        />
-                      </div>
-                    )}
+            {catalogLoading ? (
+              <p className="text-sm text-grayScale-500">Loading component catalog…</p>
+            ) : catalogError ? (
+              <p className="text-sm text-red-600">{catalogError}</p>
+            ) : (
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-10 items-start">
+                <section className="space-y-4 min-w-0 lg:pr-2 lg:border-r lg:border-grayScale-200/90">
+                  <div>
+                    <h3 className="text-[13px] font-bold text-grayScale-500 uppercase tracking-[0.12em]">
+                      Section A: Question input types
+                    </h3>
+                    <p className="text-[14px] text-grayScale-500 mt-1 font-medium">
+                      Choose how the question is presented to the learner.
+                    </p>
                   </div>
-                ))}
-              </div>
-            )}
-          </div>
-
-          {/* SECTION B */}
-          <div className="bg-white p-6 rounded-2xl border border-grayScale-200">
-            <div className="space-y-8">
-              <div className="border-b border-grayScale-200 pb-4">
-                <h4 className="text-[16px] font-medium text-grayScale-900 uppercase tracking-tight">
-                  SECTION B: Answer Types
-                </h4>
-                <p className="text-grayScale-500 text-[14px] font-medium mt-1">
-                  How should the student answer this question?
-                </p>
-              </div>
-
-              <div className="grid grid-cols-3 gap-4">
-                {answerTypes.map((type) => (
-                  <ConfigCard
-                    key={type.label}
-                    {...type}
-                    selected={selectedAnswers.includes(type.label)}
-                    onClick={() =>
-                      toggleSelection(
-                        selectedAnswers,
-                        setSelectedAnswers,
-                        type.label,
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
+                    {stimulusCatalogKinds.map((kind) => {
+                      const { label, Icon } = getStimulusKindPresentation(kind)
+                      const selected = draft.stimulus_component_kinds.includes(kind)
+                      return (
+                        <ComponentKindCard
+                          key={kind}
+                          label={label}
+                          Icon={Icon}
+                          selected={selected}
+                          onClick={() =>
+                            setDraft((d) => ({
+                              ...d,
+                              stimulus_component_kinds: toggleKind(d.stimulus_component_kinds, kind),
+                            }))
+                          }
+                        />
                       )
-                    }
-                  />
-                ))}
-              </div>
+                    })}
+                  </div>
+                  {errors.stimulus_kinds ? (
+                    <p className="text-sm font-medium text-red-600">{errors.stimulus_kinds}</p>
+                  ) : null}
+                </section>
 
-              {/* Dynamic Inputs for Section B */}
-              {selectedAnswers.length > 0 && (
-                <div className="space-y-6 pt-8 border-t border-grayScale-100">
-                  {selectedAnswers.map((answer) => (
-                    <div
-                      key={answer}
-                      className="animate-in fade-in slide-in-from-top-2 duration-300"
-                    >
-                      {answer === "Multiple Choice" ? (
-                        <div className="space-y-8">
-                          {/* Selection Mode */}
-                          <div className="space-y-3">
-                            <label className="text-[14px] font-bold text-grayScale-700 uppercase tracking-tight">
-                              Selection Mode
-                            </label>
-                            <div className="flex bg-grayScale-50 p-1 rounded-xl w-fit">
-                              <button
-                                onClick={() => setSelectionMode("Single")}
-                                className={cn(
-                                  "flex items-center gap-2 px-8 py-2 rounded-lg transition-all font-bold text-[14px]",
-                                  selectionMode === "Single"
-                                    ? "bg-white text-[#9E2891] shadow-sm ring-1 ring-grayScale-100"
-                                    : "text-grayScale-500 hover:text-grayScale-700",
-                                )}
-                              >
-                                <div
-                                  className={cn(
-                                    "h-4 w-4 rounded-full border-2 flex items-center justify-center",
-                                    selectionMode === "Single"
-                                      ? "border-[#9E2891]"
-                                      : "border-grayScale-300",
-                                  )}
-                                >
-                                  {selectionMode === "Single" && (
-                                    <div className="h-2 w-2 rounded-full bg-[#9E2891]" />
-                                  )}
-                                </div>
-                                Single
-                              </button>
-                              <button
-                                onClick={() => setSelectionMode("Multiple")}
-                                className={cn(
-                                  "flex items-center gap-2 px-8 py-2 rounded-lg transition-all font-bold text-[14px]",
-                                  selectionMode === "Multiple"
-                                    ? "bg-white text-[#9E2891] shadow-sm ring-1 ring-grayScale-100"
-                                    : "text-grayScale-500 hover:text-grayScale-700",
-                                )}
-                              >
-                                <div
-                                  className={cn(
-                                    "h-4 w-4 rounded-md border-2 flex items-center justify-center",
-                                    selectionMode === "Multiple"
-                                      ? "border-[#9E2891] bg-[#9E289108]"
-                                      : "border-grayScale-300",
-                                  )}
-                                >
-                                  {selectionMode === "Multiple" && (
-                                    <Check className="h-3 w-3 text-[#9E2891] stroke-[3]" />
-                                  )}
-                                </div>
-                                Multiple
-                              </button>
-                            </div>
-                          </div>
-
-                          {/* Options List Header */}
-                          <div className="flex items-center justify-between">
-                            <label className="text-[16px] font-bold text-grayScale-900 tracking-tight">
-                              Options List
-                            </label>
-                            <span className="px-3 py-1 rounded bg-grayScale-50 text-[12px] font-medium text-grayScale-500 border border-grayScale-100">
-                              Select correct answer(s)
-                            </span>
-                          </div>
-
-                          {/* Question Input Block */}
-                          <div className="space-y-4">
-                            <div className="flex items-center gap-3">
-                              <div className="h-10 w-10 flex items-center justify-center rounded-lg bg-[#9E289114] text-[#9E2891]">
-                                <Type className="h-5 w-5" />
-                              </div>
-                              <span className="text-[16px] font-bold text-[#9E2891]">
-                                Question Input
-                              </span>
-                            </div>
-                            <div className="h-[2px] w-full bg-grayScale-100 border-dashed border-t" />
-                            <textarea
-                              className="w-full h-24 p-5 rounded-2xl border border-grayScale-200 bg-white font-medium text-[15px] resize-none focus:outline-none focus:ring-1 focus:ring-[#9E289133] placeholder:text-grayScale-400"
-                              placeholder="Type the Multiple choice question here..."
-                            />
-                          </div>
-
-                          {/* Options */}
-                          <div className="space-y-4 pt-4">
-                            {mcOptions.map((opt, idx) => (
-                              <div
-                                key={idx}
-                                className="flex items-center gap-4 group"
-                              >
-                                <div
-                                  className={cn(
-                                    "h-7 w-7 rounded-full border-2 flex items-center justify-center shrink-0 transition-all",
-                                    opt.isCorrect
-                                      ? "border-[#9E2891] bg-[#9E2891]"
-                                      : "border-grayScale-200 bg-white",
-                                  )}
-                                >
-                                  {opt.isCorrect && (
-                                    <div className="h-2 w-2 rounded-full bg-white" />
-                                  )}
-                                </div>
-                                <div
-                                  className={cn(
-                                    "flex-1 flex items-center gap-4 h-14 px-6 rounded-2xl border transition-all",
-                                    opt.isCorrect
-                                      ? "border-[#9E2891] bg-[#9E289105] shadow-[0_4px_12px_rgba(158,40,145,0.04)]"
-                                      : "border-grayScale-200 bg-white",
-                                  )}
-                                >
-                                  <span
-                                    className={cn(
-                                      "text-[14px] font-bold uppercase",
-                                      opt.isCorrect
-                                        ? "text-[#9E2891]"
-                                        : "text-grayScale-400",
-                                    )}
-                                  >
-                                    {opt.label}
-                                  </span>
-                                  <input
-                                    type="text"
-                                    value={opt.text}
-                                    className={cn(
-                                      "flex-1 bg-transparent font-medium text-[15px] focus:outline-none",
-                                      opt.isCorrect
-                                        ? "text-grayScale-900"
-                                        : "text-grayScale-800 placeholder:text-grayScale-400",
-                                    )}
-                                    placeholder="Enter option text..."
-                                    readOnly
-                                  />
-                                  <Trash2 className="h-5 w-5 text-grayScale-300 opacity-0 group-hover:opacity-100 cursor-pointer hover:text-red-500 transition-all" />
-                                </div>
-                              </div>
-                            ))}
-                          </div>
-
-                          {/* Action Buttons */}
-                          <div className="flex items-center gap-6 pt-4">
-                            <button className="flex-1 h-16 rounded-2xl border-2 border-dashed border-[#9E289126] bg-[#9E289105] flex items-center justify-center gap-3 text-[#9E2891] font-bold text-[15px] hover:bg-[#9E28910A] transition-all">
-                              <Plus className="h-5 w-5 stroke-[3]" />
-                              Add Another Option
-                            </button>
-                            <button className="flex-1 h-16 rounded-2xl border-2 border-dashed border-[#9E28911A] bg-white flex items-center justify-center gap-3 text-[#9E2891] font-bold text-[15px] hover:bg-grayScale-25 transition-all">
-                              <Plus className="h-5 w-5 stroke-[3]" />
-                              Add Another Question
-                            </button>
-                          </div>
-                        </div>
-                      ) : answer === "Select Missing Words" ? (
-                        <div className="space-y-8">
-                          {/* Input Words */}
-                          <div className="space-y-3">
-                            <label className="text-[14px] font-bold text-grayScale-700 tracking-tight">
-                              Input Words{" "}
-                              <span className="text-red-500">*</span>
-                            </label>
-                            <div className="min-h-[64px] p-2 rounded-[6px] border border-grayScale-200 bg-[#F8FAFC] flex flex-wrap gap-2 items-center">
-                              {missingWordTags.map((tag) => (
-                                <div
-                                  key={tag}
-                                  className="h-8 pl-3 pr-3 rounded-full bg-[#9E28911A] flex border border-[#9E289133] items-center gap-3"
-                                >
-                                  <span className="text-[14px] font-bold text-[#9E2891]">
-                                    {tag}
-                                  </span>
-                                  <button className="h-5 w-5 flex items-center justify-center text-[#9E2891] hover:bg-[#9E289126] rounded-full transition-all">
-                                    <X className="h-3 w-3 stroke-[3]" />
-                                  </button>
-                                </div>
-                              ))}
-                              <input
-                                className="flex-1 min-w-[120px] bg-transparent h-10 px-4 font-medium text-[15px] focus:outline-none placeholder:text-grayScale-400"
-                                placeholder="Add a word"
-                              />
-                            </div>
-                            <div className="flex items-start gap-2.5 text-grayScale-500">
-                              <Info className="h-4 w-4 mt-0.5 shrink-0" />
-                              <p className="text-[13px] font-medium leading-normal">
-                                Selected words will become input fields for
-                                students.
-                              </p>
-                            </div>
-                          </div>
-
-                          {/* Distractors Card */}
-                          <div className="rounded-[6px] border border-grayScale-200 bg-[#F8FAFC] overflow-hidden">
-                            <div className="px-8 py-5 border-b border-grayScale-100 flex items-center justify-between cursor-pointer group">
-                              <h5 className="text-[16px] font-bold text-grayScale-900 tracking-tight">
-                                Distractors (Fake Options)
-                              </h5>
-                              <ChevronUp className="h-5 w-5 text-grayScale-400 group-hover:text-grayScale-600 transition-all" />
-                            </div>
-                            <div className="px-8 pb-4">
-                              <div className="grid grid-cols-2 gap-12">
-                                {missingWordTags.map((word, wIdx) => (
-                                  <div key={word} className="space-y-5">
-                                    <h6 className="text-[15px] font-bold text-grayScale-900">
-                                      Word {wIdx + 1}: {word}
-                                    </h6>
-                                    <div className="space-y-4">
-                                      {distractors[word]?.map((dist) => (
-                                        <div
-                                          key={dist.id}
-                                          className="flex items-center"
-                                        >
-                                          <Input
-                                            value={dist.text}
-                                            className="h-10 rounded-[6px] border-grayScale-200 bg-white font-medium text-[14px]"
-                                            readOnly
-                                          />
-                                          <button className="h-10 w-10 shrink-0 flex items-center justify-center text-[#F43F5E]  rounded-xl hover:bg-[#F43F5E26] transition-all">
-                                            <MinusCircle className="h-4 w-4 stroke-[2.5]" />
-                                          </button>
-                                        </div>
-                                      ))}
-                                    </div>
-                                    <button className="flex items-center gap-2 text-[14px] font-bold text-[#9E2891] hover:underline">
-                                      <Plus className="h-4 w-4 stroke-[3]" />
-                                      Add Distractor
-                                    </button>
-                                  </div>
-                                ))}
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      ) : answer === "Short Answer" ? (
-                        <div className="space-y-8">
-                          <div className="space-y-4">
-                            <div className="flex items-center justify-between">
-                              <label className="text-[12px] font-bold text-grayScale-500 uppercase tracking-wider">
-                                QUESTIONS
-                              </label>
-                              <span className="text-[11px] font-medium text-grayScale-400">
-                                Static
-                              </span>
-                            </div>
-                            <div className="space-y-3">
-                              {shortQuestions.map((q, idx) => (
-                                <div
-                                  key={idx}
-                                  className="flex items-center gap-3"
-                                >
-                                  <GripVertical className="h-4 w-4 text-grayScale-300 cursor-grab" />
-                                  <span className="text-[14px] font-medium text-grayScale-600 min-w-4">
-                                    {idx + 1}.
-                                  </span>
-                                  <Input
-                                    value={q}
-                                    className="h-11 rounded-[8px] border-grayScale-200 bg-white font-medium text-grayScale-800"
-                                    readOnly
-                                  />
-                                  <MinusCircle className="h-5 w-5 text-grayScale-300 cursor-pointer hover:text-red-500 transition-colors" />
-                                </div>
-                              ))}
-                            </div>
-                            <button className="flex items-center gap-2 text-[14px] font-bold text-[#9E2891] hover:underline">
-                              <Plus className="h-4 w-4" />
-                              Add Questions
-                            </button>
-                          </div>
-
-                          <div className="space-y-4">
-                            <div className="flex items-center justify-between">
-                              <label className="text-[12px] font-bold text-grayScale-500 uppercase tracking-wider">
-                                ANSWERS
-                              </label>
-                              <span className="text-[11px] font-medium text-grayScale-400">
-                                Draggable
-                              </span>
-                            </div>
-                            <div className="space-y-3">
-                              {shortAnswers.map((a, idx) => (
-                                <div
-                                  key={idx}
-                                  className="flex items-center gap-3"
-                                >
-                                  <GripVertical className="h-4 w-4 text-grayScale-300 cursor-grab" />
-                                  <span className="text-[14px] font-medium text-grayScale-600 min-w-4">
-                                    {idx + 1}.
-                                  </span>
-                                  <Input
-                                    value={a}
-                                    className="h-11 rounded-[8px] border-grayScale-200 bg-white font-medium text-grayScale-800"
-                                    readOnly
-                                  />
-                                  <MinusCircle className="h-5 w-5 text-grayScale-300 cursor-pointer hover:text-red-500 transition-colors" />
-                                </div>
-                              ))}
-                            </div>
-                            <button className="flex items-center gap-2 text-[14px] font-bold text-[#9E2891] hover:underline">
-                              <Plus className="h-4 w-4" />
-                              Add answers
-                            </button>
-                          </div>
-                        </div>
-                      ) : answer === "Audio Clip" ? (
-                        <div className="space-y-4">
-                          <div className="flex items-center justify-between">
-                            <label className="text-[16px] font-medium text-grayScale-900">
-                              Audio Source
-                            </label>
-                            <span className="text-[14px] font-medium text-[#64748B]">
-                              MP3, WAV, OGG
-                            </span>
-                          </div>
-                          <div className="h-48 rounded-2xl border-2 border-dashed border-grayScale-200 bg-white flex flex-col items-center justify-center gap-4 cursor-pointer hover:bg-grayScale-50 transition-all group">
-                            <div className="h-14 w-14 rounded-full bg-[#9E289114] flex items-center justify-center text-[#9E2891]">
-                              <UploadCloud className="h-7 w-7" />
-                            </div>
-                            <div className="text-center space-y-1">
-                              <p className="text-[16px] font-bold text-grayScale-900">
-                                Click to upload or drag file
-                              </p>
-                              <p className="text-[14px] font-medium text-grayScale-500">
-                                Max size 25MB
-                              </p>
-                            </div>
-                          </div>
-                        </div>
-                      ) : answer === "PDF Upload" ? (
-                        <div className="space-y-4">
-                          <div className="flex items-center justify-between">
-                            <label className="text-[16px] font-medium text-grayScale-900">
-                              PDF Upload Output
-                            </label>
-                          </div>
-                          <div className="h-48 rounded-2xl border-2 border-dashed border-grayScale-200 bg-white flex flex-col items-center justify-center gap-4 cursor-pointer hover:bg-grayScale-50 transition-all group">
-                            <div className="h-14 w-14 rounded-full bg-[#9E289114] flex items-center justify-center text-[#9E2891]">
-                              <UploadCloud className="h-7 w-7" />
-                            </div>
-                            <div className="text-center space-y-1">
-                              <p className="text-[16px] font-bold text-grayScale-900">
-                                Click to upload or drag file
-                              </p>
-                              <p className="text-[14px] font-medium text-grayScale-500">
-                                Max size 25MB
-                              </p>
-                            </div>
-                          </div>
-                        </div>
-                      ) : answer === "Answer Key" ? (
-                        <div className="space-y-4">
-                          <div className="flex items-center justify-between">
-                            <label className="text-[12px] font-bold text-grayScale-500 uppercase tracking-wider">
-                              MATCHING ANSWER
-                            </label>
-                            <span className="text-[11px] font-medium text-grayScale-400">
-                              Static
-                            </span>
-                          </div>
-                          <div className="space-y-3">
-                            {answerKeyItems.map((val, idx) => (
-                              <div
-                                key={idx}
-                                className="flex items-center gap-3"
-                              >
-                                <GripVertical className="h-4 w-4 text-grayScale-300 cursor-grab" />
-                                <span className="text-[14px] font-medium text-grayScale-600 min-w-4">
-                                  {idx + 1}
-                                </span>
-                                <Input
-                                  value={val}
-                                  className="h-11 w-24 rounded-[8px] border-grayScale-200 bg-white font-medium text-center text-grayScale-800"
-                                  readOnly
-                                />
-                                <MinusCircle className="h-5 w-5 text-grayScale-300 cursor-pointer hover:text-red-500 transition-colors" />
-                              </div>
-                            ))}
-                          </div>
-                          <button className="flex items-center gap-2 text-[14px] font-bold text-[#9E2891] hover:underline">
-                            <Plus className="h-4 w-4" />
-                            Add Key Item
-                          </button>
-                        </div>
-                      ) : answer === "Label Selection" ? (
-                        <div className="rounded-[16px] border border-grayScale-200 bg-white p-6 shadow-[0_4px_20px_rgba(0,0,0,0.02)]">
-                          <div className="flex items-center gap-3 mb-8">
-                            <div className="h-8 w-8 flex items-center justify-center rounded-lg bg-[#9E289114] text-[#9E2891]">
-                              <Settings2 className="h-5 w-5" />
-                            </div>
-                            <h5 className="text-[18px] font-bold text-grayScale-900 tracking-tight">
-                              Answer Settings
-                            </h5>
-                          </div>
-
-                          <div className="space-y-8">
-                            <div className="space-y-3">
-                              <label className="text-[15px] font-bold text-grayScale-700 tracking-tight">
-                                Select Label Set
-                              </label>
-                              <div className="relative group">
-                                <select
-                                  value={selectedLabelSet}
-                                  onChange={(e) =>
-                                    setSelectedLabelSet(e.target.value)
-                                  }
-                                  className="w-full h-14 pl-6 pr-12 rounded-[12px] border border-grayScale-200 bg-white font-medium text-[16px] text-grayScale-900 appearance-none focus:outline-none focus:ring-1 focus:ring-[#9E289133] cursor-pointer"
-                                >
-                                  <option>True / False / Not Given</option>
-                                  <option>Yes / No / Not Given</option>
-                                  <option>A / B / C</option>
-                                </select>
-                                <ChevronDown className="absolute right-5 top-1/2 -translate-y-1/2 h-5 w-5 text-grayScale-400 pointer-events-none group-hover:text-grayScale-600 transition-all" />
-                              </div>
-                              <p className="text-[14px] font-medium text-grayScale-500">
-                                Choose the standard answer format required for
-                                this question type.
-                              </p>
-                            </div>
-
-                            <div className="space-y-4">
-                              <label className="text-[15px] font-bold text-grayScale-700 tracking-tight">
-                                Correct Answer
-                              </label>
-                              <div className="flex gap-4">
-                                {["True", "False", "Not Given"].map((val) => (
-                                  <button
-                                    key={val}
-                                    onClick={() => setCorrectLabelAnswer(val)}
-                                    className={cn(
-                                      "h-12 px-6 rounded-[8px] font-bold text-[15px] transition-all",
-                                      correctLabelAnswer === val
-                                        ? "bg-[#9E2891] text-white shadow-[0_4px_12px_rgba(158,40,145,0.2)]"
-                                        : "bg-[#F1F5F9] text-grayScale-700 hover:bg-grayScale-100",
-                                    )}
-                                  >
-                                    {val}
-                                  </button>
-                                ))}
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      ) : (
-                        <div className="space-y-3">
-                          <label className="text-[14px] font-medium text-grayScale-800">
-                            {answer} Configuration
-                          </label>
-                          <Input
-                            className="h-12 rounded-[12px] border-grayScale-300 bg-[#F8FAFC] font-medium text-grayScale-900 placeholder:text-grayScale-400"
-                            placeholder={`Enter details for ${answer}...`}
-                          />
-                        </div>
-                      )}
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-
-        {/* Add Variation Button */}
-        <button className="w-full py-3 rounded-xl border-[2px] border-dashed border-grayScale-300 flex items-center justify-center gap-2 text-[#9E2891] font-medium transition-all group">
-          <Plus className="h-4 w-4 bg-[#9E2891] text-white rounded-full p-0.5" />
-          Add Question Variation
-        </button>
-
-        {/* Collapsed Items */}
-        {["Interactive Speaking", "Speaking Sample"].map((section) => (
-          <div
-            key={section}
-            className="rounded-xl border border-grayScale-300 bg-[#EEEEEE] overflow-hidden"
-          >
-            <div
-              className="px-6 py-5 flex items-center justify-between cursor-pointer hover:bg-grayScale-100/50 transition-all group"
-              onClick={() =>
-                setExpandedSection(expandedSection === section ? "" : section)
-              }
-            >
-              <div className="flex items-center gap-4">
-                <div className="h-8 w-8 flex items-center justify-center text-grayScale-900">
-                  <Hourglass className="h-5 w-5 stroke-[1.5]" />
-                </div>
-                <h3 className="text-[18px] font-medium text-grayScale-800">
-                  {section}
-                </h3>
-              </div>
-              {expandedSection === section ? (
-                <ChevronUp className="h-6 w-6 text-grayScale-900" />
-              ) : (
-                <ChevronDown className="h-6 w-6 text-grayScale-900" />
-              )}
-            </div>
-            {expandedSection === section && (
-              <div className="p-10 text-center text-grayScale-400 font-medium bg-white border-t border-grayScale-200">
-                Variation configuration for {section}...
+                <section className="space-y-4 min-w-0 lg:pl-2">
+                  <div>
+                    <h3 className="text-[13px] font-bold text-grayScale-500 uppercase tracking-[0.12em]">
+                      Section B: Answer types
+                    </h3>
+                    <p className="text-[14px] text-grayScale-500 mt-1 font-medium">
+                      How should the student answer this question?
+                    </p>
+                  </div>
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
+                    {responseCatalogKinds.map((kind) => {
+                      const { label, Icon } = getResponseKindPresentation(kind)
+                      const selected = draft.response_component_kinds.includes(kind)
+                      return (
+                        <ComponentKindCard
+                          key={kind}
+                          label={label}
+                          Icon={Icon}
+                          selected={selected}
+                          onClick={() =>
+                            setDraft((d) => ({
+                              ...d,
+                              response_component_kinds: toggleKind(d.response_component_kinds, kind),
+                            }))
+                          }
+                        />
+                      )
+                    })}
+                  </div>
+                  {errors.response_kinds ? (
+                    <p className="text-sm font-medium text-red-600">{errors.response_kinds}</p>
+                  ) : null}
+                </section>
               </div>
             )}
+
+            <div className="rounded-xl border border-grayScale-200 bg-grayScale-50/50 overflow-hidden">
+              <button
+                type="button"
+                onClick={() => setAdvancedOpen((o) => !o)}
+                className="w-full flex items-center justify-between px-4 py-3 text-left text-[14px] font-bold text-grayScale-700 hover:bg-grayScale-100/80 transition-colors"
+              >
+                Advanced: edit schema rows (optional)
+                {advancedOpen ? (
+                  <ChevronUp className="h-4 w-4 shrink-0" />
+                ) : (
+                  <ChevronDown className="h-4 w-4 shrink-0" />
+                )}
+              </button>
+              {advancedOpen ? (
+                <div className="px-4 pb-6 pt-2 space-y-10 border-t border-grayScale-200 bg-white">
+                  <SchemaBuilderSection
+                    title="Stimulus schema"
+                    side="stimulus"
+                    allowedKinds={draft.stimulus_component_kinds}
+                    catalogKinds={stimulusCatalogKinds}
+                    rows={draft.stimulus_schema}
+                    onChange={(rows) => setDraft((d) => ({ ...d, stimulus_schema: rows }))}
+                    error={errors.stimulus_schema}
+                    rowErrors={rowErrorMap("stimulus", errors)}
+                  />
+                  <SchemaBuilderSection
+                    title="Response schema"
+                    side="response"
+                    allowedKinds={draft.response_component_kinds}
+                    catalogKinds={responseCatalogKinds}
+                    rows={draft.response_schema}
+                    onChange={(rows) => setDraft((d) => ({ ...d, response_schema: rows }))}
+                    error={errors.response_schema}
+                    rowErrors={rowErrorMap("response", errors)}
+                  />
+                </div>
+              ) : null}
+            </div>
           </div>
-        ))}
-      </div>
+        ) : null}
 
-      {/* Footer Navigation */}
-
-      <div className="px-4 py-4 border-t border-grayScale-200 flex items-center justify-between bg-[#F8FAFC]">
-        <Button
-          variant="outline"
-          className="h-10 px-6 rounded-[6px] border-none shadow-none text-grayScale-600 font-bold hover:bg-grayScale-100"
-        >
-          Cancel
-        </Button>
-        <Button
-          onClick={onNext}
-          className="h-10 px-10 rounded-[6px] bg-[#9E2891] font-medium text-white shadow-lg shadow-brand-500/10 hover:bg-[#8A237E] transition-all flex items-center gap-3"
-        >
-          Next: Variations
-          <ArrowRight className="h-5 w-5" />
-        </Button>
-      </div>
+        <div className="px-4 py-4 border-t border-grayScale-200 flex items-center justify-between bg-[#F8FAFC]">
+          <Button
+            type="button"
+            variant="outline"
+            className="h-10 px-6 rounded-[6px] border-none shadow-none text-grayScale-600 font-bold hover:bg-grayScale-100"
+            onClick={onBack}
+          >
+            <ArrowLeft className="h-4 w-4 mr-2 inline" />
+            Back
+          </Button>
+          <Button
+            type="button"
+            onClick={onNext}
+            className="h-10 px-10 rounded-[6px] bg-[#9E2891] font-medium text-white shadow-lg shadow-brand-500/10 hover:bg-[#8A237E] transition-all flex items-center gap-3"
+          >
+            Next: Validate
+            <ArrowRight className="h-5 w-5" />
+          </Button>
+        </div>
+      </Card>
     </div>
-  );
+  )
 }
diff --git a/src/pages/content-management/components/question-type-steps/QuestionTypeReviewPublishStep.tsx b/src/pages/content-management/components/question-type-steps/QuestionTypeReviewPublishStep.tsx
new file mode 100644
index 0000000..26bc1e4
--- /dev/null
+++ b/src/pages/content-management/components/question-type-steps/QuestionTypeReviewPublishStep.tsx
@@ -0,0 +1,175 @@
+import { useState } from "react"
+import { ArrowLeft, Loader2 } from "lucide-react"
+import { useNavigate } from "react-router-dom"
+import { toast } from "sonner"
+import { Button } from "../../../../components/ui/button"
+import { Card } from "../../../../components/ui/card"
+import {
+  createQuestionTypeDefinition,
+  extractDefinitionMutationId,
+  updateQuestionTypeDefinition,
+  validateQuestionTypeDefinition,
+} from "../../../../api/questionTypeDefinitions.api"
+import type { QuestionTypeDefinitionCreatePayload } from "../../../../types/questionTypeDefinition.types"
+import { buildCreatePayload } from "../../lib/questionTypeDefinitionValidation"
+
+interface QuestionTypeReviewPublishStepProps {
+  draft: QuestionTypeDefinitionCreatePayload
+  onBack: () => void
+  /** When set, saves via PUT /questions/type-definitions/:id */
+  editDefinitionId?: number | null
+}
+
+export function QuestionTypeReviewPublishStep({
+  draft,
+  onBack,
+  editDefinitionId,
+}: QuestionTypeReviewPublishStepProps) {
+  const navigate = useNavigate()
+  const [submitting, setSubmitting] = useState(false)
+  const isEdit = editDefinitionId != null && editDefinitionId > 0
+
+  const payload = buildCreatePayload(draft)
+
+  const submit = async (status: "ACTIVE" | "INACTIVE") => {
+    const body = { ...payload, status }
+    setSubmitting(true)
+    try {
+      if (isEdit) {
+        const res = await updateQuestionTypeDefinition(editDefinitionId, body)
+        const id = extractDefinitionMutationId(res) ?? editDefinitionId
+        toast.success(res.data?.message || "Question type definition updated", {
+          description: `Definition id: ${id}`,
+        })
+        navigate(`/new-content/question-types?updated=${id}`)
+        return
+      }
+
+      const validation = await validateQuestionTypeDefinition(body)
+      if (!validation.valid) {
+        toast.error(validation.message || "Invalid question type definition", {
+          description: validation.error ? String(validation.error) : undefined,
+        })
+        return
+      }
+
+      const res = await createQuestionTypeDefinition(body)
+      const id = extractDefinitionMutationId(res)
+      if (id == null) {
+        toast.error(
+          res.data?.message ?? "Definition may not have been created: response did not include an id.",
+        )
+        return
+      }
+      toast.success(res.data?.message || "Question type definition created", {
+        description: `Definition id: ${id}`,
+      })
+      navigate(`/new-content/question-types?created=${id}`)
+    } catch (e: unknown) {
+      const err = e as { response?: { data?: { message?: string; error?: string } } }
+      const msg =
+        err.response?.data?.message ||
+        (e instanceof Error ? e.message : isEdit ? "Update failed" : "Create failed")
+      const detail = err.response?.data?.error
+      toast.error(String(msg), { description: detail ? String(detail) : undefined })
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div className="space-y-8 pb-32">
+      <Card className="max-w-4xl mx-auto overflow-hidden border-grayScale-100 shadow-sm rounded-2xl bg-white">
+        <div className="p-10 border-b border-grayScale-200">
+          <h2 className="text-[20px] font-medium text-grayScale-900">STEP 4: Review & publish</h2>
+          <p className="text-grayScale-500 font-medium mt-1">
+            {isEdit ? (
+              <>
+                Confirm changes, then update via{" "}
+                <code className="text-xs bg-grayScale-100 px-1 rounded">
+                  PUT /questions/type-definitions/{editDefinitionId}
+                </code>
+                .
+              </>
+            ) : (
+              <>
+                Confirm details, then create via{" "}
+                <code className="text-xs bg-grayScale-100 px-1 rounded">POST /questions/type-definitions</code>.
+              </>
+            )}
+          </p>
+        </div>
+
+        <div className="p-10 space-y-6">
+          <dl className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
+            <div>
+              <dt className="text-grayScale-400 font-semibold uppercase text-[11px] tracking-wide">Key</dt>
+              <dd className="font-medium text-grayScale-900 mt-1">{payload.key}</dd>
+            </div>
+            <div>
+              <dt className="text-grayScale-400 font-semibold uppercase text-[11px] tracking-wide">Display name</dt>
+              <dd className="font-medium text-grayScale-900 mt-1">{payload.display_name}</dd>
+            </div>
+            <div className="sm:col-span-2">
+              <dt className="text-grayScale-400 font-semibold uppercase text-[11px] tracking-wide">Description</dt>
+              <dd className="font-medium text-grayScale-800 mt-1">{payload.description || "—"}</dd>
+            </div>
+            <div>
+              <dt className="text-grayScale-400 font-semibold uppercase text-[11px] tracking-wide">Status</dt>
+              <dd className="font-medium text-grayScale-900 mt-1">{draft.status}</dd>
+            </div>
+            <div>
+              <dt className="text-grayScale-400 font-semibold uppercase text-[11px] tracking-wide">Stimulus kinds</dt>
+              <dd className="font-medium text-grayScale-900 mt-1">{payload.stimulus_component_kinds.join(", ") || "—"}</dd>
+            </div>
+            <div>
+              <dt className="text-grayScale-400 font-semibold uppercase text-[11px] tracking-wide">Response kinds</dt>
+              <dd className="font-medium text-grayScale-900 mt-1">{payload.response_component_kinds.join(", ") || "—"}</dd>
+            </div>
+            <div>
+              <dt className="text-grayScale-400 font-semibold uppercase text-[11px] tracking-wide">Stimulus schema rows</dt>
+              <dd className="font-medium text-grayScale-900 mt-1">{payload.stimulus_schema.length}</dd>
+            </div>
+            <div>
+              <dt className="text-grayScale-400 font-semibold uppercase text-[11px] tracking-wide">Response schema rows</dt>
+              <dd className="font-medium text-grayScale-900 mt-1">{payload.response_schema.length}</dd>
+            </div>
+          </dl>
+
+          <div className="flex flex-wrap gap-3 pt-2">
+            <Button
+              type="button"
+              variant="outline"
+              className="h-11"
+              disabled={submitting}
+              onClick={() => void submit("INACTIVE")}
+            >
+              {submitting ? <Loader2 className="h-4 w-4 animate-spin" /> : isEdit ? "Save as inactive" : "Save as inactive (draft)"}
+            </Button>
+            <Button
+              type="button"
+              className="h-11 bg-[#9E2891] hover:bg-[#8A237E] text-white"
+              disabled={submitting}
+              onClick={() => void submit("ACTIVE")}
+            >
+              {submitting ? <Loader2 className="h-4 w-4 animate-spin" /> : isEdit ? "Save as active" : "Create as active"}
+            </Button>
+          </div>
+        </div>
+
+        <div className="px-4 py-4 border border-grayScale-200 flex items-center justify-start bg-[#F8FAFC]">
+          <Button
+            type="button"
+            variant="outline"
+            className="h-10 px-6 rounded-[6px] border-none shadow-none text-grayScale-600 font-bold hover:bg-grayScale-100"
+            onClick={onBack}
+            disabled={submitting}
+          >
+            <ArrowLeft className="h-4 w-4 mr-2 inline" />
+            Back
+          </Button>
+        </div>
+      </Card>
+    </div>
+  )
+}
diff --git a/src/pages/content-management/components/question-type-steps/QuestionTypeValidatePreviewStep.tsx b/src/pages/content-management/components/question-type-steps/QuestionTypeValidatePreviewStep.tsx
new file mode 100644
index 0000000..beff101
--- /dev/null
+++ b/src/pages/content-management/components/question-type-steps/QuestionTypeValidatePreviewStep.tsx
@@ -0,0 +1,119 @@
+import { useState } from "react"
+import { ArrowLeft, ArrowRight, CheckCircle2, Loader2 } from "lucide-react"
+import { toast } from "sonner"
+import { Button } from "../../../../components/ui/button"
+import { Card } from "../../../../components/ui/card"
+import { validateQuestionTypeDefinition } from "../../../../api/questionTypeDefinitions.api"
+import type { QuestionTypeDefinitionCreatePayload } from "../../../../types/questionTypeDefinition.types"
+import { buildCreatePayload } from "../../lib/questionTypeDefinitionValidation"
+
+interface QuestionTypeValidatePreviewStepProps {
+  draft: QuestionTypeDefinitionCreatePayload
+  onNext: () => void
+  onBack: () => void
+}
+
+export function QuestionTypeValidatePreviewStep({
+  draft,
+  onNext,
+  onBack,
+}: QuestionTypeValidatePreviewStepProps) {
+  const [validating, setValidating] = useState(false)
+  const [serverOk, setServerOk] = useState<boolean | null>(null)
+  const [serverDetail, setServerDetail] = useState<string | null>(null)
+
+  const payload = buildCreatePayload(draft)
+  const json = JSON.stringify(payload, null, 2)
+
+  const runValidate = async () => {
+    setValidating(true)
+    setServerOk(null)
+    setServerDetail(null)
+    try {
+      const res = await validateQuestionTypeDefinition(payload)
+      if (!res.valid) {
+        setServerOk(false)
+        const detail = res.error || res.message || "Validation failed"
+        setServerDetail(detail)
+        toast.error(res.message || "Invalid question type definition", { description: res.error })
+        return
+      }
+      setServerOk(true)
+      setServerDetail(res.message || "Question type definition is valid.")
+      toast.success(res.message || "Question type definition is valid")
+    } finally {
+      setValidating(false)
+    }
+  }
+
+  return (
+    <div className="space-y-8 pb-32">
+      <Card className="max-w-4xl mx-auto overflow-hidden border-grayScale-100 shadow-sm rounded-2xl bg-white">
+        <div className="p-10 border-b border-grayScale-200">
+          <h2 className="text-[20px] font-medium text-grayScale-900">STEP 3: Validate & preview</h2>
+          <p className="text-grayScale-500 font-medium mt-1">
+            Optional server check via{" "}
+            <code className="text-xs bg-grayScale-100 px-1 rounded">POST /questions/validate-question-type-definition</code>
+            . Uses the same JSON as create; validity comes from <code className="text-xs bg-grayScale-100 px-1 rounded">data.valid</code>{" "}
+            (not the envelope <code className="text-xs bg-grayScale-100 px-1 rounded">success</code> flag).
+          </p>
+        </div>
+
+        <div className="p-10 space-y-6">
+          <div className="flex flex-wrap items-center gap-3">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={runValidate}
+              disabled={validating}
+              className="h-10"
+            >
+              {validating ? (
+                <>
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                  Validating…
+                </>
+              ) : (
+                "Validate with server"
+              )}
+            </Button>
+            {serverOk === true ? (
+              <span className="flex items-center gap-1.5 text-sm font-medium text-green-700">
+                <CheckCircle2 className="h-4 w-4" />
+                {serverDetail}
+              </span>
+            ) : null}
+            {serverOk === false ? <span className="text-sm font-medium text-red-600">{serverDetail}</span> : null}
+          </div>
+
+          <div className="space-y-2">
+            <p className="text-[12px] font-bold uppercase tracking-wide text-grayScale-400">Create payload (JSON)</p>
+            <pre className="text-[12px] leading-relaxed font-mono bg-grayScale-900 text-grayScale-50 rounded-xl p-4 overflow-x-auto max-h-[420px] overflow-y-auto">
+              {json}
+            </pre>
+          </div>
+        </div>
+
+        <div className="px-4 py-4 border border-grayScale-200 flex items-center justify-between bg-[#F8FAFC]">
+          <Button
+            type="button"
+            variant="outline"
+            className="h-10 px-6 rounded-[6px] border-none shadow-none text-grayScale-600 font-bold hover:bg-grayScale-100"
+            onClick={onBack}
+          >
+            <ArrowLeft className="h-4 w-4 mr-2 inline" />
+            Back
+          </Button>
+          <Button
+            type="button"
+            onClick={onNext}
+            className="h-10 px-10 rounded-[6px] bg-[#9E2891] font-medium text-white shadow-lg shadow-brand-500/10 hover:bg-[#8A237E] transition-all flex items-center gap-3"
+          >
+            Next: Review
+            <ArrowRight className="h-5 w-5" />
+          </Button>
+        </div>
+      </Card>
+    </div>
+  )
+}
diff --git a/src/pages/content-management/components/question-type-steps/SchemaBuilderSection.tsx b/src/pages/content-management/components/question-type-steps/SchemaBuilderSection.tsx
new file mode 100644
index 0000000..8d704c7
--- /dev/null
+++ b/src/pages/content-management/components/question-type-steps/SchemaBuilderSection.tsx
@@ -0,0 +1,194 @@
+import { Plus, Trash2 } from "lucide-react"
+import { Button } from "../../../../components/ui/button"
+import { Input } from "../../../../components/ui/input"
+import { Textarea } from "../../../../components/ui/textarea"
+import { Select } from "../../../../components/ui/select"
+import type { DynamicElementDefinition } from "../../../../types/questionTypeDefinition.types"
+
+type Side = "stimulus" | "response"
+
+interface SchemaBuilderSectionProps {
+  title: string
+  side: Side
+  allowedKinds: string[]
+  catalogKinds: string[]
+  rows: DynamicElementDefinition[]
+  onChange: (rows: DynamicElementDefinition[]) => void
+  error?: string
+  rowErrors?: Record<number, string>
+}
+
+function emptyRow(allowedKinds: string[]): DynamicElementDefinition {
+  const first = allowedKinds[0] ?? ""
+  return {
+    id: "",
+    kind: first,
+    label: "",
+    required: true,
+    config: undefined,
+  }
+}
+
+export function SchemaBuilderSection({
+  title,
+  side,
+  allowedKinds,
+  catalogKinds,
+  rows,
+  onChange,
+  error,
+  rowErrors,
+}: SchemaBuilderSectionProps) {
+  const kindOptions =
+    allowedKinds.length > 0 ? allowedKinds : catalogKinds.length > 0 ? catalogKinds : []
+
+  const updateRow = (index: number, patch: Partial<DynamicElementDefinition>) => {
+    const next = rows.map((r, i) => (i === index ? { ...r, ...patch } : r))
+    onChange(next)
+  }
+
+  const commitConfigString = (index: number, raw: string) => {
+    const trimmed = raw.trim()
+    if (!trimmed) {
+      updateRow(index, { config: undefined })
+      return
+    }
+    try {
+      const parsed = JSON.parse(trimmed) as Record<string, unknown>
+      if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+        updateRow(index, { config: parsed })
+      }
+    } catch {
+      /* keep previous config; user can fix JSON */
+    }
+  }
+
+  const removeRow = (index: number) => {
+    onChange(rows.filter((_, i) => i !== index))
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between gap-4">
+        <div>
+          <h3 className="text-[16px] font-bold text-grayScale-900">{title}</h3>
+          <p className="text-[13px] text-grayScale-500 mt-0.5">
+            Each row defines one element in the{" "}
+            {side === "stimulus" ? "stimulus" : "response"} schema (id, kind, label, required, optional JSON
+            config).
+          </p>
+        </div>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          className="shrink-0"
+          onClick={() => onChange([...rows, emptyRow(kindOptions)])}
+          disabled={!kindOptions.length}
+        >
+          <Plus className="h-4 w-4 mr-1.5" />
+          Add row
+        </Button>
+      </div>
+
+      {error ? <p className="text-sm font-medium text-red-600">{error}</p> : null}
+
+      {!kindOptions.length ? (
+        <p className="text-sm text-grayScale-500 rounded-lg border border-dashed border-grayScale-200 p-4">
+          Select component kinds in the previous step (or wait for the catalog to load) before building the{" "}
+          {side} schema.
+        </p>
+      ) : null}
+
+      <div className="space-y-3">
+        {rows.map((row, index) => (
+          <div
+            key={`${side}-${index}`}
+            className="rounded-xl border border-grayScale-200 bg-[#F8FAFC] p-4 space-y-3"
+          >
+            <div className="flex items-start justify-between gap-2">
+              <span className="text-[12px] font-bold uppercase tracking-wide text-grayScale-400">
+                Row {index + 1}
+              </span>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="h-8 w-8 p-0 text-grayScale-500 hover:text-red-600"
+                onClick={() => removeRow(index)}
+                aria-label="Remove row"
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+              <div className="space-y-1.5">
+                <label className="text-[12px] font-semibold text-grayScale-600">
+                  Element id <span className="text-red-500">*</span>
+                </label>
+                <Input
+                  value={row.id}
+                  onChange={(e) => updateRow(index, { id: e.target.value })}
+                  placeholder="e.g. prompt"
+                  className="h-10 bg-white"
+                />
+              </div>
+              <div className="space-y-1.5">
+                <label className="text-[12px] font-semibold text-grayScale-600">
+                  Kind <span className="text-red-500">*</span>
+                </label>
+                <Select
+                  className="h-10 bg-white"
+                  value={row.kind}
+                  onChange={(e) => updateRow(index, { kind: e.target.value })}
+                >
+                  {kindOptions.map((k) => (
+                    <option key={k} value={k}>
+                      {k}
+                    </option>
+                  ))}
+                </Select>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+              <div className="space-y-1.5">
+                <label className="text-[12px] font-semibold text-grayScale-600">Label</label>
+                <Input
+                  value={row.label ?? ""}
+                  onChange={(e) => updateRow(index, { label: e.target.value })}
+                  placeholder="Author-facing label"
+                  className="h-10 bg-white"
+                />
+              </div>
+              <label className="flex items-center gap-2 pt-6 md:pt-8">
+                <input
+                  type="checkbox"
+                  checked={row.required}
+                  onChange={(e) => updateRow(index, { required: e.target.checked })}
+                  className="rounded border-grayScale-300"
+                />
+                <span className="text-[13px] font-medium text-grayScale-700">Required</span>
+              </label>
+            </div>
+
+            <div className="space-y-1.5">
+              <label className="text-[12px] font-semibold text-grayScale-600">Config (JSON object)</label>
+              <Textarea
+                className="min-h-[72px] font-mono text-[13px] bg-white"
+                placeholder='{"max_length": 1000}'
+                defaultValue={row.config ? JSON.stringify(row.config, null, 2) : ""}
+                key={`${side}-cfg-${index}-${rows.length}`}
+                onBlur={(e) => commitConfigString(index, e.target.value)}
+              />
+              <p className="text-[11px] text-grayScale-400">Tab out of the field to apply JSON config.</p>
+            </div>
+
+            {rowErrors?.[index] ? <p className="text-sm text-red-600">{rowErrors[index]}</p> : null}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/src/pages/content-management/components/question-type-steps/componentKindUi.ts b/src/pages/content-management/components/question-type-steps/componentKindUi.ts
new file mode 100644
index 0000000..28619b9
--- /dev/null
+++ b/src/pages/content-management/components/question-type-steps/componentKindUi.ts
@@ -0,0 +1,104 @@
+import type { LucideIcon } from "lucide-react"
+import {
+  BarChart3,
+  CheckSquare,
+  CircleDot,
+  Clock,
+  FileText,
+  FileUp,
+  GitBranch,
+  GitCompare,
+  Image as ImageIcon,
+  Info,
+  Link2,
+  ListOrdered,
+  ListTodo,
+  Mic2,
+  MousePointer2,
+  Table as TableIcon,
+  Type,
+  Volume2,
+} from "lucide-react"
+
+/** Human label for API kind codes; unknown kinds fall back to title-cased code. */
+const STIMULUS_LABELS: Record<string, string> = {
+  QUESTION_TEXT: "Question Text",
+  PREP_TIME: "Prep Time",
+  INSTRUCTION: "Instruction",
+  AUDIO_PROMPT: "Audio Prompt",
+  AUDIO_CLIP: "Audio Clip",
+  TEXT_PASSAGE: "Text Passage",
+  IMAGE: "Image",
+  CHART: "Chart",
+  MATCHING_INPUTS: "Matching Inputs",
+  SELECT_MISSING_WORDS: "Select Missing Words",
+  TABLE: "Table",
+  FLOW_CHART: "Flow Chart",
+}
+
+const RESPONSE_LABELS: Record<string, string> = {
+  AUDIO_RESPONSE: "Audio Response",
+  TEXT_INPUT: "Text Input",
+  SHORT_ANSWER: "Short Answer",
+  MULTIPLE_CHOICE: "Multiple Choice",
+  OPTION: "Options",
+  ANSWER_TIMER: "Answer Timer",
+  SELECT_MISSING_WORDS: "Select Missing Words",
+  PDF_UPLOAD: "PDF Upload",
+  MATCHING_ANSWER: "Matching Answer",
+  LABEL_SELECTION: "Label Selection",
+  SEQUENCE_ORDER: "Sequence Order",
+}
+
+/** Legacy screenshot labels → map to closest API kind for display only (same code path). */
+const STIMULUS_ICONS: Record<string, LucideIcon> = {
+  QUESTION_TEXT: FileText,
+  PREP_TIME: Clock,
+  INSTRUCTION: Info,
+  AUDIO_PROMPT: Volume2,
+  AUDIO_CLIP: Volume2,
+  TEXT_PASSAGE: FileText,
+  IMAGE: ImageIcon,
+  CHART: BarChart3,
+  MATCHING_INPUTS: Link2,
+  SELECT_MISSING_WORDS: ListTodo,
+  TABLE: TableIcon,
+  FLOW_CHART: GitBranch,
+}
+
+const RESPONSE_ICONS: Record<string, LucideIcon> = {
+  AUDIO_RESPONSE: Mic2,
+  TEXT_INPUT: Type,
+  SHORT_ANSWER: ListTodo,
+  MULTIPLE_CHOICE: CheckSquare,
+  OPTION: CircleDot,
+  ANSWER_TIMER: Clock,
+  SELECT_MISSING_WORDS: ListTodo,
+  PDF_UPLOAD: FileUp,
+  MATCHING_ANSWER: GitCompare,
+  LABEL_SELECTION: MousePointer2,
+  SEQUENCE_ORDER: ListOrdered,
+}
+
+const DEFAULT_ICON = FileText
+
+function humanizeKind(kind: string): string {
+  return kind
+    .replace(/_/g, " ")
+    .toLowerCase()
+    .replace(/\b\w/g, (c) => c.toUpperCase())
+}
+
+export function getStimulusKindPresentation(kind: string): { label: string; Icon: LucideIcon } {
+  return {
+    label: STIMULUS_LABELS[kind] ?? humanizeKind(kind),
+    Icon: STIMULUS_ICONS[kind] ?? DEFAULT_ICON,
+  }
+}
+
+export function getResponseKindPresentation(kind: string): { label: string; Icon: LucideIcon } {
+  return {
+    label: RESPONSE_LABELS[kind] ?? humanizeKind(kind),
+    Icon: RESPONSE_ICONS[kind] ?? DEFAULT_ICON,
+  }
+}
diff --git a/src/pages/content-management/lib/questionTypeDefinitionValidation.ts b/src/pages/content-management/lib/questionTypeDefinitionValidation.ts
new file mode 100644
index 0000000..9ad07e7
--- /dev/null
+++ b/src/pages/content-management/lib/questionTypeDefinitionValidation.ts
@@ -0,0 +1,144 @@
+import type {
+  DynamicElementDefinition,
+  QuestionComponentCatalog,
+  QuestionTypeDefinitionCreatePayload,
+} from "../../../types/questionTypeDefinition.types"
+
+export type FieldErrorMap = Record<string, string>
+
+function uniqueStrings(values: string[]): boolean {
+  return new Set(values).size === values.length
+}
+
+function idsUniqueAndNonEmpty(rows: DynamicElementDefinition[], prefix: string, errors: FieldErrorMap) {
+  const ids = rows.map((r) => r.id?.trim()).filter(Boolean) as string[]
+  if (ids.length !== rows.length) {
+    errors[`${prefix}_ids`] = "Each schema row needs a non-empty id."
+    return
+  }
+  if (!uniqueStrings(ids)) {
+    errors[`${prefix}_ids`] = "Schema ids must be unique within this section."
+  }
+}
+
+export function validateDefinitionKinds(
+  payload: {
+    stimulus_component_kinds: string[]
+    response_component_kinds: string[]
+  },
+  catalog?: QuestionComponentCatalog | null,
+): FieldErrorMap {
+  const errors: FieldErrorMap = {}
+  const { stimulus_component_kinds: sk, response_component_kinds: rk } = payload
+
+  if (!sk.length) errors.stimulus_kinds = "Select at least one stimulus component kind."
+  if (!rk.length) errors.response_kinds = "Select at least one response component kind."
+
+  if (sk.length && !uniqueStrings(sk)) errors.stimulus_kinds = "Stimulus kinds must be unique (no duplicates)."
+  if (rk.length && !uniqueStrings(rk)) errors.response_kinds = "Response kinds must be unique (no duplicates)."
+
+  if (rk.length === 1 && rk[0] === "ANSWER_TIMER") {
+    errors.response_kinds = "ANSWER_TIMER cannot be the only response kind."
+  }
+
+  if (catalog) {
+    const sCat = new Set(catalog.stimulus_component_kinds)
+    const rCat = new Set(catalog.response_component_kinds)
+    if (sCat.size > 0 && sk.length) {
+      const invalid = sk.filter((k) => !sCat.has(k))
+      if (invalid.length) {
+        const msg = `Not in stimulus catalog: ${invalid.join(", ")}.`
+        errors.stimulus_kinds = errors.stimulus_kinds ? `${errors.stimulus_kinds} ${msg}` : msg
+      }
+    }
+    if (rCat.size > 0 && rk.length) {
+      const invalid = rk.filter((k) => !rCat.has(k))
+      if (invalid.length) {
+        const msg = `Not in response catalog: ${invalid.join(", ")}.`
+        errors.response_kinds = errors.response_kinds ? `${errors.response_kinds} ${msg}` : msg
+      }
+    }
+  }
+
+  return errors
+}
+
+export function validateDefinitionSchemas(
+  payload: Pick<
+    QuestionTypeDefinitionCreatePayload,
+    "stimulus_schema" | "response_schema" | "stimulus_component_kinds" | "response_component_kinds"
+  >,
+  catalog: { stimulus: Set<string>; response: Set<string> },
+): FieldErrorMap {
+  const errors: FieldErrorMap = {}
+
+  const validateSide = (
+    rows: DynamicElementDefinition[],
+    allowed: string[],
+    side: "stimulus" | "response",
+  ) => {
+    const prefix = side
+    if (!rows.length) {
+      errors[`${prefix}_schema`] = `Add at least one ${side} schema row.`
+      return
+    }
+    idsUniqueAndNonEmpty(rows, prefix, errors)
+
+    const allowedSet = new Set(allowed)
+    const catalogSet = side === "stimulus" ? catalog.stimulus : catalog.response
+    rows.forEach((row, i) => {
+      if (!row.kind) errors[`${prefix}_${i}`] = "Kind is required."
+      else if (allowedSet.size && !allowedSet.has(row.kind)) {
+        errors[`${prefix}_${i}`] = `Kind "${row.kind}" is not in selected ${side} kinds.`
+      }
+      if (catalogSet.size && row.kind && !catalogSet.has(row.kind)) {
+        errors[`${prefix}_${i}`] = `Kind "${row.kind}" is not in the ${side} component catalog.`
+      }
+    })
+  }
+
+  validateSide(payload.stimulus_schema, payload.stimulus_component_kinds, "stimulus")
+  validateSide(payload.response_schema, payload.response_component_kinds, "response")
+
+  return errors
+}
+
+export function validateDefinitionBasic(payload: {
+  key: string
+  display_name: string
+}): FieldErrorMap {
+  const errors: FieldErrorMap = {}
+  if (!payload.key?.trim()) errors.key = "Key is required (slug-like, unique)."
+  if (!payload.display_name?.trim()) errors.display_name = "Display name is required."
+  if (payload.key && !/^[a-z0-9][a-z0-9_-]*$/i.test(payload.key.trim())) {
+    errors.key = "Use letters, numbers, underscores, or hyphens; start with a letter or number."
+  }
+  return errors
+}
+
+export function buildCreatePayload(
+  draft: QuestionTypeDefinitionCreatePayload,
+): QuestionTypeDefinitionCreatePayload {
+  return {
+    ...draft,
+    key: draft.key.trim(),
+    display_name: draft.display_name.trim(),
+    description: draft.description?.trim() || null,
+    stimulus_component_kinds: [...draft.stimulus_component_kinds],
+    response_component_kinds: [...draft.response_component_kinds],
+    stimulus_schema: draft.stimulus_schema.map((r) => ({
+      ...r,
+      id: r.id.trim(),
+      kind: r.kind.trim(),
+      label: r.label?.trim() || undefined,
+      config: r.config && Object.keys(r.config).length ? r.config : undefined,
+    })),
+    response_schema: draft.response_schema.map((r) => ({
+      ...r,
+      id: r.id.trim(),
+      kind: r.kind.trim(),
+      label: r.label?.trim() || undefined,
+      config: r.config && Object.keys(r.config).length ? r.config : undefined,
+    })),
+  }
+}
diff --git a/src/types/course.types.ts b/src/types/course.types.ts
index d989635..2b77c7b 100644
--- a/src/types/course.types.ts
+++ b/src/types/course.types.ts
@@ -1,3 +1,5 @@
+import type { DynamicQuestionPayload } from "./questionTypeDefinition.types"
+
 export interface CourseCategory {
   id: number
   name: string
@@ -1043,6 +1045,10 @@ export interface CreateQuestionRequest {
   sample_answer_voice_prompt?: string
   audio_correct_answer_text?: string
   short_answers?: string[] | { acceptable_answer: string; match_type: "EXACT" | "CASE_INSENSITIVE" }[]
+  /** Required for `DYNAMIC` questions — links to `/questions/type-definitions/:id` */
+  question_type_definition_id?: number
+  /** Required for `DYNAMIC` — stimulus/response element instances per definition schema */
+  dynamic_payload?: DynamicQuestionPayload
 }
 
 export interface CreateQuestionResponse {
@@ -1076,6 +1082,8 @@ export interface QuestionDetail {
   voice_prompt?: string | null
   sample_answer_voice_prompt?: string | null
   audio_correct_answer_text?: string | null
+  question_type_definition_id?: number | null
+  dynamic_payload?: DynamicQuestionPayload | null
 }
 
 export interface GetQuestionDetailResponse {
diff --git a/src/types/questionTypeDefinition.types.ts b/src/types/questionTypeDefinition.types.ts
new file mode 100644
index 0000000..c5c3245
--- /dev/null
+++ b/src/types/questionTypeDefinition.types.ts
@@ -0,0 +1,58 @@
+/** Dynamic question type definition builder (admin) — aligns with POST /questions/type-definitions */
+
+/** GET /questions/component-catalog — `data` object shape */
+export interface QuestionComponentCatalog {
+  stimulus_component_kinds: string[]
+  response_component_kinds: string[]
+}
+
+export type DefinitionStatus = "ACTIVE" | "INACTIVE"
+
+export interface DynamicElementDefinition {
+  id: string
+  kind: string
+  label?: string
+  required: boolean
+  config?: Record<string, unknown>
+}
+
+export interface QuestionTypeDefinitionCreatePayload {
+  key: string
+  display_name: string
+  description?: string | null
+  stimulus_component_kinds: string[]
+  response_component_kinds: string[]
+  stimulus_schema: DynamicElementDefinition[]
+  response_schema: DynamicElementDefinition[]
+  status: DefinitionStatus
+}
+
+/** PUT /questions/type-definitions/:id — any subset of create fields */
+export type QuestionTypeDefinitionUpdatePayload = Partial<QuestionTypeDefinitionCreatePayload>
+
+/** POST /questions/validate-question-type-definition — body is often kinds-only; full create shape is also accepted */
+export type QuestionTypeDefinitionValidatePayload = Partial<QuestionTypeDefinitionCreatePayload>
+
+/** Parsed outcome (do not rely on envelope `success`; it may be false when `data.valid` is true) */
+export type ValidateQuestionTypeDefinitionResult =
+  | { valid: true; message?: string }
+  | { valid: false; message?: string; error?: string }
+
+export interface QuestionTypeDefinition extends QuestionTypeDefinitionCreatePayload {
+  id: number
+  is_system?: boolean
+  created_at?: string
+  updated_at?: string
+}
+
+export interface DynamicElementInstance {
+  id: string
+  kind: string
+  value?: unknown
+  meta?: Record<string, unknown>
+}
+
+export interface DynamicQuestionPayload {
+  stimulus: DynamicElementInstance[]
+  response: DynamicElementInstance[]
+}