diff --git a/client/src/components/Dashboard/DashboardViewsTabs.js b/client/src/components/Dashboard/DashboardViewsTabs.js
index 83c4034cc..aac2e1a52 100644
--- a/client/src/components/Dashboard/DashboardViewsTabs.js
+++ b/client/src/components/Dashboard/DashboardViewsTabs.js
@@ -12,8 +12,8 @@ import { saveInvoke } from 'utils';
  *
  */
 export default function DashboardViewsTabs({
-  initialViewId = 0,
-  currentViewId,
+  initialViewSlug = 0,
+  currentViewSlug,
   tabs,
   defaultTabText = <T id={'all'} />,
   allTab = true,
@@ -25,22 +25,22 @@ export default function DashboardViewsTabs({
   throttleTime = 250,
 }) {
   const history = useHistory();
-  const [currentView, setCurrentView] = useState(initialViewId || 0);
+  const [currentView, setCurrentView] = useState(initialViewSlug || 0);
 
   useEffect(() => {
-    if (typeof currentViewId !== 'undefined' && currentViewId !== currentView) {
-      setCurrentView(currentViewId || 0);
+    if (typeof currentViewSlug !== 'undefined' && currentViewSlug !== currentView) {
+      setCurrentView(currentViewSlug || 0);
     }
-  }, [currentView, setCurrentView, currentViewId]);
+  }, [currentView, setCurrentView, currentViewSlug]);
 
   const throttledOnChange = useRef(
     debounce((viewId) => saveInvoke(OnThrottledChange, viewId), throttleTime),
   );
 
   // Trigger `onChange` and `onThrottledChange` events.
-  const triggerOnChange = (viewId) => {
-    saveInvoke(onChange, viewId);
-    throttledOnChange.current(viewId);
+  const triggerOnChange = (viewSlug) => {
+    saveInvoke(onChange, viewSlug);
+    throttledOnChange.current(viewSlug);
   };
 
   // Handles click a new view.
@@ -50,9 +50,9 @@ export default function DashboardViewsTabs({
   };
 
   // Handle tabs change.
-  const handleTabsChange = (viewId) => {
-    setCurrentView(viewId);
-    triggerOnChange(viewId)
+  const handleTabsChange = (viewSlug) => {
+    setCurrentView(viewSlug);
+    triggerOnChange(viewSlug)
   };
 
   return (
@@ -66,7 +66,7 @@ export default function DashboardViewsTabs({
       {allTab && <Tab id={0} title={defaultTabText} />}
 
       {tabs.map((tab) => (
-        <Tab id={tab.id} title={tab.name} />
+        <Tab id={tab.slug} title={tab.name} />
       ))}
       <If condition={newViewTab}>
         <Tooltip
diff --git a/client/src/containers/Accounts/AccountsViewsTabs.js b/client/src/containers/Accounts/AccountsViewsTabs.js
index c68853536..a1112ff01 100644
--- a/client/src/containers/Accounts/AccountsViewsTabs.js
+++ b/client/src/containers/Accounts/AccountsViewsTabs.js
@@ -1,16 +1,14 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
-import { pick } from 'lodash';
 import intl from 'react-intl-universal';
 
-
 import { DashboardViewsTabs } from 'components';
 import { useAccountsChartContext } from 'containers/Accounts/AccountsChartProvider';
 
 import withAccountsTableActions from './withAccountsTableActions';
 import withAccounts from './withAccounts';
 
-import { compose } from 'utils';
+import { compose, transfromViewsToTabs } from 'utils';
 
 /**
  * Accounts views tabs.
@@ -20,35 +18,30 @@ function AccountsViewsTabs({
   setAccountsTableState,
 
   // #withAccounts
-  accountsCustomViewId
+  accountsCurrentView
 }) {
   // Accounts chart context.
   const { resourceViews } = useAccountsChartContext();
 
   // Handles the tab change.
   const handleTabChange = useCallback(
-    (viewId) => {
+    (viewSlug) => {
       setAccountsTableState({
-        customViewId: viewId || null,
+        viewSlug: viewSlug || null,
       });
     },
     [setAccountsTableState],
   );
 
-  const tabs = useMemo(
-    () =>
-      resourceViews.map((view) => ({
-        ...pick(view, ['name', 'id']),
-      })),
-    [resourceViews],
-  );
+  // Transfromes the accounts views to tabs.
+  const tabs = transfromViewsToTabs(resourceViews);
 
   return (
     <Navbar className="navbar--dashboard-views">
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
           defaultTabText={intl.get('all_accounts_')}
-          currentViewId={accountsCustomViewId}
+          currentViewSlug={accountsCurrentView}
           resourceName={'accounts'}
           onChange={handleTabChange}
           tabs={tabs}
@@ -61,6 +54,6 @@ function AccountsViewsTabs({
 export default compose(
   withAccountsTableActions,
   withAccounts(({ accountsTableState }) => ({
-    accountsCustomViewId: accountsTableState.customViewId
+    accountsCurrentView: accountsTableState.viewSlug
   }))
 )(AccountsViewsTabs);
diff --git a/client/src/containers/Customers/CustomersLanding/CustomersViewsTabs.js b/client/src/containers/Customers/CustomersLanding/CustomersViewsTabs.js
index de1478b03..e7549cc9b 100644
--- a/client/src/containers/Customers/CustomersLanding/CustomersViewsTabs.js
+++ b/client/src/containers/Customers/CustomersLanding/CustomersViewsTabs.js
@@ -1,6 +1,5 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
-import { pick } from 'lodash';
 
 import { DashboardViewsTabs } from 'components';
 
@@ -9,7 +8,7 @@ import withCustomersActions from './withCustomersActions';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 
 import { useCustomersListContext } from './CustomersListProvider';
-import { compose } from 'utils';
+import { compose, transfromViewsToTabs } from 'utils';
 
 /**
  * Customers views tabs.
@@ -19,29 +18,24 @@ function CustomersViewsTabs({
   setCustomersTableState,
 
   // #withCustomers
-  customersTableState,
+  customersCurrentView,
 }) {
   // Customers list context.
   const { customersViews } = useCustomersListContext();
 
-  const tabs = useMemo(
-    () =>
-      customersViews.map((view) => pick(view, ['name', 'id']), [
-        customersViews,
-      ]),
-    [customersViews],
-  );
+  // Transformes the views to tabs.
+  const tabs = transfromViewsToTabs(customersViews);
 
   // Handle tabs change.
-  const handleTabsChange = (viewId) => {
-    setCustomersTableState({ customViewId: viewId || null });
+  const handleTabsChange = (viewSlug) => {
+    setCustomersTableState({ viewSlug: viewSlug || null });
   };
 
   return (
     <Navbar className="navbar--dashboard-views">
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
-          currentViewId={customersTableState.customViewId}
+          currentViewSlug={customersCurrentView}
           resourceName={'customers'}
           tabs={tabs}
           onChange={handleTabsChange}
@@ -54,5 +48,7 @@ function CustomersViewsTabs({
 export default compose(
   withDashboardActions,
   withCustomersActions,
-  withCustomers(({ customersTableState }) => ({ customersTableState })),
+  withCustomers(({ customersTableState }) => ({
+    customersCurrentView: customersTableState.viewSlug,
+  })),
 )(CustomersViewsTabs);
diff --git a/client/src/containers/Expenses/ExpensesLanding/ExpenseViewTabs.js b/client/src/containers/Expenses/ExpensesLanding/ExpenseViewTabs.js
index b6ec360e1..204d55083 100644
--- a/client/src/containers/Expenses/ExpensesLanding/ExpenseViewTabs.js
+++ b/client/src/containers/Expenses/ExpensesLanding/ExpenseViewTabs.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
-import { pick } from 'lodash';
 
 import { DashboardViewsTabs } from 'components';
 
@@ -8,7 +7,7 @@ import { useExpensesListContext } from './ExpensesListProvider';
 import withExpenses from './withExpenses';
 import withExpensesActions from './withExpensesActions';
 
-import { compose } from 'utils';
+import { compose, transfromViewsToTabs } from 'utils';
 
 /**
  * Expesne views tabs.
@@ -16,23 +15,21 @@ import { compose } from 'utils';
 function ExpenseViewTabs({
   // #withExpensesActions
   setExpensesTableState,
-  
+
   // #withExpenses
-  expensesTableState
+  expensesCurrentView,
 }) {
   // Expenses list context.
   const { expensesViews } = useExpensesListContext();
 
   // Handle the tabs change.
-  const handleTabChange = (viewId) => {
+  const handleTabChange = (viewSlug) => {
     setExpensesTableState({
-      customViewId: viewId || null,
+      viewSlug: viewSlug || null,
     });
   };
 
-  const tabs = expensesViews.map((view) => ({
-    ...pick(view, ['name', 'id']),
-  }));
+  const tabs = transfromViewsToTabs(expensesViews);
 
   // Handle click a new view tab.
   const handleClickNewView = () => {};
@@ -41,7 +38,7 @@ function ExpenseViewTabs({
     <Navbar className={'navbar--dashboard-views'}>
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
-          customViewId={expensesTableState.customViewId}
+          currentViewSlug={expensesCurrentView}
           resourceName={'expenses'}
           tabs={tabs}
           onNewViewTabClick={handleClickNewView}
@@ -52,8 +49,9 @@ function ExpenseViewTabs({
   );
 }
 
- 
 export default compose(
   withExpensesActions,
-  withExpenses(({ expensesTableState }) => ({ expensesTableState }))
+  withExpenses(({ expensesTableState }) => ({
+    expensesCurrentView: expensesTableState.viewSlug,
+  })),
 )(ExpenseViewTabs);
diff --git a/client/src/containers/Items/ItemsViewsTabs.js b/client/src/containers/Items/ItemsViewsTabs.js
index f7b10220c..074b3f97b 100644
--- a/client/src/containers/Items/ItemsViewsTabs.js
+++ b/client/src/containers/Items/ItemsViewsTabs.js
@@ -1,14 +1,13 @@
 import React from 'react';
 import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
-import { compose } from 'utils';
 import { DashboardViewsTabs } from 'components';
-import { pick } from 'lodash';
 import { withRouter } from 'react-router-dom';
 
 import withItemsActions from 'containers/Items/withItemsActions';
 import withItems from 'containers/Items/withItems';
 
 import { useItemsListContext } from './ItemsListProvider';
+import { compose, transfromViewsToTabs } from 'utils';
 
 /**
  * Items views tabs.
@@ -18,28 +17,23 @@ function ItemsViewsTabs({
   setItemsTableState,
 
   // #withItems
-  itemsCustomViewId
+  itemsCurrentView,
 }) {
   const { itemsViews } = useItemsListContext();
 
   // Mapped items views.
-  const tabs = itemsViews.map((view) => ({
-    ...pick(view, ['name', 'id']),
-  }));
+  const tabs = transfromViewsToTabs(itemsViews)
 
   // Handles the active tab change.
-  const handleTabChange = (viewId) => {
-    setItemsTableState({
-      pageIndex: 0,
-      customViewId: viewId || null,
-    });
+  const handleTabChange = (viewSlug) => {
+    setItemsTableState({ viewSlug });
   };
 
   return (
     <Navbar className="navbar--dashboard-views">
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
-          currentViewId={itemsCustomViewId}
+          currentViewSlug={itemsCurrentView}
           resourceName={'items'}
           tabs={tabs}
           onChange={handleTabChange}
@@ -52,7 +46,7 @@ function ItemsViewsTabs({
 export default compose(
   withRouter,
   withItems(({ itemsTableState }) => ({
-    itemsCustomViewId: itemsTableState?.customViewId
+    itemsCurrentView: itemsTableState?.viewSlug
   })),
   withItemsActions,
 )(ItemsViewsTabs);
diff --git a/client/src/containers/Purchases/Bills/BillsLanding/BillsViewsTabs.js b/client/src/containers/Purchases/Bills/BillsLanding/BillsViewsTabs.js
index 0bb52477d..8d823b6ba 100644
--- a/client/src/containers/Purchases/Bills/BillsLanding/BillsViewsTabs.js
+++ b/client/src/containers/Purchases/Bills/BillsLanding/BillsViewsTabs.js
@@ -1,7 +1,6 @@
 import React from 'react';
 
 import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
-import { pick } from 'lodash';
 
 import { DashboardViewsTabs } from 'components';
 
@@ -9,7 +8,7 @@ import { useBillsListContext } from './BillsListProvider';
 import withBillActions from './withBillsActions';
 import withBills from './withBills';
 
-import { compose } from 'utils';
+import { compose, transfromViewsToTabs } from 'utils';
 
 /**
  * Bills view tabs.
@@ -19,27 +18,25 @@ function BillViewTabs({
   setBillsTableState,
 
   // #withBills
-  billsTableState
+  billsCurrentView,
 }) {
   // Bills list context.
   const { billsViews } = useBillsListContext();
 
   // Handle tab chaging.
-  const handleTabsChange = (customView) => {
+  const handleTabsChange = (viewSlug) => {
     setBillsTableState({
-      customViewId: customView || null,
+      viewSlug: viewSlug || null,
     });
   };
 
-  const tabs = billsViews.map((view) => ({
-    ...pick(view, ['name', 'id']),
-  }));
+  const tabs = transfromViewsToTabs(billsViews);
 
   return (
     <Navbar className={'navbar--dashboard-views'}>
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
-          currentViewId={billsTableState.customViewId}
+          currentViewSlug={billsCurrentView}
           resourceName={'bills'}
           tabs={tabs}
           onChange={handleTabsChange}
@@ -51,5 +48,7 @@ function BillViewTabs({
 
 export default compose(
   withBillActions,
-  withBills(({ billsTableState }) => ({ billsTableState }))
+  withBills(({ billsTableState }) => ({
+    billsCurrentView: billsTableState.viewSlug,
+  })),
 )(BillViewTabs);
diff --git a/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesViewTabs.js b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesViewTabs.js
index 563587cd6..62734c2b1 100644
--- a/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesViewTabs.js
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesViewTabs.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
-import { pick } from 'lodash';
 
 import { DashboardViewsTabs } from 'components';
 
@@ -8,7 +7,7 @@ import withEstimatesActions from './withEstimatesActions';
 import withEstimates from './withEstimates';
 
 import { useEstimatesListContext } from './EstimatesListProvider';
-import { compose } from 'utils';
+import { compose, transfromViewsToTabs } from 'utils';
 
 /**
  * Estimates views tabs.
@@ -18,26 +17,24 @@ function EstimateViewTabs({
   setEstimatesTableState,
 
   // #withEstimates
-  estimatesTableState
+  estimatesCurrentView,
 }) {
   // Estimates list context.
   const { estimatesViews } = useEstimatesListContext();
  
   // Estimates views.
-  const tabs = estimatesViews.map((view) => ({
-    ...pick(view, ['name', 'id']),
-  }));
+  const tabs = transfromViewsToTabs(estimatesViews);
 
   // Handle tab change.
-  const handleTabsChange = (customViewId) => {
-    setEstimatesTableState({ customViewId: customViewId || null });
+  const handleTabsChange = (viewSlug) => {
+    setEstimatesTableState({ viewSlug: viewSlug || null });
   };
 
   return (
     <Navbar className={'navbar--dashboard-views'}>
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
-          currentViewId={estimatesTableState.customViewId}
+          currentViewSlug={estimatesCurrentView}
           resourceName={'estimates'}
           tabs={tabs}
           onChange={handleTabsChange}
@@ -49,5 +46,7 @@ function EstimateViewTabs({
 
 export default compose(
   withEstimatesActions,
-  withEstimates(({ estimatesTableState }) => ({ estimatesTableState })),
+  withEstimates(({ estimatesTableState }) => ({
+    estimatesCurrentView: estimatesTableState.viewSlug
+  })),
 )(EstimateViewTabs);
diff --git a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoiceViewTabs.js b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoiceViewTabs.js
index a2ccc42ac..1aeea04dd 100644
--- a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoiceViewTabs.js
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoiceViewTabs.js
@@ -1,14 +1,13 @@
 import React from 'react';
 import { useHistory } from 'react-router';
 import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
-import { pick } from 'lodash';
 
 import { DashboardViewsTabs } from 'components';
 
 import withInvoices from './withInvoices';
 import withInvoiceActions from './withInvoiceActions';
 
-import { compose } from 'utils';
+import { compose, transfromViewsToTabs } from 'utils';
 import { useInvoicesListContext } from './InvoicesListProvider';
 
 /**
@@ -19,24 +18,21 @@ function InvoiceViewTabs({
   setInvoicesTableState,
 
   // #withInvoices
-  invoicesTableState
+  invoicesCurrentView,
 }) {
   const history = useHistory();
 
   // Invoices list context.
   const { invoicesViews } = useInvoicesListContext();
 
-  const tabs = invoicesViews.map((view) => ({
-    ...pick(view, ['name', 'id']),
-  }));
+  const tabs = transfromViewsToTabs(invoicesViews);
 
   // Handle tab change.
-  const handleTabsChange = (customViewId) => {    
+  const handleTabsChange = (viewSlug) => {
     setInvoicesTableState({
-      customViewId: customViewId || null,
+      viewSlug: viewSlug || null,
     });
   };
-
   // Handle click a new view tab.
   const handleClickNewView = () => {
     history.push('/custom_views/invoices/new');
@@ -46,7 +42,7 @@ function InvoiceViewTabs({
     <Navbar className={'navbar--dashboard-views'}>
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
-          currentViewId={invoicesTableState.customViewId}
+          currentViewSlug={invoicesCurrentView}
           resourceName={'invoices'}
           tabs={tabs}
           onNewViewTabClick={handleClickNewView}
@@ -59,5 +55,7 @@ function InvoiceViewTabs({
 
 export default compose(
   withInvoiceActions,
-  withInvoices(({ invoicesTableState }) => ({ invoicesTableState })),
+  withInvoices(({ invoicesTableState }) => ({
+    invoicesCurrentView: invoicesTableState.viewSlug,
+  })),
 )(InvoiceViewTabs);
diff --git a/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptViewTabs.js b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptViewTabs.js
index 68497dd54..c71575ce1 100644
--- a/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptViewTabs.js
+++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptViewTabs.js
@@ -1,12 +1,11 @@
 import React from 'react';
 import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
-import { pick } from 'lodash';
 
 import { DashboardViewsTabs } from 'components';
 import withReceiptActions from './withReceiptsActions';
 import withReceipts from './withReceipts';
 
-import { compose } from 'utils';
+import { compose, transfromViewsToTabs } from 'utils';
 import { useReceiptsListContext } from './ReceiptsListProvider';
 
 /**
@@ -17,19 +16,17 @@ function ReceiptViewTabs({
   setReceiptsTableState,
 
   // #withReceipts
-  receiptTableState,
+  receiptsCurrentView,
 }) {
   // Receipts list context.
   const { receiptsViews } = useReceiptsListContext();
 
-  const tabs = receiptsViews.map((view) => ({
-    ...pick(view, ['name', 'id']),
-  }));
+  const tabs = transfromViewsToTabs(receiptsViews);
 
   // Handles the active tab chaning.
-  const handleTabsChange = (customViewId) => {
+  const handleTabsChange = (viewSlug) => {
     setReceiptsTableState({
-      customViewId: customViewId || null,
+      viewSlug: viewSlug || null,
     });
   };
 
@@ -37,7 +34,7 @@ function ReceiptViewTabs({
     <Navbar className={'navbar--dashboard-views'}>
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
-          currentViewId={receiptTableState.customViewId}
+          currentViewSlug={receiptsCurrentView}
           tabs={tabs}
           resourceName={'receipts'}
           onChange={handleTabsChange}
@@ -49,5 +46,7 @@ function ReceiptViewTabs({
 
 export default compose(
   withReceiptActions,
-  withReceipts(({ receiptTableState }) => ({ receiptTableState })),
+  withReceipts(({ receiptTableState }) => ({
+    receiptsCurrentView: receiptTableState.viewSlug,
+  })),
 )(ReceiptViewTabs);
diff --git a/client/src/containers/Vendors/VendorsLanding/VendorViewsTabs.js b/client/src/containers/Vendors/VendorsLanding/VendorViewsTabs.js
index 9a3057183..a829f144d 100644
--- a/client/src/containers/Vendors/VendorsLanding/VendorViewsTabs.js
+++ b/client/src/containers/Vendors/VendorsLanding/VendorViewsTabs.js
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
 import { compose } from 'redux';
 
@@ -7,7 +7,8 @@ import { DashboardViewsTabs } from 'components';
 
 import withVendorsActions from './withVendorsActions';
 import withVendors from './withVendors';
-import { pick } from 'lodash';
+
+import { transfromViewsToTabs } from 'utils';
 
 /**
  * Vendors views tabs.
@@ -17,30 +18,23 @@ function VendorViewsTabs({
   setVendorsTableState,
 
   // #withVendors
-  vendorsTableState
+  vendorsCurrentView,
 }) {
   const { vendorsViews } = useVendorsListContext();
- 
-  const tabs = useMemo(() =>
-    vendorsViews.map(
-      (view) => ({
-        ...pick(view, ['name', 'id']),
-      }),
-    ),
-    [vendorsViews],
-  );
 
-  const handleTabsChange = (viewId) => {
+  const tabs = transfromViewsToTabs(vendorsViews);
+
+  const handleTabsChange = (viewSlug) => {
     setVendorsTableState({
-      customViewId: viewId || null,
+      viewSlug: viewSlug || null,
     });
   };
-  
+
   return (
     <Navbar className="navbar--dashboard-views">
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
-          currentViewId={vendorsTableState.customViewId}
+          currentViewSlug={vendorsCurrentView}
           resourceName={'vendors'}
           tabs={tabs}
           onChange={handleTabsChange}
@@ -52,5 +46,7 @@ function VendorViewsTabs({
 
 export default compose(
   withVendorsActions,
-  withVendors(({ vendorsTableState }) => ({ vendorsTableState }))
+  withVendors(({ vendorsTableState }) => ({
+    vendorsCurrentView: vendorsTableState.viewSlug,
+  })),
 )(VendorViewsTabs);
diff --git a/client/src/style/pages/Dashboard/Dashboard.scss b/client/src/style/pages/Dashboard/Dashboard.scss
index 007a155a7..7b2532a74 100644
--- a/client/src/style/pages/Dashboard/Dashboard.scss
+++ b/client/src/style/pages/Dashboard/Dashboard.scss
@@ -1,5 +1,5 @@
 @import '../../Base.scss';
-$dashboard-views-bar-height: 45px;
+$dashboard-views-bar-height: 44px;
 
 .dashboard {
   display: flex;
@@ -457,24 +457,24 @@ $dashboard-views-bar-height: 45px;
 .tabs--dashboard-views {
 
   .#{$ns}-tab {
-    color: #474d5e;
+    color: #646a7d;
     font-size: 14px;
     line-height: $dashboard-views-bar-height;
     font-weight: 400;
     padding: 0;
     margin-right: 0;
-    padding-left: 14px;
-    padding-right: 14px;
+    padding-left: 16px;
+    padding-right: 16px;
 
     &[aria-selected='true'] {
       color: #0052cc;
-      font-weight: 500;
+      font-weight: 600;
     }
   }
 
   .#{$ns}-tab-indicator-wrapper {
     .#{$ns}-tab-indicator {
-      height: 3px;
+      height: 2px;
     }
   }
   .button--new-view {
diff --git a/client/src/utils.js b/client/src/utils.js
index e424f126a..428037719 100644
--- a/client/src/utils.js
+++ b/client/src/utils.js
@@ -516,12 +516,12 @@ export function getPagesCountFromPaginationMeta(pagination) {
  * Transformes the table state to url query.
  */
 export function transformTableStateToQuery(tableState) {
-  const { pageSize, pageIndex, customViewId, sortBy } = tableState;
+  const { pageSize, pageIndex, viewSlug, sortBy } = tableState;
 
   const query = {
     pageSize,
     page: pageIndex + 1,
-    ...(customViewId ? { customViewId } : {}),
+    ...(viewSlug ? { viewSlug } : {}),
     ...(Array.isArray(sortBy) && sortBy.length > 0
       ? {
           column_sort_by: sortBy[0].id,
@@ -680,4 +680,8 @@ export const ensureEntriesHasEmptyLine = R.curry(
     }
     return entries;
   },
-);
\ No newline at end of file
+);
+
+export const transfromViewsToTabs = (views) => {
+  return views.map(view => ({ ..._.pick(view, ['slug', 'name']) }))
+}
\ No newline at end of file
diff --git a/server/src/models/BillPayment.js b/server/src/models/BillPayment.js
index dc150741d..9557b478b 100644
--- a/server/src/models/BillPayment.js
+++ b/server/src/models/BillPayment.js
@@ -1,21 +1,26 @@
-import { Model, mixin } from "objection";
-import TenantModel from "models/TenantModel";
-import ModelSetting from "./ModelSetting";
-import BillPaymentSettings from "./BillPayment.Settings";
+import { Model, mixin } from 'objection';
+import TenantModel from 'models/TenantModel';
+import ModelSetting from './ModelSetting';
+import BillPaymentSettings from './BillPayment.Settings';
+import CustomViewBaseModel from './CustomViewBaseModel';
+import { DEFAULT_VIEWS } from 'services/Sales/PaymentReceives/constants';
 
-export default class BillPayment extends mixin(TenantModel, [ModelSetting]) {
+export default class BillPayment extends mixin(TenantModel, [
+  ModelSetting,
+  CustomViewBaseModel,
+]) {
   /**
    * Table name
    */
   static get tableName() {
-    return "bills_payments";
+    return 'bills_payments';
   }
 
   /**
    * Timestamps columns.
    */
   get timestamps() {
-    return ["createdAt", "updatedAt"];
+    return ['createdAt', 'updatedAt'];
   }
 
   /**
@@ -29,18 +34,18 @@ export default class BillPayment extends mixin(TenantModel, [ModelSetting]) {
    * Relationship mapping.
    */
   static get relationMappings() {
-    const BillPaymentEntry = require("models/BillPaymentEntry");
-    const AccountTransaction = require("models/AccountTransaction");
-    const Vendor = require("models/Vendor");
-    const Account = require("models/Account");
+    const BillPaymentEntry = require('models/BillPaymentEntry');
+    const AccountTransaction = require('models/AccountTransaction');
+    const Vendor = require('models/Vendor');
+    const Account = require('models/Account');
 
     return {
       entries: {
         relation: Model.HasManyRelation,
         modelClass: BillPaymentEntry.default,
         join: {
-          from: "bills_payments.id",
-          to: "bills_payments_entries.billPaymentId",
+          from: 'bills_payments.id',
+          to: 'bills_payments_entries.billPaymentId',
         },
       },
 
@@ -48,11 +53,11 @@ export default class BillPayment extends mixin(TenantModel, [ModelSetting]) {
         relation: Model.BelongsToOneRelation,
         modelClass: Vendor.default,
         join: {
-          from: "bills_payments.vendorId",
-          to: "contacts.id",
+          from: 'bills_payments.vendorId',
+          to: 'contacts.id',
         },
         filter(query) {
-          query.where("contact_service", "vendor");
+          query.where('contact_service', 'vendor');
         },
       },
 
@@ -60,8 +65,8 @@ export default class BillPayment extends mixin(TenantModel, [ModelSetting]) {
         relation: Model.BelongsToOneRelation,
         modelClass: Account.default,
         join: {
-          from: "bills_payments.paymentAccountId",
-          to: "accounts.id",
+          from: 'bills_payments.paymentAccountId',
+          to: 'accounts.id',
         },
       },
 
@@ -69,13 +74,20 @@ export default class BillPayment extends mixin(TenantModel, [ModelSetting]) {
         relation: Model.HasManyRelation,
         modelClass: AccountTransaction.default,
         join: {
-          from: "bills_payments.id",
-          to: "accounts_transactions.referenceId",
+          from: 'bills_payments.id',
+          to: 'accounts_transactions.referenceId',
         },
         filter(builder) {
-          builder.where("reference_type", "BillPayment");
+          builder.where('reference_type', 'BillPayment');
         },
       },
     };
   }
+
+  /**
+   * Retrieve the default custom views, roles and columns.
+   */
+  static get defaultViews() {
+    return DEFAULT_VIEWS;
+  }
 }
diff --git a/server/src/models/ManualJournal.js b/server/src/models/ManualJournal.js
index f19878f90..43145c85b 100644
--- a/server/src/models/ManualJournal.js
+++ b/server/src/models/ManualJournal.js
@@ -3,8 +3,12 @@ import TenantModel from 'models/TenantModel';
 import { formatNumber } from 'utils';
 import ModelSetting from './ModelSetting';
 import ManualJournalSettings from './ManualJournal.Settings';
-
-export default class ManualJournal extends mixin(TenantModel, [ModelSetting]) {
+import CustomViewBaseModel from './CustomViewBaseModel';
+import { DEFAULT_VIEWS } from 'services/ManualJournals/constants';
+export default class ManualJournal extends mixin(TenantModel, [
+  ModelSetting,
+  CustomViewBaseModel,
+]) {
   /**
    * Table name.
    */
@@ -104,4 +108,11 @@ export default class ManualJournal extends mixin(TenantModel, [ModelSetting]) {
   static get meta() {
     return ManualJournalSettings;
   }
+
+  /**
+   * Retrieve the default custom views, roles and columns.
+   */
+  static get defaultViews() {
+    return DEFAULT_VIEWS;
+  }
 }
diff --git a/server/src/models/PaymentReceive.js b/server/src/models/PaymentReceive.js
index 8592aae08..0277762f8 100644
--- a/server/src/models/PaymentReceive.js
+++ b/server/src/models/PaymentReceive.js
@@ -2,8 +2,13 @@ import { Model, mixin } from 'objection';
 import TenantModel from 'models/TenantModel';
 import ModelSetting from './ModelSetting';
 import PaymentReceiveSettings from './PaymentReceive.Settings';
+import CustomViewBaseModel from './CustomViewBaseModel';
+import { DEFAULT_VIEWS } from 'services/Sales/PaymentReceives/constants';
 
-export default class PaymentReceive extends mixin(TenantModel, [ModelSetting]) {
+export default class PaymentReceive extends mixin(TenantModel, [
+  ModelSetting,
+  CustomViewBaseModel,
+]) {
   /**
    * Table name.
    */
@@ -44,7 +49,7 @@ export default class PaymentReceive extends mixin(TenantModel, [ModelSetting]) {
         },
         filter(query) {
           query.where('contact_service', 'customer');
-        }
+        },
       },
       depositAccount: {
         relation: Model.BelongsToOneRelation,
@@ -67,19 +72,26 @@ export default class PaymentReceive extends mixin(TenantModel, [ModelSetting]) {
         modelClass: AccountTransaction.default,
         join: {
           from: 'payment_receives.id',
-          to: 'accounts_transactions.referenceId'
+          to: 'accounts_transactions.referenceId',
         },
         filter(builder) {
           builder.where('reference_type', 'PaymentReceive');
         },
-      }
+      },
     };
   }
 
   /**
-   * 
+   *
    */
   static get meta() {
     return PaymentReceiveSettings;
   }
+
+  /**
+   * Retrieve the default custom views, roles and columns.
+   */
+  static get defaultViews() {
+    return DEFAULT_VIEWS;
+  }
 }
diff --git a/server/src/services/ManualJournals/constants.ts b/server/src/services/ManualJournals/constants.ts
index 5386e20b4..c2c93b21f 100644
--- a/server/src/services/ManualJournals/constants.ts
+++ b/server/src/services/ManualJournals/constants.ts
@@ -23,3 +23,6 @@ export const CONTACTS_CONFIG = [
     assignRequired: true,
   },
 ];
+
+
+export const DEFAULT_VIEWS = [];
\ No newline at end of file
diff --git a/server/src/services/Purchases/BillPayments/constants.ts b/server/src/services/Purchases/BillPayments/constants.ts
index c730ff17f..11c5fcc76 100644
--- a/server/src/services/Purchases/BillPayments/constants.ts
+++ b/server/src/services/Purchases/BillPayments/constants.ts
@@ -12,3 +12,6 @@ export const ERRORS = {
   BILLS_NOT_OPENED_YET: 'BILLS_NOT_OPENED_YET',
   VENDOR_HAS_PAYMENTS: 'VENDOR_HAS_PAYMENTS'
 };
+
+
+export const DEFAULT_VIEWS = [];
\ No newline at end of file
diff --git a/server/src/services/Sales/PaymentReceives/constants.ts b/server/src/services/Sales/PaymentReceives/constants.ts
index c1eceb7a7..831d9d9f4 100644
--- a/server/src/services/Sales/PaymentReceives/constants.ts
+++ b/server/src/services/Sales/PaymentReceives/constants.ts
@@ -12,3 +12,6 @@ export const ERRORS = {
   PAYMENT_CUSTOMER_SHOULD_NOT_UPDATE: 'PAYMENT_CUSTOMER_SHOULD_NOT_UPDATE',
   CUSTOMER_HAS_PAYMENT_RECEIVES: 'CUSTOMER_HAS_PAYMENT_RECEIVES'
 };
+
+
+export const DEFAULT_VIEWS = [];
\ No newline at end of file