diff --git a/packages/Webkul/Velocity/publishable/assets/css/velocity.css b/packages/Webkul/Velocity/publishable/assets/css/velocity.css
index eec2a1e9c..3c72f8b51 100644
--- a/packages/Webkul/Velocity/publishable/assets/css/velocity.css
+++ b/packages/Webkul/Velocity/publishable/assets/css/velocity.css
@@ -813,6 +813,16 @@
 
 .review-page-container {
   padding: 20px;
+  position: relative;
+}
+
+.review-page-container > div:first-child {
+  top: 40px;
+  position: -webkit-sticky;
+  position: sticky;
+  height: -webkit-max-content;
+  height: -moz-max-content;
+  height: max-content;
 }
 
 .review-page-container .category-breadcrumb {
@@ -908,28 +918,28 @@
   margin: 20px 0;
 }
 
-.filters-container > div {
+.filters-container .toolbar-wrapper > div {
   margin: 0 20px 0 0;
   display: inline-block;
 }
 
-.filters-container > div label {
+.filters-container .toolbar-wrapper > div label {
   font-weight: 500;
   margin-right: 10px;
 }
 
-.filters-container > div select {
+.filters-container .toolbar-wrapper > div select {
   cursor: pointer;
   padding: 6px 16px;
   color: rgba(0, 0, 0, 0.83);
   background-color: white;
 }
 
-.filters-container > div:not(:first-child) {
+.filters-container .toolbar-wrapper > div:not(:first-child) {
   vertical-align: super;
 }
 
-.filters-container .limiter::after {
+.filters-container .toolbar-wrapper .limiter::after {
   margin-left: 10px;
   content: 'per page';
 }
@@ -2468,7 +2478,9 @@
 }
 
 .vc-header {
-  z-index: 99;
+  z-index: 10;
+  margin: 0 !important;
+  padding: 0 !important;
   -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.23);
           box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.23);
 }
@@ -3086,7 +3098,7 @@ body::after {
   max-width: 1300px !important;
 }
 
-.remove-padding-margin {
+.remove-padding-margin, .category-page-wrapper {
   width: 100% !important;
   margin: 0px !important;
   padding: 0px !important;
@@ -4249,7 +4261,7 @@ button[disabled] {
 
 .product-detail .thumb-list {
   left: 15px;
-  z-index: 1000;
+  z-index: 99;
   padding: 0px;
   margin-top: 10px;
   position: relative;
@@ -4429,16 +4441,13 @@ button[disabled] {
     display: block !important;
   }
   .main-content-wrapper {
-    position: relative;
+    z-index: 100;
+    margin-bottom: 25px;
+    background-color: #FFFFFF;
   }
   .main-content-wrapper .vc-header {
-    top: 0;
     margin: 0;
     padding: 0;
-    z-index: 100;
-    position: -webkit-sticky;
-    position: sticky;
-    background-color: #FFFFFF;
     -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
             box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
   }
@@ -4463,13 +4472,13 @@ button[disabled] {
     position: relative;
   }
   .main-content-wrapper .vc-header > div.vc-small-screen .right-vc-header {
+    display: table;
     text-align: right;
     height: 50px;
   }
   .main-content-wrapper .vc-header > div.vc-small-screen .right-vc-header > a {
-    width: 24px;
-    margin-top: 13px;
-    margin-right: 10px;
+    display: table-cell;
+    vertical-align: middle;
   }
   #top {
     display: none;
@@ -4527,9 +4536,6 @@ button[disabled] {
   .popular-categories-container .popular-category-wrapper .card .category-image {
     height: 100%;
   }
-  .main-content-wrapper {
-    margin-bottom: 25px;
-  }
   .slides-container .VueCarousel .VueCarousel-pagination button {
     width: 5px !important;
     height: 5px !important;
@@ -4585,7 +4591,14 @@ button[disabled] {
   .product-detail .customer-rating > .row > div {
     margin-bottom: 30px;
   }
+  .review-page-container > div {
+    padding: 0;
+  }
   .review-page-container > div:not(:last-child) {
+    position: relative;
+    margin-bottom: 60px;
+  }
+  .customer-rating > .row > div:not(:last-child) {
     margin-bottom: 20px;
   }
   .nav-container {
@@ -4657,9 +4670,50 @@ button[disabled] {
     float: right;
     padding-right: 15px;
   }
+  .nav-container .wrapper ul li .nested-category {
+    border-top: unset;
+  }
+  .nav-container .wrapper ul li .nested-category li:last-child {
+    padding-bottom: 0;
+  }
   .nav-container .drawer-section {
     padding: 15px;
   }
+  .auth-content > .container {
+    margin: 0;
+    width: 100%;
+  }
+  .category-page-wrapper .layered-filter-wrapper {
+    display: none;
+  }
+  .category-page-wrapper .category-container {
+    margin: 0;
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+  }
+  .category-page-wrapper .category-container > div {
+    padding: 0 10px;
+  }
+  .category-page-wrapper .category-container .filters-container {
+    padding: 0;
+  }
+  .category-page-wrapper .category-container .filters-container .toolbar-wrapper > div.col-4 {
+    margin: 0;
+    padding: 0;
+    display: table;
+    text-align: center;
+  }
+  .category-page-wrapper .category-container .filters-container .toolbar-wrapper > div.col-4 i {
+    left: 20px;
+    position: relative;
+  }
+  .category-page-wrapper .category-container .filters-container .toolbar-wrapper > div.col-4 * {
+    display: table-cell;
+    vertical-align: middle;
+  }
+  .category-page-wrapper .category-container .filters-container .toolbar-wrapper > div.col-4:nth-of-type(2) i {
+    left: 15px;
+  }
 }
 
 /* fallback */
diff --git a/packages/Webkul/Velocity/publishable/assets/js/velocity.js b/packages/Webkul/Velocity/publishable/assets/js/velocity.js
index f4a8a0078..0e5095a95 100644
--- a/packages/Webkul/Velocity/publishable/assets/js/velocity.js
+++ b/packages/Webkul/Velocity/publishable/assets/js/velocity.js
@@ -1069,8 +1069,8 @@ module.exports = Cancel;
 /***/ (function(module, exports, __webpack_require__) {
 
 __webpack_require__(12);
-__webpack_require__(69);
-module.exports = __webpack_require__(70);
+__webpack_require__(72);
+module.exports = __webpack_require__(73);
 
 
 /***/ }),
@@ -1111,12 +1111,12 @@ __WEBPACK_IMPORTED_MODULE_0_vue___default.a.component("vue-slider", __webpack_re
 __WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('modal-component', __webpack_require__(45));
 __WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('quantity-btn', __webpack_require__(48));
 __WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('sidebar-component', __webpack_require__(51));
-__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component("wishlist-component", __webpack_require__(73));
-__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('carousel-component', __webpack_require__(54));
-__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('child-sidebar', __webpack_require__(57));
-__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('card-list-content', __webpack_require__(60));
-__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('card-list-header', __webpack_require__(63));
-__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('magnify-image', __webpack_require__(66));
+__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component("wishlist-component", __webpack_require__(54));
+__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('carousel-component', __webpack_require__(57));
+__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('child-sidebar', __webpack_require__(60));
+__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('card-list-content', __webpack_require__(63));
+__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('card-list-header', __webpack_require__(66));
+__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('magnify-image', __webpack_require__(69));
 
 window.eventBus = new __WEBPACK_IMPORTED_MODULE_0_vue___default.a();
 
@@ -35783,6 +35783,121 @@ var Component = normalizeComponent(
   __vue_scopeId__,
   __vue_module_identifier__
 )
+Component.options.__file = "src/Resources/assets/js/UI/components/wishlist.vue"
+
+/* hot reload */
+if (false) {(function () {
+  var hotAPI = require("vue-hot-reload-api")
+  hotAPI.install(require("vue"), false)
+  if (!hotAPI.compatible) return
+  module.hot.accept()
+  if (!module.hot.data) {
+    hotAPI.createRecord("data-v-ac965700", Component.options)
+  } else {
+    hotAPI.reload("data-v-ac965700", Component.options)
+  }
+  module.hot.dispose(function (data) {
+    disposed = true
+  })
+})()}
+
+module.exports = Component.exports
+
+
+/***/ }),
+/* 55 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+/* harmony default export */ __webpack_exports__["default"] = ({
+    props: ['active'],
+    data: function data() {
+        return {
+            isActive: this.active
+        };
+    }
+});
+
+/***/ }),
+/* 56 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var render = function() {
+  var _vm = this
+  var _h = _vm.$createElement
+  var _c = _vm._self._c || _h
+  return _c(
+    "i",
+    {
+      class: "material-icons",
+      on: {
+        mouseover: function($event) {
+          _vm.isActive ? (_vm.isActive = !_vm.isActive) : ""
+        },
+        mouseout: function($event) {
+          _vm.active !== "" && !_vm.isActive
+            ? (_vm.isActive = !_vm.isActive)
+            : ""
+        }
+      }
+    },
+    [
+      _vm._v(
+        "\n\n    " +
+          _vm._s(_vm.isActive ? "favorite_border" : "favorite") +
+          "\n"
+      )
+    ]
+  )
+}
+var staticRenderFns = []
+render._withStripped = true
+module.exports = { render: render, staticRenderFns: staticRenderFns }
+if (false) {
+  module.hot.accept()
+  if (module.hot.data) {
+    require("vue-hot-reload-api")      .rerender("data-v-ac965700", module.exports)
+  }
+}
+
+/***/ }),
+/* 57 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var disposed = false
+var normalizeComponent = __webpack_require__(1)
+/* script */
+var __vue_script__ = __webpack_require__(58)
+/* template */
+var __vue_template__ = __webpack_require__(59)
+/* template functional */
+var __vue_template_functional__ = false
+/* styles */
+var __vue_styles__ = null
+/* scopeId */
+var __vue_scopeId__ = null
+/* moduleIdentifier (server only) */
+var __vue_module_identifier__ = null
+var Component = normalizeComponent(
+  __vue_script__,
+  __vue_template__,
+  __vue_template_functional__,
+  __vue_styles__,
+  __vue_scopeId__,
+  __vue_module_identifier__
+)
 Component.options.__file = "src/Resources/assets/js/UI/components/carousel.vue"
 
 /* hot reload */
@@ -35805,7 +35920,7 @@ module.exports = Component.exports
 
 
 /***/ }),
-/* 55 */
+/* 58 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -35847,7 +35962,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 });
 
 /***/ }),
