diff --git a/frontend/src/components/cur-repo-path/index.js b/frontend/src/components/cur-repo-path/index.js
index e0469620ff..2c7f023d93 100644
--- a/frontend/src/components/cur-repo-path/index.js
+++ b/frontend/src/components/cur-repo-path/index.js
@@ -4,18 +4,18 @@ import RepoPath from './repo-path';
 import RepoTool from './repo-tool';
 
 const propTypes = {
-  currentTab: PropTypes.string.isRequired,
+  libraryType: PropTypes.string.isRequired,
   currentGroup: PropTypes.object,
 };
 
 class CurGroupPath extends React.Component {
 
   render() {
-    let { currentTab, currentGroup } = this.props;
+    let { libraryType, currentGroup } = this.props;
     return (
       <Fragment>
-        <RepoPath currentTab={currentTab} currentGroup={currentGroup}/>
-        <RepoTool currentTab={currentTab} currentGroup={currentGroup}/>
+        <RepoPath libraryType={libraryType} currentGroup={currentGroup}/>
+        <RepoTool libraryType={libraryType} currentGroup={currentGroup}/>
       </Fragment>
     );
   }
diff --git a/frontend/src/components/cur-repo-path/repo-path.js b/frontend/src/components/cur-repo-path/repo-path.js
index 0d15095446..f19deceefd 100644
--- a/frontend/src/components/cur-repo-path/repo-path.js
+++ b/frontend/src/components/cur-repo-path/repo-path.js
@@ -4,14 +4,14 @@ import {gettext, siteRoot} from '../../utils/constants';
 
 const propTypes = {
   currentGroup: PropTypes.object, // for group
-  currentTab: PropTypes.string.isRequired, //for my-library, shared width me, shared whith all, groups 
+  libraryType: PropTypes.string.isRequired, //for my-library, shared width me, shared whith all, groups 
 };
 
 class RepoPath extends React.Component {
 
   render() {
-    let { currentTab, currentGroup } = this.props;
-    if (currentTab === 'group' && currentGroup) {
+    let { libraryType, currentGroup } = this.props;
+    if (libraryType === 'group' && currentGroup) {
       return (
         <div className="path-container">
           <a href={`${siteRoot}groups/`}>{gettext("Groups")}</a>
@@ -26,7 +26,7 @@ class RepoPath extends React.Component {
 
     return (
       <div className="path-container">
-        <span>{currentTab}</span>
+        <span>{libraryType}</span>
       </div>
     ); 
   }
diff --git a/frontend/src/components/cur-repo-path/repo-tool.js b/frontend/src/components/cur-repo-path/repo-tool.js
index 07ca1c42a7..0e3205946f 100644
--- a/frontend/src/components/cur-repo-path/repo-tool.js
+++ b/frontend/src/components/cur-repo-path/repo-tool.js
@@ -4,13 +4,13 @@ import { gettext, username } from '../../utils/constants';
 
 const propTypes = {
   currentGroup: PropTypes.object, // for group
-  currentTab: PropTypes.string.isRequired, //for my-library, shared width me, shared whith all, groups 
+  libraryType: PropTypes.string.isRequired, //for my-library, shared width me, shared whith all, groups 
 };
 
 class RepoTool extends React.Component {
 
   render() {
-    if (this.props.currentTab === 'group' && this.props.currentGroup) {
+    if (this.props.libraryType === 'group' && this.props.currentGroup) {
       let currentGroup = this.props.currentGroup;
       let isShowSettingIcon = !(currentGroup.parent_group_id !== 0 && currentGroup.admins.indexOf(username) === -1);
       return (
diff --git a/frontend/src/components/dialog/create-department-repo-dialog.js b/frontend/src/components/dialog/create-department-repo-dialog.js
new file mode 100644
index 0000000000..b320cdae46
--- /dev/null
+++ b/frontend/src/components/dialog/create-department-repo-dialog.js
@@ -0,0 +1,106 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Form, FormGroup, Label, Col, FormText } from 'reactstrap';
+import { gettext, maxFileName } from '../../utils/constants';
+
+const propTypes = {
+  onCreateRepo: PropTypes.func.isRequired,
+  onCreateToggle: PropTypes.func.isRequired
+};
+
+class CreateDepartmentRepoDialog extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      repoName: '',
+      errMessage: '',
+    };
+    this.newInput = React.createRef();
+  }
+
+  handleChange = (e) => {
+    this.setState({
+      repoName: e.target.value, 
+    });
+  }
+
+  handleSubmit = () => {
+    let isValid = this.validateRepoName();
+    if (isValid) {
+      let repo = this.createRepo(this.state.repoName);
+      this.props.onCreateRepo(repo);
+    }
+
+  } 
+
+  handleKeyPress = (e) => {
+    if (e.key === 'Enter') {
+      this.handleSubmit();
+    }
+  }
+
+  toggle = () => {
+    this.props.onCreateToggle();
+  }
+
+  componentDidMount = () => {
+    this.newInput.focus();
+  }
+
+  validateRepoName = () => {
+    let errMessage = '';
+    let repoName = this.state.repoName.trim();
+    if (!repoName.length) {
+      errMessage = 'Name is required';
+      this.setState({errMessage: errMessage});
+      return false;
+    }
+    if (repoName.indexOf('/') > -1) {
+      errMessage = 'Name should not include \'/\'.';
+      this.setState({errMessage: errMessage});
+      return false;
+    }
+    if (repoName.length > maxFileName) {
+      errMessage = 'RepoName\'s length is must little than ' + maxFileName;
+      this.setState({errMessage: errMessage});
+      return false;
+    }
+    return true;
+  }
+
+  createRepo = (repoName) => {
+    let repo = { repo_name: repoName };
+    return repo;
+  }
+
+  render() {
+    return (
+      <Modal isOpen={true} toggle={this.toggle}>
+        <ModalHeader toggle={this.toggle}>{gettext('New Department Library')}</ModalHeader>
+        <ModalBody>
+          <Form>
+            <FormGroup>
+              <Label for="repo-name">{gettext('Name')}</Label>
+              <Input 
+                id="repo-name" 
+                onKeyPress={this.handleKeyPress} 
+                innerRef={input => {this.newInput = input;}} 
+                value={this.state.repoName} 
+                onChange={this.handleChange}
+                maxLength={maxFileName}
+              />
+            </FormGroup>
+          </Form>
+          <Label className="err-message">{gettext(this.state.errMessage)}</Label>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+CreateDepartmentRepoDialog.propTypes = propTypes;
+
+export default CreateDepartmentRepoDialog;
diff --git a/frontend/src/components/share-repo-list-view/share-repo-list-item.js b/frontend/src/components/share-repo-list-view/share-repo-list-item.js
index 1473acb60d..3f854fccc8 100644
--- a/frontend/src/components/share-repo-list-view/share-repo-list-item.js
+++ b/frontend/src/components/share-repo-list-view/share-repo-list-item.js
@@ -9,8 +9,8 @@ const propTypes = {
   currentGroup: PropTypes.object,
   repo: PropTypes.object.isRequired,
   isItemFreezed: PropTypes.bool.isRequired,
-  isShowRepoOwner: PropTypes.bool.isRequired,
   onFreezedItem: PropTypes.func.isRequired,
+  onItemUnshared: PropTypes.func.isRequired,
 };
 
 class SharedRepoListItem extends React.Component {
@@ -33,6 +33,15 @@ class SharedRepoListItem extends React.Component {
       });
     }
   }
+
+  onMouseOver = () => {
+    if (!this.props.isItemFreezed) {
+      this.setState({
+        highlight: true,
+        isOperationShow: true,
+      });
+    }
+  }
   
   onMouseLeave = () => {
     if (!this.props.isItemFreezed) {
@@ -128,6 +137,7 @@ class SharedRepoListItem extends React.Component {
 
   onItemUnshared = () => {
     // todo
+    this.props.onItemUnshared(this.props.repo);
   }
 
   onItemDelete = () => {
@@ -208,7 +218,7 @@ class SharedRepoListItem extends React.Component {
     // scene two: (share, unshare), (share), (unshare)
     let operations = this.generatorOperations();
     const shareOperation   = <a href="#" className="sf2-icon-share sf2-x op-icon" title={gettext("Share")} onClick={this.onItemShared}></a>;
-    const unshareOperation = <a href="#" className="sf2-icon-x3 sf2-x op-icon" title={gettext("Unshare")} onClick={this.onItemShared}></a>
+    const unshareOperation = <a href="#" className="sf2-icon-x3 sf2-x op-icon" title={gettext("Unshare")} onClick={this.onItemUnshared}></a>
     const deleteOperation  = <a href="#" className="sf2-icon-delete sf2-x op-icon" title={gettext('Delete')} onClick={this.onItemDelete}></a>;
     
     if (this.isDeparementOnwerGroupMember) {
@@ -255,28 +265,28 @@ class SharedRepoListItem extends React.Component {
 
   renderPCUI = () => {
     let { iconUrl, iconTitle, libPath } = this.getRepoComputeParams();
-    let { repo, isShowRepoOwner } = this.props;
+    let { repo } = this.props;
     return (
-      <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+      <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
         <td><img src={iconUrl} title={repo.iconTitle} alt={iconTitle} width="24" /></td>
         <td><a href={libPath}>{repo.repo_name}</a></td>
         <td>{this.state.isOperationShow && this.generatorPCMenu()}</td>
         <td>{repo.size}</td>
         <td title={moment(repo.last_modified).format('llll')}>{moment(repo.last_modified).fromNow()}</td>
-        {isShowRepoOwner && <td title={repo.owner_contact_email}>{repo.owner_name}</td>}
+        <td title={repo.owner_contact_email}>{repo.owner_name}</td>
       </tr>
     );
   }
   
   renderMobileUI = () => {
     let { iconUrl, iconTitle, libPath } = this.getRepoComputeParams();
-    let { repo, isShowRepoOwner } = this.props;
+    let { repo } = this.props;
     return (
-      <tr className={this.state.highlight ? 'tr-highlight' : ''}  onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+      <tr className={this.state.highlight ? 'tr-highlight' : ''}  onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
         <td><img src={iconUrl} title={iconTitle} alt={iconTitle}/></td>
         <td>
           <a href={libPath}>{repo.repo_name}</a><br />
-          {isShowRepoOwner ? <span className="item-meta-info" title={repo.owner_contact_email}>{repo.owner_name}</span> : null}
+          <span className="item-meta-info" title={repo.owner_contact_email}>{repo.owner_name}</span>
           <span className="item-meta-info">{repo.size}</span>
           <span className="item-meta-info" title={moment(repo.last_modified).format('llll')}>{moment(repo.last_modified).fromNow()}</span>
         </td>
diff --git a/frontend/src/components/share-repo-list-view/share-repo-list-view.js b/frontend/src/components/share-repo-list-view/share-repo-list-view.js
index caa9104157..d0da0b4167 100644
--- a/frontend/src/components/share-repo-list-view/share-repo-list-view.js
+++ b/frontend/src/components/share-repo-list-view/share-repo-list-view.js
@@ -6,8 +6,8 @@ import ShareRepoListItem from './share-repo-list-item';
 const propTypes = {
   currentGroup: PropTypes.object,
   repoList: PropTypes.array.isRequired,
-  isShowRepoOwner: PropTypes.bool.isRequired,
   isShowTableThread: PropTypes.bool,
+  onItemUnshared: PropTypes.func.isRequired,
 };
 
 class ShareRepoListView extends React.Component {
@@ -33,10 +33,10 @@ class ShareRepoListView extends React.Component {
             <ShareRepoListItem
               key={repo.repo_id}
               repo={repo}
-              isShowRepoOwner={this.props.isShowRepoOwner}
               currentGroup={this.props.currentGroup}
               isItemFreezed={this.state.isItemFreezed}
               onFreezedItem={this.onFreezedItem}
+              onItemUnshared={this.props.onItemUnshared}
             />
           );
         })}
@@ -45,7 +45,6 @@ class ShareRepoListView extends React.Component {
   }
 
   renderPCUI = () => {
-    let isShowRepoOwner = this.props.isShowRepoOwner;
     let isShowTableThread = this.props.isShowTableThread !== undefined ? this.props.isShowTableThread : true;
     return (
       <table>
@@ -56,11 +55,11 @@ class ShareRepoListView extends React.Component {
               <a className="table-sort-op by-name" href="#">{/*TODO: sort*/}<span className="sort-icon icon-caret-down hide"></span></a>
             </th>
             <th width="12%"><span className="sr-only">{gettext("Actions")}</span></th>
-            <th width={isShowRepoOwner ? '14%' : '22%'}>{gettext("Size")}</th>
-            <th width={isShowRepoOwner ? '14%' : '22%'}>{gettext("Last Update")}
+            <th width={'14%'}>{gettext("Size")}</th>
+            <th width={'14%'}>{gettext("Last Update")}
               <a className="table-sort-op by-time" href="#">{/*TODO: sort*/}<span className="sort-icon icon-caret-up"></span></a>
             </th>
-            {isShowRepoOwner && <th width="16%">{gettext("Owner")}</th>}
+            <th width="16%">{gettext("Owner")}</th>
           </tr>
         </thead>
         <tbody>
@@ -71,7 +70,6 @@ class ShareRepoListView extends React.Component {
   }
 
   renderMobileUI = () => {
-    let isShowRepoOwner = this.props.isShowRepoOwner;
     let isShowTableThread = this.props.isShowTableThread !== undefined ? this.props.isShowTableThread : true;
     return (
       <table>
@@ -79,15 +77,11 @@ class ShareRepoListView extends React.Component {
           <tr>
             <th width="18%"><span className="sr-only">{gettext("Library Type")}</span></th>
             <th width="68%">
-              {isShowRepoOwner ? (
-                <Fragment>
-                  {gettext("Sort:")} {/* TODO: sort */}
-                  {gettext("name")}<a className="table-sort-op mobile-table-sort-op by-name" href="#"> <span className="sort-icon icon-caret-down hide"></span></a>
-                  {gettext("last update")}<a className="table-sort-op mobile-table-sort-op by-time" href="#"> <span className="sort-icon icon-caret-up"></span></a>
-                </Fragment>
-              ) :
-              (gettext('name'))
-              }
+              <Fragment>
+                {gettext("Sort:")} {/* TODO: sort */}
+                {gettext("name")}<a className="table-sort-op mobile-table-sort-op by-name" href="#"> <span className="sort-icon icon-caret-down hide"></span></a>
+                {gettext("last update")}<a className="table-sort-op mobile-table-sort-op by-time" href="#"> <span className="sort-icon icon-caret-up"></span></a>
+              </Fragment>
             </th>
             <th width="14%"><span className="sr-only">{gettext("Actions")}</span></th>
           </tr>
diff --git a/frontend/src/pages/groups/group-view.js b/frontend/src/pages/groups/group-view.js
index 496a2013c4..c2bf04ed05 100644
--- a/frontend/src/pages/groups/group-view.js
+++ b/frontend/src/pages/groups/group-view.js
@@ -3,11 +3,13 @@ import PropTypes from 'prop-types';
 import { gettext, username, loginUrl } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import Loading from '../../components/loading';
+import ModalPortal from '../../components/modal-portal';
 import Group from '../../models/group';
 import RepoInfo from '../../models/repoInfo';
 import CommonToolbar from '../../components/toolbar/common-toolbar';
-import RepoViewToolbar from '../../components/toolbar/repo-view-toobar';
 import CurRepoPath from '../../components/cur-repo-path/';
+import CreateRepoDialog from '../../components/dialog/create-repo-dialog';
+import CreateDepartmentRepoDialog from '../../components/dialog/create-department-repo-dialog';
 import ShareRepoListView from '../../components/share-repo-list-view/share-repo-list-view';
 
 const propTypes = {
@@ -15,6 +17,8 @@ const propTypes = {
   onSearchedClick: PropTypes.func.isRequired,
 };
 
+const DEPARETMENT_GROUP_ONWER_NAME = 'system admin';
+
 class GroupView extends React.Component {
 
   constructor(props) {
@@ -26,8 +30,9 @@ class GroupView extends React.Component {
       currentGroup: null,
       isStaff: false,
       repoList: [],
-      currentTab: 'group',
-      isShowRepoOwner: true,
+      libraryType: 'group',
+      isCreateRepoDialogShow: false,
+      isDepartmentGroup: false,
     }
   }
 
@@ -47,10 +52,12 @@ class GroupView extends React.Component {
       let currentGroup = new Group(res.data);
       let emptyTip = this.getEmptyTip(currentGroup);
       let isStaff  = currentGroup.admins.indexOf(username) > -1;  //for item operations
+      let isDepartmentGroup = currentGroup.owner === DEPARETMENT_GROUP_ONWER_NAME;
       this.setState({
         emptyTip: emptyTip,
         currentGroup: currentGroup,
         isStaff: isStaff,
+        isDepartmentGroup: isDepartmentGroup,
       });
       this.loadRepos(groupID);
     }).catch((error) => {
@@ -141,6 +148,10 @@ class GroupView extends React.Component {
     return emptyTip;
   }
 
+  onCreateRepoToggle = () => {
+    this.setState({isCreateRepoDialogShow: !this.state.isCreateRepoDialogShow});
+  }
+
   onCreateRepo = (repo) => {
     let groupId = this.props.groupID;
     seafileAPI.createGroupRepo(groupId, repo).then(res => {
@@ -150,6 +161,7 @@ class GroupView extends React.Component {
     }).catch(() => {
       //todo
     });
+    this.onCreateRepoToggle();
   }
 
   addRepoItem = (repo) => {
@@ -158,22 +170,36 @@ class GroupView extends React.Component {
     return newRepoList;
   }
 
+  onItemUnshared = (repo) => {
+    let group = this.state.currentGroup;
+    seafileAPI.unshareRepo(repo.repo_id, {share_type: 'group', group_id: group.id}).then(() => {
+      let repoList = this.state.repoList.filter(item => {
+        return item.repo_id !== repo.repo_id;
+      });
+      this.setState({repoList: repoList});
+    });
+  }
+
   render() {
     let { errMessage, emptyTip } = this.state;
     return (
       <Fragment>
         <div className="main-panel-north">
-          <RepoViewToolbar 
-            libraryType={this.state.currentTab}
-            onShowSidePanel={this.props.onShowSidePanel} 
-            onCreateRepo={this.onCreateRepo} 
-          />
+          <div className="cur-view-toolbar border-left-show">
+            <span className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" title="Side Nav Menu" onClick={this.props.onShowSidePanel}></span>
+            <div className="operation">
+              <button className="btn btn-secondary operation-item" title={gettext('New Library')} onClick={this.onCreateRepoToggle}>
+                <i className="fas fa-plus-square op-icon"></i>
+                {gettext('New Library')}
+              </button>
+            </div>
+          </div>
           <CommonToolbar onSearchedClick={this.props.onSearchedClick} />
         </div>
         <div className="main-panel-center">
           <div className="cur-view-container">
             <div className="cur-view-path">
-              <CurRepoPath currentTab={this.state.currentTab} currentGroup={this.state.currentGroup}/>
+              <CurRepoPath libraryType={this.state.libraryType} currentGroup={this.state.currentGroup}/>
             </div>
             <div className="cur-view-content">
               {this.state.isLoading && <Loading />}
@@ -183,12 +209,29 @@ class GroupView extends React.Component {
                 <ShareRepoListView 
                   repoList={this.state.repoList} 
                   currentGroup={this.state.currentGroup} 
-                  isShowRepoOwner={this.state.isShowRepoOwner}
+                  onItemUnshared={this.onItemUnshared}
                 />
               }
             </div>
           </div>
         </div>
+        {this.state.isCreateRepoDialogShow && !this.state.isDepartmentGroup && (
+          <ModalPortal>
+            <CreateRepoDialog 
+              hasPermission={this.hasPermission}
+              libraryType={this.state.libraryType}
+              onCreateToggle={this.onCreateRepoToggle}
+              onCreateRepo={this.onCreateRepo}
+            />
+          </ModalPortal>
+        )}
+        {this.state.isCreateRepoDialogShow && this.state.isDepartmentGroup &&
+          <CreateDepartmentRepoDialog 
+            isAdmin={this.state.isAdmin}
+            onCreateToggle={this.onCreateRepoToggle}
+            onCreateRepo={this.onCreateRepo}
+          />
+        }
       </Fragment>
     );
   }
diff --git a/frontend/src/utils/constants.js b/frontend/src/utils/constants.js
index e3c808ed31..e7acdb2347 100644
--- a/frontend/src/utils/constants.js
+++ b/frontend/src/utils/constants.js
@@ -27,6 +27,7 @@ export const storages = window.app.pageOptions.storages; // storage backends
 export const enableRepoSnapshotLabel = window.app.pageOptions.enableRepoSnapshotLabel;
 export const shareLinkExpireDaysMin = window.app.pageOptions.shareLinkExpireDaysMin;
 export const shareLinkExpireDaysMax = window.app.pageOptions.shareLinkExpireDaysMax;
+export const maxFileName = window.app.pageOptions.maxFileName;
 
 // wiki
 export const slug = window.wiki ? window.wiki.config.slug : '';
diff --git a/seahub/templates/base_for_react.html b/seahub/templates/base_for_react.html
index 7c52d81dd6..3aeb0fb049 100644
--- a/seahub/templates/base_for_react.html
+++ b/seahub/templates/base_for_react.html
@@ -61,6 +61,7 @@
             enableRepoSnapshotLabel: {% if enable_repo_snapshot_label %} true {% else %} false {% endif %},
             shareLinkExpireDaysMin: "{{ share_link_expire_days_min }}",
             shareLinkExpireDaysMax: "{{ share_link_expire_days_max }}",
+            maxFileName: "{{ max_file_name }}"
         }
      };
 </script>