diff --git a/seahub/templates/base_for_backbone.html b/seahub/templates/base_for_backbone.html
index 03d84bfab1..b0477759ed 100644
--- a/seahub/templates/base_for_backbone.html
+++ b/seahub/templates/base_for_backbone.html
@@ -47,14 +47,14 @@
                 {% 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>
+                    <a href="{{ SITE_ROOT }}libs/" class="a {% block cur_myhome %}{% endblock %}">{% trans "My Home" %}</a>
                   </li>
                   <li class="nav-item nav-item-group" {% 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>
                   </li>
                   {% if user.permissions.can_view_org %}
                   <li class="nav-item">
-                    <a href="{% url 'pubrepo' %}" class="a {% block cur_pubinfo %}{% endblock %}">{% trans "Organization" %}</a>
+                    <a href="{{ SITE_ROOT }}libs/#org" class="a {% block cur_pubinfo %}{% endblock %}">{% trans "Organization" %}</a>
                   </li>
                   {% endif %}
                   <li class="nav-item">
diff --git a/seahub/templates/js/templates.html b/seahub/templates/js/templates.html
index 07726149a3..29b9b79fda 100644
--- a/seahub/templates/js/templates.html
+++ b/seahub/templates/js/templates.html
@@ -43,7 +43,7 @@
     <td><%= size_formatted %></td>
     <td><%= mtime_relative %></td>
 </script>
-<script type="text/template" id="group-repos-tmpl">
+<script type="text/template" id="group-repo-tmpl">
     <td>
         <% if (encrypted) { %>
         <img src="<%= app.config.mediaUrl %>img/sync-folder-encrypt-20.png" title="{% trans "Encrypted" %}" alt="" />
@@ -55,7 +55,7 @@
             <% } %>
         <% } %>
     </td>
-    <td><a href="#/lib/<%= id %>"><%- name %></a></td>
+    <td><a href="#/group/<%= group_id %>/<%= id %>"><%- name %></a></td>
     <td class="alc">
     <% if (app.pageOptions.isGroupStaff) { %>
     <img src="<%= app.config.mediaUrl%>img/delete-orange.png" alt="" class="cancel-share op-icon vh" title="{% trans "Unshare" %}" />
@@ -65,7 +65,7 @@
     <td><%= mtime_relative %></td>
     <td><span title="<%- owner %>"><%- owner_nickname %></span></td>
 </script>
-<script type="text/template" id="organization-repos-tmpl">
+<script type="text/template" id="organization-repo-tmpl">
     <td>
         <% if (encrypted) { %>
         <img src="<%= app.config.mediaUrl %>img/sync-folder-encrypt-20.png" title="{% trans "Encrypted" %}" alt="" />
@@ -77,7 +77,7 @@
             <% } %>
         <% } %>
     </td>
-    <td><a href="#/lib/<%= id %>"><%- name %></a></td>
+    <td><a href="#org/<%= id %>"><%- name %></a></td>
     <td class="alc">
     <% if (show_unshare_btn) { %>
     <img src="<%= app.config.mediaUrl%>img/delete-orange.png" alt="" class="cancel-share op-icon vh" title="{% trans "Unshare" %}" />
@@ -94,7 +94,7 @@
         </div>
         <ul id="top-nav-grp-list">
             <% for (var i = 0, len = groups.length; i < len; i++) { %>
-            <li class="item" data-url="<%= app.config.siteRoot %>group/<%= groups[i].id %>/" title="<%= groups[i].name %>">
+            <li class="item" data-url="#group/<%= groups[i].id %>/" title="<%= groups[i].name %>">
                 <%= groups[i].avatar %>
                 <span class="name ellipsis vam"><%= groups[i].name %></span>
                 <a href="<%= app.config.siteRoot %>group/<%= groups[i].id %>/discuss/" title="Discussion" class="a fright vh">
diff --git a/seahub/templates/libraries.html b/seahub/templates/libraries.html
new file mode 100644
index 0000000000..f1dfadca19
--- /dev/null
+++ b/seahub/templates/libraries.html
@@ -0,0 +1,271 @@
+{% extends "base_for_backbone.html" %}
+{% load seahub_tags i18n %}
+{% load staticfiles %}
+
+{% block sub_title %}{% trans "Libraries" %} - {% endblock %}
+
+{% block extra_style %}
+<style type="text/css">
+{% if need_guide %}
+#guide-for-new {
+    padding: 0 20px;
+    width: 450px;
+}
+#guide-for-new .icon-lightbulb {
+    font-size:6em;
+    color:#feac74;
+}
+#guide-for-new .txt {
+    margin-left:6.4em;
+}
+{% endif %}
+</style>
+{% endblock %}
+
+{% block left_panel %}
+<div class="side-tabnav">
+    <div class="hd w100 ovhd">
+        <h3 class="fleft">{% trans "Personal" %}</h3>
+        {% if user.permissions.can_add_repo %}
+        <img id="enable-mods" class="fright" title="{% trans "Enable Modules" %}" src="{{MEDIA_URL}}img/setting.png" alt="" />
+        {% endif %}
+    </div>
+    <ul class="side-tabnav-tabs">
+        <li class="tab tab-cur"><a href="{% url 'myhome' %}#" class="lib">{% trans "Libraries" %}</a></li>
+        <li class="tab {% block cur_stars %}{% endblock %}"><a href="{% url 'starred' %}" class="star">{% trans "Starred" %}</a></li>
+        {% if events_enabled %}
+        <li class="tab {% block cur_activities %}{% endblock %}"><a href="{% url 'activities' %}" class="activity">{% trans "Activities" %}</a></li>
+        {% endif %}
+        {% for mod in request.user.mods_enabled %}
+        {% if mod == 'personal wiki' %}
+        <li class="tab {% block cur_personal_wiki %}{% endblock %}"><a href="{% url 'personal_wiki' %}" class="wiki">{% trans "Personal Wiki" %}</a></li>
+        {% endif %}
+        {% endfor %}
+        <li class="tab {% block cur_messages %}{% endblock %}"><a href="{% url 'message_list' %}" class="msgs">{% trans "Messages" %}</a></li>
+        <li class="tab {% block cur_devices %}{% endblock %}"><a href="{% url 'devices' %}" class="clients">{% trans "Devices" %}</a></li>
+        <li class="tab {% block cur_contacts %}{% endblock %}"><a href="{% url 'contacts' %}" class="contacts">{% trans "Contacts" %}</a></li>
+    </ul>
+
+    <h3 class="hd">{% trans "Share Admin" %}</h3>
+    <ul class="side-tabnav-tabs">
+        {% if user.permissions.can_add_repo %}
+        <li class="tab {% block cur_share_libs %}{% endblock %}"><a href="{% url 'share_admin' %}" class="lib">{% trans "Libraries" %}</a></li>
+        <li class="tab {% block cur_share_folders %}{% endblock %}"><a href="{% url 'list_priv_shared_folders' %}" class="folders">{% trans "Folders" %}</a></li>
+        {% endif %}
+        <li class="tab {% block cur_share_files %}{% endblock %}"><a href="{% url 'list_priv_shared_files' %}" class="files">{% trans "Files" %}</a></li>
+        <li class="tab {% block cur_share_links %}{% endblock %}"><a href="{% url 'list_shared_links' %}" class="links">{% trans "Links" %}</a></li>
+    </ul>
+</div>
+{% endblock %}
+
+{% block right_panel %}
+<div id="initial-loading-view">
+    <img class="loading-tip" src="{{MEDIA_URL}}img/loading-icon.gif" alt="{% trans 'Loading...' %}" />
+</div>
+
+<div id="repo-tabs" class="tab-tabs hide">
+    <div class="hd">
+        <ul class="tab-tabs-nav fleft">
+            {% if user.permissions.can_add_repo %}
+            <li class="tab"><a href="#my-libs" class="a" id="mylib-tab">{% trans "Mine" %}</a></li>
+            {% if sub_lib_enabled %}
+            <li class="tab"><a href="#my-sub-libs" class="a" id="sublib-tab">{% trans "Sub-libraries" %}</a></li>
+            {% endif %}
+            {% endif %}
+            <li class="tab"><a href="#shared-libs" class="a" id="shared-lib-tab">{% trans "Shared" %}</a></li>
+        </ul>
+        <div class="fright">
+            <button id="repo-create" class=""><img src="{{ MEDIA_URL }}img/add.png" alt="" class="add vam" /><span class="vam">{% trans "New Library" %}</span></button>
+            {% if sub_lib_enabled %}
+            <button id="sub-lib-create" class="hide" title="{% trans "New Sub-library" %}"><img src="{{ MEDIA_URL }}img/add.png" alt="" class="add vam" /><span class="vam">{% trans "New Sub-library" %}</span></button>
+            {% endif %}
+        </div>
+    </div>
+
+    <div id="my-own-repos">
+        <table class="hide">
+            <thead>
+                <tr>
+                    <th width="4%"><!--icon--></th>
+                    <th width="46%">{% trans "Name" %} <span class="by-name icon-caret-up cspt"></span></th>
+                    <th width="10%"><!--op--></th>
+                    <th width="20%">{% trans "Size" %}</th>
+                    <th width="20%">{% trans "Last Update" %} <span class="by-time icon-caret-down cspt"></span></th>
+                </tr>
+            </thead>
+            <tbody></tbody>
+        </table>
+        <div class="empty-tips hide">
+            <h2 class="alc">{% trans "You have not created any libraries" %}</h2>
+            <p>{% trans "You can create a library to organize your files. For example, you can create one for each of your projects. Each library can be synchronized and shared separately." %}</p>
+        </div>
+    </div>
+
+    <div id="my-sub-repos">
+        <table class="hide">
+            <thead>
+            <tr>
+                <th width="4%"><!--icon--></th>
+                <th width="38%">{% trans "Name" %}</th>
+                <th width="6%"><!--op--></th>
+                <th width="30%">{% trans "Origin" %}</th>
+                <th width="22%">{% trans "Last Update" %}</th>
+            </tr>
+            </thead>
+            <tbody></tbody>
+        </table>
+        <div class="empty-tips hide">
+            <h2 class="center-contents">{% trans "You have not created any sub-libraries" %}</h2>
+            <p>{% trans "You can create a sub-library from a directory inside a library. A sub-library can be independently synced and shared. Files in the sub-library will be automatically kept in sync with those in the directory of the origin library." %}</p>
+        </div>
+    </div>
+
+    <div id="repos-shared-to-me">
+        <table class="hide">
+            <thead>
+                <tr>
+                    <th width="4%"><!--icon--></th>
+                    <th width="40%">{% trans "Name" %} <span class="by-name icon-caret-up cspt"></span></th>
+                    <th width="8%"><!--op--></th>
+                    <th width="14%">{% trans "Size" %}</th>
+                    <th width="18%">{% trans "Last Update" %} <span class="by-time icon-caret-down cspt"></span></th>
+                    <th width="16%">{% trans "Shared By" %}</th>
+                </tr>
+            </thead>
+            <tbody></tbody>
+        </table>
+        <div class="empty-tips hide">
+            <h2 class="alc">{% trans "No library is shared to you" %}</h2>
+        </div>
+    </div>
+
+    <img class="loading-tip" src="{{MEDIA_URL}}img/loading-icon.gif" alt="{% trans 'Loading...' %}" />
+</div>
+
+{% if need_guide %}
+<div id="guide-for-new" class="hide">
+    <span class="icon-lightbulb fleft"></span>
+    <div class="txt">
+        <h3>{% trans "Welcome to Seafile!" %}</h3>
+        {% if user.permissions.can_add_repo %}
+        <p>{% trans "Seafile organizes files into libraries. Each library can be synced and shared separately. We have created a personal library for you. You can create more libraries later." %}</p>
+        {% else %}
+        <p>{% trans "Seafile organizes files into libraries. Each library can be synced and shared separately. Howerver, since you are a guest user now, you can not create libraries." %}</p>
+        {% endif %}
+        <button class="simplemodal-close" style="margin:8px 0 0 0;">{% trans "Close" %}</button>
+    </div>
+</div>
+{% endif %}
+
+{% if sub_lib_enabled %}
+<form id="sublib-create-form" class="file-choose-form hide">
+    <h3>{% trans "Choose a directory:" %}</h3>
+    <div class="dir-tree-cont">
+        <img src="{{MEDIA_URL}}img/loading-icon.gif" alt="" class="loading-tip" />
+    </div>
+    <input type="hidden" name="dst_repo" value="" />
+    <input type="hidden" name="dst_path" value="" />
+    <p class="error hide"></p>
+    <input type="button" value="{% trans "Submit" %}" class="submit" />
+    <button class="simplemodal-close">{% trans "Cancel"%}</button>
+</form>
+{% endif %}
+
+<div id="group-repo-tabs" class="tab-tabs hide">
+    <div class="hd ovhd">
+        <ul class="tab-tabs-nav fleft">
+            <li class="tab"><a href="#" class="a">{% trans "Libraries" %}</a></li>
+        </ul>
+        {% if user.permissions.can_add_repo %}
+        <button id="repo-create" class="fright"><img src="{{ MEDIA_URL }}img/add.png" alt="" class="add vam" /><span class="vam">{% trans "New Library" %}</span></button>
+        {% endif %}
+    </div>
+
+    <div id="grp-repos">
+        <table style="display:none">
+            <thead>
+                <tr>
+                    <th width="4%"><!--icon--></th>
+                    <th width="38%">{% trans "Name" %} <span class="by-name icon-caret-up cspt"></span></th>
+                    <th width="10%"><!--op--></th>
+                    <th width="14%">{% trans "Size" %}</th>
+                    <th width="18%">{% trans "Last Update" %} <span class="by-time icon-caret-down cspt"></span></th>
+                    <th width="16%">{% trans "Shared By" %}</th>
+                </tr>
+            </thead>
+            <tbody></tbody>
+        </table>
+
+        <div class="empty-tips" style="margin-bottom:150px; display:none;">
+            <h2 class="alc">{% trans "No library is sharing to this group" %}</h2>
+            <p>{% blocktrans %}You can share libraries by clicking the "New Library" button above or the "Share" icon on your libraries list.{% endblocktrans %}</p>
+            <p>{% trans "Libraries shared as writable can be downloaded and synced by other group members. Read only libraries can only be downloaded, updates by others will not be uploaded." %}</p>
+        </div>
+    </div>
+
+    <img class="loading-tip" src="{{MEDIA_URL}}img/loading-icon.gif" alt="{% trans 'Loading...' %}" />
+</div>
+
+<div id="organization-repos" class="tab-tabs hide">
+    <div class="hd ovhd">
+        <h3 class="fleft">{% trans "Libraries" %}</h3>
+        <button id="repo-create" class="fright"><img src="{{ MEDIA_URL }}img/add.png" alt="" class="add vam" /><span class="vam">{% trans "New Library"%}</span></button>
+    </div>
+
+    <table class="repo-list hide">
+        <thead>
+            <tr>
+                <th width="4%"></th>
+                <th width="38%">{% trans "Name"%} <span class="by-name icon-caret-up cspt"></span></th>
+                <th width="10%"><!--op--></th>
+                <th width="14%">{% trans "Size"%}</th>
+                <th width="18%">{% trans "Last Update"%} <span class="by-time icon-caret-down cspt"></span></th>
+                <th width="16%">{% trans "Shared By"%}</th>
+            </tr>
+        </thead>
+        <tbody>
+        </tbody>
+    </table>
+    <img src="{{MEDIA_URL}}img/loading-icon.gif" alt="" class="loading-tip" />
+    <div class="empty-tips hide">
+        <h2 class="alc">{% trans "No public library" %}</h2>
+        <p>{% blocktrans %}You can create a public library by clicking "New Library" button, others can view and download this library.{% endblocktrans %}</p>
+    </div>
+</div>
+
+{% include "js/dir-view.html" %}
+
+{% endblock %}
+
+{% block extra_script %}
+{% include "js/lib-op-popups.html" %}
+<script type="text/javascript">
+app["pageOptions"] = {
+    site_root: "{{ SITE_ROOT }}",
+    base_url: "{{ SITE_ROOT }}" + "home/my/",
+    csrfToken: "{{ csrf_token }}",
+    reposUrl: "{% url 'api2-repos' %}",
+    pubReposUrl: "{% url 'api2-pub-repos' %}",
+    previewDefaultSize: "{{ PREVIEW_DEFAULT_SIZE }}",
+    groups: (function () {
+        var groups = [];
+        {% for group in request.user.joined_groups %}
+        groups.push({'name': '{{group.group_name}}', 'id': '{{group.id}}'});
+        {% endfor %}
+        return groups;
+    })(),
+    username: "{{request.user.username}}",
+    is_staff: {% if request.user.is_staff %} true {% else %} false {% endif %},
+    repo_password_min_length: {{ repo_password_min_length }},
+    enable_upload_folder: {% if enable_upload_folder %} true {% else %} false {% endif %},
+    max_upload_file_size: {% if max_upload_file_size %} {{ max_upload_file_size }} {% else %} '' {% endif %},
+    repo_password_min_length: {{ repo_password_min_length }}
+};
+
+</script>
+{% if debug %}
+<script data-main="{% static "scripts/main.js" %}" src="{% static "scripts/lib/require.js" %}"></script>
+{% else %}
+<script data-main="{% static "scripts/dist/main.js" %}" src="{% static "scripts/lib/require.js" %}"></script>
+{% endif %}
+{% endblock %}
diff --git a/seahub/urls.py b/seahub/urls.py
index 8a2d427048..6b15679124 100644
--- a/seahub/urls.py
+++ b/seahub/urls.py
@@ -92,6 +92,7 @@ urlpatterns = patterns('',
 
     ### lib (replace the old `repo` urls) ###
     # url(r'^lib/(?P<repo_id>[-0-9a-f]{36})/dir/(?P<path>.*)$', view_lib_dir, name='view_lib_dir'),
+    url(r'^libs/$', libraries, name='libraries'),
     url(r'^lib/(?P<repo_id>[-0-9a-f]{36})/file/(?P<path>.*)$', view_lib_file, name='view_lib_file'),
     # url(r'^home/my/lib/(?P<repo_id>[-0-9a-f]{36})/dir/(?P<path>.*)$', myhome_lib, name='myhome_lib'),
 
diff --git a/seahub/views/__init__.py b/seahub/views/__init__.py
index e9c1cb0e75..ead5320a77 100644
--- a/seahub/views/__init__.py
+++ b/seahub/views/__init__.py
@@ -1140,6 +1140,33 @@ def myhome(request):
             'repo_password_min_length': settings.REPO_PASSWORD_MIN_LENGTH,
             }, context_instance=RequestContext(request))
 
