From 0d741550a8412ea2bada847aeb524aecbf616924 Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Fri, 10 Apr 2026 21:09:49 +0200
Subject: [PATCH] feat: event registration branding with vertical wizard layout

- Add registration_banner_url, registration_welcome_text, registration_logo_url
  columns to events table with migration
- Add uploadImage endpoint (POST .../upload-image) with form request validation
  for banner and logo images (jpg/png/webp, max 5MB)
- Include branding fields in EventResource and PublicRegistrationDataController
- Build registration settings UI in organizer event settings page with
  banner/logo upload and welcome text editor
- Redesign portal registration page: hero banner with gradient overlay,
  welcome text card, vertical step navigation (desktop) / horizontal chips
  (mobile), two-column form fields with density="comfortable"
- Update success page with event banner and consistent branding
- Seed welcome text for Echt Feesten 2026
- Add 9 PHPUnit tests covering image upload, branding fields in API responses

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../Controllers/Api/V1/EventController.php    |   20 +
 .../V1/PublicRegistrationDataController.php   |    3 +
 .../Requests/Api/V1/UpdateEventRequest.php    |    1 +
 .../Api/V1/UploadEventImageRequest.php        |   24 +
 .../Http/Resources/Api/V1/EventResource.php   |    3 +
 api/app/Models/Event.php                      |    3 +
 ..._registration_branding_to_events_table.php |   30 +
 api/database/seeders/DevSeeder.php            |    1 +
 api/routes/api.php                            |    1 +
 .../Feature/Api/V1/EventImageUploadTest.php   |  191 +++
 apps/app/src/composables/api/useEvents.ts     |   23 +
 .../src/pages/events/[id]/settings/index.vue  |  227 +++-
 apps/app/src/types/event.ts                   |    4 +
 .../portal/src/pages/register/[eventSlug].vue | 1179 +++++++++--------
 apps/portal/src/pages/register/success.vue    |  184 ++-
 apps/portal/src/types/registration.ts         |    3 +
 16 files changed, 1225 insertions(+), 672 deletions(-)
 create mode 100644 api/app/Http/Requests/Api/V1/UploadEventImageRequest.php
 create mode 100644 api/database/migrations/2026_04_10_100000_add_registration_branding_to_events_table.php
 create mode 100644 api/tests/Feature/Api/V1/EventImageUploadTest.php

diff --git a/api/app/Http/Controllers/Api/V1/EventController.php b/api/app/Http/Controllers/Api/V1/EventController.php
index 977c233b..6ff9e349 100644
--- a/api/app/Http/Controllers/Api/V1/EventController.php
+++ b/api/app/Http/Controllers/Api/V1/EventController.php
@@ -7,6 +7,7 @@ namespace App\Http\Controllers\Api\V1;
 use App\Http\Controllers\Controller;
 use App\Http\Requests\Api\V1\StoreEventRequest;
 use App\Http\Requests\Api\V1\UpdateEventRequest;
+use App\Http\Requests\Api\V1\UploadEventImageRequest;
 use App\Http\Resources\Api\V1\EventResource;
 use App\Models\Event;
 use App\Models\Organisation;
@@ -15,6 +16,7 @@ use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Request;
 use Illuminate\Http\Resources\Json\AnonymousResourceCollection;
 use Illuminate\Support\Facades\Gate;
+use Illuminate\Support\Facades\Storage;
 
 final class EventController extends Controller
 {
@@ -126,6 +128,24 @@ final class EventController extends Controller
         return EventResource::collection($children);
     }
 
+    public function uploadImage(UploadEventImageRequest $request, Organisation $organisation, Event $event): JsonResponse
+    {
+        Gate::authorize('update', [$event, $organisation]);
+
+        $path = $request->file('image')->store(
+            "events/{$event->id}",
+            'public'
+        );
+
+        $field = $request->type === 'banner'
+            ? 'registration_banner_url'
+            : 'registration_logo_url';
+
+        $event->update([$field => Storage::disk('public')->url($path)]);
+
+        return response()->json(['url' => $event->fresh()->{$field}]);
+    }
+
     public function stats(Event $event): JsonResponse
     {
         Gate::authorize('view', $event);
diff --git a/api/app/Http/Controllers/Api/V1/PublicRegistrationDataController.php b/api/app/Http/Controllers/Api/V1/PublicRegistrationDataController.php
index 912896c9..2b4c6483 100644
--- a/api/app/Http/Controllers/Api/V1/PublicRegistrationDataController.php
+++ b/api/app/Http/Controllers/Api/V1/PublicRegistrationDataController.php
@@ -60,6 +60,9 @@ final class PublicRegistrationDataController extends Controller
                     'start_date' => $festivalEvent->start_date->toDateString(),
                     'end_date' => $festivalEvent->end_date->toDateString(),
                     'organisation_id' => $festivalEvent->organisation_id,
+                    'registration_banner_url' => $festivalEvent->registration_banner_url,
+                    'registration_welcome_text' => $festivalEvent->registration_welcome_text,
+                    'registration_logo_url' => $festivalEvent->registration_logo_url,
                 ],
                 'sections' => $sections->map(fn (FestivalSection $section) => [
                     'id' => $section->id,
diff --git a/api/app/Http/Requests/Api/V1/UpdateEventRequest.php b/api/app/Http/Requests/Api/V1/UpdateEventRequest.php
index 7742f389..2f63ac5c 100644
--- a/api/app/Http/Requests/Api/V1/UpdateEventRequest.php
+++ b/api/app/Http/Requests/Api/V1/UpdateEventRequest.php
@@ -27,6 +27,7 @@ final class UpdateEventRequest extends FormRequest
             'event_type' => ['sometimes', 'in:event,festival,series'],
             'event_type_label' => ['nullable', 'string', 'max:50'],
             'sub_event_label' => ['nullable', 'string', 'max:50'],
+            'registration_welcome_text' => ['nullable', 'string', 'max:1000'],
         ];
     }
 }
