diff --git a/client/src/containers/Purchases/Bill/BillActionsBar.js b/client/src/containers/Purchases/Bill/BillActionsBar.js
index dad1c4f2b..720f265bf 100644
--- a/client/src/containers/Purchases/Bill/BillActionsBar.js
+++ b/client/src/containers/Purchases/Bill/BillActionsBar.js
@@ -38,13 +38,12 @@ function BillActionsBar({
 
   //#withBillActions
   addBillsTableQueries,
-
+  changeBillView,
   // #own Porps
   onFilterChanged,
   selectedRows = [],
 }) {
   const history = useHistory();
-  const { path } = useRouteMatch();
   const [filterCount, setFilterCount] = useState(0);
   const { formatMessage } = useIntl();
 
@@ -52,6 +51,17 @@ function BillActionsBar({
     history.push('/bills/new');
   }, [history]);
 
+  const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
+    selectedRows,
+  ]);
+
+  const handleTabChange = (viewId) => {
+    changeBillView(viewId.id || -1);
+    addBillsTableQueries({
+      custom_view_id: viewId.id || null,
+    });
+  };
+
   //   const FilterDropdown = FilterDropdown({
   //   initialCondition: {
   //     fieldKey: '',
@@ -67,14 +77,14 @@ function BillActionsBar({
   //   },
   // });
 
-  const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
-    selectedRows,
-  ]);
-
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <DashboardActionViewsList resourceName={'bills'} views={[]} />
+        <DashboardActionViewsList
+          resourceName={'bills'}
+          views={billsViews}
+          onChange={handleTabChange}
+        />
         <NavbarDivider />
         <Button
           className={Classes.MINIMAL}
@@ -139,10 +149,8 @@ export default compose(
   withResourceDetail(({ resourceFields }) => ({
     resourceFields,
   })),
-
-  // withBills(({billsViews})=>({
-  //   billsViews
-  // })),
-
+  withBills(({ billsViews }) => ({
+    billsViews,
+  })),
   withBillActions,
 )(BillActionsBar);
diff --git a/client/src/containers/Purchases/Bill/BillList.js b/client/src/containers/Purchases/Bill/BillList.js
index 21f9ea631..bce467bae 100644
--- a/client/src/containers/Purchases/Bill/BillList.js
+++ b/client/src/containers/Purchases/Bill/BillList.js
@@ -21,6 +21,9 @@ import withViewsActions from 'containers/Views/withViewsActions';
 
 import { compose } from 'utils';
 
