diff --git a/src/locales/index.ts b/src/locales/index.ts
index ff6197e0b..8a05351b7 100644
--- a/src/locales/index.ts
+++ b/src/locales/index.ts
@@ -1,3 +1,4 @@
+// tslint:disable
 const en = require('./en.json');
 const mn = require('./mn.json');
 
diff --git a/src/modules/auth/routes.tsx b/src/modules/auth/routes.tsx
index 573a7acea..34a4f0ab1 100755
--- a/src/modules/auth/routes.tsx
+++ b/src/modules/auth/routes.tsx
@@ -4,39 +4,29 @@ import { Route } from 'react-router-dom';
 import { AuthLayout } from '../layout/components';
 import { ForgotPassword, ResetPassword, SignIn } from './containers';
 
-const routes = () => (
-  <React.Fragment>
-    <Route
-      path="/"
-      component={() => {
-        return <AuthLayout content={<SignIn />} />;
-      }}
-    />
+const routes = () => {
+  const home = () => <AuthLayout content={<SignIn />} />;
+  const signIn = () => <AuthLayout content={<SignIn />} />;
+  const forgotPassword = () => <AuthLayout content={<ForgotPassword />} />;
 
-    <Route
-      path="/sign-in"
-      component={() => {
-        return <AuthLayout content={<SignIn />} />;
-      }}
-    />
+  const resetPassword = ({ location }) => {
+    const parsed = queryString.parse(location.search);
+    return (
+      <AuthLayout content={<ResetPassword token={parsed.token || ''} />} />
+    );
+  };
 
-    <Route
-      path="/forgot-password"
-      component={() => {
-        return <AuthLayout content={<ForgotPassword />} />;
-      }}
-    />
+  return (
+    <React.Fragment>
+      <Route path="/" component={home} />
 
-    <Route
-      path="/reset-password"
-      component={({ location }) => {
-        const parsed = queryString.parse(location.search);
-        return (
-          <AuthLayout content={<ResetPassword token={parsed.token || ''} />} />
-        );
-      }}
-    />
-  </React.Fragment>
-);
+      <Route path="/sign-in" component={signIn} />
+
+      <Route path="/forgot-password" component={forgotPassword} />
+
+      <Route path="/reset-password" component={resetPassword} />
+    </React.Fragment>
+  );
+};
 
 export default routes;
diff --git a/src/modules/common/components/Chooser.tsx b/src/modules/common/components/Chooser.tsx
index a54b68cc7..c14f81786 100644
--- a/src/modules/common/components/Chooser.tsx
+++ b/src/modules/common/components/Chooser.tsx
@@ -46,7 +46,6 @@ class CommonChooser extends React.Component<Props, State> {
     };
 
     this.onSelect = this.onSelect.bind(this);
-    this.handleChange = this.handleChange.bind(this);
     this.search = this.search.bind(this);
     this.loadMore = this.loadMore.bind(this);
   }
