diff --git a/media/css/seahub.css b/media/css/seahub.css
index 2896f610a6..8e90f13ecf 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -2272,28 +2272,6 @@ button.sf-dropdown-toggle:focus {
     display:inline;
     margin-right:5px;
 }
-#dirent-details {
-    width:320px;
-}
-.dirent-details-img-container {
-    text-align:center;
-    height:160px;
-    padding:6px 0;
-}
-.dirent-details-img-container .thumbnail {
-    max-width:calc(100% - 4px); /* `-4px` for full width thumbnail */
-    max-height:100%;
-}
-.dirent-details-text-info-container {
-    padding:10px 20px;
-}
-.dirent-details-text-info-container table {
-    margin:0;
-}
-.dirent-details-text-info-container th,
-.dirent-details-text-info-container td {
-    border:none;
-}
 .audit-item .audit-select-hidden {
     position:absolute;
     background:#fff;
diff --git a/seahub/templates/js/templates.html b/seahub/templates/js/templates.html
index 438023d110..0d635d49c1 100644
--- a/seahub/templates/js/templates.html
+++ b/seahub/templates/js/templates.html
@@ -781,7 +781,7 @@
         </h3>
     </div>
     <div class="right-side-panel-con">
-        <div class="dirent-details-img-container image-file-view">
+        <div class="details-panel-img-container image-file-view">
             <span class="loading-icon"></span>
             <% if (thumbnail_url) { %>
             <img src="<%= thumbnail_url %>" class="thumbnail hide" alt="" />
@@ -790,18 +790,33 @@
             <% } %>
         </div>
 
-        <div class="dirent-details-text-info-container">
+        <div class="details-panel-text-info-container">
             <table>
                 <tr class="vh">
                     <th width="35%"></th>
                     <td width="65%"></td>
                 </tr>
+
                 <% if (dirent.is_file) { %>
                 <tr>
                     <th>{% trans "Size" %}</th>
                     <td><%= dirent.file_size %></td>
                 </tr>
+                <% } else { %>
+                <tr>
+                    <th>{% trans "Folders" %}</th>
+                    <td class="dir-folder-counts"></td>
+                </tr>
+                <tr>
+                    <th>{% trans "Files" %}</th>
+                    <td class="dir-file-counts"><span class="loading-icon"></span></td>
+                </tr>
+                <tr>
+                    <th>{% trans "Size" %}</th>
+                    <td class="dir-size"></td>
+                </tr>
                 <% } %>
+
                 <tr>
                     <th>{% trans "Location" %}</th>
                     <td><%- path %></td>
diff --git a/static/scripts/app/views/dir.js b/static/scripts/app/views/dir.js
index fc9dca0e14..8b233d2778 100644
--- a/static/scripts/app/views/dir.js
+++ b/static/scripts/app/views/dir.js
@@ -73,7 +73,7 @@ define([
                 this.listenTo(this.dir, 'reset', this.reset);
 
                 this.fileUploadView = new FileUploadView({dirView: this});
-                this.direntDetailsView = new DirentDetailsView({dirView: this});
+                this.direntDetailsView = new DirentDetailsView();
 
                 this.render();
 
diff --git a/static/scripts/app/views/dirent-details.js b/static/scripts/app/views/dirent-details.js
index 51d4e07ea8..a197fbbc7d 100644
--- a/static/scripts/app/views/dirent-details.js
+++ b/static/scripts/app/views/dirent-details.js
@@ -8,11 +8,11 @@ define([
 
     var View = Backbone.View.extend({
         id: 'dirent-details',
-        className: 'right-side-panel hide', // `hide` is for 'clickItem' in `views/dir.js`
+        className: 'details-panel right-side-panel',
 
         template:  _.template($('#dirent-details-tmpl').html()),
 
-        initialize: function(options) {
+        initialize: function() {
             $("#main").append(this.$el);
 
             var _this = this;
@@ -36,7 +36,7 @@ define([
             this.$el.html(this.template(this.data));
 
             var _this = this;
-            this.$('.dirent-details-img-container img').load(function() {
+            this.$('.details-panel-img-container img').load(function() {
                 _this.showImg();
             });
             this.$('.thumbnail').on('error', function() {
@@ -44,6 +44,17 @@ define([
             });
         },
 
+        update: function(part_data) {
+            if (part_data.error) {
+                this.$('.dir-folder-counts, .dir-file-counts, .dir-size')
+                    .html('<span class="error">' + gettext("Error") + '</span>');
+            } else {
+                this.$('.dir-folder-counts').html(part_data.dir_count);
+                this.$('.dir-file-counts').html(part_data.file_count);
+                this.$('.dir-size').html(part_data.size);
+            }
+        },
+
         setConMaxHeight: function() {
             this.$('.right-side-panel-con').css({
                 'height': $(window).height() -  // this.$el `position:fixed; top:0;`
@@ -52,7 +63,7 @@ define([
         },
 
         hide: function() {
-            this.$el.css({'right': '-400px'}).hide();
+            this.$el.css({'right': '-320px'});
         },
 
         close: function() {
@@ -63,12 +74,12 @@ define([
         show: function(options) {
             this.data = options;
             this.render();
-            this.$el.css({'right': '0px'}).show();
+            this.$el.css({'right': '0px'});
             this.setConMaxHeight();
         },
 
         showImg: function() {
-            var $container = this.$('.dirent-details-img-container');
+            var $container = this.$('.details-panel-img-container');
             $('.loading-icon', $container).hide();
             $('img', $container).show();
         },
diff --git a/static/scripts/app/views/dirent-grid.js b/static/scripts/app/views/dirent-grid.js
index 410c586e2a..8335a6b4f5 100644
--- a/static/scripts/app/views/dirent-grid.js
+++ b/static/scripts/app/views/dirent-grid.js
@@ -301,7 +301,34 @@ define([
                 });
             }
 
-            this.dirView.direntDetailsView.show(data);
+            var detailsView = this.dirView.direntDetailsView;
+            detailsView.show(data);
+
+            // fetch other data for dir
+            if (this.model.get('is_dir')) {
+                $.ajax({
+                    url: Common.getUrl({
+                        'name': 'dir-details',
+                        'repo_id': this.dir.repo_id
+                    }),
+                    cache: false,
+                    data: {
+                        'path': Common.pathJoin([this.dir.path, this.model.get('obj_name')])
+                    },
+                    dataType: 'json',
+                    success: function(data) {
+                        detailsView.update({
+                            'dir_count': data.dir_count,
+                            'file_count': data.file_count,
+                            'size': Common.fileSizeFormat(data.size, 1)
+                        });
+                    },
+                    error: function() {
+                        detailsView.update({'error': true});
+                    }
+                });
+            }
+
             this.closeMenu();
             return false;
         },
diff --git a/static/scripts/app/views/dirent.js b/static/scripts/app/views/dirent.js
index 33a3e62367..ca3a40c30f 100644
--- a/static/scripts/app/views/dirent.js
+++ b/static/scripts/app/views/dirent.js
@@ -114,7 +114,7 @@ define([
         clickItem: function(e) {
             var target =  e.target || event.srcElement;
             if (this.$('td').is(target) &&
-                $('#dirent-details').is(':visible')) { // after `#dirent-details` is shown
+                $('#dirent-details').css('right') == '0px') { // after `#dirent-details` is shown
                 this.viewDetails();
             }
         },
@@ -583,7 +583,34 @@ define([
                 });
             }
 
-            this.dirView.direntDetailsView.show(data);
+            var detailsView = this.dirView.direntDetailsView;
+            detailsView.show(data);
+
+            // fetch other data for dir
+            if (this.model.get('is_dir')) {
+                $.ajax({
+                    url: Common.getUrl({
+                        'name': 'dir-details',
+                        'repo_id': this.dir.repo_id
+                    }),
+                    cache: false,
+                    data: {
+                        'path': Common.pathJoin([this.dir.path, this.model.get('obj_name')])
+                    },
+                    dataType: 'json',
+                    success: function(data) {
+                        detailsView.update({
+                            'dir_count': data.dir_count,
+                            'file_count': data.file_count,
+                            'size': Common.fileSizeFormat(data.size, 1)
+                        });
+                    },
+                    error: function() {
+                        detailsView.update({'error': true});
+                    }
+                });
+            }
+
             this._hideMenu();
             return false;
         },
diff --git a/static/scripts/common.js b/static/scripts/common.js
index 4ac00ff636..0d41517d81 100644
--- a/static/scripts/common.js
+++ b/static/scripts/common.js
@@ -96,6 +96,8 @@ define([
                 case 'cp_dirents': return siteRoot + 'ajax/repo/' + options.repo_id + '/dirents/copy/';
                 case 'get_dirents': return siteRoot + 'ajax/repo/' + options.repo_id + '/dirents/';
 
+                case 'dir-details': return siteRoot + 'api/v2.1/repos/' + options.repo_id + '/dir/detail/';
+
                 // Repos
                 case 'repos': return siteRoot + 'api2/repos/';
                 case 'deleted_repos': return siteRoot + 'api/v2.1/deleted-repos/';