diff --git a/app/Http/Controllers/ItemController.php b/app/Http/Controllers/ItemController.php
index 652d867..399e5e0 100644
--- a/app/Http/Controllers/ItemController.php
+++ b/app/Http/Controllers/ItemController.php
@@ -23,11 +23,10 @@ class ItemController extends Controller
     public function store(Request $request)
     {
         $validated = $request->validate([
-            'id_produk' => 'required|in:produks.id',
-            'id_nampan' => 'nullable|in:nampans.id'
+            'id_produk' => 'required',
+            'id_nampan' => 'nullable'
         ],[
             'id_produk' => 'Id produk tidak valid.',
-            'id_nampan' => 'Id nampan tidak valid'
         ]);
 
         $item = Item::create($validated);
diff --git a/resources/css/app.css b/resources/css/app.css
index 56784c1..513731f 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -5,12 +5,6 @@
 @source '../**/*.blade.php';
 @source '../**/*.js';
 
-@import url('https://fonts.googleapis.com/css2?family=Platypi:wght@400;500;600;700&display=swap');
-
-html, body {
-  font-family: "Platypi", sans-serif;
-}
-
 @theme {
     --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
         'Segoe UI Symbol', 'Noto Color Emoji';
@@ -20,5 +14,5 @@ html, body {
   --color-A: #F8F0E5;
   --color-B: #EADBC8;
   --color-C: #DAC0A3;
-  --color-D: #0F2C59;
+  --color-D: #024768;
 }
diff --git a/resources/js/App.vue b/resources/js/App.vue
index 2631a6c..2271c86 100644
--- a/resources/js/App.vue
+++ b/resources/js/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app">
+  <div>
     <router-view />
   </div>
 </template>
\ No newline at end of file
diff --git a/resources/js/components/CreateItemModal.vue b/resources/js/components/CreateItemModal.vue
new file mode 100644
index 0000000..1ab7592
--- /dev/null
+++ b/resources/js/components/CreateItemModal.vue
@@ -0,0 +1,187 @@
+<template>
+  <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>
+        </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"
+          >
+            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"
+          >
+            <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>
+            </svg>
+            {{ loading ? 'Membuat...' : 'Buat Item' }}
+          </button>
+        </div>
+      </div>
+
+      <!-- Success State -->
+      <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 -->
+          </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>
+
+          <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"
+            >
+              Selesai
+            </button>
+            <button 
+              @click="$emit('print')"
+              class="flex-1 px-6 py-2 bg-C hover:bg-B text-D rounded-lg transition-colors opacity-50 cursor-not-allowed"
+              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>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue';
+import axios from 'axios';
+import Modal from './Modal.vue';
+
+// Props
+const props = defineProps({
+  isOpen: {
+    type: Boolean,
+    default: false
+  },
+  product: {
+    type: Object,
+    default: null
+  }
+});
+
+const emit = defineEmits(['close', 'finish', 'print', 'item-created']);
+
+const selectedNampan = ref('');
+const nampanList = ref([]);
+const success = ref(false);
+const loading = ref(false);
+
+const selectedNampanName = computed(() => {
+  if (!selectedNampan.value) return 'Brankas';
+  const nampan = nampanList.value.find(n => n.id === selectedNampan.value);
+  return nampan ? nampan.nama : 'Brankas';
+});
+
+// Methods
+const loadNampanList = async () => {
+  try {
+    const response = await axios.get('/api/nampan');
+    nampanList.value = response.data;
+  } catch (error) {
+    console.error('Error loading nampan list:', error);
+  }
+};
+
+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
+    });
+  } catch (error) {
+    console.error('Error creating item:', error);
+    alert('Gagal membuat item: ' + (error.response?.data?.message || error.message));
+  } finally {
+    loading.value = false;
+  }
+};
+
+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 handleClose = () => {
+  // Reset state
+  selectedNampan.value = '';
+  success.value = false;
+  loading.value = false;
+  
+  emit('close');
+};
+
+// Watchers
+watch(() => props.isOpen, (newValue) => {
+  if (newValue) {
+    selectedNampan.value = '';
+    success.value = false;
+    loading.value = false;
+    
+    loadNampanList();
+  }
+});
+</script>
\ No newline at end of file
diff --git a/resources/js/components/Modal.vue b/resources/js/components/Modal.vue
new file mode 100644
index 0000000..de1fa83
--- /dev/null
+++ b/resources/js/components/Modal.vue
@@ -0,0 +1,96 @@
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div
+        v-if="active"
+        class="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4"
+        @click="handleOverlayClick"
+      >
+        <div
+          class="bg-white rounded-lg shadow-2xl max-h-[90vh] overflow-y-auto relative"
+          :class="sizeClass"
+          @click.stop
+        >
+          <slot></slot>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup>
+import { computed, watch, onBeforeUnmount } from 'vue'
+
+const props = defineProps({
+  active: {
+    type: Boolean,
+    default: false
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (value) => ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', 'full'].includes(value)
+  },
+  clickOutside: {
+    type: [Boolean, String],
+    default: true
+  }
+})
+
+const emit = defineEmits(['close'])
+
+const sizeClass = computed(() => {
+  const sizes = {
+    xs: 'w-full max-w-xs',
+    sm: 'w-full max-w-sm', 
+    md: 'w-full max-w-md',
+    lg: 'w-full max-w-lg',
+    xl: 'w-full max-w-xl',
+    '2xl': 'w-full max-w-2xl',
+    '3xl': 'w-full max-w-3xl',
+    '4xl': 'w-full max-w-4xl',
+    full: 'w-[95vw] h-[95vh] max-w-none max-h-none'
+  }
+  return sizes[props.size] || sizes.md
+})
+
+const handleOverlayClick = () => {
+  if (clickOutside.value) {
+    emit('close')
+  }
+}
+
+watch(() => props.active, (newVal) => {
+  if (newVal) {
+    document.body.style.overflow = 'hidden'
+  } else {
+    document.body.style.overflow = ''
+  }
+})
+
+onBeforeUnmount(() => {
+  document.body.style.overflow = ''
+})
+</script>
+
+<style>
+.modal-enter-active,
+.modal-leave-active {
+  transition: all 0.3s ease;
+}
+
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-enter-from .bg-white,
+.modal-leave-to .bg-white {
+  transform: scale(0.95) translateY(-20px);
+}
+
+.modal-enter-active .bg-white,
+.modal-leave-active .bg-white {
+  transition: transform 0.3s ease;
+}
+</style>
\ No newline at end of file
diff --git a/resources/js/pages/InputProduk.vue b/resources/js/pages/InputProduk.vue
index f92a062..c9164b8 100644
--- a/resources/js/pages/InputProduk.vue
+++ b/resources/js/pages/InputProduk.vue
@@ -1,5 +1,15 @@
 <template>
   <mainLayout>
