diff --git a/seahub/templates/base_for_backbone.html b/seahub/templates/base_for_backbone.html
index cd78a90f82..2b0372ceec 100644
--- a/seahub/templates/base_for_backbone.html
+++ b/seahub/templates/base_for_backbone.html
@@ -107,7 +107,7 @@
                         {% block inst_admin %}<a href="{% url "institutions:useradmin" %}" title="{% trans "Admin" %}" class="a"><img src="{{ MEDIA_URL }}img/admin_in.png" alt="" /></a>{% endblock %}
                     </div>
                     {% endif %}
-                    
+
                 </div>
                 </div>
                 {% endif %}
@@ -117,13 +117,15 @@
 
         <div id="main" class="clear">
             <div id="left-panel">
-                {% block left_panel %}{% endblock %}
+                <div class="side-tabnav hide" id="side-nav"></div>
             </div>
             <div id="right-panel">
                 {% block right_panel %}{% endblock %}
             </div>
             <div id="main-panel" class="clear w100 ovhd">
-                {% block main_panel %} {% endblock %}
+                <div id="initial-loading-view">
+                    <span class="loading-icon loading-tip"></span>
+                </div>
             </div>
 
             <div id="confirm-popup" class="hide">
@@ -131,6 +133,19 @@
                 <button id="confirm-yes" class="btn">{% trans "Yes"%}</button>
                 <button class="simplemodal-close btn">{% trans "No"%}</button>
             </div>
+
+            <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>
         </div>
 
         {% include 'footer.html' %}
diff --git a/seahub/templates/js/dir-view.html b/seahub/templates/js/dir-view.html
index 60e0490184..67a8642be4 100644
--- a/seahub/templates/js/dir-view.html
+++ b/seahub/templates/js/dir-view.html
@@ -1,5 +1,5 @@
 {% load i18n %}
-<div id="dir-view" class="hide">
+<script type="text/template" id="dir-view-tmpl">
     <div class="repo-file-list-topbar">
         <p class="path"></p>
         <div class="repo-op"></div>
@@ -14,4 +14,4 @@
     </div>
     <span class="loading-icon loading-tip"></span>
     <p class="error hide"></p>
-</div>
+</script>
diff --git a/seahub/templates/libraries.html b/seahub/templates/libraries.html
index d91dd599ab..f610625741 100644
--- a/seahub/templates/libraries.html
+++ b/seahub/templates/libraries.html
@@ -4,113 +4,98 @@
 
 {% block sub_title %}{% trans "Libraries" %} - {% endblock %}
 
-{% block main_panel %}
-<div id="initial-loading-view">
-    <span class="loading-icon loading-tip"></span>
-</div>
-{% endblock %}
-
-{% block left_panel %}
-<div class="side-tabnav hide" id="side-nav"></div>
-{% endblock %}
-
 {% block right_panel %}
-    {% if user.permissions.can_add_repo %}
-    <div id="my-own-repos" class="hide">
-        <div class="hd ovhd">
-            <h3 class="fleft">{% trans "Mine" %}</h3>
-            <button class="repo-create fright"><span class="icon-plus-square add vam"></span><span class="vam">{% trans "New Library" %}</span></button>
-        </div>
-        <table class="my-own-repos-table hide">
-            <thead></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>
-        <span class="loading-icon loading-tip"></span>
-        <p class="error error-tip hide"></p>
+{% endblock %}
+
+{% block extra_script %}
+<script type="text/template" id="my-own-repos-tmpl">
+    <div class="hd ovhd">
+        <h3 class="fleft">{% trans "Mine" %}</h3>
+        <button class="repo-create fright"><span class="icon-plus-square add vam"></span><span class="vam">{% trans "New Library" %}</span></button>
     </div>
-    {% endif %}
-
-    <div id="repos-shared-to-me" class="hide">
-        <h3 class="hd">{% trans "Shared" %}</h3>
-        <table class="hide">
-            <thead></thead>
-            <tbody></tbody>
-        </table>
-        <div class="empty-tips hide">
-            <h2 class="alc">{% trans "No library is shared to you" %}</h2>
-        </div>
-        <span class="loading-icon loading-tip"></span>
-        <p class="error error-tip hide"></p>
-    </div>
-
-
-<div id="starred-file" class="hide">
-    <h3 class="hd">{% trans "Starred" %}</h3>
-    <table class="hide">
-        <thead>
-            <tr>
-                <th width="5%"></th>
-                <th width="40%">{% trans "File Name" %}</th>
-                <th width="32%">{% trans "Library" %}</th>
-                <th width="18%">{% trans "Last Update" %}</th>
-                <th width="5%"></th>
-            </tr>
-        </thead>
+    <table class="my-own-repos-table hide">
+        <thead></thead>
         <tbody></tbody>
     </table>
-    <span class="loading-icon loading-tip"></span>
     <div class="empty-tips hide">
-        <h2 class="alc">{% trans "You don't have any starred files yet" %}</h2>
-        <p>{% blocktrans %}You can star important files by clicking the "Star" button on file viewing page, and they will be listed here.{% endblocktrans %}</p>
+        <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="activities" class="hide">
-    <div id="activities-body" class="hide"></div>
     <span class="loading-icon loading-tip"></span>
-    <button id="activities-more" class="hide">{% trans 'More' %}</button>
-</div>
+    <p class="error error-tip hide"></p>
+</script>
 
-<div id="devices" class="hide">
-    <h3 class="hd">{% trans "Devices" %}</h3>
+<script type="text/template" id="repos-shared-to-me-tmpl">
+    <h3 class="hd">{% trans "Shared" %}</h3>
     <table class="hide">
-        <thead>
-            <tr>
-                <th width="13%">{% trans "Platform" %}</th>
-                <th width="25%">{% trans "Device Name" %}</th>
-                <th width="20%">{% trans "IP" %}</th>
-                <th width="17%">{% trans "Last Access" %}</th>
-                <th width="15%">{% trans "# Libraries" %}</th>
-                <th width="10%"></th>
-            </tr>
-        </thead>
+        <thead></thead>
         <tbody></tbody>
     </table>
-    <span class="loading-icon loading-tip"></span>
     <div class="empty-tips hide">
-        <h2 class="alc">{% trans "You do not have connected devices" %}</h2>
-        <p>{% trans "Your clients (Desktop/Android/iOS) will be listed here." %}</p>
+        <h2 class="alc">{% trans "No library is shared to you" %}</h2>
     </div>
-</div>
+    <span class="loading-icon loading-tip"></span>
+    <p class="error error-tip hide"></p>
+</script>
 
