diff --git a/app/components/app/sep/entry-form.vue b/app/components/app/sep/entry-form.vue
index c8e8beb0..f98d4caa 100644
--- a/app/components/app/sep/entry-form.vue
+++ b/app/components/app/sep/entry-form.vue
@@ -9,6 +9,7 @@ import { Input } from '~/components/pub/ui/input'
 import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
 import { Textarea } from '~/components/pub/ui/textarea'
 import Select from '~/components/pub/ui/select/Select.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
 
 // Types
@@ -22,17 +23,23 @@ import { useForm } from 'vee-validate'
 const props = defineProps<{
   isLoading?: boolean
   isReadonly?: boolean
+  doctors: any[]
   patient?: PatientEntity | null | undefined
   values?: any
 }>()
 
 const emit = defineEmits<{
-  (e: 'event', value: any): void
+  (e: 'event', menu: string, value?: any): void
 }>()
 
 const isLoading = props.isLoading !== undefined ? props.isLoading : false
 const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
 
+const admissionTypes = [
+  { value: '1', label: 'Kontrol' },
+  { value: '2', label: 'Rujukan' },
+]
+
 const items = [
   { value: 'item-1', label: 'Item 1' },
   { value: 'item-2', label: 'Item 2' },
@@ -68,7 +75,6 @@ const onSubmit = handleSubmit((values) => {
 })
 
 watch(props, (value) => {
-  console.log('patient changed:', value)
   const patient = value.patient || ({} as PatientEntity)
   if (Object.keys(patient).length > 0) {
     bpjsNumber.value = '-'
@@ -116,9 +122,10 @@ watch(props, (value) => {
               icon-name="i-lucide-chevron-down"
               v-model="admissionType"
               v-bind="admissionTypeAttrs"
-              :items="items"
+              :items="admissionTypes"
               :disabled="isLoading || isReadonly"
               placeholder="Pilih jalur"
+              @change="emit('event', 'admission-type', $event)"
             />
           </Field>
         </Cell>
@@ -327,14 +334,15 @@ watch(props, (value) => {
             <span class="text-red-500">*</span>
           </Label>
           <Field :errMessage="errors.attendingDoctor">
-            <Select
+            <Combobox
               id="attendingDoctor"
-              icon-name="i-lucide-chevron-down"
               v-model="attendingDoctor"
               v-bind="attendingDoctorAttrs"
-              :items="items"
-              :disabled="isLoading || isReadonly"
+              :items="doctors"
+              :is-disabled="isLoading || isReadonly"
               placeholder="Pilih DPJP"
+              search-placeholder="Cari DPJP"
+              empty-message="Item tidak ditemukan"
             />
           </Field>
         </Cell>
diff --git a/app/components/content/sep/entry.vue b/app/components/content/sep/entry.vue
index 7a8cb327..3637c82b 100644
--- a/app/components/content/sep/entry.vue
+++ b/app/components/content/sep/entry.vue
@@ -14,11 +14,10 @@ import { getPatientDetail, getPatients } from '~/services/patient.service'
 import { getList as getProvinceList } from '~/services/vclaim-region-province.service'
 import { getList as getCityList } from '~/services/vclaim-region-city.service'
 import { getList as getDistrictList } from '~/services/vclaim-region-district.service'
-import { getList as getDoctorList } from '~/services/vclaim-doctor.service'
+import { getValueLabelList as getDoctorLabelList } from '~/services/vclaim-doctor.service'
 import { getList as getDiagnoseReferralList } from '~/services/vclaim-diagnose-referral.service'
 import { getList as geMonitoringVisitList } from '~/services/vclaim-monitoring-visit.service'
 import { getList as getMonitoringHistoryList } from '~/services/vclaim-monitoring-history.service'
-import { get } from '@vueuse/core'
 
 const openPatient = ref(false)
 const openLetter = ref(false)
@@ -30,6 +29,7 @@ const histories = ref<Array<SepHistoryData>>([])
 
 // patients used by AppSepTableSearchPatient (will be filled from API)
 const patients = ref<Array<{ id: string; identity: string; number: string; bpjs: string; name: string }>>([])
+const doctors = ref<Array<{ value: string | number; label: string }>>([])
 const isPatientsLoading = ref(false)
 const paginationMeta = ref<PaginationMeta>({
   recordCount: 0,
@@ -110,7 +110,10 @@ async function getMonitoringHistoryMappers() {
         sepNumber: result.noSep,
         sepDate: result.tglSep,
         referralNumber: result.noRujukan,
-        diagnosis: result.diagnosa,
+        diagnosis:
+          result.diagnosa && typeof result.diagnosa === 'string' && result.diagnosa.length > 20
+            ? result.diagnosa.toString().substring(0, 17) + '...'
+            : '-',
         serviceType: !result.jnsPelayanan ? '-' : result.jnsPelayanan === '1' ? 'Rawat Jalan' : 'Rawat Inap',
         careClass: result.kelasRawat,
       })
@@ -150,19 +153,23 @@ function handleSaveLetter() {
   console.log('Letter dipilih:', selectedLetter.value)
 }
 
-function handleEvent(value: string) {
-  if (value === 'search-patient') {
+function handleEvent(menu: string, value: string) {
+  if (menu === 'admission-type') {
+    console.log('service-type:', value)
+    return
+  }
+  if (menu === 'search-patient') {
     // fetch patients from API then open the dialog
     getPatientsList({ 'page-size': 10, includes: 'person' }).then(() => {
       openPatient.value = true
     })
     return
   }
-  if (value === 'search-letter') {
+  if (menu === 'search-letter') {
     openLetter.value = true
     return
   }
-  if (value === 'history-sep') {
+  if (menu === 'history-sep') {
     // fetch history sep from API then open the dialog
     getMonitoringHistoryMappers().then((value) => {
       console.log('value:', value)
@@ -170,12 +177,17 @@ function handleEvent(value: string) {
     openHistory.value = true
     return
   }
-  if (value === 'back') {
+  if (menu === 'back') {
     navigateTo('/bpjs/sep')
   }
 }
 
-onMounted(() => {
+onMounted(async () => {
+  doctors.value = await getDoctorLabelList({
+    'jenis-pelayanan': 1,
+    'tgl-pelayanan': new Date().toISOString().substring(0, 10),
+    'kode-spesialis': 0,
+  })
   getProvinceList().then((value) => {
     console.log('value:', value)
   })
@@ -185,13 +197,6 @@ onMounted(() => {
   getDistrictList({ city: '0187' }).then((value) => {
     console.log('value:', value)
   })
-  getDoctorList({
-    'jenis-pelayanan': 1,
-    'tgl-pelayanan': new Date().toISOString().substring(0, 19),
-    'kode-spesialis': 0,
-  }).then((value) => {
-    console.log('value:', value)
-  })
   getDiagnoseReferralList().then((value) => {
     console.log('value:', value)
   })
@@ -214,6 +219,7 @@ onMounted(() => {
     SEP
   </div>
   <AppSepEntryForm
+    :doctors="doctors"
     :patient="selectedPatientObject"
     @event="handleEvent"
   />
diff --git a/app/services/vclaim-doctor.service.ts b/app/services/vclaim-doctor.service.ts
index d27f2767..28c31c06 100644
--- a/app/services/vclaim-doctor.service.ts
+++ b/app/services/vclaim-doctor.service.ts
@@ -1,9 +1,23 @@
 // Base
 import * as base from './_crud-base'
 
-const path = '/api/vclaim/dokter-dpjp'
-const name = 'doctor-attending'
+const path = '/api/vclaim/referensi/dokter-dpjp'
+const name = 'doctor-dpjp'
 
 export function getList(params: any = null) {
   return base.getList(path, params, name)
 }
+
+export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.response?.list || []
+    const resultUnique = [...new Map(resultData.map((item: any) => [item.kode, item])).values()]
+    data = resultUnique.map((item: any) => ({
+      value: item.kode ? String(item.kode) : '',
+      label: item.nama,
+    }))
+  }
+  return data
+}