diff --git a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
index 457dca1af4..188dc9812c 100644
--- a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
+++ b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
@@ -15,6 +15,7 @@ import {
     DateRangePickerHeading,
     DateRangePickerNext,
     DateRangePickerPrev,
+    DateRangePickerAnchor,
     DateRangePickerContent,
     DateRangePickerField,
     DateRangePickerInput,
@@ -136,6 +137,7 @@ const hoverCardDate = computed(() => {
             close-on-select
         >
             <DateRangePickerField v-slot="{ segments }" class="w-full">
+                <DateRangePickerAnchor as-child>
                 <div
                     :class="[
                         'flex items-center w-full overflow-x-auto overflow-y-hidden bg-white dark:bg-gray-900',
@@ -147,8 +149,12 @@ const hoverCardDate = computed(() => {
                         readOnly ? 'border-dashed' : '',
                     ]"
                 >
-                    <DateRangePickerTrigger v-if="!inline">
-                        <Button as="div" variant="ghost" size="sm" icon="calendar" class="-ms-2" />
+                    <DateRangePickerTrigger
+                        v-if="!inline"
+                        class="flex size-8 shrink-0 items-center justify-center rounded-lg -ms-2 text-gray-500 dark: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-3.5!" />
                     </DateRangePickerTrigger>
                     <template v-for="item in segments.start" :key="item.part">
                         <DateRangePickerInput v-if="item.part === 'literal'" :part="item.part" type="start">
@@ -194,13 +200,13 @@ const hoverCardDate = computed(() => {
                     </TimezoneHoverCard>
                     <Button v-if="!readOnly" @click="emit('update:modelValue', null)" variant="subtle" size="sm" icon="x" class="-me-2" :disabled="disabled" />
                 </div>
+                </DateRangePickerAnchor>
             </DateRangePickerField>
 
             <DateRangePickerContent
                 v-if="!inline"
                 align="start"
-                :align-offset="-12"
-                :side-offset="14"
+                :side-offset="4"
                 class="data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade will-change-[transform,opacity]"
             >
                 <Card class="w-[20rem]">