+    <!-- Modal Buat Item - Sekarang menggunakan komponen terpisah -->
+    <CreateItemModal 
+      :isOpen="openItemModal"
+      :product="createdProduct"
+      @close="closeItemModal"
+      @finish="goToProductList"
+      @print="printItem"
+      @item-created="handleItemCreated"
+    />
+
     <div class="p-6">
       <p class="font-serif italic text-[25px] text-D">Produk Baru</p>
 
@@ -116,11 +126,15 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted } from "vue";
+import { ref, computed, onMounted } from "vue";
+import { useRouter } from "vue-router";
 import axios from "axios";
 import mainLayout from "../layouts/mainLayout.vue";
 import InputField from "../components/InputField.vue";
 import InputSelect from "../components/InputSelect.vue";
+import CreateItemModal from "../components/CreateItemModal.vue";
+
+const router = useRouter();
 
 const form = ref({
   nama: '',
@@ -147,6 +161,10 @@ 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);
+
 const isFormValid = computed(() => {
   return form.value.nama &&
     form.value.kategori &&
@@ -178,6 +196,36 @@ const loadExistingPhotos = async () => {
   }
 };
 
+// Simplified modal handlers
+const openCreateItemModal = (product) => {
+  createdProduct.value = product;
+  openItemModal.value = true;
+};
+
+const closeItemModal = () => {
+  openItemModal.value = false;
+  createdProduct.value = null;
+  resetForm();
+  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();
@@ -280,6 +328,9 @@ const submitForm = async (addItem) => {
       id_user: userId.value
     });
 
+    const createdProductData = response.data.data;
+
+    // Reset form
     form.value = {
       nama: '',
       kategori: '',
@@ -297,7 +348,7 @@ const submitForm = async (addItem) => {
     }
 
     if (addItem) {
-      alert('Produk berhasil ditambahkan. Silakan tambahkan produk lainnya.');
+      openCreateItemModal(createdProductData);
     } else {
       window.location.href = '/produk?message=Produk berhasil disimpan';
     }
@@ -315,17 +366,29 @@ const submitForm = async (addItem) => {
   }
 };
 
-const resetPhotos = async () => {
-  try {
+const resetForm = async () => {
+  form.value = {
+    nama: '',
+    kategori: '',
+    berat: 0,
+    kadar: 0,
+    harga_per_gram: 0,
+    harga_jual: 0,
+  };
+  try { 
     await axios.delete(`/api/foto/reset/${userId.value}`);
     uploadedImages.value = [];
   } catch (error) {
     console.error('Error resetting photos:', error);
   }
+  uploadError.value = '';
+  if (fileInput.value) {
+    fileInput.value.value = '';
+  }
 };
 
 const back = () => {
-  resetPhotos();
+  resetForm();
   window.history.back();
 };