diff --git a/media/avatars/default.jpg b/media/avatars/default.jpg
deleted file mode 100644
index 13fe6ad696..0000000000
Binary files a/media/avatars/default.jpg and /dev/null differ
diff --git a/media/css/seahub.css b/media/css/seahub.css
index 111038e7f8..0990faf5ac 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -837,16 +837,15 @@ textarea:-moz-placeholder {/* for FF */
     margin:0 auto;
 }
 #header {
-    padding:6px 0;
-    background:#f4f4f4;
+    padding:16px 0;
+    background:#f4f4f7 url('../img/nav.png') center top repeat-x;
+    border-bottom:1px solid #e3e4e5;
     width:100%;
     font-size: 14px;
-    font-weight: bold;
-    border-bottom:1px solid #ddd;
     margin-bottom:25px;
 }
 #header-inner {
-    height:40px;
+    height:32px;
     width:950px;
     margin:0 auto;
 }
@@ -915,76 +914,54 @@ textarea:-moz-placeholder {/* for FF */
     text-decoration:underline;
 }
 /* top-bar */
-.top-bar-inner {
-    background:#2d2d2d;
+#msg-count {
+    position:relative; 
+    margin:10px 32px 0 25px;
+    cursor:pointer;
 }
-.top-bar-con {
-    height:24px;
-    width:950px;
-    margin:0 auto;
+#msg-count .num {
+    position:absolute;
+    color:#fff;
+    font-size:12px;
+    line-height:1;
+    padding:1px 2px;
+    background:#feac74;
+    border:1px solid #cb8a5d;
+    top:0;
+    left:15px;
+}
+#account {
     position:relative;
 }
-.top-bar-con .account {
-    text-align:right;
-    position:relative;
-}
-.top-bar-con .top-link {
-    display:inline-block;
-    height:24px;
-    padding:0 3px;
-    line-height:24px;
-    color:#ddd;
-    font-weight:normal;
+#account .avatar {
     vertical-align:middle;
-}
-.top-link .icon-wrench {
-    margin-right:7px;
-}
-.top-link .icon-caret-right {
-    margin-left:7px;
+    border-radius:1000px;
 }
 #my-info {
-    color:#fff;
-    font-weight:bold;
+    cursor: pointer;
+    color: #d6d6d6;
 }
-.top-bar-con .spliter {
-    display:inline-block;
-    height:16px;
-    line-height:16px;
-    vertical-align:middle;
-    border-right:1px solid #aaa;
-    margin:0 3px;
+#user-info-popup .avatar {
+    float:left;
 }
-.top-bar-con .btn {
-    padding:0 6px;
-    border-radius:2px;
-    line-height:16px;
-    margin-right:2px;
-    vertical-align:middle;
+#user-info-popup .txt {
+    margin-left:45px;
 }
-.top-bar-con .msg-count {
-    color:red;
+#account .manage {
+    position:absolute;
+    left:60px;
+    top:-16px;
 }
-.top-bar-con .avatar {
-    border-radius: 2px;
-    vertical-align:middle;
-}
-.top-bar-con .top-link:hover {
+#account .manage .a:hover {
     text-decoration:none;
-    background:#a0a;
 }
 #lang-context-selector {
     position:absolute;
-    top:24px;
-    text-align:left;
+    top:60px;
     border:1px solid #bbb;
     background:#fff;
-    min-width:65px;
     padding:5px 0;
-    z-index: 1000;
     box-shadow: 0 2px 4px rgba(0,0,0,.2);
-    -moz-box-shadow: -1px 1px 1px rgba(0,0,0,.2);
-    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.2);
 }
 #lang-context-selector a,
 #to-group a {
@@ -998,9 +975,6 @@ textarea:-moz-placeholder {/* for FF */
     background:#eee;
     text-decoration:none;
 }
-.top-bar-con .icon-signout {
-    font-size:15px;
-}
 #send-msg-popup,
 #user-info-popup {
     background:#fff;
@@ -1018,13 +992,18 @@ textarea:-moz-placeholder {/* for FF */
 #user-info-popup {
     width:200px;
     text-align:left;
-    top:24px;
+    top:48px;
+    font-size:13px;
 }
 #user-info-popup .item {
     display:block;
     padding:8px 18px;
     border-top:1px solid #ddd;
 }
+#user-info-popup a.item {
+    color:#333;
+    font-weight:normal;
+}
 #user-info-popup a.item:hover {
     background:#fafafa;
     text-decoration:none;
@@ -1068,7 +1047,7 @@ textarea:-moz-placeholder {/* for FF */
 }
 #header .nav {
     float:left;
