diff --git a/client/src/components/ContactSelecetList.js b/client/src/components/ContactSelecetList.js
index baa4b2a20..ed10398c2 100644
--- a/client/src/components/ContactSelecetList.js
+++ b/client/src/components/ContactSelecetList.js
@@ -1,42 +1,47 @@
 import React, { useCallback, useState, useEffect, useMemo } from 'react';
 import { FormattedMessage as T } from 'react-intl';
-import { ListSelect } from 'components';
-import { MenuItem } from '@blueprintjs/core';
+import { MenuItem, Button } from '@blueprintjs/core';
+import { Select } from '@blueprintjs/select';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 
 export default function ContactSelecetList({
   contactsList,
+  initialContactId,
   selectedContactId,
+  selectedContactType,
   defaultSelectText = <T id={'select_contact'} />,
   onContactSelected,
   popoverFill = false,
-  ...restProps
+  disabled = false,
 }) {
-  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 contacts = useMemo(
+    () =>
+      contactsList.map((contact) => ({
+        ...contact,
+        _id: `${contact.id}_${contact.contact_type}`,
+      })),
+    [contactsList],
   );
 
+  const initialContact = useMemo(
+    () => contacts.find((a) => a.id === initialContactId),
+    [initialContactId, contacts],
+  );
+
+  const [selecetedContact, setSelectedContact] = useState(
+    initialContact || null,
+  );
+
+  useEffect(() => {
+    if (typeof selectedContactId !== 'undefined') {
+      const account = selectedContactId
+        ? contacts.find((a) => a.id === selectedContactId)
+        : null;
+      setSelectedContact(account);
+    }
+  }, [selectedContactId, contacts, setSelectedContact]);
+
   const handleContactRenderer = useCallback(
     (contact, { handleClick }) => (
       <MenuItem
@@ -48,21 +53,48 @@ export default function ContactSelecetList({
     [],
   );
 
+  const onContactSelect = useCallback(
+    (contact) => {
+      setSelectedContact({ ...contact });
+      onContactSelected && onContactSelected(contact);
+    },
+    [setSelectedContact, onContactSelected],
+  );
+
+  // 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
+      );
+    }
+  };
+
   return (
-    <ListSelect
-      items={contactsList}
-      selectedItemProp={'id'}
-      selectedItem={selectedContactId}
-      labelProp={'display_name'}
-      defaultText={defaultSelectText}
-      onItemSelect={onContactSelect}
-      itemPredicate={FilterContacts}
+    <Select
+      items={contacts}
+      noResults={<MenuItem disabled={true} text="No results." />}
       itemRenderer={handleContactRenderer}
+      itemPredicate={filterContacts}
+      filterable={true}
+      disabled={disabled}
+      onItemSelect={onContactSelect}
       popoverProps={{ minimal: true, usePortal: !popoverFill }}
       className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
         [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
       })}
-      {...restProps}
-    />
+    >
+      <Button
+        disabled={disabled}
+        text={
+          selecetedContact ? selecetedContact.display_name : defaultSelectText
+        }
+      />
+    </Select>
   );
 }
diff --git a/client/src/components/ContactsListField.js b/client/src/components/ContactsListField.js
deleted file mode 100644
index 6668b9de5..000000000
--- a/client/src/components/ContactsListField.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-import { MenuItem } from '@blueprintjs/core';
-import classNames from 'classnames';
-import { CLASSES } from 'common/classes';
-import ListSelect from 'components/ListSelect';
-import { FormattedMessage as T } from 'react-intl';
-
-export default function ContactsListField({
-  contacts,
-  onContactSelected,
-  selectedContactId,
-  selectedContactType,
-  defautlSelectText = <T id={'select_contact'} />,
-  popoverFill = false,
-}) {
-  // Contact item of select accounts field.
-  const contactRenderer = useCallback(
-    (item, { handleClick, modifiers, query }) => (
-      <MenuItem text={item.display_name} key={item.id} onClick={handleClick} />
-    ),
-    [],
-  );
-
-  const onContactSelect = useCallback(
-    (contact) => {
-      onContactSelected && onContactSelected(contact);
-    },
-    [onContactSelected],
-  );
-
-  const items = useMemo(
-    () =>
-      contacts.map((contact) => ({
-        ...contact,
-        _id: `${contact.id}_${contact.contact_type}`,
-      })),
-    [contacts],
-  );
-
-  return (
-    <ListSelect
-      items={items}
-      noResults={<MenuItem disabled={true} text="No results." />}
-      itemRenderer={contactRenderer}
-      filterable={true}
-      onItemSelect={onContactSelect}
-      labelProp={'display_name'}
-      selectedItem={`${selectedContactId}_${selectedContactType}`}
-      selectedItemProp={'_id'}
-      defaultText={defautlSelectText}
-      popoverProps={{ minimal: true, usePortal: !popoverFill }}
-      className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
-        [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
-      })}
-    />
-  );
-}
diff --git a/client/src/components/DataTableCells/ContactsListFieldCell.js b/client/src/components/DataTableCells/ContactsListFieldCell.js
index 0c3cd966f..16eb5286b 100644
--- a/client/src/components/DataTableCells/ContactsListFieldCell.js
+++ b/client/src/components/DataTableCells/ContactsListFieldCell.js
@@ -1,20 +1,23 @@
 import React, { useState, useCallback, useMemo } from 'react';
-import { FormGroup, Intent, Classes } from "@blueprintjs/core";
+import { FormGroup, Intent, Classes } from '@blueprintjs/core';
 import classNames from 'classnames';
-import ContactsListField from 'components/ContactsListField';
+import { ContactSelecetList } from 'components';
 
 export default function ContactsListCellRenderer({
   column: { id },
   row: { index, original },
   cell: { value },
-  payload: { contacts, updateData, errors }
+  payload: { contacts, updateData, errors },
 }) {
-  const handleContactSelected = useCallback((contact) => {
-    updateData(index, {
-      contact_id: contact.id,
-      contact_type: contact.contact_type,
-    });
-  }, [updateData, index, id]);
+  const handleContactSelected = useCallback(
+    (contact) => {
+      updateData(index, {
+        contact_id: contact.id,
+        contact_type: contact.contact_type,
+      });
+    },
+    [updateData, index, id],
+  );
 
   const error = errors?.[index]?.[id];
 
@@ -27,12 +30,12 @@ export default function ContactsListCellRenderer({
         Classes.FILL,
       )}
     >
-      <ContactsListField
-        contacts={contacts}
-        onContactSelected={handleContactSelected} 
+      <ContactSelecetList
+        contactsList={contacts}
+        onContactSelected={handleContactSelected}
         selectedContactId={original?.contact_id}
         selectedContactType={original?.contact_type}
       />
     </FormGroup>
   );
-}
\ No newline at end of file
+}