diff --git a/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/mini-cart.vue b/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/mini-cart.vue
index 5e7bd219f..93a554e0f 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/mini-cart.vue
+++ b/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/mini-cart.vue
@@ -40,11 +40,11 @@
             </div>
 
             <div class="modal-footer">
-                <h2 class="col-6 text-left fw6">
+                <h5 class="col-6 text-left fw6">
                     {{ subtotalText }}
-                </h2>
+                </h5>
 
-                <h2 class="col-6 text-right fw6 no-padding">{{ cartInformation.base_sub_total }}</h2>
+                <h5 class="col-6 text-right fw6 no-padding">{{ cartInformation.base_sub_total }}</h5>
             </div>
 
             <div class="modal-footer">
@@ -64,6 +64,12 @@
     </div>
 </template>
 
+<style lang="scss">
+    .hide {
+        display: none !important;
+    }
+</style>
+
 <script>
     export default {
         props: [
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/_variables.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/_variables.scss
index 13f536917..ebcf6f5e5 100755
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/_variables.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/_variables.scss
@@ -4,7 +4,7 @@
 */
 @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap');
 
-//velocity variables
+/* velocity variables */
 $white-color: #FFFFFF;
 $black-color: #111111;
 $font-color: rgba(0,0,0,0.83);
@@ -30,9 +30,10 @@ $light-link-color: #28557B;
 $grey-clr: rgba(0,0,0,0.53);
 $light-grey-clr: rgb(158, 158, 158);
 $light-background: #F7F7F9;
+
+/* other stuffs */
 $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;
+$material-icons-font-path: '../material-icons/iconfont/' !default;
 $border-normal: 1px solid $border-dark;
-
 $font-family-pro: 'Source Sans Pro', sans-serif;
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/app.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/app.scss
index 17fbc2f89..0307f6d61 100755
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/app.scss
@@ -541,6 +541,7 @@ header {
                     padding: 4px;
                     min-width: 20px;
                     position: absolute;
+                    color: $font-color-light;
                     background: $button-primary-bg;
                 }
             }
@@ -885,7 +886,7 @@ header {
     text-align: center;
     vertical-align: middle;
     border-radius: 50%;
-    background: #21a179;
+    background: $button-primary-bg;
     color: #fff;
     padding: 16px;
     font: 18px "josefin sans", arial;
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 451ad2605..efc3b18f6 100755
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss
@@ -230,7 +230,7 @@
 }
 
 .product-card-new {
-    width: 19rem;
+    width: 12rem;
     height: 385px;
     border: none !important;
     margin: 0 5px 10px 10px;
@@ -555,7 +555,8 @@
             min-width: 20px;
             border-radius: 50%;
             position: relative;
-            background: #21A179;
+            color: $white-color;
+            background: $button-primary-bg;
         }
     }
 }
@@ -574,6 +575,7 @@
             padding: 4px;
             min-width: 20px;
             position: absolute;
+            color: $white-color;
             background: $button-primary-bg;
         }
     }
