diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 06172323a9..95bd6b231a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9964,7 +9964,7 @@
     },
     "react-popper": {
       "version": "0.8.3",
-      "resolved": "http://registry.npmjs.org/react-popper/-/react-popper-0.8.3.tgz",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-0.8.3.tgz",
       "integrity": "sha1-D3MzMTfJ+wr27EB00tBYWgoEYeE=",
       "requires": {
         "popper.js": "^1.12.9",
diff --git a/frontend/src/components/dialog/share-to-group.js b/frontend/src/components/dialog/share-to-group.js
index 8e11dc5d7b..f672f73dc3 100644
--- a/frontend/src/components/dialog/share-to-group.js
+++ b/frontend/src/components/dialog/share-to-group.js
@@ -7,6 +7,63 @@ import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api.js';
 
+class GroupItem extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOperationShow: false
+    };
+  }
+  
+  onMouseEnter = () => {
+    this.setState({isOperationShow: true});
+  }
+
+  onMouseLeave = () => {
+    this.setState({isOperationShow: false});
+  }
+
+  deleteShareItem = () => {
+    let item = this.props.item;
+    this.props.deleteShareItem(item.group_info.id);
+  }
+
+  render() {
+    let item = this.props.item;
+    return (
+      <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+        <td>{item.group_info.name}</td>
+        <td>{Utils.sharePerms[item.permission]}</td>
+        <td>
+          <span
+            className={`sf2-icon-x3 sf2-x op-icon a-simulate ${this.state.isOperationShow ? '' : 'hide'}`}
+            onClick={this.deleteShareItem} 
+            title={gettext('Delete')}
+          >
+          </span>
+        </td>
+      </tr>
+    );
+  }
+}
+
+class GroupList extends React.Component {
+
+  render() {
+    let items = this.props.items;
+    return (
+      <tbody>
+        {items.map((item, index) => {
+          return (
+            <GroupItem key={index} item={item} deleteShareItem={this.props.deleteShareItem}/>
+          );
+        })}
+      </tbody>
+    );
+  }
+}
+
 const propTypes = {
   isGroupOwnedRepo: PropTypes.bool,
   itemPath: PropTypes.string.isRequired,
@@ -85,7 +142,7 @@ class ShareToGroup extends React.Component {
     let path = this.props.itemPath;
     let repoID = this.props.repoID; 
     let isGroupOwnedRepo = this.props.isGroupOwnedRepo;
-    if (this.state.selectedOption.length > 0 ) {
+    if (this.state.selectedOption && this.state.selectedOption.length > 0 ) {
       for (let i = 0; i < this.state.selectedOption.length; i ++) {
         groups[i] = this.state.selectedOption[i].id;
       }
@@ -137,8 +194,7 @@ class ShareToGroup extends React.Component {
     }
   }
 
-  deleteShareItem = (e, groupID) => {
-    e.preventDefault();
+  deleteShareItem = (groupID) => {
     let path = this.props.itemPath;
     let repoID = this.props.repoID; 
     if (this.props.isGroupOwnedRepo) {
@@ -207,20 +263,6 @@ class ShareToGroup extends React.Component {
   }
 }
 
-function GroupList(props) {
-  return (
-    <tbody>
-      {props.items.map((item, index) => (
-        <tr key={index}>
-          <td>{item.group_info.name}</td>
-          <td>{Utils.sharePerms[item.permission]}</td>
-          <td><a href="#" onClick={(e) => {props.deleteShareItem(e, item.group_info.id);}} className="sf2-icon-x3 sf2-x op-icon" title={gettext('Delete')}></a></td>
-        </tr>
-      ))}
-    </tbody>
-  );
-}
-
 ShareToGroup.propTypes = propTypes;
 
 export default ShareToGroup;
diff --git a/frontend/src/components/dialog/share-to-user.js b/frontend/src/components/dialog/share-to-user.js
index f587a87c96..01c5a1704b 100644
--- a/frontend/src/components/dialog/share-to-user.js
+++ b/frontend/src/components/dialog/share-to-user.js
@@ -6,6 +6,63 @@ import PropTypes from 'prop-types';
 import { Button, Input } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api.js';
 
+class UserItem extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOperationShow: false
+    };
+  }
+  
+  onMouseEnter = () => {
+    this.setState({isOperationShow: true});
+  }
+
+  onMouseLeave = () => {
+    this.setState({isOperationShow: false});
+  }
+
+  deleteShareItem = () => {
+    let item = this.props.item;
+    this.props.deleteShareItem(item.name);
+  }
+
+  render() {
+    let item = this.props.item;
+    return (
+      <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+        <td>{item.user_info.nickname}</td>
+        <td>{Utils.sharePerms[item.permission]}</td>
+        <td>
+          <span
+            className={`sf2-icon-x3 sf2-x op-icon a-simulate ${this.state.isOperationShow ? '' : 'hide'}`}
+            onClick={this.deleteShareItem} 
+            title={gettext('Delete')}
+          >
+          </span>
+        </td>
+      </tr>
+    );
+  }
+}
+
+class UserList extends React.Component {
+
+  render() {
+    let items = this.props.items;
+    return (
+      <tbody>
+        {items.map((item, index) => {
+          return (
+            <UserItem key={index} item={item} deleteShareItem={this.props.deleteShareItem}/>
+          );
+        })}
+      </tbody>
+    );
+  }
+}
+
 const propTypes = {
   isGroupOwnedRepo: PropTypes.bool,
   itemPath: PropTypes.string.isRequired,
@@ -88,7 +145,7 @@ class ShareToUser extends React.Component {
     let users = [];
     let path = this.props.itemPath; 
     let repoID = this.props.repoID;
-    if (this.state.selectedOption.length > 0 ) {
+    if (this.state.selectedOption && this.state.selectedOption.length > 0 ) {
       for (let i = 0; i < this.state.selectedOption.length; i ++) {
         users[i] = this.state.selectedOption[i].email;
       }
@@ -134,8 +191,7 @@ class ShareToUser extends React.Component {
     }
   } 
 
-  deleteShareItem = (e, username) => {
-    e.preventDefault();
+  deleteShareItem = (username) => {
     let path = this.props.itemPath;
     let repoID = this.props.repoID;
     if (this.props.isGroupOwnedRepo) {
@@ -210,20 +266,6 @@ class ShareToUser extends React.Component {
   }
 }
 
-function UserList(props) {
-  return (
-    <tbody>
-      {props.items.map((item, index) => (
-        <tr key={index}>
-          <td>{item.user_info.nickname}</td>
-          <td>{Utils.sharePerms[item.permission]}</td>
-          <td><a href="#" onClick={(e) => {props.deleteShareItem(e, item.user_info.name);}} className="sf2-icon-x3 sf2-x op-icon" title={gettext('Delete')}></a></td>
-        </tr>
-      ))}
-    </tbody>
-  );
-}
-
 ShareToUser.propTypes = propTypes;
 
 export default ShareToUser;
diff --git a/frontend/src/components/dir-view/dir-panel.js b/frontend/src/components/dir-view/dir-panel.js
index 4d71ef7437..0910d86cec 100644
--- a/frontend/src/components/dir-view/dir-panel.js
+++ b/frontend/src/components/dir-view/dir-panel.js
@@ -126,6 +126,7 @@ class DirPanel extends React.Component {
                   onItemsDelete={this.props.onItemsDelete}
                 /> :
                 <DirOperationToolBar 
+                  isViewFile={false}
                   path={this.props.path}
                   repoID={this.props.repoID}
                   onAddFile={this.props.onAddFile}
@@ -152,6 +153,7 @@ class DirPanel extends React.Component {
           <div className="cur-view-container">
             <div className="cur-view-path">
               <CurDirPath 
+                isViewFile={false}
                 repoID={this.props.repoID}
                 repoName={this.props.repoName}
                 pathPrefix={this.props.pathPrefix}
@@ -209,9 +211,10 @@ class DirPanel extends React.Component {
           )}
           {this.props.libNeedDecrypt && (
             <ModalPortal>
-              <LibDecryptDialog repoID={this.props.repoID} 
-                                onLibDecryptDialog={this.props.onLibDecryptDialog}
-                                />
+              <LibDecryptDialog 
+                repoID={this.props.repoID} 
+                onLibDecryptDialog={this.props.onLibDecryptDialog}
+              />
             </ModalPortal>
           )}
         </div>
diff --git a/frontend/src/components/file-chooser/repo-list-item.js b/frontend/src/components/file-chooser/repo-list-item.js
index 34e70527b0..a48732b50a 100644
--- a/frontend/src/components/file-chooser/repo-list-item.js
+++ b/frontend/src/components/file-chooser/repo-list-item.js
@@ -46,14 +46,14 @@ class RepoListItem extends React.Component {
           <span className="icon far fa-folder"></span>
           <span className="name">{this.props.repo.repo_name}</span>
         </span>
-        {
+        {this.state.isShowChildren && (
           <DirentListView 
             repo={this.props.repo} 
             isShowChildren={this.state.isShowChildren} 
             onDirentItemClick={this.onDirentItemClick}
             selectedPath={this.props.selectedPath}
           />
-        }
+        )}
       </li>
     );
   }
diff --git a/frontend/src/components/toolbar/dir-operation-toolbar.js b/frontend/src/components/toolbar/dir-operation-toolbar.js
index 29d6033e3a..963f43faac 100644
--- a/frontend/src/components/toolbar/dir-operation-toolbar.js
+++ b/frontend/src/components/toolbar/dir-operation-toolbar.js
@@ -135,14 +135,9 @@ class DirOperationToolbar extends React.Component {
   }
 
   render() {
-    let isFile = this.props.isViewFile;
-    let itemName;
-    if (this.props.isViewFile) {
-        itemName =  Utils.getFileName(this.props.path)
-    } else {
-        itemName = this.props.path.replace('\/','');
-    }
-
+    let { path, isViewFile } = this.props;
+    let itemType = isViewFile ? 'file' : 'dir';
+    let itemName = isViewFile ? Utils.getFileName(path) : Utils.getFolderName(path);
     return (
       <Fragment>
         <div className="operation">
@@ -203,7 +198,7 @@ class DirOperationToolbar extends React.Component {
         {this.state.isShareDialogShow &&
           <ModalPortal>
             <ShareDialog 
-              isDir={!isFile}
+              itemType={itemType}
               itemName={itemName}
               itemPath={this.props.path}
               repoID={this.props.repoID}
diff --git a/frontend/src/css/toolbar.css b/frontend/src/css/toolbar.css
index 5ca4e909ba..cb60728cbf 100644
--- a/frontend/src/css/toolbar.css
+++ b/frontend/src/css/toolbar.css
@@ -26,8 +26,6 @@
   background-color: #fff;
   line-height: 29px;
   font-weight: normal;
-  font-size: 13px;
-  color: #333;
   border: 1px solid #ccc;
   border-radius: 2px;
 }
diff --git a/frontend/src/pages/my-libs/item.js b/frontend/src/pages/my-libs/item.js
index f9ced61e6b..a5df5e9a34 100644
--- a/frontend/src/pages/my-libs/item.js
+++ b/frontend/src/pages/my-libs/item.js
@@ -175,7 +175,7 @@ class Item extends Component {
       'is_admin': data.is_admin,
       'permission': permission
     });
-    data.url = `${siteRoot}library/${data.repo_id}/${Utils.encodePath(data.repo_name)}`;
+    data.url = `${siteRoot}library/${data.repo_id}/${Utils.encodePath(data.repo_name)}/`;
 
     let iconVisibility = this.state.showOpIcon ? '' : ' invisible';
     let shareIconClassName = 'sf2-icon-share sf2-x op-icon' + iconVisibility; 
diff --git a/frontend/src/utils/utils.js b/frontend/src/utils/utils.js
index 39e68cecb3..b703b1459b 100644
--- a/frontend/src/utils/utils.js
+++ b/frontend/src/utils/utils.js
@@ -170,6 +170,24 @@ export const Utils = {
     return filePath.slice(lastIndex+1);
   },
 
+    /**
+   * input: 
+   *  eg: /
+   *      ../abc/abc/
+   *      ../abc/bc
+   * output(return):
+   *  eg: /
+   *      abc
+   *      bc
+   */
+  getFolderName: function(path) {
+    if (path === '/') {
+      return path;
+    }
+    path = path[path.length - 1] !== '/' ? path : path.slice(0, path.length -2);
+    return path.slice(path.lastIndexOf('/') + 1);
+  },
+
   /*
     return dirname of a path.
     if path is '/', return '/'.