diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
index 93e720a25..b18ddcd09 100644
--- a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
@@ -19,7 +19,6 @@ body {
     font-family: "Montserrat", sans-serif;
 }
 
-// header page responsive starts here
 .header {
     margin-top: 16px;
     margin-bottom: 21px;
@@ -298,6 +297,319 @@ body {
         }
     }
 }
+
+
+// header page responsive css start here
+
+@media all and (max-width: 480px) {
+
+    .header {
+        // border: 1px solid black;
+        margin-top: 16px;
+        margin-bottom: 21px;
+
+        .header-top {
+            margin-bottom: 16px;
+            display: flex;
+            // max-width: 92%;
+            width: 100%;
+            margin-left: auto;
+            margin-right: auto;
+            // border: 1px solid indigo;
+            align-items: center;
+            justify-content: space-between;
+
+            div.left-content {
+                display: flex;
+                flex-direction: row;
+                justify-content: flex-start;
+                align-items: center;
+
+                ul.logo-container {
+                    margin-right: 12px;
+
+                    li {
+                        display: flex;
+                    }
+                }
+
+                ul.search-container {
+                    li.search-group {
+                        display: none;
+                    }
+                }
+            }
+
+            div.right-content {
+                display: none;
+            }
+
+            .right-responsive {
+                display: inherit;
+            }
+        }
+
+        .search-suggestion {
+            display: none;
+
+            .search-content {
+                border-top: 1px solid #e8e8e8;
+                border-bottom: 1px solid #e8e8e8;
+                height: 48px;
+
+                .icon.search-icon {
+                    margin-left: 15px;
+                    margin-top: 12px;
+                }
+
+                span {
+                    font-size: 16px;
+                    color: #242424;
+                    margin-bottom: -7px;
+                    margin-left: 5px;
+                }
+
+                .right {
+                    float: right;
+                    margin-right: 15px;
+                }
+            }
+
+            .suggestion {
+                margin-top: 14px;
+                height: 32px;
+                margin-bottom: 14px;
+                border-bottom: 1px solid #e8e8e8;
+
+                span {
+                    font-size: 16px;
+                    color: #242424;
+                    margin-left: 48px;
+                }
+            }
+        }
+
+        .header-bottom {
+            height: 200px;
+            margin-left: auto;
+            margin-right: auto;
+            border-top: none;
+            border-bottom: none;
+            display: none;
+
+            ul.nav {
+                width: 100%;
+                height: 100px;
+            }
+
+            .nav > li {
+                float: none;
+                border-bottom: 1px solid #e8e8e8;
+
+                a {
+                    margin-left: 10px;
+                }
+
+                .dropdown-right-icon{
+                   float: right;
+                   margin-top: 5px;
+                   margin-right: 5px;
+                }
+            }
+
+            .nav > li:first-child {
+                border-top: 1px solid #e8e8e8;
+            }
+
+            .nav > li:last-child {
+                float:none;
+
+                span {
+                    font-size: 16px;
+                    color: #FF6472;
+                    letter-spacing: -0.38px;
+                }
+
+                img {
+                    margin-left: 20px;
+                }
+            }
+
+            /* submenu positioning*/
+
+            .nav ul {
+                position: absolute;
+                white-space: nowrap;
+                border: 1px solid #B1B1B1;
+                background-color:white;
+                z-index: 1;
+                left: -99999em;
+            }
+
+            .nav > li:hover > ul {
+                left: auto;
+                min-width: 100%;
+            }
+
+            .nav > li li:hover > ul {
+                left: 100%;
+                margin-left: 1px;
+                top: -1px;
+            }
+
+            .nav > li:hover > a:first-child:nth-last-child(2):before {
+                margin-top:-5px
+            }
+
+            .nav li li > a:first-child:nth-last-child(2):before {
+                margin-top: -5px
+            }
+
+            .nav li li:hover > a:first-child:nth-last-child(2):before {
+                right: 10px;
+            }
+        }
+    }
+
+}
+
+@media all and (min-width: 481px) and (max-width: 920px) {
+
+    .header {
+        // border: 1px solid black;
+        margin-top: 16px;
+        margin-bottom: 21px;
+
+        .header-top {
+            margin-bottom: 16px;
+            display: flex;
+            // max-width: 92%;
+            width: 100%;
+            margin-left: auto;
+            margin-right: auto;
+            // border: 1px solid indigo;
+            align-items: center;
+            justify-content: space-between;
+
+            div.left-content {
+                display: flex;
+                flex-direction: row;
+                justify-content: flex-start;
+                align-items: center;
+
+                ul.logo-container {
+                    margin-right: 12px;
+
+                    li {
+                        display: flex;
+                    }
+                }
+
+                ul.search-container {
+                    li.search-group {
+                        display: none;
+                    }
+                }
+            }
+
+            div.right-content {
+                display: none;
+            }
+
+            .right-responsive {
+                display: inherit;
+            }
+        }
+
+        .search-suggestion {
+            display: none;
+        }
+
+        .header-bottom {
+            height: 200px;
+            margin-left: auto;
+            margin-right: auto;
+            border-top: none;
+            border-bottom: none;
+            display: none;
+
+            ul.nav {
+                width: 100%;
+                height: 100px;
+            }
+
+            .nav > li {
+                float: none;
+                border-bottom: 1px solid #e8e8e8;
+
+                a {
+                    margin-left: 10px;
+                }
+
+                .dropdown-right-icon{
+                   float: right;
+                   margin-top: 5px;
+                   margin-right: 5px;
+                }
+            }
+
+            .nav > li:first-child {
+                border-top: 1px solid #e8e8e8;
+            }
+
+            .nav > li:last-child {
+                float:none;
+
+                span {
+                    font-size: 16px;
+                    color: #FF6472;
+                    letter-spacing: -0.38px;
+                }
+
+                img {
+                    margin-left: 20px;
+                }
+            }
+
+            /* submenu positioning*/
+
+            .nav ul {
+                position: absolute;
+                white-space: nowrap;
+                border: 1px solid #B1B1B1;
+                background-color:white;
+                z-index: 1;
+                left: -99999em;
+            }
+
+            .nav > li:hover > ul {
+                left: auto;
+                min-width: 100%;
+            }
+
+            .nav > li li:hover > ul {
+                left: 100%;
+                margin-left: 1px;
+                top: -1px;
+            }
+
+            .nav > li:hover > a:first-child:nth-last-child(2):before {
+                margin-top:-5px
+            }
+
+            .nav li li > a:first-child:nth-last-child(2):before {
+                margin-top: -5px
+            }
+
+            .nav li li:hover > a:first-child:nth-last-child(2):before {
+                right: 10px;
+            }
+        }
+    }
+
+}
+
+
 // header page responsive ends here
 
 section.slider-block {
@@ -455,6 +767,7 @@ section.slider-block {
     }
 }
 
