diff --git a/cli/commands/docker/utils.js b/cli/commands/docker/utils.js
index 1c1e1f92b4..658a09a8d0 100644
--- a/cli/commands/docker/utils.js
+++ b/cli/commands/docker/utils.js
@@ -559,6 +559,10 @@ const up = async ({ uis, downloadLocales, fromInstaller }) => {
       }
     };
 
+    dockerComposeConfig.services["plugin-core-api"].deploy = deploy;
+    if(configs.core && Number(configs.core.replicas)) {
+      dockerComposeConfig.services["plugin-core-api"].deploy.replicas = Number(configs.core.replicas);
+    }
     dockerComposeConfig.services.coreui.deploy = deploy;
     dockerComposeConfig.services.gateway.deploy = deploy;
   }
diff --git a/cli/package.json b/cli/package.json
index c5d2faab56..6cef41210d 100644
--- a/cli/package.json
+++ b/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "erxes",
-  "version": "0.4.25",
+  "version": "0.4.26",
   "description": "Free and open fair-code licensed all-in-one growth marketing & management software",
   "homepage": "https://erxes.io",
   "repository": "https://github.com/erxes/erxes",
diff --git a/packages/core-ui/src/modules/settings/main/components/Settings.tsx b/packages/core-ui/src/modules/settings/main/components/Settings.tsx
index 3da156269b..df566c2959 100644
--- a/packages/core-ui/src/modules/settings/main/components/Settings.tsx
+++ b/packages/core-ui/src/modules/settings/main/components/Settings.tsx
@@ -145,7 +145,7 @@ class Settings extends React.PureComponent {
             )}
             {this.renderBox(
               'Structure',
-              '/images/icons/erxes-23.svg',
+              '/images/icons/erxes-15.svg',
               '/settings/structure',
               'usersAll',
               teamPermissions
diff --git a/packages/core-ui/src/modules/settings/team/components/branch/Form.tsx b/packages/core-ui/src/modules/settings/team/components/branch/Form.tsx
index 5049fc427d..ecb2bda796 100644
--- a/packages/core-ui/src/modules/settings/team/components/branch/Form.tsx
+++ b/packages/core-ui/src/modules/settings/team/components/branch/Form.tsx
@@ -9,7 +9,6 @@ import { __ } from 'modules/common/utils';
 import { IBranch } from '@erxes/ui/src/team/types';
 import SelectTeamMembers from '@erxes/ui/src/team/containers/SelectTeamMembers';
 import ContactInfoForm from '../common/ContactInfoForm';
-import SelectBranches from '@erxes/ui/src/team/containers/SelectBranches';
 
 type Props = {
   renderButton: (props: IButtonMutateProps) => JSX.Element;
@@ -19,7 +18,7 @@ type Props = {
 };
 
 export default function BranchForm(props: Props) {
-  const { closeModal, renderButton } = props;
+  const { closeModal, renderButton, branches } = props;
   const object = props.branch || ({} as IBranch);
 
   const [userIds, setUserIds] = useState(
@@ -75,6 +74,14 @@ export default function BranchForm(props: Props) {
   const renderContent = (formProps: IFormProps) => {
     const { values, isSubmitted } = formProps;
 
+    const generateOptions = () => {
+      return branches.map(branch => (
+        <option key={branch._id} value={branch._id}>
+          {branch.title}
+        </option>
+      ));
+    };
+
     return (
       <>
         <FormGroup>
@@ -120,13 +127,16 @@ export default function BranchForm(props: Props) {
 
         <FormGroup>
           <ControlLabel>{__('Parent')}</ControlLabel>
-          <SelectBranches
-            label="Choose parent"
+          <FormControl
+            {...formProps}
             name="parentId"
-            initialValue={parentId || ''}
-            onSelect={onChangeParent}
-            multi={false}
-          />
+            componentClass="select"
+            defaultValue={parentId || null}
+            onChange={onChangeParent}
+          >
+            <option value="" />
+            {generateOptions()}
+          </FormControl>
         </FormGroup>
         <FormGroup>
           <ControlLabel>{__('Team Members')}</ControlLabel>
diff --git a/packages/core-ui/src/modules/settings/team/components/branch/MainList.tsx b/packages/core-ui/src/modules/settings/team/components/branch/MainList.tsx
index d8cca1e078..6a4fa2605c 100644
--- a/packages/core-ui/src/modules/settings/team/components/branch/MainList.tsx
+++ b/packages/core-ui/src/modules/settings/team/components/branch/MainList.tsx
@@ -2,7 +2,6 @@ import {
   Button,
   ModalTrigger,
   BarItems,
-  HeaderDescription,
   FormControl,
   Table,
   Wrapper,
@@ -13,13 +12,15 @@ import {
 } from '@erxes/ui/src';
 import { BranchesMainQueryResponse, IBranch } from '@erxes/ui/src/team/types';
 import React from 'react';
-import SettingsSideBar from '../common/SettingsSideBar';
+import SettingsSideBar from '../../containers/common/SettingSideBar';
 import Form from '../../containers/branch/Form';
 import { generateTree } from '../../utils';
 import { queries } from '@erxes/ui/src/team/graphql';
 import { gql } from '@apollo/client';
 import { generatePaginationParams } from '@erxes/ui/src/utils/router';
-import { DescriptionContentRow } from '../common/DescriptionContentRow';
+import ActionButtons from '@erxes/ui/src/components/ActionButtons';
+import Tip from '@erxes/ui/src/components/Tip';
+import Icon from '@erxes/ui/src/components/Icon';
 
 type Props = {
   listQuery: BranchesMainQueryResponse;
@@ -55,8 +56,24 @@ class MainList extends React.Component<Props, State> {
     }
   ];
 
+  remove = (_id?: string) => {
+    if (_id) {
+      this.props.deleteBranches([_id], () =>
+        this.setState({ selectedItems: [] })
+      );
+    } else {
+      this.props.deleteBranches(this.state.selectedItems, () =>
+        this.setState({ selectedItems: [] })
+      );
+    }
+  };
+
   renderForm() {
-    const trigger = <Button btnStyle="success">{__('Add Branch')}</Button>;
+    const trigger = (
+      <Button btnStyle="success" icon="plus-circle">
+        {__('Add Branch')}
+      </Button>
+    );
 
     const content = ({ closeModal }) => (
       <Form
@@ -122,7 +139,16 @@ class MainList extends React.Component<Props, State> {
     const onclick = e => {
       e.stopPropagation();
     };
+
     const trigger = (
+      <Button btnStyle="link">
+        <Tip text={__('Edit')} placement="top">
+          <Icon icon="edit-3" />
+        </Tip>
+      </Button>
+    );
+
+    return (
       <tr key={branch._id}>
         <td onClick={onclick}>
           <FormControl
@@ -136,22 +162,31 @@ class MainList extends React.Component<Props, State> {
         <td>{branch?.parent?.title || ''}</td>
         <td>{__(branch.address.replace(/\n/g, ''))}</td>
         <td>{branch.userCount}</td>
+        <td>
+          <ActionButtons>
+            <ModalTrigger
+              key={branch._id}
+              title="Edit Branch"
+              content={({ closeModal }) => (
+                <Form
+                  branch={branch}
+                  closeModal={closeModal}
+                  additionalRefetchQueries={this.refetchQueries()}
+                />
+              )}
+              trigger={trigger}
+            />
+            <Tip text={__('Delete')} placement="top">
+              <Button
+                btnStyle="link"
+                onClick={() => this.remove(branch._id)}
+                icon="times-circle"
+              />
+            </Tip>
+          </ActionButtons>
+        </td>
       </tr>
     );
-    return (
-      <ModalTrigger
-        key={branch._id}
-        title="Edit Branch"
-        content={({ closeModal }) => (
-          <Form
-            branch={branch}
-            closeModal={closeModal}
-            additionalRefetchQueries={this.refetchQueries()}
-          />
-        )}
-        trigger={trigger}
-      />
-    );
   }
 
   renderContent() {
@@ -169,16 +204,6 @@ class MainList extends React.Component<Props, State> {
       this.setState({ selectedItems: [] });
     };
 
-    const generateList = () => {
-      const list = branches.map(branch => {
-        if (!branches.find(dep => dep._id === branch.parentId)) {
-          branch.parentId = null;
-        }
-        return branch;
-      });
-      return list;
-    };
-
     return (
       <Table>
         <thead>
@@ -195,10 +220,14 @@ class MainList extends React.Component<Props, State> {
             <th>{__('Parent')}</th>
             <th>{__('Address')}</th>
             <th>{__('Team member count')}</th>
+            <th>{__('Actions')}</th>
           </tr>
         </thead>
         <tbody>
-          {generateTree(generateList(), null, (branch, level) =>
+          {generateTree(branches, null, (branch, level) =>
+            this.renderRow(branch, level)
+          )}
+          {generateTree(branches, '', (branch, level) =>
             this.renderRow(branch, level)
           )}
         </tbody>
@@ -206,45 +235,31 @@ class MainList extends React.Component<Props, State> {
     );
   }
 
-  deleteBranches() {
-    const {} = this.state;
-  }
-
   render() {
-    const { listQuery, deleteBranches } = this.props;
+    const { listQuery } = this.props;
 
-    const { totalCount, totalUsersCount } = listQuery.branchesMain;
+    const { totalCount } = listQuery.branchesMain;
 
     const { selectedItems } = this.state;
 
-    const remove = () => {
-      deleteBranches(selectedItems, () => this.setState({ selectedItems: [] }));
-    };
-
     const rightActionBar = (
       <BarItems>
         {this.renderSearch()}
-        {!!selectedItems.length && (
-          <Button btnStyle="danger" onClick={remove}>
-            {__(`Remove ${selectedItems.length}`)}
-          </Button>
-        )}
         {this.renderForm()}
       </BarItems>
     );
 
-    const leftActionBar = (
-      <HeaderDescription
-        title="Branches"
-        icon="/images/actions/21.svg"
-        description=""
-        renderExtra={DescriptionContentRow({
-          label: 'branches',
-          totalCount: totalCount,
-          teamMembersCount: totalUsersCount
-        })}
-      />
+    const leftActionBar = selectedItems.length > 0 && (
+      <Button
+        btnStyle="danger"
+        size="small"
+        icon="times-circle"
+        onClick={() => this.remove()}
+      >
+        Remove
+      </Button>
     );
+
     return (
       <Wrapper
         header={
@@ -257,7 +272,7 @@ class MainList extends React.Component<Props, State> {
           />
         }
         actionBar={
-          <Wrapper.ActionBar right={rightActionBar} left={leftActionBar} />
+          <Wrapper.ActionBar left={leftActionBar} right={rightActionBar} />
         }
         content={
           <DataWithLoader
@@ -270,6 +285,7 @@ class MainList extends React.Component<Props, State> {
         }
         leftSidebar={<SettingsSideBar />}
         footer={<Pagination count={totalCount || 0} />}
+        hasBorder={true}
       />
     );
   }
diff --git a/packages/core-ui/src/modules/settings/team/components/common/SettingsSideBar.tsx b/packages/core-ui/src/modules/settings/team/components/common/SettingsSideBar.tsx
index e0c9893fca..e946ac74ba 100644
--- a/packages/core-ui/src/modules/settings/team/components/common/SettingsSideBar.tsx
+++ b/packages/core-ui/src/modules/settings/team/components/common/SettingsSideBar.tsx
@@ -3,30 +3,47 @@ import SidebarHeader from '@erxes/ui-settings/src/common/components/SidebarHeade
 import LeftSidebar from '@erxes/ui/src/layout/components/Sidebar';
 import { SidebarList, __ } from '@erxes/ui/src';
 import { Link } from 'react-router-dom';
+import { SidebarCounter, FieldStyle } from '@erxes/ui/src/layout/styles';
 
-function ListItem(url, text) {
+function ListItem(url, text, totalCount?) {
   return (
     <li>
       <Link
         to={url}
         className={window.location.href.includes(url) ? 'active' : ''}
       >
-        {__(text)}
+        <FieldStyle>{__(text)}</FieldStyle>
+        <SidebarCounter nowrap={true}>{totalCount}</SidebarCounter>
       </Link>
     </li>
   );
 }
 
-export default function SettingsSideBar() {
-  return (
-    <LeftSidebar header={<SidebarHeader />} hasBorder>
-      <LeftSidebar.Header uppercase>{__('Structures')}</LeftSidebar.Header>
-      <SidebarList>
-        {ListItem('/settings/structure', 'Structure')}
-        {ListItem('/settings/branches', 'Branches')}
-        {ListItem('/settings/departments', 'Departments')}
-        {ListItem('/settings/units', 'Units')}
-      </SidebarList>
-    </LeftSidebar>
-  );
+type Props = {
+  branchTotalCount: number;
+  unitTotalCount: number;
+  departmentTotalCount: number;
+};
+
+export default class SettingsSideBar extends React.Component<Props> {
+  render() {
+    return (
+      <LeftSidebar header={<SidebarHeader />} hasBorder={true}>
+        <SidebarList>
+          {ListItem('/settings/structure', 'Structure')}
+          {ListItem(
+            '/settings/branches',
+            'Branches',
+            this.props.branchTotalCount
+          )}
+          {ListItem(
+            '/settings/departments',
+            'Departments',
+            this.props.departmentTotalCount
+          )}
+          {ListItem('/settings/units', 'Units', this.props.unitTotalCount)}
+        </SidebarList>
+      </LeftSidebar>
+    );
+  }
 }
diff --git a/packages/core-ui/src/modules/settings/team/components/department/Form.tsx b/packages/core-ui/src/modules/settings/team/components/department/Form.tsx
index bd873cb1ee..898f27a128 100644
--- a/packages/core-ui/src/modules/settings/team/components/department/Form.tsx
+++ b/packages/core-ui/src/modules/settings/team/components/department/Form.tsx
@@ -18,7 +18,7 @@ type Props = {
 };
 
 export default function DepartmentForm(props: Props) {
-  const { closeModal, renderButton } = props;
+  const { closeModal, renderButton, departments } = props;
   const object = props.department || ({} as any);
 
   const [userIds, setUserIds] = useState(
@@ -61,6 +61,14 @@ export default function DepartmentForm(props: Props) {
   const renderContent = (formProps: IFormProps) => {
     const { values, isSubmitted } = formProps;
 
+    const generateOptions = () => {
+      return departments.map(branch => (
+        <option key={branch._id} value={branch._id}>
+          {branch.title}
+        </option>
+      ));
+    };
+
     return (
       <>
         <FormGroup>
@@ -104,14 +112,16 @@ export default function DepartmentForm(props: Props) {
         </FormGroup>
         <FormGroup>
           <ControlLabel>{__('Parent')}</ControlLabel>
-          <SelectDepartments
-            label="Choose parent"
+          <FormControl
+            {...formProps}
             name="parentId"
-            onSelect={onChangeParent}
-            initialValue={parentId}
-            multi={false}
-          />
-          {/* /> */}
+            componentClass="select"
+            defaultValue={parentId || null}
+            onChange={onChangeParent}
+          >
+            <option value="" />
+            {generateOptions()}
+          </FormControl>
         </FormGroup>
         <FormGroup>
           <ControlLabel>{__('Team Members')}</ControlLabel>
diff --git a/packages/core-ui/src/modules/settings/team/components/department/MainList.tsx b/packages/core-ui/src/modules/settings/team/components/department/MainList.tsx
index 4b4ba15e1f..e3883b4dbd 100644
--- a/packages/core-ui/src/modules/settings/team/components/department/MainList.tsx
+++ b/packages/core-ui/src/modules/settings/team/components/department/MainList.tsx
@@ -2,7 +2,6 @@ import {
   Button,
   ModalTrigger,
   BarItems,
-  HeaderDescription,
   FormControl,
   DataWithLoader,
   Wrapper,
@@ -17,12 +16,15 @@ import {
   IDepartment
 } from '@erxes/ui/src/team/types';
 import React from 'react';
-import SettingsSideBar from '../common/SettingsSideBar';
+import SettingsSideBar from '../../containers/common/SettingSideBar';
 import Form from '../../containers/department/Form';
 import { queries } from '@erxes/ui/src/team/graphql';
 import { gql } from '@apollo/client';
 import { generatePaginationParams } from '@erxes/ui/src/utils/router';
-import { DescriptionContentRow } from '../common/DescriptionContentRow';
+import Tip from '@erxes/ui/src/components/Tip';
+import Icon from '@erxes/ui/src/components/Icon';
+import ActionButtons from '@erxes/ui/src/components/ActionButtons';
+
 type Props = {
   listQuery: DepartmentsMainQueryResponse;
   queryParams: any;
@@ -56,8 +58,24 @@ class MainList extends React.Component<Props, State> {
     }
   ];
 
+  remove = (_id?: string) => {
+    if (_id) {
+      this.props.deleteDepartments([_id], () =>
+        this.setState({ selectedItems: [] })
+      );
+    } else {
+      this.props.deleteDepartments(this.state.selectedItems, () =>
+        this.setState({ selectedItems: [] })
+      );
+    }
+  };
+
   renderForm() {
-    const trigger = <Button btnStyle="success">{__('Add Department')}</Button>;
+    const trigger = (
+      <Button btnStyle="success" icon="plus-circle">
+        {__('Add Department')}
+      </Button>
+    );
 
     const content = ({ closeModal }) => (
       <Form
@@ -129,6 +147,14 @@ class MainList extends React.Component<Props, State> {
     };
 
     const trigger = (
+      <Button btnStyle="link">
+        <Tip text={__('Edit')} placement="top">
+          <Icon icon="edit-3" />
+        </Tip>
+      </Button>
+    );
+
+    return (
       <tr key={department._id}>
         <td onClick={onclick}>
           <FormControl
@@ -141,23 +167,31 @@ class MainList extends React.Component<Props, State> {
         <td>{__(department.title)}</td>
         <td>{__(department?.supervisor?.email || '-')}</td>
         <td>{department.userCount}</td>
+        <td>
+          <ActionButtons>
+            <ModalTrigger
+              key={department._id}
+              title="Edit Department"
+              content={({ closeModal }) => (
+                <Form
+                  department={department}
+                  additionalRefetchQueries={this.refetchQueries()}
+                  closeModal={closeModal}
+                />
+              )}
+              trigger={trigger}
+            />
+            <Tip text={__('Delete')} placement="top">
+              <Button
+                btnStyle="link"
+                onClick={() => this.remove(department._id)}
+                icon="times-circle"
+              />
+            </Tip>
+          </ActionButtons>
+        </td>
       </tr>
     );
-
-    return (
-      <ModalTrigger
-        key={department._id}
-        title="Edit Department"
-        content={({ closeModal }) => (
-          <Form
-            department={department}
-            additionalRefetchQueries={this.refetchQueries()}
-            closeModal={closeModal}
-          />
-        )}
-        trigger={trigger}
-      />
-    );
   }
 
   renderContent() {
@@ -174,16 +208,6 @@ class MainList extends React.Component<Props, State> {
       this.setState({ selectedItems: [] });
     };
 
-    const generateList = () => {
-      const list = departments.map(department => {
-        if (!departments.find(dep => dep._id === department.parentId)) {
-          department.parentId = null;
-        }
-        return department;
-      });
-      return list;
-    };
-
     return (
       <Table>
         <thead>
@@ -199,10 +223,14 @@ class MainList extends React.Component<Props, State> {
             <th>{__('Title')}</th>
             <th>{__('Supervisor')}</th>
             <th>{__('Team member count')}</th>
+            <th>{__('Actions')}</th>
           </tr>
         </thead>
         <tbody>
-          {generateTree(generateList(), null, (department, level) => {
+          {generateTree(departments, null, (department, level) => {
+            return this.renderRow(department, level);
+          })}
+          {generateTree(departments, '', (department, level) => {
             return this.renderRow(department, level);
           })}
         </tbody>
@@ -211,42 +239,30 @@ class MainList extends React.Component<Props, State> {
   }
 
   render() {
-    const { listQuery, deleteDepartments } = this.props;
+    const { listQuery } = this.props;
 
-    const { totalCount, totalUsersCount } = listQuery.departmentsMain;
+    const { totalCount } = listQuery.departmentsMain;
 
     const { selectedItems } = this.state;
 
-    const remove = () => {
-      deleteDepartments(selectedItems, () =>
-        this.setState({ selectedItems: [] })
-      );
-    };
-
     const rightActionBar = (
       <BarItems>
         {this.renderSearch()}
-        {!!selectedItems.length && (
-          <Button btnStyle="danger" onClick={remove}>
-            {__(`Remove ${selectedItems.length}`)}
-          </Button>
-        )}
         {this.renderForm()}
       </BarItems>
     );
 
-    const leftActionBar = (
-      <HeaderDescription
-        title="Departments"
-        icon="/images/actions/21.svg"
-        description=""
-        renderExtra={DescriptionContentRow({
-          label: 'departments',
-          totalCount: totalCount,
-          teamMembersCount: totalUsersCount
-        })}
-      />
+    const leftActionBar = selectedItems.length > 0 && (
+      <Button
+        btnStyle="danger"
+        size="small"
+        icon="times-circle"
+        onClick={() => this.remove()}
+      >
+        Remove
+      </Button>
     );
+
     return (
       <Wrapper
         header={
@@ -272,6 +288,7 @@ class MainList extends React.Component<Props, State> {
         }
         leftSidebar={<SettingsSideBar />}
         footer={<Pagination count={totalCount || 0} />}
+        hasBorder={true}
       />
     );
   }
diff --git a/packages/core-ui/src/modules/settings/team/components/structure/Form.tsx b/packages/core-ui/src/modules/settings/team/components/structure/Form.tsx
index bc9afb664b..3e61dd5083 100644
--- a/packages/core-ui/src/modules/settings/team/components/structure/Form.tsx
+++ b/packages/core-ui/src/modules/settings/team/components/structure/Form.tsx
@@ -11,9 +11,10 @@ import { ModalFooter } from '@erxes/ui/src/styles/main';
 import { __ } from 'modules/common/utils';
 import { IStructure } from '@erxes/ui/src/team/types';
 import SelectTeamMembers from '@erxes/ui/src/team/containers/SelectTeamMembers';
-import Box from '@erxes/ui/src/components/Box';
+import Wrapper from '@erxes/ui/src/layout/components/Wrapper';
 import Button from '@erxes/ui/src/components/Button';
 import ContactInfoForm from '../common/ContactInfoForm';
+import { Title } from '@erxes/ui-settings/src/styles';
 
 type Props = {
   renderButton: (props: IButtonMutateProps) => JSX.Element;
@@ -136,8 +137,13 @@ export default function StructureForm(props: Props) {
   };
 
   return (
-    <Box isOpen={true} title={__('Structure')} name="showStructure">
+    <>
+      <Wrapper.ActionBar
+        background="bgWhite"
+        left={<Title capitalize={true}>{__('Structure')}</Title>}
+        wideSpacing={true}
+      />
       <Form renderContent={renderContent} />
-    </Box>
+    </>
   );
 }
diff --git a/packages/core-ui/src/modules/settings/team/components/structure/Settings.tsx b/packages/core-ui/src/modules/settings/team/components/structure/Settings.tsx
index 3f50a7b252..dbc0999a63 100644
--- a/packages/core-ui/src/modules/settings/team/components/structure/Settings.tsx
+++ b/packages/core-ui/src/modules/settings/team/components/structure/Settings.tsx
@@ -1,7 +1,7 @@
 import { Wrapper, __ } from '@erxes/ui/src';
 import React from 'react';
 import BoxContainer from '../../containers/structure/Box';
-import SettingsSideBar from '../common/SettingsSideBar';
+import SettingsSideBar from '../../containers/common/SettingSideBar';
 
 export default function Structure() {
   return (
@@ -17,6 +17,7 @@ export default function Structure() {
       }
       content={<BoxContainer />}
       leftSidebar={<SettingsSideBar />}
+      hasBorder={true}
     />
   );
 }
diff --git a/packages/core-ui/src/modules/settings/team/components/structure/View.tsx b/packages/core-ui/src/modules/settings/team/components/structure/View.tsx
index 945d4d9d63..bf744c6740 100644
--- a/packages/core-ui/src/modules/settings/team/components/structure/View.tsx
+++ b/packages/core-ui/src/modules/settings/team/components/structure/View.tsx
@@ -3,9 +3,11 @@ import { SidebarCounter } from '@erxes/ui/src/layout/styles';
 import { IStructure } from '@erxes/ui/src/team/types';
 import { IUser } from '@erxes/ui/src/auth/types';
 import { __, readFile } from 'modules/common/utils';
-import Box from '@erxes/ui/src/components/Box';
 import Icon from '@erxes/ui/src/components/Icon';
-import { StructureList } from '../../styles';
+import { StructureList, StructureEditButton } from '../../styles';
+import { Title } from '@erxes/ui-settings/src/styles';
+import Wrapper from '@erxes/ui/src/layout/components/Wrapper';
+import _ from 'lodash';
 
 type Props = {
   structure: IStructure;
@@ -14,9 +16,9 @@ type Props = {
 
 export default function View({ structure, showEdit }: Props) {
   const edit = (
-    <a href="#settings" onClick={showEdit} tabIndex={0}>
-      <Icon icon="edit" size={8} />
-    </a>
+    <StructureEditButton>
+      <Icon icon="edit" onClick={showEdit} size={14} />
+    </StructureEditButton>
   );
 
   const renderRow = (name: string, value: any, nowrap?: boolean) => {
@@ -38,12 +40,13 @@ export default function View({ structure, showEdit }: Props) {
     : supervisor.email;
 
   return (
-    <Box
-      extraButtons={edit}
-      isOpen={true}
-      title={__('Structure')}
-      name="showStructure"
-    >
+    <>
+      <Wrapper.ActionBar
+        background="bgWhite"
+        left={<Title capitalize={true}>{__('Structure')}</Title>}
+        right={edit}
+        wideSpacing={true}
+      />
       <StructureList className="no-link">
         {renderRow('Name', title)}
         {renderRow('Description', description, true)}
@@ -63,6 +66,6 @@ export default function View({ structure, showEdit }: Props) {
           </li>
         )}
       </StructureList>
-    </Box>
+    </>
   );
 }
diff --git a/packages/core-ui/src/modules/settings/team/components/unit/Form.tsx b/packages/core-ui/src/modules/settings/team/components/unit/Form.tsx
index e718f51b22..9bcb3079ce 100644
--- a/packages/core-ui/src/modules/settings/team/components/unit/Form.tsx
+++ b/packages/core-ui/src/modules/settings/team/components/unit/Form.tsx
@@ -80,13 +80,17 @@ export default function DepartmentForm(props: Props) {
             {...formProps}
             name="description"
             defaultValue={object.description}
-            autoFocus={true}
             componentClass="textarea"
           />
         </FormGroup>
         <FormGroup>
-          <ControlLabel>{__('Code')}</ControlLabel>
-          <FormControl {...formProps} name="code" defaultValue={object.code} />
+          <ControlLabel required={true}>{__('Code')}</ControlLabel>
+          <FormControl
+            required={true}
+            {...formProps}
+            name="code"
+            defaultValue={object.code}
+          />
         </FormGroup>
         <FormGroup>
           <ControlLabel>{__('Supervisor')}</ControlLabel>
diff --git a/packages/core-ui/src/modules/settings/team/components/unit/MainList.tsx b/packages/core-ui/src/modules/settings/team/components/unit/MainList.tsx
index 47d0db6f37..b9a0733feb 100644
--- a/packages/core-ui/src/modules/settings/team/components/unit/MainList.tsx
+++ b/packages/core-ui/src/modules/settings/team/components/unit/MainList.tsx
@@ -8,14 +8,15 @@ import {
   Table,
   Wrapper,
   __,
-  ModalTrigger,
-  HeaderDescription
+  ModalTrigger
 } from '@erxes/ui/src';
 import { IUnit, UnitsMainQueryResponse } from '@erxes/ui/src/team/types';
 import React from 'react';
-import SettingsSideBar from '../common/SettingsSideBar';
+import SettingsSideBar from '../../containers/common/SettingSideBar';
 import Form from '../../containers/unit/Form';
-import { DescriptionContentRow } from '../common/DescriptionContentRow';
+import ActionButtons from '@erxes/ui/src/components/ActionButtons';
+import Tip from '@erxes/ui/src/components/Tip';
+import Icon from '@erxes/ui/src/components/Icon';
 
 type Props = {
   listQuery: UnitsMainQueryResponse;
@@ -40,8 +41,22 @@ class MainList extends React.Component<Props, State> {
     };
   }
 
+  remove = (_id?: string) => {
+    if (_id) {
+      this.props.deleteUnits([_id], () => this.setState({ selectedItems: [] }));
+    } else {
+      this.props.deleteUnits(this.state.selectedItems, () =>
+        this.setState({ selectedItems: [] })
+      );
+    }
+  };
+
   renderForm() {
-    const trigger = <Button btnStyle="success">{__('Add Unit')}</Button>;
+    const trigger = (
+      <Button btnStyle="success" icon="plus-circle">
+        {__('Add Unit')}
+      </Button>
+    );
 
     const content = ({ closeModal }) => <Form closeModal={closeModal} />;
 
@@ -104,6 +119,14 @@ class MainList extends React.Component<Props, State> {
     };
 
     const trigger = (
+      <Button btnStyle="link">
+        <Tip text={__('Edit')} placement="top">
+          <Icon icon="edit-3" />
+        </Tip>
+      </Button>
+    );
+
+    return (
       <tr key={unit._id}>
         <td onClick={onclick}>
           <FormControl
@@ -117,19 +140,27 @@ class MainList extends React.Component<Props, State> {
         <td>{__(unit?.supervisor?.email)}</td>
         <td>{__(unit?.department?.title || '')}</td>
         <td>{unit.userIds?.length || 0}</td>
+        <td>
+          <ActionButtons>
+            <ModalTrigger
+              key={unit._id}
+              title="Edit Unit"
+              content={({ closeModal }) => (
+                <Form closeModal={closeModal} unit={unit} />
+              )}
+              trigger={trigger}
+            />
+            <Tip text={__('Delete')} placement="top">
+              <Button
+                btnStyle="link"
+                onClick={() => this.remove(unit._id)}
+                icon="times-circle"
+              />
+            </Tip>
+          </ActionButtons>
+        </td>
       </tr>
     );
-
-    return (
-      <ModalTrigger
-        key={unit._id}
-        title="Edit Unit"
-        content={({ closeModal }) => (
-          <Form closeModal={closeModal} unit={unit} />
-        )}
-        trigger={trigger}
-      />
-    );
   }
 
   renderContent() {
@@ -164,6 +195,7 @@ class MainList extends React.Component<Props, State> {
             <th>{__('Supervisor')}</th>
             <th>{__('Department')}</th>
             <th>{__('Team member count')}</th>
+            <th>{__('Actions')}</th>
           </tr>
         </thead>
         <tbody>{(units || []).map(unit => this.renderRow(unit))}</tbody>
@@ -171,39 +203,28 @@ class MainList extends React.Component<Props, State> {
     );
   }
   render() {
-    const { listQuery, deleteUnits } = this.props;
+    const { listQuery } = this.props;
 
-    const { totalCount, totalUsersCount } = listQuery.unitsMain;
+    const { totalCount } = listQuery.unitsMain;
 
     const { selectedItems } = this.state;
 
-    const remove = () => {
-      deleteUnits(selectedItems, () => this.setState({ selectedItems: [] }));
-    };
-
     const rightActionBar = (
       <BarItems>
         {this.renderSearch()}
-        {!!selectedItems.length && (
-          <Button btnStyle="danger" onClick={remove}>
-            {__('Remove')}
-          </Button>
-        )}
         {this.renderForm()}
       </BarItems>
     );
 
-    const leftActionBar = (
-      <HeaderDescription
-        title="Units"
-        icon="/images/actions/21.svg"
-        description=""
-        renderExtra={DescriptionContentRow({
-          label: 'units',
-          totalCount: totalCount,
-          teamMembersCount: totalUsersCount
-        })}
-      />
+    const leftActionBar = selectedItems.length > 0 && (
+      <Button
+        btnStyle="danger"
+        size="small"
+        icon="times-circle"
+        onClick={() => this.remove()}
+      >
+        Remove
+      </Button>
     );
 
     return (
@@ -231,6 +252,7 @@ class MainList extends React.Component<Props, State> {
         }
         leftSidebar={<SettingsSideBar />}
         footer={<Pagination count={totalCount} />}
+        hasBorder={true}
       />
     );
   }
diff --git a/packages/core-ui/src/modules/settings/team/containers/branch/MainList.tsx b/packages/core-ui/src/modules/settings/team/containers/branch/MainList.tsx
index 68d90d6e7b..a72290aece 100644
--- a/packages/core-ui/src/modules/settings/team/containers/branch/MainList.tsx
+++ b/packages/core-ui/src/modules/settings/team/containers/branch/MainList.tsx
@@ -44,15 +44,7 @@ class MainList extends React.Component<FinalProps> {
           .mutate({
             mutation: gql(mutations.branchesRemove),
             variables: { ids },
-            refetchQueries: [
-              {
-                query: gql(queries.branches),
-                variables: {
-                  withoutUserFilter: true,
-                  searchValue: undefined
-                }
-              }
-            ]
+            refetchQueries: ['branchesMain']
           })
           .then(() => {
             callback();
diff --git a/packages/core-ui/src/modules/settings/team/containers/common/SettingSideBar.tsx b/packages/core-ui/src/modules/settings/team/containers/common/SettingSideBar.tsx
new file mode 100644
index 0000000000..d604848d24
--- /dev/null
+++ b/packages/core-ui/src/modules/settings/team/containers/common/SettingSideBar.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import * as compose from 'lodash.flowright';
+import { withProps } from '@erxes/ui/src/utils/core';
+import { graphql } from '@apollo/client/react/hoc';
+import { gql } from '@apollo/client';
+import { queries } from '@erxes/ui/src/team/graphql';
+import {
+  BranchesMainQueryResponse,
+  DepartmentsMainQueryResponse,
+  UnitsMainQueryResponse
+} from '@erxes/ui/src/team/types';
+import { EmptyState, Spinner } from '@erxes/ui/src';
+import SettingsSideBar from '../../components/common/SettingsSideBar';
+
+type FinalProps = {
+  branchListQuery: BranchesMainQueryResponse;
+  unitListQuery: UnitsMainQueryResponse;
+  departmentListQuery: DepartmentsMainQueryResponse;
+};
+
+class SettingsSideBarContainer extends React.Component<FinalProps> {
+  render() {
+    const { branchListQuery, unitListQuery, departmentListQuery } = this.props;
+
+    if (
+      branchListQuery.loading ||
+      unitListQuery.loading ||
+      departmentListQuery.loading
+    ) {
+      return <Spinner />;
+    }
+
+    if (
+      branchListQuery.error ||
+      unitListQuery.error ||
+      departmentListQuery.error
+    ) {
+      return (
+        <EmptyState image="/images/actions/5.svg" text="Something went wrong" />
+      );
+    }
+
+    return (
+      <SettingsSideBar
+        branchTotalCount={branchListQuery.branchesMain.totalCount}
+        unitTotalCount={unitListQuery.unitsMain.totalCount}
+        departmentTotalCount={departmentListQuery.departmentsMain.totalCount}
+      />
+    );
+  }
+}
+
+export default withProps<{}>(
+  compose(
+    graphql<{}>(gql(queries.branchesMain), {
+      name: 'branchListQuery',
+      options: () => ({
+        variables: {
+          withoutUserFilter: true
+        }
+      })
+    }),
+    graphql<{}>(gql(queries.unitsMain), {
+      name: 'unitListQuery',
+      options: () => ({
+        variables: {
+          withoutUserFilter: true
+        }
+      })
+    }),
+    graphql<{}>(gql(queries.departmentsMain), {
+      name: 'departmentListQuery',
+      options: () => ({
+        variables: {
+          withoutUserFilter: true
+        }
+      })
+    })
+  )(SettingsSideBarContainer)
+);
diff --git a/packages/core-ui/src/modules/settings/team/containers/department/MainList.tsx b/packages/core-ui/src/modules/settings/team/containers/department/MainList.tsx
index d7ced59db8..5934f82874 100644
--- a/packages/core-ui/src/modules/settings/team/containers/department/MainList.tsx
+++ b/packages/core-ui/src/modules/settings/team/containers/department/MainList.tsx
@@ -10,6 +10,7 @@ import MainListCompoenent from '../../components/department/MainList';
 import { Alert, confirm } from '@erxes/ui/src/utils';
 import client from '@erxes/ui/src/apolloClient';
 import { generatePaginationParams } from '@erxes/ui/src/utils/router';
+
 type Props = {
   queryParams: any;
   history: any;
diff --git a/packages/core-ui/src/modules/settings/team/containers/structure/Box.tsx b/packages/core-ui/src/modules/settings/team/containers/structure/Box.tsx
index dccbcec294..0de4a47c39 100644
--- a/packages/core-ui/src/modules/settings/team/containers/structure/Box.tsx
+++ b/packages/core-ui/src/modules/settings/team/containers/structure/Box.tsx
@@ -5,7 +5,6 @@ import { useQuery } from '@apollo/client';
 import { queries } from '@erxes/ui/src/team/graphql';
 import StructureBox from '../../components/structure/Box';
 
-import Box from '@erxes/ui/src/components/Box';
 import Spinner from '@erxes/ui/src/components/Spinner';
 import ErrorMsg from '@erxes/ui/src/components/ErrorMsg';
 import { __ } from 'modules/common/utils';
@@ -25,11 +24,9 @@ export default function BoxContainer() {
 
   if (error) {
     return (
-      <Box isOpen={true} title={__('Structure')} name="showStructure">
-        <MenuFooter>
-          <ErrorMsg>{error.message}</ErrorMsg>
-        </MenuFooter>
-      </Box>
+      <MenuFooter>
+        <ErrorMsg>{error.message}</ErrorMsg>
+      </MenuFooter>
     );
   }
 
diff --git a/packages/core-ui/src/modules/settings/team/containers/unit/Form.tsx b/packages/core-ui/src/modules/settings/team/containers/unit/Form.tsx
index 12756aa639..4b7d9cfb86 100644
--- a/packages/core-ui/src/modules/settings/team/containers/unit/Form.tsx
+++ b/packages/core-ui/src/modules/settings/team/containers/unit/Form.tsx
@@ -32,11 +32,7 @@ const FormContainer = (props: Props) => {
     return (
       <ButtonMutate
         mutation={object._id ? mutations.unitsEdit : mutations.unitsAdd}
-        refetchQueries={[
-          {
-            query: gql(queries.units)
-          }
-        ]}
+        refetchQueries={['unitsMain']}
         variables={values}
         isSubmitted={isSubmitted}
         type="submit"
diff --git a/packages/core-ui/src/modules/settings/team/containers/unit/MainList.tsx b/packages/core-ui/src/modules/settings/team/containers/unit/MainList.tsx
index 0b63b20c7a..9925999166 100644
--- a/packages/core-ui/src/modules/settings/team/containers/unit/MainList.tsx
+++ b/packages/core-ui/src/modules/settings/team/containers/unit/MainList.tsx
@@ -42,15 +42,7 @@ class MainList extends React.Component<FinalProps> {
           .mutate({
             mutation: gql(mutations.unitsRemove),
             variables: { ids },
-            refetchQueries: [
-              {
-                query: gql(queries.units),
-                variables: {
-                  withoutUserFilter: true,
-                  searchValue: undefined
-                }
-              }
-            ]
+            refetchQueries: ['unitsMain']
           })
           .then(() => {
             callback();
diff --git a/packages/core-ui/src/modules/settings/team/styles.ts b/packages/core-ui/src/modules/settings/team/styles.ts
index 82fba0a31f..e2b6493c9d 100644
--- a/packages/core-ui/src/modules/settings/team/styles.ts
+++ b/packages/core-ui/src/modules/settings/team/styles.ts
@@ -11,10 +11,8 @@ const ButtonContainer = styled.div`
 
 const FlexRow = styled.div`
   display: flex;
-  margin-bottom: ${dimensions.unitSpacing}px;
-  padding: 5px 30px 5px 0;
+  flex-direction: column;
   position: relative;
-  align-items: center;
 
   > label {
     margin: 0;
@@ -25,12 +23,6 @@ const FlexRow = styled.div`
   > *:first-child,
   input {
     margin-right: ${dimensions.unitSpacing}px;
-    flex: 3;
-  }
-
-  > *:nth-child(2),
-  > div {
-    flex: 2;
   }
 `;
 
@@ -111,8 +103,25 @@ const StructureList = styled(SidebarList)`
   }
 `;
 
-let DescriptionContent = styled.div`
+const StructureEditButton = styled.div`
+  cursor: pointer;
+  padding: 10px;
+  color: ${colors.textSecondary};
+
+  &:hover {
+    color: ${colors.textPrimary};
+  }
+`;
+
+const DescriptionContent = styled.div`
   text-align: center;
+  display: flex;
+
+  h4 {
+    margin-left: 8px;
+    font-size: 16px;
+    padding-bottom: 0;
+  }
 `;
 
 export {
@@ -124,5 +133,6 @@ export {
   FormTable,
   SideList,
   StructureList,
-  DescriptionContent
+  DescriptionContent,
+  StructureEditButton
 };
diff --git a/packages/core/src/private/emailTemplates/conversationCron.html b/packages/core/src/private/emailTemplates/conversationCron.html
index fe2a96cf74..38e6ac56e8 100644
--- a/packages/core/src/private/emailTemplates/conversationCron.html
+++ b/packages/core/src/private/emailTemplates/conversationCron.html
@@ -102,7 +102,7 @@
                                     <tbody>
                                         <tr>
                                             <td style="word-break:break-word;font-size:0px;" align="center">
-                                                <div style="position: relative; background:#5629b6;padding-bottom: 20px;border-radius: 10px 10px 0 0;">
+                                                <div style="position: relative; background:#000000;padding-bottom: 20px;border-radius: 10px 10px 0 0;">
                                                     <table align="center" border="0">
                                                         <tr>
                                                           <td width="80px"></td>
@@ -168,7 +168,7 @@
         <tr>
           <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
       <![endif]-->
-    <div style="margin:0 auto;max-width:600px;background:#fafafa;      font-family: Helvetica, sans-serif;     border-radius: 0 0 10px 10px; padding-top: 40px;">
+    <div style="margin:0 auto;max-width:600px;background:#fafafa;      font-family: Helvetica, sans-serif;     border-radius: 0 0 10px 10px;">
         <table role="presentation" cellpadding="0" cellspacing="0" style="border-radius: 0 0 10px 10px;font-size:0px;width:100%;background:#fafafa;" align="center" border="0">
             <tbody>
                 <tr>
@@ -351,7 +351,7 @@
               font-size: 12px;    font-family: Helvetica Neue;
               font-weight: 300;"
         >
-          Copyright © 2020
+          Copyright © 2023
           <a style="color:#ccc; text-decoration: none;" target="_blank" href="https://erxes.io">erxes Inc</a>. All rights
           reserved.
         </td>
diff --git a/packages/erxes-ui/src/components/HeaderDescription.tsx b/packages/erxes-ui/src/components/HeaderDescription.tsx
index 9233c0bdb0..6243411168 100644
--- a/packages/erxes-ui/src/components/HeaderDescription.tsx
+++ b/packages/erxes-ui/src/components/HeaderDescription.tsx
@@ -81,8 +81,8 @@ class HeaderDescription extends React.PureComponent<Props, State> {
           <span>
             <h4>{__(title)}</h4>
             {this.state.expand && __(description)}
+            {this.state.expand && renderExtra && renderExtra}
           </span>
-          {this.state.expand && renderExtra && renderExtra}
         </Description>
         <Button btnStyle="link" onClick={this.onClick}>
           <Tip
diff --git a/packages/erxes-ui/src/layout/styles.ts b/packages/erxes-ui/src/layout/styles.ts
index 2395072a82..c14c87b68d 100644
--- a/packages/erxes-ui/src/layout/styles.ts
+++ b/packages/erxes-ui/src/layout/styles.ts
@@ -127,9 +127,10 @@ const ContenFooter = styled.div`
   }
 `;
 
-const HeaderItems = styledTS<{ rightAligned?: boolean; hasFlex?: boolean }>(
-  styled.div
-)`
+const HeaderItems = styledTS<{
+  rightAligned?: boolean;
+  hasFlex?: boolean;
+}>(styled.div)`
   align-self: center;
   flex: ${props => props.hasFlex && 1};
   margin-left: ${props => props.rightAligned && 'auto'};
diff --git a/packages/erxes-ui/src/styles/global-styles.ts b/packages/erxes-ui/src/styles/global-styles.ts
index 5c791dea43..62b6cff952 100644
--- a/packages/erxes-ui/src/styles/global-styles.ts
+++ b/packages/erxes-ui/src/styles/global-styles.ts
@@ -731,6 +731,20 @@ a:hover {
 
 /* react datetime */
 
+.rdt input {
+  border: none;
+  padding: 0;
+  border-radius: 0;
+  box-shadow: none !important;
+  border-bottom: 1px solid;
+  border-color: #DDD;
+  background: transparent;
+}
+
+.rdt input:hover {
+  border-color: #AAA;
+}
+
 .rdtPicker {
   box-shadow: 0 5px 15px -3px rgba(0, 0, 0, 0.15) !important;
   width: 100%;
diff --git a/packages/gateway/Dockerfile b/packages/gateway/Dockerfile
index 9dfed26c1c..66f77cb588 100644
--- a/packages/gateway/Dockerfile
+++ b/packages/gateway/Dockerfile
@@ -5,7 +5,7 @@ RUN apt-get update -y && apt-get install -y \
     ca-certificates \
     && rm -rf /var/lib/apt/lists/*
 
-RUN yarn global add @apollo/rover
+RUN yarn global add @apollo/rover@0.19.1
 RUN yarn cache clean
 
 WORKDIR /erxes-gateway
diff --git a/packages/gateway/package.json b/packages/gateway/package.json
index e493d97728..9b2ac0a377 100644
--- a/packages/gateway/package.json
+++ b/packages/gateway/package.json
@@ -36,7 +36,7 @@
     "yaml": "^1.10.2"
   },
   "devDependencies": {
-    "@apollo/rover": "^0.13.0",
+    "@apollo/rover": "0.19.1",
     "@types/cookie-parser": "^1.4.2",
     "@types/cors": "^2.8.4",
     "@types/express": "^4.16.0",
diff --git a/packages/gateway/src/apollo-router/index.ts b/packages/gateway/src/apollo-router/index.ts
index b352bbb70b..e9028cd0c7 100644
--- a/packages/gateway/src/apollo-router/index.ts
+++ b/packages/gateway/src/apollo-router/index.ts
@@ -24,17 +24,16 @@ const {
   APOLLO_ROUTER_PORT
 } = process.env;
 
-// let _apolloRouterPort: number | undefined;
-// export const getApolloRouterPort = async (): Promise<number> => {
-// if(!_apolloRouterPort) {
-//   _apolloRouterPort = Number(APOLLO_ROUTER_PORT) || (await getPort());
-// }
-// if(!_apolloRouterPort){
-//   throw new Error("Cannot find free port for Apollo Router");
-// }
-// console.log("router port ", _apolloRouterPort);
-// return _apolloRouterPort;
-// }
+let routerProcess: ChildProcess | undefined = undefined;
+
+export const stopRouter = (sig: NodeJS.Signals) => {
+  if (!routerProcess) {
+    return;
+  }
+  try { routerProcess.kill(sig); } catch (e) {
+    console.error(e);
+  }
+};
 
 export const apolloRouterPort = Number(APOLLO_ROUTER_PORT) || 50_000;
 
@@ -97,32 +96,16 @@ const createRouterConfig = async () => {
   fs.writeFileSync(routerConfigPath, yaml.stringify(config));
 };
 
-const startRouter = async (
+export const startRouter = async (
   proxyTargets: ErxesProxyTarget[]
-): Promise<ChildProcess> => {
+) => {
   await supergraphCompose(proxyTargets);
   await createRouterConfig();
   await downloadRouter();
 
   const devOptions = ['--dev', '--hot-reload'];
 
-  console.log(
-    '-------------------------------routerConfigPath--------------------------------'
-  );
-  console.log([
-    ...(NODE_ENV === 'development' ? devOptions : []),
-    '--log',
-    NODE_ENV === 'development' ? 'warn' : 'error',
-    `--supergraph`,
-    supergraphPath,
-    `--config`,
-    routerConfigPath
-  ]);
-  console.log(
-    '----------------------------------------------------------------------'
-  );
-
-  const routerProcess = spawn(
+  routerProcess = spawn(
     routerPath,
     [
       ...(NODE_ENV === 'development' ? devOptions : []),
@@ -133,10 +116,6 @@ const startRouter = async (
       `--config`,
       routerConfigPath
     ],
-    { stdio: 'inherit' }
+    { stdio: 'pipe' }
   );
-
-  return routerProcess;
 };
-
-export default startRouter;
diff --git a/packages/gateway/src/index.ts b/packages/gateway/src/index.ts
index 937009a65f..642776bb5e 100644
--- a/packages/gateway/src/index.ts
+++ b/packages/gateway/src/index.ts
@@ -20,10 +20,8 @@ import {
   applyProxiesCoreless,
   applyProxyToCore
 } from './proxy/create-middleware';
-import apolloRouter from './apollo-router';
-import { ChildProcess } from 'child_process';
-import { startSubscriptionServer } from './subscription';
-import { Disposable } from 'graphql-ws';
+import { startRouter, stopRouter } from './apollo-router';
+import { startSubscriptionServer, stopSubscriptionServer } from './subscription';
 import { publishRefreshEnabledServices } from '@erxes/api-utils/src/serviceDiscovery';
 
 const {
@@ -38,18 +36,6 @@ const {
   SENTRY_DSN
 } = process.env;
 
-let apolloRouterProcess: ChildProcess | undefined = undefined;
-let subscriptionServer: Disposable | undefined = undefined;
-
-const stopRouter = () => {
-  if (!apolloRouterProcess) {
-    return;
-  }
-  try {
-    apolloRouterProcess.kill('SIGKILL');
-  } catch (e) {}
-};
-
 (async () => {
   const app = express();
 
@@ -103,7 +89,7 @@ const stopRouter = () => {
 
   const targets: ErxesProxyTarget[] = await retryGetProxyTargets();
 
-  apolloRouterProcess = await apolloRouter(targets);
+  await startRouter(targets);
 
   await applyProxiesCoreless(app, targets);
 
@@ -120,7 +106,7 @@ const stopRouter = () => {
     }
   });
 
-  subscriptionServer = await startSubscriptionServer(httpServer);
+  await startSubscriptionServer(httpServer);
 
   // Why are we parsing the body twice? When we don't use the body
   app.use(
@@ -152,15 +138,13 @@ const stopRouter = () => {
     console.log(`Exiting on signal ${sig}`);
     if (NODE_ENV === 'development') {
       try {
-        publishRefreshEnabledServices();
-      } catch (e) {}
-    }
-    if (subscriptionServer) {
-      try {
-        subscriptionServer.dispose();
-      } catch (e) {}
+        await publishRefreshEnabledServices();
+      } catch (e) {
+        console.error(e);
+      }
     }
-    await stopRouter();
+    await stopSubscriptionServer();
+    await stopRouter(sig);
     process.exit(0);
   });
 });
diff --git a/packages/gateway/src/subscription/index.ts b/packages/gateway/src/subscription/index.ts
index a93947d860..58831bc64c 100644
--- a/packages/gateway/src/subscription/index.ts
+++ b/packages/gateway/src/subscription/index.ts
@@ -20,7 +20,17 @@ import { makeExecutableSchema } from '@graphql-tools/schema';
 import { apolloRouterPort } from '../apollo-router';
 import { gql } from '@apollo/client/core';
 
-let disposable: Disposable;
+let disposable: Disposable | undefined;
+
+export async function stopSubscriptionServer() {
+  if (disposable) {
+    try {
+      await disposable.dispose();
+    } catch (e) {
+      console.error(e);
+    }
+  }
+}
 
 export function makeSubscriptionSchema({ typeDefs, resolvers }: any) {
   if (!typeDefs || !resolvers) {
@@ -43,7 +53,7 @@ export function makeSubscriptionSchema({ typeDefs, resolvers }: any) {
 
 export async function startSubscriptionServer(
   httpServer: http.Server
-): Promise<Disposable | undefined> {
+) {
   const wsServer = new ws.Server({
     server: httpServer,
     path: '/graphql'
@@ -62,15 +72,7 @@ export async function startSubscriptionServer(
     resolvers
   });
 
-  if (disposable) {
-    try {
-      await disposable.dispose();
-    } catch (e) {
-      console.error(e);
-    }
-  }
-
-  // const apolloRouterPort = await getApolloRouterPort();
+  await stopSubscriptionServer();
 
   disposable = useServer(
     {
@@ -120,6 +122,4 @@ export async function startSubscriptionServer(
     },
     wsServer
   );
-
-  return disposable;
 }
diff --git a/packages/ui-forms/src/settings/properties/components/GenerateCustomFields.tsx b/packages/ui-forms/src/settings/properties/components/GenerateCustomFields.tsx
index cdac0bf5cd..b20195b6d5 100644
--- a/packages/ui-forms/src/settings/properties/components/GenerateCustomFields.tsx
+++ b/packages/ui-forms/src/settings/properties/components/GenerateCustomFields.tsx
@@ -193,7 +193,7 @@ class GenerateGroup extends React.Component<Props, State> {
     this.setState({ data, editing: true });
   };
 
-  renderButtons() {
+  renderButtons(isModal?: boolean) {
     if (!this.state.editing) {
       return null;
     }
@@ -207,9 +207,18 @@ class GenerateGroup extends React.Component<Props, State> {
         >
           Discard
         </Button>
-        <Button btnStyle="success" onClick={this.save} icon="check-circle">
-          Save
-        </Button>
+        <div>
+          {this.props.fieldGroup.isMultiple && isModal && (
+            <Tip placement="top" text="Add Group Input">
+              <Button btnStyle="primary" onClick={this.onAddGroupInput}>
+                <Icon icon="plus-circle" />
+              </Button>
+            </Tip>
+          )}
+          <Button btnStyle="success" onClick={this.save} icon="check-circle">
+            Save
+          </Button>
+        </div>
       </Sidebar.Footer>
     );
   }
@@ -441,28 +450,13 @@ class GenerateGroup extends React.Component<Props, State> {
     });
   }
 
-  modalContent = (fieldGroup: IFieldGroup) => {
-    let extraButtons = <></>;
-    if (fieldGroup.isMultiple) {
-      extraButtons = (
-        <Tip placement="top" text="Add Group Input">
-          <button onClick={this.onAddGroupInput}>
-            <Icon icon="plus-circle" />
-          </button>
-        </Tip>
-      );
-    }
+  modalContent = () => {
     return (
-      <Box
-        extraButtons={extraButtons}
-        title={fieldGroup.name}
-        name="showCustomFields"
-        isOpen={true}
-      >
+      <>
         {this.renderContent()}
-        {this.renderButtons()}
+        {this.renderButtons(true)}
         {this.renderChildGroups()}
-      </Box>
+      </>
     );
   };
 
@@ -489,12 +483,12 @@ class GenerateGroup extends React.Component<Props, State> {
         <>
           {
             <ModalTrigger
-              title={'Edit'}
+              title={fieldGroup.name}
               trigger={
                 <Icon icon="expand-arrows-alt" style={{ cursor: 'pointer' }} />
               }
-              size="xl"
-              content={() => this.modalContent(fieldGroup)}
+              content={() => this.modalContent()}
+              paddingContent="less-padding"
             />
           }
           <Tip placement="top" text="Add Group Input">
@@ -508,12 +502,12 @@ class GenerateGroup extends React.Component<Props, State> {
     if (!fieldGroup.isMultiple) {
       extraButtons = (
         <ModalTrigger
-          title={'Edit'}
+          title={fieldGroup.name}
           trigger={
             <Icon icon="expand-arrows-alt" style={{ cursor: 'pointer' }} />
           }
-          size="xl"
-          content={() => this.modalContent(fieldGroup)}
+          content={() => this.modalContent()}
+          paddingContent="less-padding"
         />
       );
     }
diff --git a/packages/ui-inbox/src/inbox/components/AssignBox.tsx b/packages/ui-inbox/src/inbox/components/AssignBox.tsx
index 374f8a0fcc..d48c5d420f 100644
--- a/packages/ui-inbox/src/inbox/components/AssignBox.tsx
+++ b/packages/ui-inbox/src/inbox/components/AssignBox.tsx
@@ -151,7 +151,7 @@ class AssignBox extends React.Component<Props, State> {
     const links = [
       {
         title: __('Remove assignee'),
-        href: '#',
+        href: window.location.pathname + window.location.search,
         onClick: this.removeAssignee
       }
     ];
diff --git a/yarn.lock b/yarn.lock
index 2efa8025e8..189b2c200b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -81,10 +81,10 @@
     "@types/long" "^4.0.0"
     long "^4.0.0"
 
-"@apollo/rover@^0.13.0":
-  version "0.13.0"
-  resolved "https://registry.npmjs.org/@apollo/rover/-/rover-0.13.0.tgz"
-  integrity sha512-G2fd8I586ZhmfMu1nzAadi1ajBoG9dofPo219ekQnHNyNYRHGw0RVhCEWrCPfWP1qZDu1rukPdLB84NkNU159A==
+"@apollo/rover@0.19.1":
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/@apollo/rover/-/rover-0.19.1.tgz#214a15f27683f4347b1d0ef926d7aa7004977726"
+  integrity sha512-bWsV25qXTWabJuufuMBxB3Aw5+F89N+XyUTPmH16qgKlIHJGizTAyWzl8InRkDnEdxK9MRx7BZMQVAfXlr+hug==
   dependencies:
     axios-proxy-builder "^0.1.1"
     binary-install "^1.0.6"