diff --git a/media/css/seahub.css b/media/css/seahub.css
index 183e4cb0f3..c384c6391a 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -1165,7 +1165,7 @@ textarea:-moz-placeholder {/* for FF */
     background:#fff;
     border:1px solid #c9c9c9;
     border-radius:3px;
-    box-shadow:0 0 1px #f3f3f3;
+    box-shadow:0 0 4px #ccc;
     position:absolute;
 }
 .popover-hd {
@@ -1200,12 +1200,16 @@ textarea:-moz-placeholder {/* for FF */
     margin:0;
 }
 /**** dropdown menu ******/
+.dropdown {
+    position:relative;
+}
 .dropdown-menu {
     position:absolute;
     background:#fff;
     padding:6px 1px;
-    border:1px solid #eee;
-    border-radius:5px;
+    border:1px solid rgba(34,36,38,.15);
+    border-radius:3px;
+    box-shadow:0 2px 3px 0 rgba(34,36,38,.15);
     z-index:10;
 }
 .dropdown-menu li a,
@@ -1215,6 +1219,7 @@ textarea:-moz-placeholder {/* for FF */
     min-width:110px;
     white-space:nowrap;
     color:#444;
+    font-weight:normal;
 }
 .dropdown-menu a:hover {
     background:#feaa7c;
@@ -3901,17 +3906,7 @@ img.thumbnail {
     width:134px;
 }
 /* devices */
-.device-libs-popover {
-    left:-80px;
-    z-index:100;
-}
-.device-libs-item {
-    display:block;
-    padding:4px 12px;
-    white-space:nowrap;
-    color:#eb8205;
-}
-.device-libs-item:hover {
-    background:#f8f8f8;
-    text-decoration:none;
+.device-libs-dropdown-menu {
+    left:-60px;
+    min-width:200px;
 }
diff --git a/seahub/templates/js/templates.html b/seahub/templates/js/templates.html
index f3b5a08479..37d79609f6 100644
--- a/seahub/templates/js/templates.html
+++ b/seahub/templates/js/templates.html
@@ -1377,21 +1377,19 @@
     <td><%- device_name %></td>
     <td><%- last_login_ip %></td>
     <td><time title='<%- time %>'><%- time_from_now %></time></td>
-    <td class="popover-container js-dropdown">
+    <td class="dropdown js-dropdown">
         <% if (synced_repos.length > 0) { %>
-        <span class="js-toggle-repos js-dropdown-toggle cspt"><%- synced_repos_length %> <span class="dir-icon icon-caret-down"></span></span>
+        <span class="js-dropdown-toggle cspt"><%- synced_repos_length %> <span class="icon-caret-down"></span></span>
+        <div class="device-libs-dropdown-menu dropdown-menu js-dropdown-content hide">
+            <ul>
+                <% for (var i = 0, len = synced_repos_length; i < len; i++) { %>
+                <li><a href="#common/lib/<%- synced_repos[i].repo_id %>"><%- synced_repos[i].repo_name %></a></li>
+                <% } %>
+            </ul>
+        </div>
         <% } else { %>
         <span class="cspt">0</span>
         <% } %>
-        <div class="lib-list device-libs-popover popover js-dropdown-content hide">
-            <div class="popover-con">
-            <ul>
-                <% for (var i = 0, len = synced_repos_length; i < len; i++) { %>
-                <li><a class="device-libs-item" href="#common/lib/<%- synced_repos[i].repo_id %>"><%- synced_repos[i].repo_name %></a></li>
-                <% } %>
-            </ul>
-            </div>
-        </div>
     </td>
     <td>
         <div>
diff --git a/static/scripts/app/views/device.js b/static/scripts/app/views/device.js
index 29e34e654d..388cd1aa83 100644
--- a/static/scripts/app/views/device.js
+++ b/static/scripts/app/views/device.js
@@ -55,34 +55,6 @@ define([
             return this;
         },
 
-        _hidePopover: function(e) {
-            var view = e.data.view;
-            var target = e.target || event.srcElement;
-            if (!$('.js-toggle-repos, .device-libs-popover').is(target)) {
-               $('.device-libs-popover').addClass('hide');
-                $('.dir-icon').removeClass('icon-caret-up').addClass('icon-caret-down');
-                view.rmHighlight();
-                $(document).off('click', view._hidePopover);
-            }
-        },
-
-        toggleSyncedRepos: function(e) {
-            var $icon= this.$('.dir-icon'),
-                $popover = this.$('.device-libs-popover');
-
-            if ($popover.is(':hidden')) {
-                $icon.removeClass('icon-caret-down').addClass('icon-caret-up');
-                $popover.removeClass('hide');
-                $(document).on('click', { view: this }, this._hidePopover);
-            } else {
-                $icon.removeClass('icon-caret-up').addClass('icon-caret-down');
-                $popover.addClass('hide');
-                $(document).off('click', this._hidePopover);
-            }
-
-            return false;
-        },
-
         unlinkDevice: function() {
             var _this = this,
                 device_name = this.model.get('device_name');