+
 .main-container-wrapper {
     max-width: 80%;
     width: auto;
@@ -1997,6 +2310,25 @@ section.cart {
     }
 }
 
+@media all and (max-width: 480px){
+
+    .attached-products-wrapper {
+
+        .title {
+
+            .border-bottom {
+                border-bottom: 1px solid rgba(162, 162, 162, 0.2);
+                display: inline-block;
+                width: 100%;
+                position: initial;
+                top: 40px;
+                left: 0%;
+                margin-left: 0px;
+            }
+        }
+    }
+}
+
 @media all and (min-width: 481px) and (max-width: 920px) {
 
     .attached-products-wrapper {
@@ -2004,8 +2336,11 @@ section.cart {
         .title {
 
             .border-bottom {
+                border-bottom: 1px solid rgba(162, 162, 162, 0.2);
+                display: inline-block;
                 width: 100%;
                 position: initial;
+                top: 40px;
                 left: 0%;
                 margin-left: 0px;
             }
@@ -2015,6 +2350,7 @@ section.cart {
 
 
 // order page css start here
+
 .order {
     margin-left: 5.5%;
     margin-top: 1%;
@@ -3034,8 +3370,171 @@ section.cart {
         }
     }
 }
+
 // checkout ends here
 
+// responsive checkout start here
+
+@media all and (max-width: 480px) {
+    .checkout-process{
+        width: 100%;
+        margin-top: 3%;
+
+        .left-side {
+            width: 100%;
+            margin-right: 0%;
+            height: 60px;
+
+            .checkout-menu {
+                width: 100%;
+
+                ul.checkout-detail {
+                    height: 60px;
+                    width: 100%;
+                    padding: 5px;
+
+                    li {
+                        height: 48px;
+
+                        .wrapper {
+                            display: flex;
+
+                            span {
+                               display: none;
+                            }
+                        }
+                    }
+
+                    .line {
+                        margin-top: 23px;
+                        width: 100%;
+                        margin-left: 5px;
+                        margin-right: 5px;
+                        border: 1px solid #E7E7E7;
+                        height: 1px;
+                    }
+                }
+
+                .horizontal-rule {
+                   display: none;
+                }
+            }
+        }
+
+        .right-side {
+            display: none;
+        }
+    }
+
+    .order-info{
+        width: 100%;
+        margin-right: 0%;
+        margin-top: 10px;
+        height:50px;
+
+        .control-group {
+
+            .control{
+                width:100%;
+            }
+        }
+
+        .different-billing-addr {
+            margin-top: 5%;
+        }
+
+        .horizontal-rule {
+            margin-top: 10%;
+        }
+
+        .countinue-button {
+            margin-top: 8%;
+        }
+    }
+}
+
+@media all and (min-width: 481px) and (max-width: 920px) {
+
+    .checkout-process{
+        width: 100%;
+        margin-top:3%;
+
+        .left-side {
+            width: 100%;
+            margin-right: 0%;
+            height: 60px;
+
+            .checkout-menu {
+                width: 100%;
+
+                ul.checkout-detail {
+                    height: 60px;
+                    width: 100%;
+                    padding: 5px;
+
+                    li {
+                        height: 48px;
+
+                        .wrapper {
+                            display:flex;
+
+                            span {
+                               display: none;
+                            }
+
+                        }
+                    }
+
+                    .line {
+                        margin-top: 23px;
+                        width: 100%;
+                        margin-left: 10px;
+                        margin-right: 10px;
+                        border: 1px solid #E7E7E7;
+                        height: 1px;
+                    }
+                }
+
+                .horizontal-rule {
+                   display: none;
+                }
+            }
+        }
+
+        .right-side {
+            display:none;
+        }
+    }
+
+    .order-info{
+        width: 100%;
+        margin-right: 0%;
+        margin-top: 10px;
+        height:50px;
+
+        .control-group {
+
+            .control{
+                width:100%;
+            }
+        }
+
+        .different-billing-addr {
+            margin-top: 3%;
+        }
+
+        .horizontal-rule {
+            margin-top: 10%;
+        }
+
+        .countinue-button {
+            margin-top: 5%;
+        }
+    }
+}
+// responsive checkout end here
+
+
 
 //shipment start here
 .ship-method {
diff --git a/public/themes/default/assets/css/shop.css b/public/themes/default/assets/css/shop.css
index eeea62207..660585c3c 100644
--- a/public/themes/default/assets/css/shop.css
+++ b/public/themes/default/assets/css/shop.css
@@ -406,6 +406,280 @@ body {
   right: 10px;
 }
 
+@media all and (max-width: 480px) {
+  .header {
+    margin-top: 16px;
+    margin-bottom: 21px;
+  }
+  .header .header-top {
+    margin-bottom: 16px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+  }
+  .header .header-top div.left-content {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
+    -webkit-box-pack: start;
+        -ms-flex-pack: start;
+            justify-content: flex-start;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+  }
+  .header .header-top div.left-content ul.logo-container {
+    margin-right: 12px;
+  }
+  .header .header-top div.left-content ul.logo-container li {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+  .header .header-top div.left-content ul.search-container li.search-group {
+    display: none;
+  }
+  .header .header-top div.right-content {
+    display: none;
+  }
+  .header .header-top .right-responsive {
+    display: inherit;
+  }
+  .header .search-suggestion {
+    display: none;
+  }
+  .header .search-suggestion .search-content {
+    border-top: 1px solid #e8e8e8;
+    border-bottom: 1px solid #e8e8e8;
+    height: 48px;
+  }
+  .header .search-suggestion .search-content .icon.search-icon {
+    margin-left: 15px;
+    margin-top: 12px;
+  }
+  .header .search-suggestion .search-content span {
+    font-size: 16px;
+    color: #242424;
+    margin-bottom: -7px;
+    margin-left: 5px;
+  }
+  .header .search-suggestion .search-content .right {
+    float: right;
+    margin-right: 15px;
+  }
+  .header .search-suggestion .suggestion {
+    margin-top: 14px;
+    height: 32px;
+    margin-bottom: 14px;
+    border-bottom: 1px solid #e8e8e8;
+  }
+  .header .search-suggestion .suggestion span {
+    font-size: 16px;
+    color: #242424;
+    margin-left: 48px;
+  }
+  .header .header-bottom {
+    height: 200px;
+    margin-left: auto;
+    margin-right: auto;
+    border-top: none;
+    border-bottom: none;
+    display: none;
+    /* submenu positioning*/
+  }
+  .header .header-bottom ul.nav {
+    width: 100%;
+    height: 100px;
+  }
+  .header .header-bottom .nav > li {
+    float: none;
+    border-bottom: 1px solid #e8e8e8;
+  }
+  .header .header-bottom .nav > li a {
+    margin-left: 10px;
+  }
+  .header .header-bottom .nav > li .dropdown-right-icon {
+    float: right;
+    margin-top: 5px;
+    margin-right: 5px;
+  }
+  .header .header-bottom .nav > li:first-child {
+    border-top: 1px solid #e8e8e8;
+  }
+  .header .header-bottom .nav > li:last-child {
+    float: none;
+  }
+  .header .header-bottom .nav > li:last-child span {
+    font-size: 16px;
+    color: #FF6472;
+    letter-spacing: -0.38px;
+  }
+  .header .header-bottom .nav > li:last-child img {
+    margin-left: 20px;
+  }
+  .header .header-bottom .nav ul {
+    position: absolute;
+    white-space: nowrap;
+    border: 1px solid #B1B1B1;
+    background-color: white;
+    z-index: 1;
+    left: -99999em;
+  }
+  .header .header-bottom .nav > li:hover > ul {
+    left: auto;
+    min-width: 100%;
+  }
+  .header .header-bottom .nav > li li:hover > ul {
+    left: 100%;
+    margin-left: 1px;
+    top: -1px;
+  }
+  .header .header-bottom .nav > li:hover > a:first-child:nth-last-child(2):before {
+    margin-top: -5px;
+  }
+  .header .header-bottom .nav li li > a:first-child:nth-last-child(2):before {
+    margin-top: -5px;
+  }
+  .header .header-bottom .nav li li:hover > a:first-child:nth-last-child(2):before {
+    right: 10px;
+  }
+}
+
+@media all and (min-width: 481px) and (max-width: 920px) {
+  .header {
+    margin-top: 16px;
+    margin-bottom: 21px;
+  }
+  .header .header-top {
+    margin-bottom: 16px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+  }
+  .header .header-top div.left-content {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
+    -webkit-box-pack: start;
+        -ms-flex-pack: start;
+            justify-content: flex-start;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+  }
+  .header .header-top div.left-content ul.logo-container {
+    margin-right: 12px;
+  }
+  .header .header-top div.left-content ul.logo-container li {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+  .header .header-top div.left-content ul.search-container li.search-group {
+    display: none;
+  }
+  .header .header-top div.right-content {
+    display: none;
+  }
+  .header .header-top .right-responsive {
+    display: inherit;
+  }
+  .header .search-suggestion {
+    display: none;
+  }
+  .header .header-bottom {
+    height: 200px;
+    margin-left: auto;
+    margin-right: auto;
+    border-top: none;
+    border-bottom: none;
+    display: none;
+    /* submenu positioning*/
+  }
+  .header .header-bottom ul.nav {
+    width: 100%;
+    height: 100px;
+  }
+  .header .header-bottom .nav > li {
+    float: none;
+    border-bottom: 1px solid #e8e8e8;
+  }
+  .header .header-bottom .nav > li a {
+    margin-left: 10px;
+  }
+  .header .header-bottom .nav > li .dropdown-right-icon {
+    float: right;
+    margin-top: 5px;
+    margin-right: 5px;
+  }
+  .header .header-bottom .nav > li:first-child {
+    border-top: 1px solid #e8e8e8;
+  }
+  .header .header-bottom .nav > li:last-child {
+    float: none;
+  }
+  .header .header-bottom .nav > li:last-child span {
+    font-size: 16px;
+    color: #FF6472;
+    letter-spacing: -0.38px;
+  }
+  .header .header-bottom .nav > li:last-child img {
+    margin-left: 20px;
+  }
+  .header .header-bottom .nav ul {
+    position: absolute;
+    white-space: nowrap;
+    border: 1px solid #B1B1B1;
+    background-color: white;
+    z-index: 1;
+    left: -99999em;
+  }
+  .header .header-bottom .nav > li:hover > ul {
+    left: auto;
+    min-width: 100%;
+  }
+  .header .header-bottom .nav > li li:hover > ul {
+    left: 100%;
+    margin-left: 1px;
+    top: -1px;
+  }
+  .header .header-bottom .nav > li:hover > a:first-child:nth-last-child(2):before {
+    margin-top: -5px;
+  }
+  .header .header-bottom .nav li li > a:first-child:nth-last-child(2):before {
+    margin-top: -5px;
+  }
+  .header .header-bottom .nav li li:hover > a:first-child:nth-last-child(2):before {
+    right: 10px;
+  }
+}
+
 section.slider-block {
   display: block;
   margin-left: auto;
@@ -1967,10 +2241,25 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
   margin-right: auto;
 }
 
-@media all and (min-width: 481px) and (max-width: 920px) {
+@media all and (max-width: 480px) {
   .attached-products-wrapper .title .border-bottom {
+    border-bottom: 1px solid rgba(162, 162, 162, 0.2);
+    display: inline-block;
     width: 100%;
     position: initial;
+    top: 40px;
+    left: 0%;
+    margin-left: 0px;
+  }
+}
+
+@media all and (min-width: 481px) and (max-width: 920px) {
+  .attached-products-wrapper .title .border-bottom {
+    border-bottom: 1px solid rgba(162, 162, 162, 0.2);
+    display: inline-block;
+    width: 100%;
+    position: initial;
+    top: 40px;
     left: 0%;
     margin-left: 0px;
   }
@@ -2893,6 +3182,132 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
   color: #242424;
 }
 
+@media all and (max-width: 480px) {
+  .checkout-process {
+    width: 100%;
+    margin-top: 3%;
+  }
+  .checkout-process .left-side {
+    width: 100%;
+    margin-right: 0%;
+    height: 60px;
+  }
+  .checkout-process .left-side .checkout-menu {
+    width: 100%;
+  }
+  .checkout-process .left-side .checkout-menu ul.checkout-detail {
+    height: 60px;
+    width: 100%;
+    padding: 5px;
+  }
+  .checkout-process .left-side .checkout-menu ul.checkout-detail li {
+    height: 48px;
+  }
+  .checkout-process .left-side .checkout-menu ul.checkout-detail li .wrapper {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+  .checkout-process .left-side .checkout-menu ul.checkout-detail li .wrapper span {
+    display: none;
+  }
+  .checkout-process .left-side .checkout-menu ul.checkout-detail .line {
+    margin-top: 23px;
+    width: 100%;
+    margin-left: 5px;
+    margin-right: 5px;
+    border: 1px solid #E7E7E7;
+    height: 1px;
+  }
+  .checkout-process .left-side .checkout-menu .horizontal-rule {
+    display: none;
+  }
+  .checkout-process .right-side {
+    display: none;
+  }
+  .order-info {
+    width: 100%;
+    margin-right: 0%;
+    margin-top: 10px;
+    height: 50px;
+  }
+  .order-info .control-group .control {
+    width: 100%;
+  }
+  .order-info .different-billing-addr {
+    margin-top: 5%;
+  }
+  .order-info .horizontal-rule {
+    margin-top: 10%;
+  }
+  .order-info .countinue-button {
+    margin-top: 8%;
+  }
+}
+
+@media all and (min-width: 481px) and (max-width: 920px) {
+  .checkout-process {
+    width: 100%;
+    margin-top: 3%;
+  }
+  .checkout-process .left-side {
+    width: 100%;
+    margin-right: 0%;
+    height: 60px;
+  }
+  .checkout-process .left-side .checkout-menu {
+    width: 100%;
+  }
+  .checkout-process .left-side .checkout-menu ul.checkout-detail {
+    height: 60px;
+    width: 100%;
+    padding: 5px;
+  }
+  .checkout-process .left-side .checkout-menu ul.checkout-detail li {
+    height: 48px;
+  }
+  .checkout-process .left-side .checkout-menu ul.checkout-detail li .wrapper {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+  .checkout-process .left-side .checkout-menu ul.checkout-detail li .wrapper span {
+    display: none;
+  }
+  .checkout-process .left-side .checkout-menu ul.checkout-detail .line {
+    margin-top: 23px;
+    width: 100%;
+    margin-left: 10px;
+    margin-right: 10px;
+    border: 1px solid #E7E7E7;
+    height: 1px;
+  }
+  .checkout-process .left-side .checkout-menu .horizontal-rule {
+    display: none;
+  }
+  .checkout-process .right-side {
+    display: none;
+  }
+  .order-info {
+    width: 100%;
+    margin-right: 0%;
+    margin-top: 10px;
+    height: 50px;
+  }
+  .order-info .control-group .control {
+    width: 100%;
+  }
+  .order-info .different-billing-addr {
+    margin-top: 3%;
+  }
+  .order-info .horizontal-rule {
+    margin-top: 10%;
+  }
+  .order-info .countinue-button {
+    margin-top: 5%;
+  }
+}
+
 .ship-method {
   width: 67%;
   margin-right: 6%;