+@login_required
+@user_mods_check
+def libraries(request):
+    """
+    New URL to replace myhome
+    """
+    username = request.user.username
+
+    # options
+    if request.cloud_mode and request.user.org is None:
+        allow_public_share = False
+    else:
+        allow_public_share = True
+    sub_lib_enabled = UserOptions.objects.is_sub_lib_enabled(username)
+    guide_enabled = UserOptions.objects.is_user_guide_enabled(username)
+    max_upload_file_size = get_max_upload_file_size()
+
+    return render_to_response('libraries.html', {
+            "allow_public_share": allow_public_share,
+            "guide_enabled": guide_enabled,
+            "sub_lib_enabled": sub_lib_enabled,
+            'enable_upload_folder': settings.ENABLE_UPLOAD_FOLDER,
+            'max_upload_file_size': max_upload_file_size,
+            'repo_password_min_length': settings.REPO_PASSWORD_MIN_LENGTH,
+            'PREVIEW_DEFAULT_SIZE': PREVIEW_DEFAULT_SIZE,
+            }, context_instance=RequestContext(request))
+
 @login_required
 @user_mods_check
 def starred(request):
diff --git a/static/scripts/app/collections/group-repos.js b/static/scripts/app/collections/group-repos.js
index 2b5e3ce52d..d1c8fc304b 100644
--- a/static/scripts/app/collections/group-repos.js
+++ b/static/scripts/app/collections/group-repos.js
@@ -1,21 +1,26 @@
 define([
     'underscore',
     'backbone',
+    'common',
     'app/models/group-repo'
-], function(_, Backbone, GroupRepo) {
+], function(_, Backbone, Common, GroupRepo) {
     'use strict';
 
     var GroupRepoCollection = Backbone.Collection.extend({
         model: GroupRepo,
-        url: app.pageOptions.groupReposUrl,
-
         comparator: -'mtime',
 
+        url: function() {
+            return Common.getUrl({name: 'group_repos', group_id: this.group_id});
+        },
+
+        setGroupID: function(group_id) {
+            this.group_id = group_id;
+        }
+
         // initialize: function( ) {
 
         // },
-
-
     });
 
     return GroupRepoCollection;
diff --git a/static/scripts/app/main.js b/static/scripts/app/main.js
new file mode 100644
index 0000000000..5179f61804
--- /dev/null
+++ b/static/scripts/app/main.js
@@ -0,0 +1,6 @@
+define([
+    'app/router'
+], function(Router){
+    app.router = new Router();
+    Backbone.history.start();
+});
diff --git a/static/scripts/app/router.js b/static/scripts/app/router.js
new file mode 100644
index 0000000000..f4cacda318
--- /dev/null
+++ b/static/scripts/app/router.js
@@ -0,0 +1,138 @@
+/*global define*/
+define([
+    'jquery',
+    'backbone',
+    'common',
+    'app/views/myhome',
+    'app/views/group',
+    'app/views/Organization',
+    'app/views/group-nav',
+], function($, Backbone, Common, MyHomeView, GroupView, orgView,
+    GroupNavView) {
+    "use strict";
+
+    var Router = Backbone.Router.extend({
+        routes: {
+            'my-libs': 'showMyRepos',
+            'my-libs/lib/:repo_id(/*path)': 'showMyRepoDir',
+            'my-sub-libs': 'showMySubRepos',
+            'my-sub-libs/lib/:repo_id(/*path)': 'showMySubRepoDir',
+            'shared-libs': 'showSharedRepos',
+            'shared-libs/lib/:repo_id(/*path)': 'showSharedRepoDir',
+            'group/:group_id/': 'showGroupRepos',
+            'group/:group_id/:repo_id(/*path)': 'showGroupRepoDir',
+            'org': 'showOrgRepos',
+            'org/:repo_id(/*path)': 'showOrgRepoDir',
+
+            // Default
+            '*actions': 'defaultAction'
+        },
+
+        initialize: function() {
+            Common.prepareApiCsrf();
+            Common.initAccountPopup();
+            Common.initNoticePopup();
+
+            this.myHomeView = new MyHomeView();
+            this.groupView = new GroupView();
+            this.orgView = new orgView();
+            this.currentView = this.myHomeView;
+
+            this.groupNavView = new GroupNavView();
+        },
+
+        showMyRepos: function() {
+            this.currentView.hide();
+            this.currentView = this.myHomeView;
+            this.myHomeView.showMyRepos();
+        },
+
+        showMySubRepos: function() {
+            this.currentView.hide();
+            this.currentView = this.myHomeView;
+            this.myHomeView.showMySubRepos();
+        },
+
+        showSharedRepos: function() {
+            this.currentView.hide();
+            this.currentView = this.myHomeView;
+            this.myHomeView.showSharedRepos();
+        },
+
+        showMyRepoDir: function(repo_id, path) {
+            if (path) {
+                path = '/' + path;
+            } else {
+                path = '/';
+            }
+            this.currentView.hide();
+            this.currentView = this.myHomeView;
+            this.myHomeView.showDir('my-libs', repo_id, path);
+        },
+
+        showMySubRepoDir: function(repo_id, path) {
+            if (path) {
+                path = '/' + path;
+            } else {
+                path = '/';
+            }
+            this.currentView.hide();
+            this.currentView = this.myHomeView;
+            this.myHomeView.showDir('my-sub-libs', repo_id, path);
+        },
+
+        showSharedRepoDir: function(repo_id, path) {
+            if (path) {
+                path = '/' + path;
+            } else {
+                path = '/';
+            }
+            this.currentView.hide();
+            this.currentView = this.myHomeView;
+            this.myHomeView.showDir('shared-libs', repo_id, path);
+        },
+
+        showGroupRepos: function(group_id) {
+            this.currentView.hide();
+            this.currentView = this.groupView;
+            this.groupView.showRepoList(group_id);
+        },
+
+        showGroupRepoDir: function(group_id, repo_id, path) {
+            if (path) {
+                path = '/' + path;
+            } else {
+                path = '/';
+            }
+            this.currentView.hide();
+            this.currentView = this.groupView;
+            this.groupView.showDir(group_id, repo_id, path);
+        },
+
+        showOrgRepos: function() {
+            this.currentView.hide();
+            this.currentView = this.orgView;
+            this.orgView.showRepoList();
+        },
+
+        showOrgRepoDir: function(repo_id, path) {
+            if (path) {
+                path = '/' + path;
+            } else {
+                path = '/';
+            }
+            this.currentView.hide();
+            this.currentView = this.orgView;
+            this.orgView.showDir(repo_id, path);
+        },
+
+        defaultAction: function(actions) {
+            // We have no matching route, lets just log what the URL was
+            console.log('No route:', actions);
+
+            this.myHomeView.showMyRepos();
+        }
+    });
+
+    return Router;
+});
diff --git a/static/scripts/app/views/group-repos.js b/static/scripts/app/views/group-repo.js
similarity index 86%
rename from static/scripts/app/views/group-repos.js
rename to static/scripts/app/views/group-repo.js
index 6a1f067c70..38af18f3fc 100644
--- a/static/scripts/app/views/group-repos.js
+++ b/static/scripts/app/views/group-repo.js
@@ -9,23 +9,27 @@ define([
     var GroupRepoView = Backbone.View.extend({
         tagName: 'tr',
 
-        template: _.template($('#group-repos-tmpl').html()),
+        template: _.template($('#group-repo-tmpl').html()),
 
         events: {
             'mouseenter': 'showAction',
             'mouseleave': 'hideAction',
             'click .cancel-share': 'unshare'
         },
-        
-        initialize: function() {
-            console.log('init GroupRepoView');
+
+        initialize: function(options) {
+            this.group_id = options.group_id;
             Backbone.View.prototype.initialize.apply(this, arguments);
 
             this.listenTo(this.model, 'destroy', this.remove);
         },
 
         render: function() {
-            this.$el.html(this.template(this.model.toJSON()));
+            var obj = this.model.toJSON();
+            $.extend(obj, {
+                group_id: this.group_id,
+            });
+            this.$el.html(this.template(obj));
             return this;
         },
 
diff --git a/static/scripts/app/views/group.js b/static/scripts/app/views/group.js
index f40116fda9..e1659332a7 100644
--- a/static/scripts/app/views/group.js
+++ b/static/scripts/app/views/group.js
@@ -5,14 +5,13 @@ define([
     'common',
     'app/collections/group-repos',
     'app/collections/dirents',
-    'app/views/group-repos',
+    'app/views/group-repo',
     'app/views/add-group-repo',
     'app/views/group-recent-change',
     'app/views/dir',
-    'app/views/group-nav',
 ], function($, _, Backbone, Common, GroupRepos, DirentCollection,
-    GroupRepoView, AddGroupRepoView/*, DirentView*/, GroupRecentChangeView,
-    DirView, GroupNavView) {
+    GroupRepoView, AddGroupRepoView, GroupRecentChangeView,
+    DirView) {
     'use strict';
 
     var GroupView = Backbone.View.extend({
@@ -25,28 +24,19 @@ define([
         },
 
         initialize: function() {
-            Common.prepareApiCsrf();
-
-            this.$cont = this.$('#right-panel');
-
-            this.$tabs = this.$('#tabs');
-            this.$tab = this.$('#tabs div:first-child');
-            this.$table = this.$('#grp-repos table');
+            this.$tabs = this.$('#group-repo-tabs');
+            this.$table = this.$('#grp-repos table', this.$tabs);
             this.$tableHead = $('thead', this.$table);
             this.$tableBody = $('tbody', this.$table);
-            this.$loadingTip = $('.loading-tip', this.$cont);
-            this.$emptyTip = $('.empty-tips', this.$cont);
-
+            this.$loadingTip = $('.loading-tip', this.$tabs);
+            this.$emptyTip = $('.empty-tips', this.$tabs);
             this.$createForm = this.$('#repo-create-form');
+
             this.repos = new GroupRepos();
             this.listenTo(this.repos, 'add', this.addOne);
             this.listenTo(this.repos, 'reset', this.reset);
 
             this.dirView = new DirView();
-
-            this.groupView = new GroupNavView();
-            Common.initAccountPopup();
-            Common.initNoticePopup();
         },
 
         /*
@@ -64,8 +54,7 @@ define([
         },
 
         addOne: function(repo, collection, options) {
-            console.log('add repo: ' + repo.get('name'));
-            var view = new GroupRepoView({model: repo});
+            var view = new GroupRepoView({model: repo, group_id: this.group_id});
             if (options.prepend) {
                 this.$tableBody.prepend(view.render().el);
             } else {
@@ -86,9 +75,11 @@ define([
             }
         },
 
-        showRepoList: function() {
+        showRepoList: function(group_id) {
+            this.group_id = group_id;
             this.dirView.hide();
             this.$tabs.show();
+            this.repos.setGroupID(group_id);
             this.repos.fetch({reset: true});
             this.$loadingTip.show();
         },
@@ -97,7 +88,8 @@ define([
             this.$tabs.hide();
         },
 
-        showDir: function(repo_id, path) {
+        showDir: function(group_id, repo_id, path) {
+            this.group_id = group_id;
             this.hideRepoList();
             this.dirView.showDir('', repo_id, path);
         },
@@ -146,6 +138,11 @@ define([
             this.$tableBody.empty();
             repos.each(this.addOne, this);
             el.toggleClass('icon-caret-up icon-caret-down');
+        },
+
+        hide: function() {
+            this.hideRepoList();
+            this.dirView.hide();
         }
 
     });
diff --git a/static/scripts/app/views/myhome.js b/static/scripts/app/views/myhome.js
index 14b37e7fd5..bc88362b11 100644
--- a/static/scripts/app/views/myhome.js
+++ b/static/scripts/app/views/myhome.js
@@ -8,16 +8,15 @@ define([
     'app/views/myhome-sub-repos',
     'app/views/myhome-shared-repos',
     'app/views/dir',
-    'app/views/group-nav',
 ], function($, _, Backbone, Common, GroupCollection,
-        ReposView, SubReposView, SharedReposView, DirView, GroupNavView) {
+        ReposView, SubReposView, SharedReposView, DirView) {
     'use strict';
 
     var MyHomeView = Backbone.View.extend({
         el: '#main',
 
         initialize: function() {
-            Common.prepareApiCsrf();
+
 
             //_.bindAll(this, 'ajaxLoadingShow', 'ajaxLoadingHide');
             //this.$el.ajaxStart(this.ajaxLoadingShow).ajaxStop(this.ajaxLoadingHide);
@@ -28,12 +27,8 @@ define([
             this.subReposView = new SubReposView();
             this.sharedReposView = new SharedReposView();
             this.dirView = new DirView();
-            this.groupView = new GroupNavView();
             this.currentView = this.reposView;
 
-            Common.initAccountPopup();
-            Common.initNoticePopup();
-
             $('#initial-loading-view').hide();
         },
 
@@ -77,6 +72,10 @@ define([
             this.currentView.hide();
             this.dirView.showDir(category, repo_id, path);
             this.currentView = this.dirView;
+        },
+
+        hide: function() {
+            this.currentView.hide();
         }
 
 
diff --git a/static/scripts/app/views/organization-repo.js b/static/scripts/app/views/organization-repo.js
index 708f29c5de..28dd08af6a 100644
--- a/static/scripts/app/views/organization-repo.js
+++ b/static/scripts/app/views/organization-repo.js
@@ -9,7 +9,7 @@ define([
     var OrganizationRepoView = Backbone.View.extend({
         tagName: 'tr',
 
-        template: _.template($('#organization-repos-tmpl').html()),
+        template: _.template($('#organization-repo-tmpl').html()),
 
         events: {
             'mouseenter': 'showAction',
diff --git a/static/scripts/app/views/organization.js b/static/scripts/app/views/organization.js
index 00a201fafc..ba86c68c13 100644
--- a/static/scripts/app/views/organization.js
+++ b/static/scripts/app/views/organization.js
@@ -6,17 +6,15 @@ define([
     'app/collections/pub-repos',
     'app/views/organization-repo',
     'app/views/dir',
-    'app/views/group-nav',
     'app/views/add-pub-repo'
 ], function($, _, Backbone, Common, PubRepoCollection, OrganizationRepoView,
-    DirView, GroupNavView, AddPubRepoView) {
+    DirView, AddPubRepoView) {
     'use strict';
 
     var OrganizationView = Backbone.View.extend({
         el: '#main',
 
         initialize: function() {
-            Common.prepareApiCsrf();
 
             this.$reposDiv = $('#organization-repos');
             this.$table = $('#organization-repos table');
@@ -29,10 +27,6 @@ define([
             this.listenTo(this.repos, 'reset', this.reset);
 
             this.dirView = new DirView();
-
-            this.groupView = new GroupNavView();
-            Common.initAccountPopup();
-            Common.initNoticePopup();
         },
 
         events: {
@@ -67,20 +61,20 @@ define([
             this.$loadingTip.hide();
         },
 
-        showPublicRepos: function() {
+        showRepoList: function() {
             this.dirView.hide();
             this.$reposDiv.show();
             this.repos.fetch({reset: true});
             this.$loadingTip.show();
         },
 
-        hideRepos: function() {
+        hideRepoList: function() {
             this.$reposDiv.hide();
         },
 
         showDir: function(repo_id, path) {
             var path = path || '/';
-            this.hideRepos();
+            this.hideRepoList();
             this.dirView.showDir('', repo_id, path);
             // this.dirent_list = new app.DirentListView({id: id, path: path});
             // $('#my-own-repos table').children().remove();
@@ -118,6 +112,11 @@ define([
             this.$tableBody.empty();
             repos.each(this.addOne, this);
             el.toggleClass('icon-caret-up icon-caret-down');
+        },
+
+        hide: function() {
+            this.hideRepoList();
+            this.dirView.hide();
         }
 
     });
diff --git a/static/scripts/common.js b/static/scripts/common.js
index 518b354062..b7b6de8944 100644
--- a/static/scripts/common.js
+++ b/static/scripts/common.js
@@ -108,6 +108,8 @@ define([
               case 'set_notice_seen_by_id': return siteRoot + 'ajax/set_notice_seen_by_id/';
 
               case 'repo_set_password': return siteRoot + 'repo/set_password/';
+
+              case 'group_repos': return siteRoot + 'api2/groups/' + options.group_id + '/repos/';
             }
         },
 
diff --git a/static/scripts/main.js b/static/scripts/main.js
new file mode 100644
index 0000000000..12a096aae8
--- /dev/null
+++ b/static/scripts/main.js
@@ -0,0 +1,4 @@
+//Load common code that includes config, then load the app logic for this page.
+require(['./common'], function (common) {
+    require(['app/main']);
+});