diff --git a/i18n/en.json b/i18n/en.json
index 5efd33b8ae..697aa7f2fa 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -885,15 +885,13 @@
   "cutoff_date_description": "Keep photos from the last…",
   "cutoff_day": "{count, plural, one {day} other {days}}",
   "cutoff_year": "{count, plural, one {year} other {years}}",
-  "daily_title_text_date": "E, MMM dd",
-  "daily_title_text_date_year": "E, MMM dd, yyyy",
   "dark": "Dark",
   "dark_theme": "Switch to dark theme",
   "date": "Date",
   "date_after": "Date after",
   "date_and_time": "Date and Time",
   "date_before": "Date before",
-  "date_format": "E, LLL d, y • h:mm a",
+  "date_of_birth": "Date of birth",
   "date_of_birth_saved": "Date of birth saved successfully",
   "date_range": "Date range",
   "day": "Day",
@@ -1583,7 +1581,6 @@
   "mobile_app_download_onboarding_note": "Download the companion mobile app using the following options",
   "model": "Model",
   "month": "Month",
-  "monthly_title_text_date_format": "MMMM y",
   "more": "More",
   "motion": "Motion",
   "move": "Move",
diff --git a/web/src/lib/components/shared-components/map/Map.svelte b/web/src/lib/components/shared-components/map/Map.svelte
index 52686bdd41..4e29506e96 100644
--- a/web/src/lib/components/shared-components/map/Map.svelte
+++ b/web/src/lib/components/shared-components/map/Map.svelte
@@ -212,16 +212,10 @@
       };
     }
 
-    try {
-      return {
-        fileCreatedAfter: dateAfter ? new Date(dateAfter).toISOString() : undefined,
-        fileCreatedBefore: dateBefore ? new Date(dateBefore).toISOString() : undefined,
-      };
-    } catch {
-      $mapSettings.dateAfter = '';
-      $mapSettings.dateBefore = '';
-      return {};
-    }
+    return {
+      fileCreatedAfter: dateAfter?.toUTC().toISO(),
+      fileCreatedBefore: dateBefore?.toUTC().toISO(),
+    };
   }
 
   async function loadMapMarkers() {
@@ -237,7 +231,7 @@
       {
         isArchived: includeArchived || undefined,
         isFavorite: onlyFavorites || undefined,
-        fileCreatedAfter: fileCreatedAfter || undefined,
+        fileCreatedAfter,
         fileCreatedBefore,
         withPartners: withPartners || undefined,
         withSharedAlbums: withSharedAlbums || undefined,
diff --git a/web/src/lib/modals/MapSettingsModal.svelte b/web/src/lib/modals/MapSettingsModal.svelte
index 4b45def861..4dc0e72685 100644
--- a/web/src/lib/modals/MapSettingsModal.svelte
+++ b/web/src/lib/modals/MapSettingsModal.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-  import DateInput from '$lib/elements/DateInput.svelte';
   import type { MapSettings } from '$lib/stores/preferences.store';
-  import { Button, Field, FormModal, Select, Stack, Switch } from '@immich/ui';
+  import { Button, DatePicker, Field, FormModal, Select, Stack, Switch } from '@immich/ui';
   import { Duration } from 'luxon';
   import { t } from 'svelte-i18n';
   import { fly } from 'svelte/transition';
@@ -41,29 +40,21 @@
 
     {#if customDateRange}
       <div in:fly={{ y: 10, duration: 200 }} class="flex flex-col gap-4">
-        <div class="flex items-center justify-between gap-8">
-          <label class="shrink-0 text-sm immich-form-label" for="date-after">{$t('date_after')}</label>
-          <DateInput
-            class="immich-form-input w-40"
-            type="date"
-            id="date-after"
-            max={settings.dateBefore}
-            bind:value={settings.dateAfter}
-          />
-        </div>
-        <div class="flex items-center justify-between gap-8">
-          <label class="shrink-0 text-sm immich-form-label" for="date-before">{$t('date_before')}</label>
-          <DateInput class="immich-form-input w-40" type="date" id="date-before" bind:value={settings.dateBefore} />
-        </div>
-        <div class="flex justify-center text-xs">
+        <Field label={$t('date_after')}>
+          <DatePicker bind:value={settings.dateAfter} maxDate={settings.dateBefore} />
+        </Field>
+        <Field label={$t('date_before')}>
+          <DatePicker bind:value={settings.dateBefore} />
+        </Field>
+        <div class="flex justify-center">
           <Button
             color="primary"
             size="small"
             variant="ghost"
             onclick={() => {
               customDateRange = false;
-              settings.dateAfter = '';
-              settings.dateBefore = '';
+              settings.dateAfter = undefined;
+              settings.dateBefore = undefined;
             }}
           >
             {$t('remove_custom_date_range')}
@@ -71,7 +62,7 @@
         </div>
       </div>
     {:else}
-      <div in:fly={{ y: -10, duration: 200 }} class="flex flex-col gap-1">
+      <div in:fly={{ y: -10, duration: 200 }} class="flex flex-col gap-2">
         <Field label={$t('date_range')}>
           <Select
             bind:value={settings.relativeDate}
@@ -82,40 +73,38 @@
               },
               {
                 label: $t('past_durations.hours', { values: { hours: 24 } }),
-                value: Duration.fromObject({ hours: 24 }).toISO() || '',
+                value: Duration.fromObject({ hours: 24 }).toISO(),
               },
               {
                 label: $t('past_durations.days', { values: { days: 7 } }),
-                value: Duration.fromObject({ days: 7 }).toISO() || '',
+                value: Duration.fromObject({ days: 7 }).toISO(),
               },
               {
                 label: $t('past_durations.days', { values: { days: 30 } }),
-                value: Duration.fromObject({ days: 30 }).toISO() || '',
+                value: Duration.fromObject({ days: 30 }).toISO(),
               },
               {
                 label: $t('past_durations.years', { values: { years: 1 } }),
-                value: Duration.fromObject({ years: 1 }).toISO() || '',
+                value: Duration.fromObject({ years: 1 }).toISO(),
               },
               {
                 label: $t('past_durations.years', { values: { years: 3 } }),
-                value: Duration.fromObject({ years: 3 }).toISO() || '',
+                value: Duration.fromObject({ years: 3 }).toISO(),
               },
             ]}
           />
         </Field>
