diff --git a/apps/portal/src/components/registration/DynamicRegistrationFields.vue b/apps/portal/src/components/registration/DynamicRegistrationFields.vue
new file mode 100644
index 00000000..f0209c8b
--- /dev/null
+++ b/apps/portal/src/components/registration/DynamicRegistrationFields.vue
@@ -0,0 +1,274 @@
+<script setup lang="ts">
+import type { RegistrationField } from '@/types/registration'
+
+defineProps<{
+  groups: { section: string | null; fields: RegistrationField[] }[]
+  fieldErrors: Record<string, string>
+}>()
+
+const fieldValues = defineModel<Record<string, unknown>>('fieldValues', { required: true })
+
+function hint(field: RegistrationField): string | undefined {
+  return field.help_text ?? undefined
+}
+
+function ensureArray(slug: string): string[] {
+  const v = fieldValues.value[slug]
+  if (Array.isArray(v)) return v.map(String)
+  fieldValues.value[slug] = []
+
+  return fieldValues.value[slug] as string[]
+}
+
+function toggleCheckboxOption(slug: string, option: string, checked: boolean | null) {
+  const arr = ensureArray(slug)
+  const on = Boolean(checked)
+  if (on) {
+    if (!arr.includes(option)) arr.push(option)
+  }
+  else {
+    const i = arr.indexOf(option)
+    if (i !== -1) arr.splice(i, 1)
+  }
+  fieldValues.value[slug] = [...arr]
+}
+
+function isCheckboxOptionChecked(slug: string, option: string): boolean {
+  const arr = fieldValues.value[slug]
+  if (!Array.isArray(arr)) return false
+
+  return arr.includes(option)
+}
+
+function numberModel(slug: string): string {
+  const v = fieldValues.value[slug]
+  if (v === null || v === undefined) return ''
+  if (typeof v === 'number' && Number.isNaN(v)) return ''
+
+  return String(v)
+}
+
+function onNumberInput(slug: string, raw: string) {
+  if (raw === '' || raw === '-') {
+    fieldValues.value[slug] = null
+
+    return
+  }
+  const n = Number(raw)
+  fieldValues.value[slug] = Number.isFinite(n) ? n : null
+}
+</script>
+
+<template>
+  <div v-if="groups.length === 0">
+    <p class="text-body-2 text-medium-emphasis mb-0">
+      Er zijn geen extra vragen voor dit evenement.
+    </p>
+  </div>
+
+  <div
+    v-for="(group, gi) in groups"
+    :key="gi"
+    class="mb-6"
+  >
+    <div class="dynamic-section-heading text-subtitle-2 font-weight-medium text-medium-emphasis pb-2 mb-4">
+      {{ group.section?.trim() ? group.section : 'Algemeen' }}
+    </div>
+
+    <VRow>
+      <VCol
+        v-for="field in group.fields"
+        :key="field.id"
+        cols="12"
+        :md="field.field_type === 'boolean' ? '12' : field.field_type === 'textarea' ? '12' : '6'"
+      >
+        <div :id="`dyn-field-${field.slug}`">
+          <!-- text -->
+          <VTextField
+            v-if="field.field_type === 'text'"
+            v-model="fieldValues[field.slug] as string"
+            variant="outlined"
+            density="comfortable"
+            hide-details="auto"
+            :label="field.label + (field.is_required ? ' *' : '')"
+            :hint="hint(field)"
+            persistent-hint
+            :error-messages="fieldErrors[field.slug]"
+            :class="{ 'dynamic-field-error': !!fieldErrors[field.slug] }"
+          />
+
+          <!-- number -->
+          <VTextField
+            v-else-if="field.field_type === 'number'"
+            :model-value="numberModel(field.slug)"
+            variant="outlined"
+            type="number"
+            density="comfortable"
+            hide-details="auto"
+            :label="field.label + (field.is_required ? ' *' : '')"
+            :hint="hint(field)"
+            persistent-hint
+            :error-messages="fieldErrors[field.slug]"
+            :class="{ 'dynamic-field-error': !!fieldErrors[field.slug] }"
+            @update:model-value="(v: string | number | null) => onNumberInput(field.slug, String(v ?? ''))"
+          />
+
+          <!-- textarea -->
+          <VTextarea
+            v-else-if="field.field_type === 'textarea'"
+            v-model="fieldValues[field.slug] as string"
+            variant="outlined"
+            rows="3"
+            auto-grow
+            density="comfortable"
+            hide-details="auto"
+            :label="field.label + (field.is_required ? ' *' : '')"
+            :hint="hint(field)"
+            persistent-hint
+            :error-messages="fieldErrors[field.slug]"
+            :class="{ 'dynamic-field-error': !!fieldErrors[field.slug] }"
+          />
+
+          <!-- select -->
+          <VSelect
+            v-else-if="field.field_type === 'select'"
+            v-model="fieldValues[field.slug] as string"
+            variant="outlined"
+            density="comfortable"
+            hide-details="auto"
+            :items="field.options ?? []"
+            :label="field.label + (field.is_required ? ' *' : '')"
+            :hint="hint(field)"
+            persistent-hint
+            :error-messages="fieldErrors[field.slug]"
+            :clearable="!field.is_required"
+            :class="{ 'dynamic-field-error': !!fieldErrors[field.slug] }"
+          />
+
+          <!-- multiselect -->
+          <VSelect
+            v-else-if="field.field_type === 'multiselect'"
+            v-model="fieldValues[field.slug] as string[]"
+            variant="outlined"
+            density="comfortable"
+            hide-details="auto"
+            multiple
+            chips
+            closable-chips
+            :items="field.options ?? []"
+            :label="field.label + (field.is_required ? ' *' : '')"
+            :hint="hint(field)"
+            persistent-hint
+            :error-messages="fieldErrors[field.slug]"
+            :class="{ 'dynamic-field-error': !!fieldErrors[field.slug] }"
+          />
+
+          <!-- checkbox (one per option) -->
+          <div
+            v-else-if="field.field_type === 'checkbox'"
+            class="rounded-lg pa-4 border border-opacity-100"
+            style="border-color: rgba(var(--v-border-color), var(--v-border-opacity));"
+            :class="{ 'dynamic-field-error': !!fieldErrors[field.slug] }"
+          >
+            <div class="text-body-2 font-weight-medium mb-2">
+              {{ field.label }}<span v-if="field.is_required" class="text-error"> *</span>
+            </div>
+            <p
+              v-if="hint(field)"
+              class="text-caption text-medium-emphasis mb-3"
+            >
+              {{ hint(field) }}
+            </p>
+            <div class="d-flex flex-column ga-1">
+              <VCheckbox
+                v-for="opt in (field.options ?? [])"
+                :key="opt"
+                :model-value="isCheckboxOptionChecked(field.slug, opt)"
+                density="comfortable"
+                hide-details
+                :label="opt"
+                @update:model-value="(v: boolean | null) => toggleCheckboxOption(field.slug, opt, v)"
+              />
+            </div>
+            <div
+              v-if="fieldErrors[field.slug]"
+              class="text-caption text-error mt-2"
+            >
+              {{ fieldErrors[field.slug] }}
+            </div>
+          </div>
+
+          <!-- radio -->
+          <div v-else-if="field.field_type === 'radio'">
+            <div class="text-body-2 font-weight-medium mb-1">
+              {{ field.label }}<span v-if="field.is_required" class="text-error"> *</span>
+            </div>
+            <p
+              v-if="hint(field)"
+              class="text-caption text-medium-emphasis mb-2"
+            >
+              {{ hint(field) }}
+            </p>
+            <VRadioGroup
+              v-model="fieldValues[field.slug] as string"
+              density="comfortable"
+              hide-details="auto"
+              :error-messages="fieldErrors[field.slug]"
+              :class="{ 'dynamic-field-error': !!fieldErrors[field.slug] }"
+            >
+              <VRadio
+                v-for="opt in (field.options ?? [])"
+                :key="opt"
+                :label="opt"
+                :value="opt"
+                density="comfortable"
+                hide-details
+              />
+            </VRadioGroup>
+          </div>
+
+          <!-- boolean -->
+          <VSwitch
+            v-else-if="field.field_type === 'boolean'"
+            v-model="fieldValues[field.slug] as boolean"
+            inset
+            color="primary"
+            density="comfortable"
+            hide-details="auto"
+            :label="field.label + (field.is_required ? ' *' : '')"
+            :hint="hint(field)"
+            persistent-hint
+            :error-messages="fieldErrors[field.slug]"
+            :class="{ 'dynamic-field-error': !!fieldErrors[field.slug] }"
+          />
+
+          <!-- tag_picker -->
+          <VAutocomplete
+            v-else-if="field.field_type === 'tag_picker'"
+            v-model="fieldValues[field.slug] as string[]"
+            variant="outlined"
+            density="comfortable"
+            hide-details="auto"
+            multiple
+            chips
+            closable-chips
+            :items="field.available_tags ?? []"
+            item-title="name"
+            item-value="id"
+            :label="field.label + (field.is_required ? ' *' : '')"
+            :hint="hint(field)"
+            persistent-hint
+            :error-messages="fieldErrors[field.slug]"
+            :class="{ 'dynamic-field-error': !!fieldErrors[field.slug] }"
+          />
+        </div>
+      </VCol>
+    </VRow>
+  </div>
+</template>
+
+<style scoped>
+.dynamic-section-heading {
+  border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+}
+</style>
diff --git a/apps/portal/src/pages/register/[eventSlug].vue b/apps/portal/src/pages/register/[eventSlug].vue
index 3b7a444c..93a8f2de 100644
--- a/apps/portal/src/pages/register/[eventSlug].vue
+++ b/apps/portal/src/pages/register/[eventSlug].vue
@@ -2,14 +2,15 @@
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 import { useDisplay } from 'vuetify'
+import DynamicRegistrationFields from '@/components/registration/DynamicRegistrationFields.vue'
 import { useAuthStore } from '@/stores/useAuthStore'
 import { useRegistrationData, useSubmitRegistration } from '@/composables/api/useVolunteerRegistration'
 import { fullRegistrationSchema } from '@/schemas/registrationSchema'
 import type {
+  FieldValuePayload,
+  RegistrationFieldType,
   SectionOption,
-  SectionPreference,
   TimeSlotOption,
-  VolunteerAvailability,
   VolunteerRegistrationForm,
 } from '@/types/registration'
 
