diff --git a/app/components/app/medicine-group/picker.vue b/app/components/app/medicine-group/picker.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/app/components/app/medicine-group/search.vue b/app/components/app/medicine-group/search.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/app/components/app/medicine-group/status-badge.vue b/app/components/app/medicine-group/status-badge.vue
deleted file mode 100644
index 32cdfbca..00000000
--- a/app/components/app/medicine-group/status-badge.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { Badge } from '~/components/pub/ui/badge'
-
-const props = defineProps<{
-  rec: any
-  idx?: number
-}>()
-
-const doctorStatus = {
-  0: 'Tidak Aktif',
-  1: 'Aktif',
-}
-
-const statusText = computed(() => {
-  return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
-})
-
-const badgeVariant = computed(() => {
-  return props.rec.status_code === 1 ? 'default' : 'destructive'
-})
-</script>
-
-<template>
-  <div class="flex justify-center">
-    <Badge :variant="badgeVariant">
-      {{ statusText }}
-    </Badge>
-  </div>
-</template>
diff --git a/app/components/app/medicine-method/picker.vue b/app/components/app/medicine-method/picker.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/app/components/app/medicine-method/search.vue b/app/components/app/medicine-method/search.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/app/components/app/uom/entry-form.vue b/app/components/app/uom/entry-form.vue
new file mode 100644
index 00000000..3bf95352
--- /dev/null
+++ b/app/components/app/uom/entry-form.vue
@@ -0,0 +1,96 @@
+
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/custom-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/custom-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/custom-ui/doc-entry/field.vue'
+import Label from '~/components/pub/custom-ui/doc-entry/label.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
+
+// Types
+import type { UomFormData } from '~/schemas/uom.schema'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+interface Props {
+  schema?: z.ZodSchema<any>
+  values?: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: UomFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: props.schema ? toTypedSchema(props.schema) : undefined,
+  initialValues: {
+    code: '',
+    name: '',
+  },
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+}
+
+function onSubmitForm() {
+  const formData = {
+    name: name.value || '',
+    code: code.value || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form id="form-medicine-method" @submit.prevent>
+    <Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
+      <Cell>
+        <Label height="">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading || isReadonly" />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama</Label>
+        <Field :errMessage="errors.name">
+          <Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button type="button" variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/uom/list-cfg.ts b/app/components/app/uom/list-cfg.ts
new file mode 100644
index 00000000..e2c72f9c
--- /dev/null
+++ b/app/components/app/uom/list-cfg.ts
@@ -0,0 +1,46 @@
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} from '~/components/pub/custom-ui/data/types'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
+
+const _doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+export const cols: Col[] = [{}, {}, { width: 50 }]
+
+export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Aksi' }]]
+
+export const keys = ['code', 'name', 'action']
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: RecStrFuncUnknown = {}
+
+export const funcComponent: RecStrFuncComponent = {
+  action(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+    }
+    return res
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {
+  patient_address(_rec) {
+    return '-'
+  },
+}
diff --git a/app/components/app/uom/list.vue b/app/components/app/uom/list.vue
new file mode 100644
index 00000000..d44aa4d8
--- /dev/null
+++ b/app/components/app/uom/list.vue
@@ -0,0 +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'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <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/components/content/equipment/list.vue b/app/components/content/equipment/list.vue
index 497b9bd1..40f5417b 100644
--- a/app/components/content/equipment/list.vue
+++ b/app/components/content/equipment/list.vue
@@ -90,8 +90,8 @@ provide('table_data_loader', isLoading)
 const getCurrentMaterialDetail = async (id: number | string) => {
   const result = await getMaterialDetail(id)
   if (result.success) {
-    const currentMaterial = result.body?.data || {}
-    recItem.value = currentMaterial
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
     isFormEntryDialogOpen.value = true
   }
 }
diff --git a/app/components/content/medicine-group/list.vue b/app/components/content/medicine-group/list.vue
index 34e8d628..5dd89f9c 100644
--- a/app/components/content/medicine-group/list.vue
+++ b/app/components/content/medicine-group/list.vue
@@ -81,8 +81,8 @@ provide('table_data_loader', isLoading)
 const getCurrentMedicineGroupDetail = async (id: number | string) => {
   const result = await getMedicineGroupDetail(id)
   if (result.success) {
-    const currentMaterial = result.body?.data || {}
-    recItem.value = currentMaterial
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
     isFormEntryDialogOpen.value = true
   }
 }
@@ -115,7 +115,7 @@ onMounted(async () => {
   <div class="p-4">
     <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
     <div class="rounded-md border p-4">
-      <AppMedicineMethodList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+      <AppMedicineGroupList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
     </div>
 
     <Dialog
diff --git a/app/components/content/medicine-method/list.vue b/app/components/content/medicine-method/list.vue
index fee2e16f..49d42e42 100644
--- a/app/components/content/medicine-method/list.vue
+++ b/app/components/content/medicine-method/list.vue
@@ -81,8 +81,8 @@ provide('table_data_loader', isLoading)
 const getCurrentMedicineMethodDetail = async (id: number | string) => {
   const result = await getMedicineMethodDetail(id)
   if (result.success) {
-    const currentMaterial = result.body?.data || {}
-    recItem.value = currentMaterial
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
     isFormEntryDialogOpen.value = true
   }
 }
diff --git a/app/components/content/tools/list.vue b/app/components/content/tools/list.vue
index 31cdc2cb..613df671 100644
--- a/app/components/content/tools/list.vue
+++ b/app/components/content/tools/list.vue
@@ -90,8 +90,8 @@ provide('table_data_loader', isLoading)
 const getCurrentToolsDetail = async (id: number | string) => {
   const result = await getDeviceDetail(id)
   if (result.success) {
-    const currentDevice = result.body?.data || {}
-    recItem.value = currentDevice
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
   }
 }
 
diff --git a/app/components/content/uom/list.vue b/app/components/content/uom/list.vue
new file mode 100644
index 00000000..fee2e16f
--- /dev/null
+++ b/app/components/content/uom/list.vue
@@ -0,0 +1,162 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/base/modal/dialog.vue'
+import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
+import AppMedicineMethodEntryForm from '~/components/app/medicine-method/entry-form.vue'
+import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/custom-ui/data/types'
+import { MedicineBaseSchema, type MedicineBaseFormData } from '~/schemas/medicine.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/medicine-method.handler'
+
+// Services
+import { getMedicineMethods, getMedicineMethodDetail } from '~/services/medicine-method.service'
+
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMedicineMethodList,
+} = usePaginatedList({
+  fetchFn: async ({ page, search }) => {
+    const result = await getMedicineMethods({ search, page })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'medicine-method',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Metode Obat',
+  icon: 'i-lucide-medicine-bottle',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (_val: string) => {},
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentMedicineMethodDetail = async (id: number | string) => {
+  const result = await getMedicineMethodDetail(id)
+  if (result.success) {
+    const currentMaterial = result.body?.data || {}
+    recItem.value = currentMaterial
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentMedicineMethodDetail(recId.value)
+      title.value = 'Detail Metode Obat'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentMedicineMethodDetail(recId.value)
+      title.value = 'Edit Metode Obat'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getMedicineMethodList()
+})
+</script>
+
+<template>
+  <div class="p-4">
+    <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
+    <div class="rounded-md border p-4">
+      <AppMedicineMethodList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+    </div>
+
+    <Dialog
+      v-model:open="isFormEntryDialogOpen"
+      :title="!!recItem ? title : 'Tambah Metode Obat'"
+      size="lg"
+      prevent-outside
+    >
+      <AppMedicineMethodEntryForm
+        :schema="MedicineBaseSchema"
+        :values="recItem"
+        :is-loading="isProcessing"
+        :is-readonly="isReadonly"
+        @submit="
+          (values: MedicineBaseFormData | Record<string, any>, resetForm: () => void) => {
+            if (recId > 0) {
+              handleActionEdit(recId, values, getMedicineMethodList, resetForm, toast)
+              return
+            }
+            handleActionSave(values, getMedicineMethodList, resetForm, toast)
+          }
+        "
+        @cancel="handleCancelForm"
+      />
+    </Dialog>
+
+    <!-- Record Confirmation Modal -->
+    <RecordConfirmation
+      v-model:open="isRecordConfirmationOpen"
+      action="delete"
+      :record="recItem"
+      @confirm="() => handleActionRemove(recId, getMedicineMethodList, toast)"
+      @cancel=""
+    >
+      <template #default="{ record }">
+        <div class="text-sm">
+          <p><strong>ID:</strong> {{ record?.id }}</p>
+          <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+          <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+        </div>
+      </template>
+    </RecordConfirmation>
+  </div>
+</template>
diff --git a/app/handlers/uom.handler.ts b/app/handlers/uom.handler.ts
new file mode 100644
index 00000000..e24fbcfa
--- /dev/null
+++ b/app/handlers/uom.handler.ts
@@ -0,0 +1,92 @@
+import { ref } from 'vue'
+
+// Handlers
+import { type ToastFn, handleAsyncAction } from '~/handlers/_handler'
+
+// Services
+import { postUom, patchUom, removeUom } from '~/services/uom.service'
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+const isReadonly = ref(false)
+const isProcessing = ref(false)
+const isFormEntryDialogOpen = ref(false)
+const isRecordConfirmationOpen = ref(false)
+
+function onResetState() {
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
+
+export async function handleActionSave(values: any, refresh: () => void, reset: () => void, toast: ToastFn) {
+  isProcessing.value = true
+  await handleAsyncAction<[any], any>({
+    action: postUom,
+    args: [values],
+    toast,
+    successMessage: 'Data berhasil disimpan',
+    errorMessage: 'Gagal menyimpan data',
+    onSuccess: () => {
+      isFormEntryDialogOpen.value = false
+      if (refresh) refresh()
+    },
+    onFinally: (isSuccess: boolean) => {
+      if (isSuccess) setTimeout(reset, 500)
+      isProcessing.value = false
+    },
+  })
+}
+
+export async function handleActionEdit(
+  id: number | string,
+  values: any,
+  refresh: () => void,
+  reset: () => void,
+  toast: ToastFn,
+) {
+  isProcessing.value = true
+  await handleAsyncAction<[number | string, any], any>({
+    action: patchUom,
+    args: [id, values],
+    toast,
+    successMessage: 'Data berhasil diubah',
+    errorMessage: 'Gagal mengubah data',
+    onSuccess: () => {
+      isFormEntryDialogOpen.value = false
+      if (refresh) refresh()
+    },
+    onFinally: (isSuccess: boolean) => {
+      if (isSuccess) setTimeout(reset, 500)
+      isProcessing.value = false
+    },
+  })
+}
+
+export async function handleActionRemove(id: number | string, refresh: () => void, toast: ToastFn) {
+  isProcessing.value = true
+  await handleAsyncAction<[number | string], any>({
+    action: removeUom,
+    args: [id],
+    toast,
+    successMessage: 'Data berhasil dihapus',
+    errorMessage: 'Gagal menghapus data',
+    onSuccess: () => {
+      if (refresh) refresh()
+    },
+    onFinally: () => {
+      onResetState()
+      isProcessing.value = false
+    },
+  })
+}
+
+export function handleCancelForm(reset: () => void) {
+  isFormEntryDialogOpen.value = false
+  setTimeout(() => {
+    reset()
+  }, 500)
+}
+
+export { recId, recAction, recItem, isReadonly, isProcessing, isFormEntryDialogOpen, isRecordConfirmationOpen }
diff --git a/app/models/_model.ts b/app/models/_model.ts
index 64e4a972..b5f09a71 100644
--- a/app/models/_model.ts
+++ b/app/models/_model.ts
@@ -1,15 +1,20 @@
 // Default item meta model for entities
 export interface ItemMeta {
-  id: number;
-  createdAt: string | null;
-  deletedAt: string | null;
-  updatedAt: string | null;
+  id: number
+  createdAt: string | null
+  deletedAt: string | null
+  updatedAt: string | null
 }
 
 // Pagination meta model for API responses
 export interface PaginationMeta {
-  page_number: string;
-  page_size: string;
-  record_totalCount: string;
-  source: string;
+  page_number: string
+  page_size: string
+  record_totalCount: string
+  source: string
+}
+
+export interface Base {
+  name: string
+  code: string
 }
diff --git a/app/schemas/base.schema.ts b/app/schemas/base.schema.ts
new file mode 100644
index 00000000..b46857ac
--- /dev/null
+++ b/app/schemas/base.schema.ts
@@ -0,0 +1,12 @@
+import { z } from 'zod'
+import type { Base } from '~/models/_model'
+
+const BaseSchema = z.object({
+  code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
+  name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimum 1 karakter'),
+})
+
+type BaseFormData = z.infer<typeof BaseSchema> & Base
+
+export { BaseSchema }
+export type { BaseFormData }
diff --git a/app/schemas/uom.schema.ts b/app/schemas/uom.schema.ts
new file mode 100644
index 00000000..4229e420
--- /dev/null
+++ b/app/schemas/uom.schema.ts
@@ -0,0 +1,4 @@
+import { BaseSchema, type BaseFormData } from './base.schema'
+
+export { BaseSchema as UomSchema }
+export type { BaseFormData as UomFormData }