diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
index 6743dbdfa..7167222d4 100644
--- a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
@@ -630,7 +630,7 @@ section.slider-block {
             display:inline-block;
             color: $font-color;
             text-decoration: none;
-            padding: 0.8em 0.3em 0.8em 0.5em;
+            padding: 12px 4.8px 12px 8px;
             text-transform: uppercase;
             letter-spacing: 2px;
             position: relative;
@@ -1057,6 +1057,26 @@ section.product-detail {
 
             div.product-image-group {
                 margin-right: 30px;
+                width: 604px;
+                height: 650px;
+                max-width: 604px;
+
+                .loader {
+                    border: 16px solid #f3f3f3;
+                    border-top: 16px solid #3498db;
+                    border-radius: 50%;
+                    width: 50px;
+                    height: 50px;
+                    animation: spin 2s linear infinite;
+                    margin-left: 20%;
+                    position: absolute;
+                    margin-top: 200px;
+                }
+
+                @keyframes spin {
+                    0% { transform: rotate(0deg); }
+                    100% { transform: rotate(360deg); }
+                }
 
                 div {
                     display: flex;
@@ -1066,17 +1086,17 @@ section.product-detail {
                         display: flex;
                         flex-direction: column;
                         margin-right: 4px;
-                        height: 480px;
                         min-width: 120px;
                         overflow: hidden;
                         position: relative;
                         justify-content: flex-start;
+                        max-height: 480px;
 
                         .thumb-frame {
                             border: 2px solid transparent;
                             background: #F2F2F2;
                             width: 120px;
-                            height: 120px;
+                            max-height: 120px;
 
                             &.active {
                                 border-color: #979797;
@@ -1125,10 +1145,11 @@ section.product-detail {
                         background: #F2F2F2;
                         width: 100%;
                         max-height: 480px;
+                        height: 100%;
 
                         img {
                             width: 100%;
-                            height: 480px;
+                            height: auto;
                             max-height: 480px;
                         }
 
@@ -1158,27 +1179,31 @@ section.product-detail {
                     }
                 }
 
+
                 .add-to-buttons {
-                    display: flex;
+                    display: none;
                     flex-direction: row;
                     margin-top: 10px;
+                    justify-content: space-between;
 
                     .addtocart {
                         border-radius: 0px;
                         width: 49%;
                         background: black;
+                        white-space: nowrap;
                     }
 
                     .buynow {
                         border-radius: 0px;
                         width: 49%;
                         float:right;
+                        white-space: nowrap;
                     }
                 }
             }
 
             .details {
-                width: 47.5%;
+                width: 50%;
 
                 .product-price {
                     margin-bottom: 14px;
@@ -1254,6 +1279,93 @@ section.product-detail {
 }
 // product pages css ends here
 
+// product pages responsive css start here
+
+// @media only screen and (max-width: 650px){
+
+//     section.product-detail div.layouter form {
+//         flex-direction: column;
+
+//         div.product-image-group {
+//             margin-right: 0px;
+//         }
+
+//         .details {
+//             width: 100%;
+//             margin-top: 20px;
+//         }
+//     }
+// }
+
+@media only screen and (max-width: 720px){
+    section.product-detail div.layouter form {
+        flex-direction: column;
+
+        div.product-image-group {
+            margin-right: 0px;
+            max-width: none;
+            width: auto;
+
+            .loader {
+                margin-left: 47%;
+            }
+
+            div {
+                flex-direction: column-reverse;
+
+                .thumb-list {
+                    height: 120px;
+                    margin-top: 5px;
+                    flex-direction: row;
+                    overflow-x: scroll;
+                    margin-right: 0px;
+
+                    .thumb-frame {
+
+                        img {
+                            height: 100%;
+                            width: auto;
+                        }
+                    }
+
+                    .gallery-control {
+                        display: none;
+                    }
+                }
+
+                .product-hero-image{
+                    display: flex;
+
+                    img {
+                        margin-left: auto;
+                        margin-right: auto;
+                        width: 480px;
+                    }
+                }
+            }
+        }
+
+        .details {
+            width: 100%;
+            margin-top: 20px;
+        }
+    }
+}
+
+@media only screen and (max-width: 510px){
+
+    section.product-detail div.layouter form {
+
+        div.product-image-group {
+
+            .product-hero-image img {
+                width: 100% !important;
+            }
+        }
+    }
+}
+//product pages responsive css end here
+
 //rating and reviews of product pages
 .rating-reviews {
 
@@ -1670,7 +1782,6 @@ section.cart {
 
 // checkout responsive start here
 @media only screen and (max-width: 770px) {
-
     .checkout-process {
         .col-main {
             width: 100%;
@@ -1702,7 +1813,6 @@ section.cart {
             display: none;
         }
     }
-
 }
 // checkout responsive end here
 
@@ -1951,3 +2061,5 @@ section.review {
     }
 }
 // customer section css end here
+
+
diff --git a/packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php b/packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php
index 658134e85..08f45f744 100644
--- a/packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php
@@ -307,10 +307,27 @@
 
 </div>
 
+
+
 @push('scripts')
 
 <script>
 
+    document.onreadystatechange = function () {
+        var state = document.readyState
+        var galleryTemplate = document.getElementById('product-gallery-template');
+        var addTOButton = document.getElementsByClassName('add-to-buttons')[0];
+
+        if(galleryTemplate){
+            if (state == 'interactive') {
+                galleryTemplate.style.display="none";
+            } else  {
+                document.getElementById('loader').style.display="none";
+                addTOButton.style.display="flex";
+            }
+        }
+    }
+
     window.onload = function() {
 
         var hamMenu = document.getElementById("hammenu");
@@ -323,6 +340,18 @@
         var layerFilter = document.getElementsByClassName('responsive-layred-filter')[0];
         var navResponsive = document.getElementsByClassName('responsive-nav')[0];
 
+        var thumbList = document.getElementsByClassName('thumb-list')[0];
+        var thumbFrame = document.getElementsByClassName('thumb-frame');
+        var productHeroImage = document.getElementsByClassName('product-hero-image')[0];
+
+        // for product page resize image
+
+        if(thumbList && productHeroImage){
+            thumbList.style.maxHeight = productHeroImage.offsetHeight + "px";
+            for(let i=0 ; i < thumbFrame.length ; i++){
+                thumbFrame[i].style.height = (productHeroImage.offsetHeight/4) + "px";
+            }
+        }
 
         search.addEventListener("click", header);
         hamMenu.addEventListener("click", header);
@@ -336,13 +365,29 @@
             if(window.innerWidth > 720){
                 searchResponsive.style.display = 'none';
                 navResponsive.style.display = 'none';
-                layerFilter.style.display ="none";
-                sortLimit.style.display ="none";
+                if(layerFilter && sortLimit){
+                    layerFilter.style.display ="none";
+                    sortLimit.style.display ="none";
+                }
+            }
+            if(window.innerWidth < 1313 && window.innerWidth > 720){
+                if(thumbList){
+                    thumbList.style.maxHeight = productHeroImage.offsetHeight + "px";
+                    for(let i=0 ; i < thumbFrame.length ; i++){
+                        thumbFrame[i].style.height = (productHeroImage.offsetHeight/4) + "px";
+                    }
+                }
+            }else {
+                for(let i=0 ; i < thumbFrame.length ; i++){
+                    thumbFrame[i].style.height = 120 + "px";
+                }
             }
         });
 
-        function header(){
 
+        // for header responsive icon
+
+        function header(){
             var className = document.getElementById(this.id).className;
 
             if(className === 'icon search-icon' ){
@@ -369,6 +414,7 @@
             }
         }
 
+        // for category page responsive filter & sort
         function sortFilter(){
             var className = document.getElementById(this.id).className;
 
diff --git a/packages/Webkul/Shop/src/Resources/views/products/view.blade.php b/packages/Webkul/Shop/src/Resources/views/products/view.blade.php
index dcec1ea95..9fd492848 100644
--- a/packages/Webkul/Shop/src/Resources/views/products/view.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/view.blade.php
@@ -80,3 +80,4 @@
 
 @endsection
 
+
diff --git a/packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php b/packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php
index 40ecc4717..63ea3288d 100644
--- a/packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php
@@ -3,9 +3,17 @@
 
 <div class="product-image-group">
 
+    <div class="loader" id="loader">
+    </div>
+
     <product-gallery></product-gallery>
+
     @include ('shop::products.product-add')
+
 </div>
+
+
+
 @push('scripts')
 
     <script type="text/x-template" id="product-gallery-template">
@@ -37,7 +45,6 @@
                 @include('shop::products.wishlist')
             </div>
 
-
         </div>
     </script>
 
diff --git a/packages/Webkul/Shop/src/Resources/views/products/view/up-sells.blade.php b/packages/Webkul/Shop/src/Resources/views/products/view/up-sells.blade.php
index e9b561e75..64f4aaa14 100644
--- a/packages/Webkul/Shop/src/Resources/views/products/view/up-sells.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/view/up-sells.blade.php
@@ -7,7 +7,7 @@
         </div>
 
         <div class="product-grid max-4-col">
-                    
+
             @foreach ($product->up_sells()->paginate(4) as $up_sell_product)
 
                 @include ('shop::products.list.card', ['product' => $up_sell_product])
diff --git a/public/themes/default/assets/css/shop.css b/public/themes/default/assets/css/shop.css
index 09902897c..324a39819 100644
--- a/public/themes/default/assets/css/shop.css
+++ b/public/themes/default/assets/css/shop.css
@@ -1232,7 +1232,7 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
     display: inline-block;
     color: #242424;
     text-decoration: none;
-    padding: 0.8em 0.3em 0.8em 0.5em;
+    padding: 12px 4.8px 12px 8px;
     text-transform: uppercase;
     letter-spacing: 2px;
     position: relative;
@@ -1680,6 +1680,44 @@ section.product-detail div.layouter form {
 
 section.product-detail div.layouter form div.product-image-group {
   margin-right: 30px;
+  width: 604px;
+  height: 650px;
+  max-width: 604px;
+}
+
+section.product-detail div.layouter form div.product-image-group .loader {
+  border: 16px solid #f3f3f3;
+  border-top: 16px solid #3498db;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  -webkit-animation: spin 2s linear infinite;
+          animation: spin 2s linear infinite;
+  margin-left: 20%;
+  position: absolute;
+  margin-top: 200px;
+}
+
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
 }
 
 section.product-detail div.layouter form div.product-image-group div {
@@ -1701,20 +1739,20 @@ section.product-detail div.layouter form div.product-image-group div .thumb-list
       -ms-flex-direction: column;
           flex-direction: column;
   margin-right: 4px;
-  height: 480px;
   min-width: 120px;
   overflow: hidden;
   position: relative;
   -webkit-box-pack: start;
       -ms-flex-pack: start;
           justify-content: flex-start;
+  max-height: 480px;
 }
 
 section.product-detail div.layouter form div.product-image-group div .thumb-list .thumb-frame {
   border: 2px solid transparent;
   background: #F2F2F2;
   width: 120px;
-  height: 120px;
+  max-height: 120px;
 }
 
 section.product-detail div.layouter form div.product-image-group div .thumb-list .thumb-frame.active {
@@ -1762,11 +1800,12 @@ section.product-detail div.layouter form div.product-image-group div .product-he
   background: #F2F2F2;
   width: 100%;
   max-height: 480px;
+  height: 100%;
 }
 
 section.product-detail div.layouter form div.product-image-group div .product-hero-image img {
   width: 100%;
-  height: 480px;
+  height: auto;
   max-height: 480px;
 }
 
@@ -1795,30 +1834,33 @@ section.product-detail div.layouter form div.product-image-group div .product-he
 }
 
 section.product-detail div.layouter form div.product-image-group .add-to-buttons {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
+  display: none;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
   margin-top: 10px;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
 }
 
 section.product-detail div.layouter form div.product-image-group .add-to-buttons .addtocart {
   border-radius: 0px;
   width: 49%;
   background: black;
+  white-space: nowrap;
 }
 
 section.product-detail div.layouter form div.product-image-group .add-to-buttons .buynow {
   border-radius: 0px;
   width: 49%;
   float: right;
+  white-space: nowrap;
 }
 
 section.product-detail div.layouter form .details {
-  width: 47.5%;
+  width: 50%;
 }
 
 section.product-detail div.layouter form .details .product-price {
@@ -1888,6 +1930,66 @@ section.product-detail div.layouter form .details .attributes {
   border-bottom: solid 1px rgba(162, 162, 162, 0.2);
 }
 
+@media only screen and (max-width: 720px) {
+  section.product-detail div.layouter form {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+  section.product-detail div.layouter form div.product-image-group {
+    margin-right: 0px;
+    max-width: none;
+    width: auto;
+  }
+  section.product-detail div.layouter form div.product-image-group .loader {
+    margin-left: 47%;
+  }
+  section.product-detail div.layouter form div.product-image-group div {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: reverse;
+        -ms-flex-direction: column-reverse;
+            flex-direction: column-reverse;
+  }
+  section.product-detail div.layouter form div.product-image-group div .thumb-list {
+    height: 120px;
+    margin-top: 5px;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
+    overflow-x: scroll;
+    margin-right: 0px;
+  }
+  section.product-detail div.layouter form div.product-image-group div .thumb-list .thumb-frame img {
+    height: 100%;
+    width: auto;
+  }
+  section.product-detail div.layouter form div.product-image-group div .thumb-list .gallery-control {
+    display: none;
+  }
+  section.product-detail div.layouter form div.product-image-group div .product-hero-image {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+  section.product-detail div.layouter form div.product-image-group div .product-hero-image img {
+    margin-left: auto;
+    margin-right: auto;
+    width: 480px;
+  }
+  section.product-detail div.layouter form .details {
+    width: 100%;
+    margin-top: 20px;
+  }
+}
+
+@media only screen and (max-width: 510px) {
+  section.product-detail div.layouter form div.product-image-group .product-hero-image img {
+    width: 100% !important;
+  }
+}
+
 .rating-reviews .rating-header {
   font-weight: 600;
   padding: 20px 0;