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 aa44736c3..bb439ca78 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/UI.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/UI.scss
@@ -157,39 +157,41 @@
             }
         }
 
-        .sub-category {
-            border-top: 1px solid rgba(0,0,0,0.24);
-            border-bottom: 1px solid rgba(0,0,0,0.24);
-            font-weight: 520;
-            display: none;
-            letter-spacing: 0.2px;
+    //    can work with layered navigation class
+        // .sub-category {
+        //     border: 1px solid blue;
+        //     border-top: 1px solid rgba(0,0,0,0.24);
+        //     border-bottom: 1px solid rgba(0,0,0,0.24);
+        //     font-weight: 520;
+        //     display: none;
+        //     letter-spacing: 0.2px;
 
-            .category-icon {
-                width: 25px;
-                height: 20px;
-                padding-right: 5px;
-                display: inline-block;
+        //     .category-icon {
+        //         width: 25px;
+        //         height: 20px;
+        //         padding-right: 5px;
+        //         display: inline-block;
 
-                img {
-                    width: 100%;
-                    height: 100%;
-                    vertical-align: text-top;
-                }
-            }
+        //         img {
+        //             width: 100%;
+        //             height: 100%;
+        //             vertical-align: text-top;
+        //         }
+        //     }
 
-            li {
-                font-size: 14px;
-                margin : 16px 0px 16px 15px;
-                font-weight: 400px;
-                i {
-                    float: right;
-                    font-size: 16px;
-                    margin: 3px 20px 0px 0px;
+        //     li {
+        //         font-size: 14px;
+        //         margin : 16px 0px 16px 15px;
+        //         font-weight: 400px;
+        //         i {
+        //             float: right;
+        //             font-size: 16px;
+        //             margin: 3px 20px 0px 0px;
 
 
-                }
-            }
-        }
+        //         }
+        //     }
+        // }
 
         .greeting {
             display: table;
@@ -220,6 +222,8 @@
             line-height: 20px;
             font-weight: 530;
             border-top: 1px solid rgba(0,0,0,0.24);
+            border-bottom: 1px solid rgba(0,0,0,0.24);
+
             li {
                 font-size: 16px;
                 margin : 16px 0px 16px 15px;
@@ -227,14 +231,14 @@
         }
 
         .layered-category{
-            border-top: 1px solid rgba(0,0,0,0.24);
-            font-weight: 520;
+            font-weight: 501;
             letter-spacing: 0.2px;
+            margin: 16px 0px 0px 0px;
 
             .category-icon {
-                width: 25px;
+                width: 36px;
                 height: 20px;
-                padding-right: 5px;
+                padding-left: 12px;
                 display: inline-block;
 
                 img {
@@ -245,15 +249,22 @@
             }
 
             li {
-                font-size: 14px;
-                margin : 16px 0px 16px 15px;
-                font-weight: 400px;
+                margin: 18px 0px 18px 5px;
+                font-size: 17px;
+                a {
+                    span {
+                        color: black;
+                        font-size: 14px;
+                        margin : 16px 0px 16px 15px !important;
+                        font-weight: 400px;
+                    }
+                }
+
+
                 i {
                     float: right;
                     font-size: 16px;
                     margin: 3px 20px 0px 0px;
-
-
                 }
             }
         }
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 92c9db5ef..f7973f3a1 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
@@ -232,6 +232,53 @@
                 top: 60px;
                 position: sticky;
             }
+
+            .right {
+                .swatch-container {
+                    margin-top: 10px;
+                    display: inline-block;
+
+                    .swatch {
+                        display: inline-block;
+                        margin-right: 5px;
+                        min-width: 40px;
+                        height: 40px;
+
+                        span {
+                            min-width: 38px;
+                            height: 38px;
+                            float: left;
+                            border: 1px solid #C7C7C7;
+                            border-radius: 3px;
+                            line-height: 36px;
+                            text-align: center;
+                            cursor: pointer;
+                            padding: 0 10px;
+                        }
+
+                        img {
+                            width: 38px;
+                            height: 38px;
+                            border: 1px solid #C7C7C7;
+                            border-radius: 3px;
+                            cursor: pointer;
+                            background: rgb(242, 242, 242);
+                        }
+
+                        input:checked + span, input:checked + img {
+                            border: 1px solid #242424;
+                        }
+
+                        input {
+                            display: none;
+                        }
+                    }
+
+                    .no-options {
+                        color: rgb(251, 57, 73);
+                    }
+                }
+            }
         }
     }
 
