formatting

frontend/src/routes/book/+page.svelte

@@ -636,6 +636,24 @@
 		}
 	}
 
+	function getDayWithOrdinal(date: CalendarDate): string {
+		const monthName = new Date(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';
+		}
+	}
+
 	// Use the formatted duration everywhere
 	const formattedTotalDuration = $derived(formatDuration(getTotalDuration()));
 
@@ -823,6 +841,9 @@
 							{#if (loadingWorkingHours || loadingAvailableHours) && selectedDate}
 								<div class="text-center text-sm text-gray-500">Loading available times...</div>
 							{:else if groupedTimeSlots.length > 0}
+								{#if selectedDate}
+									<div class="grid justify-center gap-2">{getDayWithOrdinal(selectedDate)}</div>
+								{/if}
 								<!-- Grouped Time Slots Grid - ORIGINAL STYLING BUT WITH GROUPED UNAVAILABLE SLOTS -->
 								<div class="grid gap-2">
 									{#each groupedTimeSlots as slot (slot.startTime)}