diff --git a/apps/app/src/components/sections/CreateShiftDialog.vue b/apps/app/src/components/sections/CreateShiftDialog.vue
index df399d21..e1481008 100644
--- a/apps/app/src/components/sections/CreateShiftDialog.vue
+++ b/apps/app/src/components/sections/CreateShiftDialog.vue
@@ -71,14 +71,18 @@ const form = ref({
 const errors = ref<Record<string, string>>({})
 const refVForm = ref<VForm>()
 
-/** Single accordion panel id for time-slot help; `undefined` = collapsed (saves vertical space). */
-const timeSlotHelpPanel = ref<string | undefined>(undefined)
+/** Time-slot hierarchy uitleg (ingeklapt = minder visuele ruis). */
+const timeSlotHelpOpen = ref(false)
 
 watch(modelValue, (open) => {
   if (open)
-    timeSlotHelpPanel.value = undefined
+    timeSlotHelpOpen.value = false
 })
 
+function toggleTimeSlotHelp() {
+  timeSlotHelpOpen.value = !timeSlotHelpOpen.value
+}
+
 // Populate form when editing
 watch(
   () => props.shift,
@@ -204,74 +208,103 @@ function onSubmit() {
   <VDialog
     v-model="modelValue"
     max-width="640"
-    scrollable
     @after-leave="!isEditing && resetForm()"
   >
-    <VCard rounded="lg">
-      <VCardItem class="py-4">
-        <VCardTitle class="text-h6">
+    <VCard
+      class="d-flex flex-column overflow-hidden"
+      max-height="min(90vh, 880px)"
+      rounded="lg"
+    >
+      <VCardItem class="flex-shrink-0 pb-3 pt-5 px-6">
+        <VCardTitle class="text-h6 ps-0">
           {{ isEditing ? 'Shift bewerken' : 'Shift toevoegen' }}
         </VCardTitle>
         <VCardSubtitle
           v-if="section"
-          class="text-body-2 text-high-emphasis opacity-100 mt-1"
+          class="text-body-2 mt-2 ps-0 d-flex align-center flex-wrap gap-2"
         >
-          <span>{{ section.name }}</span>
+          <span class="text-high-emphasis">{{ section.name }}</span>
           <VChip
             v-if="section.type === 'cross_event'"
-            size="x-small"
+            size="small"
             color="info"
             variant="tonal"
-            class="ms-2"
           >
             festival-breed
           </VChip>
           <span
             v-else-if="isSubEvent && eventDetail?.name"
             class="text-medium-emphasis"
-          > · {{ eventDetail.name }}</span>
+          >· {{ eventDetail.name }}</span>
         </VCardSubtitle>
       </VCardItem>
 
-      <VDivider />
+      <VDivider class="flex-shrink-0" />
 
       <VForm
         ref="refVForm"
+        class="d-flex flex-column flex-grow-1"
+        style="min-height: 0"
         @submit.prevent="onSubmit"
       >
-        <VCardText class="pt-5">
-          <VExpansionPanels
+        <VCardText
+          class="flex-grow-1 overflow-y-auto px-6 py-5"
+          style="min-height: 0"
+        >
+          <VAlert
             v-if="showInfoTooltip && tooltipText"
-            v-model="timeSlotHelpPanel"
-            class="mb-6 border rounded-lg"
-            variant="accordion"
-            elevation="0"
+            variant="tonal"
+            type="info"
+            border="start"
+            border-color="info"
+            density="comfortable"
+            :icon="false"
+            class="mb-6"
           >
-            <VExpansionPanel value="time-slot-help">
-              <VExpansionPanelTitle class="py-3 min-h-0">
-                <div class="d-flex align-center text-start">
+            <div class="d-flex align-start gap-3">
+              <VIcon
+                icon="tabler-info-circle"
+                color="info"
+                size="22"
+                class="mt-1 flex-shrink-0"
+              />
+              <div class="flex-grow-1 min-width-0">
+                <VBtn
+                  variant="text"
+                  block
+                  class="d-flex justify-space-between align-center px-0 text-high-emphasis"
+                  height="auto"
+                  min-height="0"
+                  @click="toggleTimeSlotHelp"
+                >
+                  <span class="text-body-1 font-weight-medium text-start me-2">
+                    Tijdsloten in dit evenement
+                  </span>
                   <VIcon
-                    icon="tabler-info-circle"
-                    color="info"
-                    size="22"
-                    class="me-3 flex-shrink-0"
+                    :icon="timeSlotHelpOpen ? 'tabler-chevron-up' : 'tabler-chevron-down'"
+                    size="20"
+                    class="text-medium-emphasis flex-shrink-0"
                   />
-                  <span class="text-body-1 font-weight-medium">Tijdsloten in dit evenement</span>
-                </div>
-              </VExpansionPanelTitle>
-              <VExpansionPanelText class="text-body-2">
-                <p class="mb-0">
-                  {{ tooltipText.main }}
-                </p>
-                <p class="text-caption text-medium-emphasis mb-0 mt-3">
-                  <span class="font-weight-medium text-high-emphasis">Tip:</span>
-                  {{ tooltipText.tip }}
-                </p>
-              </VExpansionPanelText>
-            </VExpansionPanel>
-          </VExpansionPanels>
+                </VBtn>
+                <VExpandTransition>
+                  <div
+                    v-show="timeSlotHelpOpen"
+                    class="text-body-2 mt-3"
+                  >
+                    <p class="mb-2">
+                      {{ tooltipText.main }}
+                    </p>
+                    <p class="text-caption text-medium-emphasis mb-0">
+                      <span class="font-weight-medium text-high-emphasis">Tip:</span>
+                      {{ tooltipText.tip }}
+                    </p>
+                  </div>
+                </VExpandTransition>
+              </div>
+            </div>
+          </VAlert>
 
-          <p class="text-overline text-medium-emphasis letter-spacing-normal mb-3">
+          <p class="text-caption font-weight-bold text-uppercase text-medium-emphasis tracking-normal mb-3">
             Tijd & rol
           </p>
           <VRow>
@@ -318,6 +351,9 @@ function onSubmit() {
                 v-else
                 type="info"
                 variant="tonal"
+                border="start"
+                border-color="info"
+                density="comfortable"
               >
                 <div class="d-flex align-center justify-space-between flex-wrap gap-2">
                   <span>Maak eerst een time slot aan</span>
@@ -344,9 +380,9 @@ function onSubmit() {
             </VCol>
           </VRow>
 
-          <VDivider class="my-5" />
+          <VDivider class="my-4" />
 
-          <p class="text-overline text-medium-emphasis letter-spacing-normal mb-3">
+          <p class="text-caption font-weight-bold text-uppercase text-medium-emphasis tracking-normal mb-2">
             Tijden (optioneel)
           </p>
           <p class="text-caption text-medium-emphasis mb-4">
@@ -361,8 +397,7 @@ function onSubmit() {
                 v-model="form.report_time"
                 label="Rapporttijd"
                 type="time"
-                hint="Aanwezig vanaf"
-                persistent-hint
+                hide-details="auto"
                 :error-messages="errors.report_time"
               />
             </VCol>
@@ -374,8 +409,7 @@ function onSubmit() {
                 v-model="form.actual_start_time"
                 label="Starttijd"
                 type="time"
-                hint="Leeg = time slot"
-                persistent-hint
+                hide-details="auto"
                 :error-messages="errors.actual_start_time"
               />
             </VCol>
@@ -387,16 +421,15 @@ function onSubmit() {
                 v-model="form.actual_end_time"
                 label="Eindtijd"
                 type="time"
-                hint="Leeg = time slot"
-                persistent-hint
+                hide-details="auto"
                 :error-messages="errors.actual_end_time"
               />
             </VCol>
           </VRow>
 
-          <VDivider class="my-5" />
+          <VDivider class="my-4" />
 
-          <p class="text-overline text-medium-emphasis letter-spacing-normal mb-3">
+          <p class="text-caption font-weight-bold text-uppercase text-medium-emphasis tracking-normal mb-3">
             Capaciteit
           </p>
           <VRow>
@@ -419,19 +452,21 @@ function onSubmit() {
             >
               <AppTextField
                 v-model.number="form.slots_open_for_claiming"
-                label="Open voor vrijwilligers (claimen)"
+                label="Open voor claimen"
                 type="number"
                 min="0"
                 :max="form.slots_total"
+                hint="Vrijwilligers kunnen zelf boeken tot dit maximum"
+                persistent-hint
                 :rules="[requiredValidator]"
                 :error-messages="errors.slots_open_for_claiming"
               />
             </VCol>
           </VRow>
 
-          <VDivider class="my-5" />
+          <VDivider class="my-4" />
 
-          <p class="text-overline text-medium-emphasis letter-spacing-normal mb-3">
+          <p class="text-caption font-weight-bold text-uppercase text-medium-emphasis tracking-normal mb-3">
             Opties
           </p>
           <VRow>
@@ -442,9 +477,9 @@ function onSubmit() {
               <VSwitch
                 v-model="form.is_lead_role"
                 color="primary"
+                density="comfortable"
                 label="Leidinggevende rol"
-                hint="Coördinatie / verantwoordelijke"
-                persistent-hint
+                hide-details
               />
             </VCol>
             <VCol
@@ -454,16 +489,19 @@ function onSubmit() {
               <VSwitch
                 v-model="form.allow_overlap"
                 color="primary"
+                density="comfortable"
                 label="Overlap toegestaan"
-                hint="Zelfde tijdvak, meerdere shifts voor één persoon"
-                persistent-hint
+                hide-details
               />
             </VCol>
           </VRow>
+          <p class="text-caption text-medium-emphasis mb-0 mt-2">
+            Leiding: coördinatie of verantwoordelijke. Overlap: dezelfde persoon mag meerdere shifts in hetzelfde tijdvak.
+          </p>
 
-          <VDivider class="my-5" />
+          <VDivider class="my-4" />
 
-          <p class="text-overline text-medium-emphasis letter-spacing-normal mb-3">
+          <p class="text-caption font-weight-bold text-uppercase text-medium-emphasis tracking-normal mb-3">
             Documentatie & status
           </p>
           <VRow>
@@ -487,9 +525,9 @@ function onSubmit() {
           </VRow>
         </VCardText>
 
-        <VDivider />
+        <VDivider class="flex-shrink-0" />
 
-        <VCardActions class="px-6 py-4">
+        <VCardActions class="flex-shrink-0 px-6 py-4 bg-surface">
           <VSpacer />
           <VBtn
             variant="text"