diff --git a/frontend/src/lib/components/admin/BookingCreateModal.svelte b/frontend/src/lib/components/admin/BookingCreateModal.svelte
index 5c6c03d..f047880 100644
--- a/frontend/src/lib/components/admin/BookingCreateModal.svelte
+++ b/frontend/src/lib/components/admin/BookingCreateModal.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { authStore } from '$lib/stores/auth.svelte';
 	import { toast } from 'svelte-sonner';
-	import { SvelteMap, SvelteDate } from 'svelte/reactivity';
+	import { SvelteDate } from 'svelte/reactivity';
 	import { CalendarDate, getLocalTimeZone, type DateValue } from '@internationalized/date';
 
 	// UI Components
@@ -18,11 +18,22 @@
 	import BookingActions from '$lib/components/booking/BookingActions.svelte';
 	import ServiceSelector from '$lib/components/booking/ServiceSelector.svelte';
 	import DatePicker from '$lib/components/booking/DatePicker.svelte';
+	import TimeSlotList from '$lib/components/booking/TimeSlotList.svelte';
+	import SelectedTimeSummary from '$lib/components/booking/SelectedTimeSummary.svelte';
 
 	// Types
 	import type { Service, WorkingHoursDay, AvailableHoursDay } from '$lib/types/booking';
 
-	import { extractBookedSlots, getLunchProtectionForSlots } from '$lib/lunchProtection';
+	import {
+		buildLunchProtection,
+		generateAvailableTimeSlots,
+		generateGroupedTimeSlots,
+		formatTime,
+		calculateEndTime,
+		getDayWithOrdinal,
+		type DayHours,
+		type DayAvailability
+	} from '$lib/utils/timeSlots';
 
 	// =============== Props ===============
 	interface Props {
@@ -67,16 +78,12 @@
 	);
 	let selectedDate = $state<CalendarDate | undefined>(undefined);
 	let selectedTime = $state<string | null>(null);
-	let workingHours = $state<Record<
-		string,
-		{ isOpen: boolean; startTime: string; endTime: string }
-	> | null>(null);
-	let availableHours = $state<Record<
-		string,
-		{ isOpen: boolean; slots: Array<{ startTime: string; endTime: string }> }
-	> | null>(null);
+	let workingHours = $state<Record<string, DayHours> | null>(null);
+	let availableHours = $state<Record<string, DayAvailability> | null>(null);
 	let loadingWorkingHours = $state(false);
 	let loadingAvailableHours = $state(false);
+	let hoursRangeGeneration = $state(0);
+	let hoursMonthGeneration = $state(0);
 
 	// Date Boundaries
 	const today = new SvelteDate();
@@ -98,8 +105,9 @@
 	let isReserving = $state(false);
 
 	// =============== Cache ===============
-	const workingHoursCache = new SvelteMap<string, Record<string, any>>();
-	const availableHoursCache = new SvelteMap<string, Record<string, any>>();
+	let workingHoursCache: Record<string, Record<string, any>> = {};
+	let availableHoursCache: Record<string, Record<string, any>> = {};
+	let loadingMonthKeys: Set<string> = new Set();
 
 	// =============== Derived Helpers ===============
 	function getTotalDuration() {
@@ -120,67 +128,18 @@
 	}
 
 	// =============== Lunch Protection ===============
