diff --git a/packages/Webkul/Admin/src/DataGrids/CustomerDataGrid.php b/packages/Webkul/Admin/src/DataGrids/CustomerDataGrid.php
index 0ac003829..592b0f5b4 100644
--- a/packages/Webkul/Admin/src/DataGrids/CustomerDataGrid.php
+++ b/packages/Webkul/Admin/src/DataGrids/CustomerDataGrid.php
@@ -122,23 +122,23 @@ class CustomerDataGrid
                     'type' => 'string',
                     'label' => 'Name',
                 ],
+                [
+                    'name' => 'email',
+                    'alias' => 'customerEmail',
+                    'type' => 'string',
+                    'label' => 'Email',
+                ],
                 [
                     'name' => 'phone',
                     'alias' => 'customerPhone',
                     'type' => 'number',
                     'label' => 'Phone',
                 ],
-                [
-                    'name' => 'email',
-                    'alias' => 'customerEmail',
-                    'type' => 'string',
-                    'label' => 'Comment',
-                ],
                 [
                     'name' => 'customer_group_id',
                     'alias' => 'customerGroupId',
-                    'type' => 'number',
-                    'label' => 'Status',
+                    'type' => 'string',
+                    'label' => 'Customer Group',
                 ],
             ],
 
diff --git a/packages/Webkul/Admin/src/DataGrids/CustomerReviewDataGrid.php b/packages/Webkul/Admin/src/DataGrids/CustomerReviewDataGrid.php
index f28a22b61..fff921c47 100644
--- a/packages/Webkul/Admin/src/DataGrids/CustomerReviewDataGrid.php
+++ b/packages/Webkul/Admin/src/DataGrids/CustomerReviewDataGrid.php
@@ -100,7 +100,7 @@ class CustomerReviewDataGrid
                 ],
                 [
                     'name' => 'status',
-                    'alias' => 'countryStatus',
+                    'alias' => 'reviewStatus',
                     'type' => 'number',
                     'label' => 'Status',
                     'sortable' => true,
@@ -113,7 +113,7 @@ class CustomerReviewDataGrid
             'filterable' => [
                 [
                     'name' => 'id',
-                    'alias' => 'countryId',
+                    'alias' => 'reviewId',
                     'type' => 'number',
                     'label' => 'ID',
                 ],
@@ -137,9 +137,9 @@ class CustomerReviewDataGrid
                 ],
                 [
                     'name' => 'status',
-                    'alias' => 'countryStatus',
-                    'type' => 'number',
-                    'label' => 'Code',
+                    'alias' => 'reviewStatus',
+                    'type' => 'string',
+                    'label' => 'Status',
                 ],
             ],
 
diff --git a/packages/Webkul/Admin/src/Resources/lang/en/app.php b/packages/Webkul/Admin/src/Resources/lang/en/app.php
index e440db4bb..aa4fa5eef 100644
--- a/packages/Webkul/Admin/src/Resources/lang/en/app.php
+++ b/packages/Webkul/Admin/src/Resources/lang/en/app.php
@@ -393,7 +393,8 @@ return [
             'email' => 'Email',
             'date_of_birth' => 'Date of Birth',
             'phone' => 'Phone',
-            'customer_group' => 'Customer Group'
+            'customer_group' => 'Customer Group',
+            'save-btn-title' => 'Save Customer'
         ],
         'reviews' => [
             'title' => 'Title',
diff --git a/packages/Webkul/Admin/src/Resources/views/customers/create.blade.php b/packages/Webkul/Admin/src/Resources/views/customers/create.blade.php
index ebdd9e812..97bbd7b33 100644
--- a/packages/Webkul/Admin/src/Resources/views/customers/create.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/customers/create.blade.php
@@ -15,7 +15,7 @@
 
                 <div class="page-action">
                     <button type="submit" class="btn btn-lg btn-primary">
-                        {{ __('admin::app.account.save-btn-title') }}
+                        {{ __('admin::app.customers.customers.save-btn-title') }}
                     </button>
                 </div>
             </div>
@@ -25,56 +25,52 @@
                 <div class="form-container">
                     @csrf()
 
-                    <accordian :title="'{{ __('admin::app.account.general') }}'" :active="true">
-                        <div slot="body">
+                    <div class="control-group" :class="[errors.has('first_name') ? 'has-error' : '']">
+                        <label for="first_name" class="required">{{ __('shop::app.customer.signup-form.firstname') }}</label>
+                        <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('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') }}">
-                                <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" class="required">{{ __('shop::app.customer.signup-form.lastname') }}</label>
+                        <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('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') }}">
-                                <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" class="required">{{ __('shop::app.customer.signup-form.email') }}</label>
+                        <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('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') }}">
-                                <span class="control-error" v-if="errors.has('email')">@{{ errors.first('email') }}</span>
-                            </div>
+                    <div class="control-group" :class="[errors.has('gender') ? 'has-error' : '']">
+                        <label for="gender" class="required">{{ __('admin::app.customers.customers.gender') }}</label>
+                        <select name="gender" class="control" v-validate="'gender'">
+                            <option value="Male">Male</option>
+                            <option value="Female">Female</option>
+                        </select>
+                        <span class="control-error" v-if="errors.has('gender')">@{{ errors.first('gender') }}</span>
+                    </div>
 
-                            <div class="control-group">
-                                <label for="gender">{{ __('admin::app.customers.customers.gender') }}</label>
-                                <select name="gender" class="control"  v-validate="'required'">
-                                        <option value="Male">Male</option>
-                                        <option value="Female">Female</option>
-                                </select>
-                            </div>
+                    <div class="control-group">
+                        <label for="dob">{{ __('admin::app.customers.customers.date_of_birth') }}</label>
+                        <input type="date" class="control" name="date_of_birth">
+                    </div>
 
-                            <div class="control-group">
-                                <label for="dob">{{ __('admin::app.customers.customers.date_of_birth') }}</label>
-                                <input type="date" class="control" name="date_of_birth"  v-validate="'required'">
-                            </div>
+                    <div class="control-group" :class="[errors.has('phone') ? 'has-error' : '']">
+                        <label for="phone">{{ __('admin::app.customers.customers.phone') }}</label>
+                        <input type="text" class="control" v-validate="'numeric'" name="phone" value="{{ old('phone') }}">
+                        <span class="control-error" v-if="errors.has('phone')">@{{ errors.first('phone') }}</span>
+                    </div>
 
