diff --git a/frontend/src/components/dirent-list-view/dirent-list-item.js b/frontend/src/components/dirent-list-view/dirent-list-item.js
index 28d65d62b7..cf6661e03b 100644
--- a/frontend/src/components/dirent-list-view/dirent-list-item.js
+++ b/frontend/src/components/dirent-list-view/dirent-list-item.js
@@ -59,21 +59,6 @@ class DirentListItem extends React.Component {
 
   constructor(props) {
     super(props);
-    this.state = {
-      isOperationShow: false,
-      highlight: false,
-      isZipDialogOpen: false,
-      isMoveDialogShow: false,
-      isCopyDialogShow: false,
-      isShareDialogShow: false,
-      isMutipleOperation: false,
-      isShowTagTooltip: false,
-      isDragTipShow: false,
-      isDropTipshow: false,
-      isEditFileTagShow: false,
-      isPermissionDialogOpen: false,
-      isOpMenuOpen: false // for mobile
-    };
 
     const { dirent } = this.props;
     const { isCustomPermission, customPermission } = Utils.getUserPermission(dirent.permission);
@@ -86,6 +71,23 @@ class DirentListItem extends React.Component {
       this.canPreview = preview || modify;
       this.canDrag = modify;
     }
+
+    this.state = {
+      isOperationShow: false,
+      highlight: false,
+      isZipDialogOpen: false,
+      isMoveDialogShow: false,
+      isCopyDialogShow: false,
+      isShareDialogShow: false,
+      isMutipleOperation: false,
+      canDrag: this.canDrag,
+      isShowTagTooltip: false,
+      isDragTipShow: false,
+      isDropTipshow: false,
+      isEditFileTagShow: false,
+      isPermissionDialogOpen: false,
+      isOpMenuOpen: false // for mobile
+    };
   }
 
   componentWillReceiveProps(nextProps) {
@@ -115,7 +117,7 @@ class DirentListItem extends React.Component {
         isOperationShow: true,
       });
     }
-    if (this.canDrag) {
+    if (this.state.canDrag) {
       this.setState({isDragTipShow: true});
     }
   }
@@ -127,7 +129,7 @@ class DirentListItem extends React.Component {
         isOperationShow: true,
       });
     }
-    if (this.canDrag) {
+    if (this.state.canDrag) {
       this.setState({isDragTipShow: true});
     }
   }
@@ -314,6 +316,7 @@ class DirentListItem extends React.Component {
     this.setState({
       isOperationShow: false,
       isRenameing: true,
+      canDrag: false
     });
   }
 
@@ -323,7 +326,10 @@ class DirentListItem extends React.Component {
   }
 
   onRenameCancel = () => {
-    this.setState({isRenameing: false});
+    this.setState({
+      isRenameing: false,
+      canDrag: this.canDrag // set it back to the initial value
+    });
     this.unfreezeItem();
   }
 
