diff --git a/client/src/components/ContactSelecetList.js b/client/src/components/ContactSelecetList.js
new file mode 100644
index 000000000..f43b8e281
--- /dev/null
+++ b/client/src/components/ContactSelecetList.js
@@ -0,0 +1,63 @@
+import React, { useCallback, useState, useEffect, useMemo } from 'react';
+import { FormattedMessage as T } from 'react-intl';
+import { ListSelect } from 'components';
+import { MenuItem } from '@blueprintjs/core';
+
+export default function ContactSelecetList({
+  contactsList,
+  selectedContactId,
+  defaultSelectText = <T id={'select_contact'} />,
+  onContactSelected,
+  // disabled = false,
+  ...restProps
+}) {
+  const [selecetedContact, setSelectedContact] = useState(null);
+
+  // Filter Contact List
+  const FilterContacts = (query, contact, index, exactMatch) => {
+    const normalizedTitle = contact.display_name.toLowerCase();
+    const normalizedQuery = query.toLowerCase();
+    if (exactMatch) {
+      return normalizedTitle === normalizedQuery;
+    } else {
+      return (
+        `${contact.display_name} ${normalizedTitle}`.indexOf(normalizedQuery) >=
+        0
+      );
+    }
+  };
+ 
+  const onContactSelect = useCallback(
+    (contact) => {
+      setSelectedContact({ ...contact });
+      onContactSelected && onContactSelected(contact);
+    },
+    [setSelectedContact, onContactSelected],
+  );
+
+  const handleContactRenderer = useCallback(
+    (contact, { handleClick }) => (
+      <MenuItem
+        key={contact.id}
+        text={contact.display_name}
+        onClick={handleClick}
+      />
+    ),
+    [],
+  );
+
+  return (
+    <ListSelect
+      items={contactsList}
+      selectedItemProp={'id'}
+      selectedItem={selectedContactId}
+      labelProp={'display_name'}
+      defaultText={defaultSelectText}
+      onItemSelect={onContactSelect}
+      itemPredicate={FilterContacts}
+      itemRenderer={handleContactRenderer}
+      popoverProps={{ minimal: true }}
+      {...restProps}
+    />
+  );
+}
diff --git a/client/src/components/VendorSelecetList.js b/client/src/components/VendorSelecetList.js
deleted file mode 100644
index 12ad1e61e..000000000
--- a/client/src/components/VendorSelecetList.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import React, { useCallback } from 'react';
-import { FormattedMessage as T } from 'react-intl';
-import { ListSelect } from 'components';
-import { MenuItem } from '@blueprintjs/core';
-
-export default function VendorSelecetList({
-  vendorsList,
-  selectedVendorId,
-  defaultSelectText = <T id={'select_vender_account'} />,
-  onVenderSelected,
-  // disabled = false,
-  ...restProps
-}) {
-  // Filter Vendors List
-  const FilterVendors = (query, vender, index, exactMatch) => {
-    const normalizedTitle = vender.display_name.toLowerCase();
-    const normalizedQuery = query.toLowerCase();
-    if (exactMatch) {
-      return normalizedTitle === normalizedQuery;
-    } else {
-      return (
-        `${vender.display_name} ${normalizedTitle}`.indexOf(normalizedQuery) >=
-        0
-      );
-    }
-  };
-
-  const handleVendorSelected = useCallback(
-    (Vendor) => onVenderSelected && onVenderSelected(Vendor),
-    [],
-  );
-
-  const handleVenderRenderer = useCallback(
-    (vender, { handleClick }) => (
-      <MenuItem
-        key={vender.id}
-        text={vender.display_name}
-        onClick={handleClick}
-      />
-    ),
-    [],
-  );
-
-  return (
-    <ListSelect
-      items={vendorsList}
-      selectedItemProp={'id'}
-      selectedItem={selectedVendorId}
-      labelProp={'display_name'}
-      defaultText={defaultSelectText}
-      onItemSelect={handleVendorSelected}
-      itemPredicate={FilterVendors}
-      itemRenderer={handleVenderRenderer}
-      popoverProps={{ minimal: true }}
-      {...restProps}
-    />
-  );
-}
diff --git a/client/src/components/index.js b/client/src/components/index.js
index 2d8669398..31a83a3c1 100644
--- a/client/src/components/index.js
+++ b/client/src/components/index.js
@@ -30,7 +30,7 @@ import Row from './Grid/Row';
 import Col from './Grid/Col';
 import CloudLoadingIndicator from './CloudLoadingIndicator';
 import MoneyExchangeRate from './MoneyExchangeRate';