@@ -21,6 +22,8 @@ definePage({
   },
 })
 
+type StepKind = 'personal' | 'dynamic' | 'sections' | 'availability'
+
 const route = useRoute('volunteer-register')
 const router = useRouter()
 const authStore = useAuthStore()
@@ -32,9 +35,38 @@ const { mutateAsync: submitRegistration, isPending: isSubmitting } = useSubmitRe
 
 const currentStep = ref(0)
 const submitError = ref<string | null>(null)
+const fieldValues = ref<Record<string, unknown>>({})
+const fieldErrors = ref<Record<string, string>>({})
 
-// VeeValidate form
-const { errors, defineField, validateField, setFieldValue } = useForm({
+const stepMeta: Record<StepKind, { title: string; subtitle: string }> = {
+  personal: { title: 'Over jou', subtitle: 'Vul je persoonlijke gegevens in' },
+  dynamic: { title: 'Extra informatie', subtitle: 'Antwoord op de vragen van de organisatie' },
+  sections: { title: 'Voorkeurssecties', subtitle: 'Waar wil je het liefst werken?' },
+  availability: { title: 'Beschikbaarheid', subtitle: 'Wanneer kun je helpen?' },
+}
+
+const stepKinds = computed<StepKind[]>(() => {
+  if (!registrationData.value) return ['personal', 'dynamic']
+  const kinds: StepKind[] = ['personal', 'dynamic']
+  if (registrationData.value.event.registration_show_section_preferences)
+    kinds.push('sections')
+  if (registrationData.value.event.registration_show_availability)
+    kinds.push('availability')
+
+  return kinds
+})
+
+const steps = computed(() => stepKinds.value.map(k => stepMeta[k]))
+
+watch(stepKinds, kinds => {
+  if (currentStep.value >= kinds.length)
+    currentStep.value = Math.max(0, kinds.length - 1)
+})
+
+const currentKind = computed(() => stepKinds.value[currentStep.value] ?? 'personal')
+
+// VeeValidate — fixed personal fields only
+const { errors, defineField, validateField, setFieldValue, setFieldError } = useForm({
   validationSchema: toTypedSchema(fullRegistrationSchema),
   initialValues: {
     first_name: '',
@@ -42,12 +74,6 @@ const { errors, defineField, validateField, setFieldValue } = useForm({
     email: '',
     date_of_birth: '',
     phone: '',
-    tshirt_size: '',
-    first_aid: false,
-    allergies: '',
-    driving_licence: false,
-    motivation: '',
-    motivation_other: '',
   },
 })
 
@@ -56,14 +82,7 @@ const [lastName] = defineField('last_name')
 const [dateOfBirth] = defineField('date_of_birth')
 const [email] = defineField('email')
 const [phone] = defineField('phone')
-const [tshirtSize] = defineField('tshirt_size')
-const [firstAid] = defineField('first_aid')
-const [allergies] = defineField('allergies')
-const [drivingLicence] = defineField('driving_licence')
-const [motivation] = defineField('motivation')
-const [motivationOther] = defineField('motivation_other')
 
-// Pre-fill authenticated user data
 watch(() => authStore.user, user => {
   if (user) {
     setFieldValue('first_name', user.first_name)
@@ -72,38 +91,50 @@ watch(() => authStore.user, user => {
   }
 }, { immediate: true })
 
-// Step 3: Section preferences (by name, not ID)
-const selectedSections = ref<string[]>([])
+const registrationFieldsList = computed(() => registrationData.value?.registration_fields ?? [])
 
-// Step 4: Availability
+const groupedRegistrationFields = computed(() => {
+  const fields = registrationFieldsList.value
+  const groups: { section: string | null; fields: typeof fields }[] = []
+  for (const f of fields) {
+    const last = groups[groups.length - 1]
+    if (last && last.section === f.section)
+      last.fields.push(f)
+    else
+      groups.push({ section: f.section, fields: [f] })
+  }
+
+  return groups
+})
+
+function defaultFieldValue(type: RegistrationFieldType): unknown {
+  switch (type) {
+    case 'multiselect':
+    case 'checkbox':
+    case 'tag_picker':
+      return []
+    case 'boolean':
+      return false
+    case 'number':
+      return null
+    default:
+      return ''
+  }
+}
+
+watch(registrationFieldsList, fields => {
+  for (const f of fields) {
+    if (!(f.slug in fieldValues.value))
+      fieldValues.value[f.slug] = defaultFieldValue(f.field_type)
+  }
+}, { immediate: true })
+
+// Section preferences (by festival_section_id, max 5, order = priority)
+const selectedSectionIds = ref<string[]>([])
+
+// Availability (time slots)
 const selectedTimeSlotIds = ref<string[]>([])
-const timeSlotPreferences = ref<Record<string, number>>({})
 
-// Steps definition
-const steps = [
-  { title: 'Over jou', subtitle: 'Vul je persoonlijke gegevens in' },
-  { title: 'Meer over jou', subtitle: 'Praktische informatie' },
-  { title: 'Motivatie', subtitle: 'Waarom wil je meehelpen?' },
-  { title: 'Secties', subtitle: 'Waar wil je het liefst werken?' },
-  { title: 'Beschikbaarheid', subtitle: 'Wanneer kun je helpen?' },
-]
-
-// Constants
-const tshirtSizeItems = [
-  { title: 'Geen voorkeur', value: '' },
-  ...['XS', 'S', 'M', 'L', 'XL', 'XXL', 'XXXL'].map(s => ({ title: s, value: s })),
-]
-
-const motivationItems = [
-  { title: 'Gratis festivalpas', value: 'Gratis festivalpas' },
-  { title: 'Ervaring opdoen', value: 'Ervaring opdoen' },
-  { title: 'Vrienden helpen', value: 'Vrienden helpen' },
-  { title: 'CV opbouwen', value: 'CV opbouwen' },
-  { title: 'Ik ben gevraagd', value: 'Ik ben gevraagd' },
-  { title: 'Anders', value: 'Anders' },
-]
-
-// Section helpers
 const sectionsByCategory = computed(() => {
   if (!registrationData.value?.sections) return {}
 
@@ -116,17 +147,16 @@ const sectionsByCategory = computed(() => {
   }, {} as Record<string, SectionOption[]>)
 })
 
-function isSelected(sectionName: string) {
-  return selectedSections.value.includes(sectionName)
+function isSelected(sectionId: string) {
+  return selectedSectionIds.value.includes(sectionId)
 }
 
-function getSelectionPriority(sectionName: string) {
-  return selectedSections.value.indexOf(sectionName) + 1
+function getSelectionPriority(sectionId: string) {
+  return selectedSectionIds.value.indexOf(sectionId) + 1
 }
 
-const selectedCount = computed(() => selectedSections.value.length)
+const selectedCount = computed(() => selectedSectionIds.value.length)
 
-// Computed
 const timeSlotsByDate = computed(() => {
   if (!registrationData.value?.time_slots) return []
   const groups = new Map<string, TimeSlotOption[]>()
@@ -158,27 +188,97 @@ const formattedDates = computed(() => {
   )
 })
 
-// Step field mapping for validation (0-based)
-type FormField = 'first_name' | 'last_name' | 'date_of_birth' | 'email' | 'phone' | 'tshirt_size' | 'first_aid' | 'allergies' | 'driving_licence' | 'motivation' | 'motivation_other'
+const personalFields = ['first_name', 'last_name', 'date_of_birth', 'email', 'phone'] as const
 
-const stepFields: Record<number, FormField[]> = {
-  0: ['first_name', 'last_name', 'date_of_birth', 'email', 'phone'],
-  1: ['tshirt_size', 'first_aid', 'allergies', 'driving_licence'],
-  2: ['motivation', 'motivation_other'],
+async function validateCurrentStep(): Promise<boolean> {
+  const kind = currentKind.value
+  if (kind === 'personal') {
+    const results = await Promise.all(personalFields.map(f => validateField(f)))
+
+    return results.every(r => r.valid)
+  }
+  if (kind === 'dynamic')
+    return validateDynamicFields()
+
+  return true
 }
 
-// Navigation
-async function validateCurrentStep(): Promise<boolean> {
-  const fields = stepFields[currentStep.value]
-  if (!fields) return true
-  const results = await Promise.all(fields.map(f => validateField(f)))
+function isMultiValueType(type: RegistrationFieldType): boolean {
+  return type === 'multiselect' || type === 'checkbox' || type === 'tag_picker'
+}
 
-  return results.every(r => r.valid)
+function valueEmpty(value: unknown, type: RegistrationFieldType): boolean {
+  if (value === undefined || value === null) return true
+  if (value === '') return true
+  if (type === 'number' && (typeof value !== 'number' || Number.isNaN(value))) return true
+  if (isMultiValueType(type)) {
+    if (!Array.isArray(value)) return true
+
+    return value.length === 0
+  }
+
+  return false
+}
+
+function validateDynamicFields(): boolean {
+  fieldErrors.value = {}
+  let firstSlug: string | null = null
+
+  for (const field of registrationFieldsList.value) {
+    if (!field.is_required)
+      continue
+
+    const value = fieldValues.value[field.slug]
+
+    if (valueEmpty(value, field.field_type)) {
+      fieldErrors.value[field.slug] = 'Dit veld is verplicht.'
+      firstSlug ??= field.slug
+      continue
+    }
+
+    if (field.field_type === 'select' || field.field_type === 'radio') {
+      const opts = field.options ?? []
+      if (typeof value === 'string' && !opts.includes(value)) {
+        fieldErrors.value[field.slug] = 'Maak een geldige keuze.'
+        firstSlug ??= field.slug
+      }
+    }
+
+    if (field.field_type === 'multiselect' || field.field_type === 'checkbox') {
+      const opts = field.options ?? []
+      const arr = Array.isArray(value) ? value : []
+      if (arr.some(x => !opts.includes(String(x)))) {
+        fieldErrors.value[field.slug] = 'Ongeldige optie geselecteerd.'
+        firstSlug ??= field.slug
+      }
+    }
+
+    if (field.field_type === 'tag_picker') {
+      const tags = field.available_tags ?? []
+      const ids = new Set(tags.map(t => t.id))
+      const arr = Array.isArray(value) ? value : []
+      if (arr.some(id => !ids.has(String(id)))) {
+        fieldErrors.value[field.slug] = 'Ongeldige tag geselecteerd.'
+        firstSlug ??= field.slug
+      }
+    }
+  }
+
+  if (firstSlug) {
+    nextTick(() => {
+      document.getElementById(`dyn-field-${firstSlug}`)?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    })
+
+    return false
+  }
+
+  return true
 }
 
 async function nextStep() {
   if (await validateCurrentStep()) {
-    if (currentStep.value < 4) currentStep.value++
+    if (currentStep.value < steps.value.length - 1)
+      currentStep.value++
   }
 }
 
@@ -187,41 +287,47 @@ function prevStep() {
 }
 
 function goToStep(index: number) {
-  if (index < currentStep.value) {
+  if (index < currentStep.value)
     currentStep.value = index
-  }
 }
 
-// Section toggle
-function toggleSection(sectionName: string) {
-  const idx = selectedSections.value.indexOf(sectionName)
+function toggleSection(sectionId: string) {
+  const idx = selectedSectionIds.value.indexOf(sectionId)
   if (idx !== -1) {
-    selectedSections.value.splice(idx, 1)
+    selectedSectionIds.value.splice(idx, 1)
   }
-  else if (selectedSections.value.length < 5) {
-    selectedSections.value.push(sectionName)
+  else if (selectedSectionIds.value.length < 5) {
+    selectedSectionIds.value.push(sectionId)
   }
 }
 
-// Time slot toggle
+function moveSection(sectionId: string, direction: -1 | 1) {
+  const i = selectedSectionIds.value.indexOf(sectionId)
+  const j = i + direction
+  if (i < 0 || j < 0 || j >= selectedSectionIds.value.length)
+    return
+  const next = [...selectedSectionIds.value]
+  const a = next[i]!
+  const b = next[j]!
+  next[i] = b
+  next[j] = a
+  selectedSectionIds.value = next
+}
+
 function toggleTimeSlot(slotId: string) {
   const idx = selectedTimeSlotIds.value.indexOf(slotId)
-  if (idx >= 0) {
+  if (idx >= 0)
     selectedTimeSlotIds.value.splice(idx, 1)
-    delete timeSlotPreferences.value[slotId]
-  }
-  else {
+  else
     selectedTimeSlotIds.value.push(slotId)
-    timeSlotPreferences.value[slotId] = 3
-  }
 }
 
-// Helpers
 function formatDate(dateStr: string): string {
   return new Date(`${dateStr}T00:00:00`).toLocaleDateString('nl-NL', {
     weekday: 'long',
     day: 'numeric',
     month: 'long',
+    year: 'numeric',
   })
 }
 
@@ -240,49 +346,95 @@ function formatTimeRange(start: string, end: string): string {
   return `${start.slice(0, 5)} – ${end.slice(0, 5)}`
 }
 
-// Submit
+function buildFieldValues(): Record<string, FieldValuePayload> | undefined {
+  const out: Record<string, FieldValuePayload> = {}
+
+  for (const f of registrationFieldsList.value) {
+    const raw = fieldValues.value[f.slug]
+
+    if (f.field_type === 'boolean') {
+      if (typeof raw === 'boolean')
+        out[f.slug] = raw
+      continue
+    }
+
+    if (raw === undefined || raw === null) continue
+    if (raw === '') continue
+    if (Array.isArray(raw) && raw.length === 0) continue
+    out[f.slug] = raw as FieldValuePayload
+  }
+
+  if (Object.keys(out).length === 0)
+    return undefined
+
+  return out
+}
+
+function isPersonalField(key: string): key is typeof personalFields[number] {
+  return (personalFields as readonly string[]).includes(key)
+}
+
+function applyServerValidationErrors(serverErrors: Record<string, string[]>) {
+  fieldErrors.value = {}
+  for (const [key, msgs] of Object.entries(serverErrors)) {
+    const m = /^field_values\.(.+)$/.exec(key)
+    if (m?.[1]) {
+      fieldErrors.value[m[1]] = msgs[0] ?? 'Ongeldige waarde.'
+
+      continue
+    }
+
+    if (isPersonalField(key))
+      setFieldError(key, msgs[0] ?? 'Ongeldige waarde.')
+  }
+}
+
 async function onSubmit() {
   submitError.value = null
+  fieldErrors.value = {}
 
-  // Validate steps 0-2
-  for (let step = 0; step <= 2; step++) {
-    const fields = stepFields[step]
-    if (!fields) continue
-    const results = await Promise.all(fields.map(f => validateField(f)))
-
-    if (!results.every(r => r.valid)) {
-      currentStep.value = step
+  for (const f of personalFields) {
+    const r = await validateField(f)
+    if (!r.valid) {
+      currentStep.value = stepKinds.value.indexOf('personal')
 
       return
     }
   }
 
+  if (!validateDynamicFields()) {
+    currentStep.value = stepKinds.value.indexOf('dynamic')
+
+    return
+  }
+
   if (!registrationData.value) return
 
-  const sectionPreferences: SectionPreference[] = selectedSections.value.map((sectionName, index) => ({
-    section_name: sectionName,
-    priority: index + 1,
-  }))
-
-  const availabilities: VolunteerAvailability[] = selectedTimeSlotIds.value.map(id => ({
-    time_slot_id: id,
-    preference_level: timeSlotPreferences.value[id] ?? 3,
-  }))
-
   const payload: VolunteerRegistrationForm = {
     first_name: firstName.value ?? '',
     last_name: lastName.value ?? '',
-    date_of_birth: dateOfBirth.value ?? '',
     email: email.value ?? '',
-    phone: phone.value ?? '',
-    tshirt_size: tshirtSize.value ?? '',
-    first_aid: firstAid.value ?? false,
-    allergies: allergies.value ?? '',
-    driving_licence: drivingLicence.value ?? false,
-    motivation: motivation.value ?? '',
-    motivation_other: motivationOther.value ?? '',
-    section_preferences: sectionPreferences,
-    availabilities,
+    phone: (phone.value && String(phone.value).trim() !== '') ? String(phone.value) : undefined,
+    date_of_birth: (dateOfBirth.value && String(dateOfBirth.value).trim() !== '')
+      ? String(dateOfBirth.value)
+      : undefined,
+  }
+
+  const fv = buildFieldValues()
+  if (fv) payload.field_values = fv
+
+  if (registrationData.value.event.registration_show_section_preferences && selectedSectionIds.value.length > 0) {
+    payload.section_preferences = selectedSectionIds.value.map((id, index) => ({
+      festival_section_id: id,
+      priority: index + 1,
+    }))
+  }
+
+  if (registrationData.value.event.registration_show_availability && selectedTimeSlotIds.value.length > 0) {
+    payload.availabilities = selectedTimeSlotIds.value.map(id => ({
+      time_slot_id: id,
+      preference_level: 3,
+    }))
   }
 
   try {
@@ -301,20 +453,35 @@ async function onSubmit() {
     })
   }
   catch (error: unknown) {
-    const axiosError = error as { response?: { status?: number; data?: { errors?: Record<string, string[]> } } }
+    const axiosError = error as { response?: { status?: number; data?: { errors?: Record<string, string[]>; message?: string } } }
 
     if (axiosError.response?.status === 422) {
       const serverErrors = axiosError.response.data?.errors
-
       if (serverErrors) {
-        for (const field of Object.keys(serverErrors)) {
-          for (const [step, fields] of Object.entries(stepFields)) {
-            if (fields.includes(field as FormField)) {
-              currentStep.value = Number(step)
+        applyServerValidationErrors(serverErrors)
 
-              return
-            }
-          }
+        const keys = Object.keys(serverErrors)
+        if (keys.some(k => isPersonalField(k))) {
+          currentStep.value = stepKinds.value.indexOf('personal')
+
+          return
+        }
+        if (keys.some(k => k.startsWith('field_values.'))) {
+          currentStep.value = stepKinds.value.indexOf('dynamic')
+
+          return
+        }
+        if (keys.some(k => k.startsWith('section_preferences'))) {
+          const idx = stepKinds.value.indexOf('sections')
+          if (idx !== -1) currentStep.value = idx
+
+          return
+        }
+        if (keys.some(k => k.startsWith('availabilities'))) {
+          const idx = stepKinds.value.indexOf('availability')
+          if (idx !== -1) currentStep.value = idx
+
+          return
         }
       }
       submitError.value = 'Er zijn validatiefouten gevonden. Controleer je invoer.'
@@ -330,11 +497,12 @@ async function onSubmit() {
   <!-- Loading -->
   <div
     v-if="isLoading"
-    class="d-flex align-center justify-center"
+    class="d-flex align-center justify-center bg-grey-lighten-5"
     style="min-block-size: 100dvh;"
   >
     <VCard
       flat
+      elevation="1"
       :max-width="500"
       class="pa-12 text-center"
     >
@@ -353,11 +521,12 @@ async function onSubmit() {
   <!-- Error / Not available -->
   <div
     v-else-if="isError || !registrationData"
-    class="d-flex align-center justify-center"
+    class="d-flex align-center justify-center bg-grey-lighten-5"
     style="min-block-size: 100dvh;"
   >
     <VCard
       flat
+      elevation="1"
       :max-width="500"
       class="text-center pa-8"
     >
@@ -383,7 +552,10 @@ async function onSubmit() {
   </div>
 
   <!-- Registration page -->
-  <div v-else>
+  <div
+    v-else
+    class="bg-grey-lighten-5"
+  >
     <!-- Hero banner -->
     <div
       v-if="registrationData.event.registration_banner_url"
@@ -391,21 +563,23 @@ async function onSubmit() {
     >
       <VImg
         :src="registrationData.event.registration_banner_url"
-        height="220"
+        height="200"
         cover
-        gradient="to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.55)"
+        gradient="to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.45)"
       >
         <div class="d-flex flex-column align-center justify-end fill-height pa-6 text-white">
           <img
             v-if="registrationData.event.registration_logo_url"
             :src="registrationData.event.registration_logo_url"
+            alt=""
+            width="48"
             height="48"
             class="mb-2 rounded"
           >
-          <h2 class="text-h4 font-weight-bold text-center">
+          <h1 class="text-h4 font-weight-bold text-center text-white">
             {{ registrationData.event.name }}
-          </h2>
-          <p class="text-subtitle-1 mb-0">
+          </h1>
+          <p class="text-body-1 mb-0 text-white text-opacity-90">
             {{ formattedDates }}
           </p>
         </div>
@@ -415,90 +589,90 @@ async function onSubmit() {
     <!-- Fallback header when no banner -->
     <div
       v-else
-      class="d-flex flex-column align-center pa-8"
-      style="background: rgb(var(--v-theme-primary));"
+      class="registration-header-fallback pa-8 text-center border-b thin"
     >
       <img
         v-if="registrationData.event.registration_logo_url"
         :src="registrationData.event.registration_logo_url"
+        alt=""
+        width="48"
         height="48"
-        class="mb-2 rounded"
+        class="mb-3 rounded"
       >
-      <h2 class="text-h4 font-weight-bold text-white text-center">
+      <h1 class="text-h4 font-weight-bold text-high-emphasis mb-1">
         {{ registrationData.event.name }}
-      </h2>
-      <p
-        class="text-subtitle-1 mb-0"
-        style="color: rgba(255,255,255,0.7);"
-      >
+      </h1>
+      <p class="text-body-1 text-medium-emphasis mb-0">
         {{ formattedDates }}
       </p>
     </div>
 
-    <!-- Content container -->
     <VContainer
-      class="registration-container"
-      :class="{ 'mt-n8': registrationData.event.registration_banner_url }"
+      class="registration-container pb-10"
+      :class="{ 'mt-n6': registrationData.event.registration_banner_url }"
     >
-      <!-- Welcome text -->
-      <VCard
-        v-if="registrationData.event.registration_welcome_text"
-        class="mb-4 pa-5"
-        variant="flat"
-      >
-        <p class="text-body-1 mb-0">
-          {{ registrationData.event.registration_welcome_text }}
-        </p>
-      </VCard>
-
-      <!-- Auth info / Login hint -->
-      <VAlert
-        v-if="authStore.isAuthenticated"
-        type="info"
-        variant="tonal"
-        class="mb-4"
-      >
-        Je bent ingelogd als {{ authStore.user?.full_name }}. Je gegevens zijn automatisch ingevuld.
-      </VAlert>
-
       <div
-        v-else
-        class="text-body-2 text-medium-emphasis mb-4"
+        v-if="!authStore.isAuthenticated"
+        class="text-caption text-medium-emphasis text-center mb-3"
       >
         Al een account?
         <RouterLink
           to="/login"
-          class="text-primary font-weight-medium"
+          class="text-medium-emphasis"
         >
           Log in
         </RouterLink>
         om je gegevens automatisch in te vullen.
       </div>
 
-      <!-- Submit error -->
+      <VCard
+        v-if="registrationData.event.registration_welcome_text"
+        variant="flat"
+        elevation="1"
+        class="mb-6 pa-5 bg-grey-lighten-4"
+      >
+        <div
+          class="text-body-1 text-medium-emphasis registration-welcome-html"
+          v-html="registrationData.event.registration_welcome_text"
+        />
+      </VCard>
+
+      <VAlert
+        v-if="authStore.isAuthenticated"
+        type="info"
+        variant="tonal"
+        density="comfortable"
+        class="mb-6"
+        border="start"
+      >
+        Je bent ingelogd als {{ authStore.user?.full_name }}. Je gegevens zijn automatisch ingevuld.
+      </VAlert>
+
       <VAlert
         v-if="submitError"
         type="error"
         variant="tonal"
-        class="mb-4"
+        class="mb-6"
         closable
         @click:close="submitError = null"
       >
         {{ submitError }}
       </VAlert>
 
-      <!-- Wizard -->
       <VRow no-gutters>
-        <!-- Desktop: vertical step navigation -->
         <VCol
           v-if="mdAndUp"
           cols="12"
           md="4"
         >
-          <div class="pa-5 pt-8">
+          <VCard
+            variant="flat"
+            elevation="0"
+            class="pa-5 pt-4 mb-4"
+          >
             <div
               class="d-flex flex-column"
-              style="gap: 28px;"
+              style="gap: 24px;"
             >
               <div
                 v-for="(step, index) in steps"
@@ -507,76 +681,55 @@ async function onSubmit() {
                 :class="{ 'cursor-pointer': index < currentStep }"
                 @click="index < currentStep && goToStep(index)"
               >
-                <!-- Number square -->
                 <div
-                  class="d-flex align-center justify-center flex-shrink-0"
-                  :style="{
-                    width: '50px',
-                    height: '50px',
-                    borderRadius: '10px',
-                    fontSize: '18px',
-                    fontWeight: 700,
-                    backgroundColor: index === currentStep
-                      ? 'rgb(var(--v-theme-primary))'
-                      : index < currentStep
-                        ? 'rgba(var(--v-theme-primary), 0.16)'
-                        : 'rgba(var(--v-theme-on-surface), 0.08)',
-                    color: index === currentStep
-                      ? 'white'
-                      : index < currentStep
-                        ? 'rgb(var(--v-theme-primary))'
-                        : 'rgba(var(--v-theme-on-surface), 0.4)',
-                    transition: 'all 0.2s ease',
+                  class="d-flex align-center justify-center flex-shrink-0 step-indicator"
+                  :class="{
+                    'step-indicator--active': index === currentStep,
+                    'step-indicator--done': index < currentStep,
+                    'step-indicator--todo': index > currentStep,
                   }"
                 >
                   <VIcon
                     v-if="index < currentStep"
                     size="22"
-                  >
-                    tabler-check
-                  </VIcon>
+                    icon="tabler-check"
+                  />
                   <span v-else>{{ index + 1 }}</span>
                 </div>
 
-                <!-- Step text -->
                 <div>
                   <div
                     :class="{
-                      'text-body-1 font-weight-bold': index === currentStep,
-                      'text-body-1 font-weight-medium': index !== currentStep,
+                      'text-body-1 font-weight-semibold': index === currentStep,
+                      'text-body-2': index !== currentStep,
                     }"
                     :style="index > currentStep
-                      ? 'color: rgba(var(--v-theme-on-surface), 0.4)'
+                      ? 'color: rgba(var(--v-theme-on-surface), 0.38)'
                       : index < currentStep
-                        ? 'color: rgba(var(--v-theme-on-surface), 0.5)'
+                        ? 'color: rgba(var(--v-theme-on-surface), 0.55)'
                         : ''
                     "
                   >
                     {{ step.title }}
                   </div>
                   <div
-                    class="text-caption"
-                    :style="{
-                      color: index === currentStep
-                        ? 'rgba(var(--v-theme-on-surface), 0.5)'
-                        : 'rgba(var(--v-theme-on-surface), 0.35)',
-                    }"
+                    class="text-caption text-medium-emphasis"
                   >
                     {{ step.subtitle }}
                   </div>
                 </div>
               </div>
             </div>
-          </div>
+          </VCard>
         </VCol>
 
-        <!-- Mobile: horizontal chips -->
         <VCol
           v-if="!mdAndUp"
           cols="12"
         >
           <VCard
             variant="flat"
+            elevation="1"
             rounded="lg"
             class="mb-4"
           >
@@ -592,38 +745,39 @@ async function onSubmit() {
                   v-if="index < currentStep"
                   start
                   size="14"
-                >
-                  tabler-check
-                </VIcon>
+                  icon="tabler-check"
+                />
                 <span>{{ index + 1 }}. {{ step.title }}</span>
               </VChip>
             </div>
           </VCard>
         </VCol>
 
-        <!-- Step content -->
         <VCol
           cols="12"
           :md="mdAndUp ? 8 : 12"
         >
           <VCard
             variant="flat"
+            elevation="1"
             rounded="lg"
             class="h-100"
           >
-            <VCardText class="pa-8">
-              <!-- Step header -->
+            <VCardText class="pa-6 pa-md-8">
               <div class="mb-6">
-                <h5 class="text-h5 mb-1">
-                  {{ steps[currentStep].title }}
-                </h5>
+                <p class="text-caption text-medium-emphasis mb-1">
+                  Deel {{ currentStep + 1 }} van {{ steps.length }}
+                </p>
+                <h2 class="text-h5 mb-1 text-high-emphasis">
+                  {{ steps[currentStep]?.title }}
+                </h2>
                 <p class="text-body-2 text-medium-emphasis mb-0">
-                  {{ steps[currentStep].subtitle }}
+                  {{ steps[currentStep]?.subtitle }}
                 </p>
               </div>
 
-              <!-- Step 0: Over jou + contact (Vuexy: vertical fields, form separator, contact block) -->
-              <div v-show="currentStep === 0">
+              <!-- Step: Over jou -->
+              <div v-show="currentKind === 'personal'">
                 <VRow>
                   <VCol
                     cols="12"
@@ -699,11 +853,11 @@ async function onSubmit() {
                   </VCol>
                 </VRow>
 
-                <hr class="my-6 mx-n6">
+                <hr class="my-6 mx-n6 opacity-20">
 
-                <h6 class="text-h6 mb-2">
+                <h3 class="text-h6 mb-2 text-high-emphasis">
                   Contactgegevens
-                </h6>
+                </h3>
                 <p class="text-body-2 text-medium-emphasis mb-6">
                   Vul deze gegevens zorgvuldig in: we gebruiken ze om alle informatie over het evenement naar je te versturen.
                   Je e-mailadres is ook je gebruikersnaam voor Crewli, het systeem waar je straks alle informatie terugvindt.
@@ -752,190 +906,110 @@ async function onSubmit() {
                 </VRow>
               </div>
 
-              <!-- Step 1: Meer over jou -->
-              <div v-show="currentStep === 1">
-                <VRow>
-                  <VCol
-                    cols="12"
-                    md="6"
-                  >
-                    <label
-                      class="text-body-2 d-block mb-1 text-high-emphasis"
-                      for="volunteer-reg-tshirt"
-                    >
-                      Shirtmaat
-                    </label>
-                    <VSelect
-                      id="volunteer-reg-tshirt"
-                      v-model="tshirtSize"
-                      :items="tshirtSizeItems"
-                      variant="outlined"
-                      placeholder="Selecteer je maat"
-                      :error-messages="errors.tshirt_size"
-                      density="comfortable"
-                      hide-details="auto"
-                    />
-                  </VCol>
-
-                  <VCol
-                    cols="12"
-                    md="6"
-                    class="d-flex align-end"
-                  >
-                    <div class="d-flex ga-6 flex-wrap pb-1 w-100">
-                      <VSwitch
-                        v-model="firstAid"
-                        label="EHBO-diploma"
-                        color="primary"
-                        hide-details
-                      />
-
-                      <VSwitch
-                        v-model="drivingLicence"
-                        label="Rijbewijs B"
-                        color="primary"
-                        hide-details
-                      />
-                    </div>
-                  </VCol>
-
-                  <VCol cols="12">
-                    <label
-                      class="text-body-2 d-block mb-1 text-high-emphasis"
-                      for="volunteer-reg-allergies"
-                    >
-                      Allergieën of dieetwensen
-                    </label>
-                    <VTextarea
-                      id="volunteer-reg-allergies"
-                      v-model="allergies"
-                      variant="outlined"
-                      placeholder="Laat ons weten als je allergieën of dieetwensen hebt"
-                      :error-messages="errors.allergies"
-                      :counter="500"
-                      rows="2"
-                      auto-grow
-                      density="comfortable"
-                      hide-details="auto"
-                    />
-                  </VCol>
-
-                </VRow>
+              <!-- Step: Extra informatie -->
+              <div v-show="currentKind === 'dynamic'">
+                <DynamicRegistrationFields
+                  v-model:field-values="fieldValues"
+                  :groups="groupedRegistrationFields"
+                  :field-errors="fieldErrors"
+                />
               </div>
 
-              <!-- Step 2: Motivatie -->
-              <div v-show="currentStep === 2">
-                <VRow>
-                  <VCol
-                    cols="12"
-                    md="6"
-                  >
-                    <label
-                      class="text-body-2 d-block mb-1 text-high-emphasis"
-                      for="volunteer-reg-motivation"
-                    >
-                      Waarom wil je vrijwilliger zijn?
-                    </label>
-                    <VSelect
-                      id="volunteer-reg-motivation"
-                      v-model="motivation"
-                      :items="motivationItems"
-                      variant="outlined"
-                      placeholder="Selecteer je motivatie"
-                      :error-messages="errors.motivation"
-                      clearable
-                      density="comfortable"
-                      hide-details="auto"
-                    />
-                  </VCol>
+              <!-- Step: Voorkeurssecties -->
+              <div v-show="currentKind === 'sections'">
+                <p class="text-body-2 text-medium-emphasis mb-6">
+                  We proberen hier zoveel mogelijk rekening mee te houden,
+                  maar de uiteindelijke indeling wordt bepaald door de organisatie.
+                </p>
 
-                  <VExpandTransition>
-                    <VCol
-                      v-if="motivation"
-                      cols="12"
-                    >
-                      <label
-                        class="text-body-2 d-block mb-1 text-high-emphasis"
-                        for="volunteer-reg-motivation-other"
-                      >
-                        Toelichting
-                      </label>
-                      <VTextarea
-                        id="volunteer-reg-motivation-other"
-                        v-model="motivationOther"
-                        variant="outlined"
-                        placeholder="Vertel ons meer over je motivatie..."
-                        :error-messages="errors.motivation_other"
-                        :counter="500"
-                        rows="3"
-                        auto-grow
-                        density="comfortable"
-                        hide-details="auto"
-                      />
-                    </VCol>
-                  </VExpandTransition>
-                </VRow>
-              </div>
-
-              <!-- Step 3: Secties -->
-              <div v-show="currentStep === 3">
                 <template
                   v-for="(sections, category) in sectionsByCategory"
                   :key="category"
                 >
-                  <div class="text-subtitle-2 text-medium-emphasis mt-4 mb-2">
+                  <div class="section-category-heading text-subtitle-2 font-weight-semibold text-high-emphasis mb-3 mt-2">
                     {{ category }}
                   </div>
 
-                  <VRow dense>
+                  <VRow class="registration-section-grid">
                     <VCol
                       v-for="section in sections"
                       :key="section.id"
                       cols="12"
                       sm="6"
+                      class="d-flex"
                     >
                       <VCard
-                        :variant="isSelected(section.name) ? 'flat' : 'outlined'"
-                        :color="isSelected(section.name) ? 'primary' : undefined"
-                        class="cursor-pointer"
-                        :disabled="!isSelected(section.name) && selectedCount >= 5"
-                        @click="toggleSection(section.name)"
+                        variant="outlined"
+                        elevation="0"
+                        class="section-pref-card flex-grow-1 d-flex flex-column cursor-pointer position-relative"
+                        :class="{ 'section-pref-card--selected': isSelected(section.id) }"
+                        :disabled="!isSelected(section.id) && selectedCount >= 5"
+                        @click="toggleSection(section.id)"
                       >
-                        <VCardText class="d-flex align-center ga-3 pa-3">
-                          <VCheckboxBtn
-                            :model-value="isSelected(section.name)"
-                            readonly
-                            density="compact"
-                            hide-details
-                          />
+                        <div
+                          v-if="isSelected(section.id)"
+                          class="priority-pill"
+                        >
+                          #{{ getSelectionPriority(section.id) }}
+                        </div>
 
-                          <VIcon
-                            v-if="section.icon"
-                            size="20"
-                          >
-                            {{ section.icon }}
-                          </VIcon>
+                        <VCardText class="d-flex flex-column flex-grow-1 pa-4">
+                          <div class="d-flex align-start ga-3 mb-2">
+                            <VCheckboxBtn
+                              :model-value="isSelected(section.id)"
+                              readonly
+                              density="compact"
+                              hide-details
+                              class="flex-shrink-0 mt-0"
+                            />
 
-                          <div class="flex-grow-1">
-                            <div class="text-body-1 font-weight-medium">
-                              {{ section.name }}
-                            </div>
-                            <div
-                              v-if="section.registration_description"
-                              class="text-body-2 text-medium-emphasis"
-                            >
-                              {{ section.registration_description }}
+                            <VIcon
+                              v-if="section.icon"
+                              :icon="section.icon"
+                              size="24"
+                              class="flex-shrink-0 text-medium-emphasis"
+                            />
+
+                            <div class="flex-grow-1 min-w-0">
+                              <div class="text-body-1 font-weight-medium text-high-emphasis">
+                                {{ section.name }}
+                              </div>
+                              <div
+                                v-if="section.registration_description"
+                                class="text-body-2 text-medium-emphasis text-truncate"
+                                style="max-inline-size: 100%;"
+                              >
+                                {{ section.registration_description }}
+                              </div>
                             </div>
                           </div>
 
-                          <VChip
-                            v-if="isSelected(section.name)"
-                            size="x-small"
-                            color="primary"
-                            variant="elevated"
+                          <div
+                            v-if="isSelected(section.id)"
+                            class="d-flex justify-end ga-1 mt-auto pt-2"
+                            @click.stop
                           >
-                            #{{ getSelectionPriority(section.name) }}
-                          </VChip>
+                            <VBtn
+                              icon
+                              variant="text"
+                              size="small"
+                              :disabled="getSelectionPriority(section.id) <= 1"
+                              aria-label="Omhoog"
+                              @click="moveSection(section.id, -1)"
+                            >
+                              <VIcon icon="tabler-chevron-up" />
+                            </VBtn>
+                            <VBtn
+                              icon
+                              variant="text"
+                              size="small"
+                              :disabled="getSelectionPriority(section.id) >= selectedCount"
+                              aria-label="Omlaag"
+                              @click="moveSection(section.id, 1)"
+                            >
+                              <VIcon icon="tabler-chevron-down" />
+                            </VBtn>
+                          </div>
                         </VCardText>
                       </VCard>
                     </VCol>
@@ -947,20 +1021,21 @@ async function onSubmit() {
                   type="info"
                   variant="tonal"
                   class="mt-4"
+                  density="comfortable"
                 >
                   Er zijn nog geen werkgebieden geconfigureerd voor dit evenement.
                 </VAlert>
 
                 <p
                   v-if="selectedCount > 0"
-                  class="text-body-2 text-medium-emphasis mt-4"
+                  class="text-body-2 text-medium-emphasis mt-4 mb-0"
                 >
                   {{ selectedCount }} van 5 onderdelen geselecteerd
                 </p>
               </div>
 
-              <!-- Step 4: Beschikbaarheid -->
-              <div v-show="currentStep === 4">
+              <!-- Step: Beschikbaarheid -->
+              <div v-show="currentKind === 'availability'">
                 <p
                   v-if="registrationData.time_slots.length === 0"
                   class="text-body-1 text-medium-emphasis"
@@ -974,16 +1049,23 @@ async function onSubmit() {
                     :key="date"
                     class="mb-6"
                   >
-                    <h4 class="text-subtitle-1 font-weight-bold mb-2 text-capitalize">
-                      {{ formatDate(date) }}
-                    </h4>
+                    <h3 class="text-subtitle-1 font-weight-semibold mb-3 text-high-emphasis d-flex align-center ga-2">
+                      <VIcon
+                        icon="tabler-calendar-event"
+                        size="20"
+                        class="text-medium-emphasis"
+                      />
+                      <span class="text-capitalize">{{ formatDate(date) }}</span>
+                    </h3>
                     <VList
-                      density="compact"
-                      class="registration-availability-list"
+                      density="comfortable"
+                      class="registration-availability-list bg-transparent"
                     >
                       <VListItem
                         v-for="slot in slots"
                         :key="slot.id"
+                        rounded="lg"
+                        class="mb-1 px-2"
                         @click="toggleTimeSlot(slot.id)"
                       >
                         <template #prepend>
@@ -993,41 +1075,27 @@ async function onSubmit() {
                           />
                         </template>
 
-                        <VListItemTitle>{{ slot.name }}</VListItemTitle>
-                        <VListItemSubtitle>
-                          {{ formatTimeRange(slot.start_time, slot.end_time) }} &middot; {{ slot.duration_hours }}u
+                        <VListItemTitle class="text-body-1">
+                          {{ slot.name }}
+                        </VListItemTitle>
+                        <VListItemSubtitle class="text-body-2">
+                          {{ formatTimeRange(slot.start_time, slot.end_time) }} &middot; {{ slot.duration_hours }} uur
                         </VListItemSubtitle>
-
-                        <template
-                          v-if="selectedTimeSlotIds.includes(slot.id)"
-                          #append
-                        >
-                          <VRating
-                            v-model="timeSlotPreferences[slot.id]"
-                            density="compact"
-                            size="small"
-                            length="5"
-                            color="warning"
-                            active-color="warning"
-                            @click.stop
-                          />
-                        </template>
                       </VListItem>
                     </VList>
                   </div>
 
-                  <VDivider class="mb-4" />
+                  <VDivider class="my-4" />
 
-                  <div class="d-flex align-center">
-                    <span class="text-body-1">
-                      Totaal geselecteerd: <strong>{{ totalSelectedHours }} uur</strong>
-                    </span>
-                  </div>
+                  <p class="text-body-2 text-medium-emphasis mb-0">
+                    Totaal geselecteerd: <span class="text-high-emphasis font-weight-medium">{{ totalSelectedHours }} uur</span>
+                  </p>
 
                   <VAlert
                     v-if="selectedTimeSlotIds.length > 0 && totalSelectedHours < 8"
                     type="warning"
                     variant="tonal"
+                    density="comfortable"
                     class="mt-4"
                   >
                     Minimaal 8 uur nodig voor een festivalpas.
@@ -1035,14 +1103,14 @@ async function onSubmit() {
                 </template>
               </div>
 
-              <!-- Navigation -->
               <VDivider class="my-6" />
 
-              <div class="d-flex justify-space-between">
+              <div class="d-flex justify-space-between align-center ga-4 flex-wrap">
                 <VBtn
                   v-if="currentStep > 0"
                   variant="outlined"
-                  color="secondary"
+                  color="primary"
+                  class="px-5"
                   @click="prevStep"
                 >
                   <VIcon
@@ -1056,6 +1124,8 @@ async function onSubmit() {
                 <VBtn
                   v-if="currentStep < steps.length - 1"
                   color="primary"
+                  variant="flat"
+                  class="px-5"
                   @click="nextStep"
                 >
                   Volgende
@@ -1067,7 +1137,9 @@ async function onSubmit() {
 
                 <VBtn
                   v-else
-                  color="success"
+                  color="primary"
+                  variant="flat"
+                  class="px-6"
                   :loading="isSubmitting"
                   @click="onSubmit"
                 >
@@ -1083,8 +1155,7 @@ async function onSubmit() {
         </VCol>
       </VRow>
 
-      <!-- Footer -->
-      <div class="text-center pa-4 text-caption text-medium-emphasis">
+      <div class="text-center pa-6 text-caption text-medium-emphasis opacity-60">
         Powered by Crewli
       </div>
     </VContainer>
@@ -1095,14 +1166,79 @@ async function onSubmit() {
 .registration-container {
   position: relative;
   z-index: 1;
-  max-inline-size: 1000px;
+  max-inline-size: 1040px;
+}
+
+.registration-header-fallback {
+  background: rgb(var(--v-theme-surface));
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important;
+}
+
+.registration-welcome-html :deep(p) {
+  margin-block-end: 0.5rem;
+}
+
+.registration-welcome-html :deep(p:last-child) {
+  margin-block-end: 0;
+}
+
+.step-indicator {
+  inline-size: 48px;
+  block-size: 48px;
+  border-radius: 10px;
+  font-size: 16px;
+  font-weight: 700;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.step-indicator--active {
+  background-color: rgb(var(--v-theme-primary));
+  color: rgb(var(--v-theme-on-primary));
+}
+
+.step-indicator--done {
+  background-color: rgba(var(--v-theme-primary), 0.12);
+  color: rgb(var(--v-theme-primary));
+}
+
+.step-indicator--todo {
+  background-color: rgba(var(--v-theme-on-surface), 0.06);
+  color: rgba(var(--v-theme-on-surface), 0.35);
+}
+
+.section-category-heading {
+  padding-block-end: 8px;
+  border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+}
+
+.registration-section-grid {
+  align-items: stretch;
+}
+
+.section-pref-card {
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important;
+  transition: border-color 0.15s ease, background-color 0.15s ease;
+}
+
+.section-pref-card--selected {
+  border: 2px solid rgb(var(--v-theme-primary)) !important;
+  background-color: rgba(var(--v-theme-primary), 0.06);
+}
+
+.priority-pill {
+  position: absolute;
+  inset-block-start: 10px;
+  inset-inline-end: 10px;
+  z-index: 1;
+  font-size: 11px;
+  font-weight: 600;
+  padding-block: 4px;
+  padding-inline: 10px;
+  border-radius: 999px;
+  background-color: rgba(var(--v-theme-on-surface), 0.75);
+  color: rgb(var(--v-theme-surface));
 }
 
-/*
-  Native date inputs have a large intrinsic min-width; without min-width: 0 the
-  grid cell grows and the prepend-inner icon no longer sits inside the outline
-  next to the value (Vuetify v-field grid: prepend-inner | field).
-*/
 .volunteer-reg-dob-field :deep(.v-field__field) {
   min-inline-size: 0;
 }
@@ -1113,10 +1249,6 @@ async function onSubmit() {
   min-inline-size: 0;
 }
 
-/*
-  Vuetify’s .v-list uses overflow: auto, which shows scrollbars on this step when
-  list rows are slightly wider than the card (e.g. checkbox + text + rating).
-*/
 .registration-availability-list {
   overflow: visible !important;
 }
diff --git a/apps/portal/src/schemas/registrationSchema.ts b/apps/portal/src/schemas/registrationSchema.ts
index 34f30601..3f228c49 100644
--- a/apps/portal/src/schemas/registrationSchema.ts
+++ b/apps/portal/src/schemas/registrationSchema.ts
@@ -1,6 +1,7 @@
 import { z } from 'zod'
 
-export const step1Schema = z.object({
+/** Fixed fields for step "Over jou" (portal volunteer registration). */
+export const personalStepSchema = z.object({
   first_name: z.string().min(1, 'Voornaam is verplicht').max(255),
   last_name: z.string().min(1, 'Achternaam is verplicht').max(255),
   email: z.string().min(1, 'E-mailadres is verplicht').email('Ongeldig e-mailadres').max(255),
@@ -8,18 +9,4 @@ export const step1Schema = z.object({
   phone: z.string().max(50).optional().or(z.literal('')),
 })
 
-export const step2Schema = z.object({
-  tshirt_size: z.enum(['XS', 'S', 'M', 'L', 'XL', 'XXL', 'XXXL']).optional().or(z.literal('')),
-  first_aid: z.boolean().default(false),
-  allergies: z.string().max(500).optional().or(z.literal('')),
-  driving_licence: z.boolean().default(false),
-})
-
-export const step3Schema = z.object({
-  motivation: z.string().max(1000).optional().or(z.literal('')),
-  motivation_other: z.string().max(500).optional().or(z.literal('')),
-})
-
-export const fullRegistrationSchema = step1Schema
-  .merge(step2Schema)
-  .merge(step3Schema)
+export const fullRegistrationSchema = personalStepSchema
diff --git a/apps/portal/src/types/registration.ts b/apps/portal/src/types/registration.ts
index 9a7b1a14..f4d52da9 100644
--- a/apps/portal/src/types/registration.ts
+++ b/apps/portal/src/types/registration.ts
@@ -1,3 +1,33 @@
+export type RegistrationFieldType =
+  | 'text'
+  | 'textarea'
+  | 'select'
+  | 'multiselect'
+  | 'checkbox'
+  | 'radio'
+  | 'boolean'
+  | 'number'
+  | 'tag_picker'
+
+export interface RegistrationTagOption {
+  id: string
+  name: string
+  category: string | null
+}
+
+export interface RegistrationField {
+  id: string
+  label: string
+  slug: string
+  field_type: RegistrationFieldType
+  options: string[] | null
+  tag_category: string | null
+  is_required: boolean
+  section: string | null
+  help_text: string | null
+  available_tags?: RegistrationTagOption[]
+}
+
 export interface EventRegistrationData {
   event: {
     id: string
@@ -8,9 +38,12 @@ export interface EventRegistrationData {
     registration_banner_url: string | null
     registration_welcome_text: string | null
     registration_logo_url: string | null
+    registration_show_section_preferences: boolean
+    registration_show_availability: boolean
   }
   sections: SectionOption[]
   time_slots: TimeSlotOption[]
+  registration_fields: RegistrationField[]
 }
 
 export interface SectionOption {
@@ -30,33 +63,25 @@ export interface TimeSlotOption {
   duration_hours: number
 }
 
-export interface SectionPreference {
-  section_name: string
+export interface SectionPreferencePayload {
+  festival_section_id: string
   priority: number
 }
 
-export interface VolunteerAvailability {
+export interface VolunteerAvailabilityPayload {
   time_slot_id: string
-  preference_level: number
+  preference_level?: number
 }
 
+export type FieldValuePayload = string | number | boolean | string[] | null
+
 export interface VolunteerRegistrationForm {
-  // Step 1
   first_name: string
   last_name: string
-  date_of_birth: string
+  date_of_birth?: string
   email: string
-  phone: string
-  // Step 2
-  tshirt_size: string
-  first_aid: boolean
-  allergies: string
-  driving_licence: boolean
-  // Step 3
-  motivation: string
-  motivation_other: string
-  // Step 4
-  section_preferences: SectionPreference[]
-  // Step 5
-  availabilities: VolunteerAvailability[]
+  phone?: string
+  field_values?: Record<string, FieldValuePayload>
+  section_preferences?: SectionPreferencePayload[]
+  availabilities?: VolunteerAvailabilityPayload[]
 }