diff --git a/media/css/seahub.css b/media/css/seahub.css
index 245f293054..f1e30137f9 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -1066,7 +1066,7 @@ textarea:-moz-placeholder {/* for FF */
     text-decoration:none;
 }
 #send-msg-popup,
-#user-info-popup {
+.top-info-popup {
     background:#fff;
     border:1px solid #ddd;
     box-shadow:0 0 5px #ccc;
@@ -1079,25 +1079,33 @@ textarea:-moz-placeholder {/* for FF */
     padding:18px;
     top:35px;
 }
-#user-info-popup {
+.top-info-popup {
     width:200px;
     text-align:left;
     top:48px;
     font-size:13px;
 }
-#user-info-popup .item {
+#top-nav-grp-info {
+    top:40px;
+}
+.top-info-popup .item {
     display:block;
     padding:8px 18px;
     border-top:1px solid #ddd;
 }
-#user-info-popup a.item {
+.top-info-popup a.item {
     color:#333;
     font-weight:normal;
 }
-#user-info-popup a.item:hover {
+.top-info-popup a.item:hover {
     background:#fafafa;
     text-decoration:none;
 }
+#top-nav-grp-info .avatar {
+    border-radius:1000px;
+    margin-right:5px;
+    vertical-align:middle;
+}
 #msg-file-share {
     margin-top:8px;
     position:relative;
@@ -1140,24 +1148,24 @@ textarea:-moz-placeholder {/* for FF */
     padding-top:8px;
     font-size:15px;
 }
-#header .nav li {
+#header .nav-item {
     float: left;
     height:21px;
     margin:0 14px;
 }
-.ru #header .nav li {
+.ru #header .nav-item {
     margin:0 11px;
 }
-#header .nav a,
-#header .nav a:visited {
+#header .nav .a,
+#header .nav .a:visited {
     color:#8A948F;
     font-weight:bold;
     text-decoration:none;
 }
-#header .nav a.cur {
+#header .nav .a.cur {
     color:#000;
 }
-#header .nav a:hover {
+#header .nav .a:hover {
     color: #ff9933;
     text-decoration: underline;
 }
diff --git a/seahub/group/templates/group/group_base.html b/seahub/group/templates/group/group_base.html
index 0cfcbe93fd..fb6fc8f3e0 100644
--- a/seahub/group/templates/group/group_base.html
+++ b/seahub/group/templates/group/group_base.html
@@ -3,7 +3,7 @@
 {% load seahub_tags avatar_tags group_avatar_tags i18n %}
 
 {% block sub_title %}{{group.group_name}} - {% endblock %}
-{% block nav_group_class %}class="cur"{% endblock %}
+{% block cur_group %}cur{% endblock %}
 
 {% block left_panel %}
 <div class="side-tabnav">
diff --git a/seahub/group/templates/group/groups.html b/seahub/group/templates/group/groups.html
index 8a6270309b..02e99860e1 100644
--- a/seahub/group/templates/group/groups.html
+++ b/seahub/group/templates/group/groups.html
@@ -3,7 +3,7 @@
 {% load url from future %}
 
 {% block sub_title %}{% trans "Groups" %} - {% endblock %}
-{% block nav_group_class %}class="cur"{% endblock %}
+{% block cur_group %}cur{% endblock %}
 
 {% block left_panel %}
 {% include "group/groups_left_panel.html" %}
diff --git a/seahub/group/templates/group/msg_reply.html b/seahub/group/templates/group/msg_reply.html
deleted file mode 100644
index 19ce20a7ea..0000000000
--- a/seahub/group/templates/group/msg_reply.html
+++ /dev/null
@@ -1,59 +0,0 @@
-{% extends "myhome_base.html" %}
-{% load seahub_tags avatar_tags %}
-
-{% block nav_group_class %}class="cur"{% endblock %}
-
-{% block main_panel %}
-<div class="main fleft">
-<h2>留言</h2>
-<div>
-    <span>{% avatar msg.from_email 48 %}</span>
-    <div class="info">
-    <span class="from">{{ msg.from_email }}</span>
-    <span class="ts">{{ msg.timestamp|date:"Y-m-d H:i" }}</span>
-    </div>
-    <div class="reply">
-    <span class="msg">{{ msg.message }}</span>
-    </div>    
-</div>
-
-<div id="reply">
-<form action="" method="post">{% csrf_token %}
-  <textarea name="message" id="message">{{ form.data.message }}</textarea><br />
-  <input type="submit" value="回复" class="submit" />  
-  {% for error in form.message.errors %}
-  <span class="error">{{ error|escape }}</span>
-  {% endfor %}
-</form>
-</div>
-
-</div>
-
-{% endblock %}
-
-{% block extra_script %}
-<script type="text/javascript">
-
-    $("table tr:gt(0)").hover(
-        function() {
-            $(this).find('img').css('cursor', 'pointer').removeClass('vh');
-        },
-        function() {
-            $(this).find('img').addClass('vh');
-        }
-    );
-
-    $('.download').click(function() {
-        window.open($(this).attr('data'));
-    });
-
-    $('.reply').each(function() {
-        $(this).click(function() {
-            var reply_to = $(this).attr('data');
-            $('#to_email').val(reply_to);            
-            $('#message').text("回复" + reply_to + "：");
-            $('#message').focus();
-        });
-    });
-</script>
-{% endblock %}
diff --git a/seahub/help/templates/help/help_base.html b/seahub/help/templates/help/help_base.html
index 80fa791686..e6c9d70f9a 100644
--- a/seahub/help/templates/help/help_base.html
+++ b/seahub/help/templates/help/help_base.html
@@ -1,7 +1,7 @@
 {% extends "myhome_base.html" %}
 {% load i18n %}
 
