diff --git a/resources/js/components/ui/DatePicker/DatePicker.vue b/resources/js/components/ui/DatePicker/DatePicker.vue
index f6f9d5ebdaf..e6b382b1dbb 100644
--- a/resources/js/components/ui/DatePicker/DatePicker.vue
+++ b/resources/js/components/ui/DatePicker/DatePicker.vue
@@ -65,14 +65,14 @@ const calendarBindings = computed(() => ({
 }));
 
 const inputEvents = computed(() => ({
-	focusout: (event) => {
-		if (props.modelValue?.year.toString().length === 2) {
-			let value = props.modelValue;
-			value.year = '20' + value.year;
+    focusout: (event) => {
+        if (props.modelValue?.year.toString().length === 2) {
+            let value = props.modelValue;
+            value.year = '20' + value.year;
 
-			emit('update:modelValue', value);
-		}
-	},
+            emit('update:modelValue', value);
+        }
+    },
 }));
 
 const calendarEvents = computed(() => ({
@@ -135,7 +135,7 @@ const getInputLabel = (part) => {
                     <div
                         :class="[
                             'flex w-full items-center bg-white uppercase 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',
+                            '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',
                             'data-invalid:border-red-500',
@@ -155,28 +155,28 @@ const getInputLabel = (part) => {
                         </DatePickerTrigger>
                         <div class="flex items-center flex-1">
                             <template v-for="item in segments" :key="item.part">
-	                            <div v-if="item.part === 'literal'">
-	                                <DatePickerInput
-	                                    :part="item.part"
-	                                    :class="{ 'text-sm text-gray-600 dark:text-gray-400 antialiased': !item.contenteditable }"
-	                                    v-on="inputEvents"
-	                                >
-	                                    {{ item.value }}
-	                                </DatePickerInput>
-	                            </div>
-	                            <div v-else>
-		                            <DatePickerInput
-			                            :part="item.part"
-			                            class="rounded-sm px-0.25 py-0.5 focus:bg-blue-100 focus:outline-hidden data-placeholder:text-gray-600 dark:focus:bg-blue-900 dark:data-placeholder:text-gray-400"
-			                            :class="{
-	                                        'px-0.5!': item.part === 'month' || item.part === 'year' || item.part === 'day',
-	                                    }"
-			                            :aria-label="getInputLabel(item.part)"
-			                            v-on="inputEvents"
-		                            >
-			                            {{ item.value }}
-		                            </DatePickerInput>
-	                            </div>
+                                <div v-if="item.part === 'literal'">
+                                    <DatePickerInput
+                                        :part="item.part"
+                                        :class="{ 'text-sm text-gray-600 dark:text-gray-400 antialiased': !item.contenteditable }"
+                                        v-on="inputEvents"
+                                    >
+                                        {{ item.value }}
+                                    </DatePickerInput>
+                                </div>
+                                <div v-else>
+                                    <DatePickerInput
+                                        :part="item.part"
+                                        class="rounded-sm px-0.25 py-0.5 focus:bg-blue-100 focus:outline-hidden data-placeholder:text-gray-600 dark:focus:bg-blue-900 dark:data-placeholder:text-gray-400"
+                                        :class="{
+                                            'px-0.5!': item.part === 'month' || item.part === 'year' || item.part === 'day',
+                                        }"
+                                        :aria-label="getInputLabel(item.part)"
+                                        v-on="inputEvents"
+                                    >
+                                        {{ item.value }}
+                                    </DatePickerInput>
+                                </div>
                             </template>
                         </div>
                         <Button
diff --git a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
index fd22b8a47b0..1b97ea53d06 100644
--- a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
+++ b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
@@ -103,7 +103,7 @@ const calendarEvents = computed(() => ({
                 <div
                     :class="[
                         'flex items-center w-full 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',
+                        'border border-gray-300 dark:border-gray-700',
                         'leading-[1.375rem] text-gray-600 dark:text-gray-300',
                         'shadow-ui-sm not-prose h-10 rounded-lg py-2 px-2.5 disabled:shadow-none',
                         'data-invalid:border-red-500',
diff --git a/resources/js/components/ui/TimePicker/TimePicker.vue b/resources/js/components/ui/TimePicker/TimePicker.vue
index ad773cab7ba..1fbd85bc9c2 100644
--- a/resources/js/components/ui/TimePicker/TimePicker.vue
+++ b/resources/js/components/ui/TimePicker/TimePicker.vue
@@ -32,7 +32,7 @@ const setToNow = () => {
         :granularity="granularity"
         :class="[
             'flex items-center w-full 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',
+            'border border-gray-300 dark:border-gray-700',
             'leading-5 text-gray-600 dark:text-gray-300',
             'shadow-ui-sm not-prose h-10 rounded-lg py-2 px-3 disabled:shadow-none',
             'data-invalid:border-red-500',