diff --git a/frontend/src/components/dialog/transfer-dialog.js b/frontend/src/components/dialog/transfer-dialog.js
index 17971d3575..fbd08544c9 100644
--- a/frontend/src/components/dialog/transfer-dialog.js
+++ b/frontend/src/components/dialog/transfer-dialog.js
@@ -1,7 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-import { gettext } from '../../utils/constants';
+import Select from 'react-select';
+import makeAnimated from 'react-select/lib/animated';
+import { seafileAPI } from '../../utils/seafile-api.js';
+import { gettext, isPro } from '../../utils/constants';
 import UserSelect from '../user-select';
 
 const propTypes = {
@@ -16,14 +19,13 @@ class TransferDialog extends React.Component {
     this.state = {
       selectedOption: null,
       errorMsg: [],
-      sharedItems: []
+      transferToUser: true,
     };
     this.options = [];
   }
 
   handleSelectChange = (option) => {
     this.setState({selectedOption: option});
-    this.options = [];
   }
 
   submit = () => {
@@ -31,24 +33,59 @@ class TransferDialog extends React.Component {
     this.props.submit(user);
   } 
 
+  componentDidMount() {
+    seafileAPI.shareableGroups().then((res) => {
+      for (let i = 0 ; i < res.data.length; i++) {
+        let obj = {};
+        obj.value = res.data[i].name;
+        obj.email = `${res.data[i].id}@seafile_group`;
+        obj.label = res.data[i].name;
+        this.options.push(obj);
+      }
+    });
+  }
+
+  onClick = () => {
+    this.setState({
+      transferToUser: !this.state.transferToUser,
+    });
+  }
+
   render() {
     const itemName = this.props.itemName;
     const innerSpan = '<span class="op-target" title=' + itemName + '>' + itemName +'</span>';
-    let msg = gettext('Transfer Library {library_name} To');
+    let msg = gettext('Transfer Library {library_name}');
     let message = msg.replace('{library_name}', innerSpan);
     return (
-      <Modal isOpen={true} centered={true}>
+      <Modal isOpen={true}>
         <ModalHeader toggle={this.props.toggleDialog}>
           <div dangerouslySetInnerHTML={{__html:message}} />
         </ModalHeader>
         <ModalBody>
-          <UserSelect
-            ref="userSelect"
-            isMulti={false}
-            className="reviewer-select"
-            placeholder={gettext('Please enter 1 or more character')}
-            onSelectChange={this.handleSelectChange}
-          />
+          {this.state.transferToUser ?
+            <UserSelect
+              ref="userSelect"
+              isMulti={false}
+              className="reviewer-select"
+              placeholder={gettext('Search users')}
+              onSelectChange={this.handleSelectChange}
+            /> :
+            <Select
+              isClearable
+              isMulti={false}
+              maxMenuHeight={200}
+              hideSelectedOptions={true}
+              components={makeAnimated()}
+              placeholder={gettext('Select a Department')}
+              options={this.options}
+              onChange={this.handleSelectChange}
+            />
+          }
+          {isPro &&
+            <a href="#" onClick={this.onClick}>{this.state.transferToUser ?
+              gettext('Transfer Library to Department'): gettext('Transfer Library to User')}
+            </a>
+          }
         </ModalBody>
         <ModalFooter>
           <Button color="secondary" onClick={this.props.toggleDialog}>{gettext('Cancel')}</Button>