diff --git a/amadeus/static/css/base/amadeus.css b/amadeus/static/css/base/amadeus.css
index 3b883c3..e3acb00 100755
--- a/amadeus/static/css/base/amadeus.css
+++ b/amadeus/static/css/base/amadeus.css
@@ -121,6 +121,52 @@
 }
 /* End NavBar Top */
 
+/* Dropdown menu Topbar */
+.dropdown-menu {
+    background: #F5F5F5;
+}
+
+.dropdown-menu li > a {
+    background: #F5F5F5;
+    font-family: Roboto;
+    font-size: 16px;
+    color: #333333;
+}
+.dropdown-menu li > a:hover {
+    background: #EEEEEE !important;
+}
+
+#system_accordion {
+    margin-bottom: 0px;
+}
+
+#system_accordion > .panel > .panel-heading {
+    background: #F5F5F5;
+}
+#system_accordion > .panel > .panel-heading:hover {
+    background: #EEEEEE;
+}
+
+#system_accordion > .panel > .panel-heading > a > .panel-title {
+    font-weight: normal;
+    color: #333333;
+}
+#system_accordion > .panel > .panel-heading > a > .panel-title:hover {
+    color: #009688;
+}
+#system_accordion > .panel > .panel-heading > a:hover {
+    text-decoration: none;
+    color: #009688;
+}
+#system_accordion > .panel > .panel-heading > a:focus {
+    text-decoration: none;
+}
+
+#system_menu {
+    background: #F5F5F5;
+}
+/* End Dropdown menu Topbar */
+
 /* Modal */
 .modal-header {min-height: 60px; border-bottom: 1px solid #E6E7E8 !important; padding-bottom: 15px !important;}
 .modal-footer {text-align: right; padding-top: 5px !important; border-top: 1px solid #E6E7E8 !important;}
diff --git a/amadeus/static/js/main.js b/amadeus/static/js/main.js
index e36fe08..12d8ba3 100755
--- a/amadeus/static/js/main.js
+++ b/amadeus/static/js/main.js
@@ -2,4 +2,14 @@ var locale = navigator.language || navigator.userLanguage;
 
 $('.date-picker').datepicker({ 
 	language: locale,
+});
+
+$(function () {
+	//Dropdown menu collapse
+	$('a[data-toggle="collapse"]').on('click', function (event) {
+        event.preventDefault();
+        event.stopPropagation();
+        $($(this).data('parent')).find('.panel-collapse.in').collapse('hide');
+        $($(this).attr('href')).collapse('show');
+    });
 });
\ No newline at end of file
diff --git a/amadeus/templates/base.html b/amadeus/templates/base.html
index 42b642a..a051fed 100644
--- a/amadeus/templates/base.html
+++ b/amadeus/templates/base.html
@@ -88,32 +88,31 @@
                     </form>
                 </div>
                 <ul class="nav navbar-nav navbar-right notifications">
-                    <!--<li class="" data-toggle="tooltip" data-placement="bottom" title data-original-title="notifications">
-                      <a  class="dropdown-toggle" data-toggle="dropdown"> <span id="notification-count" class="badge notification-count">{{notifications.count}}</span><i class="fa fa-bell" aria-hidden="true"></i></a>-
-                      <ul id="notification-dropdown" class="dropdown-menu">
-                        <li class="dropdown-header"> {% trans 'Notifications' %}</li>
-                        
-                        <li>
-                          <a onclick="getNotifications(5)">
-                            <div id="notification-see-more" class="list-group-item">
-                              <div class="row-content">
-                                <p class="list-group-item-text">{% trans 'See More' %}</p>
-                              </div>
-                            </div>
-                          </a>
-                        </li>
-                      </ul>
-                    </li> -->
-                    <li title data-original-title="{% trans 'settings' %}">
-                        <a href="" data-toggle="dropdown"><i class="fa fa-cog" aria-hidden="true"></i></a> 
-                        <ul class="dropdown-menu pull-right">
+                    <li class="dropdown-accordion dropdown" data-accordion="#system_accordion" title data-original-title="{% trans 'settings' %}">
+                        <a href="#" data-toggle="dropdown"><i class="fa fa-cog" aria-hidden="true"></i></a> 
+                        <ul class="dropdown-menu pull-right" role="menu">
                             <li><a href="{% url 'users:manage' %}">{% trans 'Manage Users' %}</a></li>
                             <li><a href="{% url 'categories:index' %}">{% trans 'Manage Categories' %}</a></li>
-                            <li><a href="{% url 'categories:index' %}">{% trans 'System' %}</a></li>
-                            <div id="horizontal-line"></div>
-                            <li><a href="{% url 'categories:index' %}">{% trans 'Mail Sender' %}</a></li>
-                            <li><a href="{% url 'categories:index' %}">{% trans 'Security' %}</a></li>
-                            <li><a href="{% url 'categories:index' %}">{% trans 'Theme' %}</a></li>
+                            <li>
+                                <div class="panel-group" id="system_accordion">
+                                    <div class="panel panel-default">
+                                        <div class="panel-heading">
+                                            <a href="#system_menu" data-toggle="collapse" data-parent="#system_accordion">
+                                                <h4 class="panel-title">
+                                                    {% trans 'System' %}
+                                                </h4>
+                                            </a>
+                                        </div>
+                                        <div class="panel-collapse collapse" id="system_menu">
+                                            <div class="panel-body">
+                                                <a href="{% url 'categories:index' %}">{% trans 'Mail Sender' %}</a><br />
+                                                <a href="{% url 'categories:index' %}">{% trans 'Security' %}</a><br />
+                                                <a href="{% url 'categories:index' %}">{% trans 'Theme' %}</a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </li>
                         </ul>
                     </li>
                     <li title data-original-title="{% trans 'account' %}">
@@ -156,10 +155,6 @@
                        <li class="item" data-toggle="tooltip" data-placement="right" title="{% trans "Analytics" %}">
                             <i class="fa fa-bar-chart" aria-hidden="true"></i>
                        </li>
-
-                     
-
-                        
                    </ul>
                 {% endblock %}
             </div>
@@ -188,7 +183,7 @@
         /* Initialize tooltips*/
         $(function () {
           $('[data-toggle="tooltip"]').tooltip()
-        })
+        });
     </script>
 </body>
 
--
libgit2 0.21.2