-                            <div class="control-group">
-                                <label for="phone">{{ __('admin::app.customers.customers.phone') }}</label>
-                                <input type="text" class="control" name="phone"  v-validate="'required'">
-                            </div>
-
-                            <div class="control-group">
-                                <label for="name" >{{ __('admin::app.customers.customers.customer_group') }}</label>
-                                <select  class="control" name="customer_group_id">
-                                @foreach ($customerGroup as $group)
-                                    <option value="{{ $group->id }}"> {{ $group->group_name}} </>
-                                @endforeach
-                                </select>
-                            </div>
-
-                        </div>
-                    </accordian>
+                    <div class="control-group">
+                        <label for="name" >{{ __('admin::app.customers.customers.customer_group') }}</label>
+                        <select  class="control" name="customer_group_id">
+                        @foreach ($customerGroup as $group)
+                            <option value="{{ $group->id }}"> {{ $group->group_name}} </>
+                        @endforeach
+                        </select>
+                    </div>
 
                 </div>
             </div>
diff --git a/packages/Webkul/Admin/src/Resources/views/customers/edit.blade.php b/packages/Webkul/Admin/src/Resources/views/customers/edit.blade.php
index 0ea37bc67..639ac370d 100644
--- a/packages/Webkul/Admin/src/Resources/views/customers/edit.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/customers/edit.blade.php
@@ -13,7 +13,7 @@
 
                 <div class="page-action">
                     <button type="submit" class="btn btn-lg btn-primary">
-                        {{ __('admin::app.account.save-btn-title') }}
+                        {{ __('admin::app.customers.customers.save-btn-title') }}
                     </button>
                 </div>
             </div>
@@ -28,37 +28,42 @@
                     <accordian :title="'{{ __('admin::app.account.general') }}'" :active="true">
                         <div slot="body">
 
-                            <div class="control-group">
-                                <label for="name" > {{ __('admin::app.customers.customers.first_name') }}</label>
-                                <input type="text"  class="control" name="first_name" value="{{$customer->first_name}}"/>
+                            <div class="control-group" :class="[errors.has('first_name') ? 'has-error' : '']">
+                                <label for="first_name" class="required"> {{ __('admin::app.customers.customers.first_name') }}</label>
+                                <input type="text"  class="control" name="first_name" v-validate="'required'" value="{{$customer->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" class="required"> {{ __('admin::app.customers.customers.last_name') }}</label>
+                                <input type="text"  class="control"  name="last_name"   v-validate="'required'" value="{{$customer->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" class="required"> {{ __('admin::app.customers.customers.email') }}</label>
+                                <input type="email"  class="control"  name="email" v-validate="'required|email'" value="{{$customer->email}}"/>
+                                <span class="control-error" v-if="errors.has('email')">@{{ errors.first('email') }}</span>
                             </div>
 
                             <div class="control-group">
-                                <label for="name" > {{ __('admin::app.customers.customers.last_name') }}</label>
-                                <input type="text"  class="control"  name="last_name" value="{{$customer->last_name}}"/>
-                            </div>
-
-                            <div class="control-group">
-                                <label for="name" > {{ __('admin::app.customers.customers.email') }}</label>
-                                <input type="text"  class="control"  name="email" value="{{$customer->email}}"/>
-                            </div>
-
-                            <div class="control-group">
-                                <label for="email">{{ __('admin::app.customers.customers.gender') }}</label>
-                                <select name="gender" class="control" value="{{ $customer->gender }}" v-validate="'required'">
+                                <label for="email" class="required">{{ __('admin::app.customers.customers.gender') }}</label>
+                                <select name="gender" class="control" v-validate="'gender'" value="{{ $customer->gender }}" v-validate="'required'">
                                         <option value="Male">Male</option>
                                         <option value="Female">Female</option>
                                 </select>
+                                <span class="control-error" v-if="errors.has('gender')">@{{ errors.first('gender') }}</span>
                             </div>
 
                             <div class="control-group">
                                 <label for="dob">{{ __('admin::app.customers.customers.date_of_birth') }}</label>
-                                <input type="date" class="control" name="date_of_birth" value="{{ $customer->date_of_birth }}" v-validate="'required'">
+                                <input type="date" class="control" name="date_of_birth" value="{{ $customer->date_of_birth }}">
                             </div>
 
-                            <div class="control-group">
+                            <div class="control-group" :class="[errors.has('phone') ? 'has-error' : '']">
                                 <label for="phone">{{ __('admin::app.customers.customers.phone') }}</label>
-                                <input type="text" class="control" name="phone" value="{{ $customer->phone }}" v-validate="'required'">
+                                <input type="text" class="control" v-validate="'numeric'" name="phone" value="{{ $customer->phone }}">
+                                <span class="control-error" v-if="errors.has('phone')">@{{ errors.first('phone') }}</span>
                             </div>
 
                             <div class="control-group">
diff --git a/packages/Webkul/Admin/src/Resources/views/customers/review/edit.blade.php b/packages/Webkul/Admin/src/Resources/views/customers/review/edit.blade.php
index d2ad88652..98e1bc6f2 100644
--- a/packages/Webkul/Admin/src/Resources/views/customers/review/edit.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/customers/review/edit.blade.php
@@ -43,7 +43,7 @@
                             </div>
 
                             <div class="control-group">
-                                <label for="name" >{{ __('admin::app.customers.reviews.status') }}</label>
+                                <label for="name" class="required">{{ __('admin::app.customers.reviews.status') }}</label>
                                 <select  class="control" name="status">
                                     <option value="pending" {{ $review->status == "pending" ? 'selected' : ''}}>
                                         pending