-/* 56 */
+/* 59 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var render = function() {
@@ -35890,15 +36005,15 @@ if (false) {
 }
 
 /***/ }),
-/* 57 */
+/* 60 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var disposed = false
 var normalizeComponent = __webpack_require__(1)
 /* script */
-var __vue_script__ = __webpack_require__(58)
+var __vue_script__ = __webpack_require__(61)
 /* template */
-var __vue_template__ = __webpack_require__(59)
+var __vue_template__ = __webpack_require__(62)
 /* template functional */
 var __vue_template_functional__ = false
 /* styles */
@@ -35937,7 +36052,7 @@ module.exports = Component.exports
 
 
 /***/ }),
-/* 58 */
+/* 61 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -35967,7 +36082,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 });
 
 /***/ }),
-/* 59 */
+/* 62 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var render = function() {
@@ -36013,15 +36128,15 @@ if (false) {
 }
 
 /***/ }),
-/* 60 */
+/* 63 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var disposed = false
 var normalizeComponent = __webpack_require__(1)
 /* script */
-var __vue_script__ = __webpack_require__(61)
+var __vue_script__ = __webpack_require__(64)
 /* template */
-var __vue_template__ = __webpack_require__(62)
+var __vue_template__ = __webpack_require__(65)
 /* template functional */
 var __vue_template_functional__ = false
 /* styles */
