diff --git a/frontend/src/lib/components/admin/HolidayHours.svelte b/frontend/src/lib/components/admin/HolidayHours.svelte
index a13ac8b..ea2fca1 100644
--- a/frontend/src/lib/components/admin/HolidayHours.svelte
+++ b/frontend/src/lib/components/admin/HolidayHours.svelte
@@ -580,7 +580,11 @@
 										</select>
 									</td>
 									<td class="py-2">
-										<select bind:value={row.end_time} disabled={!row.is_open} class="flex h-9 w-24 rounded-md border border-input bg-background px-2 py-1 text-sm shadow-xs ring-offset-background transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50">
+										<select
+											bind:value={row.end_time}
+											disabled={!row.is_open}
+											class="flex h-9 w-24 rounded-md border border-input bg-background px-2 py-1 text-sm shadow-xs ring-offset-background transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
+										>
 											{#each Array(24) as _, hour (hour)}
 												{#each TIME15 as min (min)}
 													<option value="{String(hour).padStart(2, '0')}:{min}"
diff --git a/frontend/src/lib/components/admin/TimeBlockers.svelte b/frontend/src/lib/components/admin/TimeBlockers.svelte
index 31e1f23..92d9152 100644
--- a/frontend/src/lib/components/admin/TimeBlockers.svelte
+++ b/frontend/src/lib/components/admin/TimeBlockers.svelte
@@ -56,7 +56,12 @@
 		defaultHours?: WorkingHourRow[];
 	}
 
-	const { openUserModal, openBookingModal, rescheduleVersion = 0, defaultHours: defaultHoursProp }: Props = $props();
+	const {
+		openUserModal,
+		openBookingModal,
+		rescheduleVersion = 0,
+		defaultHours: defaultHoursProp
+	}: Props = $props();
 
 	const PAGE_SIZE = 5;
 
@@ -808,9 +813,9 @@
 				{:else if availableEndOptions.length === 0}
 					<p class="text-sm text-gray-400">No available end time after selected start</p>
 				{:else}
-							<select
-								class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-xs ring-offset-background transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
-								bind:value={endSelectValue}
+					<select
+						class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-xs ring-offset-background transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
+						bind:value={endSelectValue}
 						onchange={() => {
 							const p = parseSelectValue(endSelectValue);
 							endHour = p.hour;
diff --git a/frontend/src/routes/admin/+page.svelte b/frontend/src/routes/admin/+page.svelte
index f440214..64ab55b 100644
--- a/frontend/src/routes/admin/+page.svelte
+++ b/frontend/src/routes/admin/+page.svelte
@@ -72,8 +72,23 @@
 
 	// =============== Lifted Data Fetching ===============
 	// Fetch shared data once at page level to avoid duplicate API calls
-	let defaultHours = $state<Array<{ weekday: number; startTime: string; endTime: string; isOpen: boolean }>>([]);
-	let services = $state<Array<{ id: string; name: string; description: string; price: number; duration_minutes: number; is_active: boolean; patch_test_duration_hours: number; minimum_age_required: number; created_at: string; created_by?: string }>>([]);
+	let defaultHours = $state<
+		Array<{ weekday: number; startTime: string; endTime: string; isOpen: boolean }>
+	>([]);
+	let services = $state<
+		Array<{
+			id: string;
+			name: string;
+			description: string;
+			price: number;
+			duration_minutes: number;
+			is_active: boolean;
+			patch_test_duration_hours: number;
+			minimum_age_required: number;
+			created_at: string;
+			created_by?: string;
+		}>
+	>([]);
 
 	// Responsive: reset section defaults when crossing the 768px breakpoint
 	$effect(() => {
@@ -268,14 +283,22 @@
 		<!-- 2. Customers & Bookings -->
 		<div class="rounded-lg border">
 			<button
-				class="flex w-full items-center justify-between bg-gray-50 px-4 py-3 transition-colors hover:bg-gray-100 {sectionState.customers === 'expanded' ? 'rounded-t-lg' : 'rounded-lg'}"
+				class="flex w-full items-center justify-between bg-gray-50 px-4 py-3 transition-colors hover:bg-gray-100 {sectionState.customers ===
+				'expanded'
+					? 'rounded-t-lg'
+					: 'rounded-lg'}"
 				style="min-height: 44px;"
-				onclick={() => sectionState.customers = sectionState.customers === 'expanded' ? 'collapsed' : 'expanded'}
+				onclick={() =>
+					(sectionState.customers =
+						sectionState.customers === 'expanded' ? 'collapsed' : 'expanded')}
 				aria-expanded={sectionState.customers === 'expanded'}
 			>
 				<span class="font-medium text-gray-900">Customers & Bookings</span>
 				<ChevronDownIcon
-					class="h-4 w-4 text-gray-500 transition-transform duration-200 {sectionState.customers === 'expanded' ? '' : '-rotate-90'}"
+					class="h-4 w-4 text-gray-500 transition-transform duration-200 {sectionState.customers ===
+					'expanded'
+						? ''
+						: '-rotate-90'}"
 				/>
 			</button>
 			{#if sectionState.customers === 'expanded'}
@@ -291,36 +314,46 @@
 		<!-- 3. Services & Products -->
 		<div class="rounded-lg border">
 			<button
-				class="flex w-full items-center justify-between bg-gray-50 px-4 py-3 transition-colors hover:bg-gray-100 {sectionState.services === 'expanded' ? 'rounded-t-lg' : 'rounded-lg'}"
+				class="flex w-full items-center justify-between bg-gray-50 px-4 py-3 transition-colors hover:bg-gray-100 {sectionState.services ===
+				'expanded'
+					? 'rounded-t-lg'
+					: 'rounded-lg'}"
 				style="min-height: 44px;"
-				onclick={() => sectionState.services = sectionState.services === 'expanded' ? 'collapsed' : 'expanded'}
+				onclick={() =>
+					(sectionState.services = sectionState.services === 'expanded' ? 'collapsed' : 'expanded')}
 				aria-expanded={sectionState.services === 'expanded'}
 			>
 				<span class="font-medium text-gray-900">Services & Products</span>
 				<ChevronDownIcon
-					class="h-4 w-4 text-gray-500 transition-transform duration-200 {sectionState.services === 'expanded' ? '' : '-rotate-90'}"
+					class="h-4 w-4 text-gray-500 transition-transform duration-200 {sectionState.services ===
+					'expanded'
+						? ''
+						: '-rotate-90'}"
 				/>
 			</button>
 			{#if sectionState.services === 'expanded'}
 				<div class="space-y-4 p-4">
 					<CustomServicesManagement />
-					<PatchTestsManagement services={services} />
-					<ServicesManagement services={services} onRefresh={async () => {
-						if (!browser) return;
-						try {
-							const r = await fetch('/api/admin/services', {
-								headers: {
-									'Content-Type': 'application/json',
-									Authorization: `Bearer ${authStore.currentToken}`
+					<PatchTestsManagement {services} />
+					<ServicesManagement
+						{services}
+						onRefresh={async () => {
+							if (!browser) return;
+							try {
+								const r = await fetch('/api/admin/services', {
+									headers: {
+										'Content-Type': 'application/json',
+										Authorization: `Bearer ${authStore.currentToken}`
+									}
+								});
+								if (r.ok) {
+									services = await r.json();
 								}
-							});
-							if (r.ok) {
-								services = await r.json();
+							} catch (err) {
+								console.error('Error refreshing services:', err);
 							}
-						} catch (err) {
-							console.error('Error refreshing services:', err);
-						}
-					}} />
+						}}
+					/>
 				</div>
 			{/if}
 		</div>
@@ -328,21 +361,29 @@
 		<!-- 4. Scheduling & Hours -->
 		<div class="rounded-lg border">
 			<button
-				class="flex w-full items-center justify-between bg-gray-50 px-4 py-3 transition-colors hover:bg-gray-100 {sectionState.scheduling === 'expanded' ? 'rounded-t-lg' : 'rounded-lg'}"
+				class="flex w-full items-center justify-between bg-gray-50 px-4 py-3 transition-colors hover:bg-gray-100 {sectionState.scheduling ===
+				'expanded'
+					? 'rounded-t-lg'
+					: 'rounded-lg'}"
 				style="min-height: 44px;"
-				onclick={() => sectionState.scheduling = sectionState.scheduling === 'expanded' ? 'collapsed' : 'expanded'}
+				onclick={() =>
+					(sectionState.scheduling =
+						sectionState.scheduling === 'expanded' ? 'collapsed' : 'expanded')}
 				aria-expanded={sectionState.scheduling === 'expanded'}
 			>
 				<span class="font-medium text-gray-900">Scheduling & Hours</span>
 				<ChevronDownIcon
-					class="h-4 w-4 text-gray-500 transition-transform duration-200 {sectionState.scheduling === 'expanded' ? '' : '-rotate-90'}"
+					class="h-4 w-4 text-gray-500 transition-transform duration-200 {sectionState.scheduling ===
+					'expanded'
+						? ''
+						: '-rotate-90'}"
 				/>
 			</button>
 			{#if sectionState.scheduling === 'expanded'}
 				<div class="space-y-4 p-4">
-					<TimeBlockers {openUserModal} {openBookingModal} {rescheduleVersion} defaultHours={defaultHours} />
+					<TimeBlockers {openUserModal} {openBookingModal} {rescheduleVersion} {defaultHours} />
 					<HolidayHours />
-					<WeeklySchedule defaultHours={defaultHours} />
+					<WeeklySchedule {defaultHours} />
 				</div>
 			{/if}
 		</div>
@@ -350,14 +391,22 @@
 		<!-- 5. Promotions & Finance -->
 		<div class="rounded-lg border">
 			<button
-				class="flex w-full items-center justify-between bg-gray-50 px-4 py-3 transition-colors hover:bg-gray-100 {sectionState.promotions === 'expanded' ? 'rounded-t-lg' : 'rounded-lg'}"
+				class="flex w-full items-center justify-between bg-gray-50 px-4 py-3 transition-colors hover:bg-gray-100 {sectionState.promotions ===
+				'expanded'
+					? 'rounded-t-lg'
+					: 'rounded-lg'}"
 				style="min-height: 44px;"
-				onclick={() => sectionState.promotions = sectionState.promotions === 'expanded' ? 'collapsed' : 'expanded'}
+				onclick={() =>
+					(sectionState.promotions =
+						sectionState.promotions === 'expanded' ? 'collapsed' : 'expanded')}
 				aria-expanded={sectionState.promotions === 'expanded'}
 			>
 				<span class="font-medium text-gray-900">Promotions & Finance</span>
 				<ChevronDownIcon
-					class="h-4 w-4 text-gray-500 transition-transform duration-200 {sectionState.promotions === 'expanded' ? '' : '-rotate-90'}"
+					class="h-4 w-4 text-gray-500 transition-transform duration-200 {sectionState.promotions ===
+					'expanded'
+						? ''
+						: '-rotate-90'}"
 				/>
 			</button>
 			{#if sectionState.promotions === 'expanded'}
@@ -371,14 +420,21 @@
 		<!-- 6. Business Settings -->
 		<div class="rounded-lg border">
 			<button
-				class="flex w-full items-center justify-between bg-gray-50 px-4 py-3 transition-colors hover:bg-gray-100 {sectionState.settings === 'expanded' ? 'rounded-t-lg' : 'rounded-lg'}"
+				class="flex w-full items-center justify-between bg-gray-50 px-4 py-3 transition-colors hover:bg-gray-100 {sectionState.settings ===
+				'expanded'
+					? 'rounded-t-lg'
+					: 'rounded-lg'}"
 				style="min-height: 44px;"
-				onclick={() => sectionState.settings = sectionState.settings === 'expanded' ? 'collapsed' : 'expanded'}
+				onclick={() =>
+					(sectionState.settings = sectionState.settings === 'expanded' ? 'collapsed' : 'expanded')}
 				aria-expanded={sectionState.settings === 'expanded'}
 			>
 				<span class="font-medium text-gray-900">Business Settings</span>
 				<ChevronDownIcon
-					class="h-4 w-4 text-gray-500 transition-transform duration-200 {sectionState.settings === 'expanded' ? '' : '-rotate-90'}"
+					class="h-4 w-4 text-gray-500 transition-transform duration-200 {sectionState.settings ===
+					'expanded'
+						? ''
+						: '-rotate-90'}"
 				/>
 			</button>
 			{#if sectionState.settings === 'expanded'}