diff --git a/packages/Webkul/Velocity/publishable/assets/css/velocity.css b/packages/Webkul/Velocity/publishable/assets/css/velocity.css
index 1a1fcd1b6..175a0e331 100644
--- a/packages/Webkul/Velocity/publishable/assets/css/velocity.css
+++ b/packages/Webkul/Velocity/publishable/assets/css/velocity.css
@@ -776,11 +776,6 @@
   display: inline-block;
 }
 
-.grid-container {
-  display: block;
-  width: 100%;
-}
-
 .review-page-container {
   padding: 20px;
   position: relative;
@@ -1602,6 +1597,11 @@
   height: 38px;
 }
 
+.account-content .account-layout .account-table-content #datagrid-filters .filter-tag {
+  font-size: 18px;
+  font-weight: 600;
+}
+
 .account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .grid-dropdown-header {
   display: inline-block;
 }
@@ -1640,6 +1640,18 @@
   margin-bottom: 0;
 }
 
+.account-content .account-layout .account-table-content #datagrid-filters ~ table.table thead {
+  font-size: 18px;
+}
+
+.account-content .account-layout .account-table-content #datagrid-filters ~ table.table tbody {
+  font-size: 16px;
+}
+
+.account-content .account-layout .account-table-content #datagrid-filters ~ table.table tbody tr td a {
+  display: block;
+}
+
 .account-content .account-layout .account-table-content #datagrid-filters ~ table.table tbody tr .badge {
   padding: 10px;
   font-size: 12px;
@@ -2499,6 +2511,15 @@
   padding: 0 15px !important;
 }
 
+.full-content-wrapper p > .container-fluid {
+  margin-bottom: 60px;
+  padding: 0 !important;
+}
+
+.full-content-wrapper p > .container-fluid > .row {
+  padding: 0 15px !important;
+}
+
 .slides-container .VueCarousel-pagination {
   bottom: 10px;
   position: absolute;
@@ -3781,6 +3802,14 @@ body::after {
   background-color: #26A37C !important;
 }
 
+.theme-btn:hover, .cart-details .continue-shopping-btn:hover, .account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container button.btn:hover, .account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container .quantity button:hover, .quantity .account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container button:hover, .account-content .account-layout .bottom-toolbar .pagination .page-item:hover, .theme-btn:focus, .cart-details .continue-shopping-btn:focus, .account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container button.btn:focus, .account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container .quantity button:focus, .quantity .account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container button:focus, .account-content .account-layout .bottom-toolbar .pagination .page-item:focus {
+  outline: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  border: 1px solid #247959;
+  background-color: #26A37C !important;
+}
+
 .theme-btn.light, .cart-details .light.continue-shopping-btn, .account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container button.light.btn, .account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container .quantity button.light, .quantity .account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container button.light, .quantity .account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container .bottom-toolbar .pagination button.page-item, .quantity .account-content .account-layout .bottom-toolbar .pagination .account-table-content #datagrid-filters .dropdown-filters .dropdown-container button.page-item, .account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container .bottom-toolbar .pagination .quantity button.page-item, .account-content .account-layout .bottom-toolbar .pagination .quantity .account-table-content #datagrid-filters .dropdown-filters .dropdown-container button.page-item, .account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container .bottom-toolbar .pagination button.btn.page-item, .account-content .account-layout .bottom-toolbar .pagination .account-table-content #datagrid-filters .dropdown-filters .dropdown-container button.btn.page-item, .account-content .account-layout .bottom-toolbar .pagination .page-item {
   color: #26A37C !important;
   background-color: #FFFFFF !important;
@@ -3789,7 +3818,11 @@ body::after {
   border: 1px solid rgba(0, 0, 0, 0.12);
 }
 
-.theme-btn.light:hover, .cart-details .light.continue-shopping-btn:hover, .account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container button.light.btn:hover, .account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container .quantity button.light:hover, .quantity .account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container button.light:hover, .quantity .account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container .bottom-toolbar .pagination button.page-item:hover, .quantity .account-content .account-layout .bottom-toolbar .pagination .account-table-content #datagrid-filters .dropdown-filters .dropdown-container button.page-item:hover, .account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container .bottom-toolbar .pagination .quantity button.page-item:hover, .account-content .account-layout .bottom-toolbar .pagination .quantity .account-table-content #datagrid-filters .dropdown-filters .dropdown-container button.page-item:hover, .account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container .bottom-toolbar .pagination button.btn.page-item:hover, .account-content .account-layout .bottom-toolbar .pagination .account-table-content #datagrid-filters .dropdown-filters .dropdown-container button.btn.page-item:hover, .account-content .account-layout .bottom-toolbar .pagination .page-item:hover {
+.theme-btn.light:hover, .cart-details .light.continue-shopping-btn:hover, .account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container button.light.btn:hover, .account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container .quantity button.light:hover, .quantity .account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container button.light:hover, .quantity .account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container .bottom-toolbar .pagination button.page-item:hover, .quantity .account-content .account-layout .bottom-toolbar .pagination .account-table-content #datagrid-filters .dropdown-filters .dropdown-container button.page-item:hover, .account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container .bottom-toolbar .pagination .quantity button.page-item:hover, .account-content .account-layout .bottom-toolbar .pagination .quantity .account-table-content #datagrid-filters .dropdown-filters .dropdown-container button.page-item:hover, .account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container .bottom-toolbar .pagination button.btn.page-item:hover, .account-content .account-layout .bottom-toolbar .pagination .account-table-content #datagrid-filters .dropdown-filters .dropdown-container button.btn.page-item:hover, .account-content .account-layout .bottom-toolbar .pagination .page-item:hover, .theme-btn.light:focus, .cart-details .light.continue-shopping-btn:focus, .account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container button.light.btn:focus, .account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container .quantity button.light:focus, .quantity .account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container button.light:focus, .quantity .account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container .bottom-toolbar .pagination button.page-item:focus, .quantity .account-content .account-layout .bottom-toolbar .pagination .account-table-content #datagrid-filters .dropdown-filters .dropdown-container button.page-item:focus, .account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container .bottom-toolbar .pagination .quantity button.page-item:focus, .account-content .account-layout .bottom-toolbar .pagination .quantity .account-table-content #datagrid-filters .dropdown-filters .dropdown-container button.page-item:focus, .account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container .bottom-toolbar .pagination button.btn.page-item:focus, .account-content .account-layout .bottom-toolbar .pagination .account-table-content #datagrid-filters .dropdown-filters .dropdown-container button.btn.page-item:focus, .account-content .account-layout .bottom-toolbar .pagination .page-item:focus {
+  outline: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  border: 1px solid #247959;
   background-color: #f5f5f5 !important;
 }
 