diff --git a/packages/Webkul/Core/src/Http/Controllers/CustomerController.php b/packages/Webkul/Core/src/Http/Controllers/CustomerController.php
index 3ec3076e5..17c8ead1d 100644
--- a/packages/Webkul/Core/src/Http/Controllers/CustomerController.php
+++ b/packages/Webkul/Core/src/Http/Controllers/CustomerController.php
@@ -84,11 +84,11 @@ class CustomerController extends Controller
     public function store(Request $request)
     {
         $request->validate([
-
             'first_name' => 'string|required',
             'last_name' => 'string|required',
-            'email' => 'email|required',
-
+            'gender' => 'required',
+            'phone' => 'nullable|numeric',
+            'email' => 'required|unique:customers,email'
         ]);
 
         $data=$request->all();
@@ -102,7 +102,6 @@ class CustomerController extends Controller
         session()->flash('success', 'Customer created successfully.');
 
         return redirect()->route($this->_config['redirect']);
-
     }
 
     /**
@@ -129,6 +128,13 @@ class CustomerController extends Controller
      */
     public function update(Request $request, $id)
     {
+        $request->validate([
+            'first_name' => 'string|required',
+            'last_name' => 'string|required',
+            'gender' => 'required',
+            'phone' => 'nullable|numeric',
+            'email' => 'required|unique:customers,email,'. $id
+        ]);
 
         $this->customer->update(request()->all(),$id);
 
@@ -136,6 +142,4 @@ class CustomerController extends Controller
 
         return redirect()->route($this->_config['redirect']);
     }
-
-
 }
diff --git a/packages/Webkul/Shop/src/Resources/assets/js/components/category-item.vue b/packages/Webkul/Shop/src/Resources/assets/js/components/category-item.vue
index 52961aa19..3b9479dc8 100644
--- a/packages/Webkul/Shop/src/Resources/assets/js/components/category-item.vue
+++ b/packages/Webkul/Shop/src/Resources/assets/js/components/category-item.vue
@@ -1,9 +1,9 @@
 <template>
     <li>
-        <a :href="this.item['translations'][0].slug">{{ this.item['translations'][0].name }}&emsp;<i class="icon dropdown-right-icon"
+        <a :href="this.item['translations'][0].slug">{{ this.item['translations'][0].name }}&emsp;<i class="icon expand-icon"
         v-if="haveChildren && item.parent_id != null"></i></a>
 
-        <i :class="[show ? 'icon arrow-down-icon mt-15' : 'icon dropdown-right-icon mt-15']"
+        <i :class="[show ? 'icon expand-icon mt-15' : 'icon expand-on-icon mt-15']"
         v-if="haveChildren || item.parent_id == null"  @click="showOrHide"></i>
 
         <ul v-if="haveChildren && show">
@@ -11,6 +11,8 @@
                 v-for="(child, index) in item.children"
                 :key="index"
                 :item="child">
+
+                {{ child }}
             </category-item>
         </ul>
     </li>
diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
index 947dad85e..95f9642cf 100644
--- a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
@@ -473,6 +473,10 @@ section.slider-block {
             position: relative;
         }
 
+        .nav a:first-child{
+            margin-left: 20px;
+        }
+
         .nav  li  > .icon{
             display: none;
         }
