diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js
index 968644e2f..12a2a31a4 100644
--- a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js
@@ -3,7 +3,8 @@ import { Tab } from '@blueprintjs/core';
 import styled from 'styled-components';
 import intl from 'react-intl-universal';
 
-import { Can, DrawerMainTabs } from 'components';
+import { useAbilityContext } from 'hooks/utils';
+import { DrawerMainTabs } from 'components';
 import CreditNoteDetailActionsBar from './CreditNoteDetailActionsBar';
 import CreditNoteDetailPanel from './CreditNoteDetailPanel';
 import RefundCreditNoteTransactionsTable from './RefundCreditNoteTransactions/RefundCreditNoteTransactionsTable';
@@ -32,6 +33,8 @@ export default function CreditNoteDetail() {
  * @returns {React.JSX}
  */
 function CreditNoteDetailsTabs() {
+  const ability = useAbilityContext();
+
   return (
     <DrawerMainTabs>
       <Tab
@@ -44,18 +47,21 @@ 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'}
-        panel={<RefundCreditNoteTransactionsTable />}
-      />
-      <Tab
-        title={intl.get('credit_note.drawer.label_invoices_reconciled')}
-        id={'reconcile_transactions'}
-        panel={<ReconcileCreditNoteTransactionsTable />}
-      />
-      {/* </Can> */}
+
+      {ability.can(CreditNoteAction.View, AbilitySubject.CreditNote) && (
+        <Tab
+          title={intl.get('credit_note.drawer.label_refund_transactions')}
+          id={'refund_transactions'}
+          panel={<RefundCreditNoteTransactionsTable />}
+        />
+      )}
+      {ability.can(CreditNoteAction.View, AbilitySubject.CreditNote) && (
+        <Tab
+          title={intl.get('credit_note.drawer.label_invoices_reconciled')}
+          id={'reconcile_transactions'}
+          panel={<ReconcileCreditNoteTransactionsTable />}
+        />
+      )}
     </DrawerMainTabs>
   );
 }
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js
index 08cf85250..5d7810b34 100644
--- a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js
@@ -56,15 +56,15 @@ function CreditNoteDetailActionsBar({
     openDialog('refund-credit-note', { creditNoteId });
   };
 
-  const handleReconcileCreditNote = () => {
-    openDialog('reconcile-credit-note', { creditNoteId });
-  };
-
   // Handle delete credit note.
   const handleDeleteCreditNote = () => {
     openAlert('credit-note-delete', { creditNoteId });
   };
 
+  const handleReconcileCreditNote = () => {
+    openDialog('reconcile-credit-note', { creditNoteId });
+  };
+
   return (
     <DrawerActionsBar>
       <NavbarGroup>
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js
index d849309d6..43c9644e5 100644
--- a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js
@@ -3,7 +3,8 @@ import { Tab } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
 
-import { Can, DrawerMainTabs } from 'components';
+import { useAbilityContext } from 'hooks/utils';
+import { DrawerMainTabs } from 'components';
 import VendorCreditDetailActionsBar from './VendorCreditDetailActionsBar';
 import VendorCreditDetailPanel from './VendorCreditDetailPanel';
 import RefundVendorCreditTransactionsTable from './RefundVendorCreditTransactions/RefundVendorCreditTransactionsTable';
@@ -32,6 +33,8 @@ export default function VendorCreditDetail() {
  * @returns {React.JSX}
  */
 function VendorCreditDetailsTabs() {
+  const ability = useAbilityContext();
+
   return (
     <DrawerMainTabs renderActiveTabPanelOnly={true}>
       <Tab
@@ -44,18 +47,20 @@ function VendorCreditDetailsTabs() {
         id={'journal_entries'}
         panel={<VendorCreditGLEntriesTable />}
       />
-      {/* <Can I={VendorCreditAction.View} a={AbilitySubject.VendorCredit}> */}
+      {ability.can(VendorCreditAction.View, AbilitySubject.VendorCredit) && (
         <Tab
           title={intl.get('vendor_credit.drawer.label_refund_transactions')}
           id={'refund_transactions'}
           panel={<RefundVendorCreditTransactionsTable />}
         />
+      )}
+      {ability.can(VendorCreditAction.View, AbilitySubject.VendorCredit) && (
         <Tab
           title={intl.get('vendor_credit.drawer.label_bills_reconciled')}
           id={'reconcile_transactions'}
           panel={<ReconcileVendorCreditTransactionsTable />}
         />
-      {/* </Can> */}
+      )}
     </DrawerMainTabs>
   );
 }
diff --git a/src/lang/ar/index.json b/src/lang/ar/index.json
index eb96cac69..20134c86f 100644
--- a/src/lang/ar/index.json
+++ b/src/lang/ar/index.json
@@ -1446,7 +1446,7 @@
   "cash_flow_transaction.balance_in_bigcapital": "الرصيد في Bigcapital",
   "bad_debt.dialog.written_off_amount": "المبلغ المشطوب",
   "bad_debt.dialog.bad_debt": "دين معدوم",
-  "bad_debt.dialog.cancel_bad_debt": "إلغاء الديون المعدومة",
+  "bad_debt.dialog.cancel_bad_debt": "إلغاء الدين المعدوم",
   "bad_debt.dialog.header_note": "يمكن للبائع تحميل مبلغ الفاتورة على حساب مصروفات الديون المعدومة عندما يكون من المؤكد أن الفاتورة لن يتم دفعها.",
   "bad_debt.dialog.success_message": "تم شطب فاتورة البيع المقدمة بنجاح.",
   "bad_debt.cancel_alert.success_message": "تم إلغاء شطب فاتورة البيع المقدمة بنجاح.",