diff --git a/client/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.js b/client/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.js
index 848bf23c9..2b3a6c50e 100644
--- a/client/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.js
+++ b/client/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.js
@@ -7,6 +7,7 @@ import ManualJournalsEmptyStatus from './ManualJournalsEmptyStatus';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
 
+import withManualJournals from './withManualJournals';
 import withManualJournalsActions from './withManualJournalsActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 
@@ -26,6 +27,9 @@ function ManualJournalsDataTable({
   // #withAlertsActions
   openAlert,
 
+  // #withManualJournals
+  manualJournalsTableState,
+
   // #ownProps
   onSelectedRowsChange,
 }) {
@@ -80,6 +84,7 @@ function ManualJournalsDataTable({
       noInitialFetch={true}
       columns={columns}
       data={manualJournals}
+      initialState={manualJournalsTableState}
       manualSortBy={true}
       selectionColumn={true}
       expandable={true}
@@ -106,5 +111,8 @@ function ManualJournalsDataTable({
 
 export default compose(
   withManualJournalsActions,
+  withManualJournals(({ manualJournalsTableState }) => ({
+    manualJournalsTableState,
+  })),
   withAlertsActions,
 )(ManualJournalsDataTable);
diff --git a/client/src/containers/Accounting/JournalsLanding/ManualJournalsList.js b/client/src/containers/Accounting/JournalsLanding/ManualJournalsList.js
index 042db2dfe..8e6d4b8ae 100644
--- a/client/src/containers/Accounting/JournalsLanding/ManualJournalsList.js
+++ b/client/src/containers/Accounting/JournalsLanding/ManualJournalsList.js
@@ -1,5 +1,4 @@
-import React, { useEffect } from 'react';
-import { useIntl } from 'react-intl';
+import React from 'react';
 
 import { DashboardContentTable, DashboardPageContent } from 'components';
 
@@ -9,7 +8,6 @@ import ManualJournalsViewTabs from './ManualJournalsViewTabs';
 import ManualJournalsDataTable from './ManualJournalsDataTable';
 import ManualJournalsActionsBar from './ManualJournalActionsBar';
 
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withManualJournals from './withManualJournals';
 
 import { transformTableStateToQuery, compose } from 'utils';
@@ -20,19 +18,9 @@ import 'style/pages/ManualJournal/List.scss';
  * Manual journals table.
  */
 function ManualJournalsTable({
-  // #withDashboardActions
-  changePageTitle,
-
   // #withManualJournals
   journalsTableState,
 }) {
-  const { formatMessage } = useIntl();
-
-  // Handle update the page title.
-  useEffect(() => {
-    changePageTitle(formatMessage({ id: 'manual_journals' }));
-  }, [changePageTitle, formatMessage]);
-
   return (
     <ManualJournalsListProvider
       query={transformTableStateToQuery(journalsTableState)}
@@ -53,7 +41,6 @@ function ManualJournalsTable({
 }
 
 export default compose(
-  withDashboardActions,
   withManualJournals(({ manualJournalsTableState }) => ({
     journalsTableState: manualJournalsTableState,
   })),
diff --git a/client/src/containers/Customers/CustomersLanding/CustomersTable.js b/client/src/containers/Customers/CustomersLanding/CustomersTable.js
index d47a49f60..522d29c6b 100644
--- a/client/src/containers/Customers/CustomersLanding/CustomersTable.js
+++ b/client/src/containers/Customers/CustomersLanding/CustomersTable.js
@@ -7,6 +7,7 @@ import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
 
 import { DataTable } from 'components';
 
+import withCustomers from './withCustomers';
 import withCustomersActions from './withCustomersActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -23,6 +24,9 @@ function CustomersTable({
   // #withCustomersActions
   setCustomersTableState,
 
+  // #withCustomers
+  customersTableState,
+
   // #withAlerts
   openAlert,
 }) {
@@ -71,6 +75,7 @@ function CustomersTable({
       noInitialFetch={true}
       columns={columns}
       data={customers}
+      initialState={customersTableState}
       loading={isCustomersLoading}
       headerLoading={isCustomersLoading}
       progressBarLoading={isCustomersFetching}
@@ -100,4 +105,5 @@ export default compose(
   withAlertsActions,
   withDialogActions,
   withCustomersActions,
+  withCustomers(({ customersTableState }) => ({ customersTableState })),
 )(CustomersTable);
diff --git a/client/src/containers/Purchases/Bills/BillsLanding/BillsTable.js b/client/src/containers/Purchases/Bills/BillsLanding/BillsTable.js
index 48a4628e2..367d2f4ef 100644
--- a/client/src/containers/Purchases/Bills/BillsLanding/BillsTable.js
+++ b/client/src/containers/Purchases/Bills/BillsLanding/BillsTable.js
@@ -9,6 +9,7 @@ import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
 
 import BillsEmptyStatus from './BillsEmptyStatus';
 
+import withBills from './withBills';
 import withBillActions from './withBillsActions';
 import withSettings from 'containers/Settings/withSettings';
 import withAlertsActions from 'containers/Alert/withAlertActions';
@@ -22,6 +23,9 @@ function BillsDataTable({
   // #withBillsActions
   setBillsTableState,
 
+  // #withBills
+  billsTableState,
+
   // #withAlerts
   openAlert,
 }) {
@@ -73,6 +77,7 @@ function BillsDataTable({
     <DataTable
       columns={columns}
       data={bills}
+      initialState={billsTableState}
       loading={isBillsLoading}
       headerLoading={isBillsLoading}
       progressBarLoading={isBillsFetching}
@@ -96,6 +101,7 @@ function BillsDataTable({
 }
 
 export default compose(
+  withBills(({ billsTableState }) => ({ billsTableState })),
   withBillActions,
   withAlertsActions,
   withSettings(({ organizationSettings }) => ({
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeForm.js b/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeForm.js
index 13fafe03b..385b03214 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeForm.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeForm.js
@@ -101,7 +101,9 @@ function PaymentMadeForm() {
 
     const onError = ({
       response: {
-        error: { data: errors },
+        error: {
+          data: { errors },
+        },
       },
     }) => {
       const getError = (errorType) => errors.find((e) => e.type === errorType);
@@ -116,9 +118,7 @@ function PaymentMadeForm() {
     };
 
     if (!isNewMode) {
-      editPaymentMadeMutate([paymentMadeId, form])
-        .then(onSaved)
-        .catch(onError);
+      editPaymentMadeMutate([paymentMadeId, form]).then(onSaved).catch(onError);
     } else {
       createPaymentMadeMutate(form).then(onSaved).catch(onError);
     }
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesListProvider.js b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesListProvider.js
index c5a3f38a7..b037b87da 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesListProvider.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesListProvider.js
@@ -12,7 +12,7 @@ const PaymentMadesListContext = createContext();
 /**
  * Accounts chart data provider.
  */
-function PaymentMadesListProvider({ accountsTableQuery, ...props }) {
+function PaymentMadesListProvider({ query, ...props }) {
   // Fetch accounts resource views and fields.
   const {
     data: paymentMadesViews,
@@ -30,7 +30,7 @@ function PaymentMadesListProvider({ accountsTableQuery, ...props }) {
     data: { paymentMades, pagination, filterMeta },
     isLoading: isPaymentsLoading,
     isFetching: isPaymentsFetching,
-  } = usePaymentMades(accountsTableQuery, { keepPreviousData: true });
+  } = usePaymentMades(query, { keepPreviousData: true });
 
   // Detarmines the datatable empty status.
   const isEmptyStatus =
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js
index 6d0ec890e..755dad9d4 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js
@@ -9,6 +9,7 @@ import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
 
 import withPaymentMadeActions from './withPaymentMadeActions';
+import withPaymentMade from './withPaymentMade';
 import withSettings from 'containers/Settings/withSettings';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import { usePaymentMadesTableColumns, ActionsMenu } from './components';
@@ -19,7 +20,10 @@ import { usePaymentMadesListContext } from './PaymentMadesListProvider';
  */
 function PaymentMadesTable({
   // #withPaymentMadeActions
-  addPaymentMadesTableQueries,
+  setPaymentMadesTableState,
+
+  // #withPaymentMade
+  paymentMadesTableState,
 
   // #withAlerts
   openAlert,
@@ -52,9 +56,9 @@ function PaymentMadesTable({
   // Handle datatable fetch data once the table state change.
   const handleDataTableFetchData = useCallback(
     ({ pageIndex, pageSize, sortBy }) => {
-      addPaymentMadesTableQueries({ pageIndex, pageSize, sortBy });
+      setPaymentMadesTableState({ pageIndex, pageSize, sortBy });
     },
-    [addPaymentMadesTableQueries],
+    [setPaymentMadesTableState],
   );
 
   // Display empty status instead of the table.
@@ -66,6 +70,7 @@ function PaymentMadesTable({
     <DataTable
       columns={columns}
       data={paymentMades}
+      initialState={paymentMadesTableState}
       onFetchData={handleDataTableFetchData}
       loading={isPaymentsLoading}
       headerLoading={isPaymentsLoading}
@@ -91,6 +96,7 @@ function PaymentMadesTable({
 
 export default compose(
   withPaymentMadeActions,
+  withPaymentMade(({ paymentMadesTableState }) => ({ paymentMadesTableState })),
   withAlertsActions,
   withSettings(({ organizationSettings }) => ({
     baseCurrency: organizationSettings?.baseCurrency,
diff --git a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js
index 29f3b9dc4..69205b52b 100644
--- a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js
@@ -9,6 +9,7 @@ import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withInvoices from './withInvoices'; 
 import withInvoiceActions from './withInvoiceActions';
 import withSettings from 'containers/Settings/withSettings';
 import withAlertsActions from 'containers/Alert/withAlertActions';
@@ -23,6 +24,9 @@ function InvoicesDataTable({
   // #withInvoicesActions
   setInvoicesTableState,
 
+  // #withInvoices
+  invoicesTableState,
+
   // #withSettings
   baseCurrency,
 
@@ -79,6 +83,7 @@ function InvoicesDataTable({
     <DataTable
       columns={columns}
       data={invoices}
+      initialState={invoicesTableState}
       loading={isInvoicesLoading}
       headerLoading={isInvoicesLoading}
       progressBarLoading={isInvoicesFetching}
@@ -109,6 +114,7 @@ export default compose(
   withDashboardActions,
   withInvoiceActions,
   withAlertsActions,
+  withInvoices(({ invoicesTableState }) => ({ invoicesTableState })),
   withSettings(({ organizationSettings }) => ({
     baseCurrency: organizationSettings?.baseCurrency,
   })),
diff --git a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js
index 6bf775718..ec5d8e649 100644
--- a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js
@@ -8,8 +8,9 @@ import { DataTable } from 'components';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
 
-import withAlertsActions from 'containers/Alert/withAlertActions';
+import withPaymentReceives from './withPaymentReceives';
 import withPaymentReceivesActions from './withPaymentReceivesActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
 import withSettings from 'containers/Settings/withSettings';
 import { usePaymentReceivesColumns, ActionsMenu } from './components';
 import { usePaymentReceivesListContext } from './PaymentReceiptsListProvider';
@@ -21,6 +22,9 @@ function PaymentReceivesDataTable({
   // #withPaymentReceivesActions
   setPaymentReceivesTableState,
 
+  // #withPaymentReceives
+  paymentReceivesTableState,
+
   // #withAlertsActions
   openAlert,
 }) {
@@ -70,6 +74,7 @@ function PaymentReceivesDataTable({
     <DataTable
       columns={columns}
       data={paymentReceives}
+      initialState={paymentReceivesTableState}
       loading={isPaymentReceivesLoading}
       headerLoading={isPaymentReceivesLoading}
       progressBarLoading={isPaymentReceivesFetching}
@@ -96,6 +101,9 @@ function PaymentReceivesDataTable({
 export default compose(
   withPaymentReceivesActions,
   withAlertsActions,
+  withPaymentReceives(({ paymentReceivesTableState }) => ({
+    paymentReceivesTableState,
+  })),
   withSettings(({ organizationSettings }) => ({
     baseCurrency: organizationSettings?.baseCurrency,
   })),
diff --git a/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js
index 568032b1b..120814d1f 100644
--- a/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js
+++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js
@@ -23,6 +23,9 @@ function ReceiptsDataTable({
   // #withReceiptsActions
   setReceiptsTableState,
 
+  // #withReceipts
+  receiptTableState,
+
   // #withSettings
   baseCurrency,
 
@@ -78,6 +81,7 @@ function ReceiptsDataTable({
     <DataTable
       columns={columns}
       data={receipts}
+      initialState={receiptTableState}
       loading={isReceiptsLoading}
       headerLoading={isReceiptsLoading}
       progressBarLoading={isReceiptsFetching}
diff --git a/client/src/containers/Vendors/VendorsLanding/VendorsTable.js b/client/src/containers/Vendors/VendorsLanding/VendorsTable.js
index 01573ad76..d02d7bdbf 100644
--- a/client/src/containers/Vendors/VendorsLanding/VendorsTable.js
+++ b/client/src/containers/Vendors/VendorsLanding/VendorsTable.js
@@ -1,9 +1,7 @@
 import React from 'react';
-import classNames from 'classnames';
 import { useHistory } from 'react-router';
 
-import { CLASSES } from 'common/classes';
-import { DataTable, Choose } from 'components';
+import { DataTable } from 'components';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
 
@@ -11,6 +9,7 @@ import VendorsEmptyStatus from './VendorsEmptyStatus';
 
 import { useVendorsListContext } from './VendorsListProvider';
 import withVendorsActions from './withVendorsActions';
+import withVendors from './withVendors';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 
 import { compose } from 'utils';
@@ -23,6 +22,9 @@ function VendorsTable({
   // #withVendorsActions
   setVendorsTableState,
 
+  // #withVendors
+  vendorsTableState,
+
   // #withAlertsActions
   openAlert,
 }) {
@@ -73,6 +75,7 @@ function VendorsTable({
       noInitialFetch={true}
       columns={columns}
       data={vendors}
+      initialState={vendorsTableState}
       loading={isVendorsLoading}
       headerLoading={isVendorsLoading}
       progressBarLoading={isVendorsFetching}
@@ -96,4 +99,8 @@ function VendorsTable({
   );
 }
 
-export default compose(withVendorsActions, withAlertsActions)(VendorsTable);
+export default compose(
+  withVendorsActions,
+  withAlertsActions,
+  withVendors(({ vendorsTableState }) => ({ vendorsTableState })),
+)(VendorsTable);
diff --git a/client/src/routes/dashboard.js b/client/src/routes/dashboard.js
index 8c2dcabcd..a814e2aec 100644
--- a/client/src/routes/dashboard.js
+++ b/client/src/routes/dashboard.js
@@ -59,6 +59,7 @@ export default [
     ),
     breadcrumb: 'Manual Journals',
     hotkey: 'shift+m',
+    pageTitle: formatMessage({ id: 'manual_journals' })
   },
   {
     path: `/items/categories`,
diff --git a/client/src/store/PaymentMades/paymentMades.reducer.js b/client/src/store/PaymentMades/paymentMades.reducer.js
index 5a3401e3f..626cc25e5 100644
--- a/client/src/store/PaymentMades/paymentMades.reducer.js
+++ b/client/src/store/PaymentMades/paymentMades.reducer.js
@@ -12,5 +12,5 @@ const initialState = {
 };
  
 export default createReducer(initialState, {
-  ...createTableStateReducers('ITEMS'),
+  ...createTableStateReducers('PAYMENT_MADES'),
 });