diff --git a/src/common/itemPaymentTranactionsOption.js b/src/common/itemPaymentTranactionsOption.js
index 1df2bb456..0811c5183 100644
--- a/src/common/itemPaymentTranactionsOption.js
+++ b/src/common/itemPaymentTranactionsOption.js
@@ -1,8 +1,51 @@
 import intl from 'react-intl-universal';
+import {
+  AbilitySubject,
+  SaleEstimateAction,
+  SaleReceiptAction,
+  SaleInvoiceAction,
+  BillAction,
+} from '../common/abilityOption';
+import { useAbilitiesFilter } from '../hooks';
 
-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') },
+export const getItemPaymentTransactions = () => [
+  {
+    name: 'invoices',
+    label: intl.get('invoices'),
+    permission: {
+      subject: AbilitySubject.Invoice,
+      ability: SaleInvoiceAction.View,
+    },
+  },
+  {
+    name: 'estimates',
+    label: intl.get('estimates'),
+    permission: {
+      subject: AbilitySubject.Estimate,
+      ability: SaleEstimateAction.View,
+    },
+  },
+  {
+    name: 'receipts',
+    label: intl.get('receipts'),
+    permission: {
+      subject: AbilitySubject.Receipt,
+      ability: SaleReceiptAction.View,
+    },
+  },
+  {
+    name: 'bills',
+    label: intl.get('bills'),
+    permission: {
+      subject: AbilitySubject.Bill,
+      ability: BillAction.View,
+    },
+  },
 ];
+
+export const useGetItemPaymentTransactionsMenu = () => {
+  const itemTransactionMenu = getItemPaymentTransactions();
+  const abilitiesFilter = useAbilitiesFilter();
+
+  return abilitiesFilter(itemTransactionMenu);
+};
diff --git a/src/containers/Drawers/BillDrawer/BillDrawerDetails.js b/src/containers/Drawers/BillDrawer/BillDrawerDetails.js
index 5042ed12a..62ddb5aa6 100644
--- a/src/containers/Drawers/BillDrawer/BillDrawerDetails.js
+++ b/src/containers/Drawers/BillDrawer/BillDrawerDetails.js
@@ -3,8 +3,11 @@ import { Tab } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
 