@@ -4607,6 +4640,11 @@ button[disabled] {
 }
 
 @media only screen and (max-width: 992px) {
+  body.open-hamburger {
+    color: #7f7f7f;
+    opacity: 0.8;
+    overflow: hidden;
+  }
   .vc-small-screen {
     display: block !important;
   }
@@ -4616,11 +4654,19 @@ button[disabled] {
     background-color: #FFFFFF;
   }
   .main-content-wrapper .vc-header {
+    top: 0;
     margin: 0;
     padding: 0;
+    width: 100%;
+    height: 50px;
+    position: fixed;
+    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);
   }
+  .main-content-wrapper .vc-header + div {
+    margin-top: 50px;
+  }
   .main-content-wrapper .vc-header > div {
     display: none;
   }
@@ -4797,25 +4843,28 @@ button[disabled] {
   .account-content .account-layout .sale-container .order-box-container .box .box-title {
     padding-bottom: 0;
   }
-  .account-content .account-layout .sale-section .section-content .table table thead {
+  .account-content .account-layout .table table thead {
     display: none;
   }
-  .account-content .account-layout .sale-section .section-content .table table tr {
+  .account-content .account-layout .table table tr {
     margin-bottom: 20px;
     border: 1px solid #CCCCCC;
   }
-  .account-content .account-layout .sale-section .section-content .table table tr td {
+  .account-content .account-layout .table table tr td {
     width: 100%;
     display: block;
     border-top: none;
   }
-  .account-content .account-layout .sale-section .section-content .table table tr td:before {
+  .account-content .account-layout .table table tr td:before {
     content: attr(data-value);
     font-size: 15px;
     font-weight: 600;
     display: inline-block;
     width: 120px;
   }
+  .account-content .account-layout .table table tr td .action {
+    display: inline-block;
+  }
   .mini-cart-container {
     display: none;
   }
@@ -4906,11 +4955,13 @@ button[disabled] {
   }
   .category-page-wrapper .category-container .filters-container {
     left: 0px;
-    top: -15px;
+    top: 40px;
     padding: 0;
     width: 100%;
-    position: absolute;
+    z-index: 9;
+    position: fixed;
     padding-bottom: 10px;
+    background-color: #FFFFFF;
     -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.21);
             box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.21);
   }
@@ -4936,6 +4987,7 @@ button[disabled] {
     top: 0px;
     left: 0px;
     width: 75%;
+    opacity: 1;
     z-index: 9999;
     height: 100vh;
     position: fixed;
@@ -4975,6 +5027,7 @@ button[disabled] {
     display: table;
     position: -webkit-sticky;
     position: sticky;
+    color: #111111;
     background-color: #FFFFFF;
     border-bottom: 1px solid #CCCCCC;
   }
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 4b9cc226a..0a2a4e6eb 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/UI.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/UI.scss
@@ -92,9 +92,4 @@
             display: inline-block;
         }
     }
-}
-
-.grid-container {
-    display: block;
-    width: 100%;
 }
\ 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 190e81e6e..5c51a55fe 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss
@@ -878,6 +878,11 @@
                     }
                 }
 
