diff --git a/app/components/app/encounter/entry-form.vue b/app/components/app/encounter/entry-form.vue
index 12fe5138..68edf83a 100644
--- a/app/components/app/encounter/entry-form.vue
+++ b/app/components/app/encounter/entry-form.vue
@@ -11,6 +11,7 @@ import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-singl
 
 import { educationCodes, genderCodes, occupationCodes, religionCodes, relationshipCodes } from '~/lib/constants'
 import { mapToComboboxOptList } from '~/lib/utils'
+import { computed } from 'vue'
 
 interface DivisionFormData {
   name: string
@@ -34,6 +35,7 @@ const props = defineProps<{
   schema: any
   initialValues?: Partial<DivisionFormData>
   errors?: FormErrors
+  selectedPatientObject?: any
 }>()
 
 const emit = defineEmits<{
@@ -49,6 +51,19 @@ const genderOpts = mapToComboboxOptList(genderCodes)
 
 const formSchema = toTypedSchema(props.schema)
 
+// Computed properties for patient data
+const patientName = computed(() => {
+  return props.selectedPatientObject?.person?.name || ''
+})
+
+const patientNik = computed(() => {
+  return props.selectedPatientObject?.person?.residentIdentityNumber || ''
+})
+
+const patientRm = computed(() => {
+  return props.selectedPatientObject?.number || ''
+})
+
 // Form submission handler
 function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
   const formData: DivisionFormData = {
@@ -147,6 +162,7 @@ function onAddSep(formContext: any) {
                     <Input
                       id="patient_name"
                       v-bind="componentField"
+                      :model-value="patientName"
                       disabled
                       placeholder="Tambah data pasien terlebih dahulu"
                     />
@@ -164,7 +180,13 @@ function onAddSep(formContext: any) {
               <FormField v-slot="{ componentField }" name="nik">
                 <FormItem>
                   <FormControl>
-                    <Input id="nik" v-bind="componentField" disabled placeholder="Otomatis" />
+                    <Input 
+                      id="nik" 
+                      v-bind="componentField" 
+                      :model-value="patientNik"
+                      disabled 
+                      placeholder="Otomatis" 
+                    />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -177,7 +199,13 @@ function onAddSep(formContext: any) {
               <FormField v-slot="{ componentField }" name="rm">
                 <FormItem>
                   <FormControl>
-                    <Input id="rm" v-bind="componentField" disabled placeholder="RM99222" />
+                    <Input 
+                      id="rm" 
+                      v-bind="componentField" 
+                      :model-value="patientRm"
+                      disabled 
+                      placeholder="RM99222" 
+                    />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
diff --git a/app/components/content/encounter/entry.vue b/app/components/content/encounter/entry.vue
index 2f57dd40..796ea58b 100644
--- a/app/components/content/encounter/entry.vue
+++ b/app/components/content/encounter/entry.vue
@@ -1,14 +1,27 @@
 <script setup lang="ts">
-import type { DataTableLoader } from '~/components/pub/my-ui/data-table'
-import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+// Components
+import AppViewPatient from '~/components/app/patient/view-patient.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+
+// Handlers
+import {
+  patients,
+  selectedPatient,
+  selectedPatientObject,
+  paginationMeta,
+  getPatientsList,
+  getPatientCurrent,
+} from '~/handlers/patient.handler'
 
 const props = defineProps<{
   id: number
   formType: string
 }>()
 
-const isOpen = ref(false)
-const data = ref([])
+const openPatient = ref(false)
 const isLoading = reactive<DataTableLoader>({
   isTableLoading: false,
 })
@@ -25,26 +38,20 @@ const items = ref([{ value: '1', label: 'Division 1', code: 'DIV1' }])
 
 const schema = {}
 
-async function getPatientList() {
-  isLoading.isTableLoading = true
-  const resp = await xfetch('/api/v1/patient')
-  if (resp.success) {
-    data.value = (resp.body as Record<string, any>).data
-  }
-  isLoading.isTableLoading = false
+function handleSavePatient() {
+  selectedPatientObject.value = null
+  setTimeout(() => {
+    getPatientCurrent(selectedPatient.value)
+  }, 150)
 }
 
-onMounted(() => {
-  getPatientList()
-})
-
 function toKebabCase(str: string): string {
   return str.replace(/_/g, '-').toLowerCase()
 }
 
 function toNavigateSep(values: any) {
   const queryParams = new URLSearchParams()
-  Object.keys(values).forEach(field => {
+  Object.keys(values).forEach((field) => {
     if (values[field]) {
       queryParams.append(toKebabCase(field), values[field])
     }
@@ -65,7 +72,9 @@ function onCancel(resetForm: () => void) {
 function onClick(e: 'search' | 'add' | 'add-sep', formValues?: any) {
   console.log('click', e)
   if (e === 'search') {
-    console.log('search')
+    getPatientsList({ 'page-size': 10, includes: 'person' }).then(() => {
+      openPatient.value = true
+    })
   } else if (e === 'add') {
     navigateTo('/client/patient/add')
   } else if (e === 'add-sep') {
@@ -85,22 +94,24 @@ provide('table_data_loader', isLoading)
     <span class="font-semibold">{{ props.formType }}</span>
     Kunjungan
   </div>
+  
   <AppEncounterEntryForm
     :division="division"
     :items="items"
     :schema="schema"
+    :selected-patient-object="selectedPatientObject"
     @click="onClick"
     @submit="onSubmit"
     @cancel="onCancel"
   />
   <AppSepSmallEntry v-if="props.id" />
 
-  <Dialog
-    v-model:open="isOpen"
-    title="Cari Pasien"
-    size="xl"
-    prevent-outside
-  >
-    <AppPatientPicker :data="data" />
-  </Dialog>
+  <AppViewPatient
+    v-model:open="openPatient"
+    v-model:selected="selectedPatient"
+    :patients="patients"
+    :pagination-meta="paginationMeta"
+    @fetch="(value) => getPatientsList({ ...value, 'page-size': 10, includes: 'person' })"
+    @save="handleSavePatient"
+  />
 </template>
diff --git a/app/components/content/sep/entry.vue b/app/components/content/sep/entry.vue
index c99bb472..b387b936 100644
--- a/app/components/content/sep/entry.vue
+++ b/app/components/content/sep/entry.vue
@@ -29,7 +29,6 @@ import {
 } from '~/lib/constants.vclaim'
 
 // Services
-import { getPatientDetail, getPatients } from '~/services/patient.service'
 import { getValueLabelList as getProvinceList } from '~/services/vclaim-region-province.service'
 import { getValueLabelList as getCityList } from '~/services/vclaim-region-city.service'
 import { getValueLabelList as getDistrictList } from '~/services/vclaim-region-district.service'
@@ -40,18 +39,25 @@ import { getList as geMonitoringVisitList } from '~/services/vclaim-monitoring-v
 import { getList as getMonitoringHistoryList } from '~/services/vclaim-monitoring-history.service'
 import { create as createSep, makeSepData } from '~/services/vclaim-sep.service'
 
+// Handlers
+import { 
+  patients, 
+  selectedPatient, 
+  selectedPatientObject, 
+  paginationMeta, 
+  getPatientsList, 
+  getPatientCurrent 
+} from '~/handlers/patient.handler'
+
 const route = useRoute()
 const openPatient = ref(false)
 const openLetter = ref(false)
 const openHistory = ref(false)
-const selectedPatient = ref('')
-const selectedPatientObject = ref<PatientEntity | null>(null)
 const selectedLetter = ref('SK22334442')
 const selectedObjects = ref<any>({})
 const selectedServiceType = ref<string>('')
 const histories = ref<Array<SepHistoryData>>([])
 const visits = ref<Array<SepVisitData>>([])
-const patients = ref<Array<{ id: string; identity: string; number: string; bpjs: string; name: string }>>([])
 const doctors = ref<Array<{ value: string | number; label: string }>>([])
 const diagnoses = ref<Array<{ value: string | number; label: string }>>([])
 const facilitiesFrom = ref<Array<{ value: string | number; label: string }>>([])
@@ -69,76 +75,9 @@ const districtsList = ref<Array<{ value: string; label: string }>>([])
 const classLevelsList = ref<Array<{ value: string; label: string }>>([])
 const classLevelUpgradesList = ref<Array<{ value: string; label: string }>>([])
 const classPaySourcesList = ref<Array<{ value: string; label: string }>>([])
-const isPatientsLoading = ref(false)
 const isServiceHidden = ref(false)
 const isSaveLoading = ref(false)
 const resourceType = ref('')
-const paginationMeta = ref<PaginationMeta>({
-  recordCount: 0,
-  page: 1,
-  pageSize: 10,
-  totalPage: 5,
-  hasNext: false,
-  hasPrev: false,
-})
-
-function mapPatientToRow(patient: PatientEntity) {
-  const identity = patient?.person?.residentIdentityNumber || '-'
-  const number = patient?.number || '-'
-  const bpjs = '-'
-  const name = patient?.person?.name || '-'
-  return { id: patient.id ? String(patient.id) : '-', identity, number, bpjs, name }
-}
-
-function mapPaginationMetaToRow(meta: any) {
-  const recordCount = meta['record_totalCount'] ? Number(meta['record_totalCount']) : 0
-  const currentCount = meta['record_currentCount'] ? Number(meta['record_currentCount']) : 0
-  const page = meta['page_number'] ? Number(meta['page_number']) : 1
-  const pageSize = meta['page_size'] ? Number(meta['page_size']) : 10
-  const totalPage = Math.ceil(recordCount / pageSize)
-
-  return {
-    recordCount,
-    page,
-    pageSize,
-    totalPage,
-    hasNext: currentCount < recordCount && page < totalPage,
-    hasPrev: page > 1,
-  }
-}
-
-async function getPatientsList(params: any = { 'page-size': 10 }) {
-  try {
-    isPatientsLoading.value = true
-    patients.value = []
-    paginationMeta.value = {} as PaginationMeta
-    const result = await getPatients(params)
-    if (result && result.success && result.body && Array.isArray(result.body.data)) {
-      const meta = result.body.meta
-      patients.value = result.body.data.map(mapPatientToRow)
-      paginationMeta.value = mapPaginationMetaToRow(meta)
-    } else {
-      patients.value = [] // fallback to empty array
-    }
-  } catch (err) {
-    console.error('Failed to fetch patients for SEP search:', err)
-    patients.value = []
-  } finally {
-    isPatientsLoading.value = false
-  }
-}
-
-async function getPatientCurrent(id: string) {
-  try {
-    const result = await getPatientDetail(Number(id))
-    if (result && result.success && result.body && result.body.data) {
-      const patient = result.body.data || null
-      selectedPatientObject.value = patient
-    }
-  } catch (err) {
-    console.error('Failed to fetch patient:', err)
-  }
-}
 
 async function getMonitoringHistoryMappers() {
   histories.value = []
diff --git a/app/handlers/patient.handler.ts b/app/handlers/patient.handler.ts
index f87eaf71..a74aae61 100644
--- a/app/handlers/patient.handler.ts
+++ b/app/handlers/patient.handler.ts
@@ -1,8 +1,99 @@
 // Handlers
 import { genCrudHandler } from '~/handlers/_handler'
 
+// Types
+import type { PatientEntity } from '~/models/patient'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
 // Services
-import { postPatient as create, patchPatient as update, removePatient as remove } from '~/services/patient.service'
+import {
+  postPatient as create,
+  patchPatient as update,
+  removePatient as remove,
+  getPatientDetail,
+  getPatients,
+} from '~/services/patient.service'
+
+const isPatientsLoading = ref(false)
+const patients = ref<Array<{ id: string; identity: string; number: string; bpjs: string; name: string }>>([])
+const selectedPatient = ref<string>('')
+const selectedPatientObject = ref<PatientEntity | null>(null)
+const paginationMeta = ref<PaginationMeta>({
+  recordCount: 0,
+  page: 1,
+  pageSize: 10,
+  totalPage: 5,
+  hasNext: false,
+  hasPrev: false,
+})
+
+function mapPatientToRow(patient: PatientEntity) {
+  const identity = patient?.person?.residentIdentityNumber || '-'
+  const number = patient?.number || '-'
+  const bpjs = '-'
+  const name = patient?.person?.name || '-'
+  return { id: patient.id ? String(patient.id) : '-', identity, number, bpjs, name }
+}
+
+function mapPaginationMetaToRow(meta: any) {
+  const recordCount = meta['record_totalCount'] ? Number(meta['record_totalCount']) : 0
+  const currentCount = meta['record_currentCount'] ? Number(meta['record_currentCount']) : 0
+  const page = meta['page_number'] ? Number(meta['page_number']) : 1
+  const pageSize = meta['page_size'] ? Number(meta['page_size']) : 10
+  const totalPage = Math.ceil(recordCount / pageSize)
+
+  return {
+    recordCount,
+    page,
+    pageSize,
+    totalPage,
+    hasNext: currentCount < recordCount && page < totalPage,
+    hasPrev: page > 1,
+  }
+}
+
+async function getPatientsList(params: any = { 'page-size': 10 }) {
+  try {
+    isPatientsLoading.value = true
+    patients.value = []
+    paginationMeta.value = {} as PaginationMeta
+    const result = await getPatients(params)
+    if (result && result.success && result.body && Array.isArray(result.body.data)) {
+      const meta = result.body.meta
+      patients.value = result.body.data.map(mapPatientToRow)
+      paginationMeta.value = mapPaginationMetaToRow(meta)
+    } else {
+      patients.value = [] // fallback to empty array
+    }
+  } catch (err) {
+    console.error('Failed to fetch patients for SEP search:', err)
+    patients.value = []
+  } finally {
+    isPatientsLoading.value = false
+  }
+}
+
+async function getPatientCurrent(id: string) {
+  try {
+    const result = await getPatientDetail(Number(id))
+    if (result && result.success && result.body && result.body.data) {
+      const patient = result.body.data || null
+      selectedPatientObject.value = patient
+    }
+  } catch (err) {
+    console.error('Failed to fetch patient:', err)
+  }
+}
+
+export {
+  isPatientsLoading,
+  patients,
+  selectedPatient,
+  selectedPatientObject,
+  paginationMeta,
+  getPatientsList,
+  getPatientCurrent,
+}
 
 export const {
   recId,