diff --git a/packages/ui-default/components/dropdown/Dropdown.js b/packages/ui-default/components/dropdown/Dropdown.js
index 036a6439a..8aa0e81d3 100644
--- a/packages/ui-default/components/dropdown/Dropdown.js
+++ b/packages/ui-default/components/dropdown/Dropdown.js
@@ -26,7 +26,7 @@ export default class Dropdown extends DOMAttachedObject {
     };
     this.dropInstance = new Drop({
       target: $dom[0],
-      classes: 'dropdown',
+      classes: `dropdown ${$dom.attr('data-dropdown-custom-class') || ''}`,
       content: this.options.target || $.find($dom.attr('data-dropdown-target'))[0],
       position: this.options.position,
       openOn: 'hover',
diff --git a/packages/ui-default/components/dropdown/dropdown.page.styl b/packages/ui-default/components/dropdown/dropdown.page.styl
index 15c6577f0..03ecb8ad3 100644
--- a/packages/ui-default/components/dropdown/dropdown.page.styl
+++ b/packages/ui-default/components/dropdown/dropdown.page.styl
@@ -4,9 +4,10 @@
 .drop .dropdown-target
   display: block
 
-.dropdown
+.drop.nav__dropdown
   max-height: calc(100% - 60px)
   overflow-y: auto
+  box-shadow: 0rem 0.125rem 0.4375rem rgba(0 0 0 , 30%);
 
 .dropdown
   .menu
diff --git a/packages/ui-default/templates/partials/nav.html b/packages/ui-default/templates/partials/nav.html
index 020eb7477..ee98e15bb 100644
--- a/packages/ui-default/templates/partials/nav.html
+++ b/packages/ui-default/templates/partials/nav.html
@@ -18,7 +18,7 @@
     {% if not handler.user.hasPriv(PRIV.PRIV_USER_PROFILE) %}
       <li class="nav__list-item"><a href="{{ url('user_login') }}" class="nav__item" name="nav_login">{{ _('Login') }}</a></li>
       <li class="nav__list-item"><a href="{{ url('user_register') }}" class="nav__item--round">{{ _('Sign Up') }}</a></li>
-      <li class="nav__list-item" data-dropdown-pos="bottom right" data-dropdown-target="#menu-nav-user" data-dropdown-disabledconstrainToWindow data-dropdown-trigger-desktop-only>
+      <li class="nav__list-item" data-dropdown-pos="bottom right" data-dropdown-custom-class="nav__dropdown" data-dropdown-target="#menu-nav-user" data-dropdown-disabledconstrainToWindow data-dropdown-trigger-desktop-only>
         <a href="javascript:;" class="nav__item">
           <span class="icon icon-global"></span>Language <span class="icon icon-expand_more"></span>
         </a>
@@ -29,7 +29,7 @@
         </ol>
       </li>
     {% else %}
-      <li class="nav__list-item" data-dropdown-pos="bottom right" data-dropdown-target="#menu-nav-user" data-dropdown-disabledconstrainToWindow data-dropdown-trigger-desktop-only>
+      <li class="nav__list-item" data-dropdown-pos="bottom right" data-dropdown-custom-class="nav__dropdown" data-dropdown-target="#menu-nav-user" data-dropdown-disabledconstrainToWindow data-dropdown-trigger-desktop-only>
         <a href="{{ url('user_detail', uid=handler.user._id) }}" class="nav__item">{{ handler.user.uname }} <span class="icon icon-expand_more nojs--hide"></span></a>
         <ol class="dropdown-target menu" id="menu-nav-user">
           <li class="menu__item">