diff --git a/resources/js/components/ConfirmDeleteModal.vue b/resources/js/components/ConfirmDeleteModal.vue
new file mode 100644
index 0000000..ffcca4e
--- /dev/null
+++ b/resources/js/components/ConfirmDeleteModal.vue
@@ -0,0 +1,40 @@
+<template>
+  <div
+    v-if="isOpen"
+    class="fixed inset-0 bg-black/50 flex items-center justify-center z-[9999]"
+  >
+    <div
+      class="bg-white rounded-lg shadow-lg p-6 w-[350px] text-center relative"
+    >
+      <!-- Judul -->
+      <p class="text-lg font-semibold mb-2">Yakin hapus produk ini?</p>
+
+      <!-- Deskripsi tambahan -->
+      <p class="text-sm text-gray-600 mb-4">
+        Produk yang sudah dihapus tidak akan bisa dikembalikan.
+      </p>
+
+      <!-- Tombol aksi -->
+      <div class="flex justify-center gap-3">
+        <button
+          @click="$emit('cancel')"
+          class="bg-gray-300 px-4 py-2 rounded hover:bg-gray-400"
+        >
+          Batal
+        </button>
+        <button
+          @click="$emit('confirm')"
+          class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600"
+        >
+          Hapus
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  isOpen: Boolean,
+});
+</script>
diff --git a/resources/js/pages/Produk.vue b/resources/js/pages/Produk.vue
index d9fa8e9..e57a268 100644
--- a/resources/js/pages/Produk.vue
+++ b/resources/js/pages/Produk.vue
@@ -1,12 +1,19 @@
 <template>
   <mainLayout>
-    <!-- Modal Buat Item - Sekarang menggunakan komponen terpisah -->
+    <!-- Modal Buat Item -->
     <CreateItemModal
       :isOpen="creatingItem"
       :product="detail"
       @close="closeItemModal"
     />
 
+    <!-- Modal Konfirmasi Hapus Produk -->
+    <ConfirmDeleteModal
+      :isOpen="deleting"
+      @cancel="deleting = false"
+      @confirm="deleteProduk"
+    />
+
     <div class="p-6">
       <!-- Judul -->
       <p class="font-serif italic text-[25px] text-D">PRODUK</p>
@@ -31,7 +38,10 @@
 
       <!-- Tombol Tambah Produk -->
       <div class="mt-3 flex justify-end">
-        <router-link to="/produk/baru" class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition">
+        <router-link
+          to="/produk/baru"
+          class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition"
+        >
           Tambah Produk
         </router-link>
       </div>
@@ -48,83 +58,97 @@
     </div>
 
     <!-- Overlay Detail Produk -->
-<div
-  v-if="showOverlay"
-  class="fixed inset-0 bg-black/30 flex justify-center items-center z-50"
-  @click.self="closeOverlay"
->
-  <div
-    class="bg-white rounded-lg shadow-lg p-6 w-[400px] border-2 border-[#e6d3b3] relative flex flex-col items-center"
-    @mouseleave="closeOverlay"
-  >
-    <!-- Foto Produk dengan Slider -->
-    <div class="relative w-60 h-60 border border-[#e6d3b3] flex items-center justify-center mb-4 overflow-hidden rounded">
-      <img
-        v-if="detail.foto && detail.foto.length > 0"
-        :src="detail.foto[currentFotoIndex].url"
-        :alt="detail.nama"
-        class="w-full h-full object-contain"
-      />
-      <span v-else class="text-gray-400 text-sm">[gambar]</span>
-
-      <!-- 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.items_count }} pcs
-      </div>
-
-      <!-- Nama Produk di bawah -->
+    <div
+      v-if="showOverlay"
+      class="fixed inset-0 bg-black/30 flex justify-center items-center z-50"
+      @click.self="closeOverlay"
+    >
       <div
