diff --git a/packages/Webkul/Velocity/publishable/assets/css/velocity.css b/packages/Webkul/Velocity/publishable/assets/css/velocity.css
index a156708ca..c98aa5309 100644
--- a/packages/Webkul/Velocity/publishable/assets/css/velocity.css
+++ b/packages/Webkul/Velocity/publishable/assets/css/velocity.css
@@ -724,7 +724,7 @@
 }
 
 .btn-add-to-cart {
-  padding: 8px !important;
+  padding: 3px 14px !important;
   border-radius: 0px !important;
   color: #FFFFFF !important;
   border-color: #26A37C !important;
@@ -858,12 +858,13 @@
   top: 12px;
   height: 5px;
   position: relative;
+  background-color: #F7F7F9;
 }
 
 .customer-rating .rating-bar > div {
   width: 0px;
   height: 100%;
-  background-color: black;
+  background-color: #111111;
 }
 
 .customer-rating .btn-write-review {
@@ -926,6 +927,11 @@
   vertical-align: super;
 }
 
+.filters-container .limiter::after {
+  margin-left: 10px;
+  content: 'per page';
+}
+
 .view-mode {
   margin-bottom: 20px;
 }
@@ -1011,7 +1017,6 @@
 }
 
 .product-card-new {
-  width: 22.5rem;
   border: none !important;
   margin: 0 5px 10px 10px;
 }
@@ -1039,6 +1044,10 @@
   vertical-align: middle;
 }
 
+.product-card-new .product-rating .material-icons {
+  font-size: 16px;
+}
+
 .product-card-new .card-body > div:not(:last-child) {
   margin-bottom: 5px;
 }
@@ -1664,11 +1673,7 @@
 }
 
 .wishlist-icon i {
-  color: #F05153;
-}
-
-.wishlist-icon i:hover::before {
-  content: "\E93D";
+  color: #111111;
 }
 
 .checkout-process {
@@ -1684,7 +1689,7 @@
   margin-bottom: 30px;
 }
 
-.checkout-process .scrollable {
+.checkout-process .scrollable, .checkout-process .layered-filter-wrapper {
   padding-top: 25px;
 }
 
@@ -1882,6 +1887,10 @@
   margin-left: 0px !important;
 }
 
+.product-price span:nth-child(1) {
+  font-weight: 600;
+}
+
 .product-price .price-label {
   margin-right: 6px;
 }
@@ -1917,8 +1926,16 @@
   min-height: 65vh;
 }
 
+.search-container {
+  padding: 30px 20px;
+}
+
+.search-container .lg-card-container.list-card {
+  margin: 0 15px;
+}
+
 .search-container :first-child {
-  margin-left: 0px;
+  margin-top: 0px;
 }
 
 .method-sticker {
@@ -2018,7 +2035,6 @@
 #sidebar-level-0 {
   display: none;
   z-index: 100000;
-  border-top: 1px solid #CCCCCC;
 }
 
 .grouped-product-container .grouped-product-list {
@@ -2230,6 +2246,7 @@
 }
 
 .category-container {
+  min-height: 670px;
   margin-left: 15px;
   padding: 40px 15px !important;
 }
@@ -2324,6 +2341,10 @@
   background-color: #26A37C !important;
 }
 
+.slides-container .VueCarousel .VueCarousel-inner {
+  padding-top: 0;
+}
+
 .filter-attributes-item {
   margin-bottom: 10px;
   border-bottom: 1px solid #CCCCCC;
@@ -2357,9 +2378,19 @@
 }
 
 .layered-filter-wrapper {
+  max-height: 670px;
+  margin-bottom: 42px;
   padding: 42px 10px 0 10px;
 }
 
+.layered-filter-wrapper .recently-viewed {
+  margin-top: 20px;
+}
+
+.layered-filter-wrapper .recently-viewed h2 {
+  font-size: 18px;
+}
+
 .selective-div {
   -webkit-appearance: none;
 }
@@ -2576,6 +2607,13 @@ header #search-form > *:focus {
 
 /* product policy section */
 /* category with custom option */
+.category-with-custom-options img {
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  max-height: 100%;
+}
+
 .category-with-custom-options .row:nth-child(1) {
   margin-bottom: 0px;
 }
