diff --git a/media/css/seahub.css b/media/css/seahub.css
index f5989c0f09..b264ed3a58 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -165,7 +165,6 @@ 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; }
 ul { list-style:none; }
-ol { padding-left:2em; }
 dl { margin:1.5em 0; }
 dt { color:#666; margin:24px 0 2px; font-weight: normal; }
 dd { margin-bottom:.8em; color:#222; }
@@ -302,7 +301,12 @@ 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; }
-
+/**** overwrite bootstrap css ****/
+.breadcrumb {
+    padding:0;
+    background-color:#fff;
+    border-radius:0;
+}
 /********** common class ***********/
 .hl { background-color: #f8f8f8; }/*highlight*/
 .fleft { float:left }
@@ -388,8 +392,8 @@ table img { vertical-align:middle; }
 }
 .loading-icon {
     display:inline-block;
-    width:22px;
-    height:22px;
+    width:26px;
+    height:26px;
     border:2px solid #eee;
     border-left-color:#aaa;
     border-radius:50%;
@@ -517,6 +521,15 @@ textarea:-moz-placeholder {/* for FF */
 }
 
 /*******ui widgets**************/
+/**** path ****/
+.path-bar {
+    font-size:1rem;
+    line-height:1.5;
+    margin:0; /* for merge with tabs */
+    background-color:#f2f2f2;
+    padding:0.6rem 0.75rem 0.25rem;
+    border-radius: 2px 2px 0 0;
+}
 /****paginator****/
 #paginator {
     text-align:center;
@@ -1862,12 +1875,6 @@ button.sf-dropdown-toggle:focus {
     line-height:25px;
     margin:0;
 }
-#group-top .path,
-#dir-view .path {
-    font-size:16px;
-    line-height:1.5;
-    margin:0 0 5px;
-}
 #dir-view .repo-op .op-btn {
     padding:5px 14px;
 }
@@ -1909,7 +1916,7 @@ button.sf-dropdown-toggle:focus {
     width:200px;
 }
 .repo-file-list th {
-    padding-top:20px;
+    padding-top:1rem;
 }
 #repo-file-list .fixed-hd {
     position:fixed;
@@ -3040,7 +3047,7 @@ button.sf-dropdown-toggle:focus {
 }
 .repo-folder-perm-folder-path {
     width:150px;
-    padding:3px 33px 3px 5px;
+    padding:1px 33px 1px 5px;
 }
 .repo-folder-perm-add-folder {
     position:absolute;
@@ -3316,19 +3323,14 @@ img.thumbnail {
 #group {
     position:relative;
 }
-#group-members {
+#group-members, #group-settings, #group-discussions {
     position:absolute;
-    top:77px;
+    top:90px;
     right:0;
 }
 #group-members .outer-caret {
     right:66px;
 }
-#group-settings {
-    position:absolute;
-    top:77px;
-    right:0;
-}
 #group-settings .outer-caret {
     right:106px;
 }
@@ -3340,9 +3342,6 @@ img.thumbnail {
 }
 #group-discussions {
     width:440px;
-    position:absolute;
-    top:77px;
-    right:0;
 }
 #group-discussions .outer-caret {
     right:30px;
diff --git a/seahub/templates/js/dir-view.html b/seahub/templates/js/dir-view.html
index 67a8642be4..6a009ac53a 100644
--- a/seahub/templates/js/dir-view.html
+++ b/seahub/templates/js/dir-view.html
@@ -1,7 +1,7 @@
 {% load i18n %}
 <script type="text/template" id="dir-view-tmpl">
     <div class="repo-file-list-topbar">
-        <p class="path"></p>
+        <ol class="path-bar breadcrumb"></ol>
         <div class="repo-op"></div>
     </div>
     <div class="js-dir-content">
diff --git a/seahub/templates/js/templates.html b/seahub/templates/js/templates.html
index 4efcc346bc..e1140dc2de 100644
--- a/seahub/templates/js/templates.html
+++ b/seahub/templates/js/templates.html
@@ -153,23 +153,23 @@
 </script>
 <script type="text/template" id="dir-path-bar-tmpl">
     <% if (context == 'group') { %>
-        <a href="#groups/" class="path-link normal">{% trans "Groups" %}</a> /
-        <a href="#<%= category %>/" class="path-link normal"><%- group_name %></a> /
+        <li><a href="#groups/" class="path-link normal">{% trans "Groups" %}</a></li>
+        <li><a href="#<%= category %>/" class="path-link normal"><%- group_name %></a></li>
     <% } else if (context == 'org') { %>
-        <a href="#<%= category %>/" class="path-link normal">{% trans "Organization" %}</a> /
+        <li><a href="#<%= category %>/" class="path-link normal">{% trans "Organization" %}</a></li>
     <% } else if (context == 'common') { %>
-        <a href="#my-libs/" class="path-link normal">{% trans "Mine" %}</a> /
+        <li><a href="#my-libs/" class="path-link normal">{% trans "Mine" %}</a></li>
     <% } else { %>
-        <a href="#<%= category %>/" class="path-link normal"><% if (category == 'my-libs') { %>{% trans "Mine" %}<% } %><% if (category == 'shared-libs') { %>{% trans "Shared" %}<% } %><% if (category == 'my-sub-libs') { %>{% trans "Sub-libraries" %}<% } %></a> /
+        <li><a href="#<%= category %>/" class="path-link normal"><% if (category == 'my-libs') { %>{% trans "Mine" %}<% } %><% if (category == 'shared-libs') { %>{% trans "Shared" %}<% } %></a></li>
     <% } %>
     <% if (path == '/') { %>
-    <%- repo_name %> /
+        <li><%- repo_name %></li>
     <% } else { %>
-        <a href="#<%= category %>/lib/<%= repo_id %>/" class="path-link normal"><%- repo_name %></a> /
-    <% for (var i = 0,len = path_list.length - 1; i < len; i++) { %>
-        <a href="#<%= category %>/lib/<%= repo_id %>/<% print(path_list_encoded.slice(0, i+1).join('/')); %>" class="path-link normal"><%- path_list[i] %></a> /
-    <% } %>
-    <%- path_list[i] + ' /' %>
+        <li><a href="#<%= category %>/lib/<%= repo_id %>/" class="path-link normal"><%- repo_name %></a></li>
+        <% for (var i = 0,len = path_list.length - 1; i < len; i++) { %>
+        <li><a href="#<%= category %>/lib/<%= repo_id %>/<% print(path_list_encoded.slice(0, i+1).join('/')); %>" class="path-link normal"><%- path_list[i] %></a></li>
+        <% } %>
+        <li><%- path_list[i] %></li>
     <% } %>
 </script>
 <script type="text/template" id="dirents-hd-tmpl">
