diff --git a/packages/ui/src/DatePicker/DatePicker.vue b/packages/ui/src/DatePicker/DatePicker.vue
index a60585d52d..4f8ca50a55 100644
--- a/packages/ui/src/DatePicker/DatePicker.vue
+++ b/packages/ui/src/DatePicker/DatePicker.vue
@@ -23,7 +23,6 @@ import {
 import Card from '../Card/Card.vue';
 import Button from '../Button/Button.vue';
 import Calendar from '../Calendar/Calendar.vue';
-import Icon from '../Icon/Icon.vue';
 
 const emit = defineEmits(['update:modelValue']);
 
@@ -123,10 +122,10 @@ const getInputLabel = (part) => {
                 <DatePickerAnchor as-child>
                     <div
                         :class="[
-                            'flex w-full items-center bg-white uppercase dark:bg-gray-900',
+                            'flex w-full items-center bg-white dark:bg-gray-900',
                             'border border-gray-300 dark:border-x-0 dark:border-t-0 dark:border-white/10 dark:inset-shadow-2xs dark:inset-shadow-black',
                             'text-gray-600 dark:text-gray-300',
-                            'shadow-ui-sm not-prose h-10 rounded-lg px-2 disabled:shadow-none',
+                            'shadow-ui-sm h-10 rounded-lg px-2 disabled:shadow-none',
                             'data-invalid:border-red-500',
                             'disabled:shadow-none disabled:opacity-50',
                             readOnly ? 'border-dashed' : '',
@@ -135,45 +134,41 @@ const getInputLabel = (part) => {
                         role="textbox"
                         :aria-label="__('Select date')"
                     >
-                        <DatePickerTrigger
-                            v-if="!inline"
-                            class="flex items-center justify-center rounded-lg p-2 -ms-1 text-gray-400 outline-hidden hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-900 dark:focus:bg-gray-900"
-                            :aria-label="__('Open calendar')"
-                        >
-                            <Icon name="calendar" class="size-4" />
+                        <DatePickerTrigger v-if="!inline">
+                            <Button as="div" variant="ghost" size="sm" icon="calendar" class="-ms-1" />
                         </DatePickerTrigger>
-                        <div class="flex items-center flex-1">
-                            <template v-for="item in segments" :key="item.part">
-                                <DatePickerInput
-                                    v-if="item.part === 'literal'"
-                                    :part="item.part"
-                                    :class="{ 'text-sm text-gray-600 dark:text-gray-400 antialiased': !item.contenteditable }"
-                                >
-                                    {{ item.value }}
-                                </DatePickerInput>
-                                <DatePickerInput
-                                    v-else
-                                    :part="item.part"
-                                    class="rounded-sm px-0.25 py-0.5 focus:bg-gray-100 focus:outline-hidden data-placeholder:text-gray-600 dark:focus:bg-gray-800 dark:data-placeholder:text-gray-400"
-                                    :class="{
-                                        'px-0.5!': item.part === 'month' || item.part === 'year' || item.part === 'day',
-                                    }"
-                                    :aria-label="getInputLabel(item.part)"
-                                >
-                                    {{ item.value }}
-                                </DatePickerInput>
-                            </template>
-                        </div>
-                        <button
-                            v-if="clearable && !readOnly"
-                            @click="emit('update:modelValue', null)"
-                            :disabled="disabled"
-                            type="button"
-                            class="flex items-center justify-center rounded-lg p-2 -me-1 text-gray-300 outline-hidden hover:bg-gray-100 focus:bg-gray-100 active:text-gray-400 dark:hover:bg-gray-900 dark:focus:bg-gray-900"
-                            :aria-label="__('Clear date')"
-                        >
-                            <Icon name="x" class="size-3" />
-                        </button>
+                    <div class="flex items-center flex-1">
+                        <template v-for="item in segments" :key="item.part">
+                            <DatePickerInput
+                                v-if="item.part === 'literal'"
+                                :part="item.part"
+                                :class="{ 'text-sm text-gray-600 dark:text-gray-400 antialiased': !item.contenteditable }"
+                            >
+                                {{ item.value }}
+                            </DatePickerInput>
+                            <DatePickerInput
+                                v-else
+                                :part="item.part"
+                                class="rounded-sm px-0.25 py-0.5 focus:bg-gray-100 focus:outline-hidden data-placeholder:text-gray-600 dark:focus:bg-gray-800 dark:data-placeholder:text-gray-400"
+                                :class="{
+                                    'px-0.5!': item.part === 'month' || item.part === 'year' || item.part === 'day',
+                                }"
+                                :aria-label="getInputLabel(item.part)"
+                            >
+                                {{ item.value }}
+                            </DatePickerInput>
+                        </template>
+                    </div>
+                    <Button
+                        :aria-label="__('Clear date')"
+                        :disabled="disabled"
+                        @click="emit('update:modelValue', null)"
+                        class="-me-1"
+                        icon="x"
+                        size="sm"
+                        v-if="clearable && !readOnly"
+                        variant="subtle"
+                    />
                     </div>
                 </DatePickerAnchor>
             </DatePickerField>
diff --git a/packages/ui/src/DateRangePicker/DateRangePicker.vue b/packages/ui/src/DateRangePicker/DateRangePicker.vue
index 57fab157eb..b61b5020a3 100644
--- a/packages/ui/src/DateRangePicker/DateRangePicker.vue
+++ b/packages/ui/src/DateRangePicker/DateRangePicker.vue
@@ -102,17 +102,17 @@ const calendarEvents = computed(() => ({
             <DateRangePickerField v-slot="{ segments }" class="w-full">
                 <div
                     :class="[
-                        'flex w-full bg-white dark:bg-gray-900',
+                        'flex w-full items-center bg-white dark:bg-gray-900',
                         'border border-gray-300 dark:border-x-0 dark:border-t-0 dark:border-white/10 dark:inset-shadow-2xs dark:inset-shadow-black',
-                        'leading-[1.375rem] text-gray-600 dark:text-gray-300',
-                        'shadow-ui-sm not-prose h-10 rounded-lg py-2 px-3 disabled:shadow-none',
+                        'text-md tracking-tighter text-gray-600 dark:text-gray-300',
+                        'shadow-ui-sm h-10 rounded-lg px-2 disabled:shadow-none',
                         'data-invalid:border-red-500',
                         'disabled:shadow-none disabled:opacity-50',
                         readOnly ? 'border-dashed' : '',
                     ]"
                 >
                     <DateRangePickerTrigger v-if="!inline">
-                        <Button as="div" variant="ghost" size="sm" icon="calendar" class="-my-1.25 -ms-2" />
+                        <Button as="div" variant="ghost" size="sm" icon="calendar" class="-ms-1" />
                     </DateRangePickerTrigger>
                     <template v-for="item in segments.start" :key="item.part">
                         <DateRangePickerInput v-if="item.part === 'literal'" :part="item.part" type="start">
@@ -123,7 +123,7 @@ const calendarEvents = computed(() => ({
                             :part="item.part"
                             class="rounded-sm px-0.25 py-0.5 focus:bg-gray-50 focus:outline-hidden data-placeholder:text-gray-600 dark:focus:bg-gray-800 dark:data-placeholder:text-gray-400"
                             :class="{
-                                'px-0.5!': item.part === 'month' || item.part === 'year' || item.part === 'day',
+                                'px-0.25!': item.part === 'month' || item.part === 'year' || item.part === 'day',
                             }"
                             type="start"
                         >
@@ -140,7 +140,7 @@ const calendarEvents = computed(() => ({
                             :part="item.part"
                             class="rounded-sm px-0.25 py-0.5 focus:bg-gray-50 focus:outline-hidden data-placeholder:text-gray-600 dark:focus:bg-gray-800 dark:data-placeholder:text-gray-400"
                             :class="{
-                                'px-0.5!': item.part === 'month' || item.part === 'year' || item.part === 'day',
+                                'px-0.25!': item.part === 'month' || item.part === 'year' || item.part === 'day',
                             }"
                             type="end"
                         >
@@ -148,7 +148,15 @@ const calendarEvents = computed(() => ({
                         </DateRangePickerInput>
                     </template>
                     <div class="flex-1" />
-                    <Button v-if="!readOnly" @click="emit('update:modelValue', null)" variant="ghost" size="sm" icon="x" class="-my-1.25 -me-2" :disabled="disabled" />
+                    <Button
+                        :disabled="disabled"
+                        @click="emit('update:modelValue', null)"
+                        class="-me-1"
+                        icon="x"
+                        size="sm"
+                        v-if="!readOnly"
+                        variant="subtle"
+                    />
                 </div>
             </DateRangePickerField>
 
@@ -169,4 +177,4 @@ const calendarEvents = computed(() => ({
             </Card>
         </DateRangePickerRoot>
     </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/packages/ui/src/ui.css b/packages/ui/src/ui.css
index 643e671487..6b2156776a 100644
--- a/packages/ui/src/ui.css
+++ b/packages/ui/src/ui.css
@@ -96,6 +96,7 @@
     --text-3xs: 0.5rem;
     --text-2xs: 0.7rem;
     --text-xs: 0.825rem;
+    --text-md: 0.925rem;
 
     --tracking-tight: -0.01em;
 
@@ -111,6 +112,8 @@
 
     --animate-wiggle: wiggle 200ms ease-in-out infinite;
 
+    --font-sans: 'Inter', system-ui, sans-serif;
+
     @keyframes wiggle {
         0%,
         100% {
diff --git a/resources/js/components/fieldtypes/DateIndexFieldtype.vue b/resources/js/components/fieldtypes/DateIndexFieldtype.vue
index b9d9bfad0f..b5fea72b13 100644
--- a/resources/js/components/fieldtypes/DateIndexFieldtype.vue
+++ b/resources/js/components/fieldtypes/DateIndexFieldtype.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-text="formatted"></div>
+    <div v-text="formatted" class="tabular-nums"></div>
 </template>
 
 <script setup>