diff --git a/resources/css/core/utilities.css b/resources/css/core/utilities.css
index 436ecdcb27b..bfbc7530616 100644
--- a/resources/css/core/utilities.css
+++ b/resources/css/core/utilities.css
@@ -31,7 +31,7 @@
 }
 
 @utility st-custom-scrollbar {
-    --sb-size: 3px;
+    --sb-size: 4px;
     --sb-thumb-color: var(--color-gray-400);
     &:where(.dark, .dark *) {
         --sb-thumb-color: var(--color-gray-500);
@@ -42,6 +42,7 @@
 
     &::-webkit-scrollbar {
         width: var(--sb-size);
+        height: 2px;
     }
 
     &::-webkit-scrollbar-track {
diff --git a/resources/js/components/ui/DatePicker/DatePicker.vue b/resources/js/components/ui/DatePicker/DatePicker.vue
index 062b2f9054f..f6eb373a385 100644
--- a/resources/js/components/ui/DatePicker/DatePicker.vue
+++ b/resources/js/components/ui/DatePicker/DatePicker.vue
@@ -117,6 +117,8 @@ const isInvalid = computed(() => {
     return props.modelValue === null && props.required;
 });
 
+const hasTime = computed(() => props.granularity != null && props.granularity !== 'day');
+
 const getInputLabel = (part) => {
     switch (part) {
         case 'day':
@@ -159,7 +161,7 @@ const getInputLabel = (part) => {
                 <DatePickerAnchor as-child>
                     <div
                         :class="[
-                            'flex w-full items-center overflow-x-auto overflow-y-hidden bg-white uppercase dark:bg-gray-900',
+                            'st-custom-scrollbar flex w-full items-center overflow-x-auto overflow-y-hidden bg-white uppercase dark:bg-gray-900',
                             'border border-gray-300 dark:border-gray-700',
                             'text-gray-600 dark:text-gray-300',
                             'shadow-ui-sm not-prose h-10 rounded-lg px-2 disabled:shadow-none',
@@ -178,7 +180,7 @@ const getInputLabel = (part) => {
                         >
                             <Icon name="calendar" class="size-4" />
                         </DatePickerTrigger>
-                        <div class="flex items-center flex-1">
+                        <div class="flex flex-1 items-center" :class="{ '@max-xs:text-xs': hasTime }">
                             <template v-for="item in segments" :key="item.part">
                                 <div v-if="item.part === 'literal'">
                                     <DatePickerInput
@@ -210,7 +212,7 @@ const getInputLabel = (part) => {
                             :additional-timezones="additionalTimezones"
                             side="top"
                         >
-                            <Text class="text-gray-600! dark:text-gray-400! ms-2.5 me-1" size="xs" :text="timeZoneLabel" />
+                            <Text class="text-gray-600! dark:text-gray-400! ms-2" size="xs" :text="timeZoneLabel" />
                         </TimezoneHoverCard>
                         <Button
                             v-if="clearable && !readOnly"
diff --git a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
index 051b6367c28..9c242a3fa5a 100644
--- a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
+++ b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
@@ -138,9 +138,9 @@ const hoverCardDate = computed(() => {
             <DateRangePickerField v-slot="{ segments }" class="w-full">
                 <div
                     :class="[
-                        'flex items-center w-full overflow-x-auto overflow-y-hidden bg-white dark:bg-gray-900',
+                        'st-custom-scrollbar flex items-center w-full overflow-x-auto overflow-y-hidden bg-white dark:bg-gray-900',
                         'border border-gray-300 dark:border-gray-700',
-                        'leading-[1.375rem] text-gray-600 dark:text-gray-300',
+                        'leading-[1.375rem] text-gray-600 dark:text-gray-300 @max-xs:text-xs',
                         'shadow-ui-sm not-prose h-10 rounded-lg py-2 px-2.5 disabled:shadow-none',
                         'data-invalid:border-red-500',
                         'disabled:shadow-none disabled:opacity-50',
@@ -190,7 +190,7 @@ const hoverCardDate = computed(() => {
                         :additional-timezones="additionalTimezones"
                         side="top"
                     >
-                        <Text class="text-gray-600! dark:text-gray-400! ms-2.5 me-1" size="xs" :text="timeZoneLabel" />
+                        <Text class="text-gray-600! dark:text-gray-400! ms-2" size="xs" :text="timeZoneLabel" />
                     </TimezoneHoverCard>
                     <Button v-if="!readOnly" @click="emit('update:modelValue', null)" variant="subtle" size="sm" icon="x" class="-me-2" :disabled="disabled" />
                 </div>