diff --git a/frontend/src/components/dialog/share-to-group.js b/frontend/src/components/dialog/share-to-group.js
index 2775ac25b8d..0478280f829 100644
--- a/frontend/src/components/dialog/share-to-group.js
+++ b/frontend/src/components/dialog/share-to-group.js
@@ -113,6 +113,7 @@ const propTypes = {
   itemPath: PropTypes.string.isRequired,
   itemType: PropTypes.string.isRequired,
   repoID: PropTypes.string.isRequired,
+  repoType: PropTypes.string.isRequired,
   isRepoOwner: PropTypes.bool.isRequired,
   onAddCustomPermissionToggle: PropTypes.func,
 };
@@ -126,7 +127,8 @@ class ShareToGroup extends React.Component {
       selectedOption: null,
       errorMsg: [],
       permission: 'rw',
-      sharedItems: []
+      sharedItems: [],
+      isWiki: this.props.repoType === 'wiki'
     };
     this.permissions = [];
     let { itemType, isRepoOwner } = props;
@@ -141,6 +143,9 @@ class ShareToGroup extends React.Component {
     if (this.props.isGroupOwnedRepo) {
       this.permissions = ['rw', 'r', 'cloud-edit', 'preview'];
     }
+    if (this.state.isWiki) {
+      this.permissions = ['rw', 'r'];
+    }
   }
 
   handleSelectChange = (option) => {
@@ -344,6 +349,7 @@ class ShareToGroup extends React.Component {
                   permissions={this.permissions}
                   onPermissionChanged={this.setPermission}
                   enableAddCustomPermission={isPro}
+                  isWiki={this.state.isWiki}
                   onAddCustomPermissionToggle={this.props.onAddCustomPermissionToggle}
                 />
               </td>
diff --git a/frontend/src/components/dialog/share-to-user.js b/frontend/src/components/dialog/share-to-user.js
index 6983b83013f..9d75c9ea7f3 100644
--- a/frontend/src/components/dialog/share-to-user.js
+++ b/frontend/src/components/dialog/share-to-user.js
@@ -153,6 +153,7 @@ const propTypes = {
   itemType: PropTypes.string.isRequired,
   repoID: PropTypes.string.isRequired,
   isRepoOwner: PropTypes.bool.isRequired,
+  repoType: PropTypes.string.isRequired,
   onAddCustomPermissionToggle: PropTypes.func,
 };
 
@@ -164,7 +165,8 @@ class ShareToUser extends React.Component {
       selectedOption: null,
       errorMsg: [],
       permission: 'rw',
-      sharedItems: []
+      sharedItems: [],
+      isWiki: this.props.repoType === 'wiki'
     };
     this.options = [];
     this.permissions = [];
@@ -180,6 +182,9 @@ class ShareToUser extends React.Component {
     if (this.props.isGroupOwnedRepo) {
       this.permissions = ['rw', 'r', 'cloud-edit', 'preview'];
     }
+    if (this.state.isWiki) {
+      this.permissions = ['rw', 'r'];
+    }
   }
 
   handleSelectChange = (option) => {
@@ -369,6 +374,7 @@ class ShareToUser extends React.Component {
                   permissions={this.permissions}
                   onPermissionChanged={this.setPermission}
                   enableAddCustomPermission={isPro}
+                  isWiki={this.state.isWiki}
                   onAddCustomPermissionToggle={this.props.onAddCustomPermissionToggle}
                 />
               </td>
diff --git a/frontend/src/components/dialog/share-wiki-dialog.js b/frontend/src/components/dialog/share-wiki-dialog.js
new file mode 100644
index 00000000000..c459457cb9e
--- /dev/null
+++ b/frontend/src/components/dialog/share-wiki-dialog.js
@@ -0,0 +1,176 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalHeader, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
+import { gettext, username, additionalShareDialogNote, canShareRepo } from '../../utils/constants';
+import ShareToUser from './share-to-user';
+import ShareToGroup from './share-to-group';
+import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
+import Loading from '../loading';
+import toaster from '../toast';
+
+import '../../css/share-link-dialog.css';
+
+const propTypes = {
+  isGroupOwnedRepo: PropTypes.bool,
+  itemType: PropTypes.string.isRequired, // there will be three choose: ['library', 'dir', 'file']
+  itemName: PropTypes.string.isRequired,
+  itemPath: PropTypes.string.isRequired,
+  toggleDialog: PropTypes.func.isRequired,
+  repoID: PropTypes.string.isRequired,
+  repoEncrypted: PropTypes.bool,
+  enableDirPrivateShare: PropTypes.bool,
+};
+
+class ShareWikiDialog extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeTab: 'shareToUser',
+      isRepoJudgemented: false,
+      isRepoOwner: false,
+      isGroupOwnedRepo: false,
+    };
+  }
+
+  componentDidMount() {
+    let repoID = this.props.repoID;
+    seafileAPI.getRepoInfo(repoID).then(res => {
+      const isGroupOwnedRepo = res.data.owner_email.indexOf('@seafile_group') > -1;
+      let isRepoOwner = res.data.owner_email === username;
+      this.setState({
+        isRepoJudgemented: true,
+        isRepoOwner: isRepoOwner,
+        repoType: res.data.repo_type,
+        isGroupOwnedRepo: isGroupOwnedRepo,
+      });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  toggle = (tab) => {
+    if (this.state.activeTab !== tab) {
+      this.setState({ activeTab: tab });
+    }
+  };
+
+  onAddCustomPermissionToggle = () => {
+    this.toggle('customSharePermission');
+  };
+
+  renderDirContent = () => {
+
+    if (!this.state.isRepoJudgemented) {
+      return <Loading />;
+    }
+
+    let activeTab = this.state.activeTab;
+    let { repoEncrypted, enableDirPrivateShare, itemType } = this.props;
+    // for encrypted repo, 'dir private share' is only enabled for the repo itself,
+    // not for the folders in it.
+    if (repoEncrypted) {
+      enableDirPrivateShare = itemType == 'library';
+    }
+    return (
+      <Fragment>
+        <div className="share-dialog-side">
+          <Nav pills>
+            {enableDirPrivateShare &&
+              <Fragment>
+                { canShareRepo && (
+                  <NavItem role="tab" aria-selected={activeTab === 'shareToUser'} aria-controls="share-to-user-panel">
+                    <NavLink className={activeTab === 'shareToUser' ? 'active' : ''} onClick={this.toggle.bind(this, 'shareToUser')} tabIndex="0" onKeyDown={this.onTabKeyDown}>
+                      {gettext('Share to user')}
+                    </NavLink>
+                  </NavItem>
+                )}
+                { canShareRepo && (
+                  <NavItem role="tab" aria-selected={activeTab === 'shareToGroup'} aria-controls="share-to-group-panel">
+                    <NavLink className={activeTab === 'shareToGroup' ? 'active' : ''} onClick={this.toggle.bind(this, 'shareToGroup')} tabIndex="0" onKeyDown={this.onTabKeyDown}>
+                      {gettext('Share to group')}
+                    </NavLink>
+                  </NavItem>
+                )}
+              </Fragment>
+            }
+          </Nav>
+        </div>
+        <div className="share-dialog-main">
+          <TabContent activeTab={this.state.activeTab}>
+            {enableDirPrivateShare &&
+              <Fragment>
+                {(activeTab === 'shareToUser' && canShareRepo) &&
+                  <TabPane tabId="shareToUser" role="tabpanel" id="share-to-user-panel">
+                    <ShareToUser
+                      itemType={this.props.itemType}
+                      isGroupOwnedRepo={this.state.isGroupOwnedRepo}
+                      itemPath={this.props.itemPath}
+                      repoID={this.props.repoID}
+                      isRepoOwner={this.state.isRepoOwner}
+                      repoType={this.state.repoType}
+                      onAddCustomPermissionToggle={this.onAddCustomPermissionToggle}
+                    />
+                  </TabPane>
+                }
+                {(activeTab === 'shareToGroup' && canShareRepo) &&
+                  <TabPane tabId="shareToGroup" role="tabpanel" id="share-to-group-panel">
+                    <ShareToGroup
+                      itemType={this.props.itemType}
+                      isGroupOwnedRepo={this.state.isGroupOwnedRepo}
+                      itemPath={this.props.itemPath}
+                      repoID={this.props.repoID}
+                      isRepoOwner={this.state.isRepoOwner}
+                      repoType={this.state.repoType}
+                      onAddCustomPermissionToggle={this.onAddCustomPermissionToggle}
+                    />
+                  </TabPane>
+                }
+              </Fragment>
+            }
+          </TabContent>
+        </div>
+      </Fragment>
+    );
+  };
+
+  onTabKeyDown = (e) => {
+    if (e.key == 'Enter' || e.key == 'Space') {
+      e.target.click();
+    }
+  };
+
+  renderExternalShareMessage = () => {
+    if (additionalShareDialogNote && (typeof additionalShareDialogNote) === 'object') {
+      return (
+        <div className="external-share-message mt-2">
+          <h6>{additionalShareDialogNote.title}</h6>
+          <p style={{ fontSize: '14px', color: '#666' }} className="text-wrap m-0">{additionalShareDialogNote.content}</p>
+        </div>
+      );
+    }
+    return null;
+  };
+
+  render() {
+    const { itemType, itemName } = this.props;
+    return (
+      <div>
+        <Modal isOpen={true} style={{ maxWidth: '760px' }} className="share-dialog" toggle={this.props.toggleDialog}>
+          <ModalHeader toggle={this.props.toggleDialog} tag="div">
+            <h5 className="text-truncate">{gettext('Share')} <span className="op-target" title={itemName}>{itemName}</span></h5>
+            {this.renderExternalShareMessage()}
+          </ModalHeader>
+          <ModalBody className="share-dialog-content" role="tablist">
+            {(itemType === 'library') && this.renderDirContent()}
+          </ModalBody>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+ShareWikiDialog.propTypes = propTypes;
+
+export default ShareWikiDialog;
diff --git a/frontend/src/components/select-editor/select-editor.js b/frontend/src/components/select-editor/select-editor.js
index abcae3eff02..70c99e149f2 100644
--- a/frontend/src/components/select-editor/select-editor.js
+++ b/frontend/src/components/select-editor/select-editor.js
@@ -9,6 +9,7 @@ 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,
+  isWiki: PropTypes.bool,
   autoFocus: PropTypes.bool,
   options: PropTypes.array.isRequired,
   currentOption: PropTypes.string.isRequired,
@@ -56,7 +57,7 @@ class SelectEditor extends React.Component {
     }
 
     const { enableAddCustomPermission } = this.props;
-    if (enableAddCustomPermission) {
+    if (enableAddCustomPermission && !this.props.isWiki) {
       const option = {
         value: gettext('Add custom permission'),
         isDisabled: true,
diff --git a/frontend/src/components/select-editor/share-permission-editor.js b/frontend/src/components/select-editor/share-permission-editor.js
index 1da3eb4a60a..324d938f02b 100644
--- a/frontend/src/components/select-editor/share-permission-editor.js
+++ b/frontend/src/components/select-editor/share-permission-editor.js
@@ -11,6 +11,7 @@ const propTypes = {
   repoID: PropTypes.string,
   isTextMode: PropTypes.bool.isRequired,
   isEditing: PropTypes.bool,
+  isWiki: PropTypes.bool,
   autoFocus: PropTypes.bool,
   isEditIconShow: PropTypes.bool.isRequired,
   permissions: PropTypes.array.isRequired,
@@ -136,6 +137,7 @@ class SharePermissionEditor extends React.Component {
         translateOption={this.translatePermission}
         translateExplanation={this.translateExplanation}
         enableAddCustomPermission={this.props.enableAddCustomPermission}
+        isWiki={this.props.isWiki}
         onAddCustomPermissionToggle={this.props.onAddCustomPermissionToggle}
       />
     );
diff --git a/frontend/src/components/wiki-card-view/wiki-card-group.js b/frontend/src/components/wiki-card-view/wiki-card-group.js
index ec414d2ea14..df60a8146f8 100644
--- a/frontend/src/components/wiki-card-view/wiki-card-group.js
+++ b/frontend/src/components/wiki-card-view/wiki-card-group.js
@@ -7,7 +7,9 @@ import { SIDE_PANEL_FOLDED_WIDTH } from '../../constants';
 
 const propTypes = {
   wikis: PropTypes.array.isRequired,
+  group: PropTypes.object,
   deleteWiki: PropTypes.func.isRequired,
+  unshareGroupWiki: PropTypes.func.isRequired,
   title: PropTypes.string.isRequired,
   isDepartment: PropTypes.bool.isRequired,
   isShowAvatar: PropTypes.bool.isRequired,
@@ -48,10 +50,14 @@ class WikiCardGroup extends Component {
   };
 
   render() {
-    const { wikis, title, isDepartment, toggelAddWikiDialog } = this.props;
+    const { wikis, title, isDepartment, toggelAddWikiDialog, group } = this.props;
     const containerWidth = this.getContainerWidth();
     const numberOfWiki = Math.floor(containerWidth / 180);
     const grids = (Math.floor((containerWidth - (numberOfWiki + 1) * 16) / numberOfWiki) + 'px ').repeat(numberOfWiki);
+    let isGroup = false;
+    if (group){
+      isGroup = true;
+    }
     return (
       <div className='wiki-card-group mb-4'>
         <h4 className="sf-heading">
@@ -60,11 +66,21 @@ class WikiCardGroup extends Component {
         </h4>
         <div className='wiki-card-group-items' style={{ gridTemplateColumns: isMobile ? '48% 48%' : grids }} ref={this.groupItemsRef}>
           {wikis.map((wiki, index) => {
-            return (
+            return (isGroup ?
               <WikiCardItem
+                key={index + wiki.id + wiki.name}
+                group={group}
+                wiki={wiki}
+                deleteWiki={this.props.deleteWiki}
+                unshareGroupWiki={this.props.unshareGroupWiki}
+                isDepartment={isDepartment}
+                isShowAvatar={this.props.isShowAvatar}
+                renameWiki={this.props.renameWiki}
+              /> : <WikiCardItem
                 key={index + wiki.id + wiki.name}
                 wiki={wiki}
                 deleteWiki={this.props.deleteWiki}
+                unshareGroupWiki={this.props.unshareGroupWiki}
                 isDepartment={isDepartment}
                 isShowAvatar={this.props.isShowAvatar}
                 renameWiki={this.props.renameWiki}
diff --git a/frontend/src/components/wiki-card-view/wiki-card-item.js b/frontend/src/components/wiki-card-view/wiki-card-item.js
index 25963c7622d..8f66345a88c 100644
--- a/frontend/src/components/wiki-card-view/wiki-card-item.js
+++ b/frontend/src/components/wiki-card-view/wiki-card-item.js
@@ -2,14 +2,17 @@ import React, { Component } from 'react';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import PropTypes from 'prop-types';
 import moment from 'moment';
-import { siteRoot, gettext } from '../../utils/constants';
+import { siteRoot, gettext, username } from '../../utils/constants';
 import ModalPortal from '../modal-portal';
 import DeleteWikiDialog from '../dialog/delete-wiki-dialog';
 import RenameWikiDialog from '../dialog/rename-wiki-dialog';
+import ShareWikiDialog from '../dialog/share-wiki-dialog';
 
 const propTypes = {
   wiki: PropTypes.object.isRequired,
+  group: PropTypes.object,
   deleteWiki: PropTypes.func.isRequired,
+  unshareGroupWiki: PropTypes.func.isRequired,
   renameWiki: PropTypes.func.isRequired,
   isDepartment: PropTypes.bool.isRequired,
   isShowAvatar: PropTypes.bool.isRequired,
@@ -22,6 +25,7 @@ class WikiCardItem extends Component {
       isShowDeleteDialog: false,
       isShowRenameDialog: false,
       isItemMenuShow: false,
+      isShowShareDialog: false,
     };
   }
 
@@ -31,6 +35,12 @@ class WikiCardItem extends Component {
     });
   };
 
+  onShareToggle = (e) => {
+    this.setState({
+      isShowShareDialog: !this.state.isShowShareDialog,
+    });
+  };
+
   onDeleteToggle = (e) => {
     e.preventDefault();
     this.setState({
@@ -52,6 +62,14 @@ class WikiCardItem extends Component {
     });
   };
 
+  onItemUnshare = () => {
+    let wiki = this.props.wiki;
+    this.props.unshareGroupWiki(wiki, this.props.group.group_id);
+    this.setState({
+      isShowDeleteDialog: !this.state.isShowDeleteDialog,
+    });
+  };
+
   renameWiki = (newName) => {
     if (this.props.wiki.name !== newName) {
       this.props.renameWiki(this.props.wiki, newName);
@@ -94,7 +112,17 @@ class WikiCardItem extends Component {
 
   render() {
     const { wiki, isDepartment, isShowAvatar } = this.props;
+    let isAdmin = false;
+    if (wiki.admins){
+      isAdmin = wiki.admins.includes(username);
+    }
+    let isGroupOwner = false;
+    if (this.props.group){
+      isGroupOwner = wiki.owner.split('@')[0] === this.props.group.group_id.toString();
+    }
+    let isWikiOwner = username === wiki.owner;
     let isOldVersion = wiki.version !== 'v2';
+    let enableShare = username === wiki.owner || isAdmin;
     let publishedUrl = `${siteRoot}published/${encodeURIComponent(wiki.slug)}/`;
     let editUrl = `${siteRoot}wikis/${wiki.id}/`;
     let wikiName = isOldVersion ? `${wiki.name} (old version)` : wiki.name;
@@ -120,11 +148,23 @@ class WikiCardItem extends Component {
                 style={{ 'minWidth': '0' }}
               />
               <DropdownMenu right={true} className="dtable-dropdown-menu">
-                <DropdownItem onClick={this.onRenameToggle}>{gettext('Rename')}</DropdownItem>
+                {(isWikiOwner || isAdmin) &&
+                  <DropdownItem onClick={this.onRenameToggle}>{gettext('Rename')}</DropdownItem>
+                }
+                {enableShare &&
+                  <DropdownItem onClick={this.onShareToggle}>{gettext('Share')}</DropdownItem>
+                }
                 {isOldVersion ?
                   <DropdownItem onClick={this.onDeleteToggle}>{gettext('Unpublish')}</DropdownItem>
-                  :
-                  <DropdownItem onClick={this.onDeleteToggle}>{gettext('Delete')}</DropdownItem>
+                  : ((isDepartment && isGroupOwner) ?
+                    <DropdownItem onClick={this.onDeleteToggle}>{gettext('Delete')}</DropdownItem> :
+                    (isDepartment ?
+                      <DropdownItem onClick={this.onDeleteToggle}>{gettext('Leave')}</DropdownItem> :
+                      (isWikiOwner ?
+                        <DropdownItem onClick={this.onDeleteToggle}>{gettext('Delete')}</DropdownItem> :
+                        <DropdownItem onClick={this.onDeleteToggle}>{gettext('Leave')}</DropdownItem>
+                      ))
+                  )
                 }
               </DropdownMenu>
             </Dropdown>
@@ -145,14 +185,34 @@ class WikiCardItem extends Component {
                 content={<p>{gettext('Are you sure you want to unpublish Wiki')}{' '}<b>{wiki.name}</b> ?</p>}
                 footer={gettext('Unpublish')}
               />
-              :
-              <DeleteWikiDialog
-                toggleCancel={this.onDeleteCancel}
-                handleSubmit={this.deleteWiki}
-                title={gettext('Delete Wiki')}
-                content={<p>{gettext('Are you sure you want to delete Wiki')}{' '}<b>{wiki.name}</b> ?</p>}
-                footer={gettext('Delete')}
-              />
+              : ((isDepartment && isGroupOwner) ?
+                <DeleteWikiDialog
+                  toggleCancel={this.onDeleteCancel}
+                  handleSubmit={this.deleteWiki}
+                  title={gettext('Delete Wiki')}
+                  content={<p>{gettext('Are you sure you want to delete Wiki')}{' '}<b>{wiki.name}</b> ?</p>}
+                  footer={gettext('Delete')}
+                /> : isDepartment ? <DeleteWikiDialog
+                  toggleCancel={this.onDeleteCancel}
+                  handleSubmit={this.onItemUnshare}
+                  title={gettext('Leave Share Wiki')}
+                  content={<p>{gettext('Are you sure you want to leave share Wiki')}{' '}<b>{wiki.name}</b> ?</p>}
+                  footer={gettext('Leave')}
+                /> : (isWikiOwner ? <DeleteWikiDialog
+                  toggleCancel={this.onDeleteCancel}
+                  handleSubmit={this.deleteWiki}
+                  title={gettext('Delete Wiki')}
+                  content={<p>{gettext('Are you sure you want to delete Wiki')}{' '}<b>{wiki.name}</b> ?</p>}
+                  footer={gettext('Delete')}
+                /> : <DeleteWikiDialog
+                  toggleCancel={this.onDeleteCancel}
+                  handleSubmit={this.deleteWiki}
+                  title={gettext('Leave Share Wiki')}
+                  content={<p>{gettext('Are you sure you want to leave share Wiki')}{' '}<b>{wiki.name}</b> ?</p>}
+                  footer={gettext('Leave')}
+                />
+                )
+              )
             }
           </ModalPortal>
         }
@@ -165,6 +225,19 @@ class WikiCardItem extends Component {
             />
           </ModalPortal>
         }
+        {this.state.isShowShareDialog &&
+          <ModalPortal>
+            <ShareWikiDialog
+              itemType={'library'}
+              itemName={wiki.name}
+              itemPath={'/'}
+              repoID={wiki.repo_id}
+              repoEncrypted={ false }
+              enableDirPrivateShare={true}
+              toggleDialog={this.onShareToggle}
+            />
+          </ModalPortal>
+        }
       </>
     );
   }
diff --git a/frontend/src/components/wiki-card-view/wiki-card-view.js b/frontend/src/components/wiki-card-view/wiki-card-view.js
index e0a86523916..44622b545ed 100644
--- a/frontend/src/components/wiki-card-view/wiki-card-view.js
+++ b/frontend/src/components/wiki-card-view/wiki-card-view.js
@@ -12,6 +12,8 @@ const propTypes = {
   data: PropTypes.object.isRequired,
   deleteWiki: PropTypes.func.isRequired,
   renameWiki: PropTypes.func.isRequired,
+  leaveSharedWiki: PropTypes.func.isRequired,
+  unshareGroupWiki: PropTypes.func.isRequired,
   toggelAddWikiDialog: PropTypes.func,
   sidePanelRate: PropTypes.number,
   isSidePanelFolded: PropTypes.bool,
@@ -30,7 +32,7 @@ class WikiCardView extends Component {
     if (!canPublishRepo || !isPro) return;
     let departmentMap = {};
     wikiAPI.listWikiDepartments().then(res => {
-      res.data.forEach(item => departmentMap[item.email] = true);
+      res.data.forEach(item => departmentMap[item.id] = true);
       this.setState({ departmentMap });
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
@@ -41,12 +43,15 @@ class WikiCardView extends Component {
   classifyWikis = (wikis) => {
     let v1Wikis = [];
     let myWikis = [];
+    let sharedWikis = [];
     let department2WikisMap = {};
     for (let i = 0; i < wikis.length; i++) {
       if (wikis[i].version === 'v1') {
         v1Wikis.push(wikis[i]);
       } else if (wikis[i].owner === username) {
         myWikis.push(wikis[i]);
+      } else if (wikis[i].type === 'shared') {
+        sharedWikis.push(wikis[i]);
       } else {
         if (!department2WikisMap[wikis[i].owner]) {
           department2WikisMap[wikis[i].owner] = [];
@@ -54,11 +59,12 @@ class WikiCardView extends Component {
         department2WikisMap[wikis[i].owner].push(wikis[i]);
       }
     }
-    return { department2WikisMap, myWikis, v1Wikis };
+    return { department2WikisMap, myWikis, v1Wikis, sharedWikis };
   };
 
+
   render() {
-    let { loading, errorMsg, wikis } = this.props.data;
+    let { loading, errorMsg, wikis, groupWikis } = this.props.data;
     const { toggelAddWikiDialog, sidePanelRate, isSidePanelFolded } = this.props;
 
     if (loading) {
@@ -67,13 +73,14 @@ class WikiCardView extends Component {
     if (errorMsg) {
       return <p className="error text-center">{errorMsg}</p>;
     }
-    const { v1Wikis, myWikis, department2WikisMap } = this.classifyWikis(wikis);
+    const { v1Wikis, myWikis, sharedWikis } = this.classifyWikis(wikis);
     let wikiCardGroups = [];
     wikiCardGroups.push(
       <WikiCardGroup
         key='my-Wikis'
         deleteWiki={this.props.deleteWiki}
         renameWiki={this.props.renameWiki}
+        unshareGroupWiki={this.props.unshareGroupWiki}
         sidePanelRate={sidePanelRate}
         isSidePanelFolded={isSidePanelFolded}
         wikis={myWikis}
@@ -83,19 +90,35 @@ class WikiCardView extends Component {
         toggelAddWikiDialog={canPublishRepo ? toggelAddWikiDialog.bind(this, null) : null}
       />
     );
-    for (let deptID in department2WikisMap) {
+    wikiCardGroups.push(
+      <WikiCardGroup
+        key='shared-Wikis'
+        deleteWiki={this.props.leaveSharedWiki}
+        renameWiki={this.props.renameWiki}
+        unshareGroupWiki={this.props.unshareGroupWiki}
+        wikis={sharedWikis}
+        title={gettext('Shared with me')}
+        isDepartment={false}
+        isShowAvatar={false}
+        toggelAddWikiDialog={null}
+      />
+    );
+    for (let deptID in groupWikis) {
+      groupWikis[deptID].wiki_info.length !== 0 &&
       wikiCardGroups.push(
         <WikiCardGroup
-          key={'department-Wikis-' + deptID}
+          key={'group-Wikis-' + deptID}
           deleteWiki={this.props.deleteWiki}
+          unshareGroupWiki={this.props.unshareGroupWiki}
           renameWiki={this.props.renameWiki}
           sidePanelRate={sidePanelRate}
           isSidePanelFolded={isSidePanelFolded}
-          wikis={department2WikisMap[deptID]}
-          title={department2WikisMap[deptID][0].owner_nickname}
+          group={groupWikis[deptID]}
+          wikis={groupWikis[deptID].wiki_info}
+          title={groupWikis[deptID].group_name}
           isDepartment={true}
           isShowAvatar={false}
-          toggelAddWikiDialog={(canPublishRepo && this.state.departmentMap[deptID]) ? toggelAddWikiDialog.bind(this, deptID) : null}
+          toggelAddWikiDialog={(canPublishRepo && this.state.departmentMap[groupWikis[deptID]['group_id']]) ? toggelAddWikiDialog.bind(this, deptID) : null}
         />
       );
     }
@@ -104,6 +127,7 @@ class WikiCardView extends Component {
         key='old-Wikis'
         deleteWiki={this.props.deleteWiki}
         renameWiki={this.props.renameWiki}
+        unshareGroupWiki={this.props.unshareGroupWiki}
         isSidePanelFolded={isSidePanelFolded}
         sidePanelRate={sidePanelRate}
         wikis={v1Wikis}
diff --git a/frontend/src/pages/wikis/wikis.js b/frontend/src/pages/wikis/wikis.js
index 3617f1a8822..5913695ddb8 100644
--- a/frontend/src/pages/wikis/wikis.js
+++ b/frontend/src/pages/wikis/wikis.js
@@ -9,6 +9,8 @@ import EmptyTip from '../../components/empty-tip';
 import AddWikiDialog from '../../components/dialog/add-wiki-dialog';
 import wikiAPI from '../../utils/wiki-api';
 import WikiCardView from '../../components/wiki-card-view/wiki-card-view';
+import { seafileAPI } from '../../utils/seafile-api';
+
 
 const propTypes = {
   sidePanelRate: PropTypes.number,
@@ -23,6 +25,7 @@ class Wikis extends Component {
       errorMsg: '',
       currentDeptID: '',
       wikis: [],
+      groupWikis: [],
       isShowAddWikiMenu: false,
       isShowAddDialog: false,
       isDropdownMenuShown: false,
@@ -35,6 +38,7 @@ class Wikis extends Component {
 
   getWikis = () => {
     let wikis = [];
+    let groupWikis = [];
     wikiAPI.listWikis().then(res => {
       wikis = wikis.concat(res.data.data);
       wikis.map(wiki => {
@@ -42,12 +46,20 @@ class Wikis extends Component {
       });
       wikiAPI.listWikis2().then(res => {
         let wikis2 = res.data.wikis;
+        groupWikis = res.data.group_wikis;
+        groupWikis.forEach(group => {
+          group.wiki_info.forEach(wiki => {
+            wiki.version = 'v2';
+            wiki.admins = group.group_admins;
+          });
+        });
         wikis2.map(wiki => {
           return wiki['version'] = 'v2';
         });
         this.setState({
           loading: false,
-          wikis: wikis.concat(wikis2)
+          wikis: wikis.concat(wikis2),
+          groupWikis: groupWikis
         });
       }).catch((error) => {
         this.setState({
@@ -89,11 +101,22 @@ class Wikis extends Component {
   addWiki = (wikiName, currentDeptID) => {
     wikiAPI.addWiki2(wikiName, currentDeptID).then((res) => {
       let wikis = this.state.wikis.slice(0);
+      let groupWikis = this.state.groupWikis;
       let new_wiki = res.data;
       new_wiki['version'] = 'v2';
-      wikis.push(new_wiki);
+      if (currentDeptID){
+        groupWikis.filter(group => {
+          if (group.group_id === currentDeptID){
+            group.wiki_info.push(new_wiki);
+          }
+          return group;
+        });
+      } else {
+        wikis.push(new_wiki);
+      }
       this.setState({
         wikis,
+        groupWikis,
         currentDeptID: '',
       });
     }).catch((error) => {
@@ -110,7 +133,14 @@ class Wikis extends Component {
         let wikis = this.state.wikis.filter(item => {
           return item.name !== wiki.name;
         });
-        this.setState({ wikis: wikis });
+        let groupWikis = this.state.groupWikis.filter(group => {
+          group.wiki_info = group.wiki_info.filter(item => item.name !== wiki.name);
+          return group;
+        });
+        this.setState({
+          wikis: wikis,
+          groupWikis: groupWikis,
+        });
       }).catch((error) => {
         if (error.response) {
           let errorMsg = error.response.data.error_msg;
@@ -122,7 +152,14 @@ class Wikis extends Component {
         let wikis = this.state.wikis.filter(item => {
           return item.name !== wiki.name;
         });
-        this.setState({ wikis: wikis });
+        let groupWikis = this.state.groupWikis.filter(group => {
+          group.wiki_info = group.wiki_info.filter(item => item.name !== wiki.name);
+          return group;
+        });
+        this.setState({
+          wikis: wikis,
+          groupWikis: groupWikis,
+        });
       }).catch((error) => {
         if (error.response) {
           let errorMsg = error.response.data.error_msg;
@@ -132,6 +169,57 @@ class Wikis extends Component {
     }
   };
 
+  leaveSharedWiki = (wiki) => {
+    if (!wiki.owner.includes('@seafile_group')) {
+      let options = {
+        'share_type': 'personal',
+        'from': wiki.owner
+      };
+      seafileAPI.leaveShareRepo(wiki.repo_id, options).then(res => {
+        let wikis = this.state.wikis.filter(item => {
+          return item.name !== wiki.name;
+        });
+        this.setState({
+          wikis: wikis,
+        });
+      }).catch((error) => {
+        let errorMsg = Utils.getErrorMsg(error, true);
+        toaster.danger(errorMsg);
+      });
+    } else {
+      seafileAPI.leaveShareGroupOwnedRepo(wiki.repo_id).then(res => {
+        let wikis = this.state.wikis.filter(item => {
+          return item.name !== wiki.name;
+        });
+        this.setState({
+          wikis: wikis,
+        });
+      }).catch((error) => {
+        let errorMsg = Utils.getErrorMsg(error, true);
+        toaster.danger(errorMsg);
+      });
+    }
+
+  };
+
+  unshareGroupWiki = (wiki, groupId) => {
+    seafileAPI.unshareRepoToGroup(wiki.repo_id, groupId).then(() => {
+      let groupWikis = this.state.groupWikis.map(group => {
+        if (group.group_id === groupId) {
+          return {
+            ...group,
+            wiki_info: group.wiki_info.filter(item => item.name !== wiki.name)
+          };
+        }
+        return group;
+      });
+      this.setState({ groupWikis: groupWikis });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  };
+
   renameWiki = (wiki, newName) => {
     if (wiki.version === 'v1') {
       wikiAPI.renameWiki(wiki.id, newName).then(() => {
@@ -213,6 +301,8 @@ class Wikis extends Component {
                 <WikiCardView
                   data={this.state}
                   deleteWiki={this.deleteWiki}
+                  leaveSharedWiki={this.leaveSharedWiki}
+                  unshareGroupWiki={this.unshareGroupWiki}
                   renameWiki={this.renameWiki}
                   toggelAddWikiDialog={this.toggelAddWikiDialog}
                   sidePanelRate={this.props.sidePanelRate}
diff --git a/seahub/api2/endpoints/repos.py b/seahub/api2/endpoints/repos.py
index 53fadeff672..830843496a0 100644
--- a/seahub/api2/endpoints/repos.py
+++ b/seahub/api2/endpoints/repos.py
@@ -369,11 +369,11 @@ def get(self, request, repo_id):
         except Exception as e:
             has_been_shared_out = False
             logger.error(e)
-
+            
         result = {
             "repo_id": repo.id,
             "repo_name": repo.name,
-
+            "repo_type": repo.repo_type,
             "owner_email": repo_owner,
             "owner_name": email2nickname(repo_owner),
             "owner_contact_email": email2contact_email(repo_owner),
diff --git a/seahub/api2/endpoints/wiki2.py b/seahub/api2/endpoints/wiki2.py
index bbc0b48a714..2fca421e822 100644
--- a/seahub/api2/endpoints/wiki2.py
+++ b/seahub/api2/endpoints/wiki2.py
@@ -34,12 +34,13 @@
     normalize_dir_path, is_pro_version, check_filename_with_rename, is_valid_dirent_name, get_no_duplicate_obj_name
 from seahub.views import check_folder_permission
 from seahub.views.file import send_file_access_msg
-from seahub.base.templatetags.seahub_tags import email2nickname
+from seahub.base.templatetags.seahub_tags import email2nickname, email2contact_email
 from seahub.utils.file_op import check_file_lock, ONLINE_OFFICE_LOCK_OWNER, if_locked_by_online_office
-from seahub.utils.repo import parse_repo_perm, get_repo_owner
+from seahub.utils.repo import parse_repo_perm, get_repo_owner, normalize_repo_status_code
 from seahub.seadoc.utils import get_seadoc_file_uuid, gen_seadoc_access_token, copy_sdoc_images_with_sdoc_uuid
 from seahub.settings import SEADOC_SERVER_URL, ENABLE_STORAGE_CLASSES, STORAGE_CLASS_MAPPING_POLICY, \
     ENCRYPTED_LIBRARY_VERSION
+from seahub.avatar.settings import GROUP_AVATAR_DEFAULT_SIZE
 from seahub.seadoc.sdoc_server_api import SdocServerAPI
 from seahub.utils.timeutils import timestamp_to_isoformat_timestr, datetime_to_isoformat_timestr
 from seahub.tags.models import FileUUIDMap
@@ -47,8 +48,13 @@
 from seahub.base.models import FileComment
 from seahub.api2.views import HTTP_447_TOO_MANY_FILES_IN_LIBRARY
 from seahub.group.utils import group_id_to_name, is_group_admin
+from seahub.share.models import ExtraGroupsSharePermission
+from seahub.api2.endpoints.group_owned_libraries import get_group_id_by_repo_owner
 from seahub.utils.rpc import SeafileAPI
 from seahub.constants import PERMISSION_READ_WRITE
+from seaserv import ccnet_api
+from seahub.api2.endpoints.groups import get_group_info
+
 
 HTTP_520_OPERATION_FAILED = 520
 
@@ -71,12 +77,53 @@ def get(self, request, format=None):
             'group': False,
             'org': False,
         }
-
+        org_id = request.user.org.org_id if is_org_context(request) else None
         rtype = request.GET.get('type', "")
         if not rtype:
             # set all to True, no filter applied
             filter_by = filter_by.fromkeys(iter(filter_by.keys()), True)
 
+        if org_id:
+            user_groups = ccnet_api.get_org_groups_by_user(org_id, request.user.username, return_ancestors=True)
+        else:
+            user_groups = ccnet_api.get_groups(request.user.username, return_ancestors=True)
+
+        try:
+            avatar_size = int(request.GET.get('avatar_size', GROUP_AVATAR_DEFAULT_SIZE))
+        except ValueError:
+            avatar_size = GROUP_AVATAR_DEFAULT_SIZE
+        groups_info = []
+        try:
+            with_repos = int(request.GET.get('with_repos', 1))
+        except ValueError:
+            with_repos = 0
+
+        if with_repos not in (0, 1):
+            error_msg = 'with_repos invalid.'
+            return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
+
+        if with_repos:
+            gids = [g.id for g in user_groups]
+            admin_info = ExtraGroupsSharePermission.objects.batch_get_repos_with_admin_permission(gids)
+
+        for g in user_groups:
+            group_info = get_group_info(request, g.id, avatar_size)
+
+            if with_repos:
+                if org_id:
+                    group_repos = seafile_api.get_org_group_repos(org_id, g.id)
+                else:
+                    group_repos = seafile_api.get_repos_by_group(g.id)
+                repos = []
+                for r in group_repos:
+                    repo = {
+                        "repo_id": r.id,
+                        "repo_name": r.name,
+                    }
+                    repos.append(repo)
+                group_info['repos'] = repos
+            groups_info.append(group_info)
+
         for f in rtype.split(','):
             f = f.strip()
             filter_by[f] = True
@@ -84,43 +131,115 @@ def get(self, request, format=None):
         username = request.user.username
         org_id = request.user.org.org_id if is_org_context(request) else None
         (owned, shared, groups, public) = get_user_repos(username, org_id)
-        
+
         wikis = []
+        filter_repo_type_ids_map = {}
         username = request.user.username
         if filter_by['mine']:
             owned_wikis = [r for r in owned if is_wiki_repo(r)]
+            filter_repo_type_ids_map['mine'] = ([r.id for r in owned if is_wiki_repo(r)])
             for r in owned_wikis:
                 r.owner = username
                 r.permission = 'rw'
                 wikis.append(r)
-            
+
         if filter_by['shared']:
             shared_wikis = [r for r in shared if is_wiki_repo(r)]
+            filter_repo_type_ids_map['shared'] = ([r.id for r in shared if is_wiki_repo(r)])
+
             for r in shared_wikis:
                 r.owner = r.user
                 wikis.append(r)
 
         if filter_by['group']:
             group_wikis = [r for r in groups if is_wiki_repo(r)]
+            filter_repo_type_ids_map['group'] = ([r.id for r in groups if is_wiki_repo(r)])
+
             for r in group_wikis:
                 r.owner = r.user
                 wikis.append(r)
-                
+
         wikis = list(set(wikis))
         wiki_list = []
+        group_wiki_list = []
+        for group_w in group_wikis:
+            wiki = Wiki(group_w)
+            wiki_info = wiki.to_dict()
+            group_info = get_group_info(request, group_w.group_id, avatar_size)
+            group_wiki = {
+                'group_name': group_info['name'],
+                'group_id': group_info['id'],
+                'group_admins': group_info['admins'],
+                "parent_group_id": group_info['parent_group_id'],
+                "owner": group_info['owner'],
+                "created_at": group_info['created_at'],
+                'wiki_info': []
+            }
+            repo_info = {
+                "type": "group",
+                "size": group_w.size,
+                "mtime": group_w.last_modified,
+                "last_modified": timestamp_to_isoformat_timestr(group_w.last_modified),
+                "encrypted": group_w.encrypted,
+                "permission": group_w.permission,
+                "is_admin": (group_w.id, group_w.group_id) in admin_info,
+            }
+            wiki_info.update(repo_info)
+            if len(group_wiki_list) == 0:
+                group_wiki['wiki_info'] = [wiki_info]
+                group_wiki_list.append(group_wiki)
+            else:
+                for w in group_wiki_list:
+                    if w['group_id'] == group_wiki['group_id']:
+                        w['wiki_info'].append(wiki_info)
+                        break
+                else:
+                    group_wiki['wiki_info'].append(wiki_info)
+                    group_wiki_list.append(group_wiki)
+
+        wiki_ids_map = []
         for w in wikis:
             wiki = Wiki(w)
             wiki_info = wiki.to_dict()
+            if w.id not in wiki_ids_map:
+                wiki_ids_map.append(w.id)
+            else:
+                continue
+            wiki_ids_map.append(w.id)
+            if w.id in filter_repo_type_ids_map['mine']:
+                repo_info = {
+                    "type": "mine",
+                    "owner_contact_email": email2contact_email(username),
+                    "last_modified": timestamp_to_isoformat_timestr(w.last_modify),
+                    "size": w.size,
+                    "encrypted": w.encrypted,
+                    "permission": 'rw',  # Always have read-write permission to owned repo
+                    "status": normalize_repo_status_code(w.status),
+                    "salt": w.salt if w.enc_version >= 3 else '',
+                }
+                wiki_info.update(repo_info)
+            if w.id in filter_repo_type_ids_map['shared']:
+                repo_info = {
+                    'type': 'shared',
+                    "last_modified": timestamp_to_isoformat_timestr(w.last_modify),
+                    "size": w.size,
+                    "encrypted": w.encrypted,
+                    "permission": w.permission,
+                    "status": normalize_repo_status_code(w.status),
+                    "salt": w.salt if w.enc_version >= 3 else '',
+                }
+                wiki_info.update(repo_info)
+
             if is_group_wiki(wiki):
                 group_id = int(wiki.owner.split('@')[0])
                 wiki_info['owner_nickname'] = group_id_to_name(group_id)
             else:
                 wiki_info['owner_nickname'] = email2nickname(wiki.owner)
             wiki_list.append(wiki_info)
-            
+
         wiki_list = sorted(wiki_list, key=lambda x: x.get('updated_at'), reverse=True)
 
-        return Response({'wikis': wiki_list})
+        return Response({'wikis': wiki_list, 'group_wikis': group_wiki_list})
 
     def post(self, request, format=None):
         """Add a new wiki.