diff --git a/package.json b/package.json
index bd109512b..38afbca86 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,8 @@
     "@blueprintjs/select": "^3.11.2",
     "@blueprintjs/table": "^3.8.3",
     "@blueprintjs/timezone": "^3.6.2",
+    "@casl/ability": "^5.4.3",
+    "@casl/react": "^2.3.0",
     "@reduxjs/toolkit": "^1.2.5",
     "@sentry/react": "^6.13.2",
     "@sentry/tracing": "^6.13.2",
diff --git a/src/common/abilityOption.js b/src/common/abilityOption.js
new file mode 100644
index 000000000..1a5625ca3
--- /dev/null
+++ b/src/common/abilityOption.js
@@ -0,0 +1,161 @@
+export const AbilitySubject = {
+  Item: 'Item',
+  InventoryAdjustment: 'InventoryAdjustment',
+  Estimate: 'SaleEstimate',
+  Invoice: 'SaleInvoice',
+  Receipt: 'SaleReceipt',
+  PaymentReceive: 'PaymentReceive',
+  Bill: 'Bill',
+  PaymentMade: 'PaymentMade',
+  Customer: 'Customer',
+  Vendor: 'Vendor',
+  Account: 'Account',
+  ManualJournal: 'ManualJournal',
+  Expense: 'Expense',
+  Cashflow: 'Cashflow',
+  Report: 'Report',
+  Preferences: 'Preferences',
+  ExchangeRate: 'ExchangeRate',
+  SubscriptionBilling: 'SubscriptionBilling',
+};
+
+export const ItemAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+};
+
+export const InventoryAdjustmentAction = {
+  Create: 'Create',
+  Edit: 'Edit',
+  View: 'View',
+  Delete: 'Delete',
+};
+
+export const SaleEstimateAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+  NotifyBySms: 'NotifyBySms',
+};
+
+export const SaleInvoiceAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+  Writeoff: 'Writeoff',
+  NotifyBySms: 'NotifyBySms',
+};
+
+export const SaleReceiptAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+  NotifyBySms: 'NotifyBySms',
+};
+
+export const PaymentReceiveAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+  NotifyBySms: 'NotifyBySms',
+};
+
+export const BillAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+  NotifyBySms: 'NotifyBySms',
+};
+
+export const PaymentMadeAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+};
+
+export const CustomerAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+};
+
+export const VendorAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+};
+
+export const AccountAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+  TransactionsLocking: 'TransactionsLocking',
+};
+
+export const ManualJournalAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+  TransactionLocking: 'TransactionLocking',
+};
+
+export const ExpenseAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+};
+
+export const CashflowAction = {
+  View: 'View',
+  Create: 'Create',
+  Delete: 'Delete',
+};
+
+export const ReportsAction = {
+  ALL: 'all',
+  READ_BALANCE_SHEET: 'read-balance-sheet',
+  READ_TRIAL_BALANCE_SHEET: 'read-trial-balance-sheet',
+  READ_PROFIT_LOSS: 'read-profit-loss',
+  READ_JOURNAL: 'read-journal',
+  READ_GENERAL_LEDGET: 'read-general-ledger',
+  READ_CASHFLOW: 'read-cashflow',
+  READ_AR_AGING_SUMMARY: 'read-ar-aging-summary',
+  READ_AP_AGING_SUMMARY: 'read-ap-aging-summary',
+  READ_PURCHASES_BY_ITEMS: 'read-purchases-by-items',
+  READ_SALES_BY_ITEMS: 'read-sales-by-items',
+  READ_CUSTOMERS_TRANSACTIONS: 'read-customers-transactions',
+  READ_VENDORS_TRANSACTIONS: 'read-vendors-transactions',
+  READ_CUSTOMERS_SUMMARY_BALANCE: 'read-customers-summary-balance',
+  READ_VENDORS_SUMMARY_BALANCE: 'read-vendors-summary-balance',
+  READ_INVENTORY_VALUATION_SUMMARY: 'read-inventory-valuation-summary',
+  READ_INVENTORY_ITEM_DETAILS: 'read-inventory-item-details',
+  READ_CASHFLOW_ACCOUNT_TRANSACTION: 'read-cashflow-account-transactions',
+};
+
+export const PreferencesAbility = {
+  Mutate: 'Mutate',
+};
+
+export const ExchangeRateAbility = {
+  View: 'view',
+  Create: 'create',
+  Delete: 'delete',
+};
+
+export const SubscriptionBillingAbility = {
+  View: 'view',
+  Payment: 'payment',
+};
diff --git a/src/common/homepageOptions.js b/src/common/homepageOptions.js
index 82972db3a..beb9ab623 100644
--- a/src/common/homepageOptions.js
+++ b/src/common/homepageOptions.js
@@ -1,5 +1,21 @@
 import React from 'react';
 import { FormattedMessage as T } from 'components';
+import {
+  SaleInvoiceAction,
+  SaleEstimateAction,
+  AbilitySubject,
+  SaleReceiptAction,
+  CustomerAction,
+  PaymentReceiveAction,
+  BillAction,
+  VendorAction,
+  PaymentMadeAction,
+  AccountAction,
+  ManualJournalAction,
+  ExpenseAction,
+  ItemAction,
+  ReportsAction,
+} from '../common/abilityOption';
 
 export const accountsReceivable = [
   {
@@ -9,21 +25,29 @@ export const accountsReceivable = [
         title: <T id={'sales_invoices'} />,
         description: <T id={'tracking_sales_invoices_with_your_customers'} />,
         link: '/invoices',
+        subject: AbilitySubject.Invoice,
+        ability: SaleInvoiceAction.View,
       },
       {
         title: <T id={'sales_estimates'} />,
         description: <T id={'manage_your_sales_estimates_to_create_quotes'} />,
         link: '/estimates',
+        subject: AbilitySubject.Estimate,
+        ability: SaleEstimateAction.View,
       },
       {
         title: <T id={'sales_receipts'} />,
         description: <T id={'manage_sales_receipts_for_sales_that_get_paid'} />,
         link: '/receipts',
+        subject: AbilitySubject.Receipt,
+        ability: SaleReceiptAction.View,
       },
       {
         title: <T id={'customers'} />,
         description: <T id={'manage_the_customers_relations_with_customer'} />,
         link: '/customers',
+        subject: AbilitySubject.Customer,
+        ability: CustomerAction.View,
       },
       {
         title: <T id={'customers_payments'} />,
@@ -31,6 +55,8 @@ export const accountsReceivable = [
           <T id={'manage_payment_transactions_from_your_customers'} />
         ),
         link: '/payment-receives',
+        subject: AbilitySubject.PaymentReceive,
+        ability: PaymentReceiveAction.View,
       },
     ],
   },
@@ -46,6 +72,8 @@ export const accountsPayable = [
           <T id={'manage_the_purchase_invoices_with_your_vendors'} />
         ),
         link: '/bills',
+        subject: AbilitySubject.Bill,
+        ability: BillAction.View,
       },
       {
         title: <T id={'vendors'} />,
@@ -53,11 +81,15 @@ export const accountsPayable = [
           <T id={'manage_the_vendors_relations_with_vendor_relations'} />
         ),
         link: '/vendors',
+        subject: AbilitySubject.Vendor,
+        ability: VendorAction.View,
       },
       {
         title: <T id={'vendors_payments'} />,
         description: <T id={'manage_payments_transactions_to_your_vendors'} />,
         link: '/payment-mades',
+        subject: AbilitySubject.PaymentMade,
+        ability: PaymentMadeAction.View,
       },
     ],
   },
@@ -77,21 +109,35 @@ export const financialAccounting = [
           />
         ),
         link: '/accounts',
+        subject: AbilitySubject.Account,
+        ability: AccountAction.View,
       },
       {
-        title: <T id={'manual_journal'}/>,
-        description:<T id={'manage_manual_journal_transactions_on_accounts'}/>,
+        title: <T id={'manual_journal'} />,
+        description: (
+          <T id={'manage_manual_journal_transactions_on_accounts'} />
+        ),
         link: '/manual-journals',
+        subject: AbilitySubject.ManualJournal,
+        ability: ManualJournalAction.View,
       },
       {
-        title: <T id={'expenses'}/>,
-        description:<T id={'track_your_indirect_expenses_under_specific_categories'}/>,
+        title: <T id={'expenses'} />,
+        description: (
+          <T id={'track_your_indirect_expenses_under_specific_categories'} />
+        ),
         link: '/expenses',
+        subject: AbilitySubject.Expense,
+        ability: ExpenseAction.View,
       },
       {
-        title: <T id={'financial_statements'}/>,
-        description:<T id={'show_financial_reports_about_your_organization'}/>,
+        title: <T id={'financial_statements'} />,
+        description: (
+          <T id={'show_financial_reports_about_your_organization'} />
+        ),
         link: '/financial-reports',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.ALL,
       },
     ],
   },
@@ -102,19 +148,27 @@ export const productsServices = [
     sectionTitle: <T id={'products_services_inventory'} />,
     shortcuts: [
       {
-        title: <T id={'products_services'}/>,
-        description:<T id={'manage_your_products_inventory_or_non_inventory'}/>,
+        title: <T id={'products_services'} />,
+        description: (
+          <T id={'manage_your_products_inventory_or_non_inventory'} />
+        ),
         link: '/items',
+        subject: AbilitySubject.Item,
+        ability: ItemAction.View,
       },
       {
-        title: <T id={'products_services_categories'}/>,
-        description:<T id={'group_your_products_and_service'}/>,
+        title: <T id={'products_services_categories'} />,
+        description: <T id={'group_your_products_and_service'} />,
         link: 'items/categories',
       },
       {
-        title: <T id={'inventory_adjustments'}/>,
-        description: <T id={'manage_your_inventory_adjustment_of_inventory_items'}/>,
+        title: <T id={'inventory_adjustments'} />,
+        description: (
+          <T id={'manage_your_inventory_adjustment_of_inventory_items'} />
+        ),
         link: '/inventory-adjustments',
+        subject: AbilitySubject.InventoryAdjustment,
+        ability: SaleInvoiceAction.View,
       },
     ],
   },
diff --git a/src/common/keyboardShortcutsOptions.js b/src/common/keyboardShortcutsOptions.js
index 9a904e09b..cd026dedf 100644
--- a/src/common/keyboardShortcutsOptions.js
+++ b/src/common/keyboardShortcutsOptions.js
@@ -1,110 +1,228 @@
-import React from 'react';
 import intl from 'react-intl-universal';
