diff --git a/app/components/app/medicine/list.vue b/app/components/app/medicine/list.vue
index 5b8778d9..d44aa4d8 100644
--- a/app/components/app/medicine/list.vue
+++ b/app/components/app/medicine/list.vue
@@ -1,19 +1,35 @@
 <script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
 import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
-defineProps<{
+interface Props {
   data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
 }>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
 </script>
 
 <template>
-  <PubBaseDataTable
-    :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
-  />
+  <div class="space-y-4">
+    <PubBaseDataTable
+      :rows="data"
+      :cols="cols"
+      :header="header"
+      :keys="keys"
+      :func-parsed="funcParsed"
+      :func-html="funcHtml"
+      :func-component="funcComponent"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
 </template>
diff --git a/app/handlers/installation.handler.ts b/app/handlers/installation.handler.ts
new file mode 100644
index 00000000..d3a1d06e
--- /dev/null
+++ b/app/handlers/installation.handler.ts
@@ -0,0 +1,21 @@
+import { createCrudHandler } from '~/handlers/_handler'
+import { postInstallation, patchInstallation, removeInstallation } from '~/services/installation.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = createCrudHandler({
+  post: postInstallation,
+  patch: patchInstallation,
+  remove: removeInstallation,
+})
diff --git a/app/handlers/unit.handler.ts b/app/handlers/unit.handler.ts
new file mode 100644
index 00000000..ff235bb4
--- /dev/null
+++ b/app/handlers/unit.handler.ts
@@ -0,0 +1,21 @@
+import { createCrudHandler } from '~/handlers/_handler'
+import { postUnit, patchUnit, removeUnit } from '~/services/unit.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = createCrudHandler({
+  post: postUnit,
+  patch: patchUnit,
+  remove: removeUnit,
+})
diff --git a/app/models/installation.ts b/app/models/installation.ts
new file mode 100644
index 00000000..c662714e
--- /dev/null
+++ b/app/models/installation.ts
@@ -0,0 +1,5 @@
+export interface Installation {
+  code: string
+  name: string
+  encounterClass_code: string
+}
diff --git a/app/models/unit.ts b/app/models/unit.ts
new file mode 100644
index 00000000..f137a38c
--- /dev/null
+++ b/app/models/unit.ts
@@ -0,0 +1,5 @@
+export interface Unit {
+  code: string
+  name: string
+  installation: string | number
+}
diff --git a/app/services/installation.service.ts b/app/services/installation.service.ts
new file mode 100644
index 00000000..8fd9e858
--- /dev/null
+++ b/app/services/installation.service.ts
@@ -0,0 +1,79 @@
+import { xfetch } from '~/composables/useXfetch'
+
+const mainUrl = '/api/v1/installation'
+
+export async function getInstallations(params: any = null) {
+  try {
+    let url = mainUrl
+    if (params && typeof params === 'object' && Object.keys(params).length > 0) {
+      const searchParams = new URLSearchParams()
+      for (const key in params) {
+        if (params[key] !== null && params[key] !== undefined && params[key] !== '') {
+          searchParams.append(key, params[key])
+        }
+      }
+      const queryString = searchParams.toString()
+      if (queryString) url += `?${queryString}`
+    }
+    const resp = await xfetch(mainUrl, 'GET')
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error fetching installations:', error)
+    throw new Error('Failed to fetch installations')
+  }
+}
+
+export async function getInstallationDetail(id: number | string) {
+  try {
+    const resp = await xfetch(`${mainUrl}/${id}`, 'GET')
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error fetching installation detail:', error)
+    throw new Error('Failed to get installation detail')
+  }
+}
+
+export async function postInstallation(record: any) {
+  try {
+    const resp = await xfetch(mainUrl, 'POST', record)
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error posting installation:', error)
+    throw new Error('Failed to post installation')
+  }
+}
+
+export async function patchInstallation(id: number | string, record: any) {
+  try {
+    const resp = await xfetch(`${mainUrl}/${id}`, 'PATCH', record)
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error putting installation:', error)
+    throw new Error('Failed to put installation')
+  }
+}
+
+export async function removeInstallation(id: number | string) {
+  try {
+    const resp = await xfetch(`${mainUrl}/${id}`, 'DELETE')
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error deleting record:', error)
+    throw new Error('Failed to delete installation')
+  }
+}
diff --git a/app/services/unit.service.ts b/app/services/unit.service.ts
new file mode 100644
index 00000000..82d565db
--- /dev/null
+++ b/app/services/unit.service.ts
@@ -0,0 +1,79 @@
+import { xfetch } from '~/composables/useXfetch'
+
+const mainUrl = '/api/v1/unit'
+
+export async function getUnits(params: any = null) {
+  try {
+    let url = mainUrl
+    if (params && typeof params === 'object' && Object.keys(params).length > 0) {
+      const searchParams = new URLSearchParams()
+      for (const key in params) {
+        if (params[key] !== null && params[key] !== undefined && params[key] !== '') {
+          searchParams.append(key, params[key])
+        }
+      }
+      const queryString = searchParams.toString()
+      if (queryString) url += `?${queryString}`
+    }
+    const resp = await xfetch(mainUrl, 'GET')
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error fetching units:', error)
+    throw new Error('Failed to fetch units')
+  }
+}
+
+export async function getUnitDetail(id: number | string) {
+  try {
+    const resp = await xfetch(`${mainUrl}/${id}`, 'GET')
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error fetching unit detail:', error)
+    throw new Error('Failed to get unit detail')
+  }
+}
+
+export async function postUnit(record: any) {
+  try {
+    const resp = await xfetch(mainUrl, 'POST', record)
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error posting unit:', error)
+    throw new Error('Failed to post unit')
+  }
+}
+
+export async function patchUnit(id: number | string, record: any) {
+  try {
+    const resp = await xfetch(`${mainUrl}/${id}`, 'PATCH', record)
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error putting unit:', error)
+    throw new Error('Failed to put unit')
+  }
+}
+
+export async function removeUnit(id: number | string) {
+  try {
+    const resp = await xfetch(`${mainUrl}/${id}`, 'DELETE')
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error deleting record:', error)
+    throw new Error('Failed to delete unit')
+  }
+}