@@ -105,7 +104,7 @@ class CommonChooser extends React.Component<Props, State> {
     }
 
     return (
-      <li key={data._id} onClick={() => this.handleChange(icon, data)}>
+      <li key={data._id} onClick={this.handleChange.bind(this, icon, data)}>
         {this.props.renderName(data)}
         <Icon icon={icon} />
       </li>
@@ -125,7 +124,7 @@ class CommonChooser extends React.Component<Props, State> {
   }
 
   render() {
-    const { renderForm, datas, title, data } = this.props;
+    const { renderForm, datas, title, data, closeModal } = this.props;
     const selectedDatas = this.state.datas;
 
     const addTrigger = (
@@ -141,7 +140,7 @@ class CommonChooser extends React.Component<Props, State> {
           <Column>
             <FormControl
               placeholder={__('Type to search')}
-              onChange={e => this.search(e)}
+              onChange={this.search}
             />
             <ul>
               {datas.map(dataItem => this.renderRow(dataItem, 'add'))}
@@ -177,11 +176,7 @@ class CommonChooser extends React.Component<Props, State> {
               content={renderForm}
             />
             <div>
-              <Button
-                btnStyle="simple"
-                onClick={() => this.props.closeModal()}
-                icon="cancel-1"
-              >
+              <Button btnStyle="simple" onClick={closeModal} icon="cancel-1">
                 Cancel
               </Button>
               <Button
diff --git a/src/modules/common/components/CountsByTag.tsx b/src/modules/common/components/CountsByTag.tsx
index 23e330260..68dcc1acb 100755
--- a/src/modules/common/components/CountsByTag.tsx
+++ b/src/modules/common/components/CountsByTag.tsx
@@ -17,6 +17,10 @@ interface IProps extends IRouterProps {
 function CountsByTag({ history, tags, counts, manageUrl, loading }: IProps) {
   const { Section } = Wrapper.Sidebar;
 
+  const onClick = () => {
+    router.setParams(history, { tag: null });
+  };
+
   return (
     <Section collapsible={tags.length > 5}>
       <Section.Title>{__('Filter by tags')}</Section.Title>
@@ -27,12 +31,7 @@ function CountsByTag({ history, tags, counts, manageUrl, loading }: IProps) {
         </Link>
 
         {router.getParam(history, 'tag') ? (
-          <a
-            tabIndex={0}
-            onClick={() => {
-              router.setParams(history, { tag: null });
-            }}
-          >
+          <a tabIndex={0} onClick={onClick}>
             <Icon icon="cancel-1" />
           </a>
         ) : null}
diff --git a/src/modules/common/components/DateFilter.tsx b/src/modules/common/components/DateFilter.tsx
index 21434210b..77cb0a5c0 100644
--- a/src/modules/common/components/DateFilter.tsx
+++ b/src/modules/common/components/DateFilter.tsx
@@ -121,7 +121,6 @@ class DateFilter extends React.Component<Props & ApolloClientProps, State> {
     this.renderPopover = this.renderPopover.bind(this);
     this.refetchCountQuery = this.refetchCountQuery.bind(this);
     this.renderCount = this.renderCount.bind(this);
-    this.onDateChange = this.onDateChange.bind(this);
     this.filterByDate = this.filterByDate.bind(this);
   }
 
@@ -135,8 +134,10 @@ class DateFilter extends React.Component<Props & ApolloClientProps, State> {
     }
   }
 
-  onDateChange<T extends keyof State>(type: T, date: State[T]) {
-    this.setState({ [type]: date } as Pick<State, keyof State>);
+  onDateChange<T extends keyof State>({ date }: { date: State[T] }, type: T) {
+    if (typeof date !== 'string') {
+      this.setState({ [type]: date } as Pick<State, keyof State>);
+    }
   }
 
   refetchCountQuery() {
@@ -209,11 +210,7 @@ class DateFilter extends React.Component<Props & ApolloClientProps, State> {
               <Datetime
                 {...props}
                 value={this.state.startDate}
-                onChange={date => {
-                  if (typeof date !== 'string') {
-                    this.onDateChange('startDate', date.toDate());
-                  }
-                }}
+                onChange={this.onDateChange.bind(this, 'startDate')}
               />
             </FlexItem>
 
@@ -221,11 +218,7 @@ class DateFilter extends React.Component<Props & ApolloClientProps, State> {
               <Datetime
                 {...props}
                 value={this.state.endDate}
-                onChange={date => {
-                  if (typeof date !== 'string') {
-                    this.onDateChange('endDate', date.toDate());
-                  }
-                }}
+                onChange={this.onDateChange.bind(this, 'endDate')}
               />
             </FlexItem>
           </FlexRow>
@@ -233,7 +226,7 @@ class DateFilter extends React.Component<Props & ApolloClientProps, State> {
           {this.renderCount()}
 
           <FlexRow>
-            <Button btnStyle="simple" onClick={() => this.filterByDate()}>
+            <Button btnStyle="simple" onClick={this.filterByDate}>
               Filter
             </Button>
           </FlexRow>
diff --git a/src/modules/common/components/FilterByParams.tsx b/src/modules/common/components/FilterByParams.tsx
index 023923969..e1309a2dc 100644
--- a/src/modules/common/components/FilterByParams.tsx
+++ b/src/modules/common/components/FilterByParams.tsx
@@ -48,6 +48,12 @@ class FilterByParams extends React.Component<IProps, State> {
     }
   }
 
+  onClick(paramKey: string, fieldId: string) {
+    const { history } = this.props;
+
+    router.setParams(history, { [paramKey]: fieldId });
+  }
+
   renderItems() {
     const { history, fields, counts, paramKey, icon, searchable } = this.props;
     const { key } = this.state;
@@ -75,9 +81,7 @@ class FilterByParams extends React.Component<IProps, State> {
                       ? 'active'
                       : ''
                   }
-                  onClick={() => {
-                    router.setParams(history, { [paramKey]: field._id });
-                  }}
+                  onClick={this.onClick.bind(this, paramKey, field._id)}
                 >
                   {icon ? (
                     <Icon icon={icon} style={{ color: field.colorCode }} />
diff --git a/src/modules/common/components/ModifiableSelect.tsx b/src/modules/common/components/ModifiableSelect.tsx
index 781f961e8..173f37ae8 100644
--- a/src/modules/common/components/ModifiableSelect.tsx
+++ b/src/modules/common/components/ModifiableSelect.tsx
@@ -5,7 +5,7 @@ import { __, Alert } from '../utils';
 
 type OptionProps = {
   option: any;
-  onSelect: (option: any[], e: any) => void;
+  onSelect: (option: any[]) => void;
 };
 
 class Option extends React.Component<OptionProps> {
@@ -19,11 +19,11 @@ class Option extends React.Component<OptionProps> {
     };
 
     return (
-      <div style={style} onClick={e => onSelect(option, e)}>
+      <div style={style} onClick={onSelect.bind(null, option)}>
         <span style={{ float: 'left' }}>{option.label}</span>
         <Icon
           style={{ float: 'right' }}
-          onClick={() => onRemove(option.value)}
+          onClick={onRemove(option.value)}
           icon="cancel-1"
         />
       </div>
@@ -80,7 +80,11 @@ class ModifiableSelect extends React.Component<Props, State> {
     return <span>{selectedOption}</span>;
   }
 
-  handleSave() {
+  handleSave(e) {
+    if (e.key !== 'Enter') {
+      return;
+    }
+
     const { options, selectedOption } = this.state;
     const { onChange } = this.props;
     const value = (document.getElementById(
@@ -157,11 +161,7 @@ class ModifiableSelect extends React.Component<Props, State> {
             <FormControl
               id="removableSelect-value"
               autoFocus={true}
-              onKeyPress={e => {
-                if (e.key === 'Enter') {
-                  this.handleSave();
-                }
-              }}
+              onKeyPress={this.handleSave}
             />
           </FormGroup>
           <Button
@@ -205,7 +205,7 @@ class ModifiableSelect extends React.Component<Props, State> {
             searchable={false}
             value={selectedOption}
             valueComponent={this.renderValue}
-            onChange={obj => this.setItem(obj)}
+            onChange={this.setItem}
             options={this.generateOptions()}
             optionComponent={Option}
           />
diff --git a/src/modules/common/components/SortHandler.tsx b/src/modules/common/components/SortHandler.tsx
index d50facc8c..472f1c9ad 100644
--- a/src/modules/common/components/SortHandler.tsx
+++ b/src/modules/common/components/SortHandler.tsx
@@ -37,13 +37,13 @@ class SortHandler extends React.Component<IProps> {
           icon="uparrow-2"
           size={7}
           isActive={this.checkSortActive(sortField, -1)}
-          onClick={() => this.sortHandler(sortField, -1)}
+          onClick={this.sortHandler.bind(this, sortField, -1)}
         />
         <Icon
           icon="downarrow"
           size={7}
           isActive={this.checkSortActive(sortField, 1)}
-          onClick={() => this.sortHandler(sortField, 1)}
+          onClick={this.sortHandler.bind(this, sortField, 1)}
         />
       </div>
     );
diff --git a/src/modules/common/components/Uploader.tsx b/src/modules/common/components/Uploader.tsx
index f55788b5a..7241df117 100644
--- a/src/modules/common/components/Uploader.tsx
+++ b/src/modules/common/components/Uploader.tsx
@@ -95,7 +95,7 @@ class Uploader extends React.Component<Props, State> {
             alt="attachment"
             src="/images/attach.svg"
             style={attachmentPreviewStyle}
-            onClick={e => this.removeAttachment(e)}
+            onClick={this.removeAttachment}
           />
         ))}
         {loading && <Spinner />}
diff --git a/src/modules/common/components/editor/Editor.tsx b/src/modules/common/components/editor/Editor.tsx
index 8256c8331..6839675d9 100755
--- a/src/modules/common/components/editor/Editor.tsx
+++ b/src/modules/common/components/editor/Editor.tsx
@@ -191,7 +191,9 @@ export class ErxesEditor extends React.Component<ErxesEditorProps> {
     this.toggleInlineStyle = this.toggleInlineStyle.bind(this);
   }
 
-  focus() {}
+  focus() {
+    return;
+  }
 
   onTab(e) {
     const { onChange, editorState } = this.props;
diff --git a/src/modules/common/components/filter/Filter.tsx b/src/modules/common/components/filter/Filter.tsx
index 01f43c6b1..18161a4ef 100644
--- a/src/modules/common/components/filter/Filter.tsx
+++ b/src/modules/common/components/filter/Filter.tsx
@@ -28,7 +28,7 @@ function Filter({ queryParams = {}, history }: IProps) {
     }
 
     return (
-      <Chip onClickClose={() => onClickClose([paramKey])}>
+      <Chip onClickClose={onClickClose.bind(null, [paramKey])}>
         {bool ? paramKey : queryParams[paramKey]}
       </Chip>
     );
@@ -53,7 +53,7 @@ function Filter({ queryParams = {}, history }: IProps) {
       const ChipText = createChipText(graphqlQuery, id);
 
       return (
-        <Chip normal={true} onClickClose={() => onClickClose([paramKey])}>
+        <Chip normal={true} onClickClose={onClickClose.bind(null, [paramKey])}>
           <ChipText />
         </Chip>
       );
@@ -67,7 +67,7 @@ function Filter({ queryParams = {}, history }: IProps) {
       return (
         <Chip
           normal={true}
-          onClickClose={() => onClickClose(['startDate', 'endDate'])}
+          onClickClose={onClickClose.bind(null, ['startDate', 'endDate'])}
         >
           {queryParams.startDate} - {queryParams.endDate}
         </Chip>
diff --git a/src/modules/common/components/filterableList/FilterableList.tsx b/src/modules/common/components/filterableList/FilterableList.tsx
index 15631997d..cb3df9f67 100755
--- a/src/modules/common/components/filterableList/FilterableList.tsx
+++ b/src/modules/common/components/filterableList/FilterableList.tsx
@@ -88,9 +88,7 @@ class FilterableList extends React.Component<Props, State> {
         <li
           key={item._id}
           className={showCheckmark ? item.selectedBy : ''}
-          onClick={() => {
-            this.toggleItem(item._id);
-          }}
+          onClick={this.toggleItem.bind(this, item._id)}
         >
           {item.iconClass ? (
             <i
diff --git a/src/modules/common/components/form/Textarea.tsx b/src/modules/common/components/form/Textarea.tsx
index cd397a820..aa2d0c3e6 100644
--- a/src/modules/common/components/form/Textarea.tsx
+++ b/src/modules/common/components/form/Textarea.tsx
@@ -38,15 +38,17 @@ class Textarea extends React.Component<Props> {
     }
   }
 
+  setArea({ area }) {
+    this.area = area;
+  }
+
   render() {
     const { maxHeight, ...props } = this.props;
 
     return (
       <TextArea
         {...props}
-        innerRef={area => {
-          this.area = area;
-        }}
+        innerRef={this.setArea}
         maxHeight={maxHeight}
         onChange={this.onChange}
       />
diff --git a/src/modules/common/components/pagination/PerPageChooser.tsx b/src/modules/common/components/pagination/PerPageChooser.tsx
index a2dc6c27c..15c7244a1 100644
--- a/src/modules/common/components/pagination/PerPageChooser.tsx
+++ b/src/modules/common/components/pagination/PerPageChooser.tsx
@@ -17,7 +17,7 @@ const PerPageChooser = ({ history }: IRouterProps) => {
   const renderOption = n => {
     return (
       <Option>
-        <a onClick={() => onClick(n)}>{n}</a>
+        <a onClick={onClick.bind(null, n)}>{n}</a>
       </Option>
     );
   };
diff --git a/src/modules/common/components/step/Step.tsx b/src/modules/common/components/step/Step.tsx
index 327bc68bd..3ee3c2052 100644
--- a/src/modules/common/components/step/Step.tsx
+++ b/src/modules/common/components/step/Step.tsx
@@ -34,7 +34,7 @@ class Step extends React.Component<Props> {
           btnStyle="success"
           size="small"
           icon="checked-1"
-          onClick={e => save('save', e)}
+          onClick={save.bind(this, 'save')}
         >
           Save
         </Button>
@@ -48,7 +48,7 @@ class Step extends React.Component<Props> {
             btnStyle="warning"
             size="small"
             icon="rightarrow-2"
-            onClick={e => save('draft', e)}
+            onClick={save.bind(this, 'draft')}
           >
             Save & Draft
           </Button>
@@ -56,7 +56,7 @@ class Step extends React.Component<Props> {
             btnStyle="success"
             size="small"
             icon="checked-1"
-            onClick={e => save('live', e)}
+            onClick={save.bind(this, 'live')}
           >
             Save & Live
           </Button>
@@ -70,7 +70,7 @@ class Step extends React.Component<Props> {
           btnStyle="primary"
           size="small"
           icon="rightarrow-2"
-          onClick={() => next(0)}
+          onClick={next.bind(null, 0)}
         >
           Next
         </Button>
@@ -88,7 +88,7 @@ class Step extends React.Component<Props> {
     }
 
     return (
-      <Button btnStyle="primary" size="small" onClick={() => next(0)}>
+      <Button btnStyle="primary" size="small" onClick={next.bind(null, 0)}>
         {__('Next')} <Icon icon="rightarrow-2" />
       </Button>
     );
@@ -130,7 +130,7 @@ class Step extends React.Component<Props> {
 
         <ShortStep
           show={!show}
-          onClick={() => next && stepNumber && next(stepNumber)}
+          onClick={next && stepNumber && next.bind(null, stepNumber)}
         >
           <StepImg>
             <img src={img} alt="step-icon" />
diff --git a/src/modules/common/styles/global-styles.ts b/src/modules/common/styles/global-styles.ts
index 64d320032..4773a58f0 100644
--- a/src/modules/common/styles/global-styles.ts
+++ b/src/modules/common/styles/global-styles.ts
@@ -1,719 +1,725 @@
 import { injectGlobal } from 'styled-components';
 import { colors, typography } from './';
 
-injectGlobal`
-  html {
-    height: 100%;
-  }
-
-  body {
-		font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
-    margin: 0;
-    font-size: ${typography.fontSizeBody}px;
-    line-height: ${typography.lineHeightBody};
-    color: ${colors.textPrimary};
-    height: 100%;
-    background: ${colors.bgMain};
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-rendering: optimizeLegibility;
-    -webkit-text-size-adjust: 100%;
-
-    > #root {
-      display: flex;
-      flex: 1;
-      height: 100%;
-    }
-  }
-
-  a {
-    color: ${colors.linkPrimary};
-    transition: color 0.3s ease;
-  }
-
-  a:hover {
-    color: inherit;
-    text-decoration: none;
-  }
-
-  .text-primary {
-    color: ${colors.colorSecondary} !important;
-  }
-
-  .text-success {
-    color: ${colors.colorCoreGreen} !important;
-  }
-
-  .text-warning {
-    color: ${colors.colorCoreYellow} !important;
-  }
-  /* override */
-
-  .modal-backdrop {
-    background-color: #30435C;
-  } !important
-
-  .modal-backdrop.in {
-    opacity: 0.8;
-  }
-
-  .modal-dialog {
-    padding: 50px 0;
-    margin: 0 auto;
-  }
-
-  .modal-dialog.full {
-    width: 85%;
-  }
-
-  .modal-content {
-    border-radius: 2px;
-    border: 0;
-    box-shadow: 0 2px 10px -3px rgba(0, 0, 0, 0.5);
-    background: ${colors.bgLight};
-  }
-
-  .modal-header {
-    padding: 15px 40px;
-    height: 50px;
-    border: 0;
-    border-radius: 2px;
-    background: #673FBD;
-  }
-
-  .modal-header .close {
-    outline: 0;
-  }
-
-  .modal-title {
-    font-size: ${typography.fontSizeHeading7}px;
-    font-weight: normal;
-    color: ${colors.colorWhite};
-  }
-
-  .modal-body {
-    padding: 40px 40px 30px 40px;
-  }
-
-  .modal-footer {
-    padding: 0;
-    margin-top: 40px;
-    border: none;
-  }
-
-  .close {
-    font-weight: ${typography.fontWeightLight};
-    text-shadow: none;
-    color: ${colors.colorWhite};
-    opacity: 0.8;
-    font-size: 34px;
-    line-height: 25px;
-  }
-
-  .close:hover {
-    opacity: 1;
-    color: ${colors.colorWhite};
-  }
-
-  /* dropdow */
-
-  .dropdown-menu {
-    margin-top: 0 !important;
-    border-radius: 0;
-    border: none;
-    font-size: ${typography.fontSizeBody}px;
-    color: ${colors.textPrimary};
-    min-width: 100%;
-    box-shadow: 0 5px 15px 1px rgba(0, 0, 0, 0.15);
-  }
-
-  .dropdown-menu > span {
-    display: block;
-  }
-
-  .dropdown-menu li a {
-    display: block;
-    padding: 3px 20px;
-    color: ${colors.textPrimary};
-    white-space: nowrap;
-    float: none;
-    margin: 0;
-  }
-
-  .dropdown-menu > li > a {
-    color: ${colors.textPrimary};
-    font-weight: normal;
-  }
-
-  .dropdown-menu > li > a:focus,
-  .dropdown-menu > li > a:hover,
-  .dropdown-menu li a:focus,
-  .dropdown-menu li a:hover {
-    color: ${colors.colorCoreDarkGray};
-    background: ${colors.bgActive};
-    outline: 0;
-    cursor: pointer;
-  }
-
-  /* tooltip */
-  .tooltip {
-    font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
-  }
-
-  .tooltip-inner {
-    background-color: ${colors.colorWhite};
-    color: ${colors.colorCoreDarkGray};
-    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.23);
-  }
-
-  .tooltip.bottom .tooltip-arrow, {
-    border-bottom-color: ${colors.colorWhite};
-  }
-
-  .tooltip.top .tooltip-arrow {
-    border-top-color: ${colors.colorWhite};
-  }
-
-  .tooltip.left .tooltip-arrow {
-    border-left-color: ${colors.colorWhite};
-  }
-
-  .tooltip.right .tooltip-arrow {
-    border-right-color: ${colors.colorWhite};
-    border-width: 0px 10px 13px 0;
-    margin-top: 0;
-    top: 0 !important;
-  }
-
-  .tooltip.right .tooltip-inner {
-    border-top-left-radius: 0;
-  }
-
-  .tooltip.in {
-    opacity: 1;
-  }
-
-  .tooltip.right {
-    padding: 0 5px 0 6px;
-  }
-
-  /* popover */
-
-  .popover {
-    font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
-    border: none;
-    border-radius: 0;
-    font-size: inherit;
-    padding: 0;
-    color: ${colors.textPrimary};
-    font-weight: inherit;
-    box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.15);
-    max-width: 310px;
-  }
-
-  .popover.bottom > .arrow {
-    border-bottom-color: ${colors.borderPrimary};
-  }
-
-  .popover.bottom > .arrow::after {
-    top: 1px;
-    border-bottom-color: ${colors.bgLight};
-  }
-
-  .popover > .arrow {
-    border-width: 10px;
-  }
-
-  .popover.top > .arrow {
-    bottom: -10px;
-    margin-left: -10px;
-    border-top-color: ${colors.borderPrimary};
-  }
-
-  .popover.top > .arrow::after {
-    bottom: 1px;
-    border-top-color: ${colors.colorWhite};
-  }
-
-  .popover-title {
-    display: block;
-    border-bottom: 1px solid ${colors.borderPrimary};
-    padding: 10px 20px;
-    background: ${colors.bgLight};
-    font-size: ${typography.fontSizeUppercase}px;
-    text-transform: uppercase;
-    color: ${colors.colorCoreGray};
-    border-radius: 0;
-  }
-
-  .popover-content {
-    padding: 0;
-    position: relative;
-    min-width: 260px;
-  }
-
-  .popover-content .chrome-picker {
-    width: 100% !important;
-    box-shadow: none !important;
-  }
-
-  .popover-content ul {
-    max-height: 280px;
-    overflow: auto;
-  }
-
-  .popover-content li a i {
-    margin-left: 0;
-  }
-
-  .popover-template {
-    max-width: 405px;
-    width: 405px;
-    height: 400px;
-  }
-  .popover-template .popover-content {
-    display: flex;
-    flex-direction: column;
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 33px;
-  }
-
-  .notification-popover {
-    right: 15px;
-    max-width: 360px;
-  }
-
-  /* select  */
-
-  .Select-control {
-    border-radius: 0;
-    border: none;
-    border-bottom: 1px solid ${colors.borderDarker};
-    box-shadow: none;
-    background: none;
-  }
-
-  .Select-control:hover {
-    cursor: pointer;
-    box-shadow: none;
-  }
-
-  
-
-  .Select.is-focused > .Select-control,
-  .Select.is-open > .Select-control {
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-    border-color: ${colors.colorSecondary};
-    background: none;
-  }
-
-  .Select.is-focused:not(.is-open) > .Select-control {
-    box-shadow: none;
-    background: none;
-    border-color: ${colors.colorSecondary};
-  }
-
-  .Select.is-focused .Select-input > input {
-    padding: 10px 0 12px;
-  }
-
-  .Select-placeholder,
-  .Select-input,
-  .Select--single > .Select-control .Select-value {
-    padding-left: 10px;
-    padding-right: 10px;
-  }
-
-  .Select-clear {
-    font-size: ${typography.fontSizeHeading6}px;
-    line-height: 1.4;
-    margin-top: 1px;
-  }
-
-  .Select-clear-zone:hover {
-    color: ${colors.colorCoreRed};
-  }
-
-  .Select--multi .Select-multi-value-wrapper {
-    padding: 0 5px;
-  }
-
-  .Select--multi .Select-input {
-    margin-left: 5px;
-  }
-
-  .Select--multi .Select-value {
-    background-color: ${colors.colorSecondary};
-    border-radius: 11px;
-    border: 1px solid ${colors.colorSecondary};
-    color: ${colors.colorWhite};
-    margin-top: 6px;
-    margin-left: 0;
-    margin-right: 5px;
-    position: relative;
-    padding-right: 20px;
-  }
-
-  .Select--multi .Select-value-icon {
-    display: inline-block;
-    vertical-align: middle;
-    cursor: pointer;
-    width: 20px;
-    height: 20px;
-    border-radius: 10px;
-    position: absolute;
-    right: 0;
-    top: 0;
-    text-align: center;
-    line-height: 20px;
-    background: rgba(0, 0, 0, 0.1);
-    padding: 0;
-  }
-
-  .Select--multi .Select-value-icon:hover,
-  .Select--multi .Select-value-icon:focus,
-  .Select--multi .Select-value-icon:active {
-    background-color: rgba(0, 0, 0, 0.2);
-    color: ${colors.colorWhite};
-  }
-
-  .Select--multi .Select-value-label {
-    padding: 2px 10px;
-  }
-
-  .Select--multi.has-value .Select-input {
-    margin-left: 5px;
-  }
-
-  .Select--multi a.Select-value-label {
-    color: ${colors.colorPrimaryDark};
-  }
-
-  .Select-arrow-zone {
-    padding-right: 10px;
-  }
-
-  .Select-arrow-zone > .Select-arrow {
-    border: none;
-    margin-right: 10px;
-  }
-
-  .Select .Select-arrow:before {
-    font-family: 'erxes';
-    font-size: 10px;
-    content: '\\e827';
-    color: ${colors.colorCoreGray};
-  }
-
-  .Select.is-open .Select-arrow:before {
-    content: '\\e89a';
-  }
-
-  .Select-menu-outer {
-    border: none;
-    margin-top: 1px;
-    box-shadow: 0 5px 15px 1px rgba(0, 0, 0, 0.15);;
-  }
-
-  .Select-menu-outer, .Select-option:last-child {
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  .Select-option-group-label {
-    background-color: ${colors.bgLight};
-    color: #666;
-    border-bottom: 1px solid ${colors.borderPrimary};
-    border-top: 1px solid ${colors.borderPrimary};
-    font-weight: ${typography.fontWeightMedium};
-    text-transform: uppercase;
-    padding: 8px 20px;
-  }
-
-  .Select-option-group-label ~ .Select-option {
-    padding-left: 20px;
-  }
-
-  .Select-option-group-label .Select-option-group {
-    padding-left: 20px;
-  }
-
-  .Select-option {
-    padding: 8px 20px;
-  }
-
-  .Select-noresults {
-    padding: 8px 20px;
-  }
-
-  .simple-option .channel-round {
-    color: ${colors.colorWhite};
-    font-weight: bold;
-    width: 20px;
-    height: 20px;
-    float: right;
-    border-radius: 10px;
-    background: ${colors.colorCoreYellow};
-    text-align: center;
-    font-size: 10px;
-    line-height: 20px;
-    cursor: pointer;
-  }
-
-  /* react toggle */
-
-  .react-toggle--checked .react-toggle-track {
-    background-color: ${colors.colorCoreGreen};
-  }
-
-  .react-toggle-track {
-    background-color: ${colors.colorCoreBlack};
-  }
-
-  .react-toggle-track span {
-    display: none;
-  }
-
-  .react-toggle--checked .react-toggle-thumb,
-  .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
-    border-color: ${colors.colorCoreGreen};
-  }
-
-  /* punch card */
-
-  .punch-card .axis path,
-  .punch-card .axis line {
-    fill: none;
-    stroke: ${colors.colorCoreGray};
-    stroke-width: 1px;
-    shape-rendering: crispEdges;
-  }
-  .punch-card .axis text {
-    font-size: 0.875em;
-    fill: ${colors.colorCoreGray};
-  }
-
-  /* react datetime */
-
-  .rdtPicker {
-    box-shadow: 0 5px 15px -3px rgba(0, 0, 0, 0.15);
-    width: 100%;
-    border-color: ${colors.colorShadowGray};
-    min-width: 200px;
-    max-width: 260px;
-  }
-
-  .rdtPicker td.rdtToday:before {
-    border-bottom: 7px solid ${colors.colorSecondary} !important;
-  }
-
-  .rdtPicker td.rdtActive,
-  .rdtPicker td.rdtActive:hover {
-    background-color: ${colors.colorSecondary} !important;
-  }
-
-  .rdtPicker th,
-  .rdtPicker tfoot {
-    border-color: ${colors.borderPrimary};
-  }
-
-  /* editor */
-  .RichEditor-editor .public-DraftEditor-content ul {
-    padding-left: 25px;
-  }
-
-  .RichEditor-editor .public-DraftEditor-content ol {
-    padding-left: 25px;
-  }
-
-  .RichEditor-editor .public-DraftEditor-content h3 {
-    margin-top: 0;
-  }
-
-  .RichEditor-editor .RichEditor-blockquote {
-    border-left: 5px solid ${colors.borderDarker};
-    color: ${colors.colorCoreGray};
-    font-style: italic;
-    padding: 10px 20px;
-  }
-
-  .RichEditor-editor .public-DraftStyleDefault-pre {
-    margin-bottom: 0;
-  }
-  .RichEditor-editor .public-DraftStyleDefault-pre pre {
-    padding: 0;
-    margin: 0;
-    border: 0;
-  }
-
-  .RichEditor-hidePlaceholder .public-DraftEditorPlaceholder-root {
-    display: none;
-  }
-
-  /* mention */
-  .draftJsMentionPlugin__mention__29BEd {
-    cursor: pointer;
-    display: inline-block;
-    font-weight: bold;
-    padding-left: 2px;
-    padding-right: 2px;
-    border-radius: 4px;
-    text-decoration: none;
-  }
-
-  .draftJsMentionPlugin__mention__29BEd:visited {
-    cursor: pointer;
-    display: inline-block;
-    font-weight: bold;
-    padding-left: 2px;
-    padding-right: 2px;
-    text-decoration: none;
-  }
-
-  .draftJsMentionPlugin__mention__29BEd:hover {
-    outline: 0;
-  }
-
-  .draftJsMentionPlugin__mention__29BEd:focus {
-    outline: 0;
-  }
-
-  .draftJsMentionPlugin__mention__29BEd:active {
-    color: ${colors.colorCoreDarkGray};
-  }
-
-  .draftJsMentionPlugin__mentionSuggestions__2DWjA {
-    position: absolute;
-    min-width: 220px;
-    width: 100%;
-    background: ${colors.colorWhite};
-    box-shadow: 0 0 10px -3px rgba(0, 0, 0, 0.5);
-    cursor: pointer;
-    z-index: 2000;
-    box-sizing: border-box;
-    transform: scale(0);
-    bottom: 100%;
-    top: auto !important;
-    left: 0 !important;
-    max-height: 300px;
-    overflow: auto;
-  }
-
-  .draftJsMentionPlugin__mentionSuggestionsEntry__3mSwm {
-    padding: 5px 10px;
-    transition: background-color 0.4s cubic-bezier(0.27, 1.27, 0.48, 0.56);
-    font-size: ${typography.fontSizeBody}px;
-  }
-
-  .draftJsMentionPlugin__mentionSuggestionsEntry__3mSwm:active {
-    background-color: ${colors.borderPrimary};
-  }
-
-  .draftJsMentionPlugin__mentionSuggestionsEntryFocused__3LcTd {
-    background-color: ${colors.bgUnread};
-  }
-
-  .mentioned-person {
-    cursor: pointer;
-    display: inline-block;
-    font-weight: bold;
-    padding-left: 2px;
-    padding-right: 2px;
-    text-decoration: none;
-  }
-
-  .mention {
-    text-decoration: none;
-  }
-
-  .mentionSuggestionsEntryContainer {
+const style = `
+html {
+  height: 100%;
+}
+
+body {
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
+  margin: 0;
+  font-size: ${typography.fontSizeBody}px;
+  line-height: ${typography.lineHeightBody};
+  color: ${colors.textPrimary};
+  height: 100%;
+  background: ${colors.bgMain};
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  -webkit-text-size-adjust: 100%;
+
+  > #root {
     display: flex;
-  }
-
-  .mentionSuggestionsEntryContainerRight {
-    display: flex;
-    padding-left: 8px;
     flex: 1;
-    flex-direction: row;
-    align-items: center;
-  }
-
-  .mentionSuggestionsEntryText,
-  .mentionSuggestionsEntryTitle {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .mentionSuggestionsEntryText {
-    margin-right: 8px;
-    font-weight: bold;
+    height: 100%;
   }
-
-  .mentionSuggestionsEntryTitle {
-    font-size: 95%;
-    color: ${colors.colorCoreGray};
-    margin-top: 2px;
+}
+
+a {
+  color: ${colors.linkPrimary};
+  transition: color 0.3s ease;
+}
+
+a:hover {
+  color: inherit;
+  text-decoration: none;
+}
+
+.text-primary {
+  color: ${colors.colorSecondary} !important;
+}
+
+.text-success {
+  color: ${colors.colorCoreGreen} !important;
+}
+
+.text-warning {
+  color: ${colors.colorCoreYellow} !important;
+}
+/* override */
+
+.modal-backdrop {
+  background-color: #30435C;
+} !important
+
+.modal-backdrop.in {
+  opacity: 0.8;
+}
+
+.modal-dialog {
+  padding: 50px 0;
+  margin: 0 auto;
+}
+
+.modal-dialog.full {
+  width: 85%;
+}
+
+.modal-content {
+  border-radius: 2px;
+  border: 0;
+  box-shadow: 0 2px 10px -3px rgba(0, 0, 0, 0.5);
+  background: ${colors.bgLight};
+}
+
+.modal-header {
+  padding: 15px 40px;
+  height: 50px;
+  border: 0;
+  border-radius: 2px;
+  background: #673FBD;
+}
+
+.modal-header .close {
+  outline: 0;
+}
+
+.modal-title {
+  font-size: ${typography.fontSizeHeading7}px;
+  font-weight: normal;
+  color: ${colors.colorWhite};
+}
+
+.modal-body {
+  padding: 40px 40px 30px 40px;
+}
+
+.modal-footer {
+  padding: 0;
+  margin-top: 40px;
+  border: none;
+}
+
+.close {
+  font-weight: ${typography.fontWeightLight};
+  text-shadow: none;
+  color: ${colors.colorWhite};
+  opacity: 0.8;
+  font-size: 34px;
+  line-height: 25px;
+}
+
+.close:hover {
+  opacity: 1;
+  color: ${colors.colorWhite};
+}
+
+/* dropdow */
+
+.dropdown-menu {
+  margin-top: 0 !important;
+  border-radius: 0;
+  border: none;
+  font-size: ${typography.fontSizeBody}px;
+  color: ${colors.textPrimary};
+  min-width: 100%;
+  box-shadow: 0 5px 15px 1px rgba(0, 0, 0, 0.15);
+}
+
+.dropdown-menu > span {
+  display: block;
+}
+
+.dropdown-menu li a {
+  display: block;
+  padding: 3px 20px;
+  color: ${colors.textPrimary};
+  white-space: nowrap;
+  float: none;
+  margin: 0;
+}
+
+.dropdown-menu > li > a {
+  color: ${colors.textPrimary};
+  font-weight: normal;
+}
+
+.dropdown-menu > li > a:focus,
+.dropdown-menu > li > a:hover,
+.dropdown-menu li a:focus,
+.dropdown-menu li a:hover {
+  color: ${colors.colorCoreDarkGray};
+  background: ${colors.bgActive};
+  outline: 0;
+  cursor: pointer;
+}
+
+/* tooltip */
+.tooltip {
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
+}
+
+.tooltip-inner {
+  background-color: ${colors.colorWhite};
+  color: ${colors.colorCoreDarkGray};
+  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.23);
+}
+
+.tooltip.bottom .tooltip-arrow, {
+  border-bottom-color: ${colors.colorWhite};
+}
+
+.tooltip.top .tooltip-arrow {
+  border-top-color: ${colors.colorWhite};
+}
+
+.tooltip.left .tooltip-arrow {
+  border-left-color: ${colors.colorWhite};
+}
+
+.tooltip.right .tooltip-arrow {
+  border-right-color: ${colors.colorWhite};
+  border-width: 0px 10px 13px 0;
+  margin-top: 0;
+  top: 0 !important;
+}
+
+.tooltip.right .tooltip-inner {
+  border-top-left-radius: 0;
+}
+
+.tooltip.in {
+  opacity: 1;
+}
+
+.tooltip.right {
+  padding: 0 5px 0 6px;
+}
+
+/* popover */
+
+.popover {
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
+  border: none;
+  border-radius: 0;
+  font-size: inherit;
+  padding: 0;
+  color: ${colors.textPrimary};
+  font-weight: inherit;
+  box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.15);
+  max-width: 310px;
+}
+
+.popover.bottom > .arrow {
+  border-bottom-color: ${colors.borderPrimary};
+}
+
+.popover.bottom > .arrow::after {
+  top: 1px;
+  border-bottom-color: ${colors.bgLight};
+}
+
+.popover > .arrow {
+  border-width: 10px;
+}
+
+.popover.top > .arrow {
+  bottom: -10px;
+  margin-left: -10px;
+  border-top-color: ${colors.borderPrimary};
+}
+
+.popover.top > .arrow::after {
+  bottom: 1px;
+  border-top-color: ${colors.colorWhite};
+}
+
+.popover-title {
+  display: block;
+  border-bottom: 1px solid ${colors.borderPrimary};
+  padding: 10px 20px;
+  background: ${colors.bgLight};
+  font-size: ${typography.fontSizeUppercase}px;
+  text-transform: uppercase;
+  color: ${colors.colorCoreGray};
+  border-radius: 0;
+}
+
+.popover-content {
+  padding: 0;
+  position: relative;
+  min-width: 260px;
+}
+
+.popover-content .chrome-picker {
+  width: 100% !important;
+  box-shadow: none !important;
+}
+
+.popover-content ul {
+  max-height: 280px;
+  overflow: auto;
+}
+
+.popover-content li a i {
+  margin-left: 0;
+}
+
+.popover-template {
+  max-width: 405px;
+  width: 405px;
+  height: 400px;
+}
+.popover-template .popover-content {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 33px;
+}
+
+.notification-popover {
+  right: 15px;
+  max-width: 360px;
+}
+
+/* select  */
+
+.Select-control {
+  border-radius: 0;
+  border: none;
+  border-bottom: 1px solid ${colors.borderDarker};
+  box-shadow: none;
+  background: none;
+}
+
+.Select-control:hover {
+  cursor: pointer;
+  box-shadow: none;
+}
+
+
+
+.Select.is-focused > .Select-control,
+.Select.is-open > .Select-control {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+  border-color: ${colors.colorSecondary};
+  background: none;
+}
+
+.Select.is-focused:not(.is-open) > .Select-control {
+  box-shadow: none;
+  background: none;
+  border-color: ${colors.colorSecondary};
+}
+
+.Select.is-focused .Select-input > input {
+  padding: 10px 0 12px;
+}
+
+.Select-placeholder,
+.Select-input,
+.Select--single > .Select-control .Select-value {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.Select-clear {
+  font-size: ${typography.fontSizeHeading6}px;
+  line-height: 1.4;
+  margin-top: 1px;
+}
+
+.Select-clear-zone:hover {
+  color: ${colors.colorCoreRed};
+}
+
+.Select--multi .Select-multi-value-wrapper {
+  padding: 0 5px;
+}
+
+.Select--multi .Select-input {
+  margin-left: 5px;
+}
+
+.Select--multi .Select-value {
+  background-color: ${colors.colorSecondary};
+  border-radius: 11px;
+  border: 1px solid ${colors.colorSecondary};
+  color: ${colors.colorWhite};
+  margin-top: 6px;
+  margin-left: 0;
+  margin-right: 5px;
+  position: relative;
+  padding-right: 20px;
+}
+
+.Select--multi .Select-value-icon {
+  display: inline-block;
+  vertical-align: middle;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  border-radius: 10px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  text-align: center;
+  line-height: 20px;
+  background: rgba(0, 0, 0, 0.1);
+  padding: 0;
+}
+
+.Select--multi .Select-value-icon:hover,
+.Select--multi .Select-value-icon:focus,
+.Select--multi .Select-value-icon:active {
+  background-color: rgba(0, 0, 0, 0.2);
+  color: ${colors.colorWhite};
+}
+
+.Select--multi .Select-value-label {
+  padding: 2px 10px;
+}
+
+.Select--multi.has-value .Select-input {
+  margin-left: 5px;
+}
+
+.Select--multi a.Select-value-label {
+  color: ${colors.colorPrimaryDark};
+}
+
+.Select-arrow-zone {
+  padding-right: 10px;
+}
+
+.Select-arrow-zone > .Select-arrow {
+  border: none;
+  margin-right: 10px;
+}
+
+.Select .Select-arrow:before {
+  font-family: 'erxes';
+  font-size: 10px;
+  content: '\\e827';
+  color: ${colors.colorCoreGray};
+}
+
+.Select.is-open .Select-arrow:before {
+  content: '\\e89a';
+}
+
+.Select-menu-outer {
+  border: none;
+  margin-top: 1px;
+  box-shadow: 0 5px 15px 1px rgba(0, 0, 0, 0.15);;
+}
+
+.Select-menu-outer, .Select-option:last-child {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.Select-option-group-label {
+  background-color: ${colors.bgLight};
+  color: #666;
+  border-bottom: 1px solid ${colors.borderPrimary};
+  border-top: 1px solid ${colors.borderPrimary};
+  font-weight: ${typography.fontWeightMedium};
+  text-transform: uppercase;
+  padding: 8px 20px;
+}
+
+.Select-option-group-label ~ .Select-option {
+  padding-left: 20px;
+}
+
+.Select-option-group-label .Select-option-group {
+  padding-left: 20px;
+}
+
+.Select-option {
+  padding: 8px 20px;
+}
+
+.Select-noresults {
+  padding: 8px 20px;
+}
+
+.simple-option .channel-round {
+  color: ${colors.colorWhite};
+  font-weight: bold;
+  width: 20px;
+  height: 20px;
+  float: right;
+  border-radius: 10px;
+  background: ${colors.colorCoreYellow};
+  text-align: center;
+  font-size: 10px;
+  line-height: 20px;
+  cursor: pointer;
+}
+
+/* react toggle */
+
+.react-toggle--checked .react-toggle-track {
+  background-color: ${colors.colorCoreGreen};
+}
+
+.react-toggle-track {
+  background-color: ${colors.colorCoreBlack};
+}
+
+.react-toggle-track span {
+  display: none;
+}
+
+.react-toggle--checked .react-toggle-thumb,
+.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
+  border-color: ${colors.colorCoreGreen};
+}
+
+/* punch card */
+
+.punch-card .axis path,
+.punch-card .axis line {
+  fill: none;
+  stroke: ${colors.colorCoreGray};
+  stroke-width: 1px;
+  shape-rendering: crispEdges;
+}
+.punch-card .axis text {
+  font-size: 0.875em;
+  fill: ${colors.colorCoreGray};
+}
+
+/* react datetime */
+
+.rdtPicker {
+  box-shadow: 0 5px 15px -3px rgba(0, 0, 0, 0.15);
+  width: 100%;
+  border-color: ${colors.colorShadowGray};
+  min-width: 200px;
+  max-width: 260px;
+}
+
+.rdtPicker td.rdtToday:before {
+  border-bottom: 7px solid ${colors.colorSecondary} !important;
+}
+
+.rdtPicker td.rdtActive,
+.rdtPicker td.rdtActive:hover {
+  background-color: ${colors.colorSecondary} !important;
+}
+
+.rdtPicker th,
+.rdtPicker tfoot {
+  border-color: ${colors.borderPrimary};
+}
+
+/* editor */
+.RichEditor-editor .public-DraftEditor-content ul {
+  padding-left: 25px;
+}
+
+.RichEditor-editor .public-DraftEditor-content ol {
+  padding-left: 25px;
+}
+
+.RichEditor-editor .public-DraftEditor-content h3 {
+  margin-top: 0;
+}
+
+.RichEditor-editor .RichEditor-blockquote {
+  border-left: 5px solid ${colors.borderDarker};
+  color: ${colors.colorCoreGray};
+  font-style: italic;
+  padding: 10px 20px;
+}
+
+.RichEditor-editor .public-DraftStyleDefault-pre {
+  margin-bottom: 0;
+}
+.RichEditor-editor .public-DraftStyleDefault-pre pre {
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+.RichEditor-hidePlaceholder .public-DraftEditorPlaceholder-root {
+  display: none;
+}
+
+/* mention */
+.draftJsMentionPlugin__mention__29BEd {
+  cursor: pointer;
+  display: inline-block;
+  font-weight: bold;
+  padding-left: 2px;
+  padding-right: 2px;
+  border-radius: 4px;
+  text-decoration: none;
+}
+
+.draftJsMentionPlugin__mention__29BEd:visited {
+  cursor: pointer;
+  display: inline-block;
+  font-weight: bold;
+  padding-left: 2px;
+  padding-right: 2px;
+  text-decoration: none;
+}
+
+.draftJsMentionPlugin__mention__29BEd:hover {
+  outline: 0;
+}
+
+.draftJsMentionPlugin__mention__29BEd:focus {
+  outline: 0;
+}
+
+.draftJsMentionPlugin__mention__29BEd:active {
+  color: ${colors.colorCoreDarkGray};
+}
+
+.draftJsMentionPlugin__mentionSuggestions__2DWjA {
+  position: absolute;
+  min-width: 220px;
+  width: 100%;
+  background: ${colors.colorWhite};
+  box-shadow: 0 0 10px -3px rgba(0, 0, 0, 0.5);
+  cursor: pointer;
+  z-index: 2000;
+  box-sizing: border-box;
+  transform: scale(0);
+  bottom: 100%;
+  top: auto !important;
+  left: 0 !important;
+  max-height: 300px;
+  overflow: auto;
+}
+
+.draftJsMentionPlugin__mentionSuggestionsEntry__3mSwm {
+  padding: 5px 10px;
+  transition: background-color 0.4s cubic-bezier(0.27, 1.27, 0.48, 0.56);
+  font-size: ${typography.fontSizeBody}px;
+}
+
+.draftJsMentionPlugin__mentionSuggestionsEntry__3mSwm:active {
+  background-color: ${colors.borderPrimary};
+}
+
+.draftJsMentionPlugin__mentionSuggestionsEntryFocused__3LcTd {
+  background-color: ${colors.bgUnread};
+}
+
+.mentioned-person {
+  cursor: pointer;
+  display: inline-block;
+  font-weight: bold;
+  padding-left: 2px;
+  padding-right: 2px;
+  text-decoration: none;
+}
+
+.mention {
+  text-decoration: none;
+}
+
+.mentionSuggestionsEntryContainer {
+  display: flex;
+}
+
+.mentionSuggestionsEntryContainerRight {
+  display: flex;
+  padding-left: 8px;
+  flex: 1;
+  flex-direction: row;
+  align-items: center;
+}
+
+.mentionSuggestionsEntryText,
+.mentionSuggestionsEntryTitle {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mentionSuggestionsEntryText {
+  margin-right: 8px;
+  font-weight: bold;
+}
+
+.mentionSuggestionsEntryTitle {
+  font-size: 95%;
+  color: ${colors.colorCoreGray};
+  margin-top: 2px;
+}
+
+.mentionSuggestionsEntryAvatar {
+  display: block;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+}
+
+/* other */
+.sidebar-accordion {
+  border-top: 1px solid ${colors.borderPrimary};
+  border-bottom: 1px solid ${colors.borderPrimary};
+  margin-bottom: 10px;
+
+  ul {
+    padding-top: 0;
+    max-height: none;
   }
+}
 
-  .mentionSuggestionsEntryAvatar {
-    display: block;
-    width: 22px;
-    height: 22px;
-    border-radius: 50%;
-  }
+.sidebar-accordion .popover-header {
+  background: none;
+}
 
-  /* other */
-  .sidebar-accordion {
-    border-top: 1px solid ${colors.borderPrimary};
-    border-bottom: 1px solid ${colors.borderPrimary};
-    margin-bottom: 10px;
+.sidebar-accordion .popover-list {
+  max-height: none;
+}
 
-    ul {
-      padding-top: 0;
-      max-height: none;
-    }
-  }
+/* icon select */
 
-  .sidebar-accordion .popover-header {
-    background: none;
-  }
+.icon-option {
+  display: flex;
+  align-items: center;
+}
 
-  .sidebar-accordion .popover-list {
-    max-height: none;
-  }
+.icon-option i {
+  margin-right: 10px;
+  font-size: ${typography.fontSizeHeading6}px;
+  color: ${colors.colorPrimaryDark};
+}
 
-  /* icon select */
+/* scrollbar */
 
-  .icon-option {
-    display: flex;
-    align-items: center;
-  }
+::-webkit-scrollbar {
+  width: 8px;
+  height: 10px;
+  border-radius: 0;
+}
 
-  .icon-option i {
-    margin-right: 10px;
-    font-size: ${typography.fontSizeHeading6}px;
-    color: ${colors.colorPrimaryDark};
-  }
+::-webkit-scrollbar-thumb {
+  background: rgba(10, 45, 65, .12);
+  border-radius: 4px;
+}
 
-  /* scrollbar */
+::-webkit-scrollbar-track {
+  background: rgba(10, 45, 65, .08);
+}
+`;
 
-  ::-webkit-scrollbar {
-    width: 8px;
-    height: 10px;
-    border-radius: 0;
-  }
+const globalStyle = [`${style}`] as any;
 
-  ::-webkit-scrollbar-thumb {
-    background: rgba(10, 45, 65, .12);
-    border-radius: 4px;
-  }
+globalStyle.raw = [`${style}`];
 
-  ::-webkit-scrollbar-track {
-    background: rgba(10, 45, 65, .08);
-  }
-`;
+injectGlobal(globalStyle);
diff --git a/src/modules/common/utils/uploadHandler.ts b/src/modules/common/utils/uploadHandler.ts
index 787a984a1..2549f8f74 100644
--- a/src/modules/common/utils/uploadHandler.ts
+++ b/src/modules/common/utils/uploadHandler.ts
@@ -56,7 +56,7 @@ const uploadHandler = params => {
         })
 
         .catch(e => {
-          console.log(e); // eslint-disable-line
+          console.log(e); // tslint:disable-line
         });
     };
 
diff --git a/src/modules/companies/components/common/CompanySection.tsx b/src/modules/companies/components/common/CompanySection.tsx
index 22ddf8eb7..df075f593 100644
--- a/src/modules/companies/components/common/CompanySection.tsx
+++ b/src/modules/companies/components/common/CompanySection.tsx
@@ -18,6 +18,16 @@ function CompanySection({ name, companies = [], onSelect, isOpen }: Props) {
   const { Section } = Sidebar;
   const { Title, QuickButtons } = Section;
 
+  const renderCompanyChooser = props => {
+    return (
+      <CompanyChooser
+        {...props}
+        data={{ name, companies }}
+        onSelect={onSelect}
+      />
+    );
+  };
+
   const companyTrigger = (
     <a>
       <Icon icon="add" />
@@ -29,13 +39,7 @@ function CompanySection({ name, companies = [], onSelect, isOpen }: Props) {
       title="Associate"
       trigger={companyTrigger}
       size="lg"
-      content={props => (
-        <CompanyChooser
-          {...props}
-          data={{ name, companies }}
-          onSelect={onSelect}
-        />
-      )}
+      content={renderCompanyChooser}
     />
   );
 
diff --git a/src/modules/companies/components/detail/BasicInfo.tsx b/src/modules/companies/components/detail/BasicInfo.tsx
index b0aec2829..8b2e97176 100644
--- a/src/modules/companies/components/detail/BasicInfo.tsx
+++ b/src/modules/companies/components/detail/BasicInfo.tsx
@@ -78,6 +78,14 @@ class BasicInfo extends React.Component<Props> {
     );
   }
 
+  targetMergeOptions(companies) {
+    return companies.map((c, key) => ({
+      key,
+      value: JSON.stringify(c),
+      label: c.primaryName || c.website || 'N/A'
+    }));
+  }
+
   renderAction() {
     const { remove, merge, company } = this.props;
 
@@ -96,17 +104,11 @@ class BasicInfo extends React.Component<Props> {
                 object={company}
                 searchObject={searchCompany}
                 mergeForm={CompaniesMerge}
-                generateOptions={companies => {
-                  return companies.map((c, key) => ({
-                    key,
-                    value: JSON.stringify(c),
-                    label: c.primaryName || c.website || 'N/A'
-                  }));
-                }}
+                generateOptions={this.targetMergeOptions}
               />
             </li>
             <li>
-              <a onClick={() => confirm().then(() => remove())}>
+              <a onClick={confirm.bind(null).then(() => remove())}>
                 {__('Delete')}
               </a>
             </li>
@@ -116,6 +118,10 @@ class BasicInfo extends React.Component<Props> {
     );
   }
 
+  renderCompanyForm(props, company) {
+    return <CompanyForm {...props} company={company} />;
+  }
+
   renderInfo() {
     const { company } = this.props;
     const { links = {} } = company;
@@ -135,7 +141,7 @@ class BasicInfo extends React.Component<Props> {
             title="Edit basic info"
             trigger={<Icon icon="edit" />}
             size="lg"
-            content={props => <CompanyForm {...props} company={company} />}
+            content={this.renderCompanyForm.bind(this, company)}
           />
         </InfoWrapper>
 
diff --git a/src/modules/companies/components/detail/CompaniesMerge.tsx b/src/modules/companies/components/detail/CompaniesMerge.tsx
index c059c1e97..e95dbee7c 100644
--- a/src/modules/companies/components/detail/CompaniesMerge.tsx
+++ b/src/modules/companies/components/detail/CompaniesMerge.tsx
@@ -77,6 +77,12 @@ class CompaniesMerge extends React.Component<Props, State> {
 
     if (type === 'add') {
       selectedValues[key] = value;
+
+      if (key === 'links') {
+        const links = { ...selectedValues.links, value };
+
+        selectedValues[key] = links;
+      }
     } else {
       delete selectedValues[key];
     }
@@ -111,12 +117,7 @@ class CompaniesMerge extends React.Component<Props, State> {
 
   renderCompanyProperties(key, value, icon) {
     return (
-      <li
-        key={key}
-        onClick={() => {
-          this.handleChange(icon, key, value);
-        }}
-      >
+      <li key={key} onClick={this.handleChange.bind(this, icon, key, value)}>
         {this.renderTitle(key)}
         {this.renderValue(key, value)}
 
@@ -177,11 +178,9 @@ class CompaniesMerge extends React.Component<Props, State> {
       return (
         <li
           key={field}
-          onClick={() => {
-            const links = { ...selectedValues.links, [field]: value };
-
-            return this.handleChange(icon, `links`, links);
-          }}
+          onClick={this.handleChange.bind(this, icon, `links`, {
+            [field]: value
+          })}
         >
           <InfoTitle>{info.label}:</InfoTitle>
           <InfoDetail>{value}</InfoDetail>
@@ -211,11 +210,7 @@ class CompaniesMerge extends React.Component<Props, State> {
         </Columns>
 
         <ModalFooter>
-          <Button
-            btnStyle="simple"
-            onClick={() => closeModal()}
-            icon="cancel-1"
-          >
+          <Button btnStyle="simple" onClick={closeModal} icon="cancel-1">
             Cancel
           </Button>
           <Button type="submit" btnStyle="success" icon="checked-1">
diff --git a/src/modules/companies/components/detail/CompanyDetails.tsx b/src/modules/companies/components/detail/CompanyDetails.tsx
index 74fa86676..2112ef2f6 100755
--- a/src/modules/companies/components/detail/CompanyDetails.tsx
+++ b/src/modules/companies/components/detail/CompanyDetails.tsx
@@ -124,13 +124,13 @@ class CompanyDetails extends React.Component<IProps, State> {
           <Tabs>
             <TabTitle
               className={currentTab === 'newNote' ? 'active' : ''}
-              onClick={() => this.onChangeTab('newNote')}
+              onClick={this.onChangeTab.bind(this, 'newNote')}
             >
               <Icon icon="edit-1" /> {__('New note')}
             </TabTitle>
             <TabTitle
               className={currentTab === 'email' ? 'active' : ''}
-              onClick={() => this.onChangeTab('email')}
+              onClick={this.onChangeTab.bind(this, 'email')}
             >
               <Icon icon="email" /> {__('Email')}
             </TabTitle>
@@ -142,19 +142,19 @@ class CompanyDetails extends React.Component<IProps, State> {
         <Tabs grayBorder={true}>
           <TabTitle
             className={currentSubtab === 'activity' ? 'active' : ''}
-            onClick={() => this.onTabClick('activity')}
+            onClick={this.onTabClick.bind(this, 'activity')}
           >
             {__('Activity')}
           </TabTitle>
           <TabTitle
             className={currentSubtab === 'notes' ? 'active' : ''}
-            onClick={() => this.onTabClick('notes')}
+            onClick={this.onTabClick.bind(this, 'notes')}
           >
             {__('Notes')}
           </TabTitle>
           <TabTitle
             className={currentSubtab === 'conversations' ? 'active' : ''}
-            onClick={() => this.onTabClick('conversations')}
+            onClick={this.onTabClick.bind(this, 'conversations')}
           >
             {__('Conversation')}
           </TabTitle>
diff --git a/src/modules/companies/components/list/CompaniesList.tsx b/src/modules/companies/components/list/CompaniesList.tsx
index 108612f0a..06ba75af3 100755
--- a/src/modules/companies/components/list/CompaniesList.tsx
+++ b/src/modules/companies/components/list/CompaniesList.tsx
@@ -167,6 +167,10 @@ class CompaniesList extends React.Component<IProps, State> {
 
     let actionBarLeft: React.ReactNode;
 
+    const companiesMerge = props => {
+      return <CompaniesMerge {...props} objects={bulk} save={mergeCompanies} />;
+    };
+
     if (bulk.length > 0) {
       const tagButton = (
         <Button btnStyle="simple" size="small" icon="downarrow">
@@ -188,13 +192,7 @@ class CompaniesList extends React.Component<IProps, State> {
               title="Merge Companies"
               size="lg"
               trigger={mergeButton}
-              content={props => (
-                <CompaniesMerge
-                  {...props}
-                  objects={bulk}
-                  save={mergeCompanies}
-                />
-              )}
+              content={companiesMerge}
             />
           )}
 
@@ -202,11 +200,9 @@ class CompaniesList extends React.Component<IProps, State> {
             btnStyle="danger"
             size="small"
             icon="cancel-1"
-            onClick={() =>
-              confirm().then(() => {
-                this.removeCompanies(bulk);
-              })
-            }
+            onClick={confirm.bind(null).then(() => {
+              this.removeCompanies(bulk);
+            })}
           >
             Remove
           </Button>
@@ -214,35 +210,41 @@ class CompaniesList extends React.Component<IProps, State> {
       );
     }
 
+    const manageColumns = props => {
+      return (
+        <ManageColumns
+          {...props}
+          location={location}
+          history={history}
+          contentType="company"
+        />
+      );
+    };
+
+    const companyForm = props => {
+      return <CompanyForm {...props} queryParams={queryParams} />;
+    };
+
     const actionBarRight = (
       <BarItems>
         <FormControl
           type="text"
           placeholder={__('Type to search')}
-          onChange={e => this.search(e)}
+          onChange={this.search}
           value={this.state.searchValue}
           autoFocus={true}
-          onFocus={e => this.moveCursorAtTheEnd(e)}
+          onFocus={this.moveCursorAtTheEnd}
         />
         <ModalTrigger
           title="Choose which column you see"
           trigger={editColumns}
-          content={props => (
-            <ManageColumns
-              {...props}
-              location={location}
-              history={history}
-              contentType="company"
-            />
-          )}
+          content={manageColumns}
         />
         <ModalTrigger
           title="New company"
           trigger={addTrigger}
           size="lg"
-          content={props => (
-            <CompanyForm {...props} queryParams={queryParams} />
-          )}
+          content={companyForm}
         />
       </BarItems>
     );
diff --git a/src/modules/companies/components/list/CompanyForm.tsx b/src/modules/companies/components/list/CompanyForm.tsx
index 03d178faf..78859b3be 100755
--- a/src/modules/companies/components/list/CompanyForm.tsx
+++ b/src/modules/companies/components/list/CompanyForm.tsx
@@ -202,6 +202,7 @@ class CompanyForm extends React.Component<Props, State> {
 
   render() {
     const company = this.props.company || ({} as ICompany);
+    const { closeModal } = this.props;
 
     const {
       links = {},
@@ -215,8 +216,12 @@ class CompanyForm extends React.Component<Props, State> {
 
     const { parentCompanyId, ownerId, companies, users } = this.state;
 
+    const filterOptions = options => {
+      return options;
+    };
+
     return (
-      <form onSubmit={e => this.action(e)}>
+      <form onSubmit={this.action}>
         <AvatarUpload
           avatar={company.avatar}
           onAvatarUpload={this.onAvatarUpload}
@@ -231,7 +236,7 @@ class CompanyForm extends React.Component<Props, State> {
                 options={names || []}
                 placeholder="Primary name"
                 buttonText="Add name"
-                onChange={obj => this.onChange(obj, 'names', 'primaryName')}
+                onChange={this.onChange.bind(this, 'names', 'primaryName')}
               />
             </FormGroup>
 
@@ -246,10 +251,10 @@ class CompanyForm extends React.Component<Props, State> {
               <ControlLabel>Owner</ControlLabel>
               <Select
                 placeholder="Search"
-                onFocus={() => this.handleUserSearch(' ')}
+                onFocus={this.handleUserSearch.bind(this, ' ')}
                 onInputChange={this.handleUserSearch}
-                filterOptions={options => options}
-                onChange={option => this.handleSelect(option, 'ownerId')}
+                filterOptions={filterOptions}
+                onChange={this.handleSelect.bind(this, 'ownerId')}
                 value={ownerId}
                 options={this.generateUserParams(users)}
               />
@@ -262,7 +267,7 @@ class CompanyForm extends React.Component<Props, State> {
                 options={emails || []}
                 placeholder="Primary Email"
                 buttonText="Add email"
-                onChange={obj => this.onChange(obj, 'emails', 'primaryEmail')}
+                onChange={this.onChange.bind(this, 'emails', 'primaryEmail')}
               />
             </FormGroup>
 
@@ -289,12 +294,10 @@ class CompanyForm extends React.Component<Props, State> {
               <ControlLabel>Parent Company</ControlLabel>
               <Select
                 placeholder={__('Search')}
-                onFocus={() => this.handleCompanySearch(' ')}
+                onFocus={this.handleCompanySearch.bind(this, ' ')}
                 onInputChange={this.handleCompanySearch}
-                filterOptions={options => options}
-                onChange={option =>
-                  this.handleSelect(option, 'parentCompanyId')
-                }
+                filterOptions={filterOptions}
+                onChange={this.handleSelect.bind(this, 'parentCompanyId')}
                 value={parentCompanyId}
                 options={this.generateCompanyParams(companies)}
               />
@@ -317,7 +320,7 @@ class CompanyForm extends React.Component<Props, State> {
                 options={phones || []}
                 placeholder="Primary phone"
                 buttonText="Add phone"
-                onChange={obj => this.onChange(obj, 'phones', 'primaryPhone')}
+                onChange={this.onChange.bind(this, 'phones', 'primaryPhone')}
               />
             </FormGroup>
 
@@ -383,13 +386,7 @@ class CompanyForm extends React.Component<Props, State> {
         </FormWrapper>
 
         <ModalFooter>
-          <Button
-            btnStyle="simple"
-            onClick={() => {
-              this.props.closeModal();
-            }}
-            icon="cancel-1"
-          >
+          <Button btnStyle="simple" onClick={closeModal} icon="cancel-1">
             Close
           </Button>
 
diff --git a/src/modules/companies/components/list/CompanyRow.tsx b/src/modules/companies/components/list/CompanyRow.tsx
index ac3946880..15c78438d 100755
--- a/src/modules/companies/components/list/CompanyRow.tsx
+++ b/src/modules/companies/components/list/CompanyRow.tsx
@@ -29,16 +29,12 @@ function createLinkFromUrl(url) {
     url = 'http://' + url;
   }
 
-  return (
-    <a
-      onClick={e => {
-        e.stopPropagation();
-        window.open(url);
-      }}
-    >
-      {urlParser.extractRootDomain(url)}
-    </a>
-  );
+  const onClick = e => {
+    e.stopPropagation();
+    window.open(url);
+  };
+
+  return <a onClick={onClick}>{urlParser.extractRootDomain(url)}</a>;
 }
 
 function formatValue(value) {
@@ -94,12 +90,12 @@ function CompanyRow({
     e.stopPropagation();
   };
 
+  const onTrClick = () => {
+    history.push(`companies/details/${company._id}`);
+  };
+
   return (
-    <tr
-      onClick={() => {
-        history.push(`companies/details/${company._id}`);
-      }}
-    >
+    <tr onClick={onTrClick}>
       <td onClick={onClick}>
         <FormControl
           checked={isChecked}
diff --git a/src/modules/companies/containers/CompaniesList.tsx b/src/modules/companies/containers/CompaniesList.tsx
index db1959a47..ad9231c58 100755
--- a/src/modules/companies/containers/CompaniesList.tsx
+++ b/src/modules/companies/containers/CompaniesList.tsx
@@ -105,16 +105,15 @@ class CompanyListContainer extends React.Component<IProps, State> {
       mergeCompanies
     };
 
-    return (
-      <Bulk
-        content={props => {
-          return <CompaniesList {...updatedProps} {...props} />;
-        }}
-        refetch={() => {
-          this.props.companiesMainQuery.refetch();
-        }}
-      />
-    );
+    const companiesList = props => {
+      return <CompaniesList {...updatedProps} {...props} />;
+    };
+
+    const refetch = () => {
+      this.props.companiesMainQuery.refetch();
+    };
+
+    return <Bulk content={companiesList} refetch={refetch} />;
   }
 }
 
diff --git a/src/modules/companies/routes.tsx b/src/modules/companies/routes.tsx
index 8b74eb3b6..f41be3f7e 100755
--- a/src/modules/companies/routes.tsx
+++ b/src/modules/companies/routes.tsx
@@ -3,30 +3,32 @@ import * as React from 'react';
 import { Route } from 'react-router-dom';
 import { CompaniesList, CompanyDetails } from './containers';
 
-const routes = () => (
-  <React.Fragment>
-    <Route
-      path="/companies/details/:id"
-      exact={true}
-      key="/companies/details/:id"
-      component={({ match, location }) => {
-        const queryParams = queryString.parse(location.search);
-        const id = match.params.id;
+const routes = () => {
+  const details = ({ match, location }) => {
+    const queryParams = queryString.parse(location.search);
+    const id = match.params.id;
 
-        return <CompanyDetails id={id} queryParams={queryParams} />;
-      }}
-    />
+    return <CompanyDetails id={id} queryParams={queryParams} />;
+  };
 
-    <Route
-      path="/companies"
-      exact={true}
-      key="/companies"
-      component={({ location }) => {
-        const queryParams = queryString.parse(location.search);
-        return <CompaniesList location={location} queryParams={queryParams} />;
-      }}
-    />
-  </React.Fragment>
-);
+  const list = ({ location }) => {
+    const queryParams = queryString.parse(location.search);
+
+    return <CompaniesList location={location} queryParams={queryParams} />;
+  };
+
+  return (
+    <React.Fragment>
+      <Route
+        path="/companies/details/:id"
+        exact={true}
+        key="/companies/details/:id"
+        component={details}
+      />
+
+      <Route path="/companies" exact={true} key="/companies" component={list} />
+    </React.Fragment>
+  );
+};
 
 export default routes;
diff --git a/src/modules/customers/components/common/ActionSection.tsx b/src/modules/customers/components/common/ActionSection.tsx
index 5669d49ef..bbc8b646f 100644
--- a/src/modules/customers/components/common/ActionSection.tsx
+++ b/src/modules/customers/components/common/ActionSection.tsx
@@ -38,6 +38,23 @@ class ActionSection extends React.Component<Props> {
   render() {
     const { customer, remove, merge } = this.props;
 
+    const customerForm = props => {
+      return <CustomerForm {...props} size="lg" customer={customer} />;
+    };
+
+    const generateOptions = customers => {
+      return customers.map((cus, key) => ({
+        key,
+        value: JSON.stringify(cus),
+        label:
+          cus.firstName ||
+          cus.lastName ||
+          cus.primaryEmail ||
+          cus.primaryPhone ||
+          'N/A'
+      }));
+    };
+
     return (
       <Dropdown id="dropdown-engage">
         <DropdownToggle bsRole="toggle">{this.renderButton()}</DropdownToggle>
@@ -46,14 +63,12 @@ class ActionSection extends React.Component<Props> {
             <ModalTrigger
               title="Edit basic info"
               trigger={
-                <a onClick={() => confirm().then(() => remove())}>
+                <a onClick={confirm.bind(null).then(() => remove())}>
                   {__('Edit')}
                 </a>
               }
               size="lg"
-              content={props => (
-                <CustomerForm {...props} size="lg" customer={customer} />
-              )}
+              content={customerForm}
             />
           </li>
           <li>
@@ -62,22 +77,13 @@ class ActionSection extends React.Component<Props> {
               object={customer}
               searchObject={searchCustomer}
               mergeForm={CustomersMerge}
-              generateOptions={customers => {
-                return customers.map((cus, key) => ({
-                  key,
-                  value: JSON.stringify(cus),
-                  label:
-                    cus.firstName ||
-                    cus.lastName ||
-                    cus.primaryEmail ||
-                    cus.primaryPhone ||
-                    'N/A'
-                }));
-              }}
+              generateOptions={generateOptions}
             />
           </li>
           <li>
-            <a onClick={() => confirm().then(() => remove())}>{__('Delete')}</a>
+            <a onClick={confirm.bind(null).then(() => remove())}>
+              {__('Delete')}
+            </a>
           </li>
         </Dropdown.Menu>
       </Dropdown>
diff --git a/src/modules/customers/components/common/CustomerSection.tsx b/src/modules/customers/components/common/CustomerSection.tsx
index 9cd51fefa..6b90f25b9 100644
--- a/src/modules/customers/components/common/CustomerSection.tsx
+++ b/src/modules/customers/components/common/CustomerSection.tsx
@@ -57,6 +57,16 @@ function CustomerSection({ name, customers, onSelect }: Props) {
     );
   };
 
+  const customerChooser = props => {
+    return (
+      <CustomerChooser
+        {...props}
+        data={{ name, customers }}
+        onSelect={onSelect}
+      />
+    );
+  };
+
   return (
     <Section>
       <Title>{__('Customers')}</Title>
@@ -70,13 +80,7 @@ function CustomerSection({ name, customers, onSelect }: Props) {
               <Icon icon="add" />
             </a>
           }
-          content={props => (
-            <CustomerChooser
-              {...props}
-              data={{ name, customers }}
-              onSelect={onSelect}
-            />
-          )}
+          content={customerChooser}
         />
       </QuickButtons>
 
diff --git a/src/modules/customers/components/common/InfoSection.tsx b/src/modules/customers/components/common/InfoSection.tsx
index 1c272621e..fde0d9089 100644
--- a/src/modules/customers/components/common/InfoSection.tsx
+++ b/src/modules/customers/components/common/InfoSection.tsx
@@ -65,6 +65,10 @@ class InfoSection extends React.Component<Props> {
     const { customer } = this.props;
     const { links = {}, isUser } = customer;
 
+    const customerForm = props => {
+      return <CustomerForm {...props} size="lg" customer={customer} />;
+    };
+
     return (
       <InfoWrapper>
         <AvatarWrapper isUser={isUser}>
@@ -83,9 +87,7 @@ class InfoSection extends React.Component<Props> {
           title="Edit basic info"
           trigger={<Icon icon="edit" />}
           size="lg"
-          content={props => (
-            <CustomerForm {...props} size="lg" customer={customer} />
-          )}
+          content={customerForm}
         />
       </InfoWrapper>
     );
diff --git a/src/modules/customers/components/common/TargetMerge.tsx b/src/modules/customers/components/common/TargetMerge.tsx
index 9a7fe92e0..9e5903c3f 100644
--- a/src/modules/customers/components/common/TargetMerge.tsx
+++ b/src/modules/customers/components/common/TargetMerge.tsx
@@ -31,7 +31,11 @@ class TargetMergeModal extends React.Component<Props, State> {
   }
 
   handleSearch(value) {
-    this.props.searchObject(value, objects => this.setState({ objects }));
+    const { objects } = this.state;
+
+    if (objects.length < 1) {
+      this.props.searchObject(value, objs => this.setState({ objects: objs }));
+    }
   }
 
   onSelect(option) {
@@ -65,7 +69,7 @@ class TargetMergeModal extends React.Component<Props, State> {
       <Select
         placeholder="Search"
         onInputChange={this.handleSearch}
-        onFocus={() => objects.length < 1 && this.handleSearch('')}
+        onFocus={this.handleSearch.bind(this, '')}
         onChange={this.onSelect}
         options={generateOptions(objects)}
       />
@@ -73,20 +77,22 @@ class TargetMergeModal extends React.Component<Props, State> {
   }
 
   render() {
+    const modalContent = props => {
+      return (
+        <React.Fragment>
+          {this.renderSelect()}
+          <br />
+          {this.renderMerger(props)}
+        </React.Fragment>
+      );
+    };
+
     return (
       <ModalTrigger
         title={__('Merge')}
         trigger={<a>{__('Merge')}</a>}
         size="lg"
-        content={props => {
-          return (
-            <React.Fragment>
-              {this.renderSelect()}
-              <br />
-              {this.renderMerger(props)}
-            </React.Fragment>
-          );
-        }}
+        content={modalContent}
       />
     );
   }
diff --git a/src/modules/customers/components/detail/CustomerDetails.tsx b/src/modules/customers/components/detail/CustomerDetails.tsx
index 386727703..b1e8d0038 100755
--- a/src/modules/customers/components/detail/CustomerDetails.tsx
+++ b/src/modules/customers/components/detail/CustomerDetails.tsx
@@ -122,13 +122,13 @@ class CustomerDetails extends React.Component<Props, State> {
           <Tabs>
             <TabTitle
               className={currentTab === 'newNote' ? 'active' : ''}
-              onClick={() => this.onChangeTab('newNote')}
+              onClick={this.onChangeTab.bind(this, 'newNote')}
             >
               <Icon icon="edit-1" /> {__('New note')}
             </TabTitle>
             <TabTitle
               className={currentTab === 'email' ? 'active' : ''}
-              onClick={() => this.onChangeTab('email')}
+              onClick={this.onChangeTab.bind(this, 'email')}
             >
               <Icon icon="email" /> {__('Email')}
             </TabTitle>
@@ -140,19 +140,19 @@ class CustomerDetails extends React.Component<Props, State> {
         <Tabs grayBorder={true}>
           <TabTitle
             className={currentSubTab === 'activity' ? 'active' : ''}
-            onClick={() => this.onTabClick('activity')}
+            onClick={this.onTabClick.bind(this, 'activity')}
           >
             {__('Activity')}
           </TabTitle>
           <TabTitle
             className={currentSubTab === 'notes' ? 'active' : ''}
-            onClick={() => this.onTabClick('notes')}
+            onClick={this.onTabClick.bind(this, 'notes')}
           >
             {__('Notes')}
           </TabTitle>
           <TabTitle
             className={currentSubTab === 'conversations' ? 'active' : ''}
-            onClick={() => this.onTabClick('conversations')}
+            onClick={this.onTabClick.bind(this, 'conversations')}
           >
             {__('Conversation')}
           </TabTitle>
diff --git a/src/modules/customers/components/detail/CustomersMerge.tsx b/src/modules/customers/components/detail/CustomersMerge.tsx
index 95a6df031..1fb7f5b5d 100644
--- a/src/modules/customers/components/detail/CustomersMerge.tsx
+++ b/src/modules/customers/components/detail/CustomersMerge.tsx
@@ -77,6 +77,12 @@ class CustomersMerge extends React.Component<Props, State> {
 
     if (type === 'add') {
       selectedValues[key] = value;
+
+      if (key === 'link') {
+        const links = { ...selectedValues.links };
+
+        selectedValues[key] = links;
+      }
     } else {
       delete selectedValues[key];
     }
@@ -111,12 +117,7 @@ class CustomersMerge extends React.Component<Props, State> {
 
   renderCustomerProperties(key: string, value: string, icon: string) {
     return (
-      <li
-        key={key}
-        onClick={() => {
-          this.handleChange(icon, key, value);
-        }}
-      >
+      <li key={key} onClick={this.handleChange.bind(this, icon, key, value)}>
         {this.renderTitle(key)}
         {this.renderValue(key, value)}
 
@@ -223,11 +224,9 @@ class CustomersMerge extends React.Component<Props, State> {
       return (
         <li
           key={field}
-          onClick={() => {
-            const links = { ...selectedValues.links, [field]: value };
-
-            return this.handleChange(icon, `links`, links);
-          }}
+          onClick={this.handleChange.bind(this, icon, `links`, {
+            [field]: value
+          })}
         >
           <InfoTitle>{info.label}:</InfoTitle>
           <InfoDetail>{value}</InfoDetail>
@@ -239,7 +238,7 @@ class CustomersMerge extends React.Component<Props, State> {
 
   render() {
     const { selectedValues } = this.state;
-    const { objects } = this.props;
+    const { objects, closeModal } = this.props;
     const [customer1, customer2] = objects;
 
     return (
@@ -257,11 +256,7 @@ class CustomersMerge extends React.Component<Props, State> {
         </Columns>
 
         <ModalFooter>
-          <Button
-            btnStyle="simple"
-            onClick={() => this.props.closeModal()}
-            icon="cancel-1"
-          >
+          <Button btnStyle="simple" onClick={closeModal} icon="cancel-1">
             Cancel
           </Button>
           <Button type="submit" btnStyle="success" icon="checked-1">
diff --git a/src/modules/customers/components/list/BrandFilter.tsx b/src/modules/customers/components/list/BrandFilter.tsx
index 5f38f5d41..17149f854 100644
--- a/src/modules/customers/components/list/BrandFilter.tsx
+++ b/src/modules/customers/components/list/BrandFilter.tsx
@@ -16,6 +16,10 @@ interface IProps extends IRouterProps {
 function Brands({ history, counts, brands, loading }: IProps) {
   const { Section, Header } = Wrapper.Sidebar;
 
+  const onClick = brandId => {
+    router.setParams(history, { brand: brandId });
+  };
+
   const data = (
     <SidebarList>
       {brands.map(brand => (
@@ -25,9 +29,7 @@ function Brands({ history, counts, brands, loading }: IProps) {
             className={
               router.getParam(history, 'brand') === brand._id ? 'active' : ''
             }
-            onClick={() => {
-              router.setParams(history, { brand: brand._id });
-            }}
+            onClick={onClick}
           >
             {brand.name}
             <SidebarCounter>{counts[brand._id]}</SidebarCounter>
diff --git a/src/modules/customers/components/list/CustomerForm.tsx b/src/modules/customers/components/list/CustomerForm.tsx
index 34b01b720..8642eaa8b 100755
--- a/src/modules/customers/components/list/CustomerForm.tsx
+++ b/src/modules/customers/components/list/CustomerForm.tsx
@@ -56,6 +56,7 @@ class CustomerForm extends React.Component<Props, State> {
     this.handleUserSearch = this.handleUserSearch.bind(this);
     this.onEmailChange = this.onEmailChange.bind(this);
     this.onPhoneChange = this.onPhoneChange.bind(this);
+    this.onOwnerChange = this.onOwnerChange.bind(this);
     this.onAvatarUpload = this.onAvatarUpload.bind(this);
   }
 
@@ -181,6 +182,12 @@ class CustomerForm extends React.Component<Props, State> {
     this.setState({ phones: options, primaryPhone: selectedOption });
   }
 
+  onOwnerChange(selectedOption) {
+    this.setState({
+      ownerId: selectedOption ? selectedOption.value : null
+    });
+  }
+
   render() {
     const { closeModal } = this.props;
     const { users } = this.state;
@@ -188,8 +195,12 @@ class CustomerForm extends React.Component<Props, State> {
     const customer = this.props.customer || ({} as ICustomer);
     const { links = {}, primaryEmail, primaryPhone } = customer;
 
+    const filteroptions = options => {
+      return options;
+    };
+
     return (
-      <form onSubmit={e => this.action(e)}>
+      <form onSubmit={this.action}>
         <AvatarUpload
           avatar={customer.avatar}
           onAvatarUpload={this.onAvatarUpload}
@@ -210,7 +221,7 @@ class CustomerForm extends React.Component<Props, State> {
                 options={this.getEmailsOptions(customer)}
                 placeholder="Primary email"
                 buttonText="Add Email"
-                onChange={obj => this.onEmailChange(obj)}
+                onChange={this.onEmailChange}
               />
             </FormGroup>
 
@@ -230,14 +241,10 @@ class CustomerForm extends React.Component<Props, State> {
               <ControlLabel>Owner</ControlLabel>
               <Select
                 placeholder={__('Search')}
-                onFocus={() => this.handleUserSearch(' ')}
+                onFocus={this.handleUserSearch.bind(this, ' ')}
                 onInputChange={this.handleUserSearch}
-                filterOptions={options => options}
-                onChange={selectedOption => {
-                  this.setState({
-                    ownerId: selectedOption ? selectedOption.value : null
-                  });
-                }}
+                filterOptions={filteroptions}
+                onChange={this.onOwnerChange}
                 value={this.state.ownerId}
                 options={this.generateUserParams(users)}
               />
@@ -268,7 +275,7 @@ class CustomerForm extends React.Component<Props, State> {
                 options={this.getPhonesOptions(customer)}
                 placeholder="Primary phone"
                 buttonText="Add Phone"
-                onChange={obj => this.onPhoneChange(obj)}
+                onChange={this.onPhoneChange}
               />
             </FormGroup>
 
@@ -358,11 +365,7 @@ class CustomerForm extends React.Component<Props, State> {
         </FormWrapper>
 
         <ModalFooter>
-          <Button
-            btnStyle="simple"
-            onClick={() => closeModal()}
-            icon="cancel-1"
-          >
+          <Button btnStyle="simple" onClick={closeModal} icon="cancel-1">
             Close
           </Button>
 
diff --git a/src/modules/customers/components/list/CustomerRow.tsx b/src/modules/customers/components/list/CustomerRow.tsx
index 1afff1910..4fe46ffd2 100755
--- a/src/modules/customers/components/list/CustomerRow.tsx
+++ b/src/modules/customers/components/list/CustomerRow.tsx
@@ -87,12 +87,12 @@ function CustomerRow({
     e.stopPropagation();
   };
 
+  const onTrClick = () => {
+    history.push(`/customers/details/${customer._id}`);
+  };
+
   return (
-    <tr
-      onClick={() => {
-        history.push(`/customers/details/${customer._id}`);
-      }}
-    >
+    <tr onClick={onTrClick}>
       <td onClick={onClick}>
         <FormControl
           checked={isChecked}
diff --git a/src/modules/customers/components/list/CustomersList.tsx b/src/modules/customers/components/list/CustomersList.tsx
index 02e347666..c31ba7d42 100755
--- a/src/modules/customers/components/list/CustomersList.tsx
+++ b/src/modules/customers/components/list/CustomersList.tsx
@@ -186,15 +186,34 @@ class CustomersList extends React.Component<IProps, State> {
       <DateFilter queryParams={queryParams} history={history} />
     );
 
+    const manageColumns = props => {
+      return (
+        <ManageColumns
+          {...props}
+          contentType="customer"
+          location={location}
+          history={history}
+        />
+      );
+    };
+
+    const customerForm = props => {
+      return <CustomerForm {...props} size="lg" queryParams={queryParams} />;
+    };
+
+    const customersMerge = props => {
+      return <CustomersMerge {...props} objects={bulk} save={mergeCustomers} />;
+    };
+
     const actionBarRight = (
       <BarItems>
         <FormControl
           type="text"
           placeholder={__('Type to search')}
-          onChange={e => this.search(e)}
+          onChange={this.search}
           value={this.state.searchValue}
           autoFocus={true}
-          onFocus={e => this.moveCursorAtTheEnd(e)}
+          onFocus={this.moveCursorAtTheEnd}
         />
 
         {dateFilter}
@@ -210,14 +229,7 @@ class CustomersList extends React.Component<IProps, State> {
               <ModalTrigger
                 title="Manage Columns"
                 trigger={editColumns}
-                content={props => (
-                  <ManageColumns
-                    {...props}
-                    contentType="customer"
-                    location={location}
-                    history={history}
-                  />
-                )}
+                content={manageColumns}
               />
             </li>
             <li>
@@ -226,7 +238,7 @@ class CustomersList extends React.Component<IProps, State> {
               </Link>
             </li>
             <li>
-              <a onClick={() => exportCustomers(bulk)}>
+              <a onClick={exportCustomers.bind(this, bulk)}>
                 {__('Export customers')}
               </a>
             </li>
@@ -236,7 +248,7 @@ class CustomersList extends React.Component<IProps, State> {
                   {__('Import customers')}
                   <input
                     type="file"
-                    onChange={e => handleXlsUpload(e)}
+                    onChange={handleXlsUpload}
                     style={{ display: 'none' }}
                     accept=".xlsx, .xls"
                   />
@@ -250,9 +262,7 @@ class CustomersList extends React.Component<IProps, State> {
           title="New customer"
           trigger={addTrigger}
           size="lg"
-          content={props => (
-            <CustomerForm {...props} size="lg" queryParams={queryParams} />
-          )}
+          content={customerForm}
         />
       </BarItems>
     );
@@ -287,24 +297,16 @@ class CustomersList extends React.Component<IProps, State> {
               title="Merge Customers"
               size="lg"
               trigger={mergeButton}
-              content={props => (
-                <CustomersMerge
-                  {...props}
-                  objects={bulk}
-                  save={mergeCustomers}
-                />
-              )}
+              content={customersMerge}
             />
           )}
           <Button
             btnStyle="danger"
             size="small"
             icon="cancel-1"
-            onClick={() =>
-              confirm().then(() => {
-                this.removeCustomers(bulk);
-              })
-            }
+            onClick={confirm.bind(null).then(() => {
+              this.removeCustomers(bulk);
+            })}
           >
             Remove
           </Button>
diff --git a/src/modules/customers/components/list/FormFilter.tsx b/src/modules/customers/components/list/FormFilter.tsx
index bb36a816e..7a3a2ee99 100644
--- a/src/modules/customers/components/list/FormFilter.tsx
+++ b/src/modules/customers/components/list/FormFilter.tsx
@@ -16,6 +16,10 @@ interface IProps extends IRouterProps {
 function Forms({ history, counts, integrations, loading }: IProps) {
   const { Section, Header } = Wrapper.Sidebar;
 
+  const onClick = formId => {
+    router.setParams(history, { form: formId });
+  };
+
   const data = (
     <SidebarList>
       {integrations.map(integration => {
@@ -28,9 +32,7 @@ function Forms({ history, counts, integrations, loading }: IProps) {
               className={
                 router.getParam(history, 'form') === form._id ? 'active' : ''
               }
-              onClick={() => {
-                router.setParams(history, { form: form._id });
-              }}
+              onClick={onClick.bind(null, form._id)}
             >
               {integration.name}
               <SidebarCounter>{counts[form._id]}</SidebarCounter>
diff --git a/src/modules/customers/components/list/IntegrationFilter.tsx b/src/modules/customers/components/list/IntegrationFilter.tsx
index d05a8581a..ecef08fc0 100644
--- a/src/modules/customers/components/list/IntegrationFilter.tsx
+++ b/src/modules/customers/components/list/IntegrationFilter.tsx
@@ -14,6 +14,10 @@ interface IProps extends IRouterProps {
 function IntegrationFilter({ history, counts }: IProps) {
   const { Section, Header } = Wrapper.Sidebar;
 
+  const onClick = kind => {
+    router.setParams(history, { integrationType: kind });
+  };
+
   const data = (
     <SidebarList>
       {KIND_CHOICES.ALL_LIST.map((kind, index) => (
@@ -25,9 +29,7 @@ function IntegrationFilter({ history, counts }: IProps) {
                 ? 'active'
                 : ''
             }
-            onClick={() => {
-              router.setParams(history, { integrationType: kind });
-            }}
+            onClick={onClick.bind(null, kind)}
           >
             {kind}
             <SidebarCounter>{counts[kind]}</SidebarCounter>
diff --git a/src/modules/customers/components/list/LeadStatusFilter.tsx b/src/modules/customers/components/list/LeadStatusFilter.tsx
index 7b1ab614c..c503c630c 100644
--- a/src/modules/customers/components/list/LeadStatusFilter.tsx
+++ b/src/modules/customers/components/list/LeadStatusFilter.tsx
@@ -27,17 +27,20 @@ class LeadStatusFilter extends React.Component<IProps> {
     const { Section } = Wrapper.Sidebar;
     const paramKey = 'leadStatus';
 
+    const onClear = () => {
+      router.setParams(history, { leadStatus: null });
+    };
+
+    const onClick = (key, value) => {
+      router.setParams(history, { [key]: value });
+    };
+
     return (
       <Section collapsible={true}>
         <Section.Title>{__('Filter by lead status')}</Section.Title>
         <Section.QuickButtons>
           {router.getParam(history, 'leadStatus') ? (
-            <a
-              tabIndex={0}
-              onClick={() => {
-                router.setParams(history, { leadStatus: null });
-              }}
-            >
+            <a tabIndex={0} onClick={onClear}>
               <Icon icon="cancel-1" />
             </a>
           ) : null}
@@ -55,9 +58,7 @@ class LeadStatusFilter extends React.Component<IProps> {
                           ? 'active'
                           : ''
                       }
-                      onClick={() => {
-                        router.setParams(history, { [paramKey]: value });
-                      }}
+                      onClick={onClick.bind(this, paramKey, value)}
                     >
                       {label}
                       <SidebarCounter>
diff --git a/src/modules/customers/components/list/LifecycleStateFilter.tsx b/src/modules/customers/components/list/LifecycleStateFilter.tsx
index f1600d63e..fca149ccf 100644
--- a/src/modules/customers/components/list/LifecycleStateFilter.tsx
+++ b/src/modules/customers/components/list/LifecycleStateFilter.tsx
@@ -27,17 +27,20 @@ class LifecycleStateFilter extends React.Component<IProps> {
     const { Section } = Wrapper.Sidebar;
     const paramKey = 'lifecycleState';
 
+    const onClear = () => {
+      router.setParams(history, { lifecycleState: null });
+    };
+
+    const onClick = (key, value) => {
+      router.setParams(history, { [key]: value });
+    };
+
     return (
       <Section collapsible={true}>
         <Section.Title>{__('Filter by lifecycle states')}</Section.Title>
         <Section.QuickButtons>
           {router.getParam(history, 'lifecycleState') ? (
-            <a
-              tabIndex={0}
-              onClick={() => {
-                router.setParams(history, { lifecycleState: null });
-              }}
-            >
+            <a tabIndex={0} onClick={onClear}>
               <Icon icon="cancel-1" />
             </a>
           ) : null}
@@ -55,9 +58,7 @@ class LifecycleStateFilter extends React.Component<IProps> {
                           ? 'active'
                           : ''
                       }
-                      onClick={() => {
-                        router.setParams(history, { [paramKey]: value });
-                      }}
+                      onClick={onClick.bind(this, paramKey, value)}
                     >
                       {label}
                       <SidebarCounter>
diff --git a/src/modules/customers/containers/CustomersList.tsx b/src/modules/customers/containers/CustomersList.tsx
index ab92ced32..c9cba09a1 100755
--- a/src/modules/customers/containers/CustomersList.tsx
+++ b/src/modules/customers/containers/CustomersList.tsx
@@ -158,14 +158,15 @@ class CustomerListContainer extends React.Component<IProps, State> {
       removeCustomers
     };
 
-    return (
-      <Bulk
-        content={props => <CustomersList {...updatedProps} {...props} />}
-        refetch={() => {
-          this.props.customersMainQuery.refetch();
-        }}
-      />
-    );
+    const content = props => {
+      return <CustomersList {...updatedProps} {...props} />;
+    };
+
+    const refetch = () => {
+      this.props.customersMainQuery.refetch();
+    };
+
+    return <Bulk content={content} refetch={refetch} />;
   }
 }
 
diff --git a/src/modules/customers/routes.tsx b/src/modules/customers/routes.tsx
index 745f113c1..547a78ec4 100755
--- a/src/modules/customers/routes.tsx
+++ b/src/modules/customers/routes.tsx
@@ -3,30 +3,31 @@ import * as React from 'react';
 import { Route } from 'react-router-dom';
 import { CustomerDetails, CustomersList } from './containers';
 
-const routes = () => (
-  <React.Fragment>
-    <Route
-      key="/customers/details/:id"
-      exact={true}
-      path="/customers/details/:id"
-      component={({ match, location }) => {
-        const queryParams = queryString.parse(location.search);
-        const id = match.params.id;
+const routes = () => {
+  const detail = ({ match, location }) => {
+    const queryParams = queryString.parse(location.search);
+    const id = match.params.id;
 
-        return <CustomerDetails id={id} queryParams={queryParams} />;
-      }}
-    />
+    return <CustomerDetails id={id} queryParams={queryParams} />;
+  };
 
-    <Route
-      key="/customers"
-      exact={true}
-      path="/customers"
-      component={({ location }) => {
-        const queryParams = queryString.parse(location.search);
-        return <CustomersList queryParams={queryParams} location={location} />;
-      }}
-    />
-  </React.Fragment>
-);
+  const list = ({ location }) => {
+    const queryParams = queryString.parse(location.search);
+    return <CustomersList queryParams={queryParams} location={location} />;
+  };
+
+  return (
+    <React.Fragment>
+      <Route
+        key="/customers/details/:id"
+        exact={true}
+        path="/customers/details/:id"
+        component={detail}
+      />
+
+      <Route key="/customers" exact={true} path="/customers" component={list} />
+    </React.Fragment>
+  );
+};
 
 export default routes;
diff --git a/src/modules/deals/routes.tsx b/src/modules/deals/routes.tsx
index 67587bb62..dfc680e93 100644
--- a/src/modules/deals/routes.tsx
+++ b/src/modules/deals/routes.tsx
@@ -3,26 +3,29 @@ import * as React from 'react';
 import { Redirect, Route } from 'react-router-dom';
 import { Home } from './containers';
 
-const routes = () => (
-  <React.Fragment>
-    <Route
-      key="deals"
-      exact={true}
-      path="/deals"
-      render={() => <Redirect to="/deals/board" />}
-    />
+const routes = () => {
+  const deals = () => {
+    return <Redirect to="/deals/board" />;
+  };
 
-    <Route
-      key="deals/board"
-      exact={true}
-      path="/deals/board"
-      component={({ history, location }) => {
-        const queryParams = queryString.parse(location.search);
+  const boards = ({ history, location }) => {
+    const queryParams = queryString.parse(location.search);
 
-        return <Home queryParams={queryParams} history={history} />;
-      }}
-    />
-  </React.Fragment>
-);
+    return <Home queryParams={queryParams} history={history} />;
+  };
+
+  return (
+    <React.Fragment>
+      <Route key="deals" exact={true} path="/deals" render={deals} />
+
+      <Route
+        key="deals/board"
+        exact={true}
+        path="/deals/board"
+        component={boards}
+      />
+    </React.Fragment>
+  );
+};
 
 export default routes;
diff --git a/src/modules/engage/routes.tsx b/src/modules/engage/routes.tsx
index 4ffa4894b..a7b5f755a 100755
--- a/src/modules/engage/routes.tsx
+++ b/src/modules/engage/routes.tsx
@@ -3,43 +3,51 @@ import * as React from 'react';
 import { Route } from 'react-router-dom';
 import { EmailStatistics, MessageForm, MessageList } from './containers';
 
-const routes = () => (
-  <React.Fragment>
-    <Route
-      key="/engage/home"
-      exact={true}
-      path="/engage"
-      component={MessageList}
-    />
-
-    <Route
-      key="/engage/messages/create"
-      exact={true}
-      path="/engage/messages/create"
-      component={({ location }) => {
-        const queryParams = queryString.parse(location.search);
-        return <MessageForm kind={queryParams.kind} />;
-      }}
-    />
-
-    <Route
-      key="/engage/messages/edit"
-      exact={true}
-      path="/engage/messages/edit/:_id"
-      component={({ match }) => {
-        return <MessageForm messageId={match.params._id} />;
-      }}
-    />
-
-    <Route
-      key="/engage/messages/show"
-      exact={true}
-      path="/engage/messages/show/:_id"
-      component={({ match }) => {
-        return <EmailStatistics messageId={match.params._id} />;
-      }}
-    />
-  </React.Fragment>
-);
+const routes = () => {
+  const createForm = ({ location }) => {
+    const queryParams = queryString.parse(location.search);
+    return <MessageForm kind={queryParams.kind} />;
+  };
+
+  const editForm = ({ match }) => {
+    return <MessageForm messageId={match.params._id} />;
+  };
+
+  const statistic = ({ match }) => {
+    return <EmailStatistics messageId={match.params._id} />;
+  };
+
+  return (
+    <React.Fragment>
+      <Route
+        key="/engage/home"
+        exact={true}
+        path="/engage"
+        component={MessageList}
+      />
+
+      <Route
+        key="/engage/messages/create"
+        exact={true}
+        path="/engage/messages/create"
+        component={createForm}
+      />
+
+      <Route
+        key="/engage/messages/edit"
+        exact={true}
+        path="/engage/messages/edit/:_id"
+        component={editForm}
+      />
+
+      <Route
+        key="/engage/messages/show"
+        exact={true}
+        path="/engage/messages/show/:_id"
+        component={statistic}
+      />
+    </React.Fragment>
+  );
+};
 
 export default routes;
diff --git a/src/modules/forms/routes.tsx b/src/modules/forms/routes.tsx
index 2bcae6161..264d463f7 100644
--- a/src/modules/forms/routes.tsx
+++ b/src/modules/forms/routes.tsx
@@ -3,46 +3,49 @@ import * as React from 'react';
 import { Route } from 'react-router-dom';
 import { CreateForm, EditForm, List } from './containers';
 
-const routes = () => (
-  <React.Fragment>
-    <Route
-      exact={true}
-      key="/forms"
-      path="/forms"
-      component={({ location }) => {
-        const queryParams = queryString.parse(location.search);
-        return <List queryParams={queryParams} />;
-      }}
-    />
-
-    <Route
-      key="/forms/create"
-      exact={true}
-      path="/forms/create"
-      component={({ location }) => {
-        const queryParams = queryString.parse(location.search);
-        return <CreateForm queryParams={queryParams} />;
-      }}
-    />
-
-    <Route
-      key="/forms/edit/:contentTypeId?/:formId?"
-      exact={true}
-      path="/forms/edit/:contentTypeId/:formId"
-      component={({ match, location }) => {
-        const { contentTypeId, formId } = match.params;
-        const queryParams = queryString.parse(location.search);
-
-        return (
-          <EditForm
-            queryParams={queryParams}
-            contentTypeId={contentTypeId}
-            formId={formId}
-          />
-        );
-      }}
-    />
-  </React.Fragment>
-);
+const routes = () => {
+  const forms = ({ location }) => {
+    const queryParams = queryString.parse(location.search);
+    return <List queryParams={queryParams} />;
+  };
+
+  const createForm = ({ location }) => {
+    const queryParams = queryString.parse(location.search);
+    return <CreateForm queryParams={queryParams} />;
+  };
+
+  const editForm = ({ match, location }) => {
+    const { contentTypeId, formId } = match.params;
+    const queryParams = queryString.parse(location.search);
+
+    return (
+      <EditForm
+        queryParams={queryParams}
+        contentTypeId={contentTypeId}
+        formId={formId}
+      />
+    );
+  };
+
+  return (
+    <React.Fragment>
+      <Route exact={true} key="/forms" path="/forms" component={forms} />
+
+      <Route
+        key="/forms/create"
+        exact={true}
+        path="/forms/create"
+        component={createForm}
+      />
+
+      <Route
+        key="/forms/edit/:contentTypeId?/:formId?"
+        exact={true}
+        path="/forms/edit/:contentTypeId/:formId"
+        component={editForm}
+      />
+    </React.Fragment>
+  );
+};
 
 export default routes;
diff --git a/src/modules/inbox/components/conversationDetail/workarea/RespondBox.tsx b/src/modules/inbox/components/conversationDetail/workarea/RespondBox.tsx
index 15a564088..c5e27b8fc 100644
--- a/src/modules/inbox/components/conversationDetail/workarea/RespondBox.tsx
+++ b/src/modules/inbox/components/conversationDetail/workarea/RespondBox.tsx
@@ -152,7 +152,9 @@ class RespondBox extends React.Component<Props, State> {
     uploadHandler({
       files,
 
-      beforeUpload: () => {},
+      beforeUpload: () => {
+        return;
+      },
 
       afterUpload: ({ response, fileInfo }) => {
         // set attachments
diff --git a/src/modules/inbox/components/conversationDetail/workarea/conversation/twitter/TwitterVideoEmbed.tsx b/src/modules/inbox/components/conversationDetail/workarea/conversation/twitter/TwitterVideoEmbed.tsx
index 74b97a3d3..10b211b8c 100644
--- a/src/modules/inbox/components/conversationDetail/workarea/conversation/twitter/TwitterVideoEmbed.tsx
+++ b/src/modules/inbox/components/conversationDetail/workarea/conversation/twitter/TwitterVideoEmbed.tsx
@@ -19,7 +19,7 @@ class TwitterVideoEmbed extends React.Component<Props, {}> {
   componentDidMount() {
     script.ready('twitter-embed', () => {
       if (!(window as any).twttr) {
-        console.error('Failure to load window.twttr, aborting load.');
+        console.error('Failure to load window.twttr, aborting load.'); //tslint:disable-line
         return;
       }
 
diff --git a/src/modules/inbox/containers/conversationDetail/Sidebar.tsx b/src/modules/inbox/containers/conversationDetail/Sidebar.tsx
index f29fb2c58..11d99aeac 100644
--- a/src/modules/inbox/containers/conversationDetail/Sidebar.tsx
+++ b/src/modules/inbox/containers/conversationDetail/Sidebar.tsx
@@ -76,7 +76,7 @@ class Sidebar extends React.Component<Props, State> {
         }
       })
       .catch(error => {
-        console.log(error.message); // eslint-disable-line
+        console.log(error.message); // tslint:disable-line
       });
 
     return;
diff --git a/src/modules/inbox/routes.tsx b/src/modules/inbox/routes.tsx
index d8c5ab8c5..b79b9158b 100644
--- a/src/modules/inbox/routes.tsx
+++ b/src/modules/inbox/routes.tsx
@@ -2,16 +2,17 @@ import * as React from 'react';
 import { Redirect, Route } from 'react-router-dom';
 import { Inbox } from './containers';
 
-const routes = () => (
-  <React.Fragment>
-    <Route
-      exact={true}
-      path="/"
-      key="index"
-      render={() => <Redirect to="/inbox" />}
-    />
-    <Route exact={true} key="inbox" path="/inbox" component={Inbox} />
-  </React.Fragment>
-);
+const routes = () => {
+  const index = () => {
+    return <Redirect to="/inbox" />;
+  };
+
+  return (
+    <React.Fragment>
+      <Route exact={true} path="/" key="index" render={index} />
+      <Route exact={true} key="inbox" path="/inbox" component={Inbox} />
+    </React.Fragment>
+  );
+};
 
 export default routes;
diff --git a/src/modules/insights/routes.tsx b/src/modules/insights/routes.tsx
index a12bca7b8..1bf3bcb5e 100755
--- a/src/modules/insights/routes.tsx
+++ b/src/modules/insights/routes.tsx
@@ -16,71 +16,69 @@ const AsyncInsightPage = asyncComponent(() =>
   import('./components/InsightPage')
 );
 
-const routes = () => (
-  <React.Fragment>
-    <Route
-      key="/insights/response-report"
-      exact={true}
-      path="/insights/response-report"
-      component={() => {
-        return (
-          <AsyncReports
-            type="response"
-            component={AsyncVolumeAndResponseReport}
-          />
-        );
-      }}
-    />
+const routes = () => {
+  const responseReport = () => {
+    return (
+      <AsyncReports type="response" component={AsyncVolumeAndResponseReport} />
+    );
+  };
 
-    <Route
-      key="/insights/response-close-report"
-      exact={true}
-      path="/insights/response-close-report"
-      component={() => {
-        return (
-          <AsyncReports
-            type="close"
-            component={AsyncFirstAndCloseResponseReport}
-          />
-        );
-      }}
-    />
+  const responseCloseReport = () => {
+    return (
+      <AsyncReports type="close" component={AsyncFirstAndCloseResponseReport} />
+    );
+  };
 
-    <Route
-      key="/insights/first-response"
-      exact={true}
-      path="/insights/first-response"
-      component={() => {
-        return (
-          <AsyncReports
-            type="first"
-            component={AsyncFirstAndCloseResponseReport}
-          />
-        );
-      }}
-    />
+  const firstResponse = () => {
+    return (
+      <AsyncReports type="first" component={AsyncFirstAndCloseResponseReport} />
+    );
+  };
 
-    <Route
-      key="/insights/volume-report"
-      exact={true}
-      path="/insights/volume-report"
-      component={() => {
-        return (
-          <AsyncReports
-            type="volume"
-            component={AsyncVolumeAndResponseReport}
-          />
-        );
-      }}
-    />
+  const volumeReport = () => {
+    return (
+      <AsyncReports type="volume" component={AsyncVolumeAndResponseReport} />
+    );
+  };
 
-    <Route
-      key="/insights"
-      exact={true}
-      path="/insights"
-      component={AsyncInsightPage}
-    />
-  </React.Fragment>
-);
+  return (
+    <React.Fragment>
+      <Route
+        key="/insights/response-report"
+        exact={true}
+        path="/insights/response-report"
+        component={responseReport}
+      />
+
+      <Route
+        key="/insights/response-close-report"
+        exact={true}
+        path="/insights/response-close-report"
+        component={responseCloseReport}
+      />
+
+      <Route
+        key="/insights/first-response"
+        exact={true}
+        path="/insights/first-response"
+        component={firstResponse}
+      />
+
+      <Route
+        key="/insights/volume-report"
+        exact={true}
+        path="/insights/volume-report"
+        component={volumeReport}
+      />
+
+      <Route
+        key="/insights"
+        exact={true}
+        path="/insights"
+        component={AsyncInsightPage}
+      />
+    </React.Fragment>
+  );
+};
 
 export default routes;
diff --git a/src/modules/knowledgeBase/components/knowledge/KnowledgeForm.tsx b/src/modules/knowledgeBase/components/knowledge/KnowledgeForm.tsx
index f7989797f..8fb208d5d 100644
--- a/src/modules/knowledgeBase/components/knowledge/KnowledgeForm.tsx
+++ b/src/modules/knowledgeBase/components/knowledge/KnowledgeForm.tsx
@@ -82,8 +82,8 @@ class KnowledgeForm extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
 
-    let code = '',
-      color = colors.colorPrimary;
+    let code = '';
+    let color = colors.colorPrimary;
 
     // showed install code automatically in edit mode
     if (props.topic) {
diff --git a/src/modules/notifications/routes.tsx b/src/modules/notifications/routes.tsx
index b29daae12..0cdbb5c7b 100644
--- a/src/modules/notifications/routes.tsx
+++ b/src/modules/notifications/routes.tsx
@@ -3,16 +3,20 @@ import * as React from 'react';
 import { Route } from 'react-router-dom';
 import { NotificationList } from './containers';
 
-const routes = () => (
-  <Route
-    path="/notifications"
-    exact={true}
-    key="/notifications"
-    component={({ location }) => {
-      const queryParams = queryString.parse(location.search);
-      return <NotificationList queryParams={queryParams} />;
-    }}
-  />
-);
+const routes = () => {
+  const notification = ({ location }) => {
+    const queryParams = queryString.parse(location.search);
+    return <NotificationList queryParams={queryParams} />;
+  };
+
+  return (
+    <Route
+      path="/notifications"
+      exact={true}
+      key="/notifications"
+      component={notification}
+    />
+  );
+};
 
 export default routes;
diff --git a/src/modules/segments/routes.tsx b/src/modules/segments/routes.tsx
index 5d3d4631b..3c6d86111 100755
--- a/src/modules/segments/routes.tsx
+++ b/src/modules/segments/routes.tsx
@@ -2,43 +2,49 @@ import * as React from 'react';
 import { Route } from 'react-router-dom';
 import { SegmentsForm, SegmentsList } from './containers';
 
-const routes = () => (
-  <React.Fragment>
-    <Route
-      key="/segments/:contentType"
-      exact={true}
-      path="/segments/:contentType"
-      component={({ match }) => {
-        const contentType = match.params.contentType;
-
-        return <SegmentsList contentType={contentType} />;
-      }}
-    />
-
-    <Route
-      key="/segments/new/:contentType"
-      exact={true}
-      path="/segments/new/:contentType"
-      component={({ match, history }) => {
-        const contentType = match.params.contentType;
-
-        return <SegmentsForm history={history} contentType={contentType} />;
-      }}
-    />
-
-    <Route
-      key="/segments/edit/:contentType/:id"
-      exact={true}
-      path="/segments/edit/:contentType/:id"
-      component={({ match, history }) => {
-        const { id, contentType } = match.params;
-
-        return (
-          <SegmentsForm id={id} history={history} contentType={contentType} />
-        );
-      }}
-    />
-  </React.Fragment>
-);
+const routes = () => {
+  const segments = ({ match }) => {
+    const contentType = match.params.contentType;
+
+    return <SegmentsList contentType={contentType} />;
+  };
+
+  const segmentsForm = ({ match, history }) => {
+    const contentType = match.params.contentType;
+
+    return <SegmentsForm history={history} contentType={contentType} />;
+  };
+
+  const segmentsEditForm = ({ match, history }) => {
+    const { id, contentType } = match.params;
+
+    return <SegmentsForm id={id} history={history} contentType={contentType} />;
+  };
+
+  return (
+    <React.Fragment>
+      <Route
+        key="/segments/:contentType"
+        exact={true}
+        path="/segments/:contentType"
+        component={segments}
+      />
+
+      <Route
+        key="/segments/new/:contentType"
+        exact={true}
+        path="/segments/new/:contentType"
+        component={segmentsForm}
+      />
+
+      <Route
+        key="/segments/edit/:contentType/:id"
+        exact={true}
+        path="/segments/edit/:contentType/:id"
+        component={segmentsEditForm}
+      />
+    </React.Fragment>
+  );
+};
 
 export default routes;
diff --git a/src/modules/settings/email/routes.tsx b/src/modules/settings/email/routes.tsx
index f495e75d4..bd794728d 100755
--- a/src/modules/settings/email/routes.tsx
+++ b/src/modules/settings/email/routes.tsx
@@ -3,26 +3,32 @@ import * as React from 'react';
 import { Route } from 'react-router-dom';
 import { List, Signature } from './containers';
 
-const routes = () => (
-  <React.Fragment>
-    <Route
-      key="/settings/emails/"
-      exact={true}
-      path="/settings/emails/"
-      component={({ location }) => {
-        return <List queryParams={queryString.parse(location.search)} />;
-      }}
-    />
+const routes = () => {
+  const emails = ({ location }) => {
+    return <List queryParams={queryString.parse(location.search)} />;
+  };
 
-    <Route
-      key="/settings/emails/signatures"
-      exact={true}
-      path="/settings/emails/signatures"
-      component={({ location }) => {
-        return <Signature queryParams={queryString.parse(location.search)} />;
-      }}
-    />
-  </React.Fragment>
-);
+  const emailSignatures = ({ location }) => {
+    return <Signature queryParams={queryString.parse(location.search)} />;
+  };
+
+  return (
+    <React.Fragment>
+      <Route
+        key="/settings/emails/"
+        exact={true}
+        path="/settings/emails/"
+        component={emails}
+      />
+
+      <Route
+        key="/settings/emails/signatures"
+        exact={true}
+        path="/settings/emails/signatures"
+        component={emailSignatures}
+      />
+    </React.Fragment>
+  );
+};
 
 export default routes;
diff --git a/src/modules/settings/emailTemplates/routes.tsx b/src/modules/settings/emailTemplates/routes.tsx
index 2a0c0de30..4fb3517cd 100755
--- a/src/modules/settings/emailTemplates/routes.tsx
+++ b/src/modules/settings/emailTemplates/routes.tsx
@@ -3,13 +3,12 @@ import * as React from 'react';
 import { Route } from 'react-router-dom';
 import { List } from './containers';
 
-const routes = () => (
-  <Route
-    path="/settings/email-templates/"
-    component={({ location }) => {
-      return <List queryParams={queryString.parse(location.search)} />;
-    }}
-  />
-);
+const routes = () => {
+  const emailTemplates = ({ location }) => {
+    return <List queryParams={queryString.parse(location.search)} />;
+  };
+
+  return <Route path="/settings/email-templates/" component={emailTemplates} />;
+};
 
 export default routes;
diff --git a/src/modules/settings/general/routes.tsx b/src/modules/settings/general/routes.tsx
index 08efd0d65..ec094189e 100755
--- a/src/modules/settings/general/routes.tsx
+++ b/src/modules/settings/general/routes.tsx
@@ -3,13 +3,12 @@ import * as React from 'react';
 import { Route } from 'react-router-dom';
 import { List } from './containers';
 
-const routes = () => (
-  <Route
-    path="/settings/general/"
-    component={({ location }) => {
-      return <List queryParams={queryString.parse(location.search)} />;
-    }}
-  />
-);
+const routes = () => {
+  const general = ({ location }) => {
+    return <List queryParams={queryString.parse(location.search)} />;
+  };
+
+  return <Route path="/settings/general/" component={general} />;
+};
 
 export default routes;
diff --git a/src/modules/settings/importHistory/routes.tsx b/src/modules/settings/importHistory/routes.tsx
index 79948f1e4..6f262da5e 100644
--- a/src/modules/settings/importHistory/routes.tsx
+++ b/src/modules/settings/importHistory/routes.tsx
@@ -3,14 +3,16 @@ import * as React from 'react';
 import { Route } from 'react-router-dom';
 import { Histories } from './containers';
 
-const routes = () => (
-  <Route
-    path="/settings/importHistories/"
-    component={({ location }) => {
-      const queryParams = queryString.parse(location.search);
-      return <Histories queryParams={queryParams} />;
-    }}
-  />
-);
+const routes = () => {
+  const importHistories = ({ location }) => {
+    const queryParams = queryString.parse(location.search);
+
+    return <Histories queryParams={queryParams} />;
+  };
+
+  return (
+    <Route path="/settings/importHistories/" component={importHistories} />
+  );
+};
 
 export default routes;
diff --git a/src/modules/settings/integrations/components/google/MailForm.tsx b/src/modules/settings/integrations/components/google/MailForm.tsx
index 0c8d02835..a74151d6b 100644
--- a/src/modules/settings/integrations/components/google/MailForm.tsx
+++ b/src/modules/settings/integrations/components/google/MailForm.tsx
@@ -116,7 +116,9 @@ class MailForm extends React.Component<Props, State> {
     uploadHandler({
       files,
 
-      beforeUpload: () => {},
+      beforeUpload: () => {
+        return;
+      },
 
       afterUpload: ({ response, fileInfo }) => {
         if (this.state.totalFileSize > 10368000) {
diff --git a/src/modules/settings/integrations/routes.tsx b/src/modules/settings/integrations/routes.tsx
index 5998acba4..c3fdb9aec 100755
--- a/src/modules/settings/integrations/routes.tsx
+++ b/src/modules/settings/integrations/routes.tsx
@@ -7,112 +7,116 @@ import EditMessenger from './containers/messenger/Edit';
 import Store from './containers/Store';
 import Twitter from './containers/twitter/Form';
 
-const routes = () => (
-  <React.Fragment>
-    <Route
-      key="/settings/integrations/createMessenger"
-      exact={true}
-      path="/settings/integrations/createMessenger"
-      component={({ location }) => {
-        return (
-          <CreateMessenger queryParams={queryString.parse(location.search)} />
-        );
-      }}
-    />
-
-    <Route
-      key="/settings/integrations/editMessenger/:_id"
-      exact={true}
-      path="/settings/integrations/editMessenger/:_id"
-      component={({ match }) => {
-        return <EditMessenger integrationId={match.params._id} />;
-      }}
-    />
-
-    <Route
-      key="/settings/integrations/twitter"
-      exact={true}
-      path="/settings/integrations/twitter"
-      component={() => <Twitter type="link" />}
-    />
-
-    <Route
-      key="/settings/integrations/google-calendar"
-      exact={true}
-      path="/settings/integrations/google-calendar"
-      component={({ history, location }) => {
-        const queryParams = queryString.parse(location.search);
-
-        return (
-          <GoogleCalendar
-            type="link"
-            history={history}
-            queryParams={queryParams}
-          />
-        );
-      }}
-    />
-
-    <Route
-      key="/settings/integrations/gmail"
-      exact={true}
-      path="/settings/integrations/gmail"
-      component={({ history, location }) => {
-        const queryParams = queryString.parse(location.search);
-
-        return (
-          <Gmail type="link" history={history} queryParams={queryParams} />
-        );
-      }}
-    />
-
-    <Route
-      key="/service/oauth/twitter_callback"
-      path="/service/oauth/twitter_callback"
-      component={({ history, location }) => {
-        const queryParams = queryString.parse(location.search);
-
-        return (
-          <Twitter type="form" history={history} queryParams={queryParams} />
-        );
-      }}
-    />
-
-    <Route
-      key="/service/oauth/google_callback"
-      path="/service/oauth/google_callback"
-      component={({ history, location }) => {
-        const queryParams = queryString.parse(location.search);
-
-        return (
-          <GoogleCalendar
-            type="form"
-            history={history}
-            queryParams={queryParams}
-          />
-        );
-      }}
-    />
-
-    <Route
-      key="/service/oauth/gmail_callback"
-      path="/service/oauth/gmail_callback"
-      component={({ history, location }) => {
-        const queryParams = queryString.parse(location.search);
-
-        return (
-          <Gmail type="form" history={history} queryParams={queryParams} />
-        );
-      }}
-    />
-
-    <Route
-      key="/settings/integrations"
-      exact={true}
-      path="/settings/integrations"
-      component={() => <Store />}
-    />
-  </React.Fragment>
-);
+const routes = () => {
+  const createMessenger = ({ location }) => {
+    return <CreateMessenger queryParams={queryString.parse(location.search)} />;
+  };
+
+  const editMessenger = ({ match }) => {
+    return <EditMessenger integrationId={match.params._id} />;
+  };
+
+  const twitter = () => {
+    return <Twitter type="link" />;
+  };
+
+  const googleCalendar = ({ history, location }) => {
+    const queryParams = queryString.parse(location.search);
+
+    return (
+      <GoogleCalendar type="link" history={history} queryParams={queryParams} />
+    );
+  };
+
+  const gmail = ({ history, location }) => {
+    const queryParams = queryString.parse(location.search);
+
+    return <Gmail type="link" history={history} queryParams={queryParams} />;
+  };
+
+  const twitterCallback = ({ history, location }) => {
+    const queryParams = queryString.parse(location.search);
+
+    return <Twitter type="form" history={history} queryParams={queryParams} />;
+  };
+
+  const googleCallback = ({ history, location }) => {
+    const queryParams = queryString.parse(location.search);
+
+    return (
+      <GoogleCalendar type="form" history={history} queryParams={queryParams} />
+    );
+  };
+
+  const gmailCallback = ({ location, history }) => {
+    const queryParams = queryString.parse(location.search);
+
+    return <Gmail type="form" history={history} queryParams={queryParams} />;
+  };
+
+  return (
+    <React.Fragment>
+      <Route
+        key="/settings/integrations/createMessenger"
+        exact={true}
+        path="/settings/integrations/createMessenger"
+        component={createMessenger}
+      />
+
+      <Route
+        key="/settings/integrations/editMessenger/:_id"
+        exact={true}
+        path="/settings/integrations/editMessenger/:_id"
+        component={editMessenger}
+      />
+
+      <Route
+        key="/settings/integrations/twitter"
+        exact={true}
+        path="/settings/integrations/twitter"
+        component={twitter}
+      />
+
+      <Route
+        key="/settings/integrations/google-calendar"
+        exact={true}
+        path="/settings/integrations/google-calendar"
+        component={googleCalendar}
+      />
+
+      <Route
+        key="/settings/integrations/gmail"
+        exact={true}
+        path="/settings/integrations/gmail"
+        component={gmail}
+      />
+
+      <Route
+        key="/service/oauth/twitter_callback"
+        path="/service/oauth/twitter_callback"
+        component={twitterCallback}
+      />
+
+      <Route
+        key="/service/oauth/google_callback"
+        path="/service/oauth/google_callback"
+        component={googleCallback}
+      />
+
+      <Route
+        key="/service/oauth/gmail_callback"
+        path="/service/oauth/gmail_callback"
+        component={gmailCallback}
+      />
+
+      <Route
+        key="/settings/integrations"
+        exact={true}
+        path="/settings/integrations"
+        component={Store}
+      />
+    </React.Fragment>
+  );
+};
 
 export default routes;
diff --git a/src/modules/settings/productService/routes.tsx b/src/modules/settings/productService/routes.tsx
index 2814e8211..b92d3e285 100644
--- a/src/modules/settings/productService/routes.tsx
+++ b/src/modules/settings/productService/routes.tsx
@@ -3,13 +3,12 @@ import * as React from 'react';
 import { Route } from 'react-router-dom';
 import { List } from './containers';
 
-const routes = () => (
-  <Route
-    path="/settings/product-service/"
-    component={({ location }) => {
-      return <List queryParams={queryString.parse(location.search)} />;
-    }}
-  />
-);
+const routes = () => {
+  const productService = ({ location }) => {
+    return <List queryParams={queryString.parse(location.search)} />;
+  };
+
+  return <Route path="/settings/product-service/" component={productService} />;
+};
 
 export default routes;
diff --git a/src/modules/settings/profile/routes.tsx b/src/modules/settings/profile/routes.tsx
index b46a3e90c..15cfe0699 100755
--- a/src/modules/settings/profile/routes.tsx
+++ b/src/modules/settings/profile/routes.tsx
@@ -3,18 +3,17 @@ import * as React from 'react';
 import { Route } from 'react-router-dom';
 import { Profile } from './containers';
 
-const routes = () => (
-  <React.Fragment>
-    <Route
-      path="/profile"
-      exact={true}
-      key="/profile"
-      component={({ location }) => {
-        const queryParams = queryString.parse(location.search);
-        return <Profile queryParams={queryParams} />;
-      }}
-    />
-  </React.Fragment>
-);
+const routes = () => {
+  const profile = ({ location }) => {
+    const queryParams = queryString.parse(location.search);
+    return <Profile queryParams={queryParams} />;
+  };
+
+  return (
+    <React.Fragment>
+      <Route path="/profile" exact={true} key="/profile" component={profile} />
+    </React.Fragment>
+  );
+};
 
 export default routes;
diff --git a/src/modules/settings/properties/routes.tsx b/src/modules/settings/properties/routes.tsx
index 64aeb315b..5fe9318d2 100644
--- a/src/modules/settings/properties/routes.tsx
+++ b/src/modules/settings/properties/routes.tsx
@@ -3,14 +3,13 @@ import * as React from 'react';
 import { Route } from 'react-router-dom';
 import { Properties } from './containers';
 
-const routes = () => (
-  <Route
-    path="/settings/properties/"
-    component={({ location }) => {
-      const queryParams = queryString.parse(location.search);
-      return <Properties queryParams={queryParams} />;
-    }}
-  />
-);
+const routes = () => {
+  const properties = ({ location }) => {
+    const queryParams = queryString.parse(location.search);
+    return <Properties queryParams={queryParams} />;
+  };
+
+  return <Route path="/settings/properties/" component={properties} />;
+};
 
 export default routes;
diff --git a/src/modules/settings/responseTemplates/routes.tsx b/src/modules/settings/responseTemplates/routes.tsx
index 1ef0a8af4..21e2f0382 100755
--- a/src/modules/settings/responseTemplates/routes.tsx
+++ b/src/modules/settings/responseTemplates/routes.tsx
@@ -3,13 +3,14 @@ import * as React from 'react';
 import { Route } from 'react-router-dom';
 import { List } from './containers';
 
-const routes = () => (
-  <Route
-    path="/settings/response-templates/"
-    component={({ location }) => {
-      return <List queryParams={queryString.parse(location.search)} />;
-    }}
-  />
-);
+const routes = () => {
+  const responseTemplates = ({ location }) => {
+    return <List queryParams={queryString.parse(location.search)} />;
+  };
+
+  return (
+    <Route path="/settings/response-templates/" component={responseTemplates} />
+  );
+};
 
 export default routes;
diff --git a/src/modules/settings/team/routes.tsx b/src/modules/settings/team/routes.tsx
index 2804d61e9..340192b92 100755
--- a/src/modules/settings/team/routes.tsx
+++ b/src/modules/settings/team/routes.tsx
@@ -4,30 +4,36 @@ import { Route } from 'react-router-dom';
 import { UserList } from './containers';
 import { UserDetail } from './containers';
 
-const routes = () => (
-  <React.Fragment>
-    <Route
-      path="/settings/team/"
-      exact={true}
-      key="/settings/team/"
-      component={({ history, location }) => {
-        const queryParams = queryString.parse(location.search);
-        return <UserList queryParams={queryParams} history={history} />;
-      }}
-    />
+const routes = () => {
+  const team = ({ history, location }) => {
+    const queryParams = queryString.parse(location.search);
+    return <UserList queryParams={queryParams} history={history} />;
+  };
 
-    <Route
-      key="/settings/team/details/:id"
-      exact={true}
-      path="/settings/team/details/:id"
-      component={({ match, location }) => {
-        const queryParams = queryString.parse(location.search);
-        const id = match.params.id;
+  const userDetail = ({ match, location }) => {
+    const queryParams = queryString.parse(location.search);
+    const id = match.params.id;
 
-        return <UserDetail _id={id} queryParams={queryParams} />;
-      }}
-    />
-  </React.Fragment>
-);
+    return <UserDetail _id={id} queryParams={queryParams} />;
+  };
+
+  return (
+    <React.Fragment>
+      <Route
+        path="/settings/team/"
+        exact={true}
+        key="/settings/team/"
+        component={team}
+      />
+
+      <Route
+        key="/settings/team/details/:id"
+        exact={true}
+        path="/settings/team/details/:id"
+        component={userDetail}
+      />
+    </React.Fragment>
+  );
+};
 
 export default routes;
diff --git a/src/modules/tags/routes.tsx b/src/modules/tags/routes.tsx
index fc1650e92..c4499d81a 100755
--- a/src/modules/tags/routes.tsx
+++ b/src/modules/tags/routes.tsx
@@ -2,13 +2,12 @@ import * as React from 'react';
 import { Route } from 'react-router-dom';
 import { List } from './containers';
 
-const routes = () => (
-  <Route
-    path="/tags/:type"
-    component={({ match }) => {
-      return <List type={match.params.type} />;
-    }}
-  />
-);
+const routes = () => {
+  const tags = ({ match }) => {
+    return <List type={match.params.type} />;
+  };
+
+  return <Route path="/tags/:type" component={tags} />;
+};
 
 export default routes;
diff --git a/tslint.json b/tslint.json
index d4ada5dae..aff586f09 100644
--- a/tslint.json
+++ b/tslint.json
@@ -4,15 +4,9 @@
     "exclude": ["node_modules/**/*.ts"]
   },
   "rules": {
-    "no-var-requires": false,
     "object-literal-sort-keys": false,
-    "no-unused-expression": [true, "allow-tagged-template"],
     "interface-over-type-literal": false,
-    "no-empty": false,
-    "one-variable-per-declaration": false,
-    "no-console": false, // allow some console statements for debugging
     "member-access": false, // start without having to write public, private modifier
-    "jsx-no-lambda": false, // lambdas in render are bad for performance but this can be annoying during prototyping
     "max-classes-per-file": false
   }
 }