diff --git a/frontend/src/components/dialog/list-taggedfiles-dialog.js b/frontend/src/components/dialog/list-taggedfiles-dialog.js
index b3f9dea9fa..789808be04 100644
--- a/frontend/src/components/dialog/list-taggedfiles-dialog.js
+++ b/frontend/src/components/dialog/list-taggedfiles-dialog.js
@@ -51,7 +51,7 @@ class ListTaggedFilesDialog extends React.Component {
         </ModalHeader>
         <ModalBody className="dialog-list-container">
           <table>
-            <thead className="table-thread-hidden">
+            <thead className="table-thead-hidden">
               <tr>
                 <th width='50%' className="ellipsis">{gettext('Name')}</th>
                 <th width='25%'>{gettext('Size')}</th>
diff --git a/frontend/src/components/dialog/share-dialog.js b/frontend/src/components/dialog/share-dialog.js
index c8fe662241..f7d92b89de 100644
--- a/frontend/src/components/dialog/share-dialog.js
+++ b/frontend/src/components/dialog/share-dialog.js
@@ -109,7 +109,7 @@ class ShareDialog extends React.Component {
       <div>
         <Modal isOpen={true} style={{maxWidth: '720px'}} className="share-dialog">
           <ModalHeader toggle={this.props.toggleDialog}>{gettext('Share')} <span className="sf-font" title={itemName}>{itemName}</span></ModalHeader>
-          <ModalBody className="share-dialog-content">
+          <ModalBody className="dialog-list-container share-dialog-content">
             {(itemType === 'library' || itemType === 'dir') && this.renderDirContent()}
             {itemType === 'file' && this.renderFileContent()}
           </ModalBody>
diff --git a/frontend/src/components/dialog/share-to-group.js b/frontend/src/components/dialog/share-to-group.js
index 20f324300d..031500437b 100644
--- a/frontend/src/components/dialog/share-to-group.js
+++ b/frontend/src/components/dialog/share-to-group.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Button } from 'reactstrap';
 import Select from 'react-select';
@@ -246,56 +246,71 @@ class ShareToGroup extends React.Component {
 
   render() {
     return (
-      <table>
-        <thead>
-          <tr>
-            <th style={{'width': '40%'}}>{gettext('Group')}</th>
-            <th style={{'width': '40%'}}>{gettext('Permission')}</th>
-            <th></th>
-          </tr>
-          <tr>
-            <td>
-              <Select
-                isMulti
-                onChange={this.handleSelectChange}
-                options={this.options}
-                placeholder={gettext('Select a group')}
-                components={makeAnimated()}
-                inputId={'react-select-2-input'}
-                value={this.state.selectedOption}
-              />
-            </td>
-            <td>
-              <PermissionEditor 
-                isTextMode={false}
-                isEditIconShow={false}
-                currentPermission={this.state.permission}
-                permissions={this.permissions}
-                onPermissionChangedHandler={this.setPermission}
-              />
-            </td>
-            <td>
-              <Button onClick={this.shareToGroup}>{gettext('Submit')}</Button>
-            </td>
-          </tr>
-          {this.state.errorMsg.length > 0 &&                  
-            this.state.errorMsg.map((item, index) => {
-              let errMessage = item.group_name + ': ' + item.error_msg;
-              return (
-                <tr key={index}>
-                  <td colSpan={3}><p className="error">{errMessage}</p></td>
-                </tr>
-              );
-            })                                                
-          }
-        </thead>
-        <GroupList 
-          items={this.state.sharedItems}
-          permissions={this.permissions}
-          deleteShareItem={this.deleteShareItem} 
-          onChangeUserPermission={this.onChangeUserPermission}
-        />
-      </table>
+      <Fragment>
+        <table>
+          <thead>
+            <tr>
+              <th width="40%">{gettext('Group')}</th>
+              <th width="40%">{gettext('Permission')}</th>
+              <th width="20%"></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <Select
+                  isMulti
+                  onChange={this.handleSelectChange}
+                  options={this.options}
+                  placeholder={gettext('Select a group')}
+                  components={makeAnimated()}
+                  inputId={'react-select-2-input'}
+                  value={this.state.selectedOption}
+                />
+              </td>
+              <td>
+                <PermissionEditor 
+                  isTextMode={false}
+                  isEditIconShow={false}
+                  currentPermission={this.state.permission}
+                  permissions={this.permissions}
+                  onPermissionChangedHandler={this.setPermission}
+                />
+              </td>
+              <td>
+                <Button onClick={this.shareToGroup}>{gettext('Submit')}</Button>
+              </td>
+            </tr>
+            {this.state.errorMsg.length > 0 &&                  
+              this.state.errorMsg.map((item, index) => {
+                let errMessage = item.group_name + ': ' + item.error_msg;
+                return (
+                  <tr key={index}>
+                    <td colSpan={3}><p className="error">{errMessage}</p></td>
+                  </tr>
+                );
+              })                                                
+            }
+          </tbody>
+        </table>
+        <div className="share-list-container">
+          <table className="table-thead-hidden">
+            <thead>
+              <tr>
+                <th width="40%">{gettext('Group')}</th>
+                <th width="40%">{gettext('Permission')}</th>
+                <th width="20%"></th>
+              </tr>
+            </thead>
+            <GroupList 
+              items={this.state.sharedItems}
+              permissions={this.permissions}
+              deleteShareItem={this.deleteShareItem} 
+              onChangeUserPermission={this.onChangeUserPermission}
+            />
+          </table>
+        </div>
+      </Fragment>
     );
   }
 }
diff --git a/frontend/src/components/dialog/share-to-user.js b/frontend/src/components/dialog/share-to-user.js
index 5b224593c3..9d22384499 100644
--- a/frontend/src/components/dialog/share-to-user.js
+++ b/frontend/src/components/dialog/share-to-user.js
@@ -263,64 +263,79 @@ class ShareToUser extends React.Component {
   render() {
     let { sharedItems } = this.state;
     return (
-      <table>
-        <thead> 
-          <tr>
-            <th style={{'width': '40%'}}>{gettext('User')}</th>
-            <th style={{'width': '40%'}}>{gettext('Permission')}</th>
-            <th></th>
-          </tr>
-          <tr>
-            <td>
-              <AsyncSelect
-                inputId={'react-select-1-input'}
-                className='reviewer-select' 
-                placeholder={gettext('Select users...')}
-                loadOptions={this.loadOptions}
-                onChange={this.handleSelectChange}
-                value={this.state.selectedOption}
-                isMulti 
-                isFocused
-                isClearable 
-                classNamePrefix
-              />
-            </td>
-            <td>
-              <PermissionEditor 
-                isTextMode={false}
-                isEditIconShow={false}
-                currentPermission={this.state.permission}
-                permissions={this.permissions}
-                onPermissionChangedHandler={this.setPermission}
-              />
-            </td>
-            <td>
-              <Button onClick={this.shareToUser}>{gettext('Submit')}</Button>
-            </td>
-          </tr>
-          {this.state.errorMsg.length > 0 &&
-            this.state.errorMsg.map((item, index) => {
-              let errMessage = '';
-              if (item.email) {
-                errMessage = item.email + ': ' + item.error_msg;
-              } else {
-                errMessage = item;
-              }
-              return (
-                <tr key={index}>
-                  <td colSpan={3}><p className="error">{errMessage}</p></td>
-                </tr>
-              );
-            })
-          }
-        </thead>
-        <UserList 
-          items={sharedItems}
-          permissions={this.permissions}
-          deleteShareItem={this.deleteShareItem} 
-          onChangeUserPermission={this.onChangeUserPermission}
-        />
-      </table>
+      <Fragment>
+        <table>
+          <thead>
+            <tr>
+              <th width="40%">{gettext('User')}</th>
+              <th width="40%">{gettext('Permission')}</th>
+              <th width="20%"></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <AsyncSelect
+                  inputId={'react-select-1-input'}
+                  className='reviewer-select' 
+                  placeholder={gettext('Select users...')}
+                  loadOptions={this.loadOptions}
+                  onChange={this.handleSelectChange}
+                  value={this.state.selectedOption}
+                  isMulti 
+                  isFocused
+                  isClearable 
+                  classNamePrefix
+                />
+              </td>
+              <td>
+                <PermissionEditor 
+                  isTextMode={false}
+                  isEditIconShow={false}
+                  currentPermission={this.state.permission}
+                  permissions={this.permissions}
+                  onPermissionChangedHandler={this.setPermission}
+                />
+              </td>
+              <td>
+                <Button onClick={this.shareToUser}>{gettext('Submit')}</Button>
+              </td>
+            </tr>
+            {this.state.errorMsg.length > 0 &&
+              this.state.errorMsg.map((item, index) => {
+                let errMessage = '';
+                if (item.email) {
+                  errMessage = item.email + ': ' + item.error_msg;
+                } else {
+                  errMessage = item;
+                }
+                return (
+                  <tr key={index}>
+                    <td colSpan={3}><p className="error">{errMessage}</p></td>
+                  </tr>
+                );
+              })
+            }
+          </tbody>
+        </table>
+        <div className="share-list-container">
+          <table className="table-thead-hidden">
+            <thead>
+              <tr>
+                <th width="40%">{gettext('User')}</th>
+                <th width="40%">{gettext('Permission')}</th>
+                <th width="20%"></th>
+              </tr>
+            </thead>
+            <UserList 
+              items={sharedItems}
+              permissions={this.permissions}
+              deleteShareItem={this.deleteShareItem} 
+              onChangeUserPermission={this.onChangeUserPermission}
+            />
+          </table>
+        </div>
+      </Fragment>
     );
   }
 }
diff --git a/frontend/src/components/dirent-detail/detail-list-view.js b/frontend/src/components/dirent-detail/detail-list-view.js
index 638e035f5f..c17d50fb1e 100644
--- a/frontend/src/components/dirent-detail/detail-list-view.js
+++ b/frontend/src/components/dirent-detail/detail-list-view.js
@@ -111,7 +111,7 @@ class DetailListView extends React.Component {
                       );
                     })}
                   </ul>
