diff --git a/app/components/app/document-upload/list.vue b/app/components/app/document-upload/list.vue
index dde32820..8274e752 100644
--- a/app/components/app/document-upload/list.vue
+++ b/app/components/app/document-upload/list.vue
@@ -5,7 +5,7 @@ import { config } from './list.cfg'
 
 interface Props {
   data: any[]
-  // paginationMeta: PaginationMeta
+  paginationMeta: PaginationMeta
 }
 
 defineProps<Props>()
@@ -24,8 +24,8 @@ function handlePageChange(page: number) {
     <PubMyUiDataTable
       v-bind="config"
       :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
     />
-    <!-- :skeleton-size="paginationMeta?.pageSize" -->
-    <!-- <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" /> -->
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
 </template>
diff --git a/app/components/content/document-upload/add.vue b/app/components/content/document-upload/add.vue
index 5ee3d862..7d42f4f6 100644
--- a/app/components/content/document-upload/add.vue
+++ b/app/components/content/document-upload/add.vue
@@ -57,7 +57,7 @@ async function composeFormData(): Promise<any> {
   inputForm.value?.setValues({
     ...inputForm.value?.values,
     ref_id: encounterId,
-    upload_employee_id: user.user_id
+    upload_employee_id: user.employee_id
   })
 
   const [inputFormState,] = await Promise.all([
diff --git a/app/components/content/document-upload/list.vue b/app/components/content/document-upload/list.vue
index 94f9dd9f..be690871 100644
--- a/app/components/content/document-upload/list.vue
+++ b/app/components/content/document-upload/list.vue
@@ -1,14 +1,12 @@
 <script setup lang="ts">
 // #region Imports
 import { ActionEvents } from '~/components/pub/my-ui/data/types'
-import type { HeaderPrep, } from '~/components/pub/my-ui/data/types'
+import type { HeaderPrep, RefSearchNav, } from '~/components/pub/my-ui/data/types'
 import Header from '~/components/pub/my-ui/nav-header/prep.vue'
-import { usePaginatedList } from '~/composables/usePaginatedList'
 import { getList, remove } from '~/services/supporting-document.service'
 import { toast } from '~/components/pub/ui/toast'
 import type { Encounter } from '~/models/encounter'
 import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
-import { genEncounterDocument } from '~/models/encounter-document'
 // #endregion
 
 // #region State
@@ -20,8 +18,9 @@ const props = defineProps<{
 const route = useRoute()
 const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
 
-const dummy = computed(() => {
-  return props.encounter?.encounterDocuments || []
+const { data, paginationMeta, handlePageChange, handleSearch, searchInput, fetchData } = usePaginatedList({
+  fetchFn: (params) => getList({ 'encounter-id': encounterId, ...params }),
+  entityName: 'encounter-document',
 })
 
 const isRecordConfirmationOpen = ref(false)
@@ -41,6 +40,18 @@ const headerPrep: HeaderPrep = {
       }),
   },
 }
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (val: string) => {
+    searchInput.value = val
+  },
+  onClear: () => {
+    searchInput.value = ''
+  },
+}
 // #endregion
 
 // #region Lifecycle Hooks
@@ -56,7 +67,7 @@ async function handleConfirmDelete(record: any, action: string) {
       const result = await remove(record.id)
       if (result.success) {
         toast({ title: 'Berhasil', description: 'Data berhasil dihapus', variant: 'default' })
-        props.refresh()
+        fetchData()
       } else {
         toast({ title: 'Gagal', description: `Data gagal dihapus`, variant: 'destructive' })
       }
@@ -103,8 +114,12 @@ watch([recId, recAction, timestamp], () => {
 </script>
 
 <template>
-  <Header :prep="{ ...headerPrep }"/>
-  <AppDocumentUploadList :data="dummy"/>
+  <Header :prep="{ ...headerPrep }"
+      v-model:search="searchInput"
+      :ref-search-nav="refSearchNav"
+      @search="handleSearch"
+  />
+  <AppDocumentUploadList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange"/>
 
   <RecordConfirmation v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
       @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation">
@@ -114,9 +129,9 @@ watch([recId, recAction, timestamp], () => {
             <strong>ID:</strong>
             {{ record?.id }}
           </p>
-          <p v-if="record?.firstName">
+          <p v-if="record?.name">
             <strong>Nama:</strong>
-            {{ record.name }}
+            {{ record?.name }}
           </p>
         </div>
       </template>
diff --git a/app/services/supporting-document.service.ts b/app/services/supporting-document.service.ts
index b02cec0e..46eaffa9 100644
--- a/app/services/supporting-document.service.ts
+++ b/app/services/supporting-document.service.ts
@@ -4,11 +4,12 @@ import * as base from './_crud-base'
 // Constants
 import { encounterClassCodes, uploadCode, type UploadCodeKey } from '~/lib/constants'
 
-const path = '/api/v1/upload'
-const name = 'upload'
+const path = '/api/v1/encounter-document'
+const create_path = '/api/v1/upload'
+const name = 'encounter-document'
 
 export function create(data: any) {
-  return base.create(path, data, name)
+  return base.create(create_path, data, name)
 }
 
 export function getList(params: any = null) {