diff --git a/product-list.html b/product-list.html
index 06b4cd0..86f4602 100644
--- a/product-list.html
+++ b/product-list.html
@@ -136,160 +136,110 @@
 
 <div class="container-fluid mt-3">
     <div class="row justify-content-around">
-        <div class="card mx-3 my-3" style="max-width: 450px;">
-            <div class="row no-gutters">
-                <div class="col-md-4">
-                    <img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_1.webp">
-                </div>
-                <div class="col-md-8">
-                    <div class="card-body">
-                        <h5 class="card-title">Adidas NMD_R1 (GX0997)</h5>
-                        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
-                            tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
+        <div class="col-lg-3 col-md-6 p-3">
+            <div class="card">
+                <img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_1.webp">
+                <div class="card-body">
+                    <h5 class="card-title">Adidas NMD_R1 (GX0997)</h5>
+                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
+                        tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
                         <a href="product.html">
                             <button class="btn btn-info btn-product-card" type="button">View Detail</button>
                         </a>
-                    </div>
                 </div>
             </div>
         </div>
-        <div class="card mx-3 my-3" style="max-width: 450px;">
-            <div class="row no-gutters">
-                <div class="col-md-4">
-                    <img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_2.webp">
-                </div>
-                <div class="col-md-8">
-                    <div class="card-body">
-                        <h5 class="card-title">Adidas NMD_R1 (G55575)</h5>
-                        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
-                            tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
+        <div class="col-lg-3 col-md-6 p-3">
+            <div class="card">
+                <img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_2.webp">
+                <div class="card-body">
+                    <h5 class="card-title">Adidas NMD_R1 (G55575)</h5>
+                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
+                        tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
                         <a href="product.html">
                             <button class="btn btn-info btn-product-card" type="button">View Detail</button>
                         </a>
-                    </div>
                 </div>
             </div>
         </div>
-        <div class="card mx-3 my-3" style="max-width: 450px;">
-            <div class="row no-gutters">
-                <div class="col-md-4">
-                    <img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_3.webp">
-                </div>
-                <div class="col-md-8">
-                    <div class="card-body">
-                        <h5 class="card-title">Adidas NMD_R1
-                            (FV1740)</h5>
-                        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
-                            tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
+        <div class="col-lg-3 col-md-6 p-3">
+            <div class="card">
+                <img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_3.webp">
+                <div class="card-body">
+                    <h5 class="card-title">Adidas NMD_R1
+                        (FV1740)</h5>
+                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
+                        tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
                         <a href="product.html">
                             <button class="btn btn-info btn-product-card" type="button">View Detail</button>
                         </a>
-                    </div>
                 </div>
             </div>
         </div>
-        <div class="card mx-3 my-3" style="max-width: 450px;">
-            <div class="row no-gutters">
-                <div class="col-md-4">
-                    <img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_4.webp">
-                </div>
-                <div class="col-md-8">
-                    <div class="card-body">
-                        <h5 class="card-title">Adidas NMD_R1 PRIMBLUE (GZ9256)</h5>
-                        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
-                            tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
+        <div class="col-lg-3 col-md-6 p-3">
+            <div class="card">
+                <img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_10.webp">
+                <div class="card-body">
+                    <h5 class="card-title">Adidas NMD_R1A (FX6794)</h5>
+                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
+                        tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
                         <a href="product.html">
                             <button class="btn btn-info btn-product-card" type="button">View Detail</button>
                         </a>
-                    </div>
                 </div>
             </div>
         </div>
-        <div class="card mx-3 my-3" style="max-width: 450px;">
-            <div class="row no-gutters">
-                <div class="col-md-4">
-                    <img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_5.webp">
-                </div>
-                <div class="col-md-8">
-                    <div class="card-body">
-                        <h5 class="card-title">Adidas NMD_R1 (GZ7944)</h5>
-                        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
-                            tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
+        <div class="col-lg-3 col-md-6 p-3">
+            <div class="card">
+                <img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_5.webp">
+                <div class="card-body">
+                    <h5 class="card-title">Adidas NMD_R1 (GZ7944)</h5>
+                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
+                        tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
                         <a href="product.html">
                             <button class="btn btn-info btn-product-card" type="button">View Detail</button>
                         </a>
-                    </div>
                 </div>
             </div>
         </div>
-        <div class="card mx-3 my-3" style="max-width: 450px;">
-            <div class="row no-gutters">
-                <div class="col-md-4">
-                    <img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_6.webp">
-                </div>
-                <div class="col-md-8">
-                    <div class="card-body">
-                        <h5 class="card-title">Adidas NMD_R1
-                            (GZ7943)</h5>
-                        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
-                            tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
+        <div class="col-lg-3 col-md-6 p-3">
+            <div class="card">
+                <img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_6.webp">
+                <div class="card-body">
+                    <h5 class="card-title">Adidas NMD_R1
+                        (GZ7943)</h5>
+                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
+                        tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
                         <a href="product.html">
                             <button class="btn btn-info btn-product-card" type="button">View Detail</button>
                         </a>
-                    </div>
                 </div>
             </div>
         </div>
-        <div class="card mx-3 my-3" style="max-width: 450px;">
-            <div class="row no-gutters">
-                <div class="col-md-4">
-                    <img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_7.webp">
-                </div>
-                <div class="col-md-8">
-                    <div class="card-body">
-                        <h5 class="card-title">Adidas NMD_R1
-                            (FY3566)</h5>
-                        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
-                            tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
+        <div class="col-lg-3 col-md-6 p-3">
+            <div class="card">
+                <img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_7.webp">
+                <div class="card-body">
+                    <h5 class="card-title">Adidas NMD_R1
+                        (FY3566)</h5>
+                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
+                        tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
                         <a href="product.html">
                             <button class="btn btn-info btn-product-card" type="button">View Detail</button>
                         </a>
-                    </div>
                 </div>
             </div>
         </div>
-        <div class="card mx-3 my-3" style="max-width: 450px;">
-            <div class="row no-gutters">
-                <div class="col-md-4">
-                    <img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_8.webp">
-                </div>
-                <div class="col-md-8">
-                    <div class="card-body">
-                        <h5 class="card-title">Adidas NMD_R1 (GX0996)</h5>
-                        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
-                            tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
+        <div class="col-lg-3 col-md-6 p-3">
+            <div class="card">
+                <img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_8.webp">
+                <div class="card-body">
+                    <h5 class="card-title">Adidas NMD_R1 (GX0996)</h5>
+                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
+                        tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
                         <a href="product.html">
                             <button class="btn btn-info btn-product-card" type="button">View Detail</button>
                         </a>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="card mx-3 my-3" style="max-width: 450px;">
-            <div class="row no-gutters">
-                <div class="col-md-4">
-                    <img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_9.webp">
-                </div>
-                <div class="col-md-8">
-                    <div class="card-body">
-                        <h5 class="card-title">Adidas NMD_R1
-                            (FY3565)</h5>
-                        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
-                            tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
-                        <a href="product.html">
-                            <button class="btn btn-info btn-product-card" type="button">View Detail</button>
-                        </a>
-                    </div>
                 </div>
             </div>
         </div>