@@ -256,4 +303,5 @@
         height: 100%;
         max-height: 300px;
     }
-}
\ No newline at end of file
+}
+
diff --git a/packages/Webkul/Velocity/src/Resources/views/UI/shared/responsive-header.blade.php b/packages/Webkul/Velocity/src/Resources/views/UI/shared/responsive-header.blade.php
index 7022c054c..75e5103da 100644
--- a/packages/Webkul/Velocity/src/Resources/views/UI/shared/responsive-header.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/UI/shared/responsive-header.blade.php
@@ -1,24 +1,18 @@
+{!! view_render_event('bagisto.shop.layout.header.category.before') !!}
+
 @php
     $velocityContent = app('Webkul\Velocity\Repositories\ContentRepository')->getAllContents();
+
+    $categories = [];
+
+    foreach (app('Webkul\Category\Repositories\CategoryRepository')->getVisibleCategoryTree(core()->getCurrentChannel()->root_category_id) as $category) {
+        if ($category->slug)
+            array_push($categories, $category);
+    }
 @endphp
 
 <div class="nav-container">
     <div class="wrapper">
-        <div class="category-title">
-            <span>
-                <i class="material-icons" onclick="closeSubCategory()">chevron_left</i>
-                    Mens
-            </span>
-        </div>
-
-        <div class="sub-category">
-            <ul type="none">
-                <li>Top</li>
-
-                <li>Bottom</li>
-            </ul>
-        </div>
-
         <div class="greeting">
             <i class="material-icons">perm_identity</i>
             <span>
@@ -35,8 +29,6 @@
 
         <div class="offers">
             <ul type="none">
-
-
                 @foreach ($velocityContent as $index => $content)
                     <li>{{ $content->title }}</li>
                 @endforeach
@@ -44,44 +36,136 @@
         </div>
 
         <div class="layered-category">
-            <ul type="none">
-                @foreach ($categories as $index => $category)
-                    <li>
-                        @if($category->category_icon_path)
-                            <img
-                                class="category-icon"
-                                src="{{ asset('storage/' . $category->category_icon_path) }}"/>
-                        @endif
-
-                        {{ $category->name }}
-
-                        @if(sizeof($category->children) > 0)
-                            <i class="material-icons" onclick="openSubCategory()">chevron_right</i>
-                        @endif
-                    </li>
-                @endforeach
-            </ul>
+            <category-nav categories='@json($categories)' url="{{url()->to('/')}}"></category-nav>
         </div>
     </div>
 </div>
 
+{!! view_render_event('bagisto.shop.layout.header.category.after') !!}
+
+
 @push('scripts')
+    <script type="text/x-template" id="category-nav-template">
 
-<script type="text/javascript">
+        <ul type="none">
+            <category-item
+                v-for="(item, index) in items"
+                :key="index"
+                :url="url"
+                :item="item"
+                :parent="index">
+            </category-item>
+        </ul>
 
-    function openSubCategory() {
-        $('.greeting, .offers, .layered-category').hide();
-        $('.sub-category, .category-title').show();
-    }
+    </script>
 
