diff --git a/media/css/seahub.css b/media/css/seahub.css
index 9b40ca7984..8bdc60756d 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -1,3 +1,11 @@
+/**
+ * depends on bootstrap
+ *
+ * html { box-sizing: border-box; }
+ * body { background: #fff; }
+ * p { margin-top:0; margin-bottom:1rem; }
+ *
+ **/
 /**
  * CONTENTS
  *
@@ -158,15 +166,17 @@ body, input, textarea, button, select {
     word-wrap:break-word; /* for en */
 }
 input, button, select { line-height:19px;/*for ff*/ }
+h1, h2, h3, h4, h5, h6 {
+    line-height:1.5; /* overwrite bootstrap */
+}
 h1 { font-size:1.9em; }
-h2 { font-size:1.5em; color:#222;}
+h2 { font-size:1.5em; color:#222; font-weight:bold; }
 h3 { font-size:16px; color:#322; font-weight:normal;  }
 h4 { font-size:1.1em; color:#222; font-weight:normal; }
-h5, h6 { font-size:1em; margin:0.4em 0 0.15em; }
-h1, h2, h3, h4 { line-height: 1.5; }
+h5, h6 { font-size:1em; }
 ul { list-style:none; }
 dl { margin:1.5em 0; }
-dt { color:#666; margin:24px 0 2px; font-weight: normal; }
+dt { color:#666; margin:24px 0 2px; font-weight:normal; }
 dd { margin-bottom:.8em; color:#222; }
 a {
     color:#eb8205;
@@ -204,7 +214,8 @@ input {
 input, button { display:inline-block;/*for ie*/ }
 input[type=text],
 input[type=password] {
-    height:26px;
+    box-sizing:content-box;
+    height:22px;
 }
 button,
 input[type=submit],
@@ -301,6 +312,36 @@ th { text-align:left; font-weight:normal; color:#9c9c9c; }
 td, th { padding:5px 3px; word-wrap:break-word; border-bottom:1px solid #eee; }
 td { color: #333; font-size:14px; }
 table img { vertical-align:middle; }
+/* custom scrollbar */
+::-webkit-scrollbar {
+    height: 9px;
+    width: 9px;
+}
+::-webkit-scrollbar-button {
+    display: block;
+    height: 4px;
+}
+::-webkit-scrollbar-track-piece {
+    background: #e9e9eb;
+}
+::-webkit-scrollbar-track-piece:vertical:start {
+    border-radius:5px 5px 0 0;
+}
+::-webkit-scrollbar-track-piece:vertical:end {
+    border-radius:0 0 5px 5px;
+}
+::-webkit-scrollbar-track-piece:horizontal:start {
+    border-radius:5px 0 0 5px;
+}
+::-webkit-scrollbar-track-piece:horizontal:end {
+    border-radius:0 5px 5px 0;
+}
+::-webkit-scrollbar-thumb:vertical,
+::-webkit-scrollbar-thumb:horizontal {
+    background: #ccc;
+    border-radius: 5px;
+    display: block;
+}
 /**** overwrite bootstrap css ****/
 .breadcrumb {
     padding:0;
@@ -1121,9 +1162,6 @@ textarea:-moz-placeholder {/* for FF */
 #confirm-popup {
     min-width:255px;
 }
-#confirm-popup .btn {
-    margin-top:.8em;
-}
 /**** ui-autocomplete *****/
 .ui-autocomplete {
     padding:2px;
@@ -1142,7 +1180,11 @@ textarea:-moz-placeholder {/* for FF */
     border-radius:4px;
     zoom:1;
 }
-.ui-menu .ui-menu-item a.ui-state-hover { border-color:#fbcb09; background: #fdf5ce; color: #c77405; }
+.ui-menu .ui-menu-item a.ui-state-hover { 
+    border-color:#fbcb09;
+    background: #fdf5ce;
+    color: #c77405;
+}
 /**** article ****/
 .article {
     padding:40px 200px 40px 60px;
@@ -1170,10 +1212,10 @@ textarea:-moz-placeholder {/* for FF */
 }
 .article ul {
     list-style-type:disc;
-    padding-left:2em;
 }
 .article ul,
 .article ol {
+    padding-left:2em;
     margin:0.5em 0;
 }
 .article code {
@@ -1258,7 +1300,6 @@ textarea:-moz-placeholder {/* for FF */
 }
 .sf-popover-title {
     text-align:center;
-    margin:0;
 }
 .sf-popover-close {
     font-size:16px;
@@ -1559,7 +1600,6 @@ button.sf-dropdown-toggle:focus {
 }
 #notice-popover .brief {
     margin-left:40px;
-    margin-top:0;
 }
 #notice-popover .time {
     color:#999;
@@ -1567,7 +1607,10 @@ button.sf-dropdown-toggle:focus {
     margin:0;
     clear:both;
 }
-#notice-popover .all {
+#notice-popover .view-all {
+    display:block;
+    padding:7px 0;
+    text-align:center;
     color:#a4a4a4;
 }
 #account {
@@ -2134,7 +2177,7 @@ button.sf-dropdown-toggle:focus {
     color: #b8b8b8;
     margin:0;
 }
-.fixed-upload-file-dialog .close,
+.fixed-upload-file-dialog .sf-close,
 .fileupload-buttonbar .cancel {
     *margin-left:5px;
 }
@@ -2161,11 +2204,11 @@ button.sf-dropdown-toggle:focus {
     filter: alpha(opacity=0);
     cursor: pointer;
 }
-.table {
+.fileupload-table {
     margin-bottom:0;
 }
-.table .name,
-.table .error {
+.fileupload-table .name,
+.fileupload-table .error {
     padding-left:7px;
     margin:0;
 }
diff --git a/seahub/templates/base.html b/seahub/templates/base.html
index 4f28c095d3..5000f60712 100644
--- a/seahub/templates/base.html
+++ b/seahub/templates/base.html
@@ -97,7 +97,7 @@
         <div id="main" class="clear container-fluid {% block main_css_class %}top-padding{% endblock %}">
             {% block main_content %}
             <div class="row">
-                <div id="main-panel" class="clear w100 ovhd">
+                <div id="main-panel" class="w100 ovhd">
                     {% block main_panel %}{% endblock %}
                 </div>
             </div>
@@ -118,8 +118,8 @@
             {% endif %}
             <div id="confirm-popup" class="hide">
                 <div id="confirm-con"></div>
-                <button id="confirm-yes" class="btn">{% trans "Yes"%}</button>
-                <button class="simplemodal-close btn">{% trans "No"%}</button>
+                <button id="confirm-yes">{% trans "Yes" %}</button>
+                <button class="simplemodal-close">{% trans "No" %}</button>
             </div>
         </div>
 
diff --git a/seahub/templates/base_for_backbone.html b/seahub/templates/base_for_backbone.html
index dc450cdc13..2593d039a7 100644
--- a/seahub/templates/base_for_backbone.html
+++ b/seahub/templates/base_for_backbone.html
@@ -89,8 +89,8 @@
 
             <div id="confirm-popup" class="hide">
                 <div id="confirm-con"></div>
-                <button id="confirm-yes" class="btn">{% trans "Yes"%}</button>
-                <button class="simplemodal-close btn">{% trans "No"%}</button>
+                <button id="confirm-yes">{% trans "Yes"%}</button>
+                <button class="simplemodal-close">{% trans "No"%}</button>
             </div>
 
             <div id="guide-for-new" class="hide">
diff --git a/seahub/templates/js/lib-op-popups.html b/seahub/templates/js/lib-op-popups.html
index cfd55db78c..23818dfe73 100644
--- a/seahub/templates/js/lib-op-popups.html
+++ b/seahub/templates/js/lib-op-popups.html
@@ -94,17 +94,17 @@
         <h3 class="hd"><span class="status">{% trans "File Upload" %}</span> <span class="total-progress hide"></span></h3>
         <div class="ops">
             <span class="fold-switch sf2-icon-minus op-icon"></span>
-            <span class="close sf2-icon-x1 op-icon hide" title="{% trans "Close" %}"></span>
+            <span class="sf-close sf2-icon-x1 op-icon hide" title="{% trans "Close" %}"></span>
         </div>
         <div class="con">
-            <div class="row fileupload-buttonbar">
+            <div class="fileupload-buttonbar">
                 <button type="button" class="cancel cspt fright">{% trans "Cancel All" %}</button>
             </div>
             <p class="saving-tip alc clear hide">
                 <span class="loading-icon vam"></span>
                 <span class="vam">{% trans "Saving..." %}</span>
             </p>
-            <table class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
+            <table class="fileupload-table"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
         </div>
     </div>
     <!--/script-->
@@ -125,9 +125,9 @@
             <h3><%= title %></h3>
             <p>{% trans "A file with the same name already exists in this folder." %}<br />{% trans "Replacing it will overwrite its content." %}</p>
             <p class="error hide"></p>
-            <button class="yes btn">{% trans "Replace" %}</button>
-            <button class="no btn" style="margin-left:5px;">{% trans "Don't replace" %}</button>
-            <button class="simplemodal-close btn">{% trans "Cancel" %}</button>
+            <button class="yes">{% trans "Replace" %}</button>
+            <button class="no" style="margin-left:5px;">{% trans "Don't replace" %}</button>
+            <button class="simplemodal-close">{% trans "Cancel" %}</button>
         </div>
     </script>
 
diff --git a/seahub/templates/js/templates.html b/seahub/templates/js/templates.html
index 757761b2f5..c0cbf7cdf4 100644
--- a/seahub/templates/js/templates.html
+++ b/seahub/templates/js/templates.html
@@ -1433,7 +1433,7 @@
         <div class="loading-icon loading-tip"></div>
         <p class="error alc hide"></p>
         <ul class="hide notice-list"></ul>
-        <p class="alc"><a href="{% url 'user_notification_list' %}" class="all">{% trans "See All Notifications" %}</a></p>
+        <a href="{% url 'user_notification_list' %}" class="view-all">{% trans "See All Notifications" %}</a>
     </div>
 </script>
 
diff --git a/seahub/templates/sysadmin/admin_repo_view.html b/seahub/templates/sysadmin/admin_repo_view.html
index 701b6d148a..b7f3a4628d 100644
--- a/seahub/templates/sysadmin/admin_repo_view.html
+++ b/seahub/templates/sysadmin/admin_repo_view.html
@@ -114,17 +114,17 @@
         <h3 class="hd"><span class="status">{% trans "File Upload" %}</span> <span class="total-progress hide"></span></h3>
         <div class="ops">
             <img src="{{MEDIA_URL}}img/minus.png" alt="" class="fold-switch cspt" />
-            <img src="{{MEDIA_URL}}img/close.png" alt="close" title="{% trans "close" %}" class="close cspt hide" />
+            <img src="{{MEDIA_URL}}img/close.png" alt="" title="{% trans "close" %}" class="sf-close cspt hide" />
         </div>
         <div class="con">
-            <div class="row fileupload-buttonbar">
+            <div class="fileupload-buttonbar">
                 <button type="button" class="cancel cspt fright">{% trans "Cancel All" %}</button>
             </div>
             <p class="saving-tip alc clear hide">
                 <span class="loading-icon vam"></span>
                 <span class="vam">{% trans "Saving..." %}</span>
             </p>
-            <table class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
+            <table class="fileupload-table"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
         </div>
     </div>
     {% endif %}
@@ -156,7 +156,7 @@ $(function() {
         var fu_status = $('.status', popup),
             total_progress = $('.total-progress', popup),
             cancel_all_btn = $('.fileupload-buttonbar .cancel', popup),
-            close_icon = $('.close', popup),
+            close_icon = $('.sf-close', popup),
             saving_tip = $('.saving-tip', popup);
 
         var fu_status_ = {
@@ -265,7 +265,7 @@ $('#upload-file button').click(function() {
 $('#upload-file-dialog .fold-switch').click(function() {
     var popup = $('#upload-file-dialog');
     var full_ht = parseInt(popup.data('height'));
-    var main_con = $('.fileupload-buttonbar, .table', popup);
+    var main_con = $('.fileupload-buttonbar, table', popup);
     if (popup.height() == full_ht) {
         popup.height($('.hd', popup).outerHeight(true));
         main_con.addClass('hide');
@@ -275,7 +275,7 @@ $('#upload-file-dialog .fold-switch').click(function() {
     }
 });
 
-$('#upload-file-dialog .close').click(function() {
+$('#upload-file-dialog .sf-close').click(function() {
     $('#upload-file-dialog').addClass('hide');
     $('#upload-file-dialog .files').empty();
 });
diff --git a/seahub/templates/sysadmin/sysadmin_backbone.html b/seahub/templates/sysadmin/sysadmin_backbone.html
index d06fa80432..f748a6e495 100644
--- a/seahub/templates/sysadmin/sysadmin_backbone.html
+++ b/seahub/templates/sysadmin/sysadmin_backbone.html
@@ -71,8 +71,8 @@
 
             <div id="confirm-popup" class="hide">
                 <div id="confirm-con"></div>
-                <button id="confirm-yes" class="btn">{% trans "Yes"%}</button>
-                <button class="simplemodal-close btn">{% trans "No"%}</button>
+                <button id="confirm-yes">{% trans "Yes"%}</button>
+                <button class="simplemodal-close">{% trans "No"%}</button>
             </div>
         </div>
 
diff --git a/seahub/templates/view_shared_upload_link.html b/seahub/templates/view_shared_upload_link.html
index 32b32cb975..abaf82df7d 100644
--- a/seahub/templates/view_shared_upload_link.html
+++ b/seahub/templates/view_shared_upload_link.html
@@ -11,7 +11,7 @@
     <p class="error">{% trans "The owner of this library has run out of space." %}</p>
     {% else %}
     <form id="upload-file-form" enctype="multipart/form-data" method="post" action="">{% csrf_token %}
-        <div class="row fileupload-buttonbar">
+        <div class="fileupload-buttonbar">
             <div>
                 <span class="fileinput-button vam" id="add-file">
                     <span class="icon-plus"></span>
@@ -47,7 +47,7 @@
             </div>
             <p class="saving-tip alc hide"><img src="{{MEDIA_URL}}img/loading-icon.gif" alt="" style="margin-right:5px;" class="vam" />{% trans "Saving..." %}</p>
         </div>
-        <table class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
+        <table class="fileupload-table"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
     </form>
     {% endif %}
 </div>
diff --git a/static/scripts/app/views/fileupload.js b/static/scripts/app/views/fileupload.js
index 4b3b51285e..eb351be835 100644
--- a/static/scripts/app/views/fileupload.js
+++ b/static/scripts/app/views/fileupload.js
@@ -39,7 +39,7 @@ define([
             var $fu_status = $('.status', popup),
                 $total_progress = $('.total-progress', popup),
                 cancel_all_btn = $('.fileupload-buttonbar .cancel', popup),
-                close_icon = $('.close', popup),
+                close_icon = $('.sf-close', popup),
                 saving_tip = $('.saving-tip', popup);
 
             var fu_status = {
@@ -425,13 +425,13 @@ define([
 
         events: {
             'click .fold-switch': 'foldAndUnfoldPopup',
-            'click .close': 'closePopup'
+            'click .sf-close': 'closePopup'
         },
 
         foldAndUnfoldPopup : function () {
             var popup = this.$el;
             var full_ht = parseInt(this.popup_height);
-            var main_con = $('.fileupload-buttonbar, .table', popup);
+            var main_con = $('.fileupload-buttonbar, table', popup);
             if (popup.height() == full_ht) {
                 popup.height($('.hd', popup).outerHeight(true));
                 main_con.addClass('hide');