@@ -634,8 +638,6 @@ section.slider-block {
             padding: 12px 4.8px 12px 8px;
             text-transform: uppercase;
             letter-spacing: 2px;
-            position: relative;
-            width: 90%;
         }
 
         .nav  li  > .icon{
@@ -650,6 +652,10 @@ section.slider-block {
             border-bottom: 1px solid $border-color;
         }
 
+        .nav li {
+            padding-left: 20px;
+        }
+
         .nav  li:first-child {
             border-top: 1px solid $border-color;
         }
@@ -923,6 +929,10 @@ section.slider-block {
     margin-top: 5.5%;
     margin-bottom: 5.5%;
 
+    .side-menu-title {
+        display: none;
+    }
+
     .account-side-menu {
         display: flex;
         flex-direction: column;
@@ -966,6 +976,10 @@ section.slider-block {
         width: 100%;
 
         .section-head {
+            .back-icon {
+                display: none;
+            }
+
             .profile-heading {
                 font-size: 28px;
                 color: $font-color;
@@ -1065,36 +1079,76 @@ section.slider-block {
     .account-content {
         flex-direction: column;
 
+        .side-menu-title {
+            height: 48px;
+            padding-top: 13px;
+            border: 1px solid;
+            font-size: 18px;
+            display: inline-block;
+
+            .right {
+                float: right;
+                margin-top: 3px;
+            }
+        }
+
         .account-side-menu {
             width: 100%;
             border: none;
             margin-bottom: 20px;
-
-            .side-menu-title {
-                height: 48px;
-                padding-top: 15px;
-                border: 1px solid;
-            }
-
-            .side-menu-title::after {
-                content: url(../images/arrow-down.svg);
-                float: right;
-            }
-
-            .side-menu-title-active::after {
-                content: url(../images//arrow-up.svg);
-                float: right;
-            }
+            display: none;
 
             li {
                 width: 100%;
                 margin-left: 0%;
             }
 
+            li a {
+                color: black;
+            }
+
             li:last-child {
                 border-bottom: 1px solid $border-color;
             }
         }
+
+        .profile {
+            margin-left: 0px;
+
+            .section-head {
+                display: flex;
+                justify-content: space-between;
+                border-top: 1px solid $border-color;
+                border-bottom: 1px solid $border-color;
+                height: 50px;
+                padding-top: 7px;
+
+                .back-icon {
+                    display: block;
+                    cursor: pointer;
+                    margin-top: 5px;
+                }
+
+                .horizontal-rule {
+                    display: none;
+                }
+            }
+        }
+
+        .profile-content {
+            table {
+                tbody {
+                    tr {
+                        display: grid;
+                        margin-bottom: 20px;
+                    }
+                }
+            }
+        }
+
+        .edit-form-content {
+            margin-left: 0px;
+        }
     }
 
 }
diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/icons.scss b/packages/Webkul/Shop/src/Resources/assets/sass/icons.scss
index ba1aa8d3f..4102507da 100644
--- a/packages/Webkul/Shop/src/Resources/assets/sass/icons.scss
+++ b/packages/Webkul/Shop/src/Resources/assets/sass/icons.scss
@@ -83,4 +83,16 @@
     background-image: url('../images/wishlist.svg');
     width: 32px;
     height: 32px;
+}
+
+.icon-arrow-up {
+    background-image: url('../images/arrow-up.svg');
+    width: 16px;
+    height: 16px;
+}
+
+.icon-arrow-down {
+    background-image: url('../images/arrow-down.svg');
+    width: 16px;
+    height: 16px;
 }
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/views/customers/account/partials/sidemenu.blade.php b/packages/Webkul/Shop/src/Resources/views/customers/account/partials/sidemenu.blade.php
index f558ffa84..430544a2a 100644
--- a/packages/Webkul/Shop/src/Resources/views/customers/account/partials/sidemenu.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/customers/account/partials/sidemenu.blade.php
@@ -1,8 +1,9 @@
-<ul class="account-side-menu">
-    <div class="side-menu-title-active" id="side-menu-title" onclick="sayHello()">
-        Menu
-    </div>
+<div class="side-menu-title mb-20" id="side-menu-title">
+    <strong>Menu</strong>
+    <i class="icon icon-arrow-down right" id="down-icon"></i>
+</div>
 
+<ul class="account-side-menu">
     @foreach($menu->items as $key=>$value)
 
         <li><a href="{{ $value['url'] }}">{{ $value['name'] }}</a></li>
@@ -15,23 +16,29 @@
 
 <script>
 
-    function sayHello(){
-
-        alert('hello');
+    $(document).ready(function(){
 
         var sideMenuTitle = document.getElementById("side-menu-title");
+        var downIcon = document.getElementById("down-icon");
+        var accountSideMenu = document.getElementsByClassName("account-side-menu");
 
-        if(sideMenuTitle == 'side-menu-title-active'){
-            console.log('dffd');
-            sideMenuTitle.classList.remove("side-menu-title-active");
-            sideMenuTitle.classList.add("side-menu-title");
-        }else{
-            sideMenuTitle.classList.remove("side-menu-title");
-            sideMenuTitle.classList.add("side-menu-title-active");
+        sideMenuTitle.addEventListener("click", function(){
+            if(downIcon.className == 'icon icon-arrow-down right'){
+                for(let i=0 ; i < accountSideMenu.length ; i++){
+                    accountSideMenu[i].style.display="block";
+                }
+                downIcon.classList.remove("icon","icon-arrow-down","right");
+                downIcon.classList.add("icon","icon-arrow-up","right");
+            }else{
+                for(let i=0 ; i < accountSideMenu.length ; i++){
+                    accountSideMenu[i].style.display="none";
+                }
+                downIcon.classList.remove("icon","icon-arrow-up","right");
+                downIcon.classList.add("icon","icon-arrow-down","right");
+            }
+        });
 
-        }
-
-    }
+    });
 
 </script>
 
diff --git a/packages/Webkul/Shop/src/Resources/views/customers/account/profile/index.blade.php b/packages/Webkul/Shop/src/Resources/views/customers/account/profile/index.blade.php
index a9cecb87f..5845f36c2 100644
--- a/packages/Webkul/Shop/src/Resources/views/customers/account/profile/index.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/customers/account/profile/index.blade.php
@@ -8,9 +8,10 @@
 
     @include('shop::customers.account.partials.sidemenu')
 
-    <div class="account-lauyout = profile">
+    <div class="account profile">
 
         <div class="section-head">
+            <span class="back-icon"><a href="{{ route('customer.account.index') }}"><i class="icon icon-menu-back"></i></a></span>
             <span class="profile-heading">{{ __('shop::app.customer.account.profile.index.title') }}</span>
             <span class="profile-edit"><a href="{{ route('customer.profile.edit') }}">{{ __('shop::app.customer.account.profile.index.edit') }}</a></span>
             <div class="horizontal-rule"></div>
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 89b00ec3d..c4413b825 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
@@ -1,219 +1,68 @@
 <div class="header" id="header">
-    <div class="header-top">
-        <div class="left-content">
-            <ul class="logo-container">
-                <li>
-                    <a href="{{ route('shop.home.index') }}">
-                        <img class="logo" src="{{ asset('vendor/webkul/shop/assets/images/logo.svg') }}" />
-                    </a>
-                </li>
-            </ul>
+        <div class="header-top">
+            <div class="left-content">
+                <ul class="logo-container">
+                    <li>
+                        <a href="{{ route('shop.home.index') }}">
+                            <img class="logo" src="{{ asset('vendor/webkul/shop/assets/images/logo.svg') }}" />
+                        </a>
+                    </li>
+                </ul>
 
-            <ul class="search-container">
-                <li class="search-group">
-                    <input type="search" class="search-field" placeholder="Search for products">
-                    <div class="search-icon-wrapper">
-                        <span class="icon search-icon"></span>
-                    </div>
-                </li>
-            </ul>
+                <ul class="search-container">
+                    <li class="search-group">
+                        <input type="search" class="search-field" placeholder="Search for products">
+                        <div class="search-icon-wrapper">
+                            <span class="icon search-icon"></span>
+                        </div>
+                    </li>
+                </ul>
 
-        </div>
-
-        <div class="right-content">
-            @guest('customer')
-            <ul class="register-link" style="border-right: 2px solid #E8E8E8; ">
-                <span class="icon account-icon"></span>
-                <li><a href="{{ route('customer.register.index') }}">Sign Up</a></li>
-            </ul>
-            @endguest
-            <ul class="account-dropdown-container">
-                <li class="account-dropdown">
+            </div>
 
+            <div class="right-content">
+                @guest('customer')
+                <ul class="register-link" style="border-right: 2px solid #E8E8E8; ">
                     <span class="icon account-icon"></span>
-
-                    <div class="dropdown-toggle">
-                        <div style="display: inline-block; cursor: pointer;">
-
-                            @guest('customer')
-                                <span class="name">Sign In</span>
-                            @endguest
-
-                            @auth('customer')
-                                <span class="name">Account</span>
-                            @endauth
-
-                        </div>
-                        <i class="icon arrow-down-icon active"></i>
-                    </div>
-                    @guest
-                        <div class="dropdown-list bottom-right" style="display: none;">
-                            <div class="dropdown-container">
-
-                                <label>Account</label>
-                                <ul>
-                                    <li><a href="{{ route('customer.session.index') }}">Sign In</a></li>
-                                </ul>
-
-                            </div>
-
-                        </div>
-                    @endguest
-                    @auth('customer')
-                        <div class="dropdown-list bottom-right" style="display: none;">
-                            <div class="dropdown-container">
-                                <label>Account</label>
-                                <ul>
-                                    <li><a href="{{ route('customer.account.index') }}">Account</a></li>
-
-                                    <li><a href="{{ route('customer.profile.index') }}">Profile</a></li>
-
-                                    <li><a href="{{ route('customer.address.index') }}">Address</a></li>
-
-                                    <li><a href="{{ route('customer.wishlist.index') }}">Wishlist</a></li>
-
-                                    <li><a href="{{ route('shop.checkout.cart.index') }}">Cart</a></li>
-
-                                    <li><a href="{{ route('customer.orders.index') }}">Orders</a></li>
-
-                                    <li><a href="{{ route('customer.session.destroy') }}">Logout</a></li>
-                                </ul>
-
-                            </div>
-
-                        </div>
-                    @endauth
-                </li>
-            </ul>
-            <ul class="cart-dropdown-container">
-
-                <?php $cart = cart()->getCart(); ?>
-
-                @inject ('productImageHelper', 'Webkul\Product\Product\ProductImage')
-
-                <li class="cart-dropdown">
-                    <span class="icon cart-icon"></span>
-                    @if($cart)
-                        @php
-                            $items = $cart->items;
-                        @endphp
-                        <div class="dropdown-toggle">
-                            <div style="display: inline-block; cursor: pointer;">
-                                @if($cart->items_qty - intval($cart->items_qty) > 0)
-                                    <span class="name">
-                                        Cart
-                                        <span class="count"> ({{ $cart->items_qty }})</span>
-                                    </span>
-                                @else
-                                    <span class="name">
-                                        Cart
-                                        <span class="count"> ({{ intval($cart->items_qty) }})</span>
-                                    </span>
-                                @endif
-                            </div>
-
-                            <i class="icon arrow-down-icon active"></i>
-
-                        </div>
-                        <div class="dropdown-list" style="display: none; top: 50px; right: 0px">
-                            <div class="dropdown-container">
-                                <div class="dropdown-cart">
-                                    <div class="dropdown-header">
-                                        <p class="heading">Cart Subtotal - {{ $cart->sub_total }}</p>
-                                    </div>
-
-                                    <div class="dropdown-content">
-                                        @foreach($items as $item)
-                                            @if($item->type == "configurable")
-                                            <div class="item">
-                                                <div class="item-image" >
-                                                    @php
-                                                        $images = $productImageHelper->getProductBaseImage($item->child->product);
-                                                    @endphp
-                                                    <img src="{{ $images['small_image_url'] }}" />
-                                                </div>
-
-                                                <div class="item-details">
-
-                                                    <div class="item-name">{{ $item->child->name }}</div>
-
-                                                    <div class="item-price">{{ $item->total }}</div>
-
-                                                    <div class="item-qty">Quantity - {{ $item->quantity }}</div>
-                                                </div>
-                                            </div>
-                                            @else
-                                            <div class="item">
-                                                <div class="item-image" >
-                                                    @php
-                                                        $images = $productImageHelper->getProductBaseImage($item->product);
-                                                    @endphp
-                                                    <img src="{{ $images['small_image_url'] }}" />
-                                                </div>
-
-                                                <div class="item-details">
-
-                                                    <div class="item-name">{{ $item->name }}</div>
-
-                                                    <div class="item-price">{{ $item->total }}</div>
-
-                                                    <div class="item-qty">Quantity - {{ $item->quantity }}</div>
-                                                </div>
-                                            </div>
-                                            @endif
-                                        @endforeach
-                                    </div>
-
-                                    <div class="dropdown-footer">
-                                        <a href="{{ route('shop.checkout.cart.index') }}">View Shopping Cart</a>
-
-                                        <button class="btn btn-primary btn-lg">CHECKOUT</button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    @else
-                        <div class="dropdown-toggle">
-                            <div style="display: inline-block; cursor: pointer;">
-
-                                <span class="name">Cart<span class="count"> (0) </span></span>
-                            </div>
-                        </div>
-                    @endif
-                </li>
-            </ul>
-
-            <ul class="right-responsive">
-                <li class="search-box"><span class="icon search-icon" id="search"></span></li>
-                <ul class="resp-account-dropdown-container">
-
+                    <li><a href="{{ route('customer.register.index') }}">Sign Up</a></li>
+                </ul>
+                @endguest
+                <ul class="account-dropdown-container">
                     <li class="account-dropdown">
 
+                        <span class="icon account-icon"></span>
+
                         <div class="dropdown-toggle">
+                            <div style="display: inline-block; cursor: pointer;">
 
-                            <span class="icon account-icon"></span>
+                                @guest('customer')
+                                    <span class="name">Sign In</span>
+                                @endguest
+
+                                @auth('customer')
+                                    <span class="name">Account</span>
+                                @endauth
+
+                            </div>
+                            <i class="icon arrow-down-icon active"></i>
                         </div>
-
                         @guest
                             <div class="dropdown-list bottom-right" style="display: none;">
                                 <div class="dropdown-container">
 
                                     <label>Account</label>
-
                                     <ul>
                                         <li><a href="{{ route('customer.session.index') }}">Sign In</a></li>
-
-                                        <li><a href="{{ route('customer.register.index') }}">Sign Up</a></li>
                                     </ul>
+
                                 </div>
+
                             </div>
                         @endguest
                         @auth('customer')
                             <div class="dropdown-list bottom-right" style="display: none;">
                                 <div class="dropdown-container">
-
                                     <label>Account</label>
-
                                     <ul>
                                         <li><a href="{{ route('customer.account.index') }}">Account</a></li>
 
@@ -236,77 +85,307 @@
                         @endauth
                     </li>
                 </ul>
-                <ul class="resp-cart-dropdown-container">
+                <ul class="cart-dropdown-container">
+
+                    <?php $cart = cart()->getCart(); ?>
+
+                    @inject ('productImageHelper', 'Webkul\Product\Product\ProductImage')
 
                     <li class="cart-dropdown">
-                        @if(isset($cart) && session()->has('cart'))
-                        @php
-                            $cart = session()->get('cart');
-                        @endphp
-                        <div class="dropdown-toggle">
-                            <span class="icon cart-icon"></span>
-                        </div>
+                        <span class="icon cart-icon"></span>
+                        @if($cart)
+                            @php
+                                $items = $cart->items;
+                            @endphp
+                            <div class="dropdown-toggle">
+                                <div style="display: inline-block; cursor: pointer;">
+                                    @if($cart->items_qty - intval($cart->items_qty) > 0)
+                                        <span class="name">
+                                            Cart
+                                            <span class="count"> ({{ $cart->items_qty }})</span>
+                                        </span>
+                                    @else
+                                        <span class="name">
+                                            Cart
+                                            <span class="count"> ({{ intval($cart->items_qty) }})</span>
+                                        </span>
+                                    @endif
+                                </div>
 
-                        <div class="dropdown-list" style="display: none; top: 50px; right: 0px">
-                            <div class="dropdown-container">
-                                <div class="dropdown-cart">
-                                    <div class="dropdown-header">
-                                        <p class="heading">Cart Subtotal - {{ $cart->sub_total }}</p>
-                                    </div>
+                                <i class="icon arrow-down-icon active"></i>
 
-                                    <div class="dropdown-content">
-                                        @foreach($cart as $product)
-                                        <div class="item" >
-                                            <div class="item-image" >
-                                                <img src="{{$product['2']}}" />
-                                            </div>
-                                            <div class="item-details">
-                                                <div class="item-name">{{$product['0']}}</div>
-                                                <div class="item-price">{{$product['1']}}</div>
-                                                <div class="item-qty">Quantity - {{$product['3']}}</div>
-                                            </div>
+                            </div>
+                            <div class="dropdown-list" style="display: none; top: 50px; right: 0px">
+                                <div class="dropdown-container">
+                                    <div class="dropdown-cart">
+                                        <div class="dropdown-header">
+                                            <p class="heading">Cart Subtotal - {{ $cart->sub_total }}</p>
                                         </div>
-                                        @endforeach
-                                    </div>
 
-                                    <div class="dropdown-footer">
-                                        <a href="/">View Shopping Cart</a>
-                                        <button class="btn btn-primary btn-lg">CHECKOUT</button>
+                                        <div class="dropdown-content">
+                                            @foreach($items as $item)
+                                                @if($item->type == "configurable")
+                                                <div class="item">
+                                                    <div class="item-image" >
+                                                        @php
+                                                            $images = $productImageHelper->getProductBaseImage($item->child->product);
+                                                        @endphp
+                                                        <img src="{{ $images['small_image_url'] }}" />
+                                                    </div>
+
+                                                    <div class="item-details">
+
+                                                        <div class="item-name">{{ $item->child->name }}</div>
+
+                                                        <div class="item-price">{{ $item->total }}</div>
+
+                                                        <div class="item-qty">Quantity - {{ $item->quantity }}</div>
+                                                    </div>
+                                                </div>
+                                                @else
+                                                <div class="item">
+                                                    <div class="item-image" >
+                                                        @php
+                                                            $images = $productImageHelper->getProductBaseImage($item->product);
+                                                        @endphp
+                                                        <img src="{{ $images['small_image_url'] }}" />
+                                                    </div>
+
+                                                    <div class="item-details">
+
+                                                        <div class="item-name">{{ $item->name }}</div>
+
+                                                        <div class="item-price">{{ $item->total }}</div>
+
+                                                        <div class="item-qty">Quantity - {{ $item->quantity }}</div>
+                                                    </div>
+                                                </div>
+                                                @endif
+                                            @endforeach
+                                        </div>
+
+                                        <div class="dropdown-footer">
+                                            <a href="{{ route('shop.checkout.cart.index') }}">View Shopping Cart</a>
+
+                                            <button class="btn btn-primary btn-lg">CHECKOUT</button>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
-                        </div>
                         @else
-                        <div class="dropdown-toggle">
-                            <div style="display: inline-block; cursor: pointer;">
-                                <span class="icon cart-icon"></span>
+                            <div class="dropdown-toggle">
+                                <div style="display: inline-block; cursor: pointer;">
+
+                                    <span class="name">Cart<span class="count"> (0) </span></span>
+                                </div>
                             </div>
-                        </div>
                         @endif
                     </li>
                 </ul>
-                <li class="menu-box" ><span class="icon sortable-icon" id="hammenu"></span></li>
-            </ul>
-        </div>
-    </div>
 
-    <div class="header-bottom" id="header-bottom">
-        @include('shop::layouts.header.nav-menu.navmenu')
-    </div>
+                <ul class="right-responsive">
+                    <li class="search-box"><span class="icon search-icon" id="search"></span></li>
+                    <ul class="resp-account-dropdown-container">
 
-    <div class="search-responsive">
-        <div class="search-content">
-            <i class="icon search-icon mt-10"></i>
-            <input  class="search mt-5">
-            <i class="icon icon-menu-back right mt-10"></i>
+                        <li class="account-dropdown">
+
+                            <div class="dropdown-toggle">
+
+                                <span class="icon account-icon"></span>
+                            </div>
+
+                            @guest
+                                <div class="dropdown-list bottom-right" style="display: none;">
+                                    <div class="dropdown-container">
+
+                                        <label>Account</label>
+
+                                        <ul>
+                                            <li><a href="{{ route('customer.session.index') }}">Sign In</a></li>
+
+                                            <li><a href="{{ route('customer.register.index') }}">Sign Up</a></li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            @endguest
+                            @auth('customer')
+                                <div class="dropdown-list bottom-right" style="display: none;">
+                                    <div class="dropdown-container">
+
+                                        <label>Account</label>
+
+                                        <ul>
+                                            <li><a href="{{ route('customer.account.index') }}">Account</a></li>
+
+                                            <li><a href="{{ route('customer.profile.index') }}">Profile</a></li>
+
+                                            <li><a href="{{ route('customer.address.index') }}">Address</a></li>
+
+                                            <li><a href="{{ route('customer.wishlist.index') }}">Wishlist</a></li>
+
+                                            <li><a href="{{ route('shop.checkout.cart.index') }}">Cart</a></li>
+
+                                            <li><a href="{{ route('customer.orders.index') }}">Orders</a></li>
+
+                                            <li><a href="{{ route('customer.session.destroy') }}">Logout</a></li>
+                                        </ul>
+
+                                    </div>
+
+                                </div>
+                            @endauth
+                        </li>
+                    </ul>
+                    <ul class="resp-cart-dropdown-container">
+
+                        <li class="cart-dropdown">
+                            @if(isset($cart) && session()->has('cart'))
+                            @php
+                                $cart = session()->get('cart');
+                            @endphp
+                            <div class="dropdown-toggle">
+                                <span class="icon cart-icon"></span>
+                            </div>
+
+                            <div class="dropdown-list" style="display: none; top: 50px; right: 0px">
+                                <div class="dropdown-container">
+                                    <div class="dropdown-cart">
+                                        <div class="dropdown-header">
+                                            <p class="heading">Cart Subtotal - {{ $cart->sub_total }}</p>
+                                        </div>
+
+                                        <div class="dropdown-content">
+                                            @foreach($cart as $product)
+                                            <div class="item" >
+                                                <div class="item-image" >
+                                                    <img src="{{$product['2']}}" />
+                                                </div>
+                                                <div class="item-details">
+                                                    <div class="item-name">{{$product['0']}}</div>
+                                                    <div class="item-price">{{$product['1']}}</div>
+                                                    <div class="item-qty">Quantity - {{$product['3']}}</div>
+                                                </div>
+                                            </div>
+                                            @endforeach
+                                        </div>
+
+                                        <div class="dropdown-footer">
+                                            <a href="/">View Shopping Cart</a>
+                                            <button class="btn btn-primary btn-lg">CHECKOUT</button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            @else
+                            <div class="dropdown-toggle">
+                                <div style="display: inline-block; cursor: pointer;">
+                                    <span class="icon cart-icon"></span>
+                                </div>
+                            </div>
+                            @endif
+                        </li>
+                    </ul>
+                    <li class="menu-box" ><span class="icon sortable-icon" id="hammenu"></span></li>
+                </ul>
+            </div>
         </div>
 
-        <div class="search-content">
-            <i class="icon search-icon mt-10"></i>
-            <span class="suggestion mt-15">Designer sarees</span>
+        <div class="header-bottom" id="header-bottom">
+            @include('shop::layouts.header.nav-menu.navmenu')
+        </div>
+
+        <div class="search-responsive">
+            <div class="search-content">
+                <i class="icon search-icon mt-10"></i>
+                <input  class="search mt-5">
+                <i class="icon icon-menu-back right mt-10"></i>
+            </div>
+
+            <div class="search-content">
+                <i class="icon search-icon mt-10"></i>
+                <span class="suggestion mt-15">Designer sarees</span>
+            </div>
+        </div>
+
+        <div class="responsive-nav">
+            <category-nav categories='@json($categories)' url="{{url()->to('/')}}"></category-nav>
         </div>
-    </div>
-    <div class="responsive-nav-menu">
 
     </div>
-</div>
\ No newline at end of file
+
+
+
+@push('scripts')
+
+<script>
+
+    window.onload = function() {
+        var hamMenu = document.getElementById("hammenu");
+        var search = document.getElementById("search");
+
+        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];
+
+        search.addEventListener("click", header);
+        hamMenu.addEventListener("click", header);
+
+        // activate on window resize
+        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';
+            }
+        }
+    }
+
+</script>
+
+@endpush
\ 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 cea2878b5..618856942 100644
--- a/packages/Webkul/Shop/src/Resources/views/layouts/master.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/layouts/master.blade.php
@@ -42,7 +42,6 @@
 
     <script type="text/javascript">
         window.flashMessages = [];
-
         @if($success = session('success'))
             window.flashMessages = [{'type': 'alert-success', 'message': "{{ $success }}" }];
         @elseif($warning = session('warning'))
@@ -50,7 +49,6 @@
         @elseif($error = session('error'))
             window.flashMessages = [{'type': 'alert-error', 'message': "{{ $error }}" }];
         @endif
-
         window.serverErrors = [];
         @if (count($errors))
             window.serverErrors = @json($errors->getMessages());
@@ -61,6 +59,7 @@
     <script type="text/javascript" src="{{ asset('vendor/webkul/ui/assets/js/ui.js') }}"></script>
 
     @stack('scripts')
+
 </body>
 
 </html>
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/views/products/index.blade.php b/packages/Webkul/Shop/src/Resources/views/products/index.blade.php
index 672238048..aeede3b00 100644
--- a/packages/Webkul/Shop/src/Resources/views/products/index.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/index.blade.php
@@ -55,4 +55,52 @@
 @stop
 
 
+@push('scripts')
+
+<script>
+    $(document).ready(function() {
+
+        var sort = document.getElementById("sort");
+        var filter = document.getElementById("filter");
+        var sortLimit = document.getElementsByClassName('reponsive-sorter-limiter')[0];
+        var layerFilter = document.getElementsByClassName('responsive-layred-filter')[0];
+
+        if(sort && filter){
+            sort.addEventListener("click", sortFilter);
+            filter.addEventListener("click", sortFilter);
+        }
+
+        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
+
+
 
diff --git a/packages/Webkul/Shop/src/Resources/views/products/view.blade.php b/packages/Webkul/Shop/src/Resources/views/products/view.blade.php
index 9fd492848..836104de9 100644
--- a/packages/Webkul/Shop/src/Resources/views/products/view.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/view.blade.php
@@ -80,4 +80,40 @@
 
 @endsection
 
+@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";
+            }
+        }
+    }
+
+    $(document).ready(function() {
+
+        var thumbList = document.getElementsByClassName('thumb-list')[0];
+        var thumbFrame = document.getElementsByClassName('thumb-frame');
+
+        // 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";
+            }
+        }
+    })
+
+</script>
+@endpush
+
+
+
 