-import { DrawerMainTabs } from 'components';
-
+import { Can, DrawerMainTabs } from 'components';
+import {
+  PaymentMadeAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 import BillDetailTab from './BillDetailTab';
 import LocatedLandedCostTable from './LocatedLandedCostTable';
 import BillGLEntriesTable from './BillGLEntriesTable';
@@ -30,12 +33,13 @@ function BillDetailsTabs() {
         id={'journal_entries'}
         panel={<BillGLEntriesTable />}
       />
-
-      <Tab
-        title={intl.get('payment_transactions')}
-        id={'payment_transactions'}
-        panel={<BillPaymentTransactionTable />}
-      />
+      {/* <Can I={PaymentMadeAction.View} a={AbilitySubject.PaymentMade}> */}
+        <Tab
+          title={intl.get('payment_transactions')}
+          id={'payment_transactions'}
+          panel={<BillPaymentTransactionTable />}
+        />
+      {/* </Can> */}
       <Tab
         title={intl.get('located_landed_cost')}
         id={'landed_cost'}
diff --git a/src/containers/Drawers/BillDrawer/BillPaymentTransactions/components.js b/src/containers/Drawers/BillDrawer/BillPaymentTransactions/components.js
index b62afa494..62fd6983d 100644
--- a/src/containers/Drawers/BillDrawer/BillPaymentTransactions/components.js
+++ b/src/containers/Drawers/BillDrawer/BillPaymentTransactions/components.js
@@ -3,8 +3,12 @@ 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 { Can, FormatDateCell, Icon } from '../../../../components';
 import { safeCallback } from 'utils';
+import {
+  PaymentMadeAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 /**
  * Table actions menu.
@@ -15,17 +19,21 @@ export function ActionsMenu({
 }) {
   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} />}
-      />
+      <Can I={PaymentMadeAction.Edit} a={AbilitySubject.PaymentMade}>
+        <MenuItem
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('invoice_transactions.action.edit_transaction')}
+          onClick={safeCallback(onEdit, original)}
+        />
+      </Can>
+      <Can I={PaymentMadeAction.Delete} a={AbilitySubject.PaymentMade}>
+        <MenuItem
+          text={intl.get('invoice_transactions.action.delete_transaction')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
     </Menu>
   );
 }
diff --git a/src/containers/Drawers/BillDrawer/components.js b/src/containers/Drawers/BillDrawer/components.js
index 184a120f0..daf163214 100644
--- a/src/containers/Drawers/BillDrawer/components.js
+++ b/src/containers/Drawers/BillDrawer/components.js
@@ -3,7 +3,9 @@ import intl from 'react-intl-universal';
 import styled from 'styled-components';
 import { Intent, MenuItem, Menu } from '@blueprintjs/core';
 import { safeCallback } from 'utils';
-import { Icon } from 'components';
+import { Can, Icon } from 'components';
+import { BillAction, AbilitySubject } from '../../../common/abilityOption';
+
 /**
  * Actions menu.
  */
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js
index a7d169efe..968644e2f 100644
--- a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js
@@ -3,12 +3,16 @@ import { Tab } from '@blueprintjs/core';
 import styled from 'styled-components';
 import intl from 'react-intl-universal';
 
-import { DrawerMainTabs } from 'components';
+import { Can, DrawerMainTabs } from 'components';
 import CreditNoteDetailActionsBar from './CreditNoteDetailActionsBar';
 import CreditNoteDetailPanel from './CreditNoteDetailPanel';
 import RefundCreditNoteTransactionsTable from './RefundCreditNoteTransactions/RefundCreditNoteTransactionsTable';
 import ReconcileCreditNoteTransactionsTable from './ReconcileCreditNoteTransactions/ReconcileCreditNoteTransactionsTable';
 import { CreditNoteGLEntriesTable } from './JournalEntriesTransactions/JournalEntriesTransactionsTable';
+import {
+  CreditNoteAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
 /**
  * Credit Note view detail.
@@ -40,6 +44,7 @@ function CreditNoteDetailsTabs() {
         id={'journal_entries'}
         panel={<CreditNoteGLEntriesTable />}
       />
+      {/* <Can I={CreditNoteAction.View} a={AbilitySubject.CreditNote}> */}
       <Tab
         title={intl.get('credit_note.drawer.label_refund_transactions')}
         id={'refund_transactions'}
@@ -50,6 +55,7 @@ function CreditNoteDetailsTabs() {
         id={'reconcile_transactions'}
         panel={<ReconcileCreditNoteTransactionsTable />}
       />
+      {/* </Can> */}
     </DrawerMainTabs>
   );
 }
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js
index 112a8f556..08cf85250 100644
--- a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js
@@ -14,7 +14,17 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { DrawerActionsBar, Icon, FormattedMessage as T, If } from 'components';
+import {
+  DrawerActionsBar,
+  Can,
+  Icon,
+  FormattedMessage as T,
+  If,
+} from 'components';
+import {
+  CreditNoteAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
 import { compose } from 'utils';
 import { CreditNoteMenuItem } from './utils';
@@ -58,37 +68,45 @@ function CreditNoteDetailActionsBar({
   return (
     <DrawerActionsBar>
       <NavbarGroup>
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="pen-18" />}
-          text={<T id={'credit_note.action.edit_credit_note'} />}
-          onClick={handleEditCreditNote}
-        />
-        <NavbarDivider />
-        <If condition={!creditNote.is_closed && !creditNote.is_draft}>
+        <Can I={CreditNoteAction.Edit} a={AbilitySubject.CreditNote}>
           <Button
             className={Classes.MINIMAL}
-            icon={<Icon icon="arrow-upward" iconSize={18} />}
-            text={<T id={'refund'} />}
-            onClick={handleRefundCreditNote}
+            icon={<Icon icon="pen-18" />}
+            text={<T id={'credit_note.action.edit_credit_note'} />}
+            onClick={handleEditCreditNote}
           />
           <NavbarDivider />
-        </If>
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
-          text={<T id={'delete'} />}
-          intent={Intent.DANGER}
-          onClick={handleDeleteCreditNote}
-        />
-        <If condition={creditNote.is_published && !creditNote.is_closed}>
-          <NavbarDivider />
-          <CreditNoteMenuItem
-            payload={{
-              onReconcile: handleReconcileCreditNote,
-            }}
+        </Can>
+        <Can I={CreditNoteAction.Refund} a={AbilitySubject.CreditNote}>
+          <If condition={!creditNote.is_closed && !creditNote.is_draft}>
+            <Button
+              className={Classes.MINIMAL}
+              icon={<Icon icon="arrow-upward" iconSize={18} />}
+              text={<T id={'refund'} />}
+              onClick={handleRefundCreditNote}
+            />
+            <NavbarDivider />
+          </If>
+        </Can>
+        <Can I={CreditNoteAction.Delete} a={AbilitySubject.CreditNote}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeleteCreditNote}
           />
-        </If>
+        </Can>
+        <Can I={CreditNoteAction.Edit} a={AbilitySubject.CreditNote}>
+          <If condition={creditNote.is_published && !creditNote.is_closed}>
+            <NavbarDivider />
+            <CreditNoteMenuItem
+              payload={{
+                onReconcile: handleReconcileCreditNote,
+              }}
+            />
+          </If>
+        </Can>
       </NavbarGroup>
     </DrawerActionsBar>
   );
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/ReconcileCreditNoteTransactions/components.js b/src/containers/Drawers/CreditNoteDetailDrawer/ReconcileCreditNoteTransactions/components.js
index 30bce0ddb..3398cf8e3 100644
--- a/src/containers/Drawers/CreditNoteDetailDrawer/ReconcileCreditNoteTransactions/components.js
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/ReconcileCreditNoteTransactions/components.js
@@ -1,8 +1,12 @@
 import React from 'react';
 import { Intent, MenuItem, Menu } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import { FormatDateCell, Icon } from 'components';
+import { Can, FormatDateCell, Icon } from 'components';
 import { safeCallback } from 'utils';
+import {
+  CreditNoteAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 /**
  * Actions menu.
@@ -10,12 +14,14 @@ import { safeCallback } from 'utils';
 export function ActionsMenu({ payload: { onDelete }, row: { original } }) {
   return (
     <Menu>
-      <MenuItem
-        icon={<Icon icon="trash-16" iconSize={16} />}
-        text={intl.get('delete_transaction')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-      />
+      <Can I={CreditNoteAction.Delete} a={AbilitySubject.CreditNote}>
+        <MenuItem
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          text={intl.get('delete_transaction')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+        />
+      </Can>
     </Menu>
   );
 }
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/RefundCreditNoteTransactions/components.js b/src/containers/Drawers/CreditNoteDetailDrawer/RefundCreditNoteTransactions/components.js
index fd6a95782..f815408b6 100644
--- a/src/containers/Drawers/CreditNoteDetailDrawer/RefundCreditNoteTransactions/components.js
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/RefundCreditNoteTransactions/components.js
@@ -1,8 +1,12 @@
 import React from 'react';
 import { Intent, MenuItem, Menu } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import { FormatDateCell, Icon } from 'components';
+import { Can, FormatDateCell, Icon } from 'components';
 import { safeCallback } from 'utils';
+import {
+  CreditNoteAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 /**
  * Actions menu.
@@ -10,12 +14,14 @@ import { safeCallback } from 'utils';
 export function ActionsMenu({ payload: { onDelete }, row: { original } }) {
   return (
     <Menu>
-      <MenuItem
-        icon={<Icon icon="trash-16" iconSize={16} />}
-        text={intl.get('delete_transaction')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-      />
+      <Can I={CreditNoteAction.Delete} a={AbilitySubject.CreditNote}>
+        <MenuItem
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          text={intl.get('delete_transaction')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+        />
+      </Can>
     </Menu>
   );
 }
@@ -39,7 +45,9 @@ export function useRefundCreditTransactionsTableColumns() {
       },
       {
         id: 'from_account',
-        Header: intl.get('refund_credit_transactions.column.withdrawal_account'),
+        Header: intl.get(
+          'refund_credit_transactions.column.withdrawal_account',
+        ),
         accessor: ({ from_account }) => from_account.name,
         width: 100,
         className: 'from_account',
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js
index 5d7758507..1e9176bbf 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js
@@ -1,9 +1,13 @@
 import React from 'react';
 import { Tab } from '@blueprintjs/core';
 import styled from 'styled-components';
+import intl from 'react-intl-universal';
 
-import { DrawerMainTabs } from 'components';
-
+import { Can, DrawerMainTabs } from 'components';
+import {
+  PaymentReceiveAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 import InvoiceDetailActionsBar from './InvoiceDetailActionsBar';
 import InvoiceGLEntriesTable from './InvoiceGLEntriesTable';
 import InvoicePaymentTransactionsTable from './InvoicePaymentTransactions/InvoicePaymentTransactionsTable';
@@ -19,17 +23,23 @@ function InvoiceDetailsTabs() {
       renderActiveTabPanelOnly={true}
       defaultSelectedTabId="details"
     >
-      <Tab title={'Overview'} id={'details'} panel={<InvoiceDetailTab />} />
       <Tab
-        title={'Journal Entries'}
+        title={intl.get('overview')}
+        id={'details'}
+        panel={<InvoiceDetailTab />}
+      />
+      <Tab
+        title={intl.get('journal_entries')}
         id={'journal_entries'}
         panel={<InvoiceGLEntriesTable />}
       />
+      {/* <Can I={PaymentReceiveAction.View} a={AbilitySubject.PaymentReceive}> */}
       <Tab
-        title={'Payment Transactions'}
+        title={intl.get('payment_transactions')}
         id={'payment_transactions'}
         panel={<InvoicePaymentTransactionsTable />}
       />
+      {/* </Can> */}
     </DrawerMainTabs>
   );
 }
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/components.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/components.js
index 3333a986b..3461c7a97 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/components.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/components.js
@@ -3,8 +3,12 @@ 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 { FormatDateCell, Icon, Can } from '../../../../components';
 import { safeCallback } from 'utils';
+import {
+  PaymentReceiveAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 /**
  * Table actions menu.
@@ -15,17 +19,21 @@ export function ActionsMenu({
 }) {
   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} />}
-      />
+      <Can I={PaymentReceiveAction.Edit} a={AbilitySubject.PaymentReceive}>
+        <MenuItem
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('invoice_transactions.action.edit_transaction')}
+          onClick={safeCallback(onEdit, original)}
+        />
+      </Can>
+      <Can I={PaymentReceiveAction.Delete} a={AbilitySubject.PaymentReceive}>
+        <MenuItem
+          text={intl.get('invoice_transactions.action.delete_transaction')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
     </Menu>
   );
 }
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/components.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/components.js
index 78a24e58a..2ad0f7690 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/components.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/components.js
@@ -4,8 +4,12 @@ import { Intent, Menu, MenuItem } from '@blueprintjs/core';
 
 import clsx from 'classnames';
 import { CLASSES } from '../../../../../common/classes';
-import { FormatDateCell, Icon } from '../../../../../components';
+import { Can, FormatDateCell, Icon } from '../../../../../components';
 import { safeCallback } from 'utils';
+import {
+  BillAction,
+  AbilitySubject,
+} from '../../../../../common/abilityOption';
 
 /**
  * Table actions menu.
@@ -16,17 +20,21 @@ export function ActionsMenu({
 }) {
   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} />}
-      />
+      <Can I={BillAction.Edit} a={AbilitySubject.Bill}>
+        <MenuItem
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('invoice_transactions.action.edit_transaction')}
+          onClick={safeCallback(onEdit, original)}
+        />
+      </Can>
+      <Can I={BillAction.Delete} a={AbilitySubject.Bill}>
+        <MenuItem
+          text={intl.get('invoice_transactions.action.delete_transaction')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
     </Menu>
   );
 }
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/components.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/components.js
index 1d9f8832e..bced5a35c 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/components.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/components.js
@@ -4,8 +4,12 @@ import { Intent, Menu, MenuItem } from '@blueprintjs/core';
 
 import clsx from 'classnames';
 import { CLASSES } from '../../../../../common/classes';
-import { FormatDateCell, Icon } from '../../../../../components';
+import { Can, FormatDateCell, Icon } from '../../../../../components';
 import { safeCallback } from 'utils';
+import {
+  SaleEstimateAction,
+  AbilitySubject,
+} from '../../../../../common/abilityOption';
 
 /**
  * Table actions menu.
@@ -16,17 +20,21 @@ export function ActionsMenu({
 }) {
   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} />}
-      />
+      <Can I={SaleEstimateAction.Edit} a={AbilitySubject.Estimate}>
+        <MenuItem
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('invoice_transactions.action.edit_transaction')}
+          onClick={safeCallback(onEdit, original)}
+        />
+      </Can>
+      <Can I={SaleEstimateAction.Delete} a={AbilitySubject.Estimate}>
+        <MenuItem
+          text={intl.get('invoice_transactions.action.delete_transaction')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
     </Menu>
   );
 }
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/components.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/components.js
index c7bd451ac..f9e2584b5 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/components.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/components.js
@@ -4,9 +4,12 @@ import { Intent, Menu, MenuItem } from '@blueprintjs/core';
 
 import clsx from 'classnames';
 import { CLASSES } from '../../../../../common/classes';
-import { FormatDateCell ,Icon} from '../../../../../components';
+import { Can, FormatDateCell, Icon } from '../../../../../components';
 import { safeCallback } from 'utils';
-
+import {
+  SaleInvoiceAction,
+  AbilitySubject,
+} from '../../../../../common/abilityOption';
 
 /**
  * Table actions menu.
@@ -17,17 +20,21 @@ export function ActionsMenu({
 }) {
   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} />}
-      />
+      <Can I={SaleInvoiceAction.Edit} a={AbilitySubject.Invoice}>
+        <MenuItem
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('invoice_transactions.action.edit_transaction')}
+          onClick={safeCallback(onEdit, original)}
+        />
+      </Can>
+      <Can I={SaleInvoiceAction.Delete} a={AbilitySubject.Invoice}>
+        <MenuItem
+          text={intl.get('invoice_transactions.action.delete_transaction')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
     </Menu>
   );
 }
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/components.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/components.js
index ef3569d58..d6e93bedb 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/components.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/components.js
@@ -4,8 +4,12 @@ import { Intent, Menu, MenuItem } from '@blueprintjs/core';
 
 import clsx from 'classnames';
 import { CLASSES } from '../../../../../common/classes';
-import { FormatDateCell, Icon } from '../../../../../components';
+import { Can, FormatDateCell, Icon } from '../../../../../components';
 import { safeCallback } from 'utils';
+import {
+  SaleReceiptAction,
+  AbilitySubject,
+} from '../../../../../common/abilityOption';
 
 /**
  * Table actions menu.
@@ -16,17 +20,21 @@ export function ActionsMenu({
 }) {
   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} />}
-      />
+      <Can I={SaleReceiptAction.Edit} a={AbilitySubject.Receipt}>
+        <MenuItem
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('invoice_transactions.action.edit_transaction')}
+          onClick={safeCallback(onEdit, original)}
+        />
+      </Can>
+      <Can I={SaleReceiptAction.Edit} a={AbilitySubject.Receipt}>
+        <MenuItem
+          text={intl.get('invoice_transactions.action.delete_transaction')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
     </Menu>
   );
 }
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js
index a8efc015f..c07f85dfd 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js
@@ -10,16 +10,21 @@ import {
 import styled from 'styled-components';
 import { FormattedMessage as T } from 'components';
 import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
-import transactions from '../../../../common/itemPaymentTranactionsOption';
+import { useGetItemPaymentTransactionsMenu } from '../../../../common/itemPaymentTranactionsOption';
 
 export const ItemManuTransaction = ({ onChange }) => {
   const { value, setValue } = useItemDetailDrawerContext();
+  const itemTransactionMenu = useGetItemPaymentTransactionsMenu();
+
+  if (itemTransactionMenu.length === 0) {
+    return null;
+  }
 
   const handleClickItem = (item) => {
     onChange && onChange(item);
   };
 
-  const content = transactions.map(({ name, label }) => (
+  const content = itemTransactionMenu.map(({ name, label }) => (
     <MenuItem onClick={() => handleClickItem(name)} text={label} />
   ));
 
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/ReconcileVendorCreditTransactions/components.js b/src/containers/Drawers/VendorCreditDetailDrawer/ReconcileVendorCreditTransactions/components.js
index 2ac341ce7..3cae35af1 100644
--- a/src/containers/Drawers/VendorCreditDetailDrawer/ReconcileVendorCreditTransactions/components.js
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/ReconcileVendorCreditTransactions/components.js
@@ -1,8 +1,12 @@
 import React from 'react';
 import { Intent, MenuItem, Menu } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import { FormatDateCell, Icon } from 'components';
+import { Can, FormatDateCell, Icon } from 'components';
 import { safeCallback } from 'utils';
+import {
+  VendorCreditAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 /**
  * Actions menu.
@@ -10,12 +14,14 @@ import { safeCallback } from 'utils';
 export function ActionsMenu({ payload: { onDelete }, row: { original } }) {
   return (
     <Menu>
-      <MenuItem
-        icon={<Icon icon="trash-16" iconSize={16} />}
-        text={intl.get('delete_transaction')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-      />
+      <Can I={VendorCreditAction.Delete} a={AbilitySubject.VendorCredit}>
+        <MenuItem
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          text={intl.get('delete_transaction')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+        />
+      </Can>
     </Menu>
   );
 }
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/RefundVendorCreditTransactions/components.js b/src/containers/Drawers/VendorCreditDetailDrawer/RefundVendorCreditTransactions/components.js
index 2c0d01d4b..cbf32dc9e 100644
--- a/src/containers/Drawers/VendorCreditDetailDrawer/RefundVendorCreditTransactions/components.js
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/RefundVendorCreditTransactions/components.js
@@ -1,8 +1,12 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { Intent, MenuItem, Menu } from '@blueprintjs/core';
-import { FormatDateCell, Icon } from 'components';
+import { Can, FormatDateCell, Icon } from 'components';
 import { safeCallback } from 'utils';
+import {
+  VendorCreditAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 /**
  * Actions menu.
@@ -10,12 +14,14 @@ import { safeCallback } from 'utils';
 export function ActionsMenu({ payload: { onDelete }, row: { original } }) {
   return (
     <Menu>
-      <MenuItem
-        icon={<Icon icon="trash-16" iconSize={16} />}
-        text={intl.get('delete_transaction')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-      />
+      <Can I={VendorCreditAction.Delete} a={AbilitySubject.VendorCredit}>
+        <MenuItem
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          text={intl.get('delete_transaction')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+        />
+      </Can>
     </Menu>
   );
 }
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js
index c5d870222..d849309d6 100644
--- a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js
@@ -3,12 +3,16 @@ import { Tab } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
 
-import { DrawerMainTabs } from 'components';
+import { Can, DrawerMainTabs } from 'components';
 import VendorCreditDetailActionsBar from './VendorCreditDetailActionsBar';
 import VendorCreditDetailPanel from './VendorCreditDetailPanel';
 import RefundVendorCreditTransactionsTable from './RefundVendorCreditTransactions/RefundVendorCreditTransactionsTable';
 import ReconcileVendorCreditTransactionsTable from './ReconcileVendorCreditTransactions/ReconcileVendorCreditTransactionsTable';
 import { VendorCreditGLEntriesTable } from './JournalEntriesTransactions/JournalEntriesTransactionsTable';
+import {
+  VendorCreditAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
 /**
  * Vendor credit view detail.
@@ -40,16 +44,18 @@ function VendorCreditDetailsTabs() {
         id={'journal_entries'}
         panel={<VendorCreditGLEntriesTable />}
       />
-      <Tab
-        title={intl.get('vendor_credit.drawer.label_refund_transactions')}
-        id={'refund_transactions'}
-        panel={<RefundVendorCreditTransactionsTable />}
-      />
-      <Tab
-        title={intl.get('vendor_credit.drawer.label_bills_reconciled')}
-        id={'reconcile_transactions'}
-        panel={<ReconcileVendorCreditTransactionsTable />}
-      />
+      {/* <Can I={VendorCreditAction.View} a={AbilitySubject.VendorCredit}> */}
+        <Tab
+          title={intl.get('vendor_credit.drawer.label_refund_transactions')}
+          id={'refund_transactions'}
+          panel={<RefundVendorCreditTransactionsTable />}
+        />
+        <Tab
+          title={intl.get('vendor_credit.drawer.label_bills_reconciled')}
+          id={'reconcile_transactions'}
+          panel={<ReconcileVendorCreditTransactionsTable />}
+        />
+      {/* </Can> */}
     </DrawerMainTabs>
   );
 }
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailActionsBar.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailActionsBar.js
index fcefb9273..5a7cf5f42 100644
--- a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailActionsBar.js
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailActionsBar.js
@@ -11,7 +11,10 @@ import {
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
 import { VendorCreditMenuItem } from './utils';
-
+import {
+  VendorCreditAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
@@ -59,43 +62,45 @@ function VendorCreditDetailActionsBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="pen-18" />}
-          text={<T id={'vendor_credits.label.edit_vendor_credit'} />}
-          onClick={handleEditVendorCredit}
-        />
-        <NavbarDivider />
-        <If condition={!vendorCredit.is_closed && !vendorCredit.is_draft}>
+        <Can I={VendorCreditAction.Edit} a={AbilitySubject.VendorCredit}>
           <Button
             className={Classes.MINIMAL}
-            icon={<Icon icon="arrow-downward" iconSize={18} />}
-            text={<T id={'refund'} />}
-            onClick={handleRefundVendorCredit}
+            icon={<Icon icon="pen-18" />}
+            text={<T id={'vendor_credits.label.edit_vendor_credit'} />}
+            onClick={handleEditVendorCredit}
           />
           <NavbarDivider />
-        </If>
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
-          text={<T id={'delete'} />}
-          intent={Intent.DANGER}
-          onClick={handleDeleteVendorCredit}
-        />
-        <If
-          condition={
-            !vendorCredit.is_closed &&
-            !vendorCredit.is_draft
-            // vendorCredit.is_published
-          }
-        >
-          <NavbarDivider />
-          <VendorCreditMenuItem
-            payload={{
-              onReconcile: handleReconcileVendorCredit,
-            }}
+        </Can>
+        <Can I={VendorCreditAction.Refund} a={AbilitySubject.VendorCredit}>
+          <If condition={!vendorCredit.is_closed && !vendorCredit.is_draft}>
+            <Button
+              className={Classes.MINIMAL}
+              icon={<Icon icon="arrow-downward" iconSize={18} />}
+              text={<T id={'refund'} />}
+              onClick={handleRefundVendorCredit}
+            />
+            <NavbarDivider />
+          </If>
+        </Can>
+        <Can I={VendorCreditAction.Delete} a={AbilitySubject.VendorCredit}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeleteVendorCredit}
           />
