diff --git a/client/js/catalog.js b/client/js/catalog.js
index 94fe14a37c4daf5da01322a5c9ca5dc18cbd0f5e..18303ffaf23ef64bdd5650d605022478e62dffe5 100644
--- a/client/js/catalog.js
+++ b/client/js/catalog.js
@@ -53,9 +53,10 @@ nextPage = () => {
     }
 }
 
-function redirectToPurchase() {
-    location.href = "";
-    localStorage.setItem()
+function redirectToPurchase(id) {
+    location.href = "make-purchase.html";
+    // location.href = "make-purchase.php";
+    localStorage.setItem("purchase", id)
 }
 
 function changePage(page){
@@ -96,7 +97,7 @@ function changePage(page){
                     listingTable.innerHTML ="";
                     
                     for (var i = 0; i < 10 && itemList.length ; i++){
-                        listingTable.innerHTML += `<button class="showItem" onclick = "redirectToPurchase()">
+                        listingTable.innerHTML += `<button class="showItem" onclick = "redirectToPurchase('${itemList[i][0]}')">
                         <img id="${itemList[i][0]}" src="../image/${itemList[i][2]}" alt="${itemList[i][1]}">
                         <p>${itemList[i][1]}</p>
                         <p>Rp${itemList[i][4]}</p>
diff --git a/client/js/make-purchase.js b/client/js/make-purchase.js
new file mode 100644
index 0000000000000000000000000000000000000000..03eab81046c45513fcb74319afd756650086ebb4
--- /dev/null
+++ b/client/js/make-purchase.js
@@ -0,0 +1,53 @@
+
+function itemDetail(){
+    var idItem = localStorage.getItem("purchase");
+    var purchase = document.getElementById("purchaseform");
+    const formdata = new FormData();
+    formdata.append("signal", "make-purchase");
+    formdata.append("item_id", idItem);
+    const xhr = new XMLHttpRequest();
+    xhr.open('POST', '../../server/controllers/itemdetail_query.php', true);
+    xhr.send(formdata);
+    xhr.onreadystatechange = function() {
+        if (xhr.readyState === 4 && xhr.status === 200){
+            try{
+                var responseData = JSON.parse(xhr.responseText);
+                if (responseData.success){
+                    var itemList = responseData.data;
+                    purchase.innerHTML = `
+                    <div class="input-group">
+                        <div class="input-image-field">
+                            <img src="../image/no_picture.jpeg" id="image-preview" alt="">
+                        </div>
+                        <div class="input-text-fields">
+                            <div class="input-field">
+                                <input type="text" id="product_name" placeholder="${itemList[i][1]}" disabled>
+                            </div>
+                            <div class="input-field" id="product_description-field">
+                                <textarea type="text" id="product_description" placeholder="${itemList[i][3]}" disabled></textarea>
+                            </div>
+                            <div class="input-field" id="product_price-field">
+                                <input type="text" id="product_price" placeholder="${itemList[i][4]}" oninput="checkNumericPrice()" disabled>
+                            </div>
+                            <p id="price-criteria"> </p>
+                            <div class="input-field" id="product_quantity-field">
+                                <input type="text" id="product_quantity" placeholder="${itemList[i][5]}" oninput="checkNumericQuantity()" required>
+                            </div>
+                            <p id="quantity-criteria"> </p>
+                        </div>
+                        
+                    </div>
+                    <div class="button-field">
+                        <button type="button" id="purchasesubmit" onclick="submitPurchase()">Done</button>
+                    </div>`;
+                } else {
+                    alert("error: " + responseData.message);
+                }
+            } catch (err){}
+        }  else if (xhr.status === 404){
+            var response = JSON.parse(xhr.responseText);
+            console.log(response.message);
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/client/pages/make-purchase.html b/client/pages/make-purchase.html
index 9c2560ef7c6a17004935a46bd492c5aa3dd2dc40..544cd3aafc6ffa7e7b460f8f251b84ea742df539 100644
--- a/client/pages/make-purchase.html
+++ b/client/pages/make-purchase.html
@@ -7,9 +7,10 @@
         <meta name="viewport" content="width=device-width, initial scale=1.0">
         <title>Make Purchase</title>
         <link rel="stylesheet" href="../css/make-purchase.css">
-
         <link rel="stylesheet" href="../css/navbar.css">
+        <link rel="stylesheet" href="../css/sidebar.css">
         <script src="../js/navbar.js"></script>
+        <script src="../js/sidebar.js"></script>
         <script src="https://kit.fontawesome.com/8505941c5b.js" crossorigin="anonymous"></script>
         <script src="../js/make-purchase.js"></script>
     </head>
@@ -20,33 +21,11 @@
             </div>
             <div class="purchaseform-group">
                 <h1 id="title">Make A Purchase</h1>
-                <form id="purchaseform">
-                    <div class="input-group">
-                        <div class="input-image-field">
-                            <img src="../image/no_picture.jpeg" id="image-preview" alt="">
-                        </div>
-                        <div class="input-text-fields">
-                            <div class="input-field">
-                                <input type="text" id="product_name" placeholder="Product Name" disabled>
-                            </div>
-                            <div class="input-field" id="product_description-field">
-                                <textarea type="text" id="product_description" placeholder="Product Description" disabled></textarea>
-                            </div>
-                            <div class="input-field" id="product_price-field">
-                                <input type="text" id="product_price" placeholder="Price" oninput="checkNumericPrice()" disabled>
-                            </div>
-                            <p id="price-criteria"> </p>
-                            <div class="input-field" id="product_quantity-field">
-                                <input type="text" id="product_quantity" placeholder="Quantity" oninput="checkNumericQuantity()" required>
-                            </div>
-                            <p id="quantity-criteria"> </p>
-                        </div>
-                        
-                    </div>
-                    <div class="button-field">
-                        <button type="button" id="purchasesubmit" onclick="submitPurchase()">Done</button>
-                    </div>
-                </form>
+                <div id="purchaseform">
+                    <script>
+                        itemDetail();
+                    </script>
+                </div>
             </div>
             <div class="sidebar" id="sidebar">
                 <script>