@@ -729,7 +729,10 @@
 </form>
 </script>
 <script type="text/template" id="group-top-tmpl">
-<p class="path"><a href="{% url 'group_list' %}" class="normal">{% trans "Groups" %}</a> / <%- name %></p>
+<ol class="path-bar breadcrumb">
+    <li><a href="{% url 'group_list' %}" class="normal">{% trans "Groups" %}</a></li>
+    <li><%- name %></li>
+</ol>
 <div class="hd ovhd">
     {% if user.permissions.can_add_repo %}
     <button class="repo-create fleft"><span class="icon-plus-square add vam"></span><span class="vam">{% trans "New Library" %}</span></button>
@@ -1423,7 +1426,7 @@
 <script type="text/template" id="notice-popover-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 close sf2-icon-x1 op-icon fright"></a>
+        <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 "Notifications" %}</h3>
     </div>
     <div class="sf-popover-con">
diff --git a/seahub/templates/libraries.html b/seahub/templates/libraries.html
index e6def516fe..a391f8ff5f 100644
--- a/seahub/templates/libraries.html
+++ b/seahub/templates/libraries.html
@@ -116,7 +116,7 @@
 <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 close sf2-icon-x1 op-icon fright"></a>
+        <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">
@@ -126,7 +126,7 @@
 <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 close sf2-icon-x1 op-icon fright"></a>
+        <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">
@@ -139,7 +139,7 @@
 <script type="text/template" id="group-discussions-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 close sf2-icon-x1 op-icon fright"></a>
+        <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 "Discussions" %}</h3>
     </div>
     <div class="sf-popover-con">
diff --git a/seahub/templates/sysadmin/sys_admin_group_info.html b/seahub/templates/sysadmin/sys_admin_group_info.html
index 863dbb5e2d..9d8deb94ef 100644
--- a/seahub/templates/sysadmin/sys_admin_group_info.html
+++ b/seahub/templates/sysadmin/sys_admin_group_info.html
@@ -5,10 +5,10 @@
 
 {% block right_panel %}
 
-<p class="path">
-    <a class="path-link normal" href="{{ SITE_ROOT }}sys/groupadmin/">Groups</a> /
-    {{ group.group_name }}
-</p>
+<ol class="path-bar breadcrumb">
+    <li><a class="path-link normal" href="{{ SITE_ROOT }}sys/groupadmin/">Groups</a></li>
+    <li>{{ group.group_name }}</li>
+</ol>
 
 <div id="tabs" class="tab-tabs">
     <div class="hd ovhd">
diff --git a/seahub/templates/sysadmin/userinfo.html b/seahub/templates/sysadmin/userinfo.html
index 4b7aee0488..c902da4f45 100644
--- a/seahub/templates/sysadmin/userinfo.html
+++ b/seahub/templates/sysadmin/userinfo.html
@@ -11,13 +11,13 @@
 
 {% block right_panel %}
 
-<p class="path">
-    <a class="path-link normal" href="{{ SITE_ROOT }}sys/useradmin/">Users</a> /
-    {{ email }}
-</p>
+<ol class="path-bar breadcrumb">
+    <li><a class="path-link normal" href="{{ SITE_ROOT }}sys/useradmin/">Users</a></li>
+    <li>{{ email }}</li>
+</ol>
 
 <div id="tabs" class="tab-tabs">
-    <div class="hd ovhd">
+    <div class="hd header-bar ovhd">
         <ul class="tab-tabs-nav fleft">
             <li class="tab"><a href="#profile" class="a">{% trans "Profile" %}</a></li>
             <li class="tab"><a href="#owned" class="a">{% trans "Owned Libs" %}</a></li>
diff --git a/static/scripts/app/views/dir.js b/static/scripts/app/views/dir.js
index 24dd0016c6..4f6bd6264e 100644
--- a/static/scripts/app/views/dir.js
+++ b/static/scripts/app/views/dir.js
@@ -104,7 +104,7 @@ define([
                 this.$dirent_grid = this.$('.grid-view');
                 this.$dirent_list_body = this.$('.repo-file-list tbody');
 
-                this.$path_bar = this.$('.path');
+                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');
 
diff --git a/static/scripts/app/views/widgets/popover.js b/static/scripts/app/views/widgets/popover.js
index 2d97046839..28d4dff442 100644
--- a/static/scripts/app/views/widgets/popover.js
+++ b/static/scripts/app/views/widgets/popover.js
@@ -48,7 +48,7 @@ define([
     var PopoverView = Backbone.View.extend({
 
         initialize: function(options) {
-            this.$el.on('click', '.close', _.bind(this.hide, this));
+            this.$el.on('click', '.js-close', _.bind(this.hide, this));
         },
 
         // set max-height for '.sf-popover-con'