diff --git a/client/src/components/VendorSelecetList.js b/client/src/components/VendorSelecetList.js
new file mode 100644
index 000000000..12ad1e61e
--- /dev/null
+++ b/client/src/components/VendorSelecetList.js
@@ -0,0 +1,58 @@
+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 fd027601e..2d8669398 100644
--- a/client/src/components/index.js
+++ b/client/src/components/index.js
@@ -30,6 +30,7 @@ import Row from './Grid/Row';
 import Col from './Grid/Col';
 import CloudLoadingIndicator from './CloudLoadingIndicator';
 import MoneyExchangeRate from './MoneyExchangeRate';
+import VendorSelecetList from './VendorSelecetList';
 
 const Hint = FieldHint;
 
@@ -67,4 +68,5 @@ export {
   Row,
   CloudLoadingIndicator,
   MoneyExchangeRate,
+  VendorSelecetList,
 };
diff --git a/client/src/containers/Purchases/Bill/BillFormHeader.js b/client/src/containers/Purchases/Bill/BillFormHeader.js
index 135412ce4..65334974f 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 {
-  ListSelect,
+  VendorSelecetList,
   ErrorMessage,
   FieldRequiredHint,
   Row,
@@ -91,17 +91,10 @@ function BillFormHeader({
             <ErrorMessage name={'vendor_id'} {...{ errors, touched }} />
           }
         >
-          <ListSelect
-            items={vendorItems}
-            noResults={<MenuItem disabled={true} text="No results." />}
-            itemRenderer={vendorNameRenderer}
-            itemPredicate={filterVendorAccount}
-            popoverProps={{ minimal: true }}
+          <VendorSelecetList
+            vendorsList={vendorItems}
+            selectedVendorId={values.vendor_id}
             onItemSelect={onChangeSelected('vendor_id')}
-            selectedItem={values.vendor_id}
-            selectedItemProp={'id'}
-            defaultText={<T id={'select_vendor_account'} />}
-            labelProp={'display_name'}
           />
         </FormGroup>
 
@@ -135,7 +128,7 @@ function BillFormHeader({
               className={classNames(
                 'form-group--due-date',
                 'form-group--select-list',
-                CLASSES.FILL
+                CLASSES.FILL,
               )}
               intent={errors.due_date && touched.due_date && Intent.DANGER}
               helperText={
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentMadeFormHeader.js b/client/src/containers/Purchases/PaymentMades/PaymentMadeFormHeader.js
index 7ceda4763..172c29396 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,
-  ListSelect,
+  VendorSelecetList,
   ErrorMessage,
   FieldRequiredHint,
   Money,
@@ -81,7 +81,7 @@ function PaymentMadeFormHeader({
 
   const triggerFullAmountChanged = (value) => {
     onFullAmountChanged && onFullAmountChanged(value);
-  }
+  };
 
   const handleFullAmountBlur = (event) => {
     triggerFullAmountChanged(event.currentTarget.value);
@@ -133,18 +133,11 @@ function PaymentMadeFormHeader({
             <ErrorMessage name={'vendor_id'} {...{ errors, touched }} />
           }
         >
-          <ListSelect
-            items={vendorItems}
-            noResults={<MenuItem disabled={true} text="No results." />}
-            itemRenderer={handleVenderRenderer}
-            itemPredicate={handleFilterVender}
-            popoverProps={{ minimal: true }}
+          <VendorSelecetList
+            vendorsList={vendorItems}
+            selectedVendorId={values.vendor_id}
             onItemSelect={onChangeSelect('vendor_id')}
-            selectedItem={values.vendor_id}
-            selectedItemProp={'id'}
-            defaultText={<T id={'select_vender_account'} />}
-            labelProp={'display_name'}
-            buttonProps={{ disabled: !isNewMode }}
+            // buttonProps={{ disabled: !isNewMode }}
             disabled={!isNewMode}
           />
         </FormGroup>
@@ -173,26 +166,27 @@ function PaymentMadeFormHeader({
           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={payableFullAmount} currency={'USD'} />)
+          <a
+            onClick={handleReceiveFullAmountClick}
+            href="#"
+            className={'receive-full-amount'}
+          >
+            Receive full amount (
+            <Money amount={payableFullAmount} currency={'USD'} />)
           </a>
         </FormGroup>
 
@@ -238,7 +232,7 @@ function PaymentMadeFormHeader({
               name={'payment_account_id'}
               {...{ errors, touched }}
             />
-        }
+          }
         >
           <AccountsSelectList
             accounts={paymentAccounts}
@@ -255,7 +249,9 @@ function PaymentMadeFormHeader({
           inline={true}
           className={classNames('form-group--reference', Classes.FILL)}
           intent={errors.reference && touched.reference && Intent.DANGER}
-          helperText={<ErrorMessage name="reference" {...{ errors, touched }} />}
+          helperText={
+            <ErrorMessage name="reference" {...{ errors, touched }} />
+          }
         >
           <InputGroup
             intent={errors.reference && touched.reference && Intent.DANGER}