diff --git a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js
index 8942a6b4e..815a9553e 100644
--- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js
+++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js
@@ -16,8 +16,7 @@ import withSettings from 'containers/Settings/withSettings';
 import withBalanceSheetActions from './withBalanceSheetActions';
 import withBalanceSheetDetail from './withBalanceSheetDetail';
 
-import {useIntl } from 'react-intl';
-
+import { useIntl } from 'react-intl';
 
 function BalanceSheet({
   // #withDashboard
@@ -30,7 +29,7 @@ function BalanceSheet({
   balanceSheetLoading,
 
   // #withPreferences
-  organizationSettings
+  organizationSettings,
 }) {
   const { formatMessage } = useIntl();
   const [filter, setFilter] = useState({
@@ -41,39 +40,35 @@ function BalanceSheet({
     display_columns_by: '',
     none_zero: false,
   });
-  const [refetch, setRefetch] = useState(false);
- 
-  const fetchHook = useQuery(['balance-sheet', filter],
+
+  const fetchHook = useQuery(
+    ['balance-sheet', filter],
     (key, query) => fetchBalanceSheet({ ...query }),
-    { manual: true });
+    { manual: true },
+  );
 
   // Handle fetch the data of balance sheet.
   const handleFetchData = useCallback(() => {
-    setRefetch(true);
+    fetchHook.refetch({ force: true });
   }, []);
 
   useEffect(() => {
     changePageTitle(formatMessage({ id: 'balance_sheet' }));
-  }, [changePageTitle,formatMessage]);
+  }, [changePageTitle, formatMessage]);
 
   // Handle re-fetch balance sheet after filter change.
-  const handleFilterSubmit = useCallback((filter) => {
-    const _filter = {
-      ...filter,
-      from_date: moment(filter.from_date).format('YYYY-MM-DD'),
-      to_date: moment(filter.to_date).format('YYYY-MM-DD'),
-    };
-    setFilter({ ..._filter });
-    setRefetch(true);
-  }, [setFilter]);
-
-  // Refetch sheet effect.
-  useEffect(() => {
-    if (refetch) {
+  const handleFilterSubmit = useCallback(
+    (filter) => {
+      const _filter = {
+        ...filter,
+        from_date: moment(filter.from_date).format('YYYY-MM-DD'),
+        to_date: moment(filter.to_date).format('YYYY-MM-DD'),
+      };
+      setFilter({ ..._filter });
       fetchHook.refetch({ force: true });
-      setRefetch(false);
-    }    
-  }, [refetch])
+    },
+    [setFilter],
+  );
 
   return (
     <DashboardInsider>
@@ -83,14 +78,16 @@ function BalanceSheet({
         <div class="financial-statement">
           <BalanceSheetHeader
             pageFilter={filter}
-            onSubmitFilter={handleFilterSubmit} />
+            onSubmitFilter={handleFilterSubmit}
+          />
 
           <div class="financial-statement__body">
             <BalanceSheetTable
               companyName={organizationSettings.name}
               loading={balanceSheetLoading}
               balanceSheetQuery={filter}
-              onFetchData={handleFetchData} />
+              onFetchData={handleFetchData}
+            />
           </div>
         </div>
       </DashboardPageContent>
@@ -105,4 +102,4 @@ export default compose(
     balanceSheetLoading,
   })),
   withSettings,
-)(BalanceSheet);
\ No newline at end of file
+)(BalanceSheet);
diff --git a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js
index 04b021afd..07b0b32b7 100644
--- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js
+++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js
@@ -1,4 +1,4 @@
-import React, {useMemo, useCallback } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { connect } from 'react-redux';
 import { useIntl } from 'react-intl';
 
@@ -8,13 +8,10 @@ import DataTable from 'components/DataTable';
 
 import SettingsConnect from 'connectors/Settings.connect';
 import withBalanceSheetDetail from './withBalanceSheetDetail';
-import {
-  getFinancialSheetIndexByQuery,
-} from 'store/financialStatement/financialStatements.selectors';
+import { getFinancialSheetIndexByQuery } from 'store/financialStatement/financialStatements.selectors';
 
 import { compose, defaultExpanderReducer } from 'utils';
 
-
 function BalanceSheetTable({
   // #withPreferences
   organizationSettings,
@@ -28,113 +25,85 @@ function BalanceSheetTable({
   onFetchData,
   loading,
 }) {
-
-  const {formatMessage} = useIntl();
-  const columns = useMemo(() => [
-    {
-      // Build our expander column
-      id: 'expander', // Make sure it has an ID
-      className: 'expander',
-      Header: ({
-        getToggleAllRowsExpandedProps,
-        isAllRowsExpanded
-      }) => (
-        <span {...getToggleAllRowsExpandedProps()} className="toggle">
-          {isAllRowsExpanded ?
-            (<span class="arrow-down" />) :
-            (<span class="arrow-right" />)
-          }
-        </span>
-      ),
-      Cell: ({ row }) =>
-        // Use the row.canExpand and row.getToggleRowExpandedProps prop getter
-        // to build the toggle for expanding a row
-        row.canExpand ? (
-          <span
-            {...row.getToggleRowExpandedProps({
-              style: {
-                // We can even use the row.depth property
-                // and paddingLeft to indicate the depth
-                // of the row
-                paddingLeft: `${row.depth * 2}rem`,
-              },
-              className: 'toggle',
-            })}
-          >
-            {row.isExpanded ?
-              (<span class="arrow-down" />) :
-              (<span class="arrow-right" />)
-            }
-          </span>
-        ) : null,
-      width: 20,
-      disableResizing: true,
-    },
-    {
-      Header: formatMessage({id:'account_name'}),
-      accessor: 'name',
-      className: "account_name",
-    },
-    {
-      Header: formatMessage({id:'code'}),
-      accessor: 'code',
-      className: "code",
-    },
-    ...(balanceSheetQuery.display_columns_type === 'total') ? [
+  const { formatMessage } = useIntl();
+  const columns = useMemo(
+    () => [
       {
-        Header: formatMessage({id:'total'}),
-        accessor: 'balance.formatted_amount',
-        Cell: ({ cell }) => {
-          const row = cell.row.original;
-          if (row.total) {
-            return (<Money amount={row.total.formatted_amount} currency={'USD'} />);
-          }
-          return '';          
-        },
-        className: "credit",
-      }
-    ] : [],
-    ...(balanceSheetQuery.display_columns_type === 'date_periods') ? 
-      (balanceSheetColumns.map((column, index) => ({
-        id: `date_period_${index}`,
-        Header: column,
-        accessor: (row) => {
-          if (row.total_periods && row.total_periods[index]) {
-            const amount = row.total_periods[index].formatted_amount;
-            return (<Money amount={amount} currency={'USD'} />);
-          }
-          return '';
-        },
-        width: 100,
-      })))
-    : [],
-  ], [balanceSheetQuery, balanceSheetColumns,formatMessage]);
-  
+        Header: formatMessage({ id: 'account_name' }),
+        accessor: 'name',
+        className: 'account_name',
+      },
+      {
+        Header: formatMessage({ id: 'code' }),
+        accessor: 'code',
+        className: 'code',
+      },
+      ...(balanceSheetQuery.display_columns_type === 'total'
+        ? [
+            {
+              Header: formatMessage({ id: 'total' }),
+              accessor: 'balance.formatted_amount',
+              Cell: ({ cell }) => {
+                const row = cell.row.original;
+                if (row.total) {
+                  return (
+                    <Money
+                      amount={row.total.formatted_amount}
+                      currency={'USD'}
+                    />
+                  );
+                }
+                return '';
+              },
+              className: 'credit',
+            },
+          ]
+        : []),
+      ...(balanceSheetQuery.display_columns_type === 'date_periods'
+        ? balanceSheetColumns.map((column, index) => ({
+            id: `date_period_${index}`,
+            Header: column,
+            accessor: (row) => {
+              if (row.total_periods && row.total_periods[index]) {
+                const amount = row.total_periods[index].formatted_amount;
+                return <Money amount={amount} currency={'USD'} />;
+              }
+              return '';
+            },
+            width: 100,
+          }))
+        : []),
+    ],
+    [balanceSheetQuery, balanceSheetColumns, formatMessage],
+  );
+
   const handleFetchData = useCallback(() => {
     onFetchData && onFetchData();
   }, [onFetchData]);
 
   // Calculates the default expanded rows of balance sheet table.
-  const expandedRows = useMemo(() => 
-    defaultExpanderReducer(balanceSheetAccounts, 1),
-    [balanceSheetAccounts]);
+  const expandedRows = useMemo(
+    () => defaultExpanderReducer(balanceSheetAccounts, 1),
+    [balanceSheetAccounts],
+  );
 
   return (
     <FinancialSheet
       companyName={organizationSettings.name}
-      sheetType={'Balance Sheet'}
+      sheetType={formatMessage({ id: 'balance_sheet' })}
       fromDate={balanceSheetQuery.from_date}
       toDate={balanceSheetQuery.to_date}
       basis={balanceSheetQuery.basis}
-      loading={loading}>
-      
+      loading={loading}
+    >
       <DataTable
         className="bigcapital-datatable--financial-report"
         columns={columns}
         data={balanceSheetAccounts}
         onFetchData={handleFetchData}
         expanded={expandedRows}
-        expandSubRows={true} />
+        expandSubRows={true}
+      />
     </FinancialSheet>
   );
 }
@@ -153,13 +122,12 @@ const withBalanceSheetTable = connect(mapStateToProps);
 
 export default compose(
   withBalanceSheetTable,
-  withBalanceSheetDetail(({
-    balanceSheetAccounts,
-    balanceSheetColumns,
-    balanceSheetQuery }) => ({
+  withBalanceSheetDetail(
+    ({ balanceSheetAccounts, balanceSheetColumns, balanceSheetQuery }) => ({
       balanceSheetAccounts,
       balanceSheetColumns,
       balanceSheetQuery,
-    })),
+    }),
+  ),
   SettingsConnect,
-)(BalanceSheetTable);
\ No newline at end of file
+)(BalanceSheetTable);
diff --git a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js
index 57e07c46d..a772c3d3d 100644
--- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js
+++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js
@@ -38,7 +38,6 @@ function GeneralLedger({
     basis: 'accural',
     none_zero: true,
   });
-  const [refetch, setRefetch] = useState(false);
 
   // Change page title of the dashboard.
   useEffect(() => {
@@ -52,17 +51,9 @@ function GeneralLedger({
     (key, query) => fetchGeneralLedger(query),
     { manual: true });
 
-  // Refetch general ledger sheet effect.
-  useEffect(() => {
-    if (refetch) {
-      fetchSheet.refetch({ force: true });
-      setRefetch(false);
-    }
-  }, [fetchSheet, refetch]);
-
   // Handle fetch data of trial balance table.
   const handleFetchData = useCallback(() => {
-    setRefetch(true);
+    fetchSheet.refetch({ force: true });
   }, []);
   
   // Handle financial statement filter change.
@@ -73,7 +64,7 @@ function GeneralLedger({
       to_date: moment(filter.to_date).format('YYYY-MM-DD'),
     };
     setFilter(parsedFilter);
-    setRefetch(true);
+    fetchSheet.refetch({ force: true });
   }, [setFilter]);
 
   const handleFilterChanged = () => { };
diff --git a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js
index 86d27bad7..cba88f6ac 100644
--- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js
+++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js
@@ -1,22 +1,16 @@
-import React, {useCallback, useMemo} from 'react';
+import React, { useCallback, useMemo } from 'react';
 import moment from 'moment';
 import { connect } from 'react-redux';
-import {
-  defaultExpanderReducer,
-  compose
-} from 'utils';
+import { defaultExpanderReducer, compose } from 'utils';
 import { useIntl } from 'react-intl';
 
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
 import Money from 'components/Money';
 
-import {
-  getFinancialSheetIndexByQuery,
-} from 'store/financialStatement/financialStatements.selectors';
+import { getFinancialSheetIndexByQuery } from 'store/financialStatement/financialStatements.selectors';
 import withGeneralLedger from './withGeneralLedger';
 
-
 const ROW_TYPE = {
   CLOSING_BALANCE: 'closing_balance',
   OPENING_BALANCE: 'opening_balance',
@@ -32,121 +26,97 @@ function GeneralLedgerTable({
   generalLedgerTableRows,
   generalLedgerQuery,
 }) {
-  
+  const { formatMessage } = useIntl();
+
   // Account name column accessor.
-  const accountNameAccessor = useCallback((row) => {
-    switch (row.rowType) {
-      case ROW_TYPE.OPENING_BALANCE:
-        return 'Opening Balance';
-      case ROW_TYPE.CLOSING_BALANCE:
-        return 'Closing Balance';
-      default:
-        return row.name;
-    }
-  }, [ROW_TYPE]);
+  const accountNameAccessor = useCallback(
+    (row) => {
+      switch (row.rowType) {
+        case ROW_TYPE.OPENING_BALANCE:
+          return 'Opening Balance';
+        case ROW_TYPE.CLOSING_BALANCE:
+          return 'Closing Balance';
+        default:
+          return row.name;
+      }
+    },
+    [ROW_TYPE],
+  );
 
   // Date accessor.
-  const dateAccessor = useCallback((row) => {
-    const TYPES = [
-      ROW_TYPE.OPENING_BALANCE,
-      ROW_TYPE.CLOSING_BALANCE,
-      ROW_TYPE.TRANSACTION];
+  const dateAccessor = useCallback(
+    (row) => {
+      const TYPES = [
+        ROW_TYPE.OPENING_BALANCE,
+        ROW_TYPE.CLOSING_BALANCE,
+        ROW_TYPE.TRANSACTION,
+      ];
 
-    return (TYPES.indexOf(row.rowType) !== -1)
-      ? moment(row.date).format('DD-MM-YYYY') : '';
-  }, [moment, ROW_TYPE]);
+      return TYPES.indexOf(row.rowType) !== -1
+        ? moment(row.date).format('DD-MM-YYYY')
+        : '';
+    },
+    [moment, ROW_TYPE],
+  );
 
   // Amount cell
   const amountCell = useCallback(({ cell }) => {
-    const transaction = cell.row.original
+    const transaction = cell.row.original;
 
     if (transaction.rowType === ROW_TYPE.ACCOUNT) {
-      return (!cell.row.isExpanded) ?
-        (<Money amount={transaction.closing.amount} currency={"USD"} />) : '';
+      return !cell.row.isExpanded ? (
+        <Money amount={transaction.closing.amount} currency={'USD'} />
+      ) : (
+        ''
+      );
     }
-    return (<Money amount={transaction.amount} currency={"USD"} />);
+    return <Money amount={transaction.amount} currency={'USD'} />;
   }, []);
 
   const referenceLink = useCallback((row) => {
-    return (<a href="">{row.referenceId}</a>);
+    return <a href="">{row.referenceId}</a>;
   });
-  const { formatMessage } = useIntl();
-  const columns = useMemo(() => [
-    {
-      // Build our expander column
-      id: 'expander', // Make sure it has an ID
-      className: 'expander',
-      Header: ({
-        getToggleAllRowsExpandedProps,
-        isAllRowsExpanded
-      }) => (
-          <span {...getToggleAllRowsExpandedProps()} className="toggle">
-            {isAllRowsExpanded ?
-              (<span class="arrow-down" />) :
-              (<span class="arrow-right" />)
-            }
-          </span>
-        ),
-      Cell: ({ row }) =>
-        // Use the row.canExpand and row.getToggleRowExpandedProps prop getter
-        // to build the toggle for expanding a row
-        row.canExpand ? (
-          <span
-            {...row.getToggleRowExpandedProps({
-              style: {
-                // We can even use the row.depth property
-                // and paddingLeft to indicate the depth
-                // of the row
-                paddingLeft: `${row.depth * 2}rem`,
-              },
-              className: 'toggle',
-            })}
-          >
-            {row.isExpanded ?
-              (<span class="arrow-down" />) :
-              (<span class="arrow-right" />)
-            }
-          </span>
-        ) : null,
-      width: 20,
-      disableResizing: true,
-    },
-    {
-      Header: formatMessage({id:'account_name'}),
-      accessor: accountNameAccessor,
-      className: "name",
-    },
-    {
-      Header: formatMessage({id:'date'}),
-      accessor: dateAccessor,
-      className: "date",
-    },
-    {
-      Header: formatMessage({id:'transaction_type'}),
-      accessor: 'referenceType',
-      className: 'transaction_type',
-    },
-    {
-      Header: formatMessage({id:'trans_num'}),
-      accessor: referenceLink,
-      className: 'transaction_number'
-    },
-    {
-      Header: formatMessage({id:'description'}),
-      accessor: 'note',
-      className: 'description',
-    },
-    {
-      Header: formatMessage({id:'amount'}),
-      Cell: amountCell,
-      className: 'amount'
-    },
-    {
-      Header: formatMessage({id:'balance'}),
-      Cell: amountCell,
-      className: 'balance',
-    },
-  ], []);
+
+  const columns = useMemo(
+    () => [
+      {
+        Header: formatMessage({ id: 'account_name' }),
+        accessor: accountNameAccessor,
+        className: 'name',
+      },
+      {
+        Header: formatMessage({ id: 'date' }),
+        accessor: dateAccessor,
+        className: 'date',
+      },
+      {
+        Header: formatMessage({ id: 'transaction_type' }),
+        accessor: 'referenceType',
+        className: 'transaction_type',
+      },
+      {
+        Header: formatMessage({ id: 'trans_num' }),
+        accessor: referenceLink,
+        className: 'transaction_number',
+      },
+      {
+        Header: formatMessage({ id: 'description' }),
+        accessor: 'note',
+        className: 'description',
+      },
+      {
+        Header: formatMessage({ id: 'amount' }),
+        Cell: amountCell,
+        className: 'amount',
+      },
+      {
+        Header: formatMessage({ id: 'balance' }),
+        Cell: amountCell,
+        className: 'balance',
+      },
+    ],
+    [],
+  );
 
   const handleFetchData = useCallback(() => {
     onFetchData && onFetchData();
@@ -155,23 +125,25 @@ function GeneralLedgerTable({
   // Default expanded rows of general ledger table.
   const expandedRows = useMemo(
     () => defaultExpanderReducer(generalLedgerTableRows, 1),
-    [generalLedgerTableRows]);
+    [generalLedgerTableRows],
+  );
 
-  const rowClassNames = (row) => ([
-    `row-type--${row.original.rowType}`,
-  ]);
+  const rowClassNames = (row) => [`row-type--${row.original.rowType}`];
 
   return (
     <FinancialSheet
       companyName={companyName}
-      sheetType={'General Ledger Sheet'}
+      sheetType={formatMessage({ id: 'general_ledger_sheet' })}
       fromDate={generalLedgerQuery.from_date}
       toDate={generalLedgerQuery.to_date}
       name="general-ledger"
-      loading={generalLedgerSheetLoading}>
-
+      loading={generalLedgerSheetLoading}
+    >
       <DataTable
         className="bigcapital-datatable--financial-report"
+        noResults={formatMessage({
+          id: 'this_report_does_not_contain_any_data_between_date_period',
+        })}
         columns={columns}
         data={generalLedgerTableRows}
         onFetchData={handleFetchData}
@@ -181,9 +153,10 @@ function GeneralLedgerTable({
         fixedItemSize={37}
         fixedSizeHeight={1000}
         expandable={true}
-        expandToggleColumn={1} />
+        expandToggleColumn={1}
+      />
     </FinancialSheet>
-  ); 
+  );
 }
 
 const mapStateToProps = (state, props) => {
@@ -201,13 +174,15 @@ const withGeneralLedgerTable = connect(mapStateToProps);
 
 export default compose(
   withGeneralLedgerTable,
-  withGeneralLedger(({
-    generalLedgerTableRows,
-    generalLedgerSheetLoading,
-    generalLedgerQuery,
-  }) => ({
-    generalLedgerTableRows,
-    generalLedgerSheetLoading,
-    generalLedgerQuery
-  })),
+  withGeneralLedger(
+    ({
+      generalLedgerTableRows,
+      generalLedgerSheetLoading,
+      generalLedgerQuery,
+    }) => ({
+      generalLedgerTableRows,
+      generalLedgerSheetLoading,
+      generalLedgerQuery,
+    }),
+  ),
 )(GeneralLedgerTable);
diff --git a/client/src/containers/FinancialStatements/Journal/Journal.js b/client/src/containers/FinancialStatements/Journal/Journal.js
index c6638ba0f..83efaffe0 100644
--- a/client/src/containers/FinancialStatements/Journal/Journal.js
+++ b/client/src/containers/FinancialStatements/Journal/Journal.js
@@ -15,13 +15,12 @@ import SettingsConnect from 'connectors/Settings.connect';
 import withDashboard from 'containers/Dashboard/withDashboard';
 import withJournalActions from './withJournalActions';
 
-
 function Journal({
   // #withJournalActions
   requestFetchJournalSheet,
 
   // #withDashboard
-  changePageTitle,  
+  changePageTitle,
 
   // #withPreferences
   organizationSettings,
@@ -29,76 +28,72 @@ function Journal({
   const [filter, setFilter] = useState({
     from_date: moment().startOf('year').format('YYYY-MM-DD'),
     to_date: moment().endOf('year').format('YYYY-MM-DD'),
-    basis: 'accural'
+    basis: 'accural',
   });
   const { formatMessage } = useIntl();
-  const [refetch, setRefetch] = useState(false);
 
   useEffect(() => {
-    changePageTitle(formatMessage({id:'journal_sheet'}));
-  }, [changePageTitle,formatMessage]);
+    changePageTitle(formatMessage({ id: 'journal_sheet' }));
+  }, [changePageTitle, formatMessage]);
 
-  const fetchHook = useQuery(['journal', filter],
+  const fetchHook = useQuery(
+    ['journal', filter],
     (key, query) => requestFetchJournalSheet(query),
-    { manual: true });
+    { manual: true },
+  );
 
   // Handle financial statement filter change.
-  const handleFilterSubmit = useCallback((filter) => {
-    const _filter = {
-      ...filter,
-      from_date: moment(filter.from_date).format('YYYY-MM-DD'),
-      to_date: moment(filter.to_date).format('YYYY-MM-DD'),
-    };
-    setFilter(_filter);
-    setRefetch(true);
-  }, [fetchHook]);
+  const handleFilterSubmit = useCallback(
+    (filter) => {
+      const _filter = {
+        ...filter,
+        from_date: moment(filter.from_date).format('YYYY-MM-DD'),
+        to_date: moment(filter.to_date).format('YYYY-MM-DD'),
+      };
+      setFilter(_filter);
+      fetchHook.refetch({ force: true });
+    },
+    [fetchHook],
+  );
 
-  const handlePrintClick = useCallback(() => {
+  const handlePrintClick = useCallback(() => {}, []);
 
-  }, []);
-
-  const handleExportClick = useCallback(() => {
-
-  }, []);
+  const handleExportClick = useCallback(() => {}, []);
 
   const handleFetchData = useCallback(({ sortBy, pageIndex, pageSize }) => {
-    setRefetch(true);
+    fetchHook.refetch({ force: true });
   }, []);
 
-  useEffect(() => {
-    if (refetch) {
-      fetchHook.refetch({ force: true });
-      setRefetch(false);
-    }
-  }, [refetch, fetchHook])
-
   return (
     <DashboardInsider>
       <JournalActionsBar
         onSubmitFilter={handleFilterSubmit}
         onPrintClick={handlePrintClick}
-        onExportClick={handleExportClick} />
+        onExportClick={handleExportClick}
+      />
 
       <DashboardPageContent>
         <div class="financial-statement financial-statement--journal">
-          <JournalHeader 
+          <JournalHeader
             pageFilter={filter}
-            onSubmitFilter={handleFilterSubmit} />
-          
+            onSubmitFilter={handleFilterSubmit}
+          />
+
           <div class="financial-statement__table">
             <JournalTable
               companyName={organizationSettings.name}
               journalQuery={filter}
-              onFetchData={handleFetchData} />
+              onFetchData={handleFetchData}
+            />
           </div>
         </div>
       </DashboardPageContent>
     </DashboardInsider>
-  )
+  );
 }
 
 export default compose(
   withDashboard,
   withJournalActions,
   SettingsConnect,
-)(Journal);
\ No newline at end of file
+)(Journal);
diff --git a/client/src/containers/FinancialStatements/Journal/JournalTable.js b/client/src/containers/FinancialStatements/Journal/JournalTable.js
index b3a8ada73..de8388e2e 100644
--- a/client/src/containers/FinancialStatements/Journal/JournalTable.js
+++ b/client/src/containers/FinancialStatements/Journal/JournalTable.js
@@ -1,20 +1,17 @@
 import React, { useCallback, useMemo } from 'react';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import moment from 'moment';
-import {  useIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
-import {compose, defaultExpanderReducer} from 'utils';
+import { compose, defaultExpanderReducer } from 'utils';
 
 import Money from 'components/Money';
-import {
-  getFinancialSheetIndexByQuery,
-} from 'store/financialStatement/financialStatements.selectors';
+import { getFinancialSheetIndexByQuery } from 'store/financialStatement/financialStatements.selectors';
 
 import withJournal from './withJournal';
 
-
 function JournalSheetTable({
   // #withJournal
   journalSheetTableRows,
@@ -28,61 +25,80 @@ function JournalSheetTable({
   const { formatMessage } = useIntl();
 
   const rowTypeFilter = (rowType, value, types) => {
-    return (types.indexOf(rowType) === -1) ? '' : value;
+    return types.indexOf(rowType) === -1 ? '' : value;
   };
 
   const exceptRowTypes = (rowType, value, types) => {
-    return (types.indexOf(rowType) !== -1) ? '' : value;    
+    return types.indexOf(rowType) !== -1 ? '' : value;
   };
 
-  const columns = useMemo(() => [
-    {
-      Header: formatMessage({id:'date'}),
-      accessor: r => rowTypeFilter(r.rowType, moment(r.date).format('YYYY/MM/DD'), ['first_entry']),
-      className: 'date',
-      width: 85,
-    },
-    {
-      Header: formatMessage({id:'transaction_type'}),
-      accessor: r => rowTypeFilter(r.rowType, r.transaction_type, ['first_entry']),
-      className: "transaction_type",
-      width: 145,
-    },
-    {
-      Header: formatMessage({id:'num'}),
-      accessor: r => rowTypeFilter(r.rowType, r.reference_id, ['first_entry']),
-      className: 'reference_id',
-      width: 70,
-    },
-    {
-      Header: formatMessage({id:'description'}),
-      accessor: 'note',
-    },
-    {
-      Header: formatMessage({id:'acc_code'}),
-      accessor: 'account.code',
-      width: 120,
-      className: 'account_code',
-    },
-    {
-      Header: formatMessage({id:'account'}),
-      accessor: 'account.name',
-    },
-    {
-      Header: formatMessage({id:'credit'}),
-      accessor: r => exceptRowTypes(
-        r.rowType, (<Money amount={r.credit} currency={'USD'} />), ['space_entry']),
-    },
-    {
-      Header: formatMessage({id:'debit'}),
-      accessor: r => exceptRowTypes(
-        r.rowType, (<Money amount={r.debit} currency={'USD'} />), ['space_entry']),
-    },
-  ], [formatMessage]);
+  const columns = useMemo(
+    () => [
+      {
+        Header: formatMessage({ id: 'date' }),
+        accessor: (r) =>
+          rowTypeFilter(r.rowType, moment(r.date).format('YYYY/MM/DD'), [
+            'first_entry',
+          ]),
+        className: 'date',
+        width: 85,
+      },
+      {
+        Header: formatMessage({ id: 'transaction_type' }),
+        accessor: (r) =>
+          rowTypeFilter(r.rowType, r.transaction_type, ['first_entry']),
+        className: 'transaction_type',
+        width: 145,
+      },
+      {
+        Header: formatMessage({ id: 'num' }),
+        accessor: (r) =>
+          rowTypeFilter(r.rowType, r.reference_id, ['first_entry']),
+        className: 'reference_id',
+        width: 70,
+      },
+      {
+        Header: formatMessage({ id: 'description' }),
+        accessor: 'note',
+      },
+      {
+        Header: formatMessage({ id: 'acc_code' }),
+        accessor: 'account.code',
+        width: 120,
+        className: 'account_code',
+      },
+      {
+        Header: formatMessage({ id: 'account' }),
+        accessor: 'account.name',
+      },
+      {
+        Header: formatMessage({ id: 'credit' }),
+        accessor: (r) =>
+          exceptRowTypes(
+            r.rowType,
+            <Money amount={r.credit} currency={'USD'} />,
+            ['space_entry'],
+          ),
+      },
+      {
+        Header: formatMessage({ id: 'debit' }),
+        accessor: (r) =>
+          exceptRowTypes(
+            r.rowType,
+            <Money amount={r.debit} currency={'USD'} />,
+            ['space_entry'],
+          ),
+      },
+    ],
+    [formatMessage],
+  );
 
-  const handleFetchData = useCallback((...args) => {
-    onFetchData && onFetchData(...args)
-  }, [onFetchData]);
+  const handleFetchData = useCallback(
+    (...args) => {
+      onFetchData && onFetchData(...args);
+    },
+    [onFetchData],
+  );
 
   // Default expanded rows of general journal table.
   const expandedRows = useMemo(() => defaultExpanderReducer([], 1), []);
@@ -90,41 +106,45 @@ function JournalSheetTable({
   return (
     <FinancialSheet
       companyName={companyName}
-      sheetType={'Journal Sheet'}
+      sheetType={formatMessage({ id: 'journal_sheet' })}
       fromDate={journalSheetQuery.from_date}
       toDate={journalSheetQuery.to_date}
       name="journal"
-      loading={journalSheetLoading}>
- 
+      loading={journalSheetLoading}
+    >
       <DataTable
         className="bigcapital-datatable--financial-report"
         columns={columns}
         data={journalSheetTableRows}
         onFetchData={handleFetchData}
-        noResults={"This report does not contain any data between date period."}
-        expanded={expandedRows} />
+        noResults={formatMessage({
+          id: 'this_report_does_not_contain_any_data_between_date_period',
+        })}
+        expanded={expandedRows}
+      />
     </FinancialSheet>
   );
 }
 
-
 const mapStateToProps = (state, props) => {
   const { journalQuery } = props;
   return {
     journalIndex: getFinancialSheetIndexByQuery(
       state.financialStatements.journal.sheets,
       journalQuery,
-    ) 
+    ),
   };
-}
+};
 
 const withJournalTable = connect(mapStateToProps);
 
 export default compose(
   withJournalTable,
-  withJournal(({ journalSheetTableRows, journalSheetLoading, journalSheetQuery }) => ({
-    journalSheetTableRows,
-    journalSheetLoading,
-    journalSheetQuery,
-  })),
-)(JournalSheetTable);
\ No newline at end of file
+  withJournal(
+    ({ journalSheetTableRows, journalSheetLoading, journalSheetQuery }) => ({
+      journalSheetTableRows,
+      journalSheetLoading,
+      journalSheetQuery,
+    }),
+  ),
+)(JournalSheetTable);
diff --git a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js b/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js
index 337b154e6..c003ee8ef 100644
--- a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js
+++ b/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js
@@ -34,7 +34,6 @@ function ProfitLossSheet({
     from_date: moment().startOf('year').format('YYYY-MM-DD'),
     to_date: moment().endOf('year').format('YYYY-MM-DD'),
   });
-  const [refetch, setRefetch] = useState(false);
 
   // Change page title of the dashboard.
   useEffect(() => {
@@ -54,20 +53,13 @@ function ProfitLossSheet({
       to_date: moment(filter.to_date).format('YYYY-MM-DD'),
     };
     setFilter(_filter);
-    setRefetch(true);
+    fetchHook.refetch({ force: true });
   }, []);
 
   // Handle fetch data of profit/loss sheet table.
   const handleFetchData = useCallback(() => {
-    setRefetch(true);
-  }, [fetchHook]);
-
-  useEffect(() => {
-    if (refetch) {
-      fetchHook.refetch({ force: true });
-      setRefetch(false);
-    }
-  }, [fetchHook, refetch]);
+    fetchHook.refetch({ force: true });
+  }, []);
 
   return (
     <DashboardInsider>
diff --git a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js
index d23f7b8b3..72d7fede4 100644
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js
+++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js
@@ -3,7 +3,7 @@ import { useQuery } from 'react-query';
 import moment from 'moment';
 import { useIntl } from 'react-intl';
 
-import TrialBalanceSheetHeader from "./TrialBalanceSheetHeader";
+import TrialBalanceSheetHeader from './TrialBalanceSheetHeader';
 import TrialBalanceSheetTable from './TrialBalanceSheetTable';
 import TrialBalanceActionsBar from './TrialBalanceActionsBar';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
@@ -16,8 +16,6 @@ import withTrialBalanceActions from './withTrialBalanceActions';
 import withTrialBalance from './withTrialBalance';
 import withSettings from 'containers/Settings/withSettings';
 
-
-
 function TrialBalanceSheet({
   // #withDashboard
   changePageTitle,
@@ -37,40 +35,36 @@ function TrialBalanceSheet({
     basis: 'accural',
     none_zero: false,
   });
-  const [refetch, setRefetch] = useState(false);
   const { formatMessage } = useIntl();
 
-  const fetchHook = useQuery(['trial-balance', filter],
+  const fetchHook = useQuery(
+    ['trial-balance', filter],
     (key, query) => fetchTrialBalanceSheet(query),
-    { manual: true });
+    { manual: true },
+  );
 
   // handle fetch data of trial balance table.
   const handleFetchData = useCallback(() => {
-    setRefetch(true);
-  }, [fetchHook]);
+    fetchHook.refetch({ force: true });
+  }, []);
 
   // Change page title of the dashboard.
   useEffect(() => {
-    changePageTitle(formatMessage({id:'trial_balance_sheet'}));
-  }, [changePageTitle,formatMessage]);
+    changePageTitle(formatMessage({ id: 'trial_balance_sheet' }));
+  }, [changePageTitle, formatMessage]);
 
-  const handleFilterSubmit = useCallback((filter) => {
-    const parsedFilter = {
-      ...filter,
-      from_date: moment(filter.from_date).format('YYYY-MM-DD'),
-      to_date: moment(filter.to_date).format('YYYY-MM-DD'),
-    };
-    setFilter(parsedFilter);
-    setRefetch(true);
-  }, []);
-
-  // Refetch sheet effect.
-  useEffect(() => {
-    if (refetch) {
+  const handleFilterSubmit = useCallback(
+    (filter) => {
+      const parsedFilter = {
+        ...filter,
+        from_date: moment(filter.from_date).format('YYYY-MM-DD'),
+        to_date: moment(filter.to_date).format('YYYY-MM-DD'),
+      };
+      setFilter(parsedFilter);
       fetchHook.refetch({ force: true });
-      setRefetch(false);
-    }
-  }, [fetchHook]);
+    },
+    [fetchHook],
+  );
 
   return (
     <DashboardInsider>
@@ -80,19 +74,21 @@ function TrialBalanceSheet({
         <div class="financial-statement">
           <TrialBalanceSheetHeader
             pageFilter={filter}
-            onSubmitFilter={handleFilterSubmit} />
+            onSubmitFilter={handleFilterSubmit}
+          />
 
           <div class="financial-statement__body">
             <TrialBalanceSheetTable
               companyName={organizationSettings.name}
               trialBalanceQuery={filter}
               onFetchData={handleFetchData}
-              loading={trialBalanceSheetLoading} />
+              loading={trialBalanceSheetLoading}
+            />
           </div>
         </div>
       </DashboardPageContent>
     </DashboardInsider>
-  )
+  );
 }
 
 export default compose(
@@ -102,4 +98,4 @@ export default compose(
     trialBalanceSheetLoading,
   })),
   withSettings,
-)(TrialBalanceSheet);
\ No newline at end of file
+)(TrialBalanceSheet);
diff --git a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js
index 51c642d3e..b2eb7fb49 100644
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js
+++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js
@@ -1,19 +1,16 @@
-import React, {useCallback, useMemo} from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { connect } from 'react-redux';
 import { useIntl } from 'react-intl';
 
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
 import Money from 'components/Money';
-import {
-  getFinancialSheetIndexByQuery,
-} from 'store/financialStatement/financialStatements.selectors';
+import { getFinancialSheetIndexByQuery } from 'store/financialStatement/financialStatements.selectors';
 
 import withTrialBalance from './withTrialBalance';
 
 import { compose } from 'utils';
 
-
 function TrialBalanceSheetTable({
   // #withTrialBalanceDetail
   trialBalanceAccounts,
@@ -26,40 +23,42 @@ function TrialBalanceSheetTable({
   loading,
   companyName,
 }) {
+  const { formatMessage } = useIntl();
 
-  const {formatMessage} =useIntl();
-
-  const columns = useMemo(() => [
-    {
-      Header: formatMessage({ id:'account_name' }),
-      accessor: 'name',
-      className: "name",
-    },
-    {
-      Header: formatMessage({ id:'code' }), 
-      accessor: 'code',
-      className: "code",
-      width: 120,
-    },
-    {
-      Header: formatMessage({ id:'credit' }),
-      accessor: r => (<Money amount={r.credit} currency="USD" />),
-      className: 'credit',
-      width: 120,
-    },
-    {
-      Header: formatMessage({ id:'debit' }),
-      accessor: r => (<Money amount={r.debit} currency="USD" />),
-      className: 'debit',
-      width: 120,
-    },
-    {
-      Header: formatMessage({ id:'balance' }),
-      accessor: r => (<Money amount={r.balance} currency="USD" />),
-      className: 'balance',
-      width: 120,
-    }
-  ], [formatMessage]);
+  const columns = useMemo(
+    () => [
+      {
+        Header: formatMessage({ id: 'account_name' }),
+        accessor: 'name',
+        className: 'name',
+      },
+      {
+        Header: formatMessage({ id: 'code' }),
+        accessor: 'code',
+        className: 'code',
+        width: 120,
+      },
+      {
+        Header: formatMessage({ id: 'credit' }),
+        accessor: (r) => <Money amount={r.credit} currency="USD" />,
+        className: 'credit',
+        width: 120,
+      },
+      {
+        Header: formatMessage({ id: 'debit' }),
+        accessor: (r) => <Money amount={r.debit} currency="USD" />,
+        className: 'debit',
+        width: 120,
+      },
+      {
+        Header: formatMessage({ id: 'balance' }),
+        accessor: (r) => <Money amount={r.balance} currency="USD" />,
+        className: 'balance',
+        width: 120,
+      },
+    ],
+    [formatMessage],
+  );
 
   const handleFetchData = useCallback(() => {
     onFetchData && onFetchData();
@@ -68,21 +67,22 @@ function TrialBalanceSheetTable({
   return (
     <FinancialSheet
       companyName={companyName}
-      sheetType={'Trial Balance Sheet'}
+      sheetType={formatMessage({ id: 'trial_balance_sheet' })}
       fromDate={trialBalanceQuery.from_date}
       toDate={trialBalanceQuery.to_date}
       name="trial-balance"
-      loading={loading}>
-
+      loading={loading}
+    >
       <DataTable
         className="bigcapital-datatable--financial-report"
         columns={columns}
         data={trialBalanceAccounts}
         onFetchData={handleFetchData}
         expandable={true}
-        expandToggleColumn={1} />
+        expandToggleColumn={1}
+      />
     </FinancialSheet>
-  ); 
+  );
 }
 
 const mapStateToProps = (state, props) => {
@@ -102,4 +102,4 @@ export default compose(
   withTrialBalance(({ trialBalanceAccounts }) => ({
     trialBalanceAccounts,
   })),
-)(TrialBalanceSheetTable);
\ No newline at end of file
+)(TrialBalanceSheetTable);