-        </If>
+        </Can>
+        <Can I={VendorCreditAction.Edit} a={AbilitySubject.VendorCredit}>
+          <If condition={!vendorCredit.is_closed && !vendorCredit.is_draft}>
+            <NavbarDivider />
+            <VendorCreditMenuItem
+              payload={{
+                onReconcile: handleReconcileVendorCredit,
+              }}
+            />
+          </If>
+        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );
diff --git a/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteActionsBar.js b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteActionsBar.js
index 135bb5dd5..f762dadbe 100644
--- a/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteActionsBar.js
+++ b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteActionsBar.js
@@ -10,6 +10,7 @@ import {
 } from '@blueprintjs/core';
 import {
   Icon,
+  Can,
   FormattedMessage as T,
   DashboardActionViewsList,
   AdvancedFilterPopover,
@@ -19,7 +20,10 @@ import {
 import DashboardActionsBar from '../../../../components/Dashboard/DashboardActionsBar';
 
 import { useVendorsCreditNoteListContext } from './VendorsCreditNoteListProvider';
-
+import {
+  VendorCreditAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 import withVendorsCreditNotes from './withVendorsCreditNotes';
 import withVendorsCreditNotesActions from './withVendorsCreditNotesActions';
 import withSettings from '../../../Settings/withSettings';
@@ -84,12 +88,14 @@ function VendorsCreditNoteActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'plus'} />}
-          text={<T id={'vendor_credits.label.new_vendor_credit'} />}
-          onClick={handleClickNewVendorCredit}
-        />
+        <Can I={VendorCreditAction.Create} a={AbilitySubject.VendorCredit}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'plus'} />}
+            text={<T id={'vendor_credits.label.new_vendor_credit'} />}
+            onClick={handleClickNewVendorCredit}
+          />
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: vendorCreditFilterRoles,
diff --git a/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteEmptyStatus.js b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteEmptyStatus.js
index da9a2b21e..a86fd6738 100644
--- a/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteEmptyStatus.js
+++ b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteEmptyStatus.js
@@ -2,7 +2,11 @@ import React from 'react';
 import { Button, Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 import { EmptyStatus } from 'components';
-import { FormattedMessage as T } from 'components';
+import { Can, FormattedMessage as T } from 'components';
+import {
+  VendorCreditAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 export default function VendorsCreditNoteEmptyStatus() {
   const history = useHistory();
@@ -16,17 +20,19 @@ export default function VendorsCreditNoteEmptyStatus() {
       }
       action={
         <>
-          <Button
-            intent={Intent.PRIMARY}
-            large={true}
-            onClick={() => history.push('/vendor-credits/new')}
-          >
-            <T id={'vendor_credits.action.new_vendor_credit'} />
-          </Button>
+          <Can I={VendorCreditAction.Create} a={AbilitySubject.VendorCredit}>
+            <Button
+              intent={Intent.PRIMARY}
+              large={true}
+              onClick={() => history.push('/vendor-credits/new')}
+            >
+              <T id={'vendor_credits.action.new_vendor_credit'} />
+            </Button>
 
-          <Button intent={Intent.NONE} large={true}>
-            <T id={'learn_more'} />
-          </Button>
+            <Button intent={Intent.NONE} large={true}>
+              <T id={'learn_more'} />
+            </Button>
+          </Can>
         </>
       }
     />
diff --git a/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js b/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js
index a5e696e0e..c6cb48162 100644
--- a/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js
+++ b/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js
@@ -10,8 +10,13 @@ import {
   Choose,
   If,
   Icon,
+  Can,
 } from 'components';
 import { safeCallback } from 'utils';
+import {
+  VendorCreditAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 /**
  * Actions menu.
@@ -27,39 +32,51 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <MenuDivider />
-      <MenuItem
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('vendor_credits.action.edit_vendor_credit')}
-        onClick={safeCallback(onEdit, original)}
-      />
-      <If condition={!original.is_closed && original.is_published}>
+      <Can I={VendorCreditAction.Edit} a={AbilitySubject.VendorCredit}>
+        <MenuDivider />
         <MenuItem
-          icon={<Icon icon="quick-payment-16" />}
-          text={intl.get('vendor_credits.action.refund_vendor_credit')}
-          onClick={safeCallback(onRefund, original)}
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('vendor_credits.action.edit_vendor_credit')}
+          onClick={safeCallback(onEdit, original)}
         />
-      </If>
-      <If condition={original.is_draft}>
+        <If condition={original.is_draft}>
+          <MenuItem
+            icon={<Icon icon={'check'} iconSize={18} />}
+            text={intl.get('vendor_credits.action.mark_as_open')}
+            onClick={safeCallback(onOpen, original)}
+          />
+        </If>
+      </Can>
+      <Can I={VendorCreditAction.Refund} a={AbilitySubject.VendorCredit}>
+        <If condition={!original.is_closed && original.is_published}>
+          <MenuItem
+            icon={<Icon icon="quick-payment-16" />}
+            text={intl.get('vendor_credits.action.refund_vendor_credit')}
+            onClick={safeCallback(onRefund, original)}
+          />
+        </If>
+      </Can>
+      <Can I={VendorCreditAction.Edit} a={AbilitySubject.VendorCredit}>
+        <If
+          condition={
+            !original.is_draft && !original.is_closed && original.is_published
+          }
+        >
+          <MenuItem
+            // icon={<Icon icon="quick-payment-16" />}
+            text={intl.get('vendor_credits.action.reconcile_with_bills')}
+            onClick={safeCallback(onReconcile, original)}
+          />
+        </If>
+      </Can>
+      <Can I={VendorCreditAction.Delete} a={AbilitySubject.VendorCredit}>
         <MenuItem
-          icon={<Icon icon={'check'} iconSize={18} />}
-          text={intl.get('vendor_credits.action.mark_as_open')}
-          onClick={safeCallback(onOpen, original)}
+          text={intl.get('vendor_credits.action.delete_vendor_credit')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
         />
-      </If>
-      <If condition={!original.is_draft && !original.is_closed && original.is_published}>
-        <MenuItem
-          // icon={<Icon icon="quick-payment-16" />}
-          text={intl.get('vendor_credits.action.reconcile_with_bills')}
-          onClick={safeCallback(onReconcile, original)}
-        />
-      </If>
-      <MenuItem
-        text={intl.get('vendor_credits.action.delete_vendor_credit')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-        icon={<Icon icon="trash-16" iconSize={16} />}
-      />
+      </Can>
     </Menu>
   );
 }
@@ -83,8 +100,8 @@ export function StatusAccessor(creditNote) {
           </Tag>
         </Choose.When>
 
-        <Choose.When condition={creditNote.is_draft} round={true}>
-          <Tag minimal={true}>
+        <Choose.When condition={creditNote.is_draft}>
+          <Tag minimal={true} round={true}>
             <T id={'draft'} />
           </Tag>
         </Choose.When>
diff --git a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesActionsBar.js b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesActionsBar.js
index cb1b864c6..1504cb10f 100644
--- a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesActionsBar.js
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesActionsBar.js
@@ -10,6 +10,7 @@ import {
 import { useHistory } from 'react-router-dom';
 import {
   Icon,
+  Can,
   FormattedMessage as T,
   DashboardActionViewsList,
   AdvancedFilterPopover,
@@ -19,7 +20,10 @@ import {
 import DashboardActionsBar from '../../../../components/Dashboard/DashboardActionsBar';
 
 import { useCreditNoteListContext } from './CreditNotesListProvider';
-
+import {
+  CreditNoteAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 import withCreditNotes from './withCreditNotes';
 import withCreditNotesActions from './withCreditNotesActions';
 import withSettings from '../../../Settings/withSettings';
@@ -78,12 +82,14 @@ function CreditNotesActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'plus'} />}
-          text={<T id={'credit_note.label.new_credit_note'} />}
-          onClick={handleClickNewCreateNote}
-        />
+        <Can I={CreditNoteAction.Create} a={AbilitySubject.CreditNote}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'plus'} />}
+            text={<T id={'credit_note.label.new_credit_note'} />}
+            onClick={handleClickNewCreateNote}
+          />
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: creditNoteFilterRoles,
diff --git a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesEmptyStatus.js b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesEmptyStatus.js
index 6e50c4cdf..a65c1cf2c 100644
--- a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesEmptyStatus.js
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesEmptyStatus.js
@@ -2,7 +2,11 @@ import React from 'react';
 import { Button, Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 import { EmptyStatus } from 'components';
-import { FormattedMessage as T } from 'components';
+import { Can, FormattedMessage as T } from 'components';
+import {
+  CreditNoteAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 export default function CreditNotesEmptyStatus() {
   const history = useHistory();
@@ -16,17 +20,19 @@ export default function CreditNotesEmptyStatus() {
       }
       action={
         <>
-          <Button
-            intent={Intent.PRIMARY}
-            large={true}
-            onClick={() => history.push('/credit-notes/new')}
-          >
-            <T id={'credit_note.label.new_credit_note'} />
-          </Button>
+          <Can I={CreditNoteAction.Create} a={AbilitySubject.CreditNote}>
+            <Button
+              intent={Intent.PRIMARY}
+              large={true}
+              onClick={() => history.push('/credit-notes/new')}
+            >
+              <T id={'credit_note.label.new_credit_note'} />
+            </Button>
 
-          <Button intent={Intent.NONE} large={true}>
-            <T id={'learn_more'} />
-          </Button>
+            <Button intent={Intent.NONE} large={true}>
+              <T id={'learn_more'} />
+            </Button>
+          </Can>
         </>
       }
     />
diff --git a/src/containers/Sales/CreditNotes/CreditNotesLanding/components.js b/src/containers/Sales/CreditNotes/CreditNotesLanding/components.js
index 067f7c590..2e0dca0ff 100644
--- a/src/containers/Sales/CreditNotes/CreditNotesLanding/components.js
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/components.js
@@ -10,8 +10,13 @@ import {
   Choose,
   If,
   Icon,
+  Can,
 } from 'components';
 import { safeCallback } from 'utils';
+import {
+  CreditNoteAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 export function ActionsMenu({
   payload: { onEdit, onDelete, onRefund, onOpen, onReconcile, onViewDetails },
@@ -24,37 +29,48 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <MenuDivider />
-      <MenuItem
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('credit_note.action.edit_credit_note')}
-        onClick={safeCallback(onEdit, original)}
-      />
-      <If condition={original.is_draft}>
+      <Can I={CreditNoteAction.Edit} a={AbilitySubject.CreditNote}>
+        <MenuDivider />
         <MenuItem
-          icon={<Icon icon={'check'} iconSize={18} />}
-          text={intl.get('credit_note.action.make_as_open')}
-          onClick={safeCallback(onOpen, original)}
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('credit_note.action.edit_credit_note')}
+          onClick={safeCallback(onEdit, original)}
         />
-      </If>
-      <If condition={!original.is_closed && original.is_published}>
+        <If condition={original.is_draft}>
+          <MenuItem
+            icon={<Icon icon={'check'} iconSize={18} />}
+            text={intl.get('credit_note.action.make_as_open')}
+            onClick={safeCallback(onOpen, original)}
+          />
+        </If>
+      </Can>
+
+      <Can I={CreditNoteAction.Refund} a={AbilitySubject.CreditNote}>
+        <If condition={!original.is_closed && original.is_published}>
+          <MenuItem
+            icon={<Icon icon="quick-payment-16" />}
+            text={intl.get('credit_note.action.refund_credit_note')}
+            onClick={safeCallback(onRefund, original)}
+          />
+        </If>
+      </Can>
+      <Can I={CreditNoteAction.Edit} a={AbilitySubject.CreditNote}>
+        <If condition={!original.is_closed && original.is_published}>
+          <MenuItem
+            text={intl.get('credit_note.action.reconcile_with_invoices')}
+            icon={<Icon icon="receipt-24" iconSize={16} />}
+            onClick={safeCallback(onReconcile, original)}
+          />
+        </If>
+      </Can>
+      <Can I={CreditNoteAction.Delete} a={AbilitySubject.CreditNote}>
         <MenuItem
-          icon={<Icon icon="quick-payment-16" />}
-          text={intl.get('credit_note.action.refund_credit_note')}
-          onClick={safeCallback(onRefund, original)}
+          text={intl.get('credit_note.action.delete_credit_note')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
         />
-        <MenuItem
-          text={intl.get('credit_note.action.reconcile_with_invoices')}
-          icon={<Icon icon="receipt-24" iconSize={16} />}
-          onClick={safeCallback(onReconcile, original)}
-        />
-      </If>
-      <MenuItem
-        text={intl.get('credit_note.action.delete_credit_note')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-        icon={<Icon icon="trash-16" iconSize={16} />}
-      />
+      </Can>
     </Menu>
   );
 }
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index d311ecfb5..bb10562dc 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1145,7 +1145,7 @@
   "Landed": "Landed",
   "This options allows you to be able to add additional cost eg. freight then allocate cost to the items in your bills.": "This options allows you to be able to add additional cost eg. freight then allocate cost to the items in your bills.",
   "Once your delete this located landed cost, you won't be able to restore it later, Are your sure you want to delete this transaction?": "Once your delete this located landed cost, you won't be able to restore it later, Are your sure you want to delete this transaction?",
-  "journal_entries": "Journal entries",
+  "journal_entries": "Journal Entries",
   "contact": "Contact",
   "invoice_details": "Invoice details",
   "receipt_details": "Receipt details",