diff --git a/resources/js/components/CreateItemModal.vue b/resources/js/components/CreateItemModal.vue
index 1ab7592..f2b2983 100644
--- a/resources/js/components/CreateItemModal.vue
+++ b/resources/js/components/CreateItemModal.vue
@@ -2,42 +2,26 @@
   <Modal :active="isOpen" size="md" @close="handleClose" clickOutside="false">
     <div class="p-6">
       <h3 class="text-lg font-semibold text-gray-900 mb-4">Item {{ product?.nama }}</h3>
-      
+
       <div v-if="!success">
         <div class="mb-4">
-          <p class="text-gray-600 mb-4">Produk "<strong>{{ product?.nama }}</strong>" berhasil dibuat!</p>
-          
-          <div class="mb-4">
-            <label class="block text-gray-700 mb-2">Pilih Nampan</label>
-            <select 
-              v-model="selectedNampan" 
-              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-              :disabled="loading"
-            >
-              <option value="">Brankas</option>
-              <option v-for="nampan in nampanList" :key="nampan.id" :value="nampan.id">
-                {{ nampan.nama }} ({{ nampan.items_count }} items)
-              </option>
-            </select>
-          </div>
+          <label class="block text-gray-700 mb-2">Pilih Nampan</label>
+          <InputSelect v-model="selectedNampan" :options="positionListOptions" :disabled="loading" />
         </div>
 
         <div class="flex justify-end gap-3">
-          <button 
-            @click="handleClose" 
-            :disabled="loading"
-            class="px-4 py-2 text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors disabled:opacity-50"
-          >
+          <button @click="handleClose" :disabled="loading"
+            class="px-4 py-2 text-white bg-gray-400 hover:bg-gray-500 rounded-lg transition-colors disabled:opacity-50">
             Batal
           </button>
-          <button 
-            @click="createItem" 
-            :disabled="loading"
-            class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors disabled:bg-blue-400 disabled:cursor-not-allowed flex items-center gap-2"
-          >
+          <button @click="createItem" :disabled="loading"
+            class="px-4 py-2 bg-C hover:bg-B text-D rounded-lg transition-colors disabled:bg-A disabled:cursor-not-allowed flex items-center gap-2">
             <svg v-if="loading" class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
-              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-              <path class="opacity-75" fill="currentColor" d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
+              </circle>
+              <path class="opacity-75" fill="currentColor"
+                d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+              </path>
             </svg>
             {{ loading ? 'Membuat...' : 'Buat Item' }}
           </button>
@@ -48,33 +32,34 @@
       <div v-else>
         <div class="text-center">
           <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
-            <!-- QR CODe HERE -->
+            <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7">
+              </path>
+            </svg>
           </div>
-          
+
           <h4 class="text-lg font-semibold text-gray-900 mb-2">Item Berhasil Dibuat!</h4>
-          <p class="text-gray-600 mb-6">
-            Item dari produk "<strong>{{ product?.nama }}</strong>" telah ditambahkan ke {{ selectedNampanName }}.
+          <p class="text-gray-600 mb-2">
+            Item dari produk "<strong>{{ product?.nama }}</strong>" telah ditambahkan ke {{
+              selectedNampanName }}.
+          </p>
+          <p class="text-sm text-gray-500 mb-6">
+            ID Item: <strong>{{ createdItem.id }}</strong>
           </p>
 
           <div class="flex flex-row justify-between gap-3">
-            <button 
-              @click="$emit('finish')"
-              class="flex-1 px-6 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded-lg transition-colors"
-            >
+            <button @click="handleClose"
+              class="flex-1 px-6 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded-lg transition-colors">
               Selesai
             </button>
-            <button 
-              @click="$emit('print')"
+            <button @click="printItem"
               class="flex-1 px-6 py-2 bg-C hover:bg-B text-D rounded-lg transition-colors opacity-50 cursor-not-allowed"
-              disabled
-            >
+              disabled>
               Print
             </button>
-            <button 
-              @click="addNewItem"
-              class="flex-1 px-6 py-2 bg-C hover:bg-B text-D rounded-lg transition-colors"
-            >
-              Tambah Item Baru
+            <button @click="addNewItem"
+              class="flex-1 px-6 py-2 bg-C hover:bg-B text-D rounded-lg transition-colors">
+              Buat Lagi
             </button>
           </div>
         </div>
