diff --git a/client/src/components/Preferences/PreferencesSidebar.js b/client/src/components/Preferences/PreferencesSidebar.js
index c1987de94..714d5bf48 100644
--- a/client/src/components/Preferences/PreferencesSidebar.js
+++ b/client/src/components/Preferences/PreferencesSidebar.js
@@ -1,15 +1,18 @@
 import React from 'react';
 import {Menu, MenuItem, MenuDivider} from '@blueprintjs/core';
-import {useHistory} from 'react-router-dom';
+import { useHistory, useLocation } from 'react-router-dom';
 import preferencesMenu from 'config/preferencesMenu';
 
 export default function PreferencesSidebar() {
   const history = useHistory();
-  
+  const location = useLocation();
+
   const items = preferencesMenu.map((item) => (
     (item.divider) ?
-      <MenuDivider title={item.title} /> : 
+      <MenuDivider
+        title={item.title} /> : 
       <MenuItem
+        active={(item.href && item.href === location.pathname)}
         text={item.text}
         label={item.label}
         disabled={item.disabled}
diff --git a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js
index ad0f3408b..1e6cf2da6 100644
--- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js
+++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js
@@ -11,9 +11,9 @@ import BalanceSheetTable from './BalanceSheetTable';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import BalanceSheetActionsBar from './BalanceSheetActionsBar';
-import SettingsConnect from 'connectors/Settings.connect';
 
 import withDashboard from 'containers/Dashboard/withDashboard';
+import withSettings from 'containers/Settings/withSettings';
 import withBalanceSheetActions from './withBalanceSheetActions';
 import withBalanceSheetDetail from './withBalanceSheetDetail';
 
@@ -40,14 +40,16 @@ function BalanceSheet({
     display_columns_by: '',
     none_zero: false,
   });
+  const [refetch, setRefetch] = useState(false);
  
   const fetchHook = useQuery(['balance-sheet', filter],
-    (key, query) => { fetchBalanceSheet({ ...query }); });
+    (key, query) => fetchBalanceSheet({ ...query }),
+    { manual: true });
 
   // Handle fetch the data of balance sheet.
   const handleFetchData = useCallback(() => {
-    fetchHook.refetch();
-  }, [fetchHook]);
+    setRefetch(true);
+  }, []);
 
   useEffect(() => {
     changePageTitle('Balance Sheet');
@@ -61,8 +63,17 @@ function BalanceSheet({
       to_date: moment(filter.to_date).format('YYYY-MM-DD'),
     };
     setFilter({ ..._filter });
+    setRefetch(true);
   }, [setFilter]);
 
+  // Refetch sheet effect.
+  useEffect(() => {
+    if (refetch) {
+      fetchHook.refetch({ force: true });
+      setRefetch(false);
+    }    
+  }, [refetch])
+
   return (
     <DashboardInsider>
       <BalanceSheetActionsBar />
@@ -92,6 +103,5 @@ export default compose(
   withBalanceSheetDetail(({ balanceSheetLoading }) => ({
     balanceSheetLoading,
   })),
-  // BalanceSheetConnect,
-  SettingsConnect,
+  withSettings,
 )(BalanceSheet);
\ No newline at end of file
diff --git a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js
index 9e792d07d..a3c4d9bac 100644
--- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js
+++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js
@@ -13,6 +13,7 @@ import {
 import Icon from 'components/Icon';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'
 import classNames from 'classnames';
+
 import FilterDropdown from 'components/FilterDropdown';
 
 
diff --git a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js
index 63d75c472..234f0f026 100644
--- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js
+++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js
@@ -16,6 +16,7 @@ import FinancialStatementDateRange from 'containers/FinancialStatements/Financia
 import SelectDisplayColumnsBy from '../SelectDisplayColumnsBy';
 import RadiosAccountingBasis from '../RadiosAccountingBasis';
 
+
 export default function BalanceSheetHeader({
   onSubmitFilter,
   pageFilter,
diff --git a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js
index 8e82e57c2..0b4d184fd 100644
--- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js
+++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js
@@ -131,8 +131,7 @@ function BalanceSheetTable({
         data={balanceSheetAccounts}
         onFetchData={handleFetchData}
         expanded={expandedRows}
-        expandSubRows={true}
-        noInitialFetch={true} />
+        expandSubRows={true} />
     </FinancialSheet>
   );
 }
diff --git a/client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetActions.js b/client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetActions.js
index 9f435df40..0e0f83ecc 100644
--- a/client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetActions.js
+++ b/client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetActions.js
@@ -3,7 +3,7 @@ import {
   fetchBalanceSheet,
 } from 'store/financialStatement/financialStatements.actions';
 
-export const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = (dispatch) => ({
   fetchBalanceSheet: (query = {}) => dispatch(fetchBalanceSheet({ query })),  
 });
 
diff --git a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js
index 5dae6be1c..d528fb2d4 100644
--- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js
+++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js
@@ -1,24 +1,33 @@
 import React, { useEffect, useCallback, useState, useMemo } from 'react';
 import moment from 'moment';
 import GeneralLedgerTable from 'containers/FinancialStatements/GeneralLedger/GeneralLedgerTable';
-import useAsync from 'hooks/async';
-import DashboardConnect from 'connectors/Dashboard.connector';
-import GeneralLedgerConnect from 'connectors/GeneralLedgerSheet.connect';
+import { useQuery } from 'react-query';
+
 import GeneralLedgerHeader from './GeneralLedgerHeader';
+
 import {compose} from 'utils';
+
 import DashboardInsider from 'components/Dashboard/DashboardInsider'
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import GeneralLedgerActionsBar from './GeneralLedgerActionsBar';
-import AccountsConnect from 'connectors/Accounts.connector';
-import SettingsConnect from 'connectors/Settings.connect';
+
+import withGeneralLedgerActions from './withGeneralLedgerActions';
+import withDashboard from 'containers/Dashboard/withDashboard';
+import withAccountsActions from 'containers/Accounts/withAccountsActions';
+import withSettings from 'containers/Settings/withSettings';
+
 
 function GeneralLedger({
+  // #withDashboard
   changePageTitle,
-  getGeneralLedgerSheetIndex,
-  getGeneralLedgerSheet,
+
+  // #withGeneralLedgerActions
   fetchGeneralLedger,
-  generalLedgerSheetLoading,
+  
+  // #withAccountsActions
   requestFetchAccounts,
+
+  // #withSettings
   organizationSettings,
 }) {
   const [filter, setFilter] = useState({
@@ -27,34 +36,32 @@ function GeneralLedger({
     basis: 'accural',
     none_zero: true,
   });
+  const [refetch, setRefetch] = useState(false);
 
   // Change page title of the dashboard.
   useEffect(() => {
     changePageTitle('General Ledger');
   }, []);
 
-  const fetchHook = useAsync(() => {
-    return Promise.all([
-      requestFetchAccounts(),
-    ]);
-  });
+  const fetchAccounts = useQuery(['accounts-list'],
+    () => requestFetchAccounts());
 
-  const fetchSheet = useAsync((query = filter) => {
-    return Promise.all([
-      fetchGeneralLedger(query),
-    ]);
-  }, false);
+  const fetchSheet = useQuery(['general-ledger', filter],
+    (key, query) => fetchGeneralLedger(query),
+    { manual: true });
 
-  const generalLedgerSheetIndex = useMemo(() => 
-    getGeneralLedgerSheetIndex(filter),
-    [getGeneralLedgerSheetIndex, filter]);
-
-  const generalLedgerSheet = useMemo(() =>
-    getGeneralLedgerSheet(generalLedgerSheetIndex),
-    [generalLedgerSheetIndex, getGeneralLedgerSheet])
+  // 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(() => { fetchSheet.execute() }, [fetchSheet]);
+  const handleFetchData = useCallback(() => {
+    setRefetch(true);
+  }, []);
   
   // Handle financial statement filter change.
   const handleFilterSubmit = useCallback((filter) => {
@@ -64,14 +71,15 @@ function GeneralLedger({
       to_date: moment(filter.to_date).format('YYYY-MM-DD'),
     };
     setFilter(parsedFilter);
-    fetchSheet.execute(parsedFilter);
-  }, [setFilter, fetchSheet]);
+    setRefetch(true);
+  }, [setFilter]);
 
   const handleFilterChanged = () => {};
 
   return (
     <DashboardInsider>
-      <GeneralLedgerActionsBar onFilterChanged={handleFilterChanged} />
+      <GeneralLedgerActionsBar
+        onFilterChanged={handleFilterChanged} />
 
       <DashboardPageContent>
         <div class="financial-statement financial-statement--general-ledger">
@@ -82,11 +90,7 @@ function GeneralLedger({
           <div class="financial-statement__table">
             <GeneralLedgerTable
               companyName={organizationSettings.name}
-              loading={generalLedgerSheetLoading}
-              data={[
-                ... (generalLedgerSheet) ?
-                  generalLedgerSheet.tableRows : [],
-              ]}
+              generalLedgerQuery={filter}
               onFetchData={handleFetchData} />
           </div>
         </div>
@@ -96,8 +100,8 @@ function GeneralLedger({
 }
 
 export default compose(
-  DashboardConnect,
-  AccountsConnect,
-  GeneralLedgerConnect,
-  SettingsConnect,
+  withGeneralLedgerActions,
+  withDashboard,
+  withAccountsActions,
+  withSettings,
 )(GeneralLedger);
\ No newline at end of file
diff --git a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.js b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.js
index 2c8563677..c43331426 100644
--- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.js
+++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.js
@@ -15,10 +15,12 @@ import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'
 import classNames from 'classnames';
 import FilterDropdown from 'components/FilterDropdown';
 
+/**
+ * General ledger actions bar.
+ */
 export default function GeneralLedgerActionsBar({
 
 }) {
-
   const filterDropdown = FilterDropdown({
     fields: [],
     onFilterChange: (filterConditions) => {
diff --git a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js
index b8ba6caaf..5dcf28f49 100644
--- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js
+++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js
@@ -1,11 +1,19 @@
 import React, {useEffect, useState, useCallback, useMemo} from 'react';
+import moment from 'moment';
+import { connect } from 'react-redux';
+import {
+  defaultExpanderReducer,
+  compose
+} from 'utils';
+
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
 import Money from 'components/Money';
-import moment from 'moment';
+
 import {
-  defaultExpanderReducer,
-} from 'utils';
+  getFinancialSheetIndexByQuery,
+} from 'store/financialStatement/financialStatements.selectors';
+import withGeneralLedger from './withGeneralLedger';
 
 
 const ROW_TYPE = {
@@ -13,13 +21,15 @@ const ROW_TYPE = {
   OPENING_BALANCE: 'opening_balance',
   ACCOUNT: 'account_name',
   TRANSACTION: 'transaction',
-}
+};
 
-export default function GeneralLedgerTable({
+function GeneralLedgerTable({
   companyName,
   onFetchData,
-  loading,
-  data,
+
+  generalLedgerSheetLoading,
+  generalLedgerTableRows,
+  generalLedgerQuery,
 }) {
   // Account name column accessor.
   const accountNameAccessor = useCallback((row) => {
@@ -141,20 +151,23 @@ export default function GeneralLedgerTable({
   }, [onFetchData]);
 
   // Default expanded rows of general ledger table.
-  const expandedRows = useMemo(() => defaultExpanderReducer(data, 1), [data]);
+  const expandedRows = useMemo(
+    () => defaultExpanderReducer(generalLedgerTableRows, 1),
+    [generalLedgerTableRows]);
 
   return (
     <FinancialSheet
       companyName={companyName}
       sheetType={'General Ledger Sheet'}
-      date={new Date()}
+      fromDate={generalLedgerQuery.from_date}
+      toDate={generalLedgerQuery.to_date}
       name="general-ledger"
-      loading={loading}>
+      loading={generalLedgerSheetLoading}>
 
       <DataTable
         className="bigcapital-datatable--financial-report"
         columns={columns}
-        data={data}
+        data={generalLedgerTableRows}
         onFetchData={handleFetchData}
         expanded={expandedRows}
         virtualizedRows={true}
@@ -162,4 +175,30 @@ export default function GeneralLedgerTable({
         fixedSizeHeight={1000}  />
     </FinancialSheet>
   ); 
-}
\ No newline at end of file
+}
+
+const mapStateToProps = (state, props) => {
+  const { generalLedgerQuery } = props;
+
+  return {
+    generalLedgerIndex: getFinancialSheetIndexByQuery(
+      state.financialStatements.generalLedger.sheets,
+      generalLedgerQuery,
+    ),
+  };
+};
+
+const withGeneralLedgerTable = connect(mapStateToProps);
+
+export default compose(
+  withGeneralLedgerTable,
+  withGeneralLedger(({
+    generalLedgerTableRows,
+    generalLedgerSheetLoading,
+    generalLedgerQuery,
+  }) => ({
+    generalLedgerTableRows,
+    generalLedgerSheetLoading,
+    generalLedgerQuery
+  })),
+)(GeneralLedgerTable);
\ No newline at end of file
diff --git a/client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedger.js b/client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedger.js
index e69de29bb..77c1c924f 100644
--- a/client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedger.js
+++ b/client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedger.js
@@ -0,0 +1,31 @@
+import {connect} from 'react-redux';
+import {
+  getFinancialSheet,
+  getFinancialSheetQuery,
+  getFinancialSheetTableRows,
+} from 'store/financialStatement/financialStatements.selectors';
+
+
+export default (mapState) => {
+  const mapStateToProps = (state, props) => {
+    const { generalLedgerIndex } = props;
+
+    const mapped = {
+      generalLedgerSheet: getFinancialSheet(
+        state.financialStatements.generalLedger.sheets,
+        generalLedgerIndex,
+      ),
+      generalLedgerTableRows: getFinancialSheetTableRows(
+        state.financialStatements.generalLedger.sheets,
+        generalLedgerIndex,
+      ),
+      generalLedgerQuery: getFinancialSheetQuery(
+        state.financialStatements.generalLedger.sheets,
+        generalLedgerIndex,
+      ),
+      generalLedgerSheetLoading: state.financialStatements.generalLedger.loading,
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};
diff --git a/client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedgerActions.js b/client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedgerActions.js
index e69de29bb..e6fa03e62 100644
--- a/client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedgerActions.js
+++ b/client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedgerActions.js
@@ -0,0 +1,10 @@
+import {connect} from 'react-redux';
+import {
+  fetchGeneralLedger,
+} from 'store/financialStatement/financialStatements.actions';
+
+const mapDispatchToProps = (dispatch) => ({
+  fetchGeneralLedger: (query = {}) => dispatch(fetchGeneralLedger({ query })),
+});
+
+export default connect(null, mapDispatchToProps);
\ No newline at end of file
diff --git a/client/src/containers/FinancialStatements/Journal/Journal.js b/client/src/containers/FinancialStatements/Journal/Journal.js
index 58906df36..31eb3a584 100644
--- a/client/src/containers/FinancialStatements/Journal/Journal.js
+++ b/client/src/containers/FinancialStatements/Journal/Journal.js
@@ -12,7 +12,6 @@ import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import SettingsConnect from 'connectors/Settings.connect';
 
 import withDashboard from 'containers/Dashboard/withDashboard';
-import withJournal from './withJournal';
 import withJournalActions from './withJournalActions';
 
 
@@ -23,9 +22,6 @@ function Journal({
   // #withDashboard
   changePageTitle,  
 
-  // #withJournal
-  journalSheetLoading,
-
   // #withPreferences
   organizationSettings,
 }) {
@@ -34,13 +30,15 @@ function Journal({
     to_date: moment().endOf('year').format('YYYY-MM-DD'),
     basis: 'accural'
   });
+  const [refetch, setRefetch] = useState(false);
 
   useEffect(() => {
     changePageTitle('Journal Sheet');
   }, []);
 
   const fetchHook = useQuery(['journal', filter],
-    (key, query) => { requestFetchJournalSheet(query); });
+    (key, query) => { requestFetchJournalSheet(query); },
+    { manual: true });
 
   // Handle financial statement filter change.
   const handleFilterSubmit = useCallback((filter) => {
@@ -50,6 +48,7 @@ function Journal({
       to_date: moment(filter.to_date).format('YYYY-MM-DD'),
     };
     setFilter(_filter);
+    setRefetch(true);
   }, [fetchHook]);
 
   const handlePrintClick = useCallback(() => {
@@ -61,13 +60,20 @@ function Journal({
   }, []);
 
   const handleFetchData = useCallback(({ sortBy, pageIndex, pageSize }) => {
-    fetchHook.refetch();
-  }, [fetchHook]);
+    setRefetch(true);
+  }, []);
+
+  useEffect(() => {
+    if (refetch) {
+      fetchHook.refetch({ force: true });
+      setRefetch(false);
+    }
+  }, [refetch, fetchHook])
 
   return (
     <DashboardInsider>
       <JournalActionsBar
-        onFilterChanged={() => {}}
+        onSubmitFilter={handleFilterSubmit}
         onPrintClick={handlePrintClick}
         onExportClick={handleExportClick} />
 
@@ -81,7 +87,6 @@ function Journal({
             <JournalTable
               companyName={organizationSettings.name}
               journalQuery={filter}
-              loading={journalSheetLoading}
               onFetchData={handleFetchData} />
           </div>
         </div>
@@ -93,8 +98,5 @@ function Journal({
 export default compose(
   withDashboard,
   withJournalActions,
-  withJournal(({ journalSheetLoading }) => ({
-    journalSheetLoading,
-  })),
   SettingsConnect,
 )(Journal);
\ No newline at end of file
diff --git a/client/src/containers/FinancialStatements/Journal/JournalHeader.js b/client/src/containers/FinancialStatements/Journal/JournalHeader.js
index fd52c31e7..2cadd3a37 100644
--- a/client/src/containers/FinancialStatements/Journal/JournalHeader.js
+++ b/client/src/containers/FinancialStatements/Journal/JournalHeader.js
@@ -5,9 +5,10 @@ import {
   Intent,
 } from '@blueprintjs/core';
 import moment from 'moment';
-import {useFormik} from 'formik';
-import {useIntl} from 'react-intl';
+import { useFormik } from 'formik';
+import { useIntl } from 'react-intl';
 import * as Yup from 'yup';
+
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 
diff --git a/client/src/containers/FinancialStatements/Journal/JournalTable.js b/client/src/containers/FinancialStatements/Journal/JournalTable.js
index b9aac4fb7..df277350a 100644
--- a/client/src/containers/FinancialStatements/Journal/JournalTable.js
+++ b/client/src/containers/FinancialStatements/Journal/JournalTable.js
@@ -17,10 +17,11 @@ import withJournal from './withJournal';
 function JournalSheetTable({
   // #withJournal
   journalSheetTableRows,
+  journalSheetLoading,
+  journalSheetQuery,
 
   // #ownProps
   onFetchData,
-  loading,
   companyName,
 }) {
   const rowTypeFilter = (rowType, value, types) => {
@@ -86,9 +87,10 @@ function JournalSheetTable({
     <FinancialSheet
       companyName={companyName}
       sheetType={'Journal Sheet'}
-      date={new Date()}
+      fromDate={journalSheetQuery.from_date}
+      toDate={journalSheetQuery.to_date}
       name="journal"
-      loading={loading}>
+      loading={journalSheetLoading}>
  
       <DataTable
         className="bigcapital-datatable--financial-report"
@@ -106,7 +108,10 @@ function JournalSheetTable({
 const mapStateToProps = (state, props) => {
   const { journalQuery } = props;
   return {
-    journalIndex: getFinancialSheetIndexByQuery(state.financialStatements.journal.sheets, journalQuery) 
+    journalIndex: getFinancialSheetIndexByQuery(
+      state.financialStatements.journal.sheets,
+      journalQuery,
+    ) 
   };
 }
 
@@ -114,7 +119,9 @@ const withJournalTable = connect(mapStateToProps);
 
 export default compose(
   withJournalTable,
-  withJournal(({ journalSheetTableRows }) => ({
-    journalSheetTableRows
+  withJournal(({ journalSheetTableRows, journalSheetLoading, journalSheetQuery }) => ({
+    journalSheetTableRows,
+    journalSheetLoading,
+    journalSheetQuery,
   })),
 )(JournalSheetTable);
\ No newline at end of file
diff --git a/client/src/containers/FinancialStatements/Journal/withJournal.js b/client/src/containers/FinancialStatements/Journal/withJournal.js
index e68bbb6b7..a28a8e494 100644
--- a/client/src/containers/FinancialStatements/Journal/withJournal.js
+++ b/client/src/containers/FinancialStatements/Journal/withJournal.js
@@ -3,6 +3,7 @@ import {
   getFinancialSheetIndexByQuery,
   getFinancialSheet,
   getFinancialSheetTableRows,
+  getFinancialSheetQuery,
 } from 'store/financialStatement/financialStatements.selectors';
 
 export default (mapState) => {
@@ -10,8 +11,18 @@ export default (mapState) => {
     const { journalIndex } = props;
 
     const mapped = {
-      journalSheet: getFinancialSheet(state.financialStatements.journal.sheets, journalIndex),
-      journalSheetTableRows: getFinancialSheetTableRows(state.financialStatements.journal.sheets, journalIndex),
+      journalSheet: getFinancialSheet(
+        state.financialStatements.journal.sheets,
+        journalIndex
+      ),
+      journalSheetTableRows: getFinancialSheetTableRows(
+        state.financialStatements.journal.sheets,
+        journalIndex
+      ),
+      journalSheetQuery: getFinancialSheetQuery(
+        state.financialStatements.journal.sheets,
+        journalIndex,
+      ),
       journalSheetLoading: state.financialStatements.journal.loading,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
diff --git a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js b/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js
index feac4ddee..337b154e6 100644
--- a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js
+++ b/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js
@@ -34,6 +34,7 @@ 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(() => {
@@ -42,7 +43,8 @@ function ProfitLossSheet({
 
   // Fetches profit/loss sheet.
   const fetchHook = useQuery(['profit-loss', filter],
-    (key, query) => { fetchProfitLossSheet(query); });
+    (key, query) => fetchProfitLossSheet(query),
+    { manual: true });
 
   // Handle submit filter.
   const handleSubmitFilter = useCallback((filter) => {
@@ -52,13 +54,21 @@ function ProfitLossSheet({
       to_date: moment(filter.to_date).format('YYYY-MM-DD'),
     };
     setFilter(_filter);
+    setRefetch(true);
   }, []);
 
   // Handle fetch data of profit/loss sheet table.
   const handleFetchData = useCallback(() => {
-    fetchHook.refetch();
+    setRefetch(true);
   }, [fetchHook]);
 
+  useEffect(() => {
+    if (refetch) {
+      fetchHook.refetch({ force: true });
+      setRefetch(false);
+    }
+  }, [fetchHook, refetch]);
+
   return (
     <DashboardInsider>
       <ProfitLossActionsBar />
diff --git a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js b/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js
index 954cfe382..1d4de0a86 100644
--- a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js
+++ b/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js
@@ -122,7 +122,8 @@ function ProfitLossSheetTable({
     <FinancialSheet
       companyName={companyName}
       sheetType={'Profit/Loss Sheet'}
-      date={new Date()}
+      fromDate={profitLossQuery.from_date}
+      toDate={profitLossQuery.to_date}
       name="profit-loss-sheet"
       loading={loading}
       basis={profitLossQuery.basis}>
@@ -133,8 +134,7 @@ function ProfitLossSheetTable({
         data={profitLossTableRows}
         onFetchData={handleFetchData}
         expanded={expandedRows}
-        rowClassNames={rowClassNames}
-        noInitialFetch={true} />
+        rowClassNames={rowClassNames} />
     </FinancialSheet>
   );
 }
diff --git a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js
index 6d150fc06..955566b3f 100644
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js
+++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js
@@ -13,7 +13,7 @@ import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import withDashboard from 'containers/Dashboard/withDashboard';
 import withTrialBalanceActions from './withTrialBalanceActions';
 import withTrialBalance from './withTrialBalance';
-import SettingsConnect from 'connectors/Settings.connect';
+import withSettings from 'containers/Settings/withSettings';
 
 
 function TrialBalanceSheet({
@@ -35,13 +35,15 @@ function TrialBalanceSheet({
     basis: 'accural',
     none_zero: false,
   });
+  const [refetch, setRefetch] = useState(false);
 
   const fetchHook = useQuery(['trial-balance', filter],
-    (key, query) => { fetchTrialBalanceSheet(query); });
+    (key, query) => fetchTrialBalanceSheet(query),
+    { manual: true });
 
   // handle fetch data of trial balance table.
   const handleFetchData = useCallback(() => {
-    fetchHook.refetch()
+    setRefetch(true);
   }, [fetchHook]);
 
   // Change page title of the dashboard.
@@ -56,7 +58,16 @@ function TrialBalanceSheet({
       to_date: moment(filter.to_date).format('YYYY-MM-DD'),
     };
     setFilter(parsedFilter);
-  }, [setFilter]);
+    setRefetch(true);
+  }, []);
+
+  // Refetch sheet effect.
+  useEffect(() => {
+    if (refetch) {
+      fetchHook.refetch({ force: true });
+      setRefetch(false);
+    }
+  }, [fetchHook]);
 
   return (
     <DashboardInsider>
@@ -87,5 +98,5 @@ export default compose(
   withTrialBalance(({ trialBalanceSheetLoading }) => ({
     trialBalanceSheetLoading,
   })),
-  SettingsConnect,
+  withSettings,
 )(TrialBalanceSheet);
\ No newline at end of file
diff --git a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js
index 63b9e1fad..3245cd533 100644
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js
+++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js
@@ -1,7 +1,6 @@
 import React, {useState, useCallback, useMemo} from 'react';
 import * as Yup from 'yup';
 import {Row, Col} from 'react-grid-system';
-import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import { 
   Button,
 } from "@blueprintjs/core";
@@ -9,6 +8,7 @@ import moment from 'moment';
 import {useIntl} from 'react-intl';
 import { useFormik } from 'formik';
 
+import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
 
 
diff --git a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js
index aaab70c60..eb740a9cc 100644
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js
+++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js
@@ -18,6 +18,7 @@ function TrialBalanceSheetTable({
 
   // #withTrialBalanceTable
   trialBalanceIndex,
+  trialBalanceQuery,
 
   onFetchData,
   loading,
@@ -102,7 +103,8 @@ function TrialBalanceSheetTable({
     <FinancialSheet
       companyName={companyName}
       sheetType={'Trial Balance Sheet'}
-      date={new Date()}
+      fromDate={trialBalanceQuery.from_date}
+      toDate={trialBalanceQuery.to_date}
       name="trial-balance"
       loading={loading}>
 
@@ -119,7 +121,10 @@ function TrialBalanceSheetTable({
 const mapStateToProps = (state, props) => {
   const { trialBalanceQuery } = props;
   return {
-    trialBalanceIndex: getFinancialSheetIndexByQuery(state.financialStatements.trialBalance.sheets, trialBalanceQuery),
+    trialBalanceIndex: getFinancialSheetIndexByQuery(
+      state.financialStatements.trialBalance.sheets,
+      trialBalanceQuery,
+    ),
   };
 };
 
diff --git a/client/src/containers/FinancialStatements/TrialBalanceSheet/withTrialBalance.js b/client/src/containers/FinancialStatements/TrialBalanceSheet/withTrialBalance.js
index a2cf05f64..df3727a28 100644
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/withTrialBalance.js
+++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/withTrialBalance.js
@@ -9,9 +9,14 @@ export default (mapState) => {
   const mapStateToProps = (state, props) => {
     const { trialBalanceIndex } = props;
     const mapped = {
-      trialBalanceAccounts: getFinancialSheetAccounts(state.financialStatements.trialBalance.sheets, trialBalanceIndex),
-      trialBalanceQuery: getFinancialSheetQuery(state.financialStatements.trialBalance.sheets, trialBalanceIndex),
-
+      trialBalanceAccounts: getFinancialSheetAccounts(
+        state.financialStatements.trialBalance.sheets,
+        trialBalanceIndex
+      ),
+      trialBalanceQuery: getFinancialSheetQuery(
+        state.financialStatements.trialBalance.sheets,
+        trialBalanceIndex
+      ),
       trialBalanceSheetLoading: state.financialStatements.trialBalance.loading,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
diff --git a/client/src/containers/Preferences/Users/UsersList.js b/client/src/containers/Preferences/Users/UsersList.js
index 99eddcd57..b3f38c844 100644
--- a/client/src/containers/Preferences/Users/UsersList.js
+++ b/client/src/containers/Preferences/Users/UsersList.js
@@ -10,6 +10,7 @@ import {
   MenuDivider,
   Position,
   Intent,
+  Tag
 } from '@blueprintjs/core';
 import { snakeCase } from 'lodash';
 
@@ -138,9 +139,11 @@ function UsersListPreferences({
     {
       id: 'active',
       Header: 'Status',
-      accessor: (user) =>
-        user.active ? <span>Active</span> : <span>Inactivate</span>,
+      accessor: (user) => user.active ?
+        <Tag intent={Intent.SUCCESS} minimal={true}>Active</Tag> :
+        <Tag intent={Intent.WARNING} minimal={true}>Inactivate</Tag>,
       width: 50,
+      className: 'status',
     },
     {
       id: 'actions',
diff --git a/client/src/style/pages/preferences.scss b/client/src/style/pages/preferences.scss
index 2bdc9250d..2600e1819 100644
--- a/client/src/style/pages/preferences.scss
+++ b/client/src/style/pages/preferences.scss
@@ -91,8 +91,14 @@
     .#{$ns}-menu-item {
       padding: 10px 18px;
       font-size: 15px;
-      font-weight: 300;
+      font-weight: 400;
       color: #333;
+
+      &:hover,
+      &.#{$ns}-active{
+        background-color: #ebf1f5;
+        color: #333;
+      }
     }
   }
 }
@@ -110,3 +116,14 @@
     }
   }
 }
+
+
+// Users/Roles List.
+// ---------------------------------
+.preferences__inside-content--users-roles{
+  .bigcapital-datatable{
+    .td.status{
+      text-transform: uppercase;
+    }
+  }
+}
\ No newline at end of file