@@ -479,7 +485,7 @@ class DirentListItem extends React.Component {
   }
 
   onItemDragStart = (e) => {
-    if (Utils.isIEBrower() || !this.canDrag) {
+    if (Utils.isIEBrower() || !this.state.canDrag) {
       return false;
     }
     e.dataTransfer.effectAllowed = 'move';
@@ -509,7 +515,7 @@ class DirentListItem extends React.Component {
   }
 
   onItemDragEnter = (e) => {
-    if (Utils.isIEBrower() || !this.canDrag) {
+    if (Utils.isIEBrower() || !this.state.canDrag) {
       return false;
     }
     if (this.props.dirent.type === 'dir') {
@@ -519,7 +525,7 @@ class DirentListItem extends React.Component {
   }
 
   onItemDragOver = (e) => {
-    if (Utils.isIEBrower() || !this.canDrag) {
+    if (Utils.isIEBrower() || !this.state.canDrag) {
       return false;
     }
     if (e.dataTransfer.dropEffect === 'copy') {
@@ -530,7 +536,7 @@ class DirentListItem extends React.Component {
   }
 
   onItemDragLeave = (e) => {
-    if (Utils.isIEBrower() || !this.canDrag) {
+    if (Utils.isIEBrower() || !this.state.canDrag) {
       return false;
     }
 
@@ -541,7 +547,7 @@ class DirentListItem extends React.Component {
   }
 
   onItemDragDrop = (e) => {
-    if (Utils.isIEBrower() || !this.canDrag) {
+    if (Utils.isIEBrower() || !this.state.canDrag) {
       return false;
     }
     this.setState({isDropTipshow: false});
@@ -698,10 +704,11 @@ class DirentListItem extends React.Component {
     let lockedInfo = gettext('locked by {name}').replace('{name}', dirent.lock_owner_name);
 
     const isDesktop = Utils.isDesktop();
+    const { canDrag } = this.state;
     const desktopItem = (
       <tr
         className={trClass}
-        draggable={this.canDrag}
+        draggable={canDrag}
         onFocus={this.onMouseEnter}
         onMouseEnter={this.onMouseEnter}
         onMouseOver={this.onMouseOver}
diff --git a/frontend/src/components/select-editor/select-editor.js b/frontend/src/components/select-editor/select-editor.js
index 8b748d4527..3c31377d74 100644
--- a/frontend/src/components/select-editor/select-editor.js
+++ b/frontend/src/components/select-editor/select-editor.js
@@ -6,6 +6,7 @@ import '../../css/select-editor.css';
 
 const propTypes = {
   isTextMode: PropTypes.bool.isRequired, // there will be two mode. first: text and select. second: just select
+  isEditing: PropTypes.bool,
   isEditIconShow: PropTypes.bool.isRequired,
   options: PropTypes.array.isRequired,
   currentOption: PropTypes.string.isRequired,
@@ -22,12 +23,13 @@ class SelectEditor extends React.Component {
 
   static defaultProps = {
     enableAddCustomPermission: false,
+    isEditing: false,
   }
 
   constructor(props) {
     super(props);
     this.state = {
-      isEditing: false,
+      isEditing: props.isEditing,
       options: []
     };
     this.options = [];
diff --git a/frontend/src/components/select-editor/share-permission-editor.js b/frontend/src/components/select-editor/share-permission-editor.js
index 1848a85676..939f5422d9 100644
--- a/frontend/src/components/select-editor/share-permission-editor.js
+++ b/frontend/src/components/select-editor/share-permission-editor.js
@@ -10,6 +10,7 @@ import { isPro } from '../../utils/constants';
 const propTypes = {
   repoID: PropTypes.string,
   isTextMode: PropTypes.bool.isRequired,
+  isEditing: PropTypes.bool,
   isEditIconShow: PropTypes.bool.isRequired,
   permissions: PropTypes.array.isRequired,
   currentPermission: PropTypes.string.isRequired,
@@ -20,6 +21,10 @@ const propTypes = {
 
 class SharePermissionEditor extends React.Component {
 
+  static defaultProps = {
+    isEditing: false,
+  }
+
   constructor(props) {
     super(props);
     this.state = {
@@ -84,7 +89,7 @@ class SharePermissionEditor extends React.Component {
     }
     return value;
   }
-  
+
   translateExplanation = (explanation) => {
     let value = Utils.sharePermsExplanation(explanation);
     if (!value) {
@@ -120,6 +125,7 @@ class SharePermissionEditor extends React.Component {
     return (
       <SelectEditor
         isTextMode={this.props.isTextMode}
+        isEditing={this.props.isEditing}
         isEditIconShow={this.props.isEditIconShow}
         options={this.getPermissions()}
         currentOption={this.props.currentPermission}
diff --git a/frontend/src/css/dirents-menu.css b/frontend/src/css/dirents-menu.css
index 5da80075da..a1a6c713fc 100644
--- a/frontend/src/css/dirents-menu.css
+++ b/frontend/src/css/dirents-menu.css
@@ -1,5 +1,5 @@
 .dirents-more-menu {
-  margin-left: -9px;
+  margin-left: 0;
   padding: 4px 15px;
   border: 1px solid #ccc;
   border-top-right-radius: 2px !important;
diff --git a/frontend/src/models/shared-folder-info.js b/frontend/src/models/shared-folder-info.js
index 70e4922a49..6407b3b8c7 100644
--- a/frontend/src/models/shared-folder-info.js
+++ b/frontend/src/models/shared-folder-info.js
@@ -7,6 +7,7 @@ class SharedFolderInfo {
     this.repo_name = object.repo_name;
     this.share_type = object.share_type;
     this.share_permission = object.share_permission;
+    this.share_permission_name = object.share_permission_name;
     if (object.share_type === 'group') {
       this.group_id = object.group_id;
       this.group_name = object.group_name;
diff --git a/frontend/src/models/shared-repo-info.js b/frontend/src/models/shared-repo-info.js
index cbb6bcadb6..0a562bb1d8 100644
--- a/frontend/src/models/shared-repo-info.js
+++ b/frontend/src/models/shared-repo-info.js
@@ -5,6 +5,7 @@ class SharedRepoInfo {
     this.repo_name = object.repo_name;
     this.share_type = object.share_type;
     this.share_permission = object.share_permission;
+    this.share_permission_name = object.share_permission_name;
     this.modifier_name = object.modifier_name;
     this.modifier_email = object.modifier_email;
     this.modifier_contact_email = object.modifier_contact_email;
diff --git a/frontend/src/pages/share-admin/folders.js b/frontend/src/pages/share-admin/folders.js
index b843373258..511dc50662 100644
--- a/frontend/src/pages/share-admin/folders.js
+++ b/frontend/src/pages/share-admin/folders.js
@@ -78,10 +78,12 @@ class Item extends Component {
     super(props);
     this.state = {
       share_permission: this.props.item.share_permission,
+      share_permission_name: this.props.item.share_permission_name,
       isOpIconShown: false,
       isOpMenuOpen: false, // for mobile
       isPermSelectDialogOpen: false, // for mobile
-      unshared: false
+      unshared: false,
+      isShowPermEditor: false,
     };
 
     this.permissions = ['rw', 'r'];
@@ -170,13 +172,18 @@ class Item extends Component {
     });
   }
 
+  onEditPermission = (event) => {
+    event.nativeEvent.stopImmediatePropagation();
+    this.setState({isShowPermEditor: true});
+  }
+
   render() {
     if (this.state.unshared) {
       return null;
     }
 
     const item = this.props.item;
-    let { share_permission, isOpIconShown, isPermSelectDialogOpen } = this.state;
+    let { share_permission, share_permission_name, isOpIconShown, isPermSelectDialogOpen, isShowPermEditor } = this.state;
 
     let is_readonly = false;
     if (share_permission == 'r' || share_permission == 'preview') {
@@ -201,14 +208,31 @@ class Item extends Component {
             <span title={item.contact_email}>{item.user_name}</span> : item.group_name}
         </td>
         <td>
-          <SharePermissionEditor
-            repoID={item.repo_id}
-            isTextMode={true}
-            isEditIconShow={isOpIconShown}
-            currentPermission={share_permission}
-            permissions={this.permissions}
-            onPermissionChanged={this.changePerm}
-          />
+          {!isShowPermEditor && (
+            <div>
+              <span>{Utils.sharePerms(share_permission) || share_permission_name}</span>
+              {isOpIconShown && (
+                <a href="#"
+                  role="button"
+                  aria-label={gettext('Edit')}
+                  title={gettext('Edit')}
+                  className="fa fa-pencil-alt attr-action-icon"
+                  onClick={this.onEditPermission}>
+                </a>
+              )}
+            </div>
+          )}
+          {isShowPermEditor && (
+            <SharePermissionEditor
+              repoID={item.repo_id}
+              isTextMode={true}
+              isEditIconShow={isOpIconShown}
+              isEditing={true}
+              currentPermission={share_permission}
+              permissions={this.permissions}
+              onPermissionChanged={this.changePerm}
+            />
+          )}
         </td>
         <td><a href="#" role="button" aria-label={gettext('Unshare')} className={`action-icon sf2-icon-x3 ${isOpIconShown ? '': 'invisible'}`} title={gettext('Unshare')} onClick={this.unshare}></a></td>
       </tr>
diff --git a/frontend/src/pages/share-admin/libraries.js b/frontend/src/pages/share-admin/libraries.js
index 01388efba2..7d70963e81 100644
--- a/frontend/src/pages/share-admin/libraries.js
+++ b/frontend/src/pages/share-admin/libraries.js
@@ -83,11 +83,13 @@ class Item extends Component {
     let item = this.props.item;
     this.state = {
       share_permission: item.share_permission,
+      share_permission_name: item.share_permission_name,
       is_admin: item.is_admin,
       isOpIconShown: false,
       isOpMenuOpen: false, // for mobile
       isPermSelectDialogOpen: false, // for mobile
-      unshared: false
+      unshared: false,
+      isShowPermEditor: false,
     };
     let permissions = ['rw', 'r'];
     this.permissions = permissions;
@@ -171,12 +173,17 @@ class Item extends Component {
     });
   }
 
+  onEditPermission = (event) => {
+    event.nativeEvent.stopImmediatePropagation();
+    this.setState({isShowPermEditor: true});
+  }
+
   render() {
     if (this.state.unshared) {
       return null;
     }
 
-    let { share_permission, is_admin, isOpIconShown, isPermSelectDialogOpen } = this.state;
+    let { share_permission, share_permission_name, is_admin, isOpIconShown, isPermSelectDialogOpen, isShowPermEditor } = this.state;
     let item = this.props.item;
     Object.assign(item, {
       share_permission: share_permission,
@@ -215,14 +222,31 @@ class Item extends Component {
           {item.share_type == 'personal' ? <span title={item.contact_email}>{shareTo}</span> : shareTo}
         </td>
         <td>
-          <SharePermissionEditor
-            repoID={item.repo_id}
-            isTextMode={true}
-            isEditIconShow={this.state.isOpIconShown}
-            currentPermission={share_permission}
-            permissions={this.permissions}
-            onPermissionChanged={this.changePerm}
-          />
+          {!isShowPermEditor && (
+            <div>
+              <span>{Utils.sharePerms(share_permission) || share_permission_name}</span>
+              {isOpIconShown && (
+                <a href="#"
+                  role="button"
+                  aria-label={gettext('Edit')}
+                  title={gettext('Edit')}
+                  className="fa fa-pencil-alt attr-action-icon"
+                  onClick={this.onEditPermission}>
+                </a>
+              )}
+            </div>
+          )}
+          {isShowPermEditor && (
+            <SharePermissionEditor
+              repoID={item.repo_id}
+              isTextMode={true}
+              isEditing={true}
+              isEditIconShow={this.state.isOpIconShown}
+              currentPermission={share_permission}
+              permissions={this.permissions}
+              onPermissionChanged={this.changePerm}
+            />
+          )}
         </td>
         <td><a href="#" role="button" aria-label={gettext('Unshare')} className={`action-icon sf2-icon-x3 ${isOpIconShown ? '': 'invisible'}`} title={gettext('Unshare')} onClick={this.unshare}></a></td>
       </tr>
diff --git a/seahub/api2/endpoints/shared_folders.py b/seahub/api2/endpoints/shared_folders.py
index 70ae1c4596..1216932c2e 100644
--- a/seahub/api2/endpoints/shared_folders.py
+++ b/seahub/api2/endpoints/shared_folders.py
@@ -16,9 +16,11 @@ from seahub.api2.throttling import UserRateThrottle
 from seahub.profile.models import Profile
 from seahub.utils import is_org_context
 from seahub.base.templatetags.seahub_tags import email2nickname
+from seahub.share.models import CustomSharePermissions
 
 logger = logging.getLogger(__name__)
 
+
 class SharedFolders(APIView):
 
     authentication_classes = (TokenAuthentication, SessionAuthentication)
@@ -48,11 +50,26 @@ class SharedFolders(APIView):
             error_msg = 'Internal Server Error'
             return api_error(status.HTTP_500_INTERNAL_SERVER_ERROR, error_msg)
 
+        repo_id_list = []
+        for repo in shared_repos:
+
+            if repo.is_virtual:
+                continue
+
+            repo_id = repo.repo_id
+            repo_id_list.append(repo_id)
+
+        custom_permission_dict = {}
+        custom_permissions = CustomSharePermissions.objects.filter(repo_id__in=repo_id_list)
+        for custom_permission in custom_permissions:
+            custom_id = f'custom-{custom_permission.id}'
+            custom_permission_dict[custom_id] = custom_permission.name
+
         returned_result = []
         shared_repos.sort(key=lambda x: x.repo_name)
         for repo in shared_repos:
             if not repo.is_virtual:
-                    continue
+                continue
 
             result = {}
             result['repo_id'] = repo.origin_repo_id
@@ -61,6 +78,7 @@ class SharedFolders(APIView):
             result['folder_name'] = repo.name
             result['share_type'] = repo.share_type
             result['share_permission'] = repo.permission
+            result['share_permission_name'] = custom_permission_dict.get(repo.permission, '')
 
             if repo.share_type == 'personal':
                 result['user_name'] = email2nickname(repo.user)
@@ -73,10 +91,15 @@ class SharedFolders(APIView):
                 if not group:
                     if is_org_context(request):
                         seafile_api.org_unshare_subdir_for_group(org_id,
-                                repo.repo_id, repo.origin_path, username, repo.group_id)
+                                                                 repo.repo_id,
+                                                                 repo.origin_path,
+                                                                 username,
+                                                                 repo.group_id)
                     else:
-                        seafile_api.unshare_subdir_for_group(
-                                repo.repo_id, repo.origin_path, username, repo.group_id)
+                        seafile_api.unshare_subdir_for_group(repo.repo_id,
+                                                             repo.origin_path,
+                                                             username,
+                                                             repo.group_id)
                     continue
 
                 result['group_id'] = repo.group_id
diff --git a/seahub/api2/endpoints/shared_repos.py b/seahub/api2/endpoints/shared_repos.py
index 69a40e59d0..d9fb9ec8f3 100644
--- a/seahub/api2/endpoints/shared_repos.py
+++ b/seahub/api2/endpoints/shared_repos.py
@@ -17,13 +17,15 @@ from seahub.profile.models import Profile
 from seahub.utils import is_org_context, is_valid_username, send_perm_audit_msg
 from seahub.utils.repo import get_available_repo_perms
 from seahub.base.templatetags.seahub_tags import email2nickname, email2contact_email
-from seahub.share.models import ExtraSharePermission, ExtraGroupsSharePermission
+from seahub.share.models import ExtraSharePermission, ExtraGroupsSharePermission, \
+        CustomSharePermissions
 from seahub.share.utils import update_user_dir_permission, update_group_dir_permission,\
         check_user_share_out_permission, check_group_share_out_permission, \
         normalize_custom_permission_name
 
 logger = logging.getLogger(__name__)
 
+
 class SharedRepos(APIView):
 
     authentication_classes = (TokenAuthentication, SessionAuthentication)
@@ -55,13 +57,29 @@ class SharedRepos(APIView):
             error_msg = 'Internal Server Error'
             return api_error(status.HTTP_500_INTERNAL_SERVER_ERROR, error_msg)
 
+        repo_id_list = []
+        for repo in shared_repos:
+
+            if repo.is_virtual:
+                continue
+
+            repo_id = repo.repo_id
+            repo_id_list.append(repo_id)
+
+        custom_permission_dict = {}
+        custom_permissions = CustomSharePermissions.objects.filter(repo_id__in=repo_id_list)
+        for custom_permission in custom_permissions:
+            custom_id = f'custom-{custom_permission.id}'
+            custom_permission_dict[custom_id] = custom_permission.name
+
         returned_result = []
         shared_repos.sort(key=lambda x: x.repo_name)
         usernames = []
         gids = []
+
         for repo in shared_repos:
             if repo.is_virtual:
-                    continue
+                continue
 
             result = {}
             result['repo_id'] = repo.repo_id
@@ -69,6 +87,7 @@ class SharedRepos(APIView):
             result['encrypted'] = repo.encrypted
             result['share_type'] = repo.share_type
             result['share_permission'] = repo.permission
+            result['share_permission_name'] = custom_permission_dict.get(repo.permission, '')
             result['modifier_email'] = repo.last_modifier
             result['modifier_name'] = email2nickname(repo.last_modifier)
             result['modifier_contact_email'] = email2contact_email(repo.last_modifier)
@@ -163,7 +182,7 @@ class SharedRepo(APIView):
                 return api_error(status.HTTP_500_INTERNAL_SERVER_ERROR, error_msg)
 
             send_perm_audit_msg('modify-repo-perm', username,
-                shared_to, repo_id, '/', permission)
+                                shared_to, repo_id, '/', permission)
 
         if share_type == 'group':
             group_id = request.data.get('group_id', None)
@@ -194,7 +213,7 @@ class SharedRepo(APIView):
                 return api_error(status.HTTP_500_INTERNAL_SERVER_ERROR, error_msg)
 
             send_perm_audit_msg('modify-repo-perm', username,
-                    group_id, repo_id, '/', permission)
+                                group_id, repo_id, '/', permission)
 
         if share_type == 'public':
 
@@ -215,7 +234,7 @@ class SharedRepo(APIView):
                 return api_error(status.HTTP_500_INTERNAL_SERVER_ERROR, error_msg)
 
             send_perm_audit_msg('modify-repo-perm', username,
-                    'all', repo_id, '/', permission)
+                                'all', repo_id, '/', permission)
 
         return Response({'success': True})
 
@@ -279,7 +298,7 @@ class SharedRepo(APIView):
                 return api_error(status.HTTP_500_INTERNAL_SERVER_ERROR, error_msg)
 
             send_perm_audit_msg('delete-repo-perm', username, user,
-                    repo_id, '/', permission)
+                                repo_id, '/', permission)
 
         if share_type == 'group':
             group_id = request.GET.get('group_id', None)
@@ -295,7 +314,6 @@ class SharedRepo(APIView):
 
             permission = check_group_share_out_permission(repo_id, '/', group_id, is_org)
 
-
             try:
                 if is_org:
                     seaserv.del_org_group_repo(repo_id, org_id, group_id)