diff --git a/packages/Webkul/Ui/src/Resources/assets/sass/icons.scss b/packages/Webkul/Ui/src/Resources/assets/sass/icons.scss
index cd5f00ab3..533dc347f 100644
--- a/packages/Webkul/Ui/src/Resources/assets/sass/icons.scss
+++ b/packages/Webkul/Ui/src/Resources/assets/sass/icons.scss
@@ -142,6 +142,12 @@
     height: 18px;
 }
 
+.expand-on-icon {
+    background-image: url("../images/Expand-Light-On.svg");
+    width: 18px;
+    height: 18px;
+}
+
 .dark-left-icon {
     background-image: url("../images/arrow-left-dark.svg");
     width: 18px;
diff --git a/public/themes/default/assets/css/shop.css b/public/themes/default/assets/css/shop.css
index acc6d04c4..1c1c3c487 100644
--- a/public/themes/default/assets/css/shop.css
+++ b/public/themes/default/assets/css/shop.css
@@ -85,6 +85,18 @@
   height: 32px;
 }
 
+.icon-arrow-up {
+  background-image: url("../images/arrow-up.svg");
+  width: 16px;
+  height: 16px;
+}
+
+.icon-arrow-down {
+  background-image: url("../images/arrow-down.svg");
+  width: 16px;
+  height: 16px;
+}
+
 .product-grid-4 {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
@@ -1078,6 +1090,10 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
   position: relative;
 }
 
