diff --git a/css/style.css b/css/style.css
index a0215d8..d670f50 100644
--- a/css/style.css
+++ b/css/style.css
@@ -692,5 +692,13 @@ footer .credit a {
 
   .modal .modal-container {
     margin-bottom: 15%;
+    max-height: 48rem;
+  }
+
+  .modal .modal-container .modal-content {
+    height: 100%;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
   }
 }
diff --git a/img/products/1.jpg b/img/products/1-p.jpg
similarity index 100%
rename from img/products/1.jpg
rename to img/products/1-p.jpg
diff --git a/img/products/2.jpg b/img/products/2-p.jpg
similarity index 100%
rename from img/products/2.jpg
rename to img/products/2-p.jpg
diff --git a/img/products/3.jpg b/img/products/3-p.jpg
similarity index 100%
rename from img/products/3.jpg
rename to img/products/3-p.jpg
diff --git a/img/products/4.jpg b/img/products/4-p.jpg
similarity index 100%
rename from img/products/4.jpg
rename to img/products/4-p.jpg
diff --git a/img/products/5.jpg b/img/products/5-p.jpg
similarity index 100%
rename from img/products/5.jpg
rename to img/products/5-p.jpg
diff --git a/img/products/6.jpg b/img/products/6-p.jpg
similarity index 100%
rename from img/products/6.jpg
rename to img/products/6-p.jpg
diff --git a/index.html b/index.html
index 1221eb3..eeb40b8 100644
--- a/index.html
+++ b/index.html
@@ -50,15 +50,16 @@
       <!-- Shopping Cart Start -->
       <div class="shopping-cart">
         <div class="cart-item">
-          <img src="img/products/3.jpg" alt="Product 1" />
+          <img src="img/products/3-p.jpg" alt="Product 1" />
           <div class="item-detail">
             <h3>Product 1</h3>
             <div class="item-price">IDR 22k</div>
           </div>
+          s
           <i data-feather="trash-2" class="remove-item"></i>
         </div>
         <div class="cart-item">
-          <img src="img/products/3.jpg" alt="Product 1" />
+          <img src="img/products/3-p.jpg" alt="Product 1" />
           <div class="item-detail">
             <h3>Product 1</h3>
             <div class="item-price">IDR 22k</div>
@@ -66,7 +67,7 @@ <h3>Product 1</h3>
           <i data-feather="trash-2" class="remove-item"></i>
         </div>
         <div class="cart-item">
-          <img src="img/products/3.jpg" alt="Product 1" />
+          <img src="img/products/3-p.jpg" alt="Product 1" />
           <div class="item-detail">
             <h3>Product 1</h3>
             <div class="item-price">IDR 22k</div>
@@ -170,88 +171,7 @@ <h2>Our <span>Special Product</span></h2>
       </p>
 
       <div class="row" id="row-products">
