diff --git a/apps/portal/components.d.ts b/apps/portal/components.d.ts
index 9fbbc02e..299a945a 100644
--- a/apps/portal/components.d.ts
+++ b/apps/portal/components.d.ts
@@ -46,5 +46,6 @@ declare module 'vue' {
     TheCustomizer: typeof import('./src/@core/components/TheCustomizer.vue')['default']
     ThemeSwitcher: typeof import('./src/@core/components/ThemeSwitcher.vue')['default']
     TiptapEditor: typeof import('./src/@core/components/TiptapEditor.vue')['default']
+    UserAvatarMenu: typeof import('./src/components/portal/UserAvatarMenu.vue')['default']
   }
 }
diff --git a/apps/portal/env.d.ts b/apps/portal/env.d.ts
index 4bd4b4cf..69ad44da 100644
--- a/apps/portal/env.d.ts
+++ b/apps/portal/env.d.ts
@@ -7,5 +7,6 @@ declare module 'vue-router' {
     requiresAuth?: boolean
     requiresToken?: boolean
     public?: boolean
+    hideEventMenu?: boolean
   }
 }
diff --git a/apps/portal/src/components/portal/StatusCard.vue b/apps/portal/src/components/portal/StatusCard.vue
index d5f35d91..352156d8 100644
--- a/apps/portal/src/components/portal/StatusCard.vue
+++ b/apps/portal/src/components/portal/StatusCard.vue
@@ -147,7 +147,7 @@ const registeredLabel = computed(() => {
           sm="4"
         >
           <VCard
-            :to="{ name: 'portal-profile' }"
+            :to="{ name: 'portal-profiel' }"
             class="h-100 text-decoration-none portal-action-card"
             elevation="1"
           >
diff --git a/apps/portal/src/components/portal/UserAvatarMenu.vue b/apps/portal/src/components/portal/UserAvatarMenu.vue
new file mode 100644
index 00000000..ae740203
--- /dev/null
+++ b/apps/portal/src/components/portal/UserAvatarMenu.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { useAuthStore } from '@/stores/useAuthStore'
+
+const authStore = useAuthStore()
+const router = useRouter()
+
+const userInitials = computed(() => {
+  const user = authStore.user
+  if (!user) return '?'
+  const first = user.first_name?.charAt(0) ?? ''
+  const last = user.last_name?.charAt(0) ?? ''
+
+  return (first + last).toUpperCase() || '?'
+})
+
+const userFullName = computed(() => authStore.user?.full_name ?? '')
+const userEmail = computed(() => authStore.user?.email ?? '')
+
+async function logout() {
+  await authStore.logout()
+  await router.push('/login')
+}
+</script>
+
+<template>
+  <VMenu
+    location="bottom end"
+    :close-on-content-click="false"
+    min-width="220"
+  >
+    <template #activator="{ props: menuProps }">
+      <VAvatar
+        v-bind="menuProps"
+        size="36"
+        color="primary"
+        class="cursor-pointer"
+      >
+        <span class="text-body-2 font-weight-medium text-white">
+          {{ userInitials }}
+        </span>
+      </VAvatar>
+    </template>
+
+    <VList density="compact">
+      <!-- User info -->
+      <VListItem class="pb-0">
+        <VListItemTitle class="font-weight-bold text-body-1">
+          {{ userFullName }}
+        </VListItemTitle>
+        <VListItemSubtitle class="text-caption text-medium-emphasis">
+          {{ userEmail }}
+        </VListItemSubtitle>
+      </VListItem>
+
+      <VDivider class="my-2" />
+
+      <!-- Profile link -->
+      <VListItem
+        to="/profiel"
+        prepend-icon="tabler-user"
+        title="Mijn Profiel"
+      />
+
+      <VDivider class="my-2" />
+
+      <!-- Logout -->
+      <VListItem
+        prepend-icon="tabler-logout"
+        title="Uitloggen"
+        class="text-error"
+        @click="logout"
+      />
+    </VList>
+  </VMenu>
+</template>
diff --git a/apps/portal/src/layouts/portal.vue b/apps/portal/src/layouts/portal.vue
index d626d40b..4c744198 100644
--- a/apps/portal/src/layouts/portal.vue
+++ b/apps/portal/src/layouts/portal.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import EventSwitcher from '@/components/portal/EventSwitcher.vue'
+import UserAvatarMenu from '@/components/portal/UserAvatarMenu.vue'
 import { useAuthStore } from '@/stores/useAuthStore'
 import { usePortalStore } from '@/stores/usePortalStore'
 
@@ -9,17 +10,28 @@ injectSkinClasses()
 
 const authStore = useAuthStore()
 const portal = usePortalStore()
-const router = useRouter()
+const route = useRoute()
 
 const isMobileMenuOpen = ref(false)
 
+const hideEventMenu = computed(() => route.meta.hideEventMenu === true)
+
 const isApproved = computed(() => portal.currentPerson?.status === 'approved')
 
-const navItems = computed(() => {
-  if (!authStore.isAuthenticated) return []
+const hasActiveEvent = computed(() => !!portal.activeEventId)
+
+const showEventMenu = computed(() => {
+  if (hideEventMenu.value) return false
+  if (!hasActiveEvent.value) return false
+
+  return true
+})
+
+const menuItems = computed(() => {
+  if (!showEventMenu.value) return []
 
   const items = [
-    { title: 'Dashboard', to: '/dashboard', icon: 'tabler-dashboard' },
+    { title: 'Dashboard', to: '/dashboard', icon: 'tabler-layout-dashboard' },
   ]
 
   if (isApproved.value) {
@@ -29,7 +41,14 @@ const navItems = computed(() => {
     )
   }
 
-  items.push({ title: 'Mijn Profiel', to: '/profile', icon: 'tabler-user' })
+  return items
+})
+
+// Mobile drawer items include profile + logout
+const mobileNavItems = computed(() => {
+  const items = [...menuItems.value]
+
+  items.push({ title: 'Mijn Profiel', to: '/profiel', icon: 'tabler-user' })
 
   return items
 })
@@ -45,14 +64,11 @@ watch([isFallbackStateActive, refLoadingIndicator], () => {
     refLoadingIndicator.value.resolveHandle()
 }, { immediate: true })
 
-async function logoutAndRedirect(): Promise<void> {
-  await authStore.logout()
-  await router.push('/login')
-}
-
-async function logoutFromDrawer(): Promise<void> {
+async function logout() {
   isMobileMenuOpen.value = false
-  await logoutAndRedirect()
+  await authStore.logout()
+  const router = useRouter()
+  await router.push('/login')
 }
 </script>
 
@@ -60,20 +76,22 @@ async function logoutFromDrawer(): Promise<void> {
   <VApp>
     <AppLoadingIndicator ref="refLoadingIndicator" />
 
+    <!-- Navbar: only shown when authenticated -->
     <VAppBar
+      v-if="authStore.isAuthenticated"
       flat
       color="surface"
       border="b"
-      density="comfortable"
+      height="64"
     >
       <VContainer
         fluid
         class="d-flex align-center py-0"
         style="max-inline-size: 1440px;"
       >
-        <!-- Logo & Brand -->
+        <!-- Left section: Logo + Event Switcher -->
         <RouterLink
-          to="/"
+          to="/dashboard"
           class="d-flex align-center gap-x-2 text-decoration-none flex-shrink-0"
         >
           <VIcon
@@ -81,32 +99,27 @@ async function logoutFromDrawer(): Promise<void> {
             size="26"
             color="primary"
           />
-          <span class="text-h6 font-weight-bold text-high-emphasis">
+          <span class="text-h6 font-weight-bold text-high-emphasis d-none d-sm-inline">
             Crewli
           </span>
         </RouterLink>
 
-        <EventSwitcher
-          v-if="authStore.isAuthenticated"
-          class="min-w-0 flex-grow-1 flex-sm-grow-0"
-        />
+        <EventSwitcher class="min-w-0 flex-grow-1 flex-sm-grow-0" />
 
-        <!-- Mobile nav toggle -->
-        <VAppBarNavIcon
-          class="d-sm-none ms-auto"
-          @click="isMobileMenuOpen = !isMobileMenuOpen"
-        />
-
-        <!-- Desktop navigation -->
-        <div class="d-none d-sm-flex align-center gap-1 ms-6">
+        <!-- Center section: Desktop menu items -->
+        <div
+          v-if="menuItems.length > 0"
+          class="d-none d-md-flex align-center gap-1 ms-4"
+        >
           <VBtn
-            v-for="item in navItems"
+            v-for="item in menuItems"
             :key="item.to"
             :to="item.to"
             variant="text"
             color="default"
             size="small"
-            class="text-medium-emphasis"
+            exact
+            class="portal-nav-btn"
           >
             <VIcon
               start
@@ -119,48 +132,54 @@ async function logoutFromDrawer(): Promise<void> {
 
         <VSpacer />
 
-        <!-- Auth actions -->
-        <VBtn
-          v-if="authStore.isAuthenticated"
-          variant="tonal"
-          color="primary"
-          size="small"
-          @click="logoutAndRedirect"
-        >
-          <VIcon
-            start
-            icon="tabler-logout"
-            size="18"
-          />
-          Uitloggen
-        </VBtn>
+        <!-- Right section: Avatar menu (desktop) -->
+        <div class="d-none d-md-flex align-center">
+          <UserAvatarMenu />
+        </div>
 
-        <VBtn
-          v-else
-          variant="tonal"
-          color="primary"
-          size="small"
-          to="/login"
-        >
-          <VIcon
-            start
-            icon="tabler-login"
-            size="18"
-          />
-          Inloggen
-        </VBtn>
+        <!-- Mobile nav toggle -->
+        <VAppBarNavIcon
+          class="d-md-none"
+          @click="isMobileMenuOpen = !isMobileMenuOpen"
+        />
       </VContainer>
     </VAppBar>
 
     <!-- Mobile navigation drawer -->
     <VNavigationDrawer
+      v-if="authStore.isAuthenticated"
       v-model="isMobileMenuOpen"
       temporary
-      class="d-sm-none"
+      location="end"
+      class="d-md-none"
     >
+      <!-- User info header -->
+      <div class="pa-4 pb-2">
+        <div class="d-flex align-center gap-3">
+          <VAvatar
+            size="40"
+            color="primary"
+          >
+            <span class="text-body-2 font-weight-medium text-white">
+              {{ (authStore.user?.first_name?.charAt(0) ?? '') + (authStore.user?.last_name?.charAt(0) ?? '') }}
+            </span>
+          </VAvatar>
+          <div class="min-w-0">
+            <div class="text-body-1 font-weight-bold text-truncate">
+              {{ authStore.user?.full_name }}
+            </div>
+            <div class="text-caption text-medium-emphasis text-truncate">
+              {{ authStore.user?.email }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <VDivider />
+
       <VList nav>
         <VListItem
-          v-for="item in navItems"
+          v-for="item in mobileNavItems"
           :key="item.to"
           :to="item.to"
           :prepend-icon="item.icon"
@@ -171,18 +190,10 @@ async function logoutFromDrawer(): Promise<void> {
         <VDivider class="my-2" />
 
         <VListItem
-          v-if="authStore.isAuthenticated"
           prepend-icon="tabler-logout"
           title="Uitloggen"
-          @click="logoutFromDrawer"
-        />
-
-        <VListItem
-          v-else
-          to="/login"
-          prepend-icon="tabler-login"
-          title="Inloggen"
-          @click="isMobileMenuOpen = false"
+          class="text-error"
+          @click="logout"
         />
       </VList>
     </VNavigationDrawer>
@@ -204,5 +215,42 @@ async function logoutFromDrawer(): Promise<void> {
         </RouterView>
       </VContainer>
     </VMain>
+
+    <!-- Footer -->
+    <VFooter
+      app
+      color="transparent"
+      class="justify-center text-caption text-medium-emphasis py-3"
+    >
+      Powered by Crewli
+    </VFooter>
   </VApp>
 </template>
+
+<style scoped>
+.portal-nav-btn {
+  position: relative;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+}
+
+.portal-nav-btn::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 0;
+  height: 2px;
+  background: rgb(var(--v-theme-primary));
+  transition: width 0.2s ease, left 0.2s ease;
+}
+
+.portal-nav-btn.router-link-active {
+  color: rgb(var(--v-theme-primary)) !important;
+}
+
+.portal-nav-btn.router-link-active::after {
+  width: 60%;
+  left: 20%;
+}
+</style>
diff --git a/apps/portal/src/pages/profiel.vue b/apps/portal/src/pages/profiel.vue
new file mode 100644
index 00000000..46acfd37
--- /dev/null
+++ b/apps/portal/src/pages/profiel.vue
@@ -0,0 +1,426 @@
+<script setup lang="ts">
+import { useAuthStore } from '@/stores/useAuthStore'
+import { usePortalStore } from '@/stores/usePortalStore'
+import { useUpdateProfile, useUpdatePassword } from '@/composables/api/usePortalProfile'
+
+definePage({
+  name: 'portal-profiel',
+  meta: {
+    layout: 'portal',
+    requiresAuth: true,
+    hideEventMenu: true,
+  },
+})
+
+const authStore = useAuthStore()
+const portal = usePortalStore()
+const router = useRouter()
+
+const updateProfileMutation = useUpdateProfile()
+const updatePasswordMutation = useUpdatePassword()
+
+const snackbar = ref(false)
+const snackbarMessage = ref('')
+const snackbarColor = ref('success')
+
+// Profile form
+const profileForm = ref({
+  first_name: '',
+  last_name: '',
+  phone: '',
+  date_of_birth: '',
+})
+const profileError = ref<string | null>(null)
+
+// 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)
+
+// Populate profile form from auth user / current person data
+watch(
+  [() => authStore.user, () => portal.currentPerson],
+  ([user, person]) => {
+    profileForm.value = {
+      first_name: person?.first_name ?? user?.first_name ?? '',
+      last_name: person?.last_name ?? user?.last_name ?? '',
+      phone: person?.phone ?? '',
+      date_of_birth: person?.date_of_birth ?? '',
+    }
+  },
+  { 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) {
+  portal.setActiveEvent(eventId)
+  router.push('/dashboard')
+}
+
+async function saveProfile() {
+  profileError.value = null
+
+  if (!portal.activeEventId) return
+
+  try {
+    const result = await updateProfileMutation.mutateAsync({
+      event_id: portal.activeEventId,
+      ...profileForm.value,
+      phone: profileForm.value.phone || null,
+      date_of_birth: profileForm.value.date_of_birth || null,
+    })
+
+    // Refresh person data and auth user
+    await Promise.all([
+      portal.fetchCurrentPerson(),
+      authStore.fetchUser(),
+    ])
+
+    snackbarMessage.value = result.message
+    snackbarColor.value = 'success'
+    snackbar.value = true
+  }
+  catch (err: any) {
+    const data = err?.response?.data
+    if (data?.errors) {
+      const firstError = Object.values(data.errors).flat()[0] as string
+      profileError.value = firstError
+    }
+    else {
+      profileError.value = data?.message ?? 'Er is een fout opgetreden.'
+    }
+  }
+}
+
+async function savePassword() {
+  passwordError.value = null
+  passwordFieldErrors.value = {}
+
+  try {
+    const result = await updatePasswordMutation.mutateAsync(passwordForm.value)
+
+    passwordForm.value = {
+      current_password: '',
+      password: '',
+      password_confirmation: '',
+    }
+
+    snackbarMessage.value = result.message
+    snackbarColor.value = 'success'
+    snackbar.value = true
+  }
+  catch (err: any) {
+    const data = err?.response?.data
+    if (data?.errors) {
+      passwordFieldErrors.value = {}
+      for (const [key, messages] of Object.entries(data.errors)) {
+        passwordFieldErrors.value[key] = (messages as string[])[0]
+      }
+    }
+    else {
+      passwordError.value = data?.message ?? 'Er is een fout opgetreden.'
+    }
+  }
+}
+</script>
+
+<template>
+  <VRow justify="center">
+    <VCol
+      cols="12"
+      md="8"
+      lg="6"
+    >
+      <h4 class="text-h4 mb-4">
+        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-lock"
+                />
+                <p class="text-caption text-medium-emphasis mt-1 mb-0">
+                  Je e-mailadres kan niet worden gewijzigd.
+                </p>
+              </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>
+
+      <!-- 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
+                  >
+                    {{ statusLabel(ev.person_status) }}
+                  </VChip>
+                  <VBtn
+                    variant="text"
+                    color="primary"
+                    size="small"
+                    @click="viewEvent(ev.event_id)"
+                  >
+                    Bekijk
+                  </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>
+
+      <!-- Snackbar -->
+      <VSnackbar
+        v-model="snackbar"
+        :color="snackbarColor"
+        :timeout="4000"
+      >
+        {{ snackbarMessage }}
+      </VSnackbar>
+    </VCol>
+  </VRow>
+</template>
diff --git a/apps/portal/src/pages/profile/index.vue b/apps/portal/src/pages/profile/index.vue
deleted file mode 100644
index fcad9098..00000000
--- a/apps/portal/src/pages/profile/index.vue
+++ /dev/null
@@ -1,389 +0,0 @@
-<script setup lang="ts">
-import { useAuthStore } from '@/stores/useAuthStore'
-import { usePortalStore } from '@/stores/usePortalStore'
-import { useUpdateProfile, useUpdatePassword } from '@/composables/api/usePortalProfile'
-
-definePage({
-  name: 'portal-profile',
-  meta: {
-    layout: 'portal',
-    requiresAuth: true,
-  },
-})
-
-const authStore = useAuthStore()
-const portal = usePortalStore()
-
-const updateProfileMutation = useUpdateProfile()
-const updatePasswordMutation = useUpdatePassword()
-
-const snackbar = ref(false)
-const snackbarMessage = ref('')
-const snackbarColor = ref('success')
-
-// Profile form
-const profileForm = ref({
-  first_name: '',
-  last_name: '',
-  phone: '',
-  date_of_birth: '',
-  remarks: '',
-})
-const profileError = ref<string | null>(null)
-
-// 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)
-
-// Populate profile form from current person data
-watch(() => portal.currentPerson, (person) => {
-  if (person) {
-    profileForm.value = {
-      first_name: person.first_name ?? authStore.user?.first_name ?? '',
-      last_name: person.last_name ?? authStore.user?.last_name ?? '',
-      phone: person.phone ?? '',
-      date_of_birth: person.date_of_birth ?? '',
-      remarks: person.remarks ?? '',
-    }
-  }
-}, { immediate: true })
-
-const statusConfig: Record<string, { label: string; color: string }> = {
-  pending: { label: 'In afwachting', color: 'warning' },
-  approved: { label: 'Goedgekeurd', color: 'success' },
-  rejected: { label: 'Afgewezen', color: 'error' },
-}
-
-const effectiveStatus = computed(() => {
-  const s = portal.currentPerson?.status ?? portal.activeEvent?.person_status ?? 'pending'
-
-  return statusConfig[s] ?? statusConfig.pending
-})
-
-async function saveProfile() {
-  profileError.value = null
-
-  if (!portal.activeEventId) return
-
-  try {
-    const result = await updateProfileMutation.mutateAsync({
-      event_id: portal.activeEventId,
-      ...profileForm.value,
-      phone: profileForm.value.phone || null,
-      date_of_birth: profileForm.value.date_of_birth || null,
-      remarks: profileForm.value.remarks || null,
-    })
-
-    // Refresh person data and auth user
-    await Promise.all([
-      portal.fetchCurrentPerson(),
-      authStore.fetchUser(),
-    ])
-
-    snackbarMessage.value = result.message
-    snackbarColor.value = 'success'
-    snackbar.value = true
-  }
-  catch (err: any) {
-    const data = err?.response?.data
-    if (data?.errors) {
-      const firstError = Object.values(data.errors).flat()[0] as string
-      profileError.value = firstError
-    }
-    else {
-      profileError.value = data?.message ?? 'Er is een fout opgetreden.'
-    }
-  }
-}
-
-async function savePassword() {
-  passwordError.value = null
-  passwordFieldErrors.value = {}
-
-  try {
-    const result = await updatePasswordMutation.mutateAsync(passwordForm.value)
-
-    passwordForm.value = {
-      current_password: '',
-      password: '',
-      password_confirmation: '',
-    }
-
-    snackbarMessage.value = result.message
-    snackbarColor.value = 'success'
-    snackbar.value = true
-  }
-  catch (err: any) {
-    const data = err?.response?.data
-    if (data?.errors) {
-      passwordFieldErrors.value = {}
-      for (const [key, messages] of Object.entries(data.errors)) {
-        passwordFieldErrors.value[key] = (messages as string[])[0]
-      }
-    }
-    else {
-      passwordError.value = data?.message ?? 'Er is een fout opgetreden.'
-    }
-  }
-}
-</script>
-
-<template>
-  <VRow justify="center">
-    <VCol
-      cols="12"
-      md="8"
-      lg="6"
-    >
-      <h4 class="text-h4 mb-4">
-        Mijn Profiel
-      </h4>
-
-      <!-- Loading state -->
-      <VSkeletonLoader
-        v-if="portal.isLoadingPerson && !portal.currentPerson"
-        type="card"
-        class="mb-4"
-      />
-
-      <template v-else-if="portal.currentPerson">
-        <!-- Status & Event info -->
-        <VCard class="mb-4">
-          <VCardText>
-            <div class="d-flex align-center justify-space-between flex-wrap gap-2">
-              <div>
-                <div class="text-body-2 text-medium-emphasis">
-                  Evenement
-                </div>
-                <div class="text-body-1 font-weight-medium">
-                  {{ portal.activeEvent?.event_name }}
-                </div>
-              </div>
-              <VChip
-                :color="effectiveStatus.color"
-                variant="tonal"
-                size="small"
-              >
-                {{ effectiveStatus.label }}
-              </VChip>
-            </div>
-          </VCardText>
-        </VCard>
-
-        <!-- 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="portal.currentPerson.email || authStore.user?.email"
-                    label="E-mailadres"
-                    variant="outlined"
-                    density="comfortable"
-                    hide-details="auto"
-                    readonly
-                    prepend-inner-icon="tabler-lock"
-                  />
-                  <p class="text-caption text-medium-emphasis mt-1 mb-0">
-                    Je e-mailadres kan niet worden gewijzigd.
-                  </p>
-                </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>
-                <VCol cols="12">
-                  <VTextarea
-                    v-model="profileForm.remarks"
-                    label="Opmerkingen"
-                    variant="outlined"
-                    density="comfortable"
-                    hide-details="auto"
-                    rows="3"
-                    placeholder="Allergieën, dieetwensen, overige opmerkingen..."
-                  />
-                </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>
-          <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>
-      </template>
-
-      <VAlert
-        v-else
-        type="warning"
-        variant="tonal"
-      >
-        We konden je profiel niet laden. Probeer het later opnieuw.
-      </VAlert>
-
-      <!-- Snackbar -->
-      <VSnackbar
-        v-model="snackbar"
-        :color="snackbarColor"
-        :timeout="4000"
-      >
-        {{ snackbarMessage }}
-      </VSnackbar>
-    </VCol>
-  </VRow>
-</template>
diff --git a/apps/portal/src/pages/register/[eventSlug].vue b/apps/portal/src/pages/register/[eventSlug].vue
index aa23fdfe..939331a0 100644
--- a/apps/portal/src/pages/register/[eventSlug].vue
+++ b/apps/portal/src/pages/register/[eventSlug].vue
@@ -21,8 +21,9 @@ import type {
 definePage({
   name: 'volunteer-register',
   meta: {
-    layout: 'blank',
+    layout: 'portal',
     requiresAuth: false,
+    hideEventMenu: true,
   },
 })
 
diff --git a/apps/portal/src/pages/register/success.vue b/apps/portal/src/pages/register/success.vue
index 10e5f512..5f62db7e 100644
--- a/apps/portal/src/pages/register/success.vue
+++ b/apps/portal/src/pages/register/success.vue
@@ -4,8 +4,9 @@ import { useAuthStore } from '@/stores/useAuthStore'
 definePage({
   name: 'register-success',
   meta: {
-    layout: 'blank',
+    layout: 'portal',
     requiresAuth: false,
+    hideEventMenu: true,
   },
 })
 
diff --git a/apps/portal/typed-router.d.ts b/apps/portal/typed-router.d.ts
index d92b41b7..97ba4cae 100644
--- a/apps/portal/typed-router.d.ts
+++ b/apps/portal/typed-router.d.ts
@@ -25,7 +25,7 @@ declare module 'vue-router/auto-routes' {
     'portal-claim-shifts': RouteRecordInfo<'portal-claim-shifts', '/dashboard/claim-shifts', Record<never, never>, Record<never, never>>,
     'portal-my-shifts': RouteRecordInfo<'portal-my-shifts', '/dashboard/my-shifts', Record<never, never>, Record<never, never>>,
     'login': RouteRecordInfo<'login', '/login', Record<never, never>, Record<never, never>>,
-    'portal-profile': RouteRecordInfo<'portal-profile', '/profile', Record<never, never>, Record<never, never>>,
+    'portal-profiel': RouteRecordInfo<'portal-profiel', '/profiel', Record<never, never>, Record<never, never>>,
     'volunteer-register': RouteRecordInfo<'volunteer-register', '/register/:eventSlug', { eventSlug: ParamValue<true> }, { eventSlug: ParamValue<false> }>,
     'register-success': RouteRecordInfo<'register-success', '/register/success', Record<never, never>, Record<never, never>>,
     'volunteer-register-info': RouteRecordInfo<'volunteer-register-info', '/registreren', Record<never, never>, Record<never, never>>,