diff --git a/frontend/src/routes/book/+page.svelte b/frontend/src/routes/book/+page.svelte
index a8270e1..d8fbffe 100644
--- a/frontend/src/routes/book/+page.svelte
+++ b/frontend/src/routes/book/+page.svelte
@@ -726,7 +726,7 @@
 				<Card.Description>Select one or more treatments for your appointment</Card.Description>
 			</Card.Header>
 			<Card.Content class="space-y-4">
-				<div class="grid w-full grid-cols-2 gap-4">
+				<div class="grid w-full grid-cols-1 gap-4 md:grid-cols-2">
 					{#if servicesLoading}
 						<p>Loading services...</p>
 					{:else if services.length === 0}
@@ -822,11 +822,11 @@
 								bind:value={selectedDate}
 								bind:placeholder
 								{isDateUnavailable}
-								class="data-unavailable:line-through data-unavailable:opacity-100 bg-transparent p-0 [--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)] [&_[data-outside-month]]:hidden"
+								class="data-unavailable:line-through data-unavailable:opacity-100 bg-transparent p-0 [--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)] [&_[data-outside-month]]:pointer-events-none [&_[data-outside-month]]:opacity-0"
 								weekdayFormat="short"
 								minValue={minDate}
 								maxValue={maxCalendarDate}
-								weekStartsOn={1}
+								locale="en-GB"
 							/>
 						</div>
 						<div