-import VendorSelecetList from './VendorSelecetList';
+import ContactSelecetList from './ContactSelecetList';
 
 const Hint = FieldHint;
 
@@ -68,5 +68,5 @@ export {
   Row,
   CloudLoadingIndicator,
   MoneyExchangeRate,
-  VendorSelecetList,
+  ContactSelecetList ,
 };
diff --git a/client/src/containers/Expenses/ExpenseFormHeader.js b/client/src/containers/Expenses/ExpenseFormHeader.js
index e15afc1f8..1f128b644 100644
--- a/client/src/containers/Expenses/ExpenseFormHeader.js
+++ b/client/src/containers/Expenses/ExpenseFormHeader.js
@@ -15,6 +15,7 @@ import { momentFormatter, compose, tansformDateValue } from 'utils';
 import classNames from 'classnames';
 import {
   ListSelect,
+  ContactSelecetList,
   ErrorMessage,
   AccountsSelectList,
   FieldRequiredHint,
@@ -29,7 +30,7 @@ function ExpenseFormHeader({
   currenciesList,
   accountsList,
   accountsTypes,
-  customersItems,
+  customers,
 }) {
   const [selectedItems, setSelectedItems] = useState({});
 
@@ -101,21 +102,6 @@ function ExpenseFormHeader({
     [],
   );
 
-  // Filter Customer
-  const filterCustomer = (query, customer, _index, exactMatch) => {
-    const normalizedTitle = customer.display_name.toLowerCase();
-    const normalizedQuery = query.toLowerCase();
-    if (exactMatch) {
-      return normalizedTitle === normalizedQuery;
-    } else {
-      return (
-        `${customer.display_name} ${normalizedTitle}`.indexOf(
-          normalizedQuery,
-        ) >= 0
-      );
-    }
-  };
-
   // handle change customer
   const onChangeCustomer = useCallback(
     (filedName) => {
@@ -142,17 +128,11 @@ function ExpenseFormHeader({
               />
             }
           >
-            <ListSelect
-              items={customersItems}
-              noResults={<MenuItem disabled={true} text="No results." />}
-              itemRenderer={CustomerRenderer}
-              itemPredicate={filterCustomer}
-              popoverProps={{ minimal: true }}
-              onItemSelect={onChangeCustomer('customer_id')}
-              selectedItem={values.customer_id}
-              selectedItemProp={'id'}
-              defaultText={<T id={'select_customer_account'} />}
-              labelProp={'display_name'}
+            <ContactSelecetList
+              contactsList={customers}
+              selectedContactId={values.customer_id}
+              defaultSelectText={<T id={'select_customer_account'} />}
+              onContactSelected={onChangeCustomer('customer_id')}
             />
           </FormGroup>
         </Col>
@@ -273,7 +253,7 @@ export default compose(
   withCurrencies(({ currenciesList }) => ({
     currenciesList,
   })),
-  withCustomers(({ customersItems }) => ({
-    customersItems,
+  withCustomers(({ customers }) => ({
+    customers,
   })),
 )(ExpenseFormHeader);
diff --git a/client/src/containers/Purchases/Bill/BillFormHeader.js b/client/src/containers/Purchases/Bill/BillFormHeader.js
index 65334974f..89702e7ef 100644
--- a/client/src/containers/Purchases/Bill/BillFormHeader.js
+++ b/client/src/containers/Purchases/Bill/BillFormHeader.js
@@ -13,7 +13,7 @@ import { momentFormatter, compose, tansformDateValue } from 'utils';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 import {
-  VendorSelecetList,
+  ContactSelecetList,
   ErrorMessage,
   FieldRequiredHint,
   Row,
@@ -48,31 +48,6 @@ function BillFormHeader({
     [setFieldValue],
   );
 
-  const vendorNameRenderer = useCallback(
-    (accept, { handleClick }) => (
-      <MenuItem
-        key={accept.id}
-        text={accept.display_name}
-        onClick={handleClick}
-      />
-    ),
-    [],
-  );
-
-  // Filter vendor name
-  const filterVendorAccount = (query, vendor, _index, exactMatch) => {
-    const normalizedTitle = vendor.display_name.toLowerCase();
-    const normalizedQuery = query.toLowerCase();
-    if (exactMatch) {
-      return normalizedTitle === normalizedQuery;
-    } else {
-      return (
-        `${vendor.display_name} ${normalizedTitle}`.indexOf(normalizedQuery) >=
-        0
-      );
-    }
-  };
-
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
       <div className={'page-form__primary-section'}>
@@ -91,10 +66,11 @@ function BillFormHeader({
             <ErrorMessage name={'vendor_id'} {...{ errors, touched }} />
           }
         >
-          <VendorSelecetList
-            vendorsList={vendorItems}
-            selectedVendorId={values.vendor_id}
-            onItemSelect={onChangeSelected('vendor_id')}
+          <ContactSelecetList
+            contactsList={vendorItems}
+            selectedContactId={values.vendor_id}
+            defaultSelectText={ <T id={'select_vender_account'} /> }
+            onContactSelected={onChangeSelected('vendor_id')}
           />
         </FormGroup>
 
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentMadeFormHeader.js b/client/src/containers/Purchases/PaymentMades/PaymentMadeFormHeader.js
index 172c29396..c3ccb237a 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentMadeFormHeader.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentMadeFormHeader.js
@@ -16,7 +16,7 @@ import { CLASSES } from 'common/classes';
 import { momentFormatter, compose, tansformDateValue } from 'utils';
 import {
   AccountsSelectList,
-  VendorSelecetList,
+  ContactSelecetList,
   ErrorMessage,
   FieldRequiredHint,
   Money,
@@ -68,16 +68,6 @@ function PaymentMadeFormHeader({
     [setFieldValue],
   );
 
-  const handleVenderRenderer = useCallback(
-    (vender, { handleClick }) => (
-      <MenuItem
-        key={vender.id}
-        text={vender.display_name}
-        onClick={handleClick}
-      />
-    ),
-    [],
-  );
 
   const triggerFullAmountChanged = (value) => {
     onFullAmountChanged && onFullAmountChanged(value);
@@ -87,19 +77,6 @@ function PaymentMadeFormHeader({
     triggerFullAmountChanged(event.currentTarget.value);
   };
 
-  const handleFilterVender = (query, vender, index, exactMatch) => {
-    const normalizedTitle = vender.display_name.toLowerCase();
-    const normalizedQuery = query.toLowerCase();
-    if (exactMatch) {
-      return normalizedTitle === normalizedQuery;
-    } else {
-      return (
-        `${vender.display_name} ${normalizedTitle}`.indexOf(normalizedQuery) >=
-        0
-      );
-    }
-  };
-
   const onChangeSelect = useCallback(
     (filedName) => {
       return (item) => {
@@ -133,10 +110,11 @@ function PaymentMadeFormHeader({
             <ErrorMessage name={'vendor_id'} {...{ errors, touched }} />
           }
         >
-          <VendorSelecetList
-            vendorsList={vendorItems}
-            selectedVendorId={values.vendor_id}
-            onItemSelect={onChangeSelect('vendor_id')}
+          <ContactSelecetList
+            contactsList={vendorItems}
+            selectedContactId={values.vendor_id}
+            defaultSelectText={ <T id={'select_vender_account'} /> }
+            onContactSelected={onChangeSelect('vendor_id')}
             // buttonProps={{ disabled: !isNewMode }}
             disabled={!isNewMode}
           />
diff --git a/client/src/containers/Sales/Estimate/EstimateFormHeader.js b/client/src/containers/Sales/Estimate/EstimateFormHeader.js
index c120a6ebb..1cbfdc8d4 100644
--- a/client/src/containers/Sales/Estimate/EstimateFormHeader.js
+++ b/client/src/containers/Sales/Estimate/EstimateFormHeader.js
@@ -14,7 +14,7 @@ import { momentFormatter, compose, tansformDateValue } from 'utils';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 import {
-  ListSelect,
+  ContactSelecetList,
   ErrorMessage,
   FieldRequiredHint,
   Icon,
@@ -53,21 +53,6 @@ function EstimateFormHeader({
     [],
   );
 
-  // Filter Customer
-  const filterCustomer = (query, customer, _index, exactMatch) => {
-    const normalizedTitle = customer.display_name.toLowerCase();
-    const normalizedQuery = query.toLowerCase();
-    if (exactMatch) {
-      return normalizedTitle === normalizedQuery;
-    } else {
-      return (
-        `${customer.display_name} ${normalizedTitle}`.indexOf(
-          normalizedQuery,
-        ) >= 0
-      );
-    }
-  };
-
   // handle change customer
   const onChangeCustomer = useCallback(
     (filedName) => {
@@ -99,17 +84,11 @@ function EstimateFormHeader({
             <ErrorMessage name={'customer_id'} {...{ errors, touched }} />
           }
         >
-          <ListSelect
-            items={customers}
-            noResults={<MenuItem disabled={true} text="No results." />}
-            itemRenderer={CustomerRenderer}
-            itemPredicate={filterCustomer}
-            popoverProps={{ minimal: true }}
-            onItemSelect={onChangeCustomer('customer_id')}
-            selectedItem={values.customer_id}
-            selectedItemProp={'id'}
-            defaultText={<T id={'select_customer_account'} />}
-            labelProp={'display_name'}
+          <ContactSelecetList
+            contactsList={customers}
+            selectedContactId={values.customer_id}
+            defaultSelectText={<T id={'select_customer_account'} />}
+            onContactSelected={onChangeCustomer('customer_id')}
           />
         </FormGroup>
 
diff --git a/client/src/containers/Sales/Invoice/InvoiceFormHeader.js b/client/src/containers/Sales/Invoice/InvoiceFormHeader.js
index ade8b97e0..960f4d9ea 100644
--- a/client/src/containers/Sales/Invoice/InvoiceFormHeader.js
+++ b/client/src/containers/Sales/Invoice/InvoiceFormHeader.js
@@ -13,7 +13,7 @@ import { momentFormatter, compose, tansformDateValue } from 'utils';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 import {
-  ListSelect,
+  ContactSelecetList,
   ErrorMessage,
   FieldRequiredHint,
   Icon,
@@ -52,21 +52,6 @@ function InvoiceFormHeader({
     [],
   );
 
-  // Filter Customer
-  const filterCustomer = (query, customer, _index, exactMatch) => {
-    const normalizedTitle = customer.display_name.toLowerCase();
-    const normalizedQuery = query.toLowerCase();
-    if (exactMatch) {
-      return normalizedTitle === normalizedQuery;
-    } else {
-      return (
-        `${customer.display_name} ${normalizedTitle}`.indexOf(
-          normalizedQuery,
-        ) >= 0
-      );
-    }
-  };
-
   // handle change customer
   const onChangeCustomer = useCallback(
     (filedName) => {
@@ -99,17 +84,11 @@ function InvoiceFormHeader({
             <ErrorMessage name={'customer_id'} {...{ errors, touched }} />
           }
         >
-          <ListSelect
-            items={customers}
-            noResults={<MenuItem disabled={true} text="No results." />}
-            itemRenderer={CustomerRenderer}
-            itemPredicate={filterCustomer}
-            popoverProps={{ minimal: true }}
-            onItemSelect={onChangeCustomer('customer_id')}
-            selectedItem={values.customer_id}
-            selectedItemProp={'id'}
-            defaultText={<T id={'select_customer_account'} />}
-            labelProp={'display_name'}
+          <ContactSelecetList
+            contactsList={customers}
+            selectedContactId={values.customer_id}
+            defaultSelectText={<T id={'select_customer_account'} />}
+            onContactSelected={onChangeCustomer('customer_id')}
           />
         </FormGroup>
 
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormHeader.js b/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormHeader.js
index 0396e55da..e6e784406 100644
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormHeader.js
+++ b/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormHeader.js
@@ -13,11 +13,11 @@ import moment from 'moment';
 import { sumBy } from 'lodash';
 import classNames from 'classnames';
 
-import { CLASSES } from 'common/classes'
+import { CLASSES } from 'common/classes';
 import { momentFormatter, compose, tansformDateValue } from 'utils';
 import {
   AccountsSelectList,
-  ListSelect,
+  ContactSelecetList,
   ErrorMessage,
   FieldRequiredHint,
   Hint,
@@ -72,19 +72,6 @@ function PaymentReceiveFormHeader({
     [],
   );
 
-  const handleFilterCustomer = (query, customer, index, exactMatch) => {
-    const normalizedTitle = customer.display_name.toLowerCase();
-    const normalizedQuery = query.toLowerCase();
-    if (exactMatch) {
-      return normalizedTitle === normalizedQuery;
-    } else {
-      return (
-        `${customer.display_name} ${normalizedTitle}`.indexOf(
-          normalizedQuery,
-        ) >= 0
-      );
-    }
-  };
 
   const onChangeSelect = useCallback(
     (filedName) => {
@@ -129,17 +116,11 @@ function PaymentReceiveFormHeader({
             <ErrorMessage name={'customer_id'} {...{ errors, touched }} />
           }
         >
-          <ListSelect
-            items={customers}
-            noResults={<MenuItem disabled={true} text="No results." />}
-            itemRenderer={handleCusomterRenderer}
-            itemPredicate={handleFilterCustomer}
-            popoverProps={{ minimal: true }}
-            onItemSelect={onChangeSelect('customer_id')}
-            selectedItem={values.customer_id}
-            selectedItemProp={'id'}
-            defaultText={<T id={'select_customer_account'} />}
-            labelProp={'display_name'}
+          <ContactSelecetList
+            contactsList={customers}
+            selectedContactId={values.customer_id}
+            defaultSelectText={<T id={'select_customer_account'} />}
+            onContactSelected={onChangeSelect('customer_id')}
           />
         </FormGroup>
 
@@ -167,26 +148,27 @@ function PaymentReceiveFormHeader({
           label={<T id={'full_amount'} />}
           inline={true}
           className={('form-group--full-amount', CLASSES.FILL)}
-          intent={
-            errors.full_amount && touched.full_amount && Intent.DANGER
-          }
+          intent={errors.full_amount && touched.full_amount && Intent.DANGER}
           labelInfo={<Hint />}
           helperText={
             <ErrorMessage name="full_amount" {...{ errors, touched }} />
           }
         >
           <InputGroup
-            intent={
-              errors.full_amount && touched.full_amount && Intent.DANGER
-            }
+            intent={errors.full_amount && touched.full_amount && Intent.DANGER}
             minimal={true}
             value={values.full_amount}
             {...getFieldProps('full_amount')}
             onBlur={handleFullAmountBlur}
           />
 
-          <a onClick={handleReceiveFullAmountClick} href="#" className={'receive-full-amount'}>
-            Receive full amount (<Money amount={receivableFullAmount} currency={'USD'} />)
+          <a
+            onClick={handleReceiveFullAmountClick}
+            href="#"
+            className={'receive-full-amount'}
+          >
+            Receive full amount (
+            <Money amount={receivableFullAmount} currency={'USD'} />)
           </a>
         </FormGroup>
 
@@ -253,10 +235,14 @@ function PaymentReceiveFormHeader({
           inline={true}
           className={classNames('form-group--reference', CLASSES.FILL)}
           intent={errors.reference_no && touched.reference_no && Intent.DANGER}
-          helperText={<ErrorMessage name="reference" {...{ errors, touched }} />}
+          helperText={
+            <ErrorMessage name="reference" {...{ errors, touched }} />
+          }
         >
           <InputGroup
-            intent={errors.reference_no && touched.reference_no && Intent.DANGER}
+            intent={
+              errors.reference_no && touched.reference_no && Intent.DANGER
+            }
             minimal={true}
             {...getFieldProps('reference_no')}
           />
diff --git a/client/src/containers/Sales/Receipt/ReceiptFormHeader.js b/client/src/containers/Sales/Receipt/ReceiptFormHeader.js
index 390442ac2..004f71d76 100644
--- a/client/src/containers/Sales/Receipt/ReceiptFormHeader.js
+++ b/client/src/containers/Sales/Receipt/ReceiptFormHeader.js
@@ -15,7 +15,7 @@ import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 import {
   AccountsSelectList,
-  ListSelect,
+  ContactSelecetList,
   ErrorMessage,
   FieldRequiredHint,
   Icon,
@@ -44,32 +44,6 @@ function ReceiptFormHeader({
     [setFieldValue],
   );
 
-  const CustomerRenderer = useCallback(
-    (cutomer, { handleClick }) => (
-      <MenuItem
-        key={cutomer.id}
-        text={cutomer.display_name}
-        onClick={handleClick}
-      />
-    ),
-    [],
-  );
-
-  // Filter Customer
-  const filterCustomer = (query, customer, _index, exactMatch) => {
-    const normalizedTitle = customer.display_name.toLowerCase();
-    const normalizedQuery = query.toLowerCase();
-    if (exactMatch) {
-      return normalizedTitle === normalizedQuery;
-    } else {
-      return (
-        `${customer.display_name} ${normalizedTitle}`.indexOf(
-          normalizedQuery,
-        ) >= 0
-      );
-    }
-  };
-
   // handle change
   const onChangeSelect = useCallback(
     (filedName) => {
@@ -108,17 +82,11 @@ function ReceiptFormHeader({
             <ErrorMessage name={'customer_id'} {...{ errors, touched }} />
           }
         >
-          <ListSelect
-            items={customers}
-            noResults={<MenuItem disabled={true} text="No results." />}
-            itemRenderer={CustomerRenderer}
-            itemPredicate={filterCustomer}
-            popoverProps={{ minimal: true }}
-            onItemSelect={onChangeSelect('customer_id')}
-            selectedItem={values.customer_id}
-            selectedItemProp={'id'}
-            defaultText={<T id={'select_customer_account'} />}
-            labelProp={'display_name'}
+          <ContactSelecetList
+            contactsList={customers}
+            selectedContactId={values.customer_id}
+            defaultSelectText={<T id={'select_customer_account'} />}
+            onContactSelected={onChangeSelect('customer_id')}
           />
         </FormGroup>