diff --git a/client/src/containers/Alerts/AccountActivateAlert.js b/client/src/containers/Alerts/AccountActivateAlert.js
index fd6dbe2f0..777af9dfa 100644
--- a/client/src/containers/Alerts/AccountActivateAlert.js
+++ b/client/src/containers/Alerts/AccountActivateAlert.js
@@ -8,6 +8,7 @@ import withAlertActions from 'containers/Alert/withAlertActions';
 
 import { useActivateAccount } from 'hooks/query';
 import { compose } from 'utils';
+
 /**
  * Account activate alert.
  */
diff --git a/client/src/containers/Alerts/AccountBulkActivateAlert.js b/client/src/containers/Alerts/AccountBulkActivateAlert.js
index 3cb367b67..da2672003 100644
--- a/client/src/containers/Alerts/AccountBulkActivateAlert.js
+++ b/client/src/containers/Alerts/AccountBulkActivateAlert.js
@@ -1,9 +1,5 @@
 import React, { useState } from 'react';
-import {
-  FormattedMessage as T,
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
 import { AppToaster } from 'components';
diff --git a/client/src/containers/Alerts/AccountBulkDeleteAlert.js b/client/src/containers/Alerts/AccountBulkDeleteAlert.js
index 663d1858e..dd18667a1 100644
--- a/client/src/containers/Alerts/AccountBulkDeleteAlert.js
+++ b/client/src/containers/Alerts/AccountBulkDeleteAlert.js
@@ -12,6 +12,9 @@ import withAlertActions from 'containers/Alert/withAlertActions';
 
 import { compose } from 'utils';
 
+/**
+ * Account bulk delete alert.
+ */
 function AccountBulkDeleteAlert({
   // #ownProps
   name,
diff --git a/client/src/containers/Alerts/AccountDeleteAlert.js b/client/src/containers/Alerts/AccountDeleteAlert.js
index ddfbcf0e3..15014af68 100644
--- a/client/src/containers/Alerts/AccountDeleteAlert.js
+++ b/client/src/containers/Alerts/AccountDeleteAlert.js
@@ -13,7 +13,6 @@ import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
 
 import { useDeleteAccount } from 'hooks/query';
-
 import { compose } from 'utils';
 
 /**
@@ -48,12 +47,7 @@ function AccountDeleteAlert({
         });
         closeAlert(name);
       })
-      .catch((error) => {
-        const {
-          response: {
-            data: { errors },
-          },
-        } = error;
+      .catch(({ response: { data: { errors } } }) => {
         handleDeleteErrors(errors);
         closeAlert(name);
       });
diff --git a/client/src/containers/Alerts/Bills/BillDeleteAlert.js b/client/src/containers/Alerts/Bills/BillDeleteAlert.js
index 348c0e736..05c0076bf 100644
--- a/client/src/containers/Alerts/Bills/BillDeleteAlert.js
+++ b/client/src/containers/Alerts/Bills/BillDeleteAlert.js
@@ -10,7 +10,6 @@ import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
 
 import { useDeleteBill } from 'hooks/query';
-
 import { compose } from 'utils';
 
 /**
@@ -29,12 +28,12 @@ function BillDeleteAlert({
   const { formatMessage } = useIntl();
   const { isLoading, mutateAsync: deleteBillMutate } = useDeleteBill();
 
-  // handle cancel Bill
+  // Handle cancel Bill
   const handleCancel = () => {
     closeAlert(name);
   };
 
-  // handleConfirm delete invoice
+  // Handle confirm delete invoice
   const handleConfirmBillDelete = () => {
     deleteBillMutate(billId).then(() => {
       AppToaster.show({
diff --git a/client/src/containers/Alerts/Bills/BillOpenAlert.js b/client/src/containers/Alerts/Bills/BillOpenAlert.js
index 828f75703..0093b4bb7 100644
--- a/client/src/containers/Alerts/Bills/BillOpenAlert.js
+++ b/client/src/containers/Alerts/Bills/BillOpenAlert.js
@@ -40,8 +40,9 @@ function BillOpenAlert({
           }),
           intent: Intent.SUCCESS,
         });
+        closeAlert(name);
       })
-      .finally((error) => {
+      .catch((error) => {
         closeAlert(name);
       });
   };
diff --git a/client/src/containers/Alerts/Estimates/EstimateDeleteAlert.js b/client/src/containers/Alerts/Estimates/EstimateDeleteAlert.js
index b07c2833c..491a97ce9 100644
--- a/client/src/containers/Alerts/Estimates/EstimateDeleteAlert.js
+++ b/client/src/containers/Alerts/Estimates/EstimateDeleteAlert.js
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import {
   FormattedMessage as T,
   FormattedHTMLMessage,
diff --git a/client/src/containers/Alerts/Estimates/EstimateRejectAlert.js b/client/src/containers/Alerts/Estimates/EstimateRejectAlert.js
index a56ee3bd1..2a013ede2 100644
--- a/client/src/containers/Alerts/Estimates/EstimateRejectAlert.js
+++ b/client/src/containers/Alerts/Estimates/EstimateRejectAlert.js
@@ -1,14 +1,12 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
-import { queryCache } from 'react-query';
 
 import { AppToaster } from 'components';
 import { useRejectEstimate } from 'hooks/query';
 
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
-import withEstimateActions from 'containers/Sales/Estimate/withEstimateActions';
 
 import { compose } from 'utils';
 
@@ -22,9 +20,6 @@ function EstimateRejectAlert({
   isOpen,
   payload: { estimateId },
 
-  // #withEstimateActions
-  requestRejectEstimate,
-
   // #withAlertActions
   closeAlert,
 }) {
@@ -40,8 +35,8 @@ function EstimateRejectAlert({
   };
 
   // Handle confirm estimate reject.
-  const handleConfirmEstimateReject = useCallback(() => {
-    requestRejectEstimate(estimateId)
+  const handleConfirmEstimateReject = () => {
+    rejectEstimateMutate(estimateId)
       .then(() => {
         AppToaster.show({
           message: formatMessage({
@@ -49,13 +44,12 @@ function EstimateRejectAlert({
           }),
           intent: Intent.SUCCESS,
         });
-        queryCache.invalidateQueries('estimates-table');
       })
       .catch((error) => {})
       .finally(() => {
         closeAlert(name);
       });
-  }, [estimateId, rejectEstimateMutate, formatMessage]);
+  };
 
   return (
     <Alert
@@ -77,5 +71,4 @@ function EstimateRejectAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withEstimateActions,
 )(EstimateRejectAlert);
diff --git a/client/src/containers/Alerts/Invoices/InvoiceDeleteAlert.js b/client/src/containers/Alerts/Invoices/InvoiceDeleteAlert.js
index 0236eef90..a93147048 100644
--- a/client/src/containers/Alerts/Invoices/InvoiceDeleteAlert.js
+++ b/client/src/containers/Alerts/Invoices/InvoiceDeleteAlert.js
@@ -1,20 +1,17 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import {
   FormattedMessage as T,
   FormattedHTMLMessage,
   useIntl,
 } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
-import { queryCache } from 'react-query';
-
 import { AppToaster } from 'components';
 import { useDeleteInvoice } from 'hooks/query';
 
-import { handleDeleteErrors } from 'containers/Sales/Invoice/components';
+import { handleDeleteErrors } from 'containers/Sales/Invoices/InvoicesLanding/components';
 
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
-import withInvoiceActions from 'containers/Sales/Invoice/withInvoiceActions';
 
 import { compose } from 'utils';
 
@@ -32,12 +29,9 @@ function InvoiceDeleteAlert({
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
-  const {
-    mutateAsync: deleteInvoiceMutate,
-    isLoading
-  } = useDeleteInvoice();
+  const { mutateAsync: deleteInvoiceMutate, isLoading } = useDeleteInvoice();
 
-  // handle cancel delete invoice  alert.
+  // handle cancel delete invoice alert.
   const handleCancelDeleteAlert = () => {
     closeAlert(name);
   };
@@ -84,5 +78,4 @@ function InvoiceDeleteAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withInvoiceActions,
 )(InvoiceDeleteAlert);
diff --git a/client/src/containers/Alerts/Invoices/InvoiceDeliverAlert.js b/client/src/containers/Alerts/Invoices/InvoiceDeliverAlert.js
index 96cc5c5f3..5badf9335 100644
--- a/client/src/containers/Alerts/Invoices/InvoiceDeliverAlert.js
+++ b/client/src/containers/Alerts/Invoices/InvoiceDeliverAlert.js
@@ -7,7 +7,6 @@ import { AppToaster } from 'components';
 
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
-import withInvoiceActions from 'containers/Sales/Invoice/withInvoiceActions';
 
 import { compose } from 'utils';
 
@@ -72,5 +71,4 @@ function InvoiceDeliverAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withInvoiceActions,
 )(InvoiceDeliverAlert);
diff --git a/client/src/containers/Dialogs/EstimateNumberDialog/EstimateNumberDialogContent.js b/client/src/containers/Dialogs/EstimateNumberDialog/EstimateNumberDialogContent.js
index fda4a8d68..42a8267a0 100644
--- a/client/src/containers/Dialogs/EstimateNumberDialog/EstimateNumberDialogContent.js
+++ b/client/src/containers/Dialogs/EstimateNumberDialog/EstimateNumberDialogContent.js
@@ -6,7 +6,6 @@ import ReferenceNumberForm from 'containers/JournalNumber/ReferenceNumberForm';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withSettings from 'containers/Settings/withSettings';
 import withSettingsActions from 'containers/Settings/withSettingsActions';
-import withEstimateActions from 'containers/Sales/Estimate/withEstimateActions';
 
 import { compose, optionsMapToArray } from 'utils';
 
@@ -18,15 +17,13 @@ function EstimateNumberDialogContent({
   // #withSettings
   nextNumber,
   numberPrefix,
+
   // #withSettingsActions
   requestFetchOptions,
   requestSubmitOptions,
 
   // #withDialogActions
   closeDialog,
-
-  // #withEstimateActions
-  setEstimateNumberChanged,
 }) {
   const fetchSettings = useQuery(['settings'], () => requestFetchOptions({}));
 
@@ -41,7 +38,7 @@ function EstimateNumberDialogContent({
 
         setTimeout(() => {
           queryCache.invalidateQueries('settings');
-          setEstimateNumberChanged(true);
+          // setEstimateNumberChanged(true);
         }, 250);
       })
       .catch(() => {
@@ -72,5 +69,4 @@ export default compose(
     nextNumber: estimatesSettings?.nextNumber,
     numberPrefix: estimatesSettings?.numberPrefix,
   })),
-  withEstimateActions,
 )(EstimateNumberDialogContent);
diff --git a/client/src/containers/Dialogs/InvoiceNumberDialog/InvoiceNumberDialogContent.js b/client/src/containers/Dialogs/InvoiceNumberDialog/InvoiceNumberDialogContent.js
index 33783df40..a9aa09cb5 100644
--- a/client/src/containers/Dialogs/InvoiceNumberDialog/InvoiceNumberDialogContent.js
+++ b/client/src/containers/Dialogs/InvoiceNumberDialog/InvoiceNumberDialogContent.js
@@ -7,7 +7,7 @@ import ReferenceNumberForm from 'containers/JournalNumber/ReferenceNumberForm';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withSettings from 'containers/Settings/withSettings';
 import withSettingsActions from 'containers/Settings/withSettingsActions';
-import withInvoicesActions from 'containers/Sales/Invoice/withInvoiceActions';
+// import withInvoicesActions from 'containers/Sales/Invoice/withInvoiceActions';
 
 import { compose, optionsMapToArray } from 'utils';
 
@@ -28,7 +28,7 @@ function InvoiceNumberDialogContent({
   closeDialog,
 
   // #withInvoicesActions
-  setInvoiceNumberChanged,
+  // setInvoiceNumberChanged,
 }) {
   const fetchSettings = useQuery(['settings'], () => requestFetchOptions({}));
 
@@ -44,7 +44,7 @@ function InvoiceNumberDialogContent({
 
         setTimeout(() => {
           queryCache.invalidateQueries('settings');
-          setInvoiceNumberChanged(true);
+          // setInvoiceNumberChanged(true);
         }, 250);
       })
       .catch(() => {
@@ -75,5 +75,5 @@ export default compose(
     nextNumber: invoiceSettings?.nextNumber,
     numberPrefix: invoiceSettings?.numberPrefix,
   })),
-  withInvoicesActions,
+  // withInvoicesActions,
 )(InvoiceNumberDialogContent);
diff --git a/client/src/containers/Dialogs/PaymentReceiveNumberDialog/PaymentReceiveNumberDialogContent.js b/client/src/containers/Dialogs/PaymentReceiveNumberDialog/PaymentReceiveNumberDialogContent.js
index 302b08cad..b0fa75c2e 100644
--- a/client/src/containers/Dialogs/PaymentReceiveNumberDialog/PaymentReceiveNumberDialogContent.js
+++ b/client/src/containers/Dialogs/PaymentReceiveNumberDialog/PaymentReceiveNumberDialogContent.js
@@ -1,13 +1,13 @@
 import React, { useCallback } from 'react';
 import { DialogContent } from 'components';
-import { useQuery, queryCache } from 'react-query';
+import { useQuery } from 'react-query';
 
 import ReferenceNumberForm from 'containers/JournalNumber/ReferenceNumberForm';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withSettingsActions from 'containers/Settings/withSettingsActions';
 import withSettings from 'containers/Settings/withSettings';
-import withPaymentReceivesActions from 'containers/Sales/PaymentReceive/withPaymentReceivesActions';
+// import withPaymentReceivesActions from 'containers/Sales/PaymentReceive/withPaymentReceivesActions';
 
 import { compose, optionsMapToArray } from 'utils';
 
@@ -28,7 +28,7 @@ function PaymentNumberDialogContent({
   closeDialog,
 
   // #withPaymentReceivesActions
-  setPaymentReceiveNumberChanged,
+  // setPaymentReceiveNumberChanged,
 }) {
   const fetchSettings = useQuery(['settings'], () => requestFetchOptions({}));
 
@@ -43,8 +43,7 @@ function PaymentNumberDialogContent({
         closeDialog('payment-receive-number-form');
 
         setTimeout(() => {
-          queryCache.invalidateQueries('settings');
-          setPaymentReceiveNumberChanged(true);
+          // setPaymentReceiveNumberChanged(true);
         }, 250);
       })
       .catch(() => {
@@ -76,5 +75,5 @@ export default compose(
     nextNumber: paymentReceiveSettings?.nextNumber,
     numberPrefix: paymentReceiveSettings?.numberPrefix,
   })),
-  withPaymentReceivesActions,
+  // withPaymentReceivesActions,
 )(PaymentNumberDialogContent);
diff --git a/client/src/containers/Dialogs/ReceiptNumberDialog/ReceiptNumberDialogContent.js b/client/src/containers/Dialogs/ReceiptNumberDialog/ReceiptNumberDialogContent.js
index 39eee1f0d..76c9100ce 100644
--- a/client/src/containers/Dialogs/ReceiptNumberDialog/ReceiptNumberDialogContent.js
+++ b/client/src/containers/Dialogs/ReceiptNumberDialog/ReceiptNumberDialogContent.js
@@ -1,13 +1,12 @@
 import React, { useCallback } from 'react';
 import { DialogContent } from 'components';
-import { useQuery, queryCache } from 'react-query';
+import { useQuery } from 'react-query';
 
 import ReferenceNumberForm from 'containers/JournalNumber/ReferenceNumberForm';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withSettings from 'containers/Settings/withSettings';
 import withSettingsActions from 'containers/Settings/withSettingsActions';
-import withReceiptActions from 'containers/Sales/Receipt/withReceiptActions';
 
 import { compose, optionsMapToArray } from 'utils';
 
@@ -43,7 +42,6 @@ function ReceiptNumberDialogContent({
         closeDialog('receipt-number-form');
 
         setTimeout(() => {
-          queryCache.invalidateQueries('settings');
           setReceiptNumberChanged(true);
         }, 250);
       })
@@ -75,5 +73,4 @@ export default compose(
     nextNumber: receiptSettings?.nextNumber,
     numberPrefix: receiptSettings?.numberPrefix,
   })),
-  withReceiptActions,
 )(ReceiptNumberDialogContent);
diff --git a/client/src/containers/Expenses/ExpensesLanding/ExpensesList.js b/client/src/containers/Expenses/ExpensesLanding/ExpensesList.js
index 83ce58a3b..4765654cd 100644
--- a/client/src/containers/Expenses/ExpensesLanding/ExpensesList.js
+++ b/client/src/containers/Expenses/ExpensesLanding/ExpensesList.js
@@ -1,6 +1,8 @@
 import React, { useEffect } from 'react';
-
 import { useIntl } from 'react-intl';
+
+import 'style/pages/Expense/List.scss';
+
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 
 import ExpenseActionsBar from './ExpenseActionsBar';
diff --git a/client/src/containers/Purchases/Bill/BillsDataTable.js b/client/src/containers/Purchases/Bill/BillsDataTable.js
deleted file mode 100644
index e41ae752c..000000000
--- a/client/src/containers/Purchases/Bill/BillsDataTable.js
+++ /dev/null
@@ -1,296 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-import {
-  Intent,
-  Button,
-  Popover,
-  Menu,
-  MenuItem,
-  MenuDivider,
-  Position,
-  Tag,
-} from '@blueprintjs/core';
-
-import { withRouter } from 'react-router';
-import { FormattedMessage as T, useIntl } from 'react-intl';
-import moment from 'moment';
-import classNames from 'classnames';
-
-import Icon from 'components/Icon';
-import { compose, saveInvoke, isBlank } from 'utils';
-import { CLASSES } from 'common/classes';
-import { useIsValuePassed } from 'hooks';
-
-import { LoadingIndicator, Money, Choose, If } from 'components';
-import DataTable from 'components/DataTable';
-import BillsEmptyStatus from './BillsEmptyStatus';
-
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import withViewDetails from 'containers/Views/withViewDetails';
-
-import withBills from './withBills';
-import withBillActions from './withBillActions';
-import withCurrentView from 'containers/Views/withCurrentView';
-import withSettings from 'containers/Settings/withSettings';
-
-// Bills transactions datatable.
-function BillsDataTable({
-  // #withBills
-  billsCurrentPage,
-  billsLoading,
-  billsPageination,
-  billsCurrentViewId,
-
-  // #withDashboardActions
-  changeCurrentView,
-  changePageSubtitle,
-  setTopbarEditView,
-
-  // #withBillsActions
-  addBillsTableQueries,
-
-  // #withView
-  viewMeta,
-
-  // #withSettings
-  baseCurrency,
-
-  // #ownProps
-  loading,
-  onFetchData,
-  onEditBill,
-  onDeleteBill,
-  onOpenBill,
-  onSelectedRowsChange,
-}) {
-  const { formatMessage } = useIntl();
-
-  const handleFetchData = useCallback(
-    ({ pageIndex, pageSize, sortBy }) => {
-      const page = pageIndex + 1;
-
-      addBillsTableQueries({
-        ...(sortBy.length > 0
-          ? {
-              column_sort_by: sortBy[0].id,
-              sort_order: sortBy[0].desc ? 'desc' : 'asc',
-            }
-          : {}),
-        page_size: pageSize,
-        page,
-      });
-    },
-    [addBillsTableQueries],
-  );
-
-  const handleEditBill = useCallback(
-    (_bill) => () => {
-      saveInvoke(onEditBill, _bill);
-    },
-    [onEditBill],
-  );
-
-  const handleDeleteBill = useCallback(
-    (_bill) => () => {
-      saveInvoke(onDeleteBill, _bill);
-    },
-    [onDeleteBill],
-  );
-
-  const actionMenuList = useCallback(
-    (bill) => (
-      <Menu>
-        <MenuItem
-          icon={<Icon icon="reader-18" />}
-          text={formatMessage({ id: 'view_details' })}
-        />
-        <MenuDivider />
-        <MenuItem
-          icon={<Icon icon="pen-18" />}
-          text={formatMessage({ id: 'edit_bill' })}
-          onClick={handleEditBill(bill)}
-        />
-        <If condition={!bill.is_open}>
-          <MenuItem
-            text={formatMessage({ id: 'mark_as_opened' })}
-            onClick={() => onOpenBill(bill)}
-          />
-        </If>
-
-        <MenuItem
-          text={formatMessage({ id: 'delete_bill' })}
-          intent={Intent.DANGER}
-          onClick={handleDeleteBill(bill)}
-          icon={<Icon icon="trash-16" iconSize={16} />}
-        />
-      </Menu>
-    ),
-    [handleDeleteBill, handleEditBill, formatMessage],
-  );
-
-  const onRowContextMenu = useCallback(
-    (cell) => {
-      return actionMenuList(cell.row.original);
-    },
-    [actionMenuList],
-  );
-
-  const columns = useMemo(
-    () => [
-      {
-        id: 'bill_date',
-        Header: formatMessage({ id: 'bill_date' }),
-        accessor: (r) => moment(r.bill_date).format('YYYY MMM DD'),
-        width: 140,
-        className: 'bill_date',
-      },
-      {
-        id: 'vendor_id',
-        Header: formatMessage({ id: 'vendor_name' }),
-        accessor: 'vendor.display_name',
-        width: 140,
-        className: 'vendor_id',
-      },
-      {
-        id: 'bill_number',
-        Header: formatMessage({ id: 'bill_number' }),
-        accessor: (row) => (row.bill_number ? `#${row.bill_number}` : null),
-        width: 140,
-        className: 'bill_number',
-      },
-      {
-        id: 'due_date',
-        Header: formatMessage({ id: 'due_date' }),
-        accessor: (r) => moment(r.due_date).format('YYYY MMM DD'),
-        width: 140,
-        className: 'due_date',
-      },
-      {
-        id: 'amount',
-        Header: formatMessage({ id: 'amount' }),
-        accessor: (row) =>
-          !isBlank(row.amount) ? (
-            <Money amount={row.amount} currency={baseCurrency} />
-          ) : (
-            ''
-          ),
-        width: 140,
-        className: 'amount',
-      },
-      {
-        id: 'status',
-        Header: formatMessage({ id: 'status' }),
-        accessor: (row) => (
-          <Choose>
-            <Choose.When condition={row.is_open}>
-              <Tag minimal={true} intent={Intent.SUCCESS}>
-                <T id={'opened'} />
-              </Tag>
-            </Choose.When>
-
-            <Choose.Otherwise>
-              <Tag minimal={true}>
-                <T id={'draft'} />
-              </Tag>
-            </Choose.Otherwise>
-          </Choose>
-        ),
-        width: 140,
-        className: 'status',
-      },
-      {
-        id: 'reference_no',
-        Header: formatMessage({ id: 'reference_no' }),
-        accessor: 'reference_no',
-        width: 140,
-        className: 'reference_no',
-      },
-      {
-        id: 'actions',
-        Header: '',
-        Cell: ({ cell }) => (
-          <Popover
-            content={actionMenuList(cell.row.original)}
-            position={Position.RIGHT_BOTTOM}
-          >
-            <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
-          </Popover>
-        ),
-        className: 'actions',
-        width: 50,
-        disableResizing: true,
-      },
-    ],
-    [actionMenuList, formatMessage],
-  );
-
-  const handleSelectedRowsChange = useCallback(
-    (selectedRows) => {
-      saveInvoke(
-        onSelectedRowsChange,
-        selectedRows.map((s) => s.original),
-      );
-    },
-    [onSelectedRowsChange],
-  );
-
-  const showEmptyStatus = [
-    billsCurrentViewId === -1,
-    billsCurrentPage.length === 0,
-  ].every((condition) => condition === true);
-
-  return (
-    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
-      <Choose>
-        <Choose.When condition={showEmptyStatus}>
-          <BillsEmptyStatus />
-        </Choose.When>
-
-        <Choose.Otherwise>
-          <DataTable
-            columns={columns}
-            data={billsCurrentPage}
-            onFetchData={handleFetchData}
-            manualSortBy={true}
-            selectionColumn={true}
-            noInitialFetch={true}
-            sticky={true}
-            onSelectedRowsChange={handleSelectedRowsChange}
-            rowContextMenu={onRowContextMenu}
-            pagination={true}
-            pagesCount={billsPageination.pagesCount}
-            initialPageSize={billsPageination.pageSize}
-            initialPageIndex={billsPageination.page - 1}
-          />
-        </Choose.Otherwise>
-      </Choose>
-    </div>
-  );
-}
-
-export default compose(
-  withRouter,
-  withCurrentView,
-  withDialogActions,
-  withDashboardActions,
-  withBillActions,
-  withBills(
-    ({
-      billsCurrentPage,
-      billsLoading,
-      billsPageination,
-      billsTableQuery,
-      billsCurrentViewId,
-    }) => ({
-      billsCurrentPage,
-      billsLoading,
-      billsPageination,
-      billsTableQuery,
-      billsCurrentViewId,
-    }),
-  ),
-  withSettings(({ organizationSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
-  withViewDetails(),
-)(BillsDataTable);
diff --git a/client/src/containers/Purchases/Bill/BillsViewPage.js b/client/src/containers/Purchases/Bill/BillsViewPage.js
deleted file mode 100644
index 7fccb0868..000000000
--- a/client/src/containers/Purchases/Bill/BillsViewPage.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React, { useCallback } from 'react';
-
-import { Switch, Route, useHistory } from 'react-router-dom';
-import BillViewTabs from './BillViewTabs';
-import BillsDataTable from './BillsDataTable';
-
-import withAlertsActions from 'containers/Alert/withAlertActions';
-import withDialogActions from 'containers/Dialog/withDialogActions';
-
-import { compose } from 'utils';
-
-function BillsViewPage() {
-  const history = useHistory();
-
-  const handleEditBill = useCallback((bill) => {
-    history.push(`/bills/${bill.id}/edit`);
-  });
-
-  const handleDeleteBill = () => {
-
-  };
-
-
-  const handleOpenBill = () => {
-
-  };
-
-  const handleSelectedRowsChange = () => {
-
-  }
-
-  return (
-    <Switch>
-      <Route
-        exact={true}
-        path={['/bills/:custom_view_id/custom_view', '/bills']}
-      >
-        <BillViewTabs />
-        {/* <BillsDataTable
-          onDeleteBill={handleDeleteBill}
-          onEditBill={handleEditBill}
-          onOpenBill={handleOpenBill}
-          onSelectedRowsChange={handleSelectedRowsChange}
-        /> */}
-      </Route>
-    </Switch>
-  );
-}
-export default compose(withAlertsActions, withDialogActions)(BillsViewPage);
diff --git a/client/src/containers/Purchases/Bill/withBillActions.js b/client/src/containers/Purchases/Bill/withBillActions.js
deleted file mode 100644
index 44d6193e0..000000000
--- a/client/src/containers/Purchases/Bill/withBillActions.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import { connect } from 'react-redux';
-import {
-  submitBill,
-  deleteBill,
-  editBill,
-  fetchBillsTable,
-  fetchBill,
-  fetchDueBills,
-  openBill,
-} from 'store/Bills/bills.actions';
-import t from 'store/types';
-
-const mapDispatchToProps = (dispatch) => ({
-  requestSubmitBill: (form) => dispatch(submitBill({ form })),
-  requestFetchBill: (id) => dispatch(fetchBill({ id })),
-  requestEditBill: (id, form) => dispatch(editBill(id, form)),
-  requestDeleteBill: (id) => dispatch(deleteBill({ id })),
-  requestFetchBillsTable: (query = {}) =>
-    dispatch(fetchBillsTable({ query: { ...query } })),
-  requestFetchDueBills: (vendorId) => dispatch(fetchDueBills({ vendorId })),
-  requestOpenBill: (id) => dispatch(openBill({ id })),
-  changeBillView: (id) =>
-    dispatch({
-      type: t.BILLS_SET_CURRENT_VIEW,
-      currentViewId: parseInt(id, 10),
-    }),
-
-  addBillsTableQueries: (queries) =>
-    dispatch({
-      type: t.BILLS_TABLE_QUERIES_ADD,
-      payload: { queries }
-    }),
-  setBillNumberChanged: (isChanged) =>
-    dispatch({
-      type: t.BILL_NUMBER_CHANGED,
-      payload: { isChanged },
-    }),
-});
-
-export default connect(null, mapDispatchToProps);
diff --git a/client/src/containers/Purchases/Bill/withBillDetail.js b/client/src/containers/Purchases/Bill/withBillDetail.js
deleted file mode 100644
index 3170ee5d5..000000000
--- a/client/src/containers/Purchases/Bill/withBillDetail.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { connect } from 'react-redux';
-import { getBillByIdFactory } from 'store/Bills/bills.selectors';
-
-export default () => {
-  const getBillById = getBillByIdFactory();
-
-  const mapStateToProps = (state, props) => ({
-    bill: getBillById(state, props),
-  });
-  return connect(mapStateToProps);
-};
diff --git a/client/src/containers/Purchases/Bill/withBills.js b/client/src/containers/Purchases/Bill/withBills.js
deleted file mode 100644
index 8cb6c5bfe..000000000
--- a/client/src/containers/Purchases/Bill/withBills.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import { connect } from 'react-redux';
-import { getResourceViews } from 'store/customViews/customViews.selectors';
-import {
-  getBillCurrentPageFactory,
-  getBillPaginationMetaFactory,
-  getBillTableQueryFactory,
-  getVendorPayableBillsFactory,
-  getVendorPayableBillsEntriesFactory,
-  getBillsCurrentViewIdFactory,
-} from 'store/Bills/bills.selectors';
-
-export default (mapState) => {
-  const getBillsItems = getBillCurrentPageFactory();
-  const getBillsPaginationMeta = getBillPaginationMetaFactory();
-  const getBillTableQuery = getBillTableQueryFactory();
-  const getVendorPayableBills = getVendorPayableBillsFactory();
-  const getVendorPayableBillsEntries = getVendorPayableBillsEntriesFactory();
-  const getBillsCurrentViewId = getBillsCurrentViewIdFactory();
-
-  const mapStateToProps = (state, props) => {
-    const tableQuery = getBillTableQuery(state, props);
-
-    const mapped = {
-      billsCurrentPage: getBillsItems(state, props, tableQuery),
-      billsCurrentViewId: getBillsCurrentViewId(state),
-      billsViews: getResourceViews(state, props, 'bills'),
-      billsItems: state.bills.items,
-      billsTableQuery: tableQuery,
-
-      billsPageination: getBillsPaginationMeta(state, props, tableQuery),
-      billsLoading: state.bills.loading,
-      nextBillNumberChanged: state.bills.nextBillNumberChanged,
-      vendorPayableBills: getVendorPayableBills(state, props),
-      vendorPayableBillsEntries: getVendorPayableBillsEntries(state, props),
-      
-    };
-    return mapState ? mapState(mapped, state, props) : mapped;
-  };
-  return connect(mapStateToProps);
-};
diff --git a/client/src/containers/Purchases/Bill/BillFloatingActions.js b/client/src/containers/Purchases/Bills/BillForm/BillFloatingActions.js
similarity index 100%
rename from client/src/containers/Purchases/Bill/BillFloatingActions.js
rename to client/src/containers/Purchases/Bills/BillForm/BillFloatingActions.js
diff --git a/client/src/containers/Purchases/Bill/BillForm.js b/client/src/containers/Purchases/Bills/BillForm/BillForm.js
similarity index 100%
rename from client/src/containers/Purchases/Bill/BillForm.js
rename to client/src/containers/Purchases/Bills/BillForm/BillForm.js
diff --git a/client/src/containers/Purchases/Bill/BillForm.schema.js b/client/src/containers/Purchases/Bills/BillForm/BillForm.schema.js
similarity index 100%
rename from client/src/containers/Purchases/Bill/BillForm.schema.js
rename to client/src/containers/Purchases/Bills/BillForm/BillForm.schema.js
diff --git a/client/src/containers/Purchases/Bill/BillFormBody.js b/client/src/containers/Purchases/Bills/BillForm/BillFormBody.js
similarity index 100%
rename from client/src/containers/Purchases/Bill/BillFormBody.js
rename to client/src/containers/Purchases/Bills/BillForm/BillFormBody.js
diff --git a/client/src/containers/Purchases/Bill/BillFormFooter.js b/client/src/containers/Purchases/Bills/BillForm/BillFormFooter.js
similarity index 100%
rename from client/src/containers/Purchases/Bill/BillFormFooter.js
rename to client/src/containers/Purchases/Bills/BillForm/BillFormFooter.js
diff --git a/client/src/containers/Purchases/Bill/BillFormHeader.js b/client/src/containers/Purchases/Bills/BillForm/BillFormHeader.js
similarity index 100%
rename from client/src/containers/Purchases/Bill/BillFormHeader.js
rename to client/src/containers/Purchases/Bills/BillForm/BillFormHeader.js
diff --git a/client/src/containers/Purchases/Bill/BillFormHeaderFields.js b/client/src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.js
similarity index 100%
rename from client/src/containers/Purchases/Bill/BillFormHeaderFields.js
rename to client/src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.js
diff --git a/client/src/containers/Purchases/Bill/BillFormPage.js b/client/src/containers/Purchases/Bills/BillForm/BillFormPage.js
similarity index 100%
rename from client/src/containers/Purchases/Bill/BillFormPage.js
rename to client/src/containers/Purchases/Bills/BillForm/BillFormPage.js
diff --git a/client/src/containers/Purchases/Bill/BillFormProvider.js b/client/src/containers/Purchases/Bills/BillForm/BillFormProvider.js
similarity index 100%
rename from client/src/containers/Purchases/Bill/BillFormProvider.js
rename to client/src/containers/Purchases/Bills/BillForm/BillFormProvider.js
diff --git a/client/src/containers/Purchases/Bill/BillsActionsBar.js b/client/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.js
similarity index 90%
rename from client/src/containers/Purchases/Bill/BillsActionsBar.js
rename to client/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.js
index aa813a549..21821cfae 100644
--- a/client/src/containers/Purchases/Bill/BillsActionsBar.js
+++ b/client/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.js
@@ -18,7 +18,7 @@ import { FormattedMessage as T, useIntl } from 'react-intl';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import { If, DashboardActionViewsList } from 'components';
 
-import withBillActions from './withBillActions';
+import withBillsActions from './withBillsActions';
 import { useBillsListContext } from './BillsListProvider';
 
 import { compose } from 'utils';
@@ -27,28 +27,31 @@ import { compose } from 'utils';
  * Bills actions bar.
  */
 function BillActionsBar({
-  //#withBillActions
-  addBillsTableQueries,
+  // #withBillActions
+  setBillsTableState,
 }) {
   const history = useHistory();
+
+  // React intl.
   const { formatMessage } = useIntl();
-  
+
   // Bills list context.
   const { billsViews } = useBillsListContext();
-  
+
   const [filterCount] = useState(0);
 
   // Handle click a new bill.
   const handleClickNewBill = () => {
     history.push('/bills/new');
   };
+
   // Handle tab change.
-  const handleTabChange = (viewId) => {
-    addBillsTableQueries({
-      custom_view_id: viewId.id || null,
+  const handleTabChange = (customView) => {
+    setBillsTableState({
+      customViewId: customView.id || null,
     });
   };
- 
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -111,6 +114,4 @@ function BillActionsBar({
   );
 }
 
-export default compose(
-  withBillActions,
-)(BillActionsBar);
+export default compose(withBillsActions)(BillActionsBar);
diff --git a/client/src/containers/Purchases/Bill/BillsAlerts.js b/client/src/containers/Purchases/Bills/BillsLanding/BillsAlerts.js
similarity index 100%
rename from client/src/containers/Purchases/Bill/BillsAlerts.js
rename to client/src/containers/Purchases/Bills/BillsLanding/BillsAlerts.js
diff --git a/client/src/containers/Purchases/Bill/BillsEmptyStatus.js b/client/src/containers/Purchases/Bills/BillsLanding/BillsEmptyStatus.js
similarity index 100%
rename from client/src/containers/Purchases/Bill/BillsEmptyStatus.js
rename to client/src/containers/Purchases/Bills/BillsLanding/BillsEmptyStatus.js
diff --git a/client/src/containers/Purchases/Bill/BillsList.js b/client/src/containers/Purchases/Bills/BillsLanding/BillsList.js
similarity index 70%
rename from client/src/containers/Purchases/Bill/BillsList.js
rename to client/src/containers/Purchases/Bills/BillsLanding/BillsList.js
index 2092d2d72..6c8ea1244 100644
--- a/client/src/containers/Purchases/Bill/BillsList.js
+++ b/client/src/containers/Purchases/Bills/BillsLanding/BillsList.js
@@ -4,15 +4,16 @@ import { useIntl } from 'react-intl';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 
 import { BillsListProvider } from './BillsListProvider';
-import BillsDataTable from './BillsDataTable';
+
 import BillsActionsBar from './BillsActionsBar';
 import BillsAlerts from './BillsAlerts';
-import BillsViewPage from './BillsViewPage';
+import BillsViewsTabs from './BillsViewsTabs';
+import BillsTable from './BillsTable';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withBills from './withBills';
 
-import { compose } from 'utils';
+import { transformTableStateToQuery, compose } from 'utils';
 
 /**
  * Bills list.
@@ -22,7 +23,7 @@ function BillsList({
   changePageTitle,
 
   // #withBills
-  billsTableQuery,
+  billsTableState,
 }) {
   const { formatMessage } = useIntl();
   
@@ -31,20 +32,20 @@ function BillsList({
   }, [changePageTitle, formatMessage]);
   
   return (
-    <BillsListProvider query={billsTableQuery}>
+    <BillsListProvider query={transformTableStateToQuery(billsTableState)}>
       <BillsActionsBar />
 
       <DashboardPageContent>
-        <BillsViewPage />
-        <BillsAlerts />
+        <BillsViewsTabs />
+        <BillsTable />
       </DashboardPageContent>
+
+      <BillsAlerts />
     </BillsListProvider>
   );
 }
 
 export default compose(
   withDashboardActions,
-  withBills(({ billsTableQuery }) => ({
-    billsTableQuery,
-  })),
+  withBills(({ billsTableState }) => ({ billsTableState })),
 )(BillsList);
diff --git a/client/src/containers/Purchases/Bill/BillsListProvider.js b/client/src/containers/Purchases/Bills/BillsLanding/BillsListProvider.js
similarity index 74%
rename from client/src/containers/Purchases/Bill/BillsListProvider.js
rename to client/src/containers/Purchases/Bills/BillsLanding/BillsListProvider.js
index 01bfa3546..931bc50e5 100644
--- a/client/src/containers/Purchases/Bill/BillsListProvider.js
+++ b/client/src/containers/Purchases/Bills/BillsLanding/BillsListProvider.js
@@ -1,6 +1,7 @@
 import React, { createContext } from 'react';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import { useResourceViews, useResourceFields, useBills } from 'hooks/query';
+import { isTableEmptyStatus }  from 'utils';
 
 const BillsListContext = createContext();
 
@@ -21,9 +22,15 @@ function BillsListProvider({ query, ...props }) {
 
   // Fetch accounts list according to the given custom view id.
   const {
-    data: { bills, pagination },
-    isFetching: isBillsLoading,
-  } = useBills(query);
+    data: { bills, pagination, filterMeta },
+    isLoading: isBillsLoading,
+    isFetching: isBillsFetching,
+  } = useBills(query, { keepPreviousData: true });
+
+  // Detarmines the datatable empty status.
+  const isEmptyStatus = isTableEmptyStatus({
+    data: bills, pagination, filterMeta,
+  }) && !isBillsFetching;
 
   // Provider payload.
   const provider = {
@@ -33,8 +40,10 @@ function BillsListProvider({ query, ...props }) {
     billsViews,
 
     isBillsLoading,
+    isBillsFetching,
     isFieldsLoading,
     isViewsLoading,
+    isEmptyStatus
   };
 
   return (
diff --git a/client/src/containers/Purchases/Bills/BillsLanding/BillsTable.js b/client/src/containers/Purchases/Bills/BillsLanding/BillsTable.js
new file mode 100644
index 000000000..9a401044b
--- /dev/null
+++ b/client/src/containers/Purchases/Bills/BillsLanding/BillsTable.js
@@ -0,0 +1,108 @@
+import React, { useCallback } from 'react';
+import classNames from 'classnames';
+import { useHistory } from 'react-router-dom';
+
+import { compose } from 'utils';
+import { CLASSES } from 'common/classes';
+
+import DataTable from 'components/DataTable';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+
+import BillsEmptyStatus from './BillsEmptyStatus';
+
+import withBillActions from './withBillsActions';
+import withSettings from 'containers/Settings/withSettings';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import { useBillsTableColumns, ActionsMenu } from './components';
+import { useBillsListContext } from './BillsListProvider';
+
+/**
+ * Bills transactions datatable.
+ */
+function BillsDataTable({
+  // #withBillsActions
+  setBillsTableState,
+
+  // #withAlerts
+  openAlert
+}) {
+  // Bills list context.
+  const {
+    bills,
+    pagination,
+    isBillsLoading,
+    isBillsFetching,
+    isEmptyStatus,
+  } = useBillsListContext();
+
+  const history = useHistory();
+
+  // Bills table columns.
+  const columns = useBillsTableColumns();
+
+  const handleFetchData = useCallback(
+    ({ pageIndex, pageSize, sortBy }) => {
+      setBillsTableState({
+        pageIndex,
+        pageSize,
+        sortBy,
+      });
+    },
+    [setBillsTableState],
+  );
+
+  // Handle bill edit action.
+  const handleEditBill = (bill) => {
+    history.push(`/bills/${bill.id}/edit`);
+  };
+
+  // Handle bill delete action.
+  const handleDeleteBill = (bill) => {
+    openAlert('bill-delete', { billId: bill.id });
+  };
+
+  // Handle bill open action.
+  const handleOpenBill = (bill) => {
+    openAlert('bill-open', { billId: bill.id });
+  };
+
+  if (isEmptyStatus) {
+    return <BillsEmptyStatus />;
+  }
+
+  return (
+    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
+      <DataTable
+        columns={columns}
+        data={bills}
+        loading={isBillsLoading}
+        headerLoading={isBillsLoading}
+        progressBarLoading={isBillsFetching}
+        onFetchData={handleFetchData}
+        manualSortBy={true}
+        selectionColumn={true}
+        noInitialFetch={true}
+        sticky={true}
+        pagination={true}
+        pagesCount={pagination.pagesCount}
+        TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
+        payload={{
+          onDelete: handleDeleteBill,
+          onEdit: handleEditBill,
+          onOpen: handleOpenBill
+        }}
+      />
+    </div>
+  );
+}
+
+export default compose(
+  withBillActions,
+  withAlertsActions,
+  withSettings(({ organizationSettings }) => ({
+    baseCurrency: organizationSettings?.baseCurrency,
+  })),
+)(BillsDataTable);
diff --git a/client/src/containers/Purchases/Bill/BillViewTabs.js b/client/src/containers/Purchases/Bills/BillsLanding/BillsViewsTabs.js
similarity index 82%
rename from client/src/containers/Purchases/Bill/BillViewTabs.js
rename to client/src/containers/Purchases/Bills/BillsLanding/BillsViewsTabs.js
index cd962f0c2..053b932ca 100644
--- a/client/src/containers/Purchases/Bill/BillViewTabs.js
+++ b/client/src/containers/Purchases/Bills/BillsLanding/BillsViewsTabs.js
@@ -7,7 +7,7 @@ import { pick } from 'lodash';
 import { DashboardViewsTabs } from 'components';
 
 import { useBillsListContext } from './BillsListProvider';
-import withBillActions from './withBillActions';
+import withBillActions from './withBillsActions';
 
 import { compose } from 'utils';
 
@@ -16,16 +16,17 @@ import { compose } from 'utils';
  */
 function BillViewTabs({
   //#withBillActions
-  addBillsTableQueries,
+  setBillsTableState,
 }) {
   const { custom_view_id: customViewId = null } = useParams();
 
   // Bills list context.
   const { billsViews } = useBillsListContext();
 
-  const handleTabsChange = (viewId) => {
-    addBillsTableQueries({
-      custom_view_id: customViewId || null,
+  // Handle tab chaging.
+  const handleTabsChange = (customView) => {
+    setBillsTableState({
+      customViewId: customView || null,
     });
   };
 
diff --git a/client/src/containers/Purchases/Bills/BillsLanding/components.js b/client/src/containers/Purchases/Bills/BillsLanding/components.js
new file mode 100644
index 000000000..bc8abd309
--- /dev/null
+++ b/client/src/containers/Purchases/Bills/BillsLanding/components.js
@@ -0,0 +1,167 @@
+import React from 'react';
+import {
+  Intent,
+  Menu,
+  MenuItem,
+  MenuDivider,
+  Popover,
+  Button,
+  Position,
+  Tag,
+} from '@blueprintjs/core';
+import { useIntl, FormattedMessage as T } from 'react-intl';
+import { Icon, If, Choose, Money } from 'components';
+import { safeCallback, isBlank } from 'utils';
+import moment from 'moment';
+
+/**
+ * Actions menu.
+ */
+export function ActionsMenu({
+  payload: { onEdit, onOpen, onDelete },
+  row: { original },
+}) {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="reader-18" />}
+        text={formatMessage({ id: 'view_details' })}
+      />
+      <MenuDivider />
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={formatMessage({ id: 'edit_bill' })}
+        onClick={safeCallback(onEdit, original)}
+      />
+
+      <If condition={!original.is_open}>
+        <MenuItem
+          text={formatMessage({ id: 'mark_as_opened' })}
+          onClick={safeCallback(onOpen, original)}
+        />
+      </If>
+
+      <MenuItem
+        text={formatMessage({ id: 'delete_bill' })}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * Amount accessor.
+ */
+export function AmountAccessor(bill) {
+  return !isBlank(bill.amount) ? (
+    <Money amount={bill.amount} currency={'USD'} />
+  ) : (
+    ''
+  );
+}
+
+/**
+ * Status accessor.
+ */
+export function StatusAccessor(bill) {
+  return (
+    <Choose>
+      <Choose.When condition={bill.is_open}>
+        <Tag minimal={true} intent={Intent.SUCCESS}>
+          <T id={'opened'} />
+        </Tag>
+      </Choose.When>
+
+      <Choose.Otherwise>
+        <Tag minimal={true}>
+          <T id={'draft'} />
+        </Tag>
+      </Choose.Otherwise>
+    </Choose>
+  );
+}
+
+export function ActionsCell(props) {
+  return (
+    <Popover
+      content={<ActionsMenu {...props} />}
+      position={Position.RIGHT_BOTTOM}
+    >
+      <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
+    </Popover>
+  );
+}
+
+/**
+ * Retrieve bills table columns.
+ */
+export function useBillsTableColumns() {
+  const { formatMessage } = useIntl();
+
+  return React.useMemo(
+    () => [
+      {
+        id: 'bill_date',
+        Header: formatMessage({ id: 'bill_date' }),
+        accessor: (r) => moment(r.bill_date).format('YYYY MMM DD'),
+        width: 140,
+        className: 'bill_date',
+      },
+      {
+        id: 'vendor_id',
+        Header: formatMessage({ id: 'vendor_name' }),
+        accessor: 'vendor.display_name',
+        width: 140,
+        className: 'vendor_id',
+      },
+      {
+        id: 'bill_number',
+        Header: formatMessage({ id: 'bill_number' }),
+        accessor: (row) => (row.bill_number ? `#${row.bill_number}` : null),
+        width: 140,
+        className: 'bill_number',
+      },
+      {
+        id: 'due_date',
+        Header: formatMessage({ id: 'due_date' }),
+        accessor: (r) => moment(r.due_date).format('YYYY MMM DD'),
+        width: 140,
+        className: 'due_date',
+      },
+      {
+        id: 'amount',
+        Header: formatMessage({ id: 'amount' }),
+        accessor: AmountAccessor,
+        width: 140,
+        className: 'amount',
+      },
+      {
+        id: 'status',
+        Header: formatMessage({ id: 'status' }),
+        accessor: StatusAccessor,
+        width: 140,
+        className: 'status',
+      },
+      {
+        id: 'reference_no',
+        Header: formatMessage({ id: 'reference_no' }),
+        accessor: 'reference_no',
+        width: 140,
+        className: 'reference_no',
+      },
+      {
+        id: 'actions',
+        Header: '',
+        Cell: ActionsCell,
+        className: 'actions',
+        width: 50,
+        disableResizing: true,
+      },
+    ],
+    [formatMessage],
+  );
+}
diff --git a/client/src/containers/Purchases/Bills/BillsLanding/withBills.js b/client/src/containers/Purchases/Bills/BillsLanding/withBills.js
new file mode 100644
index 000000000..6c6ec01c1
--- /dev/null
+++ b/client/src/containers/Purchases/Bills/BillsLanding/withBills.js
@@ -0,0 +1,14 @@
+import { connect } from 'react-redux';
+import { getBillsTableStateFactory } from 'store/Bills/bills.selectors';
+
+export default (mapState) => {
+  const getBillsTableState = getBillsTableStateFactory();
+
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      billsTableState: getBillsTableState(state, props),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};
diff --git a/client/src/containers/Purchases/Bills/BillsLanding/withBillsActions.js b/client/src/containers/Purchases/Bills/BillsLanding/withBillsActions.js
new file mode 100644
index 000000000..e0d6d0c03
--- /dev/null
+++ b/client/src/containers/Purchases/Bills/BillsLanding/withBillsActions.js
@@ -0,0 +1,8 @@
+import { connect } from 'react-redux';
+import { setBillsTableState } from 'store/Bills/bills.actions';
+
+const mapDispatchToProps = (dispatch) => ({
+  setBillsTableState: (queries) => dispatch(setBillsTableState(queries)),
+});
+
+export default connect(null, mapDispatchToProps);
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentMadeFloatingActions.js b/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFloatingActions.js
similarity index 100%
rename from client/src/containers/Purchases/PaymentMades/PaymentMadeFloatingActions.js
rename to client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFloatingActions.js
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentMadeFooter.js b/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFooter.js
similarity index 100%
rename from client/src/containers/Purchases/PaymentMades/PaymentMadeFooter.js
rename to client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFooter.js
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentMadeForm.js b/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeForm.js
similarity index 100%
rename from client/src/containers/Purchases/PaymentMades/PaymentMadeForm.js
rename to client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeForm.js
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentMadeForm.schema.js b/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeForm.schema.js
similarity index 100%
rename from client/src/containers/Purchases/PaymentMades/PaymentMadeForm.schema.js
rename to client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeForm.schema.js
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentMadeFormHeader.js b/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeader.js
similarity index 100%
rename from client/src/containers/Purchases/PaymentMades/PaymentMadeFormHeader.js
rename to client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeader.js
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentMadeFormPage.js b/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormPage.js
similarity index 100%
rename from client/src/containers/Purchases/PaymentMades/PaymentMadeFormPage.js
rename to client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormPage.js
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentMadeItemsTable.js b/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeItemsTable.js
similarity index 100%
rename from client/src/containers/Purchases/PaymentMades/PaymentMadeItemsTable.js
rename to client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeItemsTable.js
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentMadeItemsTableEditor.js b/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeItemsTableEditor.js
similarity index 100%
rename from client/src/containers/Purchases/PaymentMades/PaymentMadeItemsTableEditor.js
rename to client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeItemsTableEditor.js
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentMadeDataTable.js b/client/src/containers/Purchases/PaymentMades/PaymentMadeDataTable.js
deleted file mode 100644
index 8aa62e4cd..000000000
--- a/client/src/containers/Purchases/PaymentMades/PaymentMadeDataTable.js
+++ /dev/null
@@ -1,249 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-import {
-  Intent,
-  Button,
-  Popover,
-  Menu,
-  MenuItem,
-  MenuDivider,
-  Position,
-} from '@blueprintjs/core';
-import { withRouter } from 'react-router';
-import { FormattedMessage as T, useIntl } from 'react-intl';
-import moment from 'moment';
-import classNames from 'classnames';
-
-import { compose, saveInvoke } from 'utils';
-import { useIsValuePassed } from 'hooks';
-
-import { CLASSES } from 'common/classes';
-import { DataTable, Money, Icon, Choose, LoadingIndicator } from 'components';
-import PaymentMadesEmptyStatus from './PaymentMadesEmptyStatus';
-
-import withPaymentMade from './withPaymentMade';
-import withPaymentMadeActions from './withPaymentMadeActions';
-import withCurrentView from 'containers/Views/withCurrentView';
-import withSettings from 'containers/Settings/withSettings';
-
-/**
- * Payment made datatable transactions.
- */
-function PaymentMadeDataTable({
-  // #withPaymentMades
-  paymentMadeCurrentPage,
-  paymentMadePageination,
-  paymentMadesLoading,
-  paymentMadeTableQuery,
-  paymentMadesCurrentViewId,
-
-  // #withPaymentMadeActions
-  addPaymentMadesTableQueries,
-
-  // #withSettings
-  baseCurrency,
-
-  // #ownProps
-  onEditPaymentMade,
-  onDeletePaymentMade,
-  onSelectedRowsChange,
-}) {
-  const isLoaded = useIsValuePassed(paymentMadesLoading, false);
-  const { formatMessage } = useIntl();
-
-  const handleEditPaymentMade = useCallback(
-    (paymentMade) => () => {
-      saveInvoke(onEditPaymentMade, paymentMade);
-    },
-    [onEditPaymentMade],
-  );
-
-  const handleDeletePaymentMade = useCallback(
-    (paymentMade) => () => {
-      saveInvoke(onDeletePaymentMade, paymentMade);
-    },
-    [onDeletePaymentMade],
-  );
-
-  const actionMenuList = useCallback(
-    (paymentMade) => (
-      <Menu>
-        <MenuItem
-          icon={<Icon icon="reader-18" />}
-          text={formatMessage({ id: 'view_details' })}
-        />
-        <MenuDivider />
-        <MenuItem
-          icon={<Icon icon="pen-18" />}
-          text={formatMessage({ id: 'edit_payment_made' })}
-          onClick={handleEditPaymentMade(paymentMade)}
-        />
-        <MenuItem
-          text={formatMessage({ id: 'delete_payment_made' })}
-          intent={Intent.DANGER}
-          onClick={handleDeletePaymentMade(paymentMade)}
-          icon={<Icon icon="trash-16" iconSize={16} />}
-        />
-      </Menu>
-    ),
-    [handleDeletePaymentMade, handleEditPaymentMade, formatMessage],
-  );
-
-  const onRowContextMenu = useCallback(
-    (cell) => {
-      return actionMenuList(cell.row.original);
-    },
-    [actionMenuList],
-  );
-
-  const columns = useMemo(
-    () => [
-      {
-        id: 'payment_date',
-        Header: formatMessage({ id: 'payment_date' }),
-        accessor: (r) => moment(r.payment_date).format('YYYY MMM DD'),
-        width: 140,
-        className: 'payment_date',
-      },
-      {
-        id: 'vendor_id',
-        Header: formatMessage({ id: 'vendor_name' }),
-        accessor: 'vendor.display_name',
-        width: 140,
-        className: 'vendor_id',
-      },
-      {
-        id: 'payment_number',
-        Header: formatMessage({ id: 'payment_number' }),
-        accessor: (row) =>
-          row.payment_number ? `#${row.payment_number}` : null,
-        width: 140,
-        className: 'payment_number',
-      },
-      {
-        id: 'payment_account_id',
-        Header: formatMessage({ id: 'payment_account' }),
-        accessor: 'payment_account.name',
-        width: 140,
-        className: 'payment_account_id',
-      },
-      {
-        id: 'amount',
-        Header: formatMessage({ id: 'amount' }),
-        accessor: (r) => <Money amount={r.amount} currency={baseCurrency} />,
-        width: 140,
-        className: 'amount',
-      },
-      {
-        id: 'reference',
-        Header: formatMessage({ id: 'reference' }),
-        accessor: 'reference',
-        width: 140,
-        className: 'reference',
-      },
-
-      {
-        id: 'actions',
-        Header: '',
-        Cell: ({ cell }) => (
-          <Popover
-            content={actionMenuList(cell.row.original)}
-            position={Position.RIGHT_BOTTOM}
-          >
-            <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
-          </Popover>
-        ),
-        className: 'actions',
-        width: 50,
-        disableResizing: true,
-      },
-    ],
-    [actionMenuList, formatMessage],
-  );
-
-  const handleDataTableFetchData = useCallback(
-    ({ pageIndex, pageSize, sortBy }) => {
-      addPaymentMadesTableQueries({
-        ...(sortBy.length > 0
-          ? {
-              column_sort_by: sortBy[0].id,
-              sort_order: sortBy[0].desc ? 'desc' : 'asc',
-            }
-          : {}),
-        page_size: pageSize,
-        page: pageIndex + 1,
-      });
-    },
-    [addPaymentMadesTableQueries],
-  );
-
-  const handleSelectedRowsChange = useCallback(
-    (selectedRows) => {
-      saveInvoke(
-        onSelectedRowsChange,
-        selectedRows.map((s) => s.original),
-      );
-    },
-    [onSelectedRowsChange],
-  );
-
-  const showEmptyStatuts = [
-    paymentMadeCurrentPage.length === 0,
-    paymentMadesCurrentViewId === -1,
-  ].every((condition) => condition === true);
-
-  return (
-    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
-      <LoadingIndicator loading={paymentMadesLoading && !isLoaded}>
-        <Choose>
-          <Choose.When condition={showEmptyStatuts}>
-            <PaymentMadesEmptyStatus />
-          </Choose.When>
-
-          <Choose.Otherwise>
-            <DataTable
-              columns={columns}
-              data={paymentMadeCurrentPage}
-              onFetchData={handleDataTableFetchData}
-              manualSortBy={true}
-              selectionColumn={true}
-              noInitialFetch={true}
-              sticky={true}
-              onSelectedRowsChange={handleSelectedRowsChange}
-              rowContextMenu={onRowContextMenu}
-              pagination={true}
-              pagesCount={paymentMadePageination.pagesCount}
-              initialPageSize={paymentMadeTableQuery.page_size}
-              initialPageIndex={paymentMadeTableQuery.page - 1}
-              autoResetSortBy={false}
-              autoResetPage={false}
-            />
-          </Choose.Otherwise>
-        </Choose>
-      </LoadingIndicator>
-    </div>
-  );
-}
-
-export default compose(
-  withRouter,
-  withCurrentView,
-  withPaymentMadeActions,
-  withPaymentMade(
-    ({
-      paymentMadeCurrentPage,
-      paymentMadesLoading,
-      paymentMadePageination,
-      paymentMadeTableQuery,
-      paymentMadesCurrentViewId,
-    }) => ({
-      paymentMadeCurrentPage,
-      paymentMadesLoading,
-      paymentMadePageination,
-      paymentMadeTableQuery,
-      paymentMadesCurrentViewId,
-    }),
-  ),
-  withSettings(({ organizationSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
-)(PaymentMadeDataTable);
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentMadesAlerts.js b/client/src/containers/Purchases/PaymentMades/PaymentMadesAlerts.js
index 6ce324e13..f21004284 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentMadesAlerts.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentMadesAlerts.js
@@ -4,7 +4,7 @@ import PaymentMadeDeleteAlert from 'containers/Alerts/PaymentMades/PaymentMadeDe
 export default function PaymentMadesAlerts() {
   return (
     <div>
-      <PaymentMadeDeleteAlert dialogName={'payment-made-delete'} />
+      <PaymentMadeDeleteAlert name={'payment-made-delete'} />
     </div>
   );
 }
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentMadeActionsBar.js b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js
similarity index 92%
rename from client/src/containers/Purchases/PaymentMades/PaymentMadeActionsBar.js
rename to client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js
index b5e403bc6..ebf4cd447 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentMadeActionsBar.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js
@@ -27,8 +27,8 @@ import { compose } from 'utils';
  * Payment made actions bar.
  */
 function PaymentMadeActionsBar({
-  //#withPaymentMadesActions
-  addPaymentMadesTableQueries,
+  // #withPaymentMadesActions
+  setPaymentMadesTableState,
 }) {
   const history = useHistory();
   const { formatMessage } = useIntl();
@@ -41,12 +41,18 @@ function PaymentMadeActionsBar({
     history.push('/payment-mades/new');
   };
 
+  // Handle tab changing.
+  const handleTabChange = (customView) => {
+    setPaymentMadesTableState({ customViewId: customView.id || null });
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
         <DashboardActionViewsList
           resourceName={'bill_payments'}
           views={paymentMadesViews}
+          onChange={handleTabChange}
         />
         <NavbarDivider />
         <Button
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentMadeList.js b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeList.js
similarity index 61%
rename from client/src/containers/Purchases/PaymentMades/PaymentMadeList.js
rename to client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeList.js
index ef14a717a..3f4318ab2 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentMadeList.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeList.js
@@ -1,16 +1,17 @@
 import React, { useEffect } from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import PaymentMadeActionsBar from './PaymentMadeActionsBar';
-import PaymentMadesAlerts from './PaymentMadesAlerts';
+import PaymentMadesAlerts from '../PaymentMadesAlerts';
+import PaymentMadesTable from './PaymentMadesTable';
 import { PaymentMadesListProvider } from './PaymentMadesListProvider';
-import PaymentMadesView from './PaymentMadesView';
+import PaymentMadeViewTabs from './PaymentMadeViewTabs';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withPaymentMades from './withPaymentMade';
 
-import { compose } from 'utils';
+import { compose, transformTableStateToQuery } from 'utils';
 
 /**
  * Payment mades list.
@@ -20,7 +21,7 @@ function PaymentMadeList({
   changePageTitle,
 
   // #withPaymentMades
-  paymentMadeTableQuery,
+  paymentMadesTableState,
 }) {
   const { formatMessage } = useIntl();
 
@@ -29,20 +30,24 @@ function PaymentMadeList({
   }, [changePageTitle, formatMessage]);
 
   return (
-    <PaymentMadesListProvider query={paymentMadeTableQuery}>
+    <PaymentMadesListProvider
+      query={transformTableStateToQuery(paymentMadesTableState)}
+    >
       <PaymentMadeActionsBar />
 
       <DashboardPageContent>
-        <PaymentMadesView />
-        <PaymentMadesAlerts />
+        <PaymentMadeViewTabs />
+        <PaymentMadesTable />
       </DashboardPageContent>
+
+      <PaymentMadesAlerts />
     </PaymentMadesListProvider>
   );
 }
 
 export default compose(
   withDashboardActions,
-  withPaymentMades(({ paymentMadeTableQuery }) => ({
-    paymentMadeTableQuery,
+  withPaymentMades(({ paymentMadesTableState }) => ({
+    paymentMadesTableState,
   })),
 )(PaymentMadeList);
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentMadeViewTabs.js b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeViewTabs.js
similarity index 67%
rename from client/src/containers/Purchases/PaymentMades/PaymentMadeViewTabs.js
rename to client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeViewTabs.js
index 16670bb8f..bc69f5c41 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentMadeViewTabs.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeViewTabs.js
@@ -2,7 +2,6 @@ import React from 'react';
 import { useHistory } from 'react-router';
 import { FormattedMessage as T } from 'react-intl';
 import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
-import { useParams } from 'react-router-dom';
 import { pick } from 'lodash';
 
 import { DashboardViewsTabs } from 'components';
@@ -11,20 +10,27 @@ import { usePaymentMadesListContext } from './PaymentMadesListProvider';
 import withPaymentMadeActions from './withPaymentMadeActions';
 
 import { compose } from 'utils';
+import withPaymentMade from './withPaymentMade';
 
+/**
+ * Payment made views tabs.
+ */
 function PaymentMadeViewTabs({
-  //#withPaymentMadesActions
-  addPaymentMadesTableQueries,
+  // #withPaymentMadesActions
+  setPaymentMadesTableState,
+
+  // #withPaymentMade
+  paymentMadesTableState,
 }) {
   const history = useHistory();
-  const { custom_view_id: customViewId = null } = useParams();
 
   // Payment receives list context.
   const { paymentMadesViews } = usePaymentMadesListContext();
 
-  const handleTabsChange = (viewId) => {
-    addPaymentMadesTableQueries({
-      custom_view_id: viewId || null,
+  // Handle the active tab changning.
+  const handleTabsChange = (customView) => {
+    setPaymentMadesTableState({
+      customViewId: customView.id || null,
     });
   };
 
@@ -40,7 +46,7 @@ function PaymentMadeViewTabs({
     <Navbar className={'navbar--dashboard-views'}>
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
-          initialViewId={customViewId}
+          customViewId={paymentMadesTableState.customViewId}
           defaultTabText={<T id={'all_payments'} />}
           tabs={tabs}
           onNewViewTabClick={handleClickNewView}
@@ -51,4 +57,7 @@ function PaymentMadeViewTabs({
   );
 }
 
-export default compose(withPaymentMadeActions)(PaymentMadeViewTabs);
+export default compose(
+  withPaymentMadeActions,
+  withPaymentMade(({ paymentMadesTableState }) => ({ paymentMadesTableState }))
+)(PaymentMadeViewTabs);
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentMadesEmptyStatus.js b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesEmptyStatus.js
similarity index 100%
rename from client/src/containers/Purchases/PaymentMades/PaymentMadesEmptyStatus.js
rename to client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesEmptyStatus.js
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentMadesListProvider.js b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesListProvider.js
similarity index 71%
rename from client/src/containers/Purchases/PaymentMades/PaymentMadesListProvider.js
rename to client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesListProvider.js
index b8860da2f..c5a3f38a7 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentMadesListProvider.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesListProvider.js
@@ -3,8 +3,9 @@ import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import {
   useResourceViews,
   useResourceFields,
-  usePaymentReceives,
+  usePaymentMades,
 } from 'hooks/query';
+import { isTableEmptyStatus } from 'utils';
 
 const PaymentMadesListContext = createContext();
 
@@ -26,20 +27,32 @@ function PaymentMadesListProvider({ accountsTableQuery, ...props }) {
 
   // Fetch accounts list according to the given custom view id.
   const {
-    data: { paymentMades, pagination },
-    isFetching: isInvoicesLoading,
-  } = usePaymentReceives(accountsTableQuery);
+    data: { paymentMades, pagination, filterMeta },
+    isLoading: isPaymentsLoading,
+    isFetching: isPaymentsFetching,
+  } = usePaymentMades(accountsTableQuery, { keepPreviousData: true });
+
+  // Detarmines the datatable empty status.
+  const isEmptyStatus =
+    isTableEmptyStatus({
+      data: paymentMades,
+      pagination,
+      filterMeta,
+    }) && !isPaymentsLoading;
 
   // Provider payload.
   const provider = {
     paymentMades,
     pagination,
+    filterMeta,
     paymentMadesFields,
     paymentMadesViews,
 
-    isInvoicesLoading,
+    isPaymentsLoading,
+    isPaymentsFetching,
     isFieldsLoading,
     isViewsLoading,
+    isEmptyStatus
   };
 
   return (
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js
new file mode 100644
index 000000000..28b8663c0
--- /dev/null
+++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js
@@ -0,0 +1,95 @@
+import React, { useCallback } from 'react';
+import classNames from 'classnames';
+
+import { compose } from 'utils';
+
+import { CLASSES } from 'common/classes';
+import { DataTable } from 'components';
+import PaymentMadesEmptyStatus from './PaymentMadesEmptyStatus';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+
+import withPaymentMadeActions from './withPaymentMadeActions';
+import withSettings from 'containers/Settings/withSettings';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import { usePaymentMadesTableColumns, ActionsMenu } from './components';
+import { usePaymentMadesListContext } from './PaymentMadesListProvider';
+
+/**
+ * Payment made datatable transactions.
+ */
+function PaymentMadesTable({
+  // #withPaymentMadeActions
+  addPaymentMadesTableQueries,
+
+  // #withAlerts
+  openAlert
+}) {
+  // Payment mades table columns.
+  const columns = usePaymentMadesTableColumns();
+
+  // Payment mades list context.
+  const {
+    paymentMades,
+    pagination,
+    isEmptyStatus,
+    isPaymentsLoading,
+    isPaymentsFetching,
+  } = usePaymentMadesListContext();
+
+  // Handles the edit payment made action.
+  const handleEditPaymentMade = (paymentMade) => {};
+
+  // Handles the delete payment made action.
+  const handleDeletePaymentMade = (paymentMade) => {
+    openAlert('payment-made-delete', { paymentMadeId: paymentMade.id })
+  };
+
+  // Handle datatable fetch data once the table state change.
+  const handleDataTableFetchData = useCallback(
+    ({ pageIndex, pageSize, sortBy }) => {
+      addPaymentMadesTableQueries({ pageIndex, pageSize, sortBy });
+    },
+    [addPaymentMadesTableQueries],
+  );
+    
+  if (isEmptyStatus) {
+    return <PaymentMadesEmptyStatus />;
+  }
+
+  return (
+    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
+      <DataTable
+        columns={columns}
+        data={paymentMades}
+        onFetchData={handleDataTableFetchData}
+        loading={isPaymentsLoading}
+        headerLoading={isPaymentsLoading}
+        progressBarLoading={isPaymentsFetching}
+        manualSortBy={true}
+        selectionColumn={true}
+        noInitialFetch={true}
+        sticky={true}
+        pagination={true}
+        pagesCount={pagination.pagesCount}
+        autoResetSortBy={false}
+        autoResetPage={false}
+        TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
+        payload={{
+          onEdit: handleEditPaymentMade,
+          onDelete: handleDeletePaymentMade,
+        }}
+      />
+    </div>
+  );
+}
+
+export default compose(
+  withPaymentMadeActions,
+  withAlertsActions,
+  withSettings(({ organizationSettings }) => ({
+    baseCurrency: organizationSettings?.baseCurrency,
+  })),
+)(PaymentMadesTable);
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentMadesView.js b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesView.js
similarity index 96%
rename from client/src/containers/Purchases/PaymentMades/PaymentMadesView.js
rename to client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesView.js
index eb89894dd..92f28faa4 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentMadesView.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesView.js
@@ -21,7 +21,7 @@ function PaymentMadesViewPage({
         exact={true}
         path={['/payment-mades/:custom_view_id/custom_view', '/payment-mades']}
       >
-        <PaymentMadeViewTabs />
+        
         {/* <PaymentMadeDataTable
               onDeletePaymentMade={handleDeletePaymentMade}
               onEditPaymentMade={handleEditPaymentMade}
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentMdesListProvider.js b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMdesListProvider.js
similarity index 100%
rename from client/src/containers/Purchases/PaymentMades/PaymentMdesListProvider.js
rename to client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMdesListProvider.js
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js
new file mode 100644
index 000000000..ade85b6a7
--- /dev/null
+++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js
@@ -0,0 +1,133 @@
+import React from 'react';
+import moment from 'moment';
+import {
+  Intent,
+  Button,
+  Popover,
+  Menu,
+  MenuItem,
+  MenuDivider,
+  Position,
+} from '@blueprintjs/core';
+import { useIntl } from 'react-intl';
+import { Icon, Money } from 'components';
+import { safeCallback } from 'utils';
+
+export function DateCell({ value }) {
+  return moment(value).format('YYYY MMM DD');
+}
+
+export function AmountAccessor(row) {
+    return <Money amount={row.amount} currency={'USD'} />
+}
+
+/**
+ * Actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: { onEdit, onDelete },
+}) {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="reader-18" />}
+        text={formatMessage({ id: 'view_details' })}
+      />
+      <MenuDivider />
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={formatMessage({ id: 'edit_payment_made' })}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <MenuItem
+        text={formatMessage({ id: 'delete_payment_made' })}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * Payment mades table actions cell.
+ */
+export function ActionsCell(props) {
+  return (
+    <Popover
+      content={<ActionsMenu {...props} />}
+      position={Position.RIGHT_BOTTOM}
+    >
+      <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
+    </Popover>
+  );
+}
+
+/**
+ * Retrieve payment mades table columns.
+ */
+export function usePaymentMadesTableColumns() {
+  const { formatMessage } = useIntl();
+
+  return React.useMemo(
+    () => [
+      {
+        id: 'payment_date',
+        Header: formatMessage({ id: 'payment_date' }),
+        Cell: DateCell,
+        accessor: 'payment_date',
+        width: 140,
+        className: 'payment_date',
+      },
+      {
+        id: 'vendor_id',
+        Header: formatMessage({ id: 'vendor_name' }),
+        accessor: 'vendor.display_name',
+        width: 140,
+        className: 'vendor_id',
+      },
+      {
+        id: 'payment_number',
+        Header: formatMessage({ id: 'payment_number' }),
+        accessor: (row) =>
+          row.payment_number ? `#${row.payment_number}` : null,
+        width: 140,
+        className: 'payment_number',
+      },
+      {
+        id: 'payment_account_id',
+        Header: formatMessage({ id: 'payment_account' }),
+        accessor: 'payment_account.name',
+        width: 140,
+        className: 'payment_account_id',
+      },
+      {
+        id: 'amount',
+        Header: formatMessage({ id: 'amount' }),
+        accessor: AmountAccessor,
+        width: 140,
+        className: 'amount',
+      },
+      {
+        id: 'reference',
+        Header: formatMessage({ id: 'reference' }),
+        accessor: 'reference',
+        width: 140,
+        className: 'reference',
+      },
+
+      {
+        id: 'actions',
+        Header: '',
+        Cell: ActionsCell,
+        className: 'actions',
+        width: 50,
+        disableResizing: true,
+      },
+    ],
+    [formatMessage],
+  );
+}
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/withPaymentMade.js b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/withPaymentMade.js
new file mode 100644
index 000000000..4488d5489
--- /dev/null
+++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/withPaymentMade.js
@@ -0,0 +1,16 @@
+import { connect } from 'react-redux';
+import {
+  getPaymentMadesTableStateFactory
+} from 'store/PaymentMades/paymentMades.selector';
+
+export default (mapState) => {
+  const getPaymentMadesTableState = getPaymentMadesTableStateFactory();
+
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      paymentMadesTableState: getPaymentMadesTableState(state, props),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/withPaymentMadeActions.js b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/withPaymentMadeActions.js
new file mode 100644
index 000000000..d078efaa3
--- /dev/null
+++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/withPaymentMadeActions.js
@@ -0,0 +1,8 @@
+import { connect } from 'react-redux';
+import { setPaymentMadesTableState } from 'store/PaymentMades/paymentMades.actions';
+
+const mapDispatchToProps = (dispatch) => ({
+  setPaymentMadesTableState: (state) =>
+    dispatch(setPaymentMadesTableState(state)),
+});
+export default connect(null, mapDispatchToProps);
diff --git a/client/src/containers/Purchases/PaymentMades/withPaymentMadeDetail.js b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/withPaymentMadeDetail.js
similarity index 100%
rename from client/src/containers/Purchases/PaymentMades/withPaymentMadeDetail.js
rename to client/src/containers/Purchases/PaymentMades/PaymentsLanding/withPaymentMadeDetail.js
diff --git a/client/src/containers/Purchases/PaymentMades/withPaymentMade.js b/client/src/containers/Purchases/PaymentMades/withPaymentMade.js
deleted file mode 100644
index e44dc19b9..000000000
--- a/client/src/containers/Purchases/PaymentMades/withPaymentMade.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { connect } from 'react-redux';
-import { getResourceViews } from 'store/customViews/customViews.selectors';
-import {
-  getPaymentMadeCurrentPageFactory,
-  getPaymentMadePaginationMetaFactory,
-  getPaymentMadeTableQuery,
-  getPaymentMadeEntriesFactory,
-  getPaymentMadesCurrentViewIdFactory
-} from 'store/PaymentMades/paymentMade.selector';
-
-export default (mapState) => {
-  const getPyamentMadesItems = getPaymentMadeCurrentPageFactory();
-  const getPyamentMadesPaginationMeta = getPaymentMadePaginationMetaFactory();
-  const getPaymentMadeEntries = getPaymentMadeEntriesFactory();
-  const getPaymentMadesCurrentViewId = getPaymentMadesCurrentViewIdFactory();
-
-  const mapStateToProps = (state, props) => {
-    const query = getPaymentMadeTableQuery(state, props);
-
-    const mapped = {
-      paymentMadeCurrentPage: getPyamentMadesItems(state, props, query),
-      paymentMadeViews: getResourceViews(state, props, 'bill_payments'),
-      paymentMadeItems: state.paymentMades.items,
-      paymentMadeTableQuery: query,
-      paymentMadePageination: getPyamentMadesPaginationMeta(
-        state,
-        props,
-        query,
-      ),
-      paymentMadesLoading: state.paymentMades.loading,
-      nextPaymentNumberChanged: state.paymentMades.nextPaymentNumberChanged,
-      paymentMadeEntries: getPaymentMadeEntries(state, props),
-
-      paymentMadesCurrentViewId: getPaymentMadesCurrentViewId(state, props),
-    };
-    return mapState ? mapState(mapped, state, props) : mapped;
-  };
-  return connect(mapStateToProps);
-};
diff --git a/client/src/containers/Purchases/PaymentMades/withPaymentMadeActions.js b/client/src/containers/Purchases/PaymentMades/withPaymentMadeActions.js
deleted file mode 100644
index 9d21d1988..000000000
--- a/client/src/containers/Purchases/PaymentMades/withPaymentMadeActions.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { connect } from 'react-redux';
-import t from 'store/types';
-import {
-  submitPaymentMade,
-  editPaymentMade,
-  deletePaymentMade,
-  fetchPaymentMadesTable,
-  fetchPaymentMade,
-  fetchPaymentMadeBills,
-} from 'store/PaymentMades/paymentMade.actions';
-
-const mapDispatchToProps = (dispatch) => ({
-  requestSubmitPaymentMade: (form) => dispatch(submitPaymentMade({ form })),
-  requestFetchPaymentMade: (id) => dispatch(fetchPaymentMade({ id })),
-  requestEditPaymentMade: (id, form) => dispatch(editPaymentMade(id, form)),
-  requestDeletePaymentMade: (id) => dispatch(deletePaymentMade({ id })),
-  requestFetchPaymentMadesTable: (query = {}) =>
-    dispatch(fetchPaymentMadesTable({ query: { ...query } })),
-
-  requestFetchPaymentMadeBills: (paymentMadeId) => dispatch(fetchPaymentMadeBills({ paymentMadeId })),
-
-  changePaymentMadeView: (id) =>
-    dispatch({
-      type: t.PAYMENT_MADE_SET_CURRENT_VIEW,
-      currentViewId: parseInt(id, 10),
-    }),
-
-  addPaymentMadesTableQueries: (queries) =>
-    dispatch({
-      type: t.PAYMENT_MADES_TABLE_QUERIES_ADD,
-      payload: { queries },
-    }),
-  setPaymentNumberChange: (isChanged) =>
-    dispatch({
-      type: t.PAYMENT_MADES_NUMBER_CHANGED,
-      payload: { isChanged },
-    }),
-});
-export default connect(null, mapDispatchToProps);
diff --git a/client/src/containers/Sales/Estimate/EstiamtesViewPage.js b/client/src/containers/Sales/Estimate/EstiamtesViewPage.js
deleted file mode 100644
index f4994f85c..000000000
--- a/client/src/containers/Sales/Estimate/EstiamtesViewPage.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import React, { useCallback } from 'react';
-import { Switch, Route, useHistory } from 'react-router-dom';
-
-import EstimateViewTabs from './EstimateViewTabs';
-import EstimatesDataTable from './EstimatesDataTable';
-
-import withAlertsActions from 'containers/Alert/withAlertActions';
-import withDialogActions from 'containers/Dialog/withDialogActions';
-
-import { compose } from 'utils';
-
-/**
- * Estimates list view page.
- */
-function EstimatesViewPage({
-  // #withAlertActions
-  openAlert,
-}) {
-  const history = useHistory();
-
-  // handle delete estimate click
-  const handleDeleteEstimate = useCallback(
-    ({ id }) => {
-      openAlert('estimate-delete', { estimateId: id });
-    },
-    [openAlert],
-  );
-
-  // Handle cancel/confirm estimate deliver.
-  const handleDeliverEstimate = useCallback(
-    ({ id }) => {
-      openAlert('estimate-deliver', { estimateId: id });
-    },
-    [openAlert],
-  );
-
-  // Handle cancel/confirm estimate approve.
-  const handleApproveEstimate = useCallback(
-    ({ id }) => {
-      openAlert('estimate-Approve', { estimateId: id });
-    },
-    [openAlert],
-  );
-
-  // Handle cancel/confirm estimate reject.
-  const handleRejectEstimate = useCallback(
-    ({ id }) => {
-      openAlert('estimate-reject', { estimateId: id });
-    },
-    [openAlert],
-  );
-
-  const handleEditEstimate = useCallback(
-    (estimate) => {
-      history.push(`/estimates/${estimate.id}/edit`);
-    },
-    [history],
-  );
-
-  return (
-    <Switch>
-      <Route
-        exact={true}
-        path={['/estimates/:custom_view_id/custom_view', '/estimates']}
-      >
-        <EstimateViewTabs />
-
-        {/* <EstimatesDataTable
-          onDeleteEstimate={handleDeleteEstimate}
-          onEditEstimate={handleEditEstimate}
-          onDeliverEstimate={handleDeliverEstimate}
-          onApproveEstimate={handleApproveEstimate}
-          onRejectEstimate={handleRejectEstimate}
-          onSelectedRowsChange={handleSelectedRowsChange}
-        /> */}
-      </Route>
-    </Switch>
-  );
-}
-
-export default compose(
-  withAlertsActions,
-  withDialogActions,
-)(EstimatesViewPage)
\ No newline at end of file
diff --git a/client/src/containers/Sales/Estimate/EstimatesDataTable.js b/client/src/containers/Sales/Estimate/EstimatesDataTable.js
deleted file mode 100644
index f5599f496..000000000
--- a/client/src/containers/Sales/Estimate/EstimatesDataTable.js
+++ /dev/null
@@ -1,292 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-import {
-  Intent,
-  Button,
-  Popover,
-  Menu,
-  MenuItem,
-  MenuDivider,
-  Position,
-  Tag,
-} from '@blueprintjs/core';
-import classNames from 'classnames';
-import { FormattedMessage as T, useIntl } from 'react-intl';
-import moment from 'moment';
-
-import { CLASSES } from 'common/classes';
-import { compose, saveInvoke } from 'utils';
-import { useIsValuePassed } from 'hooks';
-
-import LoadingIndicator from 'components/LoadingIndicator';
-import { DataTable, Money, Choose, Icon, If } from 'components';
-import EstimatesEmptyStatus from './EstimatesEmptyStatus';
-import { statusAccessor } from './components';
-import withEstimates from './withEstimates';
-import withEstimateActions from './withEstimateActions';
-import withSettings from 'containers/Settings/withSettings';
-
-// Estimates transactions datatable.
-function EstimatesDataTable({
-  // #withEstimates
-  estimatesCurrentPage,
-  estimatesLoading,
-  estimatesPageination,
-  estimatesTableQuery,
-  estimatesCurrentViewId,
-
-  // #withEstimatesActions
-  addEstimatesTableQueries,
-
-  // #withSettings
-  baseCurrency,
-
-  // #ownProps
-  onEditEstimate,
-  onDeleteEstimate,
-  onDeliverEstimate,
-  onApproveEstimate,
-  onRejectEstimate,
-  onSelectedRowsChange,
-}) {
-  const { formatMessage } = useIntl();
-  const isLoaded = useIsValuePassed(estimatesLoading, false);
-
-  const handleEditEstimate = useCallback(
-    (estimate) => () => {
-      saveInvoke(onEditEstimate, estimate);
-    },
-    [onEditEstimate],
-  );
-
-  const handleDeleteEstimate = useCallback(
-    (estimate) => () => {
-      saveInvoke(onDeleteEstimate, estimate);
-    },
-    [onDeleteEstimate],
-  );
-
-  const actionMenuList = useCallback(
-    (estimate) => (
-      <Menu>
-        <MenuItem
-          icon={<Icon icon="reader-18" />}
-          text={formatMessage({ id: 'view_details' })}
-        />
-        <MenuDivider />
-        <MenuItem
-          icon={<Icon icon="pen-18" />}
-          text={formatMessage({ id: 'edit_estimate' })}
-          onClick={handleEditEstimate(estimate)}
-        />
-        <If condition={!estimate.is_delivered}>
-          <MenuItem
-            text={formatMessage({ id: 'mark_as_delivered' })}
-            onClick={() => onDeliverEstimate(estimate)}
-          />
-        </If>
-        <Choose>
-          <Choose.When
-            condition={estimate.is_delivered && estimate.is_approved}
-          >
-            <MenuItem
-              text={formatMessage({ id: 'mark_as_rejected' })}
-              onClick={() => onRejectEstimate(estimate)}
-            />
-          </Choose.When>
-          <Choose.When
-            condition={estimate.is_delivered && estimate.is_rejected}
-          >
-            <MenuItem
-              text={formatMessage({ id: 'mark_as_approved' })}
-              onClick={() => onApproveEstimate(estimate)}
-            />
-          </Choose.When>
-          <Choose.When condition={estimate.is_delivered}>
-            <MenuItem
-              text={formatMessage({ id: 'mark_as_approved' })}
-              onClick={() => onApproveEstimate(estimate)}
-            />
-            <MenuItem
-              text={formatMessage({ id: 'mark_as_rejected' })}
-              onClick={() => onRejectEstimate(estimate)}
-            />
-          </Choose.When>
-        </Choose>
-        <MenuItem
-          text={formatMessage({ id: 'delete_estimate' })}
-          intent={Intent.DANGER}
-          onClick={handleDeleteEstimate(estimate)}
-          icon={<Icon icon="trash-16" iconSize={16} />}
-        />
-      </Menu>
-    ),
-    [handleDeleteEstimate, handleEditEstimate, formatMessage],
-  );
-
-  const onRowContextMenu = useCallback(
-    (cell) => {
-      return actionMenuList(cell.row.original);
-    },
-    [actionMenuList],
-  );
-
-  const columns = useMemo(
-    () => [
-      {
-        id: 'estimate_date',
-        Header: formatMessage({ id: 'estimate_date' }),
-        accessor: (r) => moment(r.estimate_date).format('YYYY MMM DD'),
-        width: 140,
-        className: 'estimate_date',
-      },
-      {
-        id: 'customer_id',
-        Header: formatMessage({ id: 'customer_name' }),
-        accessor: 'customer.display_name',
-        width: 140,
-        className: 'customer_id',
-      },
-      {
-        id: 'expiration_date',
-        Header: formatMessage({ id: 'expiration_date' }),
-        accessor: (r) => moment(r.expiration_date).format('YYYY MMM DD'),
-        width: 140,
-        className: 'expiration_date',
-      },
-      {
-        id: 'estimate_number',
-        Header: formatMessage({ id: 'estimate_number' }),
-        accessor: (row) =>
-          row.estimate_number ? `#${row.estimate_number}` : null,
-        width: 140,
-        className: 'estimate_number',
-      },
-      {
-        id: 'amount',
-        Header: formatMessage({ id: 'amount' }),
-        accessor: (r) => <Money amount={r.amount} currency={baseCurrency} />,
-
-        width: 140,
-        className: 'amount',
-      },
-
-      {
-        id: 'status',
-        Header: formatMessage({ id: 'status' }),
-        accessor: (row) => statusAccessor(row),
-        width: 140,
-        className: 'status',
-      },
-
-      {
-        id: 'reference',
-        Header: formatMessage({ id: 'reference_no' }),
-        accessor: 'reference',
-        width: 140,
-        className: 'reference',
-      },
-
-      {
-        id: 'actions',
-        Header: '',
-        Cell: ({ cell }) => (
-          <Popover
-            content={actionMenuList(cell.row.original)}
-            position={Position.RIGHT_BOTTOM}
-          >
-            <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
-          </Popover>
-        ),
-        className: 'actions',
-        width: 50,
-        disableResizing: true,
-      },
-    ],
-    [actionMenuList, formatMessage],
-  );
-
-  const handleFetchData = useCallback(
-    ({ pageIndex, pageSize, sortBy }) => {
-      const page = pageIndex + 1;
-
-      addEstimatesTableQueries({
-        ...(sortBy.length > 0
-          ? {
-              column_sort_by: sortBy[0].id,
-              sort_order: sortBy[0].desc ? 'desc' : 'asc',
-            }
-          : {}),
-        page_size: pageSize,
-        page,
-      });
-    },
-    [addEstimatesTableQueries],
-  );
-
-  const handleSelectedRowsChange = useCallback(
-    (selectedRows) => {
-      saveInvoke(
-        onSelectedRowsChange,
-        selectedRows.map((s) => s.original),
-      );
-    },
-    [onSelectedRowsChange],
-  );
-
-  const showEmptyStatus = [
-    estimatesCurrentPage.length === 0,
-    estimatesCurrentViewId === -1,
-  ].every((d) => d === true);
-
-  return (
-    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
-      <LoadingIndicator loading={estimatesLoading && !isLoaded} mount={false}>
-        <Choose>
-          <Choose.When condition={showEmptyStatus}>
-            <EstimatesEmptyStatus />
-          </Choose.When>
-
-          <Choose.Otherwise>
-            <DataTable
-              columns={columns}
-              data={estimatesCurrentPage}
-              onFetchData={handleFetchData}
-              manualSortBy={true}
-              selectionColumn={true}
-              noInitialFetch={true}
-              sticky={true}
-              onSelectedRowsChange={handleSelectedRowsChange}
-              rowContextMenu={onRowContextMenu}
-              pagination={true}
-              pagesCount={estimatesPageination.pagesCount}
-              initialPageSize={estimatesTableQuery.page_size}
-              initialPageIndex={estimatesTableQuery.page - 1}
-            />
-          </Choose.Otherwise>
-        </Choose>
-      </LoadingIndicator>
-    </div>
-  );
-}
-
-export default compose(
-  withEstimateActions,
-  withEstimates(
-    ({
-      estimatesCurrentPage,
-      estimatesLoading,
-      estimatesPageination,
-      estimatesTableQuery,
-      estimatesCurrentViewId,
-    }) => ({
-      estimatesCurrentPage,
-      estimatesLoading,
-      estimatesPageination,
-      estimatesTableQuery,
-      estimatesCurrentViewId,
-    }),
-  ),
-  withSettings(({ organizationSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
-)(EstimatesDataTable);
diff --git a/client/src/containers/Sales/Estimate/components.js b/client/src/containers/Sales/Estimate/components.js
deleted file mode 100644
index f0e218ddb..000000000
--- a/client/src/containers/Sales/Estimate/components.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-import { Intent, Tag } from '@blueprintjs/core';
-import { Choose, If } from 'components';
-import { FormattedMessage as T, useIntl } from 'react-intl';
-
-export const statusAccessor = (row) => (
-  <Choose>
-    <Choose.When condition={row.is_delivered && row.is_approved}>
-      <Tag minimal={true} intent={Intent.SUCCESS}>
-        <T id={'approved'} />
-      </Tag>
-    </Choose.When>
-    <Choose.When condition={row.is_delivered && row.is_rejected}>
-      <Tag minimal={true} intent={Intent.DANGER}>
-        <T id={'rejected'} />
-      </Tag>
-    </Choose.When>
-    <Choose.When
-      condition={row.is_delivered && !row.is_rejected && !row.is_approved}
-    >
-      <Tag minimal={true} intent={Intent.SUCCESS}>
-        <T id={'delivered'} />
-      </Tag>
-    </Choose.When>
-    <Choose.Otherwise>
-      <Tag minimal={true}>
-        <T id={'draft'} />
-      </Tag>
-    </Choose.Otherwise>
-  </Choose>
-);
diff --git a/client/src/containers/Sales/Estimate/withEstimateActions.js b/client/src/containers/Sales/Estimate/withEstimateActions.js
deleted file mode 100644
index cf54edf9c..000000000
--- a/client/src/containers/Sales/Estimate/withEstimateActions.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import { connect } from 'react-redux';
-import {
-  submitEstimate,
-  editEstimate,
-  deleteEstimate,
-  fetchEstimate,
-  fetchEstimatesTable,
-  deliverEstimate,
-  approveEstimate,
-  rejectEstimate,
-} from 'store/Estimate/estimates.actions';
-import t from 'store/types';
-
-const mapDispatchToProps = (dispatch) => ({
-  requestSubmitEstimate: (form) => dispatch(submitEstimate({ form })),
-  requestFetchEstimate: (id) => dispatch(fetchEstimate({ id })),
-  requestEditEstimate: (id, form) => dispatch(editEstimate(id, form)),
-  requestFetchEstimatesTable: (query = {}) =>
-    dispatch(fetchEstimatesTable({ query: { ...query } })),
-  requestDeleteEstimate: (id) => dispatch(deleteEstimate({ id })),
-  requestDeliveredEstimate: (id) => dispatch(deliverEstimate({ id })),
-  requestApproveEstimate: (id) => dispatch(approveEstimate({ id })),
-  requestRejectEstimate: (id) => dispatch(rejectEstimate({ id })),
-
-  changeEstimateView: (id) =>
-    dispatch({
-      type: t.ESTIMATES_SET_CURRENT_VIEW,
-      currentViewId: parseInt(id, 10),
-    }),
-
-  addEstimatesTableQueries: (queries) =>
-    dispatch({
-      type: t.ESTIMATES_TABLE_QUERIES_ADD,
-      payload: { queries },
-    }),
-  setEstimateNumberChanged: (isChanged) =>
-    dispatch({
-      type: t.ESTIMATE_NUMBER_CHANGED,
-      payload: { isChanged },
-    }),
-  setSelectedRowsEstimates: (selectedRows) =>
-    dispatch({
-      type: t.ESTIMATES_SELECTED_ROWS_SET,
-      payload: { selectedRows },
-    }),
-});
-
-export default connect(null, mapDispatchToProps);
diff --git a/client/src/containers/Sales/Estimate/withEstimates.js b/client/src/containers/Sales/Estimate/withEstimates.js
deleted file mode 100644
index ee812c25b..000000000
--- a/client/src/containers/Sales/Estimate/withEstimates.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { connect } from 'react-redux';
-import { getResourceViews } from 'store/customViews/customViews.selectors';
-import {
-  getEstimateCurrentPageFactory,
-  getEstimatesTableQueryFactory,
-  getEstimatesPaginationMetaFactory,
-  getEstimatesCurrentViewIdFactory,
-} from 'store/Estimate/estimates.selectors';
-
-export default (mapState) => {
-  const getEstimatesItems = getEstimateCurrentPageFactory();
-  const getEstimatesPaginationMeta = getEstimatesPaginationMetaFactory();
-  const getEstimatesTableQuery = getEstimatesTableQueryFactory();
-  const getEstimatesCurrentViewId = getEstimatesCurrentViewIdFactory();
-
-  const mapStateToProps = (state, props) => {
-    const query = getEstimatesTableQuery(state, props);
-
-    const mapped = {
-      estimatesCurrentPage: getEstimatesItems(state, props, query),
-      estimatesCurrentViewId: getEstimatesCurrentViewId(state, props),
-
-      estimateViews: getResourceViews(state, props, 'sale_estimate'),
-      estimateItems: state.salesEstimates.items,
-      estimateSelectedRows: state.salesEstimates.selectedRows,
-
-      estimatesTableQuery: query,
-      estimatesPageination: getEstimatesPaginationMeta(state, props, query),
-      estimatesLoading: state.salesEstimates.loading,
-
-      estimateNumberChanged: state.salesEstimates.journalNumberChanged,
-    };
-    return mapState ? mapState(mapped, state, props) : mapped;
-  };
-  return connect(mapStateToProps);
-};
diff --git a/client/src/containers/Sales/Estimate/EntriesItemsTable.js b/client/src/containers/Sales/Estimates/EstimateForm/EntriesItemsTable.js
similarity index 100%
rename from client/src/containers/Sales/Estimate/EntriesItemsTable.js
rename to client/src/containers/Sales/Estimates/EstimateForm/EntriesItemsTable.js
diff --git a/client/src/containers/Sales/Estimate/EstimateFloatingActions.js b/client/src/containers/Sales/Estimates/EstimateForm/EstimateFloatingActions.js
similarity index 100%
rename from client/src/containers/Sales/Estimate/EstimateFloatingActions.js
rename to client/src/containers/Sales/Estimates/EstimateForm/EstimateFloatingActions.js
diff --git a/client/src/containers/Sales/Estimate/EstimateForm.js b/client/src/containers/Sales/Estimates/EstimateForm/EstimateForm.js
similarity index 100%
rename from client/src/containers/Sales/Estimate/EstimateForm.js
rename to client/src/containers/Sales/Estimates/EstimateForm/EstimateForm.js
diff --git a/client/src/containers/Sales/Estimate/EstimateForm.schema.js b/client/src/containers/Sales/Estimates/EstimateForm/EstimateForm.schema.js
similarity index 100%
rename from client/src/containers/Sales/Estimate/EstimateForm.schema.js
rename to client/src/containers/Sales/Estimates/EstimateForm/EstimateForm.schema.js
diff --git a/client/src/containers/Sales/Estimate/EstimateFormBody.js b/client/src/containers/Sales/Estimates/EstimateForm/EstimateFormBody.js
similarity index 100%
rename from client/src/containers/Sales/Estimate/EstimateFormBody.js
rename to client/src/containers/Sales/Estimates/EstimateForm/EstimateFormBody.js
diff --git a/client/src/containers/Sales/Estimate/EstimateFormFooter.js b/client/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooter.js
similarity index 100%
rename from client/src/containers/Sales/Estimate/EstimateFormFooter.js
rename to client/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooter.js
diff --git a/client/src/containers/Sales/Estimate/EstimateFormHeader.js b/client/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeader.js
similarity index 100%
rename from client/src/containers/Sales/Estimate/EstimateFormHeader.js
rename to client/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeader.js
diff --git a/client/src/containers/Sales/Estimate/EstimateFormHeaderFields.js b/client/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js
similarity index 100%
rename from client/src/containers/Sales/Estimate/EstimateFormHeaderFields.js
rename to client/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js
diff --git a/client/src/containers/Sales/Estimate/EstimateFormPage.js b/client/src/containers/Sales/Estimates/EstimateForm/EstimateFormPage.js
similarity index 100%
rename from client/src/containers/Sales/Estimate/EstimateFormPage.js
rename to client/src/containers/Sales/Estimates/EstimateForm/EstimateFormPage.js
diff --git a/client/src/containers/Sales/Estimate/EstimateNumberWatcher.js b/client/src/containers/Sales/Estimates/EstimateForm/EstimateNumberWatcher.js
similarity index 100%
rename from client/src/containers/Sales/Estimate/EstimateNumberWatcher.js
rename to client/src/containers/Sales/Estimates/EstimateForm/EstimateNumberWatcher.js
diff --git a/client/src/containers/Sales/Estimate/EstimatesAlerts.js b/client/src/containers/Sales/Estimates/EstimatesAlerts.js
similarity index 100%
rename from client/src/containers/Sales/Estimate/EstimatesAlerts.js
rename to client/src/containers/Sales/Estimates/EstimatesAlerts.js
diff --git a/client/src/containers/Sales/Estimate/EstimateActionsBar.js b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js
similarity index 92%
rename from client/src/containers/Sales/Estimate/EstimateActionsBar.js
rename to client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js
index a23d89e5b..93a83a946 100644
--- a/client/src/containers/Sales/Estimate/EstimateActionsBar.js
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js
@@ -17,7 +17,7 @@ import { FormattedMessage as T, useIntl } from 'react-intl';
 import { If, DashboardActionViewsList } from 'components';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
-import withEstimateActions from './withEstimateActions';
+import withEstimatesActions from './withEstimatesActions';
 import { useEstimatesListContext } from './EstimatesListProvider';
 
 import { compose } from 'utils';
@@ -27,7 +27,7 @@ import { compose } from 'utils';
  */
 function EstimateActionsBar({
   // #withEstimateActions
-  addEstimatesTableQueries,
+  setEstimatesTableState,
 }) {
   const history = useHistory();
   const { formatMessage } = useIntl();
@@ -42,9 +42,9 @@ function EstimateActionsBar({
     history.push('/estimates/new');
   };
 
-  const handleTabChange = (viewId) => {
-    addEstimatesTableQueries({
-      custom_view_id: viewId.id || null,
+  const handleTabChange = (customView) => {
+    setEstimatesTableState({
+      customViewId: customView.id || null,
     });
   };
 
@@ -111,5 +111,5 @@ function EstimateActionsBar({
 }
 
 export default compose(
-  withEstimateActions,
+  withEstimatesActions,
 )(EstimateActionsBar);
diff --git a/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js
new file mode 100644
index 000000000..dd53c6ed2
--- /dev/null
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js
@@ -0,0 +1,127 @@
+import React, { useCallback } from 'react';
+import classNames from 'classnames';
+import { useHistory } from 'react-router-dom';
+
+import { CLASSES } from 'common/classes';
+import { compose } from 'utils';
+
+import { DataTable } from 'components';
+import EstimatesEmptyStatus from './EstimatesEmptyStatus';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+
+import withEstimatesActions from './withEstimatesActions';
+import withSettings from 'containers/Settings/withSettings';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+
+import { useEstimatesListContext } from './EstimatesListProvider';
+import { ActionsMenu, useEstiamtesTableColumns } from './components';
+
+
+/**
+ * Estimates datatable.
+ */
+function EstimatesDataTable({
+  // #withEstimatesActions
+  setEstimatesTableState,
+
+  // #withAlertsActions
+  openAlert,
+}) {
+  const history = useHistory();
+
+  // Estimates list context.
+  const {
+    estimates,
+    pagination,
+    isEmptyStatus,
+    isEstimatesLoading,
+    isEstimatesFetching,
+  } = useEstimatesListContext();
+
+  // Estimates table columns.
+  const columns = useEstiamtesTableColumns();
+
+  // Handle estimate edit action.
+  const handleEditEstimate = (estimate) => {
+    history.push(`/estimates/${estimate.id}/edit`);
+  };
+  // Handle estimate delete action.
+  const handleDeleteEstimate = ({ id }) => {
+    openAlert('estimate-delete', { estimateId: id });
+  };
+
+  // Handle cancel/confirm estimate deliver.
+  const handleDeliverEstimate = ({ id }) => {
+    openAlert('estimate-deliver', { estimateId: id });
+  };
+
+  // Handle cancel/confirm estimate approve.
+  const handleApproveEstimate = ({ id }) => {
+    openAlert('estimate-Approve', { estimateId: id });
+  };
+
+  // Handle cancel/confirm estimate reject.
+  const handleRejectEstimate = ({ id }) => {
+    openAlert('estimate-reject', { estimateId: id });
+  };
+
+  // Handles fetch data.
+  const handleFetchData = useCallback(
+    ({ pageIndex, pageSize, sortBy }) => {
+      setEstimatesTableState({
+        pageIndex,
+        pageSize,
+        sortBy,
+      });
+    },
+    [setEstimatesTableState],
+  );
+
+  if (isEmptyStatus) {
+    return <EstimatesEmptyStatus />;
+  }
+
+  return (
+    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
+      <DataTable
+        columns={columns}
+        data={estimates}
+        
+        loading={isEstimatesLoading}
+        headerLoading={isEstimatesLoading}
+        progressBarLoading={isEstimatesFetching}
+
+        onFetchData={handleFetchData}
+        noInitialFetch={true}
+        manualSortBy={true}
+        selectionColumn={true}
+        sticky={true}
+        pagination={true}
+
+        manualPagination={true}
+        pagesCount={pagination.pagesCount}
+
+        TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+
+        ContextMenu={ActionsMenu}
+        payload={{
+          onApprove: handleApproveEstimate,
+          onEdit: handleEditEstimate,
+          onReject: handleRejectEstimate,
+          onDeliver: handleDeliverEstimate,
+          onDelete: handleDeleteEstimate,
+        }}
+      />
+    </div>
+  );
+}
+
+export default compose(
+  withEstimatesActions,
+  withAlertsActions,
+  withSettings(({ organizationSettings }) => ({
+    baseCurrency: organizationSettings?.baseCurrency,
+  })),
+)(EstimatesDataTable);
diff --git a/client/src/containers/Sales/Estimate/EstimatesEmptyStatus.js b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesEmptyStatus.js
similarity index 100%
rename from client/src/containers/Sales/Estimate/EstimatesEmptyStatus.js
rename to client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesEmptyStatus.js
diff --git a/client/src/containers/Sales/Estimate/EstimatesList.js b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesList.js
similarity index 59%
rename from client/src/containers/Sales/Estimate/EstimatesList.js
rename to client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesList.js
index 83b9fc553..09bde5849 100644
--- a/client/src/containers/Sales/Estimate/EstimatesList.js
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesList.js
@@ -2,15 +2,16 @@ import React, { useEffect } from 'react';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 
-import EstimateActionsBar from './EstimateActionsBar';
-import EstimatesAlerts from './EstimatesAlerts';
-import EstiamtesViewPage from './EstiamtesViewPage';
+import EstimatesActionsBar from './EstimatesActionsBar';
+import EstimatesAlerts from '../EstimatesAlerts';
+import EstimatesViewTabs from './EstimatesViewTabs';
+import EstimatesDataTable from './EstimatesDataTable';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withEstimates from './withEstimates';
 
 import { EstimatesListProvider } from './EstimatesListProvider';
-import { compose } from 'utils';
+import { compose, transformTableStateToQuery } from 'utils';
 
 /**
  * Sale estimates list page.
@@ -20,7 +21,7 @@ function EstimatesList({
   changePageTitle,
 
   // #withEstimate
-  estimatesTableQuery,
+  estimatesTableState,
 }) {
   const { formatMessage } = useIntl();
 
@@ -29,20 +30,22 @@ function EstimatesList({
   }, [changePageTitle, formatMessage]);
 
   return (
-    <EstimatesListProvider query={estimatesTableQuery}>
-      <EstimateActionsBar />
+    <EstimatesListProvider
+      query={transformTableStateToQuery(estimatesTableState)}
+    >
+      <EstimatesActionsBar />
 
       <DashboardPageContent>
-        <EstiamtesViewPage />
-        <EstimatesAlerts />
+        <EstimatesViewTabs />
+        <EstimatesDataTable />
       </DashboardPageContent>
+
+      <EstimatesAlerts />
     </EstimatesListProvider>
   );
 }
 
 export default compose(
   withDashboardActions,
-  withEstimates(({ estimatesTableQuery }) => ({
-    estimatesTableQuery,
-  })),
+  withEstimates(({ estimatesTableState }) => ({ estimatesTableState })),
 )(EstimatesList);
diff --git a/client/src/containers/Sales/Estimate/EstimatesListProvider.js b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesListProvider.js
similarity index 68%
rename from client/src/containers/Sales/Estimate/EstimatesListProvider.js
rename to client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesListProvider.js
index 3650d3bc8..d614afd4c 100644
--- a/client/src/containers/Sales/Estimate/EstimatesListProvider.js
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesListProvider.js
@@ -1,6 +1,7 @@
 import React, { createContext } from 'react';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import { useResourceViews, useResourceFields, useEstimates } from 'hooks/query';
+import { isTableEmptyStatus } from 'utils';
 
 const EstimatesListContext = createContext();
 
@@ -8,12 +9,12 @@ const EstimatesListContext = createContext();
  * Sale estimates data provider.
  */
 function EstimatesListProvider({ query, ...props }) {
-  // Fetch estimates resource views and fields.
+  // Fetches estimates resource views and fields.
   const { data: estimatesViews, isFetching: isViewsLoading } = useResourceViews(
     'sale_estimates',
   );
 
-  // Fetch the estimates resource fields.
+  // Fetches the estimates resource fields.
   const {
     data: estimatesFields,
     isFetching: isFieldsLoading,
@@ -21,9 +22,18 @@ function EstimatesListProvider({ query, ...props }) {
 
   // Fetch estimates list according to the given custom view id.
   const {
-    data: { estimates, pagination },
-    isFetching: isEstimatesLoading,
-  } = useEstimates(query);
+    data: { estimates, pagination, filterMeta },
+    isLoading: isEstimatesLoading,
+    isFetching: isEstimatesFetching,
+  } = useEstimates(query, { keepPreviousData: true });
+
+  // Detarmines the datatable empty status.
+  const isEmptyStatus =
+    isTableEmptyStatus({
+      data: estimates,
+      pagination,
+      filterMeta,
+    }) && !isEstimatesFetching;
 
   // Provider payload.
   const provider = {
@@ -33,8 +43,11 @@ function EstimatesListProvider({ query, ...props }) {
     estimatesViews,
 
     isEstimatesLoading,
+    isEstimatesFetching,
     isFieldsLoading,
     isViewsLoading,
+
+    isEmptyStatus,
   };
 
   return (
diff --git a/client/src/containers/Sales/Estimate/EstimateViewTabs.js b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesViewTabs.js
similarity index 68%
rename from client/src/containers/Sales/Estimate/EstimateViewTabs.js
rename to client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesViewTabs.js
index dcd48f01e..7a79cd8dd 100644
--- a/client/src/containers/Sales/Estimate/EstimateViewTabs.js
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesViewTabs.js
@@ -1,13 +1,11 @@
 import React from 'react';
-
 import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
-import { useParams } from 'react-router-dom';
-
 import { pick } from 'lodash';
 
 import { DashboardViewsTabs } from 'components';
 
-import withEstimateActions from './withEstimateActions';
+import withEstimatesActions from './withEstimatesActions';
+import withEstimates from './withEstimates';
 
 import { useEstimatesListContext } from './EstimatesListProvider';
 import { compose } from 'utils';
@@ -16,11 +14,12 @@ import { compose } from 'utils';
  * Estimates views tabs.
  */
 function EstimateViewTabs({
-  //#withEstimatesActions
-  addEstimatesTableQueries,
-}) {
-  const { custom_view_id: customViewId = null } = useParams();
+  // #withEstimatesActions
+  setEstimatesTableState,
 
+  // #withEstimates
+  estimatesTableState
+}) {
   // Estimates list context.
   const { estimatesViews } = useEstimatesListContext();
  
@@ -29,8 +28,8 @@ function EstimateViewTabs({
   }));
 
   const handleTabsChange = (viewId) => {
-    addEstimatesTableQueries({
-      custom_view_id: viewId || null,
+    setEstimatesTableState({
+      customViewId: viewId || null,
     });
   };
 
@@ -38,7 +37,7 @@ function EstimateViewTabs({
     <Navbar className={'navbar--dashboard-views'}>
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
-          initialViewId={customViewId}
+          customViewId={estimatesTableState.customViewId}
           resourceName={'estimates'}
           tabs={tabs}
           onChange={handleTabsChange}
@@ -49,5 +48,6 @@ function EstimateViewTabs({
 }
 
 export default compose(
-  withEstimateActions,
+  withEstimatesActions,
+  withEstimates(({ estimatesTableState }) => ({ estimatesTableState })),
 )(EstimateViewTabs);
diff --git a/client/src/containers/Sales/Estimates/EstimatesLanding/components.js b/client/src/containers/Sales/Estimates/EstimatesLanding/components.js
new file mode 100644
index 000000000..78af7a752
--- /dev/null
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/components.js
@@ -0,0 +1,195 @@
+import React from 'react';
+import {
+  Intent,
+  Tag,
+  Button,
+  Popover,
+  Menu,
+  MenuItem,
+  MenuDivider,
+  Position,
+} from '@blueprintjs/core';
+import { Money, Choose, Icon, If } from 'components';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import { safeCallback } from 'utils';
+import moment from 'moment';
+
+/**
+ * Status accessor.
+ */
+export const statusAccessor = (row) => (
+  <Choose>
+    <Choose.When condition={row.is_delivered && row.is_approved}>
+      <Tag minimal={true} intent={Intent.SUCCESS}>
+        <T id={'approved'} />
+      </Tag>
+    </Choose.When>
+    <Choose.When condition={row.is_delivered && row.is_rejected}>
+      <Tag minimal={true} intent={Intent.DANGER}>
+        <T id={'rejected'} />
+      </Tag>
+    </Choose.When>
+    <Choose.When
+      condition={row.is_delivered && !row.is_rejected && !row.is_approved}
+    >
+      <Tag minimal={true} intent={Intent.SUCCESS}>
+        <T id={'delivered'} />
+      </Tag>
+    </Choose.When>
+    <Choose.Otherwise>
+      <Tag minimal={true}>
+        <T id={'draft'} />
+      </Tag>
+    </Choose.Otherwise>
+  </Choose>
+);
+
+/**
+ * Actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: { onEdit, onDeliver, onReject, onApprove, onDelete },
+}) {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="reader-18" />}
+        text={formatMessage({ id: 'view_details' })}
+      />
+      <MenuDivider />
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={formatMessage({ id: 'edit_estimate' })}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <If condition={!original.is_delivered}>
+        <MenuItem
+          text={formatMessage({ id: 'mark_as_delivered' })}
+          onClick={safeCallback(onDeliver, original)}
+        />
+      </If>
+      <Choose>
+        <Choose.When condition={original.is_delivered && original.is_approved}>
+          <MenuItem
+            text={formatMessage({ id: 'mark_as_rejected' })}
+            onClick={safeCallback(onReject, original)}
+          />
+        </Choose.When>
+        <Choose.When condition={original.is_delivered && original.is_rejected}>
+          <MenuItem
+            text={formatMessage({ id: 'mark_as_approved' })}
+            onClick={safeCallback(onApprove, original)}
+          />
+        </Choose.When>
+        <Choose.When condition={original.is_delivered}>
+          <MenuItem
+            text={formatMessage({ id: 'mark_as_approved' })}
+            onClick={safeCallback(onApprove, original)}
+          />
+          <MenuItem
+            text={formatMessage({ id: 'mark_as_rejected' })}
+            onClick={safeCallback(onReject, original)}
+          />
+        </Choose.When>
+      </Choose>
+      <MenuItem
+        text={formatMessage({ id: 'delete_estimate' })}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}
+
+function DateCell({ value }) {
+  return moment(value).format('YYYY MMM DD');
+}
+
+function AmountAccessor(row) {
+  return <Money amount={row.amount} currency={'USD'} />;
+}
+
+function ActionsCell(props) {
+  return (
+    <Popover
+      content={<ActionsMenu {...props} />}
+      position={Position.RIGHT_BOTTOM}
+    >
+      <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
+    </Popover>
+  );
+}
+
+export function useEstiamtesTableColumns() {
+  const { formatMessage } = useIntl();
+
+  return React.useMemo(
+    () => [
+      {
+        id: 'estimate_date',
+        Header: formatMessage({ id: 'estimate_date' }),
+        accessor: 'estimate_date',
+        Cell: DateCell,
+        width: 140,
+        className: 'estimate_date',
+      },
+      {
+        id: 'customer_id',
+        Header: formatMessage({ id: 'customer_name' }),
+        accessor: 'customer.display_name',
+        width: 140,
+        className: 'customer_id',
+      },
+      {
+        id: 'expiration_date',
+        Header: formatMessage({ id: 'expiration_date' }),
+        accessor: 'expiration_date',
+        Cell: DateCell,
+        width: 140,
+        className: 'expiration_date',
+      },
+      {
+        id: 'estimate_number',
+        Header: formatMessage({ id: 'estimate_number' }),
+        accessor: (row) =>
+          row.estimate_number ? `#${row.estimate_number}` : null,
+        width: 140,
+        className: 'estimate_number',
+      },
+      {
+        id: 'amount',
+        Header: formatMessage({ id: 'amount' }),
+        accessor: AmountAccessor,
+        width: 140,
+        className: 'amount',
+      },
+      {
+        id: 'status',
+        Header: formatMessage({ id: 'status' }),
+        accessor: (row) => statusAccessor(row),
+        width: 140,
+        className: 'status',
+      },
+      {
+        id: 'reference',
+        Header: formatMessage({ id: 'reference_no' }),
+        accessor: 'reference',
+        width: 140,
+        className: 'reference',
+      },
+      {
+        id: 'actions',
+        Header: '',
+        Cell: ActionsCell,
+        className: 'actions',
+        width: 50,
+        disableResizing: true,
+      },
+    ],
+    [formatMessage],
+  );
+}
diff --git a/client/src/containers/Sales/Estimates/EstimatesLanding/withEstimates.js b/client/src/containers/Sales/Estimates/EstimatesLanding/withEstimates.js
new file mode 100644
index 000000000..5251f2ed2
--- /dev/null
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/withEstimates.js
@@ -0,0 +1,16 @@
+import { connect } from 'react-redux';
+import {
+  getEstimatesTableStateFactory,
+} from 'store/Estimate/estimates.selectors';
+
+export default (mapState) => {
+  const getEstimatesTableState = getEstimatesTableStateFactory();
+
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      estimatesTableState: getEstimatesTableState(state, props),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};
diff --git a/client/src/containers/Sales/Estimates/EstimatesLanding/withEstimatesActions.js b/client/src/containers/Sales/Estimates/EstimatesLanding/withEstimatesActions.js
new file mode 100644
index 000000000..0387fb757
--- /dev/null
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/withEstimatesActions.js
@@ -0,0 +1,10 @@
+import { connect } from 'react-redux';
+import {
+  setEstimatesTableState,
+} from 'store/Estimate/estimates.actions';
+
+const mapDispatchToProps = (dispatch) => ({
+  setEstimatesTableState: (state) => dispatch(setEstimatesTableState(state)),
+});
+
+export default connect(null, mapDispatchToProps);
diff --git a/client/src/containers/Sales/Estimate/withEstimateDetail.js b/client/src/containers/Sales/Estimates/withEstimateDetail.js
similarity index 100%
rename from client/src/containers/Sales/Estimate/withEstimateDetail.js
rename to client/src/containers/Sales/Estimates/withEstimateDetail.js
diff --git a/client/src/containers/Sales/Invoice/InvoicesDataTable.js b/client/src/containers/Sales/Invoice/InvoicesDataTable.js
deleted file mode 100644
index 4d8552116..000000000
--- a/client/src/containers/Sales/Invoice/InvoicesDataTable.js
+++ /dev/null
@@ -1,273 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-import {
-  Intent,
-  Button,
-  Popover,
-  Menu,
-  MenuItem,
-  MenuDivider,
-  Position,
-} from '@blueprintjs/core';
-import { withRouter } from 'react-router';
-import { FormattedMessage as T, useIntl } from 'react-intl';
-import moment from 'moment';
-import classNames from 'classnames';
-
-import { CLASSES } from 'common/classes';
-
-import { compose, saveInvoke } from 'utils';
-import { useIsValuePassed } from 'hooks';
-
-import {
-  LoadingIndicator,
-  Choose,
-  If,
-  DataTable,
-  Money,
-  Icon,
-} from 'components';
-import InvoicesEmptyStatus from './InvoicesEmptyStatus';
-import { statusAccessor } from './components';
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import withViewDetails from 'containers/Views/withViewDetails';
-
-import withInvoices from './withInvoices';
-import withInvoiceActions from './withInvoiceActions';
-import withCurrentView from 'containers/Views/withCurrentView';
-import withSettings from 'containers/Settings/withSettings';
-
-// Invoices datatable.
-function InvoicesDataTable({
-  // #withInvoices
-  invoicesCurrentPage,
-  invoicesLoading,
-  invoicesPageination,
-  invoicesCurrentViewId,
-
-  // #withInvoicesActions
-  addInvoiceTableQueries,
-
-  // #withSettings
-  baseCurrency,
-
-  // #OwnProps
-  onEditInvoice,
-  onDeleteInvoice,
-  onDeliverInvoice,
-  onSelectedRowsChange,
-}) {
-  const { formatMessage } = useIntl();
-  const isLoadedBefore = useIsValuePassed(invoicesLoading, false);
-
-  const handleEditInvoice = useCallback(
-    (_invoice) => () => {
-      saveInvoke(onEditInvoice, _invoice);
-    },
-    [onEditInvoice],
-  );
-
-  const handleDeleteInvoice = useCallback(
-    (_invoice) => () => {
-      saveInvoke(onDeleteInvoice, _invoice);
-    },
-    [onDeleteInvoice],
-  );
-
-  const actionMenuList = useCallback(
-    (invoice) => (
-      <Menu>
-        <MenuItem
-          icon={<Icon icon="reader-18" />}
-          text={formatMessage({ id: 'view_details' })}
-        />
-        <MenuDivider />
-        <MenuItem
-          icon={<Icon icon="pen-18" />}
-          text={formatMessage({ id: 'edit_invoice' })}
-          onClick={handleEditInvoice(invoice)}
-        />
-        <If condition={!invoice.is_delivered}>
-          <MenuItem
-            text={formatMessage({ id: 'mark_as_delivered' })}
-            onClick={() => onDeliverInvoice(invoice)}
-          />
-        </If>
-        <MenuItem
-          text={formatMessage({ id: 'delete_invoice' })}
-          intent={Intent.DANGER}
-          onClick={handleDeleteInvoice(invoice)}
-          icon={<Icon icon="trash-16" iconSize={16} />}
-        />
-      </Menu>
-    ),
-    [handleDeleteInvoice, handleEditInvoice, formatMessage],
-  );
-
-  const onRowContextMenu = useCallback(
-    (cell) => {
-      return actionMenuList(cell.row.original);
-    },
-    [actionMenuList],
-  );
-
-  const columns = useMemo(
-    () => [
-      {
-        id: 'invoice_date',
-        Header: formatMessage({ id: 'invoice_date' }),
-        accessor: (r) => moment(r.invoice_date).format('YYYY MMM DD'),
-        width: 110,
-        className: 'invoice_date',
-      },
-      {
-        id: 'customer_id',
-        Header: formatMessage({ id: 'customer_name' }),
-        accessor: 'customer.display_name',
-        width: 180,
-        className: 'customer_id',
-      },
-      {
-        id: 'invoice_no',
-        Header: formatMessage({ id: 'invoice_no__' }),
-        accessor: (row) => (row.invoice_no ? `#${row.invoice_no}` : null),
-        width: 100,
-        className: 'invoice_no',
-      },
-      {
-        id: 'balance',
-        Header: formatMessage({ id: 'balance' }),
-        accessor: (r) => <Money amount={r.balance} currency={baseCurrency} />,
-        width: 110,
-        className: 'balance',
-      },
-      {
-        id: 'status',
-        Header: formatMessage({ id: 'status' }),
-        accessor: (row) => statusAccessor(row),
-        width: 160,
-        className: 'status',
-      },
-      {
-        id: 'due_date',
-        Header: formatMessage({ id: 'due_date' }),
-        accessor: (r) => moment(r.due_date).format('YYYY MMM DD'),
-        width: 110,
-        className: 'due_date',
-      },
-      {
-        id: 'reference_no',
-        Header: formatMessage({ id: 'reference_no' }),
-        accessor: 'reference_no',
-        width: 90,
-        className: 'reference_no',
-      },
-      {
-        id: 'actions',
-        Header: '',
-        Cell: ({ cell }) => (
-          <Popover
-            content={actionMenuList(cell.row.original)}
-            position={Position.RIGHT_BOTTOM}
-          >
-            <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
-          </Popover>
-        ),
-        className: 'actions',
-        width: 50,
-        disableResizing: true,
-      },
-    ],
-    [actionMenuList, formatMessage],
-  );
-
-  const handleDataTableFetchData = useCallback(
-    ({ pageSize, pageIndex, sortBy }) => {
-      addInvoiceTableQueries({
-        ...(sortBy.length > 0
-          ? {
-              column_sort_by: sortBy[0].id,
-              sort_order: sortBy[0].desc ? 'desc' : 'asc',
-            }
-          : {}),
-        page_size: pageSize,
-        page: pageIndex + 1,
-      });
-    },
-    [addInvoiceTableQueries],
-  );
-
-  const handleSelectedRowsChange = useCallback(
-    (selectedRows) => {
-      saveInvoke(
-        onSelectedRowsChange,
-        selectedRows.map((s) => s.original),
-      );
-    },
-    [onSelectedRowsChange],
-  );
-
-  const showEmptyStatus = [
-    invoicesCurrentPage.length === 0,
-    invoicesCurrentViewId === -1,
-  ].every((d) => d === true);
-
-  return (
-    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
-      <LoadingIndicator loading={invoicesLoading && !isLoadedBefore}>
-        <Choose>
-          <Choose.When condition={showEmptyStatus}>
-            <InvoicesEmptyStatus />
-          </Choose.When>
-
-          <Choose.Otherwise>
-            <DataTable
-              columns={columns}
-              data={invoicesCurrentPage}
-              onFetchData={handleDataTableFetchData}
-              manualSortBy={true}
-              selectionColumn={true}
-              noInitialFetch={true}
-              sticky={true}
-              onSelectedRowsChange={handleSelectedRowsChange}
-              rowContextMenu={onRowContextMenu}
-              pagination={true}
-              autoResetSortBy={false}
-              autoResetPage={false}
-              pagesCount={invoicesPageination.pagesCount}
-              initialPageSize={invoicesPageination.pageSize}
-              initialPageIndex={invoicesPageination.page - 1}
-            />
-          </Choose.Otherwise>
-        </Choose>
-      </LoadingIndicator>
-    </div>
-  );
-}
-
-export default compose(
-  withRouter,
-  withCurrentView,
-  withDialogActions,
-  withDashboardActions,
-  withInvoiceActions,
-  withInvoices(
-    ({
-      invoicesCurrentPage,
-      invoicesLoading,
-      invoicesPageination,
-      invoicesTableQuery,
-      invoicesCurrentViewId,
-    }) => ({
-      invoicesCurrentPage,
-      invoicesLoading,
-      invoicesPageination,
-      invoicesTableQuery,
-      invoicesCurrentViewId,
-    }),
-  ),
-  withSettings(({ organizationSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
-  withViewDetails(),
-)(InvoicesDataTable);
diff --git a/client/src/containers/Sales/Invoice/InvoicesViewPage.js b/client/src/containers/Sales/Invoice/InvoicesViewPage.js
deleted file mode 100644
index c6ecec85c..000000000
--- a/client/src/containers/Sales/Invoice/InvoicesViewPage.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import React, { useCallback } from 'react';
-import { Switch, Route, useHistory } from 'react-router-dom';
-
-import InvoicesDataTable from './InvoicesDataTable';
-import InvoiceViewTabs from './InvoiceViewTabs';
-
-import withAlertsActions from 'containers/Alert/withAlertActions';
-import withDialogActions from 'containers/Dialog/withDialogActions';
-
-import { compose } from 'utils';
-
-/**
- * Invoices list view page.
- */
-function InvoicesViewPage({
-  // #withAlertActions
-  openAlert,
-}) {
-  const history = useHistory();
-
-  // Handle delete sale invoice.
-  const handleDeleteInvoice = useCallback(
-    ({ id }) => {
-      openAlert('invoice-delete', { invoiceId: id });
-    },
-    [openAlert],
-  );
-
-  // Handle cancel/confirm invoice deliver.
-  const handleDeliverInvoice = useCallback(
-    ({ id }) => {
-      openAlert('invoice-deliver', { invoiceId: id });
-    },
-    [openAlert],
-  );
-
-  // Handle edit sale invoice.
-  const handleEditInvoice = useCallback(
-    (invoice) => {
-      history.push(`/invoices/${invoice.id}/edit`);
-    },
-    [history],
-  );
-
-  // Handle selected rows change.
-  const handleSelectedRowsChange = useCallback(
-    (invoices) => {
-
-    },
-    [],
-  );
-  return (
-    <Switch>
-      <Route
-        exact={true}
-        path={['/invoices/:custom_view_id/custom_view', '/invoices']}
-      >
-        <InvoiceViewTabs />
-        {/* <InvoicesDataTable
-          onDeleteInvoice={handleDeleteInvoice}
-          onEditInvoice={handleEditInvoice}
-          onDeliverInvoice={handleDeliverInvoice}
-          onSelectedRowsChange={handleSelectedRowsChange}
-        /> */}
-      </Route>
-    </Switch>
-  );
-}
-
-export default compose(
-  withAlertsActions,
-  withDialogActions,
-)(InvoicesViewPage)
\ No newline at end of file
diff --git a/client/src/containers/Sales/Invoice/components.js b/client/src/containers/Sales/Invoice/components.js
deleted file mode 100644
index e4f31a5e4..000000000
--- a/client/src/containers/Sales/Invoice/components.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import React from 'react';
-import { Intent, Tag, ProgressBar } from '@blueprintjs/core';
-import { Choose, If, Icon } from 'components';
-import { FormattedMessage as T, useIntl } from 'react-intl';
-import { AppToaster } from 'components';
-import { formatMessage } from 'services/intl';
-
-const calculateStatus = (paymentAmount, balanceAmount) =>
-  paymentAmount / balanceAmount;
-
-export const statusAccessor = (row) => {
-  return (
-    <div className={'status-accessor'}>
-      <Choose>
-        <Choose.When condition={row.is_fully_paid && row.is_delivered}>
-          <span className={'fully-paid-icon'}>
-            <Icon icon="small-tick" iconSize={18} />
-          </span>
-          <span class="fully-paid-text">
-            <T id={'paid'} />
-          </span>
-        </Choose.When>
-
-        <Choose.When condition={row.is_delivered}>
-          <Choose>
-            <Choose.When condition={row.is_overdue}>
-              <span className={'overdue-status'}>
-                <T id={'overdue_by'} values={{ overdue: row.overdue_days }} />
-              </span>
-            </Choose.When>
-            <Choose.Otherwise>
-              <span className={'due-status'}>
-                <T id={'due_in'} values={{ due: row.remaining_days }} />
-              </span>
-            </Choose.Otherwise>
-          </Choose>
-
-          <If condition={row.is_partially_paid}>
-            <span class="partial-paid">
-              <T
-                id={'day_partially_paid'}
-                values={{
-                  due: row.due_amount,
-                  currencySign: '$',
-                }}
-              />
-            </span>
-            <ProgressBar
-              animate={false}
-              stripes={false}
-              intent={Intent.PRIMARY}
-              value={calculateStatus(row.payment_amount, row.balance)}
-            />
-          </If>
-        </Choose.When>
-        <Choose.Otherwise>
-          <Tag minimal={true}>
-            <T id={'draft'} />
-          </Tag>
-        </Choose.Otherwise>
-      </Choose>
-    </div>
-  );
-};
-
-export const handleDeleteErrors = (errors) => {
-  if (
-    errors.find(
-      (error) => error.type === 'INVOICE_HAS_ASSOCIATED_PAYMENT_ENTRIES',
-    )
-  ) {
-    AppToaster.show({
-      message: formatMessage({
-        id: 'the_invoice_cannot_be_deleted',
-      }),
-      intent: Intent.DANGER,
-    });
-  }
-};
diff --git a/client/src/containers/Sales/Invoice/withInvoiceActions.js b/client/src/containers/Sales/Invoice/withInvoiceActions.js
deleted file mode 100644
index a3f65974e..000000000
--- a/client/src/containers/Sales/Invoice/withInvoiceActions.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import { connect } from 'react-redux';
-import {
-  submitInvoice,
-  editInvoice,
-  deleteInvoice,
-  fetchInvoice,
-  fetchInvoicesTable,
-  fetchDueInvoices,
-  deliverInvoice,
-} from 'store/Invoice/invoices.actions';
-import t from 'store/types';
-
-const mapDipatchToProps = (dispatch) => ({
-  requestSubmitInvoice: (form) => dispatch(submitInvoice({ form })),
-  requsetFetchInvoice: (id) => dispatch(fetchInvoice({ id })),
-  requestEditInvoice: (id, form) => dispatch(editInvoice(id, form)),
-  requestFetchInvoiceTable: (query = {}) =>
-    dispatch(fetchInvoicesTable({ query: { ...query } })),
-  requestDeleteInvoice: (id) => dispatch(deleteInvoice({ id })),
-  requestFetchDueInvoices: (customerId) =>
-    dispatch(fetchDueInvoices({ customerId })),
-  requestDeliverInvoice: (id) => dispatch(deliverInvoice({ id })),
-  changeInvoiceView: (id) =>
-    dispatch({
-      type: t.INVOICES_SET_CURRENT_VIEW,
-      currentViewId: parseInt(id, 10),
-    }),
-  addInvoiceTableQueries: (queries) =>
-    dispatch({
-      type: t.INVOICES_TABLE_QUERIES_ADD,
-      payload: { queries },
-    }),
-  setInvoiceNumberChanged: (isChanged) =>
-    dispatch({
-      type: t.INVOICE_NUMBER_CHANGED,
-      payload: { isChanged },
-    }),
-});
-
-export default connect(null, mapDipatchToProps);
diff --git a/client/src/containers/Sales/Invoice/withInvoiceDetail.js b/client/src/containers/Sales/Invoice/withInvoiceDetail.js
deleted file mode 100644
index 421cfd9ce..000000000
--- a/client/src/containers/Sales/Invoice/withInvoiceDetail.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { connect } from 'react-redux';
-import { getInvoiecsByIdFactory } from 'store/Invoice/invoices.selector';
-
-export default () => {
-  const getInvoiceById = getInvoiecsByIdFactory();
-  
-  const mapStateToProps = (state, props) => ({
-    invoice: getInvoiceById(state, props),
-  });
-  return connect(mapStateToProps);
-};
diff --git a/client/src/containers/Sales/Invoice/withInvoices.js b/client/src/containers/Sales/Invoice/withInvoices.js
deleted file mode 100644
index 7b8b6fb60..000000000
--- a/client/src/containers/Sales/Invoice/withInvoices.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import { connect } from 'react-redux';
-import { getResourceViews } from 'store/customViews/customViews.selectors';
-import {
-  getInvoiceCurrentPageFactory,
-  getInvoicePaginationMetaFactory,
-  getInvoiceTableQueryFactory,
-  getCustomerReceivableInvoicesEntriesFactory,
-  getInvoicesCurrentViewIdFactory,
-} from 'store/Invoice/invoices.selector';
-
-export default (mapState) => {
-  const getInvoicesItems = getInvoiceCurrentPageFactory();
-
-  const getInvoicesPaginationMeta = getInvoicePaginationMetaFactory();
-  const getInvoiceTableQuery = getInvoiceTableQueryFactory();
-
-  const getCustomerReceivableInvoicesEntries = getCustomerReceivableInvoicesEntriesFactory();
-
-  const getInvoicesCurrentViewId = getInvoicesCurrentViewIdFactory();
-
-  const mapStateToProps = (state, props) => {
-    const query = getInvoiceTableQuery(state, props);
-
-    const mapped = {
-      invoicesCurrentPage: getInvoicesItems(state, props, query),
-      invoicesCurrentViewId: getInvoicesCurrentViewId(state, props),
-
-      invoicesViews: getResourceViews(state, props, 'sale_invoice'),
-      invoicesItems: state.salesInvoices.items,
-      invoicesTableQuery: query,
-      invoicesPageination: getInvoicesPaginationMeta(state, props, query),
-      invoicesLoading: state.salesInvoices.loading,
-      customerInvoiceEntries: getCustomerReceivableInvoicesEntries(
-        state,
-        props,
-      ),
-      invoiceNumberChanged: state.salesInvoices.journalNumberChanged,
-    };
-    return mapState ? mapState(mapped, state, props) : mapped;
-  };
-  return connect(mapStateToProps);
-};
diff --git a/client/src/containers/Sales/Invoice/InvoiceFloatingActions.js b/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.js
similarity index 100%
rename from client/src/containers/Sales/Invoice/InvoiceFloatingActions.js
rename to client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.js
diff --git a/client/src/containers/Sales/Invoice/InvoiceForm.js b/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.js
similarity index 100%
rename from client/src/containers/Sales/Invoice/InvoiceForm.js
rename to client/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.js
diff --git a/client/src/containers/Sales/Invoice/InvoiceForm.schema.js b/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.schema.js
similarity index 100%
rename from client/src/containers/Sales/Invoice/InvoiceForm.schema.js
rename to client/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.schema.js
diff --git a/client/src/containers/Sales/Invoice/InvoiceFormFooter.js b/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooter.js
similarity index 100%
rename from client/src/containers/Sales/Invoice/InvoiceFormFooter.js
rename to client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooter.js
diff --git a/client/src/containers/Sales/Invoice/InvoiceFormHeader.js b/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.js
similarity index 100%
rename from client/src/containers/Sales/Invoice/InvoiceFormHeader.js
rename to client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.js
diff --git a/client/src/containers/Sales/Invoice/InvoiceFormHeaderFields.js b/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.js
similarity index 100%
rename from client/src/containers/Sales/Invoice/InvoiceFormHeaderFields.js
rename to client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.js
diff --git a/client/src/containers/Sales/Invoice/InvoiceFormPage.js b/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormPage.js
similarity index 100%
rename from client/src/containers/Sales/Invoice/InvoiceFormPage.js
rename to client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormPage.js
diff --git a/client/src/containers/Sales/Invoice/InvoiceFormProvider.js b/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormProvider.js
similarity index 100%
rename from client/src/containers/Sales/Invoice/InvoiceFormProvider.js
rename to client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormProvider.js
diff --git a/client/src/containers/Sales/Invoice/InvoiceNumberChangeWatcher.js b/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceNumberChangeWatcher.js
similarity index 100%
rename from client/src/containers/Sales/Invoice/InvoiceNumberChangeWatcher.js
rename to client/src/containers/Sales/Invoices/InvoiceForm/InvoiceNumberChangeWatcher.js
diff --git a/client/src/containers/Sales/Invoice/InvoicesAlerts.js b/client/src/containers/Sales/Invoices/InvoicesAlerts.js
similarity index 100%
rename from client/src/containers/Sales/Invoice/InvoicesAlerts.js
rename to client/src/containers/Sales/Invoices/InvoicesAlerts.js
diff --git a/client/src/containers/Sales/Invoice/InvoiceActionsBar.js b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoiceActionsBar.js
similarity index 95%
rename from client/src/containers/Sales/Invoice/InvoiceActionsBar.js
rename to client/src/containers/Sales/Invoices/InvoicesLanding/InvoiceActionsBar.js
index e4e5e2cd6..d2093f6f9 100644
--- a/client/src/containers/Sales/Invoice/InvoiceActionsBar.js
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoiceActionsBar.js
@@ -29,7 +29,7 @@ import { compose } from 'utils';
  */
 function InvoiceActionsBar({
   // #withInvoiceActions
-  addInvoiceTableQueries,
+  setInvoicesTableState,
 }) {
   const history = useHistory();
   const { formatMessage } = useIntl();
@@ -45,9 +45,9 @@ function InvoiceActionsBar({
   };
 
   // Handle views tab change.
-  const handleTabChange = (viewId) => {
-    addInvoiceTableQueries({
-      custom_view_id: viewId.id || null,
+  const handleTabChange = (customView) => {
+    setInvoicesTableState({
+      customViewId: customView.id || null,
     });
   };
 
diff --git a/client/src/containers/Sales/Invoice/InvoiceViewTabs.js b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoiceViewTabs.js
similarity index 77%
rename from client/src/containers/Sales/Invoice/InvoiceViewTabs.js
rename to client/src/containers/Sales/Invoices/InvoicesLanding/InvoiceViewTabs.js
index 95bb36c1f..40287c3cd 100644
--- a/client/src/containers/Sales/Invoice/InvoiceViewTabs.js
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoiceViewTabs.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import { useHistory } from 'react-router';
 import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
-import { useParams } from 'react-router-dom';
 import { pick } from 'lodash';
 
 import { DashboardViewsTabs } from 'components';
 
+import withInvoices from './withInvoices';
 import withInvoiceActions from './withInvoiceActions';
 
 import { compose } from 'utils';
@@ -16,10 +16,12 @@ import { useInvoicesListContext } from './InvoicesListProvider';
  */
 function InvoiceViewTabs({
   // #withInvoiceActions
-  addInvoiceTableQueries,
+  setInvoicesTableState,
+
+  // #withInvoices
+  invoicesTableState
 }) {
   const history = useHistory();
-  const { custom_view_id: customViewId = null } = useParams();
 
   // Invoices list context.
   const { invoicesViews } = useInvoicesListContext();
@@ -29,9 +31,9 @@ function InvoiceViewTabs({
   }));
 
   // Handle tab change.
-  const handleTabsChange = (viewId) => {    
-    addInvoiceTableQueries({
-      custom_view_id: customViewId || null,
+  const handleTabsChange = (customView) => {    
+    setInvoicesTableState({
+      customViewId: customView.id || null,
     });
   };
 
@@ -44,7 +46,7 @@ function InvoiceViewTabs({
     <Navbar className={'navbar--dashboard-views'}>
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
-          initialViewId={customViewId}
+          customViewId={invoicesTableState.customViewId}
           resourceName={'invoices'}
           tabs={tabs}
           onNewViewTabClick={handleClickNewView}
@@ -57,4 +59,5 @@ function InvoiceViewTabs({
 
 export default compose(
   withInvoiceActions,
+  withInvoices(({ invoicesTableState }) => ({ invoicesTableState })),
 )(InvoiceViewTabs);
diff --git a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js
new file mode 100644
index 000000000..807f57a6d
--- /dev/null
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js
@@ -0,0 +1,119 @@
+import React, { useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
+import classNames from 'classnames';
+
+import InvoicesEmptyStatus from './InvoicesEmptyStatus';
+import { CLASSES } from 'common/classes';
+
+import { compose } from 'utils';
+import { DataTable } from 'components';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withInvoiceActions from './withInvoiceActions';
+import withSettings from 'containers/Settings/withSettings';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+
+import { useInvoicesTableColumns, ActionsMenu } from './components';
+import { useInvoicesListContext } from './InvoicesListProvider';
+
+/**
+ * Invoices datatable.
+ */
+function InvoicesDataTable({
+  // #withInvoicesActions
+  setInvoicesTableState,
+
+  // #withSettings
+  baseCurrency,
+
+  // #withAlertsActions
+  openAlert,
+}) {
+  const history = useHistory();
+
+  // Invoices list context.
+  const {
+    invoices,
+    pagination,
+    isEmptyStatus,
+    isInvoicesLoading,
+    isInvoicesFetching,
+  } = useInvoicesListContext();
+
+  // Invoices table columns.
+  const columns = useInvoicesTableColumns();
+
+  // Handle delete sale invoice.
+  const handleDeleteInvoice = ({ id }) => {
+    openAlert('invoice-delete', { invoiceId: id });
+  };
+
+  // Handle cancel/confirm invoice deliver.
+  const handleDeliverInvoice = ({ id }) => {
+    openAlert('invoice-deliver', { invoiceId: id });
+  };
+
+  // Handle edit sale invoice.
+  const handleEditInvoice = (invoice) => {
+    history.push(`/invoices/${invoice.id}/edit`);
+  };
+
+  // Handles fetch data once the table state change.
+  const handleDataTableFetchData = useCallback(
+    ({ pageSize, pageIndex, sortBy }) => {
+      setInvoicesTableState({
+        pageSize,
+        pageIndex,
+        sortBy,
+      });
+    },
+    [setInvoicesTableState],
+  );
+
+  // Display invoice empty status.
+  if (isEmptyStatus) {
+    return <InvoicesEmptyStatus />;
+  }
+
+  return (
+    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
+      <DataTable
+        columns={columns}
+        data={invoices}
+        loading={isInvoicesLoading}
+        headerLoading={isInvoicesLoading}
+        progressBarLoading={isInvoicesFetching}
+        onFetchData={handleDataTableFetchData}
+        manualSortBy={true}
+        selectionColumn={true}
+        noInitialFetch={true}
+        sticky={true}
+        pagination={true}
+        manualPagination={true}
+        pagesCount={pagination.pagesCount}
+        autoResetSortBy={false}
+        autoResetPage={false}
+        TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
+        payload={{
+          onDelete: handleDeleteInvoice,
+          onDeliver: handleDeliverInvoice,
+          onEdit: handleEditInvoice,
+          baseCurrency
+        }}
+      />
+    </div>
+  );
+}
+
+export default compose(
+  withDashboardActions,
+  withInvoiceActions,
+  withAlertsActions,
+  withSettings(({ organizationSettings }) => ({
+    baseCurrency: organizationSettings?.baseCurrency,
+  })),
+)(InvoicesDataTable);
diff --git a/client/src/containers/Sales/Invoice/InvoicesEmptyStatus.js b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesEmptyStatus.js
similarity index 100%
rename from client/src/containers/Sales/Invoice/InvoicesEmptyStatus.js
rename to client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesEmptyStatus.js
diff --git a/client/src/containers/Sales/Invoice/InvoicesList.js b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesList.js
similarity index 68%
rename from client/src/containers/Sales/Invoice/InvoicesList.js
rename to client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesList.js
index a08cf5f6a..c5ff99824 100644
--- a/client/src/containers/Sales/Invoice/InvoicesList.js
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesList.js
@@ -7,14 +7,15 @@ import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import InvoiceActionsBar from './InvoiceActionsBar';
 import { InvoicesListProvider } from './InvoicesListProvider';
 
-import InvoicesViewPage from './InvoicesViewPage';
-import InvoicesAlerts from './InvoicesAlerts';
+import InvoiceViewTabs from './InvoiceViewTabs';
+import InvoicesDataTable from './InvoicesDataTable';
+import InvoicesAlerts from '../InvoicesAlerts';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withInvoices from './withInvoices';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 
-import { compose } from 'utils';
+import { transformTableStateToQuery, compose } from 'utils';
 
 /**
  * Sale invoices list.
@@ -24,7 +25,7 @@ function InvoicesList({
   changePageTitle,
 
   // #withInvoice
-  invoicesTableQuery,
+  invoicesTableState,
 }) {
   const { formatMessage } = useIntl();
 
@@ -33,21 +34,23 @@ function InvoicesList({
   }, [changePageTitle, formatMessage]);
 
   return (
-    <InvoicesListProvider query={invoicesTableQuery}>
+    <InvoicesListProvider
+      query={transformTableStateToQuery(invoicesTableState)}
+    >
       <InvoiceActionsBar />
 
       <DashboardPageContent>
-        <InvoicesViewPage />
-        <InvoicesAlerts />
+        <InvoiceViewTabs />
+        <InvoicesDataTable />
       </DashboardPageContent>
+
+      <InvoicesAlerts />
     </InvoicesListProvider>
   );
 }
 
 export default compose(
   withDashboardActions,
-  withInvoices(({ invoicesTableQuery }) => ({
-    invoicesTableQuery,
-  })),
+  withInvoices(({ invoicesTableState }) => ({ invoicesTableState })),
   withAlertsActions,
 )(InvoicesList);
diff --git a/client/src/containers/Sales/Invoice/InvoicesListProvider.js b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesListProvider.js
similarity index 73%
rename from client/src/containers/Sales/Invoice/InvoicesListProvider.js
rename to client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesListProvider.js
index 9e9a59a9e..ba939d741 100644
--- a/client/src/containers/Sales/Invoice/InvoicesListProvider.js
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesListProvider.js
@@ -1,6 +1,7 @@
 import React, { createContext } from 'react';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import { useResourceViews, useResourceFields, useInvoices } from 'hooks/query';
+import { isTableEmptyStatus } from 'utils';
 
 const InvoicesListContext = createContext();
 
@@ -21,9 +22,18 @@ function InvoicesListProvider({ accountsTableQuery, ...props }) {
 
   // Fetch accounts list according to the given custom view id.
   const {
-    data: { invoices, pagination },
-    isFetching: isInvoicesLoading,
-  } = useInvoices(accountsTableQuery);
+    data: { invoices, pagination, filterMeta },
+    isFetching: isInvoicesFetching,
+    isLoading: isInvoicesLoading,
+  } = useInvoices(accountsTableQuery, { keepPreviousData: true });
+
+  // Detarmines the datatable empty status.
+  const isEmptyStatus =
+    isTableEmptyStatus({
+      data: invoices,
+      pagination,
+      filterMeta,
+    }) && !isInvoicesLoading;
 
   // Provider payload.
   const provider = {
@@ -33,8 +43,11 @@ function InvoicesListProvider({ accountsTableQuery, ...props }) {
     invoicesViews,
 
     isInvoicesLoading,
+    isInvoicesFetching,
     isFieldsLoading,
     isViewsLoading,
+
+    isEmptyStatus
   };
 
   return (
diff --git a/client/src/containers/Sales/Invoices/InvoicesLanding/components.js b/client/src/containers/Sales/Invoices/InvoicesLanding/components.js
new file mode 100644
index 000000000..30465bebf
--- /dev/null
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/components.js
@@ -0,0 +1,206 @@
+import React from 'react';
+import {
+  Intent,
+  Tag,
+  Menu,
+  MenuItem,
+  MenuDivider,
+  ProgressBar,
+  Popover,
+  Position,
+  Button
+} from '@blueprintjs/core';
+import { Choose, If, Icon } from 'components';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import moment from 'moment';
+import { Money, AppToaster } from 'components';
+import { formatMessage } from 'services/intl';
+import { safeCallback } from 'utils';
+
+const calculateStatus = (paymentAmount, balanceAmount) =>
+  paymentAmount / balanceAmount;
+
+export const statusAccessor = (row) => {
+  return (
+    <div className={'status-accessor'}>
+      <Choose>
+        <Choose.When condition={row.is_fully_paid && row.is_delivered}>
+          <span className={'fully-paid-icon'}>
+            <Icon icon="small-tick" iconSize={18} />
+          </span>
+          <span class="fully-paid-text">
+            <T id={'paid'} />
+          </span>
+        </Choose.When>
+
+        <Choose.When condition={row.is_delivered}>
+          <Choose>
+            <Choose.When condition={row.is_overdue}>
+              <span className={'overdue-status'}>
+                <T id={'overdue_by'} values={{ overdue: row.overdue_days }} />
+              </span>
+            </Choose.When>
+            <Choose.Otherwise>
+              <span className={'due-status'}>
+                <T id={'due_in'} values={{ due: row.remaining_days }} />
+              </span>
+            </Choose.Otherwise>
+          </Choose>
+
+          <If condition={row.is_partially_paid}>
+            <span class="partial-paid">
+              <T
+                id={'day_partially_paid'}
+                values={{
+                  due: row.due_amount,
+                  currencySign: '$',
+                }}
+              />
+            </span>
+            <ProgressBar
+              animate={false}
+              stripes={false}
+              intent={Intent.PRIMARY}
+              value={calculateStatus(row.payment_amount, row.balance)}
+            />
+          </If>
+        </Choose.When>
+        <Choose.Otherwise>
+          <Tag minimal={true}>
+            <T id={'draft'} />
+          </Tag>
+        </Choose.Otherwise>
+      </Choose>
+    </div>
+  );
+};
+
+export const handleDeleteErrors = (errors) => {
+  if (
+    errors.find(
+      (error) => error.type === 'INVOICE_HAS_ASSOCIATED_PAYMENT_ENTRIES',
+    )
+  ) {
+    AppToaster.show({
+      message: formatMessage({
+        id: 'the_invoice_cannot_be_deleted',
+      }),
+      intent: Intent.DANGER,
+    });
+  }
+};
+
+export function ActionsMenu({
+  payload: { onEdit, onDeliver, onDelete },
+  row: { original },
+}) {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="reader-18" />}
+        text={formatMessage({ id: 'view_details' })}
+      />
+      <MenuDivider />
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={formatMessage({ id: 'edit_invoice' })}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <If condition={!original.is_delivered}>
+        <MenuItem
+          text={formatMessage({ id: 'mark_as_delivered' })}
+          onClick={safeCallback(onDeliver, original)}
+        />
+      </If>
+      <MenuItem
+        text={formatMessage({ id: 'delete_invoice' })}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}
+
+function ActionsCell(props) {
+  return (
+    <Popover
+      content={<ActionsMenu {...props} />}
+      position={Position.RIGHT_BOTTOM}
+    >
+      <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
+    </Popover>
+  );
+}
+
+/**
+ * Retrieve invoices table columns.
+ */
+export function useInvoicesTableColumns() {
+  const { formatMessage } = useIntl();
+
+  return React.useMemo(
+    () => [
+      {
+        id: 'invoice_date',
+        Header: formatMessage({ id: 'invoice_date' }),
+        accessor: (r) => moment(r.invoice_date).format('YYYY MMM DD'),
+        width: 110,
+        className: 'invoice_date',
+      },
+      {
+        id: 'customer_id',
+        Header: formatMessage({ id: 'customer_name' }),
+        accessor: 'customer.display_name',
+        width: 180,
+        className: 'customer_id',
+      },
+      {
+        id: 'invoice_no',
+        Header: formatMessage({ id: 'invoice_no__' }),
+        accessor: (row) => (row.invoice_no ? `#${row.invoice_no}` : null),
+        width: 100,
+        className: 'invoice_no',
+      },
+      {
+        id: 'balance',
+        Header: formatMessage({ id: 'balance' }),
+        accessor: (r) => <Money amount={r.balance} currency={'USD'} />,
+        width: 110,
+        className: 'balance',
+      },
+      {
+        id: 'status',
+        Header: formatMessage({ id: 'status' }),
+        accessor: (row) => statusAccessor(row),
+        width: 160,
+        className: 'status',
+      },
+      {
+        id: 'due_date',
+        Header: formatMessage({ id: 'due_date' }),
+        accessor: (r) => moment(r.due_date).format('YYYY MMM DD'),
+        width: 110,
+        className: 'due_date',
+      },
+      {
+        id: 'reference_no',
+        Header: formatMessage({ id: 'reference_no' }),
+        accessor: 'reference_no',
+        width: 90,
+        className: 'reference_no',
+      },
+      {
+        id: 'actions',
+        Header: '',
+        Cell: ActionsCell,
+        className: 'actions',
+        width: 50,
+        disableResizing: true,
+      },
+    ],
+    [formatMessage],
+  );
+}
diff --git a/client/src/containers/Sales/Invoices/InvoicesLanding/withInvoiceActions.js b/client/src/containers/Sales/Invoices/InvoicesLanding/withInvoiceActions.js
new file mode 100644
index 000000000..9b1c2d1d6
--- /dev/null
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/withInvoiceActions.js
@@ -0,0 +1,10 @@
+import { connect } from 'react-redux';
+import {
+  setInvoicesTableState
+} from 'store/Invoice/invoices.actions';
+
+const mapDipatchToProps = (dispatch) => ({
+  setInvoicesTableState: (query) => setInvoicesTableState(query),
+});
+
+export default connect(null, mapDipatchToProps);
diff --git a/client/src/containers/Sales/Invoices/InvoicesLanding/withInvoices.js b/client/src/containers/Sales/Invoices/InvoicesLanding/withInvoices.js
new file mode 100644
index 000000000..5ff2019a0
--- /dev/null
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/withInvoices.js
@@ -0,0 +1,16 @@
+import { connect } from 'react-redux';
+import {
+  getInvoicesTableStateFactory,
+} from 'store/Invoice/invoices.selector';
+
+export default (mapState) => {
+  const getInvoicesTableState = getInvoicesTableStateFactory();
+
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      invoicesTableState: getInvoicesTableState(state, props),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveFloatingActions.js b/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveFloatingActions.js
similarity index 100%
rename from client/src/containers/Sales/PaymentReceive/PaymentReceiveFloatingActions.js
rename to client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveFloatingActions.js
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm.js b/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveForm.js
similarity index 100%
rename from client/src/containers/Sales/PaymentReceive/PaymentReceiveForm.js
rename to client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveForm.js
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm.schema.js b/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveForm.schema.js
similarity index 100%
rename from client/src/containers/Sales/PaymentReceive/PaymentReceiveForm.schema.js
rename to client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveForm.schema.js
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormFooter.js b/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveFormFooter.js
similarity index 100%
rename from client/src/containers/Sales/PaymentReceive/PaymentReceiveFormFooter.js
rename to client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveFormFooter.js
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormHeader.js b/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveFormHeader.js
similarity index 100%
rename from client/src/containers/Sales/PaymentReceive/PaymentReceiveFormHeader.js
rename to client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveFormHeader.js
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormPage.js b/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveFormPage.js
similarity index 100%
rename from client/src/containers/Sales/PaymentReceive/PaymentReceiveFormPage.js
rename to client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveFormPage.js
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveItemsTable.js b/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveItemsTable.js
similarity index 100%
rename from client/src/containers/Sales/PaymentReceive/PaymentReceiveItemsTable.js
rename to client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveItemsTable.js
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveItemsTableEditor.js b/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveItemsTableEditor.js
similarity index 100%
rename from client/src/containers/Sales/PaymentReceive/PaymentReceiveItemsTableEditor.js
rename to client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveItemsTableEditor.js
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceivesDataTable.js b/client/src/containers/Sales/PaymentReceive/PaymentReceivesDataTable.js
deleted file mode 100644
index 2358e68c0..000000000
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceivesDataTable.js
+++ /dev/null
@@ -1,256 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-import {
-  Intent,
-  Button,
-  Popover,
-  Menu,
-  MenuItem,
-  MenuDivider,
-  Position,
-} from '@blueprintjs/core';
-import { withRouter } from 'react-router';
-import { FormattedMessage as T, useIntl } from 'react-intl';
-import moment from 'moment';
-import classNames from 'classnames';
-
-import { compose, saveInvoke } from 'utils';
-import { useIsValuePassed } from 'hooks';
-
-import { CLASSES } from 'common/classes';
-
-import PaymentReceivesEmptyStatus from './PaymentReceivesEmptyStatus';
-import { LoadingIndicator, DataTable, Choose, Money, Icon } from 'components';
-
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import withViewDetails from 'containers/Views/withViewDetails';
-
-import withPaymentReceives from './withPaymentReceives';
-import withPaymentReceivesActions from './withPaymentReceivesActions';
-import withCurrentView from 'containers/Views/withCurrentView';
-import withSettings from 'containers/Settings/withSettings';
-
-function PaymentReceivesDataTable({
-  // #withPaymentReceives
-  PaymentReceivesCurrentPage,
-  paymentReceivesPageination,
-  paymentReceivesLoading,
-  paymentReceivesTableQuery,
-  paymentReceivesCurrentViewId,
-
-  // #withPaymentReceivesActions
-  addPaymentReceivesTableQueries,
-
-  // #withSettings
-  baseCurrency,
-  
-  // #OwnProps
-  onEditPaymentReceive,
-  onDeletePaymentReceive,
-  onSelectedRowsChange,
-}) {
-  const isLoaded = useIsValuePassed(paymentReceivesLoading, false);
-  const { formatMessage } = useIntl();
-
-  const handleEditPaymentReceive = useCallback(
-    (paymentReceive) => () => {
-      saveInvoke(onEditPaymentReceive, paymentReceive);
-    },
-    [onEditPaymentReceive],
-  );
-
-  const handleDeletePaymentReceive = useCallback(
-    (paymentReceive) => () => {
-      onDeletePaymentReceive && onDeletePaymentReceive(paymentReceive);
-    },
-    [onDeletePaymentReceive],
-  );
-
-  const handleDataTableFetchData = useCallback(
-    ({ pageIndex, pageSize, sortBy }) => {
-      addPaymentReceivesTableQueries({
-        ...(sortBy.length > 0
-          ? {
-              column_sort_by: sortBy[0].id,
-              sort_order: sortBy[0].desc ? 'desc' : 'asc',
-            }
-          : {}),
-        page_size: pageSize,
-        page: pageIndex + 1,
-      });
-    },
-    [addPaymentReceivesTableQueries],
-  );
-
-  const handleSelectedRowsChange = useCallback(
-    (selectedRows) => {
-      saveInvoke(
-        onSelectedRowsChange,
-        selectedRows.map((s) => s.original),
-      );
-    },
-    [onSelectedRowsChange],
-  );
-
-  const actionMenuList = useCallback(
-    (paymentReceive) => (
-      <Menu>
-        <MenuItem
-          icon={<Icon icon="reader-18" />}
-          text={formatMessage({ id: 'view_details' })}
-        />
-        <MenuDivider />
-        <MenuItem
-          icon={<Icon icon="pen-18" />}
-          text={formatMessage({ id: 'edit_payment_receive' })}
-          onClick={handleEditPaymentReceive(paymentReceive)}
-        />
-        <MenuItem
-          text={formatMessage({ id: 'delete_payment_receive' })}
-          intent={Intent.DANGER}
-          onClick={handleDeletePaymentReceive(paymentReceive)}
-          icon={<Icon icon="trash-16" iconSize={16} />}
-        />
-      </Menu>
-    ),
-    [handleDeletePaymentReceive, handleEditPaymentReceive, formatMessage],
-  );
-
-  const onRowContextMenu = useCallback(
-    (cell) => {
-      return actionMenuList(cell.row.original);
-    },
-    [actionMenuList],
-  );
-
-  const columns = useMemo(
-    () => [
-      {
-        id: 'payment_date',
-        Header: formatMessage({ id: 'payment_date' }),
-        accessor: (r) => moment(r.payment_date).format('YYYY MMM DD'),
-        width: 140,
-        className: 'payment_date',
-      },
-      {
-        id: 'customer_id',
-        Header: formatMessage({ id: 'customer_name' }),
-        accessor: 'customer.display_name',
-        width: 140,
-        className: 'customer_id',
-      },
-      {
-        id: 'payment_receive_no',
-        Header: formatMessage({ id: 'payment_receive_no' }),
-        accessor: (row) =>
-          row.payment_receive_no ? `#${row.payment_receive_no}` : null,
-        width: 140,
-        className: 'payment_receive_no',
-      },
-      {
-        id: 'amount',
-        Header: formatMessage({ id: 'amount' }),
-        accessor: (r) => <Money amount={r.amount} currency={baseCurrency} />,
-        width: 140,
-        className: 'amount',
-      },
-      {
-        id: 'reference_no',
-        Header: formatMessage({ id: 'reference_no' }),
-        accessor: 'reference_no',
-        width: 140,
-        className: 'reference_no',
-      },
-      {
-        id: 'deposit_account_id',
-        Header: formatMessage({ id: 'deposit_account' }),
-        accessor: 'deposit_account.name',
-        width: 140,
-        className: 'deposit_account_id',
-      },
-      {
-        id: 'actions',
-        Header: '',
-        Cell: ({ cell }) => (
-          <Popover
-            content={actionMenuList(cell.row.original)}
-            position={Position.RIGHT_BOTTOM}
-          >
-            <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
-          </Popover>
-        ),
-        className: 'actions',
-        width: 50,
-        disableResizing: true,
-      },
-    ],
-    [actionMenuList, formatMessage],
-  );
-
-  const showEmptyStatus = [
-    paymentReceivesCurrentViewId === -1,
-    PaymentReceivesCurrentPage.length === 0,
-  ].every((condition) => condition === true);
-
-  return (
-    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
-      <LoadingIndicator
-        loading={paymentReceivesLoading && !isLoaded}
-        mount={false}
-      >
-        <Choose>
-          <Choose.When condition={showEmptyStatus}>
-            <PaymentReceivesEmptyStatus />
-          </Choose.When>
-
-          <Choose.Otherwise>
-            <DataTable
-              columns={columns}
-              data={PaymentReceivesCurrentPage}
-              onFetchData={handleDataTableFetchData}
-              manualSortBy={true}
-              selectionColumn={true}
-              noInitialFetch={true}
-              sticky={true}
-              onSelectedRowsChange={handleSelectedRowsChange}
-              rowContextMenu={onRowContextMenu}
-              pagination={true}
-              autoResetSortBy={false}
-              autoResetPage={false}
-              pagesCount={paymentReceivesPageination.pagesCount}
-              initialPageSize={paymentReceivesTableQuery.page_size}
-              initialPageIndex={paymentReceivesTableQuery.page - 1}
-            />
-          </Choose.Otherwise>
-        </Choose>
-      </LoadingIndicator>
-    </div>
-  );
-}
-
-export default compose(
-  withRouter,
-  withCurrentView,
-  withDialogActions,
-  withDashboardActions,
-  withPaymentReceivesActions,
-  withPaymentReceives(
-    ({
-      PaymentReceivesCurrentPage,
-      paymentReceivesLoading,
-      paymentReceivesPageination,
-      paymentReceivesTableQuery,
-      paymentReceivesCurrentViewId,
-    }) => ({
-      PaymentReceivesCurrentPage,
-      paymentReceivesLoading,
-      paymentReceivesPageination,
-      paymentReceivesTableQuery,
-      paymentReceivesCurrentViewId,
-    }),
-  ),
-  withSettings(({ organizationSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
-  withViewDetails(),
-)(PaymentReceivesDataTable);
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceivesViewPage.js b/client/src/containers/Sales/PaymentReceive/PaymentReceivesViewPage.js
deleted file mode 100644
index 791c1d37e..000000000
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceivesViewPage.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React, { useCallback } from 'react';
-import { Switch, Route, useHistory } from 'react-router-dom';
-
-import PaymentReceivesDataTable from './PaymentReceivesDataTable';
-import PaymentReceiveViewTabs from './PaymentReceiveViewTabs';
-
-import withAlertsActions from 'containers/Alert/withAlertActions';
-import withDialogActions from 'containers/Dialog/withDialogActions';
-
-import { compose } from 'utils';
-
-/**
- * Payment receives view page.
- */
-function PaymentReceivesViewPage({
-  // #withAlertActions
-  openAlert,
-}) {
-  const history = useHistory();
-
-  // Handle delete Payment Receive
-  const handleDeletePaymentReceive = ({ id }) => {
-    openAlert('payment-receive-delete', { paymentReceiveId: id });
-  };
-
-  // Handle edit payment receive.
-  const handleEditPaymentReceive = (payment) => {
-    history.push(`/payment-receives/${payment.id}/edit`);
-  };
-
-  return (
-    <Switch>
-      <Route
-        exact={true}
-        path={[
-          '/payment-receives/:custom_view_id/custom_view',
-          '/payment-receives',
-        ]}
-      >
-        <PaymentReceiveViewTabs />
-
-        {/* <PaymentReceivesDataTable
-          onDeletePaymentReceive={handleDeletePaymentReceive}
-          onEditPaymentReceive={handleEditPaymentReceive}
-          onSelectedRowsChange={handleSelectedRowsChange}
-        /> */}
-      </Route>
-    </Switch>
-  );
-}
-
-export default compose(
-  withAlertsActions,
-  withDialogActions,
-)(PaymentReceivesViewPage)
\ No newline at end of file
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiptsListProvider.js b/client/src/containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceiptsListProvider.js
similarity index 53%
rename from client/src/containers/Sales/PaymentReceive/PaymentReceiptsListProvider.js
rename to client/src/containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceiptsListProvider.js
index 4848eef7a..aaff54857 100644
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceiptsListProvider.js
+++ b/client/src/containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceiptsListProvider.js
@@ -1,6 +1,11 @@
-import React, { createContext } from 'react';
+import React, { createContext, useContext } from 'react';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
-import { useResourceViews, useResourceFields, usePaymentReceives } from 'hooks/query';
+import {
+  useResourceViews,
+  useResourceFields,
+  usePaymentReceives,
+} from 'hooks/query';
+import { isTableEmptyStatus } from 'utils';
 
 const PaymentReceivesListContext = createContext();
 
@@ -9,9 +14,10 @@ const PaymentReceivesListContext = createContext();
  */
 function PaymentReceivesListProvider({ query, ...props }) {
   // Fetch payment receives resource views and fields.
-  const { data: paymentReceivesViews, isFetching: isViewsLoading } = useResourceViews(
-    'payment_receives',
-  );
+  const {
+    data: paymentReceivesViews,
+    isFetching: isViewsLoading,
+  } = useResourceViews('payment_receives');
 
   // Fetch the payment receives resource fields.
   const {
@@ -21,20 +27,31 @@ function PaymentReceivesListProvider({ query, ...props }) {
 
   // Fetch payment receives list according to the given custom view id.
   const {
-    data: { paymentReceives, pagination },
-    isFetching: isPaymentReceivesLoading,
+    data: { paymentReceives, pagination, filterMeta },
+    isLoading: isPaymentReceivesLoading,
+    isFetching: isPaymentReceivesFetching,
   } = usePaymentReceives(query);
 
+  // Detarmines the datatable empty status.
+  const isEmptyStatus =
+    isTableEmptyStatus({
+      data: paymentReceives,
+      pagination,
+      filterMeta,
+    }) && !isPaymentReceivesLoading;
+
   // Provider payload.
-  const provider = {
+  const state = {
     paymentReceives,
     pagination,
     paymentReceivesFields,
     paymentReceivesViews,
 
     isPaymentReceivesLoading,
+    isPaymentReceivesFetching,
     isFieldsLoading,
     isViewsLoading,
+    isEmptyStatus,
   };
 
   return (
@@ -42,11 +59,12 @@ function PaymentReceivesListProvider({ query, ...props }) {
       loading={isViewsLoading || isFieldsLoading}
       name={'payment-receives'}
     >
-      <PaymentReceivesListContext.Provider value={provider} {...props} />
+      <PaymentReceivesListContext.Provider value={state} {...props} />
     </DashboardInsider>
   );
 }
 
-const usePaymentReceivesListContext = () => React.useContext(PaymentReceivesListContext);
+const usePaymentReceivesListContext = () =>
+  useContext(PaymentReceivesListContext);
 
 export { PaymentReceivesListProvider, usePaymentReceivesListContext };
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveActionsBar.js b/client/src/containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceiveActionsBar.js
similarity index 54%
rename from client/src/containers/Sales/PaymentReceive/PaymentReceiveActionsBar.js
rename to client/src/containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceiveActionsBar.js
index 33c45c3cb..dd7a6d4f0 100644
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceiveActionsBar.js
+++ b/client/src/containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceiveActionsBar.js
@@ -1,10 +1,8 @@
-import React, { useCallback, useState, useMemo } from 'react';
+import React from 'react';
 import Icon from 'components/Icon';
 import {
   Button,
   Classes,
-  Menu,
-  MenuItem,
   Popover,
   NavbarDivider,
   NavbarGroup,
@@ -14,62 +12,41 @@ import {
 } from '@blueprintjs/core';
 
 import classNames from 'classnames';
-import { useRouteMatch, useHistory } from 'react-router-dom';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { useHistory } from 'react-router-dom';
+import { FormattedMessage as T } from 'react-intl';
 
-import { connect } from 'react-redux';
-import FilterDropdown from 'components/FilterDropdown';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
 import { If, DashboardActionViewsList } from 'components';
-import withResourceDetail from 'containers/Resources/withResourceDetails';
 
 import withPaymentReceivesActions from './withPaymentReceivesActions';
 import withPaymentReceives from './withPaymentReceives';
 
 import { compose } from 'utils';
+import { usePaymentReceivesListContext } from './PaymentReceiptsListProvider';
 
+/**
+ * Payment receives actions bar.
+ */
 function PaymentReceiveActionsBar({
-  // #withResourceDetail
-  resourceFields,
-
-  //#withPaymentReceives
-  paymentReceivesViews,
-
-  //#withPaymentReceivesActions
-  addPaymentReceivesTableQueries,
-
-  // #own Porps
-  onFilterChanged,
-  selectedRows = [],
+  // #withPaymentReceivesActions
+  setPaymentReceivesTableState,
 }) {
+  // History context.
   const history = useHistory();
-  const { path } = useRouteMatch();
-  const [filterCount, setFilterCount] = useState(0);
-  const { formatMessage } = useIntl();
 
-  const handleClickNewPaymentReceive = useCallback(() => {
+  // Payment receives list context.
+  const { paymentReceivesViews } = usePaymentReceivesListContext();
+
+  // Handle new payment button click.
+  const handleClickNewPaymentReceive = () => {
     history.push('/payment-receives/new');
-  }, [history]);
+  };
 
-  // const filterDropdown = FilterDropdown({
-  //   initialCondition: {
-  //     fieldKey: '',
-  //     compatator: 'contains',
-  //     value: '',
-  //   },
-  //   fields: resourceFields,
-  //   onFilterChange: (filterConditions) => {
-  //     addPaymentReceivesTableQueries({
-  //       filter_roles: filterConditions || '',
-  //     });
-  //     onFilterChanged && onFilterChanged(filterConditions);
-  //   },
-  // });
-
-  const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
-    selectedRows,
-  ]);
+  // Handle tab changing.
+  const handleTabChange = (viewId) => {
+    setPaymentReceivesTableState({ customViewId: viewId.id || null });
+  };
 
   return (
     <DashboardActionsBar>
@@ -77,6 +54,7 @@ function PaymentReceiveActionsBar({
         <DashboardActionViewsList
           resourceName={'payment_receives'}
           views={paymentReceivesViews}
+          onChange={handleTabChange}
         />
         <NavbarDivider />
         <Button
@@ -93,17 +71,11 @@ function PaymentReceiveActionsBar({
         >
           <Button
             className={classNames(Classes.MINIMAL)}
-            text={
-              filterCount <= 0 ? (
-                <T id={'filter'} />
-              ) : (
-                `${filterCount} ${formatMessage({ id: 'filters_applied' })}`
-              )
-            }
+            text={<T id={'filter'} />}
             icon={<Icon icon={'filter-16'} iconSize={16} />}
           />
         </Popover>
-        <If condition={hasSelectedRows}>
+        <If condition={false}>
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon={'trash-16'} iconSize={16} />}
@@ -132,15 +104,9 @@ function PaymentReceiveActionsBar({
   );
 }
 
-const mapStateToProps = (state, props) => ({
-  resourceName: 'payment_receives',
-});
-const withPaymentReceiveActionsBar = connect(mapStateToProps);
-
 export default compose(
-  withPaymentReceiveActionsBar,
-  withResourceDetail(({ resourceFields }) => ({
-    resourceFields,
+  withPaymentReceivesActions,
+  withPaymentReceives(({ paymentReceivesTableState }) => ({
+    paymentReceivesTableState,
   })),
-  withPaymentReceives(({ paymentReceivesViews }) => ({ paymentReceivesViews })),
 )(PaymentReceiveActionsBar);
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveViewTabs.js b/client/src/containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceiveViewTabs.js
similarity index 67%
rename from client/src/containers/Sales/PaymentReceive/PaymentReceiveViewTabs.js
rename to client/src/containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceiveViewTabs.js
index c5cb2fcd1..bbe9cb496 100644
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceiveViewTabs.js
+++ b/client/src/containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceiveViewTabs.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import { useHistory } from 'react-router';
 import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
-import { useParams } from 'react-router-dom';
 import { FormattedMessage as T } from 'react-intl';
 import { pick } from 'lodash';
 
 import { DashboardViewsTabs } from 'components';
 
+import withPaymentReceives from './withPaymentReceives';
 import withPaymentReceivesActions from './withPaymentReceivesActions';
 import { usePaymentReceivesListContext } from './PaymentReceiptsListProvider';
 
@@ -16,36 +16,38 @@ import { compose } from 'utils';
  * Payment receive view tabs.
  */
 function PaymentReceiveViewTabs({
-  //#withPaymentReceivesActions
+  // #withPaymentReceivesActions
   addPaymentReceivesTableQueries,
+
+  // #withPaymentReceives
+  paymentReceivesTableState,
 }) {
   const history = useHistory();
-  const { paymentReceivesViews } = usePaymentReceivesListContext();
+  const { paymentReceivesViews, ...res } = usePaymentReceivesListContext();
 
-  const { custom_view_id: customViewId = null } = useParams();
- 
   const tabs = paymentReceivesViews.map((view) => ({
     ...pick(view, ['name', 'id']),
   }));
 
-  // Handle click a new view tab.
+  // Handles click a new view tab.
   const handleClickNewView = () => {
     history.push('/custom_views/payment-receives/new');
   };
 
-  const handleTabsChange = (viewId) => {
+  // Handles the active tab chaing.
+  const handleTabsChange = (customView) => {
     addPaymentReceivesTableQueries({
-      custom_view_id: viewId || null,
+      customViewId: customView || null,
     });
-  }
+  };
 
   return (
     <Navbar className={'navbar--dashboard-views'}>
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
-          initialViewId={customViewId}
+          customViewId={paymentReceivesTableState.customViewId}
           tabs={tabs}
-          defaultTabText={<T id={'all_payments'}/>}
+          defaultTabText={<T id={'all_payments'} />}
           onNewViewTabClick={handleClickNewView}
           onChange={handleTabsChange}
         />
@@ -56,4 +58,7 @@ function PaymentReceiveViewTabs({
 
 export default compose(
   withPaymentReceivesActions,
+  withPaymentReceives(({ paymentReceivesTableState }) => ({
+    paymentReceivesTableState,
+  })),
 )(PaymentReceiveViewTabs);
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceivesEmptyStatus.js b/client/src/containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceivesEmptyStatus.js
similarity index 100%
rename from client/src/containers/Sales/PaymentReceive/PaymentReceivesEmptyStatus.js
rename to client/src/containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceivesEmptyStatus.js
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceivesList.js b/client/src/containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceivesList.js
similarity index 60%
rename from client/src/containers/Sales/PaymentReceive/PaymentReceivesList.js
rename to client/src/containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceivesList.js
index cb24b5bef..e80beb42a 100644
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceivesList.js
+++ b/client/src/containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceivesList.js
@@ -3,14 +3,15 @@ import { useIntl } from 'react-intl';
 
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import PaymentReceiveActionsBar from './PaymentReceiveActionsBar';
-import PaymentReceiveAlerts from './PaymentReceiveAlerts';
+import PaymentReceiveAlerts from '../PaymentReceiveAlerts';
 import { PaymentReceivesListProvider } from './PaymentReceiptsListProvider';
-import PaymentReceivesViewPage from './PaymentReceivesViewPage';
+import PaymentReceiveViewTabs from './PaymentReceiveViewTabs';
+import PaymentReceivesTable from './PaymentReceivesTable';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withPaymentReceives from './withPaymentReceives';
 
-import { compose } from 'utils';
+import { compose, transformTableStateToQuery } from 'utils';
 
 /**
  * Payment receives list.
@@ -20,29 +21,34 @@ function PaymentReceiveList({
   changePageTitle,
 
   // #withPaymentReceives
-  paymentReceivesTableQuery,
+  paymentReceivesTableState,
 }) {
   const { formatMessage } = useIntl();
-  
+
+  // Changes the dashboard page title once the page mount.
   useEffect(() => {
     changePageTitle(formatMessage({ id: 'payment_Receives_list' }));
   }, [changePageTitle, formatMessage]);
 
   return (
-    <PaymentReceivesListProvider query={paymentReceivesTableQuery}>
+    <PaymentReceivesListProvider
+      query={transformTableStateToQuery(paymentReceivesTableState)}
+    >
       <PaymentReceiveActionsBar />
 
       <DashboardPageContent>
-        <PaymentReceivesViewPage />
-        <PaymentReceiveAlerts />
+        <PaymentReceiveViewTabs />
+        <PaymentReceivesTable />
       </DashboardPageContent>
+
+      <PaymentReceiveAlerts />
     </PaymentReceivesListProvider>
   );
 }
 
 export default compose(
   withDashboardActions,
-  withPaymentReceives(({ paymentReceivesTableQuery }) => ({
-    paymentReceivesTableQuery,
+  withPaymentReceives(({ paymentReceivesTableState }) => ({
+    paymentReceivesTableState,
   })),
 )(PaymentReceiveList);
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceivesListProvider.js b/client/src/containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceivesListProvider.js
similarity index 89%
rename from client/src/containers/Sales/PaymentReceive/PaymentReceivesListProvider.js
rename to client/src/containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceivesListProvider.js
index e8ab476ec..2df4e069a 100644
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceivesListProvider.js
+++ b/client/src/containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceivesListProvider.js
@@ -26,8 +26,9 @@ function PaymentReceivesListProvider({ query, ...props }) {
 
   // Fetch accounts list according to the given custom view id.
   const {
-    data: { paymentReceives, pagination },
-    isFetching: isPaymentReceivesLoading,
+    data: { paymentReceives, pagination, filterMeta },
+    isLoading: isPaymentReceivesLoading,
+    isFetching: isPaymentReceivesFetching,
   } = usePaymentReceives(query);
 
   // Provider payload.
@@ -40,6 +41,7 @@ function PaymentReceivesListProvider({ query, ...props }) {
     isViewsLoading,
     isFieldsLoading,
     isPaymentReceivesLoading,
+    isPaymentReceivesFetching
   };
 
   return (
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceivesTable.js b/client/src/containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceivesTable.js
new file mode 100644
index 000000000..c1ebde942
--- /dev/null
+++ b/client/src/containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceivesTable.js
@@ -0,0 +1,105 @@
+import React, { useCallback } from 'react';
+import classNames from 'classnames';
+
+import { compose } from 'utils';
+import { useHistory } from 'react-router-dom';
+
+import { CLASSES } from 'common/classes';
+import PaymentReceivesEmptyStatus from './PaymentReceivesEmptyStatus';
+import { DataTable } from 'components';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withPaymentReceivesActions from './withPaymentReceivesActions';
+import withSettings from 'containers/Settings/withSettings';
+import { usePaymentReceivesColumns, ActionsMenu } from './components';
+import { usePaymentReceivesListContext } from './PaymentReceiptsListProvider';
+
+/**
+ * Payment receives datatable.
+ */
+function PaymentReceivesDataTable({
+  // #withPaymentReceivesActions
+  setPaymentReceivesTableState,
+
+  // #withAlertsActions
+  openAlert,
+}) {
+  const history = useHistory();
+
+  // Payment receives list context.
+  const {
+    paymentReceives,
+    pagination,
+
+    isPaymentReceivesLoading,
+    isPaymentReceivesFetching,
+    isEmptyStatus,
+  } = usePaymentReceivesListContext();
+
+  // Payment receives columns.
+  const columns = usePaymentReceivesColumns();
+
+  // Handles edit payment receive.
+  const handleEditPaymentReceive = ({ id }) => {
+    history.push(`/payment-receives/${id}/edit`);
+  };
+
+  // Handles delete payment receive.
+  const handleDeletePaymentReceive = ({ id }) => {
+    openAlert('payment-receive-delete', { paymentReceiveId: id });
+  };
+
+  // Handle datatable fetch once the table's state changing.
+  const handleDataTableFetchData = useCallback(
+    ({ pageIndex, pageSize, sortBy }) => {
+      setPaymentReceivesTableState({
+        pageIndex,
+        pageSize,
+        sortBy,
+      });
+    },
+    [setPaymentReceivesTableState],
+  );
+
+  if (isEmptyStatus) {
+    return <PaymentReceivesEmptyStatus />;
+  }
+
+  return (
+    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
+      <DataTable
+        columns={columns}
+        data={paymentReceives}
+        loading={isPaymentReceivesLoading}
+        headerLoading={isPaymentReceivesLoading}
+        progressBarLoading={isPaymentReceivesFetching}
+        onFetchData={handleDataTableFetchData}
+        manualSortBy={true}
+        selectionColumn={true}
+        noInitialFetch={true}
+        sticky={true}
+        autoResetSortBy={false}
+        autoResetPage={false}
+        pagination={true}
+        pagesCount={pagination.pagesCount}
+        TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
+        payload={{
+          onDelete: handleDeletePaymentReceive,
+          onEdit: handleEditPaymentReceive,
+        }}
+      />
+    </div>
+  );
+}
+
+export default compose(
+  withPaymentReceivesActions,
+  withAlertsActions,
+  withSettings(({ organizationSettings }) => ({
+    baseCurrency: organizationSettings?.baseCurrency,
+  })),
+)(PaymentReceivesDataTable);
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentsLanding/components.js b/client/src/containers/Sales/PaymentReceive/PaymentsLanding/components.js
new file mode 100644
index 000000000..3d2f18405
--- /dev/null
+++ b/client/src/containers/Sales/PaymentReceive/PaymentsLanding/components.js
@@ -0,0 +1,137 @@
+import React from 'react';
+import {
+  Intent,
+  Button,
+  Popover,
+  Menu,
+  MenuItem,
+  MenuDivider,
+  Position,
+} from '@blueprintjs/core';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import moment from 'moment';
+import { Money, Icon } from 'components';
+import { safeCallback } from 'utils';
+
+/**
+ * Table actions menu.
+ */
+export function ActionsMenu({
+  row: { original: paymentReceive },
+  payload: { onEdit, onDelete },
+}) {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="reader-18" />}
+        text={formatMessage({ id: 'view_details' })}
+      />
+      <MenuDivider />
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={formatMessage({ id: 'edit_payment_receive' })}
+        onClick={safeCallback(onEdit, paymentReceive)}
+      />
+      <MenuItem
+        text={formatMessage({ id: 'delete_payment_receive' })}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, paymentReceive)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * Amount accessor.
+ */
+export function AmountAccessor(row) {
+  return <Money amount={row.amount} currency={'USD'} />;
+}
+
+/**
+ * Payment date accessor.
+ */
+export function PaymentDateAccessor(row) {
+  return moment(row.payment_date).format('YYYY MMM DD');
+}
+
+/**
+ * Actions cell.
+ */
+export function ActionsCell(props) {
+  return (
+    <Popover
+      content={<ActionsMenu {...props} />}
+      position={Position.RIGHT_BOTTOM}
+    >
+      <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
+    </Popover>
+  );
+}
+
+/**
+ * Retrieve payment receives columns.
+ */
+export function usePaymentReceivesColumns() {
+  const { formatMessage } = useIntl();
+
+  return React.useMemo(
+    () => [
+      {
+        id: 'payment_date',
+        Header: formatMessage({ id: 'payment_date' }),
+        accessor: PaymentDateAccessor,
+        width: 140,
+        className: 'payment_date',
+      },
+      {
+        id: 'customer_id',
+        Header: formatMessage({ id: 'customer_name' }),
+        accessor: 'customer.display_name',
+        width: 140,
+        className: 'customer_id',
+      },
+      {
+        id: 'payment_receive_no',
+        Header: formatMessage({ id: 'payment_receive_no' }),
+        accessor: (row) =>
+          row.payment_receive_no ? `#${row.payment_receive_no}` : null,
+        width: 140,
+        className: 'payment_receive_no',
+      },
+      {
+        id: 'amount',
+        Header: formatMessage({ id: 'amount' }),
+        accessor: AmountAccessor,
+        width: 140,
+        className: 'amount',
+      },
+      {
+        id: 'reference_no',
+        Header: formatMessage({ id: 'reference_no' }),
+        accessor: 'reference_no',
+        width: 140,
+        className: 'reference_no',
+      },
+      {
+        id: 'deposit_account_id',
+        Header: formatMessage({ id: 'deposit_account' }),
+        accessor: 'deposit_account.name',
+        width: 140,
+        className: 'deposit_account_id',
+      },
+      {
+        id: 'actions',
+        Header: '',
+        Cell: ActionsCell,
+        className: 'actions',
+        width: 50,
+        disableResizing: true,
+      },
+    ],
+    [formatMessage],
+  );
+}
diff --git a/client/src/containers/Sales/PaymentReceive/withPaymentReceiveDetail.js b/client/src/containers/Sales/PaymentReceive/PaymentsLanding/withPaymentReceiveDetail.js
similarity index 100%
rename from client/src/containers/Sales/PaymentReceive/withPaymentReceiveDetail.js
rename to client/src/containers/Sales/PaymentReceive/PaymentsLanding/withPaymentReceiveDetail.js
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentsLanding/withPaymentReceives.js b/client/src/containers/Sales/PaymentReceive/PaymentsLanding/withPaymentReceives.js
new file mode 100644
index 000000000..13e047e11
--- /dev/null
+++ b/client/src/containers/Sales/PaymentReceive/PaymentsLanding/withPaymentReceives.js
@@ -0,0 +1,16 @@
+import { connect } from 'react-redux';
+import {
+  getPaymentReceiveTableStateFactory
+} from 'store/PaymentReceives/paymentReceives.selector';
+
+export default (mapState) => {
+  const getPaymentReceiveTableState = getPaymentReceiveTableStateFactory();
+
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      paymentReceivesTableState: getPaymentReceiveTableState(state, props),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentsLanding/withPaymentReceivesActions.js b/client/src/containers/Sales/PaymentReceive/PaymentsLanding/withPaymentReceivesActions.js
new file mode 100644
index 000000000..48f56f76c
--- /dev/null
+++ b/client/src/containers/Sales/PaymentReceive/PaymentsLanding/withPaymentReceivesActions.js
@@ -0,0 +1,9 @@
+import { connect } from 'react-redux';
+import { setPaymentReceivesTableState } from 'store/PaymentReceives/paymentReceives.actions';
+
+const mapDispatchToProps = (dispatch) => ({
+  setPaymentReceivesTableState: (state) =>
+    dispatch(setPaymentReceivesTableState(state)),
+});
+
+export default connect(null, mapDispatchToProps);
diff --git a/client/src/containers/Sales/PaymentReceive/withPaymentReceives.js b/client/src/containers/Sales/PaymentReceive/withPaymentReceives.js
deleted file mode 100644
index 8069f3a9b..000000000
--- a/client/src/containers/Sales/PaymentReceive/withPaymentReceives.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { connect } from 'react-redux';
-import { getResourceViews } from 'store/customViews/customViews.selectors';
-import {
-  getPaymentReceiveCurrentPageFactory,
-  getPaymentReceivePaginationMetaFactory,
-  getPaymentReceiveTableQuery,
-  getPaymentReceivesCurrentViewIdFactory,
-} from 'store/PaymentReceive/paymentReceive.selector';
-
-export default (mapState) => {
-  const getPyamentReceivesItems = getPaymentReceiveCurrentPageFactory();
-  const getPyamentReceivesPaginationMeta = getPaymentReceivePaginationMetaFactory();
-  const getPaymentReceivesCurrentViewId = getPaymentReceivesCurrentViewIdFactory();
-
-  const mapStateToProps = (state, props) => {
-    const query = getPaymentReceiveTableQuery(state, props);
-    const mapped = {
-      PaymentReceivesCurrentPage: getPyamentReceivesItems(state, props, query),
-      paymentReceivesViews: getResourceViews(state, props, 'payment_receives'),
-      paymentReceivesItems: state.paymentReceives.items,
-      paymentReceivesTableQuery: query,
-      paymentReceivesPageination: getPyamentReceivesPaginationMeta(
-        state,
-        props,
-        query,
-      ),
-      paymentReceivesLoading: state.paymentReceives.loading,
-      paymentReceiveNumberChanged: state.paymentReceives.journalNumberChanged,
-      paymentReceivesCurrentViewId: getPaymentReceivesCurrentViewId(state, props),
-    };
-    return mapState ? mapState(mapped, state, props) : mapped;
-  };
-  return connect(mapStateToProps);
-};
diff --git a/client/src/containers/Sales/PaymentReceive/withPaymentReceivesActions.js b/client/src/containers/Sales/PaymentReceive/withPaymentReceivesActions.js
deleted file mode 100644
index 169d5e3f0..000000000
--- a/client/src/containers/Sales/PaymentReceive/withPaymentReceivesActions.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { connect } from 'react-redux';
-import {
-  submitPaymentReceive,
-  editPaymentReceive,
-  deletePaymentReceive,
-  fetchPaymentReceive,
-  fetchPaymentReceivesTable,
-} from 'store/PaymentReceive/paymentReceive.actions';
-import t from 'store/types';
-
-const mapDispatchToProps = (dispatch) => ({
-  requestSubmitPaymentReceive: (form) =>
-    dispatch(submitPaymentReceive({ form })),
-  requestFetchPaymentReceive: (id) => dispatch(fetchPaymentReceive({ id })),
-  requestEditPaymentReceive: (id, form) =>
-    dispatch(editPaymentReceive(id, form)),
-  requestDeletePaymentReceive: (id) => dispatch(deletePaymentReceive({ id })),
-  requestFetchPaymentReceiveTable: (query = {}) =>
-    dispatch(fetchPaymentReceivesTable({ query: { ...query } })),
-
-  changePaymentReceiveView: (id) =>
-    dispatch({
-      type: t.PAYMENT_RECEIVES_SET_CURRENT_VIEW,
-      currentViewId: parseInt(id, 10),
-    }),
-
-  addPaymentReceivesTableQueries: (queries) =>
-    dispatch({
-      type: t.PAYMENT_RECEIVES_TABLE_QUERIES_ADD,
-      payload: { queries }
-    }),
-
-  setPaymentReceiveNumberChanged: (isChanged) =>
-    dispatch({
-      type: t.PAYMENT_RECEIVE_NUMBER_CHANGED,
-      payload: { isChanged },
-    }),
-});
-export default connect(null, mapDispatchToProps);
diff --git a/client/src/containers/Sales/Receipt/ReceiptsDataTable.js b/client/src/containers/Sales/Receipt/ReceiptsDataTable.js
deleted file mode 100644
index 4baa3f38a..000000000
--- a/client/src/containers/Sales/Receipt/ReceiptsDataTable.js
+++ /dev/null
@@ -1,290 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-import {
-  Intent,
-  Button,
-  Popover,
-  Menu,
-  MenuItem,
-  MenuDivider,
-  Position,
-  Tag,
-} from '@blueprintjs/core';
-import { withRouter } from 'react-router';
-import { FormattedMessage as T, useIntl } from 'react-intl';
-import moment from 'moment';
-import classNames from 'classnames';
-
-import { compose, saveInvoke } from 'utils';
-import { useIsValuePassed } from 'hooks';
-
-import { CLASSES } from 'common/classes';
-import {
-  Choose,
-  LoadingIndicator,
-  DataTable,
-  Money,
-  Icon,
-  If,
-} from 'components';
-
-import ReceiptsEmptyStatus from './ReceiptsEmptyStatus';
-
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-
-import withReceipts from './withReceipts';
-import withReceiptActions from './withReceiptActions';
-import withSettings from 'containers/Settings/withSettings';
-
-function ReceiptsDataTable({
-  // #withReceipts
-  receiptsCurrentPage,
-  receiptsLoading,
-  receiptsPagination,
-  receiptTableQuery,
-  receiptsCurrentViewId,
-
-  // #withReceiptsActions
-  addReceiptsTableQueries,
-
-  // #withSettings
-  baseCurrency,
-
-  // #ownProps
-  loading,
-  onEditReceipt,
-  onDeleteReceipt,
-  onCloseReceipt,
-  onSelectedRowsChange,
-}) {
-  const { formatMessage } = useIntl();
-  const isLoadedBefore = useIsValuePassed(receiptsLoading, false);
-
-  const handleEditReceipt = useCallback(
-    (receipt) => () => {
-      saveInvoke(onEditReceipt, receipt);
-    },
-    [onEditReceipt],
-  );
-
-  const handleDeleteReceipt = useCallback(
-    (receipt) => () => {
-      saveInvoke(onDeleteReceipt, receipt);
-    },
-    [onDeleteReceipt],
-  );
-
-  const actionMenuList = useCallback(
-    (receipt) => (
-      <Menu>
-        <MenuItem
-          icon={<Icon icon="reader-18" />}
-          text={formatMessage({ id: 'view_details' })}
-        />
-        <MenuDivider />
-        <MenuItem
-          icon={<Icon icon="pen-18" />}
-          text={formatMessage({ id: 'edit_receipt' })}
-          onClick={handleEditReceipt(receipt)}
-        />
-        <If condition={!receipt.is_closed}>
-          <MenuItem
-            text={formatMessage({ id: 'mark_as_closed' })}
-            onClick={() => onCloseReceipt(receipt)}
-          />
-        </If>
-        <MenuItem
-          text={formatMessage({ id: 'delete_receipt' })}
-          intent={Intent.DANGER}
-          onClick={handleDeleteReceipt(receipt)}
-          icon={<Icon icon="trash-16" iconSize={16} />}
-        />
-      </Menu>
-    ),
-    [handleDeleteReceipt, handleEditReceipt, formatMessage],
-  );
-
-  const onRowContextMenu = useCallback(
-    (cell) => {
-      return actionMenuList(cell.row.original);
-    },
-    [actionMenuList],
-  );
-
-  const columns = useMemo(
-    () => [
-      {
-        id: 'receipt_date',
-        Header: formatMessage({ id: 'receipt_date' }),
-        accessor: (r) => moment(r.receipt_date).format('YYYY MMM DD'),
-        width: 140,
-        className: 'receipt_date',
-      },
-      {
-        id: 'customer_id',
-        Header: formatMessage({ id: 'customer_name' }),
-        accessor: 'customer.display_name',
-        width: 140,
-        className: 'customer_id',
-      },
-      {
-        id: 'receipt_number',
-        Header: formatMessage({ id: 'receipt_number' }),
-        accessor: (row) =>
-          row.receipt_number ? `#${row.receipt_number}` : null,
-        width: 140,
-        className: 'receipt_number',
-      },
-      {
-        id: 'deposit_account_id',
-        Header: formatMessage({ id: 'deposit_account' }),
-        accessor: 'deposit_account.name',
-        width: 140,
-        className: 'deposit_account',
-      },
-      {
-        id: 'amount',
-        Header: formatMessage({ id: 'amount' }),
-        accessor: (r) => <Money amount={r.amount} currency={baseCurrency} />,
-
-        width: 140,
-        className: 'amount',
-      },
-      {
-        id: 'status',
-        Header: formatMessage({ id: 'status' }),
-        accessor: (row) => (
-          <Choose>
-            <Choose.When condition={row.is_closed}>
-              <Tag minimal={true} intent={Intent.SUCCESS}>
-                <T id={'closed'} />
-              </Tag>
-            </Choose.When>
-
-            <Choose.Otherwise>
-              <Tag minimal={true} intent={Intent.WARNING}>
-                <T id={'draft'} />
-              </Tag>
-            </Choose.Otherwise>
-          </Choose>
-        ),
-
-        width: 140,
-        className: 'amount',
-      },
-      {
-        id: 'reference_no',
-        Header: formatMessage({ id: 'reference_no' }),
-        accessor: 'reference_no',
-        width: 140,
-        className: 'reference_no',
-      },
-      {
-        id: 'actions',
-        Header: '',
-        Cell: ({ cell }) => (
-          <Popover
-            content={actionMenuList(cell.row.original)}
-            position={Position.RIGHT_BOTTOM}
-          >
-            <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
-          </Popover>
-        ),
-        className: 'actions',
-        width: 50,
-        disableResizing: true,
-      },
-    ],
-    [actionMenuList, formatMessage],
-  );
-
-  const handleDataTableFetchData = useCallback(
-    ({ sortBy, pageIndex, pageSize }) => {
-      const page = pageIndex + 1;
-
-      addReceiptsTableQueries({
-        ...(sortBy.length > 0
-          ? {
-              column_sort_by: sortBy[0].id,
-              sort_order: sortBy[0].desc ? 'desc' : 'asc',
-            }
-          : {}),
-        page_size: pageSize,
-        page,
-      });
-    },
-    [addReceiptsTableQueries],
-  );
-
-  const handleSelectedRowsChange = useCallback(
-    (selectedRows) => {
-      saveInvoke(
-        onSelectedRowsChange,
-        selectedRows.map((s) => s.original),
-      );
-    },
-    [onSelectedRowsChange],
-  );
-
-  const showEmptyStatus = [
-    receiptsCurrentViewId === -1,
-    receiptsCurrentPage.length === 0,
-  ].every((condition) => condition === true);
-
-  return (
-    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
-      <LoadingIndicator loading={receiptsLoading && !isLoadedBefore}>
-        <Choose>
-          <Choose.When condition={showEmptyStatus}>
-            <ReceiptsEmptyStatus />
-          </Choose.When>
-
-          <Choose.Otherwise>
-            <DataTable
-              columns={columns}
-              data={receiptsCurrentPage}
-              onFetchData={handleDataTableFetchData}
-              manualSortBy={true}
-              selectionColumn={true}
-              noInitialFetch={true}
-              sticky={true}
-              onSelectedRowsChange={handleSelectedRowsChange}
-              rowContextMenu={onRowContextMenu}
-              pagination={true}
-              pagesCount={receiptsPagination.pagesCount}
-              autoResetSortBy={false}
-              autoResetPage={false}
-              initialPageSize={receiptTableQuery.page_size}
-              initialPageIndex={receiptTableQuery.page - 1}
-            />
-          </Choose.Otherwise>
-        </Choose>
-      </LoadingIndicator>
-    </div>
-  );
-}
-
-export default compose(
-  withRouter,
-  withDialogActions,
-  withDashboardActions,
-  withReceiptActions,
-  withReceipts(
-    ({
-      receiptsCurrentPage,
-      receiptsLoading,
-      receiptsPagination,
-      receiptTableQuery,
-      receiptsCurrentViewId,
-    }) => ({
-      receiptsCurrentPage,
-      receiptsLoading,
-      receiptsPagination,
-      receiptTableQuery,
-      receiptsCurrentViewId,
-    }),
-  ),
-  withSettings(({ organizationSettings }) => ({
-    baseCurrency: organizationSettings?.baseCurrency,
-  })),
-)(ReceiptsDataTable);
diff --git a/client/src/containers/Sales/Receipt/ReceiptsViewPage.js b/client/src/containers/Sales/Receipt/ReceiptsViewPage.js
deleted file mode 100644
index e4cf60976..000000000
--- a/client/src/containers/Sales/Receipt/ReceiptsViewPage.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import React, { useCallback } from 'react';
-import { Switch, Route, useHistory } from 'react-router-dom';
-
-import ReceiptViewTabs from './ReceiptViewTabs';
-
-import withAlertsActions from 'containers/Alert/withAlertActions';
-import withDialogActions from 'containers/Dialog/withDialogActions';
-
-import { compose } from 'utils';
-
-/**
- * Sale receipts view page.
- */
-function ReceiptsViewPage({
-  // #withAlertActions
-  openAlert,
-
-  // #withDialog.
-  openDialog,
-}) {
-  const history = useHistory();
-
-  // handle delete receipt click
-  const handleDeleteReceipt = useCallback(
-    ({ id }) => {
-      openAlert('receipt-delete', { receiptId: id });
-    },
-    [openAlert],
-  );
-
-  const handleSelectedRowsChange = useCallback((estimate) => {}, []);
-
-  const handleEditReceipt = useCallback(
-    (receipt) => {
-      history.push(`/receipts/${receipt.id}/edit`);
-    },
-    [history],
-  );
-
-  // Handle cancel/confirm receipt deliver.
-  const handleCloseReceipt = useCallback(
-    ({ id }) => {
-      openAlert('receipt-close', { receiptId: id });
-    },
-    [openAlert],
-  );
-
-  return (
-    <Switch>
-      <Route
-        exact={true}
-        path={['/receipts/:custom_view_id/custom_view', '/receipts']}
-      >
-        <ReceiptViewTabs />
-        {/* <ReceiptsDataTable
-              onDeleteReceipt={handleDeleteReceipt}
-              onEditReceipt={handleEditReceipt}
-              onCloseReceipt={handleCloseReceipt}
-              onSelectedRowsChange={handleSelectedRowsChange}
-            /> */}
-      </Route>
-    </Switch>
-  );
-}
-
-export default compose(withAlertsActions, withDialogActions)(ReceiptsViewPage);
diff --git a/client/src/containers/Sales/Receipt/withReceiptActions.js b/client/src/containers/Sales/Receipt/withReceiptActions.js
deleted file mode 100644
index f24f49b6d..000000000
--- a/client/src/containers/Sales/Receipt/withReceiptActions.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import { connect } from 'react-redux';
-import {
-  submitReceipt,
-  deleteReceipt,
-  fetchReceipt,
-  fetchReceiptsTable,
-  editReceipt,
-  closeReceipt,
-} from 'store/receipt/receipt.actions';
-import t from 'store/types';
-
-const mapDispatchToProps = (dispatch) => ({
-  requestSubmitReceipt: (form) => dispatch(submitReceipt({ form })),
-  requestFetchReceipt: (id) => dispatch(fetchReceipt({ id })),
-  requestEditReceipt: (id, form) => dispatch(editReceipt(id, form)),
-  requestDeleteReceipt: (id) => dispatch(deleteReceipt({ id })),
-  requestFetchReceiptsTable: (query = {}) =>
-    dispatch(fetchReceiptsTable({ query: { ...query } })),
-  requestCloseReceipt: (id) => dispatch(closeReceipt({ id })),
-  // requestDeleteBulkReceipt: (ids) => dispatch(deleteBulkReceipt({ ids })),
-
-  changeReceiptView: (id) =>
-    dispatch({
-      type: t.RECEIPTS_SET_CURRENT_VIEW,
-      currentViewId: parseInt(id, 10),
-    }),
-
-  addReceiptsTableQueries: (queries) =>
-    dispatch({
-      type: t.RECEIPTS_TABLE_QUERIES_ADD,
-      payload: { queries },
-    }),
-  setReceiptNumberChanged: (isChanged) =>
-    dispatch({
-      type: t.RECEIPT_NUMBER_CHANGED,
-      payload: { isChanged },
-    }),
-});
-
-export default connect(null, mapDispatchToProps);
diff --git a/client/src/containers/Sales/Receipt/withReceiptDetail.js b/client/src/containers/Sales/Receipt/withReceiptDetail.js
deleted file mode 100644
index a2f19dca9..000000000
--- a/client/src/containers/Sales/Receipt/withReceiptDetail.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { connect } from 'react-redux';
-import { getReceiptByIdFactory } from 'store/receipt/receipt.selector';
-
-export default () => {
-  const getReceiptById = getReceiptByIdFactory();
-
-  const mapStateToProps = (state, props) => ({
-    receipt: getReceiptById(state, props),
-  });
-  return connect(mapStateToProps);
-};
diff --git a/client/src/containers/Sales/Receipt/withReceipts.js b/client/src/containers/Sales/Receipt/withReceipts.js
deleted file mode 100644
index 93ca707b8..000000000
--- a/client/src/containers/Sales/Receipt/withReceipts.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { connect } from 'react-redux';
-import { getResourceViews } from 'store/customViews/customViews.selectors';
-import {
-  getReceiptCurrentPageFactory,
-  getReceiptsTableQueryFactory,
-  getReceiptsPaginationMetaFactory,
-  getReceiptsCurrentViewIdFactory
-} from 'store/receipt/receipt.selector';
-
-export default (mapState) => {
-  const getReceiptsItems = getReceiptCurrentPageFactory();
-  const getReceiptPaginationMeta = getReceiptsPaginationMetaFactory();
-  const getReceiptsTableQuery = getReceiptsTableQueryFactory();
-  const getReceiptsCurrentViewId = getReceiptsCurrentViewIdFactory();
-
-  const mapStateToProps = (state, props) => {
-    const tableQuery = getReceiptsTableQuery(state, props);
-
-    const mapped = {
-      receiptsCurrentPage: getReceiptsItems(state, props, tableQuery),
-      receiptview: getResourceViews(state, props, 'sale_receipt'),
-      receiptItems: state.salesReceipts.items,
-      receiptTableQuery: tableQuery,
-      receiptsPagination: getReceiptPaginationMeta(state, props, tableQuery),
-
-      receiptsLoading: state.salesReceipts.loading,
-      receiptNumberChanged: state.salesReceipts.journalNumberChanged,
-
-      receiptsCurrentViewId: getReceiptsCurrentViewId(state, props),
-    };
-
-    return mapState ? mapState(mapped, state, props) : mapped;
-  };
-  return connect(mapStateToProps);
-};
diff --git a/client/src/containers/Sales/Receipt/ReceiptForm.js b/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.js
similarity index 100%
rename from client/src/containers/Sales/Receipt/ReceiptForm.js
rename to client/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.js
diff --git a/client/src/containers/Sales/Receipt/ReceiptForm.schema.js b/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.schema.js
similarity index 100%
rename from client/src/containers/Sales/Receipt/ReceiptForm.schema.js
rename to client/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.schema.js
diff --git a/client/src/containers/Sales/Receipt/ReceiptFormBody.js b/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormBody.js
similarity index 100%
rename from client/src/containers/Sales/Receipt/ReceiptFormBody.js
rename to client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormBody.js
diff --git a/client/src/containers/Sales/Receipt/ReceiptFormFloatingActions.js b/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFloatingActions.js
similarity index 100%
rename from client/src/containers/Sales/Receipt/ReceiptFormFloatingActions.js
rename to client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFloatingActions.js
diff --git a/client/src/containers/Sales/Receipt/ReceiptFormFooter.js b/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooter.js
similarity index 100%
rename from client/src/containers/Sales/Receipt/ReceiptFormFooter.js
rename to client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooter.js
diff --git a/client/src/containers/Sales/Receipt/ReceiptFormHeader.js b/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.js
similarity index 100%
rename from client/src/containers/Sales/Receipt/ReceiptFormHeader.js
rename to client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.js
diff --git a/client/src/containers/Sales/Receipt/ReceiptFormHeaderFields.js b/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.js
similarity index 100%
rename from client/src/containers/Sales/Receipt/ReceiptFormHeaderFields.js
rename to client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.js
diff --git a/client/src/containers/Sales/Receipt/ReceiptFormPage.js b/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormPage.js
similarity index 100%
rename from client/src/containers/Sales/Receipt/ReceiptFormPage.js
rename to client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormPage.js
diff --git a/client/src/containers/Sales/Receipt/ReceiptFormProvider.js b/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormProvider.js
similarity index 100%
rename from client/src/containers/Sales/Receipt/ReceiptFormProvider.js
rename to client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormProvider.js
diff --git a/client/src/containers/Sales/Receipt/ReceiptNumberWatcher.js b/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptNumberWatcher.js
similarity index 100%
rename from client/src/containers/Sales/Receipt/ReceiptNumberWatcher.js
rename to client/src/containers/Sales/Receipts/ReceiptForm/ReceiptNumberWatcher.js
diff --git a/client/src/containers/Sales/Receipt/ReceiptsAlerts.js b/client/src/containers/Sales/Receipts/ReceiptsAlerts.js
similarity index 100%
rename from client/src/containers/Sales/Receipt/ReceiptsAlerts.js
rename to client/src/containers/Sales/Receipts/ReceiptsAlerts.js
diff --git a/client/src/containers/Sales/Receipt/ReceiptActionsBar.js b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.js
similarity index 88%
rename from client/src/containers/Sales/Receipt/ReceiptActionsBar.js
rename to client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.js
index ff411b79b..7df20bf4d 100644
--- a/client/src/containers/Sales/Receipt/ReceiptActionsBar.js
+++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.js
@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState } from 'react';
 import Icon from 'components/Icon';
 import {
   Button,
@@ -16,11 +16,9 @@ import { useHistory } from 'react-router-dom';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 
 import { If, DashboardActionViewsList } from 'components';
-import FilterDropdown from 'components/FilterDropdown';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
-
-import withReceiptActions from './withReceiptActions';
+import withReceiptsActions from './withReceiptsActions';
 import { useReceiptsListContext } from './ReceiptsListProvider';
 
 import { compose } from 'utils';
@@ -29,27 +27,29 @@ import { compose } from 'utils';
  * Receipts actions bar.
  */
 function ReceiptActionsBar({
-  //#withReceiptActions
-  addReceiptsTableQueries,
+  // #withReceiptsActions
+  setReceiptsTableState,
 }) {
   const history = useHistory();
   const { formatMessage } = useIntl();
-  
+
   const [filterCount, setFilterCount] = useState(0);
 
   // Sale receipts list context.
   const { receiptsViews } = useReceiptsListContext();
 
+  // Handle new receipt button click.
   const onClickNewReceipt = () => {
     history.push('/receipts/new');
   };
- 
+
+  // Handle the active tab change.
   const handleTabChange = (viewId) => {
-    addReceiptsTableQueries({
-      custom_view_id: viewId.id || null,
+    setReceiptsTableState({
+      csutomViewId: viewId.id || null,
     });
   };
- 
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -113,6 +113,4 @@ function ReceiptActionsBar({
   );
 }
 
-export default compose(
-  withReceiptActions,
-)(ReceiptActionsBar);
+export default compose(withReceiptsActions)(ReceiptActionsBar);
diff --git a/client/src/containers/Sales/Receipt/ReceiptViewTabs.js b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptViewTabs.js
similarity index 54%
rename from client/src/containers/Sales/Receipt/ReceiptViewTabs.js
rename to client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptViewTabs.js
index 8be8a2871..079b73699 100644
--- a/client/src/containers/Sales/Receipt/ReceiptViewTabs.js
+++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptViewTabs.js
@@ -1,31 +1,35 @@
 import React from 'react';
-import { useHistory } from 'react-router';
 import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
-import { useParams } from 'react-router-dom';
 import { pick } from 'lodash';
 
 import { DashboardViewsTabs } from 'components';
-
-import withReceiptActions from './withReceiptActions';
+import withReceiptActions from './withReceiptsActions';
+import withReceipts from './withReceipts';
 
 import { compose } from 'utils';
 import { useReceiptsListContext } from './ReceiptsListProvider';
 
 /**
- * Receipt views tabs.
+ * Receipts views tabs.
  */
-function ReceiptViewTabs({ addReceiptsTableQueries }) {
-  const { custom_view_id: customViewId = null } = useParams();
+function ReceiptViewTabs({
+  // #withReceiptActions
+  setReceiptsTableState,
 
+  // #withReceipts
+  receiptTableState
+}) {
+  // Receipts list context.
   const { receiptsViews } = useReceiptsListContext();
 
   const tabs = receiptsViews.map((view) => ({
     ...pick(view, ['name', 'id']),
   }));
 
-  const handleTabsChange = (viewId) => {
-    addReceiptsTableQueries({
-      custom_view_id: viewId || null,
+  // Handles the active tab chaning.
+  const handleTabsChange = (customView) => {
+    setReceiptsTableState({
+      customViewId: customView.id || null,
     });
   };
 
@@ -33,7 +37,7 @@ function ReceiptViewTabs({ addReceiptsTableQueries }) {
     <Navbar className={'navbar--dashboard-views'}>
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
-          initialViewId={customViewId}
+          initialViewId={receiptTableState.customViewId}
           tabs={tabs}
           resourceName={'receipts'}
           onChange={handleTabsChange}
@@ -43,4 +47,7 @@ function ReceiptViewTabs({ addReceiptsTableQueries }) {
   );
 }
 
-export default compose(withReceiptActions)(ReceiptViewTabs);
+export default compose(
+  withReceiptActions,
+  withReceipts(({ receiptTableState }) => ({ receiptTableState })),
+)(ReceiptViewTabs);
diff --git a/client/src/containers/Sales/Receipt/ReceiptsEmptyStatus.js b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsEmptyStatus.js
similarity index 100%
rename from client/src/containers/Sales/Receipt/ReceiptsEmptyStatus.js
rename to client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsEmptyStatus.js
diff --git a/client/src/containers/Sales/Receipt/ReceiptsList.js b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsList.js
similarity index 62%
rename from client/src/containers/Sales/Receipt/ReceiptsList.js
rename to client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsList.js
index e97e374a1..dd6ba7639 100644
--- a/client/src/containers/Sales/Receipt/ReceiptsList.js
+++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsList.js
@@ -4,15 +4,16 @@ import { useIntl } from 'react-intl';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 
 import ReceiptActionsBar from './ReceiptActionsBar';
-import ReceiptsViewPage from './ReceiptsViewPage';
-import ReceiptsAlerts from './ReceiptsAlerts';
+import ReceiptViewTabs from './ReceiptViewTabs';
+import ReceiptsAlerts from '../ReceiptsAlerts';
+import ReceiptsTable from './ReceiptsTable';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withReceipts from './withReceipts';
 
 import { ReceiptsListProvider } from './ReceiptsListProvider';
 
-import { compose } from 'utils';
+import { transformTableStateToQuery, compose } from 'utils';
 
 /**
  * Receipts list page.
@@ -22,20 +23,25 @@ function ReceiptsList({
   changePageTitle,
 
   // #withReceipts
-  receiptTableQuery,
+  receiptTableState,
 }) {
   const { formatMessage } = useIntl();
 
+  // Changes the dashboard page title once the page mount.
   useEffect(() => {
     changePageTitle(formatMessage({ id: 'receipts_list' }));
   }, [changePageTitle, formatMessage]);
 
   return (
-    <ReceiptsListProvider query={receiptTableQuery}>
+    <ReceiptsListProvider query={transformTableStateToQuery(receiptTableState)}>
       <DashboardPageContent>
         <ReceiptActionsBar />
 
-        <ReceiptsViewPage />
+        <DashboardPageContent>
+          <ReceiptViewTabs />
+          <ReceiptsTable />
+        </DashboardPageContent>
+
         <ReceiptsAlerts />
       </DashboardPageContent>
     </ReceiptsListProvider>
@@ -44,7 +50,7 @@ function ReceiptsList({
 
 export default compose(
   withDashboardActions,
-  withReceipts(({ receiptTableQuery }) => ({
-    receiptTableQuery,
+  withReceipts(({ receiptTableState }) => ({
+    receiptTableState,
   })),
 )(ReceiptsList);
diff --git a/client/src/containers/Sales/Receipt/ReceiptsListProvider.js b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsListProvider.js
similarity index 72%
rename from client/src/containers/Sales/Receipt/ReceiptsListProvider.js
rename to client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsListProvider.js
index c48618b99..5c0668b5a 100644
--- a/client/src/containers/Sales/Receipt/ReceiptsListProvider.js
+++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsListProvider.js
@@ -1,7 +1,7 @@
 import React, { createContext } from 'react';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import { useResourceViews, useResourceFields, useReceipts } from 'hooks/query';
-
+import { isTableEmptyStatus } from 'utils';
 
 const ReceiptsListContext = createContext();
 
@@ -19,9 +19,18 @@ function ReceiptsListProvider({ query, ...props }) {
   // } = useResourceFields('sale_receipt');
 
   const {
-    data: { receipts, pagination },
-    isFetching: isReceiptsLoading,
-  } = useReceipts(query);
+    data: { receipts, pagination, filterMeta },
+    isLoading: isReceiptsLoading,
+    isFetching: isReceiptsFetching,
+  } = useReceipts(query, { keepPreviousData: true });
+  
+  // Detarmines the datatable empty status.
+  const isEmptyStatus =
+    isTableEmptyStatus({
+      data: receipts,
+      pagination,
+      filterMeta,
+    }) && !isReceiptsLoading;
 
   const provider = {
     receipts,
@@ -31,6 +40,8 @@ function ReceiptsListProvider({ query, ...props }) {
     isViewsLoading,
     // isFieldsLoading,
     isReceiptsLoading,
+    isReceiptsFetching,
+    isEmptyStatus
   };
 
   return (
diff --git a/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js
new file mode 100644
index 000000000..a782f35d4
--- /dev/null
+++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js
@@ -0,0 +1,126 @@
+import React, { useCallback } from 'react';
+import classNames from 'classnames';
+import { useHistory } from 'react-router-dom';
+
+import { compose } from 'utils';
+import { CLASSES } from 'common/classes';
+import { DataTable } from 'components';
+
+import ReceiptsEmptyStatus from './ReceiptsEmptyStatus';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withReceipts from './withReceipts';
+import withReceiptsActions from './withReceiptsActions';
+import withSettings from 'containers/Settings/withSettings';
+
+import { useReceiptsListContext } from './ReceiptsListProvider';
+import { useReceiptsTableColumns, ActionsMenu } from './components';
+
+/**
+ * Sale receipts datatable.
+ */
+function ReceiptsDataTable({
+  // #withReceiptsActions
+  setReceiptsTableState,
+
+  // #withSettings
+  baseCurrency,
+
+  // #withAlertsActions
+  openAlert
+}) {
+  const history = useHistory();
+
+  // Receipts list context.
+  const {
+    receipts,
+    pagination,
+    isReceiptsFetching,
+    isReceiptsLoading,
+    isEmptyStatus
+  } = useReceiptsListContext();
+
+  // Receipts table columns.
+  const columns = useReceiptsTableColumns();
+
+  // Handle receipt edit action.
+  const handleEditReceipt = ({ id }) => {
+    history.push(`/receipts/${id}/edit`);
+  };
+
+  // Handles receipt delete action.
+  const handleDeleteReceipt = (receipt) => {
+    openAlert('receipt-delete', { receiptId: receipt.id });
+  };
+
+  // Handles receipt close action.
+  const handleCloseReceipt = (receipt) => {
+    openAlert('receipt-close', { receiptId: receipt.id });
+  }
+
+  // Handles the datable fetch data once the state changing.
+  const handleDataTableFetchData = useCallback(
+    ({ sortBy, pageIndex, pageSize }) => {
+      setReceiptsTableState({
+        pageIndex,
+        pageSize,
+        sortBy,
+      });
+    },
+    [setReceiptsTableState],
+  );
+
+  if (isEmptyStatus) {
+    return <ReceiptsEmptyStatus />
+  }
+
+  return (
+    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
+      <DataTable
+        columns={columns}
+        data={receipts}
+
+        loading={isReceiptsLoading}
+        headerLoading={isReceiptsLoading}
+        progressBarLoading={isReceiptsFetching}
+
+        onFetchData={handleDataTableFetchData}
+        manualSortBy={true}
+        selectionColumn={true}
+        noInitialFetch={true}
+        sticky={true}
+        pagination={true}
+        pagesCount={pagination.pagesCount}
+
+        manualPagination={true}
+
+        autoResetSortBy={false}
+        autoResetPage={false}
+
+        TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
+
+        payload={{
+          onEdit: handleEditReceipt,
+          onDelete: handleDeleteReceipt,
+          onClose: handleCloseReceipt,
+          baseCurrency
+        }}
+      />
+    </div>
+  );
+}
+
+export default compose(
+  withAlertsActions,
+  withReceiptsActions,
+  withReceipts(({ receiptTableState }) => ({
+    receiptTableState,
+  })),
+  withSettings(({ organizationSettings }) => ({
+    baseCurrency: organizationSettings?.baseCurrency,
+  })),
+)(ReceiptsDataTable);
diff --git a/client/src/containers/Sales/Receipts/ReceiptsLanding/components.js b/client/src/containers/Sales/Receipts/ReceiptsLanding/components.js
new file mode 100644
index 000000000..12ac79e9a
--- /dev/null
+++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/components.js
@@ -0,0 +1,155 @@
+import React from 'react';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import {
+  Position,
+  Menu,
+  MenuItem,
+  MenuDivider,
+  Intent,
+  Popover,
+  Tag,
+  Button,
+} from '@blueprintjs/core';
+import { safeCallback } from 'utils';
+import { Choose, Money, Icon, If } from 'components';
+import moment from 'moment';
+
+export function ActionsMenu({
+  payload: { onEdit, onDelete, onClose },
+  row: { original: receipt },
+}) {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="reader-18" />}
+        text={formatMessage({ id: 'view_details' })}
+      />
+      <MenuDivider />
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={formatMessage({ id: 'edit_receipt' })}
+        onClick={safeCallback(onEdit, receipt)}
+      />
+      <If condition={!receipt.is_closed}>
+        <MenuItem
+          text={formatMessage({ id: 'mark_as_closed' })}
+          onClick={safeCallback(onClose, receipt)}
+        />
+      </If>
+      <MenuItem
+        text={formatMessage({ id: 'delete_receipt' })}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, receipt)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * Actions cell.
+ */
+export function ActionsCell(props) {
+  return (
+    <Popover
+      content={<ActionsMenu {...props} />}
+      position={Position.RIGHT_BOTTOM}
+    >
+      <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
+    </Popover>
+  );
+}
+
+/**
+ * Status accessor.
+ */
+export function StatusAccessor(receipt) {
+  return (
+    <Choose>
+      <Choose.When condition={receipt.is_closed}>
+        <Tag minimal={true} intent={Intent.SUCCESS}>
+          <T id={'closed'} />
+        </Tag>
+      </Choose.When>
+
+      <Choose.Otherwise>
+        <Tag minimal={true} intent={Intent.WARNING}>
+          <T id={'draft'} />
+        </Tag>
+      </Choose.Otherwise>
+    </Choose>
+  );
+}
+
+/**
+ * Retrieve receipts table columns.
+ */
+export function useReceiptsTableColumns() {
+  const { formatMessage } = useIntl();
+
+  return React.useMemo(
+    () => [
+      {
+        id: 'receipt_date',
+        Header: formatMessage({ id: 'receipt_date' }),
+        accessor: (r) => moment(r.receipt_date).format('YYYY MMM DD'),
+        width: 140,
+        className: 'receipt_date',
+      },
+      {
+        id: 'customer_id',
+        Header: formatMessage({ id: 'customer_name' }),
+        accessor: 'customer.display_name',
+        width: 140,
+        className: 'customer_id',
+      },
+      {
+        id: 'receipt_number',
+        Header: formatMessage({ id: 'receipt_number' }),
+        accessor: (row) =>
+          row.receipt_number ? `#${row.receipt_number}` : null,
+        width: 140,
+        className: 'receipt_number',
+      },
+      {
+        id: 'deposit_account_id',
+        Header: formatMessage({ id: 'deposit_account' }),
+        accessor: 'deposit_account.name',
+        width: 140,
+        className: 'deposit_account',
+      },
+      {
+        id: 'amount',
+        Header: formatMessage({ id: 'amount' }),
+        accessor: (r) => <Money amount={r.amount} currency={'USD'} />,
+        width: 140,
+        className: 'amount',
+      },
+      {
+        id: 'status',
+        Header: formatMessage({ id: 'status' }),
+        accessor: StatusAccessor,
+        width: 140,
+        className: 'amount',
+      },
+      {
+        id: 'reference_no',
+        Header: formatMessage({ id: 'reference_no' }),
+        accessor: 'reference_no',
+        width: 140,
+        className: 'reference_no',
+      },
+      {
+        id: 'actions',
+        Header: '',
+        Cell: ActionsCell,
+        className: 'actions',
+        width: 50,
+        disableResizing: true,
+      },
+    ],
+    [formatMessage],
+  );
+}
diff --git a/client/src/containers/Sales/Receipts/ReceiptsLanding/withReceipts.js b/client/src/containers/Sales/Receipts/ReceiptsLanding/withReceipts.js
new file mode 100644
index 000000000..312a83338
--- /dev/null
+++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/withReceipts.js
@@ -0,0 +1,16 @@
+  import { connect } from 'react-redux';
+import {
+  getReceiptsTableStateFactory,
+} from 'store/receipts/receipts.selector';
+
+export default (mapState) => {
+  const getReceiptsTableState = getReceiptsTableStateFactory();
+
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      receiptTableState: getReceiptsTableState(state, props),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};
diff --git a/client/src/containers/Sales/Receipts/ReceiptsLanding/withReceiptsActions.js b/client/src/containers/Sales/Receipts/ReceiptsLanding/withReceiptsActions.js
new file mode 100644
index 000000000..4fc165973
--- /dev/null
+++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/withReceiptsActions.js
@@ -0,0 +1,8 @@
+import { connect } from 'react-redux';
+import { setReceiptsTableState } from 'store/receipts/receipts.actions';
+
+const mapDispatchToProps = (dispatch) => ({
+  setReceiptsTableState: (queries) => dispatch(setReceiptsTableState(queries)),
+});
+
+export default connect(null, mapDispatchToProps);
diff --git a/client/src/hooks/query/bills.js b/client/src/hooks/query/bills.js
index 998b6aebd..74a45ba8d 100644
--- a/client/src/hooks/query/bills.js
+++ b/client/src/hooks/query/bills.js
@@ -1,14 +1,7 @@
 import { useQueryClient, useQuery, useMutation } from 'react-query';
+import { defaultTo } from 'lodash';
 import ApiService from 'services/ApiService';
-
-// Bills transformer.
-const billsTransformer = (response) => {
-  return {
-    bills: response.data.bills,
-    pagination: response.data.pagination,
-    filterMeta: response.data.filter_meta,
-  };
-};
+import { transformPagination } from 'utils';
 
 /**
  * Creates a new sale invoice.
@@ -19,6 +12,7 @@ export function useCreateBill(props) {
   return useMutation((values) => ApiService.post('purchases/bills', values), {
     onSuccess: () => {
       queryClient.invalidateQueries('BILLS');
+      queryClient.invalidateQueries('BILL');
     },
     ...props,
   });
@@ -35,6 +29,7 @@ export function useEditBill(props) {
     {
       onSuccess: () => {
         queryClient.invalidateQueries('BILLS');
+        queryClient.invalidateQueries('BILL');
       },
       ...props,
     },
@@ -50,6 +45,7 @@ export function useDeleteBill(props) {
   return useMutation((id) => ApiService.delete(`purchases/bills/${id}`), {
     onSuccess: () => {
       queryClient.invalidateQueries('BILLS');
+      queryClient.invalidateQueries('BILL');
     },
     ...props,
   });
@@ -59,24 +55,32 @@ export function useDeleteBill(props) {
  * Retrieve sale invoices list with pagination meta.
  */
 export function useBills(query, props) {
-  return useQuery(
+  const states = useQuery(
     ['BILLS', query],
     () =>
-      ApiService.get('purchases/bills', { params: query }).then(
-        billsTransformer,
-      ),
+      ApiService.get('purchases/bills', { params: query }),
     {
-      initialData: {
-        bills: [],
-        pagination: {
-          page: 1,
-          page_size: 12,
-          total: 0,
-        },
-      },
+      select: (response) => ({
+        bills: response.data.bills,
+        pagination: transformPagination(response.data.pagination),
+        filterMeta: response.data.filter_meta,
+      }),
       ...props,
     },
   );
+
+  return {
+    ...states,
+    data: defaultTo(states.data, {
+      bills: [],
+      pagination: {
+        page: 1,
+        page_size: 12,
+        total: 0,
+      },
+      filterMeta: {},
+    })
+  }
 }
 
 /**
@@ -84,17 +88,16 @@ export function useBills(query, props) {
  * @param {number} id - Bill id.
  */
 export function useBill(id, props) {
-  return useQuery(
+  const states = useQuery(
     ['BILL', id],
-    async () => {
-      const { data } = await ApiService.get(`/purchases/bills/${id}`);
-      return data.bill;
-    },
+    () => ApiService.get(`/purchases/bills/${id}`),
     {
-      initialData: {},
+      select: (res) => res.data.bill,
       ...props,
-    },
+    }
   );
+
+  return defaultTo(states.data, {});
 }
 
 /**
diff --git a/client/src/hooks/query/estimates.js b/client/src/hooks/query/estimates.js
index eb2d3e7b9..bd5a90893 100644
--- a/client/src/hooks/query/estimates.js
+++ b/client/src/hooks/query/estimates.js
@@ -1,12 +1,7 @@
 import { useQueryClient, useQuery, useMutation } from 'react-query';
+import { defaultTo } from 'lodash';
 import ApiService from 'services/ApiService';
-
-const invoicesTransformer = (response) => {
-  return {
-    estimates: response.data.sale_invoices,
-    pagination: response.data.pagination,
-  };
-};
+import { transformPagination } from 'utils';
 
 /**
  * Creates a new sale estimate.
@@ -29,7 +24,7 @@ export function useEditEstimate(props) {
   const queryClient = useQueryClient();
 
   return useMutation(
-    (id, values) => ApiService.post(`sales/estimates/${id}`, values),
+    ([id, values]) => ApiService.post(`sales/estimates/${id}`, values),
     {
       onSuccess: () => {
         queryClient.invalidateQueries('SALE_ESTIMATES');
@@ -39,6 +34,37 @@ export function useEditEstimate(props) {
   );
 }
 
+/**
+ * Retrieve sale invoices list with pagination meta.
+ */
+export function useEstimates(query, props) {
+  const states = useQuery(
+    ['SALE_ESTIMATES', query],
+    () => ApiService.get('sales/estimates', { params: query }),
+    {
+      select: (res) => ({
+        estimates: res.data.sales_estimates,
+        pagination: transformPagination(res.data.pagination),
+        filterMeta: res.data.filter_meta,
+      }),
+      ...props,
+    },
+  );
+
+  return {
+    ...states,
+    data: defaultTo(states.data, {
+      estimates: [],
+      pagination: {
+        page: 1,
+        pageSize: 12,
+        total: 0,
+      },
+      filterMeta: {},
+    }),
+  };
+}
+
 /**
  * Deletes the given sale invoice.
  */
@@ -53,30 +79,6 @@ export function useDeleteEstimate(props) {
   });
 }
 
-/**
- * Retrieve sale invoices list with pagination meta.
- */
-export function useEstimates(query, props) {
-  return useQuery(
-    ['SALE_INVOICES', query],
-    () =>
-      ApiService.get('sales/estimates', { params: query }).then(
-        invoicesTransformer,
-      ),
-    {
-      initialData: {
-        saleEstimates: [],
-        pagination: {
-          page: 1,
-          page_size: 12,
-          total: 0,
-        },
-      },
-      ...props,
-    },
-  );
-}
-
 /**
  * Mark the given estimate as delivered.
  */
@@ -84,7 +86,7 @@ export function useDeliverEstimate(props) {
   const queryClient = useQueryClient();
 
   return useMutation(
-    (id) => ApiService.delete(`sales/estimates/${id}/deliver`),
+    (id) => ApiService.post(`sales/estimates/${id}/deliver`),
     {
       onSuccess: () => {
         queryClient.invalidateQueries('SALE_ESTIMATES');
@@ -101,7 +103,7 @@ export function useApproveEstimate(props) {
   const queryClient = useQueryClient();
 
   return useMutation(
-    (id) => ApiService.delete(`sales/estimates/${id}/deliver`),
+    (id) => ApiService.post(`sales/estimates/${id}/approve`),
     {
       onSuccess: () => {
         queryClient.invalidateQueries('SALE_ESTIMATES');
@@ -118,7 +120,7 @@ export function useRejectEstimate(props) {
   const queryClient = useQueryClient();
 
   return useMutation(
-    (id) => ApiService.delete(`sales/estimates/${id}/reject`),
+    (id) => ApiService.post(`sales/estimates/${id}/reject`),
     {
       onSuccess: () => {
         queryClient.invalidateQueries('SALE_ESTIMATES');
diff --git a/client/src/hooks/query/financialReports.js b/client/src/hooks/query/financialReports.js
index 8bfd01fd8..34f988a69 100644
--- a/client/src/hooks/query/financialReports.js
+++ b/client/src/hooks/query/financialReports.js
@@ -1,4 +1,5 @@
 import { useQuery } from 'react-query';
+import { defaultTo } from 'lodash';
 import ApiService from 'services/ApiService';
 import {
   trialBalanceSheetReducer,
@@ -7,134 +8,154 @@ import {
   generalLedgerTableRowsReducer,
   journalTableRowsReducer,
 } from 'containers/FinancialStatements/reducers';
-
-const transformBalanceSheet = (response) => {
-  return {
-    tableRows: balanceSheetRowsReducer(response.data.data),
-    ...response.data,
-  };
-};
-
-const transformTrialBalance = (response) => {
-  return {
-    tableRows: trialBalanceSheetReducer(response.data.data),
-    ...response.data,
-  };
-};
-
-const transformProfitLoss = (response) => {
-  return {
-    tableRows: profitLossSheetReducer(response.data.data),
-    ...response.data,
-  };
-};
-
-const transformGeneralLedger = (response) => {
-  return {
-    tableRows: generalLedgerTableRowsReducer(response.data.data),
-    ...response.data,
-  };
-};
-
-const transformJournal = (response) => {
-  return {
-    tableRows: journalTableRowsReducer(response.data.data),
-    ...response.data,
-  };
-};
-
+ 
+/**
+ * Retrieve balance sheet.
+ */
 export function useBalanceSheet(query, props) {
-  return useQuery(
+  const states = useQuery(
     ['FINANCIAL-REPORT', 'BALANCE-SHEET', query],
     () =>
       ApiService.get('/financial_statements/balance_sheet', {
         params: query,
-      }).then(transformBalanceSheet),
+      }),
     {
-      initialData: {
-        data: [],
-        columns: [],
-        query: {},
-        tableRows: [],
-      },
-      ...props,
+      select: (res) => ({
+        tableRows: balanceSheetRowsReducer(res.data.data),
+        ...res.data,
+      }),
+      ...props
     },
   );
+
+  return {
+    ...states,
+    data: defaultTo(states.data, {
+      data: [],
+      columns: [],
+      query: {},
+      tableRows: [],
+    }),
+  };
 }
 
+/**
+ * Retrieve trial balance sheet.
+ */
 export function useTrialBalanceSheet(query, props) {
-  return useQuery(
+  const states = useQuery(
     ['FINANCIAL-REPORT', 'TRIAL-BALANCE-SHEET', query],
     () =>
       ApiService.get('/financial_statements/trial_balance_sheet', {
         params: query,
-      }).then(transformTrialBalance),
+      }),
     {
-      initialData: {
-        tableRows: [],
-        data: [],
-        query: {},
-      },
+      select: (res) => ({
+        tableRows: trialBalanceSheetReducer(res.data.data),
+        ...res.data,
+      }),
       ...props,
     },
   );
+
+  return {
+    ...states,
+    data: defaultTo(states.data, {
+      tableRows: [],
+      data: [],
+      query: {},
+    })
+  }
 }
 
+/**
+ * Retrieve profit/loss (P&L) sheet.
+ */
 export function useProfitLossSheet(query, props) {
-  return useQuery(
+  const states = useQuery(
     ['FINANCIAL-REPORT', 'PROFIT-LOSS-SHEET', query],
     () =>
       ApiService.get('/financial_statements/profit_loss_sheet', {
         params: query,
-      }).then(transformProfitLoss),
+      }),
     {
-      initialData: {
-        data: {},
-        tableRows: [],
-        columns: [],
-        query: {},
-      },
+      select: (res) => ({
+        tableRows: profitLossSheetReducer(res.data.data),
+        ...res.data,
+      }),
       ...props,
     },
   );
+  return {
+    ...states,
+    data: defaultTo(states.data, {
+      data: {},
+      tableRows: [],
+      columns: [],
+      query: {},
+    }),
+  }
 }
 
+/**
+ * Retrieve general ledger (GL) sheet.
+ */
 export function useGeneralLedgerSheet(query, props) {
-  return useQuery(
+  const states = useQuery(
     ['FINANCIAL-REPORT', 'GENERAL-LEDGER', query],
     () =>
       ApiService.get('/financial_statements/general_ledger', {
         params: query,
-      }).then(transformGeneralLedger),
+      }),
     {
-      initialData: {
-        tableRows: [],
-        data: {},
-        query: {}
-      },
-      ...props
+      select: (res) => ({
+        tableRows: generalLedgerTableRowsReducer(res.data.data),
+        ...res.data,
+      }),
+      ...props,
     },
   );
+
+  return {
+    ...states,
+    data: defaultTo(states.data, {
+      tableRows: [],
+      data: {},
+      query: {},
+    }),
+  }
 }
 
+/**
+ * Retrieve journal sheet.
+ */
 export function useJournalSheet(query, props) {
-  return useQuery(
+  const states = useQuery(
     ['FINANCIAL-REPORT', 'JOURNAL', query],
     () =>
-      ApiService.get('/financial_statements/journal', { params: query }).then(
-        transformJournal,
-      ),
+      ApiService.get('/financial_statements/journal', { params: query }),
     {
-      initialData: {
-        data: {},
-        tableRows: [],
-        query: {},
-      },
-      ...props
+      select: (res) => ({
+        tableRows: journalTableRowsReducer(res.data.data),
+       ...res.data,
+      }),
+      ...props,
     },
   );
+
+  return {
+    ...states,
+    data: defaultTo(states.data, {
+      data: {},
+      tableRows: [],
+      query: {},
+    })
+  }
 }
 
+/**
+ * Retrieve AR aging summary report.
+ */
 export function useARAgingSummaryReport(query, props) {
   return useQuery(
     ['FINANCIAL-REPORT', 'AR-AGING-SUMMARY', query],
diff --git a/client/src/hooks/query/invoices.js b/client/src/hooks/query/invoices.js
index 213b923d2..53b6a7383 100644
--- a/client/src/hooks/query/invoices.js
+++ b/client/src/hooks/query/invoices.js
@@ -1,20 +1,8 @@
+import { defaultTo } from 'lodash';
 import { useQueryClient, useQuery, useMutation } from 'react-query';
 import ApiService from 'services/ApiService';
+import { transformPagination } from 'utils';
 
-// Invoices transformer.
-const invoicesTransformer = (response) => {
-  return {
-    invoices: response.data.sales_invoices,
-    pagination: response.data.pagination,
-    filterMeta: response.data.filter_meta,
-  };
-};
-
-const invoiceTransformer = (response) => {
-  return {
-    invoice: response.data.invoice,
-  }
-}
 /**
  * Creates a new sale invoice.
  */
@@ -64,24 +52,31 @@ export function useDeleteInvoice(props) {
  * Retrieve sale invoices list with pagination meta.
  */
 export function useInvoices(query, props) {
-  return useQuery(
+  const states = useQuery(
     ['SALE_INVOICES', query],
-    () =>
-      ApiService.get('sales/invoices', { params: query }).then(
-        invoicesTransformer,
-      ),
+    () => ApiService.get('sales/invoices', { params: query }),
     {
-      initialData: {
-        saleInvoices: [],
-        pagination: {
-          page: 1,
-          page_size: 12,
-          total: 0,
-        },
-      },
+      select: (res) => ({
+        invoices: res.data.sales_invoices,
+        pagination: transformPagination(res.data.pagination),
+        filterMeta: res.data.filter_meta,
+      }),
       ...props,
     },
   );
+
+  return {
+    ...states,
+    data: defaultTo(states.data, {
+      invoices: [],
+      pagination: {
+        page: 1,
+        pageSize: 12,
+        total: 0,
+      },
+      filterMeta: {},
+    })
+  }
 }
 
 /**
@@ -105,11 +100,16 @@ export function useDeliverInvoice(props) {
  * Retrieve the sale invoice details.
  */
 export function useInvoice(id, props) {
-  return useQuery(['SALE_INVOICE', id], () =>
-    ApiService.get(`sales/invoices/${id}`).then(invoiceTransformer),
+  const states = useQuery(['SALE_INVOICE', id], () =>
+    ApiService.get(`sales/invoices/${id}`),
     {
-      initialData: {},
+      select: (res) => res.data.invoice,
       ...props
-    }
+    },
   );
+
+  return {
+    ...states,
+    data: defaultTo(states.data, {}),
+  };
 }
diff --git a/client/src/hooks/query/paymentMades.js b/client/src/hooks/query/paymentMades.js
index 20b7cd687..4cdd7866e 100644
--- a/client/src/hooks/query/paymentMades.js
+++ b/client/src/hooks/query/paymentMades.js
@@ -1,25 +1,33 @@
+import { defaultTo } from 'lodash';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import ApiService from 'services/ApiService';
-
-const transformPaymentMades = (response) => {
-  return {};
-};
+import { transformPagination } from 'utils';
 
 /**
  * Retrieve payment mades list.
  */
 export function usePaymentMades(query, props) {
-  return useQuery(
+  const states = useQuery(
     ['PAYMENT_MADES', query],
-    () =>
-      ApiService.get('sales/payment_mades', { params: query }).then(
-        transformPaymentMades,
-      ),
+    () => ApiService.get('purchases/bill_payments', { params: query }),
     {
-      initialData: [],
+      select: (res) => ({
+        paymentMades: res.data.bill_payments,
+        pagination: transformPagination(res.data.pagination),
+        filterMeta: res.data.filter_meta,
+      }),
       ...props,
     },
   );
+
+  return {
+    ...states,
+    data: defaultTo(states.data, {
+      paymentMades: [],
+      pagination: {},
+      filterMeta: {}
+    }),
+  };
 }
 
 /**
@@ -29,7 +37,7 @@ export function useCreatePaymentMade(props) {
   const client = useQueryClient();
 
   return useMutation(
-    (values) => ApiService.post('sales/payment_mades', values),
+    (values) => ApiService.post('purchases/bill_payments', values),
     {
       onSuccess: () => {
         client.invalidateQueries('PAYMENT_MADES');
@@ -46,7 +54,7 @@ export function useEditPaymentMade(props) {
   const client = useQueryClient();
 
   return useMutation(
-    (id, values) => ApiService.post(`sales/payment_mades/${id}`, values),
+    (id, values) => ApiService.post(`purchases/bill_payments/${id}`, values),
     {
       onSuccess: () => {
         client.invalidateQueries('PAYMENT_MADES');
@@ -63,7 +71,7 @@ export function useDeletePaymentMade(props) {
   const client = useQueryClient();
 
   return useMutation(
-    (id, values) => ApiService.delete(`sales/payment_mades/${id}`, values),
+    (id, values) => ApiService.delete(`purchases/bill_payments/${id}`, values),
     {
       onSuccess: () => {
         client.invalidateQueries('PAYMENT_MADES');
@@ -77,15 +85,14 @@ export function useDeletePaymentMade(props) {
  * Retrieve specific payment made.
  */
 export function usePaymentMade(id, props) {
-  return useQuery(
+  const states = useQuery(
     ['PAYMENT_MADE', id],
-    () =>
-      ApiService.get(`sales/payment_mades/${id}`).then(
-        transformPaymentMades,
-      ),
-    {
-      initialData: [],
-      ...props,
-    },
+    () => ApiService.get(`purchases/bill_payments/${id}`),
+    props,
   );
+
+  return {
+    ...states,
+    data: defaultTo(states.data, {}),
+  };
 }
diff --git a/client/src/hooks/query/paymentReceives.js b/client/src/hooks/query/paymentReceives.js
index ca9379153..0c6da15bd 100644
--- a/client/src/hooks/query/paymentReceives.js
+++ b/client/src/hooks/query/paymentReceives.js
@@ -1,25 +1,37 @@
 import { useMutation, useQuery, useQueryClient } from 'react-query';
+import { defaultTo } from 'lodash';
 import ApiService from 'services/ApiService';
-
-const transformPaymentReceives = (response) => {
-  return {};
-};
+import { transformPagination } from 'utils';
 
 /**
  * Retrieve accounts list.
  */
 export function usePaymentReceives(query, props) {
-  return useQuery(
+  const states = useQuery(
     ['PAYMENT_RECEIVES', query],
-    () =>
-      ApiService.get('sales/payment_receives', { params: query }).then(
-        transformPaymentReceives,
-      ),
+    () => ApiService.get('sales/payment_receives', { params: query }),
     {
-      initialData: [],
+      select: (res) => ({
+        paymentReceives: res.data.payment_receives,
+        pagination: transformPagination(res.data.pagination),
+        filterMeta: res.data.filter_meta,
+      }),
       ...props,
     },
   );
+
+  return {
+    ...states,
+    data: defaultTo(states.data, {
+      paymentReceives: [],
+      pagination: {
+        page: 1,
+        pageSize: 12,
+        total: 0,
+      },
+      filterMeta: {},
+    }),
+  }
 }
 
 /**
@@ -77,15 +89,14 @@ export function useDeletePaymentReceive(props) {
  * Retrieve specific payment receive.
  */
 export function usePaymentReceive(id, props) {
-  return useQuery(
+  const states = useQuery(
     ['PAYMENT_RECEIVE', id],
-    () =>
-      ApiService.get(`sales/payment_receives/${id}`).then(
-        transformPaymentReceives,
-      ),
-    {
-      initialData: [],
-      ...props,
-    },
+    () => ApiService.get(`sales/payment_receives/${id}`),
+    props,
   );
+
+  return {
+    ...states,
+    data: defaultTo(states.data, {}),
+  }
 }
diff --git a/client/src/hooks/query/receipts.js b/client/src/hooks/query/receipts.js
index 23a244fd6..7c77450d9 100644
--- a/client/src/hooks/query/receipts.js
+++ b/client/src/hooks/query/receipts.js
@@ -1,18 +1,8 @@
 import { useQueryClient, useQuery, useMutation } from 'react-query';
+import { defaultTo } from 'lodash';
 import ApiService from 'services/ApiService';
+import { transformPagination } from 'utils';
 
-// Receipts transformer.
-const invoicesTransformer = (response) => {
-  return {
-    invoices: response.data.sales_invoices,
-    pagination: response.data.pagination,
-    filterMeta: response.data.filter_meta,
-  };
-};
-
-const receiptTransformer = (response) => {
-  return response.data;
-}
 /**
  * Creates a new sale invoice.
  */
@@ -76,39 +66,48 @@ export function useCloseReceipt(props) {
  * Retrieve sale invoices list with pagination meta.
  */
 export function useReceipts(query, props) {
-  return useQuery(
+  const states = useQuery(
     ['SALE_RECEIPTS', query],
-    () =>
-      ApiService
-        .get('sales/receipts', { params: query })
-        .then(invoicesTransformer),
+    () => ApiService.get('sales/receipts', { params: query }),
     {
-      initialData: {
-        saleReceipts: [],
-        pagination: {
-          page: 1,
-          page_size: 12,
-          total: 0,
-        },
-      },
+      select: (response) => ({
+        receipts: response.data.sale_receipts,
+        pagination: transformPagination(response.data.pagination),
+        filterMeta: response.data.filter_meta,
+      }),
       ...props,
     },
   );
+
+  return {
+    ...states,
+    data: defaultTo(states.data, {
+      receipts: [],
+      pagination: {
+        page: 1,
+        page_size: 12,
+        total: 0,
+      },
+      filterMeta: {},
+    }),
+  };
 }
 
 /**
  * Retrieve sale invoices list with pagination meta.
  */
 export function useReceipt(id, props) {
-  return useQuery(
+  const states = useQuery(
     ['SALE_RECEIPT', id],
-    () =>
-      ApiService
-        .get(`sales/receipts/${id}`)
-        .then(receiptTransformer),
+    () => ApiService.get(`sales/receipts/${id}`),
     {
-      initialData: {},
+      select: (res) => res.data.sale_receipt,
       ...props,
     },
   );
+
+  return {
+    ...states,
+    data: defaultTo(states.data, {}),
+  }
 }
diff --git a/client/src/routes/dashboard.js b/client/src/routes/dashboard.js
index 36d366664..14f5f9ca5 100644
--- a/client/src/routes/dashboard.js
+++ b/client/src/routes/dashboard.js
@@ -263,60 +263,60 @@ export default [
   //   breadcrumb: 'New Estimate',
   //   hotkey: 'ctrl+shift+e',
   // },
-  // {
-  //   path: `/estimates`,
-  //   component: LazyLoader({
-  //     loader: () => import('containers/Sales/Estimate/EstimatesList'),
-  //   }),
-  //   breadcrumb: 'Estimates List',
-  //   hotkey: 'shift+e',
-  // },
+  {
+    path: `/estimates`,
+    component: LazyLoader({
+      loader: () => import('containers/Sales/Estimates/EstimatesLanding/EstimatesList'),
+    }),
+    breadcrumb: 'Estimates List',
+    hotkey: 'shift+e',
+  },
 
   // Invoices.
-  {
-    path: `/invoices/:id/edit`,
-    component: LazyLoader({
-      loader: () => import('containers/Sales/Invoice/InvoiceFormPage'),
-    }),
-    breadcrumb: 'Edit',
-  },
-  {
-    path: `/invoices/new`,
-    component: LazyLoader({
-      loader: () => import('containers/Sales/Invoice/InvoiceFormPage'),
-    }),
-    breadcrumb: 'New Invoice',
-    hotkey: 'ctrl+shift+i',
-  },
+  // {
+  //   path: `/invoices/:id/edit`,
+  //   component: LazyLoader({
+  //     loader: () => import('containers/Sales/Invoice/InvoiceFormPage'),
+  //   }),
+  //   breadcrumb: 'Edit',
+  // },
+  // {
+  //   path: `/invoices/new`,
+  //   component: LazyLoader({
+  //     loader: () => import('containers/Sales/Invoice/InvoiceFormPage'),
+  //   }),
+  //   breadcrumb: 'New Invoice',
+  //   hotkey: 'ctrl+shift+i',
+  // },
   {
     path: `/invoices`,
     component: LazyLoader({
-      loader: () => import('containers/Sales/Invoice/InvoicesList'),
+      loader: () => import('containers/Sales/Invoices/InvoicesLanding/InvoicesList'),
     }),
     breadcrumb: 'Invoices List',
     hotkey: 'shift+i',
   },
 
   // Sales Receipts.
-  {
-    path: `/receipts/:id/edit`,
-    component: LazyLoader({
-      loader: () => import('containers/Sales/Receipt/ReceiptFormPage'),
-    }),
-    breadcrumb: 'Edit',
-  },
-  {
-    path: `/receipts/new`,
-    component: LazyLoader({
-      loader: () => import('containers/Sales/Receipt/ReceiptFormPage'),
-    }),
-    breadcrumb: 'New Receipt',
-    hotkey: 'ctrl+shift+r',
-  },
+  // {
+  //   path: `/receipts/:id/edit`,
+  //   component: LazyLoader({
+  //     loader: () => import('containers/Sales/Receipt/ReceiptFormPage'),
+  //   }),
+  //   breadcrumb: 'Edit',
+  // },
+  // {
+  //   path: `/receipts/new`,
+  //   component: LazyLoader({
+  //     loader: () => import('containers/Sales/Receipt/ReceiptFormPage'),
+  //   }),
+  //   breadcrumb: 'New Receipt',
+  //   hotkey: 'ctrl+shift+r',
+  // },
   {
     path: `/receipts`,
     component: LazyLoader({
-      loader: () => import('containers/Sales/Receipt/ReceiptsList'),
+      loader: () => import('containers/Sales/Receipts/ReceiptsLanding/ReceiptsList'),
     }),
     breadcrumb: 'Receipts List',
     hotkey: 'shift+r',
@@ -339,35 +339,35 @@ export default [
   //   }),
   //   breadcrumb: 'New Payment Receive',
   // },
-  // {
-  //   path: `/payment-receives`,
-  //   component: LazyLoader({
-  //     loader: () =>
-  //       import('containers/Sales/PaymentReceive/PaymentReceivesList'),
-  //   }),
-  //   breadcrumb: 'Payment Receives List',
-  // },
+  {
+    path: `/payment-receives`,
+    component: LazyLoader({
+      loader: () =>
+        import('containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceivesList'),
+    }),
+    breadcrumb: 'Payment Receives List',
+  },
 
   // Bills
-  {
-    path: `/bills/:id/edit`,
-    component: LazyLoader({
-      loader: () => import('containers/Purchases/Bill/BillFormPage'),
-    }),
-    breadcrumb: 'Edit',
-  },
-  {
-    path: `/bills/new`,
-    component: LazyLoader({
-      loader: () => import('containers/Purchases/Bill/BillFormPage'),
-    }),
-    breadcrumb: 'New Bill',
-    hotkey: 'ctrl+shift+b',
-  },
+  // {
+  //   path: `/bills/:id/edit`,
+  //   component: LazyLoader({
+  //     loader: () => import('containers/Purchases/Bill/BillFormPage'),
+  //   }),
+  //   breadcrumb: 'Edit',
+  // },
+  // {
+  //   path: `/bills/new`,
+  //   component: LazyLoader({
+  //     loader: () => import('containers/Purchases/Bill/BillFormPage'),
+  //   }),
+  //   breadcrumb: 'New Bill',
+  //   hotkey: 'ctrl+shift+b',
+  // },
   {
     path: `/bills`,
     component: LazyLoader({
-      loader: () => import('containers/Purchases/Bill/BillsList'),
+      loader: () => import('containers/Purchases/Bills/BillsLanding/BillsList'),
     }),
     breadcrumb: 'Bills List',
     hotkey: 'shift+b',
@@ -398,11 +398,11 @@ export default [
   //   }),
   //   breadcrumb: 'New Payment Made',
   // },
-  // {
-  //   path: `/payment-mades`,
-  //   component: LazyLoader({
-  //     loader: () => import('containers/Purchases/PaymentMades/PaymentMadeList'),
-  //   }),
-  //   breadcrumb: 'Payment Made List',
-  // }
+  {
+    path: `/payment-mades`,
+    component: LazyLoader({
+      loader: () => import('containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeList'),
+    }),
+    breadcrumb: 'Payment Made List',
+  }
 ];
diff --git a/client/src/store/Bills/bills.actions.js b/client/src/store/Bills/bills.actions.js
index 901f30826..7f0804c9e 100644
--- a/client/src/store/Bills/bills.actions.js
+++ b/client/src/store/Bills/bills.actions.js
@@ -1,152 +1,10 @@
-import ApiService from 'services/ApiService';
 import t from 'store/types';
 
-export const fetchBillsTable = ({ query = {} }) => {
-  return (dispatch, getState) =>
-    new Promise((resolve, rejcet) => {
-      const pageQuery = getState().bills.tableQuery;
-
-      dispatch({
-        type: t.BILLS_TABLE_LOADING,
-        payload: {
-          loading: true,
-        },
-      });
-      ApiService.get('purchases/bills', {
-        params: { ...pageQuery, ...query },
-      })
-        .then((response) => {
-          dispatch({
-            type: t.BILLS_PAGE_SET,
-            payload: {
-              bills: response.data.bills,
-              pagination: response.data.pagination,
-              customViewId:
-                response.data?.filter_meta?.view?.custom_view_id || -1,
-            },
-          });
-          dispatch({
-            type: t.BILLS_ITEMS_SET,
-            payload: {
-              bills: response.data.bills,
-            },
-          });
-          dispatch({
-            type: t.BILLS_PAGINATION_SET,
-            payload: {
-              pagination: response.data.pagination,
-              customViewId:
-                response.data?.filter_meta?.view?.custom_view_id || -1,
-            },
-          });
-          dispatch({
-            type: t.BILLS_TABLE_LOADING,
-            payload: {
-              loading: false,
-            },
-          });
-          resolve(response);
-        })
-        .catch((error) => {
-          rejcet(error);
-        });
-    });
+export const setBillsTableState = (queries) => {
+  return {
+    type: t.BILLS_TABLE_STATE_SET,
+    payload: { queries },
+  };
 };
 
-export const deleteBill = ({ id }) => {
-  return (dispatch) =>
-    new Promise((resovle, reject) => {
-      ApiService.delete(`purchases/bills/${id}`)
-        .then((response) => {
-          dispatch({ type: t.BILL_DELETE, payload: { id } });
-          resovle(response);
-        })
-        .catch((error) => {
-          reject(error.response.data.errors || []);
-        });
-    });
-};
-
-export const submitBill = ({ form }) => {
-  return (dispatch) =>
-    new Promise((resolve, reject) => {
-      ApiService.post('purchases/bills', form)
-        .then((response) => {
-          resolve(response);
-        })
-        .catch((error) => {
-          const { response } = error;
-          const { data } = response;
-
-          reject(data?.errors);
-        });
-    });
-};
-
-export const fetchBill = ({ id }) => {
-  return (dispatch) =>
-    new Promise((resovle, reject) => {
-      ApiService.get(`purchases/bills/${id}`)
-        .then((response) => {
-          const { bill } = response.data;
-
-          dispatch({
-            type: t.BILL_SET,
-            payload: { id, bill },
-          });
-          resovle(response);
-        })
-        .catch((error) => {
-          const { response } = error;
-          const { data } = response;
-          reject(data?.errors);
-        });
-    });
-};
-
-export const editBill = (id, form) => {
-  return (dispatch) =>
-    new Promise((resolve, reject) => {
-      ApiService.post(`purchases/bills/${id}`, form)
-        .then((response) => {
-          resolve(response);
-        })
-        .catch((error) => {
-          const { response } = error;
-          const { data } = response;
-
-          reject(data?.errors);
-        });
-    });
-};
-
-export const fetchDueBills = ({ vendorId }) => (dispatch) =>
-  new Promise((resolve, reject) => {
-    const params = { vendor_id: vendorId };
-
-    ApiService.get(`purchases/bills/due`, { params })
-      .then((response) => {
-        dispatch({
-          type: t.BILLS_ITEMS_SET,
-          payload: {
-            bills: response.data.bills,
-          },
-        });
-        if (vendorId) {
-          dispatch({
-            type: t.BILLS_PAYABLE_BY_VENDOR_ID,
-            payload: {
-              bills: response.data.bills,
-            },
-          });
-        }
-        resolve(response);
-      })
-      .catch((error) => {
-        reject(error);
-      });
-  });
-
-export const openBill = ({ id }) => {
-  return (dispatch) => ApiService.post(`purchases/bills/${id}/open`);
-};
+export const setSelectedRowsItems = () => {};
diff --git a/client/src/store/Bills/bills.reducer.js b/client/src/store/Bills/bills.reducer.js
index 4d524a203..70d4fd929 100644
--- a/client/src/store/Bills/bills.reducer.js
+++ b/client/src/store/Bills/bills.reducer.js
@@ -1,131 +1,15 @@
 import { createReducer } from '@reduxjs/toolkit';
 import {
-  createTableQueryReducers,
-  viewPaginationSetReducer,
-} from 'store/journalNumber.reducer';
-
-import t from 'store/types';
+  createTableStateReducers,
+} from 'store/tableState.reducer';
 
 const initialState = {
-  items: {},
-  views: {},
-  loading: false,
-  currentViewId: -1,
-  tableQuery: {
-    page_size: 12,
-    page: 1,
+  tableState: {
+    pageSize: 12,
+    pageIndex: 0,
   },
-  nextBillNumberChanged: false,
-  payable: {
-    byVendorId: [],
-    byBillPayamentId: [],
-  },
-  byBillPayamentId: {},
 };
 
-const defaultBill = {
-  entries: [],
-};
-
-
 export default createReducer(initialState, {
-  [t.BILL_SET]: (state, action) => {
-    const { id, bill } = action.payload;
-    const _bill = state.items[id] || {};
-
-    state.items[id] = { ...defaultBill, ..._bill, ...bill };
-  },
-  [t.BILLS_TABLE_LOADING]: (state, action) => {
-    const { loading } = action.payload;
-    state.loading = loading;
-  },
-
-  [t.BILLS_SET_CURRENT_VIEW]: (state, action) => {
-    state.currentViewId = action.currentViewId;
-  },
-
-  [t.BILLS_ITEMS_SET]: (state, action) => {
-    const { bills } = action.payload;
-    const _bills = {};
-
-    bills.forEach((bill) => {
-      const oldBill = state.items[bill.id] || {};
-
-      _bills[bill.id] = {
-        ...defaultBill,
-        ...oldBill,
-        ...bill,
-      };
-    });
-    state.items = {
-      ...state.items,
-      ..._bills,
-    };
-  },
-
-  [t.BILL_DELETE]: (state, action) => {
-    const { id } = action.payload;
-
-    if (typeof state.items[id] !== 'undefined') {
-      delete state.items[id];
-    }
-  },
-
-  [t.BILLS_PAGE_SET]: (state, action) => {
-    const { customViewId, bills, pagination } = action.payload;
-    const viewId = customViewId || -1;
-    const view = state.views[viewId] || {};
-
-    state.views[viewId] = {
-      ...view,
-      pages: {
-        ...(state.views?.[viewId]?.pages || {}),
-        [pagination.page]: {
-          ids: bills.map((i) => i.id),
-        },
-      },
-    };
-  },
-
-  [t.BILL_NUMBER_CHANGED]: (state, action) => {
-    const { isChanged } = action.payload;
-    state.nextBillNumberChanged = isChanged;
-  },
-
-  [t.BILLS_PAYABLE_BY_VENDOR_ID]: (state, action) => {
-    const { bills } = action.payload;
-    const _data = {};
-
-    bills.forEach((bill) => {
-      if (!_data[bill.vendor_id]) {
-        _data[bill.vendor_id] = [];
-      }
-      _data[bill.vendor_id].push(bill.id);
-    });
-
-    state.payable.byVendorId = {
-      ...state.payable.byVendorId,
-      ..._data,
-    };
-  },
-
-  [t.BILLS_PAYABLE_BY_PAYMENT_ID]: (state, action) => {
-    const { bills, billPaymentId } = action.payload;
-    const _data = [];
-
-    bills.forEach((bill) => {
-      _data.push(bill.id);
-    });
-    state.payable.byBillPayamentId[billPaymentId] = _data;
-  },
-
-  [t.BILLS_BY_PAYMENT_ID]: (state, action) => {
-    const { bills, billPaymentId } = action.payload;
-    const billsIds = bills.map((bill) => bill.id);
-
-    state.byBillPayamentId[billPaymentId] = billsIds;
-  },
-
-  ...viewPaginationSetReducer(t.BILLS_PAGINATION_SET),
-  ...createTableQueryReducers('BILLS'),
+  ...createTableStateReducers('BILLS'),
 });
\ No newline at end of file
diff --git a/client/src/store/Bills/bills.selectors.js b/client/src/store/Bills/bills.selectors.js
index 5d7a25c49..33e14c11f 100644
--- a/client/src/store/Bills/bills.selectors.js
+++ b/client/src/store/Bills/bills.selectors.js
@@ -1,121 +1,17 @@
-import { createSelector } from '@reduxjs/toolkit';
-import {
-  pickItemsFromIds,
-  paginationLocationQuery,
-  defaultPaginationMeta,
-  getCurrentPageResults,
-} from 'store/selectors';
+import { paginationLocationQuery } from 'store/selectors';
+import { createDeepEqualSelector } from 'utils';
 
-// Retreive bills table query.
-const billTableQuery = (state) => state.bills.tableQuery;
+const billsTableStateSelector = (state) => state.bills.tableState;
 
-const billPageSelector = (state, props, query) => {
-  const viewId = state.bills.currentViewId;
-  const currentView = state.bills.views?.[viewId];
-  const currentPageId = currentView?.paginationMeta?.page;
-
-  return currentView?.pages?.[currentPageId];
-};
-// Retreive bills items.
-const billItemsSelector = (state) => state.bills.items;
-
-// Retrieve bill details.
-const billByIdSelector = (state, props) => state.bills.items[props.billId];
-
-// Retrieve vendor due bills ids.
-const billsPayableVendorSelector = (state, props) =>
-  state.bills.payable.byVendorId[props.vendorId];
-
-const billPaginationSelector = (state, props) => {
-  const viewId = state.bills.currentViewId;
-  return state.bills.views?.[viewId];
-};
-
-const getBillsCurrentViewIdSelector = (state) => state.bills.currentViewId;
-
-export const getBillTableQueryFactory = () =>
-  createSelector(
+// Get bills table state marged with location query.
+export const getBillsTableStateFactory = () =>
+  createDeepEqualSelector(
     paginationLocationQuery,
-    billTableQuery,
-    (locationQuery, tableQuery) => {
+    billsTableStateSelector,
+    (locationQuery, tableState) => {
       return {
         ...locationQuery,
-        ...tableQuery,
+        ...tableState,
       };
     },
   );
-
-/**
- * Get current page bills items.
- * @return {Array}
- */
-export const getBillCurrentPageFactory = () =>
-  createSelector(billPageSelector, billItemsSelector, (billPage, billItems) => {
-    return typeof billPage === 'object'
-      ? pickItemsFromIds(billItems, billPage.ids) || []
-      : [];
-  });
-
-/**
- * Retrieve bill details of the given bill id.
- */
-export const getBillByIdFactory = () =>
-  createSelector(billByIdSelector, (bill) => {
-    return bill;
-  });
-
-/**
- * Retrieve bills datatable pagination meta.
- */
-export const getBillPaginationMetaFactory = () =>
-  createSelector(billPaginationSelector, (billPage) => {
-    return {
-      ...defaultPaginationMeta(),
-      ...(billPage?.paginationMeta || {}),
-    };
-  });
-
-/**
- * Retrieve vendor payable bills.
- */
-export const getVendorPayableBillsFactory = () =>
-  createSelector(
-    billItemsSelector,
-    billsPayableVendorSelector,
-    (billsItems, payableBillsIds) => {
-      return Array.isArray(payableBillsIds)
-        ? pickItemsFromIds(billsItems, payableBillsIds) || []
-        : [];
-    },
-  );
-
-/**
- * Retrieve vendor payable bills entries.
- */
-export const getVendorPayableBillsEntriesFactory = () =>
-  createSelector(
-    billItemsSelector,
-    billsPayableVendorSelector,
-    (billsItems, payableBillsIds) => {
-      const bills = Array.isArray(payableBillsIds)
-        ? pickItemsFromIds(billsItems, payableBillsIds) || []
-        : [];
-
-      return bills.map((bill) => ({
-        ...bill,
-        bill_id: bill.id,
-        total_payment_amount: bill.payment_amount,
-        id: null,
-        payment_amount: null,
-      }));
-    },
-  );
-
-// Retreive the current bills view id.
-export const getBillsCurrentViewIdFactory = () => 
-  createSelector(
-    getBillsCurrentViewIdSelector,
-    (currentViewId) => {
-      return currentViewId;
-    }
-  );
\ No newline at end of file
diff --git a/client/src/store/Bills/bills.type.js b/client/src/store/Bills/bills.type.js
index d20c14fd0..efdcf828c 100644
--- a/client/src/store/Bills/bills.type.js
+++ b/client/src/store/Bills/bills.type.js
@@ -1,16 +1,4 @@
+
 export default {
-  BILL_DELETE: 'BILL_DELETE',
-  BILLS_BULK_DELETE: 'BILLS_BULK_DELETE',
-  BILLS_LIST_SET: 'BILLS_LIST_SET',
-  BILL_SET: 'BILL_SET',
-  BILLS_SET_CURRENT_VIEW: 'BILLS_SET_CURRENT_VIEW',
-  BILLS_TABLE_QUERIES_ADD: 'BILLS/TABLE_QUERIES_ADD',
-  BILLS_TABLE_LOADING: 'BILLS_TABLE_LOADING',
-  BILLS_PAGINATION_SET: 'BILLS_PAGINATION_SET',
-  BILLS_PAGE_SET: 'BILLS_PAGE_SET',
-  BILLS_ITEMS_SET: 'BILLS_ITEMS_SET',
-  BILL_NUMBER_CHANGED: 'BILL_NUMBER_CHANGED',
-  BILLS_PAYABLE_BY_PAYMENT_ID: 'BILLS_PAYABLE_BY_PAYMENT_ID',
-  BILLS_PAYABLE_BY_VENDOR_ID: 'BILLS_PAYABLE_BY_VENDOR_ID',
-  BILLS_BY_PAYMENT_ID: 'BILLS_BY_PAYMENT_ID',
-};
+  BILLS_TABLE_STATE_SET: 'BILLS/TABLE_STATE_SET',
+};
\ No newline at end of file
diff --git a/client/src/store/Estimate/estimates.actions.js b/client/src/store/Estimate/estimates.actions.js
index 7e7f58963..b43971f9a 100644
--- a/client/src/store/Estimate/estimates.actions.js
+++ b/client/src/store/Estimate/estimates.actions.js
@@ -1,135 +1,10 @@
-import ApiService from 'services/ApiService';
 import t from 'store/types';
 
-export const submitEstimate = ({ form }) => {
-  return (dispatch) =>
-    new Promise((resolve, reject) => {
-      ApiService.post('sales/estimates', form)
-        .then((response) => {
-          resolve(response);
-        })
-        .catch((error) => {
-          const { response } = error;
-          const { data } = response;
-
-          reject(data?.errors);
-        });
-    });
+export const setEstimatesTableState = (queries) => {
+  return {
+    type: t.ESTIMATES_TABLE_STATE_SET,
+    payload: { queries },
+  };
 };
 
-export const editEstimate = (id, form) => {
-  return (dispatch) =>
-    new Promise((resolve, reject) => {
-      ApiService.post(`sales/estimates/${id}`, form)
-        .then((response) => {
-          resolve(response);
-        })
-        .catch((error) => {
-          const { response } = error;
-          const { data } = response;
-
-          reject(data?.errors);
-        });
-    });
-};
-
-export const deleteEstimate = ({ id }) => {
-  return (dispatch) =>
-    new Promise((resovle, reject) => {
-      ApiService.delete(`sales/estimates/${id}`)
-        .then((response) => {
-          dispatch({
-            type: t.ESTIMATE_DELETE,
-            payload: { id },
-          });
-          resovle(response);
-        })
-        .catch((error) => {
-          reject(error.response.data.errors || []);
-        });
-    });
-};
-
-export const fetchEstimate = ({ id }) => {
-  return (dispatch) =>
-    new Promise((resovle, reject) => {
-      ApiService.get(`sales/estimates/${id}`)
-        .then((response) => {
-          const { estimate } = response.data;
-          dispatch({
-            type: t.ESTIMATE_SET,
-            payload: {
-              id,
-              estimate,
-            },
-          });
-          resovle(response);
-        })
-        .catch((error) => {
-          const { response } = error;
-          const { data } = response;
-          reject(data?.errors);
-        });
-    });
-};
-
-export const fetchEstimatesTable = ({ query = {} }) => {
-  return (dispatch, getState) =>
-    new Promise((resolve, reject) => {
-      const pageQuery = getState().salesEstimates.tableQuery;
-      dispatch({
-        type: t.ESTIMATES_TABLE_LOADING,
-        payload: {
-          loading: true,
-        },
-      });
-      ApiService.get('sales/estimates', {
-        params: { ...pageQuery, ...query },
-      })
-        .then((response) => {
-          dispatch({
-            type: t.ESTIMATES_PAGE_SET,
-            payload: {
-              sales_estimates: response.data.sales_estimates,
-              pagination: response.data.pagination,
-              customViewId:
-                response.data?.filter_meta?.view?.custom_view_id || -1,
-            },
-          });
-          dispatch({
-            type: t.ESTIMATES_ITEMS_SET,
-            payload: {
-              sales_estimates: response.data.sales_estimates,
-            },
-          });
-          dispatch({
-            type: t.ESTIMATES_PAGINATION_SET,
-            payload: {
-              pagination: response.data.pagination,
-              customViewId:
-                response.data?.filter_meta?.view?.custom_view_id || -1,
-            },
-          });
-          dispatch({
-            type: t.ESTIMATES_TABLE_LOADING,
-            payload: {
-              loading: false,
-            },
-          });
-          resolve(response);
-        })
-        .catch((error) => {
-          reject(error);
-        });
-    });
-};
-
-export const deliverEstimate = ({ id }) => {
-  return (dispatch) => ApiService.post(`sales/estimates/${id}/deliver`);
-};
-export const approveEstimate = ({ id }) => {
-  return (dispatch) => ApiService.post(`sales/estimates/${id}/approve`);
-};
-export const rejectEstimate = ({ id }) => {
-  return (dispatch) => ApiService.post(`sales/estimates/${id}/reject`);
-};
+export const setSelectedRowsItems = () => {};
diff --git a/client/src/store/Estimate/estimates.reducer.js b/client/src/store/Estimate/estimates.reducer.js
index 0ea564c6a..e67eacbbc 100644
--- a/client/src/store/Estimate/estimates.reducer.js
+++ b/client/src/store/Estimate/estimates.reducer.js
@@ -1,116 +1,15 @@
 import { createReducer } from '@reduxjs/toolkit';
 import {
-  journalNumberChangedReducer,
-  createTableQueryReducers,
-} from 'store/journalNumber.reducer';
-
-import t from 'store/types';
+  createTableStateReducers,
+} from 'store/tableState.reducer';
 
 const initialState = {
-  items: {},
-  views: {},
-  loading: false,
-  tableQuery: {
-    page_size: 12,
-    page: 1,
+  tableState: {
+    pageSize: 12,
+    pageIndex: 0,
   },
-  currentViewId: -1,
-  selectedRows: [],
-};
-
-const defaultEstimate = {
-  entries: [],
 };
 
 export default createReducer(initialState, {
-  [t.ESTIMATE_SET]: (state, action) => {
-    const { id, estimate } = action.payload;
-    const _estimate = state.items[id] || {};
-
-    state.items[id] = { ...defaultEstimate, ..._estimate, ...estimate };
-  },
-
-  [t.ESTIMATES_ITEMS_SET]: (state, action) => {
-    const { sales_estimates } = action.payload;
-    const _estimates = {};
-    sales_estimates.forEach((estimate) => {
-      _estimates[estimate.id] = {
-        ...defaultEstimate,
-        ...estimate,
-      };
-    });
-    state.items = {
-      ...state.items,
-      ..._estimates,
-    };
-  },
-
-  [t.ESTIMATES_TABLE_LOADING]: (state, action) => {
-    const { loading } = action.payload;
-    state.loading = loading;
-  },
-
-  [t.ESTIMATES_SET_CURRENT_VIEW]: (state, action) => {
-    state.currentViewId = action.currentViewId;
-  },
-
-  [t.ESTIMATE_DELETE]: (state, action) => {
-    const { id } = action.payload;
-
-    if (typeof state.items[id] !== 'undefined') {
-      delete state.items[id];
-    }
-  },
-
-  [t.ESTIMATES_PAGE_SET]: (state, action) => {
-    // @todo camelCase keys.
-    const { customViewId, sales_estimates, pagination } = action.payload;
-
-    const viewId = customViewId || -1;
-    const view = state.views[viewId] || {};
-
-    state.views[viewId] = {
-      ...view,
-      pages: {
-        ...(state.views?.[viewId]?.pages || {}),
-        [pagination.page]: {
-          ids: sales_estimates.map((i) => i.id),
-        },
-      },
-    };
-  },
-
-  [t.ESTIMATES_PAGINATION_SET]: (state, action) => {
-    const { pagination, customViewId } = action.payload;
-
-    const mapped = {
-      pageSize: parseInt(pagination.pageSize, 10),
-      page: parseInt(pagination.page, 10),
-      total: parseInt(pagination.total, 10),
-    };
-    const paginationMeta = {
-      ...mapped,
-      pagesCount: Math.ceil(mapped.total / mapped.pageSize),
-      pageIndex: Math.max(mapped.page - 1, 0),
-    };
-
-    state.views = {
-      ...state.views,
-      [customViewId]: {
-        ...(state.views?.[customViewId] || {}),
-        paginationMeta,
-      },
-    };
-  },
-  [t.ESTIMATES_SELECTED_ROWS_SET]: (state, action) => {
-    const { selectedRows } = action.payload;
-    state.selectedRows = selectedRows;
-  },
-
-  ...journalNumberChangedReducer(t.ESTIMATE_NUMBER_CHANGED),
-  ...createTableQueryReducers('ESTIMATES'),
+  ...createTableStateReducers('ESTIMATES'),
 });
-
-export const getEstimateById = (state, id) => {
-  return state.sales_estimates.items[id];
-};
diff --git a/client/src/store/Estimate/estimates.selectors.js b/client/src/store/Estimate/estimates.selectors.js
index 107f60628..49deced85 100644
--- a/client/src/store/Estimate/estimates.selectors.js
+++ b/client/src/store/Estimate/estimates.selectors.js
@@ -1,73 +1,17 @@
-import { createSelector } from '@reduxjs/toolkit';
-import { pickItemsFromIds, paginationLocationQuery, defaultPaginationMeta } from 'store/selectors';
-
-const estimateTableQuery = (state) => state.salesEstimates.tableQuery;
-
-const estimateByIdSelector = (state, props) => 
-  state.salesEstimates.items[props.estimateId];
-
-const estimatesCurrentViewSelector = (state, props) => {
-  const viewId = state.salesEstimates.currentViewId;
-  return state.salesEstimates.views?.[viewId];
-};
-const estimateItemsSelector = (state) => state.salesEstimates.items;
-
-const estimatesPageSelector = (state, props, query) => {
-  const viewId = state.salesEstimates.currentViewId;
-  const currentPageId = state.salesEstimates.views?.[viewId]?.paginationMeta?.page;
-
-  return state.salesEstimates.views?.[viewId]?.pages?.[currentPageId];
-};
-
-const getEstimatesCurrentViewIdSelector = (state, props) => {
-  return state.salesEstimates.currentViewId;
-};
+import { createDeepEqualSelector } from 'utils';
+import { paginationLocationQuery } from 'store/selectors';
 
+const estimatesTableState = (state) => state.salesEstimates.tableState;
+ 
 // Retrieve estimates table query.
-export const getEstimatesTableQueryFactory = () =>
-  createSelector(
+export const getEstimatesTableStateFactory = () =>
+  createDeepEqualSelector(
     paginationLocationQuery,
-    estimateTableQuery,
-    (locationQuery, tableQuery) => {
+    estimatesTableState,
+    (locationQuery, tableState) => {
       return {
         ...locationQuery,
-        ...tableQuery,
+        ...tableState,
       };
     },
   );
-
-// Retreive estimate results of the current page.
-export const getEstimateCurrentPageFactory = () =>
-  createSelector(
-    estimatesPageSelector,
-    estimateItemsSelector,
-    (estimatePage, estimateItems) => {
-      return typeof estimatePage === 'object'
-        ? pickItemsFromIds(estimateItems, estimatePage.ids) || []
-        : [];
-    },
-  );
-
-// Retrieve specific estimate by the passed estimate id.
-export const getEstimateByIdFactory = () =>
-  createSelector(estimateByIdSelector, (estimate) => {
-    return estimate;
-  });
-
-// Retrieve estimates pagination meta.
-export const getEstimatesPaginationMetaFactory = () =>
-  createSelector(estimatesCurrentViewSelector, (estimateView) => {
-    return {
-      ...defaultPaginationMeta(),
-      ...(estimateView?.paginationMeta || {}),
-    };
-  });
-
-
-// Retrieve estimates current view id.
-export const getEstimatesCurrentViewIdFactory = () => 
-  createSelector(
-    getEstimatesCurrentViewIdSelector,
-    (currentViewId) => {
-      return currentViewId;
-    });
\ No newline at end of file
diff --git a/client/src/store/Estimate/estimates.types.js b/client/src/store/Estimate/estimates.types.js
index 5d958d24d..c91285541 100644
--- a/client/src/store/Estimate/estimates.types.js
+++ b/client/src/store/Estimate/estimates.types.js
@@ -1,14 +1,3 @@
 export default {
-  ESTIMATES_LIST_SET: 'ESTIMATES_LIST_SET',
-  ESTIMATE_SET: 'ESTIMATE_SET',
-  ESTIMATE_DELETE: 'ESTIMATE_DELETE',
-  ESTIMATES_BULK_DELETE: 'ESTIMATES_BULK_DELETE',
-  ESTIMATES_SET_CURRENT_VIEW: 'ESTIMATES/SET_CURRENT_VIEW',
-  ESTIMATES_TABLE_QUERIES_ADD: 'ESTIMATES/TABLE_QUERIES_ADD',
-  ESTIMATES_TABLE_LOADING: 'ESTIMATES_TABLE_LOADING',
-  ESTIMATES_PAGINATION_SET: 'ESTIMATES_PAGINATION_SET',
-  ESTIMATES_PAGE_SET: 'ESTIMATES_PAGE_SET',
-  ESTIMATES_ITEMS_SET: 'ESTIMATES_ITEMS_SET',
-  ESTIMATE_NUMBER_CHANGED: 'ESTIMATE_NUMBER_CHANGED',
-  ESTIMATES_SELECTED_ROWS_SET: 'ESTIMATES_SELECTED_ROWS_SET',
+  ESTIMATES_TABLE_STATE_SET: 'ESTIMATES/TABLE_STATE_SET',
 };
diff --git a/client/src/store/Invoice/invoices.actions.js b/client/src/store/Invoice/invoices.actions.js
index c57e3de62..9eb1d328c 100644
--- a/client/src/store/Invoice/invoices.actions.js
+++ b/client/src/store/Invoice/invoices.actions.js
@@ -1,156 +1,10 @@
-import ApiService from 'services/ApiService';
 import t from 'store/types';
 
-export const submitInvoice = ({ form }) => {
-  return (dispatch) =>
-    new Promise((resolve, reject) => {
-      ApiService.post('sales/invoices', form)
-        .then((response) => {
-          resolve(response);
-        })
-        .catch((error) => {
-          const { response } = error;
-          const { data } = response;
-
-          reject(data?.errors);
-        });
-    });
+export const setInvoicesTableState = (queries) => {
+  return {
+    type: t.INVOICES_TABLE_STATE_SET,
+    payload: { queries },
+  };
 };
 
-export const deleteInvoice = ({ id }) => {
-  return (dispatch) =>
-    new Promise((resovle, reject) => {
-      ApiService.delete(`sales/invoices/${id}`)
-        .then((response) => {
-          dispatch({
-            type: t.INVOICE_DELETE,
-            payload: { id },
-          });
-          resovle(response);
-        })
-        .catch((error) => {
-          reject(error.response.data.errors || []);
-        });
-    });
-};
-
-export const editInvoice = (id, form) => {
-  return (dispatch) =>
-    new Promise((resolve, reject) => {
-      ApiService.post(`sales/invoices/${id}`, form)
-        .then((response) => {
-          resolve(response);
-        })
-        .catch((error) => {
-          const { response } = error;
-          const { data } = response;
-
-          reject(data?.errors);
-        });
-    });
-};
-
-export const fetchInvoicesTable = ({ query } = {}) => {
-  return (dispatch, getState) =>
-    new Promise((resolve, reject) => {
-      const pageQuery = getState().salesInvoices.tableQuery;
-      dispatch({
-        type: t.INVOICES_TABLE_LOADING,
-        payload: {
-          loading: true,
-        },
-      });
-      ApiService.get('sales/invoices', {
-        params: { ...pageQuery, ...query },
-      })
-        .then((response) => {
-          dispatch({
-            type: t.INVOICES_PAGE_SET,
-            payload: {
-              sales_invoices: response.data.sales_invoices,
-              pagination: response.data.pagination,
-              customViewId:
-                response.data?.filter_meta?.view?.custom_view_id || -1,
-            },
-          });
-          dispatch({
-            type: t.INVOICES_ITEMS_SET,
-            payload: {
-              sales_invoices: response.data.sales_invoices,
-            },
-          });
-          dispatch({
-            type: t.INVOICES_PAGINATION_SET,
-            payload: {
-              pagination: response.data.pagination,
-              customViewId: response.data?.filter_meta?.view?.custom_view_id ||-1
-            },
-          });
-          dispatch({
-            type: t.INVOICES_TABLE_LOADING,
-            payload: {
-              loading: false,
-            },
-          });
-          resolve(response);
-        })
-        .catch((error) => {
-          reject(error);
-        });
-    });
-};
-
-export const fetchInvoice = ({ id }) => {
-  return (dispatch) =>
-    new Promise((resovle, reject) => {
-      ApiService.get(`sales/invoices/${id}`)
-        .then((response) => {
-          dispatch({
-            type: t.INVOICE_SET,
-            payload: {
-              id,
-              sale_invoice: response.data.sale_invoice,
-            },
-          });
-          resovle(response);
-        })
-        .catch((error) => {
-          const { response } = error;
-          const { data } = response;
-          reject(data?.errors);
-        });
-    });
-};
-
-export const fetchDueInvoices = ({ customerId }) => (dispatch) =>
-  new Promise((resovle, reject) => {
-    ApiService.get(`sales/invoices/payable`, {
-      params: { customer_id: customerId },
-    })
-      .then((response) => {
-        dispatch({
-          type: t.INVOICES_ITEMS_SET,
-          payload: {
-            sales_invoices: response.data.sales_invoices,
-          },
-        });
-        if (customerId) {
-          dispatch({
-            type: t.INVOICES_RECEIVABLE_BY_CUSTOMER_ID,
-            payload: {
-              customerId,
-              saleInvoices: response.data.sales_invoices,
-            },
-          });
-        }
-        resovle(response);
-      })
-      .catch((error) => {
-        const { response } = error;
-        const { data } = response;
-        reject(data?.errors);
-      });
-  });
-export const deliverInvoice = ({ id }) => {
-  return (dispatch) => ApiService.post(`sales/invoices/${id}/deliver`);
-};
+export const setSelectedRowsItems = () => {};
diff --git a/client/src/store/Invoice/invoices.reducer.js b/client/src/store/Invoice/invoices.reducer.js
index a06dde2d8..52f6e1015 100644
--- a/client/src/store/Invoice/invoices.reducer.js
+++ b/client/src/store/Invoice/invoices.reducer.js
@@ -1,115 +1,15 @@
 import { createReducer } from '@reduxjs/toolkit';
 import {
-  journalNumberChangedReducer,
-  viewPaginationSetReducer,
-  createTableQueryReducers,
- } from 'store/journalNumber.reducer';
-import t from 'store/types';
+  createTableStateReducers,
+} from 'store/tableState.reducer';
 
 const initialState = {
-  items: {},
-  views: {},
-  loading: false,
-  currentViewId: -1,
-  tableQuery: {
-    page_size: 12,
-    page: 1,
+  tableState: {
+    pageSize: 12,
+    pageIndex: 0,
   },
-  dueInvoices: {},
-  receivable: {
-    byCustomerId: [],
-    byPaymentReceiveId: [],
-  },
-  byPaymentReceiveId: {},
-};
-
-const defaultInvoice = {
-  entries: [],
 };
 
 export default createReducer(initialState, {
-  [t.INVOICE_SET]: (state, action) => {
-    const { id, sale_invoice } = action.payload;
-    const _invoice = state.items[id] || {};
-    state.items[id] = { ...defaultInvoice, ..._invoice, ...sale_invoice };
-  },
-
-  [t.INVOICES_ITEMS_SET]: (state, action) => {
-    const { sales_invoices } = action.payload;
-    const _invoices = {};
-
-    sales_invoices.forEach((invoice) => {
-      _invoices[invoice.id] = {
-        ...defaultInvoice,
-        ...invoice,
-      };
-    });
-    state.items = {
-      ...state.items,
-      ..._invoices,
-    };
-  },
-
-  [t.INVOICES_TABLE_LOADING]: (state, action) => {
-    const { loading } = action.payload;
-    state.loading = loading;
-  },
-
-  [t.INVOICES_SET_CURRENT_VIEW]: (state, action) => {
-    state.currentViewId = action.currentViewId;
-  },
-
-  [t.INVOICE_DELETE]: (state, action) => {
-    const { id } = action.payload;
-
-    if (typeof state.items[id] !== 'undefined') {
-      delete state.items[id];
-    }
-  },
-
-  [t.INVOICES_PAGE_SET]: (state, action) => {
-    const { customViewId, sales_invoices, pagination } = action.payload;
-
-    const viewId = customViewId || -1;
-    const view = state.views[viewId] || {};
-
-    state.views[viewId] = {
-      ...view,
-      pages: {
-        ...(state.views?.[viewId]?.pages || {}),
-        [pagination.page]: {
-          ids: sales_invoices.map((i) => i.id),
-        },
-      },
-    };
-  },
-
-  [t.INVOICES_RECEIVABLE_BY_PAYMENT_ID]: (state, action) => {
-    const { paymentReceiveId, saleInvoices } = action.payload;
-    const saleInvoicesIds = saleInvoices.map((saleInvoice) => saleInvoice.id);
-
-    state.receivable.byPaymentReceiveId[paymentReceiveId] = saleInvoicesIds;
-  },
-
-  [t.INVOICES_RECEIVABLE_BY_CUSTOMER_ID]: (state, action) => {
-    const { customerId, saleInvoices } = action.payload;
-    const saleInvoiceIds = saleInvoices.map((saleInvoice) => saleInvoice.id);
-
-    state.receivable.byCustomerId[customerId] = saleInvoiceIds;
-  },
-
-  [t.INVOICES_BY_PAYMENT_ID]: (state, action) => {
-    const { paymentReceiveId, saleInvoices } = action.payload;
-    const saleInvoiceIds = saleInvoices.map((saleInvoice) => saleInvoice.id);
-
-    state.byPaymentReceiveId[paymentReceiveId] = saleInvoiceIds;
-  },
-
-  ...journalNumberChangedReducer(t.INVOICE_NUMBER_CHANGED),
-  ...viewPaginationSetReducer(t.INVOICES_PAGINATION_SET),
-  ...createTableQueryReducers('INVOICES'),
+  ...createTableStateReducers('INVOICES'),
 });
-
-export const getInvoiceById = (state, id) => {
-  return state.sales_invoices.items[id];
-};
diff --git a/client/src/store/Invoice/invoices.selector.js b/client/src/store/Invoice/invoices.selector.js
index 277b6f831..307d7dc2f 100644
--- a/client/src/store/Invoice/invoices.selector.js
+++ b/client/src/store/Invoice/invoices.selector.js
@@ -1,98 +1,19 @@
-import { createSelector } from '@reduxjs/toolkit';
-import {
-  pickItemsFromIds,
-  paginationLocationQuery,
-  defaultPaginationMeta,
-} from 'store/selectors';
+import { paginationLocationQuery } from 'store/selectors';
+import { createDeepEqualSelector } from 'utils';
 
-const invoiceTableQuery = (state) => state.salesInvoices.tableQuery;
+const invoicesTableStateSelector = (state) => state.salesInvoices.tableState;
 
-const invoicesByIdSelector = (state, props) =>
-  state.salesInvoices.items[props.invoiceId];
-
-const invoicesPaginationSelector = (state, props) => {
-  const viewId = state.salesInvoices.currentViewId;
-  return state.salesInvoices.views?.[viewId];
-};
-
-const invoicesPageSelector = (state, props, query) => {
-  const viewId = state.salesInvoices.currentViewId;
-  const currentView = state.salesInvoices.views?.[viewId];
-  const currentPageId = currentView?.paginationMeta?.page;
-
-  return currentView?.pages?.[currentPageId];
-};
-
-const invoicesItemsSelector = (state) => state.salesInvoices.items;
-const invoicesReceiableCustomerSelector = (state, props) =>
-  state.salesInvoices.receivable.byCustomerId[props.customerId];
-
-const getInvoicesCurrentViewIdSelector = (state) => state.salesInvoices.currentViewId;
-
-export const getInvoiceTableQueryFactory = () =>
-  createSelector(
+/**
+ * Retrieve invoices table state.
+ */
+export const getInvoicesTableStateFactory = () =>
+  createDeepEqualSelector(
     paginationLocationQuery,
-    invoiceTableQuery,
-    (locationQuery, tableQuery) => {
+    invoicesTableStateSelector,
+    (locationQuery, tableState) => {
       return {
         ...locationQuery,
-        ...tableQuery,
+        ...tableState,
       };
     },
   );
-
-// Retrieve invoices of the current view and view.
-export const getInvoiceCurrentPageFactory = () =>
-  createSelector(
-    invoicesPageSelector,
-    invoicesItemsSelector,
-    (invoicePage, invoicesItems) => {
-      return typeof invoicePage === 'object'
-        ? pickItemsFromIds(invoicesItems, invoicePage.ids) || []
-        : [];
-    },
-  );
-
-
- 
-// Retrieve specific invoice by the passed invoice id.
-export const getInvoiecsByIdFactory = () =>
-  createSelector(invoicesByIdSelector, (invoice) => {
-    return invoice;
-  });
-
-// Retrieve invoices pagination meta.
-export const getInvoicePaginationMetaFactory = () =>
-  createSelector(invoicesPaginationSelector, (invoicePage) => {
-    return {
-      ...defaultPaginationMeta(),
-      ...(invoicePage?.paginationMeta || {}),
-    };
-  });
-
-export const getCustomerReceivableInvoicesEntriesFactory = () =>
-  createSelector(
-    invoicesItemsSelector,
-    invoicesReceiableCustomerSelector,
-    (invoicesItems, customerInvoicesIds) => {
-      const invoicesIds = [...(customerInvoicesIds || [])];
-      const invoices = pickItemsFromIds(invoicesItems, invoicesIds);
-
-      return invoices.map((invoice) => ({
-        ...invoice,
-        invoice_id: invoice.id,
-        total_payment_amount: invoice.payment_amount,
-        id: null,
-        payment_amount: 0,
-      }));
-    },
-  );
-
-// Retrieve sale invoices current view id.
-export const getInvoicesCurrentViewIdFactory = () => 
-  createSelector(
-    getInvoicesCurrentViewIdSelector,
-    (currentViewId) => {
-      return currentViewId;
-    }
-  );
\ No newline at end of file
diff --git a/client/src/store/Invoice/invoices.types.js b/client/src/store/Invoice/invoices.types.js
index bea84fde4..23eae8b6a 100644
--- a/client/src/store/Invoice/invoices.types.js
+++ b/client/src/store/Invoice/invoices.types.js
@@ -1,20 +1,4 @@
+
 export default {
-  INVOICE_DELETE: 'INVOICE_DELETE',
-  INVOICES_BULK_DELETE: 'INVOICES_BULK_DELETE',
-  INVOICES_LIST_SET: 'INVOICES_LIST_SET',
-  INVOICE_SET: 'INVOICE_SET',
-  INVOICES_SET_CURRENT_VIEW: 'INVOICES_SET_CURRENT_VIEW',
-  INVOICES_TABLE_QUERIES_ADD: 'INVOICES/TABLE_QUERIES_ADD',
-  INVOICES_TABLE_LOADING: 'INVOICES_TABLE_LOADING',
-  INVOICES_PAGINATION_SET: 'INVOICES_PAGINATION_SET',
-  INVOICES_PAGE_SET: 'INVOICES_PAGE_SET',
-  INVOICES_ITEMS_SET: 'INVOICES_ITEMS_SET',
-  DUE_INVOICES_SET: 'DUE_INVOICES_SET',
-  RELOAD_INVOICES: 'RELOAD_INVOICES',
-
-  INVOICES_RECEIVABLE_BY_PAYMENT_ID: 'INVOICES_RECEIVABLE_BY_PAYMENT_ID',
-  INVOICES_RECEIVABLE_BY_CUSTOMER_ID: 'INVOICES_RECEIVABLE_BY_CUSTOMER_ID',
-  INVOICES_BY_PAYMENT_ID: 'INVOICES_BY_PAYMENT_ID',
-
-  INVOICE_NUMBER_CHANGED: 'INVOICE_NUMBER_CHANGED',
-};
+  INVOICES_TABLE_STATE_SET: 'INVOICES/TABLE_STATE_SET',
+};
\ No newline at end of file
diff --git a/client/src/store/PaymentMades/paymentMade.actions.js b/client/src/store/PaymentMades/paymentMade.actions.js
deleted file mode 100644
index 5d209cc7d..000000000
--- a/client/src/store/PaymentMades/paymentMade.actions.js
+++ /dev/null
@@ -1,160 +0,0 @@
-import ApiService from 'services/ApiService';
-import t from 'store/types';
-
-export const submitPaymentMade = ({ form }) => {
-  return (dispatch) =>
-    new Promise((resolve, reject) => {
-      ApiService.post('purchases/bill_payments', form)
-        .then((response) => {
-          resolve(response);
-        })
-        .catch((error) => {
-          const { response } = error;
-          const { data } = response;
-
-          reject(data?.errors);
-        });
-    });
-};
-
-export const deletePaymentMade = ({ id }) => {
-  return (dispatch) =>
-    new Promise((resovle, reject) => {
-      ApiService.delete(`purchases/bill_payments/${id}`)
-        .then((response) => {
-          dispatch({ type: t.PAYMENT_MADE_DELETE, payload: { id } });
-          resovle(response);
-        })
-        .catch((error) => {
-          reject(error.response.data.errors || []);
-        });
-    });
-};
-
-export const editPaymentMade = (id, form) => {
-  return (dispatch) =>
-    new Promise((resolve, rejcet) => {
-      ApiService.post(`purchases/bill_payments/${id}`, form)
-        .then((response) => {
-          resolve(response);
-        })
-        .catch((error) => {
-          const { response } = error;
-          const { data } = response;
-
-          rejcet(data?.errors);
-        });
-    });
-};
-
-export const fetchPaymentMadesTable = ({ query = {} }) => {
-  return (dispatch, getState) =>
-    new Promise((resolve, rejcet) => {
-      const pageQuery = getState().paymentMades.tableQuery;
-
-      dispatch({
-        type: t.PAYMENT_MADES_TABLE_LOADING,
-        payload: {
-          loading: true,
-        },
-      });
-      ApiService.get('purchases/bill_payments', {
-        params: { ...pageQuery, ...query },
-      })
-        .then((response) => {
-          dispatch({
-            type: t.PAYMENT_MADES_PAGE_SET,
-            payload: {
-              bill_payments: response.data.bill_payments,
-              pagination: response.data.pagination,
-              customViewId: response.data.customViewId || -1,
-            },
-          });
-          dispatch({
-            type: t.PAYMENT_MADES_ITEMS_SET,
-            payload: {
-              bill_payments: response.data.bill_payments,
-            },
-          });
-          dispatch({
-            type: t.PAYMENT_MADES_PAGINATION_SET,
-            payload: {
-              pagination: response.data.pagination,
-              customViewId: response.data.customViewId || -1,
-            },
-          });
-          dispatch({
-            type: t.PAYMENT_MADES_TABLE_LOADING,
-            payload: {
-              loading: false,
-            },
-          });
-          resolve(response);
-        })
-        .catch((error) => {
-          rejcet(error);
-        });
-    });
-};
-
-export const fetchPaymentMade = ({ id }) => {
-  return (dispatch) =>
-    new Promise((resovle, reject) => {
-      ApiService.get(`purchases/bill_payments/${id}`, {})
-        .then((response) => {
-          dispatch({
-            type: t.PAYMENT_MADE_SET,
-            payload: {
-              id,
-              paymentMade: response.data.bill_payment,
-            },
-          });
-          dispatch({
-            type: t.BILLS_ITEMS_SET,
-            payload: {
-              bills: response.data.payable_bills,
-            },
-          });
-          dispatch({
-            type: t.BILLS_PAYABLE_BY_PAYMENT_ID,
-            payload: {
-              billPaymentId: response.data.bill_payment.id,
-              bills: response.data.payable_bills,
-            },
-          });
-          dispatch({
-            type: t.BILLS_ITEMS_SET,
-            payload: {
-              bills: response.data.payment_bills,
-            },
-          });
-          dispatch({
-            type: t.BILLS_BY_PAYMENT_ID,
-            payload: {
-              billPaymentId: response.data.bill_payment.id,
-              bills: response.data.payment_bills,
-            },
-          });
-          resovle(response);
-        })
-        .catch((error) => {
-          const { response } = error;
-          const { data } = response;
-          reject(data?.errors);
-        });
-    });
-};
-
-export const fetchPaymentMadeBills = ({ paymentMadeId }) => (dispatch) => {
-  return new Promise((resolve, reject) => {
-    ApiService.get(`purchases/bill_payments/${paymentMadeId}/bills`).then((response) => {
-      dispatch({
-        type: t.BILLS_ITEMS_SET,
-        payload: {
-          bills: response.data.bills,
-        },
-      });
-      resolve(response);
-    }).catch((error) => { reject(error) });
-  });
-}
\ No newline at end of file
diff --git a/client/src/store/PaymentMades/paymentMade.reducer.js b/client/src/store/PaymentMades/paymentMade.reducer.js
deleted file mode 100644
index 882d8d667..000000000
--- a/client/src/store/PaymentMades/paymentMade.reducer.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import { createReducer } from '@reduxjs/toolkit';
-import {
-  createTableQueryReducers,
-  viewPaginationSetReducer,
-} from 'store/journalNumber.reducer';
-import t from 'store/types';
-
-const initialState = {
-  items: {},
-  views: {},
-  loading: false,
-  currentViewId: -1,
-  tableQuery: {
-    page_size: 12,
-    page: 1,
-  },
-  nextPaymentNumberChanged: false,
-};
-
-const defaultPaymentMade = {
-  entries: [],
-};
-
-export default createReducer(initialState, {
-  [t.PAYMENT_MADES_TABLE_LOADING]: (state, action) => {
-    const { loading } = action.payload;
-    state.loading = loading;
-  },
-
-  [t.PAYMENT_MADES_ITEMS_SET]: (state, action) => {
-    const { bill_payments } = action.payload;
-    const _bill_payments = {};
-    bill_payments.forEach((billPayment) => {
-      _bill_payments[billPayment.id] = {
-        ...defaultPaymentMade,
-        ...billPayment,
-      };
-    });
-    state.items = {
-      ...state.items,
-      ..._bill_payments,
-    };
-  },
-
-  [t.PAYMENT_MADE_SET]: (state, action) => {
-    const { id, paymentMade } = action.payload;
-    const _oldPaymentMade = state.items[id] || {};
-
-    state.items[id] = {
-      ...defaultPaymentMade,
-      ..._oldPaymentMade,
-      ...paymentMade,
-    };
-  },
-
-  [t.PAYMENT_MADE_DELETE]: (state, action) => {
-    const { id } = action.payload;
-
-    if (typeof state.items[id] !== 'undefined') {
-      delete state.items[id];
-    }
-  },
-
-  [t.PAYMENT_MADES_PAGE_SET]: (state, action) => {
-    const { customViewId, bill_payments, pagination } = action.payload;
-
-    const viewId = customViewId || -1;
-    const view = state.views[viewId] || {};
-
-    state.views[viewId] = {
-      ...view,
-      pages: {
-        ...(state.views?.[viewId]?.pages || {}),
-        [pagination.page]: {
-          ids: bill_payments.map((i) => i.id),
-        },
-      },
-    };
-  },
-
-  [t.PAYMENT_MADES_NUMBER_CHANGED]: (state, action) => {
-    const { isChanged } = action.payload;
-    state.nextPaymentNumberChanged = isChanged;
-  },
-
-  ...viewPaginationSetReducer(t.PAYMENT_MADES_PAGINATION_SET),
-  ...createTableQueryReducers('PAYMENT_MADES'),
-});
diff --git a/client/src/store/PaymentMades/paymentMade.selector.js b/client/src/store/PaymentMades/paymentMade.selector.js
deleted file mode 100644
index 57e38f70d..000000000
--- a/client/src/store/PaymentMades/paymentMade.selector.js
+++ /dev/null
@@ -1,129 +0,0 @@
-import { createSelector } from '@reduxjs/toolkit';
-import {
-  pickItemsFromIds,
-  paginationLocationQuery,
-  defaultPaginationMeta,
-} from 'store/selectors';
-import { transformToObject } from 'utils';
-
-const paymentMadeTableQuery = (state) => state.paymentMades.tableQuery;
-
-const paymentMadesPageSelector = (state) => {
-  const viewId = state.paymentMades.currentViewId;
-  const currentView = state.paymentMades.views?.[viewId];
-  const currentPageId = currentView?.paginationMeta?.page;
-
-  return currentView?.pages?.[currentPageId];
-};
-
-const paymentMadesItemsSelector = (state) => state.paymentMades.items;
-
-const PaymentMadePaginationSelector = (state, props) => {
-  const viewId = state.paymentMades.currentViewId;
-  return state.paymentMades.views?.[viewId];
-};
-
-const paymentMadeById = (state, props) =>
-  state.paymentMades.items[props.paymentMadeId];
-
-const paymentMadeEntries = (state, props) => props.paymentMadeEntries;
-
-const billsItemsSelector = (state, props) => state.bills.items;
-
-const billsPayableByPaymentMadeSelector = (state, props) =>
-  state.bills.payable.byBillPayamentId[props.paymentMadeId];
-
-const paymentMadeBillsSelector = (state, props) =>
-  state.bills.byBillPayamentId[props.paymentMadeId];
-
-const paymentMadesCurrentViewIdSelector = (state) => state.paymentMades.currentViewId;
-
-export const getPaymentMadeCurrentPageFactory = () =>
-  createSelector(
-    paymentMadesPageSelector,
-    paymentMadesItemsSelector,
-    (Page, Items) => {
-      return typeof Page === 'object'
-        ? pickItemsFromIds(Items, Page.ids) || []
-        : [];
-    },
-  );
-
-export const getPaymentMadeTableQuery = createSelector(
-  paginationLocationQuery,
-  paymentMadeTableQuery,
-  (locationQuery, tableQuery) => {
-    return {
-      ...locationQuery,
-      ...tableQuery,
-    };
-  },
-);
-
-export const getPaymentMadePaginationMetaFactory = () =>
-  createSelector(PaymentMadePaginationSelector, (page) => {
-    return {
-      ...defaultPaginationMeta(),
-      ...(page?.paginationMeta || {}),
-    };
-  });
-
-export const getPaymentMadeByIdFactory = () =>
-  createSelector(paymentMadeById, (payment_Made) => {
-    return payment_Made;
-  });
-
-export const getPaymentMadeEntriesDataFactory = () =>
-  createSelector(
-    billsItemsSelector,
-    paymentMadeEntries,
-    (billsItems, paymentEntries) => {
-      return Array.isArray(paymentEntries)
-        ? paymentEntries.map((entry) => ({
-            ...entry,
-            ...(billsItems[entry.bill_id] || {}),
-          }))
-        : [];
-    },
-  );
-
-// Retrieve payment made entries.
-export const getPaymentMadeEntriesFactory = () =>
-  createSelector(
-    billsItemsSelector,
-    billsPayableByPaymentMadeSelector,
-    paymentMadeBillsSelector,
-    paymentMadeById,
-    (billsItems, paymentPayableBillsIds, paymentMadeBillsIds, paymentMade) => {
-      const billsIds = [
-        ...(paymentPayableBillsIds || []),
-        ...(paymentMadeBillsIds || []),
-      ];
-      const bills = pickItemsFromIds(billsItems, billsIds);
-      const billEntries = transformToObject(
-        paymentMade?.entries || [],
-        'bill_id',
-      );
-
-      return bills.map((bill) => {
-        const paymentMadeEntry = billEntries?.[bill.id] || {};
-
-        return {
-          ...bill,
-          bill_id: bill.id,
-          total_payment_amount: bill.payment_amount,
-          id: paymentMadeEntry?.id,
-          payment_amount: paymentMadeEntry?.payment_amount,
-        };
-      });
-    },
-  );
-
-// Retrieve payment mades current view id.
-export const getPaymentMadesCurrentViewIdFactory = () => 
-    createSelector(
-      paymentMadesCurrentViewIdSelector,
-      (currentViewId) => {
-        return currentViewId;
-      }
-    );
\ No newline at end of file
diff --git a/client/src/store/PaymentMades/paymentMade.type.js b/client/src/store/PaymentMades/paymentMade.type.js
deleted file mode 100644
index f97220202..000000000
--- a/client/src/store/PaymentMades/paymentMade.type.js
+++ /dev/null
@@ -1,12 +0,0 @@
-export default {
-  PAYMENT_MADE_LIST_SET: 'PAYMENT_MADE_LIST_SET',
-  PAYMENT_MADE_DELETE: 'PAYMENT_MADE_DELETE',
-  PAYMENT_MADE_SET: 'PAYMENT_MADE_SET',
-  PAYMENT_MADE_SET_CURRENT_VIEW: 'PAYMENT_MADE_SET_CURRENT_VIEW',
-  PAYMENT_MADES_TABLE_QUERIES_ADD: 'PAYMENT_MADES/TABLE_QUERIES_ADD',
-  PAYMENT_MADES_TABLE_LOADING: 'PAYMENT_MADES_TABLE_LOADING',
-  PAYMENT_MADES_PAGE_SET: 'PAYMENT_MADES_PAGE_SET',
-  PAYMENT_MADES_ITEMS_SET: 'PAYMENT_MADES_ITEMS_SET',
-  PAYMENT_MADES_PAGINATION_SET: 'PAYMENT_MADES_PAGINATION_SET',
-  PAYMENT_MADES_NUMBER_CHANGED:'PAYMENT_MADES_NUMBER_CHANGED' 
-};
diff --git a/client/src/store/PaymentMades/paymentMades.actions.js b/client/src/store/PaymentMades/paymentMades.actions.js
new file mode 100644
index 000000000..39c55f75d
--- /dev/null
+++ b/client/src/store/PaymentMades/paymentMades.actions.js
@@ -0,0 +1,10 @@
+import t from 'store/types';
+
+export const setPaymentMadesTableState = (queries) => {
+  return {
+    type: t.PAYMENT_MADES_TABLE_STATE_SET,
+    payload: { queries },
+  };
+};
+
+export const setSelectedRowsItems = () => {};
diff --git a/client/src/store/PaymentMades/paymentMades.reducer.js b/client/src/store/PaymentMades/paymentMades.reducer.js
new file mode 100644
index 000000000..5a3401e3f
--- /dev/null
+++ b/client/src/store/PaymentMades/paymentMades.reducer.js
@@ -0,0 +1,16 @@
+import { createReducer } from '@reduxjs/toolkit';
+import {
+  createTableStateReducers,
+} from 'store/tableState.reducer';
+
+const initialState = {
+  tableState: {
+    pageSize: 12,
+    pageIndex: 1,
+    sortBy: [],
+  },
+};
+ 
+export default createReducer(initialState, {
+  ...createTableStateReducers('ITEMS'),
+});
diff --git a/client/src/store/PaymentMades/paymentMades.selector.js b/client/src/store/PaymentMades/paymentMades.selector.js
new file mode 100644
index 000000000..cbe614cb0
--- /dev/null
+++ b/client/src/store/PaymentMades/paymentMades.selector.js
@@ -0,0 +1,17 @@
+import { paginationLocationQuery } from 'store/selectors';
+import { createDeepEqualSelector } from 'utils';
+
+const paymentMadesTableStateSelector = (state) => state.paymentMades.tableState;
+
+// Get payment mades table state marged with location query.
+export const getPaymentMadesTableStateFactory = () =>
+  createDeepEqualSelector(
+    paginationLocationQuery,
+    paymentMadesTableStateSelector,
+    (locationQuery, tableState) => {
+      return {
+        ...locationQuery,
+        ...tableState,
+      };
+    },
+  );
diff --git a/client/src/store/PaymentMades/paymentMades.type.js b/client/src/store/PaymentMades/paymentMades.type.js
new file mode 100644
index 000000000..9a855d5ad
--- /dev/null
+++ b/client/src/store/PaymentMades/paymentMades.type.js
@@ -0,0 +1,3 @@
+export default {
+  PAYMENT_MADES_TABLE_STATE_SET: 'PAYMENT_MADES/TABLE_STATE_SET',
+};
diff --git a/client/src/store/PaymentReceive/paymentReceive.actions.js b/client/src/store/PaymentReceive/paymentReceive.actions.js
deleted file mode 100644
index 58af1ec59..000000000
--- a/client/src/store/PaymentReceive/paymentReceive.actions.js
+++ /dev/null
@@ -1,144 +0,0 @@
-import ApiService from 'services/ApiService';
-import t from 'store/types';
-
-export const submitPaymentReceive = ({ form }) => {
-  return (dispatch) =>
-    new Promise((resolve, reject) => {
-      ApiService.post('sales/payment_receives', form)
-        .then((response) => {
-          resolve(response);
-        })
-        .catch((error) => {
-          const { response } = error;
-          const { data } = response;
-
-          reject(data?.errors);
-        });
-    });
-};
-
-export const editPaymentReceive = (id, form) => {
-  return (dispatch) =>
-    new Promise((resolve, rejcet) => {
-      ApiService.post(`sales/payment_receives/${id}`, form)
-        .then((response) => {
-          resolve(response);
-        })
-        .catch((error) => {
-          const { response } = error;
-          const { data } = response;
-
-          rejcet(data?.errors);
-        });
-    });
-};
-
-export const deletePaymentReceive = ({ id }) => {
-  return (dispatch) =>
-    new Promise((resovle, reject) => {
-      ApiService.delete(`sales/payment_receives/${id}`)
-        .then((response) => {
-          dispatch({ type: t.PAYMENT_RECEIVE_DELETE, payload: { id } });
-          resovle(response);
-        })
-        .catch((error) => {
-          reject(error.response.data.errors || []);
-        });
-    });
-};
-
-export const fetchPaymentReceive = ({ id }) => {
-  return (dispatch) =>
-    new Promise((resovle, reject) => {
-      ApiService.get(`sales/payment_receives/${id}`, {})
-        .then((response) => {
-          dispatch({
-            type: t.PAYMENT_RECEIVE_SET,
-            payload: {
-              id,
-              paymentReceive: response.data.payment_receive,
-            },
-          });
-          dispatch({
-            type: t.INVOICES_ITEMS_SET,
-            payload: {
-              sales_invoices: response.data.receivable_invoices,
-            },
-          });
-          dispatch({
-            type: t.INVOICES_ITEMS_SET,
-            payload: {
-              sales_invoices: response.data.payment_invoices,
-            },
-          });
-          dispatch({
-            type: t.INVOICES_RECEIVABLE_BY_PAYMENT_ID,
-            payload: {
-              paymentReceiveId: response.data.payment_receive.id,
-              saleInvoices: response.data.receivable_invoices,
-            },
-          });
-          dispatch({
-            type: t.INVOICES_BY_PAYMENT_ID,
-            payload: {
-              paymentReceiveId: response.data.payment_receive.id,
-              saleInvoices: response.data.payment_invoices,
-            },
-          });
-          resovle(response);
-        })
-        .catch((error) => {
-          reject(error);
-        });
-    });
-};
-
-export const fetchPaymentReceivesTable = ({ query = {} }) => {
-  return (dispatch, getState) =>
-    new Promise((resolve, rejcet) => {
-      const pageQuery = getState().paymentReceives.tableQuery;
-
-      dispatch({
-        type: t.PAYMENT_RECEIVES_TABLE_LOADING,
-        payload: {
-          loading: true,
-        },
-      });
-      ApiService.get('sales/payment_receives', {
-        params: { ...pageQuery, ...query },
-      })
-        .then((response) => {
-          dispatch({
-            type: t.PAYMENT_RECEIVES_PAGE_SET,
-            payload: {
-              payment_receives: response.data.payment_receives,
-              pagination: response.data.pagination,
-              customViewId: response.data.customViewId || -1,
-            },
-          });
-          dispatch({
-            type: t.PAYMENT_RECEIVES_ITEMS_SET,
-            payload: {
-              payment_receives: response.data.payment_receives,
-            },
-          });
-          dispatch({
-            type: t.PAYMENT_RECEIVES_PAGINATION_SET,
-            payload: {
-              pagination: response.data.pagination,
-              customViewId: response.data.customViewId || -1,
-            },
-          });
-          dispatch({
-            type: t.PAYMENT_RECEIVES_TABLE_LOADING,
-            payload: {
-              loading: false,
-            },
-          });
-          resolve(response);
-        })
-        .catch((error) => {
-          rejcet(error);
-        });
-    });
-};
diff --git a/client/src/store/PaymentReceive/paymentReceive.reducer.js b/client/src/store/PaymentReceive/paymentReceive.reducer.js
deleted file mode 100644
index 7a67d9dbb..000000000
--- a/client/src/store/PaymentReceive/paymentReceive.reducer.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import { createReducer } from '@reduxjs/toolkit';
-import { omit } from 'lodash';
-import {
-  journalNumberChangedReducer,
-  viewPaginationSetReducer,
-  createTableQueryReducers,
-} from 'store/journalNumber.reducer';
-import t from 'store/types';
-
-const initialState = {
-  items: {},
-  views: {},
-  loading: false,
-  currentViewId: -1,
-  tableQuery: {
-    page_size: 12,
-    page: 1,
-  },
-};
-
-const defaultPaymentReceive = {
-  entries: [],
-};
-
-export default createReducer(initialState, {
-  [t.PAYMENT_RECEIVE_SET]: (state, action) => {
-    const { id, paymentReceive } = action.payload;
-
-    const _paymentReceive = {
-      ...paymentReceive,
-      entries: paymentReceive.entries.map((e) => {
-        return { ...omit(e, ['invoice']) };
-      }),
-    };
-
-    const oldPaymentReceive = state.items[id] || {};
-    state.items[id] = {
-      ...defaultPaymentReceive,
-      ...oldPaymentReceive,
-      ..._paymentReceive,
-    };
-  },
-
-  [t.PAYMENT_RECEIVES_TABLE_LOADING]: (state, action) => {
-    const { loading } = action.payload;
-    state.loading = loading;
-  },
-
-  [t.PAYMENT_RECEIVES_ITEMS_SET]: (state, action) => {
-    const { payment_receives } = action.payload;
-    const _payment_receives = {};
-    payment_receives.forEach((payment_receive) => {
-      _payment_receives[payment_receive.id] = {
-        ...defaultPaymentReceive,
-        ...payment_receive,
-      };
-    });
-    state.items = {
-      ...state.items,
-      ..._payment_receives,
-    };
-  },
-
-  [t.PAYMENT_RECEIVE_SET_CURRENT_VIEW]: (state, action) => {
-    state.currentViewId = action.currentViewId;
-  },
-
-  [t.PAYMENT_RECEIVE_DELETE]: (state, action) => {
-    const { id } = action.payload;
-
-    if (typeof state.items[id] !== 'undefined') {
-      delete state.items[id];
-    }
-  },
-
-  [t.PAYMENT_RECEIVES_PAGE_SET]: (state, action) => {
-    const { customViewId, payment_receives, pagination } = action.payload;
-
-    const viewId = customViewId || -1;
-    const view = state.views[viewId] || {};
-    state.views[viewId] = {
-      ...view,
-      pages: {
-        ...(state.views?.[viewId]?.pages || {}),
-        [pagination.page]: {
-          ids: payment_receives.map((i) => i.id),
-        },
-      },
-    };
-  },
-
-  ...journalNumberChangedReducer(t.PAYMENT_RECEIVE_NUMBER_CHANGED),
-  ...viewPaginationSetReducer(t.PAYMENT_RECEIVES_PAGINATION_SET),
-  ...createTableQueryReducers('PAYMENT_RECEIVES'),
-});
diff --git a/client/src/store/PaymentReceive/paymentReceive.selector.js b/client/src/store/PaymentReceive/paymentReceive.selector.js
deleted file mode 100644
index 0764377b1..000000000
--- a/client/src/store/PaymentReceive/paymentReceive.selector.js
+++ /dev/null
@@ -1,136 +0,0 @@
-import { createSelector } from '@reduxjs/toolkit';
-import {
-  pickItemsFromIds,
-  paginationLocationQuery,
-  defaultPaginationMeta,
-} from 'store/selectors';
-import { transformToObject } from 'utils';
-
-const paymentReceivesPageSelector = (state) => {
-  const viewId = state.paymentReceives.currentViewId;
-  const viewMeta = state.paymentReceives.views?.[viewId];
-
-  const currentPageId = viewMeta?.paginationMeta?.page;
-  return viewMeta?.pages?.[currentPageId];
-};
-
-const paymentReceivesItemsSelector = (state) => state.paymentReceives.items;
-const paymentReceiveTableQuery = (state) => state.paymentReceives.tableQuery;
-
-const PaymentReceivePaginationSelector = (state, props) => {
-  const viewId = state.paymentReceives.currentViewId;
-  return state.paymentReceives.views?.[viewId];
-};
-const invoicesItemsSelector = (state) => state.salesInvoices.items;
-
-const payemntReceiveById = (state, props) =>
-  state.paymentReceives.items[props.paymentReceiveId];
-
-const invoicesReceivableByPaymentReceiveSelector = (state, props) =>
-  state.salesInvoices.receivable.byPaymentReceiveId[props.paymentReceiveId];
-
-const paymentReceiveInvoicesSelector = (state, props) =>
-  state.salesInvoices.byPaymentReceiveId[props.paymentReceiveId];
-
-const paymentReceiveByIdSelector = (state, props) =>
-  state.paymentReceives.items[props.paymentReceiveId];
-
-const paymentReceivesCurrentViewIdSelector = (state) =>
-  state.paymentReceives.currentViewId;
-
-// Retrieve payment receive current page results.
-export const getPaymentReceiveCurrentPageFactory = () =>
-  createSelector(
-    paymentReceivesPageSelector,
-    paymentReceivesItemsSelector,
-    (expensesPage, expensesItems) => {
-      return typeof expensesPage === 'object'
-        ? pickItemsFromIds(expensesItems, expensesPage.ids) || []
-        : [];
-    },
-  );
-
-// Retrieve payment receives table fetch query.
-export const getPaymentReceiveTableQuery = createSelector(
-  paginationLocationQuery,
-  paymentReceiveTableQuery,
-  (locationQuery, tableQuery) => {
-    return {
-      ...locationQuery,
-      ...tableQuery,
-    };
-  },
-);
-
-// Retrieve payment receive pagination meta.
-export const getPaymentReceivePaginationMetaFactory = () =>
-  createSelector(PaymentReceivePaginationSelector, (page) => {
-    return {
-      ...defaultPaginationMeta(),
-      ...(page?.paginationMeta || {}),
-    };
-  });
-
-// Retrieve payment receive based on the passed payment receive id.
-export const getPaymentReceiveByIdFactory = () =>
-  createSelector(payemntReceiveById, (payment_receive) => {
-    return payment_receive;
-  });
-
-// Retrieve the payment receive associated invoices.
-export const getPaymentReceiveInvoices = createSelector(
-  payemntReceiveById,
-  invoicesItemsSelector,
-  (paymentRecieve, items) => {
-    return typeof paymentRecieve === 'object'
-      ? pickItemsFromIds(
-          items,
-          paymentRecieve.entries.map((entry) => entry.invoice_id),
-        )
-      : [];
-  },
-);
-
-// Retrieve payment receive invoices entries.
-export const getPaymentReceiveEntriesFactory = () =>
-  createSelector(
-    invoicesItemsSelector,
-    invoicesReceivableByPaymentReceiveSelector,
-    paymentReceiveInvoicesSelector,
-    paymentReceiveByIdSelector,
-    (
-      invoicesItems,
-      paymentReceivableInvoicesIds,
-      paymentReceiveInvoicesIds,
-      paymentReceive,
-    ) => {
-      const invoicesIds = [
-        ...(paymentReceivableInvoicesIds || []),
-        ...(paymentReceiveInvoicesIds || []),
-      ];
-      const invoices = pickItemsFromIds(invoicesItems, invoicesIds);
-      const invoicesEntries = transformToObject(
-        paymentReceive?.entries || [],
-        'invoice_id',
-      );
-
-      return invoices.map((invoice) => {
-        const paymentReceiveEntry = invoicesEntries?.[invoice.id] || {};
-
-        return {
-          ...invoice,
-          invoice_id: invoice.id,
-          total_payment_amount: invoice.payment_amount,
-          id: paymentReceiveEntry?.id,
-          payment_amount: paymentReceiveEntry?.payment_amount,
-        };
-      });
-    },
-  );
-
-// Retrieve payment receives current view id.
-export const getPaymentReceivesCurrentViewIdFactory = () =>
-  createSelector(
-    paymentReceivesCurrentViewIdSelector,
-    (currentViewId) => currentViewId,
-  );
diff --git a/client/src/store/PaymentReceive/paymentReceive.type.js b/client/src/store/PaymentReceive/paymentReceive.type.js
deleted file mode 100644
index c2429f3b5..000000000
--- a/client/src/store/PaymentReceive/paymentReceive.type.js
+++ /dev/null
@@ -1,12 +0,0 @@
-export default {
-  PAYMENT_RECEIVE_LIST_SET: 'PAYMENT_RECEIVE_LIST_SET',
-  PAYMENT_RECEIVE_DELETE: 'PAYMENT_RECEIVE_DELETE',
-  PAYMENT_RECEIVE_SET: 'PAYMENT_RECEIVE_SET',
-  PAYMENT_RECEIVES_SET_CURRENT_VIEW: 'PAYMENT_RECEIVES_SET_CURRENT_VIEW',
-  PAYMENT_RECEIVES_TABLE_QUERIES_ADD: 'PAYMENT_RECEIVES/TABLE_QUERIES_ADD',
-  PAYMENT_RECEIVES_TABLE_LOADING: 'PAYMENT_RECEIVES_TABLE_LOADING',
-  PAYMENT_RECEIVES_PAGE_SET: 'PAYMENT_RECEIVES_PAGE_SET',
-  PAYMENT_RECEIVES_ITEMS_SET: 'PAYMENT_RECEIVES_ITEMS_SET',
-  PAYMENT_RECEIVES_PAGINATION_SET: 'PAYMENT_RECEIVES_PAGINATION_SET',
-  PAYMENT_RECEIVE_NUMBER_CHANGED: 'PAYMENT_RECEIVE_NUMBER_CHANGED',
-};
diff --git a/client/src/store/PaymentReceives/paymentReceives.actions.js b/client/src/store/PaymentReceives/paymentReceives.actions.js
new file mode 100644
index 000000000..adbcec26b
--- /dev/null
+++ b/client/src/store/PaymentReceives/paymentReceives.actions.js
@@ -0,0 +1,10 @@
+import t from 'store/types';
+
+export const setPaymentReceivesTableState = (queries) => {
+  return {
+    type: t.PAYMENT_RECEIVES_TABLE_STATE_SET,
+    payload: { queries },
+  };
+};
+
+export const setSelectedRowsItems = () => {};
diff --git a/client/src/store/PaymentReceives/paymentReceives.reducer.js b/client/src/store/PaymentReceives/paymentReceives.reducer.js
new file mode 100644
index 000000000..59b44a40b
--- /dev/null
+++ b/client/src/store/PaymentReceives/paymentReceives.reducer.js
@@ -0,0 +1,15 @@
+import { createReducer } from '@reduxjs/toolkit';
+import {
+  createTableStateReducers,
+} from 'store/tableState.reducer';
+
+const initialState = {
+  tableState: {
+    pageSize: 12,
+    pageIndex: 0,
+  },
+};
+
+export default createReducer(initialState, {
+  ...createTableStateReducers('PAYMENT_RECEIVES'),
+});
diff --git a/client/src/store/PaymentReceives/paymentReceives.selector.js b/client/src/store/PaymentReceives/paymentReceives.selector.js
new file mode 100644
index 000000000..7f9b53587
--- /dev/null
+++ b/client/src/store/PaymentReceives/paymentReceives.selector.js
@@ -0,0 +1,18 @@
+import { createSelector } from '@reduxjs/toolkit';
+import {
+  paginationLocationQuery,
+} from 'store/selectors';
+
+const paymentReceiveTableState = (state) => state.paymentReceives.tableState;
+
+// Retrieve payment receives table fetch query.
+export const getPaymentReceiveTableStateFactory = () => createSelector(
+  paginationLocationQuery,
+  paymentReceiveTableState,
+  (locationQuery, tableState) => {
+    return {
+      ...locationQuery,
+      ...tableState,
+    };
+  },
+);
\ No newline at end of file
diff --git a/client/src/store/PaymentReceives/paymentReceives.type.js b/client/src/store/PaymentReceives/paymentReceives.type.js
new file mode 100644
index 000000000..4ec311f8a
--- /dev/null
+++ b/client/src/store/PaymentReceives/paymentReceives.type.js
@@ -0,0 +1,3 @@
+export default {
+  PAYMENT_RECEIVES_TABLE_STATE_SET: 'PAYMENT_RECEIVES/TABLE_STATE_SET',
+};
diff --git a/client/src/store/receipt/receipt.actions.js b/client/src/store/receipt/receipt.actions.js
deleted file mode 100644
index ea8d00a23..000000000
--- a/client/src/store/receipt/receipt.actions.js
+++ /dev/null
@@ -1,124 +0,0 @@
-import ApiService from 'services/ApiService';
-import t from 'store/types';
-
-export const submitReceipt = ({ form }) => {
-  return (dispatch) =>
-    new Promise((resolve, reject) => {
-      ApiService.post('sales/receipts', form)
-        .then((response) => {
-          resolve(response);
-        })
-        .catch((error) => {
-          const { response } = error;
-          const { data } = response;
-          reject(data?.errors);
-        });
-    });
-};
-
-export const deleteReceipt = ({ id }) => {
-  return (dispatch) =>
-    new Promise((resovle, reject) => {
-      ApiService.delete(`sales/receipts/${id}`)
-        .then((response) => {
-          dispatch({
-            type: t.RECEIPT_DELETE,
-            payload: { id },
-          });
-          resovle(response);
-        })
-        .catch((error) => {
-          reject(error.response.data.errors || []);
-        });
-    });
-};
-
-export const editReceipt = (id, form) => {
-  return (dispatch) =>
-    new Promise((resolve, rejcet) => {
-      ApiService.post(`sales/receipts/${id}`, form)
-        .then((response) => {
-          resolve(response);
-        })
-        .catch((error) => {
-          const { response } = error;
-          const { data } = response;
-
-          rejcet(data?.errors);
-        });
-    });
-};
-
-export const fetchReceipt = ({ id }) => {
-  return (dispatch) =>
-    new Promise((resovle, reject) => {
-      ApiService.get(`sales/receipts/${id}`)
-        .then((response) => {
-          dispatch({
-            type: t.RECEIPT_SET,
-            payload: { id, sale_receipt: response.data.sale_receipt },
-          });
-          resovle(response);
-        })
-        .catch((error) => {
-          const { response } = error;
-          const { data } = response;
-          reject(data?.errors);
-        });
-    });
-};
-
-export const fetchReceiptsTable = ({ query = {} }) => {
-  return (dispatch, getState) =>
-    new Promise((resolve, rejcet) => {
-      const pageQuery = getState().salesReceipts.tableQuery;
-      dispatch({
-        type: t.RECEIPTS_TABLE_LOADING,
-        payload: {
-          loading: true,
-        },
-      });
-      ApiService.get('sales/receipts', {
-        params: { ...pageQuery, ...query },
-      })
-        .then((response) => {
-          dispatch({
-            type: t.RECEIPTS_PAGE_SET,
-            payload: {
-              sales_receipts: response.data.sale_receipts,
-              pagination: response.data.pagination,
-              customViewId:
-                response.data?.filter_meta?.view?.custom_view_id || -1,
-            },
-          });
-          dispatch({
-            type: t.RECEIPTS_ITEMS_SET,
-            payload: {
-              sales_receipts: response.data.sale_receipts,
-            },
-          });
-          dispatch({
-            type: t.RECEIPTS_PAGINATION_SET,
-            payload: {
-              pagination: response.data.pagination,
-              customViewId:
-                response.data?.filter_meta?.view?.custom_view_id || -1,
-            },
-          });
-          dispatch({
-            type: t.RECEIPTS_TABLE_LOADING,
-            payload: {
-              loading: false,
-            },
-          });
-          resolve(response);
-        })
-        .catch((error) => {
-          rejcet(error);
-        });
-    });
-};
-
-export const closeReceipt = ({ id }) => {
-  return (dispatch) => ApiService.post(`sales/receipts/${id}/close`);
-};
diff --git a/client/src/store/receipt/receipt.reducer.js b/client/src/store/receipt/receipt.reducer.js
deleted file mode 100644
index 298f749aa..000000000
--- a/client/src/store/receipt/receipt.reducer.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import { createReducer } from '@reduxjs/toolkit';
-import t from 'store/types';
-import { journalNumberChangedReducer, createTableQueryReducers } from 'store/journalNumber.reducer';
-
-const initialState = {
-  items: {},
-  views: {},
-  loading: false,
-  tableQuery: {
-    page_size: 12,
-    page: 1,
-  },
-  currentViewId: -1,
-};
-
-const defaultReceipt = {
-  entries: [],
-};
-
-export default createReducer(initialState, {
-  [t.RECEIPT_SET]: (state, action) => {
-    const { id, sale_receipt } = action.payload;
-    const _receipt = state.items[id] || {};
-    state.items[id] = { ...defaultReceipt, ..._receipt, ...sale_receipt };
-  },
-
-  [t.RECEIPTS_ITEMS_SET]: (state, action) => {
-    const { sales_receipts } = action.payload;
-    const _receipts = {};
-    sales_receipts.forEach((receipt) => {
-      _receipts[receipt.id] = {
-        ...defaultReceipt,
-        ...receipt,
-      };
-    });
-    state.items = {
-      ...state.items,
-      ..._receipts,
-    };
-  },
-
-  [t.RECEIPTS_TABLE_LOADING]: (state, action) => {
-    const { loading } = action.payload;
-    state.loading = loading;
-  },
-
-  [t.RECEIPT_DELETE]: (state, action) => {
-    const { id } = action.payload;
-    if (typeof state.items[id] !== 'undefined') {
-      delete state.items[id];
-    }
-  },
-
-  [t.RECEIPTS_SET_CURRENT_VIEW]: (state, action) => {
-    state.currentViewId = action.currentViewId;
-  },
-
-  [t.RECEIPTS_PAGE_SET]: (state, action) => {
-    const { customViewId, sales_receipts, pagination } = action.payload;
-
-    const viewId = customViewId || -1;
-    const view = state.views[viewId] || {};
-    state.views[viewId] = {
-      ...view,
-      pages: {
-        ...(state.views?.[viewId]?.pages || {}),
-        [pagination.page]: {
-          ids: sales_receipts.map((i) => i.id),
-        },
-      },
-    };
-  },
-
-  [t.RECEIPTS_PAGINATION_SET]: (state, action) => {
-    const { pagination, customViewId } = action.payload;
-
-    const mapped = {
-      pageSize: parseInt(pagination.page_size, 10),
-      page: parseInt(pagination.page, 10),
-      total: parseInt(pagination.total, 10),
-    };
-    const paginationMeta = {
-      ...mapped,
-      pagesCount: Math.ceil(mapped.total / mapped.pageSize),
-      pageIndex: Math.max(mapped.page - 1, 0),
-    };
-    state.views = {
-      ...state.views,
-      [customViewId]: {
-        ...(state.views?.[customViewId] || {}),
-        paginationMeta,
-      },
-    };
-  },
-  ...journalNumberChangedReducer(t.RECEIPT_NUMBER_CHANGED),
-  ...createTableQueryReducers('RECEIPTS'),
-});
-
-export const getReceiptById = (state, id) => {
-  return state.receipts.items[id];
-};
diff --git a/client/src/store/receipt/receipt.selector.js b/client/src/store/receipt/receipt.selector.js
deleted file mode 100644
index f39d4c9da..000000000
--- a/client/src/store/receipt/receipt.selector.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import { createSelector } from '@reduxjs/toolkit';
-import { pickItemsFromIds, paginationLocationQuery } from 'store/selectors';
-
-const receiptsPageSelector = (state) => {
-  const viewId = state.salesReceipts.currentViewId;
-  const currentView = state.salesReceipts.views?.[viewId];
-  const currentPageId = currentView?.paginationMeta?.page;
-
-  return currentView?.pages?.[currentPageId];
-};
-
-const receiptsPaginationSelector = (state, props) => {
-  const viewId = state.salesReceipts.currentViewId;
-  return state.salesReceipts.views?.[viewId];
-};
-
-const receiptItemsSelector = (state) => state.salesReceipts.items;
-
-const receiptTableQuery = (state) => state.salesReceipts.tableQuery;
-
-const receiptByIdSelector = (state, props) => state.salesReceipts.items[props.receiptId];
-
-const receiptsCurrentViewIdSelector = (state) => state.salesReceipts.currentViewId;
-
-// Retrieve current page sale receipts results. 
-export const getReceiptCurrentPageFactory = () =>
-  createSelector(
-    receiptsPageSelector,
-    receiptItemsSelector,
-    (receiptPage, receiptItems) => {
-      return typeof receiptPage === 'object'
-        ? pickItemsFromIds(receiptItems, receiptPage.ids) || []
-        : [];
-    },
-  );
-
-// Retrieve receipts table query.
-export const getReceiptsTableQueryFactory = () =>
-  createSelector(
-    paginationLocationQuery,
-    receiptTableQuery,
-    (locationQuery, tableQuery) => {
-      return {
-        ...locationQuery,
-        ...tableQuery,
-      };
-    },
-  );
-
-// Retrieve specific receipts by the passed receipt id.
-export const getReceiptByIdFactory = () =>
-  createSelector(receiptByIdSelector, (receipt) => {
-    return receipt;
-  });
-
-// Retrieve receipts pagination meta.
-export const getReceiptsPaginationMetaFactory = () =>
-  createSelector(receiptsPaginationSelector, (receiptPage) => {
-    return receiptPage?.paginationMeta || {};
-  });
-
-// Retrieve receipts current view id.
-export const getReceiptsCurrentViewIdFactory = () => 
-  createSelector(
-    receiptsCurrentViewIdSelector,
-    (currentViewId) => currentViewId);
\ No newline at end of file
diff --git a/client/src/store/receipt/receipt.type.js b/client/src/store/receipt/receipt.type.js
deleted file mode 100644
index 62a809717..000000000
--- a/client/src/store/receipt/receipt.type.js
+++ /dev/null
@@ -1,13 +0,0 @@
-export default {
-  RECEIPT_DELETE: 'RECEIPT_DELETE',
-  RECEIPTS_BULK_DELETE: 'RECEIPTS_BULK_DELETE',
-  RECEIPTS_LIST_SET: 'RECEIPTS_LIST_SET',
-  RECEIPT_SET: 'RECEIPT_SET',
-  RECEIPTS_SET_CURRENT_VIEW: 'RECEIPTS_SET_CURRENT_VIEW',
-  RECEIPTS_TABLE_QUERIES_ADD: 'RECEIPTS/TABLE_QUERIES_ADD',
-  RECEIPTS_TABLE_LOADING: 'RECEIPTS_TABLE_LOADING',
-  RECEIPTS_PAGINATION_SET: 'RECEIPTS_PAGINATION_SET',
-  RECEIPTS_PAGE_SET: 'RECEIPTS_PAGE_SET',
-  RECEIPTS_ITEMS_SET: 'RECEIPTS_ITEMS_SET',
-  RECEIPT_NUMBER_CHANGED:'RECEIPT_NUMBER_CHANGED'
-};
diff --git a/client/src/store/receipts/receipts.actions.js b/client/src/store/receipts/receipts.actions.js
new file mode 100644
index 000000000..cda294cd6
--- /dev/null
+++ b/client/src/store/receipts/receipts.actions.js
@@ -0,0 +1,10 @@
+import t from 'store/types';
+
+export const setReceiptsTableState = (queries) => {
+  return {
+    type: t.RECEIPTS_TABLE_STATE_SET,
+    payload: { queries },
+  };
+};
+
+export const setSelectedRowsItems = () => {};
diff --git a/client/src/store/receipts/receipts.reducer.js b/client/src/store/receipts/receipts.reducer.js
new file mode 100644
index 000000000..b4281556c
--- /dev/null
+++ b/client/src/store/receipts/receipts.reducer.js
@@ -0,0 +1,15 @@
+import { createReducer } from '@reduxjs/toolkit';
+import {
+  createTableStateReducers,
+} from 'store/tableState.reducer';
+
+const initialState = {
+  tableState: {
+    pageSize: 12,
+    pageIndex: 0,
+  },
+};
+ 
+export default createReducer(initialState, {
+  ...createTableStateReducers('RECEIPTS'),
+});
\ No newline at end of file
diff --git a/client/src/store/receipts/receipts.selector.js b/client/src/store/receipts/receipts.selector.js
new file mode 100644
index 000000000..de41b4650
--- /dev/null
+++ b/client/src/store/receipts/receipts.selector.js
@@ -0,0 +1,17 @@
+import { paginationLocationQuery } from 'store/selectors';
+import { createDeepEqualSelector } from 'utils';
+
+const receiptTableStateSelector = (state) => state.salesReceipts.tableState;
+
+// Retrieve receipts table query.
+export const getReceiptsTableStateFactory = () =>
+  createDeepEqualSelector(
+    paginationLocationQuery,
+    receiptTableStateSelector,
+    (locationQuery, tableState) => {
+      return {
+        ...locationQuery,
+        ...tableState,
+      };
+    },
+  );
diff --git a/client/src/store/receipts/receipts.type.js b/client/src/store/receipts/receipts.type.js
new file mode 100644
index 000000000..68459985f
--- /dev/null
+++ b/client/src/store/receipts/receipts.type.js
@@ -0,0 +1,4 @@
+
+export default {
+  RECEIPTS_TABLE_STATE_SET: 'RECEIPTS/TABLE_STATE_SET',
+};
\ No newline at end of file
diff --git a/client/src/store/reducers.js b/client/src/store/reducers.js
index a425bceff..118be5e31 100644
--- a/client/src/store/reducers.js
+++ b/client/src/store/reducers.js
@@ -20,11 +20,11 @@ import globalErrors from './globalErrors/globalErrors.reducer';
 import customers from './customers/customers.reducer';
 import salesEstimates from './Estimate/estimates.reducer';
 import salesInvoices from './Invoice/invoices.reducer';
-import salesReceipts from './receipt/receipt.reducer';
+import salesReceipts from './receipts/receipts.reducer';
 import bills from './Bills/bills.reducer';
 import vendors from './vendors/vendors.reducer';
-import paymentReceives from './PaymentReceive/paymentReceive.reducer';
-import paymentMades from './PaymentMades/paymentMade.reducer';
+import paymentReceives from './PaymentReceives/paymentReceives.reducer';
+import paymentMades from './PaymentMades/paymentMades.reducer';
 import organizations from './organizations/organizations.reducers';
 import subscriptions from './subscription/subscription.reducer';
 import inventoryAdjustments from './inventoryAdjustments/inventoryAdjustment.reducer';
diff --git a/client/src/store/types.js b/client/src/store/types.js
index d1f68db25..d72aa65e6 100644
--- a/client/src/store/types.js
+++ b/client/src/store/types.js
@@ -19,11 +19,11 @@ import exchangeRate from './ExchangeRate/exchange.type';
 import customer from './customers/customers.type';
 import estimates from './Estimate/estimates.types';
 import invoices from './Invoice/invoices.types';
-import receipts from './receipt/receipt.type';
+import receipts from './receipts/receipts.type';
 import bills from './Bills/bills.type';
 import vendors from './vendors/vendors.types';
-import paymentReceives from './PaymentReceive/paymentReceive.type';
-import paymentMades from './PaymentMades/paymentMade.type';
+import paymentReceives from './PaymentReceives/paymentReceives.type';
+import paymentMades from './PaymentMades/paymentMades.type';
 import organizations from './organizations/organizations.types';
 import subscription from './subscription/subscription.types';
 import inventoryAdjustments from './inventoryAdjustments/inventoryAdjustment.type';
diff --git a/client/src/style/pages/Expense/List.scss b/client/src/style/pages/Expense/List.scss
new file mode 100644
index 000000000..1f2ed83f5
--- /dev/null
+++ b/client/src/style/pages/Expense/List.scss
@@ -0,0 +1,20 @@
+
+// Blueprint framework.
+// @import '@blueprintjs/core/src/blueprint.scss';
+
+.dashboard__insider--expenses {
+    .bigcapital-datatable {
+      .table {
+        .tbody {
+          
+
+            .td.total_amount{
+                span{
+                    font-weight: 500;
+                }
+            }
+        }
+      }
+    }
+  }
+  
\ No newline at end of file
diff --git a/client/src/style/pages/ManualJournal/List.scss b/client/src/style/pages/ManualJournal/List.scss
index 201618ef1..340c0ca64 100644
--- a/client/src/style/pages/ManualJournal/List.scss
+++ b/client/src/style/pages/ManualJournal/List.scss
@@ -7,9 +7,10 @@
       .td.amount {
         .bp3-popover-target {
           border-bottom: 1px solid #e7e7e7;
-        }
-        > span {
-          font-weight: 600;
+
+          > span {
+            font-weight: 500;
+          }
         }
       }
       .note {