@@ -36060,7 +36175,7 @@ module.exports = Component.exports
 
 
 /***/ }),
-/* 61 */
+/* 64 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -36182,7 +36297,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 });
 
 /***/ }),
-/* 62 */
+/* 65 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var render = function() {
@@ -36371,15 +36486,15 @@ if (false) {
 }
 
 /***/ }),
-/* 63 */
+/* 66 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var disposed = false
 var normalizeComponent = __webpack_require__(1)
 /* script */
-var __vue_script__ = __webpack_require__(64)
+var __vue_script__ = __webpack_require__(67)
 /* template */
-var __vue_template__ = __webpack_require__(65)
+var __vue_template__ = __webpack_require__(68)
 /* template functional */
 var __vue_template_functional__ = false
 /* styles */
@@ -36418,7 +36533,7 @@ module.exports = Component.exports
 
 
 /***/ }),
-/* 64 */
+/* 67 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -36523,7 +36638,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 });
 
 /***/ }),
-/* 65 */
+/* 68 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var render = function() {
@@ -36640,15 +36755,15 @@ if (false) {
 }
 
 /***/ }),
-/* 66 */
+/* 69 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var disposed = false
 var normalizeComponent = __webpack_require__(1)
 /* script */
-var __vue_script__ = __webpack_require__(67)
+var __vue_script__ = __webpack_require__(70)
 /* template */
-var __vue_template__ = __webpack_require__(68)
+var __vue_template__ = __webpack_require__(71)
 /* template functional */
 var __vue_template_functional__ = false
 /* styles */
@@ -36687,7 +36802,7 @@ module.exports = Component.exports
 
 
 /***/ }),
-/* 67 */
+/* 70 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -36752,7 +36867,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 });
 
 /***/ }),
-/* 68 */
+/* 71 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var render = function() {
@@ -36782,133 +36897,16 @@ if (false) {
 }
 
 /***/ }),
-/* 69 */
+/* 72 */
 /***/ (function(module, exports) {
 
 // removed by extract-text-webpack-plugin
 
 /***/ }),
-/* 70 */
-/***/ (function(module, exports) {
-
-// removed by extract-text-webpack-plugin
-
-/***/ }),
-/* 71 */,
-/* 72 */,
 /* 73 */
