diff --git a/src/components/CardKatalog/CardKatalog.js b/src/components/CardKatalog/CardKatalog.js
index bb855cd415ecdba7f16f85f1b04bedab5f8dca6f..237a08bf9532d214cfa256e711be0044f045312a 100644
--- a/src/components/CardKatalog/CardKatalog.js
+++ b/src/components/CardKatalog/CardKatalog.js
@@ -31,7 +31,7 @@ const CardKatalog = ({posts, loading}) =>{
                       {post.supplier.nama_supplier}
                     </Card.Text>
                     <Card.Text className="card-produk-hapus">
-                      <PopUpDeleteProduk />
+                      <PopUpDeleteProduk pk={post.id} />
                     </Card.Text>
                   </Card.Body>
                 </Card>
diff --git a/src/components/PopUpDeleteProduk/PopUpDeleteProduk.css b/src/components/PopUpDeleteProduk/PopUpDeleteProduk.css
index 0b1a9fce73f04453907731821c2acc5e27896284..7800f7732b15b578e865aad555c87a5af1810005 100644
--- a/src/components/PopUpDeleteProduk/PopUpDeleteProduk.css
+++ b/src/components/PopUpDeleteProduk/PopUpDeleteProduk.css
@@ -26,4 +26,9 @@ div.button-section-auto-margin > button:last-child {
 
 .popup-delete-produk .gambar-konfirmasi-delete {
     width: 100px;
+}
+
+.hapus-produk-btn {
+    width: 100%;
+    font-size: 1rem;
 }
\ No newline at end of file
diff --git a/src/components/PopUpDeleteProduk/PopUpDeleteProduk.js b/src/components/PopUpDeleteProduk/PopUpDeleteProduk.js
index 2b5f5d6f515ff3a1fe379027d6a898a9f3e85cc7..5b63c66eed4cfaff4a6e50326045832ad84ee098 100644
--- a/src/components/PopUpDeleteProduk/PopUpDeleteProduk.js
+++ b/src/components/PopUpDeleteProduk/PopUpDeleteProduk.js
@@ -3,55 +3,82 @@ import { Modal } from 'react-bootstrap';
 import './PopUpDeleteProduk.css';
 import deleteIcon from './../PopUpDeletePost/delete.svg';
 import { Trash2 } from 'react-feather';
+import { Redirect } from "react-router-dom";
+import axios from "axios";
 
-const PopUpDeleteProduk = () => {
+const PopUpDeleteProduk = ({pk}) => {
+    const [deleted, setDeleted] = useState(false);
     const [showModal, setShowModal] = useState(false);
     const handleClose = () => setShowModal(false);
-    const handleOpen = () =>  {
-        setShowModal(true);
-    }
+    const handleOpen = () => setShowModal(true);
+
+    const config = {
+        headers: {
+            'Content-Type': 'multipart/form-data',
+            'Authorization': `JWT ${localStorage.getItem('access')}`,
+        }
+    };
 
     const deleteProduk = () => {
         if (localStorage.getItem('access')) {
-            console.log("delete produk")
+            console.log("delete produk");
+            axios.delete(`${process.env.REACT_APP_BACKEND_API_URL}/api/produk/${pk}/`, config)
+            .then((response) => {
+                console.log(response);
+                alert('Anda telah menghapus produk');
+                setShowModal(false);
+                setDeleted(true);
+            }, (error) => {
+                console.log(error);
+                alert('Tidak dapat menghapus produk');
+                setShowModal(false);
+            });
         } else {
-            alert('Terdapat kesalahan pada autentikasi akun anda. Anda dapat melakukan refresh pada halaman ini')
+            alert('Terdapat kesalahan pada autentikasi akun anda. Anda dapat melakukan refresh pada halaman ini');
+            setShowModal(false);
         }
     };
 
+    if (deleted === true) {
+        return <Redirect to="/" />
+    }
+
     return (
         <span>
             <button
-            className="forum-button wkd-red-button"
+            className="forum-button wkd-red-button hapus-produk-btn"
             data-testid="hapus-produk-btn"
             onClick={handleOpen}>
                 <Trash2 size={12}/>
                 <span className="pl-1">Hapus</span>
             </button>
 
-            <Modal show={showModal} onHide={handleClose} data-testid="popup" centered>
-            <Modal.Header closeButton>
-                <p className="tulisan-header">Apakah Anda yakin untuk <span id="mainan-red">menghapus</span> produk ini? </p>
-            </Modal.Header>
-            <Modal.Body>
-                <div className="justify-content-center mt-n5 pt-3 pb-4 popup-delete-produk">
-                    <img className="gambar-konfirmasi-delete mx-auto" alt="delete-icon" src={deleteIcon}></img>
-                    <div className="button-section-auto-margin">
-                        <button
-                        className="wkd-nav-button wkd-blue-border-button popup-delete-padding-button"
-                        onClick={handleClose}>
-                            Tidak
-                        </button>
-                        <button
-                        className="wkd-nav-button wkd-blue-button popup-delete-padding-button"
-                        data-testid="ya-hapus-produk-btn"
-                        onClick={() => deleteProduk()}>
-                        Ya
-                        </button>
+            <span data-testid="popup-wrapper">
+                <Modal show={showModal} onHide={handleClose} data-testid="popup" centered>
+                <Modal.Header closeButton>
+                    <p className="tulisan-header">Apakah Anda yakin untuk <span id="mainan-red">menghapus</span> produk ini? </p>
+                </Modal.Header>
+                <Modal.Body>
+                    <div className="justify-content-center mt-n5 pt-3 pb-4 popup-delete-produk">
+                        <img className="gambar-konfirmasi-delete mx-auto" alt="delete-icon" src={deleteIcon}></img>
+                        <div className="button-section-auto-margin">
+                            <button
+                            className="wkd-nav-button wkd-blue-border-button popup-delete-padding-button"
+                            data-testid="tidak-hapus-produk-btn"
+                            onClick={handleClose}>
+                                Tidak
+                            </button>
+                            <button
+                            className="wkd-nav-button wkd-blue-button popup-delete-padding-button"
+                            data-testid="ya-hapus-produk-btn"
+                            onClick={() => deleteProduk()}>
+                                Ya
+                            </button>
+                        </div>
                     </div>
-                </div>
-            </Modal.Body>
-            </Modal>
+                </Modal.Body>
+                </Modal>
+            </span>
         </span>
     );
 }