-        <!-- <div class="product-card">
-          <div class="product-icons">
-            <a href="#"><i data-feather="shopping-cart"></i></a>
-            <a href="#"><i data-feather="eye"></i></a>
-          </div>
-          <div class="product-image">
-            <img src="/img/products/1.jpg" alt="Product 1" />
-          </div>
-          <div class="product-content">
-            <h3>Coffee Beans</h3>
-            <div class="product-stars">
-              <i data-feather="star" class="star-full"></i>
-              <i data-feather="star" class="star-full"></i>
-              <i data-feather="star" class="star-full"></i>
-              <i data-feather="star" class="star-full"></i>
-              <i data-feather="star" class="star-full"></i>
-            </div>
-            <div class="product-price">IDR 30k <span>IDR 55k</span></div>
-          </div>
-        </div>
-        <div class="product-card">
-          <div class="product-icons">
-            <a href="#"><i data-feather="shopping-cart"></i></a>
-            <a href="#"><i data-feather="eye"></i></a>
-          </div>
-          <div class="product-image">
-            <img src="/img/products/2.jpg" alt="Product 3" />
-          </div>
-          <div class="product-content">
-            <h3>Coffee Cup</h3>
-            <div class="product-stars">
-              <i data-feather="star" class="star-full"></i>
-              <i data-feather="star" class="star-full"></i>
-              <i data-feather="star" class="star-full"></i>
-              <i data-feather="star" class="star-full"></i>
-              <i data-feather="star"></i>
-            </div>
-            <div class="product-price">IDR 18k <span>IDR 30k</span></div>
-          </div>
-        </div>
-        <div class="product-card">
-          <div class="product-icons">
-            <a href="#"><i data-feather="shopping-cart"></i></a>
-            <a href="#" class="item-detail-button"
-              ><i data-feather="eye"></i
-            ></a>
-          </div>
-          <div class="product-image">
-            <img src="/img/products/3.jpg" alt="Product 3" />
-          </div>
-          <div class="product-content">
-            <h3>Croissant</h3>
-            <div class="product-stars">
-              <i data-feather="star" class="star-full"></i>
-              <i data-feather="star" class="star-full"></i>
-              <i data-feather="star" class="star-full"></i>
-              <i data-feather="star" class="star-full"></i>
-              <i data-feather="star"></i>
-            </div>
-            <div class="product-price">IDR 22k <span>IDR 25k</span></div>
-          </div>
-        </div>
-        <div class="product-card">
-          <div class="product-icons">
-            <a href="#"><i data-feather="shopping-cart"></i></a>
-            <a href="#"><i data-feather="eye"></i></a>
-          </div>
-          <div class="product-image">
-            <img src="/img/products/4.jpg" alt="Product 4" />
-          </div>
-          <div class="product-content">
-            <h3>Brownie</h3>
-            <div class="product-stars">
-              <i data-feather="star" class="star-full"></i>
-              <i data-feather="star" class="star-full"></i>
-              <i data-feather="star" class="star-full"></i>
-              <i data-feather="star" class="star-full"></i>
-              <i data-feather="star" class="star-full"></i>
-            </div>
-            <div class="product-price">IDR 25k <span>IDR 40k</span></div>
-          </div>
-        </div> -->
+        <!-- Container Products card -->
       </div>
     </section>
     <!-- Products section end -->
@@ -319,29 +239,7 @@ <h2>Our <span>Contact</span></h2>
         <a class="close-icon" onclick="removeModal()"
           ><i data-feather="x"></i
         ></a>
-        <!-- <div class="modal-content">
-          <img src="/img/products/3.jpg" alt="Product 3" />
-          <div class="product-content">
-            <h3>Product 3</h3>
-            <p>
-              Indulge in the exquisite taste of our freshly baked croissants at
-              our cozy coffee shop. Crafted with precision and passion, our
-              croissants are a delightful blend of buttery richness and flaky
-              texture, perfect for your morning pick-me-up or afternoon treat.
-            </p>
-            <div class="product-stars">
-              <i data-feather="star" class="star-full"></i>
-              <i data-feather="star" class="star-full"></i>
-              <i data-feather="star" class="star-full"></i>
-              <i data-feather="star" class="star-full"></i>
-              <i data-feather="star"></i>
-            </div>
-            <div class="product-price">IDR 22k <span>IDR 25k</span></div>
-            <a href="#"
-              ><i data-feather="shopping-cart"></i> <span>add to cart</span></a
-            >
-          </div>
-        </div> -->
+        <!-- Container Modal Content -->
       </div>
     </div>
     <!-- Modal Box Item Detail end -->