-/***/ (function(module, exports, __webpack_require__) {
+/***/ (function(module, exports) {
 
-var disposed = false
-var normalizeComponent = __webpack_require__(1)
-/* script */
-var __vue_script__ = __webpack_require__(74)
-/* template */
-var __vue_template__ = __webpack_require__(75)
-/* template functional */
-var __vue_template_functional__ = false
-/* styles */
-var __vue_styles__ = null
-/* scopeId */
-var __vue_scopeId__ = null
-/* moduleIdentifier (server only) */
-var __vue_module_identifier__ = null
-var Component = normalizeComponent(
-  __vue_script__,
-  __vue_template__,
-  __vue_template_functional__,
-  __vue_styles__,
-  __vue_scopeId__,
-  __vue_module_identifier__
-)
-Component.options.__file = "src/Resources/assets/js/UI/components/wishlist.vue"
-
-/* hot reload */
-if (false) {(function () {
-  var hotAPI = require("vue-hot-reload-api")
-  hotAPI.install(require("vue"), false)
-  if (!hotAPI.compatible) return
-  module.hot.accept()
-  if (!module.hot.data) {
-    hotAPI.createRecord("data-v-ac965700", Component.options)
-  } else {
-    hotAPI.reload("data-v-ac965700", Component.options)
-  }
-  module.hot.dispose(function (data) {
-    disposed = true
-  })
-})()}
-
-module.exports = Component.exports
-
-
-/***/ }),
-/* 74 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-
-/* harmony default export */ __webpack_exports__["default"] = ({
-    props: ['active'],
-    data: function data() {
-        return {
-            isActive: this.active
-        };
-    }
-});
-
-/***/ }),
-/* 75 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var render = function() {
-  var _vm = this
-  var _h = _vm.$createElement
-  var _c = _vm._self._c || _h
-  return _c(
-    "i",
-    {
-      class: "material-icons",
-      on: {
-        mouseover: function($event) {
-          _vm.isActive ? (_vm.isActive = !_vm.isActive) : ""
-        },
-        mouseout: function($event) {
-          _vm.active !== "" && !_vm.isActive
-            ? (_vm.isActive = !_vm.isActive)
-            : ""
-        }
-      }
-    },
-    [
-      _vm._v(
-        "\n\n    " +
-          _vm._s(_vm.isActive ? "favorite_border" : "favorite") +
-          "\n"
-      )
-    ]
-  )
-}
-var staticRenderFns = []
-render._withStripped = true
-module.exports = { render: render, staticRenderFns: staticRenderFns }
-if (false) {
-  module.hot.accept()
-  if (module.hot.data) {
-    require("vue-hot-reload-api")      .rerender("data-v-ac965700", module.exports)
-  }
-}
+// removed by extract-text-webpack-plugin
 
 /***/ })
 /******/ ]);
\ No newline at end of file
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss
index e646072bc..0c4414d3f 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss
@@ -1,5 +1,12 @@
 .review-page-container {
     padding: 20px;
+    position: relative;
+
+    > div:first-child {
+        top: 40px;
+        position: sticky;
+        height: max-content;
+    }
 
     .category-breadcrumb {
         margin-bottom: 30px;
@@ -102,30 +109,32 @@
 .filters-container {
     margin: 20px 0;
 
-    > div {
-        margin: 0 20px 0 0;
-        display: inline-block;
+    .toolbar-wrapper {
+        > div {
+            margin: 0 20px 0 0;
+            display: inline-block;
 
-        label {
-            font-weight: 500;
-            margin-right: 10px;
+            label {
+                font-weight: 500;
+                margin-right: 10px;
+            }
+
+            select {
+                cursor: pointer;
+                padding: 6px 16px;
+                color: $font-color;
+                background-color: white;
+            }
         }
 
-        select {
-            cursor: pointer;
-            padding: 6px 16px;
-            color: $font-color;
-            background-color: white;
+        > div:not(:first-child) {
+            vertical-align: super;
         }
-    }
 
-    > div:not(:first-child) {
-        vertical-align: super;
-    }
-
-    .limiter::after {
-        margin-left: 10px;
-        content: 'per page';
+        .limiter::after {
+            margin-left: 10px;
+            content: 'per page';
+        }
     }
 }
 
@@ -1814,7 +1823,9 @@
 }
 
 .vc-header {
-    z-index: 99;
+    z-index: 10;
+    margin: 0 !important;
+    padding: 0 !important;
     box-shadow: 0 1px 3px rgba(0,0,0,0.16), 0 1px 3px rgba(0,0,0,0.23);
 }
 
@@ -1826,3 +1837,7 @@
 .recetly-viewed-products-wrapper {
     padding: 2px;
 }
+
+.category-page-wrapper {
+    @extend .remove-padding-margin;
+}
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/components/media.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/components/media.scss
index a835be7ad..08aff583c 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/media.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/media.scss
@@ -52,20 +52,24 @@
 @media only screen and (max-width: 992px) {
     $header-height: 50px;
 
+    .main-container-wrapper {
+        // position: relative;
+    }
+
     .vc-small-screen {
         display: block !important;
     }
 
     .main-content-wrapper {
-        position: relative;
+        // top: 0;
+        z-index: 100;
+        margin-bottom: 25px;
+        // position: sticky !important;
+        background-color: $white-color;
 
         .vc-header {
-            top: 0;
             margin: 0;
             padding: 0;
-            z-index: 100;
-            position: sticky;
-            background-color: $white-color;
             box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
 
             > div {
@@ -93,13 +97,13 @@
                 }
 
                 .right-vc-header {
+                    display: table;
                     text-align: right;
                     height: $header-height;
 
                     > a {
-                        width: 24px;
-                        margin-top: 13px;
-                        margin-right: 10px;
+                        display: table-cell;
+                        vertical-align: middle;
                     }
                 }
             }
@@ -204,10 +208,6 @@
         }
     }
 
-    .main-content-wrapper {
-        margin-bottom: 25px;
-    }
-
     .slides-container {
         .VueCarousel {
             .VueCarousel-pagination {
@@ -306,8 +306,21 @@
     }
 
     .review-page-container {
+        > div {
+            padding: 0;
+        }
+
         > div:not(:last-child) {
-            margin-bottom: 20px;
+            position: relative;
+            margin-bottom: 60px;
+        }
+    }
+
+    .customer-rating {
+        > .row {
+            > div:not(:last-child) {
+                margin-bottom: 20px;
+            }
         }
     }
 
@@ -389,6 +402,14 @@
                         float: right;
                         padding-right: 15px;
                     }
+
+                    .nested-category {
+                        border-top: unset;
+
+                        li:last-child {
+                            padding-bottom: 0;
+                        }
+                    }
                 }
             }
         }
@@ -397,4 +418,56 @@
             padding: 15px;
         }
     }