-<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>
+<script type="text/template" id="organization-repos-tmpl">
+    <div class="hd">
+        <h3 class="fleft">{% trans "Organization" %}</h3>
+        {% if can_add_pub_repo %}
+        <div class="fright dropdown dropdown js-add-pub-lib-dropdown">
+            <button class="dropdown-toggle"><span class="icon-plus-square add vam"></span><span class="vam">{% trans "Add Library"%}</span></button>
+            <ul class="add-pub-lib-dropdown-menu dropdown-menu dropdown-content hide">
+                <li><a class="op js-repo-rename share-existing" href="#">{% trans "Share existing libraries" %}</a></li>
+                <li><a class="op js-repo-rename create-new" href="#">{% trans "Create a new library" %}</a></li>
+            </ul>
+        </div>
         {% endif %}
-        <button class="simplemodal-close" style="margin:8px 0 0 0;">{% trans "Close" %}</button>
     </div>
-</div>
 
-<div id="group" class="hide">
+    <table class="repo-list hide">
+        <thead></thead>
+        <tbody></tbody>
+    </table>
+    <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>
+    <span class="loading-icon loading-tip"></span>
+    <p class="error error-tip hide"></p>
+</script>
+
+<script type="text/template" id="groups-tmpl">
+    <div class="hd ovhd">
+        <h3 class="fleft">{% trans "My Groups" %}</h3>
+        {% if user.permissions.can_add_group %}
+        <button id="add-group" class="fright"><span class="icon-plus-square add vam"></span><span class="vam">{% trans "New Group" %}</span></button>
+        {% endif %}
+    </div>
+
+    <div id="group-list" class="hide"></div>
+    <div class="empty-tips hide">
+        <h2 class="alc">{% trans "You are not in any group" %}</h2>
+        {% if user.permissions.can_add_group %}
+        <p>{% blocktrans %}Group is a place for you and your friends leaving messages and collaborating on libraries. You can create a group by clicking "New Group" button.{% endblocktrans %}</p>
+        {% else %}
+        <p>{% trans "Group is a place for you and your friends leaving messages and collaborating on libraries. Groups you join will be listed here." %}</p>
+        {% endif %}
+    </div>
+    <span class="loading-icon loading-tip"></span>
+    <p class="error error-tip hide"></p>
+
+    {% if user.permissions.can_add_group %}
+    <form id="group-add-form" action="" method="post" class="hide">{% csrf_token %}
+        <h3>{% trans "New Group" %}</h3>
+        <label>{% trans "Group Name" %}</label><br />
+        <input name="group_name" value="" class="input" /><br />
+        <p class="error hide"></p>
+        <input type="submit" class="submit" value="{% trans "Submit" %}" />
+    </form>
+    {% endif %}
+</script>
+
+<script type="text/template" id="group-tmpl">
     <div id="group-top"></div>
 
     <div id="group-repos">
@@ -174,72 +159,59 @@
             </form>
         </div>
     </div>
+</script>
 
-</div>
-
-
-<div id="organization-repos" class="hide">
-    <div class="hd">
-        <h3 class="fleft">{% trans "Organization" %}</h3>
-        {% if can_add_pub_repo %}
-        <div class="fright dropdown dropdown js-add-pub-lib-dropdown">
-            <button class="dropdown-toggle"><span class="icon-plus-square add vam"></span><span class="vam">{% trans "Add Library"%}</span></button>
-            <ul class="add-pub-lib-dropdown-menu dropdown-menu dropdown-content hide">
-                <li><a class="op js-repo-rename share-existing" href="#">{% trans "Share existing libraries" %}</a></li>
-                <li><a class="op js-repo-rename create-new" href="#">{% trans "Create a new library" %}</a></li>
-            </ul>
-        </div>
-        {% endif %}
-    </div>
-
-    <table class="repo-list hide">
-        <thead></thead>
+<script type="text/template" id="starred-file-tmpl">
+    <h3 class="hd">{% trans "Starred" %}</h3>
+    <table class="hide">
+        <thead>
+            <tr>
+                <th width="5%"></th>
+                <th width="40%">{% trans "File Name" %}</th>
+                <th width="32%">{% trans "Library" %}</th>
+                <th width="18%">{% trans "Last Update" %}</th>
+                <th width="5%"></th>
+            </tr>
+        </thead>
         <tbody></tbody>
     </table>
-    <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>
     <span class="loading-icon loading-tip"></span>
-    <p class="error error-tip hide"></p>
-</div>
-
-<div id="groups" class="hide">
-    <div class="hd ovhd">
-        <h3 class="fleft">{% trans "My Groups" %}</h3>
-        {% if user.permissions.can_add_group %}
-        <button id="add-group" class="fright"><span class="icon-plus-square add vam"></span><span class="vam">{% trans "New Group" %}</span></button>
-        {% endif %}
-    </div>
-
-    <div id="group-list" class="hide"></div>
     <div class="empty-tips hide">
-        <h2 class="alc">{% trans "You are not in any group" %}</h2>
-        {% if user.permissions.can_add_group %}
-        <p>{% blocktrans %}Group is a place for you and your friends leaving messages and collaborating on libraries. You can create a group by clicking "New Group" button.{% endblocktrans %}</p>
-        {% else %}
-        <p>{% trans "Group is a place for you and your friends leaving messages and collaborating on libraries. Groups you join will be listed here." %}</p>
-        {% endif %}
+        <h2 class="alc">{% trans "You don't have any starred files yet" %}</h2>
+        <p>{% blocktrans %}You can star important files by clicking the "Star" button on file viewing page, and they will be listed here.{% endblocktrans %}</p>
     </div>
-    <span class="loading-icon loading-tip"></span>
-    <p class="error error-tip hide"></p>
+</script>
 
