diff --git a/app/components/content/equipment/list.vue b/app/components/content/equipment/list.vue
index 314b421b..158ceff6 100644
--- a/app/components/content/equipment/list.vue
+++ b/app/components/content/equipment/list.vue
@@ -8,7 +8,7 @@ import AppEquipmentEntryForm from '~/components/app/equipment/entry-form.vue'
 import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
 
 // helpers
-import { toast } from "~/components/pub/ui/toast"
+import { toast } from '~/components/pub/ui/toast'
 
 // Types
 import type { Uom } from '~/models/uom'
@@ -23,9 +23,9 @@ import {
   isFormEntryDialogOpen,
   isRecordConfirmationOpen,
   handleActionSave,
+  handleActionEdit,
   handleActionRemove,
   handleCancelForm,
-  handleActionEdit,
 } from '~/handlers/material.handler'
 
 // Services
@@ -62,7 +62,7 @@ const {
   fetchData: getEquipmentList,
 } = usePaginatedList({
   fetchFn: async ({ page }) => {
-    const result = await getSourceMaterials({ page })
+    const result = await getSourceMaterials({ search: searchInput.value, page })
     return { success: result.success || false, body: result.body || {} }
   },
   entityName: 'equipment',
diff --git a/app/components/content/tools/list.vue b/app/components/content/tools/list.vue
index c6f9e05f..4c82f224 100644
--- a/app/components/content/tools/list.vue
+++ b/app/components/content/tools/list.vue
@@ -7,6 +7,9 @@ import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
 import AppToolsEntryForm from '~/components/app/tools/entry-form.vue'
 import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
 
+// helpers
+import { toast } from "~/components/pub/ui/toast"
+
 // Types
 import type { Uom } from '~/models/uom'
 
@@ -15,10 +18,12 @@ import {
   recId,
   recAction,
   recItem,
+  isReadonly,
   isProcessing,
   isFormEntryDialogOpen,
   isRecordConfirmationOpen,
   handleActionSave,
+  handleActionEdit,
   handleActionRemove,
   handleCancelForm,
 } from '~/handlers/device.handler'
@@ -28,11 +33,13 @@ import { getSourceDevices, getSourceDeviceDetail } from '~/services/device.servi
 import { getSourceUoms } from '~/services/uom.service'
 
 const uoms = ref<{ value: string; label: string }[]>([])
+const title = ref('')
 
 const getToolsDetail = async (id: number | string) => {
   const result = await getSourceDeviceDetail(id)
   if (result.success) {
-    recItem.value = result.data
+    const currentDevice = result.body?.data || {}
+    recItem.value = currentDevice
     isFormEntryDialogOpen.value = true
   }
 }
@@ -40,7 +47,8 @@ const getToolsDetail = async (id: number | string) => {
 const getUomList = async () => {
   const result = await getSourceUoms()
   if (result.success) {
-    uoms.value = result.data.map((uom: Uom) => ({ value: uom.code || uom.erp_id, label: uom.name }))
+    const currentUoms = result.body?.data || []
+    uoms.value = currentUoms.map((uom: Uom) => ({ value: uom.code || uom.erp_id, label: uom.name }))
   }
 }
 
@@ -54,8 +62,8 @@ const {
   fetchData: getToolsList,
 } = usePaginatedList({
   fetchFn: async ({ page }) => {
-    const result = await getSourceDevices({ page })
-    return result.data || []
+    const result = await getSourceDevices({ search: searchInput.value, page })
+    return { success: result.success || false, body: result.body || {} }
   },
   entityName: 'device',
 })
@@ -82,7 +90,10 @@ const headerPrep: HeaderPrep = {
     label: 'Tambah Peralatan',
     icon: 'i-lucide-plus',
     onClick: () => {
+      recItem.value = null
+      recId.value = 0
       isFormEntryDialogOpen.value = true
+      isReadonly.value = false
     },
   },
 }
@@ -95,8 +106,15 @@ provide('table_data_loader', isLoading)
 // Watch for row actions
 watch(recId, () => {
   switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getToolsDetail(recId.value)
+      title.value = 'Detail Peralatan'
+      isReadonly.value = true
+      break
     case ActionEvents.showEdit:
       getToolsDetail(recId.value)
+      title.value = 'Edit Peralatan'
+      isReadonly.value = false
       break
     case ActionEvents.showConfirmDelete:
       isRecordConfirmationOpen.value = true
@@ -105,7 +123,8 @@ watch(recId, () => {
 })
 
 onMounted(async () => {
-  await getUomList();
+  await getUomList()
+  await getToolsList()
 })
 </script>
 
@@ -116,12 +135,27 @@ onMounted(async () => {
       <AppToolsList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
     </div>
 
-    <Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Peralatan" size="lg" prevent-outside>
+    <Dialog
+      v-model:open="isFormEntryDialogOpen"
+      :title="!!recItem ? title : 'Tambah Peralatan'"
+      size="lg"
+      prevent-outside
+    >
       <AppToolsEntryForm
         :schema="DeviceSchema"
+        :values="recItem"
         :uoms="uoms"
         :is-loading="isProcessing"
-        @submit="(values: DeviceFormData, resetForm: any) => handleActionSave(values, getToolsList, resetForm)"
+        :is-readonly="isReadonly"
+        @submit="
+          (values: DeviceFormData, resetForm: any) => {
+            if (recId > 0) {
+              handleActionEdit(recId, values, getToolsList, resetForm, toast)
+              return
+            }
+            handleActionSave(values, getToolsList, resetForm, toast)
+          }
+        "
         @cancel="handleCancelForm"
       />
     </Dialog>
@@ -131,7 +165,7 @@ onMounted(async () => {
       v-model:open="isRecordConfirmationOpen"
       action="delete"
       :record="recItem"
-      @confirm="() => handleActionRemove(recId, getToolsList)"
+      @confirm="() => handleActionRemove(recId, getToolsList, toast)"
       @cancel=""
     >
       <template #default="{ record }">
diff --git a/app/handlers/device.handler.ts b/app/handlers/device.handler.ts
index 41c18cf6..f64ca226 100644
--- a/app/handlers/device.handler.ts
+++ b/app/handlers/device.handler.ts
@@ -9,6 +9,7 @@ import { postSourceDevice, patchSourceDevice, removeSourceDevice } from '~/servi
 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)
@@ -97,4 +98,4 @@ export function handleCancelForm(reset: () => void) {
   }, 500)
 }
 
-export { recId, recAction, recItem, isProcessing, isFormEntryDialogOpen, isRecordConfirmationOpen }
+export { recId, recAction, recItem, isReadonly, isProcessing, isFormEntryDialogOpen, isRecordConfirmationOpen }