diff --git a/frontend/src/components/dir-view/dir-panel.js b/frontend/src/components/dir-view/dir-panel.js
index e8850742b5..f8c6b81a3b 100644
--- a/frontend/src/components/dir-view/dir-panel.js
+++ b/frontend/src/components/dir-view/dir-panel.js
@@ -68,6 +68,16 @@ class DirPanel extends React.Component {
     }
   }
 
+  onPathClick = (path) => {
+    this.setState({isDirentDetailShow: false});
+    this.props.onPathClick(path);
+  }
+
+  onItemClick = (dirent) => {
+    this.setState({isDirentDetailShow: false});
+    this.props.onItemClick(dirent);
+  }
+
   onItemDetails = (dirent) => {
     this.setState({
       currentDirent: dirent,
@@ -157,7 +167,7 @@ class DirPanel extends React.Component {
                   pathPrefix={this.props.pathPrefix}
                   currentPath={this.props.path} 
                   permission={this.props.permission}
-                  onPathClick={this.props.onPathClick}
+                  onPathClick={this.onPathClick}
                   onTabNavClick={this.props.onTabNavClick}
                 />
               </div>
@@ -180,7 +190,7 @@ class DirPanel extends React.Component {
                           onItemDetails={this.onItemDetails}
                           onItemMove={this.props.onItemMove}
                           onItemCopy={this.props.onItemCopy}
-                          onItemClick={this.props.onItemClick}
+                          onItemClick={this.onItemClick}
                           onItemDelete={this.props.onItemDelete}
                           onItemRename={this.props.onItemRename}
                           onItemSelected={this.props.onItemSelected}
diff --git a/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js b/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
index 6a6f8655f3..1b9eb38064 100644
--- a/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
+++ b/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
@@ -15,6 +15,7 @@ const propTypes = {
   isItemFreezed: PropTypes.bool.isRequired,
   onFreezedItem: PropTypes.func.isRequired,
   onItemUnshare: PropTypes.func.isRequired,
+  onItmeDetails: PropTypes.func,
 };
 
 class SharedRepoListItem extends React.Component {
@@ -131,7 +132,7 @@ class SharedRepoListItem extends React.Component {
   }
 
   onItemDetails = () => {
-    // todo
+    this.props.onItemDetails(this.props.repo);
   }
 
   onItemShare = () => {
diff --git a/frontend/src/components/shared-repo-list-view/shared-repo-list-view.js b/frontend/src/components/shared-repo-list-view/shared-repo-list-view.js
index fc5be35bd8..63719117da 100644
--- a/frontend/src/components/shared-repo-list-view/shared-repo-list-view.js
+++ b/frontend/src/components/shared-repo-list-view/shared-repo-list-view.js
@@ -10,6 +10,7 @@ const propTypes = {
   repoList: PropTypes.array.isRequired,
   onItemUnshare: PropTypes.func.isRequired,
   onItemDelete: PropTypes.func.isRequired,
+  onItemDetails: PropTypes.func,
 };
 
 class SharedRepoListView extends React.Component {
@@ -41,6 +42,7 @@ class SharedRepoListView extends React.Component {
               onFreezedItem={this.onFreezedItem}
               onItemUnshare={this.props.onItemUnshare}
               onItemDelete={this.props.onItemDelete}
+              onItemDetails={this.props.onItemDetails}
             />
           );
         })}
diff --git a/frontend/src/pages/groups/group-view.js b/frontend/src/pages/groups/group-view.js
index 2be30c750c..8677ea3f29 100644
--- a/frontend/src/pages/groups/group-view.js
+++ b/frontend/src/pages/groups/group-view.js
@@ -17,6 +17,8 @@ import TransferGroupDialog from '../../components/dialog/transfer-group-dialog';
 // import ImportMembersDialog from '../../components/dialog/import-members-dialog';
 import ManageMembersDialog from '../../components/dialog/manage-members-dialog';
 import SharedRepoListView from '../../components/shared-repo-list-view/shared-repo-list-view';
+import LibDetail from '../../components/dirent-detail/lib-details';
+
 import '../../css/group-view.css';
 
 const propTypes = {
@@ -37,6 +39,7 @@ class GroupView extends React.Component {
       errMessage: '',
       emptyTip: null,
       currentGroup: null,
+      currentRepo: null,
       isStaff: false,
       isOwner: false,
       repoList: [],
@@ -51,6 +54,7 @@ class GroupView extends React.Component {
       // showImportMembersDialog: false,
       showManageMembersDialog: false,
       groupMembers: [],
+      isShowDetails: false,
     };
   }
 
@@ -298,6 +302,17 @@ class GroupView extends React.Component {
     }
   }
 
+  onItemDetails = (repo) => {
+    this.setState({
+      isShowDetails: true,
+      currentRepo: repo,
+    });
+  }
+
+  closeDetails = () => {
+    this.setState({isShowDetails: false});
+  }
+
   render() {
     let { errMessage, emptyTip, currentGroup } = this.state;
     let isShowSettingIcon = !(currentGroup && currentGroup.parent_group_id !== 0 && currentGroup.admins.indexOf(username) === -1);
@@ -314,7 +329,7 @@ class GroupView extends React.Component {
           </div>
           <CommonToolbar onSearchedClick={this.props.onSearchedClick} />
         </div>
-        <div className="main-panel-center">
+        <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <div className="cur-view-path">
               {currentGroup && (
@@ -405,10 +420,16 @@ class GroupView extends React.Component {
                   currentGroup={this.state.currentGroup} 
                   onItemUnshare={this.onItemUnshare}
                   onItemDelete={this.onItemDelete}
+                  onItemDetails={this.onItemDetails}
                 />
               }
             </div>
           </div>
+          {this.state.isShowDetails && (
+            <div className="cur-view-detail">
+              <LibDetail currentRepo={this.state.currentRepo} closeDetails={this.closeDetails}/>
+            </div>
+          )}
         </div>
         {this.state.isCreateRepoDialogShow && !this.state.isDepartmentGroup && (
           <ModalPortal>
diff --git a/frontend/src/pages/groups/groups-view.js b/frontend/src/pages/groups/groups-view.js
index 915cc909c0..9a98287d90 100644
--- a/frontend/src/pages/groups/groups-view.js
+++ b/frontend/src/pages/groups/groups-view.js
@@ -8,6 +8,7 @@ import Repo from '../../models/repo';
 import GroupsToolbar from '../../components/toolbar/groups-toolbar';
 import SharedRepoListView from '../../components/shared-repo-list-view/shared-repo-list-view';
 import CreateGroupDialog from '../../components/dialog/create-group-dialog';
+import LibDetail from '../../components/dirent-detail/lib-details';
 
 import '../../css/groups.css';
 
@@ -73,6 +74,7 @@ class RepoListViewPanel extends React.Component {
             repoList={this.state.repoList}
             onItemUnshare={this.onItemUnshare}
             onItemDelete={this.onItemDelete}
+            onItemDetails={this.props.onItemDetails}
           />
         }
       </div>
@@ -91,6 +93,8 @@ class GroupsView extends React.Component {
       errorMsg: '',
       groupList: [],
       showAddGroupModal: false,
+      isShowDetails: false,
+      currentRepo: null,
     }
   }
 
@@ -148,6 +152,17 @@ class GroupsView extends React.Component {
     this.listGroups();
   }
 
+  onItemDetails = (repo) => {
+    this.setState({
+      isShowDetails: true,
+      currentRepo: repo,
+    });
+  }
+
+  closeDetails = () => {
+    this.setState({isShowDetails: false});
+  }
+
   render() {
     return (
       <Fragment>
@@ -156,7 +171,7 @@ class GroupsView extends React.Component {
           onSearchedClick={this.props.onSearchedClick}
           toggleAddGroupModal={this.toggleAddGroupModal}
         />
-        <div className="main-panel-center">
+        <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <div className="cur-view-path">
               <h3 className="sf-heading">{gettext("My Groups")}</h3>
@@ -167,11 +182,20 @@ class GroupsView extends React.Component {
               {/* {(!this.state.isLoading && this.state.groupList.length === 0 ) && emptyTip} //todo */}
               {!this.state.isLoading && this.state.groupList.map((group, index) => {
                 return (
-                  <RepoListViewPanel key={index} group={group} />
+                  <RepoListViewPanel 
+                    key={index} 
+                    group={group} 
+                    onItemDetails={this.onItemDetails}
+                  />
                 );
               })}
             </div>
           </div>
+          {this.state.isShowDetails && (
+            <div className="cur-view-detail">
+              <LibDetail currentRepo={this.state.currentRepo} closeDetails={this.closeDetails}/>
+            </div>
+          )}
         </div>
         { this.state.showAddGroupModal &&
           <CreateGroupDialog
diff --git a/frontend/src/pages/repo-wiki-mode/main-panel.js b/frontend/src/pages/repo-wiki-mode/main-panel.js
index f8d4cee394..9729ef09d7 100644
--- a/frontend/src/pages/repo-wiki-mode/main-panel.js
+++ b/frontend/src/pages/repo-wiki-mode/main-panel.js
@@ -105,7 +105,14 @@ class MainPanel extends Component {
     this.props.onSideNavMenuClick();
   }
 
+  onItemClick = (dirent) => {
+    this.setState({isDirentDetailShow: false});
+    this.props.onItemClick(dirent);
+  }
+
+
   onMainNavBarClick = (path) => {
+    this.setState({isDirentDetailShow: false});
     this.props.onMainNavBarClick(path);
   }
 
@@ -247,7 +254,7 @@ class MainPanel extends Component {
                         path={this.props.path}
                         repoID={repoID}
                         direntList={this.props.direntList}
-                        onItemClick={this.props.onItemClick}
+                        onItemClick={this.onItemClick}
                         onItemDelete={this.props.onItemDelete}
                         onItemRename={this.props.onItemRename}
                         onItemMove={this.props.onItemMove}
diff --git a/frontend/src/pages/shared-libs/shared-libs.js b/frontend/src/pages/shared-libs/shared-libs.js
index 8b6e672858..532b24c5e8 100644
--- a/frontend/src/pages/shared-libs/shared-libs.js
+++ b/frontend/src/pages/shared-libs/shared-libs.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import { Link } from '@reach/router';
@@ -7,6 +7,8 @@ import { Utils } from '../../utils/utils';
 import Repo from '../../models/repo';
 import { gettext, siteRoot, loginUrl, isPro } from '../../utils/constants';
 import Loading from '../../components/loading';
+import ModalPotal from '../../components/modal-portal';
+import ShareDialog from '../../components/dialog/share-dialog';
 
 class Content extends Component {
 
@@ -116,7 +118,8 @@ class Item extends Component {
     super(props);
     this.state = {
       showOpIcon: false,
-      unshared: false
+      unshared: false,
+      isShowSharedDialog: false,
     };
 
     this.handleMouseOver = this.handleMouseOver.bind(this);
@@ -140,7 +143,7 @@ class Item extends Component {
 
   share(e) {
     e.preventDefault();
-    // TODO
+    this.setState({isShowSharedDialog: true});
   }
 
   leaveShare(e) {
@@ -169,6 +172,10 @@ class Item extends Component {
     });
   }
 
+  toggleShareDialog = () => {
+    this.setState({isShowSharedDialog: false});
+  }
+
   render() {
 
     if (this.state.unshared) {
@@ -199,37 +206,63 @@ class Item extends Component {
     let leaveShareIconClassName = 'op-icon sf2-icon-x3' + iconVisibility;
 
     const desktopItem = (
-      <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
-        <td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
-        <td><Link to={`${siteRoot}library/${data.repo_id}/${data.repo_name}/`}>{data.repo_name}</Link></td>
-        <td>
-          { isPro && data.is_admin ?
-            <a href="#" className={shareIconClassName} title={gettext("Share")} onClick={this.share}></a>
-            : ''}
-          <a href="#" className={leaveShareIconClassName} title={gettext("Leave Share")} onClick={this.leaveShare}></a>
-        </td>
-        <td>{data.size}</td>
-        <td title={moment(data.last_modified).format('llll')}>{moment(data.last_modified).fromNow()}</td>
-        <td title={data.owner_contact_email}>{data.owner_name}</td>
-      </tr>
+      <Fragment>
+        <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+          <td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
+          <td><Link to={`${siteRoot}library/${data.repo_id}/${data.repo_name}/`}>{data.repo_name}</Link></td>
+          <td>
+            {(isPro && data.is_admin) &&
+              <a href="#" className={shareIconClassName} title={gettext("Share")} onClick={this.share}></a>
+            }
+            <a href="#" className={leaveShareIconClassName} title={gettext("Leave Share")} onClick={this.leaveShare}></a>
+          </td>
+          <td>{data.size}</td>
+          <td title={moment(data.last_modified).format('llll')}>{moment(data.last_modified).fromNow()}</td>
+          <td title={data.owner_contact_email}>{data.owner_name}</td>
+        </tr>
+        {this.state.isShowSharedDialog && (
+          <ModalPotal>
+            <ShareDialog 
+              itemType={'library'}
+              itemName={data.repo_name}
+              itemPath={'/'}
+              repoID={data.repo_id}
+              toggleDialog={this.toggleShareDialog}
+            />
+          </ModalPotal>
+        )}
+      </Fragment>
     );
 
     const mobileItem = (
-      <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
-        <td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
-        <td>
-          <Link to={`${siteRoot}library/${data.repo_id}/${data.repo_name}/`}>{data.repo_name}</Link><br />
-          <span className="item-meta-info" title={data.owner_contact_email}>{data.owner_name}</span>
-          <span className="item-meta-info">{data.size}</span>
-          <span className="item-meta-info" title={moment(data.last_modified).format('llll')}>{moment(data.last_modified).fromNow()}</span>
-        </td>
-        <td>
-          { isPro && data.is_admin ?
-            <a href="#" className={shareIconClassName} title={gettext("Share")} onClick={this.share}></a>
-            : ''}
-          <a href="#" className={leaveShareIconClassName} title={gettext("Leave Share")} onClick={this.leaveShare}></a>
-        </td>
-      </tr>
+      <Fragment>
+        <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+          <td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
+          <td>
+            <Link to={`${siteRoot}library/${data.repo_id}/${data.repo_name}/`}>{data.repo_name}</Link><br />
+            <span className="item-meta-info" title={data.owner_contact_email}>{data.owner_name}</span>
+            <span className="item-meta-info">{data.size}</span>
+            <span className="item-meta-info" title={moment(data.last_modified).format('llll')}>{moment(data.last_modified).fromNow()}</span>
+          </td>
+          <td>
+            {(isPro && data.is_admin) &&
+              <a href="#" className={shareIconClassName} title={gettext("Share")} onClick={this.share}></a>
+            }
+            <a href="#" className={leaveShareIconClassName} title={gettext("Leave Share")} onClick={this.leaveShare}></a>
+          </td>
+        </tr>
+          {this.state.isShowSharedDialog && (
+            <ModalPotal>
+              <ShareDialog 
+                itemType={'library'}
+                itemName={data.repo_name}
+                itemPath={'/'}
+                repoID={data.repo_id}
+                toggleDialog={this.toggleShareDialog}
+              />
+            </ModalPotal>
+          )}
+      </Fragment>
     );
 
     return window.innerWidth >= 768 ? desktopItem : mobileItem;
diff --git a/static/css/seafile-ui.css b/static/css/seafile-ui.css
index 9a54a6bea5..2a2dec1016 100644
--- a/static/css/seafile-ui.css
+++ b/static/css/seafile-ui.css
@@ -10809,6 +10809,8 @@ Icon input
     padding: 6px 13px; }
   .article table p {
     margin: 0; }
+  .article table tr {
+    height: 100%; }
   .article table tr, .article table th {
     display: flex; }
   .article table td, .article table th {