diff --git a/seahub/templates/js/templates.html b/seahub/templates/js/templates.html
index 9519e21cb3..937079bcee 100644
--- a/seahub/templates/js/templates.html
+++ b/seahub/templates/js/templates.html
@@ -150,7 +150,8 @@
 </script>
 <script type="text/template" id="dir-path-bar-tmpl">
     <% if (context == 'group') { %>
-        <a href="#<%= category %>/" class="path-link normal">{% trans "Group" %}</a> /
+        <a href="#groups/" class="path-link normal">{% trans "Groups" %}</a> /
+        <a href="#<%= category %>/" class="path-link normal"><%- group_name %></a> /
     <% } else if (context == 'org') { %>
         <a href="#<%= category %>/" class="path-link normal">{% trans "Organization" %}</a> /
     <% } else if (context == 'common') { %>
diff --git a/static/scripts/app/views/dir.js b/static/scripts/app/views/dir.js
index 10d9ceed56..1059ee92d5 100644
--- a/static/scripts/app/views/dir.js
+++ b/static/scripts/app/views/dir.js
@@ -110,7 +110,9 @@ define([
                 });
             },
 
-            showDir: function(category, repo_id, path) {
+            // 'category' is sth. like url prefix
+            // options is for 'group dir view', at present (Wed Jan 13 12:44:17 CST 2016)
+            showDir: function(category, repo_id, path, options) {
                 $('#top-search-form').html(this.top_search_form_template({
                     search_repo_id: repo_id
                 }));
@@ -118,6 +120,9 @@ define([
                 this.$el.show();
                 this.$dirent_list.empty();
                 var loading_tip = this.$('.loading-tip').show();
+
+                this.contextOptions = options;
+
                 var dir = this.dir;
                 dir.setPath(category, repo_id, path);
                 var _this = this;
@@ -280,6 +285,9 @@ define([
                         category: dir.category,
                         context: context
                     };
+                if (this.contextOptions) {
+                    $.extend(obj, this.contextOptions);
+                }
 
                 var path_list = path.substr(1).split('/');
                 var path_list_encoded = Common.encodePath(path.substr(1)).split('/');
diff --git a/static/scripts/app/views/group.js b/static/scripts/app/views/group.js
index 7b310d814e..0d9d2b1450 100644
--- a/static/scripts/app/views/group.js
+++ b/static/scripts/app/views/group.js
@@ -146,7 +146,15 @@ define([
         showDir: function(group_id, repo_id, path) {
             this.group_id = group_id;
             this.hideRepoList();
-            this.dirView.showDir('group/' + this.group_id, repo_id, path);
+
+            var group_name = Common.groupId2Name(group_id);
+            if (group_name) {
+                this.dirView.showDir('group/' + this.group_id, repo_id, path, {'group_name': group_name});
+            } else {
+                // the group does not exist
+                Common.feedback('Group {group_id} not found'.replace('{group_id}', group_id), 'error');
+                app.router.navigate('my-libs/', {trigger: true});
+            }
         },
 
         createRepo: function() {
diff --git a/static/scripts/app/views/side-nav.js b/static/scripts/app/views/side-nav.js
index b3ac825382..6d2e09b756 100644
--- a/static/scripts/app/views/side-nav.js
+++ b/static/scripts/app/views/side-nav.js
@@ -103,10 +103,21 @@ define([
                 dataType: 'json',
                 cache: false,
                 success: function(data) {
-                    data.sort(function(a, b) {
+                    var groups = [];
+                    for (var i = 0, len = data.length; i < len; i++) {
+                        groups.push({
+                            'id': data[i].id,
+                            'name': data[i].name
+                        });
+                    }
+                    groups.sort(function(a, b) {
                         return Common.compareTwoWord(a.name, b.name);
                     });
-                    _this.data.groups = data;
+
+                    // update app.pageOptions.groups
+                    app.pageOptions.groups = groups;
+
+                    _this.data.groups = groups;
                     _this.render();
                 },
                 error: function() {
diff --git a/static/scripts/common.js b/static/scripts/common.js
index efc3c2631a..6bee9e2da4 100644
--- a/static/scripts/common.js
+++ b/static/scripts/common.js
@@ -664,6 +664,18 @@ define([
             } else {
                 return bytes + ' B';
             }
+        },
+
+        groupId2Name: function(group_id) {
+            var group_name;
+            var groups = app.pageOptions.groups;
+            for (var i = 0, len = groups.length; i < len; i++) {
+                if (group_id == groups[i].id) {
+                    group_name = groups[i].name;
+                    break;
+                }
+            }
+            return group_name;
         }
 
     }