+/**
+ * Bills list.
+ */
 function BillList({
   // #withDashboardActions
   changePageTitle,
@@ -58,8 +61,8 @@ function BillList({
     (key, resourceName) => requestFetchResourceFields(resourceName),
   );
 
-  const fetchBills = useQuery(['bills-table', billsTableQuery], () =>
-    requestFetchBillsTable(),
+  const fetchBills = useQuery(['bills-table', billsTableQuery], (key, query) =>
+    requestFetchBillsTable({ ...query }),
   );
 
   //handle dalete Bill
@@ -127,14 +130,7 @@ function BillList({
   );
 
   // Handle filter change to re-fetch data-table.
-  const handleFilterChanged = useCallback(
-    (filterConditions) => {
-      addBillsTableQueries({
-        filter_roles: filterConditions || '',
-      });
-    },
-    [fetchBills],
-  );
+  const handleFilterChanged = useCallback((filterConditions) => {}, []);
 
   return (
     <DashboardInsider
@@ -148,7 +144,10 @@ function BillList({
       />
       <DashboardPageContent>
         <Switch>
-          <Route exact={true}>
+          <Route
+            exact={true}
+            path={['/bills/:custom_view_id/custom_view', '/bills']}
+          >
             <BillViewTabs />
             <BillsDataTable
               onDeleteBill={handleDeleteBill}
diff --git a/client/src/containers/Purchases/Bill/BillViewTabs.js b/client/src/containers/Purchases/Bill/BillViewTabs.js
index aae359dbc..756d4f3a1 100644
--- a/client/src/containers/Purchases/Bill/BillViewTabs.js
+++ b/client/src/containers/Purchases/Bill/BillViewTabs.js
@@ -38,51 +38,34 @@ function BillViewTabs({
   const { custom_view_id: customViewId = null } = useParams();
 
   useEffect(() => {
-    changeBillView(customViewId || -1);
     setTopbarEditView(customViewId);
     changePageSubtitle(customViewId && viewItem ? viewItem.name : '');
-
-    addBillsTableQueries({
-      custom_view_id: customViewId,
-    });
-    return () => {
-      setTopbarEditView(null);
-      changePageSubtitle('');
-      changeBillView(null);
-    };
-  }, [customViewId, addBillsTableQueries, changeBillView]);
-
-  useUpdateEffect(() => {
-    onViewChanged && onViewChanged(customViewId);
   }, [customViewId]);
 
-  const debounceChangeHistory = useRef(
-    debounce((toUrl) => {
-      history.push(toUrl);
-    }, 250),
-  );
   // Handle click a new view tab.
   const handleClickNewView = () => {
     setTopbarEditView(null);
     history.push('/custom_views/invoices/new');
   };
+
   const handleTabsChange = (viewId) => {
-    const toPath = viewId ? `${viewId}/custom_view` : '';
-    debounceChangeHistory.current(`/bills/${toPath}`);
+    changeBillView(viewId || -1);
+    addBillsTableQueries({
+      custom_view_id: customViewId || null,
+    });
     setTopbarEditView(viewId);
   };
+
   const tabs = billsViews.map((view) => ({
     ...pick(view, ['name', 'id']),
   }));
 
-  console.log(billsViews, 'billsViews');
-
   return (
     <Navbar className={'navbar--dashboard-views'}>
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
           initialViewId={customViewId}
-          baseUrl={'/bills'}
+          resourceName={'bills'}
           tabs={tabs}
           onNewViewTabClick={handleClickNewView}
           onChange={handleTabsChange}
diff --git a/client/src/containers/Purchases/Bill/BillsDataTable.js b/client/src/containers/Purchases/Bill/BillsDataTable.js
index 809e68059..42a3dc983 100644
--- a/client/src/containers/Purchases/Bill/BillsDataTable.js
+++ b/client/src/containers/Purchases/Bill/BillsDataTable.js
@@ -60,24 +60,9 @@ function BillsDataTable({
   onOpenBill,
   onSelectedRowsChange,
 }) {
-  const { custom_view_id: customViewId } = useParams();
   const { formatMessage } = useIntl();
   const isLoadedBefore = useIsValuePassed(billsLoading, false);
 
-  useEffect(() => {
-    if (customViewId) {
-      changeCurrentView(customViewId);
-      setTopbarEditView(customViewId);
-    }
-    changePageSubtitle(customViewId && viewMeta ? viewMeta.name : '');
-  }, [
-    customViewId,
-    changeCurrentView,
-    changePageSubtitle,
-    setTopbarEditView,
-    viewMeta,
-  ]);
-
   const handleFetchData = useCallback(
     ({ pageIndex, pageSize, sortBy }) => {
       const page = pageIndex + 1;
diff --git a/client/src/store/Bills/bills.actions.js b/client/src/store/Bills/bills.actions.js
index bafaf0a16..901f30826 100644
--- a/client/src/store/Bills/bills.actions.js
+++ b/client/src/store/Bills/bills.actions.js
@@ -21,7 +21,8 @@ export const fetchBillsTable = ({ query = {} }) => {
             payload: {
               bills: response.data.bills,
               pagination: response.data.pagination,
-              customViewId: response.data.customViewId || -1,
+              customViewId:
+                response.data?.filter_meta?.view?.custom_view_id || -1,
             },
           });
           dispatch({
@@ -34,7 +35,8 @@ export const fetchBillsTable = ({ query = {} }) => {
             type: t.BILLS_PAGINATION_SET,
             payload: {
               pagination: response.data.pagination,
-              customViewId: response.data.customViewId || -1,
+              customViewId:
+                response.data?.filter_meta?.view?.custom_view_id || -1,
             },
           });
           dispatch({
@@ -118,27 +120,32 @@ export const editBill = (id, form) => {
     });
 };
 
-export const fetchDueBills = ({ vendorId }) => (dispatch) => new Promise((resolve, reject) => {
-  const params = { vendor_id: vendorId };
+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,
+    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);
       });
-    }
-    resolve(response);
-  }).catch(error => { reject(error) });
-});
+  });
 
 export const openBill = ({ id }) => {
   return (dispatch) => ApiService.post(`purchases/bills/${id}/open`);