diff --git a/src/components/03_customer-management/FormBusiness.vue b/src/components/03_customer-management/FormBusiness.vue
index 2f86c997..8bac70b4 100644
--- a/src/components/03_customer-management/FormBusiness.vue
+++ b/src/components/03_customer-management/FormBusiness.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { dateFormat } from 'src/utils/datetime';
+
 const employmentOffice = defineModel<string>('employmentOffice');
 const bussinessType = defineModel<string>('bussinessType');
 const jobPosition = defineModel<string>('jobPosition');
@@ -8,7 +10,7 @@ const jobPositionEN = defineModel<string>('jobPositionEn');
 
 const jobDescription = defineModel<string>('jobDescription');
 
-const payDate = defineModel<string>('payDate');
+const payDate = defineModel<Date>('payDate');
 const wageRate = defineModel<number>('wageRate');
 
 const saleEmployee = defineModel<string>('saleEmployee');
@@ -132,48 +134,50 @@ defineProps<{
         v-model="jobDescription"
       />
 
-      <q-input
-        :dense="dense"
-        :outlined="!readonly"
-        :readonly="readonly"
-        :borderless="readonly"
-        hide-bottom-space
-        class="col-3"
-        :label="$t('payDay')"
+      <VueDatePicker
+        :teleport="true"
+        utc
+        autoApply
         v-model="payDate"
-      >
-        <template v-slot:prepend>
-          <q-icon
-            name="mdi-calendar-blank-outline"
-            color="primary"
-            class="cursor-pointer"
-            size="16px"
-          >
-            <q-popup-proxy
-              cover
-              transition-show="scale"
-              transition-hide="scale"
-            >
-              <q-date v-model="payDate" mask="YYYY-MM-DD HH:mm">
-                <div class="row items-center justify-end">
-                  <q-btn v-close-popup label="Close" color="primary" flat />
-                </div>
-              </q-date>
-            </q-popup-proxy>
-          </q-icon>
-        </template>
-      </q-input>
-
-      <!-- <q-input
-        :dense="dense"
-        :outlined="!readonly"
-        :readonly="readonly"
-        :borderless="readonly"
-        hide-bottom-space
+        :locale="'th'"
+        :enableTimePicker="false"
+        :disabled="readonly"
         class="col-3"
-        :label="$t('payDay')"
-        v-model="payDay"
-      /> -->
+      >
+        <template #year="{ value }">
+          {{ value + 543 }}
+        </template>
+        <template #trigger>
+          <q-input
+            id="input-start-date"
+            :label="$t('payDay')"
+            :dense="dense"
+            :outlined="readonly ? false : outlined"
+            :readonly="readonly"
+            :borderless="readonly"
+            :model-value="payDate ? dateFormat(payDate) : ''"
+          >
+            <template v-slot:prepend>
+              <q-icon
+                size="xs"
+                name="mdi-calendar-blank-outline"
+                class="cursor-pointer"
+                color="primary"
+              />
+            </template>
+            <template v-slot:append>
+              <q-icon
+                v-if="payDate && !readonly"
+                name="mdi-close"
+                class="cursor-pointer"
+                size="xs"
+                @click="payDate = undefined"
+              />
+            </template>
+          </q-input>
+        </template>
+      </VueDatePicker>
+
       <q-input
         :dense="dense"
         :outlined="!readonly"