diff --git a/media/js/base.js b/media/js/base.js
index 60d757c579..42312d9797 100644
--- a/media/js/base.js
+++ b/media/js/base.js
@@ -16,6 +16,14 @@ if ($('.messages')[0]) {
     setTimeout(function() { $('.messages').addClass('hide'); }, 10000);
 }
 
+$('#top-nav-grp').click(function() {
+    var grp_nav = $(this),
+        popup = $('#top-nav-grp-info');
+    popup.css({'right': (grp_nav.outerWidth() - popup.outerWidth())/2});
+    popup.toggleClass('hide');
+    return false;
+});
+
 $(document).ready(function(){
     var msg_ct = $("#msg-count"); 
     $.ajax({
@@ -36,12 +44,6 @@ $('#msg-count').click(function() {
 (function () {
     var my_info = $('#my-info');
     var popup = $('#user-info-popup');
-
-    $(window).load(function() {
-        if (my_info.length > 0) { // before login, no 'my_info'
-            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')) {
@@ -62,14 +64,15 @@ $('#msg-count').click(function() {
         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');
-    }    
+    var target = e.target || event.srcElement;
+    var closePopup = function(popup, popup_switch) {
+        if (!popup.hasClass('hide') && !popup.is(target) && !popup.find('*').is(target) && !popup_switch.is(target) && !popup_switch.find('*').is(target) ) {
+            popup.addClass('hide');
+        }    
+    };
+    closePopup($('#user-info-popup'), $('#my-info'));
+    closePopup($('#top-nav-grp-info'), $('#top-nav-grp'));
 });
 
 // search: disable submit when input nothing
diff --git a/seahub/base/context_processors.py b/seahub/base/context_processors.py
index f5990f6797..4d8bbc52b3 100644
--- a/seahub/base/context_processors.py
+++ b/seahub/base/context_processors.py
@@ -11,6 +11,7 @@ from seahub.settings import SEAFILE_VERSION, SITE_TITLE, SITE_NAME, SITE_BASE, \
     SHOW_REPO_DOWNLOAD_BUTTON, REPO_PASSWORD_MIN_LENGTH
 from seahub.views.modules import get_enabled_mods_by_user, \
     get_available_mods_by_user
+from seaserv import get_personal_groups_by_user 
 
 try:
     from seahub.settings import SEACLOUD_MODE
@@ -44,6 +45,9 @@ def base(request):
     mods_available = get_available_mods_by_user(username)
     mods_enabled = get_enabled_mods_by_user(username)
 
+    # get groups
+    grps = get_personal_groups_by_user(username)[:4] 
+
     return {
         'seafile_version': SEAFILE_VERSION,
         'site_title': SITE_TITLE,
@@ -65,4 +69,5 @@ def base(request):
         'events_enabled': EVENTS_ENABLED,
         'mods_available': mods_available,
         'mods_enabled': mods_enabled,
+        'grps': grps,
         }
diff --git a/seahub/templates/base.html b/seahub/templates/base.html
index 0cf8171c81..8b1fd1165a 100644
--- a/seahub/templates/base.html
+++ b/seahub/templates/base.html
@@ -129,26 +129,6 @@
 <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'); 
-               $('#top-nav-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/myhome_base.html b/seahub/templates/myhome_base.html
index bc8072a4e1..82d491329a 100644
--- a/seahub/templates/myhome_base.html
+++ b/seahub/templates/myhome_base.html
@@ -1,20 +1,29 @@
 {% extends "base.html" %}
 {% load url from future %}
-{% load i18n %}
+{% load i18n group_avatar_tags %}
 {% block nav %}
 <ul class="nav">
     <li class="nav-item">
         <a href="{{ SITE_ROOT }}home/my/" class="a {% block cur_myhome %}{% endblock %}">{% trans "My Home" %}</a>
     </li>
-    <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>
+    <li class="nav-item" {% if grps %}style="position:relative;"{% endif %}>
+        <a href="{% url 'group_list' %}" class="a {% block cur_group %}{% endblock %}" {% if grps %}id="top-nav-grp"{% endif %}>{% trans "Groups" %}{% if grps %} <span class="icon-caret-down"></span>{% endif %}</a>
+        {% if grps %}
         <div id="top-nav-grp-info" class="top-info-popup hide">
-            <div id="top-nav-grp-list">
-                <img src="{{MEDIA_URL}}img/loading-icon.gif" alt=""  class="loading-tip" />
-            </div>
+            <ul id="top-nav-grp-list">
+                {% for grp in grps %}
+                <li>
+                <a href="{% url "group_info" grp.id %}" class="item" title="{{ grp.group_name }}">
+                    {% grp_avatar grp.id 36 %} <span class="vam">{{ grp.group_name|truncatechars:14 }}</span>
+                </a>
+                </li>
+                {% endfor %}
+            </ul>
             <a href="{% url 'group_list' %}" class="item">{% trans "Group List" %}</a>
         </div>
+        {% endif %}
     </li>
+    
     {% if not cloud_mode %}
     <li class="nav-item">
         <a href="{% url 'pubrepo' %}" class="a {% block cur_pubinfo %}{% endblock %}">{% trans "Organization" %}</a>
diff --git a/seahub/templates/snippets/groups.html b/seahub/templates/snippets/groups.html
deleted file mode 100644
index 7cc5d33aba..0000000000
--- a/seahub/templates/snippets/groups.html
+++ /dev/null
@@ -1,11 +0,0 @@
-{% load seahub_tags group_avatar_tags i18n %}
-
-<ul>
-{% for grp in groups %}
-<li>
-<a href="{% url "group_info" grp.id %}" class="item" title="{{ grp.group_name }}">
-    {% grp_avatar grp.id 36 %} <span class="vam">{{ grp.group_name|truncatechars:14 }}</span>
-</a>
-</li>
-{% endfor %}
-</ul>
diff --git a/seahub/urls.py b/seahub/urls.py
index d49597334c..96bfbd770d 100644
--- a/seahub/urls.py
+++ b/seahub/urls.py
@@ -148,7 +148,6 @@ 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 cc4d049d9e..34a37c1914 100644
--- a/seahub/views/ajax.py
+++ b/seahub/views/ajax.py
@@ -15,8 +15,7 @@ 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_personal_groups_by_user
+    get_user_quota_usage, get_user_share_usage
 from pysearpc import SearpcError
 
 from seahub.auth.decorators import login_required
@@ -1210,16 +1209,3 @@ 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)