diff --git a/packages/Webkul/Shop/src/Resources/assets/js/components/category-nav.vue b/packages/Webkul/Shop/src/Resources/assets/js/components/category-nav.vue
index baeaeffd3..286ff15cf 100644
--- a/packages/Webkul/Shop/src/Resources/assets/js/components/category-nav.vue
+++ b/packages/Webkul/Shop/src/Resources/assets/js/components/category-nav.vue
@@ -1,6 +1,5 @@
 <template>
     <ul class="nav">
-
         <category-item
             v-for="(item, index) in items"
             :key="index"
@@ -8,11 +7,11 @@
             :item="item"
             :parent="index">
         </category-item>
+
         <li>
             <img src="http://localhost/bagisto/public/vendor/webkul/shop/assets/images/offer-zone.svg"/>
             <span>Offer Zone</span>
         </li>
-
     </ul>
 </template>
 
diff --git a/packages/Webkul/Shop/src/Resources/lang/en/app.php b/packages/Webkul/Shop/src/Resources/lang/en/app.php
index 506cbf70a..5711f9dc2 100644
--- a/packages/Webkul/Shop/src/Resources/lang/en/app.php
+++ b/packages/Webkul/Shop/src/Resources/lang/en/app.php
@@ -2,9 +2,11 @@
 
 return [
     'home' => [
+        'page-title' => 'Bagisto - Home',
         'featured-products' => 'Featured Products',
         'new-products' => 'New Products'
     ],
+
     'customer' => [
         'signup-text' => [
             'account_exists' => 'Already have an account',
@@ -80,13 +82,28 @@ return [
                 'index' => [
                     'page-title' => 'Customer - Address',
                     'title' => 'Address',
+                    'add' => 'Add Address',
                     'edit' => 'Edit',
                     'empty' => 'You don\'t have any saved addresses here, please create a new one by clicking the link below.',
                     'create' => 'Create Address',
                 ],
 
-                'edit' => [
+                'create' => [
+                    'page-title' => 'Customer - Add Address Form',
+                    'title' => 'Add Address',
+                    'address1' => 'Address Line 1',
+                    'address2' => 'Address Line 2',
+                    'country' => 'Country',
+                    'state' => 'State',
+                    'city' => 'City',
+                    'postcode' => 'Postal Code',
+                    'submit' => 'Create Address'
+                ],
 
+                'edit' => [
+                    'page-title' => 'Customer - Edit Address',
+                    'title' => 'Edit Address',
+                    'submit' => 'Edit Address'
                 ]
             ]
         ]
diff --git a/packages/Webkul/Shop/src/Resources/views/customers/account/address/address.blade.php b/packages/Webkul/Shop/src/Resources/views/customers/account/address/address.blade.php
index abe42bc41..2231f3d9b 100644
--- a/packages/Webkul/Shop/src/Resources/views/customers/account/address/address.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/customers/account/address/address.blade.php
@@ -15,11 +15,13 @@
         <div class="section-head">
             <span class="profile-heading">{{ __('shop::app.customer.account.address.index.title') }}</span>
 
+            @if(!$address->isEmpty())
             <span class="profile-edit">
                 <a href="{{ route('customer.address.edit') }}">
                     {{ __('shop::app.customer.account.address.index.edit') }}
                 </a>
             </span>
+            @endif
             <div class="horizontal-rule"></div>
         </div>
 
@@ -27,37 +29,37 @@
             @if($address->isEmpty())
                 <div>{{ __('shop::app.customer.account.address.index.empty') }}</div>
                 <br/>
-                <a href="{{ route('customer.address.create') }}">Create Address</a>
+                <a href="{{ route('customer.address.create') }}">{{ __('shop::app.customer.account.address.index.add') }}</a>
             @else
                 <table>
                     <tbody>
                         <tr>
-                            <td>Address 1</td>
+                            <td>{{ __('shop::app.customer.account.address.create.address1') }}</td>
                             <td>{{ $address['address1'] }}</td>
                         </tr>
 
                         <tr>
-                            <td>Address 2</td>
+                            <td>{{ __('shop::app.customer.account.address.create.address2') }}</td>
                             <td>{{ $address['address2'] }}</td>
                         </tr>
 
                         <tr>
-                            <td>Country</td>
+                            <td>{{ __('shop::app.customer.account.address.create.country') }}</td>
                             <td>{{ $address['country'] }}</td>
                         </tr>
 
                         <tr>
-                            <td>State</td>
+                            <td>{{ __('shop::app.customer.account.address.create.state') }}</td>
                             <td>{{ $address['state'] }}</td>
                         </tr>
 
                         <tr>
-                            <td>City</td>
+                            <td>{{ __('shop::app.customer.account.address.create.city') }}</td>
                             <td>{{ $address['city'] }}</td>
                         </tr>
 
                         <tr>
-                            <td>Postcode</td>
+                            <td>{{ __('shop::app.customer.account.address.create.postcode') }}</td>
                             <td>{{ $address['postcode'] }}</td>
                         </tr>
                     </tbody>
diff --git a/packages/Webkul/Shop/src/Resources/views/customers/account/address/create.blade.php b/packages/Webkul/Shop/src/Resources/views/customers/account/address/create.blade.php
index e56906a55..67a681b58 100644
--- a/packages/Webkul/Shop/src/Resources/views/customers/account/address/create.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/customers/account/address/create.blade.php
@@ -1,58 +1,58 @@
 @extends('shop::layouts.master')
 @section('page_title')
-Customer - Create Address
+    {{ __('shop::app.customer.account.address.create.page-title') }}
 @endsection
 @section('content-wrapper')
     <div class="account-content">
         @include('shop::customers.account.partials.sidemenu')
 
         <div class="edit-form-content">
-            <div class="section-head">
-                <div class="section-head">Add Address</div>
+            <div class="section-head mb-10">
+                <div class="profile-heading">{{ __('shop::app.customer.account.address.create.title') }}</div>
             </div>
-            <form method="post" action="{{ route('customer.address.create') }}">
+            <form method="post" action="{{ route('customer.address.create') }}" @submit.prevent="onSubmit">
 
                 <div class="edit-form">
                     @csrf
 
                     <div class="control-group" :class="[errors.has('address1') ? 'has-error' : '']">
-                        <label for="first_name">Address Line 1</label>
+                        <label for="address1">{{ __('shop::app.customer.account.address.create.address1') }}</label>
                         <input type="text" class="control" name="address1" v-validate="'required'">
                         <span class="control-error" v-if="errors.has('address1')">@{{ errors.first('address1') }}</span>
                     </div>
 
                     <div class="control-group" :class="[errors.has('address2') ? 'has-error' : '']">
-                        <label for="address2">Address Line 2</label>
+                        <label for="address2">{{ __('shop::app.customer.account.address.create.address2') }}</label>
                         <input type="text" class="control" name="address2" v-validate="'required'">
                         <span class="control-error" v-if="errors.has('address2')">@{{ errors.first('address2') }}</span>
                     </div>
 
                     <div class="control-group" :class="[errors.has('country') ? 'has-error' : '']">
-                        <label for="country">Country</label>
+                        <label for="country">{{ __('shop::app.customer.account.address.create.country') }}</label>
                         <input type="text" class="control" name="country" v-validate="'required'">
                         <span class="control-error" v-if="errors.has('country')">@{{ errors.first('country') }}</span>
                     </div>
 
                     <div class="control-group" :class="[errors.has('state') ? 'has-error' : '']">
-                        <label for="state">State</label>
+                        <label for="state">{{ __('shop::app.customer.account.address.create.state') }}</label>
                         <input type="text" class="control" name="state" v-validate="'required'">
                         <span class="control-error" v-if="errors.has('state')">@{{ errors.first('state') }}</span>
                     </div>
 
                     <div class="control-group" :class="[errors.has('city') ? 'has-error' : '']">
-                        <label for="city">City</label>
+                        <label for="city">{{ __('shop::app.customer.account.address.create.city') }}</label>
                         <input type="text" class="control" name="city" v-validate="'required'">
                         <span class="control-error" v-if="errors.has('city')">@{{ errors.first('city') }}</span>
                     </div>
 
                     <div class="control-group" :class="[errors.has('postcode') ? 'has-error' : '']">
-                        <label for="postcode">Postcode</label>
+                        <label for="postcode">{{ __('shop::app.customer.account.address.create.postcode') }}</label>
                         <input type="text" class="control" name="postcode" v-validate="'required'">
                         <span class="control-error" v-if="errors.has('postcode')">@{{ errors.first('postcode') }}</span>
                     </div>
 
                     <div class="button-group">
-                        <input class="btn btn-primary btn-lg" type="submit" value="Create Address">
+                        <input class="btn btn-primary btn-lg" type="submit" value="{{ __('shop::app.customer.account.address.create.submit') }}">
                     </div>
                 </div>
 
diff --git a/packages/Webkul/Shop/src/Resources/views/customers/account/address/edit.blade.php b/packages/Webkul/Shop/src/Resources/views/customers/account/address/edit.blade.php
index 00cb6c810..29a83440d 100644
--- a/packages/Webkul/Shop/src/Resources/views/customers/account/address/edit.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/customers/account/address/edit.blade.php
@@ -1,6 +1,6 @@
 @extends('shop::layouts.master')
 @section('page_title')
-Customer - Edit Address
+    {{ __('shop::app.customer.account.address.edit.page-title') }}
 @endsection
 @section('content-wrapper')
     <div class="account-content">
@@ -9,7 +9,7 @@ Customer - Edit Address
         <div class="edit-form-content">
 
             <div class="section-head mb-10">
-                <div class="profile-heading">Edit Address</div>
+                <div class="profile-heading">{{ __('shop::app.customer.account.address.edit.title') }}</div>
             </div>
 
             <form method="post" action="{{ route('customer.address.edit') }}">
@@ -18,43 +18,43 @@ Customer - Edit Address
                     @csrf
 
                     <div class="control-group" :class="[errors.has('address1') ? 'has-error' : '']">
-                        <label for="first_name">Address Line 1</label>
+                        <label for="first_name">{{ __('shop::app.customer.account.address.create.address1') }}</label>
                         <input type="text" class="control" name="address1" v-validate="'required'" value ="{{ $address['address1'] }}">
                         <span class="control-error" v-if="errors.has('address1')">@{{ errors.first('address1') }}</span>
                     </div>
 
                     <div class="control-group" :class="[errors.has('address2') ? 'has-error' : '']">
-                        <label for="address2">Address Line 2</label>
+                        <label for="address2">{{ __('shop::app.customer.account.address.create.address2') }}</label>
                         <input type="text" class="control" name="address2" v-validate="'required'" value ="{{ $address['address2'] }}">
                         <span class="control-error" v-if="errors.has('address2')">@{{ errors.first('address2') }}</span>
                     </div>
 
                     <div class="control-group" :class="[errors.has('country') ? 'has-error' : '']">
-                        <label for="country">Country</label>
+                        <label for="country">{{ __('shop::app.customer.account.address.create.country') }}</label>
                         <input type="text" class="control" name="country" v-validate="'required'" value ="{{ $address['country'] }}">
                         <span class="control-error" v-if="errors.has('country')">@{{ errors.first('country') }}</span>
                     </div>
 
                     <div class="control-group" :class="[errors.has('state') ? 'has-error' : '']">
-                        <label for="state">state</label>
+                        <label for="state">{{ __('shop::app.customer.account.address.create.state') }}</label>
                         <input type="text" class="control" name="state" v-validate="'required'" value ="{{ $address['state'] }}">
                         <span class="control-error" v-if="errors.has('state')">@{{ errors.first('state') }}</span>
                     </div>
 
                     <div class="control-group" :class="[errors.has('city') ? 'has-error' : '']">
-                        <label for="city">city</label>
+                        <label for="city">{{ __('shop::app.customer.account.address.create.city') }}</label>
                         <input type="text" class="control" name="city" v-validate="'required|alpha_spaces'" value ="{{ $address['city'] }}">
                         <span class="control-error" v-if="errors.has('city')">@{{ errors.first('city') }}</span>
                     </div>
 
                     <div class="control-group" :class="[errors.has('postcode') ? 'has-error' : '']">
-                        <label for="postcode">Postcode</label>
+                        <label for="postcode">{{ __('shop::app.customer.account.address.create.postcode') }}</label>
                         <input type="text" class="control" name="postcode" v-validate="'required'" value ="{{ $address['postcode'] }}">
                         <span class="control-error" v-if="errors.has('postcode')">@{{ errors.first('postcode') }}</span>
                     </div>
 
                     <div class="button-group">
-                        <input class="btn btn-primary btn-lg" type="submit" value="Edit Address">
+                        <input class="btn btn-primary btn-lg" type="submit" value="{{ __('shop::app.customer.account.address.edit.submit') }}">
                     </div>
                 </div>
 
diff --git a/packages/Webkul/Shop/src/Resources/views/customers/signup/index.blade.php b/packages/Webkul/Shop/src/Resources/views/customers/signup/index.blade.php
index f6398003a..63fc6bca8 100644
--- a/packages/Webkul/Shop/src/Resources/views/customers/signup/index.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/customers/signup/index.blade.php
@@ -10,7 +10,7 @@
         {{ __('shop::app.customer.signup-text.account_exists') }} - <a href="{{ route('customer.session.index') }}">{{ __('shop::app.customer.signup-text.title') }}</a>
     </div>
 
-    <form method="post" action="{{ route('customer.register.create') }}">
+    <form method="post" action="{{ route('customer.register.create') }}" @submit.prevent="onSubmit">
 
         {{ csrf_field() }}
 
@@ -20,40 +20,43 @@
 
             <div class="control-group" :class="[errors.has('first_name') ? 'has-error' : '']">
                 <label for="first_name">{{ __('shop::app.customer.signup-form.firstname') }}</label>
-                <input type="text" class="control" name="first_name" v-validate="'required'" value="{{ old('first_name') }}" required>
+                <input type="text" class="control" name="first_name" v-validate="'required'" value="{{ old('first_name') }}">
                 <span class="control-error" v-if="errors.has('first_name')">@{{ errors.first('first_name') }}</span>
             </div>
 
             <div class="control-group" :class="[errors.has('last_name') ? 'has-error' : '']">
                 <label for="last_name">{{ __('shop::app.customer.signup-form.lastname') }}</label>
-                <input type="text" class="control" name="last_name" v-validate="'required'" value="{{ old('last_name') }}" required>
+                <input type="text" class="control" name="last_name" v-validate="'required'" value="{{ old('last_name') }}">
                 <span class="control-error" v-if="errors.has('last_name')">@{{ errors.first('last_name') }}</span>
             </div>
 
             <div class="control-group" :class="[errors.has('email') ? 'has-error' : '']">
                 <label for="email">{{ __('shop::app.customer.signup-form.email') }}</label>
-                <input type="email" class="control" name="email" v-validate="'required|email'" value="{{ old('email') }}" required>
+                <input type="email" class="control" name="email" v-validate="'required|email'" value="{{ old('email') }}">
                 <span class="control-error" v-if="errors.has('email')">@{{ errors.first('email') }}</span>
             </div>
 
             <div class="control-group" :class="[errors.has('password') ? 'has-error' : '']">
                 <label for="password">{{ __('shop::app.customer.signup-form.password') }}</label>
-                <input type="password" class="control" name="password" v-validate="'required|min:6'" ref="password" value="{{ old('password') }}" required>
+                <input type="password" class="control" name="password" v-validate="'required|min:6'" ref="password" value="{{ old('password') }}">
                 <span class="control-error" v-if="errors.has('password')">@{{ errors.first('password') }}</span>
             </div>
 
-            <div class="control-group" :class="[errors.has('confirm_password') ? 'has-error' : '']">
-                <label for="confirm_password">{{ __('shop::app.customer.signup-form.confirm_pass') }}</label>
-                <input type="password" class="control" name="password_confirmation"  v-validate="'required|min:6|confirmed:password'" required>
-                <span class="control-error" v-if="errors.has('confirm_password')">@{{ errors.first('confirm_password') }}</span>
+            <div class="control-group" :class="[errors.has('password_confirmation') ? 'has-error' : '']">
+                <label for="password_confirmation">{{ __('shop::app.customer.signup-form.confirm_pass') }}</label>
+                <input type="password" class="control" name="password_confirmation"  v-validate="'required|min:6|confirmed:password'">
+                <span class="control-error" v-if="errors.has('password_confirmation')">@{{ errors.first('password_confirmation') }}</span>
             </div>
 
             <div class="signup-confirm" :class="[errors.has('agreement') ? 'has-error' : '']">
                 <span class="checkbox">
-                    <input type="checkbox" id="checkbox2" name="agreement" required>
+                    <input type="checkbox" id="checkbox2" name="agreement" v-validate="'required|confirmed'">
                     <label class="checkbox-view" for="checkbox2"></label>
-                    <span>{{ __('shop::app.customer.signup-form.agree') }} <a href="">{{ __('shop::app.customer.signup-form.terms') }}</a> & <a href="">{{ __('shop::app.customer.signup-form.conditions') }}</a> {{ __('shop::app.customer.signup-form.using') }}.</span>
+                    <span>{{ __('shop::app.customer.signup-form.agree') }}
+                        <a href="">{{ __('shop::app.customer.signup-form.terms') }}</a> & <a href="">{{ __('shop::app.customer.signup-form.conditions') }}</a> {{ __('shop::app.customer.signup-form.using') }}.
+                    </span>
                 </span>
+                <span class="control-error" v-if="errors.has('agreement')">@{{ errors.first('agreement') }}</span>
             </div>
 
             <input class="btn btn-primary btn-lg" type="submit" value="{{ __('shop::app.customer.signup-form.button_title') }}">
diff --git a/packages/Webkul/Shop/src/Resources/views/home/index.blade.php b/packages/Webkul/Shop/src/Resources/views/home/index.blade.php
index 2df67f52d..f8fc1eb11 100644
--- a/packages/Webkul/Shop/src/Resources/views/home/index.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/home/index.blade.php
@@ -1,7 +1,7 @@
 @extends('shop::layouts.master')
 
 @section('page_title')
-Bagisto - Home
+    {{ __('shop::app.home.page-title') }}
 @endsection
 
 @section('slider')
diff --git a/packages/Webkul/Shop/src/Resources/views/home/slider.blade.php b/packages/Webkul/Shop/src/Resources/views/home/slider.blade.php
index abd9b9002..c8a3b7c10 100644
--- a/packages/Webkul/Shop/src/Resources/views/home/slider.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/home/slider.blade.php
@@ -1,5 +1,3 @@
 <section class="slider-block">
     <image-slider :slides='@json($sliderData)'> </image-slider>
-</section>
-
-
+</section>
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php b/packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php
index 67c8e499e..89b00ec3d 100644
--- a/packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php
@@ -306,151 +306,7 @@
             <span class="suggestion mt-15">Designer sarees</span>
         </div>
     </div>
+    <div class="responsive-nav-menu">
 
-    <div class="responsive-nav">
-        <category-nav categories='@json($categories)' url="{{url()->to('/')}}"></category-nav>
     </div>
-
-</div>
-
-
-
-@push('scripts')
-
-<script>
-
-    document.onreadystatechange = function () {
-        var state = document.readyState
-        var galleryTemplate = document.getElementById('product-gallery-template');
-        var addTOButton = document.getElementsByClassName('add-to-buttons')[0];
-
-        if(galleryTemplate){
-            if (state == 'interactive') {
-                galleryTemplate.style.display="none";
-            } else  {
-                document.getElementById('loader').style.display="none";
-                addTOButton.style.display="flex";
-            }
-        }
-    }
-
-    window.onload = function() {
-
-        var hamMenu = document.getElementById("hammenu");
-        var search = document.getElementById("search");
-        var sort = document.getElementById("sort");
-        var filter = document.getElementById("filter");
-
-        var searchResponsive = document.getElementsByClassName('search-responsive')[0];
-        var sortLimit = document.getElementsByClassName('reponsive-sorter-limiter')[0];
-        var layerFilter = document.getElementsByClassName('responsive-layred-filter')[0];
-        var navResponsive = document.getElementsByClassName('responsive-nav')[0];
-
-        var thumbList = document.getElementsByClassName('thumb-list')[0];
-        var thumbFrame = document.getElementsByClassName('thumb-frame');
-        var productHeroImage = document.getElementsByClassName('product-hero-image')[0];
-
-        // for product page resize image
-
-        if(thumbList && productHeroImage){
-            thumbList.style.maxHeight = productHeroImage.offsetHeight + "px";
-            for(let i=0 ; i < thumbFrame.length ; i++){
-                thumbFrame[i].style.height = (productHeroImage.offsetHeight/4) + "px";
-            }
-        }
-
-        search.addEventListener("click", header);
-        hamMenu.addEventListener("click", header);
-
-        if(sort && filter){
-            sort.addEventListener("click", sortFilter);
-            filter.addEventListener("click", sortFilter);
-        }
-
-        window.addEventListener('resize', function(){
-            if(window.innerWidth > 720){
-                searchResponsive.style.display = 'none';
-                navResponsive.style.display = 'none';
-                if(layerFilter && sortLimit){
-                    layerFilter.style.display ="none";
-                    sortLimit.style.display ="none";
-                }
-            }
-            if(window.innerWidth < 1313 && window.innerWidth > 720){
-                if(thumbList){
-                    thumbList.style.maxHeight = productHeroImage.offsetHeight + "px";
-                    for(let i=0 ; i < thumbFrame.length ; i++){
-                        thumbFrame[i].style.height = (productHeroImage.offsetHeight/4) + "px";
-                    }
-                }
-            }else {
-                for(let i=0 ; i < thumbFrame.length ; i++){
-                    thumbFrame[i].style.height = 120 + "px";
-                }
-            }
-        });
-
-
-        // for header responsive icon
-
-        function header(){
-            var className = document.getElementById(this.id).className;
-
-            if(className === 'icon search-icon' ){
-                search.classList.remove("search-icon");
-                search.classList.add("icon-menu-close");
-                hamMenu.classList.remove("icon-menu-close");
-                hamMenu.classList.add("sortable-icon");
-                searchResponsive.style.display = 'block';
-                navResponsive.style.display = 'none';
-            }else if(className === 'icon sortable-icon'){
-                hamMenu.classList.remove("sortable-icon");
-                hamMenu.classList.add("icon-menu-close");
-                search.classList.remove("icon-menu-close");
-                search.classList.add("search-icon");
-                searchResponsive.style.display = 'none';
-                navResponsive.style.display = 'block';
-            }else{
-                search.classList.remove("icon-menu-close");
-                search.classList.add("search-icon");
-                hamMenu.classList.remove("icon-menu-close");
-                hamMenu.classList.add("sortable-icon");
-                searchResponsive.style.display = 'none';
-                navResponsive.style.display = 'none';
-            }
-        }
-
-        // for category page responsive filter & sort
-        function sortFilter(){
-            var className = document.getElementById(this.id).className;
-
-            if(className === 'icon sort-icon' ){
-                sort.classList.remove("sort-icon");
-                sort.classList.add("icon-menu-close");
-                filter.classList.remove("icon-menu-close");
-                filter.classList.add("filter-icon");
-                sortLimit.style.display ="flex";
-                sortLimit.style.justifyContent="space-between";
-                layerFilter.style.display ="none";
-            }else if(className === 'icon filter-icon'){
-                filter.classList.remove("filter-icon");
-                filter.classList.add("icon-menu-close");
-                sort.classList.remove("icon-menu-close");
-                sort.classList.add("sort-icon");
-                layerFilter.style.display ="block";
-                sortLimit.style.display ="none";
-            }else{
-                sort.classList.remove("icon-menu-close");
-                sort.classList.add("sort-icon");
-                filter.classList.remove("icon-menu-close");
-                filter.classList.add("filter-icon");
-                sortLimit.style.display ="none";
-                layerFilter.style.display ="none";
-            }
-        }
-    }
-
-</script>
-
-@endpush
-
+</div>
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/views/layouts/master.blade.php b/packages/Webkul/Shop/src/Resources/views/layouts/master.blade.php
index d5537e8df..2bd2ed842 100644
--- a/packages/Webkul/Shop/src/Resources/views/layouts/master.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/layouts/master.blade.php
@@ -60,8 +60,57 @@
     <script type="text/javascript" src="{{ bagisto_asset('js/shop.js') }}"></script>
     <script type="text/javascript" src="{{ asset('vendor/webkul/ui/assets/js/ui.js') }}"></script>
 
-    @stack('scripts')
+    {{-- For JS that requires onload property --}}
+    <script>
+        window.onload = function () {
+            //header
+            var hamMenu = document.getElementById("hammenu");
+            var search = document.getElementById("search");
+            var sort = document.getElementById("sort");
+            var filter = document.getElementById("filter");
 
+            var searchResponsive = document.getElementsByClassName('search-responsive')[0];
+            var sortLimit = document.getElementsByClassName('reponsive-sorter-limiter')[0];
+            var layerFilter = document.getElementsByClassName('responsive-layred-filter')[0];
+            var navResponsive = document.getElementsByClassName('responsive-nav')[0];
+
+            search.addEventListener("click", header);
+            hamMenu.addEventListener("click", header);
+
+            //clone nav menu
+
+        };
+
+        // for responsive header
+        function header(){
+            var className = document.getElementById(this.id).className;
+
+            if(className === 'icon search-icon' ){
+                search.classList.remove("search-icon");
+                search.classList.add("icon-menu-close");
+                hamMenu.classList.remove("icon-menu-close");
+                hamMenu.classList.add("sortable-icon");
+                searchResponsive.style.display = 'block';
+                navResponsive.style.display = 'none';
+            }else if(className === 'icon sortable-icon'){
+                hamMenu.classList.remove("sortable-icon");
+                hamMenu.classList.add("icon-menu-close");
+                search.classList.remove("icon-menu-close");
+                search.classList.add("search-icon");
+                searchResponsive.style.display = 'none';
+                navResponsive.style.display = 'block';
+            }else{
+                search.classList.remove("icon-menu-close");
+                search.classList.add("search-icon");
+                hamMenu.classList.remove("icon-menu-close");
+                hamMenu.classList.add("sortable-icon");
+                searchResponsive.style.display = 'none';
+                navResponsive.style.display = 'none';
+            }
+        }
+    </script>
+
+    @stack('scripts')
 </body>
 
 </html>
\ No newline at end of file
diff --git a/public/themes/default/assets/js/shop.js b/public/themes/default/assets/js/shop.js
index 6ec7a5900..ba694a7fa 100644
--- a/public/themes/default/assets/js/shop.js
+++ b/public/themes/default/assets/js/shop.js
@@ -30699,7 +30699,6 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 //
 //
 //
-//
 
 // define the item component
 /* harmony default export */ __webpack_exports__["default"] = ({