diff --git a/frontend/src/lib/components/admin/DiscountsManagement.svelte b/frontend/src/lib/components/admin/DiscountsManagement.svelte
index 90a89ec..e36d8df 100644
--- a/frontend/src/lib/components/admin/DiscountsManagement.svelte
+++ b/frontend/src/lib/components/admin/DiscountsManagement.svelte
@@ -499,7 +499,7 @@
 						<select
 							id="dc-scope"
 							bind:value={form.scope}
-							class="flex h-9 w-full rounded-md border border-gray-300 bg-transparent px-3 py-1 text-sm shadow-sm"
+							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"
 						>
 							<option value="all_bookings">All bookings</option>
 							<option value="first_booking_only">First booking only</option>
@@ -534,7 +534,7 @@
 						<select
 							id="dc-ms-type"
 							bind:value={form.milestone_type}
-							class="flex h-9 w-full rounded-md border border-gray-300 bg-transparent px-3 py-1 text-sm shadow-sm"
+							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"
 						>
 							<option value="per_user_booking_count">Per-user booking count</option>
 							<option value="global_booking_count">Global booking count</option>
@@ -563,7 +563,7 @@
 								<select
 									id="dc-ms-unit"
 									bind:value={form.milestone_unit}
-									class="flex h-9 w-full rounded-md border border-gray-300 bg-transparent px-3 py-1 text-sm shadow-sm"
+									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"
 								>
 									<option value="months">Months</option>
 									<option value="years">Years</option>
diff --git a/frontend/src/lib/components/admin/HolidayHours.svelte b/frontend/src/lib/components/admin/HolidayHours.svelte
index 414b7bb..a13ac8b 100644
--- a/frontend/src/lib/components/admin/HolidayHours.svelte
+++ b/frontend/src/lib/components/admin/HolidayHours.svelte
@@ -568,7 +568,7 @@
 										<select
 											bind:value={row.start_time}
 											disabled={!row.is_open}
-											class="w-24 text-sm"
+											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)}
@@ -580,7 +580,7 @@
 										</select>
 									</td>
 									<td class="py-2">
-										<select bind:value={row.end_time} disabled={!row.is_open} class="w-24 text-sm">
+										<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/today/TodayCalendar.svelte b/frontend/src/lib/components/today/TodayCalendar.svelte
index 0088883..cffbf55 100644
--- a/frontend/src/lib/components/today/TodayCalendar.svelte
+++ b/frontend/src/lib/components/today/TodayCalendar.svelte
@@ -935,7 +935,7 @@
 					<p class="text-sm text-red-500">Closed today</p>
 				{:else}
 					<select
-						class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 text-sm"
+						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={startSelectValue}
 						onchange={() => {
 							const p = parseSelectValue(startSelectValue);
@@ -963,7 +963,7 @@
 					<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-transparent px-3 text-sm"
+						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);