-	const lunchProtectionStatus = $derived(() => {
-		if (!selectedDate || !workingHours || !availableHours || selectedServices.length === 0) {
-			return new Map();
-		}
-
-		const dateStr = selectedDate.toString();
-		const dayWorkingHours = workingHours[dateStr];
-		const dayAvailableHours = availableHours[dateStr];
-
-		if (!dayWorkingHours?.isOpen || !dayAvailableHours?.slots) {
-			return new Map();
-		}
-
-		const existingBookings = extractBookedSlots(
-			dayWorkingHours.startTime,
-			dayWorkingHours.endTime,
-			dayAvailableHours.slots
-		);
-
-		return getLunchProtectionForSlots(
-			dayWorkingHours.startTime,
-			dayWorkingHours.endTime,
-			existingBookings,
-			getTotalDuration(),
-			15,
-			true // Admin journey - 30min minimum, warn if <1h
-		);
-	});
+	const lunchProtection = $derived(
+		(selectedDate && selectedServices.length > 0)
+			? buildLunchProtection(selectedDate, workingHours, availableHours, getTotalDuration(), true)
+			: new Map()
+	);
 
 	function formatDuration(minutes: number): string {
 		const hours = Math.floor(minutes / 60);
 		const remainingMinutes = minutes % 60;
-
-		if (hours === 0) {
-			return `${remainingMinutes} minutes`;
-		} else if (remainingMinutes === 0) {
-			return `${hours} ${hours === 1 ? 'hour' : 'hours'}`;
-		} else {
-			return `${hours} ${hours === 1 ? 'hour' : 'hours'} ${remainingMinutes} minutes`;
-		}
-	}
-
-	function getDayWithOrdinal(date: CalendarDate): string {
-		const monthName = new SvelteDate(date.year, date.month - 1, date.day).toLocaleDateString(
-			'en-GB',
-			{
-				month: 'long'
-			}
-		);
-		const day = date.day;
-		if (day > 3 && day < 21) return monthName + ' ' + day + 'th';
-		switch (day % 10) {
-			case 1:
-				return monthName + ' ' + day + 'st';
-			case 2:
-				return monthName + ' ' + day + 'nd';
-			case 3:
-				return monthName + ' ' + day + 'rd';
-			default:
-				return monthName + ' ' + day + 'th';
-		}
+		if (hours === 0) return `${remainingMinutes} minutes`;
+		if (remainingMinutes === 0) return `${hours} ${hours === 1 ? 'hour' : 'hours'}`;
+		return `${hours} ${hours === 1 ? 'hour' : 'hours'} ${remainingMinutes} minutes`;
 	}
 
 	const formattedTotalDuration = $derived(formatDuration(getTotalDuration()));
@@ -197,7 +156,7 @@
 
 	// =============== Effects ===============
 	let wasOpen = false;
-	let bookingCreateInitialLoadDone = $state(false);
+	let userNavigatedCalendar = $state(false);
 
 	$effect(() => {
 		if (open && !wasOpen) {
@@ -216,24 +175,56 @@
 		}
 	});
 
-	// Preload 3 months when entering step 4 to prevent snap-back
+	// Preload current + next month on entering step 4; individual months fetched on navigation
+	let bookingCreateInitialLoadDone = $state(false);
 	$effect(() => {
 		if (open && currentStep === 4 && !bookingCreateInitialLoadDone) {
-			fetchHoursRange(placeholder, 3);
+			fetchHoursRange(placeholder, 2);
 			bookingCreateInitialLoadDone = true;
 		}
 	});
 
