diff --git a/frontend/src/components/dialog/lib-sub-folder-permission-dialog.js b/frontend/src/components/dialog/lib-sub-folder-permission-dialog.js
index cd8835a1b2..5c851bfc1b 100644
--- a/frontend/src/components/dialog/lib-sub-folder-permission-dialog.js
+++ b/frontend/src/components/dialog/lib-sub-folder-permission-dialog.js
@@ -11,6 +11,7 @@ import '../../css/sub-folder-permission.css';
 const propTypes = { 
   repoID: PropTypes.string.isRequired,
   repoName: PropTypes.string,
+  isDepartmentRepo: PropTypes.bool,
   folderPath: PropTypes.string,
   folderName: PropTypes.string,
   toggleDialog: PropTypes.func.isRequired
@@ -52,10 +53,10 @@ class LibSubFolderPermissionDialog extends React.Component {
         <div className="share-dialog-main">
           <TabContent activeTab={this.state.activeTab}>
             <TabPane tabId="userPermission">
-              <LibSubFolderSetUserPermissionDialog repoID={this.props.repoID} repoName={this.props.repoName} folderPath={this.props.folderPath}  />
+              <LibSubFolderSetUserPermissionDialog repoID={this.props.repoID} repoName={this.props.repoName} folderPath={this.props.folderPath} isDepartmentRepo={this.props.isDepartmentRepo} />
             </TabPane>
             <TabPane tabId="groupPermission">
-              <LibSubFolderSetGroupPermissionDialog repoID={this.props.repoID} repoName={this.props.repoName} folderPath={this.props.folderPath} />
+              <LibSubFolderSetGroupPermissionDialog repoID={this.props.repoID} repoName={this.props.repoName} folderPath={this.props.folderPath} isDepartmentRepo={this.props.isDepartmentRepo} />
             </TabPane>
           </TabContent>
         </div>
diff --git a/frontend/src/components/dialog/lib-sub-folder-set-group-permission-dialog.js b/frontend/src/components/dialog/lib-sub-folder-set-group-permission-dialog.js
index 79748f619a..01ea19301c 100644
--- a/frontend/src/components/dialog/lib-sub-folder-set-group-permission-dialog.js
+++ b/frontend/src/components/dialog/lib-sub-folder-set-group-permission-dialog.js
@@ -71,7 +71,8 @@ class GroupItem extends React.Component {
 }
 
 const propTypes = {
-  repoID: PropTypes.string.isRequired
+  repoID: PropTypes.string.isRequired,
+  isDepartmentRepo: PropTypes.bool
 };
 
 const NoOptionsMessage = (props) => {
@@ -122,9 +123,11 @@ class LibSubFolderSerGroupPermissionDialog extends React.Component {
   }
 
   listGroupPermissionItems = () => {
-    let repoID = this.props.repoID; 
-    let folderPath = this.props.folderPath;
-    seafileAPI.listGroupFolderPerm(repoID, folderPath).then((res) => {
+    const { isDepartmentRepo, repoID, folderPath } = this.props;
+    const request = isDepartmentRepo ?
+      seafileAPI.listDepartmentRepoGroupFolderPerm(repoID, folderPath) :
+      seafileAPI.listGroupFolderPerm(repoID, folderPath);
+    request.then((res) => {
       if (res.data.length !== 0) {
         this.setState({
           groupPermissionItems: res.data
@@ -144,7 +147,10 @@ class LibSubFolderSerGroupPermissionDialog extends React.Component {
       return false;
     }
 
-    seafileAPI.addGroupFolderPerm(this.props.repoID, this.state.permission, folderPath, selectedOption.id).then(res => {
+    const request = this.props.isDepartmentRepo ?
+      seafileAPI.addDepartmentRepoGroupFolderPerm(this.props.repoID, this.state.permission, folderPath, selectedOption.id) :
+      seafileAPI.addGroupFolderPerm(this.props.repoID, this.state.permission, folderPath, selectedOption.id)
+    request.then(res => {
       let errorMsg = [];
       if (res.data.failed.length > 0) {
         for (let i = 0; i < res.data.failed.length; i++) {
@@ -177,7 +183,10 @@ class LibSubFolderSerGroupPermissionDialog extends React.Component {
   }
 
   deleteGroupPermissionItem = (item) => {
-    seafileAPI.deleteGroupFolderPerm(item.repo_id, item.permission, item.folder_path, item.group_id).then(() => {
+    const request = this.props.isDepartmentRepo ?
+      seafileAPI.deleteDepartmentRepoGroupFolderPerm(item.repo_id, item.permission, item.folder_path, item.group_id) :
+      seafileAPI.deleteGroupFolderPerm(item.repo_id, item.permission, item.folder_path, item.group_id)
+    request.then(() => {
       this.setState({
         groupPermissionItems: this.state.groupPermissionItems.filter(deletedItem => { return deletedItem != item; }) 
       });
@@ -185,7 +194,10 @@ class LibSubFolderSerGroupPermissionDialog extends React.Component {
   }
 
   onChangeGroupPermission = (item, permission) => {
-    seafileAPI.updateGroupFolderPerm(item.repo_id, permission, item.folder_path, item.group_id).then(() => {
+    const request = this.props.isDepartmentRepo ?
+      seafileAPI.updateDepartmentRepoGroupFolderPerm(item.repo_id, permission, item.folder_path, item.group_id) :
+      seafileAPI.updateGroupFolderPerm(item.repo_id, permission, item.folder_path, item.group_id);
+    request.then(() => {
       this.updateGroupPermission(item, permission);
     });
   }
diff --git a/frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js b/frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js
index 5e50657e85..c5dda1fa47 100644
--- a/frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js
+++ b/frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js
@@ -72,7 +72,8 @@ class UserItem extends React.Component {
 
 
 const propTypes = {
-  repoID: PropTypes.string.isRequired
+  repoID: PropTypes.string.isRequired,
+  isDepartmentRepo: PropTypes.bool
 };
 
 
@@ -100,9 +101,11 @@ class LibSubFolderSetUserPermissionDialog extends React.Component {
   }
 
   componentDidMount() {
-    let repoID = this.props.repoID;
-    let folderPath = this.props.folderPath;
-    seafileAPI.listUserFolderPerm(repoID, folderPath).then((res) => {
+    const {repoID, folderPath, isDepartmentRepo} = this.props;
+    const request = isDepartmentRepo ?
+      seafileAPI.listDepartmentRepoUserFolderPerm(repoID, folderPath) :
+      seafileAPI.listUserFolderPerm(repoID, folderPath);
+    request.then((res) => {
       if (res.data.length !== 0) {
         this.setState({userFolderPermItems: res.data});
       }
@@ -121,7 +124,11 @@ class LibSubFolderSetUserPermissionDialog extends React.Component {
     }
 
     const users = selectedUsers.map((item, index) => item.email); 
-    seafileAPI.addUserFolderPerm(this.props.repoID, this.state.permission, folderPath, users).then(res => {
+
+    const request = this.props.isDepartmentRepo ?
+      seafileAPI.addDepartmentRepoUserFolderPerm(this.props.repoID, this.state.permission, folderPath, users) :
+      seafileAPI.addUserFolderPerm(this.props.repoID, this.state.permission, folderPath, users);
+    request.then(res => {
       let errorMsg = [];
       if (res.data.failed.length > 0) {
         for (let i = 0; i < res.data.failed.length; i++) {
@@ -154,7 +161,10 @@ class LibSubFolderSetUserPermissionDialog extends React.Component {
   } 
 
   deleteUserFolderPermItem = (item) => {
-    seafileAPI.deleteUserFolderPerm(item.repo_id, item.permission, item.folder_path, item.user_email).then(res => {
+    const request = this.props.isDepartmentRepo ?
+      seafileAPI.deleteDepartmentRepoUserFolderPerm(item.repo_id, item.permission, item.folder_path, item.user_email) :
+      seafileAPI.deleteUserFolderPerm(item.repo_id, item.permission, item.folder_path, item.user_email);
+    request.then(res => {
       this.setState({
         userFolderPermItems: this.state.userFolderPermItems.filter(deletedItem => {
           return deletedItem != item;
@@ -164,7 +174,10 @@ class LibSubFolderSetUserPermissionDialog extends React.Component {
   }
 
   onChangeUserFolderPerm = (repoID, permission, folderPath, userEmail) => {
-    seafileAPI.updateUserFolderPerm(repoID, permission, folderPath, userEmail).then(res => {
+    const request = this.props.isDepartmentRepo ?
+      seafileAPI.updateDepartmentRepoUserFolderPerm(repoID, permission, folderPath, userEmail) :
+      seafileAPI.updateUserFolderPerm(repoID, permission, folderPath, userEmail);
+    request.then(res => {
       let userFolderPermItems = this.state.userFolderPermItems.map(item => {
         if (item.user_email === userEmail && item.folder_path === folderPath) {
           item.permission = permission;
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 0856f098b5..2c4cc50a95 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
@@ -5,8 +5,9 @@ import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap
 import { Link } from '@reach/router';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, isPro, username, folderPermEnabled, isSystemStaff } from '../../utils/constants';
-import ModalPotal from '../../components/modal-portal';
+import ModalPortal from '../../components/modal-portal';
 import ShareDialog from '../../components/dialog/share-dialog';
+import LibSubFolderPermissionDialog from '../../components/dialog/lib-sub-folder-permission-dialog';
 import Rename from '../rename';
 import { seafileAPI } from '../../utils/seafile-api';
 
@@ -34,6 +35,7 @@ class SharedRepoListItem extends React.Component {
       isShowSharedDialog: false,
       isRenaming: false,
       isStarred: this.props.repo.starred,
+      isFolderPermissionDialogOpen: false
     };
     this.isDeparementOnwerGroupMember = false;
   }
@@ -109,7 +111,7 @@ class SharedRepoListItem extends React.Component {
         this.onItemRenameToggle();
         break;
       case 'Folder Permission':
-        this.onItemPermisionChanged();
+        this.onItemFolderPermissionToggle();
         break;
       case 'Details':
         this.onItemDetails();
@@ -143,8 +145,8 @@ class SharedRepoListItem extends React.Component {
     this.setState({isRenaming: !this.state.isRenaming});
   }
 
-  onItemPermisionChanged = () => {
-    // todo
+  onItemFolderPermissionToggle = () => {
+    this.setState({isFolderPermissionDialogOpen: !this.state.isFolderPermissionDialogOpen});
   }
 
   onItemDetails = () => {
@@ -364,7 +366,7 @@ class SharedRepoListItem extends React.Component {
           <td title={repo.owner_contact_email}>{repo.owner_name}</td>
         </tr>
         {this.state.isShowSharedDialog && (
-          <ModalPotal>
+          <ModalPortal>
             <ShareDialog 
               itemType={'library'}
               itemName={repo.repo_name}
@@ -377,7 +379,17 @@ class SharedRepoListItem extends React.Component {
               isGroupOwnedRepo={isGroupOwnedRepo}
               toggleDialog={this.toggleShareDialog}
             />
-          </ModalPotal>
+          </ModalPortal>
+        )}
+        {this.state.isFolderPermissionDialogOpen && (
+          <ModalPortal>
+            <LibSubFolderPermissionDialog
+              toggleDialog={this.onItemFolderPermissionToggle}
+              repoID={repo.repo_id}
+              repoName={repo.repo_name}
+              isDepartmentRepo={true}
+            />
+          </ModalPortal>
         )}
       </Fragment>
     );
@@ -404,7 +416,7 @@ class SharedRepoListItem extends React.Component {
           <td>{this.generatorMobileMenu()}</td>
         </tr>
         {this.state.isShowSharedDialog && (
-          <ModalPotal>
+          <ModalPortal>
             <ShareDialog 
               itemType={'library'}
               itemName={repo.repo_name}
@@ -417,7 +429,7 @@ class SharedRepoListItem extends React.Component {
               isGroupOwnedRepo={isGroupOwnedRepo}
               toggleDialog={this.toggleShareDialog}
             />
-          </ModalPotal>
+          </ModalPortal>
         )}
       </Fragment>
     );