diff --git a/frontend/src/routes/SearchFilterBar.svelte b/frontend/src/routes/SearchFilterBar.svelte
index 589476df..20328af0 100644
--- a/frontend/src/routes/SearchFilterBar.svelte
+++ b/frontend/src/routes/SearchFilterBar.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
 import TagInput from '$lib/components/TagInput.svelte';
+import DateInput from '$lib/components/DateInput.svelte';
 import SortDropdown from '$lib/components/SortDropdown.svelte';
 import { slide } from 'svelte/transition';
 import { m } from '$lib/paraglide/messages.js';
@@ -192,24 +193,22 @@ $effect(() => {
 						class="mb-2 block text-xs font-bold tracking-widest text-ink-2 uppercase"
 						>{m.docs_filter_label_from()}</label
 					>
-					<input
-						type="date"
+					<DateInput
 						id="from"
 						bind:value={from}
 						onchange={onSearch}
-						class="block w-full border-line py-2.5 text-sm shadow-sm"
+						class="block w-full rounded-md border border-line bg-surface px-3 py-2.5 text-sm text-ink shadow-sm placeholder:text-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 					/>
 				</div>
 				<div>
 					<label for="to" class="mb-2 block text-xs font-bold tracking-widest text-ink-2 uppercase"
 						>{m.docs_filter_label_to()}</label
 					>
-					<input
-						type="date"
+					<DateInput
 						id="to"
 						bind:value={to}
 						onchange={onSearch}
-						class="block w-full border-line py-2.5 text-sm shadow-sm"
+						class="block w-full rounded-md border border-line bg-surface px-3 py-2.5 text-sm text-ink shadow-sm placeholder:text-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 					/>
 				</div>
 			</div>
diff --git a/frontend/src/routes/briefwechsel/CorrespondenzFilterControls.svelte b/frontend/src/routes/briefwechsel/CorrespondenzFilterControls.svelte
index 77d2d511..8856638c 100644
--- a/frontend/src/routes/briefwechsel/CorrespondenzFilterControls.svelte
+++ b/frontend/src/routes/briefwechsel/CorrespondenzFilterControls.svelte
@@ -30,7 +30,7 @@ let { fromDate = $bindable(''), toDate = $bindable(''), onapplyFilters }: Props
 			bind:value={fromDate}
 			onchange={() => onapplyFilters()}
 			placeholder={m.conv_strip_from_placeholder()}
-			class="block w-full border-line px-3 py-2.5 text-sm text-ink shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
+			class="block w-full rounded-md border border-line bg-surface px-3 py-2.5 text-sm text-ink shadow-sm placeholder:text-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 		/>
 	</div>
 
@@ -44,7 +44,7 @@ let { fromDate = $bindable(''), toDate = $bindable(''), onapplyFilters }: Props
 			bind:value={toDate}
 			onchange={() => onapplyFilters()}
 			placeholder={m.conv_strip_to_placeholder()}
-			class="block w-full border-line px-3 py-2.5 text-sm text-ink shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
+			class="block w-full rounded-md border border-line bg-surface px-3 py-2.5 text-sm text-ink shadow-sm placeholder:text-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 		/>
 	</div>
 </div>