-	// Fetch additional months when navigating beyond preloaded range
+	// Safety net: fetch when navigating to an uncached month
 	$effect(() => {
-		if (open && currentStep === 4 && bookingCreateInitialLoadDone && placeholder) {
+		if (open && currentStep === 4 && bookingCreateInitialLoadDone) {
 			const monthKey = `${placeholder.year}-${String(placeholder.month).padStart(2, '0')}`;
-			if (!workingHoursCache.has(monthKey)) {
+			if (!(monthKey in workingHoursCache) && !loadingMonthKeys.has(monthKey)) {
 				fetchHoursForMonth(placeholder);
 			}
 		}
 	});
 
+	// Auto-select first available date once data loads (timing-safe, data-driven)
+	let bookingCreateAutoSelectDone = $state(false);
+	$effect(() => {
+		if (open && currentStep === 4 && workingHours && availableHours && !selectedDate && selectedServices.length > 0 && !userNavigatedCalendar && !bookingCreateAutoSelectDone) {
+			bookingCreateAutoSelectDone = true;
+			const now = new SvelteDate();
+			const maxDateJs = new SvelteDate(
+				maxCalendarDate.year,
+				maxCalendarDate.month - 1,
+				maxCalendarDate.day
+			);
+			const daysDifference = Math.floor(
+				(maxDateJs.getTime() - now.getTime()) / (1000 * 60 * 60 * 24)
+			);
+			const daysToCheck = Math.min(daysDifference, 180);
+			for (let i = 0; i <= daysToCheck; i++) {
+				const checkDate = new SvelteDate(now);
+				checkDate.setDate(now.getDate() + i);
+				const dateStr = checkDate.toISOString().split('T')[0];
+				const calDate = new CalendarDate(checkDate.getFullYear(), checkDate.getMonth() + 1, checkDate.getDate());
+				if (workingHours[dateStr]?.isOpen && !isDateUnavailable(calDate)) {
+					selectedDate = calDate;
+					if (!userNavigatedCalendar) {
+						placeholder = new CalendarDate(checkDate.getFullYear(), checkDate.getMonth() + 1, 1);
+					}
+					break;
+				}
+			}
+		}
+	});
+
 	// =============== Reset State ===============
 	function resetState() {
 		currentStep = 1;
@@ -248,11 +239,14 @@
 		selectedTime = null;
 		notes = '';
 		serviceOverrides = {};
-		workingHoursCache.clear();
-		availableHoursCache.clear();
+		workingHoursCache = {};
+		availableHoursCache = {};
 		workingHours = null;
 		availableHours = null;
 		bookingCreateInitialLoadDone = false;
+		userNavigatedCalendar = false;
+		bookingCreateAutoSelectDone = false;
+		loadingMonthKeys = new Set();
 		// Clear reservation state
 		reservationId = null;
 		reservationExpiresAt = null;
@@ -325,6 +319,9 @@
 		const startStr = startDate.toString();
 		const endStr = `${endYear}-${String(endMonth).padStart(2, '0')}-${String(daysInEndMonth).padStart(2, '0')}`;
 
+		hoursRangeGeneration++;
+		const gen = hoursRangeGeneration;
+
 		loadingWorkingHours = true;
 		loadingAvailableHours = true;
 
@@ -348,6 +345,8 @@
 				whData.forEach((d) => (whMap[d.date] = { isOpen: d.isOpen, startTime: d.startTime, endTime: d.endTime }));
 				ahData.forEach((d) => (ahMap[d.date] = { isOpen: d.isOpen, slots: d.slots }));
 
+				if (gen !== hoursRangeGeneration) return; // Stale response, discard
+
 				// Cache by month key
 				for (let i = 0; i < months; i++) {
 					let mYear = startDate.year;
@@ -357,12 +356,13 @@
 						mYear++;
 					}
 					const key = `${mYear}-${String(mMonth).padStart(2, '0')}`;
-					workingHoursCache.set(key, whMap);
-					availableHoursCache.set(key, ahMap);
+					workingHoursCache[key] = whMap;
+					availableHoursCache[key] = ahMap;
 				}
 
-				workingHours = whMap;
-				availableHours = ahMap;
+				// MERGE instead of replace — preserves data from previously loaded months
+				workingHours = { ...workingHours, ...whMap };
+				availableHours = { ...availableHours, ...ahMap };
 			}
 		} catch (err) {
 			console.error('Failed to fetch hours', err);
@@ -376,12 +376,20 @@
 	async function fetchHoursForMonth(date: CalendarDate) {
 		const monthKey = `${date.year}-${String(date.month).padStart(2, '0')}`;
 
-		if (workingHoursCache.has(monthKey) && availableHoursCache.has(monthKey)) {
-			workingHours = workingHoursCache.get(monthKey)!;
-			availableHours = availableHoursCache.get(monthKey)!;
+		if (monthKey in workingHoursCache && monthKey in availableHoursCache) {
+			// MERGE instead of replace — preserves data from other loaded months
+			workingHours = { ...workingHours, ...workingHoursCache[monthKey] };
+			availableHours = { ...availableHours, ...availableHoursCache[monthKey] };
 			return;
 		}
 
+		// Prevent re-entrant calls for the same month
+		if (loadingMonthKeys.has(monthKey)) return;
+		loadingMonthKeys = new Set(loadingMonthKeys).add(monthKey);
+
+		hoursMonthGeneration++;
+		const gen = hoursMonthGeneration;
+
 		loadingWorkingHours = true;
 		loadingAvailableHours = true;
 
@@ -414,10 +422,12 @@
 				);
 				ahData.forEach((d) => (ahMap[d.date] = { isOpen: d.isOpen, slots: d.slots }));
 
-				workingHoursCache.set(monthKey, whMap);
-				availableHoursCache.set(monthKey, ahMap);
-				workingHours = whMap;
-				availableHours = ahMap;
+				if (gen !== hoursMonthGeneration) return; // Stale response, discard
+
+				workingHoursCache[monthKey] = whMap;
+				availableHoursCache[monthKey] = ahMap;
+				workingHours = { ...workingHours, ...whMap };
+				availableHours = { ...availableHours, ...ahMap };
 			}
 		} catch (err) {
 			console.error('Failed to fetch hours', err);
@@ -425,6 +435,7 @@
 		} finally {
 			loadingWorkingHours = false;
 			loadingAvailableHours = false;
+			loadingMonthKeys = new Set([...loadingMonthKeys].filter(k => k !== monthKey));
 		}
 	}
 
