diff --git a/media/css/seahub.css b/media/css/seahub.css
index 9ee0a8af2d..8c0d744ca1 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -692,8 +692,16 @@ textarea:-moz-placeholder {/* for FF */
 }
 .side-tabnav-tabs .tab .grp-list a {
     font-size:14px;
+    line-height:24px;
     padding:0;
 }
+#group-nav .sharp {
+    display:inline-block;
+    width:42px;
+    margin-right:5px;
+    text-align:right;
+    color:#aaa;
+}
 .side-tabnav-tabs .tab a:hover {
     background-color:#feefb8;
     text-decoration:none;
@@ -708,38 +716,21 @@ textarea:-moz-placeholder {/* for FF */
     line-height:1;
     color:#999;
 }
+#group-nav .toggle-icon {
+    color:#999;
+}
 .side-tabnav-tabs .tab-cur a,
 .side-tabnav-tabs .tab-cur a:hover {
     background-color:#feac74;
 }
 .side-tabnav-tabs .tab-cur [class^="sf2-icon-"],
-.side-tabnav-tabs .tab-cur a {
+.side-tabnav-tabs .tab-cur a,
+#group-nav .tab-cur .sharp {
     color:#fff;
 }
-.side-tabnav-tabs .tab-cur a,
-.side-tabnav-tabs .tab-cur .grp-list .cur a {
+.side-tabnav-tabs .tab-cur a {
     font-weight:bold;
 }
-.side-tabnav-tabs .tab-cur .grp-list a {
-    background:transparent;
-    font-weight:normal;
-    color:#333;
-}
-.side-tabnav-tabs .tab .grp-list a:hover,
-.side-tabnav-tabs .tab-cur .grp-list a:hover {
-    background-color:#feefb8;
-}
-#group-nav .grp-list {
-    max-height:105px;
-    overflow:hidden;
-}
-#group-nav .sharp {
-    display:inline-block;
-    width:42px;
-    margin-right:5px;
-    text-align:right;
-    color:#aaa;
-}
 .side-textnav .hd {
     margin:2em 0 .5em;
 }
diff --git a/seahub/base/context_processors.py b/seahub/base/context_processors.py
index 9c62c54935..34f4ffc665 100644
--- a/seahub/base/context_processors.py
+++ b/seahub/base/context_processors.py
@@ -50,9 +50,9 @@ def base(request):
     except AttributeError:
         base_template = 'myhome_base.html'
 
-    # get 8 user groups
     try:
-        grps = request.user.joined_groups[:8]
+        grps = request.user.joined_groups
+        grps.sort(lambda x, y: cmp(x.group_name.lower(), y.group_name.lower()))
     except AttributeError:      # anonymous user
         grps = None
 
diff --git a/seahub/templates/home_base.html b/seahub/templates/home_base.html
index 13c53581d3..0321384ce9 100644
--- a/seahub/templates/home_base.html
+++ b/seahub/templates/home_base.html
@@ -98,14 +98,6 @@ $('#group-nav a:first').click(function() {
     $('#group-nav .grp-list').slideToggle();
     return false;
 });
-$('#group-nav .grp-list').hover(
-    function () {
-        $(this).css({'overflow': 'auto'});
-    },
-    function () {
-        $(this).css({'overflow': 'hidden'});
-    }
-);
 {% endif %}
 </script>
 {% endblock %}
diff --git a/seahub/templates/js/templates.html b/seahub/templates/js/templates.html
index d091438c7e..0224721f09 100644
--- a/seahub/templates/js/templates.html
+++ b/seahub/templates/js/templates.html
@@ -548,12 +548,12 @@
         {% endif %}
 
         <% if (cur_tab == 'group') { %>
-        <li class="tab tab-cur" id="group-nav">
+        <li class="tab" id="group-nav">
             <a href="#"><span class="sf2-icon-group"></span>{% trans "Groups" %}<span class="toggle-icon icon-caret-down fright"></span></a>
             <ul class="grp-list">
                 <li><a href="{% url 'group_list' %}"><span class="sharp">#</span>{% trans "All Groups" %}</a></li>
                 {% for grp in grps %}
-                <li<% if (cur_group_id == '{{ grp.id }}') { %> class="cur"<% }%>>
+                <li<% if (cur_group_id == '{{ grp.id }}') { %> class="tab-cur"<% }%>>
                     <a class="ellipsis" href="{{SITE_ROOT}}#group/{{ grp.id }}/" title="{{ grp.group_name }}"><span class="sharp">#</span>{{ grp.group_name }}</a>
                 </li>
                 {% endfor %}
@@ -561,8 +561,13 @@
         </li>
         <% } else { %>
         <li class="tab" id="group-nav">
+            <% if (show_group_list) { %>
+            <a href="#"><span class="sf2-icon-group"></span>{% trans "Groups" %}<span class="toggle-icon icon-caret-down fright"></span></a>
+            <ul class="grp-list">
+            <% } else { %>
             <a href="#"><span class="sf2-icon-group"></span>{% trans "Groups" %}<span class="toggle-icon icon-caret-left fright"></span></a>
             <ul class="grp-list hide">
+            <% } %>
                 <li>
                     <a href="{% url 'group_list' %}"><span class="sharp">#</span>{% trans "All Groups" %}</a>
                 </li>
diff --git a/static/scripts/app/views/side-nav.js b/static/scripts/app/views/side-nav.js
index c93d401387..bd51f8b945 100644
--- a/static/scripts/app/views/side-nav.js
+++ b/static/scripts/app/views/side-nav.js
@@ -16,6 +16,7 @@ define([
             this.default_cur_tab = 'mine';
             this.data = {
                 'cur_tab': this.default_cur_tab,
+                'show_group_list': false, // when cur_tab is not 'group'
                 'mods_enabled': app.pageOptions.user_mods_enabled,
                 'can_add_repo': app.pageOptions.can_add_repo,
             };
@@ -30,8 +31,6 @@ define([
 
         events: {
             'click #group-nav a:first': 'toggleGroupList',
-            'mouseenter #group-nav .grp-list': 'mouseEnterGroupList', 
-            'mouseleave #group-nav .grp-list': 'mouseLeaveGroupList', 
             'click #enable-mods': 'enableMods'
         },
 
@@ -41,14 +40,6 @@ define([
             return false;
         },
 
-        mouseEnterGroupList: function () {
-            $('#group-nav .grp-list').css({'overflow': 'auto'});
-        },
-
-        mouseLeaveGroupList: function () {
-            $('#group-nav .grp-list').css({'overflow': 'hidden'});
-        },
-
         enableMods: function () {
             var mods_enabled = app.pageOptions.user_mods_enabled;
             var form = $(this.enableModTemplate({
@@ -99,6 +90,7 @@ define([
             if (options) {
                 $.extend(this.data, options);
             }
+            this.data.show_group_list = $('#group-nav .grp-list:visible').length ? true : false;
             this.render();
         }