-        class="absolute bottom-0 w-full bg-black/70 text-white text-center text-sm py-1"
+        class="bg-white rounded-lg shadow-lg p-6 w-[450px] border-2 border-[#e6d3b3] relative flex flex-col items-center"
       >
-        {{ detail.nama }}
+        <!-- Foto Produk -->
+        <div
+          class="relative w-72 h-72 border border-[#e6d3b3] flex items-center justify-center mb-3 overflow-hidden rounded"
+        >
+          <img
+            v-if="detail.foto && detail.foto.length > 0"
+            :src="detail.foto[currentFotoIndex].url"
+            :alt="detail.nama"
+            class="w-full h-full object-contain"
+          />
+          <span v-else class="text-gray-400 text-sm">[gambar]</span>
+
+          <!-- 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.items_count }} pcs
+          </div>
+
+          <!-- Tombol Prev -->
+          <button
+            v-if="detail.foto && detail.foto.length > 1"
+            @click.stop="prevFoto"
+            class="absolute left-2 bg-white/80 hover:bg-white text-black px-2 py-1 rounded-full shadow"
+          >
+            ‹
+          </button>
+          <!-- Tombol Next -->
+          <button
+            v-if="detail.foto && detail.foto.length > 1"
+            @click.stop="nextFoto"
+            class="absolute right-2 bg-white/80 hover:bg-white text-black px-2 py-1 rounded-full shadow"
+          >
+            ›
+          </button>
+        </div>
+
+        <!-- Nama Produk -->
+        <p class="text-lg font-semibold text-center mb-4">
+          {{ detail.nama }}
+        </p>
+
+        <!-- Detail Harga & Info -->
+        <div class="grid grid-cols-2 gap-y-2 gap-x-4 text-sm w-full mb-6">
+          <p class="col-span-1">Harga Jual :</p>
+          <p class="col-span-1 text-right">
+            Rp. {{ formatNumber(detail.harga_jual) }}
+          </p>
+
+          <p class="col-span-1">Kadar :</p>
+          <p class="col-span-1 text-right">{{ detail.kadar }} K</p>
+
+          <p class="col-span-1">Berat :</p>
+          <p class="col-span-1 text-right">{{ detail.berat }} gram</p>
+
+          <p class="col-span-1">Harga/gram :</p>
+          <p class="col-span-1 text-right">
+            Rp. {{ formatNumber(detail.harga_per_gram) }}
+          </p>
+        </div>
+
+        <!-- Tombol Aksi -->
+        <div class="flex w-full gap-3">
+          <button
+            class="flex-1 bg-yellow-400 text-black py-2 rounded font-bold"
+          >
+            Ubah
+          </button>
+          <button
+            @click="openItemModal"
+            class="bg-green-400 text-black px-4 py-2 rounded font-bold"
+          >
+            Tambah
+          </button>
+          <button
+            @click="deleting = true"
+            class="flex-1 bg-red-500 text-white py-2 rounded font-bold"
+          >
+            Hapus
+          </button>
+        </div>
       </div>
-
-      <!-- Tombol Prev -->
-      <button
-        v-if="detail.foto && detail.foto.length > 1"
-        @click.stop="prevFoto"
-        class="absolute left-2 bg-white/70 hover:bg-white text-black px-2 py-1 rounded"
-      >
-        ‹
-      </button>
-      <!-- Tombol Next -->
-      <button
-        v-if="detail.foto && detail.foto.length > 1"
-        @click.stop="nextFoto"
-        class="absolute right-2 bg-white/70 hover:bg-white text-black px-2 py-1 rounded"
-      >
-        ›
-      </button>
     </div>