+
+    .auth-content {
+        > .container {
+            margin: 0;
+            width: 100%;
+        }
+    }
+
+    .category-page-wrapper {
+        .layered-filter-wrapper {
+            display: none;
+        }
+
+        .category-container {
+            margin: 0;
+            padding-left: 0px !important;
+            padding-right: 0px !important;
+
+            > div {
+                padding: 0 10px;
+            }
+
+            .filters-container {
+                padding: 0;
+
+                .toolbar-wrapper {
+                    > div.col-4 {
+                        margin: 0;
+                        padding: 0;
+                        display: table;
+                        text-align: center;
+
+                        i {
+                            left: 20px;
+                            position: relative;
+                        }
+
+                        * {
+                            display: table-cell;
+                            vertical-align: middle;
+                        }
+                    }
+
+                    > div.col-4:nth-of-type(2) {
+                        i {
+                            left: 15px;
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/components/product-view.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/components/product-view.scss
index 94aa6aa96..6d60d0d8b 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/product-view.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/product-view.scss
@@ -168,7 +168,7 @@
 
     .thumb-list {
         left: 15px;
-        z-index: 1000;
+        z-index: 99;
         padding: 0px;
         margin-top: 10px;
         position: relative;
diff --git a/packages/Webkul/Velocity/src/Resources/views/UI/particals.blade.php b/packages/Webkul/Velocity/src/Resources/views/UI/particals.blade.php
index b768514d2..1ee6b568d 100644
--- a/packages/Webkul/Velocity/src/Resources/views/UI/particals.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/UI/particals.blade.php
@@ -159,7 +159,11 @@
                                     @auth('customer')
                                         {{ __('velocity::app.responsive.header.greeting', ['customer' => auth()->guard('customer')->user()->first_name]) }}
                                     @endauth
-                                    <i class="material-icons pull-right" v-on:click="closeDrawer()">cancel</i>
+                                    <i
+                                        class="material-icons pull-right"
+                                        @click="closeDrawer()">
+                                        cancel
+                                    </i>
                                 </span>
                             </div>
 
@@ -185,7 +189,11 @@
                                         :href="`${url}/${category['translations'][0].url_path}`">
                                         <span>@{{ category.name }}</span>
                                     </a>
-                                    <i class="rango-arrow-right" @click="toggleSubcategories(index, $event)"></i>
+
+                                    <i
+                                        class="rango-arrow-right"
+                                        @click="toggleSubcategories(index, $event)">
+                                    </i>
                                 </li>
                             </ul>
                         </div>
@@ -193,11 +201,55 @@
                         <div class="wrapper" v-else-if="subCategory">
                             <div class="drawer-section">
                                 <i class="rango-arrow-left fs24 text-down-4" @click="toggleSubcategories('root')"></i>
+
                                 <h4 class="display-inbl">@{{ subCategory.name }}</h4>
+
+                                <i class="material-icons pull-right" @click="closeDrawer()">
+                                    cancel
+                                </i>
                             </div>
 
-                            <ul>
-                                <li v-for="(subCategory, index) in subCategory.children">@{{ subCategory.name }}</li>
+                            <ul type="none">
+                                <li
+                                    :key="index"
+                                    v-for="(nestedSubCategory, index) in subCategory.children">
+
+                                    <div class="category-logo">
+                                        <img
+                                            class="category-icon"
+                                            v-if="nestedSubCategory.category_icon_path"
+                                            :src="`${url}/storage/${nestedSubCategory.category_icon_path}`" />
+                                    </div>
+
+                                    <a
+                                        class="unset"
+                                        :href="`${url}/${nestedSubCategory['translations'][0].url_path}`">
+                                        <span>@{{ nestedSubCategory.name }}</span>
+                                    </a>
+
+                                    <ul
+                                        type="none"
+                                        class="nested-category"
+                                        v-if="nestedSubCategory.children && nestedSubCategory.children.length > 0">
+
+                                        <li
+                                            :key="`index-${Math.random()}`"
+                                            v-for="(thirdLevelCategory, index) in nestedSubCategory.children">
+                                            <div class="category-logo">
+                                                <img
+                                                    class="category-icon"
+                                                    v-if="thirdLevelCategory.category_icon_path"
+                                                    :src="`${url}/storage/${thirdLevelCategory.category_icon_path}`" />
+                                            </div>
+
+                                            <a
+                                                class="unset"
+                                                :href="`${url}/${nestedSubCategory['translations'][0].url_path}`">
+                                                <span>@{{ thirdLevelCategory.name }}</span>
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </li>
                             </ul>
                         </div>
                     </div>
@@ -208,7 +260,7 @@
                     <logo-component></logo-component>
                 </div>
 
-                <div class="row right-vc-header col-4">
+                <div class="right-vc-header col-4">
                     <a :href="`${url}/customer/account/wishlist`" class="unset">
                         <i class="material-icons">favorite_border</i>
                     </a>
@@ -408,7 +460,7 @@
 
             data: function () {
                 return {
-                    'hamburger': true,
+                    'hamburger': false,
                     'subCategory': null,
                     'isSearchbar': false,
                     'rootCategories': true,
@@ -437,7 +489,9 @@
 
                 closeDrawer: function() {
                     $('.nav-container').hide();
+
                     this.hamburger = false;
+                    this.rootCategories = true;
                 },
 
                 toggleSubcategories: function (index, event) {
@@ -448,7 +502,7 @@
 
                         let categories = JSON.parse(this.categories);
                         this.rootCategories = false;
-                        this.subCategory = categories[0];
+                        this.subCategory = categories[index];
                     }
                 }
             }
diff --git a/packages/Webkul/Velocity/src/Resources/views/UI/shared/subCategories-header.blade.php b/packages/Webkul/Velocity/src/Resources/views/UI/shared/subCategories-header.blade.php
deleted file mode 100644
index 3aa49ec8b..000000000
--- a/packages/Webkul/Velocity/src/Resources/views/UI/shared/subCategories-header.blade.php
+++ /dev/null
@@ -1,62 +0,0 @@
-@php
-    $category = app('Webkul\Category\Repositories\CategoryRepository');
-    $categoryData = $category->find($category_id);
-    $categoryNestedData = $category->getVisibleCategoryTree($category_id);
-@endphp
-
-    <child-category></child-category>
-
-    <script type="text/x-template" id="child-category-template">
-        <i class="material-icons">chevron_right</i>
-
-        <h1>{{ $categoryData->name }}</h1>
-
-        @foreach($categoryNestedData as $index => $childrens)
-            <li>
-                {{ $childrens->name }}
-
-                @if($childrens->children && sizeof($childrens->children) > 0)
-                    <i class="material-icons"
-                        onclick="showOrHide()">
-                            chevron_right
-                    </i>
-                @endif
-
-            </li>
-        @endforeach
-    </script>
-
-   @push('scripts')
-        <script>
-            Vue.component('child-category', {
-
-                template: '#child-category-template',
-
-                data: function() {
-                    return {
-                        categoryName: ''
-                    };
-                },
-
-                mounted: function() {
-                    this.categoryName = "menswear";
-                },
-
-                created: function() {
-
-                },
-
-                methods: {
-                    showOrHide: function(id) {
-                        alert(id);
-                    }
-                }
-            });
-        </script>
-
-        <script type=text/javascript>
-            function showOrHide() {
-                alert("showOrHide");
-            }
-        </script>
-   @endpush
\ No newline at end of file
diff --git a/packages/Webkul/Velocity/src/Resources/views/home/new-products.blade.php b/packages/Webkul/Velocity/src/Resources/views/home/new-products.blade.php
index a0f511684..9bf637af4 100644
--- a/packages/Webkul/Velocity/src/Resources/views/home/new-products.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/home/new-products.blade.php
@@ -62,8 +62,9 @@
                     </div>
 
                     @include ('shop::products.list.recently-viewed', [
-                        'addClass' => 'col-3 new-products-recent',
-                        'addClassWrapper' => 'scrollable max-height-350',
+                        'quantity'          => 3,
+                        'addClass'          => 'col-3 new-products-recent',
+                        'addClassWrapper'   => 'scrollable max-height-350',
                     ])
                 </div>
             @else
diff --git a/packages/Webkul/Velocity/src/Resources/views/products/index.blade.php b/packages/Webkul/Velocity/src/Resources/views/products/index.blade.php
index 08e5cbb39..963c1f111 100755
--- a/packages/Webkul/Velocity/src/Resources/views/products/index.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/products/index.blade.php
@@ -25,7 +25,7 @@
 @endphp
 
 @section('content-wrapper')
-    <section class="row col-12 velocity-divide-page">
+    <section class="row col-12 velocity-divide-page category-page-wrapper">
         {!! view_render_event('bagisto.shop.productOrCategory.index.before', ['category' => $category]) !!}
 
         @if (in_array($category->display_mode, [null, 'products_only', 'products_and_description']))
@@ -34,7 +34,7 @@
 
         <div class="category-container right">
             <div class="row">
-                <div class="col-6">
+                <div class="col-12">
                     <h1 class="fw6 mb10">{{ $category->name }}</h1>
 
                     @if ($isDisplayMode && $products->count())
@@ -46,13 +46,13 @@
                     @endif
                 </div>
 
-                <div class="col-6">
-                    {{-- <div class="hero-image mb-35">
+                {{-- <div class="col-6">
+                    <div class="hero-image mb-35">
                         @if (!is_null($category->image))
                             <img class="logo" src="{{ $category->image_url }}" />
                         @endif
-                    </div> --}}
-                </div>
+                    </div>
+                </div> --}}
             </div>
 
             @if ($products->count())
diff --git a/packages/Webkul/Velocity/src/Resources/views/products/list/recently-viewed.blade.php b/packages/Webkul/Velocity/src/Resources/views/products/list/recently-viewed.blade.php
index 4d98967e7..98c294a7d 100644
--- a/packages/Webkul/Velocity/src/Resources/views/products/list/recently-viewed.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/products/list/recently-viewed.blade.php
@@ -4,6 +4,7 @@
 
 <recently-viewed
     add-class="{{ isset($addClass) ? $addClass : '' }}"
+    quantity="{{ isset($quantity) ? $quantity : null }}"
     add-class-wrapper="{{ isset($addClassWrapper) ? $addClassWrapper : '' }}">
 </recently-viewed>
 
@@ -62,7 +63,7 @@
         (() => {
             Vue.component('recently-viewed', {
                 template: '#recently-viewed-template',
-                props: ['addClass', 'addClassWrapper'],
+                props: ['quantity', 'addClass', 'addClassWrapper'],
 
                 data: function () {
                     return {
@@ -73,6 +74,10 @@
                                 var slugs = JSON.parse(storedRecentlyViewed);
                                 var updatedSlugs = {};
 
+                                if (this.quantity) {
+                                    slugs = slugs.slice(0, this.quantity);
+                                }
+
                                 slugs.forEach(slug => {
                                     updatedSlugs[slug] = {};
                                 });
diff --git a/packages/Webkul/Velocity/src/Resources/views/products/list/toolbar.blade.php b/packages/Webkul/Velocity/src/Resources/views/products/list/toolbar.blade.php
index 79933d378..8d77190c5 100644
--- a/packages/Webkul/Velocity/src/Resources/views/products/list/toolbar.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/products/list/toolbar.blade.php
@@ -1,79 +1,106 @@
 @inject ('toolbarHelper', 'Webkul\Product\Helpers\Toolbar')
 
 {!! view_render_event('bagisto.shop.products.list.toolbar.before') !!}
-    <div class="view-mode">
-
-        @if (
-            ! ($toolbarHelper->isModeActive('grid')
-            || $toolbarHelper->isModeActive('list'))
-        )
-            <div class="rango-view-grid-container active">
-                <span class="rango-view-grid fs24"></span>
-            </div>
-        @else
-            @if ($toolbarHelper->isModeActive('grid'))
-                <div class="rango-view-grid-container active">
-                    <span class="rango-view-grid fs24"></span>
-                </div>
-            @else
-                <div class="rango-view-grid-container">
-                    <a href="{{ $toolbarHelper->getModeUrl('grid') }}" class="grid-view unset">
-                        <span class="rango-view-grid fs24"></span>
-                    </a>
-                </div>
-            @endif
-        @endif
-
-        @if ($toolbarHelper->isModeActive('list'))
-            <div class="rango-view-list-container active">
-                <span class="rango-view-list fs24"></span>
-            </div>
-        @else
-            <div class="rango-view-list-container">
-                <a
-                    href="{{ $toolbarHelper->getModeUrl('list') }}"
-                    class="list-view unset">
-                    <span class="rango-view-list fs24"></span>
-                </a>
-            </div>
-        @endif
-    </div>
-
-    <div class="sorter">
-        <label>{{ __('shop::app.products.sort-by') }}</label>
-        <i class="icon fs16 cell rango-arrow-down select-icon-margin down-icon-position"></i>
-            <select class="selective-div border-normal" onchange="window.location.href = this.value">
-
-                @foreach ($toolbarHelper->getAvailableOrders() as $key => $order)
-
-                    <option value="{{ $toolbarHelper->getOrderUrl($key) }}" {{ $toolbarHelper->isOrderCurrent($key) ? 'selected' : '' }}>
-                        {{ __('shop::app.products.' . $order) }}
-                    </option>
-
-                @endforeach
-
-            </select>
-    </div>
-
-    <div class="limiter">
-        <label>{{ __('shop::app.products.show') }}</label>
-        <i class="icon fs16 cell rango-arrow-down select-icon-show-margin down-icon-position"></i>
-        <select class="selective-div border-normal" onchange="window.location.href = this.value" style="width: 57px;">
-
-            @foreach ($toolbarHelper->getAvailableLimits() as $limit)
-
-                <option value="{{ $toolbarHelper->getLimitUrl($limit) }}" {{ $toolbarHelper->isLimitCurrent($limit) ? 'selected' : '' }}>
-                    {{ $limit }}
-                </option>
-
-            @endforeach
-
-        </select>
-    </div>
-
+    <toolbar-component></toolbar-component>
 {!! view_render_event('bagisto.shop.products.list.toolbar.after') !!}
 
+@push('scripts')
+    <script type="text/x-template" id="toolbar-template">
+        <div class="toolbar-wrapper" v-if='!isMobile()'>
+            <div class="view-mode">
+                @if (
+                    ! ($toolbarHelper->isModeActive('grid')
+                    || $toolbarHelper->isModeActive('list'))
+                )
+                    <div class="rango-view-grid-container active">
+                        <span class="rango-view-grid fs24"></span>
+                    </div>
+                @else
+                    @if ($toolbarHelper->isModeActive('grid'))
+                        <div class="rango-view-grid-container active">
+                            <span class="rango-view-grid fs24"></span>
+                        </div>
+                    @else
+                        <div class="rango-view-grid-container">
+                            <a href="{{ $toolbarHelper->getModeUrl('grid') }}" class="grid-view unset">
+                                <span class="rango-view-grid fs24"></span>
+                            </a>
+                        </div>
+                    @endif
+                @endif
 
-<div class="responsive-layred-filter mb-20">
-    {{-- <layered-navigation></layered-navigation> --}}
-</div>
\ No newline at end of file
+                @if ($toolbarHelper->isModeActive('list'))
+                    <div class="rango-view-list-container active">
+                        <span class="rango-view-list fs24"></span>
+                    </div>
+                @else
+                    <div class="rango-view-list-container">
+                        <a
+                            href="{{ $toolbarHelper->getModeUrl('list') }}"
+                            class="list-view unset">
+                            <span class="rango-view-list fs24"></span>
+                        </a>
+                    </div>
+                @endif
+            </div>
+
+            <div class="sorter">
+                <label>{{ __('shop::app.products.sort-by') }}</label>
+                <i class="icon fs16 cell rango-arrow-down select-icon-margin down-icon-position"></i>
+                <select class="selective-div border-normal" onchange="window.location.href = this.value">
+
+                    @foreach ($toolbarHelper->getAvailableOrders() as $key => $order)
+
+                        <option value="{{ $toolbarHelper->getOrderUrl($key) }}" {{ $toolbarHelper->isOrderCurrent($key) ? 'selected' : '' }}>
+                            {{ __('shop::app.products.' . $order) }}
+                        </option>
+
+                    @endforeach
+
+                </select>
+            </div>
+
+            <div class="limiter">
+                <label>{{ __('shop::app.products.show') }}</label>
+                <i class="icon fs16 cell rango-arrow-down select-icon-show-margin down-icon-position"></i>
+                <select class="selective-div border-normal" onchange="window.location.href = this.value" style="width: 57px;">
+
+                    @foreach ($toolbarHelper->getAvailableLimits() as $limit)
+
+                        <option value="{{ $toolbarHelper->getLimitUrl($limit) }}" {{ $toolbarHelper->isLimitCurrent($limit) ? 'selected' : '' }}>
+                            {{ $limit }}
+                        </option>
+
+                    @endforeach
+
+                </select>
+            </div>
+        </div>
+
+        <div class="toolbar-wrapper row" v-else>
+            <div class="col-4">
+                <i class="material-icons">filter_list</i>
+                <span>Filter</span>
+            </div>
+
+            <div class="col-4">
+                <i class="material-icons">sort_by_alpha</i>
+                <span>Sort By</span>
+            </div>
+
+            <div class="col-4">
+                <i class="material-icons">view_module
+                </i>
+                <span>View</span>
+            </div>
+        </div>
+    </script>
+
+    <script type="text/javascript">
+        (() => {
+            Vue.component('toolbar-component', {
+                template: '#toolbar-template'
+            })
+        })()
+    </script>
+@endpush
diff --git a/packages/Webkul/Velocity/src/Resources/views/products/reviews/index.blade.php b/packages/Webkul/Velocity/src/Resources/views/products/reviews/index.blade.php
index 0e9d73564..4f002a904 100644
--- a/packages/Webkul/Velocity/src/Resources/views/products/reviews/index.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/products/reviews/index.blade.php
@@ -31,7 +31,7 @@
         <div class="row review-page-container">
             @include ('shop::products.view.small-view', ['product' => $product])
 
-            <div class="col-7 scrollable fs16">
+            <div class="col-lg-7 col-md-12 fs16">
                 <h2 class="full-width mb30">Rating and Reviews</h2>
 
                 @include ('shop::products.view.reviews')
diff --git a/packages/Webkul/Velocity/src/Resources/views/products/view/reviews.blade.php b/packages/Webkul/Velocity/src/Resources/views/products/view/reviews.blade.php
index 871170666..155fbffd0 100644
--- a/packages/Webkul/Velocity/src/Resources/views/products/view/reviews.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/products/view/reviews.blade.php
@@ -90,13 +90,13 @@
                         @for ($i = 5; $i >= 1; $i--)
 
                             <div class="row">
-                                <span class="col-lg-3 no-padding fs16 fw6">{{ $i }} Star</span>
+                                <span class="col-3 no-padding fs16 fw6">{{ $i }} Star</span>
 
-                                <div class="col-lg-7 rating-bar" title="{{ $percentageRatings[$i] }}%">
+                                <div class="col-7 rating-bar" title="{{ $percentageRatings[$i] }}%">
                                     <div style="width: {{ $percentageRatings[$i] }}%"></div>
                                 </div>
 
-                                <span class="col-lg-2 fs16">{{ $countRatings[$i] }}</span>
+                                <span class="col-2 fs16">{{ $countRatings[$i] }}</span>
                             </div>
                         @endfor