@@ -2591,14 +2629,10 @@ header #search-form > *:focus {
 
 .category-with-custom-options .row:nth-child(1) > div:first-child {
   max-height: 345px;
-  background-size: cover;
-  background-image: url("../images/girl.png");
 }
 
 .category-with-custom-options .row:nth-child(1) > div:nth-child(3) {
   max-height: 345px;
-  background-size: cover;
-  background-image: url("../images/man.png");
 }
 
 .category-with-custom-options .row:nth-child(2) .category-image {
@@ -2612,26 +2646,24 @@ header #search-form > *:focus {
 
 .category-with-custom-options .row:nth-child(2) > div:nth-child(2) {
   max-height: 345px;
-  background-size: cover;
-  background-image: url("../images/man.png");
 }
 
 .category-with-custom-options .row:nth-child(2) > div:nth-child(4) {
   max-height: 345px;
-  background-size: cover;
-  background-image: url("../images/girl.png");
 }
 
 .category-with-custom-options .categories-collection {
+  width: 100%;
   height: 100%;
-  min-height: 330px;
+  display: table;
+  min-height: 310px;
   max-height: 345px;
   padding-left: 36px;
   background: #2B2B2B;
 }
 
 .category-with-custom-options .categories-collection h2 {
-  color: white;
+  color: #FFFFFF;
 }
 
 .category-with-custom-options .categories-collection li {
@@ -2639,10 +2671,9 @@ header #search-form > *:focus {
 }
 
 .category-with-custom-options .categories-collection .category-text-content {
-  top: 50%;
-  position: relative;
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
+  height: 100%;
+  display: table-cell;
+  vertical-align: middle;
 }
 
 /* category with custom option */
@@ -2772,23 +2803,23 @@ header #search-form > *:focus {
 
 /* Customer Reviews */
 /* sidebar */
-.categories-sidebar-container {
+.general-container {
   margin: 0;
   margin-bottom: 60px;
   display: inline-block;
 }
 
-.categories-sidebar-container > .row.disabled {
+.general-container > .row.disabled {
   cursor: not-allowed;
 }
 
-.categories-sidebar-container .main-category {
+.general-container .main-category {
   padding: 8px 15px;
   border-top: 1px solid #CCCCCC;
   border-bottom: 1px solid #CCCCCC;
 }
 
-.categories-sidebar-container .content-list {
+.general-container .content-list {
   margin: 0;
   width: 100%;
   height: 42px;
@@ -2799,7 +2830,7 @@ header #search-form > *:focus {
   display: inline-block;
 }
 
-.categories-sidebar-container .content-list ul {
+.general-container .content-list ul {
   width: 100%;
   height: 100%;
   display: -webkit-inline-box;
@@ -2808,7 +2839,7 @@ header #search-form > *:focus {
   background-color: #4D7EA8;
 }
 
-.categories-sidebar-container .content-list ul li a {
+.general-container .content-list ul li a {
   display: block;
   cursor: pointer;
   font-size: 16px;
@@ -2820,7 +2851,7 @@ header #search-form > *:focus {
   text-decoration: none;
 }
 
-.categories-sidebar-container .content-list ul li:hover {
+.general-container .content-list ul li:hover {
   background-color: #42719a;
 }
 
@@ -3186,7 +3217,7 @@ body::after {
   font-size: 13px !important;
 }
 
-.fs14, .categories-sidebar-container {
+.fs14, .general-container {
   font-size: 14px;
 }
 
@@ -3578,7 +3609,7 @@ body::after {
 }
 
 .lg-card-container #quick-view-btn-container :hover {
-  color: white !important;
+  color: #FFFFFF !important;
 }
 
 .lg-card-container .background-image-group {
@@ -3635,11 +3666,11 @@ body::after {
 }
 
 .lg-card-container.list-card .product-rating span {
-  vertical-align: middle;
+  vertical-align: top;
 }
 
 .lg-card-container.list-card .product-information {
-  height: 150px;
+  height: 200px;
   display: table;
 }
 
@@ -3653,7 +3684,7 @@ body::after {
 }
 
 .lg-card-container.list-card .wishlist-icon {
-  height: 34px;
+  height: 40px;
   display: table;
 }
 
@@ -3662,6 +3693,10 @@ body::after {
   vertical-align: middle;
 }
 
+.lg-card-container.list-card .add-to-cart-btn {
+  max-width: 140px;
+}
+
 .lg-card-container.grid-card {
   padding: 15px;
 }
@@ -3693,8 +3728,8 @@ body::after {
 .product-card-new:hover,
 .lg-card-container:hover,
 .general-container:hover {
-  -webkit-box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.14);
-          box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.14);
+  -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);
 }
 
 .lg-card-container:hover .quick-view-btn-container {
@@ -3726,6 +3761,7 @@ body::after {
 
 .small-card-container .product-image {
   height: 100%;
+  background-position: center;
 }
 
 .small-card-container .card-body {
@@ -3853,8 +3889,12 @@ a.default {
   cursor: pointer;
 }
 
+.VueCarousel .VueCarousel-inner {
+  padding-top: 5px;
+}
+
 .VueCarousel .VueCarousel-slide:nth-of-type(1) .product-card-new {
-  margin-left: 0px;
+  margin-left: 5px;
 }
 
 .navigation-hide .VueCarousel-navigation {
@@ -3865,14 +3905,14 @@ a.default {
   display: none;
 }
 
-.scrollable {
+.scrollable, .layered-filter-wrapper {
   max-height: 100vh;
   overflow-y: scroll;
   scrollbar-width: none;
   -ms-overflow-style: none;
 }
 
-.scrollable::-webkit-scrollbar {
+.scrollable::-webkit-scrollbar, .layered-filter-wrapper::-webkit-scrollbar {
   width: 0 !important;
 }
 
@@ -3953,6 +3993,10 @@ button[disabled] {
   max-height: 350px;
 }
 
+.border-normal {
+  border: 1px solid #DCDCDC;
+}
+
 .product-detail {
   padding-top: 20px;
   margin-bottom: 60px;
@@ -4026,14 +4070,16 @@ button[disabled] {
 
 .product-detail .right .add-to-cart-btn {
   padding: 0px;
+  max-width: 130px;
 }
 
 .product-detail .right .add-to-cart-btn button {
-  padding: 9px 15px;
   text-transform: uppercase;
+  padding: 9px 15px !important;
 }
 
 .product-detail .right .add-to-cart-btn button span {
+  top: 0;
   font-size: 16px;
 }
 
@@ -4087,6 +4133,7 @@ button[disabled] {
 .product-detail .wishlist-icon {
   height: 46px;
   display: table;
+  padding-left: 10px;
 }
 
 .product-detail .wishlist-icon i {
@@ -4104,6 +4151,10 @@ button[disabled] {
   max-height: 300px;
 }
 
+.velocity-small-screen {
+  display: none;
+}
+
 @media only screen and (max-width: 1100px) {
   .footer .footer-content .newsletter-subscription .newsletter-wrapper .social-icons {
     width: 100%;
@@ -4120,6 +4171,163 @@ button[disabled] {
   }
 }
 
+@media only screen and (max-width: 576px) {
+  .velocity-divide-page {
+    position: static;
+  }
+  .velocity-divide-page .left {
+    position: static;
+  }
+  .velocity-divide-page .right {
+    padding-left: 0;
+  }
+  .general-container .vc-header > div {
+    display: none;
+  }
+  .general-container .vc-header > div.velocity-small-screen {
+    display: block;
+  }
+  .general-container .vc-header > div.velocity-small-screen img {
+    width: 100%;
+    height: 100%;
+    max-height: 50px;
+  }
+  .general-container .vc-header .right-vc-header {
+    height: 50px;
+    display: table;
+  }
+  .general-container .vc-header .right-vc-header * {
+    display: table-cell;
+    vertical-align: middle;
+  }
+  #top {
+    display: none;
+  }
+  #top + header {
+    display: none;
+  }
+}
+
+/* fallback */
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format("woff2");
+}
+
+/* fallback */
+@font-face {
+  font-family: 'Material Icons Outlined';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v14/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format("woff2");
+}
+
+/* fallback */
+@font-face {
+  font-family: 'Material Icons Round';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/materialiconsround/v14/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP.woff2) format("woff2");
+}
+
+/* fallback */
+@font-face {
+  font-family: 'Material Icons Sharp';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/materialiconssharp/v15/oPWQ_lt5nv4pWNJpghLP75WiFR4kLh3kvmvR.woff2) format("woff2");
+}
+
+/* fallback */
+@font-face {
+  font-family: 'Material Icons Two Tone';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/materialiconstwotone/v13/hESh6WRmNCxEqUmNyh3JDeGxjVVyMg4tHGctNCu0.woff2) format("woff2");
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
+.material-icons-outlined {
+  font-family: 'Material Icons Outlined';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
+.material-icons-round {
+  font-family: 'Material Icons Round';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
+.material-icons-sharp {
+  font-family: 'Material Icons Sharp';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
+.material-icons-two-tone {
+  font-family: 'Material Icons Two Tone';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
 /*!
  * Bootstrap v3.4.1 (https://getbootstrap.com/)
  * Copyright 2011-2019 Twitter, Inc.
@@ -12076,38 +12284,6 @@ button.close {
   }
 }
 
-@font-face {
-  font-family: "Material Icons";
-  font-style: normal;
-  font-weight: 400;
-  src: url("../material-icons/iconfont/MaterialIcons-Regular.eot");
-  /* For IE6-8 */
-  src: local("Material Icons"), local("MaterialIcons-Regular"), url("../material-icons/iconfont/MaterialIcons-Regular.woff2") format("woff2"), url("../material-icons/iconfont/MaterialIcons-Regular.woff") format("woff"), url("../material-icons/iconfont/MaterialIcons-Regular.ttf") format("truetype");
-}
-
-.material-icons {
-  font-family: "Material Icons";
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  display: inline-block;
-  line-height: 1;
-  text-transform: none;
-  letter-spacing: normal;
-  word-wrap: normal;
-  white-space: nowrap;
-  direction: ltr;
-  /* Support for all WebKit browsers. */
-  -webkit-font-smoothing: antialiased;
-  /* Support for Safari and Chrome. */
-  text-rendering: optimizeLegibility;
-  /* Support for Firefox. */
-  -moz-osx-font-smoothing: grayscale;
-  /* Support for IE. */
-  -webkit-font-feature-settings: 'liga';
-          font-feature-settings: 'liga';
-}
-
 * {
   margin: 0;
   padding: 0;
@@ -12463,7 +12639,7 @@ header #search-form .btn-group .selectdiv, header #search-form .quantity .select
 }
 
 header #search-form .btn-group .selectdiv:before, header #search-form .quantity .selectdiv:before {
-  top: 13px;
+  top: 10px;
   left: 108px;
   z-index: 10;
   font-size: 16px;
@@ -12536,7 +12712,7 @@ header .mini-cart-container #mini-cart .mini-cart-content {
   position: relative;
   width: 75px;
   text-align: right;
-  font-family: "SourceSansPro-Semibold";
+  font-weight: 600;
   font-size: 16px;
   color: rgba(0, 0, 0, 0.83);
   letter-spacing: 0;
@@ -12588,7 +12764,7 @@ header .dropdown-menu-large .dropdown-content .item .item-image .thumbnail {
 }
 
 header .dropdown-menu-large .dropdown-content .item .item-name {
-  font-family: "SourceSansPro-Semibold";
+  font-weight: 600;
   font-size: 18px;
   color: rgba(0, 0, 0, 0.83);
   letter-spacing: 0;
@@ -12612,7 +12788,6 @@ header .dropdown-menu-large .dropdown-content .item .item-details .item-qty-pric
 }
 
 header .dropdown-menu-large .dropdown-content .item .item-details .item-qty-price .item-qty {
-  font-family: "SourceSansPro-Regular";
   font-size: 16px;
   color: rgba(0, 0, 0, 0.83);
   letter-spacing: 0;
@@ -12620,7 +12795,7 @@ header .dropdown-menu-large .dropdown-content .item .item-details .item-qty-pric
 }
 
 header .dropdown-menu-large .dropdown-content .item .item-details .item-qty-price .item-price {
-  font-family: "SourceSansPro-Semibold";
+  font-weight: 600;
   font-size: 16px;
   color: rgba(0, 0, 0, 0.83);
   letter-spacing: 0;
@@ -12633,14 +12808,14 @@ header .dropdown-menu-large .dropdown-header {
 }
 
 header .dropdown-menu-large .dropdown-header .sub-total-text {
-  font-family: "SourceSansPro-Semibold";
+  font-weight: 600;
   font-size: 16px;
   color: rgba(0, 0, 0, 0.83);
   letter-spacing: 0;
 }
 
 header .dropdown-menu-large .dropdown-header .cart-sub-total {
-  font-family: "SourceSansPro-Bold";
+  font-weight: 700;
   font-size: 16px;
   color: rgba(0, 0, 0, 0.83);
   letter-spacing: 0;
@@ -12650,7 +12825,7 @@ header .dropdown-menu-large .dropdown-header .cart-sub-total {
 header .dropdown-menu-large .dropdown-footer {
   padding: 10px 10px 0px 10px;
   border-top: 1px solid #CCCCCC;
-  font-family: "SourceSansPro-Bold";
+  font-weight: 700;
   font-size: 16px;
   color: rgba(0, 0, 0, 0.83);
   letter-spacing: 0;
@@ -12725,7 +12900,7 @@ header .dropdown-menu-large .dropdown-footer .checkout-link {
 #nav-menu .navbar .category-dropdown li.category-list a {
   padding: 10px 0px;
   position: relative;
-  font-family: "SourceSansPro-Semibold";
+  font-weight: 600;
   font-size: 14px;
   color: rgba(0, 0, 0, 0.83);
   letter-spacing: 0;
diff --git a/packages/Webkul/Velocity/publishable/assets/js/velocity.js b/packages/Webkul/Velocity/publishable/assets/js/velocity.js
index 4af215ec2..bbd615708 100644
--- a/packages/Webkul/Velocity/publishable/assets/js/velocity.js
+++ b/packages/Webkul/Velocity/publishable/assets/js/velocity.js
@@ -1156,6 +1156,11 @@ $(document).ready(function () {
                             } else if (type == "mouseout") {
                                 this.hide(subCategories1);
                             }
+                        } else {
+                            if (type == "mouseout") {
+                                var _sidebar = $('#' + id);
+                                _sidebar.hide();
+                            }
                         }
                     }
                 }
@@ -36839,6 +36844,20 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 /* harmony default export */ __webpack_exports__["default"] = ({
     props: ['heading', 'headerContent', 'isEnabled']
@@ -36854,8 +36873,27 @@ var render = function() {
   var _c = _vm._self._c || _h
   return _c(
     "div",
-    { staticClass: "row velocity-divide-page remove-padding-margin" },
+    { staticClass: "row velocity-divide-page remove-padding-margin vc-header" },
     [
+      _c("div", { staticClass: "velocity-small-screen container" }, [
+        _c("div", { staticClass: "row" }, [
+          _c("div", { staticClass: "col-8" }, [
+            _c(
+              "div",
+              { staticClass: "row" },
+              [
+                _c("logo-component", {
+                  attrs: { "add-class": "col-8 offset-3" }
+                })
+              ],
+              1
+            )
+          ]),
+          _vm._v(" "),
+          _vm._m(0)
+        ])
+      ]),
+      _vm._v(" "),
       _c(
         "div",
         {
@@ -36913,7 +36951,20 @@ var render = function() {
     ]
   )
 }
-var staticRenderFns = []
+var staticRenderFns = [
+  function() {
+    var _vm = this
+    var _h = _vm.$createElement
+    var _c = _vm._self._c || _h
+    return _c("div", { staticClass: "col-4 right-vc-header" }, [
+      _c("i", { staticClass: "fs16 fw6 rango-search" }),
+      _vm._v(" "),
+      _c("i", { staticClass: "material-icons text-down-3" }, [
+        _vm._v("shopping_cart")
+      ])
+    ])
+  }
+]
 render._withStripped = true
 module.exports = { render: render, staticRenderFns: staticRenderFns }
 if (false) {
diff --git a/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/content-header.vue b/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/content-header.vue
index 0083953c3..2f8cda2ea 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/content-header.vue
+++ b/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/content-header.vue
@@ -1,5 +1,19 @@
 <template>
-    <div class="row velocity-divide-page remove-padding-margin">
+    <div class="row velocity-divide-page remove-padding-margin vc-header">
+        <div class="velocity-small-screen container">
+            <div class="row">
+                <div class="col-8">
+                    <div class="row">
+                        <logo-component add-class="col-8 offset-3"></logo-component>
+                    </div>
+                </div>
+                <div class="col-4 right-vc-header">
+                    <i class="fs16 fw6 rango-search"></i>
+                    <i class="material-icons text-down-3">shopping_cart</i>
+                </div>
+            </div>
+        </div>
+
         <div
             @mouseout="toggleSidebar('0', $event, 'mouseout')"
             @mouseover="toggleSidebar('0', $event, 'mouseover')"
diff --git a/packages/Webkul/Velocity/src/Resources/assets/js/app.js b/packages/Webkul/Velocity/src/Resources/assets/js/app.js
index 59a6c3e5f..84f3f76a8 100755
--- a/packages/Webkul/Velocity/src/Resources/assets/js/app.js
+++ b/packages/Webkul/Velocity/src/Resources/assets/js/app.js
@@ -75,6 +75,11 @@ $(document).ready(function () {
                             } else if (type == "mouseout") {
                                 this.hide(subCategories1);
                             }
+                        } else {
+                            if (type == "mouseout") {
+                                let sidebar = $(`#${id}`);
+                                sidebar.hide();
+                            }
                         }
                     }
                 }
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/_variables.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/_variables.scss
index e42ac06dd..39cb3dd0c 100755
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/_variables.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/_variables.scss
@@ -1,6 +1,7 @@
 @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap');
 //velocity variables
 $white-color: #FFFFFF;
+$black-color: #111111;
 $font-color: rgba(0,0,0,0.83);
 $button-primary-bg: #21A179;
 $border-primary: #269c77;
@@ -24,8 +25,7 @@ $light-grey-clr: rgb(158, 158, 158);
 $light-background: #F7F7F9;
 $sidebar-width: 230px;
 $box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+$material-icons-font-path: "../material-icons/iconfont/" !default;
+$border-normal: 1px solid $border-dark;
 
 $font-family-pro: 'Source Sans Pro', sans-serif;
-$font-family-regular: 'SourceSansPro-Regular';
-$font-family-semibold: 'SourceSansPro-Semibold';
-$font-family-bold: 'SourceSansPro-Bold';
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/app.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/app.scss
index 4792e19f8..9786cde14 100755
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/app.scss
@@ -10,10 +10,9 @@
 @import "components/product-view";
 @import "components/media";
 
+@import "static/material-icons";
 @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
-
-$material-icons-font-path: "../material-icons/iconfont/" !default;
-@import '../../../../publishable/assets/material-icons/iconfont/material-icons.scss';
+// @import '../../../../publishable/assets/material-icons/iconfont/material-icons.scss';
 
 * {
     margin: 0;
@@ -363,7 +362,7 @@ header {
             }
 
             .selectdiv:before {
-                top: 13px;
+                top: 10px;
                 left: 108px;
                 z-index: 10;
                 font-size: 16px;
@@ -439,7 +438,7 @@ header {
                 position: relative;
                 width: 75px;
                 text-align: right;
-                font-family: $font-family-semibold;
+                font-weight: 600;
                 font-size: 16px;
                 color: $font-color;
                 letter-spacing: 0;
@@ -488,7 +487,7 @@ header {
                 }
 
                 .item-name {
-                    font-family: $font-family-semibold;
+                    font-weight: 600;
                     font-size: 18px;
                     color: $font-color;
                     letter-spacing: 0;
@@ -510,14 +509,13 @@ header {
                         display: inline-block;
 
                         .item-qty {
-                            font-family: $font-family-regular;
                             font-size: 16px;
                             color: $font-color;
                             letter-spacing: 0;
                             text-align: left;
                         }
                         .item-price {
-                            font-family: $font-family-semibold;
+                            font-weight: 600;
                             font-size: 16px;
                             color: $font-color;
                             letter-spacing: 0;
@@ -532,14 +530,14 @@ header {
             border-top: 1px solid $border-common;
 
             .sub-total-text {
-                font-family: $font-family-semibold;
+                font-weight: 600;
                 font-size: 16px;
                 color: $font-color;
                 letter-spacing: 0;
             }
 
             .cart-sub-total {
-                font-family: $font-family-bold;
+                font-weight: 700;
                 font-size: 16px;
                 color: $font-color;
                 letter-spacing: 0;
@@ -549,7 +547,7 @@ header {
         .dropdown-footer {
             padding: 10px 10px 0px 10px;
             border-top: 1px solid $border-common;
-            font-family: $font-family-bold;
+            font-weight: 700;
             font-size: 16px;
             color: $font-color;
             letter-spacing: 0;
@@ -621,7 +619,7 @@ header {
                 a {
                     padding: 10px 0px;
                     position: relative;
-                    font-family: $font-family-semibold;
+                    font-weight: 600;
                     font-size: 14px;
                     color: rgba(0,0,0,0.83);
                     letter-spacing: 0;
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/components/UI.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/components/UI.scss
index d9baf2f84..37ca88db7 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/UI.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/UI.scss
@@ -30,7 +30,7 @@
 }
 
 .btn-add-to-cart {
-    padding: 8px !important;
+    padding: 3px 14px !important;
     border-radius: 0px !important;
     color: $white-color !important;
     border-color: $theme-color !important;
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 f172f222d..2f39350d9 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss
@@ -50,11 +50,12 @@
         top: 12px;
         height: 5px;
         position: relative;
+        background-color: $light-background;
 
         > div {
             width: 0px;
             height: 100%;
-            background-color: black;
+            background-color: $black-color;
         }
     }
 
@@ -116,6 +117,11 @@
     > div:not(:first-child) {
         vertical-align: super;
     }
+
+    .limiter::after {
+        margin-left: 10px;
+        content: 'per page';
+    }
 }
 
 .view-mode {
@@ -204,7 +210,7 @@
 }
 
 .product-card-new {
-    width: 22.5rem;
+    // width: 19rem;
     border: none !important;
     margin: 0 5px 10px 10px;
 
@@ -233,6 +239,10 @@
             font-size: 14px;
             vertical-align: middle;
         }
+
+        .material-icons {
+            font-size: 16px;
+        }
     }
 
     .card-body {
@@ -941,11 +951,11 @@
     vertical-align: middle;
 
     i {
-        color: $button-danger;
+        color: $black-color;
     }
 
     i:hover::before {
-        content: "\E93D";
+        // content: "\E93D";
     }
 }
 
@@ -1160,6 +1170,10 @@
 }
 
 .product-price {
+    span:nth-child(1) {
+        font-weight: 600;
+    }
+
     .price-label {
         margin-right: 6px;
     }
@@ -1197,8 +1211,16 @@
 }
 
 .search-container {
+    padding: 30px 20px;
+
+    .lg-card-container {
+        &.list-card {
+            margin: 0 15px;
+        }
+    }
+
     :first-child {
-        margin-left: 0px;
+        margin-top: 0px;
     }
 }
 
@@ -1311,7 +1333,6 @@
 #sidebar-level-0 {
     display: none;
     z-index: 100000;
-    border-top: 1px solid $border-common;
 }
 
 .grouped-product-container {
@@ -1547,6 +1568,7 @@
 }
 
 .category-container {
+    min-height: 670px;
     margin-left: 15px;
     padding: 40px 15px !important;
 
@@ -1642,6 +1664,11 @@
     .VueCarousel-dot--active {
         background-color: $theme-color !important;
     }
+    .VueCarousel {
+        .VueCarousel-inner {
+            padding-top: 0;
+        }
+    }
 }
 
 .filter-attributes-item {
@@ -1679,7 +1706,19 @@
 }
 
 .layered-filter-wrapper {
+    @extend .scrollable;
+
+    max-height: 670px;
+    margin-bottom: 42px;
     padding: 42px 10px 0 10px;
+
+    .recently-viewed {
+        margin-top: 20px;
+
+        h2 {
+            font-size: 18px;
+        }
+    }
 }
 
 .selective-div {
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/components/home.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/components/home.scss
index c37dc1996..ba09b75a0 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/home.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/home.scss
@@ -210,6 +210,13 @@ header #search-form > *:focus {
 
 .category-with-custom-options {
 
+    img {
+        width: 100%;
+        max-width: 100%;
+        height: 100%;
+        max-height: 100%;
+    }
+
     .row:nth-child(1) {
         margin-bottom: 0px;
 
@@ -223,14 +230,10 @@ header #search-form > *:focus {
 
             &:first-child() {
                 max-height: 345px;
-                background-size: cover;
-                background-image: url('../images/girl.png');
             }
 
             &:nth-child(3) {
                 max-height: 345px;
-                background-size: cover;
-                background-image: url('../images/man.png');
             }
         }
     }
@@ -246,27 +249,25 @@ header #search-form > *:focus {
 
             &:nth-child(2) {
                 max-height: 345px;
-                background-size: cover;
-                background-image: url('../images/man.png');
             }
 
             &:nth-child(4) {
                 max-height: 345px;
-                background-size: cover;
-                background-image: url('../images/girl.png');
             }
         }
     }
 
     .categories-collection {
+        width: 100%;
         height: 100%;
-        min-height: 330px;
+        display: table;
+        min-height: 310px;
         max-height: 345px;
         padding-left: 36px;
         background:#2B2B2B;
 
         h2 {
-            color: white;
+            color: $white-color;
         }
 
         li {
@@ -274,9 +275,9 @@ header #search-form > *:focus {
         }
 
         .category-text-content {
-            top: 50%;
-            position: relative;
-            transform: translateY(-50%);
+            height: 100%;
+            display: table-cell;
+            vertical-align: middle;
         }
     }
 }
@@ -425,7 +426,7 @@ header #search-form > *:focus {
 /* Customer Reviews */
 
 /* sidebar */
-.categories-sidebar-container {
+.general-container {
     @extend .fs14;
 
     margin: 0;
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 b781f35dc..564bd852c 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/media.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/media.scss
@@ -1,3 +1,7 @@
+.velocity-small-screen {
+    display: none;
+}
+
 @media only screen and (max-width: 1100px) {
     .footer {
         .footer-content {
@@ -40,4 +44,57 @@
     // body {
     //     display: block;
     // }
+
+    .velocity-divide-page {
+        position: static;
+
+        .left {
+            position: static;
+        }
+
+        .right {
+            padding-left: 0;
+        }
+    }
+
+    .general-container {
+        .vc-header {
+            > div {
+                display: none;
+            }
+
+            > div.velocity-small-screen {
+                display: block;
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                    max-height: 50px;
+                }
+            }
+
+            .right-vc-header {
+                height: 50px;
+                display: table;
+
+                * {
+                    display: table-cell;
+                    vertical-align: middle;
+                }
+            }
+        }
+
+    }
+
+    #top {
+        display: none;
+
+        + header {
+            display: none;
+        }
+
+        // + .categories-sidebar-container {
+        //     display: none;
+        // }
+    }
 }
\ 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 0cd1f4608..3246efa1c 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
@@ -139,12 +139,14 @@
 
         .add-to-cart-btn {
             padding: 0px;
+            max-width: 130px;
 
             button {
-                padding: 9px 15px;
                 text-transform: uppercase;
+                padding: 9px 15px !important;
 
                 span {
+                    top: 0;
                     font-size: 16px;
                 }
             }
@@ -203,6 +205,7 @@
     .wishlist-icon {
         height: 46px;
         display: table;
+        padding-left: 10px;
 
         i {
             display: table-cell;
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/components/shared.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/components/shared.scss
index 701b71f06..a4612c06e 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/shared.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/shared.scss
@@ -355,7 +355,7 @@
 
     #quick-view-btn-container {
         :hover {
-            color: white !important;
+            color: $white-color !important;
         }
     }
 
@@ -420,12 +420,12 @@
             }
 
             span {
-                vertical-align: middle;
+                vertical-align: top;
             }
         }
 
         .product-information {
-            height: 150px;
+            height: 200px;
             display: table;
 
             > div {
@@ -441,7 +441,7 @@
         }
 
         .wishlist-icon {
-            height: 34px;
+            height: 40px;
             display: table;
 
             i {
@@ -449,6 +449,10 @@
                 vertical-align: middle;
             }
         }
+
+        .add-to-cart-btn {
+            max-width: 140px;
+        }
     }
 
     &.grid-card {
@@ -484,7 +488,7 @@
 .product-card-new:hover,
 .lg-card-container:hover,
 .general-container:hover {
-    box-shadow: 0 6px 14px 0 rgba(0,0,0,0.14);
+    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
 }
 
 .lg-card-container:hover {
@@ -519,6 +523,7 @@
         @extend .bg-image;
 
         height: 100%;
+        background-position: center;
     }
 
     .card-body {
@@ -648,9 +653,13 @@ a {
     width: 100%;
     cursor: pointer;
 
+    .VueCarousel-inner {
+        padding-top: 5px;
+    }
+
     .VueCarousel-slide:nth-of-type(1) {
         .product-card-new {
-            margin-left: 0px;
+            margin-left: 5px;
         }
     }
 }
@@ -749,4 +758,8 @@ button[disabled] {
 
 .max-height-350 {
     max-height: 350px;
+}
+
+.border-normal {
+    border: $border-normal;
 }
\ No newline at end of file
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/static/material-icons.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/static/material-icons.scss
new file mode 100644
index 000000000..e1ac68a9c
--- /dev/null
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/static/material-icons.scss
@@ -0,0 +1,115 @@
+/* fallback */
+@font-face {
+    font-family: 'Material Icons';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
+  }
+  /* fallback */
+  @font-face {
+    font-family: 'Material Icons Outlined';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v14/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2');
+  }
+  /* fallback */
+  @font-face {
+    font-family: 'Material Icons Round';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/materialiconsround/v14/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP.woff2) format('woff2');
+  }
+  /* fallback */
+  @font-face {
+    font-family: 'Material Icons Sharp';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/materialiconssharp/v15/oPWQ_lt5nv4pWNJpghLP75WiFR4kLh3kvmvR.woff2) format('woff2');
+  }
+  /* fallback */
+  @font-face {
+    font-family: 'Material Icons Two Tone';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/materialiconstwotone/v13/hESh6WRmNCxEqUmNyh3JDeGxjVVyMg4tHGctNCu0.woff2) format('woff2');
+  }
+
+  .material-icons {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .material-icons-outlined {
+    font-family: 'Material Icons Outlined';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .material-icons-round {
+    font-family: 'Material Icons Round';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .material-icons-sharp {
+    font-family: 'Material Icons Sharp';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .material-icons-two-tone {
+    font-family: 'Material Icons Two Tone';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+  }
\ No newline at end of file
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 1b186cb6a..ed23f6745 100644
--- a/packages/Webkul/Velocity/src/Resources/views/UI/particals.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/UI/particals.blade.php
@@ -39,7 +39,7 @@
 
         <div class="mini-cart-content">
             <i class="icon fs16 cell rango-arrow-down down-icon-position down-arrow-margin"></i>
-            <i class="rango-cart-1 fs24 text-down-3"></i>
+            <i class="material-icons-outlined text-down-3">shopping_cart</i>
             <span class="badge" v-text="itemCount"></span>
             <span class="fs18 fw6 cart-text">{{ __('velocity::app.minicart.cart') }}</span>
         </div>
@@ -66,6 +66,19 @@
     </div>
 </script>
 
+<script type="text/x-template" id="logo-template">
+    <a
+        :class="`left ${addClass}`"
+        href="{{ route('shop.home.index') }}">
+
+        @if ($logo = core()->getCurrentChannel()->logo_url)
+            <img class="logo" src="{{ $logo }}" />
+        @else
+            <img class="logo" src="{{ asset('themes/velocity/assets/images/logo-text.png') }}" />
+        @endif
+    </a>
+</script>
+
 <script type="text/javascript">
     (() => {
         Vue.component('star-ratings', {
@@ -178,5 +191,10 @@
                 }
             }
         });
+
+        Vue.component('logo-component', {
+            template: '#logo-template',
+            props: ['addClass'],
+        });
     })()
 </script>
diff --git a/packages/Webkul/Velocity/src/Resources/views/customers/account/partials/sidemenu.blade.php b/packages/Webkul/Velocity/src/Resources/views/customers/account/partials/sidemenu.blade.php
index d29810044..ed0cd2a12 100644
--- a/packages/Webkul/Velocity/src/Resources/views/customers/account/partials/sidemenu.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/customers/account/partials/sidemenu.blade.php
@@ -24,7 +24,7 @@
 
 @push('css')
     <style type="text/css">
-        .categories-sidebar-container {
+        .general-container {
             margin-bottom: 0px;
             min-height: 100vh;
         }
diff --git a/packages/Webkul/Velocity/src/Resources/views/home/category-with-custom-option.blade.php b/packages/Webkul/Velocity/src/Resources/views/home/category-with-custom-option.blade.php
new file mode 100644
index 000000000..a04bd47ac
--- /dev/null
+++ b/packages/Webkul/Velocity/src/Resources/views/home/category-with-custom-option.blade.php
@@ -0,0 +1,112 @@
+<div class="container-fluid category-with-custom-options">
+    @php
+        $category[0] = app('Webkul\Category\Repositories\CategoryRepository')->findByPath($category[0]);
+        $category[1] = app('Webkul\Category\Repositories\CategoryRepository')->findByPath($category[1]);
+        $category[2] = app('Webkul\Category\Repositories\CategoryRepository')->findByPath($category[2]);
+        $category[3] = app('Webkul\Category\Repositories\CategoryRepository')->findByPath($category[3]);
+    @endphp
+
+    <div class="row">
+        <div class="col pr15">
+            <img src="{{ asset ('/storage/' . $category['2']->image) }}" />
+        </div>
+
+        <div class="col">
+            <div class="card-arrow-container">
+                <div class="card-arrow card-arrow-rt"></div>
+            </div>
+
+            <div class="categories-collection">
+                <div class="category-text-content">
+                    <h2 class="text-uppercase">{{ $category[0]->name }}</h2>
+                    <ul type="none" class="fs14">
+                        @foreach ($category[0]->children as $subCategory)
+                            <li>
+                                <a href="{{ $subCategory->slug }}" class="unset">
+                                    {{ $subCategory->name }}
+                                </a>
+                            </li>
+                        @endforeach
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+        <div class="col pr15">
+            <img src="{{ asset ('/storage/' . $category['0']->image) }}" />
+        </div>
+
+        <div class="col">
+            <div class="card-arrow-container">
+                <div class="card-arrow card-arrow-bt"></div>
+            </div>
+
+            <div class="categories-collection">
+                <div class="category-text-content">
+                    <h2 class="text-uppercase">{{ $category[1]->name }}</h2>
+                    <ul type="none" class="fs14">
+                        @foreach ($category[1]->children as $subCategory)
+                            <li>
+                                <a href="{{ $subCategory->slug }}" class="unset">
+                                    {{ $subCategory->name }}
+                                </a>
+                            </li>
+                        @endforeach
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col mr15">
+            <div class="card-arrow-container">
+                <div class="card-arrow card-arrow-tp"></div>
+            </div>
+
+            <div class="categories-collection">
+                <div class="category-text-content">
+                    <h2 class="text-uppercase">{{ $category[2]->name }}</h2>
+                    <ul type="none" class="fs14">
+                        @foreach ($category[2]->children as $subCategory)
+                            <li>
+                                <a href="{{ $subCategory->slug }}" class="unset">
+                                    {{ $subCategory->name }}
+                                </a>
+                            </li>
+                        @endforeach
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="col mt15">
+            <img src="{{ asset ('/storage/' . $category['3']->image) }}" />
+        </div>
+
+        <div class="col mt15 mr15">
+            <div class="card-arrow-container">
+                <div class="card-arrow card-arrow-lt"></div>
+            </div>
+
+            <div class="categories-collection">
+                <div class="category-text-content">
+                    <h2 class="text-uppercase">{{ $category[3]->name }}</h2>
+                    <ul type="none" class="fs14">
+                        @foreach ($category[3]->children as $subCategory)
+                            <li>
+                                <a href="{{ $subCategory->slug }}" class="unset">
+                                    {{ $subCategory->name }}
+                                </a>
+                            </li>
+                        @endforeach
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+        <div class="col">
+            <img src="{{ asset ('/storage/' . $category['1']->image) }}" />
+        </div>
+
+    </div>
+</div>
diff --git a/packages/Webkul/Velocity/src/Resources/views/home/hot-categories.blade.php b/packages/Webkul/Velocity/src/Resources/views/home/hot-categories.blade.php
index c0e965505..624bb96b5 100644
--- a/packages/Webkul/Velocity/src/Resources/views/home/hot-categories.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/home/hot-categories.blade.php
@@ -17,7 +17,7 @@
                             </div>
 
                             <div class="right">
-                                <h3 class="fs20 clr-light">{{ $categoryDetails->name }}</h3>
+                                <h3 class="fs20 clr-light text-uppercase">{{ $categoryDetails->name }}</h3>
 
                                 <ul type="none">
                                     @foreach ($categoryDetails->children as $subCategory)
diff --git a/packages/Webkul/Velocity/src/Resources/views/home/in-progress/category-with-custom-option.blade.php b/packages/Webkul/Velocity/src/Resources/views/home/in-progress/category-with-custom-option.blade.php
deleted file mode 100644
index 1845191d1..000000000
--- a/packages/Webkul/Velocity/src/Resources/views/home/in-progress/category-with-custom-option.blade.php
+++ /dev/null
@@ -1,98 +0,0 @@
-<div class="container-fluid category-with-custom-options">
-
-    <div class="row">
-
-        <div class="col bg-image mr15"></div>
-
-        <div class="col">
-
-            <div class="card-arrow-container">
-                <div class="card-arrow card-arrow-rt"></div>
-            </div>
-
-            <div class="categories-collection">
-                <div class="category-text-content">
-                    <h2>WOMEN</h2>
-                    <ul type="none" class="fs14">
-                        <li>Clothing</li>
-                        <li>Top Brands</li>
-                        <li>Watches</li>
-                        <li>Handbags & Clutches</li>
-                        <li>Gold & Diamond Jewellery</li>
-                        <li>Fashion & Silver Jewellery</li>
-                        <li>Sunglasses</li>
-                        <li>Handloom & Handicraft Store</li>
-                        <li>Handbags & Clutches</li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-
-        <div class="col bg-image mr15"></div>
-
-        <div class="col">
-            <div class="card-arrow-container">
-                <div class="card-arrow card-arrow-bt"></div>
-            </div>
-
-            <div class="categories-collection">
-                <div class="category-text-content">
-                    <h2>Kids</h2>
-                    <ul type="none" class="fs14">
-                        <li>Clothing</li>
-                        <li>Top Brands</li>
-                        <li>Watches</li>
-                        <li>Handbags & Clutches</li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-
-    </div>
-
-    <div class="row">
-
-        <div class="col mr15">
-            <div class="card-arrow-container">
-                <div class="card-arrow card-arrow-tp"></div>
-            </div>
-
-            <div class="categories-collection">
-                <div class="category-text-content">
-                    <h2>Women Apparel</h2>
-                    <ul type="none" class="fs14">
-                        <li>Hoodies & Sweatshirts</li>
-                        <li>Jackets</li>
-                        <li>Tees</li>
-                        <li>Tanks</li>
-                        <li>Pants</li>
-                        <li>Shorts</li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-
-        <div class="col bg-image mt10"></div>
-
-        <div class="col mt10 mr15">
-            <div class="card-arrow-container">
-                <div class="card-arrow card-arrow-lt"></div>
-            </div>
-
-            <div class="categories-collection">
-                <div class="category-text-content">
-                    <h2>Electronics</h2>
-                    <ul type="none" class="fs14">
-                        <li>Clothing</li>
-                        <li>Top Brands</li>
-                        <li>Watches</li>
-                        <li>Handbags & Clutches</li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-
-        <div class="col bg-image"></div>
-
-    </div>
-</div>
diff --git a/packages/Webkul/Velocity/src/Resources/views/home/index.blade.php b/packages/Webkul/Velocity/src/Resources/views/home/index.blade.php
index 7a25492b4..38583ddbc 100644
--- a/packages/Webkul/Velocity/src/Resources/views/home/index.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/home/index.blade.php
@@ -50,7 +50,7 @@
     <div class="full-content-wrapper">
         {!! view_render_event('bagisto.shop.home.content.before') !!}
 
-            {!! DbView::make($velocityMetaData)->field('home_page_content')->render() !!}
+            {{-- {!! DbView::make($velocityMetaData)->field('home_page_content')->render() !!} --}}
 
         {{ view_render_event('bagisto.shop.home.content.after') }}
     </div>
@@ -63,8 +63,7 @@
     <!-- Show Product Policy -->
     {{-- @include('shop::home.product-policy') --}}
 
-    <!-- trending products -->
-    {{-- @include('shop::home.category-with-custom-option') --}}
+
 
     <!-- advertisement two -->
     {{-- @include('shop::home.advertisements.advertisement-two') --}}
diff --git a/packages/Webkul/Velocity/src/Resources/views/layouts/header/index.blade.php b/packages/Webkul/Velocity/src/Resources/views/layouts/header/index.blade.php
index dce965982..0e9887a44 100644
--- a/packages/Webkul/Velocity/src/Resources/views/layouts/header/index.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/layouts/header/index.blade.php
@@ -1,12 +1,6 @@
 <header>
     <div class="row col-12 remove-padding-margin velocity-divide-page">
-        <a id="logo" class="left" href="{{ route('shop.home.index') }}">
-            @if ($logo = core()->getCurrentChannel()->logo_url)
-                <img class="logo" src="{{ $logo }}" class="img-responsive" title="" alt="" />
-            @else
-                <img class="logo" src="{{ asset('themes/velocity/assets/images/logo-text.png') }}" class="img-responsive" />
-            @endif
-        </a>
+        <logo-component></logo-component>
 
         <div class="row no-margin right">
             <div class="col-8 no-padding input-group">
diff --git a/packages/Webkul/Velocity/src/Resources/views/layouts/master.blade.php b/packages/Webkul/Velocity/src/Resources/views/layouts/master.blade.php
index a597eced1..dbf948c8b 100644
--- a/packages/Webkul/Velocity/src/Resources/views/layouts/master.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/layouts/master.blade.php
@@ -63,7 +63,7 @@
                     @include('shop::layouts.top-nav.index')
                     @include('shop::layouts.header.index', ['categories' => $categories])
 
-                    <div class="categories-sidebar-container col-12 no-padding">
+                    <div class="general-container col-12 no-padding">
 
                         @php
                             $velocityContent = app('Webkul\Velocity\Repositories\ContentRepository')->getAllContents();
diff --git a/packages/Webkul/Velocity/src/Resources/views/products/add-to-cart.blade.php b/packages/Webkul/Velocity/src/Resources/views/products/add-to-cart.blade.php
index 3ac16c95d..02cb0e4e5 100644
--- a/packages/Webkul/Velocity/src/Resources/views/products/add-to-cart.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/products/add-to-cart.blade.php
@@ -15,10 +15,11 @@
             {{ ! $product->isSaleable() ? 'disabled' : '' }}>
 
             @if (! (isset($showCartIcon) && !$showCartIcon))
-                <span class="rango-cart-1 fs20"></span>
+                {{-- <span class="rango-cart-1 fs20"></span> --}}
+                <i class="material-icons text-down-3">shopping_cart</i>
             @endif
 
-            <span class="fs14 align-vertical-top fw6">
+            <span class="fs14 fw6 text-uppercase text-up-4">
                 {{ __('shop::app.products.add-to-cart') }}
             </span>
         </button>
@@ -26,7 +27,9 @@
 </div>
 
 @if (! (isset($showWishlist) && !$showWishlist))
-    @include('shop::products.wishlist')
+    @include('shop::products.wishlist', [
+        'addClass' => $addWishlistClass ?? ''
+    ])
 @endif
 
 {!! view_render_event('bagisto.shop.products.add_to_cart.after', ['product' => $product]) !!}
\ No newline at end of file
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 eb5fcab3f..08e5cbb39 100755
--- a/packages/Webkul/Velocity/src/Resources/views/products/index.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/products/index.blade.php
@@ -1,3 +1,4 @@
+@inject ('toolbarHelper', 'Webkul\Product\Helpers\Toolbar')
 @inject ('productRepository', 'Webkul\Product\Repositories\ProductRepository')
 
 @extends('shop::layouts.master')
@@ -54,7 +55,6 @@
                 </div>
             </div>
 
-
             @if ($products->count())
                 <div class="filters-container">
                     @include ('shop::products.list.toolbar')
@@ -74,17 +74,11 @@
                 </div>
 
                 @if ($isDisplayMode)
-
                     @if ($products->count())
-
-                        @inject ('toolbarHelper', 'Webkul\Product\Helpers\Toolbar')
-
                         @if ($toolbarHelper->getCurrentMode() == 'grid')
                             <div class="row">
                                 @foreach ($products as $productFlat)
-
                                     @include ('shop::products.list.card', ['product' => $productFlat])
-
                                 @endforeach
                             </div>
                         @else
diff --git a/packages/Webkul/Velocity/src/Resources/views/products/list/card.blade.php b/packages/Webkul/Velocity/src/Resources/views/products/list/card.blade.php
index 3cc77f235..1daab66d4 100644
--- a/packages/Webkul/Velocity/src/Resources/views/products/list/card.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/products/list/card.blade.php
@@ -89,7 +89,7 @@
                 @if ($totalReviews)
                     <div class="product-rating">
                         <star-ratings ratings="{{ $avgRatings }}"></star-ratings>
-                        <span>{{ $totalReviews }} Ratings</span>
+                        <span class="align-top">{{ $totalReviews }} Ratings</span>
                     </div>
                 @else
                     <div class="product-rating">
@@ -98,7 +98,10 @@
                 @endif
 
                 <div class="cart-wish-wrap row">
-                    @include ('shop::products.add-to-cart', ['product' => $product])
+                    @include ('shop::products.add-to-cart', [
+                        'product' => $product,
+                        'addWishlistClass' => 'col-4 offset-4'
+                    ])
                 </div>
             </div>
         </div>
diff --git a/packages/Webkul/Velocity/src/Resources/views/products/list/layered-navigation.blade.php b/packages/Webkul/Velocity/src/Resources/views/products/list/layered-navigation.blade.php
index ed5c1b541..4d7a49ace 100644
--- a/packages/Webkul/Velocity/src/Resources/views/products/list/layered-navigation.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/products/list/layered-navigation.blade.php
@@ -36,6 +36,10 @@
 
         <layered-navigation></layered-navigation>
 
+        @if ($showRecentlyViewed)
+            @include ('shop::products.list.recently-viewed')
+        @endif
+
     {!! view_render_event('bagisto.shop.products.list.layered-nagigation.after') !!}
 
 </div>
@@ -50,7 +54,13 @@
 
             <div class="filter-content">
                 <div class="filter-attributes">
-                    <filter-attribute-item v-for='(attribute, index) in attributes' :attribute="attribute" :key="index" :index="index" @onFilterAdded="addFilters(attribute.code, $event)" :appliedFilterValues="appliedFilters[attribute.code]">
+                    <filter-attribute-item
+                        :key="index"
+                        :index="index"
+                        :attribute="attribute"
+                        v-for='(attribute, index) in attributes'
+                        @onFilterAdded="addFilters(attribute.code, $event)"
+                        :appliedFilterValues="appliedFilters[attribute.code]">
                     </filter-attribute-item>
 
                 </div>
@@ -74,13 +84,21 @@
 
             <div class="filter-attributes-content">
                 <ul type="none" class="items ml15" v-if="attribute.type != 'price'">
-                    <li class="item" v-for='(option, index) in attribute.options'>
-
-                        <span class="checkbox">
-                            <input type="checkbox" :id="option.id" v-bind:value="option.id" v-model="appliedFilters" @change="addFilter($event)"/>
-                            @{{ option.label ? option.label : option.admin_name }}
-                        </span>
+                    <li
+                        class="item"
+                        v-for='(option, index) in attribute.options'>
 
+                        <div
+                            class="checkbox"
+                            @click="optionClicked(option.id, $event)">
+                            <input
+                                type="checkbox"
+                                :id="option.id"
+                                v-bind:value="option.id"
+                                v-model="appliedFilters"
+                                @change="addFilter($event)" />
+                            <span>@{{ option.label ? option.label : option.admin_name }}</span>
+                        </div>
                     </li>
                 </ul>
 
@@ -112,32 +130,25 @@
                         id="price_to">
                     </div>
                 </div>
-
             </div>
-
         </div>
     </script>
 
-    <script>
+    <script type="text/javascript">
         Vue.component('layered-navigation', {
-
             template: '#layered-navigation-template',
-
             data: function() {
                 return {
+                    appliedFilters: {},
                     attributes: @json($filterAttributes),
-
-                    appliedFilters: {}
                 }
             },
 
             created: function () {
-                var urlParams = new URLSearchParams(window.location.search);
+                let urlParams = new URLSearchParams(window.location.search);
 
-                var this_this = this;
-
-                urlParams.forEach(function (value, index) {
-                    this_this.appliedFilters[index] = value.split(',');
+                urlParams.forEach((value, index) => {
+                    this.appliedFilters[index] = value.split(',');
                 });
             },
 
@@ -162,14 +173,12 @@
                     }
 
                     window.location.href = "?" + params.join('&');
-                }
+                },
             }
         });
 
         Vue.component('filter-attribute-item', {
-
             template: '#filter-attribute-item-template',
-
             props: [
                 'index',
                 'attribute',
@@ -219,7 +228,6 @@
 
             methods: {
                 addFilter: function (e) {
-
                     this.$emit('onFilterAdded', this.appliedFilters)
                 },
 
@@ -236,10 +244,28 @@
                     this.appliedFilters = [];
 
                     this.$emit('onFilterAdded', this.appliedFilters)
+                },
+
+                optionClicked: function (id, {target}) {
+                    let checkbox = $(`#${id}`);
+                    if (checkbox && checkbox.length > 0 && target.type != "checkbox") {
+                        checkbox = checkbox[0];
+                        checkbox.checked = !checkbox.checked;
+
+                        if (checkbox.checked) {
+                            this.appliedFilters.push(id);
+                        } else {
+                            let idPosition = this.appliedFilters.indexOf(id);
+                            if (idPosition == -1)
+                                idPosition = this.appliedFilters.indexOf(id.toString());
+
+                            this.appliedFilters.splice(idPosition, 1);
+                        }
+
+                        this.addFilter(event);
+                    }
                 }
             }
-
         });
-
     </script>
 @endpush
\ No newline at end of file
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 063e4ae92..86542ce98 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
@@ -46,6 +46,12 @@
                         </a>
                     </div>
                 </div>
+
+                <span
+                    class="fs16"
+                    v-if="!recentlyViewed"
+                    v-text="'Not available'">
+                </span>
             </div>
         </div>
     </script>
@@ -60,19 +66,24 @@
                     return {
                         baseURL: '{{ url()->to('/') }}',
                         recentlyViewed: (() => {
-                            let slugs = JSON.parse(window.localStorage.recentlyViewed);
-                            let updatedSlugs = {};
+                            let storedRecentlyViewed = window.localStorage.recentlyViewed;
+                            if (storedRecentlyViewed) {
+                                var slugs = JSON.parse(storedRecentlyViewed);
+                                var updatedSlugs = {};
 
-                            slugs.forEach(slug => {
-                                updatedSlugs[slug] = {};
-                            });
+                                slugs.forEach(slug => {
+                                    updatedSlugs[slug] = {};
+                                });
 
-                            return updatedSlugs;
+                                return updatedSlugs;
+                            }
                         })(),
                     }
                 },
 
                 created: function () {
+                    // @TODO:- current product and recentlyViewed
+
                     for (slug in this.recentlyViewed) {
                         if (slug) {
                             this.$http(`${this.baseURL}/product-details/${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 972100c48..79933d378 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
@@ -42,7 +42,7 @@
     <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" onchange="window.location.href = this.value">
+            <select class="selective-div border-normal" onchange="window.location.href = this.value">
 
                 @foreach ($toolbarHelper->getAvailableOrders() as $key => $order)
 
@@ -58,7 +58,7 @@
     <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" onchange="window.location.href = this.value" style="width: 57px;">
+        <select class="selective-div border-normal" onchange="window.location.href = this.value" style="width: 57px;">
 
             @foreach ($toolbarHelper->getAvailableLimits() as $limit)
 
diff --git a/packages/Webkul/Velocity/src/Resources/views/products/view.blade.php b/packages/Webkul/Velocity/src/Resources/views/products/view.blade.php
index ea67efb09..f609f82a6 100644
--- a/packages/Webkul/Velocity/src/Resources/views/products/view.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/products/view.blade.php
@@ -29,7 +29,7 @@
             margin-top: 0px;
         }
 
-        .categories-sidebar-container {
+        .general-container {
             margin-bottom: 0px;
         }
     </style>
@@ -84,7 +84,7 @@
 
                                         @include ('shop::products.add-to-cart', [
                                             'product' => $product,
-                                            'showCartIcon' => false
+                                            'showCartIcon' => false,
                                         ])
                                     </div>
 
@@ -201,7 +201,7 @@
                 if (existingViewed.indexOf(currentProductId) == -1) {
                     existingViewed.push(currentProductId);
 
-                    if (existingViewed.length >= 4)
+                    if (existingViewed.length > 4)
                         existingViewed = existingViewed.slice(Math.max(existingViewed.length - 4, 1));
 
                     window.localStorage.setItem('recentlyViewed', JSON.stringify(existingViewed));
diff --git a/packages/Webkul/Velocity/src/Resources/views/products/wishlist.blade.php b/packages/Webkul/Velocity/src/Resources/views/products/wishlist.blade.php
index fa5524dae..367b181fe 100755
--- a/packages/Webkul/Velocity/src/Resources/views/products/wishlist.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/products/wishlist.blade.php
@@ -7,7 +7,7 @@
         @endphp
 
         <a
-            class="unset wishlist-icon col-4 offset-4 text-right"
+            class="unset wishlist-icon text-right {{ $addWishlistClass ?? '' }}"
             @if (! $isWished)
                 href="{{ route('customer.wishlist.add', $product->product_id) }}"
             @elseif (isset($itemId) && $itemId)
@@ -15,15 +15,41 @@
             @endif
             >
 
-            <i class="fs24 {{ $isWished ? 'rango-heart-fill' : 'rango-heart'}}"></i>
+            <wishlist-component active="{{ !$isWished }}"></wishlist-component>
         </a>
     @endauth
 
     @guest('customer')
         <a
             href="{{ route('customer.session.index') }}"
-            class="unset wishlist-icon col-4 offset-4 text-right">
-            <i class="fs24 rango-heart"></i>
+            class="unset wishlist-icon text-right {{ $addWishlistClass ?? '' }}">
+            <wishlist-component active="false"></wishlist-component>
         </a>
     @endauth
 {!! view_render_event('bagisto.shop.products.wishlist.after') !!}
+
+@push('scripts')
+    <script type="text/x-template" id="wishlist-template">
+        <i
+            :class="`material-icons ${isActive} ${active}`"
+            @mouseover="isActive ? isActive = !isActive : ''"
+            @mouseout="active !== '' && !isActive ? isActive = !isActive : ''">
+
+            @{{ isActive ? 'favorite_border' : 'favorite' }}
+        </i>
+    </script>
+
+    <script type="text/javascript">
+        (() => {
+            Vue.component('wishlist-component', {
+                props: ['active'],
+                template: '#wishlist-template',
+                data: function () {
+                    return {
+                        isActive: this.active
+                    }
+                },
+            });
+        })()
+    </script>
+@endpush
diff --git a/packages/Webkul/Velocity/src/Resources/views/search/search.blade.php b/packages/Webkul/Velocity/src/Resources/views/search/search.blade.php
index a07652ccb..c5f441bdf 100644
--- a/packages/Webkul/Velocity/src/Resources/views/search/search.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/search/search.blade.php
@@ -1,3 +1,5 @@
+@inject ('toolbarHelper', 'Webkul\Product\Helpers\Toolbar')
+
 @extends('shop::layouts.master')
 
 @section('page_title')
@@ -5,28 +7,39 @@
 @endsection
 
 @section('content-wrapper')
-    <section class="search-container cart-details row offset-1">
+    <section class="search-container cart-details row">
+        @if ($results->count())
+            <div class="filters-container col-12">
+                @include ('shop::products.list.toolbar')
+            </div>
+        @endif
+
         @if (! $results)
-            <h1 class="fw6 row col-12">{{  __('shop::app.search.no-results') }}</h1>
+            <h1 class="fw6 col-12">{{  __('shop::app.search.no-results') }}</h1>
         @else
             @if ($results->isEmpty())
-                <h1 class="fw6 row col-12">{{ __('shop::app.products.whoops') }}</h1>
+                <h1 class="fw6 col-12">{{ __('shop::app.products.whoops') }}</h1>
                 <span>{{ __('shop::app.search.no-results') }}</span>
             @else
                 @if ($results->total() == 1)
-                    <h2 class="fw6 row col-12 mb20">
+                    <h2 class="fw6 col-12 mb20">
                         {{ $results->total() }} {{ __('shop::app.search.found-result') }}
                     </h2>
                 @else
-                    <h2 class="fw6 row col-12 mb20">
+                    <h2 class="fw6 col-12 mb20">
                         {{ $results->total() }} {{ __('shop::app.search.found-results') }}
                     </h2>
                 @endif
 
                 @foreach ($results as $productFlat)
-
-                    @include('shop::products.list.card', ['product' => $productFlat->product])
-
+                    @if ($toolbarHelper->getCurrentMode() == 'grid')
+                        @include('shop::products.list.card', ['product' => $productFlat->product])
+                    @else
+                        @include('shop::products.list.card', [
+                            'list' => true,
+                            'product' => $productFlat->product
+                        ])
+                    @endif
                 @endforeach
 
                 @include('ui::datagrid.pagination')