diff --git a/app/components/app/unit/entry-form.vue b/app/components/app/unit/entry-form.vue
index c8581f4e..463a6683 100644
--- a/app/components/app/unit/entry-form.vue
+++ b/app/components/app/unit/entry-form.vue
@@ -1,14 +1,19 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import Block from '~/components/pub/custom-ui/form/block.vue'
+import { toTypedSchema } from '@vee-validate/zod'
 import Combobox from '~/components/pub/custom-ui/form/combobox.vue'
 import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
 import Field from '~/components/pub/custom-ui/form/field.vue'
 import Label from '~/components/pub/custom-ui/form/label.vue'
 
+interface UnitFormData {
+  name: string
+  code: string
+  parentId: string
+}
+
 const props = defineProps<{
-  modelValue: any
-  installation: {
+  unit: {
     msg: {
       placeholder: string
       search: string
@@ -20,47 +25,101 @@ const props = defineProps<{
       code: string
     }[]
   }
+  schema: any
+  initialValues?: Partial<UnitFormData>
   errors?: FormErrors
 }>()
-const emit = defineEmits(['update:modelValue', 'event'])
 
-const data = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val),
-})
+const emit = defineEmits<{
+  'submit': [values: UnitFormData, resetForm: () => void]
+  'cancel': [resetForm: () => void]
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+
+// Form submission handler
+function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
+  const formData: UnitFormData = {
+    name: values.name || '',
+    code: values.code || '',
+    parentId: values.parentId || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm({ resetForm }: { resetForm: () => void }) {
+  emit('cancel', resetForm)
+}
 </script>
 
 <template>
-  <form id="entry-form">
-    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
-      <div class="flex flex-col justify-between">
-        <Block>
-          <FieldGroup :column="2">
-            <Label>Nama</Label>
+  <Form
+    v-slot="{ handleSubmit, resetForm }" as="" keep-values :validation-schema="formSchema"
+    :initial-values="initialValues"
+    >
+    <form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
+      <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+        <div class="flex flex-col justify-between">
+          <FieldGroup>
+            <Label label-for="name">Nama</Label>
             <Field id="name" :errors="errors">
-              <Input v-model="data.name" />
+              <FormField v-slot="{ componentField }" name="name">
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      id="name" type="text" placeholder="Masukkan nama unit" autocomplete="off"
+                      v-bind="componentField"
+                      />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
             </Field>
           </FieldGroup>
-          <FieldGroup :column="2">
-            <Label>Kode</Label>
+
+          <FieldGroup>
+            <Label label-for="code">Kode</Label>
             <Field id="code" :errors="errors">
-              <Input v-model="data.code" />
+              <FormField v-slot="{ componentField }" name="code">
+                <FormItem>
+                  <FormControl>
+                    <Input id="code" type="text" placeholder="Masukkan kode unit" autocomplete="off" v-bind="componentField" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
             </Field>
           </FieldGroup>
-          <FieldGroup :column="2">
-            <Label>Instalasi</Label>
+
+          <FieldGroup>
+            <Label label-for="parentId">Instalasi</Label>
             <Field id="parentId" :errors="errors">
-              <Combobox
-                v-model="data.parentId"
-                :items="props.installation.items"
-                :placeholder="props.installation.msg.placeholder"
-                :search-placeholder="props.installation.msg.search"
-                :empty-message="props.installation.msg.empty"
-              />
+              <FormField v-slot="{ componentField }" name="parentId">
+                <FormItem>
+                  <FormControl>
+                    <Combobox
+                      id="parentId" v-bind="componentField" :items="unit.items"
+                      :placeholder="unit.msg.placeholder" :search-placeholder="unit.msg.search"
+                      :empty-message="unit.msg.empty"
+                      />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
             </Field>
           </FieldGroup>
-        </Block>
+        </div>
       </div>
-    </div>
-  </form>
+
+      <div class="flex justify-end gap-2 mt-4">
+        <Button type="button" variant="outline" @click="onCancelForm({ resetForm })">
+          Batal
+        </Button>
+        <Button type="submit">
+          Simpan
+        </Button>
+      </div>
+    </form>
+  </Form>
 </template>
diff --git a/app/components/app/unit/list-cfg.ts b/app/components/app/unit/list-cfg.ts
new file mode 100644
index 00000000..00423066
--- /dev/null
+++ b/app/components/app/unit/list-cfg.ts
@@ -0,0 +1,86 @@
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} from '~/components/pub/custom-ui/data/types'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-ud.vue'))
+
+export const cols: Col[] = [
+  { width: 100 },
+  { },
+  { },
+  { },
+  { width: 50 },
+]
+
+export const header: Th[][] = [
+  [
+    { label: 'Id' },
+    { label: 'Nama' },
+    { label: 'Kode' },
+    { label: 'Instalasi' },
+    { label: '' },
+  ],
+]
+
+export const keys = [
+  'id',
+  'firstName',
+  'cellphone',
+  'birth_place',
+  'action',
+]
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: RecStrFuncUnknown = {
+  name: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+  },
+  identity_number: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+      return '(TANPA NIK)'
+    }
+    return recX.identity_number
+  },
+  inPatient_itemPrice: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+  },
+  outPatient_itemPrice: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+  },
+}
+
+export const funcComponent: RecStrFuncComponent = {
+  action(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+      props: {
+        size: 'sm',
+      },
+    }
+    return res
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {
+  patient_address(_rec) {
+    return '-'
+  },
+}
diff --git a/app/components/app/unit/list.vue b/app/components/app/unit/list.vue
index d3a63407..1baaa6ba 100644
--- a/app/components/app/unit/list.vue
+++ b/app/components/app/unit/list.vue
@@ -1,54 +1,35 @@
 <script setup lang="ts">
-// #region Props & Emits
-const props = defineProps<{
-  title: string
-}>()
+import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta?: PaginationMeta
+}
+
+defineProps<Props>()
 
 const emit = defineEmits<{
-  (e: 'update', value: string): void
+  pageChange: [page: number]
 }>()