@@ -562,216 +573,9 @@
 		selectedTime = null;
 	}
 
-	// Time Slot Generation
-	function calculateEndTime(startTime: string, durationMinutes: number): string {
-		const [hours, minutes] = startTime.split(':').map(Number);
-		const totalMinutes = hours * 60 + minutes + durationMinutes;
-		const endHours = Math.floor(totalMinutes / 60);
-		const endMinutes = totalMinutes % 60;
-		return `${String(endHours).padStart(2, '0')}:${String(endMinutes).padStart(2, '0')}`;
-	}
-
-	function timeToMinutes(time: string): number {
-		const [hours, minutes] = time.split(':').map(Number);
-		return hours * 60 + minutes;
-	}
-
-	function calculatePreviousTime(time: string): string {
-		const [hours, minutes] = time.split(':').map(Number);
-		let totalMinutes = hours * 60 + minutes;
-		totalMinutes -= 15;
-		const prevHours = Math.floor(totalMinutes / 60);
-		const prevMinutes = totalMinutes % 60;
-		return `${String(prevHours).padStart(2, '0')}:${String(prevMinutes).padStart(2, '0')}`;
-	}
-
-	function formatTime(time: string): string {
-		const parts = time.split(':').map(Number);
-		const hours = parts[0];
-		const minutes = parts.length > 1 ? parts[1] : 0;
-
-		if (hours === 12 && minutes === 0) {
-			return 'Noon';
-		} else if (hours === 0 && minutes === 0) {
-			return 'Midnight';
-		}
-
-		const period = hours >= 12 ? 'PM' : 'AM';
-		const displayHours = hours % 12 || 12;
-		return `${displayHours}:${minutes.toString().padStart(2, '0')} ${period}`;
-	}
-
-	function normalizeTime(time: string): string {
-		// Strip seconds if present (convert HH:MM:SS to HH:MM)
-		const parts = time.split(':');
-		return `${parts[0]}:${parts[1]}`;
-	}
-
-	function generateAvailableTimeSlots(duration: number, date: CalendarDate | undefined): string[] {
-		if (!date || !workingHours || !availableHours) return [];
-
-		const dateStr = date.toString();
-		const dayWorkingHours = workingHours[dateStr];
-		const dayAvailableHours = availableHours[dateStr];
-
-		if (!dayWorkingHours?.isOpen || !dayAvailableHours?.slots) return [];
-
-		const slots: string[] = [];
-		const now = new SvelteDate();
-		const today = new CalendarDate(now.getFullYear(), now.getMonth() + 1, now.getDate());
-		const isToday = date.compare(today) === 0;
-		const protection = lunchProtectionStatus();
-
-		for (const slot of dayAvailableHours.slots) {
-			const [startHour, startMinute] = slot.startTime.split(':').map(Number);
-			const [endHour, endMinute] = slot.endTime.split(':').map(Number);
-			let startTotalMinutes = startHour * 60 + startMinute;
-			const endTotalMinutes = endHour * 60 + endMinute;
-
-			if (isToday) {
-				// Calculate current time + buffer
-				const currentMinutes = now.getHours() * 60 + now.getMinutes();
-				let minimumStart = currentMinutes + 15;
-
-				// FIX: Snap to the NEXT 15-minute interval
-				// Math.ceil(x / 15) * 15 rounds up to the nearest 15
-				minimumStart = Math.ceil(minimumStart / 15) * 15;
-
-				startTotalMinutes = Math.max(startTotalMinutes, minimumStart);
-			}
-
-			for (let minutes = startTotalMinutes; minutes < endTotalMinutes; minutes += 15) {
-				const slotEndMinutes = minutes + duration;
-
-				if (slotEndMinutes <= endTotalMinutes) {
-					const hour = Math.floor(minutes / 60);
-					const minute = minutes % 60;
-					const timeStr = `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;
-
-					const protectionResult = protection.get(timeStr);
-					if (!protectionResult || !protectionResult.isBlocked) {
-						slots.push(timeStr);
-					}
-					// If blocked, skip adding this slot
-				}
-			}
-		}
-		return slots;
-	}
-
-	function generateGroupedTimeSlots(
-		duration: number,
-		date: CalendarDate | undefined
-	): Array<{
-		type: 'available' | 'unavailable';
-		startTime: string;
-		endTime: string;
-		isGrouped?: boolean;
-	}> {
-		if (!date || !workingHours) return [];
-
-		const dateStr = date.toString();
-		const dayWorkingHours = workingHours[dateStr];
-
-		if (!dayWorkingHours || !dayWorkingHours.isOpen) return [];
-
-		const groupedSlots: Array<{
-			type: 'available' | 'unavailable';
-			startTime: string;
-			endTime: string;
-			isGrouped?: boolean;
-		}> = [];
-
-		const [startHour, startMinute] = dayWorkingHours.startTime.split(':').map(Number);
-		const [endHour, endMinute] = dayWorkingHours.endTime.split(':').map(Number);
-
-		let startTotalMinutes = startHour * 60 + startMinute;
-		const endTotalMinutes = endHour * 60 + endMinute;
-
-		const now = new SvelteDate();
-		const today = new CalendarDate(now.getFullYear(), now.getMonth() + 1, now.getDate());
-		const isToday = date.compare(today) === 0;
-
-		if (isToday) {
-			const currentMinutes = now.getHours() * 60 + now.getMinutes();
-			let minimumStart = currentMinutes + 15;
-
-			// FIX: Also snap here so the visual blocks start at 00, 15, 30, 45
-			minimumStart = Math.ceil(minimumStart / 15) * 15;
-
-			startTotalMinutes = Math.max(startTotalMinutes, minimumStart);
-		}
-
-		const availableSlots = generateAvailableTimeSlots(duration, date);
-		let currentUnavailableStart: string | null = null;
-		let lastAvailableEndTime: string | null = null;
-		const protection = lunchProtectionStatus();
-
-		for (let minutes = startTotalMinutes; minutes < endTotalMinutes; minutes += 15) {
-			const hour = Math.floor(minutes / 60);
-			const minute = minutes % 60;
-			const timeStr = `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;
-
-			const isInAvailableSlots = availableSlots.includes(timeStr);
-			const protectionResult = protection.get(timeStr);
-			const isLunchBlocked = protectionResult?.isBlocked || false;
-			const isAvailable = isInAvailableSlots && !isLunchBlocked;
-
-			if (isAvailable) {
-				if (currentUnavailableStart !== null) {
-					const unavailableStartTime = lastAvailableEndTime || currentUnavailableStart;
-					const groupEndTime = calculatePreviousTime(timeStr);
-					if (timeToMinutes(unavailableStartTime) < timeToMinutes(groupEndTime)) {
-						groupedSlots.push({
-							type: 'unavailable',
-							startTime: unavailableStartTime,
-							endTime: groupEndTime,
-							isGrouped: true
-						});
-					}
-					currentUnavailableStart = null;
-				}
-
-				const slotEndTime = calculateEndTime(timeStr, duration);
-				lastAvailableEndTime = slotEndTime;
-				groupedSlots.push({
-					type: 'available',
-					startTime: timeStr,
-					endTime: slotEndTime
-				});
-
-				if (timeToMinutes(slotEndTime) >= endTotalMinutes) break;
-			} else {
-				if (currentUnavailableStart === null) {
-					currentUnavailableStart = timeStr;
-				}
-			}
-		}
-
-		if (currentUnavailableStart !== null) {
-			const lastAvailableSlot = groupedSlots.filter((s) => s.type === 'available').pop();
-			const lastAvailableEnd = lastAvailableSlot ? timeToMinutes(lastAvailableSlot.endTime) : 0;
-			const unavailableStartMinutes = timeToMinutes(currentUnavailableStart);
-
-			if (unavailableStartMinutes < endTotalMinutes && lastAvailableEnd < endTotalMinutes) {
-				const unavailableStartTime = lastAvailableSlot
-					? lastAvailableSlot.endTime
-					: currentUnavailableStart;
-				groupedSlots.push({
-					type: 'unavailable',
-					startTime: unavailableStartTime,
-					endTime: normalizeTime(dayWorkingHours.endTime),
-					isGrouped: true
-				});
-			}
-		}
-
-		return groupedSlots;
-	}
-
 	const groupedTimeSlots = $derived(
 		currentStep === 4 && selectedServices.length > 0 && selectedDate
-			? generateGroupedTimeSlots(getTotalDuration(), selectedDate)
+			? generateGroupedTimeSlots(selectedDate, workingHours, availableHours, getTotalDuration(), lunchProtection)
 			: []
 	);
 
@@ -784,30 +588,20 @@
 		const dayHours = workingHours[dateStr];
 		if (!dayHours?.isOpen) return true;
 
-		if (selectedServices.length > 0) {
-			const duration = getTotalDuration();
-			const slots = generateAvailableTimeSlots(duration, date);
-			if (slots.length === 0) return true;
+		// No available hours data for this date = data not loaded = unavailable
+		if (!availableHours?.[dateStr]) return true;
+		// API returned empty slots = no availability at all
+		if (!availableHours[dateStr].slots || availableHours[dateStr].slots.length === 0) return true;
 
-			const dayAvailableHours = availableHours?.[dateStr];
-			if (dayAvailableHours?.slots) {
-				const existingBookings = extractBookedSlots(
-					dayHours.startTime,
-					dayHours.endTime,
-					dayAvailableHours.slots
-				);
-				const lunchProtection = getLunchProtectionForSlots(
-					dayHours.startTime,
-					dayHours.endTime,
-					existingBookings,
-					duration,
-					15,
-					true
-				);
-				const validSlots = slots.filter((t) => !lunchProtection.get(t)?.isBlocked);
-				if (validSlots.length === 0) return true;
-			}
-		}
+		// Determine the duration to check: if services are selected use their total,
+		// otherwise use a minimum of 15 minutes (any meaningful booking needs at least this)
+		const duration = selectedServices.length > 0 ? getTotalDuration() : 15;
+		if (duration <= 0) return true;
+
+		// Build lunch protection specifically for the date being checked
+		const dayProtection = buildLunchProtection(date as CalendarDate, workingHours, availableHours, duration, true);
+		const slots = generateAvailableTimeSlots(date as CalendarDate, workingHours, availableHours, duration, dayProtection);
+		if (slots.length === 0) return true;
 
 		return false;
 	}
@@ -894,6 +688,7 @@
 			if (res.ok) {
 				toast.success('Booking created successfully!');
 				open = false;
+				window.dispatchEvent(new CustomEvent('bookingApproved'));
 				onBookingCreated?.();
 			} else {
 				const errorText = await res.text();
@@ -934,12 +729,12 @@
 		// Clear date/time and cache when duration changes
 		selectedDate = undefined;
 		selectedTime = null;
-		availableHoursCache.clear();
+		availableHoursCache = {};
 	}
 </script>
 
 <Modal.Root bind:open>
-	<Modal.Content class="max-h-[90vh] max-w-4xl overflow-y-auto">
+	<Modal.Content class="max-h-[90vh] max-w-[calc(100%-2rem)] overflow-y-auto sm:max-w-2xl md:max-w-4xl">
 		<Modal.Header>
 			<Modal.Title>Create Admin Booking</Modal.Title>
 			<Modal.Description>
@@ -1205,7 +1000,7 @@
 									{#if serviceOverrides[service.id]}
 										<div class="rounded-lg border bg-white p-4">
 											<div class="mb-3 font-medium">{service.name}</div>
-											<div class="grid grid-cols-2 gap-4">
+											<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
 												<div class="space-y-2">
 													<Label for="price-{service.id}" class="text-xs text-gray-600"
 														>Price (£)</Label
@@ -1317,105 +1112,55 @@
 								</div>
 							</div>
 						{/if}
-						{#if loadingWorkingHours}
-							<div class="flex items-center justify-center p-6">
-								<p>Loading available dates...</p>
-							</div>
-						{:else}
-							<div class="flex items-center justify-center p-6">
-								<DatePicker
-									date={selectedDate}
-									{placeholder}
-									minValue={minDate}
-									maxValue={maxCalendarDate}
-									{isDateUnavailable}
-									onchange={(newDate) => {
-										selectedDate = newDate;
-										selectedTime = null;
-									}}
-								onPlaceholderChange={(newPlaceholder) => {
-									placeholder = newPlaceholder;
-									fetchHoursForMonth(newPlaceholder);
+						<div class="flex items-center justify-center p-6">
+							<DatePicker
+								date={selectedDate}
+								{placeholder}
+								minValue={minDate}
+								maxValue={maxCalendarDate}
+								{isDateUnavailable}
+								onchange={(newDate) => {
+									selectedDate = newDate;
+									selectedTime = null;
 								}}
-								/>
-							</div>
-						{/if}
+							onPlaceholderChange={(newPlaceholder) => {
+								placeholder = newPlaceholder;
+								userNavigatedCalendar = true;
+								fetchHoursForMonth(newPlaceholder);
+							}}
+							/>
+						</div>
 
-						{#if loadingAvailableHours}
+						{#if loadingAvailableHours && selectedDate}
 							<div class="flex items-center justify-center border-t p-6">
 								<p class="text-sm text-gray-500">Loading times...</p>
 							</div>
 						{:else if selectedDate}
-							<div
-								class="no-scrollbar flex max-h-40 w-full scroll-pb-6 flex-col gap-4 overflow-y-auto border-t p-6"
-							>
-								{#if formattedSelectedDate}
-									<div class="grid justify-center gap-2">{formattedSelectedDate}</div>
-								{/if}
-
-								{#if groupedTimeSlots.length > 0}
-									<div class="grid gap-2">
-										{#each groupedTimeSlots as slot (slot.type + '-' + slot.startTime + '-' + slot.endTime)}
-											{#if slot.type === 'available'}
-												{@const protection = lunchProtectionStatus().get(slot.startTime)}
-												{#if protection?.isBlocked}
-													<!-- Blocked by lunch protection -->
-													<Button
-														variant="outline"
-														class="w-full cursor-not-allowed opacity-50 hover:bg-gray-100"
-														disabled
-														title={protection.warningMessage || 'Lunch protection'}
-													>
-														{formatTime(slot.startTime)}
-														<span class="text-gray-500">- {formatTime(slot.endTime)}</span>
-													</Button>
-												{:else}
-													<Button
-														variant="outline"
-														onclick={() => {
-															selectedTime = slot.startTime;
-														}}
-														class={`w-full hover:bg-fuchsia-50 ${
-															slot.startTime === selectedTime ? 'bg-fuchsia-100' : ''
-														} ${protection?.showWarning ? 'border-amber-400 bg-amber-50' : ''}`}
-														title={protection?.warningMessage}
-													>
-														{#if protection?.showWarning}
-															<span class="mr-1 text-amber-500">
-																<svg
-																	xmlns="http://www.w3.org/2000/svg"
-																	class="h-4 w-4"
-																	viewBox="0 0 20 20"
-																	fill="currentColor"
-																>
-																	<path
-																		fill-rule="evenodd"
-																		d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
-																		clip-rule="evenodd"
-																	/>
-																</svg>
-															</span>
-														{/if}
-														{formatTime(slot.startTime)}
-														<span class="text-gray-500">- {formatTime(slot.endTime)}</span>
-													</Button>
-												{/if}
-											{:else}
-												<Button
-													variant="outline"
-													class="w-full cursor-not-allowed opacity-50 hover:bg-gray-100"
-													disabled
-												>
-													{formatTime(slot.startTime)}
-													<span class="text-gray-500">- {formatTime(slot.endTime)}</span>
-												</Button>
-											{/if}
-										{/each}
-									</div>
-								{:else}
-									<p class="text-center text-sm text-gray-500">No available slots</p>
-								{/if}
+							<div class="border-t">
+								<div class="max-h-64 overflow-y-auto p-6">
+									{#if formattedSelectedDate}
+										<div class="mb-3 grid justify-center gap-2 text-sm font-medium">{formattedSelectedDate}</div>
+									{/if}
+									<TimeSlotList
+										slots={groupedTimeSlots}
+										{selectedTime}
+										duration={getTotalDuration()}
+										protection={lunchProtection}
+										onSelect={(time) => { selectedTime = time; }}
+									/>
+								</div>
 							</div>
+							{#if selectedDate && selectedTime}
+								<div class="px-6 pb-4">
+									<SelectedTimeSummary
+										selectedDate={formattedSelectedDate || ''}
+										selectedTime={formatTime(selectedTime)}
+										endTime={formatTime(calculateEndTime(selectedTime, getTotalDuration()))}
+										duration={getTotalDuration()}
+										protection={lunchProtection.get(selectedTime)}
+									/>
+								</div>
+							{/if}
 						{:else}
 							<div class="flex items-center justify-center border-t p-6">
 								<p class="text-center text-sm text-gray-500">