diff --git a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummary.js b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummary.js
index f45480599..a49be8b69 100644
--- a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummary.js
+++ b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummary.js
@@ -30,14 +30,14 @@ function CustomersBalanceSummary({
 }) {
 
   const [filter, setFilter] = useState({
-    asDate: moment().endOf('day').format('YYYY-MM-DD'),
+    as_date: moment().endOf('day').format('YYYY-MM-DD'),
   });
 
   // Handle re-fetch customers balance summary after filter change.
   const handleFilterSubmit = (filter) => {
     const _filter = {
       ...filter,
-      asDate: moment(filter.asDate).format('YYYY-MM-DD'),
+      as_date: moment(filter.as_date).format('YYYY-MM-DD'),
     };
     setFilter({ ..._filter });
   };
diff --git a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.js b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.js
index 6e1b3ec58..afe46869d 100644
--- a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.js
+++ b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.js
@@ -29,13 +29,13 @@ function CustomersBalanceSummaryHeader({
 
   // validation schema.
   const validationSchema = Yup.object().shape({
-    asDate: Yup.date().required().label('asDate'),
+    as_date: Yup.date().required().label('asDate'),
   });
 
   // filter form initial values.
   const initialValues = {
     ...pageFilter,
-    asDate: moment(pageFilter.asDate).toDate(),
+    as_date: moment(pageFilter.as_date).toDate(),
   };
 
   // handle form submit.
diff --git a/client/src/hooks/query/financialReports.js b/client/src/hooks/query/financialReports.js
index 3096bfc7a..44ce2b0d9 100644
--- a/client/src/hooks/query/financialReports.js
+++ b/client/src/hooks/query/financialReports.js
@@ -298,6 +298,9 @@ export function useCustomerBalanceSummaryReport(query, props) {
       method: 'get',
       url: '/financial_statements/customer-balance-summary',
       params: query,
+      headers: {
+        Accept: 'application/json+table',
+      },
     },
     {
       select: (res) => ({
@@ -324,12 +327,16 @@ export function useVendorsBalanceSummaryReport(query, props) {
       method: 'get',
       url: '/financial_statements/vendor-balance-summary',
       params: query,
+      headers: {
+        Accept: 'application/json+table',
+      },
     },
+
     {
       select: (res) => ({
         columns: res.data.columns,
         query: res.data.query,
-        tableRows: res.data.table.rows,
+        tableRows: res.data.table.data,
       }),
       defaultData: {
         tableRows: [],
@@ -350,6 +357,9 @@ export function useCustomersTranscationsReport(query, props) {
       method: 'get',
       url: '/financial_statements/transactions-by-customers',
       params: query,
+      headers: {
+        Accept: 'application/json+table',
+      },
     },
     {
       select: (res) => ({
@@ -364,3 +374,31 @@ export function useCustomersTranscationsReport(query, props) {
     },
   );
 }
+
+/**
+ * Retrieve vendors transcations report.
+ */
+export function useVendorsTranscationsReport(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.VENDORS_TRANSACTIONS, query],
+    {
+      method: 'get',
+      url: '/financial_statements/transactions-by-vendors',
+      params: query,
+      headers: {
+        Accept: 'application/json+table',
+      },
+    },
+    {
+      select: (res) => ({
+        data: res.data.table,
+        tableRows: res.data.table.data,
+      }),
+      defaultData: {
+        tableRows: [],
+        data: [],
+      },
+      ...props,
+    },
+  );
+}
diff --git a/client/src/lang/en/index.js b/client/src/lang/en/index.js
index 6f1600660..e2cabd957 100644
--- a/client/src/lang/en/index.js
+++ b/client/src/lang/en/index.js
@@ -1055,6 +1055,12 @@ export default {
   transaction_date: 'Transaction date',
   transaction_type: 'Transaction type',
   running_balance: 'Running Balance',
-  account_normal:'Account normal',
-  published_at:'Published at',
+  account_normal: 'Account normal',
+  published_at: 'Published at',
+  customers_balance_summary: 'Customers Balance Summary',
+  vendors_balance_summary: 'Vendors Balance Summary',
+  percentage_of_column: 'Percentage',
+  customers_transactions: 'Customers Transcations',
+  vendors_transactions: 'Vendors Transcations',
+  reference_type: 'Reference type',
 };
diff --git a/client/src/routes/dashboard.js b/client/src/routes/dashboard.js
index 1c9fa0e68..89769bcb2 100644
--- a/client/src/routes/dashboard.js
+++ b/client/src/routes/dashboard.js
@@ -264,11 +264,11 @@ export default [
   },
   {
     path: `/financial-reports/transactions-by-customers`,
-    // component: lazy(() =>
-    //   import(
-    //     'containers/FinancialStatements/CustomersTransactions/CustomersTransactions'
-    //   ),
-    // ),
+    component: lazy(() =>
+      import(
+        'containers/FinancialStatements/CustomersTransactions/CustomersTransactions'
+      ),
+    ),
     breadcrumb: 'Customers Transactions ',
     hint: '..',
     pageTitle: formatMessage({ id: 'customers_transactions' }),
@@ -276,12 +276,12 @@ export default [
     sidebarExpand: false,
   },
   {
-    path: `/financial-reports/vendors-transactions`,
-    // component: lazy(() =>
-    //   import(
-    //     'containers/FinancialStatements/'
-    //   ),
-    // ),
+    path: `/financial-reports/transactions-by-vendors`,
+    component: lazy(() =>
+      import(
+        'containers/FinancialStatements/VendorsTransactions/VendorsTransactions'
+      ),
+    ),
     breadcrumb: 'Vendors Transactions ',
     hint: '..',
     pageTitle: formatMessage({ id: 'vendors_transactions' }),
diff --git a/client/src/store/financialStatement/financialStatements.actions.js b/client/src/store/financialStatement/financialStatements.actions.js
index 86f2e9506..a972d42db 100644
--- a/client/src/store/financialStatement/financialStatements.actions.js
+++ b/client/src/store/financialStatement/financialStatements.actions.js
@@ -129,12 +129,11 @@ export function toggleInventoryValuationFilterDrawer(toggle) {
   };
 }
 
-
 /**
  * Toggles display of the customers balance summary filter drawer.
  * @param {boolean} toggle
  */
- export function toggleCustomersBalanceSummaryFilterDrawer(toggle) {
+export function toggleCustomersBalanceSummaryFilterDrawer(toggle) {
   return {
     type: `${t.CUSTOMERS_BALANCE_SUMMARY}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`,
     payload: {
@@ -146,7 +145,7 @@ export function toggleInventoryValuationFilterDrawer(toggle) {
  * Toggles display of the vendors balance summary filter drawer.
  * @param {boolean} toggle
  */
- export function toggleVendorsBalanceSummaryFilterDrawer(toggle) {
+export function toggleVendorsBalanceSummaryFilterDrawer(toggle) {
   return {
     type: `${t.VENDORS_BALANCE_SUMMARY}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`,
     payload: {
@@ -158,7 +157,7 @@ export function toggleInventoryValuationFilterDrawer(toggle) {
  * Toggles display of the customers transactions filter drawer.
  * @param {boolean} toggle
  */
- export function toggleCustomersTransactionsFilterDrawer(toggle) {
+export function toggleCustomersTransactionsFilterDrawer(toggle) {
   return {
     type: `${t.CUSTOMERS_TRANSACTIONS}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`,
     payload: {
@@ -167,15 +166,15 @@ export function toggleInventoryValuationFilterDrawer(toggle) {
   };
 }
 
-// /**
-//  * Toggles display of the vendors transactions filter drawer.
-//  * @param {boolean} toggle
-//  */
-//  export function toggleVendorsTransactionsFilterDrawer(toggle) {
-//   return {
-//     type: `${t.VENDORS_TRANSACTIONS}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`,
-//     payload: {
-//       toggle,
-//     },
-//   };
-// }
\ No newline at end of file
+/**
+ * Toggles display of the vendors transactions filter drawer.
+ * @param {boolean} toggle
+ */
+export function toggleVendorsTransactionsFilterDrawer(toggle) {
+  return {
+    type: `${t.VENDORS_TRANSACTIONS}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`,
+    payload: {
+      toggle,
+    },
+  };
+}
diff --git a/client/src/store/financialStatement/financialStatements.types.js b/client/src/store/financialStatement/financialStatements.types.js
index f80a94ada..7b49a6739 100644
--- a/client/src/store/financialStatement/financialStatements.types.js
+++ b/client/src/store/financialStatement/financialStatements.types.js
@@ -13,5 +13,5 @@ export default {
   CUSTOMERS_BALANCE_SUMMARY: 'CUSTOMERS BALANCE SUMMARY',
   VENDORS_BALANCE_SUMMARY: 'VENDORS BALANCE SUMMARY',
   CUSTOMERS_TRANSACTIONS: 'CUSTOMERS TRANSACTIONS',
-  // VENDORS_TRANSACTIONS: 'CUSTOMERS TRANSACTIONS',
+  VENDORS_TRANSACTIONS: 'VENDORS TRANSACTIONS',
 };