diff --git a/client/src/containers/Drawers/BillDrawer/BillDrawerDetails.js b/client/src/containers/Drawers/BillDrawer/BillDrawerDetails.js
index 9f2b86253..73b55aacc 100644
--- a/client/src/containers/Drawers/BillDrawer/BillDrawerDetails.js
+++ b/client/src/containers/Drawers/BillDrawer/BillDrawerDetails.js
@@ -10,7 +10,9 @@ import { useBillDrawerContext } from './BillDrawerProvider';
  * Bill view details.
  */
 export default function BillDrawerDetails() {
-  const { data } = useBillDrawerContext();
+  const {
+    data: { transactions },
+  } = useBillDrawerContext();
 
   return (
     <div className="view-detail-drawer">
@@ -19,7 +21,7 @@ export default function BillDrawerDetails() {
         <Tab
           title={intl.get('journal_entries')}
           id={'journal_entries'}
-          panel={<JournalEntriesTable transactions={data} />}
+          panel={<JournalEntriesTable transactions={transactions} />}
         />
         <Tab
           title={intl.get('located_landed_cost')}
diff --git a/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js
index 735b1015e..9ff9f647c 100644
--- a/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js
+++ b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js
@@ -9,7 +9,7 @@ import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
  * Invoice view detail.
  */
 export default function InvoiceDetail() {
-  const { data } = useInvoiceDetailDrawerContext();
+  const { transactions } = useInvoiceDetailDrawerContext();
 
   return (
     <div className="view-detail-drawer">
@@ -23,7 +23,7 @@ export default function InvoiceDetail() {
         <Tab
           title={intl.get('journal_entries')}
           id={'journal_entries'}
-          panel={<JournalEntriesTable transactions={data} />}
+          panel={<JournalEntriesTable transactions={transactions} />}
         />
       </Tabs>
     </div>
diff --git a/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js
index 6f81e6a6b..c1a9d2798 100644
--- a/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js
+++ b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js
@@ -8,9 +8,11 @@ const InvoiceDetailDrawerContext = React.createContext();
  * Invoice detail provider.
  */
 function InvoiceDetailDrawerProvider({ invoiceId, ...props }) {
-  
   // Handle fetch transaction by reference.
-  const { data, isLoading: isTransactionLoading } = useTransactionsByReference(
+  const {
+    data: { transactions },
+    isLoading: isTransactionLoading,
+  } = useTransactionsByReference(
     {
       reference_id: invoiceId,
       reference_type: 'SaleInvoice',
@@ -20,7 +22,7 @@ function InvoiceDetailDrawerProvider({ invoiceId, ...props }) {
 
   //provider.
   const provider = {
-    data,
+    transactions,
   };
   return (
     <DashboardInsider loading={isTransactionLoading}>
diff --git a/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js
index 7bb717f5a..d491d2298 100644
--- a/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js
+++ b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js
@@ -9,9 +9,11 @@ const PaymentMadeDetailContext = React.createContext();
  * Payment made detail provider.
  */
 function PaymentMadeDetailProvider({ paymentMadeId, ...props }) {
-  
   // Handle fetch transaction by reference.
-  const { data, isLoading: isTransactionLoading } = useTransactionsByReference(
+  const {
+    data: { transactions },
+    isLoading: isTransactionLoading,
+  } = useTransactionsByReference(
     {
       reference_id: paymentMadeId,
       reference_type: 'paymentMade',
@@ -21,7 +23,7 @@ function PaymentMadeDetailProvider({ paymentMadeId, ...props }) {
 
   //provider.
   const provider = {
-    data,
+    transactions,
   };
   return (
     <DashboardInsider loading={isTransactionLoading}>
diff --git a/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetails.js b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetails.js
index 4c02d448f..eee6f2590 100644
--- a/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetails.js
+++ b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetails.js
@@ -3,11 +3,14 @@ import { Tabs, Tab } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 
 import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
+import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
 
 /**
  * payment made view detail.
  */
 export default function PaymentMadeDetails() {
+  const { transactions } = usePaymentMadeDetailContext();
+
   return (
     <div className="view-detail-drawer">
       <Tabs animate={true} large={true} defaultSelectedTabId="journal_entries">
@@ -15,7 +18,7 @@ export default function PaymentMadeDetails() {
         <Tab
           title={intl.get('journal_entries')}
           id={'journal_entries'}
-          panel={<JournalEntriesTable journal={[]} />}
+          panel={<JournalEntriesTable transactions={transactions} />}
         />
       </Tabs>
     </div>
diff --git a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetail.js b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetail.js
index 8bb6c3708..091338a47 100644
--- a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetail.js
+++ b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetail.js
@@ -9,8 +9,8 @@ import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
  * payment receive view detail.
  */
 export default function PaymentReceiveDetail() {
-  const { data } = usePaymentReceiveDetailContext();
-  
+  const { transactions } = usePaymentReceiveDetailContext();
+
   return (
     <div className="view-detail-drawer">
       <Tabs animate={true} large={true} defaultSelectedTabId="journal_entries">
@@ -18,7 +18,7 @@ export default function PaymentReceiveDetail() {
         <Tab
           title={intl.get('journal_entries')}
           id={'journal_entries'}
-          panel={<JournalEntriesTable transactions={data} />}
+          panel={<JournalEntriesTable transactions={transactions} />}
         />
       </Tabs>
     </div>
diff --git a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js
index 50c8db63d..73496f207 100644
--- a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js
+++ b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js
@@ -9,9 +9,11 @@ const PaymentReceiveDetailContext = React.createContext();
  * Payment receive detail provider.
  */
 function PaymentReceiveDetailProvider({ paymentReceiveId, ...props }) {
-
   // Handle fetch transaction by reference.
-  const { data, isLoading: isTransactionLoading } = useTransactionsByReference(
+  const {
+    data: { transactions },
+    isLoading: isTransactionLoading,
+  } = useTransactionsByReference(
     {
       reference_id: paymentReceiveId,
       reference_type: 'paymentReceive',
@@ -20,7 +22,7 @@ function PaymentReceiveDetailProvider({ paymentReceiveId, ...props }) {
   );
 
   //provider.
-  const provider = { data };
+  const provider = { transactions };
 
   return (
     <DashboardInsider loading={isTransactionLoading}>
diff --git a/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetail.js b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetail.js
index eee8e91c8..fff05be60 100644
--- a/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetail.js
+++ b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetail.js
@@ -5,12 +5,12 @@ import intl from 'react-intl-universal';
 import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
 import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';
 
-
 /**
  * Receipt view detail.
  */
 export default function ReceiptDetail() {
-  const { data } = useReceiptDetailDrawerContext();
+  const { transactions } = useReceiptDetailDrawerContext();
+
   return (
     <div className="view-detail-drawer">
       <Tabs animate={true} large={true} defaultSelectedTabId="journal_entries">
@@ -18,7 +18,7 @@ export default function ReceiptDetail() {
         <Tab
           title={intl.get('journal_entries')}
           id={'journal_entries'}
-          panel={<JournalEntriesTable transactions={data} />}
+          panel={<JournalEntriesTable transactions={transactions} />}
         />
       </Tabs>
     </div>
diff --git a/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.js b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.js
index c107acf89..9141a3bc0 100644
--- a/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.js
+++ b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.js
@@ -11,7 +11,10 @@ const ReceiptDetailDrawerContext = React.createContext();
  */
 function ReceiptDetailDrawerProvider({ receiptId, ...props }) {
   // Handle fetch transaction by reference.
-  const { data, isLoading: isTransactionLoading } = useTransactionsByReference(
+  const {
+    data: { transactions },
+    isLoading: isTransactionLoading,
+  } = useTransactionsByReference(
     {
       reference_id: receiptId,
       reference_type: 'SaleReceipt',
@@ -21,7 +24,7 @@ function ReceiptDetailDrawerProvider({ receiptId, ...props }) {
 
   //provider.
   const provider = {
-    data,
+    transactions,
   };
 
   return (
diff --git a/client/src/containers/JournalEntriesTable/JournalEntriesTable.js b/client/src/containers/JournalEntriesTable/JournalEntriesTable.js
index 8efd2f485..e912ac1db 100644
--- a/client/src/containers/JournalEntriesTable/JournalEntriesTable.js
+++ b/client/src/containers/JournalEntriesTable/JournalEntriesTable.js
@@ -12,27 +12,28 @@ export default function JournalEntriesTable({ transactions }) {
       {
         Header: intl.get('date'),
         accessor: 'date',
-        // accessor: (r) => moment(new Date()).format('YYYY MMM DD'),
-        width: 150,
+        accessor: ({ formatted_date }) =>
+          moment(formatted_date).format('YYYY MMM DD'),
+        width: 140,
       },
       {
         Header: intl.get('account_name'),
-        accessor: 'accountName',
-        width: 150,
+        accessor: 'account_name',
+        width: 140,
       },
       {
         Header: intl.get('contact'),
         accessor: 'contactTypeFormatted',
-        width: 150,
+        width: 140,
       },
       {
         Header: intl.get('credit'),
-        accessor: ({ credit }) => credit.formattedAmount,
+        accessor: ({ credit }) => credit.formatted_amount,
         width: 100,
       },
       {
         Header: intl.get('debit'),
-        accessor: ({ debit }) => debit.formattedAmount,
+        accessor: ({ debit }) => debit.formatted_amount,
         width: 100,
       },
     ],
diff --git a/client/src/hooks/query/financialReports.js b/client/src/hooks/query/financialReports.js
index 4b7258ea7..57023381a 100644
--- a/client/src/hooks/query/financialReports.js
+++ b/client/src/hooks/query/financialReports.js
@@ -479,8 +479,10 @@ export function useTransactionsByReference(query, props) {
       params: query,
     },
     {
-      select: (res) => res.data.data,
-      defaultData: {},
+      select: (res) => res.data,
+      defaultData: {
+        transactions: [],
+      },
       ...props,
     },
   );