-    {% if user.permissions.can_add_group %}
-    <form id="group-add-form" action="" method="post" class="hide">{% csrf_token %}
-        <h3>{% trans "New Group" %}</h3>
-        <label>{% trans "Group Name" %}</label><br />
-        <input name="group_name" value="" class="input" /><br />
-        <p class="error hide"></p>
-        <input type="submit" class="submit" value="{% trans "Submit" %}" />
-    </form>
-    {% endif %}
-</div>
+<script type="text/template" id="activities-tmpl">
+    <div id="activities-body" class="hide"></div>
+    <span class="loading-icon loading-tip"></span>
+    <button id="activities-more" class="hide">{% trans 'More' %}</button>
+</script>
+
+<script type="text/template" id="devices-tmpl">
+    <h3 class="hd">{% trans "Devices" %}</h3>
+    <table class="hide">
+        <thead>
+            <tr>
+                <th width="13%">{% trans "Platform" %}</th>
+                <th width="25%">{% trans "Device Name" %}</th>
+                <th width="20%">{% trans "IP" %}</th>
+                <th width="17%">{% trans "Last Access" %}</th>
+                <th width="15%">{% trans "# Libraries" %}</th>
+                <th width="10%"></th>
+            </tr>
+        </thead>
+        <tbody></tbody>
+    </table>
+    <span class="loading-icon loading-tip"></span>
+    <div class="empty-tips hide">
+        <h2 class="alc">{% trans "You do not have connected devices" %}</h2>
+        <p>{% trans "Your clients (Desktop/Android/iOS) will be listed here." %}</p>
+    </div>
+</script>
 
 {% include "js/dir-view.html" %}
 