@@ -641,7 +643,7 @@
         .rango-close {
             top: -10px;
             left: -10px;
-            padding: 3px 4px 3px 3px;
+            padding: 0px 4px 3px 3px;
             font-size: 10px;
             max-height: 17px;
             line-height: 1.3rem;
@@ -2051,7 +2053,7 @@
 .category-container,
 .search-container {
     .grid-card {
-        width: 22rem;
+        width: 15rem;
     }
 }
 
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 6bdf0b55c..73abaca66 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/home.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/home.scss
@@ -1,4 +1,3 @@
-
 body {
     display: none;
     overflow-x: hidden;
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 093680c86..f2b18813d 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/shared.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/shared.scss
@@ -233,7 +233,6 @@
 
 .full-width {
     width: 100%;
-    display: block;
 }
 
 .full-image {
diff --git a/packages/Webkul/Velocity/src/Resources/views/shop/checkout/cart/index.blade.php b/packages/Webkul/Velocity/src/Resources/views/shop/checkout/cart/index.blade.php
index 92706845d..e156870c8 100644
--- a/packages/Webkul/Velocity/src/Resources/views/shop/checkout/cart/index.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/shop/checkout/cart/index.blade.php
@@ -30,7 +30,7 @@
     <script type="text/x-template" id="cart-template">
         <div class="container">
             <section class="cart-details row no-margin col-12">
-                <h1 class="fw6 col-12">{{ __('shop::app.checkout.cart.title') }}</h1>
+                <h2 class="fw6 col-12">{{ __('shop::app.checkout.cart.title') }}</h2>
 
                 @if ($cart)
                     <div class="cart-details-header col-lg-6 col-md-12">
diff --git a/packages/Webkul/Velocity/src/Resources/views/shop/guest/compare/compare-products.blade.php b/packages/Webkul/Velocity/src/Resources/views/shop/guest/compare/compare-products.blade.php
index 38beacfd5..296dae42f 100644
--- a/packages/Webkul/Velocity/src/Resources/views/shop/guest/compare/compare-products.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/shop/guest/compare/compare-products.blade.php
@@ -10,9 +10,9 @@
 @push('scripts')
     <script type="text/x-template" id="compare-product-template">
         <section class="cart-details row no-margin col-12">
-            <h1 class="fw6 col-6">
+            <h2 class="fw6 col-6">
                 {{ __('velocity::app.customer.compare.compare_similar_items') }}
-            </h1>
+            </h2>
 
             <div class="col-6" v-if="products.length > 0">
                 <button
@@ -52,7 +52,7 @@
                                 @switch ($attribute['code'])
                                     @case('name')
                                         <a :href="`${$root.baseUrl}/${product.url_key}`" class="unset remove-decoration active-hover">
-                                            <h1 class="fw6 fs18" v-text="product['{{ $attribute['code'] }}']"></h1>
+                                            <h2 class="fw6 fs18" v-text="product['{{ $attribute['code'] }}']"></h2>
                                         </a>
                                         @break
 
diff --git a/packages/Webkul/Velocity/src/Resources/views/shop/layouts/master.blade.php b/packages/Webkul/Velocity/src/Resources/views/shop/layouts/master.blade.php
index 343c5db0b..17edcf5a8 100644
--- a/packages/Webkul/Velocity/src/Resources/views/shop/layouts/master.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/shop/layouts/master.blade.php
@@ -9,8 +9,10 @@
 <html lang="{{ app()->getLocale() }}">
 
     <head>
+        {{-- title --}}
         <title>@yield('page_title')</title>
 
+        {{-- meta data --}}
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="csrf-token" content="{{ csrf_token() }}">
@@ -19,12 +21,22 @@
 
         {!! view_render_event('bagisto.shop.layout.head') !!}
 
+        {{-- for extra head data --}}
         @yield('head')
 
+        {{-- seo meta data --}}
         @section('seo')
             <meta name="description" content="{{ core()->getCurrentChannel()->description }}"/>
         @show
 
+        {{-- fav icon --}}
+        @if ($favicon = core()->getCurrentChannel()->favicon_url)
+            <link rel="icon" sizes="16x16" href="{{ $favicon }}" />
+        @else
+            <link rel="icon" sizes="16x16" href="{{ asset('/themes/velocity/assets/images/static/v-icon.png') }}" />
+        @endif
+
+        {{-- all styles --}}
         @include('shop::layouts.styles')
     </head>
 
diff --git a/packages/Webkul/Velocity/src/Resources/views/shop/layouts/styles.blade.php b/packages/Webkul/Velocity/src/Resources/views/shop/layouts/styles.blade.php
index 19b95e536..e69b0004f 100644
--- a/packages/Webkul/Velocity/src/Resources/views/shop/layouts/styles.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/shop/layouts/styles.blade.php
@@ -1,15 +1,10 @@
-<link rel="stylesheet" href="{{ asset('themes/velocity/assets/css/velocity.css') }}" />
 <link rel="stylesheet" href="{{ asset('themes/velocity/assets/css/bootstrap.min.css') }}" />
 
 @if (core()->getCurrentLocale() && core()->getCurrentLocale()->direction == 'rtl')
     <link href="{{ asset('themes/velocity/assets/css/bootstrap-flipped.css') }}" rel="stylesheet">
 @endif
 
-@if ($favicon = core()->getCurrentChannel()->favicon_url)
-    <link rel="icon" sizes="16x16" href="{{ $favicon }}" />
-@else
-    <link rel="icon" sizes="16x16" href="{{ asset('/themes/velocity/assets/images/static/v-icon.png') }}" />
-@endif
+<link rel="stylesheet" href="{{ asset('themes/velocity/assets/css/velocity.css') }}" />
 
 @stack('css')
 
diff --git a/packages/Webkul/Velocity/src/Resources/views/shop/products/index.blade.php b/packages/Webkul/Velocity/src/Resources/views/shop/products/index.blade.php
index 20cd6c9b8..7780a789d 100644
--- a/packages/Webkul/Velocity/src/Resources/views/shop/products/index.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/shop/products/index.blade.php
@@ -69,7 +69,7 @@
             <div class="category-container right">
                 <div class="row remove-padding-margin">
                     <div class="pl0 col-12">
-                        <h1 class="fw6 mb10">{{ $category->name }}</h1>
+                        <h2 class="fw6 mb10">{{ $category->name }}</h2>
 
                         @if ($isDescriptionDisplayMode)
                             @if ($category->description)
diff --git a/packages/Webkul/Velocity/src/Resources/views/shop/products/list/layered-navigation.blade.php b/packages/Webkul/Velocity/src/Resources/views/shop/products/list/layered-navigation.blade.php
index c73649d61..fa5d580ad 100644
--- a/packages/Webkul/Velocity/src/Resources/views/shop/products/list/layered-navigation.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/shop/products/list/layered-navigation.blade.php
@@ -45,9 +45,9 @@
     <script type="text/x-template" id="layered-navigation-template">
         <div v-if="attributes.length > 0">
 
-            <h3 class="filter-title fw6 mb20">
+            <h5 class="filter-title fw6 mb20">
                 {{ __('shop::app.products.layered-nav-title') }}
-            </h3>
+            </h5>
 
             <div class="filter-content">
                 <div class="filter-attributes">
@@ -68,7 +68,7 @@
     <script type="text/x-template" id="filter-attribute-item-template">
         <div :class="`cursor-pointer filter-attributes-item ${active ? 'active' : ''}`">
             <div class="filter-attributes-title" @click="active = !active">
-                <h4 class="fw6 display-inbl">@{{ attribute.name ? attribute.name : attribute.admin_name }}</h4>
+                <h6 class="fw6 display-inbl">@{{ attribute.name ? attribute.name : attribute.admin_name }}</h6>
 
                 <div class="float-right display-table">
                     <span class="link-color cursor-pointer" v-if="appliedFilters.length" @click.stop="clearFilters()">
diff --git a/packages/Webkul/Velocity/src/Resources/views/shop/search/search.blade.php b/packages/Webkul/Velocity/src/Resources/views/shop/search/search.blade.php
index 714578969..f35df7b04 100644
--- a/packages/Webkul/Velocity/src/Resources/views/shop/search/search.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/shop/search/search.blade.php
@@ -21,7 +21,7 @@
             position: absolute;
         }
 
-        
+
         @media only screen and (max-width: 992px) {
             .main-content-wrapper .vc-header {
                 box-shadow: unset;
@@ -37,11 +37,11 @@
             }
 
             .quick-view-btn-container,
-            .rango-zoom-plus, 
+            .rango-zoom-plus,
             .quick-view-in-list {
                 display: none;
             }
-            
+
         }
     </style>
 @endpush
@@ -93,10 +93,10 @@
             @endif
 
             @if (! $results)
-                <h1 class="fw6 col-12">{{ __('shop::app.search.no-results') }}</h1>
+                <h2 class="fw6 col-12">{{ __('shop::app.search.no-results') }}</h2>
             @else
                 @if ($results->isEmpty())
-                    <h1 class="fw6 col-12">{{ __('shop::app.products.whoops') }}</h1>
+                    <h2 class="fw6 col-12">{{ __('shop::app.products.whoops') }}</h2>
                     <span class="col-12">{{ __('shop::app.search.no-results') }}</span>
                 @else
                     @if ($results->total() == 1)