-// #endregion
 
-// #region State & Computed
-// =============================
-const count = ref(0)
-const double = computed(() => count.value * 2)
-// #endregion
-
-// #region Lifecycle Hooks
-onMounted(() => {
-  // init code
-  fetchData()
-})
-// #endregion
-
-// #region Functions
-async function fetchData() {
-  console.log('fetched')
+function handlePageChange(page: number) {
+  emit('pageChange', page)
 }
-// #endregion region
-
-// #region Utilities & event handlers
-function increment() {
-  count.value++
-}
-// #endregion
-
-// #region Watchers
-watch(count, (newVal, oldVal) => {
-  console.log('count changed:', oldVal, '->', newVal)
-})
-// #endregion
 </script>
 
 <template>
-  <div>
-    <p>Count: {{ count }}</p>
-    <p>Double: {{ double }}</p>
-    <button @click="increment">+1</button>
+  <div class="space-y-4">
+    <PubBaseDataTable
+:rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
+      :func-html="funcHtml" :func-component="funcComponent" :skeleton-size="paginationMeta?.pageSize"
+/>
+
+    <template v-if="paginationMeta">
+      <div v-if="paginationMeta.totalPage > 1">
+        <PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+      </div>
+    </template>
+
   </div>
 </template>
-
-<style scoped>
-/* component style */
-</style>
diff --git a/app/components/flow/unit/entry.vue b/app/components/flow/unit/entry.ts
similarity index 53%
rename from app/components/flow/unit/entry.vue
rename to app/components/flow/unit/entry.ts
index 323e6649..bf85a0ed 100644
--- a/app/components/flow/unit/entry.vue
+++ b/app/components/flow/unit/entry.ts
@@ -1,18 +1,8 @@
-<script setup lang="ts">
 import * as z from 'zod'
-import Action from '~/components/pub/custom-ui/nav-footer/ba-su.vue'
 
-const { errors, setFromZodError, clearErrors } = useFormErrors()
-
-const data = ref({
-  code: '',
-  name: '',
-  parentId: '',
-})
-
-const installation = {
+export const unitConf = {
   msg: {
-    placeholder: '---pilih instalasi utama',
+    placeholder: '--- pilih instalasi',
     search: 'kode, nama instalasi',
     empty: 'instalasi tidak ditemukan',
   },
@@ -40,9 +30,18 @@ const installation = {
   ],
 }
 
-const schema = z.object({
-  name: z.string().min(1, 'Nama unit harus diisi'),
-  code: z.string().min(1, 'Kode unit harus diisi'),
+export const schemaConf = z.object({
+  name: z
+    .string({
+      required_error: 'Nama unit harus diisi',
+    })
+    .min(1, 'Nama unit harus diisi'),
+
+  code: z
+    .string({
+      required_error: 'Kode unit harus diisi',
+    })
+    .min(1, 'Kode unit harus diisi'),
   parentId: z.preprocess(
     (input: unknown) => {
       if (typeof input === 'string') {
@@ -55,44 +54,10 @@ const schema = z.object({
 
       return input
     },
-    z.number().refine((num) => num > 0, 'Instalasi induk harus dipilih'),
+    z
+      .number({
+        required_error: 'Instalasi induk harus dipilih',
+      })
+      .refine((num) => num > 0, 'Instalasi induk harus dipilih'),
   ),
 })
-
-function onClick(type: string) {
-  if (type === 'cancel') {
-    navigateTo('/org-src/unit')
-  } else if (type === 'draft') {
-    // do something
-  } else if (type === 'submit') {
-    // Clear previous errors
-    clearErrors()
-
-    const requestData = schema.safeParse(data.value)
-    if (!requestData.success) {
-      // Set errors menggunakan composable
-      setFromZodError(requestData.error)
-
-      // Optional: tampilkan toast notification untuk error general
-      console.warn('Form validation failed:', requestData.error)
-      return
-    }
-
-    console.log('Form data valid:', requestData.data)
-    // do something with valid data
-  }
-}
-</script>
-
-<template>
-  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
-    <Icon name="i-lucide-user" class="me-2" />
-    <span class="font-semibold">Tambah</span> Unit
-  </div>
-  <div>
-    <AppUnitEntryForm v-model="data" :errors="errors" :installation="installation" />
-  </div>
-  <div class="my-2 flex justify-end py-2">
-    <Action @click="onClick" />
-  </div>
-</template>
diff --git a/app/components/flow/unit/list.vue b/app/components/flow/unit/list.vue
index d3a63407..e8c09bb0 100644
--- a/app/components/flow/unit/list.vue
+++ b/app/components/flow/unit/list.vue
@@ -1,51 +1,300 @@
 <script setup lang="ts">
-// #region Props & Emits
-const props = defineProps<{
-  title: string
-}>()
-
-const emit = defineEmits<{
-  (e: 'update', value: string): void
-}>()
-// #endregion
+import type { DataTableLoader } from '~/components/pub/base/data-table/type'
+import type { HeaderPrep } from '~/components/pub/custom-ui/data/types'
+import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import { refDebounced, useUrlSearchParams } from '@vueuse/core'
+import AppUnitEntryForm from '~/components/app/unit/entry-form.vue'
+import Dialog from '~/components/pub/base/modal/dialog.vue'
+import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
+import { ActionEvents } from '~/components/pub/custom-ui/data/types'
+import Header from '~/components/pub/custom-ui/nav-header/header.vue'
+import { schemaConf, unitConf } from './entry'
+import { defaultQuery, querySchema } from './schema.query'
 
 // #region State & Computed
-// =============================
-const count = ref(0)
-const double = computed(() => count.value * 2)
+const data = ref([])
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+// Dialog state
+const isFormEntryDialogOpen = ref(false)
+const isRecordConfirmationOpen = ref(false)
+
+// URL state management
+const queryParams = useUrlSearchParams('history', {
+  initialValue: defaultQuery,
+  removeFalsyValues: true,
+})
+
+const params = computed(() => {
+  const result = querySchema.safeParse(queryParams)
+  return result.data || defaultQuery
+})
+
+// Pagination state - computed from URL params
+const paginationMeta = reactive<PaginationMeta>({
+  recordCount: 0,
+  page: params.value.page,
+  pageSize: params.value.pageSize,
+  totalPage: 0,
+  hasNext: false,
+  hasPrev: false,
+})
+
+// Table action rowId provider
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+// Search model with debounce
+const searchInput = ref(params.value.q || '')
+const debouncedSearch = refDebounced(searchInput, 500) // 500ms debounce
+
+const headerPrep: HeaderPrep = {
+  title: 'Unit',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (_val: string) => {
+      // Handle search input - this will be triggered by the header component
+    },
+    onClick: () => {
+      // Handle search button click if needed
+    },
+    onClear: () => {
+      // Handle search clear
+    },
+  },
+  addNav: {
+    label: 'Tambah Unit',
+    icon: 'i-lucide-send',
+    onClick: () => {
+      isFormEntryDialogOpen.value = true
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
 // #endregion
 
 // #region Lifecycle Hooks
 onMounted(() => {
-  // init code
-  fetchData()
+  getUnitList()
 })
 // #endregion
 
 // #region Functions
-async function fetchData() {
-  console.log('fetched')
+async function getUnitList() {
+  isLoading.isTableLoading = true
+
+  try {
+    // Use current params from URL state
+    const currentParams = params.value
+
+    // Prepare query parameters for pagination and search
+    const urlParams = new URLSearchParams({
+      'page-number': currentParams.page.toString(),
+      'page-size': currentParams.pageSize.toString(),
+    })
+
+    if (currentParams.q) {
+      urlParams.append('search', currentParams.q)
+    }
+
+    const resp = await xfetch(`/api/v1/patient?${urlParams.toString()}`)
+
+    if (resp.success) {
+      const responseBody = resp.body as Record<string, any>
+      data.value = responseBody.data || []
+
+      const pager = responseBody.meta
+      // Update pagination meta from response
+      // Fallback if meta is not provided by API
+      paginationMeta.recordCount = pager.record_totalCount
+      paginationMeta.page = currentParams.page
+      paginationMeta.pageSize = currentParams.pageSize
+      paginationMeta.totalPage = Math.ceil(pager.record_totalCount / paginationMeta.pageSize)
+      paginationMeta.hasNext = paginationMeta.page < paginationMeta.totalPage
+      paginationMeta.hasPrev = paginationMeta.page > 1
+    }
+  } catch (error) {
+    console.error('Error fetching Unit list:', error)
+    data.value = []
+    paginationMeta.recordCount = 0
+    paginationMeta.totalPage = 0
+    paginationMeta.hasNext = false
+    paginationMeta.hasPrev = false
+  } finally {
+    isLoading.isTableLoading = false
+  }
 }
+
+// Handle pagination page change
+function handlePageChange(page: number) {
+  // Update URL params - this will trigger watcher
+  queryParams.page = page
+}
+
+async function handleDeleteRow(record: any) {
+  try {
+    // TODO : hit backend request untuk delete
+    console.log('Deleting record:', record)
+
+    // Simulate API call
+    // const response = await xfetch(`/api/v1/unit/${record.id}`, {
+    //   method: 'DELETE'
+    // })
+
+    // Refresh data setelah berhasil delete
+    await getUnitList()
+
+    // TODO: Show success message
+    console.log('Record deleted successfully')
+  } catch (error) {
+    console.error('Error deleting record:', error)
+    // TODO: Show error message
+  } finally {
+    // Reset record state
+    recId.value = 0
+    recAction.value = ''
+    recItem.value = null
+  }
+}
+
 // #endregion region
 
-// #region Utilities & event handlers
-function increment() {
-  count.value++
+// #region Form event handlers
+
+function onCancelForm(resetForm: () => void) {
+  isFormEntryDialogOpen.value = false
+  setTimeout(() => {
+    resetForm()
+  }, 500)
+}
+
+async function onSubmitForm(values: any, resetForm: () => void) {
+  let isSuccess = false
+  try {
+    // TODO: Implement form submission logic
+    console.log('Form submitted:', values)
+
+    // Simulate API call
+    // const response = await xfetch('/api/v1/unit', {
+    //   method: 'POST',
+    //   body: JSON.stringify(values)
+    // })
+
+    // If successful, mark as success and close dialog
+    isFormEntryDialogOpen.value = false
+    isSuccess = true
+
+    // Refresh data after successful submission
+    await getUnitList()
+
+    // TODO: Show success message
+    console.log('Unit created successfully')
+  } catch (error: unknown) {
+    console.warn('Error submitting form:', error)
+    isSuccess = false
+    // Don't close dialog or reset form on error
+    // TODO: Show error message to user
+  } finally {
+    if (isSuccess) {
+      setTimeout(() => {
+        resetForm()
+      }, 500)
+    }
+  }
 }
 // #endregion
 
 // #region Watchers
-watch(count, (newVal, oldVal) => {
-  console.log('count changed:', oldVal, '->', newVal)
+// Watch for URL param changes and trigger refetch
+watch(params, (newParams) => {
+  // Sync search input with URL params (for back/forward navigation)
+  if (newParams.q !== searchInput.value) {
+    searchInput.value = newParams.q || ''
+  }
+  getUnitList()
+}, { deep: true })
+
+// Handle search from header component
+function handleSearch(searchValue: string) {
+  // Update URL params - this will trigger watcher and refetch data
+  queryParams.q = searchValue
+  queryParams.page = 1 // Reset to first page when searching
+}
+
+// Watch debounced search and update URL params (keeping for backward compatibility)
+watch(debouncedSearch, (newValue: any) => {
+  // Only search if 3+ characters or empty (to clear search)
+  if (newValue.length === 0 || newValue.length >= 3) {
+    queryParams.q = newValue
+    queryParams.page = 1 // Reset to first page when searching
+  }
 })
+
+// Watch for row actions
+watch(recId, () => {
+  switch (recAction.value) {
+    case ActionEvents.showEdit:
+      // TODO: Handle edit action
+      // isFormEntryDialogOpen.value = true
+      break
+    case ActionEvents.showConfirmDelete:
+      // Trigger confirmation modal open
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+// Handle confirmation result
+function handleConfirmDelete(record: any, action: string) {
+  console.log('Confirmed action:', action, 'for record:', record)
+  handleDeleteRow(record)
+}
+
+function handleCancelConfirmation() {
+  // Reset record state when cancelled
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
 // #endregion
 </script>
 
 <template>
-  <div>
-    <p>Count: {{ count }}</p>
-    <p>Double: {{ double }}</p>
-    <button @click="increment">+1</button>
+  <div class="rounded-md border p-4">
+    <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
+    <AppUnitList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+    <Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Unit" size="lg" prevent-outside>
+      <AppUnitEntryForm
+:unit="unitConf" :schema="schemaConf" :initial-values="{ name: '', code: '', parentId: '' }"
+        @submit="onSubmitForm" @cancel="onCancelForm"
+/>
+    </Dialog>
+
+    <!-- Record Confirmation Modal -->
+    <RecordConfirmation
+v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
+      @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation"
+>
+      <template #default="{ record }">
+        <div class="text-sm">
+          <p><strong>ID:</strong> {{ record?.id }}</p>
+          <p v-if="record?.firstName"><strong>Nama:</strong> {{ record.firstName }}</p>
+          <p v-if="record?.code"><strong>Kode:</strong> {{ record.cellphone }}</p>
+        </div>
+      </template>
+    </RecordConfirmation>
   </div>
 </template>
 
diff --git a/app/components/flow/unit/schema.query.ts b/app/components/flow/unit/schema.query.ts
new file mode 100644
index 00000000..9b1a4606
--- /dev/null
+++ b/app/components/flow/unit/schema.query.ts
@@ -0,0 +1,15 @@
+import * as z from 'zod'
+
+export const querySchema = z.object({
+  q: z.union([z.literal(''), z.string().min(3)]).optional().catch(''),
+  page: z.coerce.number().int().min(1).default(1).catch(1),
+  pageSize: z.coerce.number().int().min(5).max(20).default(10).catch(10),
+})
+
+export const defaultQuery = {
+  q: '',
+  page: 1,
+  pageSize: 10,
+}
+
+export type QueryParams = z.infer<typeof querySchema>
diff --git a/app/pages/(features)/org-src/unit/add.vue b/app/pages/(features)/org-src/unit/add.vue
deleted file mode 100644
index 195f4b24..00000000
--- a/app/pages/(features)/org-src/unit/add.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<script setup lang="ts">
-// import type { PagePermission } from '~/models/role'
-import Error from '~/components/pub/base/error/error.vue'
-// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
-
-definePageMeta({
-  // middleware: ['rbac'],
-  // roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
-  title: 'Tambah Unit Instalasi',
-  contentFrame: 'cf-full-width',
-})
-
-const route = useRoute()
-
-useHead({
-  title: () => route.meta.title as string,
-})
-
-// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
-
-// const { checkRole, hasReadAccess } = useRBAC()
-
-// // Check if user has access to this page
-// const hasAccess = checkRole(roleAccess)
-// if (!hasAccess) {
-//   navigateTo('/403')
-// }
-
-// Define permission-based computed properties
-// const canRead = hasReadAccess(roleAccess)
-const canRead = true
-</script>
-
-<template>
-  <div>
-    <div v-if="canRead">
-      <FlowUnitEntry />
-    </div>
-    <Error v-else :status-code="403" />
-  </div>
-</template>
diff --git a/app/pages/(features)/org-src/unit/index.vue b/app/pages/(features)/org-src/unit/index.vue
index 40bd09be..801105eb 100644
--- a/app/pages/(features)/org-src/unit/index.vue
+++ b/app/pages/(features)/org-src/unit/index.vue
@@ -6,7 +6,7 @@ import Error from '~/components/pub/base/error/error.vue'
 definePageMeta({
   // middleware: ['rbac'],
   roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
-  title: 'List Division',
+  title: 'List Unit',
   contentFrame: 'cf-full-width',
 })
 
@@ -34,7 +34,7 @@ const canRead = true
 <template>
   <div>
     <div v-if="canRead">
-      route unit list
+      <FlowUnitList />
     </div>
     <Error v-else :status-code="403" />
   </div>