diff --git a/client/src/components/Dashboard/DashboardActionViewsList.js b/client/src/components/Dashboard/DashboardActionViewsList.js
index 0e42a8b9c..97f0b2836 100644
--- a/client/src/components/Dashboard/DashboardActionViewsList.js
+++ b/client/src/components/Dashboard/DashboardActionViewsList.js
@@ -24,17 +24,15 @@ export default function DashboardActionViewsList({
     onChange && onChange(view);
   };
 
-  const viewsMenuItems = views.map((view) => {
-    return (
-      <MenuItem onClick={() => handleClickViewItem(view)} text={view.name} />
-    );
-  });
+  const viewsMenuItems = views.map((view) => (
+    <MenuItem onClick={() => handleClickViewItem(view)} text={view.name} />
+  ));
 
   return (
     <Popover
       content={<Menu>{viewsMenuItems}</Menu>}
       minimal={true}
-      interactionKind={PopoverInteractionKind.HOVER}
+      interactionKind={PopoverInteractionKind.CLICK}
       position={Position.BOTTOM_LEFT}
     >
       <Button
diff --git a/client/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js b/client/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js
index 35f900df7..8fec15341 100644
--- a/client/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js
+++ b/client/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js
@@ -47,10 +47,8 @@ function ManualJournalActionsBar({
   };
 
   // Handle tab change.
-  const handleTabChange = (viewId) => {
-    setManualJournalsTableState({
-      customViewid: viewId.id || null,
-    });
+  const handleTabChange = (customView) => {
+    setManualJournalsTableState({ customViewId: customView.id || null });
   };
 
   return (
diff --git a/client/src/containers/Accounting/JournalsLanding/ManualJournalsViewTabs.js b/client/src/containers/Accounting/JournalsLanding/ManualJournalsViewTabs.js
index e4b06c652..afff4c4a3 100644
--- a/client/src/containers/Accounting/JournalsLanding/ManualJournalsViewTabs.js
+++ b/client/src/containers/Accounting/JournalsLanding/ManualJournalsViewTabs.js
@@ -43,7 +43,7 @@ function ManualJournalsViewTabs({
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
           resourceName={'manual-journals'}
-          customViewId={journalsTableState.customViewId}
+          currentViewId={journalsTableState.customViewId}
           tabs={tabs}
           onChange={handleTabChange}
           onNewViewTabClick={handleClickNewView}
diff --git a/client/src/containers/Accounts/AccountsActionsBar.js b/client/src/containers/Accounts/AccountsActionsBar.js
index e06eb7362..9920a4f76 100644
--- a/client/src/containers/Accounts/AccountsActionsBar.js
+++ b/client/src/containers/Accounts/AccountsActionsBar.js
@@ -69,8 +69,8 @@ function AccountsActionsBar({
   };
 
   // Handle tab changing.
-  const handleTabChange = (viewId) => {
-    setAccountsTableState({ customViewId: viewId.id || null });
+  const handleTabChange = (customView) => {
+    setAccountsTableState({ customViewId: customView.id || null });
   };
 
   return (
diff --git a/client/src/containers/Customers/CustomersLanding/CustomersViewsTabs.js b/client/src/containers/Customers/CustomersLanding/CustomersViewsTabs.js
index 081c184b0..de1478b03 100644
--- a/client/src/containers/Customers/CustomersLanding/CustomersViewsTabs.js
+++ b/client/src/containers/Customers/CustomersLanding/CustomersViewsTabs.js
@@ -34,16 +34,14 @@ function CustomersViewsTabs({
 
   // Handle tabs change.
   const handleTabsChange = (viewId) => {
-    setCustomersTableState({
-      customViewId: viewId || null,
-    });
+    setCustomersTableState({ customViewId: viewId || null });
   };
 
   return (
     <Navbar className="navbar--dashboard-views">
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
-          customViewId={customersTableState.customViewId}
+          currentViewId={customersTableState.customViewId}
           resourceName={'customers'}
           tabs={tabs}
           onChange={handleTabsChange}
diff --git a/client/src/containers/Items/withItemsActions.js b/client/src/containers/Items/withItemsActions.js
index 49ac134d7..d5e55cd04 100644
--- a/client/src/containers/Items/withItemsActions.js
+++ b/client/src/containers/Items/withItemsActions.js
@@ -3,11 +3,6 @@ import { setItemsTableState }from 'store/items/items.actions';
 
 export const mapDispatchToProps = (dispatch) => ({
   setItemsTableState: (queries) => dispatch(setItemsTableState(queries)),
-  // setSelectedRowsItems: (selectedRows) =>
-  //   dispatch({
-  //     type: t.ITEM_SELECTED_ROWS_SET,
-  //     payload: { selectedRows },
-  //   }),
 });
 
 export default connect(null, mapDispatchToProps);
diff --git a/client/src/containers/Purchases/Bills/BillsLanding/BillsViewsTabs.js b/client/src/containers/Purchases/Bills/BillsLanding/BillsViewsTabs.js
index 053b932ca..0bb52477d 100644
--- a/client/src/containers/Purchases/Bills/BillsLanding/BillsViewsTabs.js
+++ b/client/src/containers/Purchases/Bills/BillsLanding/BillsViewsTabs.js
@@ -1,13 +1,13 @@
 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 { useBillsListContext } from './BillsListProvider';
 import withBillActions from './withBillsActions';
+import withBills from './withBills';
 
 import { compose } from 'utils';
 
@@ -15,11 +15,12 @@ import { compose } from 'utils';
  * Bills view tabs.
  */
 function BillViewTabs({
-  //#withBillActions
+  // #withBillActions
   setBillsTableState,
-}) {
-  const { custom_view_id: customViewId = null } = useParams();
 
+  // #withBills
+  billsTableState
+}) {
   // Bills list context.
   const { billsViews } = useBillsListContext();
 
@@ -38,7 +39,7 @@ function BillViewTabs({
     <Navbar className={'navbar--dashboard-views'}>
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
-          initialViewId={customViewId}
+          currentViewId={billsTableState.customViewId}
           resourceName={'bills'}
           tabs={tabs}
           onChange={handleTabsChange}
@@ -48,4 +49,7 @@ function BillViewTabs({
   );
 }
 
-export default compose(withBillActions)(BillViewTabs);
+export default compose(
+  withBillActions,
+  withBills(({ billsTableState }) => ({ billsTableState }))
+)(BillViewTabs);
diff --git a/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js
index 93a83a946..cd5fc4d52 100644
--- a/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js
@@ -42,6 +42,7 @@ function EstimateActionsBar({
     history.push('/estimates/new');
   };
 
+  // Handle tab change.
   const handleTabChange = (customView) => {
     setEstimatesTableState({
       customViewId: customView.id || null,
diff --git a/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js
index 72de6e4bc..676ecd5e4 100644
--- a/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js
@@ -1,8 +1,6 @@
 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';
diff --git a/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesViewTabs.js b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesViewTabs.js
index 7a79cd8dd..563587cd6 100644
--- a/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesViewTabs.js
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesViewTabs.js
@@ -23,21 +23,21 @@ function EstimateViewTabs({
   // Estimates list context.
   const { estimatesViews } = useEstimatesListContext();
  
+  // Estimates views.
   const tabs = estimatesViews.map((view) => ({
     ...pick(view, ['name', 'id']),
   }));
 
-  const handleTabsChange = (viewId) => {
-    setEstimatesTableState({
-      customViewId: viewId || null,
-    });
+  // Handle tab change.
+  const handleTabsChange = (customViewId) => {
+    setEstimatesTableState({ customViewId: customViewId || null });
   };
 
   return (
     <Navbar className={'navbar--dashboard-views'}>
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
-          customViewId={estimatesTableState.customViewId}
+          currentViewId={estimatesTableState.customViewId}
           resourceName={'estimates'}
           tabs={tabs}
           onChange={handleTabsChange}
diff --git a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoiceViewTabs.js b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoiceViewTabs.js
index 40287c3cd..a2ccc42ac 100644
--- a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoiceViewTabs.js
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoiceViewTabs.js
@@ -31,9 +31,9 @@ function InvoiceViewTabs({
   }));
 
   // Handle tab change.
-  const handleTabsChange = (customView) => {    
+  const handleTabsChange = (customViewId) => {    
     setInvoicesTableState({
-      customViewId: customView.id || null,
+      customViewId: customViewId || null,
     });
   };
 
@@ -46,7 +46,7 @@ function InvoiceViewTabs({
     <Navbar className={'navbar--dashboard-views'}>
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
-          customViewId={invoicesTableState.customViewId}
+          currentViewId={invoicesTableState.customViewId}
           resourceName={'invoices'}
           tabs={tabs}
           onNewViewTabClick={handleClickNewView}
diff --git a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoiceActionsBar.js b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.js
similarity index 97%
rename from client/src/containers/Sales/Invoices/InvoicesLanding/InvoiceActionsBar.js
rename to client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.js
index d2093f6f9..be25fab09 100644
--- a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoiceActionsBar.js
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.js
@@ -46,9 +46,7 @@ function InvoiceActionsBar({
 
   // Handle views tab change.
   const handleTabChange = (customView) => {
-    setInvoicesTableState({
-      customViewId: customView.id || null,
-    });
+    setInvoicesTableState({ customViewId: customView.id || null });
   };
 
   return (
diff --git a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js
index bddac8b92..29f3b9dc4 100644
--- a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js
@@ -1,9 +1,7 @@
 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';
diff --git a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesList.js b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesList.js
index 93aff53e4..a00709247 100644
--- a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesList.js
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesList.js
@@ -3,7 +3,7 @@ import React from 'react';
 import 'style/pages/SaleInvoice/List.scss';
 
 import { DashboardContentTable, DashboardPageContent } from 'components';
-import InvoiceActionsBar from './InvoiceActionsBar';
+import InvoicesActionsBar from './InvoicesActionsBar';
 import { InvoicesListProvider } from './InvoicesListProvider';
 
 import InvoiceViewTabs from './InvoiceViewTabs';
@@ -26,7 +26,7 @@ function InvoicesList({
     <InvoicesListProvider
       query={transformTableStateToQuery(invoicesTableState)}
     >
-      <InvoiceActionsBar />
+      <InvoicesActionsBar />
 
       <DashboardPageContent>
         <InvoiceViewTabs />
diff --git a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesListProvider.js b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesListProvider.js
index ba939d741..82f9cfae3 100644
--- a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesListProvider.js
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesListProvider.js
@@ -8,7 +8,7 @@ const InvoicesListContext = createContext();
 /**
  * Accounts chart data provider.
  */
-function InvoicesListProvider({ accountsTableQuery, ...props }) {
+function InvoicesListProvider({ query, ...props }) {
   // Fetch accounts resource views and fields.
   const { data: invoicesViews, isFetching: isViewsLoading } = useResourceViews(
     'sale_invoices',
@@ -25,7 +25,7 @@ function InvoicesListProvider({ accountsTableQuery, ...props }) {
     data: { invoices, pagination, filterMeta },
     isFetching: isInvoicesFetching,
     isLoading: isInvoicesLoading,
-  } = useInvoices(accountsTableQuery, { keepPreviousData: true });
+  } = useInvoices(query, { keepPreviousData: true });
 
   // Detarmines the datatable empty status.
   const isEmptyStatus =
diff --git a/client/src/containers/Sales/Invoices/InvoicesLanding/withInvoiceActions.js b/client/src/containers/Sales/Invoices/InvoicesLanding/withInvoiceActions.js
index 9b1c2d1d6..a94d37c4c 100644
--- a/client/src/containers/Sales/Invoices/InvoicesLanding/withInvoiceActions.js
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/withInvoiceActions.js
@@ -4,7 +4,7 @@ import {
 } from 'store/Invoice/invoices.actions';
 
 const mapDipatchToProps = (dispatch) => ({
-  setInvoicesTableState: (query) => setInvoicesTableState(query),
+  setInvoicesTableState: (queries) => dispatch(setInvoicesTableState(queries)),
 });
 
 export default connect(null, mapDipatchToProps);
diff --git a/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.js b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.js
index 7df20bf4d..8b43e4a1a 100644
--- a/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.js
+++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.js
@@ -44,9 +44,9 @@ function ReceiptActionsBar({
   };
 
   // Handle the active tab change.
-  const handleTabChange = (viewId) => {
+  const handleTabChange = (customView) => {
     setReceiptsTableState({
-      csutomViewId: viewId.id || null,
+      customViewId: customView.id || null,
     });
   };
 
diff --git a/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptViewTabs.js b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptViewTabs.js
index 079b73699..33b4ec5ab 100644
--- a/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptViewTabs.js
+++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptViewTabs.js
@@ -27,9 +27,9 @@ function ReceiptViewTabs({
   }));
 
   // Handles the active tab chaning.
-  const handleTabsChange = (customView) => {
+  const handleTabsChange = (customViewId) => {
     setReceiptsTableState({
-      customViewId: customView.id || null,
+      customViewId: customViewId || null,
     });
   };
 
@@ -37,7 +37,7 @@ function ReceiptViewTabs({
     <Navbar className={'navbar--dashboard-views'}>
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
-          initialViewId={receiptTableState.customViewId}
+          currentViewId={receiptTableState.customViewId}
           tabs={tabs}
           resourceName={'receipts'}
           onChange={handleTabsChange}
diff --git a/client/src/containers/Vendors/VendorsLanding/VendorActionsBar.js b/client/src/containers/Vendors/VendorsLanding/VendorActionsBar.js
index 9411a7f73..a65dbbee2 100644
--- a/client/src/containers/Vendors/VendorsLanding/VendorActionsBar.js
+++ b/client/src/containers/Vendors/VendorsLanding/VendorActionsBar.js
@@ -42,10 +42,8 @@ function VendorActionsBar({
   };
 
   // Handle the active tab change.
-  const handleTabChange = (viewId) => {
-    setVendorsTableState({
-      customViewId: viewId.id || null,
-    });
+  const handleTabChange = (customView) => {
+    setVendorsTableState({ customViewId: customView.id || null });
   };
   
   return (
diff --git a/client/src/containers/Vendors/VendorsLanding/VendorViewsTabs.js b/client/src/containers/Vendors/VendorsLanding/VendorViewsTabs.js
index 7b0542484..9a3057183 100644
--- a/client/src/containers/Vendors/VendorsLanding/VendorViewsTabs.js
+++ b/client/src/containers/Vendors/VendorsLanding/VendorViewsTabs.js
@@ -40,7 +40,7 @@ function VendorViewsTabs({
     <Navbar className="navbar--dashboard-views">
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
-          customViewId={vendorsTableState.customViewId}
+          currentViewId={vendorsTableState.customViewId}
           resourceName={'vendors'}
           tabs={tabs}
           onChange={handleTabsChange}