-{% block nav_help_class %}class="cur"{% endblock %}
+{% block cur_help %}cur{% endblock %}
 {% block left_panel %}
 <div class="side-textnav">
 	<h3 class="hd">{% trans "Client" context "help" %}</h2>
diff --git a/seahub/templates/base.html b/seahub/templates/base.html
index 6417d1d291..6095598e19 100644
--- a/seahub/templates/base.html
+++ b/seahub/templates/base.html
@@ -57,7 +57,7 @@
                     <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 id="user-info-popup" class="top-info-popup hide">
                         <div class="item ovhd">
                             {% avatar request.user 36 %}
                             <div class="txt">
@@ -129,6 +129,26 @@
 <script type="text/javascript" src="{{ MEDIA_URL }}js/base.js?t=1392877560"></script>
 <script type="text/javascript" src="{{ MEDIA_URL }}js/select2.min.js?t=1392877560"></script>
 <script type="text/javascript">
+$('#top-nav-grp').click(function() {
+    var grp_nav = $(this);
+    var popup = $('#top-nav-grp-info');
+    var loading_tip = $('.loading-tip', popup);
+    if (popup.hasClass('hide')) {
+        popup.removeClass('hide');
+        loading_tip.removeClass('hide');
+        $.ajax({
+            url: grp_nav.attr('href'), 
+            dataType: 'json', 
+            success: function(data) {
+               loading_tip.addClass('hide'); 
+               $('#grp-list').html(data['html']);
+            }
+        });
+    } else {
+        popup.addClass('hide');
+    }
+    return false;
+});
 function ajaxErrorHandler(xhr, textStatus, errorThrown) {
     if (xhr.responseText) {
         feedback(jQuery.parseJSON(xhr.responseText).error, 'error');
diff --git a/seahub/templates/home_base.html b/seahub/templates/home_base.html
index 933049e1dd..08473e9fc5 100644
--- a/seahub/templates/home_base.html
+++ b/seahub/templates/home_base.html
@@ -1,6 +1,6 @@
 {% extends "myhome_base.html" %}
 {% load i18n %}
-{% block nav_myhome_class %}class="cur"{% endblock %}
+{% block cur_myhome %}cur{% endblock %}
 
 {% block left_panel %}
 <div class="side-tabnav">
diff --git a/seahub/templates/myhome_base.html b/seahub/templates/myhome_base.html
index a42e0b6c43..5e7c453b88 100644
--- a/seahub/templates/myhome_base.html
+++ b/seahub/templates/myhome_base.html
@@ -3,19 +3,26 @@
 {% load i18n %}
 {% block nav %}
 <ul class="nav">
-    <li>
-        <a href="{{ SITE_ROOT }}home/my/" {% block nav_myhome_class %}{% endblock %}>{% trans "My Home" %}</a>
+    <li class="nav-item">
+        <a href="{{ SITE_ROOT }}home/my/" class="a {% block cur_myhome %}{% endblock %}">{% trans "My Home" %}</a>
     </li>
-    <li>
-        <a href="{{ SITE_ROOT }}groups/" {% block nav_group_class %}{% endblock %}>{% trans "Groups" %}</a>
+    <li style="position:relative;" class="nav-item">
+        <a href="{% url "groups" %}" class="a {% block cur_group %}{% endblock %}" id="top-nav-grp">{% trans "Groups" %} <span class="icon-caret-down"></span></a>
+        <div id="top-nav-grp-info" class="top-info-popup hide">
+            <div id="grp-list">
+                <img src="{{MEDIA_URL}}img/loading-icon.gif" alt=""  class="loading-tip" />
+            </div>
+            <a href="{% url 'group_list' %}" class="item">{% trans "Group List" %}</a>
+            <span class="item"><span class="icon-plus-sign-alt"></span> {% trans "New Group" %}</span> 
+        </div>
     </li>
     {% if not cloud_mode %}
-    <li>
-        <a href="{% url 'pubrepo' %}" {% block nav_pubinfo_class %}{% endblock %}>{% trans "Organization" %}</a>
+    <li class="nav-item">
+        <a href="{% url 'pubrepo' %}" class="a {% block cur_pubinfo %}{% endblock %}">{% trans "Organization" %}</a>
     </li>
     {% endif %}
-    <li>
-        <a href="{{ SITE_ROOT }}help/" {% block nav_help_class %}{% endblock %}>{% trans "Help" %}</a>
+    <li class="nav-item">
+        <a href="{{ SITE_ROOT }}help/" class="a {% block cur_help %}{% endblock %}">{% trans "Help" %}</a>
     </li>
 </ul>
 {% endblock %}
diff --git a/seahub/templates/pub_base.html b/seahub/templates/pub_base.html
index bb78d0b622..114c50ce24 100644
--- a/seahub/templates/pub_base.html
+++ b/seahub/templates/pub_base.html
@@ -3,7 +3,7 @@
 {% load url from future %}
 
 {% block sub_title %}{% trans "Organization" %} - {% endblock %}
-{% block nav_pubinfo_class %}class="cur"{% endblock %}
+{% block cur_pubinfo %}class="cur"{% endblock %}
 
 {% block left_panel %}
 <div class="side-tabnav">
diff --git a/seahub/templates/snippets/groups.html b/seahub/templates/snippets/groups.html
new file mode 100644
index 0000000000..2fa710feee
--- /dev/null
+++ b/seahub/templates/snippets/groups.html
@@ -0,0 +1,11 @@
+{% load seahub_tags group_avatar_tags i18n %}
+
+<ul>
+{% for grp in groups %}
+<li>
+<a href="{% url "group_info" grp.id %}" class="item">
+    {% grp_avatar grp.id 48 %} <span class="vam">{{ grp.group_name }}</span>
+</a>
+</li>
+{% endfor %}
+</ul>
diff --git a/seahub/urls.py b/seahub/urls.py
index 96bfbd770d..d49597334c 100644
--- a/seahub/urls.py
+++ b/seahub/urls.py
@@ -148,6 +148,7 @@ urlpatterns = patterns('',
     url(r'^ajax/upload-file-done/$', upload_file_done, name='upload_file_done'),
     url(r'^ajax/unseen-notices-count/$', unseen_notices_count, name='unseen_notices_count'),
     url(r'^ajax/space_and_traffic/$', space_and_traffic, name='space_and_traffic'),
+    url(r'^ajax/groups/$', groups, name='groups'),
 
     ### Apps ###
     (r'^api2/', include('seahub.api2.urls')),
diff --git a/seahub/views/ajax.py b/seahub/views/ajax.py
index 34a37c1914..cc4d049d9e 100644
--- a/seahub/views/ajax.py
+++ b/seahub/views/ajax.py
@@ -15,7 +15,8 @@ import seaserv
 from seaserv import seafile_api, seafserv_rpc, \
     get_related_users_by_repo, get_related_users_by_org_repo, \
     is_org_repo_owner, CALC_SHARE_USAGE, seafserv_threaded_rpc, \
-    get_user_quota_usage, get_user_share_usage
+    get_user_quota_usage, get_user_share_usage, \
+    get_personal_groups_by_user
 from pysearpc import SearpcError
 
 from seahub.auth.decorators import login_required
@@ -1209,3 +1210,16 @@ def space_and_traffic(request):
     html = render_to_string('snippets/space_and_traffic.html', ctx,
                             context_instance=RequestContext(request))
     return HttpResponse(json.dumps({"html": html}), content_type=content_type)
+
+def groups(request):
+    if not request.is_ajax():
+        raise Http404
+
+    content_type = 'application/json; charset=utf-8'
+
+    username = request.user.username
+    joined_groups = get_personal_groups_by_user(username)
+    
+    html = render_to_string('snippets/groups.html', {"groups": joined_groups[:4],},
+                            context_instance=RequestContext(request))
+    return HttpResponse(json.dumps({"html": html}), content_type=content_type)