diff --git a/media/css/seahub.css b/media/css/seahub.css
index 137768f0b4..9e157761bc 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -920,17 +920,17 @@ textarea:-moz-placeholder {/* for FF */
 .top-link .icon-caret-right {
     margin-left:7px;
 }
-.top-bar-con .my-info {
+#my-info {
     color:#fff;
     font-weight:bold;
-    vertical-align:middle;
+}
+.top-bar-con .spliter {
     display:inline-block;
-    padding-right:7px;
     height:16px;
     line-height:16px;
+    vertical-align:middle;
     border-right:1px solid #aaa;
-    margin-right:3px;
-    cursor:pointer;
+    margin:0 3px;
 }
 .top-bar-con .btn {
     padding:0 6px;
@@ -998,9 +998,14 @@ textarea:-moz-placeholder {/* for FF */
     top:24px;
 }
 #user-info-popup .item {
+    display:block;
     padding:8px 18px;
     border-top:1px solid #ddd;
 }
+#user-info-popup a.item:hover {
+    background:#fafafa;
+    text-decoration:none;
+}
 #msg-file-share {
     margin-top:8px;
     position:relative;
@@ -2580,8 +2585,7 @@ textarea:-moz-placeholder {/* for FF */
     margin:0 3px 0 0;
 }
 #quit-group {
-    display:inline-block;
-    margin-top:3em;
+    margin-top:4px;
     font-size:12px;
     font-weight:normal;
     color:#888;
diff --git a/media/js/base.js b/media/js/base.js
index a29cf9ab36..b207cc08d8 100644
--- a/media/js/base.js
+++ b/media/js/base.js
@@ -13,6 +13,61 @@ if ($('.messages')[0]) {
     setTimeout(function() { $('.messages').addClass('hide'); }, 10000);
 }
 