+import {
+  AbilitySubject,
+  AccountAction,
+  BillAction,
+  CashflowAction,
+  CustomerAction,
+  ExpenseAction,
+  ItemAction,
+  ManualJournalAction,
+  ReportsAction,
+  SaleEstimateAction,
+  SaleInvoiceAction,
+  SaleReceiptAction,
+  VendorAction,
+} from './abilityOption';
 
 export default [
   {
     shortcut_key: 'Shift + I',
     description: intl.get('jump_to_the_invoices'),
+    permission: {
+      ability: SaleInvoiceAction.View,
+      subject: AbilitySubject.Invoice,
+    },
   },
   {
     shortcut_key: 'Shift + E',
     description: intl.get('jump_to_the_estimates'),
+    permission: {
+      ability: SaleEstimateAction.View,
+      subject: AbilitySubject.Estimate,
+    },
   },
   {
     shortcut_key: 'Shift + R',
     description: intl.get('jump_to_the_receipts'),
+    permission: {
+      ability: SaleReceiptAction.View,
+      subject: AbilitySubject.Receipt,
+    },
   },
   {
     shortcut_key: 'Shift + X',
     description: intl.get('jump_to_the_expenses'),
+    permission: {
+      ability: ExpenseAction.View,
+      subject: AbilitySubject.Expense,
+    },
   },
   {
     shortcut_key: 'Shift + C',
     description: intl.get('jump_to_the_customers'),
+    permission: {
+      ability: CustomerAction.View,
+      subject: AbilitySubject.Customer,
+    },
   },
   {
     shortcut_key: 'Shift + V',
     description: intl.get('jump_to_the_vendors'),
+    permission: {
+      ability: VendorAction.View,
+      subject: AbilitySubject.Vendor,
+    },
   },
   {
     shortcut_key: 'Shift + A',
     description: intl.get('jump_to_the_chart_of_accounts'),
+    permission: {
+      ability: AccountAction.View,
+      subject: AbilitySubject.Account,
+    },
   },
   {
     shortcut_key: 'Shift + B',
     description: intl.get('jump_to_the_bills'),
+    permission: {
+      ability: BillAction.View,
+      subject: AbilitySubject.Bill,
+    },
   },
   {
     shortcut_key: 'Shift + M',
     description: intl.get('jump_to_the_manual_journals'),
+    permission: {
+      ability: ManualJournalAction.View,
+      subject: AbilitySubject.ManualJournal,
+    },
   },
   {
     shortcut_key: 'Shift + W',
     description: intl.get('jump_to_the_items'),
+    permission: {
+      ability: ItemAction.View,
+      subject: AbilitySubject.Item,
+    },
   },
   {
     shortcut_key: 'Shift + D',
     description: intl.get('jump_to_the_add_money_in'),
+    permission: {
+      ability: CashflowAction.Create,
+      subject: AbilitySubject.Cashflow,
+    },
   },
   {
     shortcut_key: 'Shift + Q',
     description: intl.get('jump_to_the_add_money_out'),
+    permission: {
+      ability: CashflowAction.Create,
+      subject: AbilitySubject.Cashflow,
+    },
   },
   {
     shortcut_key: 'Shift + 1',
     description: intl.get('jump_to_the_balance_sheet'),
+    permission: {
+      ability: ReportsAction.READ_BALANCE_SHEET,
+      subject: AbilitySubject.Report,
+    },
   },
   {
     shortcut_key: 'Shift + 2',
     description: intl.get('jump_to_the_profit_loss_sheet'),
+    permission: {
+      ability: ReportsAction.READ_PROFIT_LOSS,
+      subject: AbilitySubject.Report,
+    },
   },
   {
     shortcut_key: 'Shift + 3',
     description: intl.get('jump_to_the_journal_sheet'),
+    permission: {
+      ability: ReportsAction.READ_JOURNAL,
+      subject: AbilitySubject.Report,
+    },
   },
   {
     shortcut_key: 'Shift + 4',
     description: intl.get('jump_to_the_general_ledger_sheet'),
+    permission: {
+      ability: ReportsAction.READ_GENERAL_LEDGET,
+      subject: AbilitySubject.Report,
+    },
   },
   {
     shortcut_key: 'Shift + 5',
     description: intl.get('jump_to_the_trial_balance_sheet'),
+    permission: {
+      ability: ReportsAction.READ_TRIAL_BALANCE_SHEET,
+      subject: AbilitySubject.Report,
+    },
   },
   {
     shortcut_key: 'Ctrl + Shift  + I ',
     description: intl.get('create_a_new_invoice'),
+    permission: {
+      ability: SaleInvoiceAction.Create,
+      subject: AbilitySubject.Invoice,
+    },
   },
   {
     shortcut_key: 'Ctrl + Shift  + E ',
     description: intl.get('create_a_new_estimate'),
+    permission: {
+      ability: SaleEstimateAction.Create,
+      subject: AbilitySubject.Estimate,
+    },
   },
   {
     shortcut_key: 'Ctrl + Shift  + R ',
     description: intl.get('create_a_new_receipt'),
+    permission: {
+      ability: SaleReceiptAction.Create,
+      subject: AbilitySubject.Receipt,
+    },
   },
   {
     shortcut_key: 'Ctrl + Shift  + X ',
     description: intl.get('create_a_new_expense'),
+    permission: {
+      ability: ExpenseAction.Create,
+      subject: AbilitySubject.Expense,
+    },
   },
   {
     shortcut_key: 'Ctrl + Shift  + C ',
     description: intl.get('create_a_new_customer'),
+    permission: {
+      ability: CustomerAction.Create,
+      subject: AbilitySubject.Customer,
+    },
   },
   {
     shortcut_key: 'Ctrl + Shift  + V ',
     description: intl.get('create_a_new_vendor'),
+    permission: {
+      ability: VendorAction.Create,
+      subject: AbilitySubject.Vendor,
+    },
   },
   {
     shortcut_key: 'Ctrl + Shift  + B ',
     description: intl.get('create_a_new_bill'),
+    permission: {
+      ability: BillAction.Create,
+      subject: AbilitySubject.Bill,
+    },
   },
   {
     shortcut_key: 'Ctrl + Shift  + M ',
     description: intl.get('create_a_new_journal'),
+    permission: {
+      ability: ManualJournalAction.Create,
+      subject: AbilitySubject.ManualJournal,
+    },
   },
   {
     shortcut_key: 'Ctrl + Shift  + W ',
     description: intl.get('create_a_new_item'),
+    permission: {
+      ability: ItemAction.Create,
+      subject: AbilitySubject.Item,
+    },
   },
   {
     shortcut_key: 'Ctrl + / ',
diff --git a/src/common/quickNewOptions.js b/src/common/quickNewOptions.js
index 74b9fece8..ba4f9604b 100644
--- a/src/common/quickNewOptions.js
+++ b/src/common/quickNewOptions.js
@@ -1,10 +1,71 @@
 import intl from 'react-intl-universal';
+import {
+  AbilitySubject,
+  SaleInvoiceAction,
+  CustomerAction,
+  VendorAction,
+  ManualJournalAction,
+  ExpenseAction,
+} from '../common/abilityOption';
+import { useAbilitiesFilter } from '../hooks';
 
 export const getQuickNewActions = () => [
-  { path: 'invoices/new', name: intl.get('sale_invoice') },
-  { path: 'bills/new', name: intl.get('purchase_invoice') },
-  { path: 'make-journal-entry', name: intl.get('manual_journal') },
-  { path: 'expenses/new', name: intl.get('expense') },
-  { path: 'customers/new', name: intl.get('customer') },
-  { path: 'vendors/new', name: intl.get('vendor') },
+  {
+    path: 'invoices/new',
+    name: intl.get('sale_invoice'),
+    permission: {
+      subject: AbilitySubject.Invoice,
+      ability: SaleInvoiceAction.Create,
+    },
+  },
+  {
+    path: 'bills/new',
+    name: intl.get('purchase_invoice'),
+    permission: {
+      subject: AbilitySubject.Invoice,
+      ability: SaleInvoiceAction.Create,
+    },
+  },
+  {
+    path: 'make-journal-entry',
+    name: intl.get('manual_journal'),
+    permission: {
+      subject: AbilitySubject.ManualJournal,
+      ability: ManualJournalAction.Create,
+    },
+  },
+  {
+    path: 'expenses/new',
+    name: intl.get('expense'),
+    permission: {
+      subject: AbilitySubject.Expense,
+      ability: ExpenseAction.Create,
+    },
+  },
+  {
+    path: 'customers/new',
+    name: intl.get('customer'),
+    permission: {
+      subject: AbilitySubject.Customer,
+      ability: CustomerAction.Create,
+    },
+  },
+  {
+    path: 'vendors/new',
+    name: intl.get('vendor'),
+    permission: {
+      subject: AbilitySubject.Vendor,
+      ability: VendorAction.Vendor,
+    },
+  },
 ];
+
+/**
+ * Retrieve the dashboard quick new menu items.
+ */
+export const useGetQuickNewMenu = () => {
+  const quickNewMenu = getQuickNewActions();
+  const abilitiesFilter = useAbilitiesFilter();
+
+  return abilitiesFilter(quickNewMenu);
+};
diff --git a/src/components/Abilities.js b/src/components/Abilities.js
deleted file mode 100644
index 152ea01b0..000000000
--- a/src/components/Abilities.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { AbilityBuilder, defineAbility } from '@casl/ability';
-import { createContextualCan } from '@casl/react';
-import { createContext } from 'react';
-
-export const AbilityContext = createContext();
-export const Can = createContextualCan(AbilityContext.Consumer);
-
-export const ability = defineAbility((can, cannot) => {
-  cannot('Item', 'create');
-});
diff --git a/src/components/Can.js b/src/components/Can.js
deleted file mode 100644
index 9ba7fe434..000000000
--- a/src/components/Can.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import { createCanBoundTo } from '@casl/react';
-import ability from '../components/Config/ability';
-
-export default createCanBoundTo(ability);
\ No newline at end of file
diff --git a/src/components/Config/ability.js b/src/components/Config/ability.js
deleted file mode 100644
index 72342959f..000000000
--- a/src/components/Config/ability.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { AbilityBuilder } from '@casl/ability';
-// import { AbilitySubject, ItemAbility } from '../../common/abilityOption';
-
-export function defineAbilitiesFor(role) {
-  const { rules, can } = new AbilityBuilder();
-
-  can('create', 'Item');
-
-  return new Ability(rules);
-}
diff --git a/src/components/Dashboard/AuthenticatedUser.js b/src/components/Dashboard/AuthenticatedUser.js
deleted file mode 100644
index d65d58685..000000000
--- a/src/components/Dashboard/AuthenticatedUser.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-import { useUser } from 'hooks/query';
-import withAuthentication from '../../containers/Authentication/withAuthentication';
-
-const AuthenticatedUserContext = React.createContext();
-
-function AuthenticatedUserComponent({ authenticatedUserId, children }) {
-  const { data: user, ...restProps } = useUser(authenticatedUserId);
-
-  return (
-    <AuthenticatedUserContext.Provider
-      value={{
-        user,
-        ...restProps,
-      }}
-      children={children}
-    />
-  );
-}
-
-export const AuthenticatedUser = withAuthentication(
-  ({ authenticatedUserId }) => ({
-    authenticatedUserId,
-  }),
-)(AuthenticatedUserComponent);
-
-export const useAuthenticatedUser = () =>
-  React.useContext(AuthenticatedUserContext);
diff --git a/src/components/Dashboard/DashboardAbilityProvider.js b/src/components/Dashboard/DashboardAbilityProvider.js
new file mode 100644
index 000000000..37de0ced2
--- /dev/null
+++ b/src/components/Dashboard/DashboardAbilityProvider.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Ability } from '@casl/ability';
+import { createContextualCan } from '@casl/react';
+import { useDashboardMeta } from '../../hooks/query';
+
+export const AbilityContext = React.createContext();
+export const Can = createContextualCan(AbilityContext.Consumer);
+
+/**
+ * Dashboard ability provider.
+ */
+export function DashboardAbilityProvider({ children }) {
+  const {
+    data: { abilities },
+  } = useDashboardMeta();
+
+  // Ability instance.
+  const ability = new Ability(abilities);
+
+  return (
+    <AbilityContext.Provider value={ability}>
+      {children}
+    </AbilityContext.Provider>
+  );
+}
diff --git a/src/components/Dashboard/DashboardBoot.js b/src/components/Dashboard/DashboardBoot.js
index 81eadb658..6e3d967fb 100644
--- a/src/components/Dashboard/DashboardBoot.js
+++ b/src/components/Dashboard/DashboardBoot.js
@@ -1,18 +1,53 @@
 import React from 'react';
-import * as R from 'ramda';
-
-import { useUser, useCurrentOrganization } from '../../hooks/query';
+import {
+  useAuthenticatedAccount,
+  useCurrentOrganization,
+  useDashboardMeta,
+} from '../../hooks/query';
 import { useSplashLoading } from '../../hooks/state';
 import { useWatch, useWatchImmediate, useWhen } from '../../hooks';
-
-import withAuthentication from '../../containers/Authentication/withAuthentication';
-
 import { setCookie, getCookie } from '../../utils';
 
 /**
- * Dashboard async booting.
+ * Dashboard meta async booting.
  */
-function DashboardBootJSX({ authenticatedUserId }) {
+export function useDashboardMetaBoot() {
+  const {
+    data: dashboardMeta,
+    isLoading: isDashboardMetaLoading,
+    isSuccess: isDashboardMetaSuccess,
+  } = useDashboardMeta({
+    keepPreviousData: true,
+  });
+  const [startLoading, stopLoading] = useSplashLoading();
+
+  useWatchImmediate((value) => {
+    value && startLoading();
+  }, isDashboardMetaLoading);
+
+  useWatchImmediate(() => {
+    isDashboardMetaSuccess && stopLoading();
+  }, isDashboardMetaSuccess);
+
+  return {
+    isLoading: isDashboardMetaLoading,
+  };
+}
+
+/**
+ * Dashboard async booting.
+ * @returns {{ isLoading: boolean }}
+ */
+export function useDashboardBoot() {
+  const { isLoading } = useDashboardMetaBoot();
+
+  return { isLoading };
+}
+
+/**
+ * Application async booting.
+ */
+export function useApplicationBoot() {
   // Fetches the current user's organization.
   const {
     isSuccess: isCurrentOrganizationSuccess,
@@ -22,7 +57,7 @@ function DashboardBootJSX({ authenticatedUserId }) {
 
   // Authenticated user.
   const { isSuccess: isAuthUserSuccess, isLoading: isAuthUserLoading } =
-    useUser(authenticatedUserId);
+    useAuthenticatedAccount();
 
   // Initial locale cookie value.
   const localeCookie = getCookie('locale');
@@ -86,11 +121,8 @@ function DashboardBootJSX({ authenticatedUserId }) {
       isBooted.current = true;
     },
   );
-  return null;
-}
 
-export const DashboardBoot = R.compose(
-  withAuthentication(({ authenticatedUserId }) => ({
-    authenticatedUserId,
-  })),
-)(DashboardBootJSX);
+  return {
+    isLoading: isOrgLoading || isAuthUserLoading,
+  };
+}
diff --git a/src/components/Dashboard/DashboardProvider.js b/src/components/Dashboard/DashboardProvider.js
index 5a5fce966..68c8e5654 100644
--- a/src/components/Dashboard/DashboardProvider.js
+++ b/src/components/Dashboard/DashboardProvider.js
@@ -1,8 +1,16 @@
 import React from 'react';
+import { DashboardAbilityProvider } from '../../components';
+import { useDashboardBoot } from './DashboardBoot';
 
 /**
  * Dashboard provider.
  */
 export default function DashboardProvider({ children }) {
-  return children;
+  const { isLoading } = useDashboardBoot();
+
+  // Avoid display any dashboard component before complete booting.
+  if (isLoading) {
+    return null;
+  }
+  return <DashboardAbilityProvider>{children}</DashboardAbilityProvider>;
 }
diff --git a/src/components/Dashboard/DashboardTopbar.js b/src/components/Dashboard/DashboardTopbar.js
index 075d2fe01..141dda575 100644
--- a/src/components/Dashboard/DashboardTopbar.js
+++ b/src/components/Dashboard/DashboardTopbar.js
@@ -23,6 +23,7 @@ import withDashboard from 'containers/Dashboard/withDashboard';
 import QuickNewDropdown from 'containers/QuickNewDropdown/QuickNewDropdown';
 import { compose } from 'utils';
 import withSubscriptions from '../../containers/Subscriptions/withSubscriptions';
+import { useGetUniversalSearchTypeOptions } from '../../containers/UniversalSearch/utils';
 
 function DashboardTopbarSubscriptionMessage() {
   return (
@@ -142,11 +143,8 @@ function DashboardTopbar({
         <Navbar class="dashboard__topbar-navbar">
           <NavbarGroup>
             <If condition={isSubscriptionActive}>
-              <Button
+              <DashboardQuickSearchButton
                 onClick={() => openGlobalSearch(true)}
-                className={Classes.MINIMAL}
-                icon={<Icon icon={'search-24'} iconSize={20} />}
-                text={<T id={'quick_find'} />}
               />
               <QuickNewDropdown />
 
@@ -195,3 +193,23 @@ export default compose(
     'main',
   ),
 )(DashboardTopbar);
+
+/**
+ * Dashboard quick search button.
+ */
+function DashboardQuickSearchButton({ ...rest }) {
+  const searchTypeOptions = useGetUniversalSearchTypeOptions();
+
+  // Can't continue if there is no any search type option.
+  if (searchTypeOptions.length <= 0) {
+    return null;
+  }
+  return (
+    <Button
+      className={Classes.MINIMAL}
+      icon={<Icon icon={'search-24'} iconSize={20} />}
+      text={<T id={'quick_find'} />}
+      {...rest}
+    />
+  );
+}
diff --git a/src/components/Dashboard/PrivatePagesProvider.js b/src/components/Dashboard/PrivatePagesProvider.js
index 1f7098817..2fb0eef6a 100644
--- a/src/components/Dashboard/PrivatePagesProvider.js
+++ b/src/components/Dashboard/PrivatePagesProvider.js
@@ -1,31 +1,15 @@
 import React from 'react';
-import * as R from 'ramda';
 
-import { AuthenticatedUser } from './AuthenticatedUser';
-import { DashboardBoot } from '../../components';
-
-import withDashboard from '../../containers/Dashboard/withDashboard';
+import { useApplicationBoot } from '../../components';
 
 /**
  * Private pages provider.
  */
-function PrivatePagesProviderComponent({
-  splashScreenCompleted,
-
+export function PrivatePagesProvider({
   // #ownProps
   children,
 }) {
-  return (
-    <AuthenticatedUser>
-      <DashboardBoot />
+  const { isLoading } = useApplicationBoot();
 
-      {splashScreenCompleted ? children : null}
-    </AuthenticatedUser>
-  );
+  return <React.Fragment>{!isLoading ? children : null}</React.Fragment>;
 }
-
-export const PrivatePagesProvider = R.compose(
-  withDashboard(({ splashScreenCompleted }) => ({
-    splashScreenCompleted,
-  })),
-)(PrivatePagesProviderComponent);
diff --git a/src/components/Dashboard/TopbarUser.js b/src/components/Dashboard/TopbarUser.js
index 80c0f0adb..4e97ce696 100644
--- a/src/components/Dashboard/TopbarUser.js
+++ b/src/components/Dashboard/TopbarUser.js
@@ -14,10 +14,14 @@ import { firstLettersArgs } from 'utils';
 import { useAuthActions } from 'hooks/state';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
-import { compose } from 'utils';
 import withSubscriptions from '../../containers/Subscriptions/withSubscriptions';
-import { useAuthenticatedUser } from './AuthenticatedUser';
 
+import { useAuthenticatedAccount } from 'hooks/query'
+import { compose } from 'utils';
+
+/**
+ * Dashboard topbar user.
+ */
 function DashboardTopbarUser({
   openDialog,
 
@@ -28,7 +32,7 @@ function DashboardTopbarUser({
   const { setLogout } = useAuthActions();
 
   // Retrieve authenticated user information.
-  const { user } = useAuthenticatedUser();
+  const { data: user } = useAuthenticatedAccount();
 
   const onClickLogout = () => {
     setLogout();
diff --git a/src/components/Dashboard/index.js b/src/components/Dashboard/index.js
index fb97e3182..6da46b013 100644
--- a/src/components/Dashboard/index.js
+++ b/src/components/Dashboard/index.js
@@ -1,3 +1,4 @@
 export * from './SplashScreen';
 export * from './DashboardBoot';
 export * from './DashboardThemeProvider';
+export * from './DashboardAbilityProvider';
\ No newline at end of file
diff --git a/src/components/Sidebar/Sidebar.js b/src/components/Sidebar/Sidebar.js
index 8d6688f7c..676425b18 100644
--- a/src/components/Sidebar/Sidebar.js
+++ b/src/components/Sidebar/Sidebar.js
@@ -2,16 +2,19 @@ import React from 'react';
 import SidebarContainer from 'components/Sidebar/SidebarContainer';
 import SidebarHead from 'components/Sidebar/SidebarHead';
 import SidebarMenu from 'components/Sidebar/SidebarMenu';
+import { useGetSidebarMenu } from './utils';
 
 import 'style/containers/Dashboard/Sidebar.scss';
 
 export default function Sidebar({ dashboardContentRef }) {
+  const menu = useGetSidebarMenu();
+
   return (
     <SidebarContainer>
       <SidebarHead />
 
       <div className="sidebar__menu">
-        <SidebarMenu />
+        <SidebarMenu menu={menu} />
       </div>
 
       <div class="sidebar__version">0.0.1-beta version.</div>
diff --git a/src/components/Sidebar/SidebarHead.js b/src/components/Sidebar/SidebarHead.js
index bc5c11c22..25f6d390f 100644
--- a/src/components/Sidebar/SidebarHead.js
+++ b/src/components/Sidebar/SidebarHead.js
@@ -3,7 +3,7 @@ import { Button, Popover, Menu, Position } from '@blueprintjs/core';
 import Icon from 'components/Icon';
 import { compose, firstLettersArgs } from 'utils';
 import withCurrentOrganization from '../../containers/Organization/withCurrentOrganization';
-import { useAuthenticatedUser } from '../Dashboard/AuthenticatedUser';
+import { useAuthenticatedAccount } from '../../hooks/query';
 
 // Popover modifiers.
 const POPOVER_MODIFIERS = {
@@ -18,7 +18,7 @@ function SidebarHead({
   organization,
 }) {
   // Retrieve authenticated user information.
-  const { user } = useAuthenticatedUser();
+  const { data: user } = useAuthenticatedAccount();
 
   return (
     <div className="sidebar__head">
diff --git a/src/components/Sidebar/SidebarMenu.js b/src/components/Sidebar/SidebarMenu.js
index 56c667806..5a8d2bd82 100644
--- a/src/components/Sidebar/SidebarMenu.js
+++ b/src/components/Sidebar/SidebarMenu.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Menu, MenuDivider } from '@blueprintjs/core';
 import { useHistory, useLocation } from 'react-router-dom';
-import sidebarMenuList from 'config/sidebarMenu';
+
 import { Choose } from 'components';
 import Icon from 'components/Icon';
 import MenuItem from 'components/MenuItem';
@@ -24,7 +24,7 @@ function SidebarMenuItemSpace({ space }) {
   return <div class="bp3-menu-spacer" style={{ height: `${space}px` }} />;
 }
 
-function SidebarMenu({ isSubscriptionActive }) {
+function SidebarMenu({ menu, isSubscriptionActive }) {
   const history = useHistory();
   const location = useLocation();
 
@@ -93,7 +93,7 @@ function SidebarMenu({ isSubscriptionActive }) {
     });
   };
 
-  const filterItems = sidebarMenuList.filter(
+  const filterItems = menu.filter(
     (item) => isSubscriptionActive || item.enableBilling,
   );
   const items = menuItemsMapper(filterItems);
diff --git a/src/components/Sidebar/utils.js b/src/components/Sidebar/utils.js
new file mode 100644
index 000000000..fcf056fac
--- /dev/null
+++ b/src/components/Sidebar/utils.js
@@ -0,0 +1,48 @@
+import sidebarMenuList from 'config/sidebarMenu';
+import { isArray, isEmpty } from 'lodash';
+import { useAbilityContext } from 'hooks/utils';
+
+export function useGetSidebarMenu() {
+  const ability = useAbilityContext();
+
+  return sidebarMenuList
+    .map((item) => {
+      const children = isArray(item.children)
+        ? item.children.filter((childItem) => {
+            return isArray(childItem.permission)
+              ? childItem.permission.some((perm) =>
+                  ability.can(perm.ability, perm.subject),
+                )
+              : childItem?.permission?.ability && childItem?.permission?.subject
+              ? ability.can(
+                  childItem.permission.ability,
+                  childItem.permission.subject,
+                )
+              : true;
+          })
+        : [];
+
+      return {
+        ...item,
+        ...(isArray(item.children)
+          ? {
+              children,
+            }
+          : {}),
+      };
+    })
+    .filter((item) => {
+      return isArray(item.permission)
+        ? item.permission.some((per) =>
+            ability.can(per.ability, per.subject),
+          )
+        : item?.permission?.ability && item?.permission?.subject
+        ? ability.can(item.permission.ability, item.permission.subject)
+        : true;
+    })
+    .filter((item) =>
+      isEmpty(item.children) && !item.href && !item.label && !item.divider
+        ? false
+        : true,
+    );
+}
diff --git a/src/config/financialReportsMenu.js b/src/config/financialReportsMenu.js
index 4c3226a4f..83e6ffd25 100644
--- a/src/config/financialReportsMenu.js
+++ b/src/config/financialReportsMenu.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { FormattedMessage as T } from 'components';
+import { ReportsAction, AbilitySubject } from '../common/abilityOption';
 
 export const financialReportMenus = [
   {
@@ -11,6 +12,8 @@ export const financialReportMenus = [
           <T id={'reports_a_company_s_assets_liabilities_and_shareholders'} />
         ),
         link: '/financial-reports/balance-sheet',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_BALANCE_SHEET,
       },
       {
         title: <T id={'trial_balance_sheet'} />,
@@ -18,11 +21,15 @@ export const financialReportMenus = [
           <T id={'summarizes_the_credit_and_debit_balance_of_each_account'} />
         ),
         link: '/financial-reports/trial-balance-sheet',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_TRIAL_BALANCE_SHEET,
       },
       {
         title: <T id={'profit_loss_report'} />,
         desc: <T id={'reports_the_revenues_costs_and_expenses'} />,
         link: '/financial-reports/profit-loss-sheet',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_PROFIT_LOSS,
       },
       {
         title: <T id={'cash_flow_statement'} />,
@@ -30,16 +37,22 @@ export const financialReportMenus = [
           <T id={'reports_inflow_and_outflow_of_cash_and_cash_equivalents'} />
         ),
         link: '/financial-reports/cash-flow',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_CASHFLOW,
       },
       {
         title: <T id={'journal_report'} />,
         desc: <T id={'the_debit_and_credit_entries_of_system_transactions'} />,
         link: '/financial-reports/journal-sheet',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_JOURNAL,
       },
       {
         title: <T id={'general_ledger_report'} />,
         desc: <T id={'reports_every_transaction_going_in_and_out_of_your'} />,
         link: '/financial-reports/general-ledger',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_GENERAL_LEDGET,
       },
       {
         title: <T id={'receivable_aging_summary'} />,
@@ -47,11 +60,15 @@ export const financialReportMenus = [
           <T id={'summarize_total_unpaid_balances_of_customers_invoices'} />
         ),
         link: '/financial-reports/receivable-aging-summary',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_AR_AGING_SUMMARY,
       },
       {
         title: <T id={'payable_aging_summary'} />,
         desc: <T id={'summarize_total_unpaid_balances_of_vendors_purchase'} />,
         link: '/financial-reports/payable-aging-summary',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_AP_AGING_SUMMARY,
       },
     ],
   },
@@ -71,6 +88,8 @@ export const SalesAndPurchasesReportMenus = [
           />
         ),
         link: '/financial-reports/purchases-by-items',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_PURCHASES_BY_ITEMS,
       },
       {
         title: <T id={'sales_by_items'} />,
@@ -82,6 +101,8 @@ export const SalesAndPurchasesReportMenus = [
           />
         ),
         link: '/financial-reports/sales-by-items',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_SALES_BY_ITEMS,
       },
       {
         title: <T id={'inventory_valuation'} />,
@@ -93,6 +114,8 @@ export const SalesAndPurchasesReportMenus = [
           />
         ),
         link: '/financial-reports/inventory-valuation',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_INVENTORY_VALUATION_SUMMARY,
       },
       {
         title: <T id={'customers_balance_summary'} />,
@@ -104,6 +127,8 @@ export const SalesAndPurchasesReportMenus = [
           />
         ),
         link: '/financial-reports/customers-balance-summary',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_CUSTOMERS_SUMMARY_BALANCE,
       },
       {
         title: <T id={'vendors_balance_summary'} />,
@@ -111,6 +136,8 @@ export const SalesAndPurchasesReportMenus = [
           <T id={'summerize_the_total_amount_your_business_owes_each_vendor'} />
         ),
         link: '/financial-reports/vendors-balance-summary',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_VENDORS_SUMMARY_BALANCE,
       },
       {
         title: <T id={'customers_transactions'} />,
@@ -120,6 +147,8 @@ export const SalesAndPurchasesReportMenus = [
           />
         ),
         link: '/financial-reports/transactions-by-customers',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_CUSTOMERS_TRANSACTIONS,
       },
       {
         title: <T id={'vendors_transactions'} />,
@@ -131,6 +160,8 @@ export const SalesAndPurchasesReportMenus = [
           />
         ),
         link: '/financial-reports/transactions-by-vendors',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_VENDORS_TRANSACTIONS,
       },
       {
         title: <T id={'inventory_item_details'} />,
@@ -138,6 +169,8 @@ export const SalesAndPurchasesReportMenus = [
           <T id={'reports_every_transaction_going_in_and_out_of_your_items'} />
         ),
         link: '/financial-reports/inventory-item-details',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_INVENTORY_ITEM_DETAILS,
       },
     ],
   },
diff --git a/src/config/sidebarMenu.js b/src/config/sidebarMenu.js
index bb02d9100..a847f8e52 100644
--- a/src/config/sidebarMenu.js
+++ b/src/config/sidebarMenu.js
@@ -1,5 +1,26 @@
 import React from 'react';
 import { FormattedMessage as T } from 'components';
+import {
+  ReportsAction,
+  AbilitySubject,
+  ItemAction,
+  InventoryAdjustmentAction,
+  SaleEstimateAction,
+  SaleInvoiceAction,
+  SaleReceiptAction,
+  PaymentReceiveAction,
+  BillAction,
+  PaymentMadeAction,
+  CustomerAction,
+  VendorAction,
+  AccountAction,
+  ManualJournalAction,
+  ExpenseAction,
+  CashflowAction,
+  PreferencesAbility,
+  ExchangeRateAbility,
+  SubscriptionBillingAbility,
+} from '../common/abilityOption';
 
 export default [
   {
@@ -11,6 +32,32 @@ export default [
   {
     text: <T id={'sales_inventory'} />,
     label: true,
+    permission: [
+      {
+        subject: AbilitySubject.Item,
+        ability: ItemAction.View,
+      },
+      {
+        subject: AbilitySubject.InventoryAdjustment,
+        ability: InventoryAdjustmentAction.View,
+      },
+      {
+        subject: AbilitySubject.Estimate,
+        ability: SaleEstimateAction.View,
+      },
+      {
+        subject: AbilitySubject.Invoice,
+        ability: SaleInvoiceAction.View,
+      },
+      {
+        subject: AbilitySubject.Receipt,
+        ability: SaleReceiptAction.View,
+      },
+      {
+        subject: AbilitySubject.PaymentReceive,
+        ability: PaymentReceiveAction.View,
+      },
+    ],
   },
   {
     text: <T id={'items'} />,
@@ -18,37 +65,70 @@ export default [
       {
         text: <T id={'items'} />,
         href: '/items',
+        permission: {
+          subject: AbilitySubject.Item,
+          ability: ItemAction.View,
+        },
       },
       {
         text: <T id={'inventory_adjustments'} />,
         href: '/inventory-adjustments',
+        permission: {
+          subject: AbilitySubject.InventoryAdjustment,
+          ability: InventoryAdjustmentAction.View,
+        },
       },
       {
         text: <T id={'category_list'} />,
         href: '/items/categories',
+        permission: {
+          subject: AbilitySubject.Item,
+          ability: ItemAction.View,
+        },
       },
       {
         text: <T id={'New tasks'} />,
         label: true,
+        permission: [
+          {
+            subject: AbilitySubject.Item,
+            ability: ItemAction.Create,
+          },
+        ],
       },
       {
         divider: true,
+        permission: [
+          {
+            subject: AbilitySubject.Item,
+            ability: ItemAction.Create,
+          },
+        ],
       },
       {
         text: <T id={'New inventory item'} />,
         href: '/items/new',
+        permission: {
+          subject: AbilitySubject.Item,
+          ability: ItemAction.Create,
+        },
       },
       {
         text: <T id={'New service'} />,
         href: '/items/new',
+        permission: {
+          subject: AbilitySubject.Item,
+          ability: ItemAction.Create,
+        },
       },
       {
         text: <T id={'New item category'} />,
         href: '/items/categories/new',
+        permission: {
+          subject: AbilitySubject.Item,
+          ability: ItemAction.Create,
+        },
       },
-      // {
-      //   text: <T id={'New inventory adjustment'} />,
-      // },
     ],
   },
   {
@@ -57,43 +137,109 @@ export default [
       {
         text: <T id={'estimates'} />,
         href: '/estimates',
-        newTabHref: '/estimates/new',
+        permission: {
+          subject: AbilitySubject.Estimate,
+          ability: SaleEstimateAction.View,
+        },
       },
       {
         text: <T id={'invoices'} />,
         href: '/invoices',
-        newTabHref: '/invoices/new',
+        permission: {
+          subject: AbilitySubject.Invoice,
+          ability: SaleInvoiceAction.View,
+        },
       },
       {
         text: <T id={'receipts'} />,
         href: '/receipts',
+        permission: {
+          subject: AbilitySubject.Receipt,
+          ability: SaleReceiptAction.View,
+        },
       },
       {
         text: <T id={'payment_receives'} />,
         href: '/payment-receives',
+        permission: {
+          subject: AbilitySubject.PaymentReceive,
+          ability: PaymentReceiveAction.View,
+        },
       },
       {
         text: <T id={'New tasks'} />,
         label: true,
+        permission: [
+          {
+            subject: AbilitySubject.Estimate,
+            ability: SaleEstimateAction.Create,
+          },
+          {
+            subject: AbilitySubject.Invoice,
+            ability: SaleInvoiceAction.Create,
+          },
+          {
+            subject: AbilitySubject.Receipt,
+            ability: SaleReceiptAction.Create,
+          },
+          {
+            subject: AbilitySubject.PaymentReceive,
+            ability: PaymentReceiveAction.Create,
+          },
+        ],
       },
       {
         divider: true,
+        permission: [
+          {
+            subject: AbilitySubject.Estimate,
+            ability: SaleEstimateAction.Create,
+          },
+          {
+            subject: AbilitySubject.Invoice,
+            ability: SaleInvoiceAction.Create,
+          },
+          {
+            subject: AbilitySubject.Receipt,
+            ability: SaleReceiptAction.Create,
+          },
+          {
+            subject: AbilitySubject.PaymentReceive,
+            ability: PaymentReceiveAction.Create,
+          },
+        ],
       },
       {
         text: <T id={'new_estimate'} />,
         href: '/estimates/new',
+        permission: {
+          subject: AbilitySubject.Estimate,
+          ability: SaleEstimateAction.Create,
+        },
       },
       {
         text: <T id={'new_invoice'} />,
         href: '/invoices/new',
+        permission: {
+          subject: AbilitySubject.Invoice,
+          ability: SaleInvoiceAction.Create,
+        },
       },
       {
         text: <T id={'new_receipt'} />,
         href: '/receipts/new',
+        permission: {
+          subject: AbilitySubject.Receipt,
+          ability: SaleReceiptAction.Create,
+        },
       },
       {
         text: <T id={'new_payment_receive'} />,
         href: '/payment-receives/new',
+        permission: {
+          subject: AbilitySubject.PaymentReceive,
+          ability: PaymentReceiveAction.Create,
+        },
       },
     ],
   },
@@ -103,27 +249,62 @@ export default [
       {
         text: <T id={'bills'} />,
         href: '/bills',
-        newTabHref: '/bills/new',
+        permission: {
+          subject: AbilitySubject.Bill,
+          ability: BillAction.View,
+        },
       },
       {
         text: <T id={'payment_mades'} />,
         href: '/payment-mades',
         newTabHref: '/payment-mades/new',
+        permission: {
+          subject: AbilitySubject.PaymentMade,
+          ability: PaymentMadeAction.View,
+        },
       },
       {
         text: <T id={'New tasks'} />,
         label: true,
+        permission: [
+          {
+            subject: AbilitySubject.Bill,
+            ability: BillAction.Create,
+          },
+          {
+            subject: AbilitySubject.PaymentMade,
+            ability: PaymentMadeAction.Create,
+          },
+        ],
       },
       {
         divider: true,
+        permission: [
+          {
+            subject: AbilitySubject.Bill,
+            ability: BillAction.Create,
+          },
+          {
+            subject: AbilitySubject.PaymentMade,
+            ability: PaymentMadeAction.Create,
+          },
+        ],
       },
       {
         text: <T id={'New purchase invoice'} />,
         href: '/bills/new',
+        permission: {
+          subject: AbilitySubject.Bill,
+          ability: BillAction.Create,
+        },
       },
       {
         text: <T id={'new_payment_made'} />,
         href: '/payment-mades/new',
+        permission: {
+          subject: AbilitySubject.PaymentMade,
+          ability: PaymentMadeAction.Create,
+        },
       },
     ],
   },
@@ -133,33 +314,77 @@ export default [
       {
         text: <T id={'customers'} />,
         href: '/customers',
-        newTabHref: '/customers/new',
+        permission: {
+          subject: AbilitySubject.Customer,
+          ability: CustomerAction.View,
+        },
       },
       {
         text: <T id={'vendors'} />,
         href: '/vendors',
-        newTabHref: '/vendors/new',
+        permission: {
+          subject: AbilitySubject.Vendor,
+          ability: VendorAction.Create,
+        },
       },
       {
         text: <T id={'New tasks'} />,
         label: true,
+        permission: [
+          {
+            subject: AbilitySubject.Customer,
+            ability: CustomerAction.View,
+          },
+          {
+            subject: AbilitySubject.Vendor,
+            ability: VendorAction.View,
+          },
+        ],
       },
       {
         divider: true,
+        permission: [
+          {
+            subject: AbilitySubject.Customer,
+            ability: CustomerAction.View,
+          },
+          {
+            subject: AbilitySubject.Vendor,
+            ability: VendorAction.View,
+          },
+        ],
       },
       {
         text: <T id={'new_customer'} />,
         href: '/customers/new',
+        permission: {
+          subject: AbilitySubject.Customer,
+          ability: CustomerAction.View,
+        },
       },
       {
         text: <T id={'new_vendor'} />,
         href: '/vendors/new',
+        permission: {
+          subject: AbilitySubject.Vendor,
+          ability: VendorAction.View,
+        },
       },
     ],
   },
   {
     text: <T id={'accounting'} />,
     label: true,
+    permission: [
+      {
+        subject: AbilitySubject.Account,
+        ability: AccountAction.View,
+      },
+      {
+        subject: AbilitySubject.ManualJournal,
+        ability: ManualJournalAction.View,
+      },
+    ],
   },
   {
     text: <T id={'financial'} />,
@@ -167,29 +392,57 @@ export default [
       {
         text: <T id={'accounts_chart'} />,
         href: '/accounts',
+        permission: {
+          subject: AbilitySubject.Account,
+          ability: AccountAction.View,
+        },
       },
       {
         text: <T id={'manual_journals'} />,
         href: '/manual-journals',
+        permission: {
+          subject: AbilitySubject.ManualJournal,
+          ability: ManualJournalAction.View,
+        },
       },
       {
         text: <T id={'sidebar.transactions_locaking'} />,
         href: '/transactions-locking',
+        permission: {
+          subject: AbilitySubject.ManualJournal,
+          ability: ManualJournalAction.TransactionLocking,
+        },
       },
       {
         text: <T id={'exchange_rate'} />,
         href: '/exchange-rates',
+        permission: {
+          subject: AbilitySubject.ExchangeRate,
+          ability: ExchangeRateAbility.View,
+        },
       },
       {
         text: <T id={'New tasks'} />,
         label: true,
+        permission: {
+          subject: AbilitySubject.ManualJournal,
+          ability: ManualJournalAction.Create,
+        },
       },
       {
         divider: true,
+        permission: {
+          subject: AbilitySubject.ManualJournal,
+          ability: ManualJournalAction.Create,
+        },
       },
       {
         text: <T id={'make_journal_entry'} />,
         href: '/make-journal-entry',
+        permission: {
+          subject: AbilitySubject.ManualJournal,
+          ability: ManualJournalAction.Create,
+        },
       },
     ],
   },
@@ -199,29 +452,61 @@ export default [
       {
         text: <T id={'siebar.cashflow.label_cash_and_bank_accounts'} />,
         href: '/cashflow-accounts',
+        permission: {
+          subject: AbilitySubject.Cashflow,
+          ability: CashflowAction.View,
+        },
       },
       {
         text: <T id={'New tasks'} />,
         label: true,
+        permission: [
+          {
+            subject: AbilitySubject.Cashflow,
+            ability: CashflowAction.Create,
+          },
+        ],
       },
       {
         divider: true,
+        permission: [
+          {
+            subject: AbilitySubject.Cashflow,
+            ability: CashflowAction.Create,
+          },
+        ],
       },
       {
         text: <T id={'cash_flow.label.add_money_in'} />,
         href: '/cashflow-accounts',
+        permission: {
+          subject: AbilitySubject.Cashflow,
+          ability: CashflowAction.Create,
+        },
       },
       {
         text: <T id={'cash_flow.label.add_money_out'} />,
         href: '/cashflow-accounts',
+        permission: {
+          subject: AbilitySubject.Cashflow,
+          ability: CashflowAction.Create,
+        },
       },
       {
         text: <T id={'cash_flow.label.add_cash_account'} />,
         href: '/cashflow-accounts',
+        permission: {
+          subject: AbilitySubject.Cashflow,
+          ability: CashflowAction.Create,
+        },
       },
       {
         text: <T id={'cash_flow.label.add_bank_account'} />,
         href: '/cashflow-accounts',
+        permission: {
+          subject: AbilitySubject.Cashflow,
+          ability: CashflowAction.Create,
+        },
       },
     ],
   },
@@ -231,17 +516,33 @@ export default [
       {
         text: <T id={'expenses'} />,
         href: '/expenses',
+        permission: {
+          subject: AbilitySubject.Expense,
+          ability: ExpenseAction.View,
+        },
       },
       {
         text: <T id={'New tasks'} />,
         label: true,
+        permission: {
+          subject: AbilitySubject.Expense,
+          ability: ExpenseAction.Create,
+        },
       },
       {
         divider: true,
+        permission: {
+          subject: AbilitySubject.Expense,
+          ability: ExpenseAction.Create,
+        },
       },
       {
         text: <T id={'new_expense'} />,
         href: '/expenses/new',
+        permission: {
+          subject: AbilitySubject.Expense,
+          ability: ExpenseAction.Create,
+        },
       },
     ],
   },
@@ -251,80 +552,216 @@ export default [
       {
         text: <T id={'balance_sheet'} />,
         href: '/financial-reports/balance-sheet',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_BALANCE_SHEET,
+        },
       },
       {
         text: <T id={'trial_balance_sheet'} />,
         href: '/financial-reports/trial-balance-sheet',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_TRIAL_BALANCE_SHEET,
+        },
       },
       {
         text: <T id={'journal'} />,
         href: '/financial-reports/journal-sheet',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_JOURNAL,
+        },
       },
       {
         text: <T id={'general_ledger'} />,
         href: '/financial-reports/general-ledger',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_GENERAL_LEDGET,
+        },
       },
       {
         text: <T id={'profit_loss_sheet'} />,
         href: '/financial-reports/profit-loss-sheet',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_PROFIT_LOSS,
+        },
       },
       {
         text: <T id={'cash_flow_statement'} />,
         href: '/financial-reports/cash-flow',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_CASHFLOW_ACCOUNT_TRANSACTION,
+        },
       },
       {
         text: <T id={'AR_Aging_Summary'} />,
         href: '/financial-reports/receivable-aging-summary',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_AR_AGING_SUMMARY,
+        },
       },
       {
         text: <T id={'AP_Aging_Summary'} />,
         href: '/financial-reports/payable-aging-summary',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_AP_AGING_SUMMARY,
+        },
       },
       {
         text: <T id={'Sales/Purchases'} />,
         label: true,
+        permission: [
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_PURCHASES_BY_ITEMS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_SALES_BY_ITEMS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_CUSTOMERS_TRANSACTIONS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_VENDORS_TRANSACTIONS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_CUSTOMERS_SUMMARY_BALANCE,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_VENDORS_SUMMARY_BALANCE,
+          },
+        ],
       },
       {
         divider: true,
+        permission: [
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_PURCHASES_BY_ITEMS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_SALES_BY_ITEMS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_CUSTOMERS_TRANSACTIONS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_VENDORS_TRANSACTIONS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_CUSTOMERS_SUMMARY_BALANCE,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_VENDORS_SUMMARY_BALANCE,
+          },
+        ],
       },
       {
         text: <T id={'purchases_by_items'} />,
         href: '/financial-reports/purchases-by-items',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_PURCHASES_BY_ITEMS,
+        },
       },
       {
         text: <T id={'sales_by_items'} />,
         href: '/financial-reports/sales-by-items',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_SALES_BY_ITEMS,
+        },
       },
       {
         text: <T id={'customers_transactions'} />,
         href: '/financial-reports/transactions-by-customers',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_CUSTOMERS_TRANSACTIONS,
+        },
       },
       {
         text: <T id={'vendors_transactions'} />,
         href: '/financial-reports/transactions-by-vendors',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_VENDORS_TRANSACTIONS,
+        },
       },
       {
         text: <T id={'customers_balance_summary'} />,
         href: '/financial-reports/customers-balance-summary',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_CUSTOMERS_SUMMARY_BALANCE,
+        },
       },
       {
         text: <T id={'vendors_balance_summary'} />,
         href: '/financial-reports/vendors-balance-summary',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_VENDORS_SUMMARY_BALANCE,
+        },
       },
       {
         text: <T id={'inventory'} />,
         label: true,
+        permission: [
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_INVENTORY_ITEM_DETAILS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_INVENTORY_VALUATION_SUMMARY,
+          },
+        ],
       },
       {
         divider: true,
+        permission: [
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_INVENTORY_ITEM_DETAILS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_INVENTORY_VALUATION_SUMMARY,
+          },
+        ],
       },
       {
         text: <T id={'inventory_item_details'} />,
         href: '/financial-reports/inventory-item-details',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_INVENTORY_ITEM_DETAILS,
+        },
       },
       {
         text: <T id={'inventory_valuation'} />,
         href: '/financial-reports/inventory-valuation',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_INVENTORY_VALUATION_SUMMARY,
+        },
       },
     ],
   },
