diff --git a/scripts/client/pages/home/index.php b/scripts/client/pages/home/index.php
index 179443631e9fe32a46d4f2eba4da542dffdf5017..7218e2ab0305a674ad5e4c72d01cd05818e5d936 100644
--- a/scripts/client/pages/home/index.php
+++ b/scripts/client/pages/home/index.php
@@ -1,6 +1,11 @@
 <?php require_once __DIR__ . "/../template/header.php" ?>
 <?php require_once __DIR__ . "/../template/navbar.php" ?>
 
+<style>
+    /* page css part */
+    <?php include '../../public/css/pages/product.css'; ?>
+</style>
+
 <section id="product">
     <div class="queryCt">
         <div class="productMenu">
diff --git a/scripts/client/public/assets/images/hehe.PNG b/scripts/client/public/assets/images/hehe.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..2851278effacabd49bc13a360b14ce3fd8b97436
Binary files /dev/null and b/scripts/client/public/assets/images/hehe.PNG differ
diff --git a/scripts/client/public/css/pages/product.css b/scripts/client/public/css/pages/product.css
index 81534f77b5f4bbdb0d7e55a55a62173fee7bb14c..1e67ef608ed67d10587fb678b97c29ab3b0ceaad 100644
--- a/scripts/client/public/css/pages/product.css
+++ b/scripts/client/public/css/pages/product.css
@@ -10,8 +10,8 @@
 
 #numsofObj {
     background-color: inherit;
-    font-size: 1.5rem;
-    width: 1.7rem;
+    font-size: 1.25rem;
+    width: 1.5rem;
     color: white;
     border: none;
     justify-items: center;
@@ -20,8 +20,8 @@
 
 #numsofObj::placeholder {
     background-color: inherit;
-    font-size: 1.5rem;
-    width: 1.7rem;
+    font-size: 1.25rem;
+    width: 1.5rem;
     color: white;
     border: none;
     justify-items: center;
@@ -35,7 +35,7 @@
     justify-content: space-between;
 }
 
-@media only screen and (max-width: 1175px) {
+@media only screen and (max-width: 1315px) {
     .productMenu {
         flex-direction: column;
     }
@@ -48,14 +48,15 @@
 
 .pageTitle {
     float: left;
-    font-size: 1.5rem;
+    font-size: 2.5rem;
+    font-weight: bold;
     flex-wrap: nowrap;
     display: flex;
     align-items: center;
 }
 
 .listTitle {
-    font-size: 1.5rem;
+    font-size: 1.25rem;
     align-items: center;
     margin-bottom: 1.5rem;
     display: inline;
@@ -71,6 +72,14 @@
         font-size: 1.2rem;
     }
 
+    #numsofObj {
+        font-size: 1.2rem;
+    }
+
+    #numsofObj::placeholder {
+        font-size: 1.2rem;
+    }
+
     .dropdown1, .dropdown2, .dropdown3 {
         width: 150px;
         height: 35px;
@@ -89,6 +98,10 @@
         font-size: 1rem;
     }
 
+    #numsofObj::placeholder {
+        font-size: 1rem;
+    }
+
     .listTitle {
         font-size: 1rem;
     }
@@ -231,31 +244,45 @@
     }
 }
 
-@media screen and (min-width: 1010px) {
+@media screen and (max-width: 1260px) {
     .card {
-        width: 25%;
+        width: calc(34% - 70px) !important;
     }
 }
 
-@media screen and (min-width: 936px) {
+@media screen and (max-width: 920px) {
     .card {
-        width: 40%;
+        width: calc(50% - 60px) !important;
     }
 }
 
+@media screen and (max-width: 570px) {
+    .card {
+        width: 100% !important;
+    }
+}
+
+#queryResultProduct {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    width: 100%;
+}
+
 .card {
     background-color: #121212;
     border-radius: 17px;
-    padding: 8px;
-    margin: 8px;
+    padding: 20px;
+    margin: 10px;
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
     align-items: center;
-    justify-content: center;
-    width: 20vw;
+    justify-content: space-between;
+    width: calc(25% - 60px);
     font-size: 10px;
     cursor: pointer;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
 }
 
 .card:hover {
@@ -270,21 +297,23 @@
 }
 
 .cardImage {
-    width: 19vw;
-    height: 30vh;
+    width: 100%;
+    height: 300px;
+    margin-bottom: 20px;
+    border-radius: 5px;
+    overflow: hidden;
+}
+
+.cardImage img, .cardImage video {
+    width: 100%;
+    height: 100%;
     object-fit: cover;
-    border-radius: 0.5rem;
-    margin-top: 1vh;
-    margin-bottom: 2vh;
 }
 
 .productdesc {
-    padding-left: 4rem;
-    padding-right: 4rem;
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
-    width: 90%;
-    height: auto;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
 }
 
 .productTitle {
diff --git a/scripts/client/public/js/product.js b/scripts/client/public/js/product.js
index 541c5f46c2091f9e921cc590821af227b835aab0..d1b7e572839d1c91a10ac2ac916c7e3188149d2e 100644
--- a/scripts/client/public/js/product.js
+++ b/scripts/client/public/js/product.js
@@ -172,26 +172,31 @@ function appendData(data, target) {
         }
         if (target=='queryResultProduct') {
             mainContainer.innerHTML += 
-                '<div class="card" id='+ data[i].product_id+' onclick="rerouteproduct(this.id)"> \
-                    <img src="/../public/assets/images/' + data[i].image + '" class="cardImage"> \
+                `<div class="card" onclick="rerouteproduct(${data[i].product_id})"> \
+                    <div class="cardImage"> \
+                        ${data[i].image.includes('.mp4') ? 
+                        `<video src="/public/assets/videos/${data[i].image}" alt="Product Image" autoplay loop muted></video>` :
+                        `<img src="/public/assets/images/${data[i].image}" alt="Product Image">`
+                        }
+                    </div> \
                     <div class="productdesc"> \
                         <div class="stockCategory"> \
                             <div class="category"> \
-                                <img src="/public/images/category.png" class="cardIcon">'
-                                + data[i].category_name + 
-                            '</div> \
+                                <img src="/public/images/category.png" class="cardIcon">
+                                ${data[i].category_name}
+                            </div> \
                             <div class="stock"> \
-                                <img src="/public/images/quantity.png" class="cardIcon">' 
-                                + data[i].stock + 
-                            '</div> \
+                                <img src="/public/images/quantity.png" class="cardIcon"> 
+                                ${data[i].stock} 
+                            </div> \
                         </div> \
-                        <div class="productTitle">' + data[i].product_name + '</div> \
-                        <div class="price">' + data[i].price.toLocaleString("id-ID", {
+                        <div class="productTitle"> ${data[i].product_name} </div> \
+                        <div class="price"> ${data[i].price.toLocaleString("id-ID", {
                             style: "currency",
                             currency: "IDR",
-                        }); + '</div> \
+                        })}</div> \
                     </div> \
-                </div>';
+                </div>`;
         }
     }
     mainContainer.style.display = "flex";