+$(document).ready(function(){
+    var msg_ct = $("#msg-count"); 
+    $.ajax({
+        url: msg_ct.data('cturl'),
+        dataType: 'json',
+        cache: false,
+        success: function(data) {
+            if (data['count'] > 0) {
+                msg_ct.html(data['count']).addClass('msg-count');
+            }
+        }
+    });
+});
+$('#msg-count').click(function() {
+    location.href = $(this).data('pgurl');
+});
+
+(function () {
+    var my_info = $('#my-info');
+    var popup = $('#user-info-popup');
+
+    $(window).load(function() {
+        popup.css({'right': my_info.parent().width() - my_info.position().left - my_info.outerWidth()});
+    }); 
+    my_info.click(function() {
+        var loading_tip = $('.loading-tip', popup);
+        if (popup.hasClass('hide')) {
+            popup.removeClass('hide');
+            loading_tip.removeClass('hide');
+            $.ajax({
+                url: my_info.data('url'),
+                dataType: 'json',
+                cache: false,
+                success: function(data) {
+                    loading_tip.addClass('hide');
+                    popup.html(data['html']);
+                    $('.item:first', popup).css({'border':0});
+                }
+            });
+        } else {
+            popup.addClass('hide');
+        }
+        return false;
+    });
+})();
+
+$(document).click(function(e) {
+    var target = e.target || event.srcElement,
+        popup = $('#user-info-popup'),
+        popup_switch = $('#my-info');
+    if (!popup.hasClass('hide') && !popup.is(target) && !popup.find('*').is(target) && !popup_switch.is(target) && !popup_switch.find('*').is(target) ) {
+        popup.addClass('hide');
+    }    
+});
+
 // search: disable submit when input nothing
 $('.search-form').submit(function() {
     if (!$.trim($(this).find('.search-input').val())) {
diff --git a/seahub/group/templates/group/group_base.html b/seahub/group/templates/group/group_base.html
index 566c2af549..13dad2a27e 100644
--- a/seahub/group/templates/group/group_base.html
+++ b/seahub/group/templates/group/group_base.html
@@ -15,6 +15,9 @@
         {% if is_staff %}
         <span id="enable-mods" class="icon-th fright" title="{% trans "Enable Modules" %}"></span>
         {% endif %}
+        {% if group.view_perm != 'pub' and not is_staff %}
+        <a id="quit-group" href="#" data-url="{% url 'group_quit' group.id %}" class="fright">{% trans "Quit" %}</a>
+        {% endif %}
     </div>
     <ul class="side-tabnav-tabs">
         <li class="tab {% block cur_library %}{% endblock%}"><a href="{% url 'group_info' group.id %}"><span class="sf2-icon-archive vam"></span><span class="vam">{% trans "Libraries" %}</span></a></li>
@@ -39,9 +42,6 @@
         <li class="tab {% block cur_admin %}{%endblock%}"><a href="{% url 'group_manage' group.id %}"><span class="icon-wrench"></span>{% trans "Admin" %}</a></li>
         {% endif %}
     </ul>
-    {% if group.view_perm != 'pub' and not is_staff %}
-    <a id="quit-group" href="#" data-url="{% url 'group_quit' group.id %}">{% trans "Quit Group" %}</a>
-    {% endif %}
 </div>
 {% endblock %}
 
diff --git a/seahub/group/templates/group/group_discuss.html b/seahub/group/templates/group/group_discuss.html
index b1fa773c95..d61a4c9fe8 100644
--- a/seahub/group/templates/group/group_discuss.html
+++ b/seahub/group/templates/group/group_discuss.html
@@ -218,7 +218,7 @@ $('#group-message-form').submit(function() {
                 $('#group-message-form').after('<ul class="msg-list"></ul>');    
             }
             $('.msg-list').prepend(new_msg);
-            new_msg.slideDown(600);
+            new_msg.slideDown(400);
             msg_input.val('');
             enable(sb_btn);
         },
diff --git a/seahub/templates/base.html b/seahub/templates/base.html
index 6a3c9e7c22..7be8bef4ae 100644
--- a/seahub/templates/base.html
+++ b/seahub/templates/base.html
@@ -41,11 +41,12 @@
 
                     <div class="account">
                         {% if request.user.is_authenticated %}
-                        {% avatar request.user 16 %} <span class="my-info">{{ request.user }} <span class="icon-caret-down"></span></span>
+                        {% 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>
-                        <button class="btn" data-url="{% url 'user_notification_list' %}" id="msg-count" title="{% trans "unread notices" %}">0</button>
+                        <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 %}
@@ -163,59 +164,6 @@ $('#info-bar .close').click(function() {
 });
 {% endif %}
 
-$(document).ready(function(){
-    $.ajax({
-        url: '{% url 'unseen_notices_count' %}',
-        dataType: 'json',
-        cache: false,
-        success: function(data) {
-            if (data['count'] > 0) {
-                $("#msg-count").html(data['count']).addClass('msg-count');
-            }
-        }
-    });
-
-});
-
-$('#msg-count').click(function() {
-    location.href = $(this).data('url');
-});
-
-(function () {
-    var my_info = $('.account .my-info');
-    var popup = $('#user-info-popup');
-
-    $(window).load(function() {
-        popup.css({'right': my_info.parent().width() - my_info.position().left - my_info.outerWidth()});
-    }); 
-    my_info.click(function() {
-        var loading_tip = $('.loading-tip', popup);
-        if (popup.hasClass('hide')) {
-            popup.removeClass('hide');
-            loading_tip.removeClass('hide');
-            $.ajax({
-                url: '{% url 'space_and_traffic' %}',
-                dataType: 'json',
-                cache: false,
-                success: function(data) {
-                    loading_tip.addClass('hide');
-                    popup.html(data['html']);
-                    $('.item:first', popup).css({'border':0});
-                }
-            });
-        } else {
-            popup.addClass('hide');
-        }
-    });
-})();
-$(document).click(function(e) {
-    var target = e.target || event.srcElement,
-        popup = $('#user-info-popup'),
-        popup_switch = $('.account .my-info');
-    if (!popup.hasClass('hide') && !popup.is(target) && !popup.find('*').is(target) && !popup_switch.is(target)) {
-        popup.addClass('hide');
-    }    
-});
 {% if has_file_search %}
     {% include 'snippets/search_js.html' %}
 {% endif %}
diff --git a/seahub/templates/snippets/space_and_traffic.html b/seahub/templates/snippets/space_and_traffic.html
index 59b9966df7..4a10ecb5ae 100644
--- a/seahub/templates/snippets/space_and_traffic.html
+++ b/seahub/templates/snippets/space_and_traffic.html
@@ -1,7 +1,7 @@
 {% load i18n %}
 {% if CALC_SHARE_USAGE %}
 <div class="item">
-    <p>{% trans "Total" %}: {{ quota_usage|filesizeformat }} {% if quota > 0 %}/ {{ quota|filesizeformat }} {% endif %}</p>
+    <p>{% trans "Used:" %} {{ quota_usage|filesizeformat }} {% if quota > 0 %}/ {{ quota|filesizeformat }} {% endif %}</p>
     {% if quota > 0 %}
     <a href="http://www.seafile.com/{% if LANGUAGE_CODE != 'zh-cn' %}en/{% endif %}help/quota/" target="_blank" id="quota-bar"><span id="my-usage" title="{% trans "Self" %}" class="usage" style="width:{{rates.my_usage}};"></span><span id="share-usage" title="{% trans "Sharing" %}" class="usage" style="width:{{rates.share_usage}};"></span></a>
     {% endif %}
@@ -9,7 +9,7 @@
 </div>
 {% else %}
 <div class="item">
-    <p>{{ quota_usage|filesizeformat }} {% if quota > 0 %}/ {{ quota|filesizeformat }} {% endif %}</p>
+    <p>{% trans "Used:" %} {{ quota_usage|filesizeformat }} {% if quota > 0 %}/ {{ quota|filesizeformat }} {% endif %}</p>
     {% if quota > 0 %}
     <div id="quota-bar"><span id="quota-usage" class="usage" style="width:{{rates.quota_usage}};"></span></div>
     {% endif %}
@@ -17,17 +17,11 @@
 {% endif %}
 
 {% if TRAFFIC_STATS_ENABLED %}
-<div class="item">
-    <a href="http://www.seafile.com/{% if LANGUAGE_CODE != 'zh-cn' %}en/{% endif %}help/traffic/" target="_blank" id="traffic-stat">{% trans "Traffic this month:" %} {{ traffic_stat|filesizeformat }}</a>
-</div>
+<a class="item" href="http://www.seafile.com/{% if LANGUAGE_CODE != 'zh-cn' %}en/{% endif %}help/traffic/" target="_blank" id="traffic-stat">{% trans "Traffic this month:" %} {{ traffic_stat|filesizeformat }}</a>
 {% endif %}
 
 {% if ENABLE_PAYMENT %}
-<div class="item">
-    <a href="{% url 'plan' %}">{% trans "Payment" %}</a>
-</div>
+<a class="item" href="{% url 'plan' %}">{% trans "Payment" %}</a>
 {% endif %}
 
-<div class="item">
-    <a href="{{ SITE_ROOT }}profile/">{% trans "Settings" %}</a>
-</div>
+<a class="item" href="{{ SITE_ROOT }}profile/">{% trans "Settings" %}</a>