diff --git a/product.html b/product.html
index c4874e1..b71eb6b 100644
--- a/product.html
+++ b/product.html
@@ -44,7 +44,7 @@
             <img src="assets/sepatu.png" alt="placeholder image" class="img-fluid" />
             <div class="description">
                 <div style="margin-left: 20px;">
-                    <h1>Fashione Shoes White</h1>
+                    <h1 class="titledes">Fashione Shoes White</h1>
                 </div>
                 <div>
                     <p class="card-body" >
@@ -72,24 +72,24 @@
     
                         <div class="modal-content">
                             <span class="close">&times;</span>
-                            <h2><b>SUCCESSFULLY ADDED TO BAG</b></h2>
-                            <div class="konten" >
+                            <h2 class="titlee"><b>SUCCESSFULLY ADDED TO BAG</b></h2>
+                            <div class="konten">
                                 <img src="assets/sepatu.png" alt="placeholder image" class="img-fluid"  width="200px" height="200px">
-                                <div style="padding-left: 20px; padding-right: 20px;">
-                                    <h3>Fashione Shoes White</h3>
+                                <div class="bodymodal" style="padding-left: 20px; padding-right: 20px;">
+                                    <h3 class="titlemodal">Fashione Shoes White</h3>
                                     <br>
-                                    <h5><b>Rp 1.999.999,00</b></h5>
-                                    <P>Total : 1</P>
+                                    <h5 class="modall"><b>Rp 1.999.999,00</b></h5>
+                                    <P class="modall">Total : 1</P>
                                 </div>
      
-                                <div style="padding-left: 20px; border-left: 1px solid black; padding-right: 20px;">
-                                    <h5><b>Your Bag</b></h5>
+                                <div class="bodymodal" style="padding-left: 20px; border-left: 1px solid black; padding-right: 20px;">
+                                    <h5 class="titlemodal"><b>Your Bag</b></h5>
                                     <br>
-                                    <p style="border-bottom: 1px solid black ;">Product Cost : Rp 1.999.999,00</p>
-                                    <p>Total Product Cost : Rp 1.999.999,00</p>
+                                    <p class="modall" style="border-bottom: 1px solid black ;">Product Cost : Rp 1.999.999,00</p>
+                                    <p class="modall" >Total Product Cost : Rp 1.999.999,00</p>
                                 </div>
     
-                                <div style="padding-left: 20px; border-left: 1px solid black;">
+                                <div class="bodymodal" style="padding-left: 20px; border-left: 1px solid black;">
                                     <a href="bag.html"> <button class="button" style="background-color: aqua;">Bag</button></a>
                                     <a href="checkout.html"> <button class="button" style="background-color: green; color: white" >Checkout</button></a>
                                 </div>
diff --git a/stylebag.css b/stylebag.css
index 4e5d8bb..6ec1e58 100644
--- a/stylebag.css
+++ b/stylebag.css
@@ -81,7 +81,7 @@
 @media (max-width: 600px){
   
   .full-body{
-    font-size: 6px ;
+    font-size: 7px ;
   }
   .img{
     width: 30px;
@@ -97,12 +97,84 @@
     word-break: break-all;
   }
   .titlesummary{
-    font-size: 10px;
+    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 : 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;
+  } 
 }
 
 
+
diff --git a/stylecheckout.css b/stylecheckout.css
index 2b39cfa..4f071be 100644
--- a/stylecheckout.css
+++ b/stylecheckout.css
@@ -82,29 +82,105 @@
 @media (max-width: 600px){
   
   .full-body{
-    font-size: 6px ;
+    font-size: 7px ;
   }
+
   .img{
     width: 30px;
     height: 30px;
   }
+
   .info{
     margin-left: 5px;
   }
+
   .titletr{
     word-break: keep-all;
   }
+
   .titletrdes{
     word-break: break-all;
   }
+
   .titlesummary{
     font-size: 10px;
-
   }
+
   .body-right{
-      width: 300px;
+    width: 504px;
   }
 
+  .body-left{
+    width: 504px;
+  } 
+}
+
+@media (max-width : 541px){
+  .body-right{
+    width: 444px;
+  }
+
+  .body-left{
+    width: 444px;
+  } 
+}
+
+@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;
+  } 
 }
 
 
diff --git a/styleproduct.css b/styleproduct.css
index e00b33c..57ca2ae 100644
--- a/styleproduct.css
+++ b/styleproduct.css
@@ -112,9 +112,73 @@
     .konten{
       display: grid;
     }
+    .bodymodal{
+      border-top: 1px solid black;
+      border-left: none !important;
+    }
 }
   
-  
+@media (max-width: 601px){
+  .konten{
+    display: grid;
+  }
+  .titledes{
+    font-size: 25px ;
+  }
+  .card-body{
+    font-size: 12px;
+  }
+}
+
+
+@media (max-width: 361px){
+  .konten{
+    display: grid;
+  }
+  .titledes{
+    font-size: 20px ;
+  }
+  .card-body{
+    font-size: 10px;
+  }
+}
+
+@media (max-width: 321px){
+  .konten{
+    display: grid;
+  }
+  .titledes{
+    font-size: 17px ;
+  }
+  .card-body{
+    font-size: 8px;
+  }
+}
+
+@media (max-width: 376px){
+  .konten{
+    display: grid;
+  }
+  .titledes{
+    font-size: 22px ;
+  }
+  .card-body{
+    font-size: 11px;
+  }
+}
+
+@media (max-width: 511px){
+  .titlemodal{
+    font-size: 15px;
+  }
+  .modall{
+    font-size: 10px;
+  }
+  .titlee{
+    font-size: 20px;
+  }
+}
+