diff --git a/packages/Webkul/Core/src/Eloquent/TranslatableModel.php b/packages/Webkul/Core/src/Eloquent/TranslatableModel.php
index 76536e397..cac7c8034 100644
--- a/packages/Webkul/Core/src/Eloquent/TranslatableModel.php
+++ b/packages/Webkul/Core/src/Eloquent/TranslatableModel.php
@@ -24,7 +24,7 @@ class TranslatableModel extends Model
         } elseif(Locale::where('code', '=', $key)->first()) {
             return true;
         }
-        
+
         return false;
     }
 
@@ -52,12 +52,4 @@ class TranslatableModel extends Model
     {
         return false;
     }
-
-    /**
-     * @return string
-     */
-    protected function getLocaleSeparator()
-    {
-        return config('translatable.locale_separator', '%');
-    }
-}
\ No newline at end of file
+}
diff --git a/packages/Webkul/Shop/src/Resources/assets/images/icon-dropdown-left.svg b/packages/Webkul/Shop/src/Resources/assets/images/icon-dropdown-left.svg
new file mode 100644
index 000000000..ddc827bf8
--- /dev/null
+++ b/packages/Webkul/Shop/src/Resources/assets/images/icon-dropdown-left.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="8px" height="8px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50 (54983) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-dropdown-left</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="icon-dropdown-left" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <polygon id="›" fill="#242424" transform="translate(3.519196, 4.000000) scale(1, -1) translate(-3.519196, -4.000000) " points="1 8 4.06610107 4 1 0 3.00469971 0 6.03839111 4 3.00469971 8"></polygon>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/assets/images/icon-menu-close.svg b/packages/Webkul/Shop/src/Resources/assets/images/icon-menu-close.svg
new file mode 100644
index 000000000..014866710
--- /dev/null
+++ b/packages/Webkul/Shop/src/Resources/assets/images/icon-menu-close.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50 (54983) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-menu-close</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="icon-menu-close" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Group" transform="translate(5.000000, 5.000000)" stroke="#242424" stroke-width="3">
+            <path d="M0.0685261796,14.2496556 L13.5678375,0.750344361" id="Line-2"></path>
+            <path d="M0.0685261796,0.750344361 L13.5678375,14.2496556" id="Line-2"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/assets/images/offer-zone.svg b/packages/Webkul/Shop/src/Resources/assets/images/offer-zone.svg
index dc2f60ebd..042f15182 100644
--- a/packages/Webkul/Shop/src/Resources/assets/images/offer-zone.svg
+++ b/packages/Webkul/Shop/src/Resources/assets/images/offer-zone.svg
@@ -1,13 +1,13 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <!-- Generator: Sketch 50 (54983) - http://www.bohemiancoding.com/sketch -->
     <title>icon-offer</title>
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="icon-offer" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <polygon id="Star" fill="#FF6472" points="12 21.8341033 8.29179607 23.8299999 6.46471607 20.0352146 2.29179607 19.4698579 3.04372246 15.325663 0 12.415 3.04372246 9.50433697 2.29179607 5.360142 6.46471607 4.79478531 8.29179607 1 12 2.99589665 15.7082039 1 17.5352839 4.79478531 21.7082039 5.360142 20.9562775 9.50433697 24 12.415 20.9562775 15.325663 21.7082039 19.4698579 17.5352839 20.0352146 15.7082039 23.8299999"></polygon>
         <text id="%" font-family="Montserrat-Regular, Montserrat" font-size="12" font-weight="normal" letter-spacing="-0.2879999" fill="#FFFFFF">
-            <tspan x="7.8559999" y="17">%</tspan>
+            <tspan x="7.3399999" y="17">%</tspan>
         </text>
     </g>
 </svg>
\ No newline at end of file
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 c85c59e2b..2ffceecc3 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,7 +1,7 @@
 <template>
     <li>
-        <a href="">{{ item.name }}</a>
-        <!-- replace the below inner-child class with dropdown -->
+        <a href="">{{ this.item['translations'][0].name }}&emsp;<i class="icon dropdown-right-icon"
+        v-if="haveChildren"></i></a>
         <ul v-if="haveChildren">
             <category-item
                 v-for="(child, index) in item.children"
@@ -11,7 +11,6 @@
         </ul>
     </li>
 </template>
-
 <script>
 
 // define the item component
