diff --git a/bag.html b/bag.html
index 34c980e..ce44d0b 100644
--- a/bag.html
+++ b/bag.html
@@ -49,7 +49,7 @@
       <div class="body-left" >
         <table class="table" style="color: white; margin-right: 48px;">
           <thead>
-            <tr>
+            <tr class="titletr">
               <th scope="col">Item</th>
               <th scope="col">Qty</th>
               <th scope="col">Item Price</th>
@@ -57,9 +57,9 @@
             </tr>
           </thead>
           <tbody>
-            <tr>
+            <tr class="titletrdes">
               <th scope="row" style="display: flex;"><img src="assets/sepatu.png" alt="placeholder image" class="img" height="80px" width="80px">
-                <div style="margin-left: 30px;">
+                <div class="info" >
                     <p>Fashione Shoes</p>
                     <p>Size : 8</p>
                     <p>Qty : 1</p>
@@ -70,7 +70,7 @@
             </tr>
             <tr>
               <th scope="row" style="display: flex;"><img src="assets/sepatu.png" alt="placeholder image" class="img" height="80px" width="80px">
-                <div style="margin-left: 30px;">
+                <div class="info">
                     <p>Fashione Shoes</p>
                     <p>Size : 8</p>
                     <p>Qty : 1</p>
@@ -81,7 +81,7 @@
             </tr>
             <tr>
               <th scope="row" style="display: flex;"><img src="assets/sepatu.png" alt="placeholder image" class="img" height="80px" width="80px">
-                <div style="margin-left: 30px;">
+                <div class="info" >
                     <p>Fashione Shoes</p>
                     <p>Size : 8</p>
                     <p>Qty : 1</p>
@@ -96,7 +96,7 @@
 
       <div class="body-right" style="margin-left: 48px;">
           <div class="border">
-              <h5 style="text-align: center; border-bottom: 1px solid white; margin: 10px;"><b>Order Summary</b></h5>
+              <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>
diff --git a/stylebag.css b/stylebag.css
index 0461d02..182b4f9 100644
--- a/stylebag.css
+++ b/stylebag.css
@@ -58,6 +58,15 @@
   display: flex;
 }
 
+.info{
+  margin-left: 30px;
+}
+.titlesummary{
+  text-align: center;
+  border-bottom: 1px solid white;
+  margin: 10px;
+}
+
 @media only screen and (max-width: 1000px){
   .full-body{
     display: grid !important;
@@ -69,14 +78,27 @@
 
 }
 
-@media (max-width: 450px){
+@media (max-width: 600px){
   
   .full-body{
-    font-size: x-small ;
+    font-size: 5px ;
   }
   .img{
-    width: 40px;
-    height: 40px;
+    width: 30px;
+    height: 30px;
+  }
+  .info{
+    margin-left: 5px;
+  }
+  .titletr{
+    word-break: keep-all;
+  }
+  .titletrdes{
+    word-break: break-all;
+  }
+  .titlesummary{
+    font-size: 8px;
+
   }
 }