From 79b7fe0b42b6120fe7bf02627e2bc2086925f074 Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Wed, 15 Apr 2026 22:18:16 +0200
Subject: [PATCH] feat: account settings with Vuexy tab pattern and MFA banner
 fix

Restructures account/profile pages to match Vuexy's account-settings
tab pattern (Account, Security, Notifications) and fixes the MFA
enforcement banner that stayed visible after successful setup.

Backend:
- Add phone column to users table with migration
- Add PUT /me/profile endpoint for profile updates
- Create UpdateProfileRequest form request
- Update MeResource to include phone field

Organizer app:
- Rewrite account-settings as tabbed page (VTabs pill style + VWindow)
- Create AccountTab: avatar, profile form, email change, danger zone
- Create SecurityTab: password change, MFA method cards, backup codes,
  trusted devices, disable MFA danger zone
- Create NotificationsTab: placeholder with disabled toggles
- Fix MFA banner: set authStore.mfaSetupRequired = false on setup complete
- Update router guard to redirect to ?tab=security for MFA enforcement
- Update UserProfile menu links to use tab query params

Portal:
- Restructure profiel.vue with VTabs (Mijn profiel + Beveiliging)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../Controllers/Api/V1/AccountController.php  |   20 +
 .../Requests/Api/V1/UpdateProfileRequest.php  |   27 +
 api/app/Http/Resources/Api/V1/MeResource.php  |    1 +
 api/app/Models/User.php                       |    1 +
 ..._04_16_000000_add_phone_to_users_table.php |   24 +
 api/routes/api.php                            |    1 +
 apps/app/components.d.ts                      |    3 +
 .../account-settings/AccountTab.vue           |  442 +++++++
 .../account-settings/NotificationsTab.vue     |   60 +
 .../account-settings/SecurityTab.vue          |  639 ++++++++++
 apps/app/src/composables/api/useAccount.ts    |   28 +-
 .../src/layouts/components/UserProfile.vue    |    8 +-
 apps/app/src/pages/account-settings/index.vue |  257 +---
 .../src/pages/account-settings/security.vue   |  398 -------
 apps/app/src/pages/login.vue                  |    2 +-
 apps/app/src/plugins/1.router/guards.ts       |    4 +-
 apps/app/src/stores/useAuthStore.ts           |    2 +
 apps/app/src/types/auth.ts                    |    4 +
 apps/app/src/types/member.ts                  |    2 +
 apps/app/typed-router.d.ts                    |    1 -
 apps/portal/auto-imports.d.ts                 |    4 +
 apps/portal/src/pages/profiel.vue             | 1033 +++++++++--------
 22 files changed, 1860 insertions(+), 1101 deletions(-)
 create mode 100644 api/app/Http/Requests/Api/V1/UpdateProfileRequest.php
 create mode 100644 api/database/migrations/2026_04_16_000000_add_phone_to_users_table.php
 create mode 100644 apps/app/src/components/account-settings/AccountTab.vue
 create mode 100644 apps/app/src/components/account-settings/NotificationsTab.vue
 create mode 100644 apps/app/src/components/account-settings/SecurityTab.vue
 delete mode 100644 apps/app/src/pages/account-settings/security.vue

diff --git a/api/app/Http/Controllers/Api/V1/AccountController.php b/api/app/Http/Controllers/Api/V1/AccountController.php
index c67a6c60..a5cdb5ac 100644
--- a/api/app/Http/Controllers/Api/V1/AccountController.php
+++ b/api/app/Http/Controllers/Api/V1/AccountController.php
@@ -5,6 +5,7 @@ declare(strict_types=1);
 namespace App\Http\Controllers\Api\V1;
 
 use App\Http\Controllers\Controller;