-
-    <!-- Detail Harga & Info -->
-    <div class="grid grid-cols-2 gap-2 text-sm mb-4 w-full">
-      <!-- harga beli dihapus -->
-      <p>Harga Jual : Rp. {{ formatNumber(detail.harga_jual) }}</p>
-      <p class="text-right">{{ detail.kadar }} K</p>
-      <p class="col-span-2 text-center">
-        Berat : {{ detail.berat }} gram
-      </p>
-      <p class="col-span-2">
-        Harga/gram : Rp. {{ formatNumber(detail.harga_per_gram) }}
-      </p>
-    </div>
-
-    <!-- Tombol Aksi -->
-    <div class="flex justify-between w-full">
-      <button class="bg-yellow-400 text-black px-4 py-2 rounded font-bold">
-        Ubah
-      </button>
-      <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">
-        Hapus
-      </button>
-    </div>
-  </div>
-</div>
-
   </mainLayout>
 </template>
 
@@ -135,26 +159,26 @@ import mainLayout from "../layouts/mainLayout.vue";
 import ProductCard from "../components/ProductCard.vue";
 import searchbar from "../components/searchbar.vue";
 import CreateItemModal from "../components/CreateItemModal.vue";
+import ConfirmDeleteModal from "../components/ConfirmDeleteModal.vue";
 
 const products = ref([]);
 const searchQuery = ref("");
 const selectedCategory = ref("semua");
 const creatingItem = ref(false);
+const deleting = ref(false);
 
+const detail = ref({});
+const showOverlay = ref(false);
+const currentFotoIndex = ref(0);
+
+// Buka modal item
 const openItemModal = () => {
-  console.log("open item modal", detail.value);
-  
   creatingItem.value = true;
 };
 const closeItemModal = () => {
   creatingItem.value = false;
 };
 
-// overlay state
-const showOverlay = ref(false);
-const detail = ref({});
-const currentFotoIndex = ref(0);
-
 // Fetch data awal
 onMounted(async () => {
   try {
@@ -165,18 +189,16 @@ onMounted(async () => {
   }
 });
 
-// Filter gabungan (kategori + search)
+// Filter produk (kategori + search)
 const filteredProducts = computed(() => {
   let hasil = products.value;
 
-  // filter kategori
   if (selectedCategory.value !== "semua") {
     hasil = hasil.filter(
       (p) => p.kategori.toLowerCase() === selectedCategory.value
     );
   }
 
-  // filter search
   if (searchQuery.value) {
     hasil = hasil.filter((p) =>
       p.nama.toLowerCase().includes(searchQuery.value.toLowerCase())
@@ -186,27 +208,29 @@ const filteredProducts = computed(() => {
   return hasil;
 });
 
-// buka overlay
-async function openOverlay(id) {
-  detail.value = products.value.find(p => p.id === id) ;
-  currentFotoIndex.value = 0;
-  showOverlay.value = true;
+// Buka overlay detail
+function openOverlay(id) {
+  const produk = products.value.find((p) => p.id === id);
+  if (produk) {
+    detail.value = produk;
+    currentFotoIndex.value = 0;
+    showOverlay.value = true;
+  }
 }
 
-// tutup overlay
+// Tutup overlay detail
 function closeOverlay() {
   showOverlay.value = false;
   currentFotoIndex.value = 0;
 }
 
-// foto navigation
+// Navigasi foto
 function nextFoto() {
   if (detail.value.foto && detail.value.foto.length > 0) {
     currentFotoIndex.value =
       (currentFotoIndex.value + 1) % detail.value.foto.length;
   }
 }
-
 function prevFoto() {
   if (detail.value.foto && detail.value.foto.length > 0) {
     currentFotoIndex.value =
@@ -219,4 +243,18 @@ function prevFoto() {
 function formatNumber(num) {
   return new Intl.NumberFormat().format(num || 0);
 }
+
+// Hapus produk
+async function deleteProduk() {
+  try {
+    await axios.delete(`/api/produk/${detail.value.id}`);
+    products.value = products.value.filter((p) => p.id !== detail.value.id);
+    deleting.value = false;
+    showOverlay.value = false;
+    alert("Produk berhasil dihapus!");
+  } catch (err) {
+    console.error("Gagal hapus produk:", err);
+    alert("Gagal menghapus produk!");
+  }
+}
 </script>