diff --git a/media/css/seahub.css b/media/css/seahub.css
index af97e9df46..47950a0ace 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -118,6 +118,7 @@
 .icon-eye-slash:before            { content: "\f070"; }
 .icon-plus-square:before          { content: "\f0fe"; }
 .icon-envelope:before             { content: "\f0e0"; }
+.icon-ellipsis-vertical:before    { content: "\f142"; }
 .fa-1x {
     font-size: 1.3em;
 }
@@ -193,6 +194,10 @@
 .sf2-icon-logout:before { content: "\e030"; }
 
 /******* tags **********/
+html, body {
+    height:100%;
+    overflow:hidden;
+}
 body,
 ul,ol,li,dl,dt,dd,
 pre,blockquote,
@@ -237,7 +242,7 @@ a.table-sort-op {
 }
 a.mobile-table-sort-op {
     display:inline-block;
-    margin: 0 7px 0 10px;
+    margin: 0 0 0 10px;
 }
 a.table-sort-op:hover,
 a.table-sort-op:focus {
@@ -404,10 +409,13 @@ table img { vertical-align:middle; }
     display: block;
 }
 /********** common class ***********/
-.hl { background-color: #f8f8f8; }/*highlight*/
 .fleft { float:left; }
 .fright { float:right; }
 .clear { clear:both; }
+.d-flex { display:flex; }
+.fd-col { flex-direction:column; }
+.flex-auto { flex:auto; }
+.flex-1 { flex:1; }
 .show { display:block; }
 .inline-block { display: inline-block; }
 .hide { display:none; }
@@ -415,11 +423,15 @@ table img { vertical-align:middle; }
 .errorlist { color:red; }
 .error-tip { text-align:center; margin-top:5em; }
 .ovhd { overflow:hidden; }
+.ov-auto { overflow:auto; }
+.ov-vb { overflow:visible; }
 .bold { font-weight:bold; }
 .no-bold { font-weight:normal; }
 .w100 { width: 100%; }
+.h100 { height: 100%; }
 .vh { visibility:hidden; }
 .vam { vertical-align:middle; }
+.hl { background-color: #f8f8f8; } /* highlight */
 .tip { color:#808080; font-size:12px; }
 .tick-green { color:green; }
 .txt-before-btn { margin-bottom:10px; }
@@ -429,12 +441,6 @@ table img { vertical-align:middle; }
     color:#1f0600;
     text-align:center;
 }
-.fixed-top-bar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-}
 .top-bar {
     padding:7px 4px;
     background:#fff1a8;
@@ -870,7 +876,6 @@ textarea:-moz-placeholder {/* for FF */
     border-bottom:1px solid #ddd;
     margin-bottom:1em;
 }
-/* Hide for mobile, show later */
 @media (max-width: 767px) {
     .side-nav {
         background: #f8f8f8;
@@ -880,54 +885,52 @@ textarea:-moz-placeholder {/* for FF */
         top:0;
         bottom:0;
         z-index:1;
-        padding:20px;
-        overflow:hidden;
-        border-right:1px solid #eee;
         box-shadow:0 0 4px #ccc;
+        -webkit-transition: all 0.3s ease;
+        -moz-transition: all 0.3s ease;
+        transition: all 0.3s ease;
+    }
+    .side-nav-shown {
+        left:0;
     }
 }
-@media (min-width: 768px) {
-    .side-nav {
-        position:fixed;
-        top:52px;
-        bottom:0;
-        z-index:1;
-        padding:20px;
-        overflow:hidden;
-        border-right:1px solid #eee;
-    }
+.side-nav {
+    padding:20px;
+    overflow:hidden;
+    border-right:1px solid #eee;
 }
 .side-nav:hover {
     overflow-y:auto;
 }
-.side-nav {
-    -webkit-transition: all 0.3s ease;
-    -moz-transition: all 0.3s ease;
-    transition: all 0.3s ease;
-}
 .home-side-nav {
-    padding:0;
-}
-.home-side-nav:hover {
-    overflow:hidden;
+    flex:auto;
+    display:flex;
+    flex-direction:column;
+    justify-content:space-between; /* make .side-nav-footer on the bottom */
+    overflow:hidden; /* for ff */
+    border-right:1px solid #eee;
 }
 .side-nav-con {
     overflow:hidden;
     padding:20px;
-    height:calc(100% - 50px);
 }
 .side-nav-con:hover {
     overflow-y:auto;
 }
 .side-nav-footer {
-    padding: 12px 20px 16px;
-    background: #f8f8f8;
+    display:flex;
+    flex-shrink:0;
+    padding:12px 20px 16px;
+    background:#f8f8f8;
     border-top:1px solid #eee;
 }
-.side-nav-footer a {
+.side-nav-footer .item {
     color:#666;
     font-weight: normal;
-    margin-right:0.25rem;
+    margin-right:10px;
+}
+.side-nav-footer .last-item {
+    margin-left:auto;
 }
 .side-tabnav .hd {
     margin-bottom:0.5em;
@@ -986,10 +989,9 @@ textarea:-moz-placeholder {/* for FF */
     color:#999;
 }
 .side-nav-toggle {
-    background:#fff;
-    font-size:1rem;
-    padding:6px 8px;
+    font-size:1.5rem;
     color:#666;
+    margin-right:15px;
 }
 .side-nav-toggle:hover {
     background:#ddd;
@@ -1060,7 +1062,7 @@ textarea:-moz-placeholder {/* for FF */
     top:0;
     bottom:0;
     z-index:21;
-    overflow-x:hidden;
+    overflow:hidden;
     border-left:1px solid #c9c9c9;
     box-shadow:0 0 4px #ccc;
     -webkit-transition: all 0.3s ease;
@@ -1082,7 +1084,7 @@ textarea:-moz-placeholder {/* for FF */
     margin:0;
 }
 .right-side-panel-con {
-    overflow-y: auto;
+    overflow-y:auto;
 }
 .right-side-panel-footer {
     position:absolute;
@@ -1092,11 +1094,44 @@ textarea:-moz-placeholder {/* for FF */
 
 /**** details-side-panel ****/
 .details-panel {
-    width:320px;
+    display:flex;
+    flex-direction:column;
+}
+@media (max-width:767px) {
+    .details-panel {
+        width:100%;
+        background:#fff;
+        position:fixed;
+        top:0;
+        left:0;
+        bottom:0;
+    }
+}
+@media (min-width:768px) {
+    .details-panel {
+        width:320px;
+        border-left:1px solid #e8e8e8;
+    }
+}
+.details-panel-hd {
+    background:#f8f8f8;
+    padding:10px;
+    border-bottom:1px solid #e8e8e8;
+    display:flex;
+}
+.details-panel-title {
+    text-align:center;
+    margin:0;
+    flex:auto;
+}
+.details-panel-con {
+    overflow-x:hidden; /* for mobile */
+    overflow-y:auto;
+    flex:auto;
 }
 .details-panel-item-name {
     display:inline-block;
-    max-width:215px;
+    max-width:calc(100% - 24px);
 }
 .details-panel-img-container {
     text-align:center;
@@ -1118,6 +1153,49 @@ textarea:-moz-placeholder {/* for FF */
     border:none;
 }
 
+/**** comments-panel ****//* such as group-discussions */
+.comments-panel {
+    display:flex;
+    flex-direction:column;
+}
+@media (max-width:767px) {
+    .comments-panel {
+        width:100%;
+        background:#fff;
+        position:fixed;
+        top:0;
+        left:0;
+        bottom:0;
+    }
+}
+@media (min-width:768px) {
+    .comments-panel {
+        width:320px;
+        border-left:1px solid #e8e8e8;
+    }
+}
+.comments-panel-hd {
+    background:#f8f8f8;
+    padding:10px;
+    border-bottom:1px solid #e8e8e8;
+    flex-shrink:0;
+    display:flex;
+}
+.comments-panel-title {
+    flex:auto;
+    text-align:center;
+    margin:0;
+}
+.comments-panel-con {
+    overflow-y:auto;
+}
+.comments-panel-footer {
+    margin-top:auto;
+}
+.comments-panel-footer .msg-form {
+    border-top:1px solid #e8e8e8;
+}
+
 /**** messages ****/
 .messages {
     position:fixed;
@@ -1249,6 +1327,9 @@ textarea:-moz-placeholder {/* for FF */
 .tab-tabs .tab-tabs-nav {
     padding-top:0;
 }
+.cur-view-path .tab-tabs-nav {
+    font-size:15px;
+}
 .tab-tabs-nav .tab {
     float:left;
     border:0;
@@ -1270,6 +1351,12 @@ textarea:-moz-placeholder {/* for FF */
 .tab-tabs-nav .tab .a:hover {
     color:#DD4B39;
 }
+.cur-view-path .tab-tabs-nav .ui-state-active .a,
+.cur-view-path .tab-tabs-nav .a:hover {
+    color:#eb8205;
+    text-decoration:none;
+    border-bottom-color:#eb8205;
+}
 .tab-tabs .ui-tabs-panel {
     padding:0;
 }
@@ -1696,7 +1783,6 @@ button.sf-dropdown-toggle:focus {
 
 /********** Container ***********/
 #wrapper {
-
 }
 #header {
     background:#f4f4f7;
@@ -1704,25 +1790,115 @@ button.sf-dropdown-toggle:focus {
     height:53px;
     font-size: 14px;
     border-bottom: 1px solid #e8e8e8;
-    padding-bottom:4px;
-    z-index:1; /* fix for: modal dialog z-index is 1001 */
-}
-#header-inner {
-    margin:0 auto;
-}
-#main {
-    min-height: 400px;
-    _height: 400px;
-}
-#main.top-padding {
-    padding-top:53px;
+    padding:8px 16px 4px;
+    /*display:flex;*/
+    justify-content:space-between;
+    flex-shrink:0;
 }
 #wide-panel-noframe {
     padding-top:16px;
 }
+.side-panel {
+    display:flex;
+    flex-direction:column;
+    padding:0;
+    overflow:hidden;
+}
+@media (max-width: 767px) {
+    .side-panel {
+        background:#f8f8f8;
+        width:300px;
+        height:100%;
+        position:fixed;
+        left:-300px;
+        z-index:1; /* important! */
+        -webkit-transition: all 0.3s ease;
+        -moz-transition: all 0.3s ease;
+        transition: all 0.3s ease;
+    }
+}
+.side-panel-close {
+    margin:10px 0 0 auto;
+}
+.main-panel {
+    padding:0;
+    display:flex;
+    flex-direction:column;
+}
+.panel-top {
+    padding:.5rem 1rem .25rem;
+    background:#f4f4f7;
+    border-bottom: 1px solid #e8e8e8;
+    display:flex;
+    flex-shrink:0;
+}
+.side-panel-top {
+    padding:.5rem 1rem;
+}
+@media (max-width: 767px) {
+    .side-panel-top {
+        border-right:1px solid #eee;
+    }
+}
+@media (min-width: 768px) {
+    .cur-view-toolbar {
+        position:relative; /* for the ':before' */
+    }
+    .cur-view-toolbar:before {
+        content:'';
+        border-left:1px solid #ddd;
+        position:absolute;
+        top:3px;
+        left:-16px;
+        height:23px;
+    }
+}
+.common-toolbar {
+    margin-left:auto;
+    display:flex;
+}
 #right-panel {
     padding-top:16px;
-    margin-bottom:20px;
+    padding-bottom:20px;
+}
+.main-panel-main {
+    flex:auto;
+    display:flex;
+    flex-direction:column;
+    overflow:hidden; /* for ff */
+}
+.main-panel-main-with-side {
+    flex-direction:row;
+}
+.cur-view-main {
+    flex:1;
+    display:flex;
+    flex-direction:column;
+}
+.cur-view-path {
+    flex-shrink:0;
+    min-height:40px;
+    padding:8px 16px 0;
+    background:#f9f9f9;
+    position:relative; /* for the ':after' */
+}
+.cur-view-path:after {
+    content:'';
+    border-bottom:1px solid #e8e8e8;
+    position:absolute;
+    left:16px;
+    right:16px;
+    bottom:0;
+}
+.cur-view-path-path { /* for the real path */
+    font-size:16px;
+    word-break: break-all;
+}
+.cur-view-main-con {
+    padding:10px 16px 20px;
+    border-right:4px solid transparent;
+    overflow:auto;
+    flex:auto;
 }
 #title-panel h2 {
     margin-bottom:0.45em;
@@ -1755,7 +1931,7 @@ button.sf-dropdown-toggle:focus {
 .group-top-op-icon {
     display:inline-block;
     font-size:22px;
-    margin:4px 15px 0 0;
+    margin:3px 0 0 10px;
 }
 .commit-list-topbar,
 .file-audit-list-topbar,
@@ -1805,6 +1981,21 @@ button.sf-dropdown-toggle:focus {
     background:#fff;
     line-height:17px;
 }
+.cur-view-toolbar .btn-white {
+    min-width: 55px;
+}
+@media (max-width:767px) {
+    .cur-view-toolbar {
+        margin-top:8px;
+    }
+    .cur-view-toolbar .mobile-icon {
+        color:#999;
+        line-height:1;
+        font-size:22px;
+        vertical-align:middle;
+        margin-right:8px;
+    }
+}
 /* info-bar */
 #info-bar {
     color:#1f0600;
@@ -1828,18 +2019,24 @@ button.sf-dropdown-toggle:focus {
 }
 /* top-bar */
 #logout-icon {
-    margin:10px 0 0 25px;
+    margin:5px 0 0 25px;
     font-size:22px;
     line-height:1;
     color:#999;
 }
+@media (max-width: 390px) {
+    #logout-icon {
+        margin-left:8px;
+    }
+}
+
 #notifications {
     position:relative;
-    margin:10px 0 0 25px;
+    margin:5px 0 0 25px;
 }
 @media (max-width: 390px) {
     #notifications {
-        margin-left:5px;
+        margin-left:8px;
     }
 }
 #notifications .sf2-icon-bell {
@@ -1860,10 +2057,10 @@ button.sf-dropdown-toggle:focus {
 }
 #notice-popover {
     top:38px;
-    right:-80px;
+    right:-16px;
 }
 #notice-popover .outer-caret {
-    right:82px;
+    right:18px;
 }
 #notice-popover a {
     font-weight:normal;
@@ -1902,18 +2099,25 @@ button.sf-dropdown-toggle:focus {
     position:relative;
     margin-left:32px;
 }
-@media (max-width: 390px) {
-    #account {
-        margin-left:5px;
-    }
-}
 #account .avatar {
     vertical-align:middle;
     border-radius:1000px;
 }
 #my-info {
-    cursor: pointer;
-    color: #d6d6d6;
+    display:inline-block;
+    color:#d6d6d6;
+}
+@media (max-width:767px) {
+    #account {
+        margin:6px 0 0 10px;
+    }
+    .account-toggle {
+        font-size:22px;
+        line-height:1;
+        color:#999;
+        padding:0 8px;
+        margin-top:8px;
+    }
 }
 .account-popup .avatar {
     float:left;
@@ -1923,12 +2127,12 @@ button.sf-dropdown-toggle:focus {
 }
 .account-popup {
     right:0;
-    top:48px;
+    top:52px;
     font-size:13px;
 }
 .account-popup .outer-caret {
     top:-10px;
-    left:200px;
+    right:16px;
 }
 .account-popup .sf-popover-con {
     padding:0;
@@ -1976,13 +2180,6 @@ button.sf-dropdown-toggle:focus {
 }
 
 /* header */
-#notice-con {
-    color:red;
-    padding:3px 5px;
-    background:#ffc;
-    border-radius:1px;
-    box-shadow:0 0 6px gray;
-}
 #logo {
     margin-right:30px;
 }
@@ -2254,8 +2451,12 @@ button.sf-dropdown-toggle:focus {
         background: transparent url('../img/grippy_large.png') scroll no-repeat 1px 50%;
     }
 }
-.repo-file-list .icon-star-empty { color:#d0d0d0; }
-.repo-file-list .icon-star { color:#505050; }
+.repo-file-list .icon-star-empty {
+    color:#d0d0d0;
+}
+.repo-file-list .icon-star {
+    color:#505050;
+}
 .repo-file-list .icon-star-empty,
 .repo-file-list .icon-star {
     font-size:16px;
@@ -3040,22 +3241,29 @@ button.sf-dropdown-toggle:focus {
     margin:0 10px 0 0;
 }
 .custom-ftype-options .fileext-input {
-    padding:0 3px;
     width:70%;
 }
+@media (max-width:400px) {
+    .custom-ftype-options .fileext-input {
+        width:95%;
+    }
+}
+.top-search-link {
+    margin-top:5px;
+}
+.top-search-link .icon-search {
+    font-size:19px;
+    line-height:1;
+    color:#999;
+}
 #top-search-form {
     position:relative;
-    margin-top:7px;
+    margin-top:3px;
 }
 #top-search-form .search-input {
     width:155px;
     padding:1px 30px 1px 5px;
 }
-@media (max-width: 390px) {
-    #top-search-form .search-input {
-        width:130px;
-    }
-}
 #search-form,
 #search-user-form,
 #search-group-form,
@@ -3071,6 +3279,7 @@ button.sf-dropdown-toggle:focus {
 #search-form .input_and_submit {
     display:inline-block;
     position:relative;
+    width:60%;
 }
 #search-form .advanced-search {
     color:#666;
@@ -3079,7 +3288,7 @@ button.sf-dropdown-toggle:focus {
     margin-left:4px;
 }
 #search-form .search-input {
-    width:392px;
+    width:calc(100% - 35px);
     height:24px;
     padding:0 30px 0 5px;
 }
@@ -3663,19 +3872,25 @@ img.thumbnail {
     margin:0 0 32px;
 }
 /**** #group ****/ /* group page */
-#group {
+#group-path {
+    display:flex;
+    justify-content:space-between;
+}
+.group-toolbar-2 {
     position:relative;
+    flex:none;
+    margin-left:10px;
 }
 #group-members, #group-settings {
     position:absolute;
-    top:90px;
+    top:42px;
     right:0;
 }
 #group-members .outer-caret {
-    right:66px;
+    right:37px;
 }
 #group-settings .outer-caret {