-    padding-top:16px;
+    padding-top:8px;
     font-size:15px;
 }
 #header .nav li {
@@ -2479,7 +2458,7 @@ textarea:-moz-placeholder {/* for FF */
     position:relative;
 }
 #top-search-form {
-    margin-top:14px;
+    margin-top:7px;
 }
 .search-input,
 .search-form .search-submit {
@@ -2489,7 +2468,7 @@ textarea:-moz-placeholder {/* for FF */
     vertical-align:top;
 }
 .search-input {
-    width:172px;
+    width:160px;
     outline:0;
 }
 .search-form .icon-caret-down {
@@ -2502,7 +2481,6 @@ textarea:-moz-placeholder {/* for FF */
     width:500px;
     padding:18px;
     height:auto;
-    font-weight:normal;
     box-shadow:0 0 10px #ddd;
     z-index:100;/* for pages with jquery tabs*/
 }
diff --git a/media/img/admin_in.png b/media/img/admin_in.png
new file mode 100644
index 0000000000..8cc8073706
Binary files /dev/null and b/media/img/admin_in.png differ
diff --git a/media/img/admin_out.png b/media/img/admin_out.png
new file mode 100644
index 0000000000..0afe79e711
Binary files /dev/null and b/media/img/admin_out.png differ
diff --git a/media/img/bell.png b/media/img/bell.png
new file mode 100644
index 0000000000..5ef31457e2
Binary files /dev/null and b/media/img/bell.png differ
diff --git a/media/img/nav.png b/media/img/nav.png
new file mode 100644
index 0000000000..e309c309bb
Binary files /dev/null and b/media/img/nav.png differ
diff --git a/media/img/seafile_logo.png b/media/img/seafile_logo.png
index 123dfdb45c..ad77b05946 100644
Binary files a/media/img/seafile_logo.png and b/media/img/seafile_logo.png differ
diff --git a/media/js/base.js b/media/js/base.js
index 9206e568a1..60d757c579 100644
--- a/media/js/base.js
+++ b/media/js/base.js
@@ -1,4 +1,7 @@
-$('.top-bar-con .account').css('margin-left', $('.top-bar-con .manage').width() + 10);
+$('.checkbox-orig').click(function() {
+    $(this).parent().toggleClass('checkbox-checked');
+});
+
 $('#title-panel, #left-panel, #right-panel').each(function() { // for ie 7
     if ($(this).children().length == 0) {
         $(this).addClass('hide');
@@ -21,7 +24,7 @@ $(document).ready(function(){
         cache: false,
         success: function(data) {
             if (data['count'] > 0) {
-                msg_ct.html(data['count']).addClass('msg-count');
+                $('.num', msg_ct).html(data['count']).removeClass('hide');
             }
         }
     });
@@ -50,8 +53,7 @@ $('#msg-count').click(function() {
                 cache: false,
                 success: function(data) {
                     loading_tip.addClass('hide');
-                    popup.html(data['html']);
-                    $('.item:first', popup).css({'border':0});
+                    $('#space-traffic').html(data['html']);
                 }
             });
         } else {
@@ -98,30 +100,6 @@ $("tr:gt(0)", $('table')).hover(
 );
 
 $('input, textarea').placeholder();
-$('.checkbox-orig').click(function() {
-    $(this).parent().toggleClass('checkbox-checked');
-});
-
-(function() {
-    var lang_context = $('#lang-context'),
-        lang_selector = $('#lang-context-selector');
-
-    $(window).load(function() { // after the small images, icons loaded.
-        lang_selector.css({'right': lang_context.parent().width() - lang_context.position().left - lang_context.outerWidth()});
-    });
-
-    lang_context.click(function() {
-        lang_selector.toggleClass('hide');
-        return false;
-    }).focus(function() { $(this).blur(); });
-
-    $(document).click(function(e) {
-        var element = e.target || e.srcElement;
-        if (element.id != 'lang-context-selector' && element.id != 'lang-context') {
-            lang_selector.addClass('hide');
-        }
-    });
-})();
 
 // clear repo enc info when log out
 $('#logout').click(function() {
diff --git a/seahub/avatar/settings.py b/seahub/avatar/settings.py
index a6fd045920..cdc384b4a9 100644
--- a/seahub/avatar/settings.py
+++ b/seahub/avatar/settings.py
@@ -9,7 +9,7 @@ except ImportError:
 ### User avatar settings ###
 AVATAR_DEFAULT_SIZE = getattr(settings, 'AVATAR_DEFAULT_SIZE', 80)
 AVATAR_STORAGE_DIR = getattr(settings, 'AVATAR_STORAGE_DIR', 'avatars')
-AVATAR_DEFAULT_URL = getattr(settings, 'AVATAR_DEFAULT_URL', 'avatar/img/default.jpg')
+AVATAR_DEFAULT_URL = getattr(settings, 'AVATAR_DEFAULT_URL', 'avatar/img/default.png')
 AVATAR_DEFAULT_NON_REGISTERED_URL = getattr(settings, 'AVATAR_DEFAULT_NON_REGISTERED_URL', '/avatars/default-non-register.jpg')
 AUTO_GENERATE_AVATAR_SIZES = getattr(settings, 'AUTO_GENERATE_AVATAR_SIZES', (AVATAR_DEFAULT_SIZE,))
     
diff --git a/seahub/profile/templates/profile/set_profile.html b/seahub/profile/templates/profile/set_profile.html
index a81c0e5a89..2a63913d0e 100644
--- a/seahub/profile/templates/profile/set_profile.html
+++ b/seahub/profile/templates/profile/set_profile.html
@@ -8,6 +8,7 @@
 <div class="side-textnav">
     <ul class="side-textnav-tabs">
         <li class="tab"><a href="#user-basic-info">{% trans "Profile" %}</a></li>
+        <li class="tab"><a href="#lang-setting">{% trans "Language" %}</a></li>
         {% if not force_server_crypto %}
         <li class="tab"><a href="#enc-lib-setting">{% trans "Encrypted Libraries" %}</a></li>
         {% endif %}
@@ -61,6 +62,16 @@
     </form>
 </div>
 
+<div class="setting-item" id="lang-setting">
+    <h3>{% trans "Language Setting" %}</h3>
+    <a href="#" id="lang-context" data-lang="{{ LANGUAGE_CODE }}">{{ LANGUAGE_CODE|language_name_local }} <span class="icon-caret-down"></span></a>
+    <ul id="lang-context-selector" class="hide">
+        {% for LANG in LANGUAGES %}
+        <li><a href="{% url 'i18n' %}?lang={{ LANG.0 }}">{{ LANG.1 }}</a></li>
+        {% endfor %}
+    </ul>
+</div>
+
 {% if not force_server_crypto %}
 <div class="setting-item" id="enc-lib-setting">
 <h3>{% trans "Encrypted Libraries Setting" %}</h3>
@@ -149,5 +160,25 @@ $('#default-lib-form').submit(function() {
         return false;
     }
 });
+
+(function() {
+    var lang_context = $('#lang-context'),
+        lang_selector = $('#lang-context-selector');
+
+    lang_context.parent().css({'position':'relative'});
+    lang_selector.css({'top': lang_context.position().top + lang_context.height() + 3});
+
+    lang_context.click(function() {
+        lang_selector.toggleClass('hide');
+        return false;
+    }).focus(function() { $(this).blur(); }); 
+
+    $(document).click(function(e) {
+        var element = e.target || e.srcElement;
+        if (element.id != 'lang-context-selector' && element.id != 'lang-context') {
+            lang_selector.addClass('hide');
+        }   
+    }); 
+})();
 </script>
 {% endblock %}
diff --git a/seahub/settings.py b/seahub/settings.py
index c498eb83dc..b9d429eb4c 100644
--- a/seahub/settings.py
+++ b/seahub/settings.py
@@ -223,7 +223,7 @@ AVATAR_ALLOWED_FILE_EXTS = ('.jpg', '.png', '.jpeg', '.gif')
 AVATAR_STORAGE_DIR = 'avatars'
 AVATAR_HASH_USERDIRNAMES = True
 AVATAR_GRAVATAR_BACKUP = False
-AVATAR_DEFAULT_URL = '/avatars/default.jpg'
+AVATAR_DEFAULT_URL = '/avatars/default.png'
 AVATAR_DEFAULT_NON_REGISTERED_URL = '/avatars/default-non-register.jpg'
 AVATAR_MAX_AVATARS_PER_USER = 1
 AVATAR_CACHE_TIMEOUT = 14 * 24 * 60 * 60
@@ -305,8 +305,8 @@ SITE_NAME = 'Seafile'
 # Path to the Logo Imagefile (relative to the media path)
 LOGO_PATH = 'img/seafile_logo.png'
 # logo size. the unit is 'px'
-LOGO_WIDTH = 156
-LOGO_HEIGHT = 39
+LOGO_WIDTH = 149
+LOGO_HEIGHT = 32
 
 # css to modify the seafile css (e.g. css/my_site.css)
 BRANDING_CSS = ''
diff --git a/seahub/templates/admin_base.html b/seahub/templates/admin_base.html
index d0ef21c135..c9dc716305 100644
--- a/seahub/templates/admin_base.html
+++ b/seahub/templates/admin_base.html
@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% load i18n %}
 
-{% block sys_admin %}<a href="{{ SITE_ROOT }}home/my/" class="top-link">{% trans "Exit System Admin" %}<span class="icon-caret-right"></span></a>{% endblock %}
+{% block sys_admin %}<a href="{{ SITE_ROOT }}home/my/" title="{% trans "Exit System Admin" %}"><img src="{{ MEDIA_URL }}img/admin_out.png" alt="" /></a>{% endblock %}
 
 {% block nav %}
 <ul class="nav">
diff --git a/seahub/templates/base.html b/seahub/templates/base.html
index cb710cc327..6417d1d291 100644
--- a/seahub/templates/base.html
+++ b/seahub/templates/base.html
@@ -30,43 +30,6 @@
         {% endif %}
         {% endblock info_bar_message %}
 
-        <div id="top-bar">
-            <div class="top-bar-inner">
-                <div class="top-bar-con">
-                    {% if request.user.is_staff %}
-                    <div class="manage fleft">
-                        {% block sys_admin %}<a href="{{ SITE_ROOT }}sys/useradmin/" class="top-link"><span class="icon-wrench"></span>{% trans "System Admin" %}</a>{% endblock %}
-                    </div>
-                    {% endif %}
-
-                    <div class="account">
-                        {% if request.user.is_authenticated %}
-                        {% avatar request.user 16 %} <a href="#" data-url="{% url 'space_and_traffic' %}" class="top-link" id="my-info">{{ request.user }} <span class="icon-caret-down"></span></a>
-                        <div id="user-info-popup" class="hide">
-                            <img src="{{MEDIA_URL}}img/loading-icon.gif" alt="" class="loading-tip" />
-                        </div>
-                        <span class="spliter"></span>
-                        <button class="btn" data-cturl="{% url 'unseen_notices_count' %}" data-pgurl="{% url 'user_notification_list' %}" id="msg-count" title="{% trans "unread notices" %}">0</button>
-                        {% else %}
-                        <a href="{{ SITE_ROOT }}accounts/login/" class="top-link">{% trans "Log In" %}</a>
-                            {% if enable_signup %}
-                        <a href="{{ SITE_ROOT }}accounts/register/" class="top-link">{% trans "Signup" %}</a>
-                            {% endif %}
-                        {% endif %}
-                        <a href="#" id="lang-context" data-lang="{{ LANGUAGE_CODE }}" class="top-link">{{ LANGUAGE_CODE|language_name_local }} <span class="icon-caret-down"></span></a>
-                        <ul class="hide" id="lang-context-selector">
-                            {% for LANG in LANGUAGES %}
-                            <li><a href="{% url 'i18n' %}?lang={{ LANG.0 }}">{{ LANG.1 }}</a></li>
-                            {% endfor %}
-                        </ul>
-                        {% if request.user.is_authenticated %}
-                        <a href="{{ SITE_ROOT }}accounts/logout/" class="icon-signout top-link" title="{% trans "Log out" %}" id="logout"></a>
-                        {% endif %}
-                    </div>
-                </div>
-            </div>
-        </div>
-
         <div id="header">
             <div id="header-inner">
                 {% block notice_panel %}{% endblock %}
@@ -79,9 +42,43 @@
                 </a>
                 {% block nav %}{% endblock %}
 
-                {% if has_file_search and request.user.is_authenticated %}
+                {% if request.user.is_authenticated %}
+                <div class="fright">
+                {% if has_file_search %}
                     {% include 'snippets/search_form.html' %}
                 {% endif %}
+
+                <div data-cturl="{% url 'unseen_notices_count' %}" data-pgurl="{% url 'user_notification_list' %}" id="msg-count" title="{% trans "unread notices" %}" class="fleft">
+                    <img src="{{ MEDIA_URL }}img/bell.png" alt="" />
+                    <span class="num hide">0</span>
+                </div>
+
+                <div id="account" class="fright">
+                    <div id="my-info" data-url="{% url 'space_and_traffic' %}">
+                        {% avatar request.user 36 %} <span class="icon-caret-down vam"></span>
+                    </div>
+                    <div id="user-info-popup" class="hide">
+                        <div class="item ovhd">
+                            {% avatar request.user 36 %}
+                            <div class="txt">
+                                {{ request.user.username|email2nickname }} <br />
+                                {{ request.user.username}}
+                            </div>
+                        </div>
+                        <div id="space-traffic">
+                            <img src="{{MEDIA_URL}}img/loading-icon.gif" alt="" class="loading-tip" />
+                        </div>
+                        <a class="item" href="{{ SITE_ROOT }}profile/">{% trans "Settings" %}</a>
+                        <a href="{{ SITE_ROOT }}accounts/logout/" class="item" title="{% trans "Log out" %}" id="logout">{% trans "Log out" %}</a>
+                    </div>
+                    {% if request.user.is_staff %}
+                    <div class="manage">
+                        {% block sys_admin %}<a href="{{ SITE_ROOT }}sys/useradmin/" title="{% trans "System Admin" %}" class="a"><img src="{{ MEDIA_URL }}img/admin_in.png" alt="" /></a>{% endblock %}
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
+                {% endif %}
             </div>
         </div>
 
diff --git a/seahub/templates/registration/login.html b/seahub/templates/registration/login.html
index a9fe78545f..d2b8e70bde 100644
--- a/seahub/templates/registration/login.html
+++ b/seahub/templates/registration/login.html
@@ -1,6 +1,32 @@
 {% extends "myhome_base.html" %}
 {% load i18n %}
+
 {% block title %}{% trans "Log In" %}{% endblock %}
+
+{% block extra_style %}
+<style type="text/css">
+#lang {
+    font-weight:normal;
+    font-size:13px;
+    margin-top:12px;
+}
+#lang-context:hover {
+    text-decoration:none;
+}
+</style>
+{% endblock %} 
+
+{% block nav %}
+<div class="fright" id="lang">
+    <a href="#" id="lang-context" data-lang="{{ LANGUAGE_CODE }}">{{ LANGUAGE_CODE|language_name_local }} <span class="icon-caret-down"></span></a>
+    <ul id="lang-context-selector" class="hide">
+        {% for LANG in LANGUAGES %}
+        <li><a href="{% url 'i18n' %}?lang={{ LANG.0 }}">{{ LANG.1 }}</a></li>
+        {% endfor %}
+    </ul>
+</div>
+{% endblock %}
+
 {% block main_panel %}
 <div class="narrow-panel">
 <h2>{% trans "Log In" %}</h2>
@@ -79,5 +105,26 @@ $(function() {
         $(this).attr('tabindex', index + 1);
     });
 });
+
+(function() {
+    var lang_context = $('#lang-context'),
+        lang_selector = $('#lang-context-selector');
+
+    lang_context.parent().css({'position':'relative'});
+    lang_selector.css({'top': lang_context.position().top + lang_context.height() + 3});
+
+    lang_context.click(function() {
+        lang_selector.toggleClass('hide');
+        return false;
+    }).focus(function() { $(this).blur(); });
+
+    $(document).click(function(e) {
+        var element = e.target || e.srcElement;
+        if (element.id != 'lang-context-selector' && element.id != 'lang-context') {
+            lang_selector.addClass('hide');
+        }
+    });
+})();
+
 </script>
 {% endblock %}
diff --git a/seahub/templates/snippets/search_form.html b/seahub/templates/snippets/search_form.html
index 706813c346..03eaaa47cb 100644
--- a/seahub/templates/snippets/search_form.html
+++ b/seahub/templates/snippets/search_form.html
@@ -1,5 +1,5 @@
 {% load i18n %}
-                <form id="top-search-form" method="get" action="{% url 'search' %}" class="search-form fright">
+                <form id="top-search-form" method="get" action="{% url 'search' %}" class="search-form fleft">
                     {% if search_repo_id %}
                     <input class="search-input" name="q" placeholder="{% if search_wiki %}{% trans "Search files in this wiki" %}{% else %}{% trans "Search files in this library" %}{% endif %}" value="{{ keyword }}" />
                     <input type="hidden" name="search_repo" value="{{ search_repo_id }}" />
diff --git a/seahub/templates/snippets/space_and_traffic.html b/seahub/templates/snippets/space_and_traffic.html
index 4a10ecb5ae..ffd929364b 100644
--- a/seahub/templates/snippets/space_and_traffic.html
+++ b/seahub/templates/snippets/space_and_traffic.html
@@ -23,5 +23,3 @@
 {% if ENABLE_PAYMENT %}
 <a class="item" href="{% url 'plan' %}">{% trans "Payment" %}</a>
 {% endif %}
-
-<a class="item" href="{{ SITE_ROOT }}profile/">{% trans "Settings" %}</a>