-        <div class="text-xs">
-          <Button
-            color="primary"
-            size="small"
-            variant="ghost"
-            onclick={() => {
-              customDateRange = true;
-              settings.relativeDate = '';
-            }}
-          >
-            {$t('use_custom_date_range')}
-          </Button>
-        </div>
+        <Button
+          color="primary"
+          size="small"
+          variant="ghost"
+          onclick={() => {
+            customDateRange = true;
+            settings.relativeDate = '';
+          }}
+        >
+          {$t('use_custom_date_range')}
+        </Button>
       </div>
     {/if}
   </Stack>
diff --git a/web/src/lib/modals/PersonEditBirthDateModal.svelte b/web/src/lib/modals/PersonEditBirthDateModal.svelte
index 29522a9f78..4d6fa47ffc 100644
--- a/web/src/lib/modals/PersonEditBirthDateModal.svelte
+++ b/web/src/lib/modals/PersonEditBirthDateModal.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-  import DateInput from '$lib/elements/DateInput.svelte';
   import { handleUpdatePersonBirthDate } from '$lib/services/person.service';
   import { type PersonResponseDto } from '@immich/sdk';
-  import { Button, FormModal, Text } from '@immich/ui';
+  import { Button, DatePicker, Field, FormModal, HelperText } from '@immich/ui';
   import { mdiCake } from '@mdi/js';
+  import { DateTime } from 'luxon';
   import { t } from 'svelte-i18n';
 
   type Props = {
@@ -12,32 +12,25 @@
   };
 
   let { person, onClose }: Props = $props();
-  let birthDate = $derived(person.birthDate ?? '');
+  let birthDate = $derived(person.birthDate ? DateTime.fromISO(person.birthDate) : undefined);
 
   const onSubmit = async () => {
-    const success = await handleUpdatePersonBirthDate(person, birthDate);
+    const success = await handleUpdatePersonBirthDate(person, birthDate?.toISODate() ?? '');
     if (success) {
       onClose();
     }
   };
-
-  const todayFormatted = new Date().toISOString().split('T')[0];
 </script>
 
 <FormModal title={$t('set_date_of_birth')} size="small" icon={mdiCake} {onClose} {onSubmit}>
-  <Text size="small">{$t('birthdate_set_description')}</Text>
-  <div class="my-4 flex flex-col gap-2">
-    <DateInput
-      class="immich-form-input"
-      id="birthDate"
-      name="birthDate"
-      type="date"
-      bind:value={birthDate}
-      max={todayFormatted}
-    />
+  <div class="my-2 flex flex-col gap-2">
+    <Field label={$t('date_of_birth')}>
+      <DatePicker bind:value={birthDate} maxDate={DateTime.now()} />
+      <HelperText>{$t('birthdate_set_description')}</HelperText>
+    </Field>
     {#if person.birthDate}
       <div class="flex justify-end">
-        <Button shape="round" color="secondary" size="small" onclick={() => (birthDate = '')}>
+        <Button shape="round" color="secondary" size="small" onclick={() => (birthDate = undefined)}>
           {$t('clear')}
         </Button>
       </div>
diff --git a/web/src/lib/stores/preferences.store.ts b/web/src/lib/stores/preferences.store.ts
index 3c31bef856..016942c572 100644
--- a/web/src/lib/stores/preferences.store.ts
+++ b/web/src/lib/stores/preferences.store.ts
@@ -1,3 +1,4 @@
+import type { DateTime } from 'luxon';
 import { persisted } from 'svelte-persisted-store';
 import { browser } from '$app/environment';
 import { defaultLang } from '$lib/constants';
@@ -26,8 +27,8 @@ export interface MapSettings {
   withPartners: boolean;
   withSharedAlbums: boolean;
   relativeDate: string;
-  dateAfter: string;
-  dateBefore: string;
+  dateAfter?: DateTime<true>;
+  dateBefore?: DateTime<true>;
 }
 
 const defaultMapSettings = {
@@ -37,8 +38,6 @@ const defaultMapSettings = {
   withPartners: false,
   withSharedAlbums: false,
   relativeDate: '',
-  dateAfter: '',
-  dateBefore: '',
 };
 
 const persistedObject = <T>(key: string, defaults: T) =>