+.header .header-bottom .nav a:first-child {
+  margin-left: 20px;
+}
+
 .header .header-bottom .nav li > .icon {
   display: none;
 }
@@ -1235,8 +1251,6 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
     padding: 12px 4.8px 12px 8px;
     text-transform: uppercase;
     letter-spacing: 2px;
-    position: relative;
-    width: 90%;
   }
   .responsive-nav .nav li > .icon {
     float: right;
@@ -1247,6 +1261,9 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
   .responsive-nav .nav > li {
     border-bottom: 1px solid #E8E8E8;
   }
+  .responsive-nav .nav li {
+    padding-left: 20px;
+  }
   .responsive-nav .nav li:first-child {
     border-top: 1px solid #E8E8E8;
   }
@@ -1522,6 +1539,10 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
   margin-bottom: 5.5%;
 }
 
+.account-content .side-menu-title {
+  display: none;
+}
+
 .account-content .account-side-menu {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -1581,6 +1602,10 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
   width: 100%;
 }
 
+.account-content .profile .section-head .back-icon {
+  display: none;
+}
+
 .account-content .profile .section-head .profile-heading {
   font-size: 28px;
   color: #242424;
@@ -1674,31 +1699,63 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
         -ms-flex-direction: column;
             flex-direction: column;
   }
