diff --git a/src/components/02_personnel-management/FormByType.vue b/src/components/02_personnel-management/FormByType.vue
index 943cbddf..85d28d97 100644
--- a/src/components/02_personnel-management/FormByType.vue
+++ b/src/components/02_personnel-management/FormByType.vue
@@ -84,6 +84,7 @@ function deleteFile(name: string) {
       <VueDatePicker
         utc
         autoApply
+        :dark="$q.dark.isActive"
         v-model="startDate"
         :teleport="true"
         :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
@@ -131,6 +132,7 @@ function deleteFile(name: string) {
         utc
         autoApply
         v-model="retireDate"
+        :dark="$q.dark.isActive"
         :teleport="true"
         :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
         :enableTimePicker="false"
diff --git a/src/components/02_personnel-management/FormPerson.vue b/src/components/02_personnel-management/FormPerson.vue
index dac16532..7124f133 100644
--- a/src/components/02_personnel-management/FormPerson.vue
+++ b/src/components/02_personnel-management/FormPerson.vue
@@ -122,8 +122,9 @@ defineProps<{
       for="input-birth-date"
       utc
       autoApply
-      :teleport="true"
       v-model="birthDate"
+      :teleport="true"
+      :dark="$q.dark.isActive"
       :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
       :enableTimePicker="false"
       :disabled="readonly"
diff --git a/src/components/03_customer-management/AboutComponent.vue b/src/components/03_customer-management/AboutComponent.vue
index 12fe8727..7b209788 100644
--- a/src/components/03_customer-management/AboutComponent.vue
+++ b/src/components/03_customer-management/AboutComponent.vue
@@ -160,6 +160,7 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
         utc
         autoApply
         v-model="registerDate"
+        :dark="$q.dark.isActive"
         :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
         :enableTimePicker="false"
         :disabled="readonly"
diff --git a/src/components/03_customer-management/FormBusiness.vue b/src/components/03_customer-management/FormBusiness.vue
index 245d8e03..40fbc364 100644
--- a/src/components/03_customer-management/FormBusiness.vue
+++ b/src/components/03_customer-management/FormBusiness.vue
@@ -138,6 +138,7 @@ onMounted(async () => {
         utc
         autoApply
         v-model="payDate"
+        :dark="$q.dark.isActive"
         :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
         :enableTimePicker="false"
         :disabled="readonly"
diff --git a/src/components/03_customer-management/FormEmployeeHealthCheck.vue b/src/components/03_customer-management/FormEmployeeHealthCheck.vue
index 65d1da17..51522f84 100644
--- a/src/components/03_customer-management/FormEmployeeHealthCheck.vue
+++ b/src/components/03_customer-management/FormEmployeeHealthCheck.vue
@@ -240,8 +240,9 @@ onMounted(async () => {
           <VueDatePicker
             utc
             autoApply
-            :teleport="true"
             v-model="checkup.coverageStartDate"
+            :teleport="true"
+            :dark="$q.dark.isActive"
             :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
             :enableTimePicker="false"
             :disabled="readonly"
@@ -289,8 +290,9 @@ onMounted(async () => {
           <VueDatePicker
             utc
             autoApply
-            :teleport="true"
             v-model="checkup.coverageExpireDate"
+            :teleport="true"
+            :dark="$q.dark.isActive"
             :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
             :enableTimePicker="false"
             :disabled="readonly"
diff --git a/src/components/03_customer-management/FormEmployeePassport.vue b/src/components/03_customer-management/FormEmployeePassport.vue
index bde2f756..11d1e864 100644
--- a/src/components/03_customer-management/FormEmployeePassport.vue
+++ b/src/components/03_customer-management/FormEmployeePassport.vue
@@ -117,8 +117,9 @@ defineProps<{
       id="date-picker-passport-issueance"
       utc
       autoApply
-      :teleport="true"
       v-model="passportIssueDate"
+      :teleport="true"
+      :dark="$q.dark.isActive"
       :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
       :enableTimePicker="false"
       :disabled="readonly"
@@ -160,8 +161,9 @@ defineProps<{
       id="date-picker-passport-expire"
       utc
       autoApply
-      :teleport="true"
       v-model="passportExpiryDate"
+      :teleport="true"
+      :dark="$q.dark.isActive"
       :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
       :enableTimePicker="false"
       :disabled="readonly"
diff --git a/src/components/03_customer-management/FormEmployeeVisa.vue b/src/components/03_customer-management/FormEmployeeVisa.vue
index 63288ca7..472f1f15 100644
--- a/src/components/03_customer-management/FormEmployeeVisa.vue
+++ b/src/components/03_customer-management/FormEmployeeVisa.vue
@@ -93,8 +93,9 @@ onMounted(async () => {
       id="date-picker-visa-issuance"
       utc
       autoApply
-      :teleport="true"
       v-model="visaIssueDate"
+      :teleport="true"
+      :dark="$q.dark.isActive"
       :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
       :enableTimePicker="false"
       :disabled="readonly"
@@ -144,8 +145,9 @@ onMounted(async () => {
       id="date-picker-visa-expire"
       utc
       autoApply
-      :teleport="true"
       v-model="visaExpiryDate"
+      :teleport="true"
+      :dark="$q.dark.isActive"
       :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
       :enableTimePicker="false"
       :disabled="readonly"
@@ -209,8 +211,9 @@ onMounted(async () => {
       id="date-picker-visa-until"
       utc
       autoApply
-      :teleport="true"
       v-model="visaStayUntilDate"
+      :teleport="true"
+      :dark="$q.dark.isActive"
       :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
       :enableTimePicker="false"
       :disabled="readonly"
@@ -275,8 +278,9 @@ onMounted(async () => {
       id="date-picker-visa-enter"
       utc
       autoApply
-      :teleport="true"
       v-model="entryDate"
+      :teleport="true"
+      :dark="$q.dark.isActive"
       :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
       :enableTimePicker="false"
       :disabled="readonly"
diff --git a/src/components/03_customer-management/FormEmployeeWorkHistory.vue b/src/components/03_customer-management/FormEmployeeWorkHistory.vue
index f07349de..6d1f6306 100644
--- a/src/components/03_customer-management/FormEmployeeWorkHistory.vue
+++ b/src/components/03_customer-management/FormEmployeeWorkHistory.vue
@@ -187,8 +187,9 @@ onMounted(async () => {
             id="date-picker-workEndDate"
             utc
             autoApply
-            :teleport="true"
             v-model="work.workEndDate"
+            :teleport="true"
+            :dark="$q.dark.isActive"
             :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
             :enableTimePicker="false"
             :disabled="readonly"
@@ -245,8 +246,9 @@ onMounted(async () => {
             id="date-picker-workPermitIssuDate"
             utc
             autoApply
-            :teleport="true"
             v-model="work.workPermitIssuDate"
+            :teleport="true"
+            :dark="$q.dark.isActive"
             :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
             :enableTimePicker="false"
             :disabled="readonly"
@@ -295,8 +297,9 @@ onMounted(async () => {
             id="date-picker-workPermitExpireDate"
             utc
             autoApply
-            :teleport="true"
             v-model="work.workPermitExpireDate"
+            :teleport="true"
+            :dark="$q.dark.isActive"
             :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
             :enableTimePicker="false"
             :disabled="readonly"
diff --git a/src/components/03_customer-management/HistoryEditComponent.vue b/src/components/03_customer-management/HistoryEditComponent.vue
index ae799e18..c135cb23 100644
--- a/src/components/03_customer-management/HistoryEditComponent.vue
+++ b/src/components/03_customer-management/HistoryEditComponent.vue
@@ -333,6 +333,7 @@ watch(
           @click="nextDate(true)"
         />
         <VueDatePicker
+          :dark="$q.dark.isActive"
           id="input-birth-date"
           for="input-birth-date"
           class="date-picker"