@@ -332,14 +769,32 @@ export default [
     text: <T id={'system'} />,
     enableBilling: true,
     label: true,
+    permission: [
+      {
+        subject: AbilitySubject.Preferences,
+        ability: PreferencesAbility.Mutate,
+      },
+      {
+        subject: AbilitySubject.SubscriptionBilling,
+        ability: SubscriptionBillingAbility.View,
+      },
+    ],
   },
   {
     text: <T id={'preferences'} />,
     href: '/preferences',
+    permission: {
+      subject: AbilitySubject.Preferences,
+      ability: PreferencesAbility.Mutate,
+    },
   },
   {
     text: <T id={'billing'} />,
     href: '/billing',
     enableBilling: true,
+    permission: {
+      subject: AbilitySubject.SubscriptionBilling,
+      ability: SubscriptionBillingAbility.View,
+    },
   },
 ];
diff --git a/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js b/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js
index a3f65be13..b90238018 100644
--- a/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js
+++ b/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js
@@ -26,8 +26,11 @@ import withManualJournals from './withManualJournals';
 import withSettingsActions from '../../Settings/withSettingsActions';
 import withSettings from '../../Settings/withSettings';
 
-import { If, DashboardActionViewsList } from 'components';
-
+import { Can, If, DashboardActionViewsList } from 'components';
+import {
+  ManualJournalAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 import { compose } from 'utils';
 
 /**
@@ -86,13 +89,14 @@ function ManualJournalActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="plus" />}
-          text={<T id={'journal_entry'} />}
-          onClick={onClickNewManualJournal}
-        />
+        <Can I={ManualJournalAction.Create} a={AbilitySubject.ManualJournal}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="plus" />}
+            text={<T id={'journal_entry'} />}
+            onClick={onClickNewManualJournal}
+          />
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: manualJournalsFilterConditions,
diff --git a/src/containers/Accounting/JournalsLanding/ManualJournalsEmptyStatus.js b/src/containers/Accounting/JournalsLanding/ManualJournalsEmptyStatus.js
index 105b5c62d..7174d4161 100644
--- a/src/containers/Accounting/JournalsLanding/ManualJournalsEmptyStatus.js
+++ b/src/containers/Accounting/JournalsLanding/ManualJournalsEmptyStatus.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 {
+  AbilitySubject,
+  ManualJournalAction,
+} from '../../../common/abilityOption';
 
 export default function ManualJournalsEmptyStatus() {
   const history = useHistory();
@@ -17,19 +21,21 @@ export default function ManualJournalsEmptyStatus() {
       }
       action={
         <>
-          <Button
-            intent={Intent.PRIMARY}
-            large={true}
-            onClick={() => {
-              history.push('/make-journal-entry');
-            }}
-          >
-            <T id={'make_journal'} />
-          </Button>
+          <Can I={ManualJournalAction.Create} a={AbilitySubject.ManualJournal}>
+            <Button
+              intent={Intent.PRIMARY}
+              large={true}
+              onClick={() => {
+                history.push('/make-journal-entry');
+              }}
+            >
+              <T id={'make_journal'} />
+            </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/Accounting/JournalsLanding/components.js b/src/containers/Accounting/JournalsLanding/components.js
index af986e522..fab711e72 100644
--- a/src/containers/Accounting/JournalsLanding/components.js
+++ b/src/containers/Accounting/JournalsLanding/components.js
@@ -13,7 +13,18 @@ import {
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 
-import { FormattedMessage as T, Choose, Money, If, Icon } from 'components';
+import {
+  Can,
+  FormattedMessage as T,
+  Choose,
+  Money,
+  If,
+  Icon,
+} from 'components';
+import {
+  ManualJournalAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 import { safeCallback } from 'utils';
 
 /**
@@ -150,25 +161,31 @@ export const ActionsMenu = ({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <MenuDivider />
-      <If condition={!original.is_published}>
+      <Can I={ManualJournalAction.Edit} a={AbilitySubject.ManualJournal}>
+        <MenuDivider />
+        <If condition={!original.is_published}>
+          <MenuItem
+            icon={<Icon icon="arrow-to-top" />}
+            text={intl.get('publish_journal')}
+            onClick={safeCallback(onPublish, original)}
+          />
+        </If>
+      </Can>
+      <Can I={ManualJournalAction.Edit} a={AbilitySubject.ManualJournal}>
         <MenuItem
-          icon={<Icon icon="arrow-to-top" />}
-          text={intl.get('publish_journal')}
-          onClick={safeCallback(onPublish, original)}
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('edit_journal')}
+          onClick={safeCallback(onEdit, original)}
         />
-      </If>
-      <MenuItem
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('edit_journal')}
-        onClick={safeCallback(onEdit, original)}
-      />
-      <MenuItem
-        text={intl.get('delete_journal')}
-        icon={<Icon icon="trash-16" iconSize={16} />}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-      />
+      </Can>
+      <Can I={ManualJournalAction.Delete} a={AbilitySubject.ManualJournal}>
+        <MenuItem
+          text={intl.get('delete_journal')}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+        />
+      </Can>
     </Menu>
   );
 };
diff --git a/src/containers/Accounting/ManualJournalUniversalSearch.js b/src/containers/Accounting/ManualJournalUniversalSearch.js
index 4cde8bafe..6c4a6266a 100644
--- a/src/containers/Accounting/ManualJournalUniversalSearch.js
+++ b/src/containers/Accounting/ManualJournalUniversalSearch.js
@@ -1,6 +1,10 @@
 import intl from 'react-intl-universal';
 import { RESOURCES_TYPES } from 'common/resourcesTypes';
 import withDrawerActions from '../Drawer/withDrawerActions';
+import {
+  AbilitySubject,
+  ManualJournalAction,
+} from '../../common/abilityOption';
 
 /**
  * Universal search manual journal item select action.
@@ -44,4 +48,8 @@ export const universalSearchJournalBind = () => ({
   optionItemLabel: intl.get('manual_journals'),
   selectItemAction: JournalUniversalSearchSelectAction,
   itemSelect: manualJournalsToSearch,
+  permission: {
+    ability: ManualJournalAction.View,
+    subject: AbilitySubject.ManualJournal,
+  },
 });
diff --git a/src/containers/Accounts/AccountUniversalSearch.js b/src/containers/Accounts/AccountUniversalSearch.js
index a1af66eb3..afa8744d5 100644
--- a/src/containers/Accounts/AccountUniversalSearch.js
+++ b/src/containers/Accounts/AccountUniversalSearch.js
@@ -1,7 +1,10 @@
 import intl from 'react-intl-universal';
-import { RESOURCES_TYPES } from '../../common/resourcesTypes';
+
 import withDrawerActions from '../Drawer/withDrawerActions';
 
+import { AbilitySubject, AccountAction } from '../../common/abilityOption';
+import { RESOURCES_TYPES } from '../../common/resourcesTypes';
+
 function AccountUniversalSearchItemSelectComponent({
   // #ownProps
   resourceType,
@@ -42,4 +45,8 @@ export const universalSearchAccountBind = () => ({
   optionItemLabel: intl.get('accounts'),
   selectItemAction: AccountUniversalSearchItemSelect,
   itemSelect: accountToSearch,
+  permission: {
+    ability: AccountAction.View,
+    subject: AbilitySubject.Account,
+  },
 });
diff --git a/src/containers/Accounts/AccountsActionsBar.js b/src/containers/Accounts/AccountsActionsBar.js
index e96d69c8a..d77f309fc 100644
--- a/src/containers/Accounts/AccountsActionsBar.js
+++ b/src/containers/Accounts/AccountsActionsBar.js
@@ -15,6 +15,7 @@ import { FormattedMessage as T } from 'components';
 import {
   AdvancedFilterPopover,
   If,
+  Can,
   DashboardActionViewsList,
   DashboardFilterButton,
   DashboardRowsHeightButton,
@@ -30,6 +31,8 @@ import withAlertActions from 'containers/Alert/withAlertActions';
 import withAccountsTableActions from './withAccountsTableActions';
 import withSettings from '../Settings/withSettings';
 import withSettingsActions from '../Settings/withSettingsActions';
+import { AccountAction, AbilitySubject } from '../../common/abilityOption';
+
 import { compose } from 'utils';
 
 /**
@@ -116,13 +119,14 @@ function AccountsActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="plus" />}
-          text={<T id={'new_account'} />}
-          onClick={onClickNewAccount}
-        />
+        <Can I={AccountAction.Create} a={AbilitySubject.Account}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="plus" />}
+            text={<T id={'new_account'} />}
+            onClick={onClickNewAccount}
+          />
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: accountsFilterConditions,
@@ -183,11 +187,13 @@ function AccountsActionsBar({
           onChange={handleTableRowSizeChange}
         />
         <NavbarDivider />
-        <Switch
-          labelElement={<T id={'inactive'} />}
-          defaultChecked={accountsInactiveMode}
-          onChange={handleInactiveSwitchChange}
-        />
+        <Can I={AccountAction.Edit} a={AbilitySubject.Account}>
+          <Switch
+            labelElement={<T id={'inactive'} />}
+            defaultChecked={accountsInactiveMode}
+            onChange={handleInactiveSwitchChange}
+          />
+        </Can>
       </NavbarGroup>
       <NavbarGroup align={Alignment.RIGHT}>
         <Button
diff --git a/src/containers/Accounts/components.js b/src/containers/Accounts/components.js
index e7a603d8f..078803b8b 100644
--- a/src/containers/Accounts/components.js
+++ b/src/containers/Accounts/components.js
@@ -8,9 +8,10 @@ import {
   MenuDivider,
   Intent,
 } from '@blueprintjs/core';
-import { Icon, Money, If } from 'components';
+import { Can, Icon, Money, If } from 'components';
 import intl from 'react-intl-universal';
 import { safeCallback } from 'utils';
+import { AbilitySubject, AccountAction } from '../../common/abilityOption';
 
 /**
  * Accounts table actions menu.
@@ -34,38 +35,45 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <MenuDivider />
-      <MenuItem
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('edit_account')}
-        onClick={safeCallback(onEdit, original)}
-      />
-      <MenuItem
-        icon={<Icon icon="plus" />}
-        text={intl.get('new_child_account')}
-        onClick={safeCallback(onNewChild, original)}
-      />
-      <MenuDivider />
-      <If condition={original.active}>
+      <Can I={AccountAction.Edit} a={AbilitySubject.Account}>
+        <MenuDivider />
         <MenuItem
-          text={intl.get('inactivate_account')}
-          icon={<Icon icon="pause-16" iconSize={16} />}
-          onClick={safeCallback(onInactivate, original)}
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('edit_account')}
+          onClick={safeCallback(onEdit, original)}
         />
-      </If>
-      <If condition={!original.active}>
+
         <MenuItem
-          text={intl.get('activate_account')}
-          icon={<Icon icon="play-16" iconSize={16} />}
-          onClick={safeCallback(onActivate, original)}
+          icon={<Icon icon="plus" />}
+          text={intl.get('new_child_account')}
+          onClick={safeCallback(onNewChild, original)}
         />
-      </If>
-      <MenuItem
-        text={intl.get('delete_account')}
-        icon={<Icon icon="trash-16" iconSize={16} />}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-      />
+        <MenuDivider />
+      </Can>
+      <Can I={AccountAction.Edit} a={AbilitySubject.Account}>
+        <If condition={original.active}>
+          <MenuItem
+            text={intl.get('inactivate_account')}
+            icon={<Icon icon="pause-16" iconSize={16} />}
+            onClick={safeCallback(onInactivate, original)}
+          />
+        </If>
+        <If condition={!original.active}>
+          <MenuItem
+            text={intl.get('activate_account')}
+            icon={<Icon icon="play-16" iconSize={16} />}
+            onClick={safeCallback(onActivate, original)}
+          />
+        </If>
+      </Can>
+      <Can I={AccountAction.Edit} a={AbilitySubject.Account}>
+        <MenuItem
+          text={intl.get('delete_account')}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+        />
+      </Can>
     </Menu>
   );
 }
diff --git a/src/containers/Alerts/Roles/RoleDeleteAlert.js b/src/containers/Alerts/Roles/RoleDeleteAlert.js
index c3b5e1946..ff240ebaa 100644
--- a/src/containers/Alerts/Roles/RoleDeleteAlert.js
+++ b/src/containers/Alerts/Roles/RoleDeleteAlert.js
@@ -5,6 +5,7 @@ import { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 
 import { useDeleteRole } from 'hooks/query';
+import { handleDeleteErrors } from '../../Preferences/Users/Roles/utils';
 
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
@@ -45,7 +46,9 @@ function RoleDeleteAlert({
           response: {
             data: { errors },
           },
-        }) => {},
+        }) => {
+          handleDeleteErrors(errors);
+        },
       )
       .finally(() => {
         closeAlert(name);
diff --git a/src/containers/CashFlow/AccountTransactions/components.js b/src/containers/CashFlow/AccountTransactions/components.js
index 528d6afe2..4597ee9fb 100644
--- a/src/containers/CashFlow/AccountTransactions/components.js
+++ b/src/containers/CashFlow/AccountTransactions/components.js
@@ -4,9 +4,10 @@ import intl from 'react-intl-universal';
 import { Intent, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
 
 import { MaterialProgressBar } from 'components';
-import { FormatDateCell, If, Icon } from 'components';
+import { Can, FormatDateCell, If, Icon } from 'components';
 import { useAccountTransactionsContext } from './AccountTransactionsProvider';
 import { TRANSACRIONS_TYPE } from 'common/cashflowOptions';
+import { AbilitySubject, CashflowAction } from '../../../common/abilityOption';
 import { safeCallback } from 'utils';
 
 export function ActionsMenu({
@@ -20,15 +21,17 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <If condition={TRANSACRIONS_TYPE.includes(original.reference_type)}>
-        <MenuDivider />
-        <MenuItem
-          text={intl.get('delete_transaction')}
-          intent={Intent.DANGER}
-          onClick={safeCallback(onDelete, original)}
-          icon={<Icon icon="trash-16" iconSize={16} />}
-        />
-      </If>
+      <Can I={CashflowAction.Delete} a={AbilitySubject.Cashflow}>
+        <If condition={TRANSACRIONS_TYPE.includes(original.reference_type)}>
+          <MenuDivider />
+          <MenuItem
+            text={intl.get('delete_transaction')}
+            intent={Intent.DANGER}
+            onClick={safeCallback(onDelete, original)}
+            icon={<Icon icon="trash-16" iconSize={16} />}
+          />
+        </If>
+      </Can>
     </Menu>
   );
 }
@@ -83,7 +86,7 @@ export function useAccountTransactionsColumns() {
         className: 'deposit',
         textOverview: true,
         align: 'right',
-        clickable: true
+        clickable: true,
       },
       {
         id: 'withdrawal',
@@ -93,7 +96,7 @@ export function useAccountTransactionsColumns() {
         width: 150,
         textOverview: true,
         align: 'right',
-        clickable: true
+        clickable: true,
       },
       {
         id: 'running_balance',
@@ -103,7 +106,7 @@ export function useAccountTransactionsColumns() {
         width: 150,
         textOverview: true,
         align: 'right',
-        clickable: true
+        clickable: true,
       },
       {
         id: 'balance',
diff --git a/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsActionsBar.js b/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsActionsBar.js
index cb9e86b84..f21b9f463 100644
--- a/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsActionsBar.js
+++ b/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsActionsBar.js
@@ -7,8 +7,9 @@ import {
   Alignment,
   Switch,
 } from '@blueprintjs/core';
-import { Icon, FormattedMessage as T } from 'components';
+import { Can, Icon, FormattedMessage as T } from 'components';
 import { useRefreshCashflowAccounts } from 'hooks/query';
+import { CashflowAction, AbilitySubject } from '../../../common/abilityOption';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
@@ -56,19 +57,22 @@ function CashFlowAccountsActionsBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'plus-24'} iconSize={20} />}
-          text={<T id={'cash_flow.label.add_cash_account'} />}
-          onClick={handleAddBankAccount}
-        />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'plus-24'} iconSize={20} />}
-          text={<T id={'cash_flow.label.add_bank_account'} />}
-          onClick={handleAddCashAccount}
-        />
-        <NavbarDivider />
+        <Can I={CashflowAction.Create} a={AbilitySubject.Cashflow}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'plus-24'} iconSize={20} />}
+            text={<T id={'cash_flow.label.add_cash_account'} />}
+            onClick={handleAddBankAccount}
+          />
+
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'plus-24'} iconSize={20} />}
+            text={<T id={'cash_flow.label.add_bank_account'} />}
+            onClick={handleAddCashAccount}
+          />
+          <NavbarDivider />
+        </Can>
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon="print-16" iconSize={16} />}
@@ -85,13 +89,15 @@ function CashFlowAccountsActionsBar({
           text={<T id={'import'} />}
         />
         <NavbarDivider />
-
-        <Switch
-          labelElement={<T id={'inactive'} />}
-          defaultChecked={false}
-          onChange={handleInactiveSwitchChange}
-        />
+        <Can I={CashflowAction.Edit} a={AbilitySubject.Cashflow}>
+          <Switch
+            labelElement={<T id={'inactive'} />}
+            defaultChecked={false}
+            onChange={handleInactiveSwitchChange}
+          />
+        </Can>
       </NavbarGroup>
+
       <NavbarGroup align={Alignment.RIGHT}>
         <Button
           className={Classes.MINIMAL}
diff --git a/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.js b/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.js
index b0ce27e35..cf06161b9 100644
--- a/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.js
+++ b/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.js
@@ -13,7 +13,13 @@ import {
   If,
   Icon,
   T,
+  Can,
 } from '../../../components';
+import {
+  AccountAction,
+  CashflowAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
 import { useCashFlowAccountsContext } from './CashFlowAccountsProvider';
 
@@ -222,48 +228,56 @@ function CashflowAccountContextMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewClick)}
       />
-      <MenuDivider />
-      <MenuItem
-        text={<T id={'cash_flow_money_in'} />}
-        icon={<Icon icon={'arrow-downward'} iconSize={16} />}
-      >
-        <CashflowAccountMoneyInContextMenu onClick={onMoneyInClick} />
-      </MenuItem>
-
-      <MenuItem
-        text={<T id={'cash_flow_money_out'} />}
-        icon={<Icon icon={'arrow-upward'} iconSize={16} />}
-      >
-        <CashflowAccountMoneyOutContextMenu onClick={onMoneyOutClick} />
-      </MenuItem>
-      <MenuDivider />
-
-      <MenuItem
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('edit_account')}
-        onClick={safeCallback(onEditClick)}
-      />
-      <MenuDivider />
-      <If condition={account.active}>
+      <Can I={CashflowAction.Create} a={AbilitySubject.Cashflow}>
+        <MenuDivider />
         <MenuItem
-          text={intl.get('inactivate_account')}
-          icon={<Icon icon="pause-16" iconSize={16} />}
-          onClick={safeCallback(onInactivateClick)}
-        />
-      </If>
-      <If condition={!account.active}>
+          text={<T id={'cash_flow_money_in'} />}
+          icon={<Icon icon={'arrow-downward'} iconSize={16} />}
+        >
+          <CashflowAccountMoneyInContextMenu onClick={onMoneyInClick} />
+        </MenuItem>
+
         <MenuItem
-          text={intl.get('activate_account')}
-          icon={<Icon icon="play-16" iconSize={16} />}
-          onClick={safeCallback(onActivateClick)}
+          text={<T id={'cash_flow_money_out'} />}
+          icon={<Icon icon={'arrow-upward'} iconSize={16} />}
+        >
+          <CashflowAccountMoneyOutContextMenu onClick={onMoneyOutClick} />
+        </MenuItem>
+      </Can>
+      <Can I={CashflowAction.Edit} a={AbilitySubject.Cashflow}>
+        <MenuDivider />
+
+        <MenuItem
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('edit_account')}
+          onClick={safeCallback(onEditClick)}
         />
-      </If>
-      <MenuItem
-        text={intl.get('delete_account')}
-        icon={<Icon icon="trash-16" iconSize={16} />}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDeleteClick)}
-      />
+      </Can>
+      <Can I={AccountAction.Edit} a={AbilitySubject.Account}>
+        <MenuDivider />
+        <If condition={account.active}>
+          <MenuItem
+            text={intl.get('inactivate_account')}
+            icon={<Icon icon="pause-16" iconSize={16} />}
+            onClick={safeCallback(onInactivateClick)}
+          />
+        </If>
+        <If condition={!account.active}>
+          <MenuItem
+            text={intl.get('activate_account')}
+            icon={<Icon icon="play-16" iconSize={16} />}
+            onClick={safeCallback(onActivateClick)}
+          />
+        </If>
+      </Can>
+      <Can I={CashflowAction.Delete} a={AbilitySubject.Cashflow}>
+        <MenuItem
+          text={intl.get('delete_account')}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDeleteClick)}
+        />
+      </Can>
     </Menu>
   );
 }
diff --git a/src/containers/Customers/CustomersLanding/CustomersActionsBar.js b/src/containers/Customers/CustomersLanding/CustomersActionsBar.js
index 8ca0e6750..9aa31e958 100644
--- a/src/containers/Customers/CustomersLanding/CustomersActionsBar.js
+++ b/src/containers/Customers/CustomersLanding/CustomersActionsBar.js
@@ -14,6 +14,7 @@ import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import {
   If,
   Icon,
+  Can,
   FormattedMessage as T,
   DashboardActionViewsList,
   AdvancedFilterPopover,
@@ -29,6 +30,7 @@ import withCustomersActions from './withCustomersActions';
 import withAlertActions from 'containers/Alert/withAlertActions';
 import withSettingsActions from '../../Settings/withSettingsActions';
 import withSettings from '../../Settings/withSettings';
+import { CustomerAction, AbilitySubject } from '../../../common/abilityOption';
 
 import { compose } from 'utils';
 
@@ -103,15 +105,15 @@ function CustomerActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'plus'} />}
-          text={<T id={'new_customer'} />}
-          onClick={onClickNewCustomer}
-        />
-        <NavbarDivider />
-
+        <Can I={CustomerAction.Create} a={AbilitySubject.Item}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'plus'} />}
+            text={<T id={'new_customer'} />}
+            onClick={onClickNewCustomer}
+          />
+          <NavbarDivider />
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: customersFilterConditions,
@@ -152,11 +154,13 @@ function CustomerActionsBar({
           onChange={handleTableRowSizeChange}
         />
         <NavbarDivider />
-        <Switch
-          labelElement={<T id={'inactive'} />}
-          defaultChecked={accountsInactiveMode}
-          onChange={handleInactiveSwitchChange}
-        />
+        <Can I={CustomerAction.Edit} a={AbilitySubject.Customer}>
+          <Switch
+            labelElement={<T id={'inactive'} />}
+            defaultChecked={accountsInactiveMode}
+            onChange={handleInactiveSwitchChange}
+          />
+        </Can>
       </NavbarGroup>
       <NavbarGroup align={Alignment.RIGHT}>
         <Button
diff --git a/src/containers/Customers/CustomersLanding/CustomersEmptyStatus.js b/src/containers/Customers/CustomersLanding/CustomersEmptyStatus.js
index 6ef1d135e..8da0f7b50 100644
--- a/src/containers/Customers/CustomersLanding/CustomersEmptyStatus.js
+++ b/src/containers/Customers/CustomersLanding/CustomersEmptyStatus.js
@@ -2,7 +2,8 @@ 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 { AbilitySubject, CustomerAction } from '../../../common/abilityOption';
 
 export default function CustomersEmptyStatus() {
   const history = useHistory();
@@ -17,19 +18,21 @@ export default function CustomersEmptyStatus() {
       }
       action={
         <>
-          <Button
-            intent={Intent.PRIMARY}
-            large={true}
-            onClick={() => {
-              history.push('/customers/new');
-            }}
-          >
-            <T id={'new_customer'} />
-          </Button>
+          <Can I={CustomerAction.Create} a={AbilitySubject.Customer}>
+            <Button
+              intent={Intent.PRIMARY}
+              large={true}
+              onClick={() => {
+                history.push('/customers/new');
+              }}
+            >
+              <T id={'new_customer'} />
+            </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/Customers/CustomersLanding/components.js b/src/containers/Customers/CustomersLanding/components.js
index 0cce24139..9d878bbf4 100644
--- a/src/containers/Customers/CustomersLanding/components.js
+++ b/src/containers/Customers/CustomersLanding/components.js
@@ -4,7 +4,8 @@ import clsx from 'classnames';
 
 import intl from 'react-intl-universal';
 
-import { Icon, Money, If, AvaterCell } from 'components';
+import { Can, Icon, Money, If, AvaterCell } from 'components';
+import { CustomerAction, AbilitySubject } from '../../../common/abilityOption';
 
 import { safeCallback } from 'utils';
 
@@ -29,37 +30,46 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <MenuDivider />
-      <MenuItem
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('edit_customer')}
-        onClick={safeCallback(onEdit, original)}
-      />
-      <MenuItem
-        icon={<Icon icon="duplicate-16" />}
-        text={intl.get('duplicate')}
-        onClick={safeCallback(onDuplicate, original)}
-      />
-      <If condition={original.active}>
+      <Can I={CustomerAction.Edit} a={AbilitySubject.Customer}>
+        <MenuDivider />
+
         <MenuItem
-          text={intl.get('inactivate_customer')}
-          icon={<Icon icon="pause-16" iconSize={16} />}
-          onClick={safeCallback(onInactivate, original)}
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('edit_customer')}
+          onClick={safeCallback(onEdit, original)}
         />
-      </If>
-      <If condition={!original.active}>
+      </Can>
+      <Can I={CustomerAction.Create} a={AbilitySubject.Customer}>
         <MenuItem
-          text={intl.get('activate_customer')}
-          icon={<Icon icon="play-16" iconSize={16} />}
-          onClick={safeCallback(onActivate, original)}
+          icon={<Icon icon="duplicate-16" />}
+          text={intl.get('duplicate')}
+          onClick={safeCallback(onDuplicate, original)}
         />
-      </If>
-      <MenuItem
-        icon={<Icon icon="trash-16" iconSize={16} />}
-        text={intl.get('delete_customer')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-      />
+      </Can>
+      <Can I={CustomerAction.Edit} a={AbilitySubject.Customer}>
+        <If condition={original.active}>
+          <MenuItem
+            text={intl.get('inactivate_customer')}
+            icon={<Icon icon="pause-16" iconSize={16} />}
+            onClick={safeCallback(onInactivate, original)}
+          />
+        </If>
+        <If condition={!original.active}>
+          <MenuItem
+            text={intl.get('activate_customer')}
+            icon={<Icon icon="play-16" iconSize={16} />}
+            onClick={safeCallback(onActivate, original)}
+          />
+        </If>
+      </Can>
+      <Can I={CustomerAction.Delete} a={AbilitySubject.Customer}>
+        <MenuItem
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          text={intl.get('delete_customer')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+        />
+      </Can>
     </Menu>
   );
 }
diff --git a/src/containers/Customers/CustomersUniversalSearch.js b/src/containers/Customers/CustomersUniversalSearch.js
index b9e4b8768..1828678dc 100644
--- a/src/containers/Customers/CustomersUniversalSearch.js
+++ b/src/containers/Customers/CustomersUniversalSearch.js
@@ -1,4 +1,5 @@
 import intl from 'react-intl-universal';
+import { AbilitySubject, CustomerAction } from '../../common/abilityOption';
 
 import { RESOURCES_TYPES } from '../../common/resourcesTypes';
 import withDrawerActions from '../Drawer/withDrawerActions';
@@ -42,4 +43,8 @@ export const universalSearchCustomerBind = () => ({
   optionItemLabel: intl.get('customers'),
   selectItemAction: CustomerUniversalSearchSelectAction,
   itemSelect: customersToSearch,
+  permission: {
+    ability: CustomerAction.View,
+    subject: AbilitySubject.Customer,
+  },
 });
diff --git a/src/containers/Dialogs/InviteUserDialog/InviteUserDialog.schema.js b/src/containers/Dialogs/InviteUserDialog/InviteUserDialog.schema.js
index ee0c34702..057f75e25 100644
--- a/src/containers/Dialogs/InviteUserDialog/InviteUserDialog.schema.js
+++ b/src/containers/Dialogs/InviteUserDialog/InviteUserDialog.schema.js
@@ -2,10 +2,8 @@ import * as Yup from 'yup';
 import intl from 'react-intl-universal';
 
 const Schema = Yup.object().shape({
-  email: Yup.string()
-    .email()
-    .required()
-    .label(intl.get('email')),
+  email: Yup.string().email().required().label(intl.get('email')),
+  role_id: Yup.string().required().label(intl.get('roles.label.role_name_')),
 });
 
-export const InviteUserFormSchema = Schema;
\ No newline at end of file
+export const InviteUserFormSchema = Schema;
diff --git a/src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.js b/src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.js
index bcc989cea..c66fe492f 100644
--- a/src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.js
+++ b/src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.js
@@ -1,7 +1,11 @@
 import React from 'react';
 import { FormGroup, InputGroup, Intent, Button } from '@blueprintjs/core';
 import { FastField, Form, useFormikContext, ErrorMessage } from 'formik';
-import { FormattedMessage as T } from 'components';
+import {
+  ListSelect,
+  FieldRequiredHint,
+  FormattedMessage as T,
+} from 'components';
 import { CLASSES } from 'common/classes';
 import classNames from 'classnames';
 import { inputIntent } from 'utils';
@@ -15,23 +19,24 @@ function InviteUserFormContent({
   closeDialog,
 }) {
   const { isSubmitting } = useFormikContext();
-  const { isEditMode, dialogName } = useInviteUserFormContext();
+  const { isEditMode, dialogName, roles } = useInviteUserFormContext();
 
   const handleClose = () => {
     closeDialog(dialogName);
   };
-
+  console.log(roles, 'XX');
   return (
     <Form>
       <div className={CLASSES.DIALOG_BODY}>
         <p className="mb2">
           <T id={'your_access_to_your_team'} />
         </p>
-
+        {/* ----------- Email ----------- */}
         <FastField name={'email'}>
           {({ field, meta: { error, touched } }) => (
             <FormGroup
               label={<T id={'email'} />}
+              labelInfo={<FieldRequiredHint />}
               className={classNames('form-group--email', CLASSES.FILL)}
               intent={inputIntent({ error, touched })}
               helperText={<ErrorMessage name="email" />}
@@ -40,6 +45,31 @@ function InviteUserFormContent({
             </FormGroup>
           )}
         </FastField>
+        {/* ----------- Role name ----------- */}
+        <FastField name={'role_id'}>
+          {({ form, field: { value }, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'roles.label.role_name'} />}
+              labelInfo={<FieldRequiredHint />}
+              helperText={<ErrorMessage name="role_id" />}
+              className={classNames(CLASSES.FILL, 'form-group--role_name')}
+              intent={inputIntent({ error, touched })}
+            >
+              <ListSelect
+                items={roles}
+                onItemSelect={({ id }) => {
+                  form.setFieldValue('role_id', id);
+                }}
+                selectedItem={value}
+                selectedItemProp={'id'}
+                textProp={'name'}
+                // labelProp={'id '}
+                popoverProps={{ minimal: true }}
+                intent={inputIntent({ error, touched })}
+              />
+            </FormGroup>
+          )}
+        </FastField>
       </div>
 
       <div className={CLASSES.DIALOG_FOOTER}>
diff --git a/src/containers/Dialogs/InviteUserDialog/InviteUserFormProvider.js b/src/containers/Dialogs/InviteUserDialog/InviteUserFormProvider.js
index aa093c209..dcaaad4cb 100644
--- a/src/containers/Dialogs/InviteUserDialog/InviteUserFormProvider.js
+++ b/src/containers/Dialogs/InviteUserDialog/InviteUserFormProvider.js
@@ -1,5 +1,5 @@
 import React, { createContext } from 'react';
-import { useCreateInviteUser, useUsers } from 'hooks/query';
+import { useCreateInviteUser, useUsers, useRoles } from 'hooks/query';
 import { DialogContent } from 'components';
 
 const InviteUserFormContext = createContext();
@@ -14,6 +14,9 @@ function InviteUserFormProvider({ userId, isEditMode, dialogName, ...props }) {
   // fetch users list.
   const { isLoading: isUsersLoading } = useUsers();
 
+  // fetch roles list.
+  const { data: roles, isLoading: isRolesLoading } = useRoles();
+
   // Provider state.
   const provider = {
     inviteUserMutate,
@@ -21,10 +24,14 @@ function InviteUserFormProvider({ userId, isEditMode, dialogName, ...props }) {
     userId,
     isUsersLoading,
     isEditMode,
+    roles,
   };
 
   return (
-    <DialogContent isLoading={isUsersLoading} name={'invite-form'}>
+    <DialogContent
+      isLoading={isUsersLoading || isRolesLoading}
+      name={'invite-form'}
+    >
       <InviteUserFormContext.Provider value={provider} {...props} />
     </DialogContent>
   );
diff --git a/src/containers/Dialogs/UserFormDialog/UserForm.js b/src/containers/Dialogs/UserFormDialog/UserForm.js
index 75a65251c..c9f18d410 100644
--- a/src/containers/Dialogs/UserFormDialog/UserForm.js
+++ b/src/containers/Dialogs/UserFormDialog/UserForm.js
@@ -10,6 +10,7 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import { UserFormSchema } from './UserForm.schema';
 import UserFormContent from './UserFormContent';
 import { useUserFormContext } from './UserFormProvider';
+import { transformErrors } from './utils';
 
 import { compose, objectKeysTransform } from 'utils';
 
@@ -20,13 +21,10 @@ function UserForm({
   // #withDialogActions
   closeDialog,
 }) {
-  const {
-    dialogName,
-    user,
-    userId,
-    isEditMode,
-    EditUserMutate,
-  } = useUserFormContext();
+  const [calloutCode, setCalloutCode] = React.useState([]);
+
+  const { dialogName, user, userId, isEditMode, EditUserMutate } =
+    useUserFormContext();
 
   const initialValues = {
     ...(isEditMode &&
@@ -59,7 +57,7 @@ function UserForm({
           data: { errors },
         },
       } = error;
-
+      transformErrors(errors, { setErrors, setCalloutCode });
       setSubmitting(false);
     };
 
@@ -72,7 +70,7 @@ function UserForm({
       initialValues={initialValues}
       onSubmit={handleSubmit}
     >
-      <UserFormContent />
+      <UserFormContent calloutCode={calloutCode} />
     </Formik>
   );
 }
diff --git a/src/containers/Dialogs/UserFormDialog/UserForm.schema.js b/src/containers/Dialogs/UserFormDialog/UserForm.schema.js
index c7d245827..347319e3e 100644
--- a/src/containers/Dialogs/UserFormDialog/UserForm.schema.js
+++ b/src/containers/Dialogs/UserFormDialog/UserForm.schema.js
@@ -2,20 +2,14 @@ import * as Yup from 'yup';
 import intl from 'react-intl-universal';
 
 const Schema = Yup.object().shape({
-  email: Yup.string()
-    .email()
-    .required()
-    .label(intl.get('email')),
-  first_name: Yup.string()
-    .required()
-    .label(intl.get('first_name_')),
-  last_name: Yup.string()
-    .required()
-    .label(intl.get('last_name_')),
+  email: Yup.string().email().required().label(intl.get('email')),
+  first_name: Yup.string().required().label(intl.get('first_name_')),
+  last_name: Yup.string().required().label(intl.get('last_name_')),
   phone_number: Yup.string()
     .matches()
     .required()
     .label(intl.get('phone_number_')),
+  role_id: Yup.string().required().label(intl.get('roles.label.role_name_')),
 });
 
 export const UserFormSchema = Schema;
diff --git a/src/containers/Dialogs/UserFormDialog/UserFormContent.js b/src/containers/Dialogs/UserFormDialog/UserFormContent.js
index 46d168d97..f43787157 100644
--- a/src/containers/Dialogs/UserFormDialog/UserFormContent.js
+++ b/src/containers/Dialogs/UserFormDialog/UserFormContent.js
@@ -11,20 +11,22 @@ import { FormattedMessage as T } from 'components';
 import { CLASSES } from 'common/classes';
 import classNames from 'classnames';
 import { inputIntent } from 'utils';
-import { FieldRequiredHint } from 'components';
+import { ListSelect, FieldRequiredHint } from 'components';
 import { useUserFormContext } from './UserFormProvider';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose } from 'utils';
+import { UserFormCalloutAlerts } from './components';
 
 /**
  * User form content.
  */
 function UserFormContent({
+  calloutCode,
   // #withDialogActions
   closeDialog,
 }) {
   const { isSubmitting } = useFormikContext();
-  const { dialogName } = useUserFormContext();
+  const { dialogName, roles, isAuth } = useUserFormContext();
 
   const handleClose = () => {
     closeDialog(dialogName);
@@ -33,6 +35,8 @@ function UserFormContent({
   return (
     <Form>
       <div className={Classes.DIALOG_BODY}>
+        <UserFormCalloutAlerts calloutCodes={calloutCode} />
+
         {/* ----------- Email ----------- */}
         <FastField name={'email'}>
           {({ field, meta: { error, touched } }) => (
@@ -88,6 +92,32 @@ function UserFormContent({
             </FormGroup>
           )}
         </FastField>
+        {/* ----------- Role name ----------- */}
+        <FastField name={'role_id'}>
+          {({ form, field: { value }, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'roles.label.role_name'} />}
+              labelInfo={<FieldRequiredHint />}
+              helperText={<ErrorMessage name="role_id" />}
+              className={classNames(CLASSES.FILL, 'form-group--role_name')}
+              intent={inputIntent({ error, touched })}
+            >
+              <ListSelect
+                items={roles}
+                onItemSelect={({ id }) => {
+                  form.setFieldValue('role_id', id);
+                }}
+                selectedItem={value}
+                selectedItemProp={'id'}
+                textProp={'name'}
+                // labelProp={'id '}
+                popoverProps={{ minimal: true }}
+                intent={inputIntent({ error, touched })}
+                disabled={isAuth}
+              />
+            </FormGroup>
+          )}
+        </FastField>
       </div>
 
       <div className={CLASSES.DIALOG_FOOTER}>
diff --git a/src/containers/Dialogs/UserFormDialog/UserFormProvider.js b/src/containers/Dialogs/UserFormDialog/UserFormProvider.js
index 253b6f3bd..d4030e053 100644
--- a/src/containers/Dialogs/UserFormDialog/UserFormProvider.js
+++ b/src/containers/Dialogs/UserFormDialog/UserFormProvider.js
@@ -1,5 +1,10 @@
 import React, { createContext, useContext } from 'react';
-import { useEditUser, useUser } from 'hooks/query';
+import {
+  useEditUser,
+  useUser,
+  useRoles,
+  useAuthenticatedAccount,
+} from 'hooks/query';
 
 import { DialogContent } from 'components';
 
@@ -17,10 +22,21 @@ function UserFormProvider({ userId, dialogName, ...props }) {
     enabled: !!userId,
   });
 
+  // fetch roles list.
+  const { data: roles, isLoading: isRolesLoading } = useRoles();
+
+  // Retrieve authenticated user information.
+  const {
+    data: { id },
+  } = useAuthenticatedAccount();
+
   const isEditMode = userId;
 
+  const isAuth = user.system_user_id == id
+
   // Provider state.
   const provider = {
+    isAuth,
     userId,
     dialogName,
 
@@ -28,10 +44,14 @@ function UserFormProvider({ userId, dialogName, ...props }) {
     EditUserMutate,
 
     isEditMode,
+    roles,
   };
 
   return (
-    <DialogContent isLoading={isUserLoading} name={'user-form'}>
+    <DialogContent
+      isLoading={isUserLoading || isRolesLoading}
+      name={'user-form'}
+    >
       <UserFormContext.Provider value={provider} {...props} />
     </DialogContent>
   );
diff --git a/src/containers/Dialogs/UserFormDialog/components.js b/src/containers/Dialogs/UserFormDialog/components.js
new file mode 100644
index 000000000..687cdd164
--- /dev/null
+++ b/src/containers/Dialogs/UserFormDialog/components.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { includes } from 'lodash';
+import { Callout, Intent } from '@blueprintjs/core';
+
+export const UserFormCalloutAlerts = ({ calloutCodes }) => {
+  return [
+    includes(calloutCodes, 200) && (
+      <Callout icon={null} intent={Intent.DANGER}>
+        {intl.get('roles.error.you_cannot_change_your_own_role')}
+      </Callout>
+    ),
+  ];
+};
diff --git a/src/containers/Dialogs/UserFormDialog/utils.js b/src/containers/Dialogs/UserFormDialog/utils.js
new file mode 100644
index 000000000..8ec73acaa
--- /dev/null
+++ b/src/containers/Dialogs/UserFormDialog/utils.js
@@ -0,0 +1,13 @@
+import intl from 'react-intl-universal';
+
+// handle delete errors.
+export const transformErrors = (errors, { setErrors, setCalloutCode }) => {
+  if (
+    errors.find((error) => error.type === 'CANNOT_AUTHORIZED_USER_MUTATE_ROLE')
+  ) {
+    setCalloutCode([200]);
+    setErrors({
+      role_id: intl.get('roles.error.you_cannot_change_your_own_role'),
+    });
+  }
+};
diff --git a/src/containers/Drawers/AccountDrawer/AccountDrawerActionBar.js b/src/containers/Drawers/AccountDrawer/AccountDrawerActionBar.js
index cd4f11d90..a65f3042b 100644
--- a/src/containers/Drawers/AccountDrawer/AccountDrawerActionBar.js
+++ b/src/containers/Drawers/AccountDrawer/AccountDrawerActionBar.js
@@ -7,13 +7,14 @@ import {
   Intent,
   NavbarDivider,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
+import { Can, FormattedMessage as T } from 'components';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 
 import { safeCallback } from 'utils';
+import { AccountAction, AbilitySubject } from '../../../common/abilityOption';
 
 import { compose } from 'utils';
 import { useAccountDrawerContext } from './AccountDrawerProvider';
@@ -53,26 +54,31 @@ function AccountDrawerActionBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="pen-18" />}
-          text={<T id={'edit_account'} />}
-          onClick={safeCallback(onEditAccount)}
-        />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="plus" />}
-          text={<T id={'new_child_account'} />}
-          onClick={safeCallback(onNewChildAccount)}
-        />
-        <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
-          text={<T id={'delete'} />}
-          intent={Intent.DANGER}
-          onClick={safeCallback(onDeleteAccount)}
-        />
+        <Can I={AccountAction.Edit} a={AbilitySubject.Account}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="pen-18" />}
+            text={<T id={'edit_account'} />}
+            onClick={safeCallback(onEditAccount)}
+          />
+
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="plus" />}
+            text={<T id={'new_child_account'} />}
+            onClick={safeCallback(onNewChildAccount)}
+          />
+          <NavbarDivider />
+        </Can>
+        <Can I={AccountAction.Delete} a={AbilitySubject.Account}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={safeCallback(onDeleteAccount)}
+          />
+        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );
diff --git a/src/containers/Drawers/BillDrawer/BillDetailActionsBar.js b/src/containers/Drawers/BillDrawer/BillDetailActionsBar.js
index 8a14d3795..d57e2f4c4 100644
--- a/src/containers/Drawers/BillDrawer/BillDetailActionsBar.js
+++ b/src/containers/Drawers/BillDrawer/BillDetailActionsBar.js
@@ -16,7 +16,12 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { If, Icon, FormattedMessage as T } from 'components';
+import { Can, If, Icon, FormattedMessage as T } from 'components';
+import {
+  BillAction,
+  PaymentMadeAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
 import { safeCallback, compose } from 'utils';
 
@@ -53,29 +58,35 @@ function BillDetailActionsBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="pen-18" />}
-          text={<T id={'edit_bill'} />}
-          onClick={safeCallback(onEditBill)}
-        />
-        <NavbarDivider />
-        <If condition={bill.is_open && !bill.is_fully_paid}>
+        <Can I={BillAction.Edit} a={AbilitySubject.Bill}>
           <Button
             className={Classes.MINIMAL}
-            icon={<Icon icon="quick-payment-16" iconSize={16} />}
-            text={<T id={'add_payment'} />}
-            onClick={handleQuickBillPayment}
+            icon={<Icon icon="pen-18" />}
+            text={<T id={'edit_bill'} />}
+            onClick={safeCallback(onEditBill)}
           />
-        </If>
-        <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
-          text={<T id={'delete'} />}
-          intent={Intent.DANGER}
-          onClick={safeCallback(onDeleteBill)}
-        />
+          <NavbarDivider />
+        </Can>
+        <Can I={PaymentMadeAction.Create} a={AbilitySubject.PaymentMade}>
+          <If condition={bill.is_open && !bill.is_fully_paid}>
+            <Button
+              className={Classes.MINIMAL}
+              icon={<Icon icon="quick-payment-16" iconSize={16} />}
+              text={<T id={'add_payment'} />}
+              onClick={handleQuickBillPayment}
+            />
+          </If>
+          <NavbarDivider />
+        </Can>
+        <Can I={BillAction.Delete} a={AbilitySubject.Bill}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={safeCallback(onDeleteBill)}
+          />
+        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );
diff --git a/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerActionBar.js b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerActionBar.js
index 2099f063e..a843373c3 100644
--- a/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerActionBar.js
+++ b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerActionBar.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import Icon from 'components/Icon';
 import { Button, Classes, NavbarGroup, Intent } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
+import { Can, FormattedMessage as T } from 'components';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';
 import withAlertsActions from 'containers/Alert/withAlertActions';
-
+import { AbilitySubject, CashflowAction } from '../../../common/abilityOption';
 import { compose } from 'utils';
 
 /**
@@ -24,17 +24,19 @@ function CashflowTransactionDrawerActionBar({
   };
 
   return (
-    <DashboardActionsBar>
-      <NavbarGroup>
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="trash-16" iconSize={16} />}
-          text={<T id={'delete'} />}
-          intent={Intent.DANGER}
-          onClick={handleDeleteCashflowTransaction}
-        />
-      </NavbarGroup>
-    </DashboardActionsBar>
+    <Can I={CashflowAction.Delete} a={AbilitySubject.Cashflow}>
+      <DashboardActionsBar>
+        <NavbarGroup>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="trash-16" iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeleteCashflowTransaction}
+          />
+        </NavbarGroup>
+      </DashboardActionsBar>
+    </Can>
   );
 }
 export default compose(withAlertsActions)(CashflowTransactionDrawerActionBar);
diff --git a/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsActionsBar.js b/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsActionsBar.js
index 504d3f366..48f4ac7ff 100644
--- a/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsActionsBar.js
+++ b/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsActionsBar.js
@@ -21,8 +21,15 @@ import { useCustomerDetailsDrawerContext } from './CustomerDetailsDrawerProvider
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Icon, FormattedMessage as T } from 'components';
-
+import { Can, Icon, FormattedMessage as T } from 'components';
+import {
+  AbilitySubject,
+  SaleInvoiceAction,
+  SaleEstimateAction,
+  SaleReceiptAction,
+  PaymentReceiveAction,
+  CustomerAction,
+} from '../../../common/abilityOption';
 import { compose } from 'utils';
 
 /**
@@ -62,7 +69,7 @@ function CustomerDetailsActionsBar({
   const handleDeleteCustomer = () => {
     openAlert(`customer-delete`, { contactId: customerId });
   };
-  
+
   const handleEditContact = () => {
     history.push(`/customers/${customerId}/edit`);
     closeDrawer('customer-details-drawer');
@@ -74,22 +81,34 @@ function CustomerDetailsActionsBar({
         <Popover
           content={
             <Menu>
-              <MenuItem
-                text={<T id={'customer.drawer.action.new_invoice'} />}
-                onClick={handleNewInvoiceClick}
-              />
-              <MenuItem
-                text={<T id={'customer.drawer.action.new_estimate'} />}
-                onClick={handleNewEstimateClick}
-              />
-              <MenuItem
-                text={<T id={'customer.drawer.action.new_receipt'} />}
-                onClick={handleNewReceiptClick}
-              />
-              <MenuItem
-                text={<T id={'customer.drawer.action.new_payment'} />}
-                onClick={handleNewPaymentClick}
-              />
+              <Can I={SaleInvoiceAction.Create} a={AbilitySubject.Invoice}>
+                <MenuItem
+                  text={<T id={'customer.drawer.action.new_invoice'} />}
+                  onClick={handleNewInvoiceClick}
+                />
+              </Can>
+              <Can I={SaleEstimateAction.Create} a={AbilitySubject.Estimate}>
+                <MenuItem
+                  text={<T id={'customer.drawer.action.new_estimate'} />}
+                  onClick={handleNewEstimateClick}
+                />
+              </Can>
+              <Can I={SaleReceiptAction.Create} a={AbilitySubject.Receipt}>
+                <MenuItem
+                  text={<T id={'customer.drawer.action.new_receipt'} />}
+                  onClick={handleNewReceiptClick}
+                />
+              </Can>
+
+              <Can
+                I={PaymentReceiveAction.Create}
+                a={AbilitySubject.PaymentReceive}
+              >
+                <MenuItem
+                  text={<T id={'customer.drawer.action.new_payment'} />}
+                  onClick={handleNewPaymentClick}
+                />
+              </Can>
             </Menu>
           }
           minimal={true}
@@ -104,21 +123,24 @@ function CustomerDetailsActionsBar({
         </Popover>
 
         <NavbarDivider />
-
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="pen-18" />}
-          text={intl.get('customer.drawer.action.edit')}
-          onClick={handleEditContact}
-        />
-        <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
-          text={<T id={'delete'} />}
-          intent={Intent.DANGER}
-          onClick={handleDeleteCustomer}
-        />
+        <Can I={CustomerAction.Edit} a={AbilitySubject.Customer}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="pen-18" />}
+            text={intl.get('customer.drawer.action.edit')}
+            onClick={handleEditContact}
+          />
+          <NavbarDivider />
+        </Can>
+        <Can I={CustomerAction.Delete} a={AbilitySubject.Customer}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeleteCustomer}
+          />
+        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );
diff --git a/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.js b/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.js
index 1a7c3c051..d512f4386 100644
--- a/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.js
+++ b/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.js
@@ -14,8 +14,12 @@ import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import {
+  SaleEstimateAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
-import { Icon, FormattedMessage as T, MoreMenuItems } from 'components';
+import { Icon, FormattedMessage as T, MoreMenuItems, Can } from 'components';
 
 import { compose } from 'utils';
 
@@ -59,27 +63,33 @@ function EstimateDetailActionsBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="pen-18" />}
-          text={<T id={'edit_estimate'} />}
-          onClick={handleEditEstimate}
-        />
-        <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="print-16" />}
-          text={<T id={'print'} />}
-          onClick={handlePrintEstimate}
-        />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
-          text={<T id={'delete'} />}
-          intent={Intent.DANGER}
-          onClick={handleDeleteEstimate}
-        />
-        <NavbarDivider />
+        <Can I={SaleEstimateAction.Edit} a={AbilitySubject.Estimate}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="pen-18" />}
+            text={<T id={'edit_estimate'} />}
+            onClick={handleEditEstimate}
+          />
+          <NavbarDivider />
+        </Can>
+        <Can I={SaleEstimateAction.View} a={AbilitySubject.Estimate}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="print-16" />}
+            text={<T id={'print'} />}
+            onClick={handlePrintEstimate}
+          />
+        </Can>
+        <Can I={SaleEstimateAction.Delete} a={AbilitySubject.Estimate}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeleteEstimate}
+          />
+          <NavbarDivider />
+        </Can>
         <MoreMenuItems
           payload={{
             onNotifyViaSMS: handleNotifyViaSMS,
diff --git a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerActionBar.js b/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerActionBar.js
index f4472c86c..97eec5a7f 100644
--- a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerActionBar.js
+++ b/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerActionBar.js
@@ -8,8 +8,8 @@ import {
   Intent,
   NavbarDivider,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
-
+import { Can, FormattedMessage as T } from 'components';
+import { ExpenseAction, AbilitySubject } from '../../../common/abilityOption';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
@@ -44,20 +44,24 @@ function ExpenseDrawerActionBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="pen-18" />}
-          text={<T id={'edit_expense'} />}
-          onClick={handleEditExpense}
-        />
-        <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="trash-16" iconSize={16} />}
-          text={<T id={'delete'} />}
-          intent={Intent.DANGER}
-          onClick={handleDeleteExpense}
-        />
+        <Can I={ExpenseAction.Edit} a={AbilitySubject.Expense}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="pen-18" />}
+            text={<T id={'edit_expense'} />}
+            onClick={handleEditExpense}
+          />
+          <NavbarDivider />
+        </Can>
+        <Can I={ExpenseAction.Delete} a={AbilitySubject.Expense}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="trash-16" iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeleteExpense}
+          />
+        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );
diff --git a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailActionsBar.js b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailActionsBar.js
index e0231a3e9..a2fac2adb 100644
--- a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailActionsBar.js
+++ b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailActionsBar.js
@@ -7,7 +7,11 @@ import { useInventoryAdjustmentDrawerContext } from './InventoryAdjustmentDrawer
 
 import withAlertsActions from 'containers/Alert/withAlertActions';
 
-import { Icon, FormattedMessage as T } from 'components';
+import { Icon, FormattedMessage as T, Can } from 'components';
+import {
+  InventoryAdjustmentAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
 import { compose } from 'utils';
 
@@ -26,17 +30,22 @@ function InventoryAdjustmentDetailActionsBar({
   };
 
   return (
-    <DashboardActionsBar>
-      <NavbarGroup>
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
-          text={<T id={'delete'} />}
-          intent={Intent.DANGER}
-          onClick={handleDeleteInventoryAdjustment}
-        />
-      </NavbarGroup>
-    </DashboardActionsBar>
+    <Can
+      I={InventoryAdjustmentAction.Delete}
+      a={AbilitySubject.InventoryAdjustment}
+    >
+      <DashboardActionsBar>
+        <NavbarGroup>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeleteInventoryAdjustment}
+          />
+        </NavbarGroup>
+      </DashboardActionsBar>
+    </Can>
   );
 }
 
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js
index b4fa903b7..e71ce8243 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js
@@ -16,7 +16,12 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { If, Icon, FormattedMessage as T } from 'components';
+import { If, Can, Icon, FormattedMessage as T } from 'components';
+import {
+  SaleInvoiceAction,
+  PaymentReceiveAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
 import { compose } from 'utils';
 
@@ -78,43 +83,54 @@ function InvoiceDetailActionsBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="pen-18" />}
-          text={<T id={'edit_invoice'} />}
-          onClick={handleEditInvoice}
-        />
-        <NavbarDivider />
-        <If condition={invoice.is_delivered && !invoice.is_fully_paid}>
+        <Can I={SaleInvoiceAction.Edit} a={AbilitySubject.Invoice}>
           <Button
             className={Classes.MINIMAL}
-            icon={<Icon icon="quick-payment-16" iconSize={16} />}
-            text={<T id={'add_payment'} />}
-            onClick={handleQuickPaymentInvoice}
+            icon={<Icon icon="pen-18" />}
+            text={<T id={'edit_invoice'} />}
+            onClick={handleEditInvoice}
           />
-        </If>
-        <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="print-16" />}
-          text={<T id={'print'} />}
-          onClick={handlePrintInvoice}
-        />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
-          text={<T id={'delete'} />}
-          intent={Intent.DANGER}
-          onClick={handleDeleteInvoice}
-        />
-        <NavbarDivider />
-        <BadDebtMenuItem
-          payload={{
-            onBadDebt: handleBadDebtInvoice,
-            onCancelBadDebt: handleCancelBadDebtInvoice,
-            onNotifyViaSMS: handleNotifyViaSMS,
-          }}
-        />
+
+          <NavbarDivider />
+        </Can>
+        <Can I={PaymentReceiveAction.Create} a={AbilitySubject.PaymentReceive}>
+          <If condition={invoice.is_delivered && !invoice.is_fully_paid}>
+            <Button
+              className={Classes.MINIMAL}
+              icon={<Icon icon="quick-payment-16" iconSize={16} />}
+              text={<T id={'add_payment'} />}
+              onClick={handleQuickPaymentInvoice}
+            />
+          </If>
+          <NavbarDivider />
+        </Can>
+        <Can I={SaleInvoiceAction.View} a={AbilitySubject.Invoice}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="print-16" />}
+            text={<T id={'print'} />}
+            onClick={handlePrintInvoice}
+          />
+        </Can>
+        <Can I={SaleInvoiceAction.Delete} a={AbilitySubject.Invoice}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeleteInvoice}
+          />
+          <NavbarDivider />
+        </Can>
+        <Can I={SaleInvoiceAction.Writeoff} a={AbilitySubject.Invoice}>
+          <BadDebtMenuItem
+            payload={{
+              onBadDebt: handleBadDebtInvoice,
+              onCancelBadDebt: handleCancelBadDebtInvoice,
+              onNotifyViaSMS: handleNotifyViaSMS,
+            }}
+          />
+        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemDetailActionsBar.js b/src/containers/Drawers/ItemDetailDrawer/ItemDetailActionsBar.js
index 8db499898..39489bb90 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemDetailActionsBar.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemDetailActionsBar.js
@@ -10,11 +10,12 @@ import {
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
 import { useItemDetailDrawerContext } from './ItemDetailDrawerProvider';
+import { ItemAction, AbilitySubject } from '../../../common/abilityOption';
 
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Icon, FormattedMessage as T } from 'components';
+import { Icon, FormattedMessage as T, Can } from 'components';
 
 import { compose } from 'utils';
 
@@ -47,20 +48,25 @@ function ItemDetailActionsBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="pen-18" />}
-          text={<T id={'edit_item'} />}
-          onClick={handleEditItem}
-        />
-        <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
-          text={<T id={'delete'} />}
-          intent={Intent.DANGER}
-          onClick={handleDeleteItem}
-        />
+        <Can I={ItemAction.Edit} a={AbilitySubject.Item}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="pen-18" />}
+            text={<T id={'edit_item'} />}
+            onClick={handleEditItem}
+          />
+
+          <NavbarDivider />
+        </Can>
+        <Can I={ItemAction.Delete} a={AbilitySubject.Item}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeleteItem}
+          />
+        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );
diff --git a/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerActionBar.js b/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerActionBar.js
index f8c5fb1b6..007edf042 100644
--- a/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerActionBar.js
+++ b/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerActionBar.js
@@ -8,14 +8,19 @@ import {
   Intent,
   NavbarDivider,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
+import { Can, FormattedMessage as T } from 'components';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { compose } from 'utils';
 import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
+import {
+  ManualJournalAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
+
+import { compose } from 'utils';
 
 /**
  * Manual journal action bar.
@@ -44,20 +49,24 @@ function ManualJournalDrawerActionBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="pen-18" />}
-          text={<T id={'edit_journal'} />}
-          onClick={handleEditManualJournal}
-        />
-        <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="trash-16" iconSize={16} />}
-          text={<T id={'delete'} />}
-          intent={Intent.DANGER}
-          onClick={handleDeleteManualJournal}
-        />
+        <Can I={ManualJournalAction.Edit} a={AbilitySubject.ManualJournal}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="pen-18" />}
+            text={<T id={'edit_journal'} />}
+            onClick={handleEditManualJournal}
+          />
+          <NavbarDivider />
+        </Can>
+        <Can I={ManualJournalAction.Delete} a={AbilitySubject.ManualJournal}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="trash-16" iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeleteManualJournal}
+          />
+        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );
diff --git a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailActionsBar.js b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailActionsBar.js
index 4c3d4eb47..d0731aeac 100644
--- a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailActionsBar.js
+++ b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailActionsBar.js
@@ -16,8 +16,11 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Icon, FormattedMessage as T } from 'components';
-
+import { Can, Icon, FormattedMessage as T } from 'components';
+import {
+  PaymentMadeAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 import { compose } from 'utils';
 
 /**
@@ -48,20 +51,24 @@ function PaymentMadeDetailActionsBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="pen-18" />}
-          text={<T id={'edit_payment_made'} />}
-          onClick={handleEditPaymentMade}
-        />
-        <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
-          text={<T id={'delete'} />}
-          intent={Intent.DANGER}
-          onClick={handleDeletePaymentMade}
-        />
+        <Can I={PaymentMadeAction.Edit} a={AbilitySubject.PaymentMade}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="pen-18" />}
+            text={<T id={'edit_payment_made'} />}
+            onClick={handleEditPaymentMade}
+          />
+          <NavbarDivider />
+        </Can>
+        <Can I={PaymentMadeAction.Delete} a={AbilitySubject.PaymentMade}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeletePaymentMade}
+          />
+        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );
diff --git a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js
index 94bb19c65..61af4b4e2 100644
--- a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js
+++ b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js
@@ -16,7 +16,11 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Icon, FormattedMessage as T, MoreMenuItems } from 'components';
+import { Can, Icon, FormattedMessage as T, MoreMenuItems } from 'components';
+import {
+  PaymentReceiveAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
 import { compose } from 'utils';
 
@@ -57,21 +61,25 @@ function PaymentReceiveActionsBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="pen-18" />}
-          text={<T id={'edit_payment_receive'} />}
-          onClick={handleEditPaymentReceive}
-        />
-        <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
-          text={<T id={'delete'} />}
-          intent={Intent.DANGER}
-          onClick={handleDeletePaymentReceive}
-        />
-        <NavbarDivider />
+        <Can I={PaymentReceiveAction.Edit} a={AbilitySubject.PaymentReceive}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="pen-18" />}
+            text={<T id={'edit_payment_receive'} />}
+            onClick={handleEditPaymentReceive}
+          />
+          <NavbarDivider />
+        </Can>
+        <Can I={PaymentReceiveAction.Delete} a={AbilitySubject.PaymentReceive}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeletePaymentReceive}
+          />
+          <NavbarDivider />
+        </Can>
         <MoreMenuItems
           payload={{
             onNotifyViaSMS: handleNotifyViaSMS,
diff --git a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.js b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.js
index 608805a00..1931905b8 100644
--- a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.js
+++ b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.js
@@ -14,8 +14,12 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Icon, FormattedMessage as T, MoreMenuItems } from 'components';
+import { Can, Icon, FormattedMessage as T, MoreMenuItems } from 'components';
 import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';
+import {
+  SaleReceiptAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
 import { safeCallback, compose } from 'utils';
 
@@ -54,27 +58,33 @@ function ReceiptDetailActionBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="pen-18" />}
-          text={<T id={'edit_receipt'} />}
-          onClick={safeCallback(onEditReceipt)}
-        />
-        <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="print-16" />}
-          text={<T id={'print'} />}
-          onClick={safeCallback(onPrintReceipt)}
-        />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
-          text={<T id={'delete'} />}
-          intent={Intent.DANGER}
-          onClick={safeCallback(onDeleteReceipt)}
-        />
-        <NavbarDivider />
+        <Can I={SaleReceiptAction.Edit} a={AbilitySubject.Receipt}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="pen-18" />}
+            text={<T id={'edit_receipt'} />}
+            onClick={safeCallback(onEditReceipt)}
+          />
+          <NavbarDivider />
+        </Can>
+        <Can I={SaleReceiptAction.View} a={AbilitySubject.Receipt}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="print-16" />}
+            text={<T id={'print'} />}
+            onClick={safeCallback(onPrintReceipt)}
+          />
+        </Can>
+        <Can I={SaleReceiptAction.Delete} a={AbilitySubject.Receipt}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={safeCallback(onDeleteReceipt)}
+          />
+          <NavbarDivider />
+        </Can>
         <MoreMenuItems
           payload={{
             onNotifyViaSMS: handleNotifyViaSMS,
diff --git a/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsActionsBar.js b/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsActionsBar.js
index 5ed4a1c28..86854bda2 100644
--- a/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsActionsBar.js
+++ b/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsActionsBar.js
@@ -20,8 +20,13 @@ import { useVendorDetailsDrawerContext } from './VendorDetailsDrawerProvider';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Icon, FormattedMessage as T } from 'components';
-
+import { Can, Icon, FormattedMessage as T } from 'components';
+import {
+  AbilitySubject,
+  SaleInvoiceAction,
+  PaymentMadeAction,
+  VendorAction,
+} from '../../../common/abilityOption';
 import { safeCallback, compose } from 'utils';
 
 /**
@@ -64,14 +69,18 @@ function VendorDetailsActionsBar({
         <Popover
           content={
             <Menu>
-              <MenuItem
-                text={<T id={'vendor.drawer.action.new_invoice'} />}
-                onClick={handleNewInvoiceClick}
-              />
-              <MenuItem
-                text={<T id={'vendor.drawer.action.new_payment'} />}
-                onClick={handleNewPaymentClick}
-              />
+              <Can I={SaleInvoiceAction.Create} a={AbilitySubject.Invoice}>
+                <MenuItem
+                  text={<T id={'vendor.drawer.action.new_invoice'} />}
+                  onClick={handleNewInvoiceClick}
+                />
+              </Can>
+              <Can I={PaymentMadeAction.Create} a={AbilitySubject.PaymentMade}>
+                <MenuItem
+                  text={<T id={'vendor.drawer.action.new_payment'} />}
+                  onClick={handleNewPaymentClick}
+                />
+              </Can>
             </Menu>
           }
           minimal={true}
@@ -84,23 +93,25 @@ function VendorDetailsActionsBar({
             icon={<Icon icon={'plus'} />}
           />
         </Popover>
-
         <NavbarDivider />
-
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="pen-18" />}
-          text={<T id={'vendor.drawer.action.edit'} />}
-          onClick={safeCallback(onEditContact)}
-        />
-        <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
-          text={<T id={'vendor.drawer.action.delete'} />}
-          intent={Intent.DANGER}
-          onClick={safeCallback(onDeleteContact)}
-        />
+        <Can I={VendorAction.Edit} a={AbilitySubject.Vendor}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="pen-18" />}
+            text={<T id={'vendor.drawer.action.edit'} />}
+            onClick={safeCallback(onEditContact)}
+          />
+          <NavbarDivider />
+        </Can>
+        <Can I={VendorAction.Delete} a={AbilitySubject.Vendor}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'vendor.drawer.action.delete'} />}
+            intent={Intent.DANGER}
+            onClick={safeCallback(onDeleteContact)}
+          />
+        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );
diff --git a/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.js b/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.js
index 6b4e59ec5..c3774ab6c 100644
--- a/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.js
+++ b/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.js
@@ -15,6 +15,7 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 
 import {
   If,
+  Can,
   DashboardRowsHeightButton,
   DashboardActionViewsList,
   DashboardFilterButton,
@@ -22,6 +23,7 @@ import {
   FormattedMessage as T,
 } from 'components';
 
+import { ExpenseAction, AbilitySubject } from '../../../common/abilityOption';
 import { useRefreshExpenses } from 'hooks/query/expenses';
 import { useExpensesListContext } from './ExpensesListProvider';
 
@@ -92,13 +94,14 @@ function ExpensesActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="plus" />}
-          text={<T id={'new_expense'} />}
-          onClick={onClickNewExpense}
-        />
+        <Can I={ExpenseAction.Create} a={AbilitySubject.Expense}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="plus" />}
+            text={<T id={'new_expense'} />}
+            onClick={onClickNewExpense}
+          />
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: expensesFilterConditions,
diff --git a/src/containers/Expenses/ExpensesLanding/ExpensesEmptyStatus.js b/src/containers/Expenses/ExpensesLanding/ExpensesEmptyStatus.js
index 84ed56b0e..8d21a59bd 100644
--- a/src/containers/Expenses/ExpensesLanding/ExpensesEmptyStatus.js
+++ b/src/containers/Expenses/ExpensesLanding/ExpensesEmptyStatus.js
@@ -2,7 +2,8 @@ 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 { AbilitySubject, ExpenseAction } from '../../../common/abilityOption';
 
 export default function InvoicesEmptyStatus() {
   const history = useHistory();
@@ -17,19 +18,21 @@ export default function InvoicesEmptyStatus() {
       }
       action={
         <>
-          <Button
-            intent={Intent.PRIMARY}
-            large={true}
-            onClick={() => {
-              history.push('/expenses/new');
-            }}
-          >
-            <T id={'new_expense'} />
-          </Button>
+          <Can I={ExpenseAction.Create} a={AbilitySubject.Expense}>
+            <Button
+              intent={Intent.PRIMARY}
+              large={true}
+              onClick={() => {
+                history.push('/expenses/new');
+              }}
+            >
+              <T id={'new_expense'} />
+            </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/Expenses/ExpensesLanding/components.js b/src/containers/Expenses/ExpensesLanding/components.js
index f288c1fc2..14f77d23b 100644
--- a/src/containers/Expenses/ExpensesLanding/components.js
+++ b/src/containers/Expenses/ExpensesLanding/components.js
@@ -12,13 +12,14 @@ import {
   MenuDivider,
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-
+import { ExpenseAction, AbilitySubject } from '../../../common/abilityOption';
 import {
   FormatDateCell,
   FormattedMessage as T,
   Money,
   Icon,
   If,
+  Can,
 } from 'components';
 import { safeCallback } from 'utils';
 
@@ -54,25 +55,31 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <MenuDivider />
-      <If condition={!original.is_published}>
+      <Can I={ExpenseAction.Edit} a={AbilitySubject.Expense}>
+        <MenuDivider />
+        <If condition={!original.is_published}>
+          <MenuItem
+            icon={<Icon icon={'arrow-to-top'} size={16} />}
+            text={intl.get('publish_expense')}
+            onClick={safeCallback(onPublish, original)}
+          />
+        </If>
+      </Can>
+      <Can I={ExpenseAction.Edit} a={AbilitySubject.Expense}>
         <MenuItem
-          icon={<Icon icon={'arrow-to-top'} size={16} />}
-          text={intl.get('publish_expense')}
-          onClick={safeCallback(onPublish, original)}
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('edit_expense')}
+          onClick={safeCallback(onEdit, original)}
         />
-      </If>
-      <MenuItem
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('edit_expense')}
-        onClick={safeCallback(onEdit, original)}
-      />
-      <MenuItem
-        icon={<Icon icon="trash-16" iconSize={16} />}
-        text={intl.get('delete_expense')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-      />
+      </Can>
+      <Can I={ExpenseAction.Delete} a={AbilitySubject.Expense}>
+        <MenuItem
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          text={intl.get('delete_expense')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+        />
+      </Can>
     </Menu>
   );
 }
diff --git a/src/containers/FinancialStatements/FilterFinancialReports.js b/src/containers/FinancialStatements/FilterFinancialReports.js
new file mode 100644
index 000000000..ea3e8c1a8
--- /dev/null
+++ b/src/containers/FinancialStatements/FilterFinancialReports.js
@@ -0,0 +1,23 @@
+import { isEmpty } from 'lodash';
+import { useAbilityContext } from '../../hooks';
+
+function useFilterFinancialReports(financialSection) {
+  const ability = useAbilityContext();
+
+  const section = financialSection
+    .map((section) => {
+      const reports = section.reports.filter((report) => {
+        return ability.can(report.ability, report.subject);
+      });
+
+      return {
+        sectionTitle: section.sectionTitle,
+        reports,
+      };
+    })
+    .filter(({ reports }) => !isEmpty(reports));
+
+  return section;
+}
+
+export default useFilterFinancialReports;
diff --git a/src/containers/FinancialStatements/FinancialReports.js b/src/containers/FinancialStatements/FinancialReports.js
index 19d576f51..5f6f770a6 100644
--- a/src/containers/FinancialStatements/FinancialReports.js
+++ b/src/containers/FinancialStatements/FinancialReports.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { For } from 'components';
-
+import useFilterFinancialReports from './FilterFinancialReports';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import {
   financialReportMenus,
@@ -37,13 +37,18 @@ function FinancialReportsSection({ sectionTitle, reports }) {
  * Financial reports.
  */
 export default function FinancialReports() {
+  const financialReportMenu = useFilterFinancialReports(financialReportMenus);
+  const SalesAndPurchasesReportMenu = useFilterFinancialReports(
+    SalesAndPurchasesReportMenus,
+  );
+
   return (
     <DashboardInsider name={'financial-reports'}>
       <div class="financial-reports">
-        <For render={FinancialReportsSection} of={financialReportMenus} />
+        <For render={FinancialReportsSection} of={financialReportMenu} />
         <For
           render={FinancialReportsSection}
-          of={SalesAndPurchasesReportMenus}
+          of={SalesAndPurchasesReportMenu}
         />
       </div>
     </DashboardInsider>
diff --git a/src/containers/GlobalErrors/GlobalErrors.js b/src/containers/GlobalErrors/GlobalErrors.js
index 55a45382c..20ae7dae9 100644
--- a/src/containers/GlobalErrors/GlobalErrors.js
+++ b/src/containers/GlobalErrors/GlobalErrors.js
@@ -1,7 +1,5 @@
-import React from 'react';
 import { Intent } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import { useHistory } from 'react-router-dom';
 import AppToaster from 'components/AppToaster';
 
 import withGlobalErrors from './withGlobalErrors';
@@ -30,7 +28,6 @@ function GlobalErrors({
       toastKeySessionExpired,
     );
   }
-
   if (globalErrors.session_expired) {
     toastKeySomethingWrong = AppToaster.show(
       {
@@ -43,6 +40,18 @@ function GlobalErrors({
       toastKeySomethingWrong,
     );
   }
+  if (globalErrors.access_denied) {
+    toastKeySomethingWrong = AppToaster.show(
+      {
+        message: 'You do not have permissions to access this page.',
+        intent: Intent.DANGER,
+        onDismiss: () => {
+          globalErrorsSet({ access_denied: false });
+        },
+      },
+      toastKeySomethingWrong,
+    );
+  }
   return null;
 }
 
diff --git a/src/containers/Homepage/ShortcutBoxesSection.js b/src/containers/Homepage/ShortcutBoxesSection.js
index cf712e952..d9bcb90f0 100644
--- a/src/containers/Homepage/ShortcutBoxesSection.js
+++ b/src/containers/Homepage/ShortcutBoxesSection.js
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 import { For } from 'components';
 
 import 'style/pages/FinancialStatements/FinancialSheets.scss';
+import { useFilterShortcutBoxesSection } from './components';
 
 function ShortcutBox({ title, link, description }) {
   return (
@@ -27,5 +28,6 @@ function ShortcutBoxes({ sectionTitle, shortcuts }) {
 }
 
 export default function ShortcutBoxesSection({ section }) {
-  return <For render={ShortcutBoxes} of={section} />;
+  const BoxSection = useFilterShortcutBoxesSection(section);
+  return <For render={ShortcutBoxes} of={BoxSection} />;
 }
diff --git a/src/containers/Homepage/components.js b/src/containers/Homepage/components.js
new file mode 100644
index 000000000..b2701ef28
--- /dev/null
+++ b/src/containers/Homepage/components.js
@@ -0,0 +1,18 @@
+import { isEmpty } from 'lodash';
+import { useAbilityContext } from '../../hooks';
+
+export const useFilterShortcutBoxesSection = (section) => {
+  const ability = useAbilityContext();
+
+  return section
+    .map(({ sectionTitle, shortcuts }) => {
+      const shortcut = shortcuts.filter((shortcuts) => {
+        return ability.can(shortcuts.ability, shortcuts.subject);
+      });
+      return {
+        sectionTitle: sectionTitle,
+        shortcuts: shortcut,
+      };
+    })
+    .filter(({ shortcuts }) => !isEmpty(shortcuts));
+};
diff --git a/src/containers/InventoryAdjustments/components.js b/src/containers/InventoryAdjustments/components.js
index eaa923e08..49e74316f 100644
--- a/src/containers/InventoryAdjustments/components.js
+++ b/src/containers/InventoryAdjustments/components.js
@@ -12,10 +12,14 @@ import {
 import intl from 'react-intl-universal';
 import moment from 'moment';
 
-import { FormattedMessage as T } from 'components';
+import { FormattedMessage as T, Can } from 'components';
 import { isNumber } from 'lodash';
 import { Icon, Money, If } from 'components';
 import { isBlank, safeCallback } from 'utils';
+import {
+  InventoryAdjustmentAction,
+  AbilitySubject,
+} from '../../common/abilityOption';
 
 /**
  * Publish accessor
@@ -102,20 +106,31 @@ export const ActionsMenu = ({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <MenuDivider />
-      <If condition={!original.is_published}>
+
+      <Can
+        I={InventoryAdjustmentAction.Create}
+        a={AbilitySubject.InventoryAdjustment}
+      >
+        <MenuDivider />
+        <If condition={!original.is_published}>
+          <MenuItem
+            icon={<Icon icon={'arrow-to-top'} size={16} />}
+            text={intl.get('publish_adjustment')}
+            onClick={safeCallback(onPublish, original)}
+          />
+        </If>
+      </Can>
+      <Can
+        I={InventoryAdjustmentAction.Delete}
+        a={AbilitySubject.InventoryAdjustment}
+      >
         <MenuItem
-          icon={<Icon icon={'arrow-to-top'} size={16} />}
-          text={intl.get('publish_adjustment')}
-          onClick={safeCallback(onPublish, original)}
+          text={intl.get('delete_adjustment')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
         />
-      </If>
-      <MenuItem
-        text={intl.get('delete_adjustment')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-        icon={<Icon icon="trash-16" iconSize={16} />}
-      />
+      </Can>
     </Menu>
   );
 };
diff --git a/src/containers/Items/ItemsActionsBar.js b/src/containers/Items/ItemsActionsBar.js
index e882ac19d..6468ab7df 100644
--- a/src/containers/Items/ItemsActionsBar.js
+++ b/src/containers/Items/ItemsActionsBar.js
@@ -14,6 +14,7 @@ import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import Icon from 'components/Icon';
 import {
   If,
+  Can,
   DashboardActionViewsList,
   AdvancedFilterPopover,
   DashboardFilterButton,
@@ -30,8 +31,7 @@ import withSettings from '../Settings/withSettings';
 import { compose } from 'utils';
 import withSettingsActions from '../Settings/withSettingsActions';
 
-
-import { Can, AbilityContext } from '../../components/Abilities';
+import { ItemAction, AbilitySubject } from '../../common/abilityOption';
 
 /**
  * Items actions bar.
@@ -60,8 +60,6 @@ function ItemsActionsBar({
   // Items refresh action.
   const { refresh } = useRefreshItems();
 
-  const { ability } = React.useContext(AbilityContext);
-
   // History context.
   const history = useHistory();
 
@@ -106,14 +104,14 @@ function ItemsActionsBar({
         />
         <NavbarDivider />
 
-        {/* <Can I="create" a="Item" ability={ability}> */}
+        <Can I={ItemAction.Create} a={AbilitySubject.Item}>
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon="plus" />}
             text={<T id={'new_item'} />}
             onClick={onClickNewItem}
           />
-        {/* </Can> */}
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: itemsFilterRoles,
@@ -155,11 +153,13 @@ function ItemsActionsBar({
           onChange={handleTableRowSizeChange}
         />
         <NavbarDivider />
-        <Switch
-          labelElement={<T id={'inactive'} />}
-          defaultChecked={itemsInactiveMode}
-          onChange={handleInactiveSwitchChange}
-        />
+        <Can I={ItemAction.Edit} a={AbilitySubject.Item}>
+          <Switch
+            labelElement={<T id={'inactive'} />}
+            defaultChecked={itemsInactiveMode}
+            onChange={handleInactiveSwitchChange}
+          />
+        </Can>
       </NavbarGroup>
 
       <NavbarGroup align={Alignment.RIGHT}>
diff --git a/src/containers/Items/ItemsEmptyStatus.js b/src/containers/Items/ItemsEmptyStatus.js
index 3a0c53fe3..f908276f6 100644
--- a/src/containers/Items/ItemsEmptyStatus.js
+++ b/src/containers/Items/ItemsEmptyStatus.js
@@ -2,7 +2,8 @@ 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 { ItemAction, AbilitySubject } from '../../common/abilityOption';
 
 export default function ItemsEmptyStatus() {
   const history = useHistory();
@@ -17,19 +18,21 @@ export default function ItemsEmptyStatus() {
       }
       action={
         <>
-          <Button
-            intent={Intent.PRIMARY}
-            large={true}
-            onClick={() => {
-              history.push('/items/new');
-            }}
-          >
-            <T id={'new_item'} />
-          </Button>
+          <Can I={ItemAction.Create} a={AbilitySubject.Item}>
+            <Button
+              intent={Intent.PRIMARY}
+              large={true}
+              onClick={() => {
+                history.push('/items/new');
+              }}
+            >
+              <T id={'new_item'} />
+            </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/Items/ItemsUniversalSearch.js b/src/containers/Items/ItemsUniversalSearch.js
index a261ed3fd..b63ced91b 100644
--- a/src/containers/Items/ItemsUniversalSearch.js
+++ b/src/containers/Items/ItemsUniversalSearch.js
@@ -1,7 +1,10 @@
 import intl from 'react-intl-universal';
-import { RESOURCES_TYPES } from '../../common/resourcesTypes';
+
 import withDrawerActions from '../Drawer/withDrawerActions';
 
+import { RESOURCES_TYPES } from '../../common/resourcesTypes';
+import { AbilitySubject, ItemAction } from '../../common/abilityOption';
+
 /**
  * Item univrsal search item select action.
  */
@@ -46,4 +49,8 @@ export const universalSearchItemBind = () => ({
   optionItemLabel: intl.get('items'),
   selectItemAction: ItemUniversalSearchSelectAction,
   itemSelect: transfromItemsToSearch,
+  permission: {
+    ability: ItemAction.View,
+    subject: AbilitySubject.Item,
+  },
 });
diff --git a/src/containers/Items/components.js b/src/containers/Items/components.js
index d573f4aaf..bbc01fb84 100644
--- a/src/containers/Items/components.js
+++ b/src/containers/Items/components.js
@@ -12,8 +12,13 @@ import {
 import intl from 'react-intl-universal';
 import { isNumber } from 'lodash';
 
-import { FormattedMessage as T, Icon, Money, If } from 'components';
+import { FormattedMessage as T, Icon, Money, If, Can } from 'components';
 import { isBlank, safeCallback } from 'utils';
+import {
+  AbilitySubject,
+  ItemAction,
+  InventoryAdjustmentAction,
+} from '../../common/abilityOption';
 
 /**
  * Publish accessor
@@ -90,44 +95,58 @@ export function ItemsActionMenuList({
         text={<T id={'view_details'} />}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <MenuDivider />
-      <MenuItem
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('edit_item')}
-        onClick={safeCallback(onEditItem, original)}
-      />
-      <MenuItem
-        icon={<Icon icon="duplicate-16" />}
-        text={intl.get('duplicate')}
-        onClick={safeCallback(onDuplicate, original)}
-      />
-      <If condition={original.active}>
+      <Can I={ItemAction.Edit} a={AbilitySubject.Item}>
+        <MenuDivider />
         <MenuItem
-          text={intl.get('inactivate_item')}
-          icon={<Icon icon="pause-16" iconSize={16} />}
-          onClick={safeCallback(onInactivateItem, original)}
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('edit_item')}
+          onClick={safeCallback(onEditItem, original)}
         />
-      </If>
-      <If condition={!original.active}>
+      </Can>
+      <Can I={ItemAction.Create} a={AbilitySubject.Item}>
         <MenuItem
-          text={intl.get('activate_item')}
-          icon={<Icon icon="play-16" iconSize={16} />}
-          onClick={safeCallback(onActivateItem, original)}
+          icon={<Icon icon="duplicate-16" />}
+          text={intl.get('duplicate')}
+          onClick={safeCallback(onDuplicate, original)}
         />
-      </If>
-      <If condition={original.type === 'inventory'}>
+      </Can>
+      <Can I={ItemAction.Edit} a={AbilitySubject.Item}>
+        <If condition={original.active}>
+          <MenuItem
+            text={intl.get('inactivate_item')}
+            icon={<Icon icon="pause-16" iconSize={16} />}
+            onClick={safeCallback(onInactivateItem, original)}
+          />
+        </If>
+
+        <If condition={!original.active}>
+          <MenuItem
+            text={intl.get('activate_item')}
+            icon={<Icon icon="play-16" iconSize={16} />}
+            onClick={safeCallback(onActivateItem, original)}
+          />
+        </If>
+      </Can>
+      <Can
+        I={InventoryAdjustmentAction.Edit}
+        a={AbilitySubject.InventoryAdjustment}
+      >
+        <If condition={original.type === 'inventory'}>
+          <MenuItem
+            text={intl.get('make_adjustment')}
+            icon={<Icon icon={'swap-vert'} iconSize={16} />}
+            onClick={safeCallback(onMakeAdjustment, original)}
+          />
+        </If>
+      </Can>
+      <Can I={ItemAction.Delete} a={AbilitySubject.Item}>
         <MenuItem
-          text={intl.get('make_adjustment')}
-          icon={<Icon icon={'swap-vert'} iconSize={16} />}
-          onClick={safeCallback(onMakeAdjustment, original)}
+          text={intl.get('delete_item')}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          onClick={safeCallback(onDeleteItem, original)}
+          intent={Intent.DANGER}
         />
-      </If>
-      <MenuItem
-        text={intl.get('delete_item')}
-        icon={<Icon icon="trash-16" iconSize={16} />}
-        onClick={safeCallback(onDeleteItem, original)}
-        intent={Intent.DANGER}
-      />
+      </Can>
     </Menu>
   );
 }
diff --git a/src/containers/KeyboardShortcuts/ShortcutsTable.js b/src/containers/KeyboardShortcuts/ShortcutsTable.js
index da5974556..2d70b6d85 100644
--- a/src/containers/KeyboardShortcuts/ShortcutsTable.js
+++ b/src/containers/KeyboardShortcuts/ShortcutsTable.js
@@ -1,14 +1,13 @@
 import React, { useMemo } from 'react';
 import { DataTable } from 'components';
-import { FormattedMessage as T } from 'components';
 import intl from 'react-intl-universal';
-import keyboardShortcuts from 'common/keyboardShortcutsOptions';
+import { useKeywordShortcuts } from '../../hooks/dashboard';
 
 /**
  *  keyboard shortcuts table.
  */
-function ShortcutsTable() {
-  
+export default function ShortcutsTable() {
+  const keywordShortcuts = useKeywordShortcuts();
 
   const columns = useMemo(
     () => [
@@ -30,8 +29,5 @@ function ShortcutsTable() {
     ],
     [],
   );
-
-  return <DataTable columns={columns} data={keyboardShortcuts} />;
+  return <DataTable columns={columns} data={keywordShortcuts} />;
 }
-
-export default ShortcutsTable;
diff --git a/src/containers/Preferences/Currencies/components.js b/src/containers/Preferences/Currencies/components.js
index 51eb2371c..431628b27 100644
--- a/src/containers/Preferences/Currencies/components.js
+++ b/src/containers/Preferences/Currencies/components.js
@@ -67,7 +67,7 @@ export function useCurrenciesTableColumns() {
         width: 120,
       },
       {
-        Header: 'Currency sign',
+        Header: intl.get('currency_sign'),
         width: 120,
         accessor: 'currency_sign'
       },
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.js b/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.js
index 37f352b2b..a1af99e4d 100644
--- a/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.js
+++ b/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.js
@@ -1,7 +1,8 @@
 import React from 'react';
+import { useHistory } from 'react-router-dom';
 import intl from 'react-intl-universal';
 import { Formik } from 'formik';
-import { defaultTo, sumBy, isEmpty } from 'lodash';
+import { isEmpty } from 'lodash';
 
 import 'style/pages/Preferences/Roles/Form.scss';
 
@@ -12,7 +13,11 @@ import { AppToaster, FormattedMessage as T } from 'components';
 import { CreateRolesFormSchema, EditRolesFormSchema } from './RolesForm.schema';
 
 import { useRolesFormContext } from './RolesFormProvider';
-import { transformToArray } from './utils';
+import {
+  getNewRoleInitialValues,
+  transformToArray,
+  transformToObject,
+} from './utils';
 
 import RolesFormContent from './RolesFormContent';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
@@ -32,24 +37,31 @@ function RolesForm({
   // #withDashboardActions
   changePreferencesPageTitle,
 }) {
+  // History context.
+  const history = useHistory();
+
+  // Role form context.
   const {
     isNewMode,
     createRolePermissionMutate,
     editRolePermissionMutate,
-    permissionSchema,
+    permissionsSchema,
+    role,
     roleId,
   } = useRolesFormContext();
 
   // Initial values.
   const initialValues = {
     ...defaultValues,
-    ...transformToForm(permissionSchema, defaultValues),
+    ...(!isEmpty(role)
+      ? transformToForm(transformToObject(role), defaultValues)
+      : getNewRoleInitialValues(permissionsSchema)),
   };
-
   React.useEffect(() => {
     changePreferencesPageTitle(<T id={'roles.label'} />);
   }, [changePreferencesPageTitle]);
 
+  // Handle the form submit.
   const handleFormSubmit = (values, { setSubmitting }) => {
     const permission = transformToArray(values);
     const form = {
@@ -67,6 +79,7 @@ function RolesForm({
         intent: Intent.SUCCESS,
       });
       setSubmitting(false);
+      history.push('/preferences/users');
     };
 
     const onError = (errors) => {
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.schema.js b/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.schema.js
index ab1012778..b2f40ecdb 100644
--- a/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.schema.js
+++ b/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.schema.js
@@ -3,7 +3,7 @@ import intl from 'react-intl-universal';
 import { DATATYPES_LENGTH } from 'common/dataTypes';
 
 const Schema = Yup.object().shape({
-  role_name: Yup.string().required().label(intl.get('roles.label.role_name')),
+  role_name: Yup.string().required().label(intl.get('roles.label.role_name_')),
   role_description: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
 
   permissions: Yup.object().shape({
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RolesFormPage.js b/src/containers/Preferences/Users/Roles/RolesForm/RolesFormPage.js
index a307d9195..14accbe68 100644
--- a/src/containers/Preferences/Users/Roles/RolesForm/RolesFormPage.js
+++ b/src/containers/Preferences/Users/Roles/RolesForm/RolesFormPage.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useParams } from 'react-router-dom';
 import RolesForm from './RolesForm';
 import { RolesFormProvider } from './RolesFormProvider';
 
@@ -6,8 +7,11 @@ import { RolesFormProvider } from './RolesFormProvider';
  * Roles Form page.
  */
 export default function RolesFormPage() {
+  const { id } = useParams();
+  const idInteger = parseInt(id, 10);
+
   return (
-    <RolesFormProvider roleId={undefined}>
+    <RolesFormProvider roleId={idInteger}>
       <RolesForm />
     </RolesFormProvider>
   );
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RolesFormProvider.js b/src/containers/Preferences/Users/Roles/RolesForm/RolesFormProvider.js
index 3e8cb2982..06fb0d076 100644
--- a/src/containers/Preferences/Users/Roles/RolesForm/RolesFormProvider.js
+++ b/src/containers/Preferences/Users/Roles/RolesForm/RolesFormProvider.js
@@ -25,29 +25,27 @@ function RolesFormProvider({ roleId, ...props }) {
   const { mutateAsync: editRolePermissionMutate } =
     useEditRolePermissionSchema();
 
+  // Retrieve permissions schema.
   const {
     data: permissionsSchema,
     isLoading: isPermissionsSchemaLoading,
     isFetching: isPermissionsSchemaFetching,
   } = usePermissionsSchema();
 
-  // const roleId = 6;
-
-  const { data: permission, isLoading: isPermissionLoading } =
+  const { data: role, isLoading: isPermissionLoading } =
     useRolePermission(roleId, {
       enabled: !!roleId,
     });
 
+  // Detarmines whether the new or edit mode.
   const isNewMode = !roleId;
 
-  const permissionSchema = transformToObject(permission);
-
   // Provider state.
   const provider = {
     isNewMode,
     roleId,
+    role,
     permissionsSchema,
-    permissionSchema,
     isPermissionsSchemaLoading,
     isPermissionsSchemaFetching,
     createRolePermissionMutate,
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/utils.js b/src/containers/Preferences/Users/Roles/RolesForm/utils.js
index bdb6ef36a..3d73bb7bf 100644
--- a/src/containers/Preferences/Users/Roles/RolesForm/utils.js
+++ b/src/containers/Preferences/Users/Roles/RolesForm/utils.js
@@ -1,5 +1,3 @@
-import { isEmpty } from 'lodash';
-
 export const transformToArray = ({ permissions }) => {
   return Object.keys(permissions).map((index) => {
     const [value, key] = index.split('/');
@@ -12,16 +10,44 @@ export const transformToArray = ({ permissions }) => {
   });
 };
 
-export const transformToObject = ({ name, description, permissions }) => {
-  if (!isEmpty(permissions)) {
-    const output = {};
-    permissions.forEach((item) => {
-      output[`${item.subject}/${item.ability}`] = !!item.value;
-    });
-    return {
-      role_name: name,
-      role_description: description,
-      permissions: { ...output },
-    };
-  }
+export const transformPermissionsToObject = (permissions) => {
+  const output = {};
+  permissions.forEach((item) => {
+    output[`${item.subject}/${item.ability}`] = !!item.value;
+  });
+  return output;
+};
+
+export const transformToObject = (role) => {
+  return {
+    role_name: role.name,
+    role_description: role.description,
+    permissions: transformPermissionsToObject(role.permissions),
+  };
+};
+
+export const getDefaultValuesFromSchema = (schema) => {
+  return schema
+    .map((item) => {
+      const abilities = [
+        ...(item.abilities || []),
+        ...(item.extra_abilities || []),
+      ];
+      return abilities
+        .filter((ability) => ability.default)
+        .map((ability) => ({
+          subject: item.subject,
+          ability: ability.key,
+          value: ability.default,
+        }));
+    })
+    .flat();
+};
+
+export const getNewRoleInitialValues = (schema) => {
+  return {
+    permissions: transformPermissionsToObject(
+      getDefaultValuesFromSchema(schema),
+    ),
+  };
 };
diff --git a/src/containers/Preferences/Users/Roles/RolesLanding/RolesDataTable.js b/src/containers/Preferences/Users/Roles/RolesLanding/RolesDataTable.js
index bfc5ee67a..8337ffde7 100644
--- a/src/containers/Preferences/Users/Roles/RolesLanding/RolesDataTable.js
+++ b/src/containers/Preferences/Users/Roles/RolesLanding/RolesDataTable.js
@@ -1,11 +1,15 @@
 import React from 'react';
+import { Intent } from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
 import intl from 'react-intl-universal';
+import styled from 'styled-components';
 
-import { DataTable } from 'components';
+import { DataTable, AppToaster } from 'components';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 
 import { useRolesTableColumns, ActionsMenu } from './components';
 import withAlertsActions from 'containers/Alert/withAlertActions';
+import { useRolesContext } from './RolesListProvider';
 
 import { compose } from 'utils';
 
@@ -16,26 +20,59 @@ function RolesDataTable({
   // #withAlertsActions
   openAlert,
 }) {
+  // History context.
+  const history = useHistory();
+
+  // Retrieve roles table columns
   const columns = useRolesTableColumns();
 
-  const handleDeleteRole = ({ id }) => {
-    openAlert('role-delete', { roleId: id });
+  // Roles table context.
+  const { roles, isRolesFetching, isRolesLoading } = useRolesContext();
+
+  // handles delete the given role.
+  const handleDeleteRole = ({ id, predefined }) => {
+    if (predefined) {
+      AppToaster.show({
+        message: intl.get('roles.error.you_cannot_delete_predefined_roles'),
+        intent: Intent.DANGER,
+      });
+    } else {
+      openAlert('role-delete', { roleId: id });
+    }
+  };
+  // Handles the edit of the given role.
+  const handleEditRole = ({ id, predefined }) => {
+    if (predefined) {
+      AppToaster.show({
+        message: intl.get('roles.error.you_cannot_edit_predefined_roles'),
+        intent: Intent.DANGER,
+      });
+    } else {
+      history.push(`/preferences/roles/${id}`);
+    }
   };
 
-  // const Data = [{ name: 'AH', description: 'Description' }];
   return (
-    <DataTable
+    <RolesTable
       columns={columns}
-      data={[]}
-      // loading={}
-      // progressBarLoading={}
+      data={roles}
+      loading={isRolesLoading}
+      headerLoading={isRolesFetching}
+      progressBarLoading={isRolesFetching}
       TableLoadingRenderer={TableSkeletonRows}
       ContextMenu={ActionsMenu}
       payload={{
         onDeleteRole: handleDeleteRole,
+        onEditRole: handleEditRole,
       }}
     />
   );
 }
 
+const RolesTable = styled(DataTable)`
+  .table .tr {
+    min-height: 42px;
+  }
+`;
+
 export default compose(withAlertsActions)(RolesDataTable);
diff --git a/src/containers/Preferences/Users/Roles/RolesLanding/RolesList.js b/src/containers/Preferences/Users/Roles/RolesLanding/RolesList.js
index 436adb6e5..095b905d2 100644
--- a/src/containers/Preferences/Users/Roles/RolesLanding/RolesList.js
+++ b/src/containers/Preferences/Users/Roles/RolesLanding/RolesList.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import intl from 'react-intl-universal';
 
 import { RolesListProvider } from './RolesListProvider';
 import RolesDataTable from './RolesDataTable';
diff --git a/src/containers/Preferences/Users/Roles/RolesLanding/RolesListProvider.js b/src/containers/Preferences/Users/Roles/RolesLanding/RolesListProvider.js
index 248b47260..2303754fb 100644
--- a/src/containers/Preferences/Users/Roles/RolesLanding/RolesListProvider.js
+++ b/src/containers/Preferences/Users/Roles/RolesLanding/RolesListProvider.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
-// import {} from 'hooks/query';
+import { useRoles } from 'hooks/query';
 
 const RolesListContext = React.createContext();
 
@@ -9,8 +9,19 @@ const RolesListContext = React.createContext();
  * Roles list provider.
  */
 function RolesListProvider({ ...props }) {
+  // Fetch roles list.
+  const {
+    data: roles,
+    isFetching: isRolesFetching,
+    isLoading: isRolesLoading,
+  } = useRoles();
+
   // Provider state.
-  const provider = {};
+  const provider = {
+    roles,
+    isRolesFetching,
+    isRolesLoading,
+  };
   return (
     <div
       className={classNames(
diff --git a/src/containers/Preferences/Users/Roles/RolesLanding/components.js b/src/containers/Preferences/Users/Roles/RolesLanding/components.js
index 2ef284188..9333b9a83 100644
--- a/src/containers/Preferences/Users/Roles/RolesLanding/components.js
+++ b/src/containers/Preferences/Users/Roles/RolesLanding/components.js
@@ -1,19 +1,23 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 
-import { Intent, Button, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
+import { Intent, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
 import { safeCallback } from 'utils';
-import { Icon, If } from 'components';
+import { Icon } from 'components';
 
 /**
  * Context menu of roles.
  */
-export function ActionsMenu({ payload: { onDeleteRole }, row: { original } }) {
+export function ActionsMenu({
+  payload: { onDeleteRole, onEditRole },
+  row: { original },
+}) {
   return (
     <Menu>
       <MenuItem
         icon={<Icon icon="pen-18" />}
         text={intl.get('roles.edit_roles')}
+        onClick={safeCallback(onEditRole, original)}
       />
       <MenuDivider />
       <MenuItem
@@ -38,16 +42,16 @@ export function useRolesTableColumns() {
         Header: intl.get('roles.column.name'),
         accessor: 'name',
         className: 'name',
-        width: '100',
-        disableSortBy: true,
+        width: '80',
+        textOverview: true,
       },
       {
         id: 'description',
         Header: intl.get('roles.column.description'),
         accessor: 'description',
         className: 'description',
-        width: '120',
-        disableSortBy: true,
+        width: '180',
+        textOverview: true,
       },
     ],
     [],
diff --git a/src/containers/Preferences/Users/Roles/utils.js b/src/containers/Preferences/Users/Roles/utils.js
new file mode 100644
index 000000000..5e5bd0e14
--- /dev/null
+++ b/src/containers/Preferences/Users/Roles/utils.js
@@ -0,0 +1,13 @@
+import intl from 'react-intl-universal';
+import { Intent } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+
+// handle delete errors.
+export const handleDeleteErrors = (errors) => {
+  if (errors.find((error) => error.type === 'ROLE_PREFINED')) {
+    AppToaster.show({
+      message: intl.get('roles.error.role_is_predefined'),
+      intent: Intent.DANGER,
+    });
+  }
+};
diff --git a/src/containers/Preferences/Users/components.js b/src/containers/Preferences/Users/components.js
index 853852a61..dcdaa0389 100644
--- a/src/containers/Preferences/Users/components.js
+++ b/src/containers/Preferences/Users/components.js
@@ -28,8 +28,6 @@ export function ActionsMenu({
   row: { original },
   payload: { onEdit, onInactivate, onActivate, onDelete, onResendInvitation },
 }) {
-  
-
   return (
     <Menu>
       <If condition={original.invite_accepted_at}>
@@ -78,7 +76,7 @@ export function ActionsMenu({
  */
 function StatusAccessor(user) {
   return !user.is_invite_accepted ? (
-    <Tag minimal={true} >
+    <Tag minimal={true}>
       <T id={'inviting'} />
     </Tag>
   ) : user.active ? (
@@ -111,8 +109,6 @@ function FullNameAccessor(user) {
 }
 
 export const useUsersListColumns = () => {
-  
-
   return React.useMemo(
     () => [
       {
@@ -134,14 +130,20 @@ export const useUsersListColumns = () => {
         width: 150,
       },
       {
-        id: 'phone_number',
-        Header: intl.get('phone_number'),
-        accessor: 'phone_number',
+        id: 'role_name',
+        Header: intl.get('users.column.role_name'),
+        accessor: 'role.name',
         width: 120,
       },
+      // {
+      //   id: 'phone_number',
+      //   Header: intl.get('phone_number'),
+      //   accessor: 'phone_number',
+      //   width: 120,
+      // },
       {
         id: 'status',
-        Header: 'Status',
+        Header: intl.get('status'),
         accessor: StatusAccessor,
         width: 80,
         className: 'status',
diff --git a/src/containers/Purchases/Bills/BillUniversalSearch.js b/src/containers/Purchases/Bills/BillUniversalSearch.js
index 5d80bd6d0..e4426f846 100644
--- a/src/containers/Purchases/Bills/BillUniversalSearch.js
+++ b/src/containers/Purchases/Bills/BillUniversalSearch.js
@@ -7,6 +7,7 @@ import { T, Icon, Choose, If } from 'components';
 
 import { RESOURCES_TYPES } from 'common/resourcesTypes';
 import withDrawerActions from '../../Drawer/withDrawerActions';
+import { AbilitySubject, BillAction } from '../../../common/abilityOption';
 
 /**
  * Universal search bill item select action.
@@ -116,4 +117,8 @@ export const universalSearchBillBind = () => ({
   selectItemAction: BillUniversalSearchSelect,
   itemRenderer: BillUniversalSearchItem,
   itemSelect: billsToSearch,
+  permission: {
+    ability: BillAction.View,
+    subject: AbilitySubject.Bill,
+  },
 });
diff --git a/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.js b/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.js
index d021d63b2..fe4dba317 100644
--- a/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.js
+++ b/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.js
@@ -14,12 +14,14 @@ import { useHistory } from 'react-router-dom';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import {
   If,
+  Can,
   FormattedMessage as T,
   DashboardActionViewsList,
   DashboardFilterButton,
   AdvancedFilterPopover,
   DashboardRowsHeightButton,
 } from 'components';
+import { BillAction, AbilitySubject } from '../../../../common/abilityOption';
 
 import withBillsActions from './withBillsActions';
 import withBills from './withBills';
@@ -86,12 +88,14 @@ function BillActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'plus'} />}
-          text={<T id={'new_bill'} />}
-          onClick={handleClickNewBill}
-        />
+        <Can I={BillAction.Create} a={AbilitySubject.Bill}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'plus'} />}
+            text={<T id={'new_bill'} />}
+            onClick={handleClickNewBill}
+          />
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: billsConditionsRoles,
diff --git a/src/containers/Purchases/Bills/BillsLanding/BillsEmptyStatus.js b/src/containers/Purchases/Bills/BillsLanding/BillsEmptyStatus.js
index cecfef2ad..f1eecd192 100644
--- a/src/containers/Purchases/Bills/BillsLanding/BillsEmptyStatus.js
+++ b/src/containers/Purchases/Bills/BillsLanding/BillsEmptyStatus.js
@@ -2,7 +2,8 @@ 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 { BillAction, AbilitySubject } from '../../../../common/abilityOption';
 
 export default function BillsEmptyStatus() {
   const history = useHistory();
@@ -17,19 +18,21 @@ export default function BillsEmptyStatus() {
       }
       action={
         <>
-          <Button
-            intent={Intent.PRIMARY}
-            large={true}
-            onClick={() => {
-              history.push('/bills/new');
-            }}
-          >
-            <T id={'new_bill'} />
-          </Button>
+          <Can I={BillAction.Create} a={AbilitySubject.Bill}>
+            <Button
+              intent={Intent.PRIMARY}
+              large={true}
+              onClick={() => {
+                history.push('/bills/new');
+              }}
+            >
+              <T id={'new_bill'} />
+            </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/Bills/BillsLanding/components.js b/src/containers/Purchases/Bills/BillsLanding/components.js
index 9cd1ec6fa..61bcd403f 100644
--- a/src/containers/Purchases/Bills/BillsLanding/components.js
+++ b/src/containers/Purchases/Bills/BillsLanding/components.js
@@ -16,8 +16,14 @@ import {
   If,
   Choose,
   Money,
+  Can,
 } from 'components';
 import { formattedAmount, safeCallback, isBlank, calculateStatus } from 'utils';
+import {
+  BillAction,
+  PaymentMadeAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 /**
  * Actions menu.
@@ -40,38 +46,44 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <MenuDivider />
-      <MenuItem
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('edit_bill')}
-        onClick={safeCallback(onEdit, original)}
-      />
+      <Can I={BillAction.Edit} a={AbilitySubject.Bill}>
+        <MenuDivider />
+        <MenuItem
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('edit_bill')}
+          onClick={safeCallback(onEdit, original)}
+        />
 
-      <If condition={!original.is_open}>
-        <MenuItem
-          icon={<Icon icon={'check'} iconSize={18} />}
-          text={intl.get('mark_as_opened')}
-          onClick={safeCallback(onOpen, original)}
-        />
-      </If>
-      <If condition={original.is_open && !original.is_fully_paid}>
-        <MenuItem
-          icon={<Icon icon="quick-payment-16" iconSize={16} />}
-          text={intl.get('add_payment')}
-          onClick={safeCallback(onQuick, original)}
-        />
-      </If>
+        <If condition={!original.is_open}>
+          <MenuItem
+            icon={<Icon icon={'check'} iconSize={18} />}
+            text={intl.get('mark_as_opened')}
+            onClick={safeCallback(onOpen, original)}
+          />
+        </If>
+      </Can>
+      <Can I={PaymentMadeAction.Create} a={AbilitySubject.PaymentMade}>
+        <If condition={original.is_open && !original.is_fully_paid}>
+          <MenuItem
+            icon={<Icon icon="quick-payment-16" iconSize={16} />}
+            text={intl.get('add_payment')}
+            onClick={safeCallback(onQuick, original)}
+          />
+        </If>
+      </Can>
       <MenuItem
         icon={<Icon icon="receipt-24" iconSize={16} />}
         text={intl.get('allocate_landed_coast')}
         onClick={safeCallback(onAllocateLandedCost, original)}
       />
-      <MenuItem
-        text={intl.get('delete_bill')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-        icon={<Icon icon="trash-16" iconSize={16} />}
-      />
+      <Can I={BillAction.Delete} a={AbilitySubject.Bill}>
+        <MenuItem
+          text={intl.get('delete_bill')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
     </Menu>
   );
 }
diff --git a/src/containers/Purchases/PaymentMades/PaymentMadeUniversalSearch.js b/src/containers/Purchases/PaymentMades/PaymentMadeUniversalSearch.js
index bd423d01b..d6c4e513d 100644
--- a/src/containers/Purchases/PaymentMades/PaymentMadeUniversalSearch.js
+++ b/src/containers/Purchases/PaymentMades/PaymentMadeUniversalSearch.js
@@ -1,14 +1,14 @@
 import React from 'react';
 import { MenuItem } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import { isEmpty } from 'lodash';
 
-import { Icon, If } from 'components';
+import { Icon } from 'components';
 
 import { RESOURCES_TYPES } from 'common/resourcesTypes';
 import withDrawerActions from '../../Drawer/withDrawerActions';
 
 import { highlightText } from 'utils';
+import { AbilitySubject, PaymentMadeAction } from '../../../common/abilityOption';
 
 /**
  * Universal search bill item select action.
@@ -82,4 +82,8 @@ export const universalSearchPaymentMadeBind = () => ({
   selectItemAction: PaymentMadeUniversalSearchSelect,
   itemRenderer: PaymentMadeUniversalSearchItem,
   itemSelect: paymentMadeToSearch,
+  permission: {
+    ability: PaymentMadeAction.View,
+    subject: AbilitySubject.PaymentMade,
+  },
 });
diff --git a/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js b/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js
index b3c8776c0..770bddc48 100644
--- a/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js
+++ b/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js
@@ -14,6 +14,7 @@ import { useHistory } from 'react-router-dom';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import {
   If,
+  Can,
   FormattedMessage as T,
   DashboardActionViewsList,
   DashboardFilterButton,
@@ -29,6 +30,10 @@ import withSettings from 'containers/Settings/withSettings';
 
 import { usePaymentMadesListContext } from './PaymentMadesListProvider';
 import { useRefreshPaymentMades } from 'hooks/query/paymentMades';
+import {
+  PaymentMadeAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 import { compose } from 'utils';
 
@@ -70,7 +75,7 @@ function PaymentMadeActionsBar({
   const handleRefreshBtnClick = () => {
     refresh();
   };
-  
+
   // Handle table row size change.
   const handleTableRowSizeChange = (size) => {
     addSetting('billPayments', 'tableSize', size);
@@ -85,12 +90,14 @@ function PaymentMadeActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'plus'} />}
-          text={<T id={'new_payment_made'} />}
-          onClick={handleClickNewPaymentMade}
-        />
+        <Can I={PaymentMadeAction.Create} a={AbilitySubject.PaymentMade}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'plus'} />}
+            text={<T id={'new_payment_made'} />}
+            onClick={handleClickNewPaymentMade}
+          />
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: paymentMadesFilterConditions,
diff --git a/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesEmptyStatus.js b/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesEmptyStatus.js
index ada8352ba..4b8327ccb 100644
--- a/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesEmptyStatus.js
+++ b/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesEmptyStatus.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 {
+  PaymentMadeAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 export default function PaymentMadesEmptyStatus() {
   const history = useHistory();
@@ -17,19 +21,21 @@ export default function PaymentMadesEmptyStatus() {
       }
       action={
         <>
-          <Button
-            intent={Intent.PRIMARY}
-            large={true}
-            onClick={() => {
-              history.push('/payment-mades/new');
-            }}
-          >
-            <T id={'new_bill_payment'} />
-          </Button>
+          <Can I={PaymentMadeAction.Create} a={AbilitySubject.PaymentMade}>
+            <Button
+              intent={Intent.PRIMARY}
+              large={true}
+              onClick={() => {
+                history.push('/payment-mades/new');
+              }}
+            >
+              <T id={'new_bill_payment'} />
+            </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/PaymentMades/PaymentsLanding/components.js b/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js
index 875817ca7..ae5951478 100644
--- a/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js
+++ b/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js
@@ -10,7 +10,12 @@ import {
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 
-import { Icon, Money, FormatDateCell } from 'components';
+import { Icon, Money, FormatDateCell, Can } from 'components';
+import {
+  PaymentMadeAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
+
 import { safeCallback } from 'utils';
 
 export function AmountAccessor(row) {
@@ -31,18 +36,23 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <MenuDivider />
-      <MenuItem
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('edit_payment_made')}
-        onClick={safeCallback(onEdit, original)}
-      />
-      <MenuItem
-        text={intl.get('delete_payment_made')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-        icon={<Icon icon="trash-16" iconSize={16} />}
-      />
+
+      <Can I={PaymentMadeAction.Edit} a={AbilitySubject.PaymentMade}>
+        <MenuDivider />
+        <MenuItem
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('edit_payment_made')}
+          onClick={safeCallback(onEdit, original)}
+        />
+      </Can>
+      <Can I={PaymentMadeAction.Delete} a={AbilitySubject.PaymentMade}>
+        <MenuItem
+          text={intl.get('delete_payment_made')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
     </Menu>
   );
 }
diff --git a/src/containers/QuickNewDropdown/QuickNewDropdown.js b/src/containers/QuickNewDropdown/QuickNewDropdown.js
index a3489d21d..a6242e2af 100644
--- a/src/containers/QuickNewDropdown/QuickNewDropdown.js
+++ b/src/containers/QuickNewDropdown/QuickNewDropdown.js
@@ -4,16 +4,21 @@ import { FormattedMessage as T } from 'components';
 import { useHistory } from 'react-router-dom';
 import { Icon } from 'components';
 import { Position } from '@blueprintjs/core';
-import { getQuickNewActions } from 'common/quickNewOptions';
 import { Select } from '@blueprintjs/select';
 
+import { useGetQuickNewMenu } from 'common/quickNewOptions';
+
 /**
  * Quick New Dropdown.
  */
 export default function QuickNewDropdown() {
   const history = useHistory();
-  const quickNewOptions = getQuickNewActions();
+  const quickNewOptions = useGetQuickNewMenu();
 
+  // Can't continue if there is no any quick new menu items to display.
+  if (quickNewOptions.length === 0) {
+    return null;
+  }
   // Handle click quick new button.
   const handleClickQuickNew = ({ path }) => {
     history.push(`/${path}`);
@@ -40,4 +45,4 @@ export default function QuickNewDropdown() {
       />
     </Select>
   );
-}
\ No newline at end of file
+}
diff --git a/src/containers/Sales/Estimates/EstimatesLanding/EstimateUniversalSearch.js b/src/containers/Sales/Estimates/EstimatesLanding/EstimateUniversalSearch.js
index 3d979a4c4..a3c68f542 100644
--- a/src/containers/Sales/Estimates/EstimatesLanding/EstimateUniversalSearch.js
+++ b/src/containers/Sales/Estimates/EstimatesLanding/EstimateUniversalSearch.js
@@ -5,6 +5,8 @@ import intl from 'react-intl-universal';
 import { Choose, T, Icon } from 'components';
 
 import { RESOURCES_TYPES } from "common/resourcesTypes";
+import { AbilitySubject, SaleEstimateAction } from '../../../../common/abilityOption';
+
 import withDrawerActions from "../../../Drawer/withDrawerActions";
 
 /**
@@ -110,5 +112,9 @@ export const universalSearchEstimateBind = () => ({
   optionItemLabel: intl.get('estimates'),
   selectItemAction: EstimateUniversalSearchSelect,
   itemRenderer: EstimateUniversalSearchItem,
-  itemSelect: transformEstimatesToSearch
+  itemSelect: transformEstimatesToSearch,
+  permission: {
+    ability: SaleEstimateAction.View,
+    subject: AbilitySubject.Estimate,
+  },
 });
diff --git a/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js b/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js
index e25b09083..46d37c963 100644
--- a/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js
+++ b/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js
@@ -11,6 +11,7 @@ import {
 import { useHistory } from 'react-router-dom';
 
 import {
+  Can,
   FormattedMessage as T,
   AdvancedFilterPopover,
   If,
@@ -28,6 +29,10 @@ import withSettings from 'containers/Settings/withSettings';
 
 import { useEstimatesListContext } from './EstimatesListProvider';
 import { useRefreshEstimates } from 'hooks/query/estimates';
+import {
+  SaleEstimateAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 import { compose } from 'utils';
 
@@ -87,12 +92,14 @@ function EstimateActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'plus'} />}
-          text={<T id={'new_estimate'} />}
-          onClick={onClickNewEstimate}
-        />
+        <Can I={SaleEstimateAction.Create} a={AbilitySubject.Estimate}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'plus'} />}
+            text={<T id={'new_estimate'} />}
+            onClick={onClickNewEstimate}
+          />
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: estimatesFilterRoles,
diff --git a/src/containers/Sales/Estimates/EstimatesLanding/EstimatesEmptyStatus.js b/src/containers/Sales/Estimates/EstimatesLanding/EstimatesEmptyStatus.js
index c2e5e92fa..f95456dc0 100644
--- a/src/containers/Sales/Estimates/EstimatesLanding/EstimatesEmptyStatus.js
+++ b/src/containers/Sales/Estimates/EstimatesLanding/EstimatesEmptyStatus.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 {
+  SaleEstimateAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 export default function EstimatesEmptyStatus() {
   const history = useHistory();
@@ -16,18 +20,20 @@ export default function EstimatesEmptyStatus() {
       }
       action={
         <>
-          <Button
-            intent={Intent.PRIMARY}
-            large={true}
-            onClick={() => {
-              history.push('/estimates/new');
-            }}
-          >
-            <T id={'new_sale_estimate'} />
-          </Button>
-          <Button intent={Intent.NONE} large={true}>
-            <T id={'learn_more'} />
-          </Button>
+          <Can I={SaleEstimateAction.Create} a={AbilitySubject.Estimate}>
+            <Button
+              intent={Intent.PRIMARY}
+              large={true}
+              onClick={() => {
+                history.push('/estimates/new');
+              }}
+            >
+              <T id={'new_sale_estimate'} />
+            </Button>
+            <Button intent={Intent.NONE} large={true}>
+              <T id={'learn_more'} />
+            </Button>
+          </Can>
         </>
       }
     />
diff --git a/src/containers/Sales/Estimates/EstimatesLanding/components.js b/src/containers/Sales/Estimates/EstimatesLanding/components.js
index 22c95f3ae..dd9d72131 100644
--- a/src/containers/Sales/Estimates/EstimatesLanding/components.js
+++ b/src/containers/Sales/Estimates/EstimatesLanding/components.js
@@ -2,6 +2,10 @@ import React from 'react';
 import { Intent, Tag, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 import clsx from 'classnames';
+import {
+  SaleEstimateAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 import { CLASSES } from '../../../../common/classes';
 import {
@@ -11,6 +15,7 @@ import {
   Choose,
   Icon,
   If,
+  Can,
 } from 'components';
 import { safeCallback } from 'utils';
 
@@ -68,63 +73,74 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <MenuDivider />
-      <MenuItem
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('edit_estimate')}
-        onClick={safeCallback(onEdit, original)}
-      />
-      <MenuItem
-        icon={<Icon icon="convert_to" />}
-        text={intl.get('convert_to_invoice')}
-        onClick={safeCallback(onConvert, original)}
-      />
-      <If condition={!original.is_delivered}>
+      <Can I={SaleEstimateAction.Edit} a={AbilitySubject.Estimate}>
+        <MenuDivider />
         <MenuItem
-          icon={<Icon icon={'check'} iconSize={18} />}
-          text={intl.get('mark_as_delivered')}
-          onClick={safeCallback(onDeliver, original)}
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('edit_estimate')}
+          onClick={safeCallback(onEdit, original)}
         />
-      </If>
-      <Choose>
-        <Choose.When condition={original.is_delivered && original.is_approved}>
-          <MenuItem
-            icon={<Icon icon={'close-black'} />}
-            text={intl.get('mark_as_rejected')}
-            onClick={safeCallback(onReject, original)}
-          />
-        </Choose.When>
-        <Choose.When condition={original.is_delivered && original.is_rejected}>
+        <MenuItem
+          icon={<Icon icon="convert_to" />}
+          text={intl.get('convert_to_invoice')}
+          onClick={safeCallback(onConvert, original)}
+        />
+
+        <If condition={!original.is_delivered}>
           <MenuItem
             icon={<Icon icon={'check'} iconSize={18} />}
-            text={intl.get('mark_as_approved')}
-            onClick={safeCallback(onApprove, original)}
+            text={intl.get('mark_as_delivered')}
+            onClick={safeCallback(onDeliver, original)}
           />
-        </Choose.When>
-        <Choose.When condition={original.is_delivered}>
-          <MenuItem
-            icon={<Icon icon={'check'} iconSize={18} />}
-            text={intl.get('mark_as_approved')}
-            onClick={safeCallback(onApprove, original)}
-          />
-          <MenuItem
-            icon={<Icon icon={'close-black'} />}
-            text={intl.get('mark_as_rejected')}
-            onClick={safeCallback(onReject, original)}
-          />
-        </Choose.When>
-      </Choose>
-      <MenuItem
-        icon={<Icon icon={'print-16'} iconSize={16} />}
-        text={intl.get('print')}
-        onClick={safeCallback(onPrint, original)}
-      />
-      <MenuItem
-        text={intl.get('delete_estimate')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-        icon={<Icon icon="trash-16" iconSize={16} />}
-      />
+        </If>
+        <Choose>
+          <Choose.When
+            condition={original.is_delivered && original.is_approved}
+          >
+            <MenuItem
+              icon={<Icon icon={'close-black'} />}
+              text={intl.get('mark_as_rejected')}
+              onClick={safeCallback(onReject, original)}
+            />
+          </Choose.When>
+          <Choose.When
+            condition={original.is_delivered && original.is_rejected}
+          >
+            <MenuItem
+              icon={<Icon icon={'check'} iconSize={18} />}
+              text={intl.get('mark_as_approved')}
+              onClick={safeCallback(onApprove, original)}
+            />
+          </Choose.When>
+          <Choose.When condition={original.is_delivered}>
+            <MenuItem
+              icon={<Icon icon={'check'} iconSize={18} />}
+              text={intl.get('mark_as_approved')}
+              onClick={safeCallback(onApprove, original)}
+            />
+            <MenuItem
+              icon={<Icon icon={'close-black'} />}
+              text={intl.get('mark_as_rejected')}
+              onClick={safeCallback(onReject, original)}
+            />
+          </Choose.When>
+        </Choose>
+      </Can>
+      <Can I={SaleEstimateAction.View} a={AbilitySubject.Estimate}>
+        <MenuItem
+          icon={<Icon icon={'print-16'} iconSize={16} />}
+          text={intl.get('print')}
+          onClick={safeCallback(onPrint, original)}
+        />
+      </Can>
+      <Can I={SaleEstimateAction.Delete} a={AbilitySubject.Estimate}>
+        <MenuItem
+          text={intl.get('delete_estimate')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
     </Menu>
   );
 }
diff --git a/src/containers/Sales/Invoices/InvoiceUniversalSearch.js b/src/containers/Sales/Invoices/InvoiceUniversalSearch.js
index db287a724..6725234a4 100644
--- a/src/containers/Sales/Invoices/InvoiceUniversalSearch.js
+++ b/src/containers/Sales/Invoices/InvoiceUniversalSearch.js
@@ -3,10 +3,13 @@ import intl from 'react-intl-universal';
 import { MenuItem } from '@blueprintjs/core';
 
 import { T, Choose, Icon } from 'components';
-
 import { highlightText } from 'utils';
 
 import { RESOURCES_TYPES } from 'common/resourcesTypes';
+import {
+  AbilitySubject,
+  SaleInvoiceAction,
+} from '../../../common/abilityOption';
 import withDrawerActions from '../../Drawer/withDrawerActions';
 
 /**
@@ -118,4 +121,8 @@ export const universalSearchInvoiceBind = () => ({
   selectItemAction: InvoiceUniversalSearchSelect,
   itemRenderer: InvoiceUniversalSearchItem,
   itemSelect: transformInvoicesToSearch,
+  permission: {
+    ability: SaleInvoiceAction.View,
+    subject: AbilitySubject.Invoice,
+  },
 });
diff --git a/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.js b/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.js
index 6b03ab3a7..a99227f48 100644
--- a/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.js
+++ b/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.js
@@ -18,7 +18,11 @@ import {
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
-import { If, DashboardActionViewsList } from 'components';
+import { Can, If, DashboardActionViewsList } from 'components';
+import {
+  SaleInvoiceAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 import { useRefreshInvoices } from 'hooks/query/invoices';
 import { useInvoicesListContext } from './InvoicesListProvider';
@@ -84,12 +88,14 @@ function InvoiceActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'plus'} />}
-          text={<T id={'new_invoice'} />}
-          onClick={handleClickNewInvoice}
-        />
+        <Can I={SaleInvoiceAction.Create} a={AbilitySubject.Invoice}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'plus'} />}
+            text={<T id={'new_invoice'} />}
+            onClick={handleClickNewInvoice}
+          />
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: invoicesFilterRoles,
diff --git a/src/containers/Sales/Invoices/InvoicesLanding/InvoicesEmptyStatus.js b/src/containers/Sales/Invoices/InvoicesLanding/InvoicesEmptyStatus.js
index 21212a4c2..0832b8826 100644
--- a/src/containers/Sales/Invoices/InvoicesLanding/InvoicesEmptyStatus.js
+++ b/src/containers/Sales/Invoices/InvoicesLanding/InvoicesEmptyStatus.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 {
+  SaleInvoiceAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 export default function EstimatesEmptyStatus() {
   const history = useHistory();
@@ -17,19 +21,20 @@ export default function EstimatesEmptyStatus() {
       }
       action={
         <>
-          <Button
-            intent={Intent.PRIMARY}
-            large={true}
-            onClick={() => {
-              history.push('/invoices/new');
-            }}
-          >
-            <T id={'new_sale_invoice'} />
-          </Button>
-
-          <Button intent={Intent.NONE} large={true}>
-            <T id={'learn_more'} />
-          </Button>
+          <Can I={SaleInvoiceAction.Create} a={AbilitySubject.Invoice}>
+            <Button
+              intent={Intent.PRIMARY}
+              large={true}
+              onClick={() => {
+                history.push('/invoices/new');
+              }}
+            >
+              <T id={'new_sale_invoice'} />
+            </Button>
+            <Button intent={Intent.NONE} large={true}>
+              <T id={'learn_more'} />
+            </Button>
+          </Can>
         </>
       }
     />
diff --git a/src/containers/Sales/Invoices/InvoicesLanding/components.js b/src/containers/Sales/Invoices/InvoicesLanding/components.js
index 2efde999e..68e68ae89 100644
--- a/src/containers/Sales/Invoices/InvoicesLanding/components.js
+++ b/src/containers/Sales/Invoices/InvoicesLanding/components.js
@@ -18,8 +18,14 @@ import {
   Choose,
   If,
   Icon,
+  Can,
 } from 'components';
 import { formattedAmount, safeCallback, calculateStatus } from 'utils';
+import {
+  SaleInvoiceAction,
+  PaymentReceiveAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 export const statusAccessor = (row) => {
   return (
@@ -55,7 +61,6 @@ export const statusAccessor = (row) => {
               })}
             </span>
             <ProgressBar
-          
               animate={false}
               stripes={false}
               intent={Intent.PRIMARY}
@@ -115,37 +120,46 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <MenuDivider />
-      <MenuItem
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('edit_invoice')}
-        onClick={safeCallback(onEdit, original)}
-      />
-      <If condition={!original.is_delivered}>
+      <Can I={SaleInvoiceAction.Edit} a={AbilitySubject.Invoice}>
+        <MenuDivider />
         <MenuItem
-          icon={<Icon icon="send" iconSize={16} />}
-          text={intl.get('mark_as_delivered')}
-          onClick={safeCallback(onDeliver, original)}
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('edit_invoice')}
+          onClick={safeCallback(onEdit, original)}
         />
-      </If>
-      <If condition={original.is_delivered && !original.is_fully_paid}>
+
+        <If condition={!original.is_delivered}>
+          <MenuItem
+            icon={<Icon icon="send" iconSize={16} />}
+            text={intl.get('mark_as_delivered')}
+            onClick={safeCallback(onDeliver, original)}
+          />
+        </If>
+      </Can>
+      <Can I={PaymentReceiveAction.Create} a={AbilitySubject.PaymentReceive}>
+        <If condition={original.is_delivered && !original.is_fully_paid}>
+          <MenuItem
+            icon={<Icon icon="quick-payment-16" iconSize={16} />}
+            text={intl.get('add_payment')}
+            onClick={safeCallback(onQuick, original)}
+          />
+        </If>
+      </Can>
+      <Can I={SaleInvoiceAction.View} a={AbilitySubject.Invoice}>
         <MenuItem
-          icon={<Icon icon="quick-payment-16" iconSize={16} />}
-          text={intl.get('add_payment')}
-          onClick={safeCallback(onQuick, original)}
+          icon={<Icon icon={'print-16'} iconSize={16} />}
+          text={intl.get('print')}
+          onClick={safeCallback(onPrint, original)}
         />
-      </If>
-      <MenuItem
-        icon={<Icon icon={'print-16'} iconSize={16} />}
-        text={intl.get('print')}
-        onClick={safeCallback(onPrint, original)}
-      />
-      <MenuItem
-        text={intl.get('delete_invoice')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-        icon={<Icon icon="trash-16" iconSize={16} />}
-      />
+      </Can>
+      <Can I={SaleInvoiceAction.Delete} a={AbilitySubject.Invoice}>
+        <MenuItem
+          text={intl.get('delete_invoice')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
     </Menu>
   );
 }
diff --git a/src/containers/Sales/PaymentReceives/PaymentReceiveUniversalSearch.js b/src/containers/Sales/PaymentReceives/PaymentReceiveUniversalSearch.js
index bff1faa22..163a4811c 100644
--- a/src/containers/Sales/PaymentReceives/PaymentReceiveUniversalSearch.js
+++ b/src/containers/Sales/PaymentReceives/PaymentReceiveUniversalSearch.js
@@ -2,13 +2,17 @@ import React from 'react';
 import { MenuItem } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 
-import { RESOURCES_TYPES } from "../../../common/resourcesTypes";
-import withDrawerActions from "../../Drawer/withDrawerActions";
+import { RESOURCES_TYPES } from '../../../common/resourcesTypes';
+import withDrawerActions from '../../Drawer/withDrawerActions';
 import { highlightText } from 'utils';
 import { Icon } from 'components';
+import {
+  AbilitySubject,
+  PaymentReceiveAction,
+} from '../../../common/abilityOption';
 
 /**
- * Payment receive universal search item select action. 
+ * Payment receive universal search item select action.
  */
 function PaymentReceiveUniversalSearchSelectComponent({
   // #ownProps
@@ -19,7 +23,9 @@ function PaymentReceiveUniversalSearchSelectComponent({
   openDrawer,
 }) {
   if (resourceType === RESOURCES_TYPES.PAYMENT_RECEIVE) {
-    openDrawer('payment-receive-detail-drawer', { paymentReceiveId: resourceId });
+    openDrawer('payment-receive-detail-drawer', {
+      paymentReceiveId: resourceId,
+    });
   }
   return null;
 }
@@ -59,7 +65,7 @@ export function PaymentReceiveUniversalSearchItem(
 /**
  * Transformes payment receives to search.
  */
- const paymentReceivesToSearch = (payment) => ({
+const paymentReceivesToSearch = (payment) => ({
   id: payment.id,
   text: payment.customer.display_name,
   subText: payment.formatted_payment_date,
@@ -70,10 +76,14 @@ export function PaymentReceiveUniversalSearchItem(
 /**
  * Binds universal search payment receive configure.
  */
- export const universalSearchPaymentReceiveBind = () => ({
+export const universalSearchPaymentReceiveBind = () => ({
   resourceType: RESOURCES_TYPES.PAYMENT_RECEIVE,
   optionItemLabel: intl.get('payment_receives'),
   selectItemAction: PaymentReceiveUniversalSearchSelect,
   itemRenderer: PaymentReceiveUniversalSearchItem,
   itemSelect: paymentReceivesToSearch,
+  permission: {
+    ability: PaymentReceiveAction.View,
+    subject: AbilitySubject.PaymentReceive,
+  },
 });
diff --git a/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveActionsBar.js b/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveActionsBar.js
index bb67f91a3..8e9a196f3 100644
--- a/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveActionsBar.js
+++ b/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveActionsBar.js
@@ -19,14 +19,17 @@ import {
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
-import { If, DashboardActionViewsList } from 'components';
+import { Can, If, DashboardActionViewsList } from 'components';
 
 import withPaymentReceivesActions from './withPaymentReceivesActions';
 import withPaymentReceives from './withPaymentReceives';
 
 import withSettingsActions from 'containers/Settings/withSettingsActions';
 import withSettings from 'containers/Settings/withSettings';
-
+import {
+  PaymentReceiveAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 import { compose } from 'utils';
 import { usePaymentReceivesListContext } from './PaymentReceiptsListProvider';
 import { useRefreshPaymentReceive } from 'hooks/query/paymentReceives';
@@ -85,12 +88,14 @@ function PaymentReceiveActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'plus'} />}
-          text={<T id={'new_payment_receive'} />}
-          onClick={handleClickNewPaymentReceive}
-        />
+        <Can I={PaymentReceiveAction.Create} a={AbilitySubject.PaymentReceive}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'plus'} />}
+            text={<T id={'new_payment_receive'} />}
+            onClick={handleClickNewPaymentReceive}
+          />
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: paymentFilterConditions,
diff --git a/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesEmptyStatus.js b/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesEmptyStatus.js
index 6b0df1b31..651e4a3bd 100644
--- a/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesEmptyStatus.js
+++ b/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesEmptyStatus.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 {
+  PaymentReceiveAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 export default function PaymentReceivesEmptyStatus() {
   const history = useHistory();
@@ -12,24 +16,31 @@ export default function PaymentReceivesEmptyStatus() {
       title={<T id={'the_organization_doesn_t_receive_money_yet'} />}
       description={
         <p>
-          <T id={'receiving_customer_payments_is_one_pleasant_accounting_tasks'} />
+          <T
+            id={'receiving_customer_payments_is_one_pleasant_accounting_tasks'}
+          />
         </p>
       }
       action={
         <>
-          <Button
-            intent={Intent.PRIMARY}
-            large={true}
-            onClick={() => {
-              history.push('/payment-receives/new');
-            }}
+          <Can
+            I={PaymentReceiveAction.Create}
+            a={AbilitySubject.PaymentReceive}
           >
-            <T id={'new_payment_receive'} />
-          </Button>
+            <Button
+              intent={Intent.PRIMARY}
+              large={true}
+              onClick={() => {
+                history.push('/payment-receives/new');
+              }}
+            >
+              <T id={'new_payment_receive'} />
+            </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/PaymentReceives/PaymentsLanding/components.js b/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js
index aa5d7c8cf..de95d270a 100644
--- a/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js
+++ b/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js
@@ -11,10 +11,13 @@ import {
 import intl from 'react-intl-universal';
 import clsx from 'classnames';
 
-import { FormatDateCell, Money, Icon } from 'components';
+import { FormatDateCell, Money, Icon, Can } from 'components';
 import { safeCallback } from 'utils';
 import { CLASSES } from '../../../../common/classes';
-
+import {
+  PaymentReceiveAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 /**
  * Table actions menu.
  */
@@ -29,18 +32,22 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, paymentReceive)}
       />
-      <MenuDivider />
-      <MenuItem
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('edit_payment_receive')}
-        onClick={safeCallback(onEdit, paymentReceive)}
-      />
-      <MenuItem
-        text={intl.get('delete_payment_receive')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, paymentReceive)}
-        icon={<Icon icon="trash-16" iconSize={16} />}
-      />
+      <Can I={PaymentReceiveAction.Edit} a={AbilitySubject.PaymentReceive}>
+        <MenuDivider />
+        <MenuItem
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('edit_payment_receive')}
+          onClick={safeCallback(onEdit, paymentReceive)}
+        />
+      </Can>
+      <Can I={PaymentReceiveAction.Delete} a={AbilitySubject.PaymentReceive}>
+        <MenuItem
+          text={intl.get('delete_payment_receive')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, paymentReceive)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
     </Menu>
   );
 }
diff --git a/src/containers/Sales/Receipts/ReceiptUniversalSearch.js b/src/containers/Sales/Receipts/ReceiptUniversalSearch.js
index b2156d8da..8db5a4d87 100644
--- a/src/containers/Sales/Receipts/ReceiptUniversalSearch.js
+++ b/src/containers/Sales/Receipts/ReceiptUniversalSearch.js
@@ -1,16 +1,18 @@
-
 import React from 'react';
 import intl from 'react-intl-universal';
 import { MenuItem } from '@blueprintjs/core';
 
 import { Icon, Choose, T } from 'components';
 
-import { RESOURCES_TYPES } from "../../../common/resourcesTypes";
-import withDrawerActions from "../../Drawer/withDrawerActions";
-
+import { RESOURCES_TYPES } from '../../../common/resourcesTypes';
+import withDrawerActions from '../../Drawer/withDrawerActions';
+import {
+  AbilitySubject,
+  SaleReceiptAction,
+} from '../../../common/abilityOption';
 
 /**
- * Receipt universal search item select action. 
+ * Receipt universal search item select action.
  */
 function ReceiptUniversalSearchSelectComponent({
   // #ownProps
@@ -39,11 +41,15 @@ function ReceiptStatus({ receipt }) {
   return (
     <Choose>
       <Choose.When condition={receipt.is_closed}>
-        <span class="closed"><T id={'closed'} /></span>
+        <span class="closed">
+          <T id={'closed'} />
+        </span>
       </Choose.When>
 
       <Choose.Otherwise>
-        <span class="draft"><T id={'draft'} /></span>
+        <span class="draft">
+          <T id={'draft'} />
+        </span>
       </Choose.Otherwise>
     </Choose>
   );
@@ -100,4 +106,8 @@ export const universalSearchReceiptBind = () => ({
   selectItemAction: ReceiptUniversalSearchSelect,
   itemRenderer: ReceiptUniversalSearchItem,
   itemSelect: transformReceiptsToSearch,
+  permission: {
+    ability: SaleReceiptAction.View,
+    subject: AbilitySubject.Receipt,
+  },
 });
diff --git a/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.js b/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.js
index 4f7020d2d..fe9a5eed5 100644
--- a/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.js
+++ b/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.js
@@ -17,7 +17,7 @@ import {
   DashboardRowsHeightButton,
 } from 'components';
 
-import { If, DashboardActionViewsList } from 'components';
+import { Can, If, DashboardActionViewsList } from 'components';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
 import withReceiptsActions from './withReceiptsActions';
@@ -28,6 +28,11 @@ import withSettings from 'containers/Settings/withSettings';
 
 import { useReceiptsListContext } from './ReceiptsListProvider';
 import { useRefreshReceipts } from 'hooks/query/receipts';
+import {
+  SaleReceiptAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
+
 import { compose } from 'utils';
 
 /**
@@ -87,12 +92,14 @@ function ReceiptActionsBar({
         />
 
         <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'plus'} />}
-          text={<T id={'new_receipt'} />}
-          onClick={onClickNewReceipt}
-        />
+        <Can I={SaleReceiptAction.Create} a={AbilitySubject.Receipt}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'plus'} />}
+            text={<T id={'new_receipt'} />}
+            onClick={onClickNewReceipt}
+          />
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: receiptsFilterConditions,
diff --git a/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsEmptyStatus.js b/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsEmptyStatus.js
index e029ddf9b..2d5082c01 100644
--- a/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsEmptyStatus.js
+++ b/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsEmptyStatus.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 {
+  SaleReceiptAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 export default function ReceiptsEmptyStatus() {
   const history = useHistory();
@@ -17,19 +21,21 @@ export default function ReceiptsEmptyStatus() {
       }
       action={
         <>
-          <Button
-            intent={Intent.PRIMARY}
-            large={true}
-            onClick={() => {
-              history.push('/receipts/new');
-            }}
-          >
-            <T id={'new_receipt'} />
-          </Button>
+          <Can I={SaleReceiptAction.Create} a={AbilitySubject.Receipt}>
+            <Button
+              intent={Intent.PRIMARY}
+              large={true}
+              onClick={() => {
+                history.push('/receipts/new');
+              }}
+            >
+              <T id={'new_receipt'} />
+            </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/Receipts/ReceiptsLanding/components.js b/src/containers/Sales/Receipts/ReceiptsLanding/components.js
index 7f7f0cbda..8a063e69d 100644
--- a/src/containers/Sales/Receipts/ReceiptsLanding/components.js
+++ b/src/containers/Sales/Receipts/ReceiptsLanding/components.js
@@ -15,7 +15,11 @@ import clsx from 'classnames';
 
 import { CLASSES } from '../../../../common/classes';
 import { safeCallback } from 'utils';
-import { FormatDateCell, Choose, Money, Icon, If } from 'components';
+import { FormatDateCell, Choose, Money, Icon, If, Can } from 'components';
+import {
+  SaleReceiptAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 export function ActionsMenu({
   payload: { onEdit, onDelete, onClose, onDrawer, onViewDetails, onPrint },
@@ -28,30 +32,37 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, receipt)}
       />
-      <MenuDivider />
-      <MenuItem
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('edit_receipt')}
-        onClick={safeCallback(onEdit, receipt)}
-      />
-      <If condition={!receipt.is_closed}>
+      <Can I={SaleReceiptAction.Edit} a={AbilitySubject.Receipt}>
+        <MenuDivider />
         <MenuItem
-          icon={<Icon icon={'check'} iconSize={18} />}
-          text={intl.get('mark_as_closed')}
-          onClick={safeCallback(onClose, receipt)}
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('edit_receipt')}
+          onClick={safeCallback(onEdit, receipt)}
         />
-      </If>
-      <MenuItem
-        icon={<Icon icon={'print-16'} iconSize={16} />}
-        text={intl.get('print')}
-        onClick={safeCallback(onPrint, receipt)}
-      />
-      <MenuItem
-        text={intl.get('delete_receipt')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, receipt)}
-        icon={<Icon icon="trash-16" iconSize={16} />}
-      />
+
+        <If condition={!receipt.is_closed}>
+          <MenuItem
+            icon={<Icon icon={'check'} iconSize={18} />}
+            text={intl.get('mark_as_closed')}
+            onClick={safeCallback(onClose, receipt)}
+          />
+        </If>
+      </Can>
+      <Can I={SaleReceiptAction.View} a={AbilitySubject.Receipt}>
+        <MenuItem
+          icon={<Icon icon={'print-16'} iconSize={16} />}
+          text={intl.get('print')}
+          onClick={safeCallback(onPrint, receipt)}
+        />
+      </Can>
+      <Can I={SaleReceiptAction.Delete} a={AbilitySubject.Receipt}>
+        <MenuItem
+          text={intl.get('delete_receipt')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, receipt)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
     </Menu>
   );
 }
diff --git a/src/containers/UniversalSearch/DashboardUniversalSearch.js b/src/containers/UniversalSearch/DashboardUniversalSearch.js
index 2accd802b..415c75c50 100644
--- a/src/containers/UniversalSearch/DashboardUniversalSearch.js
+++ b/src/containers/UniversalSearch/DashboardUniversalSearch.js
@@ -14,7 +14,7 @@ import DashboardUniversalSearchItemActions from './DashboardUniversalSearchItemA
 import { DashboardUniversalSearchItem } from './components';
 
 import DashboardUniversalSearchHotkeys from './DashboardUniversalSearchHotkeys';
-import { getUniversalSearchTypeOptions } from './utils';
+import { useGetUniversalSearchTypeOptions } from './utils';
 
 /**
  * Dashboard universal search.
@@ -28,6 +28,8 @@ function DashboardUniversalSearch({
   closeGlobalSearch,
   defaultUniversalResourceType,
 }) {
+  const searchTypeOptions = useGetUniversalSearchTypeOptions();
+
   // Search keyword.
   const [searchKeyword, setSearchKeyword] = React.useState('');
 
@@ -97,10 +99,9 @@ function DashboardUniversalSearch({
     setSearchKeyword('');
   };
 
-  const searchTypeOptions = React.useMemo(
-    () => getUniversalSearchTypeOptions(),
-    [],
-  );
+  if (searchTypeOptions.length === 0) {
+    return null;
+  }
 
   return (
     <div class="dashboard__universal-search">
diff --git a/src/containers/UniversalSearch/utils.js b/src/containers/UniversalSearch/utils.js
index e1edb7c84..2ecd53a76 100644
--- a/src/containers/UniversalSearch/utils.js
+++ b/src/containers/UniversalSearch/utils.js
@@ -1,5 +1,9 @@
 import { get } from 'lodash';
+import * as R from 'ramda';
+import React from 'react';
+
 import { universalSearchBinds } from './DashboardUniversalSearchBinds';
+import { useAbilitiesFilter } from '../../hooks/utils';
 
 /**
  *
@@ -23,22 +27,28 @@ export const getUniversalSearchBind = (resourceType, key) => {
 };
 
 /**
- * 
- * @returns 
+ * Retrieve universal search type options.
  */
-export const getUniversalSearchTypeOptions = () => {
-  return getUniversalSearchBinds().map((bind) => ({
-    key: bind.resourceType,
-    label: bind.optionItemLabel,
-  }))
-}
+export const useGetUniversalSearchTypeOptions = () => {
+  const abilityFilter = useAbilitiesFilter();
+
+  const momerizedBinds = React.useMemo(() => {
+    const filteredBinds = R.compose(abilityFilter, getUniversalSearchBinds)();
+
+    return filteredBinds.map((bind) => ({
+      key: bind.resourceType,
+      label: bind.optionItemLabel,
+    }));
+  }, [abilityFilter]);
+
+  return momerizedBinds;
+};
 
 /**
- * 
- * @returns 
+ * Retrieve universal search types actions.
  */
 export const getUniversalSearchItemsActions = () => {
   return getUniversalSearchBinds()
     .filter((bind) => bind.selectItemAction)
     .map((bind) => bind.selectItemAction);
-}
\ No newline at end of file
+};
diff --git a/src/containers/Vendors/VendorsLanding/VendorActionsBar.js b/src/containers/Vendors/VendorsLanding/VendorActionsBar.js
index 6f392cb7c..679d351ed 100644
--- a/src/containers/Vendors/VendorsLanding/VendorActionsBar.js
+++ b/src/containers/Vendors/VendorsLanding/VendorActionsBar.js
@@ -13,6 +13,7 @@ import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import Icon from 'components/Icon';
 import {
   If,
+  Can,
   FormattedMessage as T,
   DashboardActionViewsList,
   DashboardFilterButton,
@@ -29,7 +30,7 @@ import withVendors from './withVendors';
 
 import withSettingsActions from '../../Settings/withSettingsActions';
 import withSettings from '../../Settings/withSettings';
-
+import { VendorAction, AbilitySubject } from '../../../common/abilityOption';
 import { compose } from 'utils';
 
 /**
@@ -90,13 +91,15 @@ function VendorActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'plus'} />}
-          text={<T id={'new_vendor'} />}
-          onClick={onClickNewVendor}
-        />
-        <NavbarDivider />
+        <Can I={VendorActionsBar.Create} a={AbilitySubject.Vendor}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'plus'} />}
+            text={<T id={'new_vendor'} />}
+            onClick={onClickNewVendor}
+          />
+          <NavbarDivider />
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: vendorsFilterConditions,
@@ -136,12 +139,15 @@ function VendorActionsBar({
           onChange={handleTableRowSizeChange}
         />
         <NavbarDivider />
-        <Switch
-          labelElement={<T id={'inactive'} />}
-          defaultChecked={vendorsInactiveMode}
-          onChange={handleInactiveSwitchChange}
-        />
+        <Can I={VendorAction.Edit} a={AbilitySubject.Vendor}>
+          <Switch
+            labelElement={<T id={'inactive'} />}
+            defaultChecked={vendorsInactiveMode}
+            onChange={handleInactiveSwitchChange}
+          />
+        </Can>
       </NavbarGroup>
+
       <NavbarGroup align={Alignment.RIGHT}>
         <Button
           className={Classes.MINIMAL}
diff --git a/src/containers/Vendors/VendorsLanding/VendorsEmptyStatus.js b/src/containers/Vendors/VendorsLanding/VendorsEmptyStatus.js
index 5ce0cdc33..35038b3c8 100644
--- a/src/containers/Vendors/VendorsLanding/VendorsEmptyStatus.js
+++ b/src/containers/Vendors/VendorsLanding/VendorsEmptyStatus.js
@@ -2,7 +2,8 @@ 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 { VendorAction, AbilitySubject } from '../../../common/abilityOption';
 
 export default function VendorsEmptyStatus() {
   const history = useHistory();
@@ -17,19 +18,21 @@ export default function VendorsEmptyStatus() {
       }
       action={
         <>
-          <Button
-            intent={Intent.PRIMARY}
-            large={true}
-            onClick={() => {
-              history.push('/vendors/new');
-            }}
-          >
-            <T id={'new_vendor'} />
-          </Button>
+          <Can I={VendorAction.Create} a={AbilitySubject.Vendor}>
+            <Button
+              intent={Intent.PRIMARY}
+              large={true}
+              onClick={() => {
+                history.push('/vendors/new');
+              }}
+            >
+              <T id={'new_vendor'} />
+            </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/Vendors/VendorsLanding/components.js b/src/containers/Vendors/VendorsLanding/components.js
index 680c1469c..76bd69217 100644
--- a/src/containers/Vendors/VendorsLanding/components.js
+++ b/src/containers/Vendors/VendorsLanding/components.js
@@ -10,7 +10,8 @@ import {
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 
-import { Icon, Money, If, AvaterCell } from 'components';
+import { Can, Icon, Money, If, AvaterCell } from 'components';
+import { VendorAction, AbilitySubject } from '../../../common/abilityOption';
 import { safeCallback, firstLettersArgs } from 'utils';
 
 /**
@@ -34,37 +35,45 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <MenuDivider />
-      <MenuItem
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('edit_vendor')}
-        onClick={safeCallback(onEdit, original)}
-      />
-      <MenuItem
-        icon={<Icon icon="duplicate-16" />}
-        text={intl.get('duplicate')}
-        onClick={safeCallback(onDuplicate, original)}
-      />
-      <If condition={original.active}>
+      <Can I={VendorAction.Edit} a={AbilitySubject.Vendor}>
+        <MenuDivider />
         <MenuItem
-          text={intl.get('inactivate_item')}
-          icon={<Icon icon="pause-16" iconSize={16} />}
-          onClick={safeCallback(onInactivate, original)}
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('edit_vendor')}
+          onClick={safeCallback(onEdit, original)}
         />
-      </If>
-      <If condition={!original.active}>
+      </Can>
+      <Can I={VendorAction.Create} a={AbilitySubject.Customer}>
         <MenuItem
-          text={intl.get('activate_item')}
-          icon={<Icon icon="play-16" iconSize={16} />}
-          onClick={safeCallback(onActivate, original)}
+          icon={<Icon icon="duplicate-16" />}
+          text={intl.get('duplicate')}
+          onClick={safeCallback(onDuplicate, original)}
         />
-      </If>
-      <MenuItem
-        icon={<Icon icon="trash-16" iconSize={16} />}
-        text={intl.get('delete_vendor')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-      />
+      </Can>
+      <Can I={VendorAction.Edit} a={AbilitySubject.Vendor}>
+        <If condition={original.active}>
+          <MenuItem
+            text={intl.get('inactivate_item')}
+            icon={<Icon icon="pause-16" iconSize={16} />}
+            onClick={safeCallback(onInactivate, original)}
+          />
+        </If>
+        <If condition={!original.active}>
+          <MenuItem
+            text={intl.get('activate_item')}
+            icon={<Icon icon="play-16" iconSize={16} />}
+            onClick={safeCallback(onActivate, original)}
+          />
+        </If>
+      </Can>
+      <Can I={VendorAction.Delete} a={AbilitySubject.Vendor}>
+        <MenuItem
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          text={intl.get('delete_vendor')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+        />
+      </Can>
     </Menu>
   );
 }
diff --git a/src/containers/Vendors/VendorsUniversalSearch.js b/src/containers/Vendors/VendorsUniversalSearch.js
index 6a3f7fedb..08a2d73f9 100644
--- a/src/containers/Vendors/VendorsUniversalSearch.js
+++ b/src/containers/Vendors/VendorsUniversalSearch.js
@@ -1,6 +1,7 @@
 import intl from 'react-intl-universal';
 
 import { RESOURCES_TYPES } from '../../common/resourcesTypes';
+import { AbilitySubject, VendorAction } from '../../common/abilityOption';
 import withDrawerActions from '../Drawer/withDrawerActions';
 
 /**
@@ -43,4 +44,8 @@ export const universalSearchVendorBind = () => ({
   optionItemLabel: intl.get('vendors'),
   selectItemAction: VendorUniversalSearchSelectAction,
   itemSelect: vendorToSearch,
+  permission: {
+    ability: VendorAction.View,
+    subject: AbilitySubject.Vendor,
+  },
 });
diff --git a/src/hooks/dashboard/index.js b/src/hooks/dashboard/index.js
new file mode 100644
index 000000000..376a5d4cc
--- /dev/null
+++ b/src/hooks/dashboard/index.js
@@ -0,0 +1 @@
+export * from './useKeywordShortcuts';
\ No newline at end of file
diff --git a/src/hooks/dashboard/useKeywordShortcuts.js b/src/hooks/dashboard/useKeywordShortcuts.js
new file mode 100644
index 000000000..22c851f7d
--- /dev/null
+++ b/src/hooks/dashboard/useKeywordShortcuts.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import keyboardShortcuts from 'common/keyboardShortcutsOptions';
+import { useAbilitiesFilter } from '../utils/useAbilityContext';
+
+/**
+ * Retrieve the filtered keyword shortcuts.
+ */
+export const useKeywordShortcuts = () => {
+  const abilitiesFilter = useAbilitiesFilter();
+
+  return React.useMemo(
+    () => abilitiesFilter(keyboardShortcuts),
+    [abilitiesFilter],
+  );
+};
diff --git a/src/hooks/query/roles.js b/src/hooks/query/roles.js
index 7d45fac4e..145e59822 100644
--- a/src/hooks/query/roles.js
+++ b/src/hooks/query/roles.js
@@ -5,8 +5,9 @@ import t from './types';
 
 // Common invalidate queries.
 const commonInvalidateQueries = (queryClient) => {
-  queryClient.invalidateQueries(t.ROLES_PERMISSIONS_SCHEMA);
   queryClient.invalidateQueries(t.ROLE);
+  queryClient.invalidateQueries(t.ROLES);
+  queryClient.invalidateQueries(t.ROLES_PERMISSIONS_SCHEMA);
 };
 
 /**
@@ -86,9 +87,22 @@ export function useRolePermission(role_id, props, requestProps) {
     { method: 'get', url: `roles/${role_id}`, ...requestProps },
     {
       select: (res) => res.data.role,
-      defaultData: {
-        permission: [],
-      },
+      defaultData: {},
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve the roles.
+ */
+export function useRoles(props, query) {
+  return useRequestQuery(
+    [t.ROLES, query],
+    { method: 'get', url: `roles`, params: query },
+    {
+      select: (res) => res.data.roles,
+      defaultData: [],
       ...props,
     },
   );
diff --git a/src/hooks/query/users.js b/src/hooks/query/users.js
index 7dabd191a..e42c87c05 100644
--- a/src/hooks/query/users.js
+++ b/src/hooks/query/users.js
@@ -125,3 +125,37 @@ export function useUser(id, props) {
     },
   );
 }
+
+
+export function useAuthenticatedAccount(props){
+  return useRequestQuery(
+    ['AuthenticatedAccount'],
+    {
+      method: 'get',
+      url: `account`,
+    },
+    {
+      select: (response) => response.data.data,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
+
+/**
+ * Fetches the dashboard meta.
+ */
+export function useDashboardMeta(props) {
+  return useRequestQuery(
+    ['DashboardMeta'],
+    {
+      method: 'get',
+      url: 'dashboard/boot',
+    },
+    {
+      select: (res) => res.data.meta,
+      defaultData: {},
+      ...props
+    }
+  )
+}
\ No newline at end of file
diff --git a/src/hooks/useRequest.js b/src/hooks/useRequest.js
index 620e18728..f27edbd4e 100644
--- a/src/hooks/useRequest.js
+++ b/src/hooks/useRequest.js
@@ -56,6 +56,9 @@ export default function useApiRequest() {
           setGlobalErrors({ session_expired: true });
           setLogout();
         }
+        if (status === 403) {
+          setGlobalErrors({ access_denied: true })
+        }
         return Promise.reject(error);
       },
     );
diff --git a/src/hooks/utils/index.js b/src/hooks/utils/index.js
index d4d6152a6..5d189d42e 100644
--- a/src/hooks/utils/index.js
+++ b/src/hooks/utils/index.js
@@ -1,5 +1,3 @@
-
-
 export * from './useLocalStorage';
 export * from './usePrevious';
 export * from './useUpdateEffect';
@@ -7,4 +5,5 @@ export * from './useWatch';
 export * from './useWhen';
 export * from './useRequestPdf';
 export * from './useAsync';
-export * from './useIntersectionObserver';
\ No newline at end of file
+export * from './useIntersectionObserver';
+export * from './useAbilityContext';
\ No newline at end of file
diff --git a/src/hooks/utils/useAbilityContext.js b/src/hooks/utils/useAbilityContext.js
new file mode 100644
index 000000000..e3529372b
--- /dev/null
+++ b/src/hooks/utils/useAbilityContext.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { useAbility } from '@casl/react';
+import { AbilityContext } from '../../components';
+
+export const useAbilityContext = () => useAbility(AbilityContext);
+
+/**
+ *
+ */
+export const useAbilitiesFilter = () => {
+  const ability = useAbilityContext();
+
+  return React.useCallback(
+    (items) => {
+      return items.filter(
+        (item) =>
+          !item.permission ||
+          ability.can(item.permission.ability, item.permission.subject),
+      );
+    },
+    [ability],
+  );
+};
diff --git a/src/lang/ar/index.json b/src/lang/ar/index.json
index 913afc98d..64d09d443 100644
--- a/src/lang/ar/index.json
+++ b/src/lang/ar/index.json
@@ -360,7 +360,7 @@
   "the_email_already_used_in_another_account": "البريد الإلكتروني مستخدم بالفعل في حساب آخر",
   "hide_filter": "إخفاء الترشيح",
   "show_filter": "عرض عامل التصفية",
-  "new_role": "دور جديد",
+  "new_role": "دور مستخدم جديد",
   "quick_new": "انشاء سريع",
   "help": "مساعدة",
   "organization_id": "معرف المنشأة",
@@ -979,7 +979,7 @@
   "should_account_code_be_unique_when_create_a_new_account": "يجب أن يكون رمز الحساب فريدًا عند إنشاء حساب جديد.",
   "select_a_preferred_account_to_deposit_into_it_after_customer_make_payment": "حدد الحساب المفضل للإيداع فيه بعد قيام الزبون بالدفع.",
   "select_a_preferred_account_to_deposit_into_it_vendor_advanced_deposits": "حدد حساب المفضل لإيداع فيه ودائع الموردين المقدمة.",
-  "roles": "الأدوار",
+  "roles": "دور المستخدمين",
   "closing_balance": "الرصيد الختامي",
   "view_more_transactions": "عرض المزيد من المعاملات.",
   "there_is_no_results_in_the_table": "لا توجد نتائج في الجدول.",
@@ -1480,5 +1480,21 @@
   "sms_notification.payment_details.type": "شكر علي عملية الدفع",
   "sms_notification.receipt_details.type": "تفاصيل إيصال البيع",
   "personal": "المحمول",
-  "list.create":"إضافة {value}"
+  "list.create":"إضافة {value}",
+  "roles.label":"دور المستخدمين",
+  "roles.column.name":"اسم الدور",
+  "roles.column.description":"الوصف",
+  "roles.edit_roles":" تعديل دور المستخدم",
+  "roles.delete_roles":"حذف دور المستخدم",
+  "roles.label.role_name":"دور المستخدم",
+  "roles.error.role_is_predefined":"دور المستخدم معرَّف مسبقًا ، ولا يمكنك حذف دور المستخدمين المحددة مسبقًا ",
+  "roles.error.you_cannot_change_your_own_role":"لا يمكنك تغيير دور المستخدم الخاص بك.",
+  "roles.label.role_name_":"اسم دور المستخدم ",
+  "roles.permission_schema.success_message":"تم اضافة دور المستخدم بنجاح.",
+  "roles.permission_schema.upload_message":"تم تحديث دور المستخدم بنجاح.",
+  "roles.permission_schema.delete.alert_message":"تم حذف دور المستخدم بنجاح. ",
+  "roles.permission_schema.once_delete_this_role_you_will_able_to_restore_it":"بمجرد حذف دور المستخدم ، لن تتمكن من استعادتها لاحقًا. هل أنت متأكد أنك تريد حذف هذا الدور؟",
+  "users.column.role_name":"دور المستخدم",
+  "roles.error.you_cannot_edit_predefined_roles":"لا يمكنك تعديل أدوار المستخدم المحددة مسبقا.",
+  "roles.error.you_cannot_delete_predefined_roles":"لا يمكنك حذف أدوار المستخدم المحددة مسبقا"
 }
\ No newline at end of file
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index e083506be..6af818a9b 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1470,14 +1470,20 @@
   "list.create":"Create {value}",
   "roles.label":"Roles",
   "roles.column.name":"Name",
-  "roles.column.description":"description",
+  "roles.column.description":"Description",
   "roles.edit_roles":"Edit Roles",
   "roles.delete_roles":"Delete Roles",
-  "roles.label.role_name":"Role name",
+  "roles.label.role_name":"Role Name",
+  "roles.label.role_name_":"Role name",
+  "roles.error.role_is_predefined":"Role is predefined, you cannot delete predefined roles.",
+  "roles.error.you_cannot_change_your_own_role":"You cannot change your own role.",
   "sidebar.transactions_locaking":"Transactions Locaking",
   "transactions_locking.dialog.label":"Transactions locking",
   "roles.permission_schema.success_message":"The role has been created successfully.",
-  "roles.permission_schema.upload_message":"The given role hsa been updated successfully.",
+  "roles.permission_schema.upload_message":"The given role has been updated successfully.",
   "roles.permission_schema.delete.alert_message":"The given role has been deleted successfully.",
-  "roles.permission_schema.once_delete_this_role_you_will_able_to_restore_it":"Once you delete this role, you won't be able to restore it later. Are you sure you want to delete this role?"
+  "roles.permission_schema.once_delete_this_role_you_will_able_to_restore_it":"Once you delete this role, you won't be able to restore it later. Are you sure you want to delete this role?",
+  "users.column.role_name":"Role Name",
+  "roles.error.you_cannot_edit_predefined_roles":"You cannot edit predefined roles.",
+  "roles.error.you_cannot_delete_predefined_roles":"You cannot delete predefined roles."
 }
\ No newline at end of file
diff --git a/src/style/pages/Users/UserFormDialog.scss b/src/style/pages/Users/UserFormDialog.scss
index fd1b9821d..767701724 100644
--- a/src/style/pages/Users/UserFormDialog.scss
+++ b/src/style/pages/Users/UserFormDialog.scss
@@ -20,6 +20,11 @@
     }
   }
 
+  .bp3-callout {
+    font-size: 13px;
+    margin-bottom: 20px;
+  }
+
   .bp3-dialog-footer {
     .bp3-button {
       min-width: 75px;