diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js
index dbe27e0c1..4d50f45c5 100644
--- a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js
@@ -10,18 +10,13 @@ import {
 } from '@blueprintjs/core';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
+import { CreditNoteMenuItem } from './utils';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import {
-  Icon,
-  FormattedMessage as T,
-  If,
-  MoreMenuItems,
-  Can,
-} from 'components';
+import { Icon, FormattedMessage as T, If, Can } from 'components';
 
 import { compose } from 'utils';
 
@@ -52,6 +47,10 @@ function CreditNoteDetailActionsBar({
     openDialog('refund-credit-note', { creditNoteId });
   };
 
+  const handleReconcileCreditNote = () => {
+    openDialog('reconcile-credit-note', { creditNoteId });
+  };
+
   // Handle delete credit note.
   const handleDeleteCreditNote = () => {
     openAlert('credit-note-delete', { creditNoteId });
@@ -83,6 +82,20 @@ function CreditNoteDetailActionsBar({
           intent={Intent.DANGER}
           onClick={handleDeleteCreditNote}
         />
+        <If
+          condition={
+            !creditNote.is_draft &&
+            !creditNote.is_closed
+            // creditNote.is_published
+          }
+        >
+          <NavbarDivider />
+          <CreditNoteMenuItem
+            payload={{
+              onReconcile: handleReconcileCreditNote,
+            }}
+          />
+        </If>
       </NavbarGroup>
     </DashboardActionsBar>
   );
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/utils.js b/src/containers/Drawers/CreditNoteDetailDrawer/utils.js
index ea3743197..cef77fc20 100644
--- a/src/containers/Drawers/CreditNoteDetailDrawer/utils.js
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/utils.js
@@ -1,6 +1,18 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { FormatNumberCell } from '../../../components';
+import {
+  Button,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  MenuItem,
+  Menu,
+} from '@blueprintjs/core';
+import {
+  Icon,
+  FormattedMessage as T,
+  FormatNumberCell,
+} from '../../../components';
 
 export const useCreditNoteReadOnlyEntriesColumns = () =>
   React.useMemo(
@@ -45,3 +57,26 @@ export const useCreditNoteReadOnlyEntriesColumns = () =>
     ],
     [],
   );
+
+export const CreditNoteMenuItem = ({ payload: { onReconcile } }) => {
+  return (
+    <Popover
+      minimal={true}
+      interactionKind={PopoverInteractionKind.CLICK}
+      position={Position.BOTTOM_LEFT}
+      modifiers={{
+        offset: { offset: '0, 4' },
+      }}
+      content={
+        <Menu>
+          <MenuItem
+            onClick={onReconcile}
+            text={<T id={'credit_note.action.reconcile_with_invoices'} />}
+          />
+        </Menu>
+      }
+    >
+      <Button icon={<Icon icon="more-vert" iconSize={16} />} minimal={true} />
+    </Popover>
+  );
+};
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailActionsBar.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailActionsBar.js
index d51ab8a92..a2cd68f01 100644
--- a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailActionsBar.js
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailActionsBar.js
@@ -10,6 +10,7 @@ import {
 } from '@blueprintjs/core';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
+import { VendorCreditMenuItem } from './utils';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
@@ -51,6 +52,10 @@ function VendorCreditDetailActionsBar({
     openDialog('refund-vendor-credit', { vendorCreditId });
   };
 
+  const handleReconcileVendorCredit = () => {
+    openDialog('reconcile-vendor-credit', { vendorCreditId });
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -77,6 +82,20 @@ function VendorCreditDetailActionsBar({
           intent={Intent.DANGER}
           onClick={handleDeleteVendorCredit}
         />
+        <If
+          condition={
+            !vendorCredit.is_closed &&
+            !vendorCredit.is_draft
+            // vendorCredit.is_published
+          }
+        >
+          <NavbarDivider />
+          <VendorCreditMenuItem
+            payload={{
+              onReconcile: handleReconcileVendorCredit,
+            }}
+          />
+        </If>
       </NavbarGroup>
     </DashboardActionsBar>
   );
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/utils.js b/src/containers/Drawers/VendorCreditDetailDrawer/utils.js
index 1f0d67df5..f8a056afa 100644
--- a/src/containers/Drawers/VendorCreditDetailDrawer/utils.js
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/utils.js
@@ -1,7 +1,18 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-
-import { FormatNumberCell } from '../../../components';
+import {
+  Button,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  MenuItem,
+  Menu,
+} from '@blueprintjs/core';
+import {
+  FormatNumberCell,
+  Icon,
+  FormattedMessage as T,
+} from '../../../components';
 
 /**
  * Retrieve vendor credit readonly details entries table columns.
@@ -49,3 +60,26 @@ export const useVendorCreditReadonlyEntriesTableColumns = () =>
     ],
     [],
   );
+
+export const VendorCreditMenuItem = ({ payload: { onReconcile } }) => {
+  return (
+    <Popover
+      minimal={true}
+      interactionKind={PopoverInteractionKind.CLICK}
+      position={Position.BOTTOM_LEFT}
+      modifiers={{
+        offset: { offset: '0, 4' },
+      }}
+      content={
+        <Menu>
+          <MenuItem
+            onClick={onReconcile}
+            text={intl.get('vendor_credits.action.reconcile_with_bills')}
+          />
+        </Menu>
+      }
+    >
+      <Button icon={<Icon icon="more-vert" iconSize={16} />} minimal={true} />
+    </Popover>
+  );
+};
diff --git a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.js b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.js
index e93db9c63..e17da3e28 100644
--- a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.js
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.js
@@ -10,7 +10,7 @@ import { FastField, Field, ErrorMessage } from 'formik';
 import { CLASSES } from 'common/classes';
 import classNames from 'classnames';
 import {
-  ContactSelecetList,
+  VendorSelectField,
   FieldRequiredHint,
   InputPrependButton,
   Icon,
@@ -78,30 +78,27 @@ function VendorCreditNoteFormHeaderFields({
       {/* ----------- Vendor name ----------- */}
       <FastField
         name={'vendor_id'}
-        customers={vendors}
+        vendors={vendors}
         shouldUpdate={vendorsFieldShouldUpdate}
       >
         {({ form, field: { value }, meta: { error, touched } }) => (
           <FormGroup
             label={<T id={'vendor_name'} />}
             inline={true}
-            className={classNames(
-              'form-group--vendor-name',
-              'form-group--select-list',
-              CLASSES.FILL,
-            )}
+            className={classNames(CLASSES.FILL, 'form-group--vendor')}
             labelInfo={<FieldRequiredHint />}
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name={'vendor_id'} />}
           >
-            <ContactSelecetList
-              contactsList={vendors}
+            <VendorSelectField
+              contacts={vendors}
               selectedContactId={value}
               defaultSelectText={<T id={'select_vender_account'} />}
-              onContactSelected={(vendor) => {
-                form.setFieldValue('vendor_id', vendor.id);
+              onContactSelected={(contact) => {
+                form.setFieldValue('vendor_id', contact.id);
               }}
               popoverFill={true}
+              allowCreate={true}
             />
           </FormGroup>
         )}
diff --git a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormProvider.js b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormProvider.js
index df97ec90c..01d6befee 100644
--- a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormProvider.js
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormProvider.js
@@ -66,7 +66,12 @@ function VendorCreditNoteFormProvider({ vendorCreditId, ...props }) {
 
   return (
     <DashboardInsider
-      loading={isItemsLoading || isVendorsLoading || isVendorCreditLoading}
+      loading={
+        isVendorCreditLoading ||
+        isItemsLoading ||
+        isVendorsLoading ||
+        isVendorCreditLoading
+      }
       name={'vendor-credit-form'}
     >
       <VendorCreditNoteFormContext.Provider value={provider} {...props} />
diff --git a/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js b/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js
index b9af4c70e..be739bffc 100644
--- a/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js
+++ b/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js
@@ -100,12 +100,12 @@ export function useVendorsCreditNoteTableColumns() {
   return React.useMemo(
     () => [
       {
-        id: 'vendor_credit_date',
+        id: 'credit_date',
         Header: intl.get('date'),
         accessor: 'formatted_vendor_credit_date',
         Cell: FormatDateCell,
         width: 110,
-        className: 'vendor_credit_date',
+        className: 'credit_date',
         clickable: true,
         textOverview: true,
       },
@@ -119,11 +119,11 @@ export function useVendorsCreditNoteTableColumns() {
         textOverview: true,
       },
       {
-        id: 'vendor_credit_number',
+        id: 'credit_number',
         Header: intl.get('vendor_credits.column.vendor_credit_no'),
         accessor: 'vendor_credit_number',
         width: 100,
-        className: 'vendor_credit_number',
+        className: 'credit_number',
         clickable: true,
         textOverview: true,
       },
@@ -145,6 +145,7 @@ export function useVendorsCreditNoteTableColumns() {
         align: 'right',
         clickable: true,
         textOverview: true,
+        disableSortBy: true,
         className: clsx(CLASSES.FONT_BOLD),
       },
       {
diff --git a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.js b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.js
index 00ac441d2..602c5cd4e 100644
--- a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.js
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.js
@@ -10,7 +10,7 @@ import { FastField, Field, ErrorMessage } from 'formik';
 import { CLASSES } from 'common/classes';
 import classNames from 'classnames';
 import {
-  ContactSelecetList,
+  CustomerSelectField,
   FieldRequiredHint,
   InputPrependButton,
   Icon,
@@ -91,14 +91,15 @@ function CreditNoteFormHeaderFields({
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name={'customer_id'} />}
           >
-            <ContactSelecetList
-              contactsList={customers}
+            <CustomerSelectField
+              contacts={customers}
               selectedContactId={value}
               defaultSelectText={<T id={'select_customer_account'} />}
               onContactSelected={(customer) => {
                 form.setFieldValue('customer_id', customer.id);
               }}
               popoverFill={true}
+              allowCreate={true}
             />
           </FormGroup>
         )}
diff --git a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesDataTable.js b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesDataTable.js
index e3c8a903e..a2a666858 100644
--- a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesDataTable.js
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesDataTable.js
@@ -119,6 +119,7 @@ function CreditNotesDataTable({
         headerLoading={isCreditNotesLoading}
         progressBarLoading={isCreditNotesFetching}
         onFetchData={handleDataTableFetchData}
+        manualSortBy={true}
         selectionColumn={true}
         noInitialFetch={true}
         sticky={true}
diff --git a/src/containers/Sales/CreditNotes/CreditNotesLanding/components.js b/src/containers/Sales/CreditNotes/CreditNotesLanding/components.js
index 7d2860803..f5b4f810d 100644
--- a/src/containers/Sales/CreditNotes/CreditNotesLanding/components.js
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/components.js
@@ -44,7 +44,11 @@ export function ActionsMenu({
           onClick={safeCallback(onOpen, original)}
         />
       </If>
-      <If condition={!original.is_draft && original.is_published}>
+      <If
+        condition={
+          !original.is_draft && !original.is_closed && original.is_published
+        }
+      >
         <MenuItem
           text={intl.get('credit_note.action.reconcile_with_invoices')}
           // icon={<Icon icon="quick-payment-16" />}
@@ -97,12 +101,12 @@ export function useCreditNoteTableColumns() {
   return React.useMemo(
     () => [
       {
-        id: 'credit_note_date',
+        id: 'credit_date',
         Header: intl.get('credit_note.column.credit_date'),
         accessor: 'formatted_credit_note_date',
         Cell: FormatDateCell,
         width: 110,
-        className: 'credit_note_date',
+        className: 'credit_date',
         clickable: true,
         textOverview: true,
       },
@@ -111,16 +115,16 @@ export function useCreditNoteTableColumns() {
         Header: intl.get('customer_name'),
         accessor: 'customer.display_name',
         width: 180,
-        className: 'customer_id',
+        className: 'customer',
         clickable: true,
         textOverview: true,
       },
       {
-        id: 'credit_note_number',
+        id: 'credit_number',
         Header: intl.get('credit_note.column.credit_note_no'),
         accessor: 'credit_note_number',
         width: 100,
-        className: 'credit_note_number',
+        className: 'credit_number',
         clickable: true,
         textOverview: true,
       },
@@ -142,6 +146,7 @@ export function useCreditNoteTableColumns() {
         align: 'right',
         clickable: true,
         textOverview: true,
+        disableSortBy: true,
         className: clsx(CLASSES.FONT_BOLD),
       },
       {
diff --git a/src/hooks/query/paymentReceives.js b/src/hooks/query/paymentReceives.js
index 06e7b39cb..bdaddf8b3 100644
--- a/src/hooks/query/paymentReceives.js
+++ b/src/hooks/query/paymentReceives.js
@@ -28,6 +28,13 @@ const commonInvalidateQueries = (client) => {
   // Invalidate the cashflow transactions.
   client.invalidateQueries(t.CASH_FLOW_TRANSACTIONS);
   client.invalidateQueries(t.CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY);
+
+  client.invalidateQueries(t.CREDIT_NOTE);
+  client.invalidateQueries(t.CREDIT_NOTES);
+  
+  // Invalidate reconcile.
+  client.invalidateQueries(t.RECONCILE_CREDIT_NOTE);
+  client.invalidateQueries(t.RECONCILE_CREDIT_NOTES);
 };
 
 // Transform payment receives.