diff --git a/apps/static/css/jumpserver.css b/apps/static/css/jumpserver.css
index fd15945b9..8857264f4 100644
--- a/apps/static/css/jumpserver.css
+++ b/apps/static/css/jumpserver.css
@@ -289,4 +289,37 @@ div.dataTables_wrapper div.dataTables_filter {
     margin-bottom:0;
     margin-left: 10px;
     margin-right: 10px
+}
+
+.navbar-default {
+    background-color: #2f4050;
+    border-color: #2f4050;
+}
+
+.nav-header, body.mini-navbar .nav-header {
+    padding: 0;
+    background: #202c37;
+}
+
+.profile-element div:first-child {
+    line-height: 60px;
+    width: 70px;
+    float: left;
+    text-align: center;
+}
+
+.profile-element div:last-child {
+    line-height: 60px;
+    width: 150px;
+    float: left;
+    font-size: 22px;
+    color: #1ab394;
+}
+
+.logo-element {
+    padding: 10px 0;
+}
+
+.welcome-message img {
+    margin: -11px 0;
 }
\ No newline at end of file
diff --git a/apps/templates/_header_bar.html b/apps/templates/_header_bar.html
index 447454616..f616e2c77 100644
--- a/apps/templates/_header_bar.html
+++ b/apps/templates/_header_bar.html
@@ -18,11 +18,30 @@
                      <span class="m-r-sm text-muted welcome-message">{% trans 'Help' %}</span>
                 </a>
             </li>
-            <li>
+            <li class="dropdown">
                 {% if user.is_authenticated %}
-                <a href="{% url 'users:logout' %}">
-                    <i class="fa fa-sign-out"></i>{% trans 'Logout' %}
+                <a data-toggle="dropdown" class="dropdown-toggle" href="#">
+                    <span class="m-r-sm text-muted welcome-message">
+                        <img alt="image" class="img-circle" width="40" height="40" src="{{ request.user.avatar_url }}"/>
+                        <strong class="font-bold"> {{ request.user.name }}
+                            <span style="color: #8095a8"></span>
+                            <b class="caret"></b>
+                        </strong>
+                    </span>
                 </a>
+                <ul class="dropdown-menu animated fadeInRight m-t-xs">
+                    <li><a href="{% url 'users:user-profile' %}">{% trans 'Profile' %}</a></li>
+                    <li><a href="{% url 'users:user-profile-update' %}">{% trans 'Profile settings' %}</a></li>
+                    <li class="divider"></li>
+                    {% if request.user.is_superuser %}
+                    {% if request.COOKIES.IN_ADMIN_PAGE == 'No' %}
+                    <li><a id="switch_admin">{% trans 'Admin page' %}</a></li>
+                    {% else %}
+                    <li><a id="switch_user">{% trans 'User page' %}</a></li>
+                    {% endif %}
+                    {% endif %}
+                    <li><a href="{% url 'users:logout' %}">{% trans 'Logout' %}</a></li>
+                </ul>
                 {% else %}
                 <a href="{% url 'users:login' %}">
                     <i class="fa fa-sign-in"></i>{% trans 'Login' %}
diff --git a/apps/templates/_user_profile.html b/apps/templates/_user_profile.html
index c2f341871..89432d143 100644
--- a/apps/templates/_user_profile.html
+++ b/apps/templates/_user_profile.html
@@ -2,35 +2,16 @@
 {% load i18n %}
 <li class="nav-header">
     <div class="dropdown profile-element">
-        <span>
-            <img alt="image" class="img-circle" width="48" height="48" src="{{ request.user.avatar_url }}"/>
-        </span>
-        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
-            <span class="clear">
-                <span class="block m-t-xs">
-                    <strong class="font-bold"> {{ request.user.name }}<span style="color: #8095a8"></span></strong>
-                </span>
-                <span class="text-muted text-xs block">
-                     {{ request.user.get_role_display | default:_('User') }}<b class="caret"></b>
-                </span>
-            </span>
-        </a>
-        <ul class="dropdown-menu animated fadeInRight m-t-xs">
-            <li><a href="{% url 'users:user-profile' %}">{% trans 'Profile' %}</a></li>
-            <li><a href="{% url 'users:user-profile-update' %}">{% trans 'Profile settings' %}</a></li>
-            <li class="divider"></li>
-            {% if request.user.is_superuser %}
-                {% if request.COOKIES.IN_ADMIN_PAGE == 'No' %}
-                <li><a id="switch_admin">{% trans 'Admin page' %}</a></li>
-                {% else %}
-                <li><a id="switch_user">{% trans 'User page' %}</a></li>
-                {% endif %}
-            {% endif %}
-            <li><a href="{% url 'users:logout' %}">{% trans 'Logout' %}</a></li>
-        </ul>
+        <div>
+            <img alt="image" height="40" src="/static/img/logo.png"/>
+        </div>
+        <div>
+            <span>Jumpserver</span>
+        </div>
     </div>
+    <div class="clearfix"></div>
     <div class="logo-element">
-        JMS
+        <img alt="image" height="40" src="/static/img/logo.png"/>
     </div>
 </li>
 <script>