diff --git a/frontend/src/components/dialog/org-delete-department-dialog.js b/frontend/src/components/dialog/org-delete-department-dialog.js
index 5fc967c18b..85641b9c32 100644
--- a/frontend/src/components/dialog/org-delete-department-dialog.js
+++ b/frontend/src/components/dialog/org-delete-department-dialog.js
@@ -4,6 +4,7 @@ import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext, orgID } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
+import toaster from '../../components/toast';
 
 const propTypes = {
   groupName: PropTypes.string,
@@ -16,19 +17,15 @@ class DeleteDepartDialog extends React.Component {
 
   constructor(props) {
     super(props);
-    this.state = {
-      errMessage: null
-    };
   }
 
   deleteDepart = () => {
+    this.props.toggle();
     seafileAPI.orgAdminDeleteDepartGroup(orgID, this.props.groupID).then((res) => {
-      if (res.data.success) {
-        this.props.onDepartChanged();
-        this.props.toggle();
-      }
-    }).catch(err => {
-      this.setState({ errMessage: 'There are sub-departments in this department.' });
+      this.props.onDepartChanged();
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
     });
   }
 
@@ -39,12 +36,11 @@ class DeleteDepartDialog extends React.Component {
       <Modal isOpen={true} toggle={this.props.toggle}>
         <ModalHeader toggle={this.props.toggle}>{gettext('Delete Department')}</ModalHeader>
         <ModalBody>
-          <div dangerouslySetInnerHTML={{__html: subtitle}}></div>
-          { this.state.errMessage && <p className="error">{this.state.errMessage}</p> }
+          <p dangerouslySetInnerHTML={{__html: subtitle}}></p>
         </ModalBody>
         <ModalFooter>
-          {!this.state.errMessage && <Button color="primary" onClick={this.deleteDepart}>{gettext('Delete')}</Button>}
           <Button color="secondary" onClick={this.props.toggle}>{gettext('Cancel')}</Button>
+          <Button color="primary" onClick={this.deleteDepart}>{gettext('Delete')}</Button>
         </ModalFooter>
       </Modal>
     );
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-delete-department-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-delete-department-dialog.js
index 6a0302efd2..15300268dd 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-delete-department-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-delete-department-dialog.js
@@ -4,6 +4,7 @@ import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
 import { seafileAPI } from '../../../utils/seafile-api';
 import { Utils } from '../../../utils/utils';
+import toaster from '../../../components/toast';
 
 const propTypes = {
   groupName: PropTypes.string,
@@ -16,19 +17,15 @@ class DeleteDepartDialog extends React.Component {
 
   constructor(props) {
     super(props);
-    this.state = {
-      errMessage: null
-    };
   }
 
   deleteDepart = () => {
+    this.props.toggle();
     seafileAPI.sysAdminDeleteDepartment(this.props.groupID).then((res) => {
-      if (res.data.success) {
-        this.props.onDepartChanged();
-        this.props.toggle();
-      }
-    }).catch(err => {
-      this.setState({ errMessage: 'There are sub-departments in this department.' });
+      this.props.onDepartChanged();
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
     });
   }
 
@@ -39,12 +36,11 @@ class DeleteDepartDialog extends React.Component {
       <Modal isOpen={true} toggle={this.props.toggle}>
         <ModalHeader toggle={this.props.toggle}>{gettext('Delete Department')}</ModalHeader>
         <ModalBody>
-          <div dangerouslySetInnerHTML={{__html: tipMessage}}></div>
-          { this.state.errMessage && <p className="error">{this.state.errMessage}</p> }
+          <p dangerouslySetInnerHTML={{__html: tipMessage}}></p>
         </ModalBody>
         <ModalFooter>
-          {!this.state.errMessage && <Button color="primary" onClick={this.deleteDepart}>{gettext('Delete')}</Button>}
           <Button color="secondary" onClick={this.props.toggle}>{gettext('Cancel')}</Button>
+          <Button color="primary" onClick={this.deleteDepart}>{gettext('Delete')}</Button>
         </ModalFooter>
       </Modal>
     );
diff --git a/seahub/api2/endpoints/admin/address_book/groups.py b/seahub/api2/endpoints/admin/address_book/groups.py
index 33dad83f8a..800313420c 100644
--- a/seahub/api2/endpoints/admin/address_book/groups.py
+++ b/seahub/api2/endpoints/admin/address_book/groups.py
@@ -229,11 +229,11 @@ class AdminAddressBookGroup(APIView):
 
         if has_repo:
             error_msg = _('There are libraries in this department.')
-            return api_error(status.HTTP_403_FORBIDDEN, error_msg)
+            return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
 
         if len(child_groups) > 0:
             error_msg = _('There are sub-departments in this department.')
-            return api_error(status.HTTP_403_FORBIDDEN, error_msg)
+            return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
 
         try:
             ret_code = ccnet_api.remove_group(group_id)