diff --git a/api/app/Http/Requests/Api/V1/UploadEventImageRequest.php b/api/app/Http/Requests/Api/V1/UploadEventImageRequest.php
new file mode 100644
index 00000000..fdb20172
--- /dev/null
+++ b/api/app/Http/Requests/Api/V1/UploadEventImageRequest.php
@@ -0,0 +1,24 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Http\Requests\Api\V1;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+final class UploadEventImageRequest extends FormRequest
+{
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    /** @return array<string, mixed> */
+    public function rules(): array
+    {
+        return [
+            'image' => ['required', 'image', 'mimes:jpg,jpeg,png,webp', 'max:5120'],
+            'type' => ['required', 'in:banner,logo'],
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/Api/V1/EventResource.php b/api/app/Http/Resources/Api/V1/EventResource.php
index d5c27cf0..8b7a3de2 100644
--- a/api/app/Http/Resources/Api/V1/EventResource.php
+++ b/api/app/Http/Resources/Api/V1/EventResource.php
@@ -27,6 +27,9 @@ final class EventResource extends JsonResource
             'event_type_label' => $this->event_type_label,
             'sub_event_label' => $this->sub_event_label,
             'is_recurring' => $this->is_recurring,
+            'registration_banner_url' => $this->registration_banner_url,
+            'registration_welcome_text' => $this->registration_welcome_text,
+            'registration_logo_url' => $this->registration_logo_url,
             'is_festival' => $this->resource->isFestival(),
             'is_sub_event' => $this->resource->isSubEvent(),
             'is_flat_event' => $this->resource->isFlatEvent(),
diff --git a/api/app/Models/Event.php b/api/app/Models/Event.php
index 445e24cc..9963dc12 100644
--- a/api/app/Models/Event.php
+++ b/api/app/Models/Event.php
@@ -63,6 +63,9 @@ final class Event extends Model
         'is_recurring',
         'recurrence_rule',
         'recurrence_exceptions',
+        'registration_banner_url',
+        'registration_welcome_text',
+        'registration_logo_url',
     ];
 
     protected function casts(): array
diff --git a/api/database/migrations/2026_04_10_100000_add_registration_branding_to_events_table.php b/api/database/migrations/2026_04_10_100000_add_registration_branding_to_events_table.php
new file mode 100644
index 00000000..793665b3
--- /dev/null
+++ b/api/database/migrations/2026_04_10_100000_add_registration_branding_to_events_table.php
@@ -0,0 +1,30 @@
+<?php
+
+declare(strict_types=1);
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::table('events', function (Blueprint $table) {
+            $table->string('registration_banner_url')->nullable()->after('recurrence_exceptions');
+            $table->text('registration_welcome_text')->nullable()->after('registration_banner_url');
+            $table->string('registration_logo_url')->nullable()->after('registration_welcome_text');
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::table('events', function (Blueprint $table) {
+            $table->dropColumn([
+                'registration_banner_url',
+                'registration_welcome_text',
+                'registration_logo_url',
+            ]);
+        });
+    }
+};
diff --git a/api/database/seeders/DevSeeder.php b/api/database/seeders/DevSeeder.php
index 52e5f16e..9f000d47 100644
--- a/api/database/seeders/DevSeeder.php
+++ b/api/database/seeders/DevSeeder.php
@@ -175,6 +175,7 @@ class DevSeeder extends Seeder
                 'event_type' => 'festival',
                 'event_type_label' => 'Festival',
                 'sub_event_label' => 'Programmaonderdeel',
+                'registration_welcome_text' => 'Wij zoeken enthousiaste vrijwilligers voor Echt Feesten 2026! Word onderdeel van ons team en beleef het festival van de andere kant. Gratis toegang, maaltijden, en een onvergetelijke ervaring.',
             ]);
 
             $vrijdag = Event::create([
diff --git a/api/routes/api.php b/api/routes/api.php
index 7ebedfc7..19f7c862 100644
--- a/api/routes/api.php
+++ b/api/routes/api.php
@@ -77,6 +77,7 @@ Route::middleware('auth:sanctum')->group(function () {
         ->only(['index', 'show', 'store', 'update', 'destroy']);
     Route::get('organisations/{organisation}/events/{event}/children', [EventController::class, 'children']);
     Route::post('organisations/{organisation}/events/{event}/transition', [EventController::class, 'transition']);
+    Route::post('organisations/{organisation}/events/{event}/upload-image', [EventController::class, 'uploadImage']);
 
     // Organisation-scoped resources
     Route::prefix('organisations/{organisation}')->group(function () {
diff --git a/api/tests/Feature/Api/V1/EventImageUploadTest.php b/api/tests/Feature/Api/V1/EventImageUploadTest.php
new file mode 100644
index 00000000..4ac910c7
--- /dev/null
+++ b/api/tests/Feature/Api/V1/EventImageUploadTest.php
@@ -0,0 +1,191 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Tests\Feature\Api\V1;
+
+use App\Models\Event;
+use App\Models\Organisation;
+use App\Models\User;
+use Database\Seeders\RoleSeeder;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Illuminate\Http\UploadedFile;
+use Illuminate\Support\Facades\Storage;
+use Laravel\Sanctum\Sanctum;
+use Tests\TestCase;
+
+class EventImageUploadTest extends TestCase
+{
+    use RefreshDatabase;
+
+    private Organisation $organisation;
+    private User $orgAdmin;
+    private Event $event;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+        $this->seed(RoleSeeder::class);
+
+        $this->organisation = Organisation::factory()->create();
+        $this->orgAdmin = User::factory()->create();
+        $this->orgAdmin->assignRole('org_admin');
+        $this->organisation->users()->attach($this->orgAdmin, ['role' => 'org_admin']);
+
+        $this->event = Event::factory()->create([
+            'organisation_id' => $this->organisation->id,
+        ]);
+
+        Storage::fake('public');
+    }
+
+    public function test_upload_banner_jpg(): void
+    {
+        Sanctum::actingAs($this->orgAdmin);
+
+        $response = $this->postJson(
+            "/api/v1/organisations/{$this->organisation->id}/events/{$this->event->id}/upload-image",
+            [
+                'image' => UploadedFile::fake()->image('banner.jpg', 1200, 400),
+                'type' => 'banner',
+            ]
+        );
+
+        $response->assertOk()
+            ->assertJsonStructure(['url']);
+
+        $this->event->refresh();
+        $this->assertNotNull($this->event->registration_banner_url);
+    }
+
+    public function test_upload_logo_png(): void
+    {
+        Sanctum::actingAs($this->orgAdmin);
+
+        $response = $this->postJson(
+            "/api/v1/organisations/{$this->organisation->id}/events/{$this->event->id}/upload-image",
+            [
+                'image' => UploadedFile::fake()->image('logo.png', 200, 200),
+                'type' => 'logo',
+            ]
+        );
+
+        $response->assertOk()
+            ->assertJsonStructure(['url']);
+
+        $this->event->refresh();
+        $this->assertNotNull($this->event->registration_logo_url);
+    }
+
+    public function test_upload_rejects_invalid_file_type(): void
+    {
+        Sanctum::actingAs($this->orgAdmin);
+
+        $response = $this->postJson(
+            "/api/v1/organisations/{$this->organisation->id}/events/{$this->event->id}/upload-image",
+            [
+                'image' => UploadedFile::fake()->create('document.pdf', 100, 'application/pdf'),
+                'type' => 'banner',
+            ]
+        );
+
+        $response->assertUnprocessable();
+    }
+
+    public function test_upload_rejects_file_too_large(): void
+    {
+        Sanctum::actingAs($this->orgAdmin);
+
+        $response = $this->postJson(
+            "/api/v1/organisations/{$this->organisation->id}/events/{$this->event->id}/upload-image",
+            [
+                'image' => UploadedFile::fake()->image('large.jpg')->size(6000),
+                'type' => 'banner',
+            ]
+        );
+
+        $response->assertUnprocessable();
+    }
+
+    public function test_upload_requires_authentication(): void
+    {
+        $response = $this->postJson(
+            "/api/v1/organisations/{$this->organisation->id}/events/{$this->event->id}/upload-image",
+            [
+                'image' => UploadedFile::fake()->image('banner.jpg'),
+                'type' => 'banner',
+            ]
+        );
+
+        $response->assertUnauthorized();
+    }
+
+    public function test_upload_rejects_wrong_organisation(): void
+    {
+        $otherOrg = Organisation::factory()->create();
+
+        Sanctum::actingAs($this->orgAdmin);
+
+        $response = $this->postJson(
+            "/api/v1/organisations/{$otherOrg->id}/events/{$this->event->id}/upload-image",
+            [
+                'image' => UploadedFile::fake()->image('banner.jpg'),
+                'type' => 'banner',
+            ]
+        );
+
+        $response->assertForbidden();
+    }
+
+    public function test_registration_data_includes_branding_fields(): void
+    {
+        $event = Event::factory()->create([
+            'organisation_id' => $this->organisation->id,
+            'status' => 'registration_open',
+            'slug' => 'branding-test-event',
+            'registration_welcome_text' => 'Welcome to our event!',
+            'registration_banner_url' => 'https://example.com/banner.jpg',
+            'registration_logo_url' => 'https://example.com/logo.png',
+        ]);
+
+        $response = $this->getJson('/api/v1/public/events/branding-test-event/registration-data');
+
+        $response->assertOk()
+            ->assertJsonPath('data.event.registration_welcome_text', 'Welcome to our event!')
+            ->assertJsonPath('data.event.registration_banner_url', 'https://example.com/banner.jpg')
+            ->assertJsonPath('data.event.registration_logo_url', 'https://example.com/logo.png');
+    }
+
+    public function test_registration_data_includes_null_branding_fields(): void
+    {
+        Event::factory()->create([
+            'organisation_id' => $this->organisation->id,
+            'status' => 'registration_open',
+            'slug' => 'no-branding-event',
+        ]);
+
+        $response = $this->getJson('/api/v1/public/events/no-branding-event/registration-data');
+
+        $response->assertOk()
+            ->assertJsonPath('data.event.registration_welcome_text', null)
+            ->assertJsonPath('data.event.registration_banner_url', null)
+            ->assertJsonPath('data.event.registration_logo_url', null);
+    }
+
+    public function test_event_update_saves_welcome_text(): void
+    {
+        Sanctum::actingAs($this->orgAdmin);
+
+        $response = $this->putJson(
+            "/api/v1/organisations/{$this->organisation->id}/events/{$this->event->id}",
+            [
+                'registration_welcome_text' => 'We zoeken vrijwilligers!',
+            ]
+        );
+
+        $response->assertOk();
+
+        $this->event->refresh();
+        $this->assertEquals('We zoeken vrijwilligers!', $this->event->registration_welcome_text);
+    }
+}
diff --git a/apps/app/src/composables/api/useEvents.ts b/apps/app/src/composables/api/useEvents.ts
index 1ee5f35a..79bcb043 100644
--- a/apps/app/src/composables/api/useEvents.ts
+++ b/apps/app/src/composables/api/useEvents.ts
@@ -132,6 +132,29 @@ export function useUpdateEvent(orgId: Ref<string>, id: Ref<string>) {
   })
 }
 
+export function useUploadEventImage(orgId: Ref<string>, eventId: Ref<string>) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async ({ file, type }: { file: File; type: 'banner' | 'logo' }) => {
+      const formData = new FormData()
+      formData.append('image', file)
+      formData.append('type', type)
+
+      const { data } = await apiClient.post<{ url: string }>(
+        `/organisations/${orgId.value}/events/${eventId.value}/upload-image`,
+        formData,
+        { headers: { 'Content-Type': 'multipart/form-data' } },
+      )
+
+      return data.url
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['events', orgId.value, eventId.value] })
+    },
+  })
+}
+
 export function useEventStats(eventId: Ref<string>) {
   return useQuery({
     queryKey: ['events', eventId, 'stats'],
diff --git a/apps/app/src/pages/events/[id]/settings/index.vue b/apps/app/src/pages/events/[id]/settings/index.vue
index 2d552558..dd0d091b 100644
--- a/apps/app/src/pages/events/[id]/settings/index.vue
+++ b/apps/app/src/pages/events/[id]/settings/index.vue
@@ -1,19 +1,234 @@
 <script setup lang="ts">
+import { VForm } from 'vuetify/components/VForm'
 import EventTabsNav from '@/components/events/EventTabsNav.vue'
+import { useUpdateEvent, useUploadEventImage } from '@/composables/api/useEvents'
+import { useAuthStore } from '@/stores/useAuthStore'
+import type { EventItem } from '@/types/event'
 
 definePage({
   meta: {
     navActiveLink: 'events',
   },
 })
+
+const route = useRoute()
+const authStore = useAuthStore()
+
+const orgId = computed(() => authStore.currentOrganisation?.id ?? '')
+const eventId = computed(() => String((route.params as { id: string }).id))
+
+const { mutate: updateEvent, isPending: isUpdating } = useUpdateEvent(orgId, eventId)
+const { mutate: uploadImage, isPending: isUploading } = useUploadEventImage(orgId, eventId)
+
+const welcomeText = ref('')
+const showSuccess = ref(false)
+const refVForm = ref<VForm>()
+
+function initForm(event: EventItem) {
+  welcomeText.value = event.registration_welcome_text ?? ''
+}
+
+function onSaveWelcomeText() {
+  updateEvent(
+    { registration_welcome_text: welcomeText.value || null },
+    {
+      onSuccess: () => {
+        showSuccess.value = true
+      },
+    },
+  )
+}
+
+function onFileSelected(files: File[], type: 'banner' | 'logo') {
+  const file = files[0]
+  if (!file) return
+
+  uploadImage({ file, type })
+}
+
+function onClearImage(event: EventItem, type: 'banner' | 'logo') {
+  const field = type === 'banner' ? 'registration_banner_url' : 'registration_logo_url'
+
+  updateEvent({ [field]: null } as any)
+}
 </script>
 
 <template>
-  <EventTabsNav>
-    <VCard class="ma-4">
-      <VCardText>
-        Deze module is binnenkort beschikbaar.
-      </VCardText>
-    </VCard>
+  <EventTabsNav v-slot="{ event }">
+    <div @vue:mounted="initForm(event)">
+      <VRow>
+        <VCol
+          cols="12"
+          md="8"
+        >
+          <!-- Registration Branding -->
+          <VCard class="mb-6">
+            <VCardTitle class="d-flex align-center gap-2">
+              <VIcon
+                icon="tabler-palette"
+                size="20"
+              />
+              Registratie-uiterlijk
+            </VCardTitle>
+            <VCardSubtitle>
+              Pas het uiterlijk van het vrijwilligersregistratieformulier aan
+            </VCardSubtitle>
+
+            <VCardText>
+              <!-- Banner Image -->
+              <div class="mb-6">
+                <h6 class="text-subtitle-1 font-weight-medium mb-2">
+                  Bannerafbeelding
+                </h6>
+                <p class="text-body-2 text-medium-emphasis mb-3">
+                  Wordt bovenaan het registratieformulier getoond. Aanbevolen: 1200x400px.
+                </p>
+
+                <VImg
+                  v-if="event.registration_banner_url"
+                  :src="event.registration_banner_url"
+                  height="160"
+                  cover
+                  rounded="lg"
+                  class="mb-3"
+                />
+
+                <div class="d-flex gap-2">
+                  <VFileInput
+                    accept="image/jpeg,image/png,image/webp"
+                    label="Afbeelding uploaden"
+                    prepend-icon=""
+                    prepend-inner-icon="tabler-upload"
+                    density="compact"
+                    variant="outlined"
+                    hide-details
+                    :loading="isUploading"
+                    class="flex-grow-1"
+                    style="max-inline-size: 350px;"
+                    @update:model-value="(files: File[]) => onFileSelected(files, 'banner')"
+                  />
+                  <VBtn
+                    v-if="event.registration_banner_url"
+                    variant="outlined"
+                    color="error"
+                    density="compact"
+                    @click="onClearImage(event, 'banner')"
+                  >
+                    Verwijder
+                  </VBtn>
+                </div>
+              </div>
+
+              <VDivider class="mb-6" />
+
+              <!-- Logo Image -->
+              <div class="mb-6">
+                <h6 class="text-subtitle-1 font-weight-medium mb-2">
+                  Logo
+                </h6>
+                <p class="text-body-2 text-medium-emphasis mb-3">
+                  Wordt in de header van het registratieformulier getoond. Aanbevolen: vierkant, max 200x200px.
+                </p>
+
+                <VAvatar
+                  v-if="event.registration_logo_url"
+                  :image="event.registration_logo_url"
+                  size="80"
+                  rounded="lg"
+                  class="mb-3"
+                />
+
+                <div class="d-flex gap-2">
+                  <VFileInput
+                    accept="image/jpeg,image/png,image/webp"
+                    label="Logo uploaden"
+                    prepend-icon=""
+                    prepend-inner-icon="tabler-upload"
+                    density="compact"
+                    variant="outlined"
+                    hide-details
+                    :loading="isUploading"
+                    class="flex-grow-1"
+                    style="max-inline-size: 350px;"
+                    @update:model-value="(files: File[]) => onFileSelected(files, 'logo')"
+                  />
+                  <VBtn
+                    v-if="event.registration_logo_url"
+                    variant="outlined"
+                    color="error"
+                    density="compact"
+                    @click="onClearImage(event, 'logo')"
+                  >
+                    Verwijder
+                  </VBtn>
+                </div>
+              </div>
+
+              <VDivider class="mb-6" />
+
+              <!-- Welcome Text -->
+              <div>
+                <h6 class="text-subtitle-1 font-weight-medium mb-2">
+                  Welkomstbericht
+                </h6>
+
+                <VForm
+                  ref="refVForm"
+                  @submit.prevent="onSaveWelcomeText"
+                >
+                  <VTextarea
+                    v-model="welcomeText"
+                    label="Welkomstbericht"
+                    hint="Dit bericht wordt getoond boven het vrijwilligersregistratieformulier."
+                    persistent-hint
+                    :counter="1000"
+                    rows="4"
+                    auto-grow
+                    class="mb-4"
+                  />
+
+                  <VBtn
+                    type="submit"
+                    color="primary"
+                    :loading="isUpdating"
+                  >
+                    Opslaan
+                  </VBtn>
+                </VForm>
+              </div>
+            </VCardText>
+          </VCard>
+        </VCol>
+
+        <VCol
+          cols="12"
+          md="4"
+        >
+          <!-- Preview hint -->
+          <VCard variant="tonal">
+            <VCardText>
+              <div class="d-flex align-center gap-2 mb-2">
+                <VIcon
+                  icon="tabler-eye"
+                  size="18"
+                />
+                <span class="text-subtitle-2 font-weight-medium">Preview</span>
+              </div>
+              <p class="text-body-2 text-medium-emphasis mb-0">
+                Open het registratieformulier om een preview te zien van de aanpassingen.
+              </p>
+            </VCardText>
+          </VCard>
+        </VCol>
+      </VRow>
+    </div>
+
+    <VSnackbar
+      v-model="showSuccess"
+      color="success"
+      :timeout="3000"
+    >
+      Registratie-instellingen opgeslagen
+    </VSnackbar>
   </EventTabsNav>
 </template>
diff --git a/apps/app/src/types/event.ts b/apps/app/src/types/event.ts
index 11294188..17f3b517 100644
--- a/apps/app/src/types/event.ts
+++ b/apps/app/src/types/event.ts
@@ -20,6 +20,9 @@ export interface EventItem {
   event_type_label: string | null
   sub_event_label: string | null
   is_recurring: boolean
+  registration_banner_url: string | null
+  registration_welcome_text: string | null
+  registration_logo_url: string | null
   is_festival: boolean
   is_sub_event: boolean
   is_flat_event: boolean
@@ -47,6 +50,7 @@ export interface CreateEventPayload {
 
 export interface UpdateEventPayload extends Partial<CreateEventPayload> {
   status?: EventStatus
+  registration_welcome_text?: string | null
 }
 
 export interface EventStats {
diff --git a/apps/portal/src/pages/register/[eventSlug].vue b/apps/portal/src/pages/register/[eventSlug].vue
index c4c62800..2cb3cb96 100644
--- a/apps/portal/src/pages/register/[eventSlug].vue
+++ b/apps/portal/src/pages/register/[eventSlug].vue
@@ -2,11 +2,6 @@
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 import { useDisplay } from 'vuetify'
-import { useGenerateImageVariant } from '@core/composable/useGenerateImageVariant'
-import registerMultiStepIllustrationLight from '@images/illustrations/register-multi-step-illustration-light.png'
-import registerMultiStepIllustrationDark from '@images/illustrations/register-multi-step-illustration-dark.png'
-import registerMultiStepBgLight from '@images/pages/register-multi-step-bg-light.png'
-import registerMultiStepBgDark from '@images/pages/register-multi-step-bg-dark.png'
 import { useAuthStore } from '@/stores/useAuthStore'
 import { useRegistrationData, useSubmitRegistration } from '@/composables/api/useVolunteerRegistration'
 import { fullRegistrationSchema } from '@/schemas/registrationSchema'
@@ -29,7 +24,7 @@ definePage({
 const route = useRoute('volunteer-register')
 const router = useRouter()
 const authStore = useAuthStore()
-const { smAndDown } = useDisplay()
+const { mdAndUp } = useDisplay()
 
 const eventSlug = computed(() => route.params.eventSlug as string)
 const { data: registrationData, isLoading, isError } = useRegistrationData(eventSlug)
@@ -38,9 +33,6 @@ const { mutateAsync: submitRegistration, isPending: isSubmitting } = useSubmitRe
 const currentStep = ref(0)
 const submitError = ref<string | null>(null)
 
-const registerMultiStepIllustration = useGenerateImageVariant(registerMultiStepIllustrationLight, registerMultiStepIllustrationDark)
-const registerMultiStepBg = useGenerateImageVariant(registerMultiStepBgLight, registerMultiStepBgDark)
-
 // VeeValidate form
 const { errors, defineField, validateField, setFieldValue } = useForm({
   validationSchema: toTypedSchema(fullRegistrationSchema),
@@ -84,13 +76,13 @@ const selectedSections = ref<string[]>([])
 const selectedTimeSlotIds = ref<string[]>([])
 const timeSlotPreferences = ref<Record<string, number>>({})
 
-// Stepper items for AppStepper
-const stepperItems = [
-  { title: 'Over jou', subtitle: 'Persoonlijke gegevens', icon: 'tabler-user' },
-  { title: 'Extra info', subtitle: 'Aanvullende details', icon: 'tabler-list-details' },
-  { title: 'Motivatie', subtitle: 'Waarom wil je helpen?', icon: 'tabler-heart' },
-  { title: 'Secties', subtitle: 'Voorkeur werkgebieden', icon: 'tabler-layout-grid' },
-  { title: 'Beschikbaarheid', subtitle: 'Wanneer ben je er?', icon: 'tabler-calendar-event' },
+// 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
@@ -104,6 +96,7 @@ const motivationItems = [
   { 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' },
 ]
 
@@ -151,6 +144,15 @@ const totalSelectedHours = computed(() => {
     .reduce((sum, s) => sum + s.duration_hours, 0)
 })
 
+const formattedDates = computed(() => {
+  if (!registrationData.value) return ''
+
+  return formatDateRange(
+    registrationData.value.event.start_date,
+    registrationData.value.event.end_date,
+  )
+})
+
 // Step field mapping for validation (0-based)
 type FormField = 'name' | 'email' | 'phone' | 'tshirt_size' | 'first_aid' | 'allergies' | 'access_requirements' | 'driving_licence' | 'motivation' | 'motivation_other'
 
@@ -179,6 +181,12 @@ function prevStep() {
   if (currentStep.value > 0) currentStep.value--
 }
 
+function goToStep(index: number) {
+  if (index < currentStep.value) {
+    currentStep.value = index
+  }
+}
+
 // Section toggle
 function toggleSection(sectionName: string) {
   const idx = selectedSections.value.indexOf(sectionName)
@@ -281,6 +289,7 @@ async function onSubmit() {
       path: '/register/success',
       query: {
         event: registrationData.value.event.name,
+        banner: registrationData.value.event.registration_banner_url ?? '',
         authenticated: authStore.isAuthenticated ? '1' : '0',
       },
     })
@@ -312,609 +321,639 @@ async function onSubmit() {
 </script>
 
 <template>
-  <!-- Logo -->
-  <RouterLink to="/">
-    <div class="auth-logo d-flex align-center gap-x-3">
-      <VIcon
-        icon="tabler-users-group"
-        size="28"
-        color="primary"
-      />
-      <h1 class="auth-title">
-        Crewli
-      </h1>
-    </div>
-  </RouterLink>
-
-  <!-- Loading state -->
-  <VRow
+  <!-- Loading -->
+  <div
     v-if="isLoading"
-    no-gutters
-    class="auth-wrapper bg-surface"
+    class="d-flex align-center justify-center"
+    style="min-block-size: 100dvh;"
   >
-    <VCol
-      cols="12"
-      class="d-flex align-center justify-center"
+    <VCard
+      flat
+      :max-width="500"
+      class="pa-12 text-center"
     >
-      <VCard
-        flat
-        :max-width="500"
-        class="pa-12 text-center"
-      >
-        <VProgressCircular
-          indeterminate
-          color="primary"
-          size="48"
-          class="mb-4"
-        />
-        <p class="text-body-1 text-medium-emphasis mb-0">
-          Registratieformulier laden...
-        </p>
-      </VCard>
-    </VCol>
-  </VRow>
+      <VProgressCircular
+        indeterminate
+        color="primary"
+        size="48"
+        class="mb-4"
+      />
+      <p class="text-body-1 text-medium-emphasis mb-0">
+        Registratieformulier laden...
+      </p>
+    </VCard>
+  </div>
 
   <!-- Error / Not available -->
-  <VRow
+  <div
     v-else-if="isError || !registrationData"
-    no-gutters
-    class="auth-wrapper bg-surface"
+    class="d-flex align-center justify-center"
+    style="min-block-size: 100dvh;"
   >
-    <VCol
-      cols="12"
-      class="d-flex align-center justify-center"
+    <VCard
+      flat
+      :max-width="500"
+      class="text-center pa-8"
     >
-      <VCard
-        flat
-        :max-width="500"
-        class="text-center pa-8"
+      <VIcon
+        icon="tabler-calendar-off"
+        size="64"
+        color="warning"
+        class="mb-4"
+      />
+      <h4 class="text-h5 mb-2">
+        Niet beschikbaar
+      </h4>
+      <p class="text-body-1 text-medium-emphasis mb-6">
+        Dit evenement accepteert momenteel geen aanmeldingen.
+      </p>
+      <VBtn
+        to="/"
+        variant="outlined"
       >
-        <VIcon
-          icon="tabler-calendar-off"
-          size="64"
-          color="warning"
-          class="mb-4"
-        />
-        <h4 class="text-h5 mb-2">
-          Niet beschikbaar
-        </h4>
-        <p class="text-body-1 text-medium-emphasis mb-6">
-          Dit evenement accepteert momenteel geen aanmeldingen.
-        </p>
-        <VBtn
-          to="/"
-          variant="outlined"
-        >
-          Terug naar startpagina
-        </VBtn>
-      </VCard>
-    </VCol>
-  </VRow>
+        Terug naar startpagina
+      </VBtn>
+    </VCard>
+  </div>
 
-  <!-- Registration Form -->
-  <VRow
-    v-else
-    no-gutters
-    class="auth-wrapper"
-  >
-    <!-- Left: Event branding & illustration -->
-    <VCol
-      md="4"
-      class="d-none d-md-flex"
+  <!-- Registration page -->
+  <div v-else>
+    <!-- Hero banner -->
+    <div
+      v-if="registrationData.event.registration_banner_url"
+      class="registration-banner"
     >
-      <div class="d-flex flex-column align-center justify-center w-100 position-relative">
-        <!-- Event info -->
-        <div
-          class="text-center px-8 mb-6"
-          style="z-index: 1;"
-        >
-          <VChip
-            color="primary"
-            variant="flat"
-            size="small"
-            class="mb-4"
+      <VImg
+        :src="registrationData.event.registration_banner_url"
+        height="220"
+        cover
+        gradient="to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.55)"
+      >
+        <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"
+            height="48"
+            class="mb-2 rounded"
           >
-            Aanmelding vrijwilliger
-          </VChip>
-
-          <h2 class="text-h4 font-weight-bold mb-2">
+          <h2 class="text-h4 font-weight-bold text-center">
             {{ registrationData.event.name }}
           </h2>
-
-          <div class="d-flex align-center justify-center gap-2 text-body-1 text-medium-emphasis">
-            <VIcon
-              icon="tabler-calendar"
-              size="18"
-            />
-            {{ formatDateRange(registrationData.event.start_date, registrationData.event.end_date) }}
-          </div>
+          <p class="text-subtitle-1 mb-0">
+            {{ formattedDates }}
+          </p>
         </div>
+      </VImg>
+    </div>
 
-        <!-- Illustration -->
-        <VImg
-          :src="registerMultiStepIllustration"
-          class="illustration-image flip-in-rtl"
-          style="z-index: 1;"
-        />
-
-        <img
-          class="bg-image position-absolute w-100 flip-in-rtl"
-          :src="registerMultiStepBg"
-          alt="register-bg"
-          height="340"
-        >
-      </div>
-    </VCol>
-
-    <!-- Right: Registration form -->
-    <VCol
-      cols="12"
-      md="8"
-      class="auth-card-v2 d-flex align-center justify-center pa-4 pa-sm-10"
-      style="background-color: rgb(var(--v-theme-surface));"
+    <!-- Fallback header when no banner -->
+    <div
+      v-else
+      class="d-flex flex-column align-center pa-8"
+      style="background: rgb(var(--v-theme-primary));"
     >
-      <VCard
-        flat
-        class="mt-12 mt-sm-0 w-100"
-        :max-width="750"
+      <img
+        v-if="registrationData.event.registration_logo_url"
+        :src="registrationData.event.registration_logo_url"
+        height="48"
+        class="mb-2 rounded"
       >
-        <!-- Mobile: Event info (hidden on desktop where it shows in left panel) -->
-        <div class="d-md-none text-center mb-6">
-          <VChip
-            color="primary"
-            variant="flat"
-            size="small"
-            class="mb-2"
+      <h2 class="text-h4 font-weight-bold text-white text-center">
+        {{ registrationData.event.name }}
+      </h2>
+      <p
+        class="text-subtitle-1 mb-0"
+        style="color: rgba(255,255,255,0.7);"
+      >
+        {{ formattedDates }}
+      </p>
+    </div>
+
+    <!-- Content container -->
+    <VContainer
+      class="registration-container"
+      :class="{ 'mt-n8': 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?.name }}. Je gegevens zijn automatisch ingevuld.
+      </VAlert>
+
+      <div
+        v-else
+        class="text-body-2 text-medium-emphasis mb-4"
+      >
+        Al een account?
+        <RouterLink
+          to="/login"
+          class="text-primary font-weight-medium"
+        >
+          Log in
+        </RouterLink>
+        om je gegevens automatisch in te vullen.
+      </div>
+
+      <!-- Submit error -->
+      <VAlert
+        v-if="submitError"
+        type="error"
+        variant="tonal"
+        class="mb-4"
+        closable
+        @click:close="submitError = null"
+      >
+        {{ submitError }}
+      </VAlert>
+
+      <!-- Wizard card -->
+      <VCard variant="flat">
+        <VRow no-gutters>
+          <!-- Desktop: vertical step navigation -->
+          <VCol
+            v-if="mdAndUp"
+            cols="3"
+            class="border-e"
           >
-            Aanmelding vrijwilliger
-          </VChip>
-
-          <h3 class="text-h5 font-weight-bold mb-1">
-            {{ registrationData.event.name }}
-          </h3>
-
-          <div class="d-flex align-center justify-center gap-2 text-body-2 text-medium-emphasis">
-            <VIcon
-              icon="tabler-calendar"
-              size="16"
-            />
-            {{ formatDateRange(registrationData.event.start_date, registrationData.event.end_date) }}
-          </div>
-        </div>
-
-        <!-- Auth info / Login hint -->
-        <VAlert
-          v-if="authStore.isAuthenticated"
-          type="info"
-          variant="tonal"
-          class="mb-6"
-        >
-          Je bent ingelogd als {{ authStore.user?.name }}. Je gegevens zijn automatisch ingevuld.
-        </VAlert>
-
-        <div
-          v-else
-          class="text-body-2 text-medium-emphasis mb-6"
-        >
-          Al een account?
-          <RouterLink
-            to="/login"
-            class="text-primary font-weight-medium"
-          >
-            Log in
-          </RouterLink>
-          om je gegevens automatisch in te vullen.
-        </div>
-
-        <!-- Submit error -->
-        <VAlert
-          v-if="submitError"
-          type="error"
-          variant="tonal"
-          class="mb-6"
-          closable
-          @click:close="submitError = null"
-        >
-          {{ submitError }}
-        </VAlert>
-
-        <!-- Stepper -->
-        <AppStepper
-          v-model:current-step="currentStep"
-          :items="stepperItems"
-          :direction="smAndDown ? 'vertical' : 'horizontal'"
-          icon-size="22"
-          class="stepper-icon-step-bg mb-6"
-        />
-
-        <VDivider class="mb-2" />
-
-        <!-- Step content -->
-        <VWindow
-          v-model="currentStep"
-          class="disable-tab-transition"
-        >
-          <!-- Step 0: Over jou -->
-          <VWindowItem>
-            <div class="pt-6">
-              <h4 class="text-h4 mb-1">
-                Over jou
+            <div class="pa-4">
+              <h4 class="text-subtitle-1 font-weight-bold text-uppercase text-medium-emphasis mb-4">
+                Aanmelden
               </h4>
-              <p class="text-body-1 text-medium-emphasis mb-6">
-                Vul je persoonlijke gegevens in
-              </p>
 
-              <VRow>
-                <VCol cols="12">
-                  <VTextField
-                    v-model="name"
-                    label="Naam *"
-                    :error-messages="errors.name"
-                    :disabled="authStore.isAuthenticated"
-                    autofocus
-                  />
-                </VCol>
-
-                <VCol cols="12">
-                  <VTextField
-                    v-model="email"
-                    label="E-mailadres *"
-                    type="email"
-                    :error-messages="errors.email"
-                    :disabled="authStore.isAuthenticated"
-                  />
-                </VCol>
-
-                <VCol cols="12">
-                  <VTextField
-                    v-model="phone"
-                    label="Telefoonnummer"
-                    :error-messages="errors.phone"
-                  />
-                </VCol>
-              </VRow>
-            </div>
-          </VWindowItem>
-
-          <!-- Step 1: Extra info -->
-          <VWindowItem>
-            <div class="pt-6">
-              <h4 class="text-h4 mb-1">
-                Extra informatie
-              </h4>
-              <p class="text-body-1 text-medium-emphasis mb-6">
-                Vertel ons meer over jezelf
-              </p>
-
-              <VRow>
-                <VCol
-                  cols="12"
-                  sm="6"
+              <div class="d-flex flex-column ga-1">
+                <div
+                  v-for="(step, index) in steps"
+                  :key="index"
+                  class="d-flex align-center ga-3 pa-3 rounded-lg"
+                  :class="{
+                    'bg-primary': index === currentStep,
+                    'cursor-pointer': index < currentStep,
+                  }"
+                  @click="goToStep(index)"
                 >
-                  <VSelect
-                    v-model="tshirtSize"
-                    :items="tshirtSizeItems"
-                    label="Shirtmaat"
-                    :error-messages="errors.tshirt_size"
-                  />
-                </VCol>
-
-                <VCol
-                  cols="12"
-                  sm="6"
-                >
-                  <div class="d-flex flex-column gap-4 pt-2">
-                    <VSwitch
-                      v-model="firstAid"
-                      label="Ik heb een EHBO-diploma"
-                      color="primary"
-                      hide-details
-                    />
-
-                    <VSwitch
-                      v-model="drivingLicence"
-                      label="Ik heb een rijbewijs B"
-                      color="primary"
-                      hide-details
-                    />
-                  </div>
-                </VCol>
-
-                <VCol cols="12">
-                  <VTextarea
-                    v-model="allergies"
-                    label="Allergieën"
-                    :error-messages="errors.allergies"
-                    :counter="500"
-                    rows="2"
-                    auto-grow
-                  />
-                </VCol>
-
-                <VCol cols="12">
-                  <VTextarea
-                    v-model="accessRequirements"
-                    label="Toegangsbehoeften"
-                    :error-messages="errors.access_requirements"
-                    hint="Bijv. rolstoeltoegankelijk, rustige werkplek, etc."
-                    persistent-hint
-                    :counter="500"
-                    rows="2"
-                    auto-grow
-                  />
-                </VCol>
-              </VRow>
-            </div>
-          </VWindowItem>
-
-          <!-- Step 2: Motivatie -->
-          <VWindowItem>
-            <div class="pt-6">
-              <h4 class="text-h4 mb-1">
-                Motivatie
-              </h4>
-              <p class="text-body-1 text-medium-emphasis mb-6">
-                Waarom wil je vrijwilliger worden?
-              </p>
-
-              <VRow>
-                <VCol cols="12">
-                  <VSelect
-                    v-model="motivation"
-                    :items="motivationItems"
-                    label="Wat is je motivatie?"
-                    :error-messages="errors.motivation"
-                    clearable
-                  />
-                </VCol>
-
-                <VCol
-                  v-if="motivation"
-                  cols="12"
-                >
-                  <VTextarea
-                    v-model="motivationOther"
-                    label="Toelichting"
-                    :error-messages="errors.motivation_other"
-                    :counter="500"
-                    rows="3"
-                    auto-grow
-                  />
-                </VCol>
-              </VRow>
-            </div>
-          </VWindowItem>
-
-          <!-- Step 3: Voorkeurssecties -->
-          <VWindowItem>
-            <div class="pt-6">
-              <h4 class="text-h4 mb-1">
-                Bij welke onderdelen wil je helpen?
-              </h4>
-              <p class="text-body-1 text-medium-emphasis mb-6">
-                Selecteer maximaal 5 onderdelen. Je eerste keuze heeft de hoogste prioriteit.
-              </p>
-
-              <template
-                v-for="(sections, category) in sectionsByCategory"
-                :key="category"
-              >
-                <div class="text-subtitle-2 text-medium-emphasis mt-4 mb-2">
-                  {{ category }}
-                </div>
-
-                <VRow dense>
-                  <VCol
-                    v-for="section in sections"
-                    :key="section.id"
-                    cols="12"
-                    sm="6"
+                  <VAvatar
+                    size="28"
+                    :color="index < currentStep ? 'success' : index === currentStep ? 'white' : 'grey-lighten-2'"
+                    :variant="index === currentStep ? 'flat' : 'tonal'"
                   >
-                    <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)"
+                    <VIcon
+                      v-if="index < currentStep"
+                      size="16"
+                      color="white"
                     >
-                      <VCardText class="d-flex align-center ga-3 pa-3">
-                        <VCheckboxBtn
-                          :model-value="isSelected(section.name)"
-                          readonly
-                          density="compact"
-                          hide-details
-                        />
+                      tabler-check
+                    </VIcon>
+                    <span
+                      v-else
+                      class="text-caption font-weight-bold"
+                      :style="index === currentStep ? `color: rgb(var(--v-theme-primary))` : ''"
+                    >
+                      {{ index + 1 }}
+                    </span>
+                  </VAvatar>
 
-                        <VIcon
-                          v-if="section.icon"
-                          size="20"
-                        >
-                          {{ section.icon }}
-                        </VIcon>
+                  <div>
+                    <div
+                      class="text-body-2 font-weight-medium"
+                      :style="index === currentStep ? 'color: white' : ''"
+                    >
+                      {{ step.title }}
+                    </div>
+                    <div
+                      v-if="index === currentStep"
+                      class="text-caption"
+                      style="color: rgba(255,255,255,0.7);"
+                    >
+                      {{ step.subtitle }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </VCol>
 
-                        <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 }}
-                          </div>
-                        </div>
+          <!-- Mobile: horizontal chips -->
+          <VCol
+            v-if="!mdAndUp"
+            cols="12"
+          >
+            <div class="d-flex justify-center flex-wrap ga-2 pa-4 border-b">
+              <VChip
+                v-for="(step, index) in steps"
+                :key="index"
+                :color="index === currentStep ? 'primary' : index < currentStep ? 'success' : 'default'"
+                :variant="index === currentStep ? 'flat' : 'tonal'"
+                size="small"
+              >
+                <VIcon
+                  v-if="index < currentStep"
+                  start
+                  size="14"
+                >
+                  tabler-check
+                </VIcon>
+                <span>{{ index + 1 }}. {{ step.title }}</span>
+              </VChip>
+            </div>
+          </VCol>
 
-                        <VChip
-                          v-if="isSelected(section.name)"
-                          size="x-small"
-                          color="primary"
-                          variant="elevated"
-                        >
-                          #{{ getSelectionPriority(section.name) }}
-                        </VChip>
-                      </VCardText>
-                    </VCard>
+          <!-- Step content -->
+          <VCol
+            cols="12"
+            :md="mdAndUp ? 9 : 12"
+          >
+            <div class="pa-6">
+              <!-- Step header -->
+              <div class="mb-6">
+                <h5 class="text-h5 mb-1">
+                  {{ steps[currentStep].title }}
+                </h5>
+                <p class="text-body-2 text-medium-emphasis mb-0">
+                  {{ steps[currentStep].subtitle }}
+                </p>
+              </div>
+
+              <!-- Step 0: Over jou -->
+              <div v-show="currentStep === 0">
+                <VRow>
+                  <VCol
+                    cols="12"
+                    md="6"
+                  >
+                    <VTextField
+                      v-model="name"
+                      label="Naam *"
+                      placeholder="Je volledige naam"
+                      :error-messages="errors.name"
+                      :disabled="authStore.isAuthenticated"
+                      density="comfortable"
+                    />
+                  </VCol>
+
+                  <VCol
+                    cols="12"
+                    md="6"
+                  >
+                    <VTextField
+                      v-model="email"
+                      label="E-mailadres *"
+                      type="email"
+                      placeholder="je@email.nl"
+                      :error-messages="errors.email"
+                      :disabled="authStore.isAuthenticated"
+                      density="comfortable"
+                    />
+                  </VCol>
+
+                  <VCol
+                    cols="12"
+                    md="6"
+                  >
+                    <VTextField
+                      v-model="phone"
+                      label="Telefoonnummer"
+                      placeholder="06 12345678"
+                      :error-messages="errors.phone"
+                      density="comfortable"
+                    />
                   </VCol>
                 </VRow>
-              </template>
+              </div>
 
-              <VAlert
-                v-if="!Object.keys(sectionsByCategory).length"
-                type="info"
-                variant="tonal"
-                class="mt-4"
-              >
-                Er zijn nog geen werkgebieden geconfigureerd voor dit evenement.
-              </VAlert>
+              <!-- Step 1: Meer over jou -->
+              <div v-show="currentStep === 1">
+                <VRow>
+                  <VCol
+                    cols="12"
+                    md="6"
+                  >
+                    <VSelect
+                      v-model="tshirtSize"
+                      :items="tshirtSizeItems"
+                      label="Shirtmaat"
+                      placeholder="Selecteer je maat"
+                      :error-messages="errors.tshirt_size"
+                      density="comfortable"
+                    />
+                  </VCol>
 
-              <p
-                v-if="selectedCount > 0"
-                class="text-body-2 text-medium-emphasis mt-4"
-              >
-                {{ selectedCount }} van 5 onderdelen geselecteerd
-              </p>
-            </div>
-          </VWindowItem>
+                  <VCol
+                    cols="12"
+                    md="6"
+                  >
+                    <div class="d-flex ga-6 pt-2">
+                      <VSwitch
+                        v-model="firstAid"
+                        label="EHBO-diploma"
+                        color="primary"
+                        hide-details
+                      />
 
-          <!-- Step 4: Beschikbaarheid -->
-          <VWindowItem>
-            <div class="pt-6">
-              <h4 class="text-h4 mb-1">
-                Beschikbaarheid
-              </h4>
-              <p class="text-body-1 text-medium-emphasis mb-6">
-                Selecteer de tijdsloten waarop je beschikbaar bent en geef je voorkeur aan met sterren.
-              </p>
+                      <VSwitch
+                        v-model="drivingLicence"
+                        label="Rijbewijs B"
+                        color="primary"
+                        hide-details
+                      />
+                    </div>
+                  </VCol>
 
-              <p
-                v-if="registrationData.time_slots.length === 0"
-                class="text-body-1 text-medium-emphasis"
-              >
-                Er zijn geen tijdsloten beschikbaar voor dit evenement.
-              </p>
+                  <VCol cols="12">
+                    <VTextarea
+                      v-model="allergies"
+                      label="Allergieën of dieetwensen"
+                      placeholder="Laat ons weten als je allergieën of dieetwensen hebt"
+                      :error-messages="errors.allergies"
+                      :counter="500"
+                      rows="2"
+                      auto-grow
+                      density="comfortable"
+                    />
+                  </VCol>
 
-              <template v-else>
-                <div
-                  v-for="[date, slots] in timeSlotsByDate"
-                  :key="date"
-                  class="mb-6"
-                >
-                  <h4 class="text-subtitle-1 font-weight-bold mb-2 text-capitalize">
-                    {{ formatDate(date) }}
-                  </h4>
-                  <VList density="compact">
-                    <VListItem
-                      v-for="slot in slots"
-                      :key="slot.id"
-                      @click="toggleTimeSlot(slot.id)"
+                  <VCol cols="12">
+                    <VTextarea
+                      v-model="accessRequirements"
+                      label="Toegangsbehoeften"
+                      placeholder="Heb je specifieke behoeften qua toegankelijkheid?"
+                      :error-messages="errors.access_requirements"
+                      :counter="500"
+                      rows="2"
+                      auto-grow
+                      density="comfortable"
+                    />
+                  </VCol>
+                </VRow>
+              </div>
+
+              <!-- Step 2: Motivatie -->
+              <div v-show="currentStep === 2">
+                <VRow>
+                  <VCol
+                    cols="12"
+                    md="6"
+                  >
+                    <VSelect
+                      v-model="motivation"
+                      :items="motivationItems"
+                      label="Waarom wil je vrijwilliger zijn?"
+                      placeholder="Selecteer je motivatie"
+                      :error-messages="errors.motivation"
+                      clearable
+                      density="comfortable"
+                    />
+                  </VCol>
+
+                  <VExpandTransition>
+                    <VCol
+                      v-if="motivation"
+                      cols="12"
                     >
-                      <template #prepend>
-                        <VCheckboxBtn
-                          :model-value="selectedTimeSlotIds.includes(slot.id)"
-                          @click.stop="toggleTimeSlot(slot.id)"
-                        />
-                      </template>
+                      <VTextarea
+                        v-model="motivationOther"
+                        label="Toelichting"
+                        placeholder="Vertel ons meer over je motivatie..."
+                        :error-messages="errors.motivation_other"
+                        :counter="500"
+                        rows="3"
+                        auto-grow
+                        density="comfortable"
+                      />
+                    </VCol>
+                  </VExpandTransition>
+                </VRow>
+              </div>
 
-                      <VListItemTitle>{{ slot.name }}</VListItemTitle>
-                      <VListItemSubtitle>
-                        {{ formatTimeRange(slot.start_time, slot.end_time) }} &middot; {{ slot.duration_hours }}u
-                      </VListItemSubtitle>
+              <!-- 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">
+                    {{ category }}
+                  </div>
 
-                      <template
-                        v-if="selectedTimeSlotIds.includes(slot.id)"
-                        #append
+                  <VRow dense>
+                    <VCol
+                      v-for="section in sections"
+                      :key="section.id"
+                      cols="12"
+                      sm="6"
+                    >
+                      <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)"
                       >
-                        <VRating
-                          v-model="timeSlotPreferences[slot.id]"
-                          density="compact"
-                          size="small"
-                          length="5"
-                          color="warning"
-                          active-color="warning"
-                          @click.stop
-                        />
-                      </template>
-                    </VListItem>
-                  </VList>
-                </div>
+                        <VCardText class="d-flex align-center ga-3 pa-3">
+                          <VCheckboxBtn
+                            :model-value="isSelected(section.name)"
+                            readonly
+                            density="compact"
+                            hide-details
+                          />
 
-                <VDivider class="mb-4" />
+                          <VIcon
+                            v-if="section.icon"
+                            size="20"
+                          >
+                            {{ section.icon }}
+                          </VIcon>
 
-                <div class="d-flex align-center">
-                  <span class="text-body-1">
-                    Totaal geselecteerd: <strong>{{ totalSelectedHours }} uur</strong>
-                  </span>
-                </div>
+                          <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 }}
+                            </div>
+                          </div>
+
+                          <VChip
+                            v-if="isSelected(section.name)"
+                            size="x-small"
+                            color="primary"
+                            variant="elevated"
+                          >
+                            #{{ getSelectionPriority(section.name) }}
+                          </VChip>
+                        </VCardText>
+                      </VCard>
+                    </VCol>
+                  </VRow>
+                </template>
 
                 <VAlert
-                  v-if="selectedTimeSlotIds.length > 0 && totalSelectedHours < 8"
-                  type="warning"
+                  v-if="!Object.keys(sectionsByCategory).length"
+                  type="info"
                   variant="tonal"
                   class="mt-4"
                 >
-                  Minimaal 8 uur nodig voor een festivalpas.
+                  Er zijn nog geen werkgebieden geconfigureerd voor dit evenement.
                 </VAlert>
-              </template>
+
+                <p
+                  v-if="selectedCount > 0"
+                  class="text-body-2 text-medium-emphasis mt-4"
+                >
+                  {{ selectedCount }} van 5 onderdelen geselecteerd
+                </p>
+              </div>
+
+              <!-- Step 4: Beschikbaarheid -->
+              <div v-show="currentStep === 4">
+                <p
+                  v-if="registrationData.time_slots.length === 0"
+                  class="text-body-1 text-medium-emphasis"
+                >
+                  Er zijn geen tijdsloten beschikbaar voor dit evenement.
+                </p>
+
+                <template v-else>
+                  <div
+                    v-for="[date, slots] in timeSlotsByDate"
+                    :key="date"
+                    class="mb-6"
+                  >
+                    <h4 class="text-subtitle-1 font-weight-bold mb-2 text-capitalize">
+                      {{ formatDate(date) }}
+                    </h4>
+                    <VList density="compact">
+                      <VListItem
+                        v-for="slot in slots"
+                        :key="slot.id"
+                        @click="toggleTimeSlot(slot.id)"
+                      >
+                        <template #prepend>
+                          <VCheckboxBtn
+                            :model-value="selectedTimeSlotIds.includes(slot.id)"
+                            @click.stop="toggleTimeSlot(slot.id)"
+                          />
+                        </template>
+
+                        <VListItemTitle>{{ slot.name }}</VListItemTitle>
+                        <VListItemSubtitle>
+                          {{ formatTimeRange(slot.start_time, slot.end_time) }} &middot; {{ slot.duration_hours }}u
+                        </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" />
+
+                  <div class="d-flex align-center">
+                    <span class="text-body-1">
+                      Totaal geselecteerd: <strong>{{ totalSelectedHours }} uur</strong>
+                    </span>
+                  </div>
+
+                  <VAlert
+                    v-if="selectedTimeSlotIds.length > 0 && totalSelectedHours < 8"
+                    type="warning"
+                    variant="tonal"
+                    class="mt-4"
+                  >
+                    Minimaal 8 uur nodig voor een festivalpas.
+                  </VAlert>
+                </template>
+              </div>
+
+              <!-- Navigation -->
+              <VDivider class="my-6" />
+
+              <div class="d-flex justify-space-between">
+                <VBtn
+                  v-if="currentStep > 0"
+                  variant="outlined"
+                  color="secondary"
+                  @click="prevStep"
+                >
+                  <VIcon
+                    icon="tabler-arrow-left"
+                    start
+                  />
+                  Vorige
+                </VBtn>
+                <div v-else />
+
+                <VBtn
+                  v-if="currentStep < steps.length - 1"
+                  color="primary"
+                  @click="nextStep"
+                >
+                  Volgende
+                  <VIcon
+                    icon="tabler-arrow-right"
+                    end
+                  />
+                </VBtn>
+
+                <VBtn
+                  v-else
+                  color="success"
+                  :loading="isSubmitting"
+                  @click="onSubmit"
+                >
+                  <VIcon
+                    icon="tabler-send"
+                    start
+                  />
+                  Aanmelding versturen
+                </VBtn>
+              </div>
             </div>
-          </VWindowItem>
-        </VWindow>
-
-        <!-- Navigation buttons -->
-        <div class="d-flex flex-wrap justify-space-between gap-x-4 mt-6">
-          <VBtn
-            color="secondary"
-            :disabled="currentStep === 0"
-            variant="tonal"
-            @click="prevStep"
-          >
-            <VIcon
-              icon="tabler-arrow-left"
-              start
-              class="flip-in-rtl"
-            />
-            Vorige
-          </VBtn>
-
-          <VBtn
-            v-if="currentStep === 4"
-            color="success"
-            :loading="isSubmitting"
-            @click="onSubmit"
-          >
-            Aanmelding versturen
-            <VIcon
-              icon="tabler-send"
-              end
-            />
-          </VBtn>
-
-          <VBtn
-            v-else
-            color="primary"
-            @click="nextStep"
-          >
-            Volgende
-            <VIcon
-              icon="tabler-arrow-right"
-              end
-              class="flip-in-rtl"
-            />
-          </VBtn>
-        </div>
+          </VCol>
+        </VRow>
       </VCard>
-    </VCol>
-  </VRow>
+
+      <!-- Footer -->
+      <div class="text-center pa-4 text-caption text-medium-emphasis">
+        Powered by Crewli
+      </div>
+    </VContainer>
+  </div>
 </template>
 
-<style lang="scss">
-@use "@core/scss/template/pages/page-auth.scss";
-
-.illustration-image {
-  block-size: 550px;
-  inline-size: 248px;
-}
-
-.bg-image {
-  inset-block-end: 0;
+<style scoped>
+.registration-container {
+  position: relative;
+  z-index: 1;
+  max-inline-size: 1000px;
 }
 </style>
diff --git a/apps/portal/src/pages/register/success.vue b/apps/portal/src/pages/register/success.vue
index 2b92e3f6..10e5f512 100644
--- a/apps/portal/src/pages/register/success.vue
+++ b/apps/portal/src/pages/register/success.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { useGenerateImageVariant } from '@core/composable/useGenerateImageVariant'
-import miscMaskLight from '@images/pages/misc-mask-light.png'
-import miscMaskDark from '@images/pages/misc-mask-dark.png'
 import { useAuthStore } from '@/stores/useAuthStore'
 
 definePage({
@@ -16,103 +13,98 @@ const route = useRoute('register-success')
 const authStore = useAuthStore()
 
 const eventName = computed(() => (route.query.event as string) || 'het evenement')
+const bannerUrl = computed(() => (route.query.banner as string) || null)
 const isAuthenticated = computed(() => route.query.authenticated === '1' || authStore.isAuthenticated)
-
-const authThemeMask = useGenerateImageVariant(miscMaskLight, miscMaskDark)
 </script>
 
 <template>
-  <!-- Logo -->
-  <RouterLink to="/">
-    <div class="auth-logo d-flex align-center gap-x-3">
-      <VIcon
-        icon="tabler-users-group"
-        size="28"
-        color="primary"
-      />
-      <h1 class="auth-title">
-        Crewli
-      </h1>
-    </div>
-  </RouterLink>
-
-  <VRow
-    no-gutters
-    class="auth-wrapper bg-surface"
-  >
-    <VCol
-      cols="12"
-      class="d-flex align-center justify-center"
+  <div>
+    <!-- Event banner (if available) -->
+    <VImg
+      v-if="bannerUrl"
+      :src="bannerUrl"
+      height="180"
+      cover
+      gradient="to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.4)"
     >
-      <div class="position-relative w-100 d-flex align-center justify-center" style="min-block-size: 100dvh;">
-        <VCard
-          flat
-          :max-width="550"
-          class="text-center pa-8 pa-sm-12"
-          style="z-index: 1;"
-        >
-          <VAvatar
-            size="100"
-            color="success"
-            variant="tonal"
-            class="mb-6"
-          >
-            <VIcon
-              icon="tabler-circle-check"
-              size="60"
-            />
-          </VAvatar>
-
-          <h4 class="text-h4 mb-2">
-            Bedankt voor je aanmelding!
-          </h4>
-
-          <p class="text-body-1 text-medium-emphasis mb-2">
-            Je aanmelding bij <strong>{{ eventName }}</strong> is succesvol ontvangen.
-          </p>
-
-          <p class="text-body-1 text-medium-emphasis mb-2">
-            Het organisatieteam beoordeelt je aanmelding zo snel mogelijk.
-          </p>
-
-          <p class="text-body-2 text-disabled mb-8">
-            Je ontvangt een e-mail zodra je aanmelding is goedgekeurd.
-          </p>
-
-          <div class="d-flex flex-wrap justify-center gap-4">
-            <VBtn
-              v-if="isAuthenticated"
-              to="/dashboard"
-              color="primary"
-              prepend-icon="tabler-dashboard"
-            >
-              Ga naar je dashboard
-            </VBtn>
-
-            <VBtn
-              v-else
-              to="/login"
-              color="primary"
-              variant="tonal"
-              prepend-icon="tabler-login"
-            >
-              Heb je al een account? Log in
-            </VBtn>
-          </div>
-        </VCard>
-
-        <img
-          class="auth-footer-mask flip-in-rtl"
-          :src="authThemeMask"
-          alt="footer-mask"
-          height="280"
-          width="100"
-        >
+      <div class="d-flex align-center justify-center fill-height">
+        <h3 class="text-h5 text-white font-weight-bold">
+          {{ eventName }}
+        </h3>
       </div>
-    </VCol>
-  </VRow>
-</template>
+    </VImg>
 
-<style lang="scss">
-@use "@core/scss/template/pages/page-auth.scss";
-</style>
+    <!-- Fallback header -->
+    <div
+      v-else
+      class="d-flex align-center justify-center pa-6"
+      style="background: rgb(var(--v-theme-primary));"
+    >
+      <h3 class="text-h5 text-white font-weight-bold">
+        {{ eventName }}
+      </h3>
+    </div>
+
+    <VContainer style="max-inline-size: 600px;">
+      <VCard
+        class="text-center pa-8 pa-sm-12 mt-n6"
+        variant="flat"
+        style="position: relative; z-index: 1;"
+      >
+        <VAvatar
+          size="100"
+          color="success"
+          variant="tonal"
+          class="mb-6"
+        >
+          <VIcon
+            icon="tabler-circle-check"
+            size="60"
+          />
+        </VAvatar>
+
+        <h4 class="text-h4 mb-4">
+          Bedankt voor je aanmelding!
+        </h4>
+
+        <p class="text-body-1 text-medium-emphasis mb-2">
+          Je aanmelding bij <strong>{{ eventName }}</strong> is succesvol ontvangen.
+        </p>
+
+        <p class="text-body-1 text-medium-emphasis mb-2">
+          Je aanmelding wordt beoordeeld door het organisatieteam.
+        </p>
+
+        <p class="text-body-2 text-disabled mb-8">
+          Je ontvangt een e-mail zodra je aanmelding is goedgekeurd.
+        </p>
+
+        <div class="d-flex flex-wrap justify-center gap-4">
+          <VBtn
+            v-if="isAuthenticated"
+            to="/dashboard"
+            color="primary"
+            prepend-icon="tabler-dashboard"
+          >
+            Ga naar je dashboard
+          </VBtn>
+
+          <VBtn
+            v-else
+            to="/login"
+            color="primary"
+            variant="tonal"
+            prepend-icon="tabler-login"
+          >
+            Heb je al een account? Log in
+          </VBtn>
+        </div>
+      </VCard>
+
+      <!-- Footer -->
+      <div class="text-center pa-4 text-caption text-medium-emphasis">
+        Powered by Crewli
+      </div>
+    </VContainer>
+  </div>
+</template>
diff --git a/apps/portal/src/types/registration.ts b/apps/portal/src/types/registration.ts
index 40163f3e..9cb267f6 100644
--- a/apps/portal/src/types/registration.ts
+++ b/apps/portal/src/types/registration.ts
@@ -5,6 +5,9 @@ export interface EventRegistrationData {
     start_date: string
     end_date: string
     organisation_id: string
+    registration_banner_url: string | null
+    registration_welcome_text: string | null
+    registration_logo_url: string | null
   }
   sections: SectionOption[]
   time_slots: TimeSlotOption[]