@@ -87,6 +72,7 @@
 import { ref, computed, watch } from 'vue';
 import axios from 'axios';
 import Modal from './Modal.vue';
+import InputSelect from './InputSelect.vue';
 
 // Props
 const props = defineProps({
@@ -100,16 +86,27 @@ const props = defineProps({
   }
 });
 
-const emit = defineEmits(['close', 'finish', 'print', 'item-created']);
+// Emits
+const emit = defineEmits(['close']);
 
+// State
 const selectedNampan = ref('');
 const nampanList = ref([]);
+const positionListOptions = ref([
+  { value: '', label: 'Brankas', selected: true },
+])
 const success = ref(false);
 const loading = ref(false);
+const createdItem = ref(null);
 
+// Computed
 const selectedNampanName = computed(() => {
   if (!selectedNampan.value) return 'Brankas';
-  const nampan = nampanList.value.find(n => n.id === selectedNampan.value);
+  
+  console.log("Selected nampan ID:", selectedNampan.value);
+  const nampan = nampanList.value.find(n => n.id === Number(selectedNampan.value));
+  console.log("All nampan:", nampanList.value);
+  console.log("Selected nampan:", nampan);
   return nampan ? nampan.nama : 'Brankas';
 });
 
@@ -118,6 +115,14 @@ const loadNampanList = async () => {
   try {
     const response = await axios.get('/api/nampan');
     nampanList.value = response.data;
+    positionListOptions.value = [
+      { value: '', label: 'Brankas', selected: !selectedNampan.value },
+      ...nampanList.value.map(n => ({
+        value: n.id,
+        label: `${n.nama} (${n.items_count} items)`,
+        selected: n.id === selectedNampan.value
+      }))
+    ];
   } catch (error) {
     console.error('Error loading nampan list:', error);
   }
@@ -125,26 +130,24 @@ const loadNampanList = async () => {
 
 const createItem = async () => {
   if (!props.product) return;
-  
+
   loading.value = true;
-  
+
   try {
     const payload = {
       id_produk: props.product.id
     };
-    
+
     if (selectedNampan.value) {
       payload.id_nampan = selectedNampan.value;
     }
-    
+
     const response = await axios.post('/api/item', payload);
-    
+
     success.value = true;
-    emit('item-created', {
-      item: response.data,
-      product: props.product,
-      nampan: selectedNampanName.value
-    });
+    createdItem.value = response.data.data
+    console.log('Item created:', createdItem);
+    
   } catch (error) {
     console.error('Error creating item:', error);
     alert('Gagal membuat item: ' + (error.response?.data?.message || error.message));
@@ -154,15 +157,12 @@ const createItem = async () => {
 };
 
 const addNewItem = () => {
-  // Reset state untuk item baru
   success.value = false;
   selectedNampan.value = '';
-  
-  // Emit event untuk membuat item baru
-  emit('item-created', {
-    newItem: true,
-    product: props.product
-  });
+};
+
+const printItem = () => {
+  alert('Wak waw');
 };
 
 const handleClose = () => {
@@ -170,7 +170,7 @@ const handleClose = () => {
   selectedNampan.value = '';
   success.value = false;
   loading.value = false;
-  
+
   emit('close');
 };
 
@@ -180,7 +180,7 @@ watch(() => props.isOpen, (newValue) => {
     selectedNampan.value = '';
     success.value = false;
     loading.value = false;
-    
+
     loadNampanList();
   }
 });
diff --git a/resources/js/pages/InputProduk.vue b/resources/js/pages/InputProduk.vue
index c9164b8..5f4a1ae 100644
--- a/resources/js/pages/InputProduk.vue
+++ b/resources/js/pages/InputProduk.vue
@@ -5,9 +5,6 @@
       :isOpen="openItemModal"
       :product="createdProduct"
       @close="closeItemModal"
-      @finish="goToProductList"
-      @print="printItem"
-      @item-created="handleItemCreated"
     />
 
     <div class="p-6">
@@ -161,7 +158,6 @@ const fileInput = ref(null);
 // TODO: Logika autentikasi user
 const userId = ref(1);
 
-// Modal item variables - Simplified karena logic sudah dipindah ke component
 const openItemModal = ref(false);
 const createdProduct = ref(null);
 
@@ -196,7 +192,6 @@ const loadExistingPhotos = async () => {
   }
 };
 
-// Simplified modal handlers
 const openCreateItemModal = (product) => {
   createdProduct.value = product;
   openItemModal.value = true;
@@ -209,23 +204,6 @@ const closeItemModal = () => {
   router.replace('/produk');
 };
 
-const goToProductList = () => {
-  closeItemModal();
-};
-
-const printItem = () => {
-  alert('Wak waw');
-};
-
-// Handle item creation events from modal
-const handleItemCreated = (data) => {
-  if (data.newItem) {
-    return;
-  }
-  
-  console.log('Item created:', data);
-};
-
 const triggerFileInput = () => {
   if (!uploadLoading.value && uploadedImages.value.length < 6) {
     fileInput.value?.click();
diff --git a/resources/js/pages/Produk.vue b/resources/js/pages/Produk.vue
index 7104636..d9fa8e9 100644
--- a/resources/js/pages/Produk.vue
+++ b/resources/js/pages/Produk.vue
@@ -1,5 +1,12 @@
 <template>
   <mainLayout>
+    <!-- Modal Buat Item - Sekarang menggunakan komponen terpisah -->
+    <CreateItemModal
+      :isOpen="creatingItem"
+      :product="detail"
+      @close="closeItemModal"
+    />
+
     <div class="p-6">
       <!-- Judul -->
       <p class="font-serif italic text-[25px] text-D">PRODUK</p>
@@ -41,7 +48,6 @@
     </div>
 
     <!-- Overlay Detail Produk -->
-    <!-- Overlay Detail Produk -->
 <div
   v-if="showOverlay"
   class="fixed inset-0 bg-black/30 flex justify-center items-center z-50"
@@ -63,7 +69,7 @@
 
       <!-- Stok (pcs) pojok kiri atas -->
       <div class="absolute top-1 left-1 bg-black/60 text-white text-xs px-2 py-1 rounded">
-        {{ detail.item_count }} pcs
+        {{ detail.items_count }} pcs
       </div>
 
       <!-- Nama Produk di bawah -->
@@ -109,7 +115,7 @@
       <button class="bg-yellow-400 text-black px-4 py-2 rounded font-bold">
         Ubah
       </button>
-      <button class="bg-green-400 text-black px-4 py-2 rounded font-bold">
+      <button @click="openItemModal" class="bg-green-400 text-black px-4 py-2 rounded font-bold">
         Tambah
       </button>
       <button class="bg-red-500 text-white px-4 py-2 rounded font-bold">
@@ -128,10 +134,21 @@ import axios from "axios";
 import mainLayout from "../layouts/mainLayout.vue";
 import ProductCard from "../components/ProductCard.vue";
 import searchbar from "../components/searchbar.vue";
+import CreateItemModal from "../components/CreateItemModal.vue";
 
 const products = ref([]);
 const searchQuery = ref("");
 const selectedCategory = ref("semua");
+const creatingItem = ref(false);
+
+const openItemModal = () => {
+  console.log("open item modal", detail.value);
+  
+  creatingItem.value = true;
+};
+const closeItemModal = () => {
+  creatingItem.value = false;
+};
 
 // overlay state
 const showOverlay = ref(false);
@@ -171,20 +188,14 @@ const filteredProducts = computed(() => {
 
 // buka overlay
 async function openOverlay(id) {
-  try {
-    const res = await axios.get(`/api/produk/${id}`);
-    detail.value = res.data;
-    currentFotoIndex.value = 0; // reset ke foto pertama
-    showOverlay.value = true;
-  } catch (error) {
-    console.error("Gagal fetch detail produk:", error);
-  }
+  detail.value = products.value.find(p => p.id === id) ;
+  currentFotoIndex.value = 0;
+  showOverlay.value = true;
 }
 
 // tutup overlay
 function closeOverlay() {
   showOverlay.value = false;
-  detail.value = {};
   currentFotoIndex.value = 0;
 }