diff --git a/client/src/containers/Accounts/AccountsDataTable.js b/client/src/containers/Accounts/AccountsDataTable.js
index 4e5e7b983..ecc9355b4 100644
--- a/client/src/containers/Accounts/AccountsDataTable.js
+++ b/client/src/containers/Accounts/AccountsDataTable.js
@@ -64,8 +64,8 @@ function AccountsDataTable({
   };
 
   // Handle view detail account.
-  const handleViewDetailAccount = ({ id, name, code }) => {
-    openDrawer('account-drawer', { accountId: id, title: `${name} ${code}` });
+  const handleViewDetailAccount = ({ id }) => {
+    openDrawer('account-drawer', { accountId: id });
   };
 
   // Handle new child button click.
diff --git a/client/src/containers/Drawers/AccountDrawer/AccountDrawerProvider.js b/client/src/containers/Drawers/AccountDrawer/AccountDrawerProvider.js
index c5b879ff8..94c649ef8 100644
--- a/client/src/containers/Drawers/AccountDrawer/AccountDrawerProvider.js
+++ b/client/src/containers/Drawers/AccountDrawer/AccountDrawerProvider.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useAccount, useAccountTransactions } from 'hooks/query';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import { DrawerHeaderContent, DashboardInsider } from 'components';
 
 const AccountDrawerContext = React.createContext();
 
@@ -20,6 +20,7 @@ function AccountDrawerProvider({ accountId, ...props }) {
   } = useAccountTransactions(accountId, {
     enabled: !!accountId,
   });
+  const name = `${account.name} ${account.code}`;
 
   // provider.
   const provider = {
@@ -30,6 +31,7 @@ function AccountDrawerProvider({ accountId, ...props }) {
 
   return (
     <DashboardInsider loading={isAccountLoading || isAccountsLoading}>
+      <DrawerHeaderContent name={'account-drawer'} title={name} />
       <AccountDrawerContext.Provider value={provider} {...props} />
     </DashboardInsider>
   );
diff --git a/client/src/containers/Drawers/AccountDrawer/index.js b/client/src/containers/Drawers/AccountDrawer/index.js
index add27e274..c9b933cc5 100644
--- a/client/src/containers/Drawers/AccountDrawer/index.js
+++ b/client/src/containers/Drawers/AccountDrawer/index.js
@@ -1,7 +1,6 @@
 import React, { lazy } from 'react';
 import { Drawer, DrawerSuspense } from 'components';
 import withDrawers from 'containers/Drawer/withDrawers';
-import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 import { compose } from 'utils';
 
@@ -14,17 +13,11 @@ function AccountDrawer({
   name,
   //#withDrawer
   isOpen,
-  payload: { accountId, title },
-
-  closeDrawer,
+  payload: { accountId },
 }) {
-  // Handle close drawer.
-  const handleDrawerClose = () => {
-    closeDrawer(name);
-  };
 
   return (
-    <Drawer isOpen={isOpen} title={title} isClose={handleDrawerClose}>
+    <Drawer isOpen={isOpen} name={name}>
       <DrawerSuspense>
         <AccountDrawerContent accountId={accountId} />
       </DrawerSuspense>
@@ -32,4 +25,4 @@ function AccountDrawer({
   );
 }
 
-export default compose(withDrawers(), withDrawerActions)(AccountDrawer);
+export default compose(withDrawers())(AccountDrawer);
diff --git a/client/src/hooks/query/accounts.js b/client/src/hooks/query/accounts.js
index 7a5d3a0c4..b03c6fca3 100644
--- a/client/src/hooks/query/accounts.js
+++ b/client/src/hooks/query/accounts.js
@@ -11,6 +11,7 @@ const transformAccount = (response) => {
 const commonInvalidateQueries = (query) => {
   // Invalidate accounts.
   query.invalidateQueries(t.ACCOUNTS);
+  query.invalidateQueries(t.ACCOUNT);
 
   // Invalidate financial reports.
   query.invalidateQueries(t.FINANCIAL_REPORT);
@@ -149,7 +150,6 @@ export function useInactivateAccount(props) {
  * Retrieve account transactions.
  */
 export function useAccountTransactions(id, props) {
-  console.log(id, 'FF');
   return useRequestQuery(
     [t.ACCOUNT_TRANSACTION, id],
     { method: 'get', url: `accounts/transactions?account_id=${id}` },