diff --git a/src/common/itemPaymentTranactionsOption.js b/src/common/itemPaymentTranactionsOption.js
new file mode 100644
index 000000000..1df2bb456
--- /dev/null
+++ b/src/common/itemPaymentTranactionsOption.js
@@ -0,0 +1,8 @@
+import intl from 'react-intl-universal';
+
+export default [
+  { name: 'invoices', label: intl.get('invoices') },
+  { name: 'estimates', label: intl.get('estimates') },
+  { name: 'receipts', label: intl.get('receipts') },
+  { name: 'bills', label: intl.get('bills') },
+];
diff --git a/src/containers/Accounting/MakeJournal/MakeJournalProvider.js b/src/containers/Accounting/MakeJournal/MakeJournalProvider.js
index 2241ff28c..e382c1661 100644
--- a/src/containers/Accounting/MakeJournal/MakeJournalProvider.js
+++ b/src/containers/Accounting/MakeJournal/MakeJournalProvider.js
@@ -7,7 +7,8 @@ import {
   useJournal,
   useCreateJournal,
   useEditJournal,
-  useSettings
+  useSettings,
+  useSettingsManualJournals
 } from 'hooks/query';
 
 const MakeJournalFormContext = createContext();
@@ -40,7 +41,7 @@ function MakeJournalProvider({ journalId, ...props }) {
   const { mutateAsync: editJournalMutate } = useEditJournal();
 
   // Loading the journal settings.
-  const { isLoading: isSettingsLoading } = useSettings();
+  const { isLoading: isSettingsLoading } = useSettingsManualJournals();
 
   // Submit form payload.
   const [submitPayload, setSubmitPayload] = useState({});
diff --git a/src/containers/Drawers/BillDrawer/BillDrawerDetails.js b/src/containers/Drawers/BillDrawer/BillDrawerDetails.js
index 0385670a4..987cd77fb 100644
--- a/src/containers/Drawers/BillDrawer/BillDrawerDetails.js
+++ b/src/containers/Drawers/BillDrawer/BillDrawerDetails.js
@@ -19,12 +19,14 @@ import BillDrawerCls from 'style/components/Drawers/BillDrawer.module.scss';
 export default function BillDrawerDetails() {
   const {
     data: { transactions },
-    billId,
   } = useBillDrawerContext();
 
   return (
     <div className={clsx(BillDrawerCls.root)}>
-      <DrawerMainTabs renderActiveTabPanelOnly={true} defaultSelectedTabId="details">
+      <DrawerMainTabs
+        renderActiveTabPanelOnly={true}
+        defaultSelectedTabId="details"
+      >
         <Tab
           title={intl.get('details')}
           id={'details'}
@@ -38,7 +40,7 @@ export default function BillDrawerDetails() {
         <Tab
           title={intl.get('payment_transactions')}
           id={'payment_transactions'}
-          panel={<BillPaymentTransactionTable billId={billId} />}
+          panel={<BillPaymentTransactionTable />}
         />
         <Tab
           title={intl.get('located_landed_cost')}
diff --git a/src/containers/Drawers/BillDrawer/BillPaymentTransactions/BillPaymentTransactionTable.js b/src/containers/Drawers/BillDrawer/BillPaymentTransactions/BillPaymentTransactionTable.js
index ab23a4620..e0caa4957 100644
--- a/src/containers/Drawers/BillDrawer/BillPaymentTransactions/BillPaymentTransactionTable.js
+++ b/src/containers/Drawers/BillDrawer/BillPaymentTransactions/BillPaymentTransactionTable.js
@@ -1,16 +1,30 @@
 import React from 'react';
+import { useHistory } from 'react-router-dom';
 import { DataTable, Card } from 'components';
 
 import 'style/pages/PaymentTransactions/List.scss';
 
-import { useBillPaymentTransactionsColumns } from './components';
+import { useBillPaymentTransactionsColumns, ActionsMenu } from './components';
 import { useBillDrawerContext } from '../BillDrawerProvider';
 import { useBillPaymentTransactions } from 'hooks/query';
 
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
 /**
  * Bill payment transactions datatable.
  */
-export default function BillPaymentTransactionTable() {
+function BillPaymentTransactionTable({
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const history = useHistory();
+
   const columns = useBillPaymentTransactionsColumns();
 
   const { billId } = useBillDrawerContext();
@@ -24,6 +38,19 @@ export default function BillPaymentTransactionTable() {
     enabled: !!billId,
   });
 
+  // Handles delete bill payment transactions.
+  const handleDeleteBillPaymentTransactons = ({ bill_id }) => {
+    openAlert('bill-delete', {
+      billId: bill_id,
+    });
+  };
+
+  // Handles edit  bill payment transactions.
+  const handleEditBillPaymentTransactions = ({ bill_id }) => {
+    history.push(`/bills/${bill_id}/edit`);
+    closeDrawer('bill-drawer');
+  };
+
   return (
     <Card>
       <DataTable
@@ -32,8 +59,18 @@ export default function BillPaymentTransactionTable() {
         loading={isPaymentTransactionsLoading}
         headerLoading={isPaymentTransactionsLoading}
         progressBarLoading={isPaymentTransactionFetching}
+        ContextMenu={ActionsMenu}
+        payload={{
+          onDelete: handleDeleteBillPaymentTransactons,
+          onEdit: handleEditBillPaymentTransactions,
+        }}
         className={'payment-transactions'}
       />
     </Card>
   );
 }
+
+export default compose(
+  withAlertsActions,
+  withDrawerActions,
+)(BillPaymentTransactionTable);
diff --git a/src/containers/Drawers/BillDrawer/BillPaymentTransactions/components.js b/src/containers/Drawers/BillDrawer/BillPaymentTransactions/components.js
index cd8ba435e..b62afa494 100644
--- a/src/containers/Drawers/BillDrawer/BillPaymentTransactions/components.js
+++ b/src/containers/Drawers/BillDrawer/BillPaymentTransactions/components.js
@@ -1,9 +1,34 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-
+import { Intent, Menu, MenuItem } from '@blueprintjs/core';
 import clsx from 'classnames';
 import { CLASSES } from '../../../../common/classes';
-import { FormatDateCell } from '../../../../components';
+import { FormatDateCell, Icon } from '../../../../components';
+import { safeCallback } from 'utils';
+
+/**
+ * Table actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: { onEdit, onDelete },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('invoice_transactions.action.edit_transaction')}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <MenuItem
+        text={intl.get('invoice_transactions.action.delete_transaction')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}
 
 /**
  * Retrieve bill payment transactions table columns.
diff --git a/src/containers/Drawers/BillDrawer/LocatedLandedCostTable.js b/src/containers/Drawers/BillDrawer/LocatedLandedCostTable.js
index 5830a0166..32c01de71 100644
--- a/src/containers/Drawers/BillDrawer/LocatedLandedCostTable.js
+++ b/src/containers/Drawers/BillDrawer/LocatedLandedCostTable.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { DataTable, Card } from 'components';
+import { DataTable, Card, FormattedMessage as T } from 'components';
 import { Button, Classes, NavbarGroup } from '@blueprintjs/core';
 
 import { useLocatedLandedCostColumns, ActionsMenu } from './components';
@@ -31,16 +31,16 @@ function LocatedLandedCostTable({
   const columns = useLocatedLandedCostColumns();
   const { transactions, billId } = useBillDrawerContext();
 
-  // Handle the transaction delete action.
-  const handleDeleteTransaction = ({ id }) => {
-    openAlert('bill-located-cost-delete', { BillId: id });
-  };
-
   // Handle allocate landed cost button click.
   const handleAllocateCostClick = () => {
     openDialog('allocate-landed-cost', { billId });
   };
 
+  // Handle the transaction delete action.
+  const handleDeleteTransaction = ({ id }) => {
+    openAlert('bill-located-cost-delete', { BillId: id });
+  };
+
   // Handle from transaction link click.
   const handleFromTransactionClick = (original) => {
     const { from_transaction_type, from_transaction_id } = original;
@@ -64,7 +64,7 @@ function LocatedLandedCostTable({
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon="receipt-24" />}
-            text={'Allocate landed cost'}
+            text={<T id={'allocate_landed_coast'} />}
             onClick={handleAllocateCostClick}
           />
         </NavbarGroup>
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js
index 07118d8af..a7d169efe 100644
--- a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js
@@ -8,6 +8,7 @@ import CreditNoteDetailActionsBar from './CreditNoteDetailActionsBar';
 import CreditNoteDetailPanel from './CreditNoteDetailPanel';
 import RefundCreditNoteTransactionsTable from './RefundCreditNoteTransactions/RefundCreditNoteTransactionsTable';
 import ReconcileCreditNoteTransactionsTable from './ReconcileCreditNoteTransactions/ReconcileCreditNoteTransactionsTable';
+import { CreditNoteGLEntriesTable } from './JournalEntriesTransactions/JournalEntriesTransactionsTable';
 
 /**
  * Credit Note view detail.
@@ -34,6 +35,11 @@ function CreditNoteDetailsTabs() {
         id={'details'}
         panel={<CreditNoteDetailPanel />}
       />
+      <Tab
+        title={intl.get('journal_entries')}
+        id={'journal_entries'}
+        panel={<CreditNoteGLEntriesTable />}
+      />
       <Tab
         title={intl.get('credit_note.drawer.label_refund_transactions')}
         id={'refund_transactions'}
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/JournalEntriesTransactions/JournalEntriesTransactionsTable.js b/src/containers/Drawers/CreditNoteDetailDrawer/JournalEntriesTransactions/JournalEntriesTransactionsTable.js
new file mode 100644
index 000000000..189ae4625
--- /dev/null
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/JournalEntriesTransactions/JournalEntriesTransactionsTable.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Card } from 'components';
+
+import { useCreditNoteDetailDrawerContext } from '../CreditNoteDetailDrawerProvider';
+import { useTransactionsByReference } from 'hooks/query';
+import { useJournalEntriesTransactionsColumns } from './components';
+
+import JournalEntriesTable, {
+  AmountDisplayedBaseCurrencyMessage,
+} from '../../../JournalEntriesTable/JournalEntriesTable';
+
+/**
+ * Journal entries table.
+ */
+export function CreditNoteGLEntriesTable() {
+  const { creditNoteId } = useCreditNoteDetailDrawerContext();
+
+  // Credit note GL entries table columns.
+  const columns = useJournalEntriesTransactionsColumns();
+
+  // Handle fetch transaction by reference.
+  const {
+    data: { transactions },
+    isLoading: isTransactionLoading,
+  } = useTransactionsByReference(
+    {
+      reference_id: creditNoteId,
+      reference_type: 'creditNote',
+    },
+    { enabled: !!creditNoteId },
+  );
+
+  return (
+    <Card>
+      <AmountDisplayedBaseCurrencyMessage />
+
+      <JournalEntriesTable
+        columns={columns}
+        data={transactions}
+        loading={isTransactionLoading}
+      />
+    </Card>
+  );
+}
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/JournalEntriesTransactions/components.js b/src/containers/Drawers/CreditNoteDetailDrawer/JournalEntriesTransactions/components.js
new file mode 100644
index 000000000..4a796704a
--- /dev/null
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/JournalEntriesTransactions/components.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormatDateCell, Icon } from '../../../../components';
+
+import 'style/pages/JournalEntries/List.scss';
+
+/**
+ * Retrieve journal entries transactions table columns.
+ */
+export const useJournalEntriesTransactionsColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('date'),
+        accessor: 'date',
+        accessor: 'formatted_date',
+        Cell: FormatDateCell,
+        width: 140,
+        className: 'date',
+        textOverview: true,
+      },
+      {
+        Header: intl.get('account_name'),
+        accessor: 'account_name',
+        width: 140,
+        className: 'account_name',
+        textOverview: true,
+      },
+      {
+        Header: intl.get('contact'),
+        accessor: 'contactTypeFormatted',
+        width: 140,
+      },
+      {
+        Header: intl.get('credit'),
+        accessor: ({ credit }) => credit.formatted_amount,
+        width: 100,
+        className: 'credit',
+      },
+      {
+        Header: intl.get('debit'),
+        accessor: ({ debit }) => debit.formatted_amount,
+        width: 100,
+        className: 'debit',
+      },
+    ],
+    [],
+  );
+};
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceGLEntriesTable.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceGLEntriesTable.js
index 6b9279aa0..b7d1f2572 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceGLEntriesTable.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceGLEntriesTable.js
@@ -46,6 +46,4 @@ const InvoiceGLEntriesDatatable = styled(JournalEntriesTable)`
   }
 `;
 
-const InvoiceGLEntriesRoot = styled(Card)`
-  padding: 15px;
-`;
+const InvoiceGLEntriesRoot = styled(Card)``;
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/InvoicePaymentTransactionsTable.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/InvoicePaymentTransactionsTable.js
index da28db3d2..b047ceb4d 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/InvoicePaymentTransactionsTable.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/InvoicePaymentTransactionsTable.js
@@ -1,20 +1,35 @@
 import React from 'react';
+import { useHistory } from 'react-router-dom';
 import { DataTable, Card } from 'components';
 
-import 'style/pages/PaymentTransactions/List.scss';
-
-import { useInvoicePaymentTransactionsColumns } from './components';
+import {
+  useInvoicePaymentTransactionsColumns,
+  ActionsMenu,
+} from './components';
 import { useInvoiceDetailDrawerContext } from '../InvoiceDetailDrawerProvider';
 import { useInvoicePaymentTransactions } from 'hooks/query';
 
 import { TableStyle } from '../../../../common';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
 /**
  * Invoice payment transactions datatable.
  */
-export default function InvoicePaymentTransactionsTable() {
-  // Retrieve invoice payment transactions columns.
+function InvoicePaymentTransactionsTable({
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const history = useHistory();
+
+  // Invoice payment transactions table columns.
   const columns = useInvoicePaymentTransactionsColumns();
 
   // Invoice drawer context.
@@ -29,6 +44,18 @@ export default function InvoicePaymentTransactionsTable() {
     enabled: !!invoiceId,
   });
 
+  // Handles delete payment transactions.
+  const handleDeletePaymentTransactons = ({ payment_receive_id }) => {
+    openAlert('payment-receive-delete', {
+      paymentReceiveId: payment_receive_id,
+    });
+  };
+
+  // Handles edit payment transactions.
+  const handleEditPaymentTransactions = ({ payment_receive_id }) => {
+    history.push(`/payment-receives/${payment_receive_id}/edit`);
+    closeDrawer('invoice-detail-drawer');
+  };
   return (
     <Card>
       <DataTable
@@ -39,7 +66,17 @@ export default function InvoicePaymentTransactionsTable() {
         progressBarLoading={isPaymentTransactionFetching}
         TableLoadingRenderer={TableSkeletonRows}
         styleName={TableStyle.Constrant}
+        ContextMenu={ActionsMenu}
+        payload={{
+          onDelete: handleDeletePaymentTransactons,
+          onEdit: handleEditPaymentTransactions,
+        }}
       />
     </Card>
   );
 }
+
+export default compose(
+  withAlertsActions,
+  withDrawerActions,
+)(InvoicePaymentTransactionsTable);
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/components.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/components.js
index 680802e62..3333a986b 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/components.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/components.js
@@ -1,9 +1,34 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-
+import { Intent, Menu, MenuItem } from '@blueprintjs/core';
 import clsx from 'classnames';
 import { CLASSES } from '../../../../common/classes';
-import { FormattedMessage as T, FormatDateCell } from '../../../../components';
+import { FormatDateCell, Icon } from '../../../../components';
+import { safeCallback } from 'utils';
+
+/**
+ * Table actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: { onEdit, onDelete },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('invoice_transactions.action.edit_transaction')}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <MenuItem
+        text={intl.get('invoice_transactions.action.delete_transaction')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}
 
 /**
  * Retrieve invoice payment transactions table columns.
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemContentDetails.js b/src/containers/Drawers/ItemDetailDrawer/ItemContentDetails.js
index 61d94a3a2..e2044c0e1 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemContentDetails.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemContentDetails.js
@@ -1,10 +1,7 @@
 import React from 'react';
 
+import ItemDetailTab from './ItemDetailTab';
 import ItemDetailActionsBar from './ItemDetailActionsBar';
-import ItemDetailHeader from './ItemDetailHeader';
-import { ItemPaymentTransactions } from './ItemPaymentTransactions';
-
-import { Card } from 'components';
 
 /**
  * Item detail.
@@ -13,10 +10,7 @@ export default function ItemDetail() {
   return (
     <div className="item-drawer">
       <ItemDetailActionsBar />
-      <ItemPaymentTransactions /> 
-      <Card>
-        <ItemDetailHeader />
-      </Card>
+      <ItemDetailTab />
     </div>
   );
 }
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.js b/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.js
index bb83783b3..c748e559b 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.js
@@ -8,6 +8,9 @@ const ItemDetailDrawerContext = React.createContext();
  * Item detail provider
  */
 function ItemDetailDrawerProvider({ itemId, ...props }) {
+  // transaction type payload.
+  const [value, setValue] = React.useState('invoices');
+
   // Fetches the given item detail.
   const { isLoading: isItemLoading, data: item } = useItem(itemId, {
     enabled: !!itemId,
@@ -18,6 +21,8 @@ function ItemDetailDrawerProvider({ itemId, ...props }) {
     item,
     itemId,
     isItemLoading,
+    value,
+    setValue,
   };
 
   return (
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemDetailHeader.js b/src/containers/Drawers/ItemDetailDrawer/ItemDetailHeader.js
index 0511a2c4f..7eea8ab1b 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemDetailHeader.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemDetailHeader.js
@@ -3,7 +3,7 @@ import intl from 'react-intl-universal';
 import { defaultTo } from 'lodash';
 import classNames from 'classnames';
 
-import { If, DetailsMenu, DetailItem } from 'components';
+import { If, DetailsMenu, DetailItem, Card } from 'components';
 import { useItemDetailDrawerContext } from './ItemDetailDrawerProvider';
 
 /**
@@ -13,70 +13,72 @@ export default function ItemDetailHeader() {
   const { item } = useItemDetailDrawerContext();
 
   return (
-    <div class="item-drawer__content">
-      <DetailsMenu direction={'vertical'}>
-        <DetailItem
-          name={'name'}
-          label={intl.get('item_name')}
-          children={item.name}
-        />
-        <DetailItem
-          label={intl.get('sell_price')}
-          children={item.sell_price_formatted}
-          align={'right'}
-        />
-        <DetailItem
-          label={intl.get('cost_price')}
-          children={item.cost_price_formatted}
-          align={'right'}
-        />
-      </DetailsMenu>
-
-      <DetailsMenu direction={'horizantal'}>
-        <DetailItem label={intl.get('item_type')} children={item.type} />
-        <DetailItem
-          label={intl.get('item_code')}
-          children={defaultTo(item.code, '-')}
-        />
-        <If condition={item.type === 'inventory'}>
-          <DetailItem name={'quantity'} label={intl.get('quantity_on_hand')}>
-            <span
-              className={classNames({
-                mines: item.quantity_on_hand <= 0,
-                plus: item.quantity_on_hand > 0,
-              })}
-            >
-              {defaultTo(item.quantity_on_hand, '-')}
-            </span>
-          </DetailItem>
-        </If>
-        <DetailItem
-          label={intl.get('category_name')}
-          children={defaultTo(item.category?.name, '-')}
-        />
-        <DetailItem
-          label={intl.get('sell_account_id')}
-          children={defaultTo(item?.sell_account?.name, '-')}
-        />
-        <DetailItem
-          label={intl.get('cost_account_id')}
-          children={defaultTo(item.cost_account?.name, '-')}
-        />
-        <If condition={item.type === 'inventory'}>
+    <Card>
+      <div class="item-drawer__content">
+        <DetailsMenu direction={'vertical'}>
           <DetailItem
-            label={intl.get('inventory_account')}
-            children={defaultTo(item?.inventory_account?.name, '-')}
+            name={'name'}
+            label={intl.get('item_name')}
+            children={item.name}
           />
-        </If>
-        <DetailItem
-          label={intl.get('item.sell_description')}
-          children={defaultTo(item.sell_description, '-')}
-        />
-        <DetailItem
-          label={intl.get('item.purchase_description')}
-          children={defaultTo(item.cost_description, '-')}
-        />
-      </DetailsMenu>
-    </div>
+          <DetailItem
+            label={intl.get('sell_price')}
+            children={item.sell_price_formatted}
+            align={'right'}
+          />
+          <DetailItem
+            label={intl.get('cost_price')}
+            children={item.cost_price_formatted}
+            align={'right'}
+          />
+        </DetailsMenu>
+
+        <DetailsMenu direction={'horizantal'}>
+          <DetailItem label={intl.get('item_type')} children={item.type} />
+          <DetailItem
+            label={intl.get('item_code')}
+            children={defaultTo(item.code, '-')}
+          />
+          <If condition={item.type === 'inventory'}>
+            <DetailItem name={'quantity'} label={intl.get('quantity_on_hand')}>
+              <span
+                className={classNames({
+                  mines: item.quantity_on_hand <= 0,
+                  plus: item.quantity_on_hand > 0,
+                })}
+              >
+                {defaultTo(item.quantity_on_hand, '-')}
+              </span>
+            </DetailItem>
+          </If>
+          <DetailItem
+            label={intl.get('category_name')}
+            children={defaultTo(item.category?.name, '-')}
+          />
+          <DetailItem
+            label={intl.get('sell_account_id')}
+            children={defaultTo(item?.sell_account?.name, '-')}
+          />
+          <DetailItem
+            label={intl.get('cost_account_id')}
+            children={defaultTo(item.cost_account?.name, '-')}
+          />
+          <If condition={item.type === 'inventory'}>
+            <DetailItem
+              label={intl.get('inventory_account')}
+              children={defaultTo(item?.inventory_account?.name, '-')}
+            />
+          </If>
+          <DetailItem
+            label={intl.get('item.sell_description')}
+            children={defaultTo(item.sell_description, '-')}
+          />
+          <DetailItem
+            label={intl.get('item.purchase_description')}
+            children={defaultTo(item.cost_description, '-')}
+          />
+        </DetailsMenu>
+      </div>
+    </Card>
   );
 }
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemDetailTab.js b/src/containers/Drawers/ItemDetailDrawer/ItemDetailTab.js
new file mode 100644
index 000000000..e964d4bd5
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemDetailTab.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Tab } from '@blueprintjs/core';
+import { DrawerMainTabs, FormattedMessage as T } from 'components';
+import { ItemPaymentTransactions } from './ItemPaymentTransactions';
+import ItemDetailHeader from './ItemDetailHeader';
+
+
+export default function ItemDetailTab() {
+  return (
+    <DrawerMainTabs renderActiveTabPanelOnly={true}>
+      <Tab
+        id={'overview'}
+        title={<T id={'overview'} />}
+        panel={<ItemDetailHeader />}
+      />
+      <Tab
+        id={'transactions'}
+        title={<T id={'transactions'} />}
+        panel={<ItemPaymentTransactions />}
+      />
+    </DrawerMainTabs>
+  );
+}
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/components.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/components.js
new file mode 100644
index 000000000..4ed2e0acc
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/components.js
@@ -0,0 +1,90 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Menu, MenuItem } from '@blueprintjs/core';
+
+import clsx from 'classnames';
+import { CLASSES } from '../../../../../common/classes';
+import { FormatDateCell, Icon } from '../../../../../components';
+import { safeCallback } from 'utils';
+
+/**
+ * Table actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: { onEdit, onDelete },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('invoice_transactions.action.edit_transaction')}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <MenuItem
+        text={intl.get('invoice_transactions.action.delete_transaction')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * Retrieve bill transactions associated with item table columns.
+ */
+export const useBillTransactionsColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        id: 'bill_date',
+        Header: intl.get('date'),
+        accessor: 'formatted_bill_date',
+        Cell: FormatDateCell,
+        width: 120,
+        className: 'bill_date',
+      },
+      {
+        id: 'vendor',
+        Header: intl.get('vendor'),
+        accessor: 'vendor_display_name',
+        width: 140,
+        className: 'vendor',
+        textOverview: true,
+      },
+      {
+        id: 'bill_number',
+        Header: intl.get('bill_number'),
+        accessor: (row) => (row.bill_number ? `${row.bill_number}` : null),
+        width: 100,
+        className: 'bill_number',
+      },
+      {
+        id: 'qunatity',
+        Header: intl.get('item.drawer_quantity_sold'),
+        accessor: 'quantity',
+        width: 100,
+      },
+      {
+        id: 'rate',
+        Header: 'Rate',
+        accessor: 'formatted_rate',
+        align: 'right',
+        width: 100,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+      {
+        id: 'amount',
+        Header: intl.get('total'),
+        accessor: 'formatted_amount',
+        align: 'right',
+        width: 100,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+};
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/index.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/index.js
new file mode 100644
index 000000000..237458ca2
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/index.js
@@ -0,0 +1,69 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { DataTable } from '../../../../../components';
+import { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider';
+import { useItemAssociatedBillTransactions } from 'hooks/query';
+import { useBillTransactionsColumns, ActionsMenu } from './components';
+
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+/**
+ * Bill payment transactions data table.
+ */
+function BillPaymentTransactions({
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const history = useHistory();
+
+  const columns = useBillTransactionsColumns();
+
+  const { itemId } = useItemDetailDrawerContext();
+
+  // Handle fetch Estimate associated transactions.
+  const {
+    isLoading: isBillTransactionsLoading,
+    isFetching: isBillTransactionFetching,
+    data: paymentTransactions,
+  } = useItemAssociatedBillTransactions(itemId, {
+    enabled: !!itemId,
+  });
+
+  // Handles delete payment transactions.
+  const handleDeletePaymentTransactons = ({ bill_id }) => {
+    openAlert('bill-delete', {
+      billId: bill_id,
+    });
+  };
+
+  // Handles edit payment transactions.
+  const handleEditPaymentTransactions = ({ bill_id }) => {
+    history.push(`/bills/${bill_id}/edit`);
+    closeDrawer('item-detail-drawer');
+  };
+  return (
+    <DataTable
+      columns={columns}
+      data={paymentTransactions}
+      loading={isBillTransactionsLoading}
+      headerLoading={isBillTransactionsLoading}
+      progressBarLoading={isBillTransactionFetching}
+      ContextMenu={ActionsMenu}
+      payload={{
+        onEdit: handleEditPaymentTransactions,
+        onDelete: handleDeletePaymentTransactons,
+      }}
+    />
+  );
+}
+export default compose(
+  withAlertsActions,
+  withDrawerActions,
+)(BillPaymentTransactions);
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactionsDataTable.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactionsDataTable.js
deleted file mode 100644
index b08e709e5..000000000
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactionsDataTable.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-import { DataTable, Card } from '../../../../components';
-import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
-import { useItemAssociatedBillTransactions } from 'hooks/query';
-import { useBillTransactionsColumns } from './components';
-
-/**
- * Bill payment transactions data table.
- */
-export default function BillPaymentTransactions() {
-  const columns = useBillTransactionsColumns();
-
-  const { itemId } = useItemDetailDrawerContext();
-
-  // Handle fetch Estimate associated transactions.
-  const {
-    isLoading: isBillTransactionsLoading,
-    isFetching: isBillTransactionFetching,
-    data: paymentTransactions,
-  } = useItemAssociatedBillTransactions(itemId, {
-    enabled: !!itemId,
-  });
-
-  return (
-    <div className="item-drawer__table">
-      <Card>
-        <DataTable
-          columns={columns}
-          data={paymentTransactions}
-          loading={isBillTransactionsLoading}
-          headerLoading={isBillTransactionsLoading}
-          progressBarLoading={isBillTransactionFetching}
-        />
-      </Card>
-    </div>
-  );
-}
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/components.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/components.js
new file mode 100644
index 000000000..5f49bc7f8
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/components.js
@@ -0,0 +1,92 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Menu, MenuItem } from '@blueprintjs/core';
+
+import clsx from 'classnames';
+import { CLASSES } from '../../../../../common/classes';
+import { FormatDateCell, Icon } from '../../../../../components';
+import { safeCallback } from 'utils';
+
+/**
+ * Table actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: { onEdit, onDelete },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('invoice_transactions.action.edit_transaction')}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <MenuItem
+        text={intl.get('invoice_transactions.action.delete_transaction')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * Retrieve estimate transactions associated with item table columns.
+ */
+export const useEstimateTransactionsColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        id: 'estimate_date',
+        Header: intl.get('date'),
+        accessor: 'formatted_estimate_date',
+        Cell: FormatDateCell,
+        width: 120,
+        className: 'estimate_date',
+        textOverview: true,
+      },
+      {
+        id: 'customer',
+        Header: intl.get('customer'),
+        accessor: 'customer_display_name',
+        width: 140,
+        className: 'customer',
+        textOverview: true,
+      },
+      {
+        id: 'estimate_number',
+        Header: intl.get('estimate_no'),
+        accessor: 'estimate_number',
+        width: 120,
+        className: 'estimate_number',
+        textOverview: true,
+      },
+      {
+        id: 'qunatity',
+        Header: intl.get('item.drawer_quantity_sold'),
+        accessor: 'quantity',
+        width: 100,
+      },
+      {
+        id: 'rate',
+        Header: 'Rate',
+        accessor: 'formatted_rate',
+        align: 'right',
+        width: 100,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+      {
+        id: 'amount',
+        Header: intl.get('total'),
+        accessor: 'formatted_amount',
+        align: 'right',
+        width: 100,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+};
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/index.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/index.js
new file mode 100644
index 000000000..47556b3a9
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/index.js
@@ -0,0 +1,70 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { DataTable } from '../../../../../components';
+import { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider';
+import { useItemAssociatedEstimateTransactions } from 'hooks/query';
+import { useEstimateTransactionsColumns, ActionsMenu } from './components';
+
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+/**
+ * Esimtate payment transactions.
+ */
+function EstimatePaymentTransactions({
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const history = useHistory();
+
+  const columns = useEstimateTransactionsColumns();
+
+  const { itemId } = useItemDetailDrawerContext();
+
+  // Handle fetch Estimate associated transactions.
+  const {
+    isLoading: isEstimateTransactionsLoading,
+    isFetching: isEstimateTransactionFetching,
+    data: paymentTransactions,
+  } = useItemAssociatedEstimateTransactions(itemId, {
+    enabled: !!itemId,
+  });
+
+  // Handles delete payment transactions.
+  const handleDeletePaymentTransactons = ({ estimate_id }) => {
+    openAlert('estimate-delete', {
+      estimateId: estimate_id,
+    });
+  };
+
+  // Handles edit payment transactions.
+  const handleEditPaymentTransactions = ({ estimate_id }) => {
+    history.push(`/estimates/${estimate_id}/edit`);
+    closeDrawer('item-detail-drawer');
+  };
+
+  return (
+    <DataTable
+      columns={columns}
+      data={paymentTransactions}
+      loading={isEstimateTransactionsLoading}
+      headerLoading={isEstimateTransactionsLoading}
+      progressBarLoading={isEstimateTransactionFetching}
+      ContextMenu={ActionsMenu}
+      payload={{
+        onEdit: handleEditPaymentTransactions,
+        onDelete: handleDeletePaymentTransactons,
+      }}
+    />
+  );
+}
+export default compose(
+  withAlertsActions,
+  withDrawerActions,
+)(EstimatePaymentTransactions);
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactionsDataTable.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactionsDataTable.js
deleted file mode 100644
index ebab517ab..000000000
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactionsDataTable.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-import { DataTable, Card } from '../../../../components';
-import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
-import { useItemAssociatedEstimateTransactions } from 'hooks/query';
-import { useEstimateTransactionsColumns } from './components';
-
-/**
- * Esimtate payment transactions datatable.
- */
-export default function EstimatePaymentTransactions() {
-  const columns = useEstimateTransactionsColumns();
-
-  const { itemId } = useItemDetailDrawerContext();
-
-  // Handle fetch Estimate associated transactions.
-  const {
-    isLoading: isEstimateTransactionsLoading,
-    isFetching: isEstimateTransactionFetching,
-    data: paymentTransactions,
-  } = useItemAssociatedEstimateTransactions(itemId, {
-    enabled: !!itemId,
-  });
-
-  return (
-    <div className="item-drawer__table">
-      <Card>
-        <DataTable
-          columns={columns}
-          data={paymentTransactions}
-          loading={isEstimateTransactionsLoading}
-          headerLoading={isEstimateTransactionsLoading}
-          progressBarLoading={isEstimateTransactionFetching}
-        />
-      </Card>
-    </div>
-  );
-}
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/components.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/components.js
new file mode 100644
index 000000000..ba9b6e67e
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/components.js
@@ -0,0 +1,93 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Menu, MenuItem } from '@blueprintjs/core';
+
+import clsx from 'classnames';
+import { CLASSES } from '../../../../../common/classes';
+import { FormatDateCell ,Icon} from '../../../../../components';
+import { safeCallback } from 'utils';
+
+
+/**
+ * Table actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: { onEdit, onDelete },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('invoice_transactions.action.edit_transaction')}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <MenuItem
+        text={intl.get('invoice_transactions.action.delete_transaction')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * Retrieve invoice payment transactions associated with item table columns.
+ */
+export const useInvoicePaymentTransactionsColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        id: 'invoice_date',
+        Header: intl.get('date'),
+        accessor: 'formatted_invoice_date',
+        Cell: FormatDateCell,
+        width: 120,
+        className: 'invoice_date',
+        textOverview: true,
+      },
+      {
+        id: 'customer',
+        Header: intl.get('customer'),
+        accessor: 'customer_display_name',
+        width: 140,
+        className: 'customer',
+        textOverview: true,
+      },
+      {
+        id: 'invoice_no',
+        Header: intl.get('invoice_no__'),
+        accessor: 'invoice_number',
+        width: 120,
+        className: 'invoice_no',
+        textOverview: true,
+      },
+      {
+        id: 'qunatity',
+        Header: intl.get('item.drawer_quantity_sold'),
+        accessor: 'quantity',
+        width: 100,
+      },
+      {
+        id: 'rate',
+        Header: 'Rate',
+        accessor: 'formatted_rate',
+        align: 'right',
+        width: 100,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+      {
+        id: 'amount',
+        Header: intl.get('total'),
+        accessor: 'formatted_amount',
+        align: 'right',
+        width: 100,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+};
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/index.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/index.js
new file mode 100644
index 000000000..f1520f2da
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/index.js
@@ -0,0 +1,72 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { DataTable } from '../../../../../components';
+import { useItemAssociatedInvoiceTransactions } from 'hooks/query';
+import { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider';
+import {
+  useInvoicePaymentTransactionsColumns,
+  ActionsMenu,
+} from './components';
+
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+/**
+ * Invoice payment transactions.
+ */
+function InvoicePaymentTransactions({
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const history = useHistory();
+
+  const columns = useInvoicePaymentTransactionsColumns();
+
+  const { itemId } = useItemDetailDrawerContext();
+
+  // Handle fetch invoice associated transactions.
+  const {
+    isLoading: isInvoiceTransactionsLoading,
+    isFetching: isInvoiceTransactionFetching,
+    data: paymentTransactions,
+  } = useItemAssociatedInvoiceTransactions(itemId, {
+    enabled: !!itemId,
+  });
+
+  // Handles delete payment transactions.
+  const handleDeletePaymentTransactons = ({ invoice_id }) => {
+    openAlert('invoice-delete', {
+      invoiceId: invoice_id,
+    });
+  };
+
+  // Handles edit payment transactions.
+  const handleEditPaymentTransactions = ({ invoice_id }) => {
+    history.push(`/invoices/${invoice_id}/edit`);
+    closeDrawer('item-detail-drawer');
+  };
+  return (
+    <DataTable
+      columns={columns}
+      data={paymentTransactions}
+      loading={isInvoiceTransactionsLoading}
+      headerLoading={isInvoiceTransactionsLoading}
+      progressBarLoading={isInvoiceTransactionFetching}
+      ContextMenu={ActionsMenu}
+      payload={{
+        onEdit: handleEditPaymentTransactions,
+        onDelete: handleDeletePaymentTransactons,
+      }}
+    />
+  );
+}
+
+export default compose(
+  withAlertsActions,
+  withDrawerActions,
+)(InvoicePaymentTransactions);
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactionsDataTable.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactionsDataTable.js
deleted file mode 100644
index 1299a4118..000000000
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactionsDataTable.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-import { DataTable, Card } from '../../../../components';
-import { useItemAssociatedInvoiceTransactions } from 'hooks/query';
-import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
-import { useInvoicePaymentTransactionsColumns } from './components';
-
-/**
- * Invoice payment transactions datatable.
- */
-export default function InvoicePaymentTransactionsTable() {
-  const columns = useInvoicePaymentTransactionsColumns();
-
-  const { itemId } = useItemDetailDrawerContext();
-
-  // Handle fetch invoice associated transactions.
-  const {
-    isLoading: isInvoiceTransactionsLoading,
-    isFetching: isInvoiceTransactionFetching,
-    data: paymentTransactions,
-  } = useItemAssociatedInvoiceTransactions(itemId, {
-    enabled: !!itemId,
-  });
-
-  return (
-    <div className="item-drawer__table">
-      <Card>
-        <DataTable
-          columns={columns}
-          data={paymentTransactions}
-          loading={isInvoiceTransactionsLoading}
-          headerLoading={isInvoiceTransactionsLoading}
-          progressBarLoading={isInvoiceTransactionFetching}
-        />
-      </Card>
-    </div>
-  );
-}
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ItemPaymentTransactionContent.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ItemPaymentTransactionContent.js
new file mode 100644
index 000000000..e31721fe5
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ItemPaymentTransactionContent.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import InvoicePaymentTransactions from './InvoicePaymentTransactions';
+import EstimatePaymentTransactions from './EstimatePaymentTransactions';
+import ReceiptPaymentTransactions from './ReceiptPaymentTransactions';
+import BillPaymentTransactions from './BillPaymentTransactions';
+
+export default function ItemPaymentTransactionsContent({ tansactionType }) {
+  const handleType = () => {
+    switch (tansactionType) {
+      case 'invoices':
+        return <InvoicePaymentTransactions />;
+      case 'estimates':
+        return <EstimatePaymentTransactions />;
+      case 'receipts':
+        return <ReceiptPaymentTransactions />;
+      case 'bills':
+        return <BillPaymentTransactions />;
+    }
+  };
+  return handleType();
+}
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/components.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/components.js
new file mode 100644
index 000000000..4d0ac8779
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/components.js
@@ -0,0 +1,93 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Menu, MenuItem } from '@blueprintjs/core';
+
+import clsx from 'classnames';
+import { CLASSES } from '../../../../../common/classes';
+import { FormatDateCell, Icon } from '../../../../../components';
+import { safeCallback } from 'utils';
+
+/**
+ * Table actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: { onEdit, onDelete },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('invoice_transactions.action.edit_transaction')}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <MenuItem
+        text={intl.get('invoice_transactions.action.delete_transaction')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * Retrieve receipt transactions associated with item table columns.
+ */
+export const useReceiptTransactionsColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        id: 'receipt_date',
+        Header: intl.get('date'),
+        accessor: 'formatted_receipt_date',
+        Cell: FormatDateCell,
+        width: 120,
+        className: 'receipt_date',
+        textOverview: true,
+      },
+      {
+        id: 'customer',
+        Header: intl.get('customer'),
+        accessor: 'customer_display_name',
+        width: 140,
+        className: 'customer',
+        textOverview: true,
+      },
+      {
+        id: 'receipt_number',
+        Header: intl.get('receipt_no'),
+        accessor: 'receip_number',
+        width: 120,
+        className: 'receipt_number',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'qunatity',
+        Header: intl.get('item.drawer_quantity_sold'),
+        accessor: 'quantity',
+        width: 100,
+      },
+      {
+        id: 'rate',
+        Header: 'Rate',
+        accessor: 'formatted_rate',
+        align: 'right',
+        width: 100,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+      {
+        id: 'amount',
+        Header: intl.get('total'),
+        accessor: 'formatted_amount',
+        align: 'right',
+        width: 100,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+};
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/index.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/index.js
new file mode 100644
index 000000000..bd97bc1f5
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/index.js
@@ -0,0 +1,71 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { DataTable } from '../../../../../components';
+import { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider';
+import { useItemAssociatedReceiptTransactions } from 'hooks/query';
+import { useReceiptTransactionsColumns, ActionsMenu } from './components';
+
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+/**
+ * Receipt payment transactions.
+ */
+function ReceiptPaymentTransactions({
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const history = useHistory();
+
+  const columns = useReceiptTransactionsColumns();
+
+  const { itemId } = useItemDetailDrawerContext();
+
+  // Handle fetch receipts associated transactions.
+  const {
+    isLoading: isReceiptTransactionsLoading,
+    isFetching: isReceiptTransactionFetching,
+    data: paymentTransactions,
+  } = useItemAssociatedReceiptTransactions(itemId, {
+    enabled: !!itemId,
+  });
+  
+    // Handles delete payment transactions.
+    const handleDeletePaymentTransactons = ({ receipt_id }) => {
+      openAlert('receipt-delete', {
+        receiptId: receipt_id,
+      });
+    };
+  
+    // Handles edit payment transactions.
+    const handleEditPaymentTransactions = ({ receipt_id }) => {
+      history.push(`/receipts/${receipt_id}/edit`);
+      closeDrawer('item-detail-drawer');
+    };
+  
+  return (
+    <DataTable
+      columns={columns}
+      data={paymentTransactions}
+      loading={isReceiptTransactionsLoading}
+      headerLoading={isReceiptTransactionsLoading}
+      progressBarLoading={isReceiptTransactionFetching}
+      ContextMenu={ActionsMenu}
+      payload={{
+        onEdit: handleEditPaymentTransactions,
+        onDelete: handleDeletePaymentTransactons,
+      }}
+    />
+  );
+}
+
+export default compose(
+  withAlertsActions,
+  withDrawerActions,
+)(ReceiptPaymentTransactions);
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactionsDataTable.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactionsDataTable.js
deleted file mode 100644
index c73f8e20a..000000000
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactionsDataTable.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-import { DataTable, Card } from '../../../../components';
-import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
-import { useItemAssociatedReceiptTransactions } from 'hooks/query';
-import { useReceiptTransactionsColumns } from './components';
-
-/**
- * Receipt payment transactions datatable.
- */
-export default function ReceiptPaymentTransactions() {
-  const columns = useReceiptTransactionsColumns();
-
-  const { itemId } = useItemDetailDrawerContext();
-
-  // Handle fetch receipts associated transactions.
-  const {
-    isLoading: isReceiptTransactionsLoading,
-    isFetching: isReceiptTransactionFetching,
-    data: paymentTransactions,
-  } = useItemAssociatedReceiptTransactions(itemId, {
-    enabled: !!itemId,
-  });
-
-  return (
-    <div className="item-drawer__table">
-      <Card>
-        <DataTable
-          columns={columns}
-          data={paymentTransactions}
-          loading={isReceiptTransactionsLoading}
-          headerLoading={isReceiptTransactionsLoading}
-          progressBarLoading={isReceiptTransactionFetching}
-        />
-      </Card>
-    </div>
-  );
-}
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/components.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/components.js
deleted file mode 100644
index 2ff7389b8..000000000
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/components.js
+++ /dev/null
@@ -1,237 +0,0 @@
-import React from 'react';
-import intl from 'react-intl-universal';
-
-import clsx from 'classnames';
-import { CLASSES } from '../../../../common/classes';
-import { FormatDateCell } from '../../../../components';
-
-/**
- * Retrieve invoice payment transactions associated with item table columns.
- */
-export const useInvoicePaymentTransactionsColumns = () => {
-  return React.useMemo(
-    () => [
-      {
-        id: 'invoice_date',
-        Header: intl.get('date'),
-        accessor: 'formatted_invoice_date',
-        Cell: FormatDateCell,
-        width: 140,
-        className: 'invoice_date',
-        textOverview: true,
-      },
-      {
-        id: 'invoice_no',
-        Header: intl.get('invoice_no__'),
-        accessor: 'invoice_number',
-        width: 120,
-        className: 'invoice_no',
-        textOverview: true,
-      },
-      // {
-      //   id: 'reference_number',
-      //   Header: intl.get('reference_no'),
-      //   accessor: 'reference_number',
-      //   width: 120,
-      //   className: 'reference_number',
-      //   textOverview: true,
-      // },
-      {
-        id: 'qunatity',
-        Header: 'Quantity Sold',
-        accessor: 'quantity',
-        width: 100,
-      },
-      {
-        id: 'rate',
-        Header: 'Rate',
-        accessor: 'formatted_rate',
-        align: 'right',
-        width: 100,
-        className: clsx(CLASSES.FONT_BOLD),
-        textOverview: true,
-      },
-      {
-        id: 'amount',
-        Header: intl.get('total'),
-        accessor: 'formatted_amount',
-        align: 'right',
-        width: 100,
-        className: clsx(CLASSES.FONT_BOLD),
-        textOverview: true,
-      },
-    ],
-    [],
-  );
-};
-
-/**
- * Retrieve estimate transactions associated with item table columns.
- */
-export const useEstimateTransactionsColumns = () => {
-  return React.useMemo(
-    () => [
-      {
-        id: 'estimate_date',
-        Header: intl.get('date'),
-        accessor: 'formatted_estimate_date',
-        Cell: FormatDateCell,
-        width: 140,
-        className: 'estimate_date',
-        textOverview: true,
-      },
-      {
-        id: 'estimate_number',
-        Header: intl.get('estimate_no'),
-        accessor: 'estimate_number',
-        width: 120,
-        className: 'estimate_number',
-        textOverview: true,
-      },
-      {
-        id: 'qunatity',
-        Header: 'Quantity Sold',
-        accessor: 'quantity',
-        width: 100,
-      },
-      {
-        id: 'rate',
-        Header: 'Rate',
-        accessor: 'formatted_rate',
-        align: 'right',
-        width: 100,
-        className: clsx(CLASSES.FONT_BOLD),
-        textOverview: true,
-      },
-      {
-        id: 'amount',
-        Header: intl.get('total'),
-        accessor: 'formatted_amount',
-        align: 'right',
-        width: 100,
-        className: clsx(CLASSES.FONT_BOLD),
-        textOverview: true,
-      },
-    ],
-    [],
-  );
-};
-
-/**
- * Retrieve receipt transactions associated with item table columns.
- */
-export const useReceiptTransactionsColumns = () => {
-  return React.useMemo(
-    () => [
-      {
-        id: 'receipt_date',
-        Header: intl.get('date'),
-        accessor: 'formatted_receipt_date',
-        Cell: FormatDateCell,
-        width: 110,
-        className: 'receipt_date',
-        textOverview: true,
-      },
-      {
-        id: 'receipt_number',
-        Header: intl.get('receipt_no'),
-        accessor: 'receip_number',
-        width: 140,
-        className: 'receipt_number',
-        clickable: true,
-        textOverview: true,
-      },
-      {
-        id: 'reference_number',
-        Header: intl.get('reference_no'),
-        accessor: 'reference_number',
-        width: 140,
-        className: 'reference_number',
-        textOverview: true,
-      },
-      {
-        id: 'qunatity',
-        Header: 'Quantity Sold',
-        accessor: 'quantity',
-        width: 100,
-      },
-      {
-        id: 'rate',
-        Header: 'Rate',
-        accessor: 'formatted_rate',
-        align: 'right',
-        width: 100,
-        className: clsx(CLASSES.FONT_BOLD),
-        textOverview: true,
-      },
-      {
-        id: 'amount',
-        Header: intl.get('total'),
-        accessor: 'formatted_amount',
-        align: 'right',
-        width: 100,
-        className: clsx(CLASSES.FONT_BOLD),
-        textOverview: true,
-      },
-    ],
-    [],
-  );
-};
-
-/**
- * Retrieve bill transactions associated with item table columns.
- */
-export const useBillTransactionsColumns = () => {
-  return React.useMemo(
-    () => [
-      {
-        id: 'bill_date',
-        Header: intl.get('date'),
-        accessor: 'formatted_bill_date',
-        Cell: FormatDateCell,
-        width: 110,
-        className: 'bill_date',
-      },
-      {
-        id: 'bill_number',
-        Header: intl.get('bill_number'),
-        accessor: (row) => (row.bill_number ? `${row.bill_number}` : null),
-        width: 100,
-        className: 'bill_number',
-      },
-      {
-        id: 'reference_number',
-        Header: intl.get('reference_no'),
-        accessor: 'reference_number',
-        width: 140,
-        className: 'reference_number',
-        textOverview: true,
-      },
-      {
-        id: 'qunatity',
-        Header: 'Quantity Sold',
-        accessor: 'quantity',
-        width: 100,
-      },
-      {
-        id: 'rate',
-        Header: 'Rate',
-        accessor: 'formatted_rate',
-        align: 'right',
-        width: 100,
-        className: clsx(CLASSES.FONT_BOLD),
-        textOverview: true,
-      },
-      {
-        id: 'amount',
-        Header: intl.get('total'),
-        accessor: 'formatted_amount',
-        align: 'right',
-        width: 100,
-        className: clsx(CLASSES.FONT_BOLD),
-        textOverview: true,
-      },
-    ],
-    [],
-  );
-};
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js
index bd2fefae1..f51ba4b56 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js
@@ -1,34 +1,30 @@
 import React from 'react';
-import { Tab } from '@blueprintjs/core';
-import { DrawerMainTabs, FormattedMessage as T } from 'components';
-import InvoicePaymentTransactionsTable from './InvoicePaymentTransactionsDataTable';
-import EstimatePaymentTransactionsTable from './EstimatePaymentTransactionsDataTable';
-import ReceiptPaymentTransactionsTable from './ReceiptPaymentTransactionsDataTable';
-import BillPaymentTransactionsTable from './BillPaymentTransactionsDataTable';
+import styled from 'styled-components';
+import { Card, FormattedMessage as T } from 'components';
+import { ItemManuTransaction } from './utils';
+import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
+import ItemPaymentTransactionContent from './ItemPaymentTransactionContent';
 
 export const ItemPaymentTransactions = () => {
+  const { value } = useItemDetailDrawerContext();
+
   return (
-    <DrawerMainTabs renderActiveTabPanelOnly={true}>
-      <Tab
-        id={'invoice'}
-        title={<T id={'invoice'} />}
-        panel={<InvoicePaymentTransactionsTable />}
-      />
-      <Tab
-        id={'estiamte'}
-        title={<T id={'estimate_'} />}
-        panel={<EstimatePaymentTransactionsTable />}
-      />
-      <Tab
-        id={'receipt'}
-        title={<T id={'receipt_'} />}
-        panel={<ReceiptPaymentTransactionsTable />}
-      />
-      <Tab
-        id={'bill'}
-        title={'Bill'}
-        panel={<BillPaymentTransactionsTable />}
-      />
-    </DrawerMainTabs>
+    <Card>
+      <ItemManuTransactions>
+        <T id={'item.drawer_transactions_by'} />
+        <ItemManuTransaction />
+      </ItemManuTransactions>
+      <ItemPaymentTransactionContent tansactionType={value} />
+    </Card>
   );
 };
+
+const ItemManuTransactions = styled.div`
+  display: flex;
+  align-items: center;
+  color: #727983;
+  .bp3-button {
+    padding-left: 6px;
+    font-weight: 500;
+  }
+`;
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js
new file mode 100644
index 000000000..9e93ea4b2
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import {
+  Button,
+  MenuItem,
+  Menu,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+} from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
+import transactions from '../../../../common/itemPaymentTranactionsOption';
+
+export const ItemManuTransaction = () => {
+  const { value, setValue } = useItemDetailDrawerContext();
+
+  // const handleClickItem = (item) => {
+  //   onChange && onChange(item);
+  // };
+
+  const content = transactions.map(({ name, label }) => (
+    <MenuItem onClick={() => setValue(name)} text={label} />
+  ));
+
+  return (
+    <Popover
+      minimal={true}
+      interactionKind={PopoverInteractionKind.CLICK}
+      position={Position.BOTTOM_LEFT}
+      modifiers={{
+        offset: { offset: '0, 4' },
+      }}
+      content={<Menu>{content}</Menu>}
+    >
+      <Button minimal={true} text={<T id={value} />} rightIcon={'caret-down'} />
+    </Popover>
+  );
+};
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/JournalEntriesTransactions/JournalEntriesTransactionsTable.js b/src/containers/Drawers/VendorCreditDetailDrawer/JournalEntriesTransactions/JournalEntriesTransactionsTable.js
new file mode 100644
index 000000000..ab3b485c3
--- /dev/null
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/JournalEntriesTransactions/JournalEntriesTransactionsTable.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { DataTable, Card } from 'components';
+
+import { useVendorCreditDetailDrawerContext } from '../VendorCreditDetailDrawerProvider';
+import { useTransactionsByReference } from 'hooks/query';
+import { useJournalEntriesTransactionsColumns } from './components';
+
+/**
+ * Journal entries vendor credit transactions table.
+ */
+export default function JournalEntriesTransactionsTable() {
+  const { vendorCreditId } = useVendorCreditDetailDrawerContext();
+
+  const columns = useJournalEntriesTransactionsColumns();
+
+  // Handle fetch transaction by reference.
+  const {
+    data: { transactions },
+    isLoading: isTransactionLoading,
+  } = useTransactionsByReference(
+    {
+      reference_id: vendorCreditId,
+      reference_type: 'vendorCredit',
+    },
+    { enabled: !!vendorCreditId },
+  );
+
+  return (
+    <Card>
+      <DataTable
+        columns={columns}
+        data={transactions}
+        loading={isTransactionLoading}
+        className={'datatable--journal-entries'}
+      />
+    </Card>
+  );
+}
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/JournalEntriesTransactions/components.js b/src/containers/Drawers/VendorCreditDetailDrawer/JournalEntriesTransactions/components.js
new file mode 100644
index 000000000..eb1135002
--- /dev/null
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/JournalEntriesTransactions/components.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormatDateCell } from '../../../../components';
+
+import 'style/pages/JournalEntries/List.scss';
+
+/**
+ * Retrieve journal entries transactions table columns.
+ */
+export const useJournalEntriesTransactionsColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('date'),
+        accessor: 'date',
+        accessor: 'formatted_date',
+        Cell: FormatDateCell,
+        width: 140,
+        className: 'date',
+        textOverview: true,
+      },
+      {
+        Header: intl.get('account_name'),
+        accessor: 'account_name',
+        width: 140,
+        className: 'account_name',
+        textOverview: true,
+      },
+      {
+        Header: intl.get('contact'),
+        accessor: 'contactTypeFormatted',
+        width: 140,
+      },
+      {
+        Header: intl.get('credit'),
+        accessor: ({ credit }) => credit.formatted_amount,
+        width: 100,
+        className: 'credit',
+      },
+      {
+        Header: intl.get('debit'),
+        accessor: ({ debit }) => debit.formatted_amount,
+        width: 100,
+        className: 'debit',
+      },
+    ],
+    [],
+  );
+};
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js
index eb0eafb42..4d96ac77c 100644
--- a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js
@@ -6,6 +6,7 @@ import { DrawerMainTabs } from 'components';
 import VendorCreditDetailPanel from './VendorCreditDetailPanel';
 import RefundVendorCreditTransactionsTable from './RefundVendorCreditTransactions/RefundVendorCreditTransactionsTable';
 import ReconcileVendorCreditTransactionsTable from './ReconcileVendorCreditTransactions/ReconcileVendorCreditTransactionsTable';
+import JournalEntriesTransactionsTable from './JournalEntriesTransactions/JournalEntriesTransactionsTable';
 import clsx from 'classnames';
 
 import VendorCreditDetailCls from '../../../style/components/Drawers/VendorCreditDetail.module.scss';
@@ -16,12 +17,17 @@ import VendorCreditDetailCls from '../../../style/components/Drawers/VendorCredi
 export default function VendorCreditDetail() {
   return (
     <div className={clsx(VendorCreditDetailCls.root)}>
-      <DrawerMainTabs>
+      <DrawerMainTabs renderActiveTabPanelOnly={true}>
         <Tab
           title={intl.get('details')}
           id={'details'}
           panel={<VendorCreditDetailPanel />}
         />
+        <Tab
+          title={intl.get('journal_entries')}
+          id={'journal_entries'}
+          panel={<JournalEntriesTransactionsTable />}
+        />
         <Tab
           title={intl.get('vendor_credit.drawer.label_refund_transactions')}
           id={'refund_transactions'}
diff --git a/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeForm.js b/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeForm.js
index 15771db31..5e9f04151 100644
--- a/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeForm.js
+++ b/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeForm.js
@@ -107,9 +107,7 @@ function PaymentMadeForm({
 
     const onError = ({
       response: {
-        error: {
-          data: { errors },
-        },
+        data: { errors },
       },
     }) => {
       const getError = (errorType) => errors.find((e) => e.type === errorType);
diff --git a/src/hooks/query/bills.js b/src/hooks/query/bills.js
index 008daf3ce..d30f32d5a 100644
--- a/src/hooks/query/bills.js
+++ b/src/hooks/query/bills.js
@@ -30,6 +30,9 @@ const commonInvalidateQueries = (queryClient) => {
 
   // Invalidate financial reports.
   queryClient.invalidateQueries(t.FINANCIAL_REPORT);
+
+  // Invalidate
+  queryClient.invalidateQueries(t.ITEMS_ASSOCIATED_WITH_BILLS);
 };
 
 /**
diff --git a/src/hooks/query/estimates.js b/src/hooks/query/estimates.js
index b73eae6ce..63ac3e53a 100644
--- a/src/hooks/query/estimates.js
+++ b/src/hooks/query/estimates.js
@@ -9,6 +9,9 @@ import t from './types';
 const commonInvalidateQueries = (queryClient) => {
   // Invalidate estimates.
   queryClient.invalidateQueries(t.SALE_ESTIMATES);
+
+  // Invalidate
+  queryClient.invalidateQueries(t.ITEM_ASSOCIATED_WITH_ESTIMATES);
 };
 
 /**
@@ -191,7 +194,7 @@ export function useRefreshEstimates() {
 }
 
 /**
- *  
+ *
  */
 export function useCreateNotifyEstimateBySMS(props) {
   const queryClient = useQueryClient();
@@ -214,11 +217,11 @@ export function useCreateNotifyEstimateBySMS(props) {
 }
 
 /**
- * 
- * @param {*} estimateId 
- * @param {*} props 
- * @param {*} requestProps 
- * @returns 
+ *
+ * @param {*} estimateId
+ * @param {*} props
+ * @param {*} requestProps
+ * @returns
  */
 export function useEstimateSMSDetail(estimateId, props, requestProps) {
   return useRequestQuery(
diff --git a/src/hooks/query/invoices.js b/src/hooks/query/invoices.js
index 682ffecf5..1223210a9 100644
--- a/src/hooks/query/invoices.js
+++ b/src/hooks/query/invoices.js
@@ -31,6 +31,9 @@ const commonInvalidateQueries = (queryClient) => {
   // Invalidate reconcile.
   queryClient.invalidateQueries(t.RECONCILE_CREDIT_NOTE);
   queryClient.invalidateQueries(t.RECONCILE_CREDIT_NOTES);
+
+  // Invalidate
+  queryClient.invalidateQueries(t.ITEM_ASSOCIATED_WITH_INVOICES);
 };
 
 /**
diff --git a/src/hooks/query/items.js b/src/hooks/query/items.js
index 279e477b9..78fc18533 100644
--- a/src/hooks/query/items.js
+++ b/src/hooks/query/items.js
@@ -219,7 +219,7 @@ export function useItemAssociatedReceiptTransactions(id, props) {
 }
 export function useItemAssociatedBillTransactions(id, props) {
   return useRequestQuery(
-    [t.ITEM_ASSOCIATED_WITH_BILLS, id],
+    [t.ITEMS_ASSOCIATED_WITH_BILLS, id],
     {
       method: 'get',
       url: `items/${id}/transactions/bills`,
diff --git a/src/hooks/query/receipts.js b/src/hooks/query/receipts.js
index a9b0c705b..c2cbeaa22 100644
--- a/src/hooks/query/receipts.js
+++ b/src/hooks/query/receipts.js
@@ -24,6 +24,9 @@ const commonInvalidateQueries = (queryClient) => {
   queryClient.invalidateQueries(t.CASH_FLOW_TRANSACTIONS);
   queryClient.invalidateQueries(t.CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY);
 
+  // Invalidate
+  queryClient.invalidateQueries(t.ITEM_ASSOCIATED_WITH_RECEIPTS);
+
   // Invalidate the settings.
   queryClient.invalidateQueries([t.SETTING, t.SETTING_RECEIPTS]);
 };
diff --git a/src/hooks/query/settings.js b/src/hooks/query/settings.js
index 4575307aa..bc28b9e57 100644
--- a/src/hooks/query/settings.js
+++ b/src/hooks/query/settings.js
@@ -95,7 +95,7 @@ export function useSettingsReceipts(props) {
 export function useSettingsManualJournals(props) {
   return useSettingsQuery(
     [t.SETTING, t.SETTING_MANUAL_JOURNALS],
-    { group: 'sale_receipts' },
+    { group: 'manual_journals' },
     props,
   );
 }
diff --git a/src/hooks/query/types.js b/src/hooks/query/types.js
index 6a6d637fc..e22b8bedf 100644
--- a/src/hooks/query/types.js
+++ b/src/hooks/query/types.js
@@ -49,8 +49,8 @@ const ITEMS = {
   ITEMS_CATEGORIES: 'ITEMS_CATEGORIES',
   ITEM_ASSOCIATED_WITH_INVOICES: 'ITEM_ASSOCIATED_WITH_INVOICES',
   ITEM_ASSOCIATED_WITH_ESTIMATES: 'ITEM_ASSOCIATED_WITH_ESTIMATES',
-  ITEM_ASSOCIATED_WITH_RECEIVES: 'ITEM_ASSOCIATED_WITH_RECEIPTS',
-  ITEM_ASSOCIATED_WITH_BILSS: 'ITEMS_ASSOCIATED_WITH_BILLS',
+  ITEM_ASSOCIATED_WITH_RECEIPTS: 'ITEM_ASSOCIATED_WITH_RECEIPTS',
+  ITEMS_ASSOCIATED_WITH_BILLS: 'ITEMS_ASSOCIATED_WITH_BILLS',
 };
 
 const SALE_ESTIMATES = {
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index 990b12070..b81c5c8dd 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1638,6 +1638,12 @@
   "transactions_locking.long_description": "Transactions locking has the ability to lock all organization transactions so users can’t edit, delete or create new transactions during the past period, but still have the ability to create draft invoices or bills and that won’t affect financial reports. typically set a lock date when your financial records are being prepared for the year.",
   "payment_transactions": "Payment transactions",
   "invoice_transactions.column.withdrawal_account": "Deposit account",
+  "invoice_transactions.action.delete_transaction": "Delete Transaction",
+  "invoice_transactions.action.edit_transaction": "Edit Transaction",
   "bill_transactions.column.deposit_account": "Withdrawal account",
-  "transactions_locking.lock_item.no_lock": "There are no locked transactions in this module."
+  "transactions_locking.lock_item.no_lock": "There are no locked transactions in this module.",
+  "overview": "Overview",
+  "transactions": "Transactions",
+  "item.drawer_transactions_by": "Transactions by:",
+  "item.drawer_quantity_sold": "Quantity Sold"
 }
\ No newline at end of file
diff --git a/src/style/components/Drawers/ItemDrawer.scss b/src/style/components/Drawers/ItemDrawer.scss
index 4da73cd21..a7af4a0b7 100644
--- a/src/style/components/Drawers/ItemDrawer.scss
+++ b/src/style/components/Drawers/ItemDrawer.scss
@@ -38,28 +38,24 @@
       }
     }
   }
-  &__table {
-    .card {
-      padding: 12px 15px !important;
-    }
 
-    .table {
-      .tbody,
-      .thead {
-        .tr .th {
-          padding: 8px 8px;
-          background-color: #fff;
-          font-size: 14px;
-          border-bottom: 1px solid #000;
-          border-top: 1px solid #000;
-        }
+  .table {
+    margin-top: 8px;
+    .tbody,
+    .thead {
+      .tr .th {
+        padding: 8px 8px;
+        background-color: #fff;
+        font-size: 14px;
+        border-bottom: 1px solid #000;
+        border-top: 1px solid #000;
       }
-      .tbody {
-        .tr .td {
-          border-bottom: 0;
-          padding-top: 0.4rem;
-          padding-bottom: 0.4rem;
-        }
+    }
+    .tbody {
+      .tr .td {
+        border-bottom: 0;
+        padding-top: 0.4rem;
+        padding-bottom: 0.4rem;
       }
     }
   }
diff --git a/src/style/pages/Expense/PageForm.scss b/src/style/pages/Expense/PageForm.scss
index 102a3819e..6aaf1fade 100644
--- a/src/style/pages/Expense/PageForm.scss
+++ b/src/style/pages/Expense/PageForm.scss
@@ -1,5 +1,5 @@
-.dashboard__insider--expenses {
-
+.dashboard__insider--expense-form {
+  padding-bottom: 64px;
   .bigcapital-datatable {
 
     .tbody {
diff --git a/src/style/pages/ManualJournal/MakeJournal.scss b/src/style/pages/ManualJournal/MakeJournal.scss
index d10c11380..1490e7642 100644
--- a/src/style/pages/ManualJournal/MakeJournal.scss
+++ b/src/style/pages/ManualJournal/MakeJournal.scss
@@ -1,3 +1,6 @@
+.dashboard__insider--make-journal-page {
+  padding-bottom: 64px;
+}
 
 .page-form--make-journal-entries{
   $self: '.page-form';