-    right:106px;
+    right:72px;
 }
 .group-setting-list {
     border-bottom:1px solid #e3e3e5;
@@ -3691,36 +3906,8 @@ img.thumbnail {
     color:#888;
 }
 /* view mode */
-@media (max-width:499px) {
-    .repo-op-misc {
-        display:block;
-        margin:5px 0 0 0;
-    }
-    .switch-mode {
-        vertical-align:middle;
-    }
-    .trash-history {
-        display:inline-block;
-        margin-left:30px;
-        vertical-align:middle;
-    }
-}
-@media (min-width:500px) {
-    .repo-op-misc {
-        display:inline-block;
-        margin-left:12px;
-        overflow:hidden;
-        vertical-align:middle;
-    }
-    .trash-history {
-        float:right;
-    }
-}
-.trash-history {
-    height:29px;
-}
 .switch-mode {
-    display:inline-block;
+    margin-left:15px;
 }
 .grid-view-icon-btn,
 .list-view-icon-btn {
@@ -3901,3 +4088,21 @@ img.thumbnail {
     display:inline-block;
     max-width:215px;
 }
+/* dir view */
+#dir-view-path {
+    display:flex;
+    justify-content:space-between;
+}
+.dir-toolbar-2 {
+    flex:none;
+    margin-left:10px;
+}
+.dir-toolbar-2 .op-link {
+    font-size:21px;
+    color:#8a8a8a;
+    margin-left:8px;
+}
+.dir-toolbar-2 .op-link:hover {
+    color:#eb8205;
+    text-decoration:none;
+}
diff --git a/media/js/base.js b/media/js/base.js
index ae4b7fb267..145922799f 100644
--- a/media/js/base.js
+++ b/media/js/base.js
@@ -14,7 +14,7 @@ if ($('.messages')[0]) {
 
 $(function() {
 
-    $('#my-info').click(function() {
+    $('.account-toggle').click(function() {
         var popup = $('#user-info-popup');
         popup.toggleClass('hide');
         if (!popup.hasClass('hide')) {
@@ -57,7 +57,7 @@ $(document).click(function(e) {
             popup.addClass('hide');
         }
     };
-    closePopup($('#user-info-popup'), $('#my-info'));
+    closePopup($('#user-info-popup'), $('.account-toggle'));
 });
 
 // search: disable submit when input nothing
diff --git a/seahub/group/templates/group/group_base.html b/seahub/group/templates/group/group_base.html
index 147ec6dbf8..85e55368d5 100644
--- a/seahub/group/templates/group/group_base.html
+++ b/seahub/group/templates/group/group_base.html
@@ -1,15 +1,17 @@
 {% extends 'base.html' %}
 
-{% load seahub_tags avatar_tags group_avatar_tags i18n %}
+{% load seahub_tags group_avatar_tags i18n %}
 
 {% block sub_title %}{{group.group_name}} - {% endblock %}
 
+{% block main_class %}d-flex ovhd{% endblock %}
+
 {% block main_content %}
-<div class="row">
+<div class="row flex-1 d-flex">
     <div class="side-tabnav side-nav col-md-3">
         <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf2-icon-x1 sf-popover-close op-icon hidden-md-up js-close-side-nav fright"></a>
     {% block left_panel %}
-        <div class="hd w100 ovhd">
+        <div class="hd">
             <h3>
                 {% grp_avatar group.props.id 32 %} <a title="{{ group.group_name }}" class="grp-name ellipsis vam" href="{% url 'group_info' group.id %}">{{ group.group_name }}</a>
             </h3>
@@ -17,7 +19,7 @@
     {% endblock %}
     </div>
 
-    <div id="right-panel" class="col-md-9 col-md-offset-3">
+    <div id="right-panel" class="col-md-9 ov-auto flex-1">
     {% block right_panel %}{% endblock %}
     </div>
 </div>
diff --git a/seahub/help/templates/help/base.html b/seahub/help/templates/help/base.html
index f084927a2b..1a1959c440 100644
--- a/seahub/help/templates/help/base.html
+++ b/seahub/help/templates/help/base.html
@@ -1,8 +1,10 @@
 {% extends "base.html" %}
 {% load i18n %}
 
+{% block main_class %}d-flex ovhd{% endblock %}
+
 {% block main_content %}
-<div class="row">
+<div class="row flex-1 d-flex">
     <div class="side-textnav col-md-3 side-nav">
         <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf2-icon-x1 sf-popover-close op-icon hidden-md-up js-close-side-nav fright"></a>
         <h3 class="hd">{% trans "Desktop Client and Syncing" %}</h3>
@@ -22,7 +24,7 @@
         </ul>
     </div>
 
-    <div class="help-con article col-md-9 col-md-offset-3" id="right-panel">{% block help_con %}{% endblock %}</div>
+    <div class="help-con article col-md-9 ov-auto flex-1" id="right-panel">{% block help_con %}{% endblock %}</div>
 
 </div>
 {% endblock %}
diff --git a/seahub/institutions/templates/institutions/base.html b/seahub/institutions/templates/institutions/base.html
index 44a01c57ae..b21dbb8916 100644
--- a/seahub/institutions/templates/institutions/base.html
+++ b/seahub/institutions/templates/institutions/base.html
@@ -1,12 +1,14 @@
 {% extends "base.html" %}
 {% load i18n %}
 
+{% block main_class %}d-flex ovhd{% endblock %}
+
 {% block admin_link %}
 <a href="{{ SITE_ROOT }}" title="{% trans "Exit admin panel" %}" class="item">{% trans "Exit admin panel" %}</a>
 {% endblock %}
 
 {% block main_content %}
-<div class="row">
+<div class="row flex-1 d-flex">
     <div class="side-nav side-tabnav col-md-3">
         <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf2-icon-x1 sf-popover-close op-icon hidden-md-up js-close-side-nav fright"></a>
         {% block left_panel %}
@@ -23,7 +25,7 @@
         {% endblock %}
     </div>
 
-    <div id="right-panel" class="col-md-9 col-md-offset-3">
+    <div id="right-panel" class="col-md-9 ov-auto flex-1">
         {% block right_panel %}{% endblock %}
     </div>
 </div>
diff --git a/seahub/profile/templates/profile/set_profile.html b/seahub/profile/templates/profile/set_profile.html
index bf82884fa8..fc8f7723ad 100644
--- a/seahub/profile/templates/profile/set_profile.html
+++ b/seahub/profile/templates/profile/set_profile.html
@@ -4,8 +4,10 @@
 
 {% block sub_title %}{% trans "Settings" %} - {% endblock %}
 
+{% block main_class %}d-flex ovhd{% endblock %}
+
 {% block main_content %}
-<div class="row">
+<div class="row flex-1 d-flex">
 
 <div class="side-nav side-textnav col-md-3" id="side-nav" role="navigation">
     <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf2-icon-x1 sf-popover-close op-icon hidden-md-up js-close-side-nav fright"></a>
@@ -30,7 +32,7 @@
     </ul>
 </div>
 
-<div id="right-panel" class="col-md-9 col-md-offset-3">
+<div id="right-panel" class="col-md-9 ov-auto flex-1">
 
 <h2>{% trans "Settings" %}</h2>
 
diff --git a/seahub/profile/templates/profile/user_profile.html b/seahub/profile/templates/profile/user_profile.html
index 04f4afd8c1..91ec088141 100644
--- a/seahub/profile/templates/profile/user_profile.html
+++ b/seahub/profile/templates/profile/user_profile.html
@@ -2,7 +2,7 @@
 {% load avatar_tags i18n seahub_tags %}
 
 {% block sub_title %}{% trans "Profile" %} - {% endblock %}
-{% block header_css_class %}{% endblock %}
+{% block header_css_class %}d-flex{% endblock %}
 
 {% block main_panel %}
 <div id="user-profile">
diff --git a/seahub/templates/base.html b/seahub/templates/base.html
index 35787d1fa9..e0a6c057ba 100644
--- a/seahub/templates/base.html
+++ b/seahub/templates/base.html
@@ -21,7 +21,7 @@
 </head>
 
 <body>
-    <div id="wrapper" class="{{ LANGUAGE_CODE }}">
+    <div id="wrapper" class="{{ LANGUAGE_CODE }} d-flex fd-col h100">
         {% block info_bar_message %}
         {% if request.user.is_authenticated and request.cur_note %}
         <div id="info-bar">
@@ -31,33 +31,30 @@
         {% endif %}
         {% endblock info_bar_message %}
 
-        <div id="header" class="navbar {% block header_css_class %}navbar-fixed-top{% endblock %}">
-            <div id="header-inner">
-                {% block notice_panel %}{% endblock %}
-                <a href="{{ SITE_ROOT }}" id="logo" class="fleft">
-                    {% if seacloud_mode %}
-                    <img src="{{ MEDIA_URL }}img/seacloud_logo.png?t=1398068110" title="Seacloud" alt="logo" width="186" height="31" />
-                    {% else %}
-                    <img src="{{ MEDIA_URL }}{{ logo_path }}" title="{{ site_title }}" alt="logo" width="{{logo_width}}" height="{{logo_height}}" />
-                    {% endif %}
-                </a>
-                <button class="sf2-icon-list-view side-nav-toggle hidden-md-up hide" title="{% trans "Side Nav Menu" %}" id="js-toggle-side-nav" aria-label="{% trans "Side Nav Menu" %}"></button>
-
-                {% block header_right %}
-                {% if request.user.is_authenticated %}
-                <div class="fright">
+        <div id="header" class="{% block header_css_class %}d-flex{% endblock %}">
+            <a href="{{ SITE_ROOT }}" id="logo">
+                {% if seacloud_mode %}
+                <img src="{{ MEDIA_URL }}img/seacloud_logo.png?t=1398068110" title="Seacloud" alt="logo" width="186" height="31" />
+                {% else %}
+                <img src="{{ MEDIA_URL }}{{ logo_path }}" title="{{ site_title }}" alt="logo" width="{{logo_width}}" height="{{logo_height}}" />
+                {% endif %}
+            </a>
+            <span class="sf2-icon-list-view side-nav-toggle hidden-md-up hide" title="{% trans "Side Nav Menu" %}" id="js-toggle-side-nav" aria-label="{% trans "Side Nav Menu" %}"></span>
 
+            {% block header_right %}
+            {% if request.user.is_authenticated %}
+            <div class="d-flex">
                 {% block top_search %}
                 {% if has_file_search %}
                     {% include 'snippets/search_form.html' %}
                 {% endif %}
                 {% endblock %}
 
-
-                <div id="account" class="fright">
-                    <a id="my-info" href="#" class="no-deco" aria-label="{% trans "View profile and more" %}">
+                <div id="account">
+                    <a id="my-info" href="#" class="account-toggle no-deco hidden-sm-down" aria-label="{% trans "View profile and more" %}">
                         {% avatar request.user 36 %} <span class="icon-caret-down vam"></span>
                     </a>
+                    <span class="account-toggle icon-ellipsis-vertical mobile-icon hidden-md-up" aria-label="{% trans "View profile and more" %}"></span>
                     <div id="user-info-popup" class="account-popup sf-popover hide">
                         <div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
                         <div class="sf-popover-con">
@@ -86,24 +83,23 @@
                         </div>
                     </div>
                 </div>
-                </div>
-                {% else %} {# for non-logged-in user #}
-                <div class="fright" id="lang">
-                    <a href="#" id="lang-context" data-lang="{{ LANGUAGE_CODE }}">{{ LANGUAGE_CODE|language_name_local }} <span class="icon-caret-down"></span></a>
-                    <div id="lang-context-selector" class="sf-popover hide">
-                        <ul class="sf-popover-con">
-                            {% for LANG in LANGUAGES %}
-                            <li><a href="{% url 'i18n' %}?lang={{ LANG.0 }}">{{ LANG.1 }}</a></li>
-                            {% endfor %}
-                        </ul>
-                    </div>
-                </div>
-                {% endif %}
-                {% endblock %}
             </div>
+            {% else %} {# for non-logged-in user #}
+            <div id="lang">
+                <a href="#" id="lang-context" data-lang="{{ LANGUAGE_CODE }}">{{ LANGUAGE_CODE|language_name_local }} <span class="icon-caret-down"></span></a>
+                <div id="lang-context-selector" class="sf-popover hide">
+                    <ul class="sf-popover-con">
+                        {% for LANG in LANGUAGES %}
+                        <li><a href="{% url 'i18n' %}?lang={{ LANG.0 }}">{{ LANG.1 }}</a></li>
+                        {% endfor %}
+                    </ul>
+                </div>
+            </div>
+            {% endif %}
+            {% endblock %}
         </div>
 
-        <div id="main" class="clear container-fluid {% block main_css_class %}top-padding{% endblock %}">
+        <div id="main" class="container-fluid w100 flex-auto {% block main_class %}ov-auto{% endblock %}">{# since #wrapper is `d-flex`, 'w100' is necessary here. #}
             {% block main_content %}
             <div class="row">
                 <div id="main-panel" class="w100 ovhd">
@@ -111,27 +107,27 @@
                 </div>
             </div>
             {% endblock %}
-
-            {% if messages %}
-            <ul class="messages hide">
-                {% for message in messages %}
-                <li class="{{ message.tags }}">
-                    {% if 'safe' in message.tags %}
-                        {{ message|safe }}
-                    {% else %}
-                        {{ message }}
-                    {% endif %}
-                </li>
-                {% endfor %}
-            </ul>
-            {% endif %}
-            <div id="confirm-popup" class="hide">
-                <div id="confirm-con"></div>
-                <button id="confirm-yes">{% trans "Yes" %}</button>
-                <button class="simplemodal-close">{% trans "No" %}</button>
-            </div>
         </div>
 
+        {% if messages %}
+        <ul class="messages hide">
+            {% for message in messages %}
+            <li class="{{ message.tags }}">
+                {% if 'safe' in message.tags %}
+                    {{ message|safe }}
+                {% else %}
+                    {{ message }}
+                {% endif %}
+            </li>
+            {% endfor %}
+        </ul>
+        {% endif %}
+
+        <div id="confirm-popup" class="hide">
+            <div id="confirm-con"></div>
+            <button id="confirm-yes">{% trans "Yes" %}</button>
+            <button class="simplemodal-close">{% trans "No" %}</button>
+        </div>
 </div><!-- wrapper -->
 
 <script type="text/javascript" src="{{ MEDIA_URL }}js/jquery-1.12.1.min.js" id="jquery"></script>{# 'id="jquery"' is for pdf file view with pdf2html #}
@@ -222,22 +218,17 @@ $('#info-bar .close').click(function() {
 {% endif %}
 
 if ($('.side-nav').length) {
-    $('#logo').addClass('hidden-sm-down');
-    $('#js-toggle-side-nav').removeClass('hide');
+     $('#logo').addClass('hidden-sm-down');
+     $('#js-toggle-side-nav').removeClass('hide');
 }
 $('#js-toggle-side-nav').click(function() {
-    $('.side-nav').css({'left': 0});
+    $('.side-nav').addClass('side-nav-shown');
     return false;
 });
 $('.js-close-side-nav').click(function() {
-    $('.side-nav').css({'left': '-300px'});
+    $('.side-nav').removeClass('side-nav-shown');
     return false;
 });
-$(window).resize(function() {
-    if ($(window).width() >= 768) {
-        $('.side-nav').css({'left': 0});
-    }
-});
 </script>
 {% block extra_script %}{% endblock %}
 </body>
diff --git a/seahub/templates/base_for_backbone.html b/seahub/templates/base_for_backbone.html
index 0d78815506..af5d741d3d 100644
--- a/seahub/templates/base_for_backbone.html
+++ b/seahub/templates/base_for_backbone.html
@@ -23,86 +23,89 @@
 </head>
 
 <body>
-    <div id="wrapper" role="application" class="{{ LANGUAGE_CODE }}">
+    <div id="wrapper" role="application" class="{{ LANGUAGE_CODE }} h100 d-flex fd-col">
         <!--[if lt IE 10]>
-        <p id="top-browser-tip" class="top-bar fixed-top-bar">{% trans "We no longer support this version of IE. Please upgrade it to version 10 or above." %} <span id="top-browser-tip-close" class="top-bar-click">{% trans "Close" %}</span></p>
+        <p id="top-browser-tip" class="top-bar>{% trans "We no longer support this version of IE. Please upgrade it to version 10 or above." %} <span id="top-browser-tip-close" class="top-bar-click">{% trans "Close" %}</span></p>
         <![endif]-->
         {% block info_bar_message %}
         {% if request.user.is_authenticated and request.cur_note %}
-        <div id="info-bar" class="fixed-top-bar">
+        <div id="info-bar">
             <p id="info-bar-info">{{ request.cur_note.message|urlize }}</p>
             <span class="close sf2-icon-x1 op-icon" title="{% trans "Close" %}"></span>
         </div>
         {% endif %}
         {% endblock info_bar_message %}
 
-        <div id="header" role="banner" class="navbar navbar-fixed-top">
-            <div id="header-inner">
-                {% block notice_panel %}{% endblock %}
-                <a href="{{ SITE_ROOT }}" id="logo" class="hidden-sm-down fleft">
-                    {% if seacloud_mode %}
-                    <img src="{{ MEDIA_URL }}img/seacloud_logo.png?t=1398068110" title="Seacloud" alt="logo" width="186" height="31" />
-                    {% else %}
-                    <img src="{{ MEDIA_URL }}{{ logo_path }}" title="{{ site_title }}" alt="logo" width="{{logo_width}}" height="{{logo_height}}" />
-                    {% endif %}
-                </a>
-
-                <button class="sf2-icon-list-view side-nav-toggle hidden-md-up" title="{% trans "Side Nav Menu" %}" id="js-toggle-side-nav" aria-label="{% trans "Side Nav Menu" %}"></button>
-
-                <div class="fright">
-                    {% if has_file_search %}
-                        {% include 'snippets/search_form.html' %}
-                    {% endif %}
-
-                    <div id="notifications" class="fleft">
-                        <a href="#" class="no-deco" id="notice-icon" title="{% trans "Notifications" %}" aria-label="{% trans "Notifications" %}">
-                            <span class="sf2-icon-bell"></span>
-                            <span class="num hide">0</span>
-                        </a>
-                    </div>
-
-                    {% if show_logout_icon %}
-                    <a id="logout-icon" href="{{ SITE_ROOT }}accounts/logout/" class="no-deco fleft" title="{% trans "Log out" %}" aria-label="{% trans "Log out" %}"><span class="sf2-icon-logout"></span></a>
-                    {% endif %}
-
-                    <div id="account" class="fright">
-                        <a id="my-info" href="#" class="no-deco" aria-label="{% trans "View profile and more" %}">
-                            {% avatar request.user 36 %} <span class="icon-caret-down vam"></span>
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div id="main" class="clear container-fluid top-padding">
-            <div class="row initial-loading">
+        <div id="main" class="container-fluid w100 flex-auto ovhd d-flex fd-col"> {# 'ovhd' is for firefox #}
+            <div class="initial-loading">
                 <span class="loading-icon loading-tip"></span>
             </div>
 
-            <div class="row main-content hide">
-                <div class="side-nav side-tabnav home-side-nav col-md-3" id="side-nav" role="navigation"></div>
-                <div id="right-panel" class="col-md-9 col-md-offset-3">
-                    {% block right_panel %}{% endblock %}
+            <div class="row main-content flex-auto ovhd d-flex hide"> {# 'ovhd' is for firefox #}
+                <div class="side-panel col-md-3">
+                    <div class="side-panel-top panel-top">
+                        <a href="{{ SITE_ROOT }}" id="logo">
+                            {% if seacloud_mode %}
+                            <img src="{{ MEDIA_URL }}img/seacloud_logo.png?t=1398068110" title="Seacloud" alt="logo" width="186" height="31" />
+                            {% else %}
+                            <img src="{{ MEDIA_URL }}{{ logo_path }}" title="{{ site_title }}" alt="logo" width="{{logo_width}}" height="{{logo_height}}" />
+                            {% endif %}
+                        </a>
+                        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf2-icon-x1 sf-popover-close side-panel-close op-icon hidden-md-up js-close"></a>
+                    </div>
+                    <div id="side-nav" class="home-side-nav" role="navigation"></div> {# #side-nav: to be compatible with old code #}
+                </div>
+
+                <div class="col-md-9 main-panel flex-auto ovhd">
+                    <div class="main-panel-top panel-top">
+                        <span class="sf2-icon-list-view side-nav-toggle hidden-md-up" title="{% trans "Side Nav Menu" %}" id="js-toggle-side-nav" aria-label="{% trans "Side Nav Menu" %}"></span>
+                        {# place for '<div class="cur-view-toolbar" id=""></div>' #}
+                        <div class="common-toolbar">
+                            {% if has_file_search %}
+                                {% include 'snippets/search_form.html' %}
+                            {% endif %}
+
+                            <div id="notifications">
+                                <a href="#" class="no-deco" id="notice-icon" title="{% trans "Notifications" %}" aria-label="{% trans "Notifications" %}">
+                                    <span class="sf2-icon-bell"></span>
+                                    <span class="num hide">0</span>
+                                </a>
+                            </div>
+
+                            {% if show_logout_icon %}
+                            <a id="logout-icon" href="{{ SITE_ROOT }}accounts/logout/" class="no-deco" title="{% trans "Log out" %}" aria-label="{% trans "Log out" %}"><span class="sf2-icon-logout"></span></a>
+                            {% endif %}
+
+                            <div id="account">
+                                <a id="my-info" href="#" class="account-toggle no-deco hidden-sm-down" aria-label="{% trans "View profile and more" %}">
+                                    {% avatar request.user 36 %} <span class="icon-caret-down vam"></span>
+                                </a>
+                                <span class="account-toggle icon-ellipsis-vertical mobile-icon hidden-md-up" aria-label="{% trans "View profile and more" %}"></span>
+                            </div>
+                        </div>
+                    </div>
+
+                    {# place for '<div class="main-panel-main" id=""></div>' #}
                 </div>
             </div>
+        </div> {# #main #}
 
-            <div id="confirm-popup" class="hide">
-                <div id="confirm-con"></div>
-                <button id="confirm-yes">{% trans "Yes"%}</button>
-                <button class="simplemodal-close">{% trans "No"%}</button>
-            </div>
+        <div id="confirm-popup" class="hide">
+            <div id="confirm-con"></div>
+            <button id="confirm-yes">{% trans "Yes"%}</button>
+            <button class="simplemodal-close">{% trans "No"%}</button>
+        </div>
 
-            <div id="guide-for-new" class="hide">
-                <span class="icon-lightbulb fleft" aria-hidden="true"></span>
-                <div class="txt">
-                    <h3 id="dialogTitle">{% blocktrans with site_name=site_name %}Welcome to {{site_name}}{% endblocktrans %}</h3>
-                    {% if user.permissions.can_add_repo %}
-                    <p>{% blocktrans with site_name=site_name %}{{site_name}} 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.{% endblocktrans %}</p>
-                    {% else %}
-                    <p>{% blocktrans with site_name=site_name %}{{site_name}} 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.{% endblocktrans %}</p>
-                    {% endif %}
-                    <button class="simplemodal-close" style="margin:8px 0 0 0;">{% trans "Close" %}</button>
-                </div>
+        <div id="guide-for-new" class="hide">
+            <span class="icon-lightbulb fleft" aria-hidden="true"></span>
+            <div class="txt">
+                <h3 id="dialogTitle">{% blocktrans with site_name=site_name %}Welcome to {{site_name}}{% endblocktrans %}</h3>
+                {% if user.permissions.can_add_repo %}
+                <p>{% blocktrans with site_name=site_name %}{{site_name}} 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.{% endblocktrans %}</p>
+                {% else %}
+                <p>{% blocktrans with site_name=site_name %}{{site_name}} 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.{% endblocktrans %}</p>
+                {% endif %}
+                <button class="simplemodal-close" style="margin:8px 0 0 0;">{% trans "Close" %}</button>
             </div>
         </div>
 
diff --git a/seahub/templates/download.html b/seahub/templates/download.html
index 82b1e39636..7455c6290e 100644
--- a/seahub/templates/download.html
+++ b/seahub/templates/download.html
@@ -1,15 +1,19 @@
-{% extends "base.html" %}
+{% extends "base_wide_page.html" %}
 {% load i18n %}
 
 {% block sub_title %}{% trans "Download" %} - {% endblock %}
 
-{% block main_panel %}
-<div class="article">
+{% block extra_style %}
+<style type="text/css">
+#main p { font-size:14px; }
+</style>
+{% endblock %}
+
+{% block wide_page_content %}
     {% if LANGUAGE_CODE == 'zh-cn' %}
     <p>你可以从 Seafile 的<a href="http://seafile.com/download/">官方下载页面</a>下载 Windows，Mac 以及 Linux 的客户端。</p>
     {% else %}
     <p>You can download Seafile desktop client for Windows, Mac and Linux from Seafile's <a href="http://seafile.com/en/download/">official download page</a>.</p>
     {% endif %}
-</div>
 {% endblock %}
 
diff --git a/seahub/templates/file_edit.html b/seahub/templates/file_edit.html
index 98af977a62..30305214e5 100644
--- a/seahub/templates/file_edit.html
+++ b/seahub/templates/file_edit.html
@@ -83,8 +83,6 @@
 </style>
 {% endblock %}
 
-{% block main_css_class %}{% endblock %}
-
 {% block main_panel %}
     <div id="path-op" class="ovhd">
          <p class="path fleft">
diff --git a/seahub/templates/home_base.html b/seahub/templates/home_base.html
index 00fcd23100..a0c8fcf6b3 100644
--- a/seahub/templates/home_base.html
+++ b/seahub/templates/home_base.html
@@ -1,8 +1,10 @@
 {% extends "base.html" %}
 {% load i18n %}
 
+{% block main_class %}d-flex ovhd{% endblock %}
+
 {% block main_content %}
-<div class="row">
+<div class="row flex-1 d-flex">
     <div id="side-nav" class="side-nav side-tabnav col-md-3" >
         <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf2-icon-x1 sf-popover-close op-icon hidden-md-up js-close-side-nav fright"></a>
         {% block left_panel %}
@@ -65,7 +67,7 @@
         {% endblock %}
     </div>
 
-    <div id="right-panel" class="col-md-9 col-md-offset-3">
+    <div id="right-panel" class="col-md-9 ov-auto flex-1">
         {% block right_panel %}{% endblock %}
     </div>
 
diff --git a/seahub/templates/js/dir-view.html b/seahub/templates/js/dir-view.html
deleted file mode 100644
index 75ece22d00..0000000000
--- a/seahub/templates/js/dir-view.html
+++ /dev/null
@@ -1,17 +0,0 @@
-{% load i18n %}
-<script type="text/template" id="dir-view-tmpl">
-    <div class="repo-file-list-topbar">
-        <p class="path-bar"></p>
-        <div class="repo-op"></div>
-    </div>
-    <div class="js-dir-content">
-        <table class="repo-file-list">
-            <thead></thead>
-            <tbody></tbody>
-        </table>
-        <ul class="grid-view hide">
-        </ul>
-    </div>
-    <span class="loading-icon loading-tip"></span>
-    <p class="error hide"></p>
-</script>
diff --git a/seahub/templates/js/templates.html b/seahub/templates/js/templates.html
index ca1f16a1d0..8b19fc4108 100644
--- a/seahub/templates/js/templates.html
+++ b/seahub/templates/js/templates.html
@@ -1,4 +1,16 @@
 {% load avatar_tags i18n %}
+
+<script type="text/template" id="my-repos-toolbar-tmpl">
+    <button class="repo-create btn-white hidden-sm-down"><span aria-hidden="true" class="icon-plus-square add vam"></span><span class="vam">{% trans "New Library" %}</span></button>
+    <span aria-label="{% trans "New Library" %}" class="hidden-md-up repo-create icon-plus-square mobile-icon"></span>
+    <div id="my-libs-more-op" class="sf-dropdown sf-dropdown-inline hidden-sm-down">
+        <button class="sf-dropdown-toggle btn-white more-op-btn-white">{% trans "More" %}</button>
+        <ul class="sf-dropdown-menu hide">
+            <li><a href="#my-libs/deleted/">{% trans "Deleted Libraries" %}</a></li>
+        </ul>
+    </div>
+</script>
+
 <script type="text/template" id="create-repo-tmpl">
     <form id="repo-create-form" action="" method="post">{% csrf_token %}
         <h3 id="dialogTitle">{% trans "New Library"%}</h3>
@@ -129,14 +141,14 @@
 </script>
 
 <script type="text/template" id="repo-details-tmpl">
-    <div class="right-side-panel-hd ovhd">
-        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf-popover-close js-close sf2-icon-x1 op-icon fleft"></a>
-        <h3 class="right-side-panel-title">
+    <div class="details-panel-hd">
+        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf-popover-close js-close sf2-icon-x1 op-icon"></a>
+        <h3 class="details-panel-title">
             <img src="<%= icon_url %>" width="24" alt="" class="vam" />
             <span class="vam ellipsis details-panel-item-name" title="<%- name %>"><%- name %></span>
         </h3>
     </div>
-    <div class="right-side-panel-con">
+    <div class="details-panel-con">
         <div class="details-panel-img-container image-file-view">
             <img src="<%= big_icon_url %>" width="96" alt="" />
         </div>
@@ -190,6 +202,22 @@
     </td>
 </script>
 
+<script type="text/template" id="groups-toolbar-tmpl">
+    {% if user.permissions.can_add_group %}
+    <button id="add-group" class="btn-white hidden-sm-down"><span aria-hidden="true" class="icon-plus-square add vam"></span><span class="vam">{% trans "New Group" %}</span></button>
+    <span id="add-group" class="icon-plus-square hidden-md-up mobile-icon" aria-label="{% trans "New Group" %}"></span>
+    {% endif %}
+</script>
+<script type="text/template" id="add-group-form-tmpl">
+    <form id="group-add-form" action="" method="post" class="hide">{% csrf_token %}
+        <h3 id="dialogTitle">{% trans "New Group" %}</h3>
+        <label for="group-name">{% trans "Name" %}</label><br />
+        <input type="text" name="group_name" value="" class="input" id="group-name" /><br />
+        <p class="error hide"></p>
+        <input type="submit" class="submit" value="{% trans "Submit" %}" />
+    </form>
+</script>
+
 <script type="text/template" id="group-repo-tmpl">
     <td>
         <img src="<%= icon_url %>" title="<%= icon_title %>" alt="<%= icon_title %>" width="24" />
@@ -249,6 +277,19 @@
     </td>
 </script>
 
+
+<script type="text/template" id="org-repos-toolbar-tmpl">
+{% if can_add_pub_repo %}
+    <div class="sf-dropdown js-add-pub-lib-dropdown">
+        <button class="btn-white sf-dropdown-toggle hidden-sm-down"><span aria-hidden="true" class="icon-plus-square add vam"></span><span class="vam">{% trans "Add Library"%}</span></button>
+        <span aria-label="{% trans "Add Library" %}" class="hidden-md-up sf-dropdown-toggle icon-plus-square mobile-icon"></span>
+        <ul class="sf-dropdown-menu hide">
+            <li><a class="op share-existing" href="#">{% trans "Share existing libraries" %}</a></li>
+            <li><a class="op create-new" href="#">{% trans "Create a new library" %}</a></li>
+        </ul>
+    </div>
+    {% endif %}
+</script>
 <script type="text/template" id="organization-repo-tmpl">
     <td>
         <img src="<%= icon_url %>" title="<%= icon_title %>" alt="<%= icon_title %>" width="24" />
@@ -280,32 +321,40 @@
     </td>
 </script>
 
-<script type="text/template" id="dir-op-bar-tmpl">
+<script type="text/template" id="dir-view-toolbar-tmpl">
     <% if (user_perm == 'rw') { %>
     <div id="multi-dirents-op" class="hide">
-        <button id="mv-dirents" title="{% trans 'Move' %}" class="op-btn sf2-icon-move op-icon"></button>
-        <button id="cp-dirents" title="{% trans 'Copy' %}" class="op-btn sf2-icon-copy op-icon"></button>
-        <button id="del-dirents" title="{% trans 'Delete' %}" class="op-btn sf2-icon-delete op-icon"></button>
-        <button id="download-dirents" title="{% trans 'Download' %}" class="op-btn sf2-icon-download op-icon"></button>
+        <button id="mv-dirents" title="{% trans 'Move' %}" class="op-btn sf2-icon-move op-icon btn-white hidden-sm-down"></button>
+        <span id="mv-dirents" aria-label="{% trans 'Move' %}" class="sf2-icon-move mobile-icon hidden-md-up"></span>
+        <button id="cp-dirents" title="{% trans 'Copy' %}" class="op-btn sf2-icon-copy op-icon btn-white hidden-sm-down"></button>
+        <span id="cp-dirents" aria-label="{% trans 'Copy' %}" class="sf2-icon-copy mobile-icon hidden-md-up"></span>
+        <button id="del-dirents" title="{% trans 'Delete' %}" class="op-btn sf2-icon-delete op-icon btn-white hidden-sm-down"></button>
+        <span id="del-dirents" aria-label="{% trans 'Delete' %}" class="sf2-icon-delete mobile-icon hidden-md-up"></span>
+        <button id="download-dirents" title="{% trans 'Download' %}" class="op-btn sf2-icon-download op-icon btn-white hidden-sm-down"></button>
+        <span id="download-dirents" aria-label="{% trans 'Download' %}" class="sf2-icon-download mobile-icon hidden-md-up"></span>
     </div>
     <% } %>
     <% if (!encrypted && user_perm == 'r') { %>
     <div id="multi-dirents-op" class="hide">
-        <button id="cp-dirents" title="{% trans 'Copy' %}" class="op-btn sf2-icon-copy op-icon"></button>
-        <button id="download-dirents" title="{% trans 'Download' %}" class="op-btn sf2-icon-download op-icon"></button>
+        <button id="cp-dirents" title="{% trans 'Copy' %}" class="op-btn sf2-icon-copy op-icon btn-white"></button>
+        <span id="cp-dirents" aria-label="{% trans 'Copy' %}" class="sf2-icon-copy mobile-icon hidden-md-up"></span>
+        <button id="download-dirents" title="{% trans 'Download' %}" class="op-btn sf2-icon-download op-icon btn-white"></button>
+        <span id="download-dirents" aria-label="{% trans 'Download' %}" class="sf2-icon-download mobile-icon hidden-md-up"></span>
     </div>
     <% } %>
 
-    <div id="cur-dir-ops" class="inline-block">
+    <div id="cur-dir-ops">
     <% if (user_perm == 'rw') { %>
     <% if (!no_quota) { %>
     <div id="basic-upload" class="inline-block">
-        <button class="op-btn basic-upload-btn" >{% trans "Upload" %}</button>
+        <button class="basic-upload-btn btn-white hidden-sm-down">{% trans "Upload" %}</button>
+        <span class="basic-upload-btn icon-upload mobile-icon hidden-md-up" aria-label="{% trans "Upload" %}"></span>
         <input id="basic-upload-input" class="hide" type="file" name="file" multiple />
     </div>
-    <% if (enable_upload_folder) { %>
+    <% if (app.pageOptions.enable_upload_folder) { %>
     <div id="advanced-upload" class="sf-dropdown sf-dropdown-inline">
-        <button class="sf-dropdown-toggle op-btn">{% trans "Upload" %}</button>
+        <button class="sf-dropdown-toggle btn-white hidden-sm-down">{% trans "Upload" %}</button>
+        <span class="sf-dropdown-toggle icon-upload mobile-icon hidden-md-up" aria-label="{% trans "Upload" %}"></span>
         <ul id="upload-menu" class="sf-dropdown-menu hide">
             <li>
                 <a class="op advanced-upload-file" href="#">{% trans "Upload Files" %}</a>
@@ -319,10 +368,11 @@
     </div>
     <% } %>
     <% } else { %>
-    <button class="op-btn btn-disabled" disabled="disabled" title="{% trans "Out of quota" %}">{% trans "Upload" %}</button>
+    <button class="op-btn btn-disabled hidden-sm-down" disabled="disabled" title="{% trans "Out of quota" %}">{% trans "Upload" %}</button>
     <% } %>
     <div id="add-new" class="sf-dropdown sf-dropdown-inline">
-        <button class="sf-dropdown-toggle op-btn">{% trans "New" %}</button>
+        <button class="sf-dropdown-toggle btn-white hidden-sm-down">{% trans "New" %}</button>
+        <span class="icon-plus-square sf-dropdown-toggle hidden-md-up mobile-icon" aria-label="{% trans "New" %}"></span>
         <div class="sf-dropdown-menu hide">
             <ul>
                 <li><a id="add-new-dir" class="op" href="#">{% trans "New Folder" %}</a></li>
@@ -339,31 +389,29 @@
     </div>
     <% } %>
 
-    <% if (!encrypted && (can_generate_share_link || can_generate_upload_link || is_repo_owner)) { %>
-    <button class="op-btn" id="share-cur-dir">{% trans "Share" %}</button>
+    <% if (!encrypted && (app.pageOptions.can_generate_share_link || app.pageOptions.can_generate_upload_link || is_repo_owner)) { %>
+    <button class="btn-white hidden-sm-down" id="share-cur-dir">{% trans "Share" %}</button>
+    <span class="sf2-icon-share hidden-md-up mobile-icon" id="share-cur-dir" aria-label="{% trans "Share" %}"></span>
     <% } %>
     </div><!-- div#cur-dir-ops ends here -->
 
-    <div class="repo-op-misc">
-        <div class="switch-mode">
-            <button class="list-view-icon-btn sf2-icon-list-view <% if (mode == 'list') { %>active<% } %>" title="{% trans "List" %}" id="js-switch-list-view" aria-label="{% trans "list view" %}"></button><button class="grid-view-icon-btn sf2-icon-grid-view <% if (mode == 'grid') { %>active<% } %>" title="{% trans "Grid" %}" id="js-switch-grid-view" aria-label="{% trans "grid view" %}"></button>
-        </div>
-
-        <div class="trash-history">
-        <% if (path == '/') { %>
-            <% if (user_perm == 'rw') { %>
-            <a class="op-link sf2-icon-trash" href="<%= site_root %>repo/recycle/<%- repo_id %>/?referer=<% print(encodeURIComponent(location.href)); %>" title="{% trans 'Trash' %}" aria-label="{% trans "Trash" %}"></a>
-            <% } %>
-            <a class="op-link sf2-icon-history" href="<%= site_root %>repo/history/<%- repo_id %>/?referer=<% print(encodeURIComponent(location.href)); %>" title="{% trans 'History' %}" aria-label="{% trans "History" %}"></a>
-        <% } else { %>
-            <% if (user_perm == 'rw') { %>
-            <a class="op-link sf2-icon-trash" href="<%= site_root %>dir/recycle/<%- repo_id %>/?dir_path=<% print(encodeURIComponent(path)); %>&referer=<% print(encodeURIComponent(location.href)); %>" title="{% trans 'Trash' %}"></a>
-            <% } %>
-        <% } %>
-        </div>
+    <div class="switch-mode hidden-sm-down">
+        <button class="list-view-icon-btn sf2-icon-list-view <% if (mode == 'list') { %>active<% } %>" title="{% trans "List" %}" id="js-switch-list-view" aria-label="{% trans "list view" %}"></button><button class="grid-view-icon-btn sf2-icon-grid-view <% if (mode == 'grid') { %>active<% } %>" title="{% trans "Grid" %}" id="js-switch-grid-view" aria-label="{% trans "grid view" %}"></button>
     </div>
 </script>
-<script type="text/template" id="dir-path-bar-tmpl">
+<script type="text/template" id="dir-view-toolbar2-tmpl">
+    <% if (path == '/') { %>
+        <% if (user_perm == 'rw') { %>
+        <a class="op-link sf2-icon-trash" href="<%= site_root %>repo/recycle/<%- repo_id %>/?referer=<% print(encodeURIComponent(location.href)); %>" title="{% trans 'Trash' %}" aria-label="{% trans "Trash" %}"></a>
+        <% } %>
+        <a class="op-link sf2-icon-history" href="<%= site_root %>repo/history/<%- repo_id %>/?referer=<% print(encodeURIComponent(location.href)); %>" title="{% trans 'History' %}" aria-label="{% trans "History" %}"></a>
+    <% } else { %>
+        <% if (user_perm == 'rw') { %>
+        <a class="op-link sf2-icon-trash" href="<%= site_root %>dir/recycle/<%- repo_id %>/?dir_path=<% print(encodeURIComponent(path)); %>&referer=<% print(encodeURIComponent(location.href)); %>" title="{% trans 'Trash' %}"></a>
+        <% } %>
+    <% } %>
+</script>
+<script type="text/template" id="dir-view-path-tmpl">
     <% if (context == 'group') { %>
         <a href="#groups/" class="path-link normal">{% trans "Groups" %}</a>
         <span class="path-split">/</span>
@@ -388,7 +436,7 @@
         <%- path_list[i] %>
     <% } %>
 </script>
-<script type="text/template" id="dirents-hd-tmpl">
+<script type="text/template" id="dir-view-thead-tmpl">
     <tr>
         <th width="3%" class="select">
             <input type="checkbox" class="vam" />
@@ -401,7 +449,7 @@
         <th width="13%" class="dirent-update"><a class="table-sort-op by-time" href="#">{% trans "Last Update" %} <span class="sort-icon icon-caret-down hide" aria-hidden="true"></span></a></th>
     </tr>
 </script>
-<script type="text/template" id="dirents-hd-mobile-tmpl">
+<script type="text/template" id="dir-view-thead-mobile-tmpl">
     <tr>
         <th width="4%" class="select">
             <input type="checkbox" class="vam" />
@@ -882,14 +930,14 @@
 </script>
 
 <script type="text/template" id="dirent-details-tmpl">
-    <div class="right-side-panel-hd ovhd">
-        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf-popover-close js-close sf2-icon-x1 op-icon fleft"></a>
-        <h3 class="right-side-panel-title">
+    <div class="details-panel-hd">
+        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf-popover-close js-close sf2-icon-x1 op-icon"></a>
+        <h3 class="details-panel-title">
             <img src="<%= icon_url %>" width="24" alt="" class="vam" />
             <span class="vam ellipsis details-panel-item-name" title="<%- dirent.obj_name %>"><%- dirent.obj_name %></span>
         </h3>
     </div>
-    <div class="right-side-panel-con">
+    <div class="details-panel-con">
         <div class="details-panel-img-container image-file-view">
             <span class="loading-icon"></span>
             <% if (thumbnail_url) { %>
@@ -1231,7 +1279,6 @@
 
 <script type="text/template" id="side-nav-tmpl">
     <div class="side-nav-con">
-    <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf2-icon-x1 sf-popover-close op-icon hidden-md-up js-close-side-nav fright"></a>
     <h3 class="hd">{% trans "Files" %}</h3>
     <ul class="side-tabnav-tabs">
         {% if user.permissions.can_add_repo %}
@@ -1348,7 +1395,7 @@
         </li>
     </ul>
     </div>
-    <div class="side-nav-footer ovhd" role="contentinfo">
+    <div class="side-nav-footer" role="contentinfo">
         {% include 'nav_footer.html' %}
     </div>
 </script>
@@ -1375,29 +1422,75 @@
     <input type="submit" value="{% trans "Submit"%}" class="submit" />
 </form>
 </script>
-<script type="text/template" id="group-top-tmpl">
-<p class="path-bar">
+
+<script type="text/template" id="group-toolbar-tmpl">
+    {% if user.permissions.can_add_repo %}
+    <button class="repo-create btn-white hidden-sm-down"><span class="icon-plus-square add vam"></span><span class="vam">{% trans "New Library" %}</span></button>
+    <span class="repo-create icon-plus-square mobile-icon hidden-md-up" aria-label="{% trans "New Library" %}"></span>
+    {% endif %}
+</script>
+<script type="text/template" id="group-path-tmpl">
     <a href="{% url 'group_list' %}" class="normal">{% trans "Groups" %}</a>
     <span class="path-split">/</span>
-    <%- name %>
-</p>
-<div class="hd ovhd">
-    {% if user.permissions.can_add_repo %}
-    <button class="repo-create btn-white fleft"><span class="icon-plus-square add vam"></span><span class="vam">{% trans "New Library" %}</span></button>
-    {% endif %}
-
-    <div class="fright">
-        <% if (app.pageOptions.enable_wiki) { %>
-        <% if (wiki_enabled) { %>
-            <a href="{{SITE_ROOT}}group/<%= id %>/wiki/" class="sf2-icon-wiki2 op-icon group-top-op-icon" title="{% trans "Wiki" %}" id="group-wiki-icon"></a>
-        <% } %>
-        <% } %>
-        <a href="#" class="sf2-icon-cog1 op-icon group-top-op-icon" title="{% trans "Settings" %}" id="group-settings-icon" aria-label="{% trans "Settings" %}"></a>
-        <a href="#" class="sf2-icon-user2 op-icon group-top-op-icon" title="{% trans "Members" %}" id="group-members-icon" aria-label="{% trans "Members" %}"></a>
-        <a href="#" class="sf2-icon-msgs2 op-icon group-top-op-icon" title="{% trans "Discussion" %}" id="group-discussions-icon" aria-label="{% trans "Discussion" %}"></a>
-    </div>
-</div>
+    <span class="group-name"><%- name %></span>
 </script>
+<script type="text/template" id="group-toolbar2-tmpl">
+    <% if (app.pageOptions.enable_wiki) { %>
+    <% if (wiki_enabled) { %>
+        <a href="{{SITE_ROOT}}group/<%= id %>/wiki/" class="sf2-icon-wiki2 op-icon group-top-op-icon" title="{% trans "Wiki" %}" id="group-wiki-icon"></a>
+    <% } %>
+    <% } %>
+    <a href="#" class="sf2-icon-cog1 op-icon group-top-op-icon" title="{% trans "Settings" %}" id="group-settings-icon" aria-label="{% trans "Settings" %}"></a>
+    <a href="#" class="sf2-icon-user2 op-icon group-top-op-icon" title="{% trans "Members" %}" id="group-members-icon" aria-label="{% trans "Members" %}"></a>
+    <a href="#" class="sf2-icon-msgs2 op-icon group-top-op-icon" title="{% trans "Discussion" %}" id="group-discussions-icon" aria-label="{% trans "Discussion" %}"></a>
+</script>
+
+<script type="text/template" id="group-discussions-tmpl">
+    <div class="comments-panel-hd">
+        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf-popover-close js-close sf2-icon-x1 op-icon"></a>
+        <h3 class="comments-panel-title">{% trans "Discussions" %}</h3>
+    </div>
+    <div class="comments-panel-con" id="group-discussions-con">
+        <div class="loading-icon loading-tip"></div>
+        <p class="load-more-discussion hide js-load-more">{% trans "More..." %}</p>
+        <ul id="group-discussion-list" class="hide"></ul>
+        <p class="no-discussion-tip hide">{% trans "No discussion in this group yet." %}</p>
+        <p class="error hide"></p>
+    </div>
+    <div class="comments-panel-footer">
+        <form action="" method="post" class="msg-form">
+            <img src="{% avatar_url request.user 64 %}" alt="" width="32" class="avatar-circle fleft" />
+            <div class="msg-body">
+                <textarea name="message" placeholder="{% trans "Add a discussion..." %}" class="msg-input"></textarea>
+                <button type="submit" class="submit msg-submit">{% trans "Submit" %}</button>
+            </div>
+        </form>
+    </div>
+</script>
+
+<script type="text/template" id="group-settings-tmpl">
+    <div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
+    <div class="sf-popover-hd ovhd">
+        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf-popover-close js-close sf2-icon-x1 op-icon fright"></a>
+        <h3 class="sf-popover-title">{% trans "Settings" %}</h3>
+    </div>
+    <div class="sf-popover-con">
+    </div>
+</script>
+
+<script type="text/template" id="group-members-tmpl">
+    <div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
+    <div class="sf-popover-hd ovhd">
+        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf-popover-close js-close sf2-icon-x1 op-icon fright"></a>
+        <h3 class="sf-popover-title">{% trans "Members" %}</h3>
+    </div>
+    <div class="sf-popover-con">
+        <div class="loading-icon loading-tip"></div>
+        <ul id="group-member-list" class="hide"></ul>
+        <p class="error hide"></p>
+    </div>
+</script>
+
 <script type="text/template" id="folder-perm-item-tmpl">
     <% if (for_user) { %>
     <td><a href="{{ SITE_ROOT }}profile/<% print(encodeURIComponent(user_email)); %>/" target="_blank"><%- user_name %></a></td>
@@ -1579,7 +1672,7 @@
 </script>
 
 
-<script type="text/template" id="my-repos-hd-tmpl">
+<script type="text/template" id="my-repos-thead-tmpl">
     <tr>
         <th width="4%"><span class="sr-only">{% trans "Library Type" %}</span><!--icon--></th>
         <th width="42%"><a class="table-sort-op by-name" href="#">{% trans "Name" %} <span class="sort-icon icon-caret-down hide"></span></a></th>
@@ -1588,7 +1681,7 @@
         <th width="20%"><a class="table-sort-op by-time" href="#">{% trans "Last Update" %} <span class="sort-icon icon-caret-up"></span></a></th>
     </tr>
 </script>
-<script type="text/template" id="my-repos-hd-mobile-tmpl">
+<script type="text/template" id="my-repos-thead-mobile-tmpl">
     <tr>
         <th width="4%"><span class="sr-only">{% trans "Library Type" %}</span><!--icon--></th>
         <th width="92%">
@@ -1618,8 +1711,8 @@
 <script type="text/template" id="shared-repos-hd-tmpl">
     <tr>
         <th width="4%"><span class="sr-only">{% trans "Library Type" %}</span><!--icon--></th>
-        <th width="40%"><a class="table-sort-op by-name" href="#">{% trans "Name" %} <span class="sort-icon icon-caret-down hide"></span></a></th>
-        <th width="8%"><span class="sr-only">{% trans "Actions" %}</span><!--op--></th>
+        <th width="38%"><a class="table-sort-op by-name" href="#">{% trans "Name" %} <span class="sort-icon icon-caret-down hide"></span></a></th>
+        <th width="10%"><span class="sr-only">{% trans "Actions" %}</span><!--op--></th>
         <th width="14%">{% trans "Size" %}</th>
         <th width="18%"><a class="table-sort-op by-time" href="#">{% trans "Last Update" %} <span class="sort-icon icon-caret-up"></span></a></th>
         <th width="16%">{% trans "Owner" %}</th>
@@ -1762,6 +1855,8 @@
     <p class="empty-tip alc">{% trans "No library is shared to this group" %}</p>
     <% } %>
 </script>
+
+
 <script type="text/template" id="group-member-tmpl">
     <img src="<%= avatar_url %>" alt="" width="32" class="avatar-circle fleft" />
     <div class="txt">
@@ -2206,7 +2301,10 @@
 </script>
 
 <script type="text/template" id="share-admin-repos-tmpl">
-    <h3 class="hd">{% trans "Libraries" %}</h3>
+<div class="cur-view-path">
+    <h3>{% trans "Libraries" %}</h3>
+</div>
+<div class="cur-view-main-con">
     <span class="loading-icon loading-tip"></span>
     <table class="hide">
         <thead>
@@ -2214,8 +2312,8 @@
                 <th width="4%"><!--icon--></th>
                 <th width="33%"><a class="table-sort-op by-name" href="#">{% trans "Name" %} <span class="sort-icon icon-caret-down hide"></span></a></th>
                 <th width="30%">{% trans "Share To" %}</th>
-                <th width="27%">{% trans "Permission" %}</th>
-                <th width="6%"></th>
+                <th width="29%">{% trans "Permission" %}</th>
+                <th width="4%"></th>
             </tr>
         </thead>
         <tbody>
@@ -2226,6 +2324,7 @@
         <p>{% trans "You can share libraries with your friends and colleagues by clicking the share icon of your own libraries in your home page or creating a new library in groups you are in." %}</p>
     </div>
     <p class="error error-tip hide"></p>
+</div>
 </script>
 
 <script type="text/template" id="share-admin-repo-tmpl">
@@ -2323,7 +2422,10 @@
 </script>
 
 <script type="text/template" id="share-admin-folders-tmpl">
-    <h3 class="hd">{% trans "Folders" %}</h3>
+<div class="cur-view-path">
+    <h3>{% trans "Folders" %}</h3>
+</div>
+<div class="cur-view-main-con">
     <span class="loading-icon loading-tip"></span>
     <table class="hide">
         <thead>
@@ -2331,8 +2433,8 @@
                 <th width="4%"><!--icon--></th>
                 <th width="33%"><a class="table-sort-op by-name" href="#">{% trans "Name" %} <span class="sort-icon icon-caret-down hide"></span></a></th>
                 <th width="30%">{% trans "Share To" %}</th>
-                <th width="27%">{% trans "Permission" %}</th>
-                <th width="6%"></th>
+                <th width="29%">{% trans "Permission" %}</th>
+                <th width="4%"></th>
             </tr>
         </thead>
         <tbody>
@@ -2343,21 +2445,23 @@
         <p>{% trans "You can share a single folder with a registered user if you don't want to share a whole library." %}</p>
     </div>
     <p class="error error-tip hide"></p>
+</div>
 </script>
 
 <script type="text/template" id="share-admin-download-links-tmpl">
-    <div class="hd ovhd">
-        <ul class="tab-tabs-nav fleft">
-            <li class="tab ui-state-active">
-                <a href="#share-admin-share-links/" class="a">{% trans "Download Links" %}</a>
-            </li>
-            <% if (can_generate_upload_link) { %>
-            <li class="tab">
-                <a href="#share-admin-upload-links/" class="a">{% trans "Upload Links" %}</a>
-            </li>
-            <% } %>
-        </ul>
-    </div>
+<div class="cur-view-path ovhd">
+    <ul class="tab-tabs-nav fleft">
+        <li class="tab ui-state-active">
+            <a href="#share-admin-share-links/" class="a">{% trans "Download Links" %}</a>
+        </li>
+        <% if (app.pageOptions.can_generate_upload_link) { %>
+        <li class="tab">
+            <a href="#share-admin-upload-links/" class="a">{% trans "Upload Links" %}</a>
+        </li>
+        <% } %>
+    </ul>
+</div>
+<div class="cur-view-main-con">
     <span class="loading-icon loading-tip"></span>
     <table class="hide">
         <thead>
@@ -2378,21 +2482,23 @@
         <p>{% trans "You can generate a download link for a folder or a file. Anyone who receives this link can view the folder or the file online." %}</p>
     </div>
     <p class="error error-tip hide"></p>
+</div>
 </script>
 
 <script type="text/template" id="share-admin-upload-links-tmpl">
-    <div class="hd ovhd">
-        <ul class="tab-tabs-nav fleft">
-            <% if (can_generate_share_link) { %>
-            <li class="tab">
-                <a href="#share-admin-share-links/" class="a">{% trans "Download Links" %}</a>
-            </li>
-            <% } %>
-            <li class="tab ui-state-active">
-                <a href="#share-admin-upload-links/" class="a">{% trans "Upload Links" %}</a>
-            </li>
-        </ul>
-    </div>
+<div class="cur-view-path ovhd">
+    <ul class="tab-tabs-nav fleft">
+        <% if (app.pageOptions.can_generate_share_link) { %>
+        <li class="tab">
+            <a href="#share-admin-share-links/" class="a">{% trans "Download Links" %}</a>
+        </li>
+        <% } %>
+        <li class="tab ui-state-active">
+            <a href="#share-admin-upload-links/" class="a">{% trans "Upload Links" %}</a>
+        </li>
+    </ul>
+</div>
+<div class="cur-view-main-con">
     <span class="loading-icon loading-tip"></span>
     <table class="hide">
         <thead>
@@ -2412,6 +2518,7 @@
         <p>{% trans "You can generate an upload link from any folder. Anyone who receives this link can upload files to this folder." %}</p>
     </div>
     <p class="error error-tip hide"></p>
+</div>
 </script>
 
 <script type="text/template" id="share-admin-download-link-tmpl">
@@ -2452,11 +2559,15 @@
     </div>
 </script>
 
+<script type="text/template" id="invitations-toolbar-tmpl">
+<button id="invite-people" class="btn-white hidden-sm-down"><span aria-hidden="true" class="icon-plus-square add vam"></span><span class="vam">{% trans "Invite People" %}</span></button>
+<span id="invite-people" class="hidden-md-up icon-plus-square mobile-icon" aria-label="{% trans "Invite People" %}"></span>
+</script>
 <script type="text/template" id="invitations-tmpl">
-    <div class="hd ovhd">
-        <h3 class="fleft">{% trans "Invite People" %}</h3>
-        <button id="invite-people" class="btn-white fright"><span aria-hidden="true" class="icon-plus-square add vam"></span><span class="vam">{% trans "Invite People" %}</span></button>
-    </div>
+<div class="cur-view-path">
+    <h3>{% trans "Invite People" %}</h3>
+</div>
+<div class="cur-view-main-con">
     <span class="loading-icon loading-tip"></span>
     <table class="hide">
         <thead>
@@ -2475,6 +2586,7 @@
         <h2 class="alc">{% trans "You have not invited any people." %}</h2>
     </div>
     <p class="error error-tip hide"></p>
+</div>
 </script>
 
 <script type="text/template" id="invitation-item-tmpl">
@@ -2503,20 +2615,20 @@
 
 {# file comment #}
 <script type="text/template" id="file-comment-panel-tmpl">
-    <div class="right-side-panel-hd file-discussions-hd ovhd">
-        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf-popover-close js-close sf2-icon-x1 op-icon fleft"></a>
-        <h3 class="right-side-panel-title">
+    <div class="comments-panel-hd">
+        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf-popover-close js-close sf2-icon-x1 op-icon"></a>
+        <h3 class="comments-panel-title">
             <img src="<%= icon_url %>" width="24" alt="" class="vam" />
             <span class="vam ellipsis file-comment-panel-item-name" title="<%- file_name %>"><%- file_name %></span>
         </h3>
     </div>
-    <div class="right-side-panel-con file-discussions-con">
+    <div class="comments-panel-con file-discussions-con">
         <div class="loading-icon loading-tip"></div>
         <ul class="file-discussion-list hide"></ul>
         <p class="no-discussion-tip hide">{% trans "No comment yet." %}</p>
         <p class="error hide"></p>
     </div>
-    <div class="right-side-panel-footer file-discussions-footer">
+    <div class="comments-panel-footer">
         <form action="" method="post" class="msg-form">
             <img src="{% avatar_url request.user 64 %}" alt="" width="32" class="avatar-circle fleft" />
             <div class="msg-body">
diff --git a/seahub/templates/libraries.html b/seahub/templates/libraries.html
index e0d0088d8f..e1cfe0fc79 100644
--- a/seahub/templates/libraries.html
+++ b/seahub/templates/libraries.html
@@ -3,43 +3,44 @@
 {% load staticfiles %}
 
 {% block sub_title %}{% trans "Libraries" %} - {% endblock %}
-
-{% block right_panel %}
+{% block extra_style %}
+<style type="text/css">
+html,body {
+    height:100%;
+    overflow:hidden;
+}
+</style>
 {% endblock %}
 
 {% block extra_script %}
 <script type="text/template" id="my-own-repos-tmpl">
-    <div class="hd">
-        <h3 class="fleft">{% trans "My Libraries" %}</h3>
-        <div class="fright">
-            <button class="repo-create btn-white"><span aria-hidden="true" class="icon-plus-square add vam"></span><span class="vam">{% trans "New Library" %}</span></button>
-
-            <div id="my-libs-more-op" class="sf-dropdown sf-dropdown-inline">
-                <button class="sf-dropdown-toggle btn-white more-op-btn-white">{% trans "More" %}</button>
-                <ul class="sf-dropdown-menu hide">
-                    <li><a href="#my-libs/deleted/">{% trans "Deleted Libraries" %}</a></li>
-                </ul>
-            </div>
+<div class="cur-view-main"> {# .cur-view-main is only for view with side panel #}
+    <div class="cur-view-path">
+        <h3>{% trans "My Libraries" %}</h3>
+    </div>
+    <div class="cur-view-main-con">
+        <table class="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>
     </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>
+</div>
+{# <div class="cur-view-side"></div> #}
 </script>
 
 <script type="text/template" id="my-deleted-repos-tmpl">
-    <p class="path-bar">
-        <a href="#my-libs/" class="normal">{% trans "My Libraries" %}</a>
-        <span class="path-split">/</span>
-        <span>{% trans "Deleted Libraries" %}</span>
-    </p>
+<div class="cur-view-path cur-view-path-path">
+    <a href="#my-libs/" class="normal">{% trans "My Libraries" %}</a>
+    <span class="path-split">/</span>
+    <span>{% trans "Deleted Libraries" %}</span>
+</div>
+<div class="cur-view-main-con">
     <p class="tip">{% trans "Tip: libraries deleted 30 days ago will be cleaned automatically."%}</p>
     <table class="my-deleted-repos-table hide">
         <thead></thead>
@@ -50,12 +51,16 @@
     </div>
     <span class="loading-icon loading-tip"></span>
     <p class="error error-tip hide"></p>
+</div>
 </script>
 
 
 <script type="text/template" id="repos-shared-to-me-tmpl">
-    <h3 class="hd">{% trans "Shared with me" %}</h3>
+<div class="cur-view-path">
+    <h3>{% trans "Shared with me" %}</h3>
+</div>
 
+<div class="cur-view-main-con">
     <span class="loading-icon loading-tip"></span>
     <table class="hide">
         <thead></thead>
@@ -66,22 +71,15 @@
         <p>{% blocktrans %}No libraries have been shared directly with you. You can find more shared libraries at "Shared with groups".{% endblocktrans %}</p>
     </div>
     <p class="error error-tip hide"></p>
+</div>
 </script>
 
 <script type="text/template" id="organization-repos-tmpl">
-    <div class="hd">{# no 'ovhd' as there is a .dropdown-menu in it #}
-        <h3 class="fleft">{% trans "Shared with all" %}</h3>
-        {% if can_add_pub_repo %}
-        <div class="fright sf-dropdown js-add-pub-lib-dropdown">
-            <button class="btn-white sf-dropdown-toggle"><span aria-hidden="true" class="icon-plus-square add vam"></span><span class="vam">{% trans "Add Library"%}</span></button>
-            <ul class="sf-dropdown-menu hide">
-                <li><a class="op share-existing" href="#">{% trans "Share existing libraries" %}</a></li>
-                <li><a class="op create-new" href="#">{% trans "Create a new library" %}</a></li>
-            </ul>
-        </div>
-        {% endif %}
-    </div>
+<div class="cur-view-path">
+    <h3>{% trans "Shared with all" %}</h3>
+</div>
 
+<div class="cur-view-main-con">
     <span class="loading-icon loading-tip"></span>
     <table class="repo-list hide">
         <thead></thead>
@@ -92,16 +90,14 @@
         <p>{% blocktrans %}You can create a public library by clicking the "New Library" button, others can view and download this library.{% endblocktrans %}</p>
     </div>
     <p class="error error-tip hide"></p>
+</div>
 </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="btn-white fright"><span aria-hidden="true" class="icon-plus-square add vam"></span><span class="vam">{% trans "New Group" %}</span></button>
-        {% endif %}
-    </div>
-
+<div class="cur-view-path">
+    <h3>{% trans "My Groups" %}</h3>
+</div>
+<div class="cur-view-main-con">
     <div id="group-list" class="hide"></div>
     <div class="empty-tips hide">
         <h2 class="alc">{% trans "You are not in any groups" %}</h2>
@@ -113,84 +109,38 @@
     </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 id="dialogTitle">{% trans "New Group" %}</h3>
-        <label for="group-name">{% trans "Name" %}</label><br />
-        <input type="text" name="group_name" value="" class="input" id="group-name" /><br />
-        <p class="error hide"></p>
-        <input type="submit" class="submit" value="{% trans "Submit" %}" />
-    </form>
-    {% endif %}
+</div>
 </script>
 
 <script type="text/template" id="group-tmpl">
-    <div id="group-top"></div>
-
-    <div id="group-repos">
+<div class="cur-view-main">
+    <div class="cur-view-path" id="group-path">
+        <div class="group-path cur-view-path-path">
+        </div>
+        <div class="group-toolbar-2">
+        </div>
+    </div>
+    <div class="cur-view-main-con" id="group-repos">
+        <span class="loading-icon loading-tip"></span>
         <table class="hide">
             <thead></thead>
             <tbody></tbody>
         </table>
-        <div class="empty-tips" style="margin-bottom:150px; display:none;">
+        <div class="empty-tips hide">
             <h2 class="alc">{% trans "No library is shared 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>
-        <span class="loading-icon loading-tip"></span>
         <p class="error error-tip hide"></p>
     </div>
-</script>
-
-<script type="text/template" id="group-settings-tmpl">
-    <div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
-    <div class="sf-popover-hd ovhd">
-        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf-popover-close js-close sf2-icon-x1 op-icon fright"></a>
-        <h3 class="sf-popover-title">{% trans "Settings" %}</h3>
-    </div>
-    <div class="sf-popover-con">
-    </div>
-</script>
-
-<script type="text/template" id="group-members-tmpl">
-    <div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
-    <div class="sf-popover-hd ovhd">
-        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf-popover-close js-close sf2-icon-x1 op-icon fright"></a>
-        <h3 class="sf-popover-title">{% trans "Members" %}</h3>
-    </div>
-    <div class="sf-popover-con">
-        <div class="loading-icon loading-tip"></div>
-        <ul id="group-member-list" class="hide"></ul>
-        <p class="error hide"></p>
-    </div>
-</script>
-
-<script type="text/template" id="group-discussions-tmpl">
-    <div class="right-side-panel-hd group-discussions-hd ovhd">
-        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf-popover-close js-close sf2-icon-x1 op-icon fleft"></a>
-        <h3 class="right-side-panel-title">{% trans "Discussions" %}</h3>
-    </div>
-    <div class="right-side-panel-con group-discussions-con">
-        <div class="loading-icon loading-tip"></div>
-        <p class="load-more-discussion hide js-load-more">{% trans "More..." %}</p>
-        <ul id="group-discussion-list" class="hide"></ul>
-        <p class="no-discussion-tip hide">{% trans "No discussion in this group yet." %}</p>
-        <p class="error hide"></p>
-    </div>
-    <div class="right-side-panel-footer group-discussions-footer">
-        <form action="" method="post" class="msg-form">
-            <img src="{% avatar_url request.user 64 %}" alt="" width="32" class="avatar-circle fleft" />
-            <div class="msg-body">
-                <textarea name="message" placeholder="{% trans "Add a discussion..." %}" title="{% trans "Add a discussion..." %}" aria-label="{% trans "Add a discussion..." %}" class="msg-input"></textarea>
-                <button type="submit" class="submit msg-submit">{% trans "Submit" %}</button>
-            </div>
-        </form>
-    </div>
+</div>
 </script>
 
 <script type="text/template" id="starred-file-tmpl">
-    <h3 class="hd">{% trans "Favorites" %}</h3>
+<div class="cur-view-path">
+    <h3>{% trans "Favorites" %}</h3>
+</div>
+<div class="cur-view-main-con">
     <table class="hide">
         <thead></thead>
         <tbody></tbody>
@@ -200,16 +150,25 @@
         <h2 class="alc">{% trans "You don't have any starred files yet" %}</h2>
         <p>{% blocktrans %}You can mark files as important by clicking the "Star" button on the file viewing page. Starred files will be listed here.{% endblocktrans %}</p>
     </div>
+</div>
 </script>
 
 <script type="text/template" id="activities-tmpl">
+<div class="cur-view-path">
+    <h3>{% trans "Activities" %}</h3>
+</div>
+<div class="cur-view-main-con">
     <div id="activities-body" class="hide"></div>
     <span class="loading-icon loading-tip"></span>
     <button id="activities-more" class="full-width-btn hide">{% trans 'More' %}</button>
+</div>
 </script>
 
 <script type="text/template" id="devices-tmpl">
-    <h3 class="hd">{% trans "Linked Devices" %}</h3>
+<div class="cur-view-path">
+    <h3>{% trans "Linked Devices" %}</h3>
+</div>
+<div class="cur-view-main-con">
     <table class="hide">
         <thead>
             <tr>
@@ -227,11 +186,33 @@
         <h2 class="alc">{% trans "You do not have connected devices" %}</h2>
         <p>{% trans "Your clients (Desktop/Android/iOS) will be listed here." %}</p>
     </div>
+</div>
 </script>
 
-{% include "js/dir-view.html" %}
+<script type="text/template" id="dir-view-tmpl">
+<div class="cur-view-main">
+    <div class="cur-view-path" id="dir-view-path">
+        <div class="dir-path cur-view-path-path"></div>
+        <div class="dir-toolbar-2"></div>
+    </div>
+    <div class="cur-view-main-con">
+        <span class="loading-icon loading-tip"></span>
+        <div class="js-dir-content hide">
+            <table class="repo-file-list hide">
+                <thead></thead>
+                <tbody></tbody>
+            </table>
+            <ul class="grid-view hide">
+            </ul>
+        </div>
+        <p class="error hide"></p>
+    </div>
+</div>
+{# <div class="cur-view-side"></div> #}
+</script>
 
 {% include "js/lib-op-popups.html" %}
+
 <script type="text/javascript">
 app["pageOptions"] = {
     site_root: "{{ SITE_ROOT }}",
@@ -299,8 +280,7 @@ app.ui = {
     currentDropdown: null,
     currentPopover: null,
     currentHighlightedItem: null,
-    freezeItemHightlight: false,
-    groupDiscussions: null
+    freezeItemHightlight: false
 };
 </script>
 {% if debug %}
diff --git a/seahub/templates/nav_footer.html b/seahub/templates/nav_footer.html
index 46375caeb8..26b2be7f08 100644
--- a/seahub/templates/nav_footer.html
+++ b/seahub/templates/nav_footer.html
@@ -1,7 +1,7 @@
 {% load i18n %}
-<a href="{{SITE_ROOT}}help/" target="_blank">{% trans "Help" %}</a>
-<a href="#" class="js-about">{% trans "About" %}</a>
-<a href="{% url 'download_client' %}" class="fright"><span aria-hidden="true" class="sf2-icon-monitor vam"></span> <span class="vam">{% trans "Clients" %}</span></a>
+<a href="{{SITE_ROOT}}help/" target="_blank" class="item">{% trans "Help" %}</a>
+<a href="#" class="js-about item">{% trans "About" %}</a>
+<a href="{% url 'download_client' %}" class="item last-item"><span aria-hidden="true" class="sf2-icon-monitor vam"></span> <span class="vam">{% trans "Clients" %}</span></a>
 
 <div class="about-content hide">
     <p><img src="{{ MEDIA_URL }}{{ logo_path }}" title="{{ site_title }}" alt="logo" width="{{logo_width}}" height="{{logo_height}}" /></p>
diff --git a/seahub/templates/registration/login.html b/seahub/templates/registration/login.html
index 27a8ce90c9..4c356df100 100644
--- a/seahub/templates/registration/login.html
+++ b/seahub/templates/registration/login.html
@@ -3,7 +3,6 @@
 
 {% block sub_title %}{% trans "Log In" %} - {% endblock %}
 {% block header_css_class %}hide{% endblock %}
-{% block main_css_class %}{% endblock %}
 {% block extra_style %}
 <style type="text/css">
 html, body, #wrapper { height:100%; }
@@ -12,9 +11,6 @@ html, body, #wrapper { height:100%; }
     background-size: cover;
     padding-top:1px;
 }
-#main {
-    min-height:0;
-}
 #lang {
     margin:0;
 }
diff --git a/seahub/templates/snippets/search_form.html b/seahub/templates/snippets/search_form.html
index 568db1338b..3067bf2bfa 100644
--- a/seahub/templates/snippets/search_form.html
+++ b/seahub/templates/snippets/search_form.html
@@ -1,5 +1,7 @@
 {% load i18n %}
-                <form id="top-search-form" method="get" action="{% url 'search' %}" class="search-form fleft">
+                <a href="{% url 'search' %}" class="hidden-md-up top-search-link"><span class="icon-search"></span></a>
+
+                <form id="top-search-form" method="get" action="{% url 'search' %}" class="hidden-sm-down search-form">
                     {% if search_repo_id %}
                     <input type="text" class="search-input" name="q" placeholder="{% if search_wiki %}{% trans "Search files in this wiki" %}{% else %}{% trans "Search files in this library" %}{% endif %}" title="{% if search_wiki %}{% trans "Search files in this wiki" %}{% else %}{% trans "Search files in this library" %}{% endif %}" aria-label="{% if search_wiki %}{% trans "Search files in this wiki" %}{% else %}{% trans "Search files in this library" %}{% endif %}" value="{{ keyword }}" />
                     <input type="hidden" name="search_repo" value="{{ search_repo_id }}" />
@@ -69,7 +71,7 @@
                                 <span class="vam">{% trans "markdown" %}</span>
                             </label>
                             <br/>
-                            <input type="text" value="{{ input_fileexts }}" name="input_fexts" placeholder="{% trans "Input file extensions here, separate with ','" %}" title="{% trans "Input file extensions here, separate with ','" %}" aria-label="{% trans "Input file extensions here, separate with ','" %}" class="fileext-input" />
+                            <input type="text" value="{{ input_fileexts }}" name="input_fexts" placeholder="{% trans "Input file extensions here, separate with ','" %}" title="{% trans "Input file extensions here, separate with ','" %}" aria-label="{% trans "Input file extensions here, separate with ','" %}" class="input fileext-input" />
                             <p class="error hide">{% trans "Please select at least one file type or input at least one file extension" %}</p>
                         </div>
                     </div>
diff --git a/seahub/templates/sysadmin/base.html b/seahub/templates/sysadmin/base.html
index 9a49f99259..bedb20cef1 100644
--- a/seahub/templates/sysadmin/base.html
+++ b/seahub/templates/sysadmin/base.html
@@ -2,13 +2,14 @@
 {% load i18n %}
 
 {% block top_search %}{% endblock %} {# no 'file search' for system admin pages #}
+{% block main_class %}d-flex ovhd{% endblock %}
 
 {% block admin_link %}
     <a href="{{ SITE_ROOT }}" title="{% trans "Exit admin panel" %}" class="item">{% trans "Exit admin panel" %}</a>
 {% endblock %}
 
 {% block main_content %}
-<div class="row">
+<div class="row flex-1 d-flex">
     <div id="side-nav" class="side-nav side-tabnav col-md-3">
         <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf2-icon-x1 sf-popover-close op-icon hidden-md-up js-close-side-nav fright"></a>
         {% block left_panel %}
@@ -115,7 +116,7 @@
         {% endblock %}
     </div>
 
-    <div id="right-panel" class="col-md-9 col-md-offset-3">
+    <div id="right-panel" class="col-md-9 ov-auto flex-1">
         {% block right_panel %}{% endblock %}
     </div>
 </div>
diff --git a/seahub/templates/sysadmin/sysadmin_backbone.html b/seahub/templates/sysadmin/sysadmin_backbone.html
index 88006fb158..786322c040 100644
--- a/seahub/templates/sysadmin/sysadmin_backbone.html
+++ b/seahub/templates/sysadmin/sysadmin_backbone.html
@@ -22,7 +22,7 @@
 </head>
 
 <body>
-    <div id="wrapper" role="application" class="{{ LANGUAGE_CODE }}">
+    <div id="wrapper" role="application" class="{{ LANGUAGE_CODE }} d-flex fd-col h100">
         {% block info_bar_message %}
         {% if request.user.is_authenticated and request.cur_note %}
         <div id="info-bar">
@@ -32,37 +32,31 @@
         {% endif %}
         {% endblock info_bar_message %}
 
-        <div id="header" role="banner" class="navbar navbar-fixed-top">
-            <div id="header-inner">
-                {% block notice_panel %}{% endblock %}
-                <a href="{{ SITE_ROOT }}" id="logo" class="hidden-sm-down fleft">
+        <div id="header" role="banner" class="d-flex">
+                <a href="{{ SITE_ROOT }}" id="logo" class="hidden-sm-down">
                     {% if seacloud_mode %}
                     <img src="{{ MEDIA_URL }}img/seacloud_logo.png?t=1398068110" title="Seacloud" alt="logo" width="186" height="31" />
                     {% else %}
                     <img src="{{ MEDIA_URL }}{{ logo_path }}" title="{{ site_title }}" alt="logo" width="{{logo_width}}" height="{{logo_height}}" />
                     {% endif %}
                 </a>
-                <button class="sf2-icon-list-view side-nav-toggle hidden-md-up" title="{% trans "Side Nav Menu" %}" id="js-toggle-side-nav"     aria-label="{% trans "Side Nav Menu" %}"></button>
+                <span class="sf2-icon-list-view side-nav-toggle hidden-md-up" title="{% trans "Side Nav Menu" %}" id="js-toggle-side-nav" aria-label="{% trans "Side Nav Menu" %}"></span>
 
-                <div id="account" class="fright">
-                    <a id="my-info" href="#" class="no-deco" aria-label="{% trans "View profile and more" %}">
+                <div id="account">
+                    <a id="my-info" href="#" class="account-toggle no-deco hidden-sm-down" aria-label="{% trans "View profile and more" %}">
                         {% avatar request.user 36 %} <span class="icon-caret-down vam"></span>
                     </a>
+                    <span class="account-toggle icon-ellipsis-vertical mobile-icon hidden-md-up" aria-label="{% trans "View profile and more" %}"></span>
                 </div>
-            </div>
         </div>
 
-        <div id="main" class="clear container-fluid top-padding">
-            <div class="row">
+        <div id="main" class="container-fluid w100 flex-auto ovhd d-flex">
+            <span class="loading-icon loading-tip" id="initial-loading"></span>
+            <div class="row flex-1 d-flex hide">
                 <div class="side-nav side-tabnav col-md-3" id="side-nav" role="navigation"></div>
-                <div id="right-panel" class="col-md-9 col-md-offset-3">
+                <div id="right-panel" class="col-md-9 ov-auto flex-1">
                     {% block right_panel %}{% endblock %}
                 </div>
-                <div id="main-panel" class="clear w100 ovhd">
-                    <div id="initial-loading-view">
-                        <span class="loading-icon loading-tip"></span>
-                    </div>
-                </div>
             </div>
 
             <div id="confirm-popup" class="hide">
diff --git a/seahub/templates/view_file_base.html b/seahub/templates/view_file_base.html
index c62552915f..4773701c70 100644
--- a/seahub/templates/view_file_base.html
+++ b/seahub/templates/view_file_base.html
@@ -8,10 +8,15 @@
 {% block extra_style %}
 <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/file_view_extra.css" />
 <style type="text/css">
+#main {
+    overflow:visible;
+}
 #view-hd {
     width:100%;
     padding:0 15px 12px;
     border-bottom:1px solid #c9c9c9;
+    display:flex;
+    justify-content:space-between;
 }
 #file-view {
     border:none;
@@ -28,11 +33,10 @@
 {% endblock %}
 
 {% block header_css_class %}hide{% endblock %}
-{% block main_css_class %}{% endblock %} {# remove the padding-top css #}
 
 {% block main_content %}
-    <div id="view-hd" class="ovhd">
-        <div class="fleft">
+    <div id="view-hd">
+        <div>
             <h2 class="file-view-hd">
                 <span class="vam">{{ filename }}</span>
                 {% if is_starred %}
@@ -56,7 +60,7 @@
             </div>
         </div>
 
-        <div class="sf-btn-group file-view-op fright">
+        <div class="sf-btn-group file-view-op">
             <a class="sf-btn-group-btn sf-btn-group-btn-first sf-btn-link op-icon sf2-icon-folder" href="{% url 'view_common_lib_dir' repo.id parent_dir|strip_slash %}" title="{% trans "Open parent folder" %}"></a>
 
             {% if can_lock_unlock_file %}
diff --git a/seahub/templates/view_file_image.html b/seahub/templates/view_file_image.html
index 4381f07122..9e354d5d3f 100644
--- a/seahub/templates/view_file_image.html
+++ b/seahub/templates/view_file_image.html
@@ -4,7 +4,6 @@
 
 {% block extra_style %}{{block.super}}
 <style type="text/css">
-body { overflow:hidden; }
 #file-view { text-align:center; padding:30px 0; height:10000px; position:relative; }
 </style>
 {% endblock %}
diff --git a/seahub/templates/view_history_file.html b/seahub/templates/view_history_file.html
index e43e3b3b67..843b2ce1bb 100644
--- a/seahub/templates/view_history_file.html
+++ b/seahub/templates/view_history_file.html
@@ -9,7 +9,6 @@
 {% endblock %}
 
 {% block header_css_class %}hide{% endblock %}
-{% block main_css_class %}{% endblock %} {# remove the padding-top css #}
 
 {% block main_content %}
     <div id="view-hd" class="ovhd">
diff --git a/static/scripts/app/router.js b/static/scripts/app/router.js
index ee91538342..602c6b8a80 100644
--- a/static/scripts/app/router.js
+++ b/static/scripts/app/router.js
@@ -58,7 +58,7 @@ define([
 
         initialize: function() {
             $('.initial-loading').hide();
-            $('.main-content').show();
+            $('.main-content').removeClass('hide');
 
             Common.prepareApiCsrf();
             Common.initLocale();
@@ -87,8 +87,6 @@ define([
             app.ui.accountView = this.accountView = new AccountView();
             app.pageOptions.sort_mode = Cookies.get('sort_mode') || 'name_up';
 
-            this.currentView = this.myReposView;
-
             var _this = this;
             var originalWindowWidth = $(window).width();
             $(window).resize(function() {
@@ -96,6 +94,7 @@ define([
                 if (_this.currentView.reset) {
                     if ((originalWindowWidth < 768 && curWidth >= 768 ) ||
                         (originalWindowWidth >= 768 && curWidth < 768)) {
+                        // Todo
                         _this.currentView.reset();
                     }
                 }
@@ -128,12 +127,13 @@ define([
         },
 
         switchCurrentView: function(newView) {
-            if (this.currentView != newView) {
-                this.currentView.hide();
+            if (!this.currentView) {
                 this.currentView = newView;
-            }
-            if (app.ui.groupDiscussions) {
-                app.ui.groupDiscussions.hide();
+            } else {
+                if (this.currentView != newView) {
+                    this.currentView.hide();
+                    this.currentView = newView;
+                }
             }
         },
 
diff --git a/static/scripts/app/views/account.js b/static/scripts/app/views/account.js
index 03459dc664..45785584db 100644
--- a/static/scripts/app/views/account.js
+++ b/static/scripts/app/views/account.js
@@ -23,7 +23,7 @@ define([
             this.$account = $('#account');
 
             var _this = this;
-            $('#my-info').click(function() {
+            $('.account-toggle').click(function() {
                 _this.toggle();
                 return false;
             });
@@ -49,7 +49,7 @@ define([
                     _this.$loadingTip.hide();
                     _this.$space.html(data['html']).removeClass('hide');
                 },
-                error: function (xhr, textStatus, errorThrown) {
+                error: function(xhr, textStatus, errorThrown) {
                     _this.$loadingTip.hide();
                     var err_msg;
                     if (xhr.responseText) {
diff --git a/static/scripts/app/views/activities.js b/static/scripts/app/views/activities.js
index fe822cbd93..0de1111986 100644
--- a/static/scripts/app/views/activities.js
+++ b/static/scripts/app/views/activities.js
@@ -10,7 +10,7 @@ define([
 
     var ActivitiesView = Backbone.View.extend({
 
-        id: 'activities',
+        el: '.main-panel',
 
         template: _.template($('#activities-tmpl').html()),
 
@@ -20,7 +20,6 @@ define([
         initialize: function () {
             this.activities = new ActivityCollection();
             this.moreOffset = 0;
-            this.render();
         },
 
         events: {
@@ -92,20 +91,22 @@ define([
             });
         },
 
-        render: function() {
-            this.$el.html(this.template());
+        renderMainCon: function() {
+            this.$mainCon = $('<div class="main-panel-main" id="activities"></div>').html(this.template());
+            this.$el.append(this.$mainCon);
+
             this.$activitiesBody = this.$('#activities-body');
             this.$activitiesMore = this.$('#activities-more');
             this.$loadingTip = this.$('.loading-tip');
         },
 
         show: function() {
-            $("#right-panel").html(this.$el);
+            this.renderMainCon();
             this.showActivities();
         },
 
         hide: function () {
-            this.$el.detach();
+            this.$mainCon.detach();
         }
 
     });
diff --git a/static/scripts/app/views/devices.js b/static/scripts/app/views/devices.js
index 9b162ece1c..7e9ff2361f 100644
--- a/static/scripts/app/views/devices.js
+++ b/static/scripts/app/views/devices.js
@@ -10,15 +10,13 @@ define([
 
     var DevicesView = Backbone.View.extend({
 
-        id: 'devices',
+        el: '.main-panel',
 
         template: _.template($('#devices-tmpl').html()),
 
         initialize: function() {
             this.devices = new DevicesCollection();
             this.listenTo(this.devices, 'reset', this.reset);
-
-            this.render();
         },
 
         addOne: function(device) {
@@ -39,8 +37,9 @@ define([
             }
         },
 
-        render: function() {
-            this.$el.html(this.template());
+        renderMainCon: function() {
+            this.$mainCon = $('<div class="main-panel-main" id="devices"></div>').html(this.template());
+            this.$el.append(this.$mainCon);
 
             this.$table = this.$('table');
             this.$tableBody = this.$('tbody');
@@ -51,12 +50,12 @@ define([
         },
 
         show: function() {
-            $("#right-panel").html(this.$el);
+            this.renderMainCon();
             this.devices.fetch({reset: true});
         },
 
         hide: function() {
-            this.$el.detach();
+            this.$mainCon.detach();
         }
 
     });
diff --git a/static/scripts/app/views/dialogs/dirent-mvcp.js b/static/scripts/app/views/dialogs/dirent-mvcp.js
index a9c670d9d3..c4312a63e3 100644
--- a/static/scripts/app/views/dialogs/dirent-mvcp.js
+++ b/static/scripts/app/views/dialogs/dirent-mvcp.js
@@ -24,7 +24,7 @@ define([
             this.show_cur_repo = this.dirent.get('perm') == 'rw' ? true : false;
 
             this.render();
-            this.$el.modal({appendTo:'#main', autoResize:true, focus:false});
+            this.$el.modal({autoResize:true, focus:false});
             $('#simplemodal-container').css({'width':'auto', 'height':'auto'});
 
             if (this.show_cur_repo) {
diff --git a/static/scripts/app/views/dialogs/dirent-rename.js b/static/scripts/app/views/dialogs/dirent-rename.js
index a94805db5c..1edb2b86f3 100644
--- a/static/scripts/app/views/dialogs/dirent-rename.js
+++ b/static/scripts/app/views/dialogs/dirent-rename.js
@@ -18,7 +18,7 @@ define([
             this.imgIndex = options.imgIndex;
 
             this.render();
-            this.$el.modal({appendTo:'#main', focus: false});
+            this.$el.modal({focus: false});
             $('#simplemodal-container').css({'width':'auto', 'height':'auto'});
 
             var $input = this.$('[name="newname"]');
diff --git a/static/scripts/app/views/dir.js b/static/scripts/app/views/dir.js
index 60b2f911a9..db673422c0 100644
--- a/static/scripts/app/views/dir.js
+++ b/static/scripts/app/views/dir.js
@@ -22,21 +22,26 @@ define([
         'use strict';
 
         var DirView = Backbone.View.extend({
-            id: 'dir-view',
+            el: '.main-panel',
 
             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()),
-            dirents_hd_template: _.template($('#dirents-hd-tmpl').html()),
-            dirents_hd_mobile_template: _.template($('#dirents-hd-mobile-tmpl').html()),
-            top_search_form_template: _.template($('#top-search-form-tmpl').html()),
+            toolbarTemplate: _.template($('#dir-view-toolbar-tmpl').html()),
+            toolbar2Template: _.template($('#dir-view-toolbar2-tmpl').html()),
+
+            pathTemplate: _.template($('#dir-view-path-tmpl').html()),
+
+            theadTemplate: _.template($('#dir-view-thead-tmpl').html()), // '<thead>'
+            theadMobileTemplate: _.template($('#dir-view-thead-mobile-tmpl').html()),
 
             newDirTemplate: _.template($("#add-new-dir-form-template").html()),
             newFileTemplate: _.template($("#add-new-file-form-template").html()),
             mvcpTemplate: _.template($("#mvcp-form-template").html()),
             mvProgressTemplate: _.template($("#mv-progress-popup-template").html()),
 
+            topSearchFormTemplate: _.template($('#top-search-form-tmpl').html()),
+            repoDecryptFormTemplate: _.template($('#repo-decrypt-form-template').html()),
+
             initialize: function(options) {
                 var view_mode = Cookies.get('view_mode');
                 if (view_mode == 'grid') {
@@ -68,28 +73,13 @@ define([
                     }
                 };
 
-
                 this.dir = new DirentCollection();
                 this.listenTo(this.dir, 'add', this.addOne);
                 this.listenTo(this.dir, 'reset', this.reset);
 
                 this.fileUploadView = new FileUploadView({dirView: this});
-                this.direntDetailsView = new DirentDetailsView();
-                this.fileCommentsView = new FileCommentsView();
-
-                this.render();
-
-
-                var _this = this;
-                // scroll window: get 'more', fix 'op bar'
-                $(window).scroll(function() {
-                    if ($(_this.el).is(':visible')) {
-                        _this.onWindowScroll();
-                    }
-                });
-                $(window).resize(function() {
-                    _this.updateDirOpBarUI();
-                });
+                this.direntDetailsView = new DirentDetailsView({dirView: this});
+                this.fileCommentsView = new FileCommentsView({dirView: this});
 
                 // hide 'rename form'
                 $(document).click(function(e) {
@@ -116,19 +106,26 @@ 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.$loading_tip = this.$('.loading-tip');
-                this.$error = this.$('.error');
-                this.$el_con = this.$('.repo-file-list-topbar, .js-dir-content');
+            renderMainCon: function() {
+                if ($('#dir-view').length) {
+                    return;
+                }
 
-                this.$path_bar = this.$('.path-bar');
-                // For compatible with css, we use .repo-op instead of .dir-op
-                this.$dir_op_bar = this.$('.repo-op');
+                this.$mainCon = $('<div class="main-panel-main main-panel-main-with-side" id="dir-view"></div>').html(this.template());
+                this.$el.append(this.$mainCon);
+
+                this.$loadingTip = this.$('.loading-tip');
+                this.$con = this.$('.js-dir-content');
+                this.$error = this.$('.error');
+
+                this.$table = this.$('.repo-file-list');
+                this.$tbody = $('tbody', this.$table);
+                this.$gridViewContainer = this.$('.grid-view');
+
+                var _this = this;
+                $('.cur-view-main-con', this.$mainCon).scroll(function() {
+                    _this.getMore();
+                });
             },
 
             // public function
@@ -136,32 +133,30 @@ define([
             // 'category' is sth. like url prefix
             // options: for rendering from group view, currently is { group_name: group_name }
             showDir: function(category, repo_id, path, options) {
-                $('#top-search-form').html(this.top_search_form_template({
+                $('#top-search-form').html(this.topSearchFormTemplate({
                     search_repo_id: repo_id
                 }));
 
                 this.contextOptions = options;
-                if (!this.attached) {
-                    this.attached = true;
-                    $("#right-panel").html(this.$el);
-                }
+                this.renderMainCon();
+
                 this.dir.setPath(category, repo_id, path);
                 this.dir.dirent_more = false;
+
                 this.renderDir();
             },
 
             // public function
             // hide the folder view
             hide: function() {
-                $('#top-search-form').html(this.top_search_form_template({
+                $('#top-search-form').html(this.topSearchFormTemplate({
                     search_repo_id: ''
                 }));
 
-                this.$el.detach();
-                this.attached = false;
-
-                this.direntDetailsView.hide();
-                this.fileCommentsView.hide();
+                if (this.$toolbar) { // when an enc lib is not decrypted, no $toolbar
+                    this.$toolbar.detach();
+                }
+                this.$mainCon.detach();
             },
 
             /***** private functions *****/
@@ -169,66 +164,55 @@ define([
                 var view;
                 if (this.view_mode == 'list') {
                     view = new DirentView({model: dirent, dirView: this});
-                    this.$dirent_list_body.append(view.render().el);
+                    this.$tbody.append(view.render().el);
                 } else {
                     view = new DirentGridView({model: dirent, dirView: this});
-                    this.$dirent_grid.append(view.render().el);
+                    this.$gridViewContainer.append(view.render().el);
                 }
             },
 
+            // this.view_mode == 'list'
+            addListOne: function(dirent) {
+                var view = new DirentView({model: dirent, dirView: this});
+                this.$tbody.append(view.render().el);
+            },
+
+            // 'grid'
+            addGridOne: function(dirent) {
+                var view = new DirentGridView({model: dirent, dirView: this});
+                this.$gridViewContainer.append(view.render().el);
+            },
+
             reset: function() {
-                this.direntDetailsView.hide();
-                this.fileCommentsView.hide();
-
+                this.renderToolbar();
                 this.renderPath();
-                this.renderDirOpBar();
 
-                this.$el_con.show();
+                this.$con.hide();
 
-                this.setFileInput();
+                this.$table.hide();
+                this.$tbody.empty();
+                this.$gridViewContainer.hide().empty();
 
-                // there may be a 'style' added via 'onWindowScroll()' when visiting last dir
-                this.$('.js-dir-content').removeAttr('style');
+                this.$con.show();
 
                 if (this.view_mode == 'list') {
-                    this.renderDirentsHd();
-                }
-
-                this.$dirent_grid.empty();
-                this.$dirent_list_body.empty();
-
-                if (this.view_mode == 'list') {
-                    this.$dirent_list.show();
-                    this.$dirent_grid.hide();
+                    this.renderThead();
+                    Common.updateSortIconByMode({'context': this.$table});
+                    this.$table.show();
                 } else {
-                    this.$dirent_list.hide();
-                    this.$dirent_grid.show();
+                    this.$gridViewContainer.show();
                 }
 
                 // sort
-                Common.updateSortIconByMode({'context': this.$el});
                 this.sortDirents();
 
                 this.dir.last_start = 0;
                 this.dir.limit = 100;
                 this.render_dirents_slice(this.dir.last_start, this.dir.limit);
 
-                this.updateDirOpBarUI(); // after `render_dirents_slice`
-
                 this.getThumbnail();
             },
 
-            updateDirOpBarUI: function() {
-                var width;
-                if ($(window).width() > 500) {
-                    width = this.$('.repo-op').width() - parseInt(this.$('.repo-op-misc').css('margin-left')) - 5;
-                    width -= $('#multi-dirents-op').is(':visible') ? $('#multi-dirents-op').width() : $('#cur-dir-ops').width();
-                    this.$('.repo-op-misc').css({'width': width});
-                } else {
-                    this.$('.repo-op-misc').removeAttr('style');
-                }
-            },
-
             updateMagnificPopupOptions: function(options) {
                 var repo_id = this.dir.repo_id,
                     path = this.dir.path;
@@ -402,13 +386,12 @@ define([
 
             _showLibDecryptDialog: function() {
                 var _this = this;
-                var form = $($('#repo-decrypt-form-template').html());
+                var $form = $(this.repoDecryptFormTemplate());
                 var decrypt_success = false;
-                form.modal({
+                $form.modal({
                     containerCss: {'padding': '1px'},
                     onClose: function () {
                         $.modal.close();
-                        _this.$el_con.show();
                         if (!decrypt_success) {
                             app.router.navigate(
                                 _this.dir.category + '/', // need to append '/' at end
@@ -418,15 +401,15 @@ define([
                     }
                 });
                 $('#simplemodal-container').css({'height':'auto'});
-                form.submit(function() {
-                    var passwd = $.trim($('[name="password"]', form).val());
+                $form.submit(function() {
+                    var passwd = $.trim($('[name="password"]', $form).val());
                     if (!passwd) {
-                        $('.error', form).html(gettext("Password is required.")).removeClass('hide');
+                        $('.error', $form).html(gettext("Password is required.")).removeClass('hide');
                         return false;
                     }
                     Common.ajaxPost({
-                        form: form,
-                        form_id: form.attr('id'),
+                        form: $form,
+                        form_id: $form.attr('id'),
                         post_url: Common.getUrl({
                             'name': 'api_v2.1_repo_set_password',
                             'repo_id': _this.dir.repo_id
@@ -445,10 +428,10 @@ define([
             },
 
             renderDir: function() {
-                this.$loading_tip.show();
-                this.$error.hide();
-                this.$el_con.hide();
 
+                this.$loadingTip.show();
+                this.$con.hide();
+                this.$error.hide();
 
                 var _this = this;
                 var thumbnail_size = app.pageOptions.thumbnail_default_size;
@@ -464,12 +447,8 @@ define([
                         'thumbnail_size': thumbnail_size
                     },
                     success: function() {
-                        _this.$loading_tip.hide();
                     },
                     error: function(collection, response, opts) {
-                        _this.$loading_tip.hide();
-                        _this.$el_con.hide();
-
                         var err_msg;
                         if (response.responseText) {
                             if (response.responseJSON.lib_need_decrypt) {
@@ -482,6 +461,9 @@ define([
                             err_msg = gettext('Please check the network.');
                         }
                         _this.$error.html(err_msg).show();
+                    },
+                    complete: function() {
+                        _this.$loadingTip.hide();
                     }
                 });
             },
@@ -517,27 +499,33 @@ define([
                     });
                 }
 
-                this.$path_bar.html(this.path_bar_template(obj));
+                this.$('.dir-path').html(this.pathTemplate(obj));
             },
 
-            renderDirOpBar: function() {
+            renderToolbar: function() {
                 var dir = this.dir;
-
-                this.$dir_op_bar.html($.trim(this.dir_op_bar_template({
+                var data = {
                     user_perm: dir.user_perm,
                     no_quota: dir.no_quota,
                     encrypted: dir.encrypted,
                     mode: this.view_mode,
                     path: dir.path,
                     repo_id: dir.repo_id,
-                    site_root: app.pageOptions.site_root,
                     is_repo_owner: dir.is_repo_owner,
-                    can_generate_share_link: app.pageOptions.can_generate_share_link,
-                    can_generate_upload_link: app.pageOptions.can_generate_upload_link,
-                    enable_upload_folder: app.pageOptions.enable_upload_folder
-                })))
-                .removeAttr('style'); // there may be a 'style' added via 'onWindowScroll()' when visiting last dir
+                    site_root: app.pageOptions.site_root
+                };
 
+                if (!$('#dir-view-toolbar').length) {
+                    this.$toolbar = $('<div class="cur-view-toolbar d-flex" id="dir-view-toolbar"></div>').html(this.toolbarTemplate(data));
+                    this.$('.common-toolbar').before(this.$toolbar);
+                } else {
+                    this.$toolbar.html(this.toolbarTemplate(data));
+                }
+
+                this.$('.dir-toolbar-2').html(this.toolbar2Template(data));
+
+                // for 'upload'
+                this.setFileInput();
 
                 if (dir.user_perm == 'rw') {
                     // add new folder/file
@@ -547,14 +535,15 @@ define([
                 }
             },
 
-            renderDirentsHd: function() {
-                var tmpl = $(window).width() < 768 ? this.dirents_hd_mobile_template : this.dirents_hd_template;
+            renderThead: function() {
+                var tmpl = $(window).width() < 768 ? this.theadMobileTemplate : this.theadTemplate;
                 this.$('thead').html(tmpl());
             },
 
             render_dirents_slice: function(start, limit) {
                 var dir = this.dir;
-                _.each(dir.slice(start, start + limit), this.addOne, this);
+                var addOne = this.view_mode == 'list' ? this.addListOne : this.addGridOne;
+                _.each(dir.slice(start, start + limit), addOne, this);
                 if (dir.length > start + limit) {
                     dir.dirent_more = true;
                     dir.last_start = start + limit;
@@ -565,6 +554,10 @@ define([
 
             // Directory Operations
             events: {
+                'click #dir-view-toolbar .basic-upload-btn': 'uploadFile',
+                'click #dir-view-toolbar .advanced-upload-file': 'advancedUploadFile',
+                'click #dir-view-toolbar .advanced-upload-folder': 'advancedUploadFolder',
+
                 'click #add-new li a': 'closeNewDropdown',
                 'click #add-new-dir': 'newDir',
                 'click #add-new-file': 'newCommonFile',
@@ -572,19 +565,20 @@ define([
                 'click #add-new-excel-file': 'newExcelFile',
                 'click #add-new-ppt-file': 'newPPTFile',
                 'click #add-new-word-file': 'newWordFile',
+
                 'click #share-cur-dir': 'share',
                 'click #js-switch-grid-view': 'switchToGridView',
                 'click #js-switch-list-view': 'switchToListView',
-                'click th.select': 'select',
+
                 'click #mv-dirents': 'mv',
                 'click #cp-dirents': 'cp',
                 'click #del-dirents': 'del',
                 'click #download-dirents': 'download',
-                'click .by-name': 'sortByName',
-                'click .by-time': 'sortByTime',
-                'click .basic-upload-btn': 'uploadFile',
-                'click .advanced-upload-file': 'advancedUploadFile',
-                'click .advanced-upload-folder': 'advancedUploadFolder'
+
+                'click #dir-view th.select': 'select',
+                'click #dir-view .by-name': 'sortByName',
+                'click #dir-view .by-time': 'sortByTime'
+                //'scroll #dir-view .cur-view-main-con': 'getMore' // It doesn't work.
             },
 
             uploadFile: function() {
@@ -611,7 +605,7 @@ define([
                     dir = this.dir,
                     dirView = this;
 
-                form.modal({appendTo:'#main'});
+                form.modal();
                 $('#simplemodal-container').css({'height':'auto'});
 
                 form.submit(function() {
@@ -627,7 +621,7 @@ define([
                         return false;
                     }
 
-                    var post_data = { 'operation': 'mkdir' },
+                    var post_data = {'operation': 'mkdir'},
                         post_url = Common.getUrl({name: "new_dir", repo_id: dir.repo_id})
                                    + '?p=' + encodeURIComponent(Common.pathJoin([dir.path, dirent_name]));
                     var after_op_success = function(data) {
@@ -646,10 +640,10 @@ define([
 
                     Common.ajaxPost({
                         'form': form,
+                        'form_id': form_id,
                         'post_url': post_url,
                         'post_data': post_data,
-                        'after_op_success': after_op_success,
-                        'form_id': form_id
+                        'after_op_success': after_op_success
                     });
 
                     return false;
@@ -666,7 +660,6 @@ define([
                     dirView = this;
 
                 $form.modal({
-                    appendTo: '#main',
                     focus: false,
                     containerCss: {'padding':'20px 25px'}
                 });
@@ -716,10 +709,10 @@ define([
 
                     Common.ajaxPost({
                         'form': $form,
+                        'form_id': form_id,
                         'post_url': post_url,
                         'post_data': post_data,
-                        'after_op_success': after_op_success,
-                        'form_id': form_id
+                        'after_op_success': after_op_success
                     });
 
                     return false;
@@ -767,36 +760,34 @@ define([
             },
 
             addNewFile: function(new_dirent) {
-                var dirView = this,
-                    dir = this.dir;
-
+                var view, $el;
                 if (this.view_mode == 'list') {
-                    var view = new DirentView({model: new_dirent, dirView: dirView});
-                    var new_file = view.render().el;
+                    view = new DirentView({model: new_dirent, dirView: this});
+                    $el = view.render().el;
                     // put the new file as the first file
-                    if ($('tr', dirView.$dirent_list_body).length == 0) {
-                        dirView.$dirent_list_body.append(new_file);
+                    if ($('tr', this.$tbody).length == 0) {
+                        this.$tbody.append($el);
                     } else {
-                        var dirs = dir.where({'is_dir':true});
+                        var dirs = this.dir.where({'is_dir':true});
                         if (dirs.length == 0) {
-                            dirView.$dirent_list_body.prepend(new_file);
+                            this.$tbody.prepend($el);
                         } else {
                             // put the new file after the last dir
-                            $($('tr', dirView.$dirent_list_body)[dirs.length - 1]).after(new_file);
+                            $($('tr', this.$tbody)[dirs.length - 1]).after($el);
                         }
                     }
                 } else {
-                    var gview = new DirentGridView({model: new_dirent, dirView: dirView});
-                    var grid_new_file = gview.render().el;
-                    if ($('.grid-item', dirView.$dirent_grid).length == 0) {
-                        dirView.$dirent_grid.append(grid_new_file);
+                    view = new DirentGridView({model: new_dirent, dirView: this});
+                    $el = view.render().el;
+                    if ($('.grid-item', this.$gridViewContainer).length == 0) {
+                        this.$gridViewContainer.append($el);
                     } else {
-                        var dirs = dir.where({'is_dir':true});
+                        var dirs = this.dir.where({'is_dir':true});
                         if (dirs.length == 0) {
-                            dirView.$dirent_grid.prepend(grid_new_file);
+                            this.$gridViewContainer.prepend($el);
                         } else {
                             // put the new file after the last dir
-                            $($('.grid-item', dirView.$dirent_grid)[dirs.length - 1]).after(grid_new_file);
+                            $($('.grid-item', this.$gridViewContainer)[dirs.length - 1]).after($el);
                         }
                     }
                 }
@@ -807,14 +798,14 @@ define([
             },
 
             addNewDir: function(new_dirent) {
-                var dirView = this;
+                // put the new dir as the first one
+                var view;
                 if (this.view_mode == 'list') {
-                    var view = new DirentView({model: new_dirent, dirView: dirView});
-                    // put the new dir as the first one
-                    dirView.$dirent_list_body.prepend(view.render().el);
+                    view = new DirentView({model: new_dirent, dirView: this});
+                    this.$tbody.prepend(view.render().el);
                 } else {
-                    var gview = new DirentGridView({model: new_dirent, dirView: dirView});
-                    dirView.$dirent_grid.prepend(gview.render().el);
+                    view = new DirentGridView({model: new_dirent, dirView: this});
+                    this.$gridViewContainer.prepend(view.render().el);
                 }
             },
 
@@ -838,23 +829,25 @@ define([
 
             switchToGridView: function() {
                 if (this.view_mode == 'grid') {
-                    return false;
+                    return;
                 } else {
                     this.view_mode = 'grid';
                     Cookies.set('view_mode', 'grid');
+                    this.$('.list-view-icon-btn').removeClass('active');
+                    this.$('.grid-view-icon-btn').addClass('active');
                     this.renderDir();
-                    return false;
                 }
             },
 
             switchToListView: function() {
                 if (this.view_mode == 'list') {
-                    return false;
+                    return;
                 } else {
                     this.view_mode = 'list';
                     Cookies.set('view_mode', 'list');
+                    this.$('.grid-view-icon-btn').removeClass('active');
+                    this.$('.list-view-icon-btn').addClass('active');
                     this.renderDir();
-                    return false;
                 }
             },
 
@@ -916,10 +909,10 @@ define([
 
             sortByName: function() {
                 Common.toggleSortByNameMode();
-                Common.updateSortIconByMode({'context': this.$el});
+                Common.updateSortIconByMode({'context': this.$table});
                 this.sortDirents();
 
-                this.$dirent_list_body.empty();
+                this.$tbody.empty();
                 this.render_dirents_slice(0, this.dir.limit);
                 this.dir.comparator = null;
                 return false;
@@ -927,10 +920,10 @@ define([
 
             sortByTime: function () {
                 Common.toggleSortByTimeMode();
-                Common.updateSortIconByMode({'context': this.$el});
+                Common.updateSortIconByMode({'context': this.$table});
                 this.sortDirents();
 
-                this.$dirent_list_body.empty();
+                this.$tbody.empty();
                 this.render_dirents_slice(0, this.dir.limit);
                 this.dir.comparator = null;
                 return false;
@@ -950,7 +943,7 @@ define([
                     dir.each(function(model) {
                         model.set({'selected': true}, {silent: true});
                     });
-                    $dirents_op.css({'display':'inline-block'});
+                    $dirents_op.show();
                     $curDirOps.hide();
                 } else {
                     $all_dirent_checkbox.prop('checked', false);
@@ -960,8 +953,6 @@ define([
                     $dirents_op.hide();
                     $curDirOps.show();
                 }
-
-                this.updateDirOpBarUI();
             },
 
             download: function () {
@@ -1013,10 +1004,9 @@ define([
                             if (del_len > 0) {
                                 if (del_len == selected_names.length) {
                                     dirents.remove(selected_dirents);
-                                    _this.$('th [type=checkbox]').prop('checked', false);
+                                    $('th [type=checkbox]', _this.$table).prop('checked', false);
                                     _this.$('#multi-dirents-op').hide();
                                     _this.$('#cur-dir-ops').show();
-                                    _this.updateDirOpBarUI();
                                 } else {
                                     $(selected_dirents).each(function() {
                                         if (data['deleted'].indexOf(this.get('obj_name')) != -1) {
@@ -1085,7 +1075,7 @@ define([
                     show_cur_repo: show_cur_repo,
                     show_other_repos: !dir.encrypted
                 }));
-                form.modal({appendTo:'#main', autoResize:true, focus:false});
+                form.modal({autoResize:true, focus:false});
                 $('#simplemodal-container').css({'width':'auto', 'height':'auto'});
 
                 if (show_cur_repo) {
@@ -1161,7 +1151,6 @@ define([
                                             _this.$('th .checkbox').removeClass('checkbox-checked');
                                             _this.$('#multi-dirents-op').hide();
                                             _this.$('#cur-dir-ops').show();
-                                            _this.updateDirOpBarUI();
                                         } else {
                                             $(dirs).each(function() {
                                                 if (this.get('obj_name') in data['success']) {
@@ -1375,36 +1364,14 @@ define([
                 });
             },
 
-            onWindowScroll: function () {
-                // 'more'
+            getMore: function () {
+                var $el = this.$('.cur-view-main-con')[0];
                 if (this.dir.dirent_more &&
-                        $(window).scrollTop() + $(window).height() == $(document).height()) { // scroll to the bottom
+                    $el.scrollTop > 0 &&
+                    $el.clientHeight + $el.scrollTop == $el.scrollHeight) { // scroll to the bottom
                     this.render_dirents_slice(this.dir.last_start, this.dir.limit);
                     this.getThumbnail();
                 }
-
-                // fixed 'dir-op-bar'
-                var op_bar = this.$dir_op_bar,
-                    path_bar = this.$path_bar, // the element before op_bar
-                    repo_file_list = this.$('.js-dir-content'); // the element after op_bar
-                var op_bar_top = path_bar.offset().top + path_bar.outerHeight(true);
-                var fixed_styles = {
-                    'position': 'fixed',
-                    'top': 0,
-                    'left': path_bar.offset().left,
-                    'background-color': $('#header').css('background-color'),
-                    'z-index': 12 // make 'op_bar' shown on top of the checkboxes
-                };
-                if (!op_bar_top) {
-                    return;
-                }
-                if ($(window).scrollTop() >= op_bar_top) {
-                    repo_file_list.css({'margin-top':op_bar.outerHeight(true)});
-                    op_bar.outerWidth(this.$el.width()).css(fixed_styles);
-                } else {
-                    repo_file_list.css({'margin-top':0});
-                    op_bar.removeAttr('style');
-                }
             }
 
       });
diff --git a/static/scripts/app/views/dirent-details.js b/static/scripts/app/views/dirent-details.js
index 013bf3ed7c..b05441144a 100644
--- a/static/scripts/app/views/dirent-details.js
+++ b/static/scripts/app/views/dirent-details.js
@@ -8,12 +8,12 @@ define([
 
     var View = Backbone.View.extend({
         id: 'dirent-details',
-        className: 'details-panel right-side-panel',
+        className: 'details-panel',
 
         template:  _.template($('#dirent-details-tmpl').html()),
 
-        initialize: function() {
-            $("#main").append(this.$el);
+        initialize: function(options) {
+            this.dirView = options.dirView;
 
             var _this = this;
             $(document).keydown(function(e) {
@@ -22,10 +22,6 @@ define([
                     _this.hide();
                 }
             });
-
-            $(window).resize(function() {
-                _this.setConMaxHeight();
-            });
         },
 
         events: {
@@ -171,15 +167,8 @@ define([
             });
         },
 
-        setConMaxHeight: function() {
-            this.$('.right-side-panel-con').css({
-                'height': $(window).height() -  // this.$el `position:fixed; top:0;`
-                    this.$('.right-side-panel-hd').outerHeight(true)
-            });
-        },
-
         hide: function() {
-            this.$el.css({'right': '-320px'});
+            this.$el.hide();
         },
 
         close: function() {
@@ -188,10 +177,18 @@ define([
         },
 
         show: function(options) {
+            var _this = this;
             this.data = options;
             this.render();
-            this.$el.css({'right': '0px'});
-            this.setConMaxHeight();
+
+            if ($('#' + this.id).length == 0) {
+                this.dirView.$mainCon.append(this.$el);
+                if (!this.$el.is(':visible')) {
+                    this.$el.show();
+                }
+            } else {
+                this.$el.show();
+            }
         },
 
         showImg: function() {
diff --git a/static/scripts/app/views/dirent-grid.js b/static/scripts/app/views/dirent-grid.js
index 7673e85875..ad876b2d34 100644
--- a/static/scripts/app/views/dirent-grid.js
+++ b/static/scripts/app/views/dirent-grid.js
@@ -91,7 +91,7 @@ define([
 
         showPopupMenu: function(e) {
             // make sure there is only 1 menu popup
-            $('.grid-item-op', this.dirView.$dirent_grid).remove();
+            $('.grid-item-op', this.dirView.$gridViewContainer).remove();
 
             var dir = this.dir;
             var template;
@@ -147,7 +147,7 @@ define([
 
         viewImageWithPopup: function() {
             if (this.model.get('is_img')) {
-                var index = $('.img-grid-item', this.dirView.$dirent_grid).index(this.$el);
+                var index = $('.img-grid-item', this.dirView.$gridViewContainer).index(this.$el);
                 $.magnificPopup.open(this.dirView.magnificPopupOptions, index); // open by index
             }
         },
@@ -167,7 +167,7 @@ define([
         del: function() {
             var _this = this;
             if (this.model.get('is_img')) {
-                var index = $('.img-grid-item', this.dirView.$dirent_grid).index(this.$el);
+                var index = $('.img-grid-item', this.dirView.$gridViewContainer).index(this.$el);
             }
 
             this.closeMenu();
@@ -222,7 +222,7 @@ define([
             };
 
             if (this.model.get('is_img') && op_type == 'mv') {
-                var index = $('.img-grid-item', this.dirView.$dirent_grid).index(this.$el);
+                var index = $('.img-grid-item', this.dirView.$gridViewContainer).index(this.$el);
                 $.extend(options, {
                     'dirView': this.dirView,
                     'imgIndex': index
@@ -242,7 +242,7 @@ define([
             };
 
             if (this.model.get('is_img')) {
-                var index = $('.img-grid-item', this.dirView.$dirent_grid).index(this.$el);
+                var index = $('.img-grid-item', this.dirView.$gridViewContainer).index(this.$el);
                 $.extend(options, {
                     'dirView': this.dirView,
                     'imgIndex': index
@@ -287,8 +287,12 @@ define([
         },
 
         viewDetails: function() {
-            var _this = this;
+            if (this.dirView.fileCommentsView.$el.is(':visible')) {
+                this.dirView.fileCommentsView.hide();
+            }
 
+            var _this = this;
+            var detailsView = this.dirView.direntDetailsView;
             var file_icon_size = Common.isHiDPI() ? 48 : 24;
             var data = {
                 repo_id: this.dir.repo_id,
@@ -310,7 +314,6 @@ define([
                 });
             }
 
-            var detailsView = this.dirView.direntDetailsView;
             detailsView.show(data);
 
             if (this.model.get('perm') == 'rw') {
@@ -388,6 +391,10 @@ define([
         },
 
         viewFileComments: function() {
+            if (this.dirView.direntDetailsView.$el.is(':visible')) {
+                this.dirView.direntDetailsView.hide();
+            }
+
             var file_icon_size = Common.isHiDPI() ? 48 : 24;
             this.dirView.fileCommentsView.show({
                 'is_repo_owner': this.dir.is_repo_owner,
diff --git a/static/scripts/app/views/dirent.js b/static/scripts/app/views/dirent.js
index 00fe12d7fd..57b1b61324 100644
--- a/static/scripts/app/views/dirent.js
+++ b/static/scripts/app/views/dirent.js
@@ -38,8 +38,6 @@ define([
         render: function() {
             var dir = this.dir;
             var dirent_path = Common.pathJoin([dir.path, this.model.get('obj_name')]);
-            var is_pro = app.pageOptions.is_pro;
-            var file_audit_enabled = app.pageOptions.file_audit_enabled;
             var file_icon_size = Common.isHiDPI() ? 48 : 24;
             var template;
             if (this.model.get('is_dir')) {
@@ -55,16 +53,18 @@ define([
                 icon_url: this.model.getIconUrl(file_icon_size),
                 url: this.model.getWebUrl(),
                 download_url: this.model.getDownloadUrl(),
+
                 category: dir.category,
                 repo_id: dir.repo_id,
                 is_repo_owner: dir.is_repo_owner,
                 is_virtual: dir.is_virtual,
+                repo_encrypted: dir.encrypted,
                 has_been_shared_out: dir.has_been_shared_out,
+
                 can_generate_share_link: app.pageOptions.can_generate_share_link,
                 can_generate_upload_link: app.pageOptions.can_generate_upload_link,
-                is_pro: is_pro,
-                file_audit_enabled: file_audit_enabled,
-                repo_encrypted: dir.encrypted
+                is_pro: app.pageOptions.is_pro,
+                file_audit_enabled: app.pageOptions.file_audit_enabled
             }));
             this.$('.file-locked-icon').attr('title', gettext("locked by {placeholder}").replace('{placeholder}', this.model.get('lock_owner_name')));
             this.dropdown = new DropdownView({
@@ -115,10 +115,12 @@ define([
         clickItem: function(e) {
             var target =  e.target || event.srcElement;
             if (this.$('td').is(target)) {
-                if ($('#dirent-details').css('right') == '0px') { // after `#dirent-details` is shown
+                if (this.dirView.direntDetailsView.$el.is(':visible')) {
                     this.viewDetails();
                 }
-                if (this.model.get('is_file') && $('#file-comments').css('right') == '0px') {
+
+                if (this.model.get('is_file') &&
+                    this.dirView.fileCommentsView.$el.is(':visible')) {
                     this.viewFileComments();
                 }
             }
@@ -151,7 +153,6 @@ define([
                 $dirents_op.hide();
                 $curDirOps.show();
             }
-            dirView.updateDirOpBarUI();
             if (checked_num == dirView.$('tr:gt(0)').length) {
                 $toggle_all_checkbox.prop('checked', true);
             } else {
@@ -347,7 +348,7 @@ define([
         },
 
         viewImageWithPopup: function() {
-            var index = $('.img-name-link', this.dirView.$dirent_list).index(this.$('.img-name-link'));
+            var index = $('.img-name-link', this.dirView.$table).index(this.$('.img-name-link'));
             $.magnificPopup.open(this.dirView.magnificPopupOptions, index);
         },
 
@@ -379,7 +380,7 @@ define([
         del: function() {
             var _this = this;
             if (this.model.get('is_img')) {
-                var index = $('.img-name-link', this.dirView.$dirent_list).index(this.$('.img-name-link'));
+                var index = $('.img-name-link', this.dirView.$table).index(this.$('.img-name-link'));
             }
 
             var dirent_name = this.model.get('obj_name');
@@ -443,7 +444,7 @@ define([
                 _this.$el.attr('draggable', true);
 
                 if (_this.model.get('is_img')) {
-                    var index = $('.img-name-link', _this.dirView.$dirent_list).index(_this.$('.img-name-link'));
+                    var index = $('.img-name-link', _this.dirView.$table).index(_this.$('.img-name-link'));
                     _this.dirView.updateMagnificPopupOptions({
                         'op': 'update-item',
                         'index': index,
@@ -521,7 +522,7 @@ define([
                 'op_type': op_type
             };
             if (this.model.get('is_img') && op_type == 'mv') {
-                var index = $('.img-name-link', this.dirView.$dirent_list).index(this.$('.img-name-link'));
+                var index = $('.img-name-link', this.dirView.$table).index(this.$('.img-name-link'));
                 $.extend(options, {
                     'dirView': this.dirView,
                     'imgIndex': index
@@ -573,8 +574,12 @@ define([
         },
 
         viewDetails: function() {
-            var _this = this;
+            if (this.dirView.fileCommentsView.$el.is(':visible')) {
+                this.dirView.fileCommentsView.hide();
+            }
 
+            var _this = this;
+            var detailsView = this.dirView.direntDetailsView;
             var file_icon_size = Common.isHiDPI() ? 48 : 24;
             var data = {
                 repo_id: this.dir.repo_id,
@@ -596,7 +601,6 @@ define([
                 });
             }
 
-            var detailsView = this.dirView.direntDetailsView;
             detailsView.show(data);
 
             if (this.model.get('perm') == 'rw') {
@@ -674,6 +678,10 @@ define([
         },
 
         viewFileComments: function() {
+            if (this.dirView.direntDetailsView.$el.is(':visible')) {
+                this.dirView.direntDetailsView.hide();
+            }
+
             var file_icon_size = Common.isHiDPI() ? 48 : 24;
             this.dirView.fileCommentsView.show({
                 'is_repo_owner': this.dir.is_repo_owner,
diff --git a/static/scripts/app/views/file-comments.js b/static/scripts/app/views/file-comments.js
index fde2eda6ee..6e5486613e 100644
--- a/static/scripts/app/views/file-comments.js
+++ b/static/scripts/app/views/file-comments.js
@@ -11,12 +11,12 @@ define([
     var View = Backbone.View.extend({
 
         id: 'file-comments',
-        className: 'right-side-panel',
+        className: 'comments-panel',
 
         template: _.template($('#file-comment-panel-tmpl').html()),
 
-        initialize: function() {
-            $("#main").append(this.$el);
+        initialize: function(options) {
+            this.dirView = options.dirView;
 
             this.collection = new Collection();
             this.listenTo(this.collection, 'add', this.addOne);
@@ -29,9 +29,6 @@ define([
                     _this.hide();
                 }
             });
-            $(window).resize(function() {
-                _this.setConHeight();
-            });
         },
 
         events: {
@@ -65,14 +62,21 @@ define([
                 'icon_url': options.icon_url,
                 'file_name': options.file_name
             });
-            this.$el.css({'right': 0});
-            this.setConHeight();
+
+            if ($('#' + this.id).length == 0) {
+                this.dirView.$mainCon.append(this.$el);
+                if (!this.$el.is(':visible')) {
+                    this.$el.show();
+                }
+            } else {
+                this.$el.show();
+            }
+
             this.getContent();
         },
 
         hide: function() {
-            this.$el.css({'right': '-400px'});
-            this.$el.empty();
+            this.$el.hide();
         },
 
         reset: function() {
@@ -178,15 +182,6 @@ define([
             this.$listContainer.append(view.render().el);
         },
 
-        setConHeight: function() {
-            $('.file-discussions-con', this.$el).css({
-                'max-height': $(window).height()
-                    - this.$el.offset().top
-                    - $('.file-discussions-hd', this.$el).outerHeight(true)
-                    - $('.file-discussions-footer', this.$el).outerHeight(true)
-            });
-        },
-
         scrollConToBottom: function() {
             var $el = this.$('.file-discussions-con');
             $el.scrollTop($el[0].scrollHeight - $el[0].clientHeight);
diff --git a/static/scripts/app/views/fileupload.js b/static/scripts/app/views/fileupload.js
index 74b74988ef..e554b311d7 100644
--- a/static/scripts/app/views/fileupload.js
+++ b/static/scripts/app/views/fileupload.js
@@ -93,7 +93,7 @@ define([
             })
             .bind('fileuploadadd', function(e, data) {
                 // for drag & drop
-                if (!dirView.$el.is(':visible')) {
+                if (!$('#dir-view').is(':visible')) {
                     return false;
                 }
                 if (dirents.user_perm && dirents.user_perm != 'rw') {
diff --git a/static/scripts/app/views/folder-perm.js b/static/scripts/app/views/folder-perm.js
index 63c8f8aef9..f4aa2cdf28 100644
--- a/static/scripts/app/views/folder-perm.js
+++ b/static/scripts/app/views/folder-perm.js
@@ -31,7 +31,6 @@ define([
                 });
             }
             this.$el.modal({
-                appendTo: "#main",
                 focus: false
             });
             if ($(window).width() >= 768) {
diff --git a/static/scripts/app/views/group-discussions.js b/static/scripts/app/views/group-discussions.js
index d5b351528b..1cf7ba3732 100644
--- a/static/scripts/app/views/group-discussions.js
+++ b/static/scripts/app/views/group-discussions.js
@@ -10,7 +10,7 @@ define([
 
     var View = Backbone.View.extend({
         id: 'group-discussions',
-        className: 'right-side-panel',
+        className: 'comments-panel',
 
         template:  _.template($('#group-discussions-tmpl').html()),
 
@@ -22,9 +22,6 @@ define([
             this.listenTo(this.collection, 'reset', this.reset);
 
             this.render();
-            $("#main").append(this.$el);
-
-            app.ui.groupDiscussions = this;
 
             var _this = this;
             $(document).keydown(function(e) {
@@ -33,10 +30,6 @@ define([
                     _this.hide();
                 }
             });
-
-            $(window).resize(function() {
-                _this.setConMaxHeight();
-            });
         },
 
         events: {
@@ -83,6 +76,7 @@ define([
         render: function() {
             this.$el.html(this.template());
 
+            this.$con = this.$('#group-discussions-con');
             this.$loadingTip = this.$('.loading-tip');
             this.$listContainer = this.$('#group-discussion-list');
             this.$emptyTip = this.$('.no-discussion-tip');
@@ -128,38 +122,40 @@ define([
                 }
             });
 
-            this.$(".msg-input").focus();
-            app.router.navigate('group/' + this.groupView.group.id + '/discussions/');
-        },
-
-        // set max-height for '.sf-popover-con'
-        setConMaxHeight: function() {
-            this.$('.group-discussions-con').css({
-                'height': $(window).height() - this.$el.offset().top
-                    - this.$('.group-discussions-hd').outerHeight(true)
-                    - this.$('.group-discussions-footer').outerHeight(true)
-            });
+            //this.$(".msg-input").focus();
+            //app.router.navigate('group/' + this.groupView.group.id + '/discussions/');
         },
 
         hide: function() {
-            this.$el.css({'right': '-400px'});
+            this.$el.hide();
         },
 
         close: function() {
-            app.router.navigate('group/' + this.groupView.group.id + '/');
+            //app.router.navigate('group/' + this.groupView.group.id + '/');
             this.hide();
             return false;
         },
 
         toggle: function() {
-            this.show();
+            if (this.$el.is(':visible')) {
+                this.hide();
+            } else {
+                this.show();
+            }
             return false;
         },
 
         show: function() {
+            if (!$('#' + this.id).length) {
+                this.groupView.$mainCon.append(this.$el);
+                if (!this.$el.is(':visible')) { // `this.hide` was called last time
+                    this.$el.show();
+                }
+            } else {
+                this.$el.show();
+            }
+
             this.showContent();
-            this.$el.css({'right': '0px'});
-            this.setConMaxHeight();
         },
 
         replyTo: function(to_user) {
@@ -189,7 +185,7 @@ define([
                         sumHeight += $(this).outerHeight(true);
                     });
                     // scroll
-                    _this.$('.group-discussions-con').scrollTop(sumHeight - 50); // 50: keep at least 50px gap from the top
+                    _this.$con.scrollTop(sumHeight - 50); // 50: keep at least 50px gap from the top
                 },
                 error: function(collection, response, opts) {
                     var err_msg;
@@ -254,7 +250,7 @@ define([
 
         // scroll to the bottom
         scrollConToBottom: function() {
-            var $el = this.$('.group-discussions-con');
+            var $el = this.$con;
             $el.scrollTop($el[0].scrollHeight - $el[0].clientHeight);
         }
 
diff --git a/static/scripts/app/views/group-manage-members.js b/static/scripts/app/views/group-manage-members.js
index 4a8bf8d334..42af17c11e 100644
--- a/static/scripts/app/views/group-manage-members.js
+++ b/static/scripts/app/views/group-manage-members.js
@@ -22,7 +22,6 @@ define([
             // for long group name
             this.$('.op-target').css({'max-width': 270});
             this.$el.modal({
-                appendTo: '#main',
                 focus: false,
                 containerCss: {
                     'width': 560
diff --git a/static/scripts/app/views/group-settings.js b/static/scripts/app/views/group-settings.js
index 2371c27e8b..dcf7973b7c 100644
--- a/static/scripts/app/views/group-settings.js
+++ b/static/scripts/app/views/group-settings.js
@@ -122,8 +122,8 @@ define([
                     },
                     success: function() {
                         $.modal.close();
+                        _this.groupView.updateName(new_name);
                         app.ui.sideNavView.updateGroups();
-                        _this.groupView.renderGroupTop();
                     },
                     error: function(xhr) {
                         var error_msg;
@@ -218,9 +218,13 @@ define([
                 data: {
                     'wiki_enabled': wiki_enabled
                 },
-                success: function() {
+                success: function(data) {
                     _this.hide();
-                    _this.groupView.renderGroupTop();
+                    _this.groupView.group = data;
+                    _this.groupView.renderToolbar2({
+                        'id': data.id,
+                        'wiki_enabled': data.wiki_enabled
+                    });
                 },
                 error: function(xhr) {
                     var error_msg;
@@ -345,7 +349,7 @@ define([
                     url: Common.getUrl({
                         'name': 'group_member',
                         'group_id': _this.groupView.group.id,
-                        'email': encodeURIComponent(app.pageOptions.username),
+                        'email': encodeURIComponent(app.pageOptions.username)
                     }),
                     type: 'delete',
                     dataType: 'json',
diff --git a/static/scripts/app/views/group.js b/static/scripts/app/views/group.js
index 436c5c1a05..ec26233196 100644
--- a/static/scripts/app/views/group.js
+++ b/static/scripts/app/views/group.js
@@ -14,20 +14,22 @@ define([
     'use strict';
 
     var GroupView = Backbone.View.extend({
-        id: 'group',
+        el: '.main-panel',
 
         template: _.template($('#group-tmpl').html()),
-        groupTopTemplate: _.template($('#group-top-tmpl').html()),
-        reposHdTemplate: _.template($('#shared-repos-hd-tmpl').html()),
-        mobileReposHdTemplate: _.template($('#shared-repos-hd-mobile-tmpl').html()),
+        toolbarTemplate: _.template($('#group-toolbar-tmpl').html()),
+        toolbar2Template: _.template($('#group-toolbar2-tmpl').html()),
+        pathTemplate: _.template($('#group-path-tmpl').html()),
+        theadTemplate: _.template($('#shared-repos-hd-tmpl').html()),
+        theadMobileTemplate: _.template($('#shared-repos-hd-mobile-tmpl').html()),
 
         events: {
             'click #group-settings-icon': 'toggleSettingsPanel',
             'click #group-members-icon': 'toggleMembersPanel',
             'click #group-discussions-icon': 'toggleDiscussionsPanel',
-            'click .repo-create': 'createRepo',
-            'click .by-name': 'sortByName',
-            'click .by-time': 'sortByTime'
+            'click #group-toolbar .repo-create': 'createRepo',
+            'click #group-repos .by-name': 'sortByName',
+            'click #group-repos .by-time': 'sortByTime'
         },
 
         initialize: function(options) {
@@ -37,10 +39,9 @@ define([
             this.listenTo(this.repos, 'add', this.addOne);
             this.listenTo(this.repos, 'reset', this.reset);
 
-            this.settingsView = new GroupSettingsView({ groupView: this });
-            this.membersView = new GroupMembersView({ groupView: this });
-            this.discussionsView = new GroupDiscussionsView({ groupView: this });
-            this.render();
+            this.settingsView = new GroupSettingsView({groupView: this});
+            this.membersView = new GroupMembersView({groupView: this});
+            this.discussionsView = new GroupDiscussionsView({groupView: this});
         },
 
         addOne: function(repo, collection, options) {
@@ -57,17 +58,15 @@ define([
             }
         },
 
-        renderReposHd: function() {
-            var tmpl = $(window).width() >= 768 ? this.reposHdTemplate : this.mobileReposHdTemplate;
+        renderThead: function() {
+            var tmpl = $(window).width() >= 768 ? this.theadTemplate : this.theadMobileTemplate;
             this.$tableHead.html(tmpl());
         },
 
         reset: function() {
-            this.$('.error').hide();
-            this.$loadingTip.hide();
             if (this.repos.length) {
                 this.$emptyTip.hide();
-                this.renderReposHd();
+                this.renderThead();
                 this.$tableBody.empty();
 
                 // sort
@@ -83,9 +82,14 @@ define([
 
         },
 
-        renderGroupTop: function(options) {
+        showGroup: function(options) {
             var _this = this;
-            var $groupTop = $('#group-top');
+
+            this.$table.hide();
+            this.$emptyTip.hide();
+            this.$error.hide();
+            this.$loadingTip.show();
+
             $.ajax({
                 url: Common.getUrl({
                     'name': 'group',
@@ -93,9 +97,17 @@ define([
                 }),
                 cache: false,
                 dataType: 'json',
-                success: function (data) {
+                success: function(data) {
                     _this.group = data;
-                    $groupTop.html(_this.groupTopTemplate(data));
+                    _this.$toolbar.removeClass('hide');
+                    _this.renderPath({
+                        'name': data.name
+                    });
+                    _this.renderToolbar2({
+                        'id': data.id,
+                        'wiki_enabled': data.wiki_enabled
+                    });
+                    _this.showRepoList();
                     if (options) {
                         if (options.showDiscussions) {
                             _this.showDiscussions();
@@ -109,29 +121,25 @@ define([
                     } else {
                         err_msg = gettext("Please check the network.");
                     }
-                    $groupTop.html('<p class="error">' + err_msg + '</p>');
+                    _this.$toolbar.addClass('hide');
+                    _this.$path.empty();
+                    _this.$toolbar2.empty();
+                    _this.$loadingTip.hide();
+                    _this.$error.html(err_msg).show();
                 }
             });
         },
 
-        showRepoList: function(group_id, options) {
-            this.group_id = group_id;
-            this.$emptyTip.hide();
-            this.renderGroupTop(options);
-            this.$table.hide();
-            var $loadingTip = this.$loadingTip;
-            $loadingTip.show();
+        showRepoList: function() {
             var _this = this;
-            this.repos.setGroupID(group_id);
+            this.repos.setGroupID(this.group_id);
             this.repos.fetch({
                 cache: false,
                 reset: true,
                 data: {from: 'web'},
-                success: function (collection, response, opts) {
+                success: function(collection, response, opts) {
                 },
-                error: function (collection, response, opts) {
-                    $loadingTip.hide();
-                    var $error = _this.$('.error');
+                error: function(collection, response, opts) {
                     var err_msg;
                     if (response.responseText) {
                         if (response['status'] == 401 || response['status'] == 403) {
@@ -142,34 +150,59 @@ define([
                     } else {
                         err_msg = gettext('Please check the network.');
                     }
-                    $error.html(err_msg).show();
+                    _this.$error.html(err_msg).show();
+                },
+                complete: function() {
+                    _this.$loadingTip.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');
+        renderToolbar: function() {
+            this.$toolbar = $('<div class="cur-view-toolbar hide" id="group-toolbar"></div>').html(this.toolbarTemplate());
+            this.$('.common-toolbar').before(this.$toolbar);
+        },
+
+        renderMainCon: function() {
+            this.$mainCon = $('<div class="main-panel-main main-panel-main-with-side" id="group"></div>').html(this.template());
+            this.$el.append(this.$mainCon);
+
+            this.$path = $('.group-path', this.$mainCon);
+            this.$toolbar2 = $('.group-toolbar-2', this.$mainCon);
+            this.$table = $('table', this.$mainCon);
+            this.$tableHead = $('thead', this.$table);
+            this.$tableBody = $('tbody', this.$table);
+            this.$loadingTip = $('.loading-tip', this.$mainCon);
             this.$emptyTip = this.$('#group-repos .empty-tips');
-            this.attached = false;
+            this.$error = $('.error', this.$mainCon);
+        },
+
+        renderPath: function(data) {
+            this.$path.html(this.pathTemplate(data));
+        },
+
+        renderToolbar2: function(data) {
+            this.$toolbar2.html(this.toolbar2Template(data));
+        },
+
+        // update group name. e.g 'rename'
+        updateName: function(new_name) {
+            this.group.name = new_name;
+            $('.group-name', this.$mainCon).html(Common.HTMLescape(new_name));
         },
 
         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;
+            if (!$('#group').length) {
+                this.renderToolbar();
+                this.renderMainCon();
             }
-            this.showRepoList(group_id, options);
+            this.group_id = group_id;
+            this.showGroup(options);
         },
 
         hide: function() {
-            this.attached = false;
-            this.$el.detach();
+            this.$toolbar.detach();
+            this.$mainCon.detach();
         },
 
         createRepo: function() {
diff --git a/static/scripts/app/views/groups.js b/static/scripts/app/views/groups.js
index 5ac9f0a9b0..663f0eb3f2 100644
--- a/static/scripts/app/views/groups.js
+++ b/static/scripts/app/views/groups.js
@@ -9,16 +9,16 @@ define([
     'use strict';
 
     var GroupsView = Backbone.View.extend({
-        id: 'groups',
+        el: '.main-panel',
 
         template: _.template($('#groups-tmpl').html()),
+        toolbarTemplate: _.template($('#groups-toolbar-tmpl').html()),
+        addGroupTemplate: _.template($('#add-group-form-tmpl').html()),
 
         initialize: function(options) {
             this.groups = new Groups();
             this.listenTo(this.groups, 'add', this.addOne);
             this.listenTo(this.groups, 'reset', this.reset);
-
-            this.render();
         },
 
         events: {
@@ -50,8 +50,15 @@ define([
             }
         },
 
-        render: function() {
-            this.$el.html(this.template());
+        renderToolbar: function() {
+            this.$toolbar = $('<div class="cur-view-toolbar" id="groups-toolbar"></div>').html(this.toolbarTemplate());
+            this.$('.common-toolbar').before(this.$toolbar);
+        },
+
+        renderMainCon: function() {
+            this.$mainCon = $('<div class="main-panel-main" id="groups"></div>').html(this.template());
+            this.$el.append(this.$mainCon);
+
             this.$loadingTip = this.$('.loading-tip');
             this.$groupList = this.$('#group-list');
             this.$emptyTip = this.$('.empty-tips');
@@ -88,16 +95,19 @@ define([
         },
 
         show: function() {
-            $("#right-panel").html(this.$el);
+            this.renderToolbar();
+            this.renderMainCon();
+
             this.showGroups();
         },
 
         hide: function() {
-            this.$el.detach();
+            this.$toolbar.detach();
+            this.$mainCon.detach();
         },
 
         addGroup: function () {
-            var $form = $('#group-add-form');
+            var $form = $(this.addGroupTemplate());
             $form.modal();
             $('#simplemodal-container').css({'height':'auto'});
 
diff --git a/static/scripts/app/views/invitations.js b/static/scripts/app/views/invitations.js
index e610dcf385..2dc2be486a 100644
--- a/static/scripts/app/views/invitations.js
+++ b/static/scripts/app/views/invitations.js
@@ -12,20 +12,27 @@ define([
 
     var InvitationsView = Backbone.View.extend({
 
-        id: 'invitations',
+        el: '.main-panel',
 
         template: _.template($('#invitations-tmpl').html()),
+        toolbarTemplate: _.template($('#invitations-toolbar-tmpl').html()),
         inviteFormTemplate: _.template($('#invitation-form-tmpl').html()),
 
         initialize: function() {
             this.collection = new InvitedPeopleCollection();
             this.listenTo(this.collection, 'add', this.addOne);
             this.listenTo(this.collection, 'reset', this.reset);
-            this.render();
         },
 
-        render: function() {
-            this.$el.html(this.template());
+        renderToolbar: function() {
+            this.$toolbar = $('<div class="cur-view-toolbar" id="invitations-toolbar"></div>').html(this.toolbarTemplate());
+            this.$('.common-toolbar').before(this.$toolbar);
+        },
+
+        renderMainCon: function() {
+            this.$mainCon = $('<div class="main-panel-main" id="invitations"></div>').html(this.template());
+            this.$el.append(this.$mainCon);
+
             this.$loadingTip = this.$('.loading-tip');
             this.$table = this.$('table');
             this.$tableBody = $('tbody', this.$table);
@@ -42,7 +49,7 @@ define([
             var $form = $(this.inviteFormTemplate());
             var form_id = $form.attr('id');
 
-            $form.modal({appendTo:'#main'});
+            $form.modal();
             $('#simplemodal-container').css({'height':'auto'});
 
             $form.submit(function() {
@@ -120,10 +127,9 @@ define([
         },
 
         show: function() {
-            if (!this.attached) {
-                this.attached = true;
-                $("#right-panel").html(this.$el);
-            }
+            this.renderToolbar();
+            this.renderMainCon();
+
             this.showContent();
         },
 
@@ -154,8 +160,8 @@ define([
         },
 
         hide: function() {
-            this.$el.detach();
-            this.attached = false;
+            this.$toolbar.detach();
+            this.$mainCon.detach();
         }
 
     });
diff --git a/static/scripts/app/views/my-deleted-repos.js b/static/scripts/app/views/my-deleted-repos.js
index 27f67bc48a..5b2e669375 100644
--- a/static/scripts/app/views/my-deleted-repos.js
+++ b/static/scripts/app/views/my-deleted-repos.js
@@ -9,11 +9,11 @@ define([
     'use strict';
 
     var ReposView = Backbone.View.extend({
-        id: "my-deleted-repos",
+        el: ".main-panel",
 
         template: _.template($('#my-deleted-repos-tmpl').html()),
-        reposHdTemplate: _.template($('#my-deleted-repos-hd-tmpl').html()),
-        mobileReposHdTemplate: _.template($('#my-deleted-repos-hd-mobile-tmpl').html()),
+        theadTemplate: _.template($('#my-deleted-repos-hd-tmpl').html()),
+        theadMobileTemplate: _.template($('#my-deleted-repos-hd-mobile-tmpl').html()),
 
         events: {
         },
@@ -22,12 +22,12 @@ define([
             this.repos = new RepoCollection();
             this.listenTo(this.repos, 'add', this.addOne);
             this.listenTo(this.repos, 'reset', this.reset);
-
-            this.render();
         },
 
-        render: function() {
-            this.$el.html(this.template());
+        renderMainCon: function() {
+            this.$mainCon = $('<div class="main-panel-main" id="my-deleted-repos"></div>').html(this.template());
+            this.$el.append(this.$mainCon);
+
             this.$table = this.$('table');
             this.$tableHead = $('thead', this.$table);
             this.$tableBody = $('tbody', this.$table);
@@ -42,8 +42,8 @@ define([
             this.$tableBody.append(view.render().el);
         },
 
-        renderReposHd: function() {
-            var tmpl = $(window).width() >= 768 ? this.reposHdTemplate : this.mobileReposHdTemplate;
+        renderThead: function() {
+            var tmpl = $(window).width() >= 768 ? this.theadTemplate : this.theadMobileTemplate;
             this.$tableHead.html(tmpl());
         },
 
@@ -52,7 +52,7 @@ define([
             this.$loadingTip.hide();
             if (this.repos.length) {
                 this.$emptyTip.hide();
-                this.renderReposHd();
+                this.renderThead();
                 this.$tableBody.empty();
 
                 this.repos.each(this.addOne, this);
@@ -91,12 +91,12 @@ define([
         },
 
         show: function() {
-            $("#right-panel").html(this.$el);
+            this.renderMainCon();
             this.showRepos();
         },
 
         hide: function() {
-            this.$el.detach();
+            this.$mainCon.detach();
         }
 
     });
diff --git a/static/scripts/app/views/myhome-repos.js b/static/scripts/app/views/myhome-repos.js
index 754d6ae1e0..f38e4d69a3 100644
--- a/static/scripts/app/views/myhome-repos.js
+++ b/static/scripts/app/views/myhome-repos.js
@@ -13,17 +13,19 @@ define([
     'use strict';
 
     var ReposView = Backbone.View.extend({
-        id: "my-own-repos",
+        el: '.main-panel',
 
         template: _.template($('#my-own-repos-tmpl').html()),
-        reposHdTemplate: _.template($('#my-repos-hd-tmpl').html()),
-        mobileReposHdTemplate: _.template($('#my-repos-hd-mobile-tmpl').html()),
+        toolbarTemplate: _.template($('#my-repos-toolbar-tmpl').html()),
+        theadTemplate: _.template($('#my-repos-thead-tmpl').html()),
+        theadMobileTemplate: _.template($('#my-repos-thead-mobile-tmpl').html()),
 
         events: {
-            'click .repo-create': 'createRepo',
-            'click .by-name': 'sortByName',
-            'click .by-time': 'sortByTime',
-            'click #my-libs-more-op a': 'closeDropdown'
+            'click #my-repos-toolbar .repo-create': 'createRepo',
+            'click #my-libs-more-op a': 'closeDropdown',
+
+            'click #my-repos .by-name': 'sortByName',
+            'click #my-repos .by-time': 'sortByTime'
         },
 
         initialize: function(options) {
@@ -32,13 +34,6 @@ define([
             this.listenTo(this.repos, 'reset', this.reset);
 
             this.repoDetailsView = new RepoDetailsView();
-
-            this.render();
-
-            this.more_op_dropdown = new DropdownView({
-                el: this.$("#my-libs-more-op"),
-                right: 0
-            })
         },
 
         addOne: function(repo, collection, options) {
@@ -50,21 +45,16 @@ define([
             }
         },
 
-        renderReposHd: function() {
-            var tmpl = $(window).width() >= 768 ? this.reposHdTemplate : this.mobileReposHdTemplate;
-            this.$tableHead.html(tmpl());
-        },
-
         reset: function() {
             this.$('.error').hide();
             this.$loadingTip.hide();
             if (this.repos.length) {
                 this.$emptyTip.hide();
-                this.renderReposHd();
+                this.renderThead();
                 this.$tableBody.empty();
 
                 // sort
-                Common.updateSortIconByMode({'context': this.$el});
+                Common.updateSortIconByMode({'context': this.$table});
                 Common.sortLibs({'libs': this.repos});
 
                 this.repos.each(this.addOne, this);
@@ -75,7 +65,7 @@ define([
             }
 
             if (app.pageOptions.guide_enabled) {
-                $('#guide-for-new').modal({appendTo: '#main', focus:false});
+                $('#guide-for-new').modal({focus:false});
                 $('#simplemodal-container').css({'height':'auto'});
                 app.pageOptions.guide_enabled = false;
             }
@@ -86,7 +76,7 @@ define([
             this.$loadingTip.show();
             var _this = this;
             this.repos.fetch({
-                cache: false, // for IE
+                cache: false,
                 reset: true,
                 success: function (collection, response, opts) {
                 },
@@ -108,26 +98,43 @@ define([
             });
         },
 
-        render: function() {
-            this.$el.html(this.template());
+        renderThead: function() {
+            var tmpl = $(window).width() >= 768 ? this.theadTemplate : this.theadMobileTemplate;
+            this.$tableHead.html(tmpl());
+        },
+
+        renderToolbar: function() {
+            this.$toolbar = $('<div class="cur-view-toolbar" id="my-repos-toolbar"></div>').html(this.toolbarTemplate());
+            this.$('.common-toolbar').before(this.$toolbar);
+
+            this.more_op_dropdown = new DropdownView({
+                el: this.$("#my-libs-more-op")
+            });
+        },
+
+        renderMainCon: function() {
+            this.$mainCon = $('<div class="main-panel-main main-panel-main-with-side" id="my-repos"></div>').html(this.template());
+            this.$el.append(this.$mainCon);
+
             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);
+            if (!$('#my-repos').length) {
+                this.renderToolbar();
+                this.renderMainCon();
+            }
+
             this.showMyRepos();
         },
 
         hide: function() {
-            this.$el.detach();
-
-            this.repoDetailsView.hide();
+            this.$toolbar.detach();
+            this.$mainCon.detach();
         },
 
         createRepo: function() {
@@ -136,7 +143,7 @@ define([
 
         sortByName: function() {
             Common.toggleSortByNameMode();
-            Common.updateSortIconByMode({'context': this.$el});
+            Common.updateSortIconByMode({'context': this.$table});
             Common.sortLibs({'libs': this.repos});
 
             this.$tableBody.empty();
@@ -148,7 +155,7 @@ define([
 
         sortByTime: function() {
             Common.toggleSortByTimeMode();
-            Common.updateSortIconByMode({'context': this.$el});
+            Common.updateSortIconByMode({'context': this.$table});
             Common.sortLibs({'libs': this.repos});
 
             this.$tableBody.empty();
diff --git a/static/scripts/app/views/myhome-shared-repos.js b/static/scripts/app/views/myhome-shared-repos.js
index 00cde31e3f..122ad646af 100644
--- a/static/scripts/app/views/myhome-shared-repos.js
+++ b/static/scripts/app/views/myhome-shared-repos.js
@@ -9,17 +9,16 @@ define([
     'use strict';
 
     var SharedReposView = Backbone.View.extend({
-        id: 'repos-shared-to-me',
+        el: '.main-panel',
 
         template: _.template($('#repos-shared-to-me-tmpl').html()),
-        reposHdTemplate: _.template($('#shared-repos-hd-tmpl').html()),
-        mobileReposHdTemplate: _.template($('#shared-repos-hd-mobile-tmpl').html()),
+        theadTemplate: _.template($('#shared-repos-hd-tmpl').html()),
+        theadMobileTemplate: _.template($('#shared-repos-hd-mobile-tmpl').html()),
 
         initialize: function(options) {
             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) {
@@ -31,8 +30,8 @@ define([
             }
         },
 
-        renderReposHd: function() {
-            var tmpl = $(window).width() >= 768 ? this.reposHdTemplate : this.mobileReposHdTemplate;
+        renderThead: function() {
+            var tmpl = $(window).width() >= 768 ? this.theadTemplate : this.theadMobileTemplate;
             this.$tableHead.html(tmpl());
         },
 
@@ -41,11 +40,11 @@ define([
             this.$loadingTip.hide();
             if (this.repos.length) {
                 this.$emptyTip.hide();
-                this.renderReposHd();
+                this.renderThead();
                 this.$tableBody.empty();
 
                 // sort
-                Common.updateSortIconByMode({'context': this.$el});
+                Common.updateSortIconByMode({'context': this.$table});
                 Common.sortLibs({'libs': this.repos});
 
                 this.repos.each(this.addOne, this);
@@ -58,7 +57,6 @@ define([
         },
 
         showSharedRepos: function() {
-            this.$el.show();
             this.$table.hide();
             var $loadingTip = this.$loadingTip;
             $loadingTip.show();
@@ -85,33 +83,37 @@ define([
             });
         },
 
-        render: function() {
-            this.$el.html(this.template());
+        renderMainCon: function() {
+            this.$mainCon = $('<div class="main-panel-main" id="shared-repos"></div>').html(this.template());
+            this.$el.append(this.$mainCon);
+
             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);
+            if (!$('#shared-repos').length) {
+                this.renderMainCon();
+            }
+
             this.showSharedRepos();
         },
 
         hide: function() {
-            this.$el.detach();
+            this.$mainCon.detach();
         },
 
         events: {
-            'click .by-name': 'sortByName',
-            'click .by-time': 'sortByTime'
+            'click #shared-repos .by-name': 'sortByName',
+            'click #shared-repos .by-time': 'sortByTime'
         },
 
         sortByName: function() {
             Common.toggleSortByNameMode();
-            Common.updateSortIconByMode({'context': this.$el});
+            Common.updateSortIconByMode({'context': this.$table});
             Common.sortLibs({'libs': this.repos});
 
             this.$tableBody.empty();
@@ -122,7 +124,7 @@ define([
 
         sortByTime: function() {
             Common.toggleSortByTimeMode();
-            Common.updateSortIconByMode({'context': this.$el});
+            Common.updateSortIconByMode({'context': this.$table});
             Common.sortLibs({'libs': this.repos});
 
             this.$tableBody.empty();
diff --git a/static/scripts/app/views/organization.js b/static/scripts/app/views/organization.js
index 2481360b25..4fb3005b47 100644
--- a/static/scripts/app/views/organization.js
+++ b/static/scripts/app/views/organization.js
@@ -13,47 +13,57 @@ define([
     'use strict';
 
     var OrganizationView = Backbone.View.extend({
-        id: 'organization',
+        el: '.main-panel',
 
         template: _.template($('#organization-repos-tmpl').html()),
-        reposHdTemplate: _.template($('#shared-repos-hd-tmpl').html()),
-        mobileReposHdTemplate: _.template($('#shared-repos-hd-mobile-tmpl').html()),
+        toolbarTemplate: _.template($('#org-repos-toolbar-tmpl').html()),
+        theadTemplate: _.template($('#shared-repos-hd-tmpl').html()),
+        theadMobileTemplate: _.template($('#shared-repos-hd-mobile-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());
+        renderToolbar: function() {
+            this.$toolbar = $('<div class="cur-view-toolbar" id="org-repos-toolbar"></div>').html(this.toolbarTemplate());
+            this.$('.common-toolbar').before(this.$toolbar);
+
+            this.dropdown = new DropdownView({
+                el: this.$('#org-repos-toolbar .js-add-pub-lib-dropdown')
+            });
+        },
+
+        renderMainCon: function() {
+            this.$mainCon = $('<div class="main-panel-main" id="org-repos"></div>').html(this.template());
+            this.$el.append(this.$mainCon);
+
             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.dropdown = new DropdownView({
-                el: this.$('.js-add-pub-lib-dropdown'),
-                right: '0px'
-            });
+            return this;
         },
 
         show: function() {
-            $("#right-panel").html(this.$el);
+            this.renderToolbar();
+            this.renderMainCon();
+
             this.showRepoList();
         },
 
         hide: function() {
-            this.$el.detach();
+            this.$toolbar.detach();
+            this.$mainCon.detach();
         },
 
         events: {
-            'click .share-existing': 'addRepo',
-            'click .create-new': 'createRepo',
-            'click .by-name': 'sortByName',
-            'click .by-time': 'sortByTime'
+            'click #org-repos-toolbar .share-existing': 'addRepo',
+            'click #org-repos-toolbar .create-new': 'createRepo',
+            'click #org-repos .by-name': 'sortByName',
+            'click #org-repos .by-time': 'sortByTime'
         },
 
         createRepo: function() {
@@ -77,8 +87,8 @@ define([
             }
         },
 
-        renderReposHd: function() {
-            var tmpl = $(window).width() >= 768 ? this.reposHdTemplate : this.mobileReposHdTemplate;
+        renderThead: function() {
+            var tmpl = $(window).width() >= 768 ? this.theadTemplate : this.theadMobileTemplate;
             this.$tableHead.html(tmpl());
         },
 
@@ -87,7 +97,7 @@ define([
             this.$loadingTip.hide();
             if (this.repos.length) {
                 this.$emptyTip.hide();
-                this.renderReposHd();
+                this.renderThead();
                 this.$tableBody.empty();
 
                 // sort
diff --git a/static/scripts/app/views/repo-details.js b/static/scripts/app/views/repo-details.js
index f62a93a911..36d383bebf 100644
--- a/static/scripts/app/views/repo-details.js
+++ b/static/scripts/app/views/repo-details.js
@@ -8,13 +8,11 @@ define([
 
     var View = Backbone.View.extend({
         id: 'repo-details',
-        className: 'details-panel right-side-panel',
+        className: 'details-panel',
 
         template:  _.template($('#repo-details-tmpl').html()),
 
         initialize: function() {
-            $("#main").append(this.$el);
-
             var _this = this;
             $(document).keydown(function(e) {
                 // ESCAPE key pressed
@@ -22,10 +20,6 @@ define([
                     _this.hide();
                 }
             });
-
-            $(window).resize(function() {
-                _this.setConMaxHeight();
-            });
         },
 
         events: {
@@ -44,15 +38,8 @@ define([
             }
         },
 
-        setConMaxHeight: function() {
-            this.$('.right-side-panel-con').css({
-                'height': $(window).height() -  // this.$el `position:fixed; top:0;`
-                    this.$('.right-side-panel-hd').outerHeight(true)
-            });
-        },
-
         hide: function() {
-            this.$el.css({'right': '-320px'});
+            this.$el.hide();
         },
 
         close: function() {
@@ -63,8 +50,15 @@ define([
         show: function(options) {
             this.data = options;
             this.render();
-            this.$el.css({'right': '0px'});
-            this.setConMaxHeight();
+
+            if (!$('#' + this.id).length) {
+                $('#my-repos').append(this.$el);
+                if (!this.$el.is(':visible')) {
+                    this.$el.show();
+                }
+            } else {
+                this.$el.show();
+            }
         }
 
     });
diff --git a/static/scripts/app/views/repo.js b/static/scripts/app/views/repo.js
index a66ddd8d23..cc4a64d5b9 100644
--- a/static/scripts/app/views/repo.js
+++ b/static/scripts/app/views/repo.js
@@ -74,7 +74,7 @@ define([
         clickItem: function(e) {
             var target =  e.target || event.srcElement;
             if (this.$('td').is(target) &&
-                $('#repo-details').css('right') == '0px') { // after `#repo-details` is shown
+                this.myReposView.repoDetailsView.$el.is(':visible')) {
                 this.viewDetails();
             }
         },
diff --git a/static/scripts/app/views/share-admin-folders.js b/static/scripts/app/views/share-admin-folders.js
index 4c66154f8c..ff26fead83 100644
--- a/static/scripts/app/views/share-admin-folders.js
+++ b/static/scripts/app/views/share-admin-folders.js
@@ -10,7 +10,7 @@ define([
 
     var ShareAdminFoldersView = Backbone.View.extend({
 
-        id: 'share-admin-folders',
+        el: '.main-panel',
 
         template: _.template($('#share-admin-folders-tmpl').html()),
 
@@ -18,7 +18,6 @@ define([
             this.folders = new ShareAdminFolderCollection();
             this.listenTo(this.folders, 'add', this.addOne);
             this.listenTo(this.folders, 'reset', this.reset);
-            this.render();
 
             var _this = this;
             $(document).click(function(e) {
@@ -32,7 +31,7 @@ define([
         },
 
         events: {
-            'click .by-name': 'sortByName'
+            'click #share-admin-folders .by-name': 'sortByName'
         },
 
         sortByName: function() {
@@ -57,8 +56,10 @@ define([
             return false;
         },
 
-        render: function() {
-            this.$el.html(this.template());
+        renderMainCon: function() {
+            this.$mainCon = $('<div class="main-panel-main" id="share-admin-folders"></div>').html(this.template());
+            this.$el.append(this.$mainCon);
+
             this.$table = this.$('table');
             this.$sortIcon = $('.by-name .sort-icon', this.$table);
             this.$tableBody = $('tbody', this.$table);
@@ -67,15 +68,12 @@ define([
         },
 
         hide: function() {
-            this.$el.detach();
-            this.attached = false;
+            this.$mainCon.detach();
         },
 
         show: function() {
-            if (!this.attached) {
-                this.attached = true;
-                $("#right-panel").html(this.$el);
-            }
+            this.renderMainCon();
+
             this.showContent();
         },
 
diff --git a/static/scripts/app/views/share-admin-repos.js b/static/scripts/app/views/share-admin-repos.js
index 63d94fec4a..2097446592 100644
--- a/static/scripts/app/views/share-admin-repos.js
+++ b/static/scripts/app/views/share-admin-repos.js
@@ -10,7 +10,7 @@ define([
 
     var ShareAdminReposView = Backbone.View.extend({
 
-        id: 'share-admin-repos',
+        el: '.main-panel',
 
         template: _.template($('#share-admin-repos-tmpl').html()),
 
@@ -18,7 +18,6 @@ define([
             this.repos = new ShareAdminRepoCollection();
             this.listenTo(this.repos, 'add', this.addOne);
             this.listenTo(this.repos, 'reset', this.reset);
-            this.render();
 
             var _this = this;
             $(document).click(function(e) {
@@ -32,7 +31,7 @@ define([
         },
 
         events: {
-            'click .by-name': 'sortByName'
+            'click #share-admin-repos .by-name': 'sortByName'
         },
 
         sortByName: function() {
@@ -57,26 +56,23 @@ define([
             return false;
         },
 
-        render: function() {
-            this.$el.html(this.template());
+        renderMainCon: function() {
+            this.$mainCon = $('<div class="main-panel-main" id="share-admin-repos"></div>').html(this.template());
+            this.$el.append(this.$mainCon);
+
             this.$table = this.$('table');
             this.$sortIcon = $('.by-name .sort-icon', this.$table);
             this.$tableBody = $('tbody', this.$table);
             this.$loadingTip = this.$('.loading-tip');
             this.$emptyTip = this.$('.empty-tips');
-
         },
 
         hide: function() {
-            this.$el.detach();
-            this.attached = false;
+            this.$mainCon.detach();
         },
 
         show: function() {
-            if (!this.attached) {
-                this.attached = true;
-                $("#right-panel").html(this.$el);
-            }
+            this.renderMainCon();
             this.showContent();
         },
 
diff --git a/static/scripts/app/views/share-admin-share-links.js b/static/scripts/app/views/share-admin-share-links.js
index b0df314524..7c1d97a0ff 100644
--- a/static/scripts/app/views/share-admin-share-links.js
+++ b/static/scripts/app/views/share-admin-share-links.js
@@ -12,7 +12,7 @@ define([
 
     var ShareAdminShareLinksView = Backbone.View.extend({
 
-        id: 'share-admin-download-links',
+        el: '.main-panel',
 
         template: _.template($('#share-admin-download-links-tmpl').html()),
 
@@ -20,12 +20,11 @@ define([
             this.links = new ShareAdminShareLinkCollection();
             this.listenTo(this.links, 'add', this.addOne);
             this.listenTo(this.links, 'reset', this.reset);
-            this.render();
         },
 
         events: {
-            'click .by-name': 'sortByName',
-            'click .by-time': 'sortByTime'
+            'click #share-admin-download-links .by-name': 'sortByName',
+            'click #share-admin-download-links .by-time': 'sortByTime'
         },
 
         // initialSort: dirs come first
@@ -107,8 +106,10 @@ define([
             return false;
         },
 
-        render: function() {
-            this.$el.html(this.template({'can_generate_upload_link': app.pageOptions.can_generate_upload_link}));
+        renderMainCon: function() {
+            this.$mainCon = $('<div class="main-panel-main" id="share-admin-download-links"></div>').html(this.template());
+            this.$el.append(this.$mainCon);
+
             this.$table = this.$('table');
             this.$sortByNameIcon = this.$('.by-name .sort-icon');
             this.$sortByTimeIcon = this.$('.by-time .sort-icon');
@@ -118,15 +119,11 @@ define([
         },
 
         hide: function() {
-            this.$el.detach();
-            this.attached = false;
+            this.$mainCon.detach();
         },
 
         show: function() {
-            if (!this.attached) {
-                this.attached = true;
-                $("#right-panel").html(this.$el);
-            }
+            this.renderMainCon();
             this.showContent();
         },
 
diff --git a/static/scripts/app/views/share-admin-upload-links.js b/static/scripts/app/views/share-admin-upload-links.js
index c0a32302bc..eafc1f46b0 100644
--- a/static/scripts/app/views/share-admin-upload-links.js
+++ b/static/scripts/app/views/share-admin-upload-links.js
@@ -12,7 +12,7 @@ define([
 
     var ShareAdminUploadLinksView = Backbone.View.extend({
 
-        id: 'share-admin-upload-links',
+        el: '.main-panel',
 
         template: _.template($('#share-admin-upload-links-tmpl').html()),
 
@@ -20,11 +20,12 @@ define([
             this.links = new ShareAdminUploadLinkCollection();
             this.listenTo(this.links, 'add', this.addOne);
             this.listenTo(this.links, 'reset', this.reset);
-            this.render();
         },
 
-        render: function() {
-            this.$el.html(this.template({'can_generate_share_link': app.pageOptions.can_generate_share_link}));
+        renderMainCon: function() {
+            this.$mainCon = $('<div class="main-panel-main" id="share-admin-upload-links"></div>').html(this.template());
+            this.$el.append(this.$mainCon);
+
             this.$table = this.$('table');
             this.$tableBody = $('tbody', this.$table);
             this.$loadingTip = this.$('.loading-tip');
@@ -32,15 +33,11 @@ define([
         },
 
         hide: function() {
-            this.$el.detach();
-            this.attached = false;
+            this.$mainCon.detach();
         },
 
         show: function() {
-            if (!this.attached) {
-                this.attached = true;
-                $("#right-panel").html(this.$el);
-            }
+            this.renderMainCon();
             this.showContent();
         },
 
diff --git a/static/scripts/app/views/side-nav.js b/static/scripts/app/views/side-nav.js
index bd4a51b04f..961278f27c 100644
--- a/static/scripts/app/views/side-nav.js
+++ b/static/scripts/app/views/side-nav.js
@@ -8,7 +8,7 @@ define([
     'use strict';
 
     var sideNavView = Backbone.View.extend({
-        el: '#side-nav',
+        el: '.side-panel',
 
         template: _.template($("#side-nav-tmpl").html()),
         enableModTemplate: _.template($("#myhome-mods-enable-form-tmpl").html()),
@@ -42,7 +42,7 @@ define([
         },
 
         render: function() {
-            this.$el.html(this.template(this.data));
+            this.$('#side-nav').html(this.template(this.data));
             return this;
         },
 
@@ -50,8 +50,8 @@ define([
             'click #group-nav a:first': 'toggleGroupList',
             'click #share-admin-nav a:first': 'toggleShareAdminList',
             'click #enable-mods': 'enableMods',
-            'click .js-close-side-nav': 'closeNav',
-            'click li > a': 'visitLink',
+            'click .js-close': 'close',
+            'click #side-nav li > a': 'visitLink',
             'click .js-about': 'showAbout',
 
             // for touch devices
@@ -203,7 +203,7 @@ define([
             this.$el.css({ 'left':'-300px' });
         },
 
-        closeNav: function() {
+        close: function() {
             this.hide();
             return false;
         },
diff --git a/static/scripts/app/views/starred-file.js b/static/scripts/app/views/starred-file.js
index 15d0d10383..986ffbeddc 100644
--- a/static/scripts/app/views/starred-file.js
+++ b/static/scripts/app/views/starred-file.js
@@ -11,7 +11,7 @@ define([
     'use strict';
 
     var StarredFileView = Backbone.View.extend({
-        id: 'starred-file',
+        el: '.main-panel',
 
         template: _.template($('#starred-file-tmpl').html()),
         theadTemplate: _.template($('#starred-file-thead-tmpl').html()),
@@ -19,7 +19,6 @@ define([
         initialize: function() {
             this.starredFiles = new StarredFilesCollection();
             this.listenTo(this.starredFiles, 'reset', this.reset);
-            this.render();
         },
 
         addOne: function(starredFile) {
@@ -92,8 +91,9 @@ define([
             this.starredFiles.fetch({reset: true});
         },
 
-        render: function() {
-            this.$el.html(this.template());
+        renderMainCon: function() {
+            this.$mainCon = $('<div class="main-panel-main" id="org-repos"></div>').html(this.template());
+            this.$el.append(this.$mainCon);
 
             this.$table = this.$('table');
             this.$tableBody = this.$('tbody');
@@ -128,12 +128,12 @@ define([
         },
 
         show: function() {
-            $("#right-panel").html(this.$el);
+            this.renderMainCon();
             this.showStarredFiles();
         },
 
         hide: function() {
-            this.$el.detach();
+            this.$mainCon.detach();
         }
 
     });
diff --git a/static/scripts/app/views/widgets/dropdown.js b/static/scripts/app/views/widgets/dropdown.js
index 76f1358476..9e72943bb5 100644
--- a/static/scripts/app/views/widgets/dropdown.js
+++ b/static/scripts/app/views/widgets/dropdown.js
@@ -19,9 +19,8 @@ define([
             return true;
         }
 
-        if (!view.$('.sf-dropdown-menu').is(target)
-            && !view.$('.sf-dropdown-menu').find('*').is(target))
-        {
+        if (!view.$('.sf-dropdown-menu').is(target) &&
+            !view.$('.sf-dropdown-menu').find('*').is(target)) {
             view.hide();
             if (app.ui.currentHighlightedItem) {
                 app.ui.currentHighlightedItem.rmHighlight();
diff --git a/static/scripts/common.js b/static/scripts/common.js
index 6a6cb31384..8bd6482d84 100644
--- a/static/scripts/common.js
+++ b/static/scripts/common.js
@@ -339,7 +339,7 @@ define([
             var $yesBtn = $('#confirm-yes');
 
             $cont.html('<h3>' + title + '</h3><p>' + content + '</p>');
-            $popup.modal({appendTo: '#main'});
+            $popup.modal();
             $('#simplemodal-container').css({'height':'auto'});
 
             $yesBtn.click(yesCallback);
@@ -360,7 +360,7 @@ define([
             });
 
             $cont.html(html);
-            $popup.modal({appendTo: '#main'});
+            $popup.modal();
             $('#simplemodal-container').css({'height':'auto'});
 
             $yesBtn.click(function() {
@@ -379,7 +379,7 @@ define([
                 $('.messages').html('<li class="' + type + '">' + this.HTMLescape(con) + '</li>');
             } else {
                 var html = '<ul class="messages"><li class="' + type + '">' + this.HTMLescape(con) + '</li></ul>';
-                $('#main').append(html);
+                $('#wrapper').append(html);
             }
             $('.messages').css({'left':($(window).width() - $('.messages').width())/2, 'top':10}).removeClass('hide');
             setTimeout(function() { $('.messages').addClass('hide'); }, time);
diff --git a/static/scripts/sysadmin-app/router.js b/static/scripts/sysadmin-app/router.js
index 71f0c82f44..573fdaa299 100644
--- a/static/scripts/sysadmin-app/router.js
+++ b/static/scripts/sysadmin-app/router.js
@@ -57,15 +57,14 @@ define([
         },
 
         initialize: function() {
-            $('#initial-loading-view').hide();
+            $('#initial-loading').hide()
+                .next('.row').removeClass('hide');
 
             Common.prepareApiCsrf();
             Common.initLocale();
 
+            this.accountView = new AccountView();
             this.sideNavView = new SideNavView();
-            app.ui = {
-                sideNavView: this.sideNavView
-            };
 
             this.dashboardView = new DashboardView();
             this.desktopDevicesView = new DesktopDevicesView();
@@ -88,7 +87,10 @@ define([
             this.adminOperationLogsview = new AdminOperationLogsview();
             this.adminLoginLogsView = new AdminLoginLogsView();
 
-            app.ui.accountView = this.accountView = new AccountView();
+            app.ui = {
+                sideNavView: this.sideNavView,
+                accountView: this.accountView
+            };
 
             this.currentView = this.dashboardView;