-    function closeSubCategory() {
-        $('.greeting, .offers, .layered-category').show();
-        $('.sub-category, .category-title').hide();
-    }
+    <script>
+        Vue.component('category-nav', {
 
-    // function closeDrawer() {
-    //     $('.nav-container').hide();
-    // }
-</script>
+            template: '#category-nav-template',
 
+            props: {
+                categories: {
+                    type: [Array, String, Object],
+                    required: false,
+                    default: (function () {
+                        return [];
+                    })
+                },
+
+                url: String
+            },
+
+            data: function(){
+                return {
+                    items_count:0
+                };
+            },
+
+            computed: {
+                items: function() {
+                    return JSON.parse(this.categories)
+                }
+            },
+        });
+    </script>
+
+    <script type="text/x-template" id="category-item-template">
+        <li>
+            <img
+                class="category-icon"
+                src="{{ asset('storage/'.$category->category_icon_path) }}"/>
+
+            <a class="category-name" :href="url+'/'+this.item['translations'][0].url_path">
+                <span>@{{ name }}</span>
+            </a>
+
+            <!-- <i class="material-icons"
+                v-if="haveChildren && item.parent_id != null"
+                @click="showOrHide(item.id)">
+                    chevron_right
+            </i> -->
+
+            <!--
+            <div class="sub-category" v-if="haveChildren && show">
+                @include('shop::UI.shared.subCategories-header', [
+                    'category_id' => 12
+                    ])
+                -->
+            </div>
+        </li>
+    </script>
+
+    <script>
+        Vue.component('category-item', {
+
+            template: '#category-item-template',
+
+            props: {
+                item:  Object,
+                url: String,
+            },
+
+            data: function() {
+                return {
+                    items_count:0,
+                    show: false,
+                };
+            },
+
+            computed: {
+                haveChildren: function() {
+                    return this.item.children.length ? true : false;
+                },
+
+                name: function() {
+                    if (this.item.translations && this.item.translations.length) {
+                        this.item.translations.forEach(function(translation) {
+                            if (translation.locale == document.documentElement.lang)
+                                return translation.name;
+                        });
+                    }
+                    return this.item.name;
+                },
+            },
+
+            methods: {
+                showOrHide: function(id) {
+                    $('.category-name').html("").hide();
+                    $("img").attr("src", "").hide();
+                    $(".demo").html("").hide();
+                    this.item.children = this.item;
+                    this.show = true;
+                    $('.greeting, .offers').hide();
+                }
+            }
+        });
+    </script>
+
+    <script type="text/javascript">
+        function closeSubCategory() {
+            $('.greeting, .offers, .layered-category').show();
+            $('.sub-category, .sub-category').hide();
+        }
+    </script>
 @endpush
\ No newline at end of file
diff --git a/packages/Webkul/Velocity/src/Resources/views/UI/shared/subCategories-header.blade.php b/packages/Webkul/Velocity/src/Resources/views/UI/shared/subCategories-header.blade.php
new file mode 100644
index 000000000..3aa49ec8b
--- /dev/null
+++ b/packages/Webkul/Velocity/src/Resources/views/UI/shared/subCategories-header.blade.php
@@ -0,0 +1,62 @@
+@php
+    $category = app('Webkul\Category\Repositories\CategoryRepository');
+    $categoryData = $category->find($category_id);
+    $categoryNestedData = $category->getVisibleCategoryTree($category_id);
+@endphp
+
+    <child-category></child-category>
+
+    <script type="text/x-template" id="child-category-template">
+        <i class="material-icons">chevron_right</i>
+
+        <h1>{{ $categoryData->name }}</h1>
+
+        @foreach($categoryNestedData as $index => $childrens)
+            <li>
+                {{ $childrens->name }}
+
+                @if($childrens->children && sizeof($childrens->children) > 0)
+                    <i class="material-icons"
+                        onclick="showOrHide()">
+                            chevron_right
+                    </i>
+                @endif
+
+            </li>
+        @endforeach
+    </script>
+
+   @push('scripts')
+        <script>
+            Vue.component('child-category', {
+
+                template: '#child-category-template',
+
+                data: function() {
+                    return {
+                        categoryName: ''
+                    };
+                },
+
+                mounted: function() {
+                    this.categoryName = "menswear";
+                },
+
+                created: function() {
+
+                },
+
+                methods: {
+                    showOrHide: function(id) {
+                        alert(id);
+                    }
+                }
+            });
+        </script>
+
+        <script type=text/javascript>
+            function showOrHide() {
+                alert("showOrHide");
+            }
+        </script>
+   @endpush
\ No newline at end of file
diff --git a/packages/Webkul/Velocity/src/Resources/views/checkout/onepage/customer-new-form.blade.php b/packages/Webkul/Velocity/src/Resources/views/checkout/onepage/customer-new-form.blade.php
index 349a55be4..0926214ca 100644
--- a/packages/Webkul/Velocity/src/Resources/views/checkout/onepage/customer-new-form.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/checkout/onepage/customer-new-form.blade.php
@@ -2,7 +2,6 @@
     $isCustomer = auth()->guard('customer')->check();
 @endphp
 
-<form>
     @if (isset($shipping) && $shipping)
         <div :class="`row col-12 ${errors.has('address-form.shipping[first_name]') ? 'has-error' : ''}`">
             <label for="shipping[first_name]" class="required">
@@ -494,5 +493,4 @@
             @php
             @endphp
         @endauth
-    @endif
-</form>
+    @endif
\ No newline at end of file