+use App\Http\Requests\Api\V1\UpdateProfileRequest;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Hash;
@@ -13,6 +14,25 @@ use Illuminate\Validation\ValidationException;
 
 final class AccountController extends Controller
 {
+    /**
+     * PUT /api/v1/me/profile
+     * Authenticated user updates their profile.
+     */
+    public function updateProfile(UpdateProfileRequest $request): JsonResponse
+    {
+        $user = $request->user();
+
+        $user->update($request->validated());
+
+        activity()
+            ->causedBy($user)
+            ->performedOn($user)
+            ->log('user.profile.updated');
+
+        return $this->success(message: 'Je profiel is bijgewerkt.');
+    }
+
+
     /**
      * POST /api/v1/me/change-password
      * Authenticated user changes their own password.
diff --git a/api/app/Http/Requests/Api/V1/UpdateProfileRequest.php b/api/app/Http/Requests/Api/V1/UpdateProfileRequest.php
new file mode 100644
index 00000000..67d19de7
--- /dev/null
+++ b/api/app/Http/Requests/Api/V1/UpdateProfileRequest.php
@@ -0,0 +1,27 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Http\Requests\Api\V1;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+final class UpdateProfileRequest extends FormRequest
+{
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    public function rules(): array
+    {
+        return [
+            'first_name' => ['required', 'string', 'max:100'],
+            'last_name' => ['required', 'string', 'max:100'],
+            'phone' => ['nullable', 'string', 'max:20'],
+            'date_of_birth' => ['nullable', 'date', 'before:today'],
+            'timezone' => ['required', 'string', 'timezone:all'],
+            'locale' => ['required', 'string', 'in:nl,en'],
+        ];
+    }
+}
diff --git a/api/app/Http/Resources/Api/V1/MeResource.php b/api/app/Http/Resources/Api/V1/MeResource.php
index fe4559a6..76c1328e 100644
--- a/api/app/Http/Resources/Api/V1/MeResource.php
+++ b/api/app/Http/Resources/Api/V1/MeResource.php
@@ -20,6 +20,7 @@ final class MeResource extends JsonResource
             'full_name' => $this->full_name,
             'date_of_birth' => $this->date_of_birth?->toDateString(),
             'email' => $this->email,
+            'phone' => $this->phone,
             'timezone' => $this->timezone,
             'locale' => $this->locale,
             'avatar' => $this->avatar,
diff --git a/api/app/Models/User.php b/api/app/Models/User.php
index 9b2abe93..100da495 100644
--- a/api/app/Models/User.php
+++ b/api/app/Models/User.php
@@ -28,6 +28,7 @@ final class User extends Authenticatable
         'last_name',
         'date_of_birth',
         'email',
+        'phone',
         'password',
         'timezone',
         'locale',
diff --git a/api/database/migrations/2026_04_16_000000_add_phone_to_users_table.php b/api/database/migrations/2026_04_16_000000_add_phone_to_users_table.php
new file mode 100644
index 00000000..4888b368
--- /dev/null
+++ b/api/database/migrations/2026_04_16_000000_add_phone_to_users_table.php
@@ -0,0 +1,24 @@
+<?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('users', function (Blueprint $table) {
+            $table->string('phone', 20)->nullable()->after('email');
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->dropColumn('phone');
+        });
+    }
+};
diff --git a/api/routes/api.php b/api/routes/api.php
index 171b0e12..8fe034c4 100644
--- a/api/routes/api.php
+++ b/api/routes/api.php
@@ -144,6 +144,7 @@ Route::middleware('auth:sanctum')->group(function () {
     Route::delete('auth/trusted-devices', [TrustedDeviceController::class, 'destroyAll']);
 
     // Account management (self-service)
+    Route::put('me/profile', [AccountController::class, 'updateProfile']);
     Route::post('me/change-password', [AccountController::class, 'changePassword']);
     Route::post('me/change-email', [EmailChangeController::class, 'request']);
 
diff --git a/apps/app/components.d.ts b/apps/app/components.d.ts
index a9583049..564ce4de 100644
--- a/apps/app/components.d.ts
+++ b/apps/app/components.d.ts
@@ -7,6 +7,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    AccountTab: typeof import('./src/components/account-settings/AccountTab.vue')['default']
     AddEditAddressDialog: typeof import('./src/components/dialogs/AddEditAddressDialog.vue')['default']
     AddEditPermissionDialog: typeof import('./src/components/dialogs/AddEditPermissionDialog.vue')['default']
     AddEditRoleDialog: typeof import('./src/components/dialogs/AddEditRoleDialog.vue')['default']
@@ -76,6 +77,7 @@ declare module 'vue' {
     MfaTotpSetupDialog: typeof import('./src/components/settings/MfaTotpSetupDialog.vue')['default']
     MoreBtn: typeof import('./src/@core/components/MoreBtn.vue')['default']
     Notifications: typeof import('./src/@core/components/Notifications.vue')['default']
+    NotificationsTab: typeof import('./src/components/account-settings/NotificationsTab.vue')['default']
     OrganisationSwitcher: typeof import('./src/components/layout/OrganisationSwitcher.vue')['default']
     PaymentProvidersDialog: typeof import('./src/components/dialogs/PaymentProvidersDialog.vue')['default']
     PersonDetailPanel: typeof import('./src/components/persons/PersonDetailPanel.vue')['default']
@@ -88,6 +90,7 @@ declare module 'vue' {
     RouterView: typeof import('vue-router')['RouterView']
     ScrollToTop: typeof import('./src/@core/components/ScrollToTop.vue')['default']
     SectionsShiftsPanel: typeof import('./src/components/sections/SectionsShiftsPanel.vue')['default']
+    SecurityTab: typeof import('./src/components/account-settings/SecurityTab.vue')['default']
     ShareProjectDialog: typeof import('./src/components/dialogs/ShareProjectDialog.vue')['default']
     ShiftDetailPanel: typeof import('./src/components/shifts/ShiftDetailPanel.vue')['default']
     Shortcuts: typeof import('./src/@core/components/Shortcuts.vue')['default']
diff --git a/apps/app/src/components/account-settings/AccountTab.vue b/apps/app/src/components/account-settings/AccountTab.vue
new file mode 100644
index 00000000..d55a1bfc
--- /dev/null
+++ b/apps/app/src/components/account-settings/AccountTab.vue
@@ -0,0 +1,442 @@
+<script setup lang="ts">
+import { useAuthStore } from '@/stores/useAuthStore'
+import { useUpdateProfile, useChangeEmail } from '@/composables/api/useAccount'
+import type { UpdateProfilePayload } from '@/composables/api/useAccount'
+import { avatarText } from '@core/utils/formatters'
+
+const authStore = useAuthStore()
+
+// Profile form
+const profileForm = ref<UpdateProfilePayload>({
+  first_name: '',
+  last_name: '',
+  phone: '',
+  date_of_birth: '',
+  timezone: 'Europe/Amsterdam',
+  locale: 'nl',
+})
+const profileFieldErrors = ref<Record<string, string>>({})
+const profileSuccess = ref('')
+
+const updateProfileMutation = useUpdateProfile()
+
+// Populate form from auth store
+watch(
+  () => authStore.user,
+  (user) => {
+    if (user) {
+      profileForm.value = {
+        first_name: user.first_name,
+        last_name: user.last_name,
+        phone: user.phone ?? '',
+        date_of_birth: user.date_of_birth ?? '',
+        timezone: user.timezone,
+        locale: user.locale,
+      }
+    }
+  },
+  { immediate: true },
+)
+
+async function handleProfileSave() {
+  profileFieldErrors.value = {}
+  profileSuccess.value = ''
+
+  updateProfileMutation.mutate(
+    {
+      ...profileForm.value,
+      phone: profileForm.value.phone || null,
+      date_of_birth: profileForm.value.date_of_birth || null,
+    },
+    {
+      onSuccess: async (data) => {
+        profileSuccess.value = data.message
+
+        // Re-fetch user data to update the store
+        const { apiClient } = await import('@/lib/axios')
+        const { data: meData } = await apiClient.get<{ success: boolean; data: import('@/types/auth').MeResponse }>('/auth/me')
+        authStore.setUser(meData.data)
+      },
+      onError: (err: unknown) => {
+        const ax = err as { response?: { data?: { message?: string; errors?: Record<string, string[]> } } }
+        if (ax.response?.data?.errors) {
+          for (const [key, messages] of Object.entries(ax.response.data.errors)) {
+            profileFieldErrors.value[key] = messages[0]
+          }
+        }
+      },
+    },
+  )
+}
+
+// Email change
+const emailForm = ref({
+  new_email: '',
+  password: '',
+})
+const emailFieldErrors = ref<Record<string, string>>({})
+const emailSuccess = ref('')
+const showEmailPw = ref(false)
+
+const changeEmailMutation = useChangeEmail()
+
+async function handleEmailChange() {
+  emailFieldErrors.value = {}
+  emailSuccess.value = ''
+
+  changeEmailMutation.mutate(
+    { ...emailForm.value, app: 'app' },
+    {
+      onSuccess: (data) => {
+        emailSuccess.value = data.message
+        emailForm.value = { new_email: '', password: '' }
+      },
+      onError: (err: unknown) => {
+        const ax = err as { response?: { data?: { message?: string; errors?: Record<string, string[]> } } }
+        if (ax.response?.data?.errors) {
+          for (const [key, messages] of Object.entries(ax.response.data.errors)) {
+            emailFieldErrors.value[key] = messages[0]
+          }
+        }
+      },
+    },
+  )
+}
+
+// Avatar
+const avatarSrc = computed((): string | null => {
+  const raw = authStore.user?.avatar
+  if (!raw)
+    return null
+  if (raw.startsWith('http://') || raw.startsWith('https://'))
+    return raw
+  const base = (import.meta.env.VITE_API_URL as string | undefined)?.replace(/\/api\/v1\/?$/, '') ?? ''
+  return raw.startsWith('/') ? `${base}${raw}` : `${base}/${raw}`
+})
+
+// Delete account dialog
+const showDeleteDialog = ref(false)
+const deleteConfirmText = ref('')
+const showDeleteSnackbar = ref(false)
+
+function handleDeleteConfirm() {
+  showDeleteDialog.value = false
+  deleteConfirmText.value = ''
+  showDeleteSnackbar.value = true
+}
+
+// Timezone list
+const timezones = [
+  'Europe/Amsterdam',
+  'Europe/Brussels',
+  'Europe/Berlin',
+  'Europe/London',
+  'Europe/Paris',
+  'Europe/Madrid',
+  'Europe/Rome',
+  'Europe/Zurich',
+  'Europe/Vienna',
+  'Europe/Stockholm',
+  'Europe/Oslo',
+  'Europe/Copenhagen',
+  'Europe/Helsinki',
+  'Europe/Warsaw',
+  'Europe/Prague',
+  'Europe/Lisbon',
+  'Europe/Dublin',
+  'Europe/Athens',
+  'Europe/Bucharest',
+  'Europe/Istanbul',
+  'America/New_York',
+  'America/Chicago',
+  'America/Denver',
+  'America/Los_Angeles',
+  'America/Sao_Paulo',
+  'Asia/Tokyo',
+  'Asia/Shanghai',
+  'Asia/Singapore',
+  'Australia/Sydney',
+]
+
+const localeOptions = [
+  { title: 'Nederlands', value: 'nl' },
+  { title: 'English', value: 'en' },
+]
+</script>
+
+<template>
+  <!-- Profile photo + personal details -->
+  <VCard class="mb-6">
+    <VCardText class="d-flex align-center gap-6">
+      <!-- Avatar -->
+      <VAvatar
+        rounded
+        size="100"
+        color="primary"
+        variant="tonal"
+      >
+        <VImg
+          v-if="avatarSrc"
+          :src="avatarSrc"
+          :alt="authStore.user?.full_name ?? ''"
+          cover
+        />
+        <span
+          v-else
+          class="text-h4 font-weight-medium"
+        >
+          {{ avatarText(authStore.user?.full_name ?? '') }}
+        </span>
+      </VAvatar>
+
+      <div>
+        <h5 class="text-h5 mb-1">
+          {{ authStore.user?.full_name }}
+        </h5>
+        <p class="text-body-2 text-medium-emphasis mb-2">
+          {{ authStore.user?.email }}
+        </p>
+        <p class="text-caption text-disabled mb-0">
+          PNG, JPG of SVG. Max 2MB. (binnenkort beschikbaar)
+        </p>
+      </div>
+    </VCardText>
+
+    <VDivider />
+
+    <!-- Personal details form -->
+    <VCardText class="mt-3">
+      <VAlert
+        v-if="profileSuccess"
+        type="success"
+        variant="tonal"
+        density="compact"
+        class="mb-4"
+      >
+        {{ profileSuccess }}
+      </VAlert>
+
+      <VForm @submit.prevent="handleProfileSave">
+        <VRow>
+          <VCol
+            cols="12"
+            md="6"
+          >
+            <AppTextField
+              v-model="profileForm.first_name"
+              label="Voornaam"
+              :error-messages="profileFieldErrors.first_name"
+            />
+          </VCol>
+          <VCol
+            cols="12"
+            md="6"
+          >
+            <AppTextField
+              v-model="profileForm.last_name"
+              label="Achternaam"
+              :error-messages="profileFieldErrors.last_name"
+            />
+          </VCol>
+          <VCol
+            cols="12"
+            md="6"
+          >
+            <AppTextField
+              v-model="profileForm.phone"
+              label="Telefoonnummer"
+              :error-messages="profileFieldErrors.phone"
+            />
+          </VCol>
+          <VCol
+            cols="12"
+            md="6"
+          >
+            <AppTextField
+              v-model="profileForm.date_of_birth"
+              label="Geboortedatum"
+              type="date"
+              :error-messages="profileFieldErrors.date_of_birth"
+            />
+          </VCol>
+          <VCol
+            cols="12"
+            md="6"
+          >
+            <AppAutocomplete
+              v-model="profileForm.timezone"
+              label="Tijdzone"
+              :items="timezones"
+              :error-messages="profileFieldErrors.timezone"
+            />
+          </VCol>
+          <VCol
+            cols="12"
+            md="6"
+          >
+            <AppSelect
+              v-model="profileForm.locale"
+              label="Taal"
+              :items="localeOptions"
+              :error-messages="profileFieldErrors.locale"
+            />
+          </VCol>
+        </VRow>
+
+        <div class="d-flex flex-wrap gap-4 mt-6">
+          <VBtn
+            type="submit"
+            :loading="updateProfileMutation.isPending.value"
+          >
+            Wijzigingen opslaan
+          </VBtn>
+          <VBtn
+            color="secondary"
+            variant="tonal"
+            type="reset"
+          >
+            Annuleren
+          </VBtn>
+        </div>
+      </VForm>
+    </VCardText>
+  </VCard>
+
+  <!-- Email change -->
+  <VCard class="mb-6">
+    <VCardItem>
+      <VCardTitle>E-mailadres wijzigen</VCardTitle>
+    </VCardItem>
+    <VCardText>
+      <p class="text-body-2 text-medium-emphasis mb-4">
+        Huidig e-mailadres: <strong>{{ authStore.user?.email }}</strong>
+      </p>
+
+      <VAlert
+        v-if="emailSuccess"
+        type="success"
+        variant="tonal"
+        density="compact"
+        class="mb-4"
+      >
+        {{ emailSuccess }}
+      </VAlert>
+
+      <VForm @submit.prevent="handleEmailChange">
+        <VRow>
+          <VCol
+            cols="12"
+            md="6"
+          >
+            <AppTextField
+              v-model="emailForm.new_email"
+              label="Nieuw e-mailadres"
+              type="email"
+              :error-messages="emailFieldErrors.new_email"
+            />
+          </VCol>
+          <VCol
+            cols="12"
+            md="6"
+          >
+            <AppTextField
+              v-model="emailForm.password"
+              label="Huidig wachtwoord"
+              :type="showEmailPw ? 'text' : 'password'"
+              :append-inner-icon="showEmailPw ? 'tabler-eye-off' : 'tabler-eye'"
+              :error-messages="emailFieldErrors.password"
+              hint="Ter bevestiging van je identiteit"
+              persistent-hint
+              @click:append-inner="showEmailPw = !showEmailPw"
+            />
+          </VCol>
+        </VRow>
+
+        <div class="d-flex justify-end mt-4">
+          <VBtn
+            type="submit"
+            :loading="changeEmailMutation.isPending.value"
+            :disabled="!emailForm.new_email || !emailForm.password"
+          >
+            Verificatiemail versturen
+          </VBtn>
+        </div>
+      </VForm>
+    </VCardText>
+  </VCard>
+
+  <!-- Danger zone: Account verwijderen -->
+  <VCard
+    class="border-error"
+    variant="outlined"
+  >
+    <VCardItem>
+      <VCardTitle class="text-error">
+        Account verwijderen
+      </VCardTitle>
+    </VCardItem>
+    <VCardText>
+      <p class="text-body-2 mb-4">
+        Als je je account verwijdert, worden al je gegevens permanent verwijderd.
+        Deze actie kan niet ongedaan worden gemaakt.
+      </p>
+      <VBtn
+        color="error"
+        variant="outlined"
+        @click="showDeleteDialog = true"
+      >
+        Account verwijderen
+      </VBtn>
+    </VCardText>
+  </VCard>
+
+  <!-- Delete confirmation dialog -->
+  <VDialog
+    v-model="showDeleteDialog"
+    max-width="440"
+  >
+    <VCard>
+      <VCardTitle class="text-h6">
+        Account verwijderen
+      </VCardTitle>
+      <VCardText>
+        <VAlert
+          type="error"
+          variant="tonal"
+          class="mb-4"
+        >
+          Dit kan niet ongedaan worden gemaakt. Al je gegevens worden permanent verwijderd.
+        </VAlert>
+        <AppTextField
+          v-model="deleteConfirmText"
+          label="Typ DELETE om te bevestigen"
+          placeholder="DELETE"
+        />
+      </VCardText>
+      <VCardActions>
+        <VSpacer />
+        <VBtn
+          variant="text"
+          @click="showDeleteDialog = false; deleteConfirmText = ''"
+        >
+          Annuleren
+        </VBtn>
+        <VBtn
+          color="error"
+          :disabled="deleteConfirmText !== 'DELETE'"
+          @click="handleDeleteConfirm"
+        >
+          Verwijderen
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+
+  <VSnackbar
+    v-model="showDeleteSnackbar"
+    color="info"
+    :timeout="5000"
+  >
+    Neem contact op met de beheerder om je account te verwijderen.
+  </VSnackbar>
+</template>
diff --git a/apps/app/src/components/account-settings/NotificationsTab.vue b/apps/app/src/components/account-settings/NotificationsTab.vue
new file mode 100644
index 00000000..cef0df21
--- /dev/null
+++ b/apps/app/src/components/account-settings/NotificationsTab.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+const notifications = ref([
+  { type: 'Shift toewijzingen', email: true },
+  { type: 'Registratie updates', email: true },
+  { type: 'Evenement updates', email: true },
+  { type: 'Systeem meldingen', email: true },
+])
+</script>
+
+<template>
+  <VCard>
+    <VCardItem>
+      <VCardTitle>E-mailmeldingen</VCardTitle>
+      <template #subtitle>
+        Dit wordt binnenkort beschikbaar
+      </template>
+    </VCardItem>
+
+    <VCardText class="px-0">
+      <VDivider />
+      <VTable class="text-no-wrap">
+        <thead>
+          <tr>
+            <th>Type</th>
+            <th class="text-center">
+              E-MAIL
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="item in notifications"
+            :key="item.type"
+          >
+            <td class="text-body-1 text-high-emphasis">
+              {{ item.type }}
+            </td>
+            <td class="text-center">
+              <VCheckbox
+                v-model="item.email"
+                disabled
+                class="d-inline-flex"
+              />
+            </td>
+          </tr>
+        </tbody>
+      </VTable>
+      <VDivider />
+    </VCardText>
+
+    <VCardText>
+      <VAlert
+        type="info"
+        variant="tonal"
+      >
+        Meldingsvoorkeuren zijn binnenkort beschikbaar. Op dit moment ontvang je alle meldingen via e-mail.
+      </VAlert>
+    </VCardText>
+  </VCard>
+</template>
diff --git a/apps/app/src/components/account-settings/SecurityTab.vue b/apps/app/src/components/account-settings/SecurityTab.vue
new file mode 100644
index 00000000..d14abccf
--- /dev/null
+++ b/apps/app/src/components/account-settings/SecurityTab.vue
@@ -0,0 +1,639 @@
+<script setup lang="ts">
+import { useAuthStore } from '@/stores/useAuthStore'
+import { useChangePassword } from '@/composables/api/useAccount'
+import {
+  useMfaStatus,
+  useTrustedDevices,
+  useRevokeDevice,
+  useRevokeAllDevices,
+  useRegenerateBackupCodes,
+} from '@/composables/api/useMfa'
+import MfaTotpSetupDialog from '@/components/settings/MfaTotpSetupDialog.vue'
+import MfaEmailSetupDialog from '@/components/settings/MfaEmailSetupDialog.vue'
+import MfaDisableDialog from '@/components/settings/MfaDisableDialog.vue'
+
+const authStore = useAuthStore()
+
+// ─── Password Change ───
+const passwordForm = ref({
+  current_password: '',
+  password: '',
+  password_confirmation: '',
+})
+const passwordFieldErrors = ref<Record<string, string>>({})
+const passwordSuccess = ref('')
+const showCurrentPw = ref(false)
+const showNewPw = ref(false)
+const showConfirmPw = ref(false)
+
+const changePasswordMutation = useChangePassword()
+
+async function handlePasswordChange() {
+  passwordFieldErrors.value = {}
+  passwordSuccess.value = ''
+
+  changePasswordMutation.mutate(passwordForm.value, {
+    onSuccess: (data) => {
+      passwordSuccess.value = data.message
+      passwordForm.value = {
+        current_password: '',
+        password: '',
+        password_confirmation: '',
+      }
+    },
+    onError: (err: unknown) => {
+      const ax = err as { response?: { data?: { message?: string; errors?: Record<string, string[]> } } }
+      if (ax.response?.data?.errors) {
+        for (const [key, messages] of Object.entries(ax.response.data.errors)) {
+          passwordFieldErrors.value[key] = messages[0]
+        }
+      }
+    },
+  })
+}
+
+// ─── MFA ───
+const { data: mfaStatus, refetch: refetchMfaStatus } = useMfaStatus()
+const { data: trustedDevices, refetch: refetchDevices } = useTrustedDevices()
+const revokeDeviceMutation = useRevokeDevice()
+const revokeAllMutation = useRevokeAllDevices()
+const regenerateCodesMutation = useRegenerateBackupCodes()
+
+const showTotpSetup = ref(false)
+const showEmailSetup = ref(false)
+const showDisableDialog = ref(false)
+const showRegenerateDialog = ref(false)
+const regenerateCode = ref('')
+const regeneratedCodes = ref<string[]>([])
+const regenerateError = ref('')
+
+const isEnabled = computed(() => mfaStatus.value?.enabled ?? false)
+
+const totpConfigured = computed(() => isEnabled.value && mfaStatus.value?.method === 'totp')
+const emailConfigured = computed(() => isEnabled.value && mfaStatus.value?.method === 'email')
+
+const backupCodesRemaining = computed(() => mfaStatus.value?.backup_codes_remaining ?? 0)
+const backupCodesColor = computed(() => {
+  if (backupCodesRemaining.value > 5) return 'success'
+  if (backupCodesRemaining.value >= 3) return 'warning'
+  return 'error'
+})
+
+function onSetupCompleted() {
+  refetchMfaStatus()
+  // Immediately clear the MFA enforcement state so the banner disappears
+  // and the router guard no longer redirects
+  authStore.mfaSetupRequired = false
+}
+
+function onDisabled() {
+  refetchMfaStatus()
+  refetchDevices()
+}
+
+async function handleRevokeDevice(id: string) {
+  await revokeDeviceMutation.mutateAsync(id)
+  refetchDevices()
+}
+
+async function handleRevokeAllDevices() {
+  await revokeAllMutation.mutateAsync()
+  refetchDevices()
+}
+
+async function handleRegenerateBackupCodes() {
+  regenerateError.value = ''
+  try {
+    const data = await regenerateCodesMutation.mutateAsync({ code: regenerateCode.value })
+
+    regeneratedCodes.value = data.backup_codes
+    refetchMfaStatus()
+  }
+  catch (err: unknown) {
+    const ax = err as { response?: { data?: { message?: string } } }
+
+    regenerateError.value = ax.response?.data?.message ?? 'Kon codes niet genereren.'
+    regenerateCode.value = ''
+  }
+}
+
+function copyRegeneratedCodes() {
+  navigator.clipboard.writeText(regeneratedCodes.value.join('\n'))
+}
+</script>
+
+<template>
+  <!-- Enforcement notice -->
+  <VAlert
+    v-if="mfaStatus?.is_required && !isEnabled"
+    type="warning"
+    variant="tonal"
+    class="mb-6"
+  >
+    Je organisatie vereist tweestapsverificatie. Stel het nu in om het platform te kunnen gebruiken.
+  </VAlert>
+
+  <!-- Card 1: Wachtwoord wijzigen -->
+  <VCard class="mb-6">
+    <VCardItem>
+      <VCardTitle>Wachtwoord wijzigen</VCardTitle>
+    </VCardItem>
+    <VForm @submit.prevent="handlePasswordChange">
+      <VCardText class="pt-0">
+        <VAlert
+          v-if="passwordSuccess"
+          type="success"
+          variant="tonal"
+          density="compact"
+          class="mb-4"
+        >
+          {{ passwordSuccess }}
+        </VAlert>
+
+        <VRow>
+          <VCol
+            cols="12"
+            md="6"
+          >
+            <AppTextField
+              v-model="passwordForm.current_password"
+              label="Huidig wachtwoord"
+              :type="showCurrentPw ? 'text' : 'password'"
+              :append-inner-icon="showCurrentPw ? 'tabler-eye-off' : 'tabler-eye'"
+              :error-messages="passwordFieldErrors.current_password"
+              placeholder="············"
+              @click:append-inner="showCurrentPw = !showCurrentPw"
+            />
+          </VCol>
+          <VCol
+            cols="12"
+            md="6"
+          >
+            <AppTextField
+              v-model="passwordForm.password"
+              label="Nieuw wachtwoord"
+              :type="showNewPw ? 'text' : 'password'"
+              :append-inner-icon="showNewPw ? 'tabler-eye-off' : 'tabler-eye'"
+              :error-messages="passwordFieldErrors.password"
+              placeholder="············"
+              @click:append-inner="showNewPw = !showNewPw"
+            />
+          </VCol>
+          <VCol
+            cols="12"
+            md="6"
+          >
+            <AppTextField
+              v-model="passwordForm.password_confirmation"
+              label="Bevestig nieuw wachtwoord"
+              :type="showConfirmPw ? 'text' : 'password'"
+              :append-inner-icon="showConfirmPw ? 'tabler-eye-off' : 'tabler-eye'"
+              :error-messages="passwordFieldErrors.password_confirmation"
+              placeholder="············"
+              @click:append-inner="showConfirmPw = !showConfirmPw"
+            />
+          </VCol>
+        </VRow>
+      </VCardText>
+
+      <VCardText>
+        <h6 class="text-h6 text-medium-emphasis mb-4">
+          Wachtwoordvereisten:
+        </h6>
+        <VList class="card-list">
+          <VListItem>
+            <template #prepend>
+              <VIcon
+                size="10"
+                icon="tabler-circle-filled"
+              />
+            </template>
+            <span class="text-medium-emphasis">Minimaal 8 tekens</span>
+          </VListItem>
+          <VListItem>
+            <template #prepend>
+              <VIcon
+                size="10"
+                icon="tabler-circle-filled"
+              />
+            </template>
+            <span class="text-medium-emphasis">Minimaal 1 hoofdletter en 1 kleine letter</span>
+          </VListItem>
+          <VListItem>
+            <template #prepend>
+              <VIcon
+                size="10"
+                icon="tabler-circle-filled"
+              />
+            </template>
+            <span class="text-medium-emphasis">Minimaal 1 cijfer</span>
+          </VListItem>
+        </VList>
+      </VCardText>
+
+      <VCardText class="d-flex flex-wrap gap-4">
+        <VBtn
+          type="submit"
+          :loading="changePasswordMutation.isPending.value"
+        >
+          Wachtwoord wijzigen
+        </VBtn>
+        <VBtn
+          color="secondary"
+          variant="tonal"
+          type="reset"
+          @click="passwordForm = { current_password: '', password: '', password_confirmation: '' }; passwordSuccess = ''"
+        >
+          Annuleren
+        </VBtn>
+      </VCardText>
+    </VForm>
+  </VCard>
+
+  <!-- Card 2: Tweestapsverificatie -->
+  <VCard class="mb-6">
+    <VCardItem>
+      <VCardTitle>Tweestapsverificatie</VCardTitle>
+    </VCardItem>
+    <VCardText>
+      <!-- MFA method cards -->
+      <VRow class="mb-4">
+        <!-- TOTP card -->
+        <VCol
+          cols="12"
+          sm="6"
+        >
+          <VCard
+            variant="outlined"
+            class="pa-4 h-100"
+          >
+            <div class="d-flex align-center mb-3">
+              <VAvatar
+                color="primary"
+                variant="tonal"
+                size="40"
+                rounded
+                class="me-3"
+              >
+                <VIcon
+                  icon="tabler-device-mobile"
+                  size="24"
+                />
+              </VAvatar>
+              <div>
+                <h6 class="text-h6">
+                  Authenticator app
+                </h6>
+                <VChip
+                  :color="totpConfigured ? 'success' : 'default'"
+                  variant="tonal"
+                  size="small"
+                  class="mt-1"
+                >
+                  {{ totpConfigured ? 'Geconfigureerd' : 'Niet ingesteld' }}
+                </VChip>
+              </div>
+            </div>
+
+            <p
+              v-if="totpConfigured && mfaStatus?.method === 'totp'"
+              class="text-body-2 text-medium-emphasis mb-3"
+            >
+              Primaire methode
+            </p>
+            <p
+              v-else-if="!totpConfigured"
+              class="text-body-2 text-medium-emphasis mb-3"
+            >
+              Gebruik Google Authenticator, Authy of een andere app.
+            </p>
+
+            <VBtn
+              v-if="totpConfigured"
+              variant="tonal"
+              size="small"
+              @click="showTotpSetup = true"
+            >
+              Opnieuw instellen
+            </VBtn>
+            <VBtn
+              v-else
+              variant="tonal"
+              size="small"
+              @click="showTotpSetup = true"
+            >
+              Instellen
+            </VBtn>
+          </VCard>
+        </VCol>
+
+        <!-- Email card -->
+        <VCol
+          cols="12"
+          sm="6"
+        >
+          <VCard
+            variant="outlined"
+            class="pa-4 h-100"
+          >
+            <div class="d-flex align-center mb-3">
+              <VAvatar
+                color="primary"
+                variant="tonal"
+                size="40"
+                rounded
+                class="me-3"
+              >
+                <VIcon
+                  icon="tabler-mail"
+                  size="24"
+                />
+              </VAvatar>
+              <div>
+                <h6 class="text-h6">
+                  E-mailcode
+                </h6>
+                <VChip
+                  :color="emailConfigured ? 'success' : 'default'"
+                  variant="tonal"
+                  size="small"
+                  class="mt-1"
+                >
+                  {{ emailConfigured ? 'Geconfigureerd' : 'Niet ingesteld' }}
+                </VChip>
+              </div>
+            </div>
+
+            <p
+              v-if="emailConfigured && mfaStatus?.method === 'email'"
+              class="text-body-2 text-medium-emphasis mb-3"
+            >
+              Primaire methode
+            </p>
+            <p
+              v-else-if="!emailConfigured"
+              class="text-body-2 text-medium-emphasis mb-3"
+            >
+              Ontvang een code per e-mail bij elke login.
+            </p>
+
+            <VBtn
+              v-if="emailConfigured"
+              variant="tonal"
+              size="small"
+              @click="showEmailSetup = true"
+            >
+              Opnieuw instellen
+            </VBtn>
+            <VBtn
+              v-else
+              variant="tonal"
+              size="small"
+              @click="showEmailSetup = true"
+            >
+              Instellen
+            </VBtn>
+          </VCard>
+        </VCol>
+      </VRow>
+
+      <!-- Backup codes status -->
+      <template v-if="isEnabled">
+        <VDivider class="mb-4" />
+
+        <div class="d-flex align-center justify-space-between mb-2">
+          <div>
+            <span class="text-body-1 font-weight-medium">Backup codes</span>
+            <p class="text-body-2 text-medium-emphasis mb-0">
+              {{ backupCodesRemaining }} van 10 resterend
+            </p>
+          </div>
+          <VBtn
+            variant="tonal"
+            size="small"
+            @click="showRegenerateDialog = true; regeneratedCodes = []; regenerateCode = ''; regenerateError = ''"
+          >
+            Nieuwe codes genereren
+          </VBtn>
+        </div>
+
+        <VProgressLinear
+          :model-value="backupCodesRemaining * 10"
+          :color="backupCodesColor"
+          rounded
+          height="6"
+          class="mb-2"
+        />
+      </template>
+    </VCardText>
+  </VCard>
+
+  <!-- Card 2b: MFA disable (danger zone) -->
+  <VCard
+    v-if="isEnabled"
+    class="mb-6 border-error"
+    variant="outlined"
+  >
+    <VCardText class="d-flex align-center justify-space-between">
+      <div>
+        <h6 class="text-h6 text-error mb-1">
+          Tweestapsverificatie uitschakelen
+        </h6>
+        <p class="text-body-2 text-medium-emphasis mb-0">
+          Dit vermindert de beveiliging van je account.
+        </p>
+      </div>
+      <VBtn
+        color="error"
+        variant="tonal"
+        @click="showDisableDialog = true"
+      >
+        Uitschakelen
+      </VBtn>
+    </VCardText>
+  </VCard>
+
+  <!-- Card 3: Vertrouwde apparaten -->
+  <VCard
+    v-if="isEnabled"
+    class="mb-6"
+  >
+    <VCardItem>
+      <template #default>
+        <VCardTitle>Vertrouwde apparaten</VCardTitle>
+      </template>
+      <template #append>
+        <VBtn
+          v-if="trustedDevices && trustedDevices.length > 1"
+          variant="tonal"
+          size="small"
+          color="error"
+          :loading="revokeAllMutation.isPending.value"
+          @click="handleRevokeAllDevices"
+        >
+          Alles intrekken
+        </VBtn>
+      </template>
+    </VCardItem>
+    <VCardText>
+      <template v-if="trustedDevices && trustedDevices.length > 0">
+        <VList>
+          <VListItem
+            v-for="device in trustedDevices"
+            :key="device.id"
+            class="px-0"
+          >
+            <template #prepend>
+              <VIcon
+                icon="tabler-device-desktop"
+                size="24"
+                class="me-3"
+              />
+            </template>
+            <VListItemTitle>{{ device.device_name ?? 'Onbekend apparaat' }}</VListItemTitle>
+            <VListItemSubtitle>
+              IP: {{ device.ip_address }}
+              <span v-if="device.last_used_at">
+                &middot; Laatst gebruikt: {{ new Date(device.last_used_at).toLocaleDateString('nl-NL') }}
+              </span>
+            </VListItemSubtitle>
+
+            <template #append>
+              <VBtn
+                variant="text"
+                size="small"
+                color="error"
+                icon="tabler-trash"
+                :loading="revokeDeviceMutation.isPending.value"
+                @click="handleRevokeDevice(device.id)"
+              />
+            </template>
+          </VListItem>
+        </VList>
+      </template>
+
+      <p
+        v-else
+        class="text-body-2 text-medium-emphasis"
+      >
+        Geen vertrouwde apparaten. Wanneer je inlogt met MFA kun je ervoor kiezen een apparaat te onthouden.
+      </p>
+    </VCardText>
+  </VCard>
+
+  <!-- Setup dialogs -->
+  <MfaTotpSetupDialog
+    v-model="showTotpSetup"
+    @completed="onSetupCompleted"
+  />
+
+  <MfaEmailSetupDialog
+    v-model="showEmailSetup"
+    :user-email="authStore.user?.email ?? ''"
+    @completed="onSetupCompleted"
+  />
+
+  <MfaDisableDialog
+    v-model="showDisableDialog"
+    :current-method="mfaStatus?.method ?? null"
+    @disabled="onDisabled"
+  />
+
+  <!-- Regenerate backup codes dialog -->
+  <VDialog
+    v-model="showRegenerateDialog"
+    max-width="460"
+  >
+    <VCard>
+      <VCardTitle class="pt-4">
+        Nieuwe backup codes genereren
+      </VCardTitle>
+
+      <VCardText v-if="regeneratedCodes.length === 0">
+        <VAlert
+          type="info"
+          variant="tonal"
+          class="mb-4"
+        >
+          Dit vervangt al je huidige backup codes. Oude codes werken niet meer.
+        </VAlert>
+
+        <VAlert
+          v-if="regenerateError"
+          type="error"
+          variant="tonal"
+          class="mb-4"
+          density="comfortable"
+        >
+          {{ regenerateError }}
+        </VAlert>
+
+        <p class="text-body-2 mb-2">
+          Voer je authenticator code in ter bevestiging
+        </p>
+        <AppTextField
+          v-model="regenerateCode"
+          placeholder="123456"
+          autofocus
+        />
+      </VCardText>
+
+      <VCardText v-else>
+        <VAlert
+          type="success"
+          variant="tonal"
+          class="mb-4"
+        >
+          Nieuwe backup codes gegenereerd. Bewaar ze veilig.
+        </VAlert>
+
+        <div class="d-flex flex-wrap gap-2 mb-4">
+          <VChip
+            v-for="code in regeneratedCodes"
+            :key="code"
+            variant="tonal"
+            label
+            class="font-weight-bold"
+            style="font-family: monospace;"
+          >
+            {{ code }}
+          </VChip>
+        </div>
+
+        <VBtn
+          variant="tonal"
+          size="small"
+          prepend-icon="tabler-copy"
+          @click="copyRegeneratedCodes"
+        >
+          Kopieer
+        </VBtn>
+      </VCardText>
+
+      <VCardActions>
+        <VSpacer />
+        <VBtn
+          variant="tonal"
+          @click="showRegenerateDialog = false"
+        >
+          {{ regeneratedCodes.length > 0 ? 'Sluiten' : 'Annuleren' }}
+        </VBtn>
+        <VBtn
+          v-if="regeneratedCodes.length === 0"
+          color="primary"
+          :loading="regenerateCodesMutation.isPending.value"
+          :disabled="!regenerateCode"
+          @click="handleRegenerateBackupCodes"
+        >
+          Genereren
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>
+
+<style lang="scss">
+.card-list {
+  --v-card-list-gap: 8px;
+}
+</style>
diff --git a/apps/app/src/composables/api/useAccount.ts b/apps/app/src/composables/api/useAccount.ts
index c8096788..75cbd3f2 100644
--- a/apps/app/src/composables/api/useAccount.ts
+++ b/apps/app/src/composables/api/useAccount.ts
@@ -1,4 +1,4 @@
-import { useMutation } from '@tanstack/vue-query'
+import { useMutation, useQueryClient } from '@tanstack/vue-query'
 import type { Ref } from 'vue'
 import { apiClient } from '@/lib/axios'
 
@@ -8,6 +8,15 @@ interface ApiResponse<T> {
   message: string
 }
 
+export interface UpdateProfilePayload {
+  first_name: string
+  last_name: string
+  phone?: string | null
+  date_of_birth?: string | null
+  timezone: string
+  locale: string
+}
+
 export interface ChangePasswordPayload {
   current_password: string
   password: string
@@ -24,6 +33,23 @@ export interface AdminChangeEmailPayload {
   new_email: string
 }
 
+export function useUpdateProfile() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (payload: UpdateProfilePayload) => {
+      const { data } = await apiClient.put<ApiResponse<null>>(
+        '/me/profile',
+        payload,
+      )
+      return data
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['auth', 'me'] })
+    },
+  })
+}
+
 export function useChangePassword() {
   return useMutation({
     mutationFn: async (payload: ChangePasswordPayload) => {
diff --git a/apps/app/src/layouts/components/UserProfile.vue b/apps/app/src/layouts/components/UserProfile.vue
index 2d53703e..c818ca3c 100644
--- a/apps/app/src/layouts/components/UserProfile.vue
+++ b/apps/app/src/layouts/components/UserProfile.vue
@@ -76,18 +76,18 @@ function handleLogout() {
 
         <VDivider class="my-2" />
 
-        <VListItem :to="{ name: 'account-settings' }">
+        <VListItem :to="{ name: 'account-settings', query: { tab: 'account' } }">
           <template #prepend>
             <VIcon
               class="me-2"
-              icon="tabler-settings"
+              icon="tabler-user"
               size="22"
             />
           </template>
-          <VListItemTitle>Accountinstellingen</VListItemTitle>
+          <VListItemTitle>Mijn profiel</VListItemTitle>
         </VListItem>
 
-        <VListItem :to="{ name: 'account-settings-security' }">
+        <VListItem :to="{ name: 'account-settings', query: { tab: 'security' } }">
           <template #prepend>
             <VIcon
               class="me-2"
diff --git a/apps/app/src/pages/account-settings/index.vue b/apps/app/src/pages/account-settings/index.vue
index 4122efa5..958ba25e 100644
--- a/apps/app/src/pages/account-settings/index.vue
+++ b/apps/app/src/pages/account-settings/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { useAuthStore } from '@/stores/useAuthStore'
-import { useChangePassword, useChangeEmail } from '@/composables/api/useAccount'
+import AccountTab from '@/components/account-settings/AccountTab.vue'
+import SecurityTab from '@/components/account-settings/SecurityTab.vue'
+import NotificationsTab from '@/components/account-settings/NotificationsTab.vue'
 
 definePage({
   meta: {
@@ -8,214 +9,60 @@ definePage({
   },
 })
 
-const authStore = useAuthStore()
+const route = useRoute()
+const router = useRouter()
 
-// Password change
-const passwordForm = ref({
-  current_password: '',
-  password: '',
-  password_confirmation: '',
+const tabs = [
+  { title: 'Account', icon: 'tabler-user', value: 'account' },
+  { title: 'Beveiliging', icon: 'tabler-shield-lock', value: 'security' },
+  { title: 'Meldingen', icon: 'tabler-bell', value: 'notifications' },
+]
+
+const activeTab = computed({
+  get: () => {
+    const tab = route.query.tab as string | undefined
+    return tabs.some(t => t.value === tab) ? tab! : 'account'
+  },
+  set: (val: string) => {
+    router.replace({ query: { ...route.query, tab: val } })
+  },
 })
-const passwordFieldErrors = ref<Record<string, string>>({})
-const passwordSuccess = ref('')
-const showCurrentPw = ref(false)
-const showNewPw = ref(false)
-const showConfirmPw = ref(false)
-
-const changePasswordMutation = useChangePassword()
-
-async function handlePasswordChange() {
-  passwordFieldErrors.value = {}
-  passwordSuccess.value = ''
-
-  changePasswordMutation.mutate(passwordForm.value, {
-    onSuccess: (data) => {
-      passwordSuccess.value = data.message
-      passwordForm.value = {
-        current_password: '',
-        password: '',
-        password_confirmation: '',
-      }
-    },
-    onError: (err: unknown) => {
-      const ax = err as { response?: { data?: { message?: string; errors?: Record<string, string[]> } } }
-      if (ax.response?.data?.errors) {
-        for (const [key, messages] of Object.entries(ax.response.data.errors)) {
-          passwordFieldErrors.value[key] = messages[0]
-        }
-      }
-    },
-  })
-}
-
-// Email change
-const emailForm = ref({
-  new_email: '',
-  password: '',
-})
-const emailFieldErrors = ref<Record<string, string>>({})
-const emailSuccess = ref('')
-const showEmailPw = ref(false)
-
-const changeEmailMutation = useChangeEmail()
-
-async function handleEmailChange() {
-  emailFieldErrors.value = {}
-  emailSuccess.value = ''
-
-  changeEmailMutation.mutate(
-    { ...emailForm.value, app: 'app' },
-    {
-      onSuccess: (data) => {
-        emailSuccess.value = data.message
-        emailForm.value = { new_email: '', password: '' }
-      },
-      onError: (err: unknown) => {
-        const ax = err as { response?: { data?: { message?: string; errors?: Record<string, string[]> } } }
-        if (ax.response?.data?.errors) {
-          for (const [key, messages] of Object.entries(ax.response.data.errors)) {
-            emailFieldErrors.value[key] = messages[0]
-          }
-        }
-      },
-    },
-  )
-}
 </script>
 
 <template>
-  <VRow justify="center">
-    <VCol
-      cols="12"
-      md="8"
-      lg="6"
+  <div>
+    <VTabs
+      v-model="activeTab"
+      class="v-tabs-pill mb-6"
     >
-      <h4 class="text-h4 mb-6">
-        Accountinstellingen
-      </h4>
+      <VTab
+        v-for="tab in tabs"
+        :key="tab.value"
+        :value="tab.value"
+      >
+        <VIcon
+          :icon="tab.icon"
+          size="20"
+          class="me-2"
+        />
+        {{ tab.title }}
+      </VTab>
+    </VTabs>
 
-      <!-- Email change -->
-      <VCard class="mb-6">
-        <VCardTitle>E-mailadres wijzigen</VCardTitle>
-        <VCardText>
-          <p class="text-body-2 text-medium-emphasis mb-4">
-            Huidig e-mailadres: <strong>{{ authStore.user?.email }}</strong>
-          </p>
-
-          <VForm @submit.prevent="handleEmailChange">
-            <VRow>
-              <VCol cols="12">
-                <AppTextField
-                  v-model="emailForm.new_email"
-                  label="Nieuw e-mailadres"
-                  type="email"
-                  :error-messages="emailFieldErrors.new_email"
-                />
-              </VCol>
-              <VCol cols="12">
-                <AppTextField
-                  v-model="emailForm.password"
-                  label="Huidig wachtwoord"
-                  :type="showEmailPw ? 'text' : 'password'"
-                  :append-inner-icon="showEmailPw ? 'tabler-eye-off' : 'tabler-eye'"
-                  :error-messages="emailFieldErrors.password"
-                  hint="Ter bevestiging van je identiteit"
-                  persistent-hint
-                  @click:append-inner="showEmailPw = !showEmailPw"
-                />
-              </VCol>
-            </VRow>
-
-            <div class="d-flex justify-end mt-4">
-              <VBtn
-                type="submit"
-                color="primary"
-                :loading="changeEmailMutation.isPending.value"
-                :disabled="!emailForm.new_email || !emailForm.password"
-              >
-                Verificatiemail versturen
-              </VBtn>
-            </div>
-          </VForm>
-
-          <VAlert
-            v-if="emailSuccess"
-            type="success"
-            variant="tonal"
-            density="compact"
-            class="mt-4"
-          >
-            {{ emailSuccess }}
-          </VAlert>
-        </VCardText>
-      </VCard>
-
-      <!-- Password change -->
-      <VCard>
-        <VCardTitle>Wachtwoord wijzigen</VCardTitle>
-        <VCardText>
-          <VForm @submit.prevent="handlePasswordChange">
-            <VRow>
-              <VCol cols="12">
-                <AppTextField
-                  v-model="passwordForm.current_password"
-                  label="Huidig wachtwoord"
-                  :type="showCurrentPw ? 'text' : 'password'"
-                  :append-inner-icon="showCurrentPw ? 'tabler-eye-off' : 'tabler-eye'"
-                  :error-messages="passwordFieldErrors.current_password"
-                  @click:append-inner="showCurrentPw = !showCurrentPw"
-                />
-              </VCol>
-              <VCol
-                cols="12"
-                sm="6"
-              >
-                <AppTextField
-                  v-model="passwordForm.password"
-                  label="Nieuw wachtwoord"
-                  :type="showNewPw ? 'text' : 'password'"
-                  :append-inner-icon="showNewPw ? 'tabler-eye-off' : 'tabler-eye'"
-                  :error-messages="passwordFieldErrors.password"
-                  @click:append-inner="showNewPw = !showNewPw"
-                />
-              </VCol>
-              <VCol
-                cols="12"
-                sm="6"
-              >
-                <AppTextField
-                  v-model="passwordForm.password_confirmation"
-                  label="Bevestig nieuw wachtwoord"
-                  :type="showConfirmPw ? 'text' : 'password'"
-                  :append-inner-icon="showConfirmPw ? 'tabler-eye-off' : 'tabler-eye'"
-                  :error-messages="passwordFieldErrors.password_confirmation"
-                  @click:append-inner="showConfirmPw = !showConfirmPw"
-                />
-              </VCol>
-            </VRow>
-
-            <div class="d-flex justify-end mt-4">
-              <VBtn
-                type="submit"
-                color="primary"
-                :loading="changePasswordMutation.isPending.value"
-              >
-                Wachtwoord wijzigen
-              </VBtn>
-            </div>
-          </VForm>
-
-          <VAlert
-            v-if="passwordSuccess"
-            type="success"
-            variant="tonal"
-            density="compact"
-            class="mt-4"
-          >
-            {{ passwordSuccess }}
-          </VAlert>
-        </VCardText>
-      </VCard>
-    </VCol>
-  </VRow>
+    <VWindow
+      v-model="activeTab"
+      class="disable-tab-transition"
+      :touch="false"
+    >
+      <VWindowItem value="account">
+        <AccountTab />
+      </VWindowItem>
+      <VWindowItem value="security">
+        <SecurityTab />
+      </VWindowItem>
+      <VWindowItem value="notifications">
+        <NotificationsTab />
+      </VWindowItem>
+    </VWindow>
+  </div>
 </template>
diff --git a/apps/app/src/pages/account-settings/security.vue b/apps/app/src/pages/account-settings/security.vue
deleted file mode 100644
index 4c86e8f5..00000000
--- a/apps/app/src/pages/account-settings/security.vue
+++ /dev/null
@@ -1,398 +0,0 @@
-<script setup lang="ts">
-import { useAuthStore } from '@/stores/useAuthStore'
-import {
-  useMfaStatus,
-  useTrustedDevices,
-  useRevokeDevice,
-  useRevokeAllDevices,
-  useRegenerateBackupCodes,
-} from '@/composables/api/useMfa'
-import MfaTotpSetupDialog from '@/components/settings/MfaTotpSetupDialog.vue'
-import MfaEmailSetupDialog from '@/components/settings/MfaEmailSetupDialog.vue'
-import MfaDisableDialog from '@/components/settings/MfaDisableDialog.vue'
-
-definePage({
-  meta: {
-    navActiveLink: 'account-settings',
-  },
-})
-
-const authStore = useAuthStore()
-
-const { data: mfaStatus, refetch: refetchMfaStatus } = useMfaStatus()
-const { data: trustedDevices, refetch: refetchDevices } = useTrustedDevices()
-const revokeDeviceMutation = useRevokeDevice()
-const revokeAllMutation = useRevokeAllDevices()
-const regenerateCodesMutation = useRegenerateBackupCodes()
-
-const showTotpSetup = ref(false)
-const showEmailSetup = ref(false)
-const showDisableDialog = ref(false)
-const showRegenerateDialog = ref(false)
-const regenerateCode = ref('')
-const regeneratedCodes = ref<string[]>([])
-const regenerateError = ref('')
-
-const isEnabled = computed(() => mfaStatus.value?.enabled ?? false)
-const methodLabel = computed(() => {
-  if (mfaStatus.value?.method === 'totp') return 'Authenticator app'
-  if (mfaStatus.value?.method === 'email') return 'E-mailcode'
-
-  return null
-})
-
-function onSetupCompleted() {
-  refetchMfaStatus()
-}
-
-function onDisabled() {
-  refetchMfaStatus()
-  refetchDevices()
-}
-
-async function handleRevokeDevice(id: string) {
-  await revokeDeviceMutation.mutateAsync(id)
-  refetchDevices()
-}
-
-async function handleRevokeAllDevices() {
-  await revokeAllMutation.mutateAsync()
-  refetchDevices()
-}
-
-async function handleRegenerateBackupCodes() {
-  regenerateError.value = ''
-  try {
-    const data = await regenerateCodesMutation.mutateAsync({ code: regenerateCode.value })
-
-    regeneratedCodes.value = data.backup_codes
-    refetchMfaStatus()
-  }
-  catch (err: unknown) {
-    const ax = err as { response?: { data?: { message?: string } } }
-
-    regenerateError.value = ax.response?.data?.message ?? 'Kon codes niet genereren.'
-    regenerateCode.value = ''
-  }
-}
-
-function copyRegeneratedCodes() {
-  navigator.clipboard.writeText(regeneratedCodes.value.join('\n'))
-}
-</script>
-
-<template>
-  <VRow justify="center">
-    <VCol
-      cols="12"
-      md="8"
-      lg="6"
-    >
-      <h4 class="text-h4 mb-6">
-        Beveiliging
-      </h4>
-
-      <!-- Enforcement notice -->
-      <VAlert
-        v-if="mfaStatus?.is_required && !isEnabled"
-        type="warning"
-        variant="tonal"
-        class="mb-6"
-      >
-        Je organisatie vereist tweestapsverificatie. Stel het nu in om het platform te kunnen gebruiken.
-      </VAlert>
-
-      <!-- Section 1: Tweestapsverificatie -->
-      <VCard class="mb-6">
-        <VCardTitle class="d-flex align-center">
-          <VIcon
-            icon="tabler-shield-lock"
-            class="me-2"
-          />
-          Tweestapsverificatie
-        </VCardTitle>
-        <VCardText>
-          <!-- MFA NOT enabled -->
-          <template v-if="!isEnabled">
-            <p class="text-body-1 mb-4">
-              Bescherm je account met een extra beveiligingslaag. Kies een methode:
-            </p>
-
-            <VRow>
-              <VCol
-                cols="12"
-                sm="6"
-              >
-                <VCard
-                  variant="outlined"
-                  class="cursor-pointer pa-4"
-                  @click="showTotpSetup = true"
-                >
-                  <div class="d-flex align-center mb-2">
-                    <VIcon
-                      icon="tabler-device-mobile"
-                      size="28"
-                      color="primary"
-                      class="me-2"
-                    />
-                    <span class="text-subtitle-1 font-weight-medium">Authenticator app</span>
-                  </div>
-                  <p class="text-body-2 text-medium-emphasis mb-0">
-                    Aanbevolen. Gebruik Google Authenticator, Authy of een andere app.
-                  </p>
-                </VCard>
-              </VCol>
-              <VCol
-                cols="12"
-                sm="6"
-              >
-                <VCard
-                  variant="outlined"
-                  class="cursor-pointer pa-4"
-                  @click="showEmailSetup = true"
-                >
-                  <div class="d-flex align-center mb-2">
-                    <VIcon
-                      icon="tabler-mail"
-                      size="28"
-                      color="primary"
-                      class="me-2"
-                    />
-                    <span class="text-subtitle-1 font-weight-medium">E-mailcode</span>
-                  </div>
-                  <p class="text-body-2 text-medium-emphasis mb-0">
-                    Ontvang een code per e-mail bij elke login.
-                  </p>
-                </VCard>
-              </VCol>
-            </VRow>
-          </template>
-
-          <!-- MFA IS enabled -->
-          <template v-else>
-            <div class="d-flex align-center justify-space-between mb-4">
-              <div>
-                <VChip
-                  color="success"
-                  variant="tonal"
-                  size="small"
-                  class="me-2"
-                >
-                  Ingeschakeld
-                </VChip>
-                <span class="text-body-1">via {{ methodLabel }}</span>
-              </div>
-            </div>
-
-            <!-- Backup codes -->
-            <div class="d-flex align-center justify-space-between mb-3 pa-3 rounded" style="background: rgb(var(--v-theme-surface-variant));">
-              <div>
-                <span class="text-body-1 font-weight-medium">Backup codes</span>
-                <br>
-                <span class="text-body-2 text-medium-emphasis">
-                  {{ mfaStatus?.backup_codes_remaining ?? 0 }} van 10 resterend
-                </span>
-              </div>
-              <VBtn
-                variant="tonal"
-                size="small"
-                @click="showRegenerateDialog = true; regeneratedCodes = []; regenerateCode = ''; regenerateError = ''"
-              >
-                Nieuwe codes genereren
-              </VBtn>
-            </div>
-
-            <VBtn
-              color="error"
-              variant="tonal"
-              class="mt-2"
-              @click="showDisableDialog = true"
-            >
-              Uitschakelen
-            </VBtn>
-          </template>
-        </VCardText>
-      </VCard>
-
-      <!-- Section 2: Vertrouwde apparaten -->
-      <VCard
-        v-if="isEnabled"
-        class="mb-6"
-      >
-        <VCardTitle class="d-flex align-center justify-space-between">
-          <div class="d-flex align-center">
-            <VIcon
-              icon="tabler-devices"
-              class="me-2"
-            />
-            Vertrouwde apparaten
-          </div>
-          <VBtn
-            v-if="trustedDevices && trustedDevices.length > 1"
-            variant="tonal"
-            size="small"
-            color="error"
-            :loading="revokeAllMutation.isPending.value"
-            @click="handleRevokeAllDevices"
-          >
-            Alles intrekken
-          </VBtn>
-        </VCardTitle>
-        <VCardText>
-          <template v-if="trustedDevices && trustedDevices.length > 0">
-            <VList>
-              <VListItem
-                v-for="device in trustedDevices"
-                :key="device.id"
-                class="px-0"
-              >
-                <template #prepend>
-                  <VIcon
-                    icon="tabler-device-desktop"
-                    size="24"
-                    class="me-3"
-                  />
-                </template>
-                <VListItemTitle>{{ device.device_name ?? 'Onbekend apparaat' }}</VListItemTitle>
-                <VListItemSubtitle>
-                  IP: {{ device.ip_address }}
-                  <span v-if="device.last_used_at">
-                    &middot; Laatst gebruikt: {{ new Date(device.last_used_at).toLocaleDateString('nl-NL') }}
-                  </span>
-                </VListItemSubtitle>
-
-                <template #append>
-                  <VBtn
-                    variant="text"
-                    size="small"
-                    color="error"
-                    icon="tabler-trash"
-                    :loading="revokeDeviceMutation.isPending.value"
-                    @click="handleRevokeDevice(device.id)"
-                  />
-                </template>
-              </VListItem>
-            </VList>
-          </template>
-
-          <p
-            v-else
-            class="text-body-2 text-medium-emphasis"
-          >
-            Geen vertrouwde apparaten. Wanneer je inlogt met MFA kun je ervoor kiezen een apparaat te onthouden.
-          </p>
-        </VCardText>
-      </VCard>
-
-      <!-- Setup dialogs -->
-      <MfaTotpSetupDialog
-        v-model="showTotpSetup"
-        @completed="onSetupCompleted"
-      />
-
-      <MfaEmailSetupDialog
-        v-model="showEmailSetup"
-        :user-email="authStore.user?.email ?? ''"
-        @completed="onSetupCompleted"
-      />
-
-      <MfaDisableDialog
-        v-model="showDisableDialog"
-        :current-method="mfaStatus?.method ?? null"
-        @disabled="onDisabled"
-      />
-
-      <!-- Regenerate backup codes dialog -->
-      <VDialog
-        v-model="showRegenerateDialog"
-        max-width="460"
-      >
-        <VCard>
-          <VCardTitle class="pt-4">
-            Nieuwe backup codes genereren
-          </VCardTitle>
-
-          <VCardText v-if="regeneratedCodes.length === 0">
-            <VAlert
-              type="info"
-              variant="tonal"
-              class="mb-4"
-            >
-              Dit vervangt al je huidige backup codes. Oude codes werken niet meer.
-            </VAlert>
-
-            <VAlert
-              v-if="regenerateError"
-              type="error"
-              variant="tonal"
-              class="mb-4"
-              density="comfortable"
-            >
-              {{ regenerateError }}
-            </VAlert>
-
-            <p class="text-body-2 mb-2">
-              Voer je authenticator code in ter bevestiging
-            </p>
-            <AppTextField
-              v-model="regenerateCode"
-              placeholder="123456"
-              autofocus
-            />
-          </VCardText>
-
-          <VCardText v-else>
-            <VAlert
-              type="success"
-              variant="tonal"
-              class="mb-4"
-            >
-              Nieuwe backup codes gegenereerd. Bewaar ze veilig.
-            </VAlert>
-
-            <div class="d-flex flex-wrap gap-2 mb-4">
-              <VChip
-                v-for="code in regeneratedCodes"
-                :key="code"
-                variant="tonal"
-                label
-                class="font-weight-bold"
-                style="font-family: monospace;"
-              >
-                {{ code }}
-              </VChip>
-            </div>
-
-            <VBtn
-              variant="tonal"
-              size="small"
-              prepend-icon="tabler-copy"
-              @click="copyRegeneratedCodes"
-            >
-              Kopieer
-            </VBtn>
-          </VCardText>
-
-          <VCardActions>
-            <VSpacer />
-            <VBtn
-              variant="tonal"
-              @click="showRegenerateDialog = false"
-            >
-              {{ regeneratedCodes.length > 0 ? 'Sluiten' : 'Annuleren' }}
-            </VBtn>
-            <VBtn
-              v-if="regeneratedCodes.length === 0"
-              color="primary"
-              :loading="regenerateCodesMutation.isPending.value"
-              :disabled="!regenerateCode"
-              @click="handleRegenerateBackupCodes"
-            >
-              Genereren
-            </VBtn>
-          </VCardActions>
-        </VCard>
-      </VDialog>
-    </VCol>
-  </VRow>
-</template>
diff --git a/apps/app/src/pages/login.vue b/apps/app/src/pages/login.vue
index 1bf8f410..92a075f6 100644
--- a/apps/app/src/pages/login.vue
+++ b/apps/app/src/pages/login.vue
@@ -84,7 +84,7 @@ async function handleLogin() {
     authStore.setUser(data.data.user)
 
     if (data.mfa_setup_required) {
-      router.replace('/account-settings/security')
+      router.replace('/account-settings?tab=security')
 
       return
     }
diff --git a/apps/app/src/plugins/1.router/guards.ts b/apps/app/src/plugins/1.router/guards.ts
index c61f62c4..d8c8929b 100644
--- a/apps/app/src/plugins/1.router/guards.ts
+++ b/apps/app/src/plugins/1.router/guards.ts
@@ -45,9 +45,9 @@ export function setupGuards(router: Router) {
     }
 
     // MFA enforcement — redirect to security settings if MFA setup is required
-    if (authStore.mfaSetupRequired && to.path !== '/account-settings/security') {
+    if (authStore.mfaSetupRequired && to.path !== '/account-settings') {
       if (import.meta.env.DEV) console.log('🔒 MFA setup required, redirecting to security settings')
-      return { path: '/account-settings/security' }
+      return { path: '/account-settings', query: { tab: 'security' } }
     }
 
     // Platform admin routes — require super_admin role
diff --git a/apps/app/src/stores/useAuthStore.ts b/apps/app/src/stores/useAuthStore.ts
index f7ef2c14..e838b3d7 100644
--- a/apps/app/src/stores/useAuthStore.ts
+++ b/apps/app/src/stores/useAuthStore.ts
@@ -29,7 +29,9 @@ export const useAuthStore = defineStore('auth', () => {
       first_name: me.first_name,
       last_name: me.last_name,
       full_name: me.full_name,
+      date_of_birth: me.date_of_birth,
       email: me.email,
+      phone: me.phone,
       timezone: me.timezone,
       locale: me.locale,
       avatar: me.avatar,
diff --git a/apps/app/src/types/auth.ts b/apps/app/src/types/auth.ts
index a7a8305f..4fd5f9a2 100644
--- a/apps/app/src/types/auth.ts
+++ b/apps/app/src/types/auth.ts
@@ -3,7 +3,9 @@ export interface User {
   first_name: string
   last_name: string
   full_name: string
+  date_of_birth: string | null
   email: string
+  phone: string | null
   timezone: string
   locale: string
   avatar: string | null
@@ -28,7 +30,9 @@ export interface MeResponse {
   first_name: string
   last_name: string
   full_name: string
+  date_of_birth: string | null
   email: string
+  phone: string | null
   timezone: string
   locale: string
   avatar: string | null
diff --git a/apps/app/src/types/member.ts b/apps/app/src/types/member.ts
index ed6bf48b..c3862db6 100644
--- a/apps/app/src/types/member.ts
+++ b/apps/app/src/types/member.ts
@@ -78,7 +78,9 @@ export interface AcceptInvitationResponse {
       first_name: string
       last_name: string
       full_name: string
+      date_of_birth: string | null
       email: string
+      phone: string | null
       timezone: string
       locale: string
       avatar: string | null
diff --git a/apps/app/typed-router.d.ts b/apps/app/typed-router.d.ts
index fc772e45..166ffce4 100644
--- a/apps/app/typed-router.d.ts
+++ b/apps/app/typed-router.d.ts
@@ -21,7 +21,6 @@ declare module 'vue-router/auto-routes' {
     'root': RouteRecordInfo<'root', '/', Record<never, never>, Record<never, never>>,
     '$error': RouteRecordInfo<'$error', '/:error(.*)', { error: ParamValue<true> }, { error: ParamValue<false> }>,
     'account-settings': RouteRecordInfo<'account-settings', '/account-settings', Record<never, never>, Record<never, never>>,
-    'account-settings-security': RouteRecordInfo<'account-settings-security', '/account-settings/security', Record<never, never>, Record<never, never>>,
     'dashboard': RouteRecordInfo<'dashboard', '/dashboard', Record<never, never>, Record<never, never>>,
     'events': RouteRecordInfo<'events', '/events', Record<never, never>, Record<never, never>>,
     'events-id': RouteRecordInfo<'events-id', '/events/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
diff --git a/apps/portal/auto-imports.d.ts b/apps/portal/auto-imports.d.ts
index cf763eef..1a13a337 100644
--- a/apps/portal/auto-imports.d.ts
+++ b/apps/portal/auto-imports.d.ts
@@ -52,9 +52,11 @@ declare global {
   const extendRef: typeof import('@vueuse/core')['extendRef']
   const formatDate: typeof import('./src/@core/utils/formatters')['formatDate']
   const formatDateToMonthShort: typeof import('./src/@core/utils/formatters')['formatDateToMonthShort']
+  const generateDeviceFingerprint: typeof import('./src/utils/deviceFingerprint')['generateDeviceFingerprint']
   const getActivePinia: typeof import('pinia')['getActivePinia']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const getDeviceName: typeof import('./src/utils/deviceFingerprint')['getDeviceName']
   const h: typeof import('vue')['h']
   const hexToRgb: typeof import('./src/@core/utils/colorConverter')['hexToRgb']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
@@ -417,9 +419,11 @@ declare module 'vue' {
     readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
     readonly formatDate: UnwrapRef<typeof import('./src/@core/utils/formatters')['formatDate']>
     readonly formatDateToMonthShort: UnwrapRef<typeof import('./src/@core/utils/formatters')['formatDateToMonthShort']>
+    readonly generateDeviceFingerprint: UnwrapRef<typeof import('./src/utils/deviceFingerprint')['generateDeviceFingerprint']>
     readonly getActivePinia: UnwrapRef<typeof import('pinia')['getActivePinia']>
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
+    readonly getDeviceName: UnwrapRef<typeof import('./src/utils/deviceFingerprint')['getDeviceName']>
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly hexToRgb: UnwrapRef<typeof import('./src/@core/utils/colorConverter')['hexToRgb']>
     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
diff --git a/apps/portal/src/pages/profiel.vue b/apps/portal/src/pages/profiel.vue
index ba43c475..4e0530b7 100644
--- a/apps/portal/src/pages/profiel.vue
+++ b/apps/portal/src/pages/profiel.vue
@@ -2,7 +2,12 @@
 import { useAuthStore } from '@/stores/useAuthStore'
 import { usePortalStore } from '@/stores/usePortalStore'
 import { useUpdateProfile, useUpdatePassword } from '@/composables/api/usePortalProfile'
-import { useMfaStatus, useTrustedDevices, useRevokeDevice, useRevokeAllDevices } from '@/composables/api/useMfa'
+import {
+  useMfaStatus,
+  useTrustedDevices,
+  useRevokeDevice,
+  useRevokeAllDevices,
+} from '@/composables/api/useMfa'
 import { apiClient } from '@/lib/axios'
 import MfaTotpSetupDialog from '@/components/settings/MfaTotpSetupDialog.vue'
 import MfaEmailSetupDialog from '@/components/settings/MfaEmailSetupDialog.vue'
@@ -23,15 +28,24 @@ definePage({
 const authStore = useAuthStore()
 const portal = usePortalStore()
 const router = useRouter()
-
-const updateProfileMutation = useUpdateProfile()
-const updatePasswordMutation = useUpdatePassword()
+const route = useRoute()
 
 const snackbar = ref(false)
 const snackbarMessage = ref('')
 const snackbarColor = ref('success')
 
-// Profile form
+// ─── Tab management ───
+const activeTab = computed({
+  get: () => {
+    const tab = route.query.tab as string | undefined
+    return tab === 'security' ? 'security' : 'profile'
+  },
+  set: (val: string) => {
+    router.replace({ query: { ...route.query, tab: val } })
+  },
+})
+
+// ─── Profile form ───
 const profileForm = ref({
   first_name: '',
   last_name: '',
@@ -40,6 +54,8 @@ const profileForm = ref({
 })
 const profileError = ref<string | null>(null)
 
+const updateProfileMutation = useUpdateProfile()
+
 // Email change form
 const showEmailChange = ref(false)
 const emailForm = ref({
@@ -83,48 +99,6 @@ async function saveEmail() {
   }
 }
 
-// Password form
-const passwordForm = ref({
-  current_password: '',
-  password: '',
-  password_confirmation: '',
-})
-const passwordError = ref<string | null>(null)
-const passwordFieldErrors = ref<Record<string, string>>({})
-const showCurrentPassword = ref(false)
-const showNewPassword = ref(false)
-const showConfirmPassword = ref(false)
-
-// MFA
-const { data: mfaStatus, refetch: refetchMfaStatus } = useMfaStatus()
-const { data: trustedDevices, refetch: refetchDevices } = useTrustedDevices()
-const revokeDeviceMutation = useRevokeDevice()
-const revokeAllMutation = useRevokeAllDevices()
-
-const showTotpSetup = ref(false)
-const showEmailSetup = ref(false)
-const showDisableDialog = ref(false)
-const isMfaEnabled = computed(() => mfaStatus.value?.enabled ?? false)
-const mfaMethodLabel = computed(() => {
-  if (mfaStatus.value?.method === 'totp') return 'Authenticator app'
-  if (mfaStatus.value?.method === 'email') return 'E-mailcode'
-
-  return null
-})
-
-function onMfaSetupCompleted() { refetchMfaStatus() }
-function onMfaDisabled() { refetchMfaStatus(); refetchDevices() }
-
-async function handleRevokeDevice(id: string) {
-  await revokeDeviceMutation.mutateAsync(id)
-  refetchDevices()
-}
-
-async function handleRevokeAllDevices() {
-  await revokeAllMutation.mutateAsync()
-  refetchDevices()
-}
-
 // Populate profile form from auth user / current person data
 watch(
   [() => authStore.user, () => portal.currentPerson],
@@ -139,45 +113,6 @@ watch(
   { immediate: true },
 )
 
-// Status helpers for event list
-function statusColor(status: string): string {
-  if (status === 'approved') return 'success'
-  if (status === 'pending' || status === 'applied' || status === 'invited') return 'warning'
-  if (status === 'rejected') return 'error'
-
-  return 'secondary'
-}
-
-function statusLabel(status: string): string {
-  const map: Record<string, string> = {
-    pending: 'In behandeling',
-    applied: 'In behandeling',
-    invited: 'Uitgenodigd',
-    approved: 'Goedgekeurd',
-    rejected: 'Afgewezen',
-    no_show: 'Niet verschenen',
-  }
-
-  return map[status] ?? status
-}
-
-function formatEventDates(startDate: string, endDate: string): string {
-  try {
-    const start = new Date(`${startDate}T12:00:00`)
-    const end = new Date(`${endDate}T12:00:00`)
-    const opts: Intl.DateTimeFormatOptions = { day: 'numeric', month: 'long', year: 'numeric' }
-
-    return `${start.toLocaleDateString('nl-NL', opts)} – ${end.toLocaleDateString('nl-NL', opts)}`
-  }
-  catch {
-    return `${startDate} – ${endDate}`
-  }
-}
-
-function viewEvent(eventId: string) {
-  router.push(`/evenementen/${eventId}`)
-}
-
 async function saveProfile() {
   profileError.value = null
 
@@ -218,6 +153,20 @@ async function saveProfile() {
   }
 }
 
+// ─── Password ───
+const passwordForm = ref({
+  current_password: '',
+  password: '',
+  password_confirmation: '',
+})
+const passwordError = ref<string | null>(null)
+const passwordFieldErrors = ref<Record<string, string>>({})
+const showCurrentPassword = ref(false)
+const showNewPassword = ref(false)
+const showConfirmPassword = ref(false)
+
+const updatePasswordMutation = useUpdatePassword()
+
 async function savePassword() {
   passwordError.value = null
   passwordFieldErrors.value = {}
@@ -253,6 +202,75 @@ async function savePassword() {
     }
   }
 }
+
+// ─── MFA ───
+const { data: mfaStatus, refetch: refetchMfaStatus } = useMfaStatus()
+const { data: trustedDevices, refetch: refetchDevices } = useTrustedDevices()
+const revokeDeviceMutation = useRevokeDevice()
+const revokeAllMutation = useRevokeAllDevices()
+
+const showTotpSetup = ref(false)
+const showEmailSetup = ref(false)
+const showDisableDialog = ref(false)
+const isMfaEnabled = computed(() => mfaStatus.value?.enabled ?? false)
+const mfaMethodLabel = computed(() => {
+  if (mfaStatus.value?.method === 'totp') return 'Authenticator app'
+  if (mfaStatus.value?.method === 'email') return 'E-mailcode'
+
+  return null
+})
+
+function onMfaSetupCompleted() { refetchMfaStatus() }
+function onMfaDisabled() { refetchMfaStatus(); refetchDevices() }
+
+async function handleRevokeDevice(id: string) {
+  await revokeDeviceMutation.mutateAsync(id)
+  refetchDevices()
+}
+
+async function handleRevokeAllDevices() {
+  await revokeAllMutation.mutateAsync()
+  refetchDevices()
+}
+
+// ─── Events ───
+function statusColor(status: string): string {
+  if (status === 'approved') return 'success'
+  if (status === 'pending' || status === 'applied' || status === 'invited') return 'warning'
+  if (status === 'rejected') return 'error'
+
+  return 'secondary'
+}
+
+function statusLabel(status: string): string {
+  const map: Record<string, string> = {
+    pending: 'In behandeling',
+    applied: 'In behandeling',
+    invited: 'Uitgenodigd',
+    approved: 'Goedgekeurd',
+    rejected: 'Afgewezen',
+    no_show: 'Niet verschenen',
+  }
+
+  return map[status] ?? status
+}
+
+function formatEventDates(startDate: string, endDate: string): string {
+  try {
+    const start = new Date(`${startDate}T12:00:00`)
+    const end = new Date(`${endDate}T12:00:00`)
+    const opts: Intl.DateTimeFormatOptions = { day: 'numeric', month: 'long', year: 'numeric' }
+
+    return `${start.toLocaleDateString('nl-NL', opts)} – ${end.toLocaleDateString('nl-NL', opts)}`
+  }
+  catch {
+    return `${startDate} – ${endDate}`
+  }
+}
+
+function viewEvent(eventId: string) {
+  router.push(`/evenementen/${eventId}`)
+}
 </script>
 
 <template>
@@ -266,438 +284,475 @@ async function savePassword() {
         Mijn Profiel
       </h4>
 
-      <!-- Profile form -->
-      <VCard class="mb-4">
-        <VCardTitle>Persoonlijke gegevens</VCardTitle>
-        <VCardText>
-          <VAlert
-            v-if="profileError"
-            type="error"
-            variant="tonal"
-            density="compact"
-            class="mb-4"
-          >
-            {{ profileError }}
-          </VAlert>
-
-          <VForm @submit.prevent="saveProfile">
-            <VRow>
-              <VCol
-                cols="12"
-                sm="6"
-              >
-                <VTextField
-                  v-model="profileForm.first_name"
-                  label="Voornaam"
-                  variant="outlined"
-                  density="comfortable"
-                  hide-details="auto"
-                />
-              </VCol>
-              <VCol
-                cols="12"
-                sm="6"
-              >
-                <VTextField
-                  v-model="profileForm.last_name"
-                  label="Achternaam"
-                  variant="outlined"
-                  density="comfortable"
-                  hide-details="auto"
-                />
-              </VCol>
-              <VCol cols="12">
-                <VTextField
-                  :model-value="authStore.user?.email"
-                  label="E-mailadres"
-                  variant="outlined"
-                  density="comfortable"
-                  hide-details="auto"
-                  readonly
-                  prepend-inner-icon="tabler-mail"
-                />
-                <div class="d-flex align-center justify-space-between mt-1">
-                  <p class="text-caption text-medium-emphasis mb-0">
-                    {{ showEmailChange ? '' : 'Je kunt je e-mailadres hieronder wijzigen.' }}
-                  </p>
-                  <VBtn
-                    v-if="!showEmailChange"
-                    variant="text"
-                    color="primary"
-                    size="small"
-                    @click="showEmailChange = true"
-                  >
-                    E-mail wijzigen
-                  </VBtn>
-                </div>
-              </VCol>
-
-              <!-- Email change form -->
-              <template v-if="showEmailChange">
-                <VCol cols="12">
-                  <VAlert
-                    v-if="emailError"
-                    type="error"
-                    variant="tonal"
-                    density="compact"
-                    class="mb-3"
-                  >
-                    {{ emailError }}
-                  </VAlert>
-
-                  <VTextField
-                    v-model="emailForm.new_email"
-                    label="Nieuw e-mailadres"
-                    type="email"
-                    variant="outlined"
-                    density="comfortable"
-                    hide-details="auto"
-                    :error-messages="emailFieldErrors.new_email"
-                    class="mb-3"
-                  />
-                  <VTextField
-                    v-model="emailForm.password"
-                    label="Huidig wachtwoord"
-                    :type="showEmailPw ? 'text' : 'password'"
-                    :append-inner-icon="showEmailPw ? 'tabler-eye-off' : 'tabler-eye'"
-                    variant="outlined"
-                    density="comfortable"
-                    hide-details="auto"
-                    :error-messages="emailFieldErrors.password"
-                    @click:append-inner="showEmailPw = !showEmailPw"
-                  />
-                  <div class="d-flex gap-2 mt-3">
-                    <VBtn
-                      color="primary"
-                      size="small"
-                      :loading="isChangingEmail"
-                      :disabled="!emailForm.new_email || !emailForm.password"
-                      @click="saveEmail"
-                    >
-                      Verificatiemail versturen
-                    </VBtn>
-                    <VBtn
-                      variant="tonal"
-                      size="small"
-                      @click="showEmailChange = false; emailForm = { new_email: '', password: '' }"
-                    >
-                      Annuleren
-                    </VBtn>
-                  </div>
-                </VCol>
-              </template>
-
-              <VCol
-                v-if="emailSuccess"
-                cols="12"
-              >
-                <VAlert
-                  type="success"
-                  variant="tonal"
-                  density="compact"
-                >
-                  {{ emailSuccess }}
-                </VAlert>
-              </VCol>
-              <VCol
-                cols="12"
-                sm="6"
-              >
-                <VTextField
-                  v-model="profileForm.phone"
-                  label="Telefoonnummer"
-                  variant="outlined"
-                  density="comfortable"
-                  hide-details="auto"
-                  prepend-inner-icon="tabler-phone"
-                />
-              </VCol>
-              <VCol
-                cols="12"
-                sm="6"
-              >
-                <VTextField
-                  v-model="profileForm.date_of_birth"
-                  label="Geboortedatum"
-                  variant="outlined"
-                  density="comfortable"
-                  hide-details="auto"
-                  type="date"
-                >
-                  <template #prepend-inner>
-                    <VIcon
-                      icon="tabler-calendar"
-                      size="20"
-                    />
-                  </template>
-                </VTextField>
-              </VCol>
-            </VRow>
-
-            <div class="d-flex justify-end mt-4">
-              <VBtn
-                type="submit"
-                color="primary"
-                :loading="updateProfileMutation.isPending.value"
-              >
-                Opslaan
-              </VBtn>
-            </div>
-          </VForm>
-        </VCardText>
-      </VCard>
-
-      <!-- Password change -->
-      <VCard class="mb-4">
-        <VCardTitle>Wachtwoord wijzigen</VCardTitle>
-        <VCardText>
-          <VAlert
-            v-if="passwordError"
-            type="error"
-            variant="tonal"
-            density="compact"
-            class="mb-4"
-          >
-            {{ passwordError }}
-          </VAlert>
-
-          <VForm @submit.prevent="savePassword">
-            <VRow>
-              <VCol cols="12">
-                <VTextField
-                  v-model="passwordForm.current_password"
-                  label="Huidig wachtwoord"
-                  variant="outlined"
-                  density="comfortable"
-                  hide-details="auto"
-                  :type="showCurrentPassword ? 'text' : 'password'"
-                  :append-inner-icon="showCurrentPassword ? 'tabler-eye-off' : 'tabler-eye'"
-                  :error-messages="passwordFieldErrors.current_password"
-                  @click:append-inner="showCurrentPassword = !showCurrentPassword"
-                />
-              </VCol>
-              <VCol
-                cols="12"
-                sm="6"
-              >
-                <VTextField
-                  v-model="passwordForm.password"
-                  label="Nieuw wachtwoord"
-                  variant="outlined"
-                  density="comfortable"
-                  hide-details="auto"
-                  :type="showNewPassword ? 'text' : 'password'"
-                  :append-inner-icon="showNewPassword ? 'tabler-eye-off' : 'tabler-eye'"
-                  :error-messages="passwordFieldErrors.password"
-                  @click:append-inner="showNewPassword = !showNewPassword"
-                />
-              </VCol>
-              <VCol
-                cols="12"
-                sm="6"
-              >
-                <VTextField
-                  v-model="passwordForm.password_confirmation"
-                  label="Bevestig nieuw wachtwoord"
-                  variant="outlined"
-                  density="comfortable"
-                  hide-details="auto"
-                  :type="showConfirmPassword ? 'text' : 'password'"
-                  :append-inner-icon="showConfirmPassword ? 'tabler-eye-off' : 'tabler-eye'"
-                  :error-messages="passwordFieldErrors.password_confirmation"
-                  @click:append-inner="showConfirmPassword = !showConfirmPassword"
-                />
-              </VCol>
-            </VRow>
-
-            <div class="d-flex justify-end mt-4">
-              <VBtn
-                type="submit"
-                color="primary"
-                :loading="updatePasswordMutation.isPending.value"
-              >
-                Wachtwoord wijzigen
-              </VBtn>
-            </div>
-          </VForm>
-        </VCardText>
-      </VCard>
-
-      <!-- Security / MFA -->
-      <VCard class="mb-4">
-        <VCardTitle class="d-flex align-center">
+      <VTabs
+        v-model="activeTab"
+        class="v-tabs-pill mb-6"
+      >
+        <VTab value="profile">
+          <VIcon
+            icon="tabler-user"
+            size="20"
+            class="me-2"
+          />
+          Mijn profiel
+        </VTab>
+        <VTab value="security">
           <VIcon
             icon="tabler-shield-lock"
+            size="20"
             class="me-2"
           />
           Beveiliging
-        </VCardTitle>
-        <VCardText>
-          <template v-if="!isMfaEnabled">
-            <p class="text-body-2 text-medium-emphasis mb-4">
-              Bescherm je account met tweestapsverificatie.
-            </p>
-            <div class="d-flex gap-2 flex-wrap">
-              <VBtn
-                variant="tonal"
-                prepend-icon="tabler-device-mobile"
-                @click="showTotpSetup = true"
-              >
-                Authenticator app
-              </VBtn>
-              <VBtn
-                variant="tonal"
-                prepend-icon="tabler-mail"
-                @click="showEmailSetup = true"
-              >
-                E-mailcode
-              </VBtn>
-            </div>
-          </template>
+        </VTab>
+      </VTabs>
 
-          <template v-else>
-            <div class="d-flex align-center justify-space-between mb-3">
-              <div>
-                <VChip
-                  color="success"
-                  variant="tonal"
-                  size="small"
-                  class="me-2"
-                >
-                  Ingeschakeld
-                </VChip>
-                <span class="text-body-2">via {{ mfaMethodLabel }}</span>
-              </div>
-              <VBtn
-                color="error"
+      <VWindow
+        v-model="activeTab"
+        class="disable-tab-transition"
+        :touch="false"
+      >
+        <!-- Profile tab -->
+        <VWindowItem value="profile">
+          <!-- Profile form -->
+          <VCard class="mb-4">
+            <VCardTitle>Persoonlijke gegevens</VCardTitle>
+            <VCardText>
+              <VAlert
+                v-if="profileError"
+                type="error"
                 variant="tonal"
-                size="small"
-                @click="showDisableDialog = true"
+                density="compact"
+                class="mb-4"
               >
-                Uitschakelen
-              </VBtn>
-            </div>
+                {{ profileError }}
+              </VAlert>
 
-            <!-- Trusted devices -->
-            <template v-if="trustedDevices && trustedDevices.length > 0">
-              <p class="text-subtitle-2 mt-4 mb-2">
-                Vertrouwde apparaten
-              </p>
-              <VList density="compact">
+              <VForm @submit.prevent="saveProfile">
+                <VRow>
+                  <VCol
+                    cols="12"
+                    sm="6"
+                  >
+                    <VTextField
+                      v-model="profileForm.first_name"
+                      label="Voornaam"
+                      variant="outlined"
+                      density="comfortable"
+                      hide-details="auto"
+                    />
+                  </VCol>
+                  <VCol
+                    cols="12"
+                    sm="6"
+                  >
+                    <VTextField
+                      v-model="profileForm.last_name"
+                      label="Achternaam"
+                      variant="outlined"
+                      density="comfortable"
+                      hide-details="auto"
+                    />
+                  </VCol>
+                  <VCol cols="12">
+                    <VTextField
+                      :model-value="authStore.user?.email"
+                      label="E-mailadres"
+                      variant="outlined"
+                      density="comfortable"
+                      hide-details="auto"
+                      readonly
+                      prepend-inner-icon="tabler-mail"
+                    />
+                    <div class="d-flex align-center justify-space-between mt-1">
+                      <p class="text-caption text-medium-emphasis mb-0">
+                        {{ showEmailChange ? '' : 'Je kunt je e-mailadres hieronder wijzigen.' }}
+                      </p>
+                      <VBtn
+                        v-if="!showEmailChange"
+                        variant="text"
+                        color="primary"
+                        size="small"
+                        @click="showEmailChange = true"
+                      >
+                        E-mail wijzigen
+                      </VBtn>
+                    </div>
+                  </VCol>
+
+                  <!-- Email change form -->
+                  <template v-if="showEmailChange">
+                    <VCol cols="12">
+                      <VAlert
+                        v-if="emailError"
+                        type="error"
+                        variant="tonal"
+                        density="compact"
+                        class="mb-3"
+                      >
+                        {{ emailError }}
+                      </VAlert>
+
+                      <VTextField
+                        v-model="emailForm.new_email"
+                        label="Nieuw e-mailadres"
+                        type="email"
+                        variant="outlined"
+                        density="comfortable"
+                        hide-details="auto"
+                        :error-messages="emailFieldErrors.new_email"
+                        class="mb-3"
+                      />
+                      <VTextField
+                        v-model="emailForm.password"
+                        label="Huidig wachtwoord"
+                        :type="showEmailPw ? 'text' : 'password'"
+                        :append-inner-icon="showEmailPw ? 'tabler-eye-off' : 'tabler-eye'"
+                        variant="outlined"
+                        density="comfortable"
+                        hide-details="auto"
+                        :error-messages="emailFieldErrors.password"
+                        @click:append-inner="showEmailPw = !showEmailPw"
+                      />
+                      <div class="d-flex gap-2 mt-3">
+                        <VBtn
+                          color="primary"
+                          size="small"
+                          :loading="isChangingEmail"
+                          :disabled="!emailForm.new_email || !emailForm.password"
+                          @click="saveEmail"
+                        >
+                          Verificatiemail versturen
+                        </VBtn>
+                        <VBtn
+                          variant="tonal"
+                          size="small"
+                          @click="showEmailChange = false; emailForm = { new_email: '', password: '' }"
+                        >
+                          Annuleren
+                        </VBtn>
+                      </div>
+                    </VCol>
+                  </template>
+
+                  <VCol
+                    v-if="emailSuccess"
+                    cols="12"
+                  >
+                    <VAlert
+                      type="success"
+                      variant="tonal"
+                      density="compact"
+                    >
+                      {{ emailSuccess }}
+                    </VAlert>
+                  </VCol>
+                  <VCol
+                    cols="12"
+                    sm="6"
+                  >
+                    <VTextField
+                      v-model="profileForm.phone"
+                      label="Telefoonnummer"
+                      variant="outlined"
+                      density="comfortable"
+                      hide-details="auto"
+                      prepend-inner-icon="tabler-phone"
+                    />
+                  </VCol>
+                  <VCol
+                    cols="12"
+                    sm="6"
+                  >
+                    <VTextField
+                      v-model="profileForm.date_of_birth"
+                      label="Geboortedatum"
+                      variant="outlined"
+                      density="comfortable"
+                      hide-details="auto"
+                      type="date"
+                    >
+                      <template #prepend-inner>
+                        <VIcon
+                          icon="tabler-calendar"
+                          size="20"
+                        />
+                      </template>
+                    </VTextField>
+                  </VCol>
+                </VRow>
+
+                <div class="d-flex justify-end mt-4">
+                  <VBtn
+                    type="submit"
+                    color="primary"
+                    :loading="updateProfileMutation.isPending.value"
+                  >
+                    Opslaan
+                  </VBtn>
+                </div>
+              </VForm>
+            </VCardText>
+          </VCard>
+
+          <!-- My events -->
+          <VCard v-if="portal.userEvents.length > 0">
+            <VCardTitle>Mijn evenementen</VCardTitle>
+            <VCardText class="pa-0">
+              <VList>
                 <VListItem
-                  v-for="device in trustedDevices"
-                  :key="device.id"
-                  class="px-0"
+                  v-for="ev in portal.userEvents"
+                  :key="ev.event_id"
+                  class="py-3"
                 >
-                  <VListItemTitle class="text-body-2">
-                    {{ device.device_name ?? 'Onbekend apparaat' }}
+                  <template #prepend>
+                    <VIcon
+                      icon="tabler-calendar-event"
+                      size="24"
+                      color="primary"
+                      class="me-1"
+                    />
+                  </template>
+
+                  <VListItemTitle class="font-weight-medium">
+                    {{ ev.event_name }}
                   </VListItemTitle>
-                  <VListItemSubtitle class="text-caption">
-                    IP: {{ device.ip_address }}
+                  <VListItemSubtitle class="text-caption mt-1">
+                    {{ formatEventDates(ev.start_date, ev.end_date) }}
                   </VListItemSubtitle>
 
                   <template #append>
-                    <VBtn
-                      variant="text"
-                      size="small"
-                      color="error"
-                      icon="tabler-trash"
-                      @click="handleRevokeDevice(device.id)"
-                    />
+                    <div class="d-flex align-center gap-2">
+                      <VChip
+                        :color="statusColor(ev.person_status)"
+                        size="small"
+                        label
+                      >
+                        {{ statusLabel(ev.person_status) }}
+                      </VChip>
+                      <VBtn
+                        variant="text"
+                        color="primary"
+                        size="small"
+                        @click="viewEvent(ev.event_id)"
+                      >
+                        Bekijk
+                      </VBtn>
+                    </div>
                   </template>
                 </VListItem>
               </VList>
-              <VBtn
-                v-if="trustedDevices.length > 1"
+            </VCardText>
+          </VCard>
+
+          <!-- No events -->
+          <VAlert
+            v-else
+            type="info"
+            variant="tonal"
+          >
+            Je bent nog niet aangemeld voor een evenement.
+          </VAlert>
+        </VWindowItem>
+
+        <!-- Security tab -->
+        <VWindowItem value="security">
+          <!-- Password change -->
+          <VCard class="mb-4">
+            <VCardTitle>Wachtwoord wijzigen</VCardTitle>
+            <VCardText>
+              <VAlert
+                v-if="passwordError"
+                type="error"
                 variant="tonal"
-                size="small"
-                color="error"
-                class="mt-2"
-                @click="handleRevokeAllDevices"
+                density="compact"
+                class="mb-4"
               >
-                Alle apparaten intrekken
-              </VBtn>
-            </template>
-          </template>
-        </VCardText>
-      </VCard>
+                {{ passwordError }}
+              </VAlert>
 
-      <!-- MFA setup dialogs -->
-      <MfaTotpSetupDialog
-        v-model="showTotpSetup"
-        @completed="onMfaSetupCompleted"
-      />
-
-      <MfaEmailSetupDialog
-        v-model="showEmailSetup"
-        :user-email="authStore.user?.email ?? ''"
-        @completed="onMfaSetupCompleted"
-      />
-
-      <MfaDisableDialog
-        v-model="showDisableDialog"
-        :current-method="mfaStatus?.method ?? null"
-        @disabled="onMfaDisabled"
-      />
-
-      <!-- My events -->
-      <VCard v-if="portal.userEvents.length > 0">
-        <VCardTitle>Mijn evenementen</VCardTitle>
-        <VCardText class="pa-0">
-          <VList>
-            <VListItem
-              v-for="ev in portal.userEvents"
-              :key="ev.event_id"
-              class="py-3"
-            >
-              <template #prepend>
-                <VIcon
-                  icon="tabler-calendar-event"
-                  size="24"
-                  color="primary"
-                  class="me-1"
-                />
-              </template>
-
-              <VListItemTitle class="font-weight-medium">
-                {{ ev.event_name }}
-              </VListItemTitle>
-              <VListItemSubtitle class="text-caption mt-1">
-                {{ formatEventDates(ev.start_date, ev.end_date) }}
-              </VListItemSubtitle>
-
-              <template #append>
-                <div class="d-flex align-center gap-2">
-                  <VChip
-                    :color="statusColor(ev.person_status)"
-                    size="small"
-                    label
+              <VForm @submit.prevent="savePassword">
+                <VRow>
+                  <VCol cols="12">
+                    <VTextField
+                      v-model="passwordForm.current_password"
+                      label="Huidig wachtwoord"
+                      variant="outlined"
+                      density="comfortable"
+                      hide-details="auto"
+                      :type="showCurrentPassword ? 'text' : 'password'"
+                      :append-inner-icon="showCurrentPassword ? 'tabler-eye-off' : 'tabler-eye'"
+                      :error-messages="passwordFieldErrors.current_password"
+                      placeholder="············"
+                      @click:append-inner="showCurrentPassword = !showCurrentPassword"
+                    />
+                  </VCol>
+                  <VCol
+                    cols="12"
+                    sm="6"
                   >
-                    {{ statusLabel(ev.person_status) }}
-                  </VChip>
+                    <VTextField
+                      v-model="passwordForm.password"
+                      label="Nieuw wachtwoord"
+                      variant="outlined"
+                      density="comfortable"
+                      hide-details="auto"
+                      :type="showNewPassword ? 'text' : 'password'"
+                      :append-inner-icon="showNewPassword ? 'tabler-eye-off' : 'tabler-eye'"
+                      :error-messages="passwordFieldErrors.password"
+                      placeholder="············"
+                      @click:append-inner="showNewPassword = !showNewPassword"
+                    />
+                  </VCol>
+                  <VCol
+                    cols="12"
+                    sm="6"
+                  >
+                    <VTextField
+                      v-model="passwordForm.password_confirmation"
+                      label="Bevestig nieuw wachtwoord"
+                      variant="outlined"
+                      density="comfortable"
+                      hide-details="auto"
+                      :type="showConfirmPassword ? 'text' : 'password'"
+                      :append-inner-icon="showConfirmPassword ? 'tabler-eye-off' : 'tabler-eye'"
+                      :error-messages="passwordFieldErrors.password_confirmation"
+                      placeholder="············"
+                      @click:append-inner="showConfirmPassword = !showConfirmPassword"
+                    />
+                  </VCol>
+                </VRow>
+
+                <div class="d-flex justify-end mt-4">
                   <VBtn
-                    variant="text"
+                    type="submit"
                     color="primary"
-                    size="small"
-                    @click="viewEvent(ev.event_id)"
+                    :loading="updatePasswordMutation.isPending.value"
                   >
-                    Bekijk
+                    Wachtwoord wijzigen
+                  </VBtn>
+                </div>
+              </VForm>
+            </VCardText>
+          </VCard>
+
+          <!-- Security / MFA -->
+          <VCard class="mb-4">
+            <VCardTitle class="d-flex align-center">
+              <VIcon
+                icon="tabler-shield-lock"
+                class="me-2"
+              />
+              Tweestapsverificatie
+            </VCardTitle>
+            <VCardText>
+              <template v-if="!isMfaEnabled">
+                <p class="text-body-2 text-medium-emphasis mb-4">
+                  Bescherm je account met tweestapsverificatie.
+                </p>
+                <div class="d-flex gap-2 flex-wrap">
+                  <VBtn
+                    variant="tonal"
+                    prepend-icon="tabler-device-mobile"
+                    @click="showTotpSetup = true"
+                  >
+                    Authenticator app
+                  </VBtn>
+                  <VBtn
+                    variant="tonal"
+                    prepend-icon="tabler-mail"
+                    @click="showEmailSetup = true"
+                  >
+                    E-mailcode
                   </VBtn>
                 </div>
               </template>
-            </VListItem>
-          </VList>
-        </VCardText>
-      </VCard>
 
-      <!-- No events -->
-      <VAlert
-        v-else
-        type="info"
-        variant="tonal"
-      >
-        Je bent nog niet aangemeld voor een evenement.
-      </VAlert>
+              <template v-else>
+                <div class="d-flex align-center justify-space-between mb-3">
+                  <div>
+                    <VChip
+                      color="success"
+                      variant="tonal"
+                      size="small"
+                      class="me-2"
+                    >
+                      Ingeschakeld
+                    </VChip>
+                    <span class="text-body-2">via {{ mfaMethodLabel }}</span>
+                  </div>
+                  <VBtn
+                    color="error"
+                    variant="tonal"
+                    size="small"
+                    @click="showDisableDialog = true"
+                  >
+                    Uitschakelen
+                  </VBtn>
+                </div>
+
+                <!-- Trusted devices -->
+                <template v-if="trustedDevices && trustedDevices.length > 0">
+                  <p class="text-subtitle-2 mt-4 mb-2">
+                    Vertrouwde apparaten
+                  </p>
+                  <VList density="compact">
+                    <VListItem
+                      v-for="device in trustedDevices"
+                      :key="device.id"
+                      class="px-0"
+                    >
+                      <VListItemTitle class="text-body-2">
+                        {{ device.device_name ?? 'Onbekend apparaat' }}
+                      </VListItemTitle>
+                      <VListItemSubtitle class="text-caption">
+                        IP: {{ device.ip_address }}
+                      </VListItemSubtitle>
+
+                      <template #append>
+                        <VBtn
+                          variant="text"
+                          size="small"
+                          color="error"
+                          icon="tabler-trash"
+                          @click="handleRevokeDevice(device.id)"
+                        />
+                      </template>
+                    </VListItem>
+                  </VList>
+                  <VBtn
+                    v-if="trustedDevices.length > 1"
+                    variant="tonal"
+                    size="small"
+                    color="error"
+                    class="mt-2"
+                    @click="handleRevokeAllDevices"
+                  >
+                    Alle apparaten intrekken
+                  </VBtn>
+                </template>
+              </template>
+            </VCardText>
+          </VCard>
+
+          <!-- MFA setup dialogs -->
+          <MfaTotpSetupDialog
+            v-model="showTotpSetup"
+            @completed="onMfaSetupCompleted"
+          />
+
+          <MfaEmailSetupDialog
+            v-model="showEmailSetup"
+            :user-email="authStore.user?.email ?? ''"
+            @completed="onMfaSetupCompleted"
+          />
+
+          <MfaDisableDialog
+            v-model="showDisableDialog"
+            :current-method="mfaStatus?.method ?? null"
+            @disabled="onMfaDisabled"
+          />
+        </VWindowItem>
+      </VWindow>
 
       <!-- Snackbar -->
       <VSnackbar