+  .account-content .side-menu-title {
+    height: 48px;
+    padding-top: 13px;
+    border: 1px solid;
+    font-size: 18px;
+    display: inline-block;
+  }
+  .account-content .side-menu-title .right {
+    float: right;
+    margin-top: 3px;
+  }
   .account-content .account-side-menu {
     width: 100%;
     border: none;
     margin-bottom: 20px;
-  }
-  .account-content .account-side-menu .side-menu-title {
-    height: 48px;
-    padding-top: 15px;
-    border: 1px solid;
-  }
-  .account-content .account-side-menu .side-menu-title::after {
-    content: url(../images/arrow-down.svg);
-    float: right;
-  }
-  .account-content .account-side-menu .side-menu-title-active::after {
-    content: url(../images//arrow-up.svg);
-    float: right;
+    display: none;
   }
   .account-content .account-side-menu li {
     width: 100%;
     margin-left: 0%;
   }
+  .account-content .account-side-menu li a {
+    color: black;
+  }
   .account-content .account-side-menu li:last-child {
     border-bottom: 1px solid #E8E8E8;
   }
+  .account-content .profile {
+    margin-left: 0px;
+  }
+  .account-content .profile .section-head {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+    border-top: 1px solid #E8E8E8;
+    border-bottom: 1px solid #E8E8E8;
+    height: 50px;
+    padding-top: 7px;
+  }
+  .account-content .profile .section-head .back-icon {
+    display: block;
+    cursor: pointer;
+    margin-top: 5px;
+  }
+  .account-content .profile .section-head .horizontal-rule {
+    display: none;
+  }
+  .account-content .profile-content table tbody tr {
+    display: grid;
+    margin-bottom: 20px;
+  }
+  .account-content .edit-form-content {
+    margin-left: 0px;
+  }
 }
 
 section.product-detail {
diff --git a/public/themes/default/assets/js/shop.js b/public/themes/default/assets/js/shop.js
index ba694a7fa..665746314 100644
--- a/public/themes/default/assets/js/shop.js
+++ b/public/themes/default/assets/js/shop.js
@@ -30845,6 +30845,8 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 //
 //
 //
+//
+//
 
 // define the item component
 /* harmony default export */ __webpack_exports__["default"] = ({
@@ -30891,16 +30893,14 @@ var render = function() {
     _c("a", { attrs: { href: this.item["translations"][0].slug } }, [
       _vm._v(_vm._s(this.item["translations"][0].name) + " "),
       _vm.haveChildren && _vm.item.parent_id != null
-        ? _c("i", { staticClass: "icon dropdown-right-icon" })
+        ? _c("i", { staticClass: "icon expand-icon" })
         : _vm._e()
     ]),
     _vm._v(" "),
     _vm.haveChildren || _vm.item.parent_id == null
       ? _c("i", {
           class: [
-            _vm.show
-              ? "icon arrow-down-icon mt-15"
-              : "icon dropdown-right-icon mt-15"
+            _vm.show ? "icon expand-icon mt-15" : "icon expand-on-icon mt-15"
           ],
           on: { click: _vm.showOrHide }
         })
@@ -30910,7 +30910,9 @@ var render = function() {
       ? _c(
           "ul",
           _vm._l(_vm.item.children, function(child, index) {
-            return _c("category-item", { key: index, attrs: { item: child } })
+            return _c("category-item", { key: index, attrs: { item: child } }, [
+              _vm._v("\n\n            " + _vm._s(child) + "\n        ")
+            ])
           })
         )
       : _vm._e()