-{% endblock %}
-
-{% block extra_script %}
 {% include "js/lib-op-popups.html" %}
 <script type="text/javascript">
 app["pageOptions"] = {
diff --git a/static/scripts/app/router.js b/static/scripts/app/router.js
index 8126565910..a711549608 100644
--- a/static/scripts/app/router.js
+++ b/static/scripts/app/router.js
@@ -4,13 +4,18 @@ define([
     'backbone',
     'common',
     'app/views/side-nav',
-    'app/views/myhome',
+    'app/views/myhome-repos',
+    'app/views/myhome-shared-repos',
     'app/views/groups',
     'app/views/group',
     'app/views/organization',
-    'app/views/dir'
-], function($, Backbone, Common, SideNavView, MyHomeView, GroupsView, GroupView,
-    OrgView, DirView) {
+    'app/views/dir',
+    'app/views/starred-file',
+    'app/views/devices',
+    'app/views/activities'
+], function($, Backbone, Common, SideNavView, MyReposView,
+    SharedReposView, GroupsView, GroupView,
+    OrgView, DirView, StarredFileView, DevicesView, ActivitiesView) {
     "use strict";
 
     var Router = Backbone.Router.extend({
@@ -36,6 +41,8 @@ define([
         },
 
         initialize: function() {
+            $('#initial-loading-view').hide();
+
             Common.prepareApiCsrf();
             Common.initLocale();
             Common.initAccountPopup();
@@ -46,15 +53,16 @@ define([
 
             this.dirView = new DirView();
 
-            this.myHomeView = new MyHomeView({dirView: this.dirView});
-            this.groupView = new GroupView({
-                dirView: this.dirView
-            });
-            this.orgView = new OrgView({dirView: this.dirView});
-
+            this.myReposView = new MyReposView();
+            this.sharedReposView = new SharedReposView();
+            this.orgView = new OrgView();
+            this.groupView = new GroupView();
             this.groupsView = new GroupsView();
+            this.starredFileView = new StarredFileView();
+            this.devicesView = new DevicesView();
+            this.activitiesView = new ActivitiesView();
 
-            this.currentView = this.myHomeView;
+            this.currentView = this.myReposView;
 
             $('#info-bar .close').click(Common.closeTopNoticeBar);
             $('#top-browser-tip .close').click(function () {
@@ -70,53 +78,33 @@ define([
         },
 
         showRepos: function() {
-            this.switchCurrentView(this.myHomeView);
             if (app.pageOptions.can_add_repo) {
-                this.myHomeView.showMyRepos();
+                this.showMyRepos();
             } else {
-                this.myHomeView.showSharedRepos();
-                this.sideNavView.setCurTab('shared');
+                this.showSharedRepos();
             }
         },
 
         showMyRepos: function() {
-            this.switchCurrentView(this.myHomeView);
-            this.myHomeView.showMyRepos();
+            this.switchCurrentView(this.myReposView);
+            this.myReposView.show();
             this.sideNavView.setCurTab('mine');
         },
 
         showSharedRepos: function() {
-            this.switchCurrentView(this.myHomeView);
-            this.myHomeView.showSharedRepos();
+            this.switchCurrentView(this.sharedReposView);
+            this.sharedReposView.show();
             this.sideNavView.setCurTab('shared');
         },
 
-        showStarredFile: function() {
-            this.switchCurrentView(this.myHomeView);
-            this.myHomeView.showStarredFile();
-            this.sideNavView.setCurTab('starred');
-        },
-
-        showDevices: function() {
-            this.switchCurrentView(this.myHomeView);
-            this.myHomeView.showDevices();
-            this.sideNavView.setCurTab('devices');
-        },
-
-        showActivities: function() {
-            this.switchCurrentView(this.myHomeView);
-            this.myHomeView.showActivities();
-            this.sideNavView.setCurTab('activities');
-        },
-
         showMyRepoDir: function(repo_id, path) {
             if (path) {
                 path = '/' + path;
             } else {
                 path = '/';
             }
-            this.switchCurrentView(this.myHomeView);
-            this.myHomeView.showDir('my-libs', repo_id, path);
+            this.switchCurrentView(this.dirView);
+            this.dirView.showDir('my-libs', repo_id, path);
             this.sideNavView.setCurTab('mine');
         },
 
@@ -126,8 +114,8 @@ define([
             } else {
                 path = '/';
             }
-            this.switchCurrentView(this.myHomeView);
-            this.myHomeView.showDir('common', repo_id, path);
+            this.switchCurrentView(this.dirView);
+            this.dirView.showDir('common', repo_id, path);
             this.sideNavView.setCurTab('mine');
         },
 
@@ -137,8 +125,8 @@ define([
             } else {
                 path = '/';
             }
-            this.switchCurrentView(this.myHomeView);
-            this.myHomeView.showDir('shared-libs', repo_id, path);
+            this.switchCurrentView(this.dirView);
+            this.dirView.showDir('shared-libs', repo_id, path);
             this.sideNavView.setCurTab('shared');
         },
 
@@ -153,7 +141,7 @@ define([
 
         showGroup: function(group_id, options) {
             this.switchCurrentView(this.groupView);
-            this.groupView.showRepoList(group_id, options);
+            this.groupView.show(group_id, options);
             this.sideNavView.setCurTab('group', {
                 'cur_group_tab': '',
                 'cur_group_id': group_id
@@ -166,12 +154,20 @@ define([
             } else {
                 path = '/';
             }
-            this.switchCurrentView(this.groupView);
-            this.groupView.showDir(group_id, repo_id, path);
-            this.sideNavView.setCurTab('group', {
-                'cur_group_tab': '',
-                'cur_group_id': group_id
-            });
+            var group_name = Common.groupId2Name(group_id);
+            if (group_name) {
+                this.switchCurrentView(this.dirView);
+                this.dirView.showDir('group/' + group_id, repo_id, path,
+                    {'group_name': group_name});
+                this.sideNavView.setCurTab('group', {
+                    'cur_group_tab': '',
+                    'cur_group_id': group_id
+                });
+            } else {
+                // the group does not exist
+                Common.feedback('Group {group_id} not found'.replace('{group_id}', group_id), 'error');
+                app.router.navigate('', {trigger: true});
+            }
         },
 
         showGroupMembers: function(group_id) {
@@ -185,7 +181,7 @@ define([
 
         showOrgRepos: function() {
             this.switchCurrentView(this.orgView);
-            this.orgView.showRepoList();
+            this.orgView.show();
             this.sideNavView.setCurTab('org');
         },
 
@@ -195,9 +191,27 @@ define([
             } else {
                 path = '/';
             }
-            this.switchCurrentView(this.orgView);
-            this.orgView.showDir(repo_id, path);
+            this.switchCurrentView(this.dirView);
+            this.dirView.showDir('org', repo_id, path);
             this.sideNavView.setCurTab('org');
+        },
+
+        showStarredFile: function() {
+            this.switchCurrentView(this.starredFileView);
+            this.starredFileView.show();
+            this.sideNavView.setCurTab('starred');
+        },
+
+        showDevices: function() {
+            this.switchCurrentView(this.devicesView);
+            this.devicesView.show();
+            this.sideNavView.setCurTab('devices');
+        },
+
+        showActivities: function() {
+            this.switchCurrentView(this.activitiesView);
+            this.activitiesView.show();
+            this.sideNavView.setCurTab('activities');
         }
 
     });
diff --git a/static/scripts/app/views/activities.js b/static/scripts/app/views/activities.js
index eacc3e0b58..fe822cbd93 100644
--- a/static/scripts/app/views/activities.js
+++ b/static/scripts/app/views/activities.js
@@ -10,19 +10,17 @@ define([
 
     var ActivitiesView = Backbone.View.extend({
 
-        el: $('#activities'),
+        id: 'activities',
+
+        template: _.template($('#activities-tmpl').html()),
 
         activityGroupHdTemplate: _.template($('#activity-group-hd-tmpl').html()),
         activityGroupBdTemplate: _.template($('#activity-group-bd-tmpl').html()),
 
         initialize: function () {
             this.activities = new ActivityCollection();
-
-            this.$activitiesBody = this.$('#activities-body');
-            this.$activitiesMore = this.$('#activities-more');
-            this.$loadingTip = this.$('.loading-tip');
-
             this.moreOffset = 0;
+            this.render();
         },
 
         events: {
@@ -37,12 +35,12 @@ define([
                 remove: false,
                 data: {'start': _this.moreOffset},
                 success: function() {
-                    _this.render();
+                    _this.renderActivities();
                 }
             });
         },
 
-        render: function () {
+        renderActivities: function () {
             var activitiesJson = this.activities.toJSON(),
                 len = activitiesJson.length,
                 more = activitiesJson[len-1]['more'],
@@ -79,12 +77,7 @@ define([
 
         },
 
-        hide: function () {
-            this.$el.hide();
-        },
-
-        show: function () {
-            this.$el.show();
+        showActivities: function() {
             this.$activitiesBody.hide();
             this.$activitiesMore.hide();
             this.$loadingTip.show();
@@ -94,9 +87,25 @@ define([
             this.activities.fetch({
                 data: {'start': 0},
                 success: function() {
-                    _this.render();
+                    _this.renderActivities();
                 }
             });
+        },
+
+        render: function() {
+            this.$el.html(this.template());
+            this.$activitiesBody = this.$('#activities-body');
+            this.$activitiesMore = this.$('#activities-more');
+            this.$loadingTip = this.$('.loading-tip');
+        },
+
+        show: function() {
+            $("#right-panel").html(this.$el);
+            this.showActivities();
+        },
+
+        hide: function () {
+            this.$el.detach();
         }
 
     });
diff --git a/static/scripts/app/views/devices.js b/static/scripts/app/views/devices.js
index b373b63f78..3bd51a4f26 100644
--- a/static/scripts/app/views/devices.js
+++ b/static/scripts/app/views/devices.js
@@ -10,17 +10,14 @@ define([
 
     var DevicesView = Backbone.View.extend({
 
-        el: $('#devices'),
+        id: 'devices',
+
+        template: _.template($('#devices-tmpl').html()),
 
         initialize: function() {
-            this.$table = this.$('table');
-            this.$tableBody = this.$('tbody');
-            this.$loadingTip = this.$('.loading-tip');
-            this.$emptyTip = this.$('.empty-tips');
-
             this.devices = new DevicesCollection();
             this.listenTo(this.devices, 'reset', this.reset);
-
+            this.render();
         },
 
         addOne: function(device) {
@@ -41,15 +38,23 @@ define([
             }
         },
 
-        hide: function() {
-            this.$el.hide();
+        render: function() {
+            this.$el.html(this.template());
+            $("#right-panel").html(this.$el);
+
+            this.$table = this.$('table');
+            this.$tableBody = this.$('tbody');
+            this.$loadingTip = this.$('.loading-tip');
+            this.$emptyTip = this.$('.empty-tips');
         },
 
         show: function() {
-            this.$el.show();
-            this.$table.hide();
-            this.$loadingTip.show();
+            $("#right-panel").html(this.$el);
             this.devices.fetch({reset: true});
+        },
+
+        hide: function() {
+            this.$el.detach();
         }
 
     });
diff --git a/static/scripts/app/views/dir.js b/static/scripts/app/views/dir.js
index 0ca04b8cf7..37da0ae1f3 100644
--- a/static/scripts/app/views/dir.js
+++ b/static/scripts/app/views/dir.js
@@ -14,11 +14,14 @@ define([
     'app/views/fileupload',
     'app/views/share'
     ], function($, progressbar, magnificPopup, simplemodal, _, Backbone, Common,
-        FileTree, Cookies, DirentCollection, DirentView, DirentGridView, FileUploadView, ShareView) {
+        FileTree, Cookies, DirentCollection, DirentView, DirentGridView,
+        FileUploadView, ShareView) {
         'use strict';
 
         var DirView = Backbone.View.extend({
-            el: $('#dir-view'),
+            id: 'dir-view',
+
+            template: _.template($('#dir-view-tmpl').html()),
 
             path_bar_template: _.template($('#dir-path-bar-tmpl').html()),
             dir_op_bar_template: _.template($('#dir-op-bar-tmpl').html()),
@@ -31,14 +34,6 @@ define([
             mvProgressTemplate: _.template($("#mv-progress-popup-template").html()),
 
             initialize: function(options) {
-                this.$dirent_list = this.$('.repo-file-list');
-                this.$dirent_grid = this.$('.grid-view');
-                this.$dirent_list_body = this.$('.repo-file-list tbody');
-
-                this.$path_bar = this.$('.path');
-                // For compatible with css, we use .repo-op instead of .dir-op
-                this.$dir_op_bar = this.$('.repo-op');
-
                 var view_mode = Cookies.get('view_mode');
                 if (view_mode == 'grid') {
                     this.view_mode = 'grid';
@@ -65,45 +60,8 @@ define([
 
                 this.fileUploadView = new FileUploadView({dirView: this});
 
-                // magnificPopup for image files
-                var magnificPopupOptions = {
-                    type: 'image',
-                    tClose: gettext("Close (Esc)"), // Alt text on close button
-                    tLoading: gettext("Loading..."), // Text that is displayed during loading. Can contain %curr% and %total% keys
-                    gallery: {
-                        enabled: true,
-                        tPrev: gettext("Previous (Left arrow key)"), // Alt text on left arrow
-                        tNext: gettext("Next (Right arrow key)"), // Alt text on right arrow
-                        tCounter: gettext("%curr% of %total%") // Markup for "1 of 7" counter
-                    },
-                    image: {
-                        tError: gettext('<a href="%url%" target="_blank">The image</a> could not be loaded.') // Error message when image could not be loaded
-                    }
-                };
-                // magnificPopup: for 'list view'
-                this.$dirent_list.magnificPopup($.extend({}, magnificPopupOptions, {
-                    delegate: '.img-name-link',
-                    image: {
-                        titleSrc: function(item) {
-                            var el = item.el;
-                            var img_name = el[0].innerHTML;
-                            var img_link = '<a href="' + el.attr('href') + '" target="_blank">' + gettext("Open in New Tab") + '</a>';
-                            return img_name + '<br />' + img_link;
-                        }
-                    }
-                }));
-                // magnificPopup: for 'grid view'
-                this.$dirent_grid.magnificPopup($.extend({}, magnificPopupOptions, {
-                    delegate: '.image-grid-item',
-                    image: {
-                        titleSrc: function(item) {
-                            var $el = $(item.el);
-                            var img_name = Common.HTMLescape($el.attr('data-name'));
-                            var img_link = '<a href="' + $el.attr('data-url') + '" target="_blank">' + gettext("Open in New Tab") + '</a>';
-                            return img_name + '<br />' + img_link;
-                        }
-                    }
-                }));
+                this.render();
+
 
                 // scroll window: get 'more', fix 'op bar'
                 var _this = this;
@@ -167,6 +125,59 @@ define([
 
             },
 
+            render: function() {
+                this.$el.html(this.template());
+                this.attached = false;
+                this.$dirent_list = this.$('.repo-file-list');
+                this.$dirent_grid = this.$('.grid-view');
+                this.$dirent_list_body = this.$('.repo-file-list tbody');
+
+                this.$path_bar = this.$('.path');
+                // For compatible with css, we use .repo-op instead of .dir-op
+                this.$dir_op_bar = this.$('.repo-op');
+
+                // magnificPopup for image files
+                var magnificPopupOptions = {
+                    type: 'image',
+                    tClose: gettext("Close (Esc)"), // Alt text on close button
+                    tLoading: gettext("Loading..."), // Text that is displayed during loading. Can contain %curr% and %total% keys
+                    gallery: {
+                        enabled: true,
+                        tPrev: gettext("Previous (Left arrow key)"), // Alt text on left arrow
+                        tNext: gettext("Next (Right arrow key)"), // Alt text on right arrow
+                        tCounter: gettext("%curr% of %total%") // Markup for "1 of 7" counter
+                    },
+                    image: {
+                        tError: gettext('<a href="%url%" target="_blank">The image</a> could not be loaded.') // Error message when image could not be loaded
+                    }
+                };
+                // magnificPopup: for 'list view'
+                this.$dirent_list.magnificPopup($.extend({}, magnificPopupOptions, {
+                    delegate: '.img-name-link',
+                    image: {
+                        titleSrc: function(item) {
+                            var el = item.el;
+                            var img_name = el[0].innerHTML;
+                            var img_link = '<a href="' + el.attr('href') + '" target="_blank">' + gettext("Open in New Tab") + '</a>';
+                            return img_name + '<br />' + img_link;
+                        }
+                    }
+                }));
+                // magnificPopup: for 'grid view'
+                this.$dirent_grid.magnificPopup($.extend({}, magnificPopupOptions, {
+                    delegate: '.image-grid-item',
+                    image: {
+                        titleSrc: function(item) {
+                            var $el = $(item.el);
+                            var img_name = Common.HTMLescape($el.attr('data-name'));
+                            var img_link = '<a href="' + $el.attr('data-url') + '" target="_blank">' + gettext("Open in New Tab") + '</a>';
+                            return img_name + '<br />' + img_link;
+                        }
+                    }
+                }));
+
+            },
+
             // public function
             // show a folder
             // 'category' is sth. like url prefix
@@ -177,7 +188,10 @@ define([
                 }));
 
                 this.contextOptions = options;
-                this.$el.show();
+                if (!this.attached) {
+                    this.attached = true;
+                    $("#right-panel").html(this.$el);
+                }
                 this.dir.setPath(category, repo_id, path);
                 this.renderDir();
             },
@@ -189,7 +203,8 @@ define([
                     search_repo_id: ''
                 }));
 
-                this.$el.hide();
+                this.$el.detach();
+                this.attached = false;
             },
 
             /***** private functions *****/
diff --git a/static/scripts/app/views/group-members.js b/static/scripts/app/views/group-members.js
index 29012b8d86..ee3b2f5b34 100644
--- a/static/scripts/app/views/group-members.js
+++ b/static/scripts/app/views/group-members.js
@@ -17,11 +17,14 @@ define([
             this.listenTo(this.collection, 'reset', this.reset);
 
             this.$loadingTip = this.$('.loading-tip');
-            this.$listContainer = $('#group-member-list');   
+            this.$listContainer = $('#group-member-list');
             this.$error = this.$('.error');
 
             var _this = this;
             $(window).resize(function() {
+                if (!$('#group-members:visible').length) {
+                    return;
+                }
                 _this.setConMaxHeight();
             });
             $(document).click(function(e) {
@@ -34,7 +37,7 @@ define([
                     !$popup.find('*').is(target) &&
                     !$popup_switch.is(target)) {
                     _this.hide();
-                }   
+                }
             });
         },
 
@@ -68,7 +71,7 @@ define([
                 reset: true,
                 data: {'avatar_size': 64},
                 success: function(collection, response, opts) {
-                },  
+                },
                 error: function(collection, response, opts) {
                     _this.$loadingTip.hide();
                     var err_msg;
diff --git a/static/scripts/app/views/group-settings.js b/static/scripts/app/views/group-settings.js
index 694c4bf727..aebe4be60c 100644
--- a/static/scripts/app/views/group-settings.js
+++ b/static/scripts/app/views/group-settings.js
@@ -25,6 +25,9 @@ define([
 
             var _this = this;
             $(window).resize(function() {
+                if (!$('#group-settings:visible').length) {
+                    return;
+                }
                 _this.setConMaxHeight();
             });
             $(document).click(function(e) {
diff --git a/static/scripts/app/views/group.js b/static/scripts/app/views/group.js
index 975a38e59a..361fd71bcb 100644
--- a/static/scripts/app/views/group.js
+++ b/static/scripts/app/views/group.js
@@ -14,8 +14,9 @@ define([
     'use strict';
 
     var GroupView = Backbone.View.extend({
-        el: '#group',
+        id: 'group',
 
+        template: _.template($('#group-tmpl').html()),
         groupTopTemplate: _.template($('#group-top-tmpl').html()),
         reposHdTemplate: _.template($('#shared-repos-hd-tmpl').html()),
 
@@ -30,21 +31,12 @@ define([
         },
 
         initialize: function(options) {
-            this.$tabs = this.$el;
-            this.$table = this.$('table');
-            this.$tableHead = this.$('thead');
-            this.$tableBody = this.$('tbody');
-            this.$loadingTip = this.$('#group-repos .loading-tip');
-            this.$emptyTip = this.$('#group-repos .empty-tips');
-
             this.group = {}; // will be fetched when rendering the top bar
 
             this.repos = new GroupRepos();
             this.listenTo(this.repos, 'add', this.addOne);
             this.listenTo(this.repos, 'reset', this.reset);
 
-            this.dirView = options.dirView;
-
             this.membersView = new GroupMembersView();
             this.settingsView = new GroupSettingsView({
                 groupView: this
@@ -52,6 +44,7 @@ define([
             this.discussionsView = new GroupDiscussionsView({
                 groupView: this
             });
+            this.render();
         },
 
         addOne: function(repo, collection, options) {
@@ -119,7 +112,6 @@ define([
 
         showRepoList: function(group_id, options) {
             this.group_id = group_id;
-            this.dirView.hide();
             this.$emptyTip.hide();
             this.renderGroupTop(options);
             this.$tabs.show();
@@ -152,22 +144,29 @@ define([
             });
         },
 
-        hideRepoList: function() {
-            this.$tabs.hide();
+        render: function() {
+            this.$el.html(this.template());
+            this.$table = this.$('table');
+            this.$tableHead = this.$('thead');
+            this.$tableBody = this.$('tbody');
+            this.$loadingTip = this.$('#group-repos .loading-tip');
+            this.$emptyTip = this.$('#group-repos .empty-tips');
+            this.attached = false;
         },
 
-        showDir: function(group_id, repo_id, path) {
-            this.group_id = group_id;
-            this.hideRepoList();
-
-            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});
+        show: function(group_id, options) {
+            if (!this.attached) {
+                // if the user swith bettern different groups,
+                // the group view is already attached.
+                $("#right-panel").html(this.$el);
+                this.attached = true;
             }
+            this.showRepoList(group_id, options);
+        },
+
+        hide: function() {
+            this.attached = false;
+            this.$el.detach();
         },
 
         createRepo: function() {
@@ -211,12 +210,6 @@ define([
             repos.comparator = null;
         },
 
-        hide: function() {
-            this.hideRepoList();
-            this.dirView.hide();
-            this.$emptyTip.hide();
-        },
-
         showSettings: function() {
             this.settingsView.show({
                 'group': this.group
diff --git a/static/scripts/app/views/groups.js b/static/scripts/app/views/groups.js
index 27e139b1b1..a2e49f20d1 100644
--- a/static/scripts/app/views/groups.js
+++ b/static/scripts/app/views/groups.js
@@ -9,17 +9,16 @@ define([
     'use strict';
 
     var GroupsView = Backbone.View.extend({
-        el: '#groups',
+        id: 'groups',
+
+        template: _.template($('#groups-tmpl').html()),
 
         initialize: function(options) {
             this.groups = new Groups();
             this.listenTo(this.groups, 'add', this.addOne);
             this.listenTo(this.groups, 'reset', this.reset);
 
-            this.$loadingTip = this.$('.loading-tip');
-            this.$groupList = $('#group-list');   
-            this.$emptyTip = this.$('.empty-tips');
-            this.$error = this.$('.error');
+            this.render();
         },
 
         events: {
@@ -52,6 +51,14 @@ define([
         },
 
         render: function() {
+            this.$el.html(this.template());
+            this.$loadingTip = this.$('.loading-tip');
+            this.$groupList = this.$('#group-list');
+            this.$emptyTip = this.$('.empty-tips');
+            this.$error = this.$('.error');
+        },
+
+        showGroups: function() {
             this.$groupList.hide();
             this.$emptyTip.hide();
             this.$loadingTip.show();
@@ -62,7 +69,7 @@ define([
                 data: {'with_repos': 1}, // list repos of every group
                 reset: true,
                 success: function (collection, response, opts) {
-                },  
+                },
                 error: function (collection, response, opts) {
                     _this.$loadingTip.hide();
                     var err_msg;
@@ -81,12 +88,12 @@ define([
         },
 
         show: function() {
-            this.$el.show();
-            this.render();
+            $("#right-panel").html(this.$el);
+            this.showGroups();
         },
 
         hide: function() {
-            this.$el.hide();
+            this.$el.detach();
         },
 
         addGroup: function () {
@@ -101,17 +108,17 @@ define([
                 if (!group_name) {
                     return false;
                 }
-                Common.disableButton($('[type="submit"]', $form)); 
+                Common.disableButton($('[type="submit"]', $form));
                 groups.create({'name': group_name, 'repos':[]}, {
                     wait: true,
                     validate: true,
-                    prepend: true,  // show newly created group at the top 
+                    prepend: true,  // show newly created group at the top
                     success: function() {
                         if (groups.length == 1) {
                             _this.reset();
                         }
                         app.ui.sideNavView.updateGroups();
-                    },  
+                    },
                     error: function(collection, response, options) {
                         var err_msg;
                         if (response.responseText) {
@@ -120,11 +127,11 @@ define([
                             err_msg = gettext('Please check the network.');
                         }
                         Common.feedback(err_msg, 'error', Common.ERROR_TIMEOUT);
-                    },  
+                    },
                     complete: function() {
                         Common.closeModal();
-                    }   
-                }); 
+                    }
+                });
 
                 return false;
             });
diff --git a/static/scripts/app/views/myhome-repos.js b/static/scripts/app/views/myhome-repos.js
index 8876269ba4..c654e6b401 100644
--- a/static/scripts/app/views/myhome-repos.js
+++ b/static/scripts/app/views/myhome-repos.js
@@ -10,8 +10,9 @@ define([
     'use strict';
 
     var ReposView = Backbone.View.extend({
-        el: $('#my-own-repos'),
+        id: "my-own-repos",
 
+        template: _.template($('#my-own-repos-tmpl').html()),
         reposHdTemplate: _.template($('#my-repos-hd-tmpl').html()),
 
         events: {
@@ -21,17 +22,12 @@ define([
         },
 
         initialize: function(options) {
-            this.$table = this.$('table');
-            this.$tableHead = $('thead', this.$table);
-            this.$tableBody = $('tbody', this.$table);
-            this.$loadingTip = this.$('.loading-tip');
-            this.$emptyTip = this.$('.empty-tips');
-            this.$repoCreateBtn = this.$('.repo-create');
-
             this.repos = new RepoCollection();
             this.listenTo(this.repos, 'add', this.addOne);
             this.listenTo(this.repos, 'reset', this.reset);
 
+            this.render();
+
             // hide 'hidden-op' popup
             $(document).click(function(e) {
                 var target = e.target || event.srcElement;
@@ -92,10 +88,8 @@ define([
         },
 
         showMyRepos: function() {
-            this.$el.show();
             this.$table.hide();
-            var $loadingTip = this.$loadingTip;
-            $loadingTip.show();
+            this.$loadingTip.show();
             var _this = this;
             this.repos.fetch({
                 cache: false, // for IE
@@ -103,7 +97,7 @@ define([
                 success: function (collection, response, opts) {
                 },
                 error: function (collection, response, opts) {
-                    $loadingTip.hide();
+                    _this.$loadingTip.hide();
                     var $error = _this.$('.error');
                     var err_msg;
                     if (response.responseText) {
@@ -120,12 +114,24 @@ define([
             });
         },
 
+        render: function() {
+            this.$el.html(this.template());
+            this.$table = this.$('table');
+            this.$tableHead = $('thead', this.$table);
+            this.$tableBody = $('tbody', this.$table);
+            this.$loadingTip = this.$('.loading-tip');
+            this.$emptyTip = this.$('.empty-tips');
+            this.$repoCreateBtn = this.$('.repo-create');
+            return this;
+        },
+
         show: function() {
+            $("#right-panel").html(this.$el);
             this.showMyRepos();
         },
 
         hide: function() {
-            this.$el.hide();
+            this.$el.detach();
         },
 
         createRepo: function() {
diff --git a/static/scripts/app/views/myhome-shared-repos.js b/static/scripts/app/views/myhome-shared-repos.js
index f5e94e261a..571f732c32 100644
--- a/static/scripts/app/views/myhome-shared-repos.js
+++ b/static/scripts/app/views/myhome-shared-repos.js
@@ -9,20 +9,16 @@ define([
     'use strict';
 
     var SharedReposView = Backbone.View.extend({
-        el: $('#repos-shared-to-me'),
+        id: 'repos-shared-to-me',
 
+        template: _.template($('#repos-shared-to-me-tmpl').html()),
         reposHdTemplate: _.template($('#shared-repos-hd-tmpl').html()),
 
         initialize: function(options) {
-            this.$table = this.$('table');
-            this.$tableHead = $('thead', this.$table);
-            this.$tableBody = $('tbody', this.$table);
-            this.$loadingTip = this.$('.loading-tip');
-            this.$emptyTip = this.$('.empty-tips');
-
             this.repos = new RepoCollection({type: 'shared'});
             this.listenTo(this.repos, 'add', this.addOne);
             this.listenTo(this.repos, 'reset', this.reset);
+            this.render();
         },
 
         addOne: function(repo, collection, options) {
@@ -81,12 +77,23 @@ define([
             });
         },
 
+        render: function() {
+            this.$el.html(this.template());
+            this.$table = this.$('table');
+            this.$tableHead = this.$('thead');
+            this.$tableBody = this.$('tbody');
+            this.$loadingTip = this.$('.loading-tip');
+            this.$emptyTip = this.$('.empty-tips');
+            return this;
+        },
+
         show: function() {
+            $("#right-panel").html(this.$el);
             this.showSharedRepos();
         },
 
         hide: function() {
-            this.$el.hide();
+            this.$el.detach();
         },
 
         events: {
diff --git a/static/scripts/app/views/myhome.js b/static/scripts/app/views/myhome.js
deleted file mode 100644
index 15f1fc0c19..0000000000
--- a/static/scripts/app/views/myhome.js
+++ /dev/null
@@ -1,76 +0,0 @@
-define([
-    'jquery',
-    'underscore',
-    'backbone',
-    'common',
-    'app/views/myhome-repos',
-    'app/views/myhome-shared-repos',
-    'app/views/starred-file',
-    'app/views/devices',
-    'app/views/activities'
-], function($, _, Backbone, Common, ReposView,
-    SharedReposView, StarredFileView, DevicesView, ActivitiesView) {
-    'use strict';
-
-    var MyHomeView = Backbone.View.extend({
-        el: '#main',
-
-        initialize: function(options) {
-            this.reposView = new ReposView();
-            this.sharedReposView = new SharedReposView();
-            this.starredFileView = new StarredFileView();
-            this.devicesView = new DevicesView();
-            this.activitiesView = new ActivitiesView();
-
-            this.dirView = options.dirView;
-
-            this.currentView = this.reposView;
-
-            $('#initial-loading-view').hide();
-        },
-
-        showMyRepos: function() {
-            this.currentView.hide();
-            this.reposView.show();
-            this.currentView = this.reposView;
-        },
-
-        showSharedRepos: function() {
-            this.currentView.hide();
-            this.sharedReposView.show();
-            this.currentView = this.sharedReposView;
-        },
-
-        showStarredFile: function() {
-            this.currentView.hide();
-            this.starredFileView.show();
-            this.currentView = this.starredFileView;
-        },
-
-        showDevices: function() {
-            this.currentView.hide();
-            this.devicesView.show();
-            this.currentView = this.devicesView;
-        },
-
-        showActivities: function() {
-            this.currentView.hide();
-            this.activitiesView.show();
-            this.currentView = this.activitiesView;
-        },
-
-        showDir: function(category, repo_id, path) {
-            var path = path || '/';
-            this.currentView.hide();
-            this.dirView.showDir(category, repo_id, path);
-            this.currentView = this.dirView;
-        },
-
-        hide: function() {
-            this.currentView.hide();
-        }
-
-    });
-
-    return MyHomeView;
-});
diff --git a/static/scripts/app/views/organization.js b/static/scripts/app/views/organization.js
index 1192d344c8..ae949309e4 100644
--- a/static/scripts/app/views/organization.js
+++ b/static/scripts/app/views/organization.js
@@ -13,29 +13,41 @@ define([
     'use strict';
 
     var OrganizationView = Backbone.View.extend({
-        el: '#organization-repos',
+        id: 'organization-repos-tmpl',
 
+        template: _.template($('#organization-repos-tmpl').html()),
         reposHdTemplate: _.template($('#shared-repos-hd-tmpl').html()),
 
         initialize: function(options) {
+            this.repos = new PubRepoCollection();
+            this.listenTo(this.repos, 'add', this.addOne);
+            this.listenTo(this.repos, 'reset', this.reset);
+            this.render();
+        },
+
+        render: function() {
+            this.$el.html(this.template());
             this.$table = this.$('table');
             this.$tableHead = $('thead', this.$table);
             this.$tableBody = $('tbody', this.$table);
             this.$loadingTip = this.$('.loading-tip');
             this.$emptyTip = this.$('.empty-tips');
 
-            this.repos = new PubRepoCollection();
-            this.listenTo(this.repos, 'add', this.addOne);
-            this.listenTo(this.repos, 'reset', this.reset);
-
-            this.dirView = options.dirView;
-
             this.dropdown = new DropdownView({
                 el: this.$('.js-add-pub-lib-dropdown'),
                 right: '0px'
             });
         },
 
+        show: function() {
+            $("#right-panel").html(this.$el);
+            this.showRepoList();
+        },
+
+        hide: function() {
+            this.$el.detach();
+        },
+
         events: {
             'click .share-existing': 'addRepo',
             'click .create-new': 'createRepo',
@@ -84,8 +96,6 @@ define([
         },
 
         showRepoList: function() {
-            this.dirView.hide();
-            this.$el.show();
             var $loadingTip = this.$loadingTip;
             $loadingTip.show();
             var _this = this;
@@ -112,16 +122,6 @@ define([
             });
         },
 
-        hideRepoList: function() {
-            this.$el.hide();
-        },
-
-        showDir: function(repo_id, path) {
-            var path = path || '/';
-            this.hideRepoList();
-            this.dirView.showDir('org', repo_id, path);
-        },
-
         sortByName: function() {
             $('.by-time .sort-icon', this.$table).hide();
             var repos = this.repos;
@@ -157,12 +157,6 @@ define([
             repos.each(this.addOne, this);
             el.toggleClass('icon-caret-up icon-caret-down').show();
             repos.comparator = null;
-        },
-
-        hide: function() {
-            this.hideRepoList();
-            this.$emptyTip.hide();
-            this.dirView.hide();
         }
 
     });
diff --git a/static/scripts/app/views/starred-file.js b/static/scripts/app/views/starred-file.js
index 65df8c1f11..aa706a9a26 100644
--- a/static/scripts/app/views/starred-file.js
+++ b/static/scripts/app/views/starred-file.js
@@ -11,18 +11,49 @@ define([
     'use strict';
 
     var StarredFileView = Backbone.View.extend({
+        id: 'starred-file',
 
-        el: $('#starred-file'),
+        template: _.template($('#starred-file-tmpl').html()),
 
         initialize: function() {
+            this.starredFiles = new StarredFilesCollection();
+            this.listenTo(this.starredFiles, 'reset', this.reset);
+            this.render();
+        },
+
+        addOne: function(starredFile) {
+            var view = new StarredFileItem({model: starredFile});
+            this.$tableBody.append(view.render().el);
+        },
+
+        reset: function() {
+            this.$tableBody.empty();
+            this.$loadingTip.hide();
+            this.starredFiles.each(this.addOne, this);
+            if (this.starredFiles.length) {
+                this.$emptyTip.hide();
+                this.$table.show();
+            } else {
+                this.$emptyTip.show();
+                this.$table.hide();
+            }
+        },
+
+        showStarredFiles: function() {
+            this.$table.hide();
+            this.$loadingTip.show();
+            this.starredFiles.fetch({reset: true});
+        },
+
+        render: function() {
+            this.$el.html(this.template());
+            $("#right-panel").html(this.$el);
+
             this.$table = this.$('table');
             this.$tableBody = this.$('tbody');
             this.$loadingTip = this.$('.loading-tip');
             this.$emptyTip = this.$('.empty-tips');
 
-            this.starredFiles = new StarredFilesCollection();
-            this.listenTo(this.starredFiles, 'reset', this.reset);
-
             this.$el.magnificPopup({
                 type: 'image',
                 delegate: '.img-name-link',
@@ -44,36 +75,15 @@ define([
                     tError: gettext('<a href="%url%" target="_blank">The image</a> could not be loaded.') // Error message when image could not be loaded
                 }
             });
-
-        },
-
-        addOne: function(starredFile) {
-            var view = new StarredFileItem({model: starredFile});
-            this.$tableBody.append(view.render().el);
-        },
-
-        reset: function() {
-            this.$tableBody.empty();
-            this.$loadingTip.hide();
-            this.starredFiles.each(this.addOne, this);
-            if (this.starredFiles.length) {
-                this.$emptyTip.hide();
-                this.$table.show();
-            } else {
-                this.$emptyTip.show();
-                this.$table.hide();
-            }
-        },
-
-        hide: function() {
-            this.$el.hide();
         },
 
         show: function() {
-            this.$el.show();
-            this.$table.hide();
-            this.$loadingTip.show();
-            this.starredFiles.fetch({reset: true});
+            $("#right-panel").html(this.$el);
+            this.showStarredFiles();
+        },
+
+        hide: function() {
+            this.$el.detach();
         }
 
     });