diff --git a/app/components/app/material-package-item/quick-list.vue b/app/components/app/material-package-item/quick-list.vue
index e570db9f..2ff50a73 100644
--- a/app/components/app/material-package-item/quick-list.vue
+++ b/app/components/app/material-package-item/quick-list.vue
@@ -14,10 +14,10 @@ defineProps<Props>()
 </script>
 
 <template>
-  <div>
+  <div class="mb-4">
     <div class="font-semibold text-sm 2xl:text-base mb-2">
         Daftar Item BMHP
     </div>
-    <DataTable v-bind="config" :rows="data" />
+    <DataTable v-bind="config" :rows="data" class="border"/>
   </div>
 </template>
diff --git a/app/components/app/material-package/switcher.vue b/app/components/app/material-package/switcher.vue
index 0ec6912f..2709ff5e 100644
--- a/app/components/app/material-package/switcher.vue
+++ b/app/components/app/material-package/switcher.vue
@@ -1,14 +1,24 @@
 <script setup lang="ts">
 //
 import * as CB from '~/components/pub/my-ui/combobox'
+import type { MaterialPackage } from '~/models/material-package';
 
 //
-defineProps<{
-  items: CB.Item[]
+const props =defineProps<{
+  data: MaterialPackage[]
 }>()
 
 const model = defineModel()
 
+const items = computed(() => {
+  return props.data.map((item) => {
+    return {
+      label: item.name,
+      value: item.code,
+    }
+  })
+})
+
 </script>
 
 <template>