diff --git a/app/components/app/sep/entry-form.vue b/app/components/app/sep/entry-form.vue
index 1b546322..458c070f 100644
--- a/app/components/app/sep/entry-form.vue
+++ b/app/components/app/sep/entry-form.vue
@@ -72,8 +72,8 @@ const onSubmit = handleSubmit((values) => {
       <!-- Tanggal SEP & Jalur -->
       <div class="grid gap-4 md:grid-cols-3">
         <div class="flex flex-col gap-2">
-          <Label for="tanggalSep">Tanggal SEP</Label>
-          <DatepickerSingle v-model="tanggalSep" />
+          <Label for="tanggalSep">Tanggal SEP<span class="text-red-500">*</span></Label>
+          <DatepickerSingle v-model="tanggalSep" placeholder="Pilih tanggal sep" />
           <p v-if="errors.tanggalSep" class="text-sm text-red-500">{{ errors.tanggalSep }}</p>
         </div>
         <div class="flex flex-col gap-2">
@@ -142,7 +142,7 @@ const onSubmit = handleSubmit((values) => {
         </div>
         <div class="flex flex-col gap-2">
           <Label>Tanggal Surat Kontrol<span class="text-red-500">*</span></Label>
-          <Input v-model="tglSuratKontrol" />
+          <DatepickerSingle v-model="tglSuratKontrol" placeholder="Pilih tanggal surat kontrol" />
           <p v-if="errors.tglSuratKontrol" class="text-sm text-red-500">{{ errors.tglSuratKontrol }}</p>
         </div>
         <div class="flex flex-row items-center gap-2">
diff --git a/app/components/pub/custom-ui/form/datepicker-single.vue b/app/components/pub/custom-ui/form/datepicker-single.vue
index 6904b662..d866bbdf 100644
--- a/app/components/pub/custom-ui/form/datepicker-single.vue
+++ b/app/components/pub/custom-ui/form/datepicker-single.vue
@@ -8,7 +8,36 @@ import { Button } from '~/components/pub/ui/button'
 import { Calendar } from '~/components/pub/ui/calendar'
 import { Popover, PopoverContent, PopoverTrigger } from '~/components/pub/ui/popover'
 
-const date = ref<Date | undefined>(undefined)
+const props = defineProps<{
+  placeholder?: string
+  modelValue?: Date | string | undefined
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: Date | string | undefined]
+}>()
+
+const date = ref<Date | any>(undefined)
+
+// Sync prop to local state
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (value instanceof Date) {
+      date.value = value
+    } else if (typeof value === 'string' && value) {
+      date.value = value
+    } else {
+      date.value = undefined
+    }
+  },
+  { immediate: true }
+)
+
+watch(date, (value) => {
+  const newValue = format(value, 'yyyy-MM-dd')
+  emit('update:modelValue', newValue)
+})
 </script>
 
 <template>
@@ -18,15 +47,14 @@ const date = ref<Date | undefined>(undefined)
         <Button variant="outline" class="bg-white border-gray-400 font-normal text-right h-[40px] w-full">
           <div class="flex justify-between items-center w-full">
             <p v-if="date">{{ format(date, 'PPP') }}</p>
-            <p v-else class="text-sm text-black text-opacity-80">Tanggal</p>
+            <p v-else class="text-sm text-black text-opacity-50">{{ props.placeholder || 'Tanggal' }}</p>
             <CalendarIcon class="h-4 w-4 ml-2" />
           </div>
         </Button>
       </PopoverTrigger>
       <PopoverContent class="w-auto p-0">
-        <Calendar mode="single" />
+        <Calendar v-model="date" mode="single" />
       </PopoverContent>
     </Popover>
-    <p v-if="date" class="text-sm text-black text-opacity-80">{{ format(date, 'PPP') }}</p>
   </div>
 </template>