+                .filter-tag {
+                    font-size: 18px;
+                    font-weight: 600;
+                }
+
                 .dropdown-filters {
                     .grid-dropdown-header {
                         display: inline-block;
@@ -926,8 +931,20 @@
 
                 ~ table {
                     &.table {
+                        thead {
+                            font-size: 18px;
+                        }
+
                         tbody {
+                            font-size: 16px;
+
                             tr {
+                                td {
+                                    a {
+                                        display: block;
+                                    }
+                                }
+
                                 .badge {
                                     padding: 10px;
                                     font-size: 12px;
@@ -1885,6 +1902,17 @@
             padding: 0 15px !important;
         }
     }
+
+    p {
+        > .container-fluid {
+            margin-bottom: 60px;
+            padding: 0 !important;
+
+            > .row {
+                padding: 0 15px !important;
+            }
+        }
+    }
 }
 
 .slides-container {
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 d80163d2a..05957de55 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/media.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/media.scss
@@ -52,6 +52,14 @@
 @media only screen and (max-width: 992px) {
     $header-height: 50px;
 
+    body {
+        &.open-hamburger {
+            color: #7f7f7f;
+            opacity: 0.8;
+            overflow: hidden;
+        }
+    }
+
     .main-container-wrapper {
         // position: relative;
     }
@@ -61,17 +69,24 @@
     }
 
     .main-content-wrapper {
-        // top: 0;
         z-index: 100;
         margin-bottom: 25px;
-        // position: sticky !important;
         background-color: $white-color;
 
         .vc-header {
+            top: 0;
             margin: 0;
             padding: 0;
+            width: 100%;
+            height: $header-height;
+            position: fixed;
+            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 {
+                margin-top: $header-height;
+            }
+
             > div {
                 display: none;
             }
@@ -362,31 +377,31 @@
                 }
             }
 
-            .sale-section {
-                .section-content {
-                    .table {
-                        table {
-                            thead {
-                                display: none;
+            .table {
+                table {
+                    thead {
+                        display: none;
+                    }
+
+                    tr {
+                        margin-bottom: 20px;
+                        border: 1px solid $border-common;
+
+                        td {
+                            width: 100%;
+                            display: block;
+                            border-top: none;
+
+                            &:before {
+                                content: attr(data-value);
+                                font-size: 15px;
+                                font-weight: 600;
+                                display: inline-block;
+                                width: 120px;
                             }
 
-                            tr {
-                                margin-bottom: 20px;
-                                border: 1px solid $border-common;
-
-                                td {
-                                    width: 100%;
-                                    display: block;
-                                    border-top: none;
-
-                                    &:before {
-                                        content: attr(data-value);
-                                        font-size: 15px;
-                                        font-weight: 600;
-                                        display: inline-block;
-                                        width: 120px;
-                                    }
-                                }
+                            .action {
+                                display: inline-block;
                             }
                         }
                     }
@@ -540,11 +555,13 @@
 
             .filters-container {
                 left: 0px;
-                top: -15px;
+                top: 40px;
                 padding: 0;
                 width: 100%;
-                position: absolute;
+                z-index: 9;
+                position: fixed;
                 padding-bottom: 10px;
+                background-color: $white-color;
                 box-shadow: 0 2px 4px 0 rgba(0,0,0,0.21);
 
                 .toolbar-wrapper {
@@ -578,6 +595,7 @@
         top: 0px;
         left: 0px;
         width: 75%;
+        opacity: 1;
         z-index: 9999;
         height: 100vh;
         position: fixed;
@@ -619,6 +637,7 @@
                 width: 100%;
                 display: table;
                 position: sticky;
+                color: $black-color;
                 background-color: $white-color;
                 border-bottom: 1px solid $border-common;
 
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 fae3184b9..277a3bd8d 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/shared.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/shared.scss
@@ -256,15 +256,27 @@
     color: $light-color !important;
     background-color: $theme-color !important;
 
+    &:hover,
+    &:focus {
+        outline: none;
+        box-shadow: none;
+        border: 1px solid $theme-dark-color;
+        background-color: $theme-color !important;
+    }
+
     &.light {
         color: $theme-color !important;
         background-color: $light-color !important;
         box-shadow: 0 1px 0 0 #CFCFCF;
         border: 1px solid rgba(0,0,0,0.12);
-    }
 
-    &.light:hover {
-        background-color: #f5f5f5 !important;
+        &:hover,
+        &:focus {
+            outline: none;
+            box-shadow: none;
+            border: 1px solid $theme-dark-color;
+            background-color: #f5f5f5 !important;
+        }
     }
 }
 
diff --git a/packages/Webkul/Velocity/src/Resources/views/shop/UI/particals.blade.php b/packages/Webkul/Velocity/src/Resources/views/shop/UI/particals.blade.php
index 261f0bb1c..cf9ed29af 100644
--- a/packages/Webkul/Velocity/src/Resources/views/shop/UI/particals.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/shop/UI/particals.blade.php
@@ -303,6 +303,24 @@
                                         @click="toggleMetaInfo('currencies')">
                                     </i>
                                 </li>
+
+                                <li>
+                                    @auth('customer')
+                                        <a
+                                            class="unset"
+                                            href="{{ route('customer.session.destroy') }}">
+                                            <span>{{ __('shop::app.header.logout') }}</span>
+                                        </a>
+                                    @endauth
+
+                                    @guest('customer')
+                                        <a
+                                            class="unset"
+                                            href="{{ route('customer.session.create') }}">
+                                            <span>{{ __('shop::app.customer.login-form.title') }}</span>
+                                        </a>
+                                    @endguest
+                                </li>
                             </ul>
                         </div>
 
@@ -660,6 +678,16 @@
                 }
             },
 
+            watch: {
+                hamburger: function (value) {
+                    if (value) {
+                        document.body.classList.add('open-hamburger');
+                    } else {
+                        document.body.classList.remove('open-hamburger');
+                    }
+                }
+            },
+
             methods: {
                 openSearchBar: function () {
                     this.isSearchbar = !this.isSearchbar;
@@ -677,20 +705,13 @@
                 },
 
                 toggleHamburger: function () {
-                    this.hamburger = true;
-
-                    // let html = $('#sidebar-categories-template').html();
-
-                    // this.$root.navContainer = true;
-                    // this.$root.responsiveSidebarKey = Math.random();
-
-                    // this.$root.responsiveSidebarTemplate = Vue.compile(html);
+                    this.hamburger = !this.hamburger;
                 },
 
                 closeDrawer: function() {
                     $('.nav-container').hide();
 
-                    this.hamburger = false;
+                    this.toggleHamburger();
                     this.rootCategories = true;
                 },
 
diff --git a/packages/Webkul/Velocity/src/Resources/views/shop/customers/account/profile/index.blade.php b/packages/Webkul/Velocity/src/Resources/views/shop/customers/account/profile/index.blade.php
index 0c46c4a5c..a7c86ea7b 100644
--- a/packages/Webkul/Velocity/src/Resources/views/shop/customers/account/profile/index.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/shop/customers/account/profile/index.blade.php
@@ -150,7 +150,7 @@
 
             <button
                 type="submit"
-                class="theme-btn">
+                class="theme-btn mb20">
                 {{ __('velocity::app.shop.general.update') }}
             </button>
         </form>
diff --git a/packages/Webkul/Velocity/src/Resources/views/shop/home/category.blade.php b/packages/Webkul/Velocity/src/Resources/views/shop/home/category.blade.php
index b920a6f91..a15836a8a 100644
--- a/packages/Webkul/Velocity/src/Resources/views/shop/home/category.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/shop/home/category.blade.php
@@ -16,7 +16,7 @@
 
 @push('scripts')
     <script type="text/x-template" id="category-products-template">
-        <div class="container-fluid">
+        <div class="container-fluid remove-padding-margin">
             <card-list-header
                 view-all="{{ route('shop.productOrCategory.index', $categoryDetails->slug) }}"
                 heading="{{ $categoryDetails->name }}">
diff --git a/packages/Webkul/Velocity/src/Resources/views/shop/home/index.blade.php b/packages/Webkul/Velocity/src/Resources/views/shop/home/index.blade.php
index 555ba3ad8..5e2d374b1 100644
--- a/packages/Webkul/Velocity/src/Resources/views/shop/home/index.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/shop/home/index.blade.php
@@ -61,27 +61,4 @@
         {{ view_render_event('bagisto.shop.home.content.after') }}
     </div>
 
-@endsection
-
-    <!-- offers and sale logos -->
-    {{-- @include('shop::home.advertisements.advertisement-one') --}}
-
-    <!-- Show Product Policy -->
-    {{-- @include('shop::home.product-policy') --}}
-
-    <!-- advertisement two -->
-    {{-- @include('shop::home.advertisements.advertisement-two') --}}
-
-    <!-- hot categories -->
-    {{-- @include('shop::home.hot-categories') --}}
-
-    <!-- Advertisement three -->
-    {{-- @include('shop::home.advertisements.advertisement-three') --}}
-
-    {{-- currently no customer reviews for the shop --}}
-
-    <!-- show customer reviews -->
-    {{-- @include('shop::home.customer-reviews') --}}
-
-    <!-- show popular categories -->
-    {{-- @include('shop::home.popular-categories') --}}
+@endsection
\ No newline at end of file
diff --git a/packages/Webkul/Velocity/src/Resources/views/shop/products/list/toolbar.blade.php b/packages/Webkul/Velocity/src/Resources/views/shop/products/list/toolbar.blade.php
index cc123b9ef..e2215ad6a 100644
--- a/packages/Webkul/Velocity/src/Resources/views/shop/products/list/toolbar.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/shop/products/list/toolbar.blade.php
@@ -80,10 +80,12 @@
         <div class="toolbar-wrapper row col-12 remove-padding-margin" v-else>
             <div v-if="layeredNavigation" class="nav-container scrollable">
                 <div class="header drawer-section">
-                    <i class="material-icons" @click="layeredNavigation = false">keyboard_backspace</i>
+                    <i class="material-icons" @click="toggleLayeredNavigation">keyboard_backspace</i>
 
-                    <span class="fs24 fw6">{{ __('velocity::app.shop.general.filter') }}</span>
-                    {{-- <span class="pull-right link-color" @click="layeredNavigation = false">Done</span> --}}
+                    <span class="fs24 fw6">
+                        {{ __('velocity::app.shop.general.filter') }}
+                    </span>
+                    {{-- <span class="pull-right link-color" @click="toggleLayeredNavigation">Done</span> --}}
                 </div>
 
                 @include ('shop::products.list.layered-navigation')
@@ -142,13 +144,23 @@
                     }
                 },
 
+                watch: {
+                    layeredNavigation: function (value) {
+                        if (value) {
+                            document.body.classList.add('open-hamburger');
+                        } else {
+                            document.body.classList.remove('open-hamburger');
+                        }
+                    }
+                },
+
                 methods: {
                     toggleLayeredNavigation: function ({event, actionType}) {
                         // this.$root.navContainer = true;
                         // this.$root.responsiveSidebarTemplate = `<div slot="sidebar-body">
                         //     Hello World
                         // </div>`;
-                        this.layeredNavigation = true;
+                        this.layeredNavigation = !this.layeredNavigation;
                     }
                 }
             })