@@ -19,17 +18,13 @@
 export default {
 	props: {
 		item:  Object,
-        url: String
+        url: String,
     },
 
-    methods:{
-        change: function () {
-            this.isActive = true;
-        }
-    },
-
-    created() {
-        // console.log(this.item)
+    data(){
+        return {
+            items_count:0
+        };
     },
 
     computed: {
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 8a0f1e80e..6f6f22704 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,5 +1,6 @@
 <template>
     <ul class="nav">
+
         <category-item
             v-for="(item, index) in items"
             :key="index"
@@ -9,13 +10,16 @@
         <li>
             <img class="icon" src="vendor/webkul/shop/assets/images/offer-zone.svg" style="margin-right:5px;" />Offer Zone
         </li>
+
     </ul>
 </template>
 
 <script>
+
 // define the item component
 export default {
-	props: {
+
+    props: {
 		categories: {
             type: [Array, String, Object],
             required: false,
@@ -24,107 +28,16 @@ export default {
         url: String
     },
 
-    created () {
-        console.log(this.url)
+    data(){
+        return {
+            items_count:0
+        };
     },
 
     computed: {
         items () {
             return JSON.parse(this.categories)
         }
-    }
+    },
 }
 </script>
-<style>
-    ul.nav {
-        display: block;
-        text-align: center;
-        font-size:16px;
-    }
-    .nav ul {
-        margin: 0;
-        padding:0;
-        list-style: none;
-    }
-    .nav a {
-        display:block;
-        color: black;
-        text-decoration: none;
-        padding: 0.8em 1.8em;
-        text-transform: uppercase;
-        letter-spacing: 2px;
-        position: relative;
-    }
-    .nav{
-        vertical-align: top;
-        display: inline-block;
-        box-shadow:
-            1px -1px -1px 1px #000,
-            -1px 1px -1px 1px #fff,
-            0 0 6px 3px #fff;
-        border-radius:6px;
-    }
-    .nav li {
-        position: relative;
-    }
-    .nav > li {
-        float: left;
-        margin-right: 1px;
-    }
-    .nav > li > a {
-        margin-bottom: 1px;
-    }
-    .nav > li:last-child {
-        border-radius: 0 0 4px 0;
-        margin-right: 0;
-    }
-    .nav > li:last-child > a {
-        border-radius: 0 4px 0 0;
-    }
-    .nav li li a {
-        margin-top: 1px;
-    }
-
-    .nav li a:first-child:nth-last-child(2):before {
-        content: "";
-        position: absolute;
-        height: 0;
-        width: 0;
-        border: 5px solid transparent;
-        top: 50% ;
-        right:5px;
-    }
-
-    /* submenu positioning*/
-
-    .nav ul {
-        position: absolute;
-        white-space: nowrap;
-        border: 1px solid #B1B1B1;
-        background-color:white;
-        z-index: 1;
-        left: -99999em;
-    }
-    .nav > li:hover > ul {
-        left: auto;
-        min-width: 100%;
-    }
-    .nav > li li:hover > ul {
-        left: 100%;
-        margin-left: 1px;
-        top: -1px;
-    }
-
-.nav > li:hover > a:first-child:nth-last-child(2):before {
-        /* border: 5px solid transparent;
-        border-bottom-color: orange; */
-        margin-top:-5px
-    }
-    .nav li li > a:first-child:nth-last-child(2):before {
-        /* border-left-color: #aaa; */
-        margin-top: -5px
-    }
-    .nav li li:hover > a:first-child:nth-last-child(2):before {
-        right: 10px;
-    }
-</style>
diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
index 974fd6a37..8e3f9a74c 100644
--- a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
@@ -1,5 +1,6 @@
 @import url("https://fonts.googleapis.com/css?family=Montserrat:400,500");
 
+@import "icons";
 @import "mixins";
 @import "variables";
 
@@ -12,7 +13,6 @@ body {
 }
 
 .header {
-    // border: 1px solid black;
     margin-top: 16px;
     margin-bottom: 21px;
 
@@ -93,17 +93,19 @@ body {
                     margin-right: 14px;
 
                     .account-icon {
-                        margin: 0;
-                        padding-right: 8px;
+                        cursor:  pointer;
+                        margin-right: 8px;
                         height: 24px;
                         width: 24px;
                     }
                     .account {
+                        cursor:  pointer;
                         padding-top: 3px;
                         padding-right: 5px;
                         margin-left: 8px;
                     }
                     .icon.arrow-down-icon {
+                        cursor:  pointer;
                         margin-top: 10px;
                     }
                 }
@@ -168,29 +170,130 @@ body {
         font-size: 16px;
         display: block;
 
-        .menu-bar {
-            display: flex;
-            flex-direction: row;
-            justify-content: flex-start;
-            align-items: center;
+        // .menu-bar {
+        //     display: flex;
+        //     flex-direction: row;
+        //     justify-content: flex-start;
+        //     align-items: center;
+        //     height: 48px;
+        //     width: 80%;
+        //     margin-left: auto;
+        //     margin-right: auto;
+
+        //     li {
+        //         display: flex;
+        //         flex-direction: row;
+        //         align-items: center;
+        //         justify-content: center;
+        //         // background-color: blue;
+        //         height: 100%;
+        //         margin: 2.5%;
+        //     }
+        //     li:last-child {
+        //         margin-left: auto;
+        //         color: $offer-color;
+        //     }
+        // }
+        ul.nav {
+            display: block;
+            font-size:16px;
             height: 48px;
             width: 80%;
             margin-left: auto;
             margin-right: auto;
+        }
 
-            li {
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-                justify-content: center;
-                // background-color: blue;
-                height: 100%;
-                margin: 2.5%;
-            }
-            li:last-child {
-                margin-left: auto;
-                color: $offer-color;
-            }
+        .nav ul {
+            margin: 0;
+            padding:0;
+            border: 1px solid #B1B1B1;
+            box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.40);
+        }
+
+        .nav a {
+            display:block;
+            color: #242424;
+            text-decoration: none;
+            padding: 0.8em 0.3em 0.8em 0.5em;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            position: relative;
+        }
+
+        .nav{
+            vertical-align: top;
+            display: inline-block;
+        }
+
+        .nav li {
+            position: relative;
+            height:45px;
+        }
+
+        .nav > li {
+            float: left;
+            margin-right: 1px;
+        }
+
+        .nav > li > a {
+            margin-bottom: 1px;
+        }
+
+        .nav > li:last-child {
+            border-radius: 0 0 4px 0;
+            margin-right: 0;
+        }
+
+        .nav > li:last-child > a {
+            border-radius: 0 4px 0 0;
+        }
+
+        .nav li li a {
+            margin-top: 1px;
+        }
+
+        .nav li a:first-child:nth-last-child(2):before {
+            content: "";
+            position: absolute;
+            height: 0;
+            width: 0;
+            border: 5px solid transparent;
+            top: 50% ;
+            right:5px;
+        }
+
+        /* submenu positioning*/
+
+        .nav ul {
+            position: absolute;
+            white-space: nowrap;
+            border: 1px solid #B1B1B1;
+            background-color:white;
+            z-index: 1;
+            left: -99999em;
+        }
+
+        .nav > li:hover > ul {
+            left: auto;
+            min-width: 100%;
+        }
+
+        .nav > li li:hover > ul {
+            left: 100%;
+            margin-left: 1px;
+            top: -1px;
+        }
+
+        .nav > li:hover > a:first-child:nth-last-child(2):before {
+            margin-top:-5px
+        }
+
+        .nav li li > a:first-child:nth-last-child(2):before {
+            margin-top: -5px
+        }
+
+        .nav li li:hover > a:first-child:nth-last-child(2):before {
+            right: 10px;
         }
     }
 }
diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/icons.scss b/packages/Webkul/Shop/src/Resources/assets/sass/icons.scss
new file mode 100644
index 000000000..f59e70001
--- /dev/null
+++ b/packages/Webkul/Shop/src/Resources/assets/sass/icons.scss
@@ -0,0 +1,11 @@
+.icon {
+    display: inline-block;
+    background-size: cover;
+}
+.dropdown-right-icon{
+    background-image:URL('../images/icon-dropdown-left.svg');
+    width: 8px;
+    height: 8px;
+    margin-left:auto;
+    margin-bottom: 2px;
+}
diff --git a/packages/Webkul/Shop/src/Resources/views/store/header/index.blade.php b/packages/Webkul/Shop/src/Resources/views/store/header/index.blade.php
index 76a859585..5742cf08c 100644
--- a/packages/Webkul/Shop/src/Resources/views/store/header/index.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/store/header/index.blade.php
@@ -2,9 +2,6 @@
     <div class="header-top">
         <div class="left-content">
             <ul class="logo-container">
-                {{-- @for($i=0;$i<sizeof($categories);$i++)
-                    {{ $categories[$i] }}
-                @endfor --}}
                 <li>
                     <a href="">
                         <img class="logo" src="vendor/webkul/shop/assets/images/logo.svg" />
@@ -12,25 +9,41 @@
                 </li>
             </ul>
             <ul class="search-container">
+
                 <li class="search-group">
                     <input type="search" class="search-field" placeholder="Search for products">
                     <div class="q-c">
                         <span class="icon search-icon"></span>
                     </div>
                 </li>
+
             </ul>
         </div>
         <div class="right-content">
+
             <ul class="search-dropdown-container">
                 <li class="search-dropdown">
 
                 </li>
             </ul>
+
             <ul class="account-dropdown-container">
                 <li class="account-dropdown">
                     <span class="icon account-icon"></span>
-                    <span class="account">Account</span>
-                    <span class="icon arrow-down-icon"></span>
+                    <div class="dropdown-toggle">
+                        <div style="display: inline-block; cursor: pointer;">
+                            <span class="name">Account</span>
+                        </div>
+                        <i class="icon arrow-down-icon active"></i>
+                    </div>
+                    <div class="dropdown-list bottom-right" style="display: none;">
+                        <div class="dropdown-container">
+                            <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>
                 </li>
             </ul>