diff --git a/js/data.js b/js/data.js
deleted file mode 100644
index 3ea2d41..0000000
--- a/js/data.js
+++ /dev/null
@@ -1,38 +0,0 @@
-export const dataProducts = [
-  {
-    image: "/img/products/1.jpg",
-    noProduct: 1,
-    title: "Coffee Been",
-    desc: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus, et id officiis quasi illo fuga praesentium beatae voluptate tempora quidem!",
-    starNumber: 3,
-    discPrice: "30",
-    realPrice: "55",
-  },
-  {
-    image: "/img/products/2.jpg",
-    noProduct: 2,
-    title: "Coffee Cup",
-    desc: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus, et id officiis quasi illo fuga praesentium beatae voluptate tempora quidem!",
-    starNumber: 4,
-    discPrice: "18",
-    realPrice: "30",
-  },
-  {
-    image: "/img/products/3.jpg",
-    noProduct: 3,
-    title: "Croissant",
-    desc: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus, et id officiis quasi illo fuga praesentium beatae voluptate tempora quidem!",
-    starNumber: 4,
-    discPrice: "22",
-    realPrice: "25",
-  },
-  {
-    image: "/img/products/4.jpg",
-    noProduct: 4,
-    title: "Brownie",
-    desc: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus, et id officiis quasi illo fuga praesentium beatae voluptate tempora quidem!",
-    starNumber: 5,
-    discPrice: "25",
-    realPrice: "40",
-  },
-];
diff --git a/js/script.js b/js/script.js
index 5d1c119..4087670 100644
--- a/js/script.js
+++ b/js/script.js
@@ -1,7 +1,7 @@
 // Data Products
 const dataProducts = [
   {
-    image: "/img/products/1.jpg",
+    image: "img/products/1-p.jpg",
     noProduct: 1,
     title: "Coffee Been",
     desc: "Welcome to our coffee shop, where every sip tells a story and every bean is carefully selected to ensure a remarkable experience. Our signature Coffee Bean blend is a testament to our dedication to quality and taste.",
@@ -10,7 +10,7 @@ const dataProducts = [
     realPrice: "55",
   },
   {
-    image: "/img/products/2.jpg",
+    image: "img/products/2-p.jpg",
     noProduct: 2,
     title: "Coffee Cup",
     desc: "Elevate your coffee-drinking experience with our exquisite collection of coffee cups. Crafted with precision and style, each cup is designed to enhance the flavors and aromas of our premium brews.",
@@ -19,7 +19,7 @@ const dataProducts = [
     realPrice: "30",
   },
   {
-    image: "/img/products/3.jpg",
+    image: "img/products/3-p.jpg",
     noProduct: 3,
     title: "Croissant",
     desc: "Indulge in the exquisite taste of our freshly baked croissants at our cozy coffee shop. Crafted with precision and passion, our croissants are a delightful blend of buttery richness and flaky texture, perfect for your morning pick-me-up or afternoon treat.",
@@ -28,7 +28,7 @@ const dataProducts = [
     realPrice: "25",
   },
   {
-    image: "/img/products/4.jpg",
+    image: "img/products/4-p.jpg",
     noProduct: 4,
     title: "Brownie",
     desc: "Treat yourself to a moment of indulgence with our irresistible brownies. Baked fresh daily, our brownies are a harmonious blend of fudgy richness and decadent chocolate flavor.",
@@ -37,7 +37,7 @@ const dataProducts = [
     realPrice: "40",
   },
   {
-    image: "/img/products/5.jpg",
+    image: "img/products/5-p.jpg",
     noProduct: 5,
     title: "Muffin",
     desc: "Each muffin is lovingly baked to perfection, ensuring a burst of flavor in every bite. Whether you're in the mood for a sweet treat or a savory snack, our muffins are sure to satisfy your taste buds and brighten your day.",
@@ -46,7 +46,7 @@ const dataProducts = [
     realPrice: "50",
   },
   {
-    image: "/img/products/6.jpg",
+    image: "img/products/6-p.jpg",
     noProduct: 6,
     title: "Donut",
     desc: "Indulge in the irresistible allure of our donuts, boasting a perfect balance of soft, fluffy dough and delectable toppings. From classic glazed and powdered sugar to indulgent chocolate frosted and colorful sprinkles, our donut variety caters to every palate and preference.",
@@ -143,8 +143,8 @@ dataProducts.map((product) => {
 
   productsRow.innerHTML += `<div class="product-card">
           <div class="product-icons">
-            <a ><img src="/img/svg/shopping-cart.svg"/></a>
-            <a onclick="showModal(${product.noProduct})"><img src="/img/svg/eye.svg"/></a>
+            <a ><img src="img/svg/shopping-cart.svg"/></a>
+            <a onclick="showModal(${product.noProduct})"><img src="img/svg/eye.svg"/></a>
           </div>
           <div class="product-image">
             <img src="${product.image}" alt="Product ${product.noProssduct}" />
@@ -181,7 +181,7 @@ function showModal(noProduct) {
               ${stars}
             </div>
             <div class="product-price">IDR ${modalProduct.discPrice}k <span>IDR ${modalProduct.realPrice}k</span></div>
-            <a><img src="/img/svg/shopping-cart.svg"/> <span>add to cart</span></a
+            <a><img src="img/svg/shopping-cart.svg"/> <span>add to cart</span></a
             >
           </div>
         </div>`;
@@ -194,4 +194,3 @@ function removeModal() {
   itemDetailModal.style.display = "none";
   modalContainer.lastElementChild.remove();
 }
-ss;