diff --git a/app/components/app/item-price/list-cfg.ts b/app/components/app/item-price/list-cfg.ts
index c3db4f50..f1ebbd13 100644
--- a/app/components/app/item-price/list-cfg.ts
+++ b/app/components/app/item-price/list-cfg.ts
@@ -3,27 +3,23 @@ import { defineAsyncComponent } from 'vue'
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-const _doctorStatus = {
-  0: 'Tidak Aktif',
-  1: 'Aktif',
-}
-
 export const config: Config = {
-  cols: [{}, {}, { width: 50 }],
+  cols: [{}, {}, {}, { width: 50 }],
 
   headers: [
     [
-      { label: 'Kode' },
-      { label: 'Nama' },
+      { label: 'Item' },
+      { label: 'Harga' },
+      { label: 'Perusahaan Asuransi' },
       { label: 'Aksi' },
     ],
   ],
 
-  keys: ['code', 'name', 'action'],
+  keys: ['item_code', 'price', 'insuranceCompany_code', 'action'],
 
   delKeyNames: [
-    { key: 'code', label: 'Kode' },
-    { key: 'name', label: 'Nama' },
+    { key: 'item_code', label: 'Item' },
+    { key: 'insuranceCompany_code', label: 'Perusahaan Asuransi' },
   ],
 
   parses: {},
@@ -39,9 +35,5 @@ export const config: Config = {
     },
   },
 
-  htmls: {
-    patient_address(_rec) {
-      return '-'
-    },
-  },
+  htmls: {},
 }
diff --git a/app/components/app/item-price/list.vue b/app/components/app/item-price/list.vue
index 96697bde..2f7908cb 100644
--- a/app/components/app/item-price/list.vue
+++ b/app/components/app/item-price/list.vue
@@ -1,14 +1,39 @@
 <script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
 import { config } 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>
-  <PubMyUiDataTable
-    v-bind="config"
-    :rows="data"
-  />
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
+  </div>
 </template>
diff --git a/app/components/app/item-price/picker.vue b/app/components/app/item-price/picker.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/app/components/app/item-price/search.vue b/app/components/app/item-price/search.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/app/components/app/item-price/status-badge.vue b/app/components/app/item-price/status-badge.vue
deleted file mode 100644
index 32cdfbca..00000000
--- a/app/components/app/item-price/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/item/list-cfg.ts b/app/components/app/item/list-cfg.ts
index c3db4f50..d781dc79 100644
--- a/app/components/app/item/list-cfg.ts
+++ b/app/components/app/item/list-cfg.ts
@@ -3,23 +3,22 @@ import { defineAsyncComponent } from 'vue'
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-const _doctorStatus = {
-  0: 'Tidak Aktif',
-  1: 'Aktif',
-}
-
 export const config: Config = {
-  cols: [{}, {}, { width: 50 }],
+  cols: [{}, {}, {}, {}, {}, {}, { width: 50 }],
 
   headers: [
     [
       { label: 'Kode' },
       { label: 'Nama' },
+      { label: 'Item Group' },
+      { label: 'UOM' },
+      { label: 'Infra' },
+      { label: 'Stok' },
       { label: 'Aksi' },
     ],
   ],
 
-  keys: ['code', 'name', 'action'],
+  keys: ['code', 'name', 'itemGroup_code', 'uom_code', 'infra_code', 'stock', 'action'],
 
   delKeyNames: [
     { key: 'code', label: 'Kode' },
@@ -39,9 +38,5 @@ export const config: Config = {
     },
   },
 
-  htmls: {
-    patient_address(_rec) {
-      return '-'
-    },
-  },
+  htmls: {},
 }
diff --git a/app/components/app/item/list.vue b/app/components/app/item/list.vue
index 96697bde..2f7908cb 100644
--- a/app/components/app/item/list.vue
+++ b/app/components/app/item/list.vue
@@ -1,14 +1,39 @@
 <script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
 import { config } 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>
-  <PubMyUiDataTable
-    v-bind="config"
-    :rows="data"
-  />
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
+  </div>
 </template>
diff --git a/app/components/app/item/picker.vue b/app/components/app/item/picker.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/app/components/app/item/search.vue b/app/components/app/item/search.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/app/components/app/item/status-badge.vue b/app/components/app/item/status-badge.vue
deleted file mode 100644
index 32cdfbca..00000000
--- a/app/components/app/item/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>