-                  <i className='fa fa-pencil tag-edit-icon' onClick={this.onEditFileTagToggle}></i>
+                  <i className='fa fa-pencil attr-action-icon' onClick={this.onEditFileTagToggle}></i>
                 </td>
               </tr>
               <tr className="file-related-files">
diff --git a/frontend/src/components/permission-editor.js b/frontend/src/components/permission-editor.js
index fd1b1d90ce..949807cded 100644
--- a/frontend/src/components/permission-editor.js
+++ b/frontend/src/components/permission-editor.js
@@ -80,8 +80,7 @@ class PermissionEditor extends React.Component {
             {this.props.isEditIconShow && (
               <span 
                 title={gettext('Edit')} 
-                style={{fontSize: '0.875rem', marginLeft: '0.5rem'}} 
-                className="fa fa-pencil action-icon" 
+                className="fa fa-pencil attr-action-icon" 
                 onClick={this.onEidtPermission}>
               </span>
             )}
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 3fb21e1db9..b340d166ea 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
@@ -52,7 +52,7 @@ class SharedRepoListView extends React.Component {
     let isShowTableThread = this.props.isShowTableThread !== undefined ? this.props.isShowTableThread : true;
     return (
       <table>
-        <thead className={isShowTableThread ? '' : 'table-thread-hidden'}>
+        <thead className={isShowTableThread ? '' : 'table-thead-hidden'}>
           <tr>
             <th width="4%"><span className="sr-only">{gettext("Library Type")}</span></th>
             <th width="40%">{gettext("Name")}
diff --git a/frontend/src/css/repo-tag.css b/frontend/src/css/repo-tag.css
index d0efbea007..4e33693fad 100644
--- a/frontend/src/css/repo-tag.css
+++ b/frontend/src/css/repo-tag.css
@@ -70,16 +70,6 @@
   right: 0.5rem;
 }
 
-.tag-edit-icon {
-  padding: 0 0.5rem;
-  color: #888;
-  cursor: pointer;
-}
-
-.tag-edit-icon:hover {
-  color: #333;
-}
-
 .file-tag-item {
   margin: 0.25rem 0;
   padding: 0 0.5rem;
diff --git a/frontend/src/css/share-link-dialog.css b/frontend/src/css/share-link-dialog.css
index 11b529cfe6..21b35a2a7e 100644
--- a/frontend/src/css/share-link-dialog.css
+++ b/frontend/src/css/share-link-dialog.css
@@ -3,6 +3,7 @@
     min-height: 15rem;
     display: flex;
     flex-direction: row;
+    overflow: hidden;
 }
 
 .share-dialog-content .share-dialog-side {
@@ -21,6 +22,11 @@
     flex: 1;
 }
 
+.share-list-container {
+    max-height: 15rem;
+    overflow: auto;
+}
+
 .share-dialog-content label {
     padding: 0.5rem 0 0.25rem;
 }
diff --git a/frontend/src/pages/shared-libs/shared-libs.js b/frontend/src/pages/shared-libs/shared-libs.js
index d7ef6eee9c..8b6e672858 100644
--- a/frontend/src/pages/shared-libs/shared-libs.js
+++ b/frontend/src/pages/shared-libs/shared-libs.js
@@ -196,7 +196,7 @@ class Item extends Component {
 
     let iconVisibility = this.state.showOpIcon ? '' : ' invisible';
     let shareIconClassName = 'op-icon sf2-icon-share repo-share-btn' + iconVisibility; 
-    let leaveShareIconClassName = 'op-icon sf2-icon-delete' + iconVisibility;
+    let leaveShareIconClassName = 'op-icon sf2-icon-x3' + iconVisibility;
 
     const desktopItem = (
       <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
diff --git a/media/css/seahub_react.css b/media/css/seahub_react.css
index ee9386c679..58ffe188f2 100644
--- a/media/css/seahub_react.css
+++ b/media/css/seahub_react.css
@@ -150,6 +150,7 @@ ul,ol,li {
 }
 
 .sf-dropdown-toggle {
+    margin-left: 0.5rem;
     vertical-align: middle;
     font-style: normal;
     font-size: 0.85rem;
@@ -166,8 +167,9 @@ ul,ol,li {
     user-select: none;
 }
 
-.dialog-list-container { /*for content is list dialog*/
-    height: 20rem;
+.dialog-list-container { /* for dialog containing list */
+    min-height: 15rem;
+    max-height: 35rem;
     overflow: auto;
 }
 
@@ -297,8 +299,9 @@ ul,ol,li {
 
 /** op-icon **/
 .op-icon,
-.action-icon {
-    margin-right: 0.5rem;
+.action-icon,
+.attr-action-icon {
+    margin-left: 0.5rem;
     font-size: 1.25rem;
     font-style: normal;
     line-height: 1;
@@ -316,16 +319,24 @@ ul,ol,li {
     border-bottom: 0.125rem solid #f89a68;
 }
 
-.action-icon {
+.action-icon,
+.attr-action-icon {
+    margin-right: 0.25rem;
     color:#888;
 }
 
 .action-icon:focus,
-.action-icon:hover {
+.action-icon:hover,
+.attr-action-icon:focus,
+.attr-action-icon:hover {
     color: #333;
     text-decoration: none;
 }
 
+.attr-action-icon {
+    font-size: 0.875rem;
+}
+
 /** Account info **/
 #account {
     position:relative;
@@ -837,7 +848,12 @@ table td img {
     height: 1.5rem;
 }
 
-.table-thread-hidden th {   /* hide table th */
+.table-thead-hidden thead tr {
+    height: 0;
+    border: 0;
+}
+
+.table-thead-hidden th {   /* hide table th */
     padding: 0;
     border: 0;
     font-size: 0;