diff --git a/bag.html b/bag.html
index a7757f5..0159de2 100644
--- a/bag.html
+++ b/bag.html
@@ -11,8 +11,12 @@
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
     <link href="https://fonts.googleapis.com" rel="preconnect">
     <link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
+    <script src="https://unpkg.com/feather-icons"></script>
     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
     <style>
+        *{
+            font-family: 'Poppins', sans-serif;
+        }
         .bg-color {
             background-color: #1b1c1e;
         }
@@ -25,64 +29,22 @@
             border-bottom-left-radius: 20px;
             border-bottom-right-radius: 20px;
         }
-
-        .title {
-            color: white;
-            font-family: 'Poppins', sans-serif;
-            display: flex;
-            margin-top: 15px;
+        .full-body{
             margin-left: 48px;
-            justify-content: left;
-            text-align: left;
-            background-color: #1b1c1e;
-        }
-
-        .bag-list {
             display: flex;
             color: white;
-            border-bottom: 1px solid white;
-            background-color: #1b1c1e;
-            font-family: 'Poppins', sans-serif;
-            margin-bottom: 1%;
-            justify-content: left;
-            text-align: left;
+            word-break: break-all;
         }
-
-
-        .body-right {
-            margin-right: 48px;
-            color: white;
-            width: 30%;
-            height: 100%;
-
-        }
-
-
-        .body-left {
+        .title{
             margin-left: 48px;
-            margin-right: 48px;
+            color: white;
         }
-
         .button {
             color: white;
             background-color: green;
             margin-top: 15px;
         }
 
-        .full-body {
-            display: flex;
-        }
-
-        .info {
-            margin-left: 30px;
-        }
-
-        .titlesummary {
-            text-align: center;
-            border-bottom: 1px solid white;
-            margin: 10px;
-        }
-
         .container {
             margin-left: 0px;
             justify-content: left;
@@ -90,135 +52,45 @@
 
         .container input {
             justify-content: left;
-            width: 40px;
         }
-        .titletr{
-            text-align: center;
+        .card{
+            background-color: #212226; 
+            color: white; 
+            border-radius: 10px;
+            display: flex;
+        }
+        .bag{
+            color: white;
+            margin-left: 48px;
+            margin-right: 48px;
+        }
+        .box{
+            width: 100px;
         }
 
-        @media only screen and (max-width: 1000px) {
-            .full-body {
-                display: grid !important;
+        @media(max-width: 980px){
+            .summary{
+                margin-top: 20px;
             }
-
-            .body-right {
-                margin-left: 48px;
+            .des{
+                display: grid;
             }
-
-        }
-
-        @media (max-width: 600px) {
-
-            .full-body {
-                font-size: 7px;
-            }
-
-            .img {
-                width: 30px;
-                height: 30px;
-            }
-
-            .info {
-                margin-left: 5px;
-            }
-
-            .titletr {
-                word-break: keep-all;
-            }
-
-            .titletrdes {
+            .bag{
                 word-break: break-all;
             }
-
-            .titlesummary {
-                font-size: 20px;
-
-            }
-
-            .body-right {
-                width: 300px;
-            }
-
-            .body-left {
-                width: 300px;
-            }
         }
 
-        @media (max-width: 541px) {
-            .body-right {
-                width: 444px;
-            }
-
-            .body-left {
-                width: 444px;
+        @media(max-width: 320){
+            .box{
+                width: 10px;
             }
         }
-
-        @media (max-width: 412px) {
-            .body-right {
-                width: 315px;
-            }
-
-            .body-left {
-                width: 315px;
-            }
-        }
-
-        @media (max-width: 415px) {
-            .body-right {
-                width: 318px;
-            }
-
-            .body-left {
-                width: 318px;
-            }
-        }
-
-        @media (max-width: 376px) {
-            .body-right {
-                width: 280px;
-            }
-
-            .body-left {
-                width: 280px;
-            }
-        }
-
-        @media (max-width: 361px) {
-            .body-right {
-                width: 264px;
-            }
-
-            .body-left {
-                width: 264px;
-            }
-        }
-
-        @media (max-width: 321px) {
-            .body-right {
-                width: 224px;
-            }
-
-            .body-left {
-                width: 224px;
-            }
-        }
-
-        @media (max-width: 281px) {
-            .body-right {
-                width: 184px;
-            }
-
-            .body-left {
-                width: 184px;
-            }
-        }
-    </style>
+        </style>
 </head>
 
 <body class="bg-color">
     <nav class="navbar navbar-expand-lg navbar-dark comp-color ml-5 mr-5 nav-radius">
-        <a class="navbar-brand" href="#">Details Products</a>
+        <a class="navbar-brand" href="#">Shopping Bag</a>
         <button aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"
             data-target="#navbarTogglerDemo01" data-toggle="collapse" type="button">
             <span class="navbar-toggler-icon"></span>
@@ -250,108 +122,123 @@
     <div class="title">
         <h3>Shopping Bag</h3>
     </div>
-
-
-    <div class="full-body">
-        <div class="body-left">
-            <table class="table" style="color: white; margin-right: 48px;">
-                <thead>
-                <tr class="titletr">
-                    <th scope="col">Item</th>
-                    <th scope="col" >Qty</th>
-                    <th scope="col">Item Price</th>
-                    <th scope="col">Sub Total</th>
-                </tr>
-                </thead>
-                <tbody>
-                <tr class="titletrdes">
-                    <th scope="row" style="display: flex;"><img alt="placeholder image" class="img" height="80px"
-                                                                src="assets/sepatu.png" width="80px">
-                        <div class="info">
-                            <p>Fashione Shoes</p>
-                            <p>Size : 8</p>
-                            <p>Qty : 1</p>
+    <div class="bag">
+        <div class="row">
+            <div class="col-lg-8">
+                <div class="card">
+                    <div class="card-body">
+                        <div class="row">
+                            <div class="col-sm-6 col-md-4 col-lg-2">
+                                <img alt="placeholder image" class="img-fluid" src="assets/sepatu.png" width="180px" height="180px"/>
+                            </div>
+                            <div class="col-sm-6 col-md-8 col-lg-10">
+                                <p>Fashione Shoes</p>
+                                <p>Size : 8</p>
+                                <p>Qty</p>
+                                <div style="display: flex;">
+                                    <span class="input-group-btn">
+                                        <button type="button" class="btn btn-default btn-number" style="color: white;" onclick="minus('inputNum')"><i data-feather="minus-square"></i></button> 
+                                        </span>
+                                        <input class="box" type="text" disabled="disabled" value="1" class="form-control input-number" id="inputNum" />
+                                        <span class="input-group-btn">
+                                        <button type="button" class="btn btn-default btn-number" style="color: white;" onclick='add("inputNum")'><i data-feather="plus-square"></i></button>
+                                    </span>
+                                </div><br>
+                                <p>Rp 1.999.999,00</p>
+                                <a href=""><u>REMOVE</u></a>
+                                <br><br>
+                            </div>
                         </div>
-                    </th>
-                    <td>
-                        <div class="container">
-                            <input id="" min="1" name="" type="number" value="1">
-                            <a href="" style="font-size: 10px;"><u>REMOVE</u></a>
-                        </div>
-                    </td>
-                    <td>Rp 1.999.999,00</td>
-                    <td>Rp 1.999.999,00</td>
-                </tr>
-                <tr>
-                    <th scope="row" style="display: flex;"><img alt="placeholder image" class="img" height="80px"
-                                                                src="assets/sepatu.png" width="80px">
-                        <div class="info">
-                            <p>Fashione Shoes</p>
-                            <p>Size : 8</p>
-                            <p>Qty : 1</p>
-                        </div>
-                    </th>
-                    <td>
-                        <div class="container">
-                            <input id="" min="1" name="" type="number" value="1">
-                            <a href="" style="font-size: 10px;"><u>REMOVE</u></a>
-                        </div>
-                    </td>
-                    <td>Rp 1.999.999,00</td>
-                    <td>Rp 1.999.999,00</td>
-                </tr>
-                <tr>
-                    <th scope="row" style="display: flex;"><img alt="placeholder image" class="img" height="80px"
-                                                                src="assets/sepatu.png" width="80px">
-                        <div class="info">
-                            <p>Fashione Shoes</p>
-                            <p>Size : 8</p>
-                            <p>Qty : 1</p>
-                        </div>
-                    </th>
-                    <td>
-                        <div class="container">
-                            <input id="" min="1" name="" type="number" value="1">
-                            <a href="" style="font-size: 10px;"><u>REMOVE</u></a>
-                        </div>
-                    </td>
-                    <td>Rp 1.999.999,00</td>
-                    <td>Rp 1.999.999,00</td>
-                </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <div class="body-right" style="margin-left: 48px;">
-            <div class="border">
-                <h5 class="titlesummary"><b>Order Summary</b></h5>
-                <div class="container">
-                    <div class="row justify-content-between" style="display: flex; margin: 10px">
-                        <p>Sub Total</p>
-                        <p>1.999.999,00</p>
                     </div>
                 </div>
-                <div class="container">
-                    <div class="row justify-content-between"
-                        style="display: flex; border-bottom: 1px solid white; margin: 10px">
-                        <p>Shipping</p>
-                        <p>-</p>
+                <div class="card">
+                    <div class="card-body">
+                        <div class="row">
+                            <div class="col-sm-6 col-md-4 col-lg-2">
+                                <img alt="placeholder image" class="img-fluid" src="assets/sepatu.png" width="180px" height="180px"/>
+                            </div>
+                            <div class="col-sm-6 col-md-8 col-lg-10">
+                                <p>Fashione Shoes</p>
+                                <p>Size : 8</p>
+                                <p>Qty</p>
+                                <div style="display: flex;">
+                                    <span class="input-group-btn">
+                                        <button type="button" class="btn btn-default btn-number" style="color: white;" onclick="minus('inputNum')"><i data-feather="minus-square"></i></button> 
+                                        </span>
+                                        <input class="box" type="text" disabled="disabled" value="1" class="form-control input-number" id="inputNum" />
+                                        <span class="input-group-btn">
+                                        <button type="button" class="btn btn-default btn-number" style="color: white;" onclick='add("inputNum")'><i data-feather="plus-square"></i></button>
+                                    </span>
+                                </div><br>
+                                <p>Rp 1.999.999,00</p>
+                                <a href=""><u>REMOVE</u></a>
+                                <br><br>
+                            </div>
+                        </div>
                     </div>
                 </div>
-
-                <div class="container">
-                    <div class="row justify-content-between" style="display: flex; margin: 10px">
-                        <p>Estimate</p>
-                        <p>1.999.999,00</p>
+                <div class="card">
+                    <div class="card-body">
+                        <div class="row">
+                            <div class="col-sm-6 col-md-4 col-lg-2">
+                                <img alt="placeholder image" class="img-fluid" src="assets/sepatu.png" width="180px" height="180px"/>
+                            </div>
+                            <div class="col-sm-6 col-md-8 col-lg-10">
+                                <p>Fashione Shoes</p>
+                                <p>Size : 8</p>
+                                <p>Qty</p>
+                                <div style="display: flex;">
+                                    <span class="input-group-btn">
+                                        <button type="button" class="btn btn-default btn-number" style="color: white;" onclick="minus('inputNum')"><i data-feather="minus-square"></i></button> 
+                                        </span>
+                                        <input class="box" type="text" disabled="disabled" value="1" class="form-control input-number" id="inputNum" />
+                                        <span class="input-group-btn">
+                                        <button type="button" class="btn btn-default btn-number" style="color: white;" onclick='add("inputNum")'><i data-feather="plus-square"></i></button>
+                                    </span>
+                                </div><br>
+                                <p>Rp 1.999.999,00</p>
+                                <a href=""><u>REMOVE</u></a>
+                                <br><br>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-lg-4">
+                <div class="summary">
+                    <div class="card">
+                        <div class="card-body">
+                            <div class="row" style="border-bottom: 1px solid white;">
+                                <div class="col-lg-12">
+                                    <h5 style="text-align: center;"><b>Order Summary</b></h5>
+                                </div>
+                            </div>
+                            <div class="row justify-content-between">
+                                <p>Sub Total</p>
+                                <p>1.999.999,00</p>
+                            </div>
+                            <div class="row justify-content-between" style="border-bottom: 1px solid white;">
+                                <p>Shipping</p>
+                                <p>-</p>
+                            </div>
+                            <div class="row justify-content-between">
+                                <p>Estimate</p>
+                                <p>1.999.999,00</p>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
-            <a href="checkout.html">
-                <button class="button">Checkout</button>
-            </a>
         </div>
     </div>
+        
 
+    <a href="checkout.html" style="margin-left: 48px;">
+        <button class="button">Checkout</button>
+    </a>    
+</div>
+   
 <script crossorigin="anonymous"
         integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
         src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
@@ -359,5 +246,28 @@
         integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
         src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
 
+        <script>
+            function add(id) {
+              var inputCount = document.getElementById(id);
+              console.log("I got clicked");
+              if (inputCount.value < 9) {
+                inputCount.value++;
+              } else {
+                alert("MAX product reach");
+              }
+            }
+      
+            function minus(id) {
+              var inputCount = document.getElementById(id);
+              console.log("Minus got clicked");
+              if (inputCount.value > 1) {
+                inputCount.value--;
+              } else {
+                alert("Remove this item");
+              }
+            }
+      
+            feather.replace();
+          </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/checkout.html b/checkout.html
index b17c3d6..24cd67b 100644
--- a/checkout.html
+++ b/checkout.html
@@ -119,11 +119,14 @@
             cursor: pointer;
         }
 
+
         @media only screen and (max-width: 1000px) {
             .full-body {
                 display: grid !important;
             }
 
+            
+
             .body-right {
                 margin-left: 48px;
                 width: 500px;
@@ -275,7 +278,7 @@
     </div>
 
 
-    <div class="full-body">
+    <div class="full-body justify-content-between">
         <div class="body-left">
             <table class="table" style="color: white; margin-right: 48px;">
                 <thead>
diff --git a/product.html b/product.html
index d6b66e2..1b8d9e4 100644
--- a/product.html
+++ b/product.html
@@ -27,7 +27,6 @@
         }
 
         .product {
-            background-color: #1b1c1e;
             font-family: 'Poppins', sans-serif;
             display: flex;
             justify-content: left;
@@ -94,13 +93,15 @@
         }
 
         .card {
-            background-color: #1b1c1e;
+            background-color: #212226;
             font-family: 'Poppins', sans-serif;
             display: flex;
             margin-left: 48px;
             margin-right: 48px;
             justify-content: left;
             text-align: left;
+            border-radius: 10px;
+            margin-top: 20px;
         }
 
         .sizeSepatu {
@@ -238,7 +239,7 @@
     </div>
 </nav>
 
-<div class="card" style="background-color: #212226 ; border-radius: 20px; margin-top: 20px; ">
+<div class="card">
     <div class="product">
         <img alt="placeholder image" class="img-fluid" src="assets/sepatu.png"/>
         <div class="description">