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/classes.js b/src/common/classes.js
index bea33a718..e1df0b33f 100644
--- a/src/common/classes.js
+++ b/src/common/classes.js
@@ -67,6 +67,7 @@ const CLASSES = {
   PREFERENCES_PAGE_INSIDE_CONTENT_CURRENCIES: 'preferences-page__inside-content--currencies',
   PREFERENCES_PAGE_INSIDE_CONTENT_ACCOUNTANT: 'preferences-page__inside-content--accountant',
   PREFERENCES_PAGE_INSIDE_CONTENT_SMS_INTEGRATION: 'preferences-page__inside-content--sms-integration',
+  PREFERENCES_PAGE_INSIDE_CONTENT_ROLES_FORM: 'preferences-page__inside-content--roles-form',
 
   FINANCIAL_REPORT_INSIDER: 'dashboard__insider--financial-report',
 
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/AccountsSelectList.js b/src/components/AccountsSelectList.js
index 9ed337284..354b80bb1 100644
--- a/src/components/AccountsSelectList.js
+++ b/src/components/AccountsSelectList.js
@@ -3,6 +3,7 @@ import { MenuItem, Button } from '@blueprintjs/core';
 import { Select } from '@blueprintjs/select';
 import * as R from 'ramda';
 import classNames from 'classnames';
+import intl from 'react-intl-universal'
 
 import { MenuItemNestedText, FormattedMessage as T } from 'components';
 import { filterAccountsByQuery } from './utils';
@@ -16,7 +17,7 @@ const createNewItemRenderer = (query, active, handleClick) => {
   return (
     <MenuItem
       icon="add"
-      text={`Create "${query}"`}
+      text={intl.get('list.create', { value: `"${query}"` })}
       active={active}
       onClick={handleClick}
     />
diff --git a/src/components/AccountsSuggestField.js b/src/components/AccountsSuggestField.js
index 55697a4fe..c28739947 100644
--- a/src/components/AccountsSuggestField.js
+++ b/src/components/AccountsSuggestField.js
@@ -18,7 +18,7 @@ const createNewItemRenderer = (query, active, handleClick) => {
   return (
     <MenuItem
       icon="add"
-      text={`Create "${query}"`}
+      text={intl.get('list.create', { value: `"${query}"` })}
       active={active}
       onClick={handleClick}
     />
diff --git a/src/components/Contacts/utils.js b/src/components/Contacts/utils.js
index 59d0a4a8c..58b453981 100644
--- a/src/components/Contacts/utils.js
+++ b/src/components/Contacts/utils.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import intl from 'react-intl-universal';
 import { MenuItem } from '@blueprintjs/core';
 
 // Filter Contact List
@@ -34,7 +35,7 @@ export const createNewItemRenderer = (query, active, handleClick) => {
   return (
     <MenuItem
       icon="add"
-      text={`Create "${query}"`}
+      text={intl.get('list.create', { value: `"${query}"` })}
       active={active}
       shouldDismissPopover={false}
       onClick={handleClick}
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..095a972cc 100644
--- a/src/components/Dashboard/DashboardBoot.js
+++ b/src/components/Dashboard/DashboardBoot.js
@@ -1,18 +1,52 @@
 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();
+
+  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 +56,7 @@ function DashboardBootJSX({ authenticatedUserId }) {
 
   // Authenticated user.
   const { isSuccess: isAuthUserSuccess, isLoading: isAuthUserLoading } =
-    useUser(authenticatedUserId);
+    useAuthenticatedAccount();
 
   // Initial locale cookie value.
   const localeCookie = getCookie('locale');
@@ -86,11 +120,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..b72160cf4 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();
+
+  return (
+    <DashboardAbilityProvider>
+      {isLoading ? null : children}
+    </DashboardAbilityProvider>
+  );
 }
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/DialogsContainer.js b/src/components/DialogsContainer.js
index db9f883c2..871e38a58 100644
--- a/src/components/DialogsContainer.js
+++ b/src/components/DialogsContainer.js
@@ -23,8 +23,9 @@ import BadDebtDialog from '../containers/Dialogs/BadDebtDialog';
 import NotifyInvoiceViaSMSDialog from '../containers/Dialogs/NotifyInvoiceViaSMSDialog';
 import NotifyReceiptViaSMSDialog from '../containers/Dialogs/NotifyReceiptViaSMSDialog';
 import NotifyEstimateViaSMSDialog from '../containers/Dialogs/NotifyEstimateViaSMSDialog';
-import NotifyPaymentReceiveViaSMSDialog from '../containers/Dialogs/NotifyPaymentReceiveViaSMSDialog'
+import NotifyPaymentReceiveViaSMSDialog from '../containers/Dialogs/NotifyPaymentReceiveViaSMSDialog';
 import SMSMessageDialog from '../containers/Dialogs/SMSMessageDialog';
+import TransactionsLockingDialog from '../containers/Dialogs/TransactionsLockingDialog';
 
 /**
  * Dialogs container.
@@ -58,6 +59,7 @@ export default function DialogsContainer() {
 
       <BadDebtDialog dialogName={'write-off-bad-debt'} />
       <SMSMessageDialog dialogName={'sms-message-form'} />
+      <TransactionsLockingDialog dialogName={'transactions-locking'} />
     </div>
   );
 }
diff --git a/src/components/ItemsSuggestField.js b/src/components/ItemsSuggestField.js
index 7473a6bb5..346784661 100644
--- a/src/components/ItemsSuggestField.js
+++ b/src/components/ItemsSuggestField.js
@@ -3,7 +3,7 @@ import { MenuItem } from '@blueprintjs/core';
 import { Suggest } from '@blueprintjs/select';
 import classNames from 'classnames';
 import * as R from 'ramda';
-
+import intl from 'react-intl-universal';
 import { CLASSES } from 'common/classes';
 
 import { FormattedMessage as T } from 'components';
@@ -24,7 +24,7 @@ const createNewItemRenderer = (query, active, handleClick) => {
   return (
     <MenuItem
       icon="add"
-      text={`Create "${query}"`}
+      text={intl.get('list.create', { value: `"${query}"` })}
       active={active}
       shouldDismissPopover={false}
       onClick={handleClick}
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 ddd6799b3..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,25 +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,
+        },
       },
     ],
   },
@@ -195,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,
+        },
       },
     ],
   },
@@ -227,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,
+        },
       },
     ],
   },
@@ -247,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,
+        },
       },
     ],
   },
@@ -328,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/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
new file mode 100644
index 000000000..ff240ebaa
--- /dev/null
+++ b/src/containers/Alerts/Roles/RoleDeleteAlert.js
@@ -0,0 +1,83 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormattedMessage as T, FormattedHTMLMessage } from 'components';
+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';
+
+import { compose } from 'utils';
+
+/**
+ * Role delete alert.
+ */
+function RoleDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { roleId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: deleteRole, isLoading } = useDeleteRole();
+
+  // Handle cancel delete role alert.
+  const handleCancelDelete = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm delete role.
+  const handleConfirmDeleteRole = () => {
+    deleteRole(roleId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('roles.permission_schema.delete.alert_message'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch(
+        ({
+          response: {
+            data: { errors },
+          },
+        }) => {
+          handleDeleteErrors(errors);
+        },
+      )
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelDelete}
+      onConfirm={handleConfirmDeleteRole}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={
+            'roles.permission_schema.once_delete_this_role_you_will_able_to_restore_it'
+          }
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(RoleDeleteAlert);
diff --git a/src/containers/AlertsContainer/registered.js b/src/containers/AlertsContainer/registered.js
index 898c583d3..d0e77fcfb 100644
--- a/src/containers/AlertsContainer/registered.js
+++ b/src/containers/AlertsContainer/registered.js
@@ -16,6 +16,7 @@ import ExpensesAlerts from '../Expenses/ExpensesAlerts';
 import AccountTransactionsAlerts from '../CashFlow/AccountTransactions/AccountTransactionsAlerts';
 import UsersAlerts from '../Preferences/Users/UsersAlerts';
 import CurrenciesAlerts from '../Preferences/Currencies/CurrenciesAlerts';
+import RolesAlerts from '../Preferences/Users/Roles/RolesAlerts';
 
 export default [
   ...AccountsAlerts,
@@ -36,4 +37,5 @@ export default [
   ...AccountTransactionsAlerts,
   ...UsersAlerts,
   ...CurrenciesAlerts,
+  ...RolesAlerts,
 ];
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/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/TransactionsLockingDialog/TransactionsLockingDialogContent.js b/src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingDialogContent.js
new file mode 100644
index 000000000..28d763962
--- /dev/null
+++ b/src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingDialogContent.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { TransactionsLockingFormProvider } from './TransactionsLockingFormProvider';
+import TransactionsLockingForm from './TransactionsLockingForm';
+
+export default function TransactionsLockingDialogContent({
+  // #ownProps
+  dialogName,
+}) {
+  return (
+    <TransactionsLockingFormProvider dialogName={dialogName}>
+      <TransactionsLockingForm />
+    </TransactionsLockingFormProvider>
+  );
+}
diff --git a/src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingFloatingActions.js b/src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingFloatingActions.js
new file mode 100644
index 000000000..51c29dedc
--- /dev/null
+++ b/src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingFloatingActions.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import { Intent, Button, Classes } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import { FormattedMessage as T } from 'components';
+
+import { useTransactionLockingContext } from './TransactionsLockingFormProvider';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+/**
+ * Transactions locking floating actions.
+ */
+function TransactionsLockingFloatingActions({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // Formik context.
+  const { isSubmitting } = useFormikContext();
+
+  const { dialogName } = useTransactionLockingContext();
+
+  // Handle cancel button click.
+  const handleCancelBtnClick = (event) => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button
+          disabled={isSubmitting}
+          onClick={handleCancelBtnClick}
+          style={{ minWidth: '75px' }}
+        >
+          <T id={'cancel'} />
+        </Button>
+        <Button
+          intent={Intent.PRIMARY}
+          loading={isSubmitting}
+          style={{ minWidth: '75px' }}
+          type="submit"
+        >
+          {<T id={'submit'} />}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default compose(withDialogActions)(TransactionsLockingFloatingActions);
diff --git a/src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingForm.js b/src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingForm.js
new file mode 100644
index 000000000..9bba5437a
--- /dev/null
+++ b/src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingForm.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import moment from 'moment';
+import { Intent } from '@blueprintjs/core';
+import { Formik } from 'formik';
+import intl from 'react-intl-universal';
+
+import '../../../style/pages/TransactionsLocking/TransactionsLockingDialog.scss'
+
+import { AppToaster } from 'components';
+import { CreateTransactionsLockingFormSchema } from './TransactionsLockingForm.schema';
+
+import { useTransactionLockingContext } from './TransactionsLockingFormProvider';
+import TransactionsLockingFormContent from './TransactionsLockingFormContent';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+const defaultInitialValues = {
+  date: moment(new Date()).format('YYYY-MM-DD'),
+  reason: '',
+};
+
+/**
+ * Transactions Locking From.
+ */
+function TransactionsLockingForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { dialogName } = useTransactionLockingContext();
+  // Initial form values.
+  const initialValues = {
+    ...defaultInitialValues,
+  };
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {};
+
+  return (
+    <Formik
+      validationSchema={CreateTransactionsLockingFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+      component={TransactionsLockingFormContent}
+    />
+  );
+}
+export default compose(withDialogActions)(TransactionsLockingForm);
diff --git a/src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingForm.schema.js b/src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingForm.schema.js
new file mode 100644
index 000000000..a74058f3f
--- /dev/null
+++ b/src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingForm.schema.js
@@ -0,0 +1,13 @@
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from 'common/dataTypes';
+
+const Schema = Yup.object().shape({
+  date: Yup.date().required().label(intl.get('date')),
+  reason: Yup.string()
+    .required()
+    .min(3)
+    .max(DATATYPES_LENGTH.TEXT)
+    .label(intl.get('reason')),
+});
+export const CreateTransactionsLockingFormSchema = Schema;
diff --git a/src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingFormContent.js b/src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingFormContent.js
new file mode 100644
index 000000000..43a1e1dda
--- /dev/null
+++ b/src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingFormContent.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Form } from 'formik';
+
+import TransactionsLockingFormFields from './TransactionsLockingFormFields';
+import TransactionsLockingFloatingActions from './TransactionsLockingFloatingActions';
+
+/**
+ * Transactions locking form content.
+ */
+export default function TransactionsLockingFormContent() {
+  return (
+    <Form>
+      <TransactionsLockingFormFields />
+      <TransactionsLockingFloatingActions />
+    </Form>
+  );
+}
diff --git a/src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingFormFields.js b/src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingFormFields.js
new file mode 100644
index 000000000..bede9d2fc
--- /dev/null
+++ b/src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingFormFields.js
@@ -0,0 +1,72 @@
+import React from 'react';
+import { FastField, ErrorMessage } from 'formik';
+import { Classes, FormGroup, TextArea, Position } from '@blueprintjs/core';
+import { DateInput } from '@blueprintjs/datetime';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import { FieldRequiredHint, FormattedMessage as T } from 'components';
+import { useAutofocus } from 'hooks';
+import {
+  inputIntent,
+  momentFormatter,
+  tansformDateValue,
+  handleDateChange,
+} from 'utils';
+
+/**
+ * Transactions locking form fields.
+ */
+export default function TransactionsLockingFormFields() {
+  const dateFieldRef = useAutofocus();
+
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      {/*------------ Date -----------*/}
+      <FastField name={'date'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'date'} />}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="date" />}
+            minimal={true}
+            className={classNames(CLASSES.FILL, 'form-group--date')}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('date', formattedDate);
+              })}
+              value={tansformDateValue(value)}
+              popoverProps={{
+                position: Position.BOTTOM,
+                minimal: true,
+              }}
+              intent={inputIntent({ error, touched })}
+              inputRef={(ref) => (dateFieldRef.current = ref)}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+      {/*------------  reasons -----------*/}
+      <FastField name={'reason'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'reason'} />}
+            labelInfo={<FieldRequiredHint />}
+            className={'form-group--reason'}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'reason'} />}
+          >
+            <TextArea
+              growVertically={true}
+              large={true}
+              intent={inputIntent({ error, touched })}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}
diff --git a/src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingFormProvider.js b/src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingFormProvider.js
new file mode 100644
index 000000000..7a8d95b96
--- /dev/null
+++ b/src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingFormProvider.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { DialogContent } from 'components';
+
+const TransactionsLockingContext = React.createContext();
+
+function TransactionsLockingFormProvider({ dialogName, ...props }) {
+  // State provider.
+  const provider = {
+    dialogName,
+  };
+  return (
+    <DialogContent>
+      <TransactionsLockingContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useTransactionLockingContext = () =>
+  React.useContext(TransactionsLockingContext);
+
+export { TransactionsLockingFormProvider, useTransactionLockingContext };
diff --git a/src/containers/Dialogs/TransactionsLockingDialog/index.js b/src/containers/Dialogs/TransactionsLockingDialog/index.js
new file mode 100644
index 000000000..d6ff27db8
--- /dev/null
+++ b/src/containers/Dialogs/TransactionsLockingDialog/index.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Dialog, DialogSuspense, FormattedMessage as T } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'utils';
+
+const TransactionsLockingContent = React.lazy(() =>
+  import('./TransactionsLockingDialogContent'),
+);
+
+/**
+ * Transaction Locking dialog
+ */
+function TransactionsLockingDialog({ dialogName, payload = {}, isOpen }) {
+  return (
+    <Dialog
+      name={dialogName}
+      autoFocus={true}
+      title={<T id={'transactions_locking.dialog.label'} />}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      className={'dialog--transaction--locking'}
+    >
+      <DialogSuspense>
+        <TransactionsLockingContent dialogName={dialogName} />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(TransactionsLockingDialog);
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/QuickWriteVendorDrawer/QuickWriteVendorDrawerContent.js b/src/containers/Drawers/QuickWriteVendorDrawer/QuickWriteVendorDrawerContent.js
index b686d2211..f92eec3d5 100644
--- a/src/containers/Drawers/QuickWriteVendorDrawer/QuickWriteVendorDrawerContent.js
+++ b/src/containers/Drawers/QuickWriteVendorDrawer/QuickWriteVendorDrawerContent.js
@@ -15,7 +15,8 @@ export default function QuickWriteVendorDrawerContent({ displayName }) {
     <React.Fragment>
       <DrawerHeaderContent
         name="quick-create-customer"
-        title={"Create a new vendor"}
+        title={<T id={'create_a_new_vendor'} />}
+
       />
       <DrawerBody>
         <QuickVendorFormDrawer displayName={displayName} />
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 67e30c732..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,6 +31,8 @@ import withSettings from '../Settings/withSettings';
 import { compose } from 'utils';
 import withSettingsActions from '../Settings/withSettingsActions';
 
+import { ItemAction, AbilitySubject } from '../../common/abilityOption';
+
 /**
  * Items actions bar.
  */
@@ -101,13 +104,14 @@ function ItemsActionsBar({
         />
         <NavbarDivider />
 
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="plus" />}
-          text={<T id={'new_item'} />}
-          onClick={onClickNewItem}
-        />
-
+        <Can I={ItemAction.Create} a={AbilitySubject.Item}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="plus" />}
+            text={<T id={'new_item'} />}
+            onClick={onClickNewItem}
+          />
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: itemsFilterRoles,
@@ -149,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/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/Users/Roles/RolesAlerts.js b/src/containers/Preferences/Users/Roles/RolesAlerts.js
new file mode 100644
index 000000000..3be60d546
--- /dev/null
+++ b/src/containers/Preferences/Users/Roles/RolesAlerts.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+const RoleDeleteAlert = React.lazy(() =>
+  import('../../../Alerts/Roles/RoleDeleteAlert'),
+);
+
+/**
+ * Roles alerts
+ */
+export default [{ name: 'role-delete', component: RoleDeleteAlert }];
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.js b/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.js
new file mode 100644
index 000000000..5062bb2e4
--- /dev/null
+++ b/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.js
@@ -0,0 +1,97 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import intl from 'react-intl-universal';
+import { Formik } from 'formik';
+
+import 'style/pages/Preferences/Roles/Form.scss';
+
+import { Intent } from '@blueprintjs/core';
+
+import { AppToaster, FormattedMessage as T } from 'components';
+
+import { CreateRolesFormSchema, EditRolesFormSchema } from './RolesForm.schema';
+
+import { useRolesFormContext } from './RolesFormProvider';
+import { transformToArray } from './utils';
+
+import RolesFormContent from './RolesFormContent';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+
+import { compose, transformToForm } from 'utils';
+
+const defaultValues = {
+  role_name: '',
+  role_description: '',
+  permissions: {},
+};
+
+/**
+ *  Preferences - Roles Form.
+ */
+function RolesForm({
+  // #withDashboardActions
+  changePreferencesPageTitle,
+}) {
+  // History context.
+  const history = useHistory();
+
+  const {
+    isNewMode,
+    createRolePermissionMutate,
+    editRolePermissionMutate,
+    permissionSchema,
+    roleId,
+  } = useRolesFormContext();
+
+  // Initial values.
+  const initialValues = {
+    ...defaultValues,
+    ...transformToForm(permissionSchema, defaultValues),
+  };
+
+  React.useEffect(() => {
+    changePreferencesPageTitle(<T id={'roles.label'} />);
+  }, [changePreferencesPageTitle]);
+
+  const handleFormSubmit = (values, { setSubmitting }) => {
+    const permission = transformToArray(values);
+    const form = {
+      ...values,
+      permissions: permission,
+    };
+    setSubmitting(true);
+    const onSuccess = () => {
+      AppToaster.show({
+        message: intl.get(
+          isNewMode
+            ? 'roles.permission_schema.success_message'
+            : 'roles.permission_schema.upload_message',
+        ),
+        intent: Intent.SUCCESS,
+      });
+      setSubmitting(false);
+      history.push('/preferences/users');
+    };
+
+    const onError = (errors) => {
+      setSubmitting(false);
+    };
+    if (isNewMode) {
+      createRolePermissionMutate(form).then(onSuccess).catch(onError);
+    } else {
+      editRolePermissionMutate([roleId, form]).then(onSuccess).catch(onError);
+    }
+  };
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      validationSchema={isNewMode ? CreateRolesFormSchema : EditRolesFormSchema}
+      onSubmit={handleFormSubmit}
+    >
+      <RolesFormContent />
+    </Formik>
+  );
+}
+
+export default compose(withDashboardActions)(RolesForm);
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.schema.js b/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.schema.js
new file mode 100644
index 000000000..b2f40ecdb
--- /dev/null
+++ b/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.schema.js
@@ -0,0 +1,17 @@
+import * as Yup from 'yup';
+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_description: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
+
+  permissions: Yup.object().shape({
+    subject: Yup.string(),
+    ability: Yup.string(),
+    value: Yup.boolean(),
+  }),
+});
+
+export const CreateRolesFormSchema = Schema;
+export const EditRolesFormSchema = Schema;
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RolesFormContent.js b/src/containers/Preferences/Users/Roles/RolesForm/RolesFormContent.js
new file mode 100644
index 000000000..ae2267054
--- /dev/null
+++ b/src/containers/Preferences/Users/Roles/RolesForm/RolesFormContent.js
@@ -0,0 +1,76 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { ErrorMessage, FastField, Form, useFormikContext } from 'formik';
+import {
+  Button,
+  FormGroup,
+  InputGroup,
+  Intent,
+  TextArea,
+} from '@blueprintjs/core';
+import { inputIntent } from 'utils';
+import { FormattedMessage as T, FieldRequiredHint } from 'components';
+import { useAutofocus } from 'hooks';
+import { RolesPermissionList } from './components';
+
+/**
+ * Preferences - Roles Form content.
+ */
+export default function RolesFormContent() {
+  const history = useHistory();
+
+  const { isSubmitting, values } = useFormikContext();
+  const roleNameFieldRef = useAutofocus();
+
+  const handleCloseClick = () => {
+    history.go(-1);
+  };
+  return (
+    <Form>
+      {/* ----------  name ----------  */}
+      <FastField name={'role_name'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'name'} />}
+            labelInfo={<FieldRequiredHint />}
+            className={'form-group--name'}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="role_name" />}
+            inline={true}
+          >
+            <InputGroup
+              medium={true}
+              inputRef={(ref) => (roleNameFieldRef.current = ref)}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------  description ----------  */}
+      <FastField name={'role_description'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'description'} />}
+            className={'form-group--description'}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'role_description'} />}
+            inline={true}
+          >
+            <TextArea growVertically={true} height={280} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+      <RolesPermissionList />
+
+      <div className={'card__footer'}>
+        <Button intent={Intent.PRIMARY} loading={isSubmitting} type="submit">
+          <T id={'save'} />
+        </Button>
+        <Button onClick={handleCloseClick} disabled={isSubmitting}>
+          <T id={'cancel'} />
+        </Button>
+      </div>
+    </Form>
+  );
+}
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RolesFormPage.js b/src/containers/Preferences/Users/Roles/RolesForm/RolesFormPage.js
new file mode 100644
index 000000000..14accbe68
--- /dev/null
+++ b/src/containers/Preferences/Users/Roles/RolesForm/RolesFormPage.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import RolesForm from './RolesForm';
+import { RolesFormProvider } from './RolesFormProvider';
+
+/**
+ * Roles Form page.
+ */
+export default function RolesFormPage() {
+  const { id } = useParams();
+  const idInteger = parseInt(id, 10);
+
+  return (
+    <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
new file mode 100644
index 000000000..2484f0c62
--- /dev/null
+++ b/src/containers/Preferences/Users/Roles/RolesForm/RolesFormProvider.js
@@ -0,0 +1,75 @@
+import React from 'react';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import _, { isArray } from 'lodash';
+
+import {
+  useCreateRolePermissionSchema,
+  useEditRolePermissionSchema,
+  usePermissionsSchema,
+  useRolePermission,
+} from 'hooks/query';
+import PreferencesPageLoader from '../../../PreferencesPageLoader';
+import { transformToObject } from './utils';
+
+const RolesFormContext = React.createContext();
+
+/**
+ * Roles Form page provider.
+ */
+function RolesFormProvider({ roleId, ...props }) {
+  // Create and edit roles mutations.
+  const { mutateAsync: createRolePermissionMutate } =
+    useCreateRolePermissionSchema();
+
+  const { mutateAsync: editRolePermissionMutate } =
+    useEditRolePermissionSchema();
+
+  const {
+    data: permissionsSchema,
+    isLoading: isPermissionsSchemaLoading,
+    isFetching: isPermissionsSchemaFetching,
+  } = usePermissionsSchema();
+
+  const { data: permission, isLoading: isPermissionLoading } =
+    useRolePermission(roleId, {
+      enabled: !!roleId,
+    });
+
+  const isNewMode = !roleId;
+
+  const permissionSchema = transformToObject(permission);
+
+  // Provider state.
+  const provider = {
+    isNewMode,
+    roleId,
+    permissionsSchema,
+    permissionSchema,
+    isPermissionsSchemaLoading,
+    isPermissionsSchemaFetching,
+    createRolePermissionMutate,
+    editRolePermissionMutate,
+  };
+
+  return (
+    <div
+      className={classNames(
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_ROLES_FORM,
+      )}
+    >
+      <div className={classNames(CLASSES.CARD)}>
+        {isPermissionsSchemaLoading || isPermissionLoading ? (
+          <PreferencesPageLoader />
+        ) : (
+          <RolesFormContext.Provider value={provider} {...props} />
+        )}
+      </div>
+    </div>
+  );
+}
+
+const useRolesFormContext = () => React.useContext(RolesFormContext);
+
+export { RolesFormProvider, useRolesFormContext };
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/components.js b/src/containers/Preferences/Users/Roles/RolesForm/components.js
new file mode 100644
index 000000000..75b7921df
--- /dev/null
+++ b/src/containers/Preferences/Users/Roles/RolesForm/components.js
@@ -0,0 +1,150 @@
+import React from 'react';
+import { Checkbox } from '@blueprintjs/core';
+import styled from 'styled-components';
+import { castArray } from 'lodash';
+
+import { FastField, useFormikContext } from 'formik';
+import { whenRtl, whenLtr } from 'utils/styled-components';
+import { Icon, Hint, If, Choose } from 'components';
+import { useRolesFormContext } from './RolesFormProvider';
+
+const RoleLabelCheckbox = ({ subject, label, description }) => (
+  <>
+    <LabelCheckbox>
+      {/*------------- subject checbox ------------- */}
+      <FastField name={subject} type="checkbox">
+        {({ form: { setFieldValue, values }, field }) => (
+          <Checkbox
+            className={'block'}
+            inline={true}
+            label={label}
+            name={subject}
+          />
+        )}
+      </FastField>
+      <p>{description}</p>
+    </LabelCheckbox>
+  </>
+);
+
+const AbilitiesList = ({ subject, abilities }) => {
+  return (
+    <AbilitieList>
+      {abilities?.map(({ key, label }) => (
+        <FastField name={`permissions.${subject}/${key}`} type="checkbox">
+          {({ form: { setFieldValue, values }, field }) => (
+            <Checkbox inline={true} label={label} {...field} />
+          )}
+        </FastField>
+      ))}
+    </AbilitieList>
+  );
+};
+
+const ExtraAbilitiesList = ({ subject, extraAbilities }) => {
+  return extraAbilities?.map(({ key, label }) => (
+    <AbilitieList>
+      <FastField name={`permissions.${subject}/${key}`} type="checkbox">
+        {({ form: { setFieldValue, values }, field }) => (
+          <Checkbox inline={true} label={label} {...field} />
+        )}
+      </FastField>
+    </AbilitieList>
+  ));
+};
+
+export const RolesPermissionList = () => {
+  const { permissionsSchema } = useRolesFormContext();
+
+  return (
+    <GroupList>
+      <BoxedGroupList>
+        {permissionsSchema.map(
+          ({
+            subject,
+            subject_label,
+            description,
+            abilities,
+            extra_abilities,
+          }) => {
+            const extraAbilitiesList = Array.isArray(extra_abilities)
+              ? extra_abilities
+              : [];
+
+            const abilitiesList = castArray(abilities) ? abilities : [];
+
+            return (
+              <React.Fragment>
+                <RoleList>
+                  <RoleLabelCheckbox
+                    subject={subject}
+                    label={subject_label}
+                    description={description}
+                  />
+
+                  <AbilitiesList subject={subject} abilities={abilitiesList} />
+                  <ExtraAbilitiesList
+                    subject={subject}
+                    extraAbilities={extraAbilitiesList}
+                  />
+                </RoleList>
+              </React.Fragment>
+            );
+          },
+        )}
+      </BoxedGroupList>
+    </GroupList>
+  );
+};
+
+const GroupList = styled.div`
+  list-style: none;
+  border: 1px solid #d2dce2;
+  border-radius: 6px;
+  font-size: 13px;
+
+  ul:first-child > li:last-child {
+    border-bottom: 0;
+    border-top: 0;
+  }
+`;
+
+const BoxedGroupList = styled.ul`
+  margin: 0;
+  list-style: none;
+`;
+
+const RoleList = styled.li`
+  display: block;
+  padding: 5px 10px;
+  margin: 0;
+  line-height: 20px;
+  border-bottom: 1px solid #e0e0e0;
+`;
+
+const LabelCheckbox = styled.label`
+  > * {
+    display: inline-block;
+  }
+  .block {
+    width: 220px;
+    padding: 2px 0;
+    font-weight: 500;
+  }
+`;
+
+const AbilitieList = styled.ul`
+  list-style: none;
+  /* margin-left: 12px; // 10px */
+  margin: 0px 10px 0px;
+
+  > li {
+    display: inline-block;
+    margin-top: 3px;
+  }
+`;
+
+const AbilitiesChildList = styled.li`
+  display: inline-block;
+  margin-top: 3px;
+`;
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/utils.js b/src/containers/Preferences/Users/Roles/RolesForm/utils.js
new file mode 100644
index 000000000..bdb6ef36a
--- /dev/null
+++ b/src/containers/Preferences/Users/Roles/RolesForm/utils.js
@@ -0,0 +1,27 @@
+import { isEmpty } from 'lodash';
+
+export const transformToArray = ({ permissions }) => {
+  return Object.keys(permissions).map((index) => {
+    const [value, key] = index.split('/');
+
+    return {
+      subject: value,
+      ability: key,
+      value: permissions[index],
+    };
+  });
+};
+
+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 },
+    };
+  }
+};
diff --git a/src/containers/Preferences/Users/Roles/RolesLanding/RolesDataTable.js b/src/containers/Preferences/Users/Roles/RolesLanding/RolesDataTable.js
new file mode 100644
index 000000000..f4f41ef84
--- /dev/null
+++ b/src/containers/Preferences/Users/Roles/RolesLanding/RolesDataTable.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import intl from 'react-intl-universal';
+
+import { DataTable } 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';
+
+/**
+ * Roles data table.
+ */
+function RolesDataTable({
+  // #withAlertsActions
+  openAlert,
+}) {
+  // History context.
+  const history = useHistory();
+
+  const columns = useRolesTableColumns();
+
+  const { roles, isRolesFetching, isRolesLoading } = useRolesContext();
+
+  const handleDeleteRole = ({ id }) => {
+    openAlert('role-delete', { roleId: id });
+  };
+
+  const handleEditRole = ({ id }) => {
+    history.push(`/preferences/roles/${id}`);
+  };
+
+  return (
+    <DataTable
+      columns={columns}
+      data={roles}
+      loading={isRolesLoading}
+      headerLoading={isRolesFetching}
+      progressBarLoading={isRolesFetching}
+      TableLoadingRenderer={TableSkeletonRows}
+      ContextMenu={ActionsMenu}
+      payload={{
+        onDeleteRole: handleDeleteRole,
+        onEditRole: handleEditRole,
+      }}
+    />
+  );
+}
+
+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
new file mode 100644
index 000000000..436adb6e5
--- /dev/null
+++ b/src/containers/Preferences/Users/Roles/RolesLanding/RolesList.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import { RolesListProvider } from './RolesListProvider';
+import RolesDataTable from './RolesDataTable';
+
+/**
+ * Roles list.
+ */
+function RolesListPrefernces() {
+  return (
+    <RolesListProvider>
+      <RolesDataTable />
+    </RolesListProvider>
+  );
+}
+
+export default RolesListPrefernces;
diff --git a/src/containers/Preferences/Users/Roles/RolesLanding/RolesListProvider.js b/src/containers/Preferences/Users/Roles/RolesLanding/RolesListProvider.js
new file mode 100644
index 000000000..c9b086342
--- /dev/null
+++ b/src/containers/Preferences/Users/Roles/RolesLanding/RolesListProvider.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import { useRoles } from 'hooks/query';
+
+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 = {
+    roles,
+    isRolesFetching,
+    isRolesLoading,
+  };
+  return (
+    <div
+      className={classNames(
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_USERS,
+      )}
+    >
+      <RolesListContext.Provider value={provider} {...props} />
+    </div>
+  );
+}
+
+const useRolesContext = () => React.useContext(RolesListContext);
+
+export { RolesListProvider, useRolesContext };
diff --git a/src/containers/Preferences/Users/Roles/RolesLanding/components.js b/src/containers/Preferences/Users/Roles/RolesLanding/components.js
new file mode 100644
index 000000000..c1284f19c
--- /dev/null
+++ b/src/containers/Preferences/Users/Roles/RolesLanding/components.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import { Intent, Button, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
+import { safeCallback } from 'utils';
+import { Icon, If } from 'components';
+
+/**
+ * Context menu of roles.
+ */
+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
+        icon={<Icon icon="trash-16" iconSize={16} />}
+        text={intl.get('roles.delete_roles')}
+        onClick={safeCallback(onDeleteRole, original)}
+        intent={Intent.DANGER}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * Retrieve Roles table columns.
+ * @returns
+ */
+export function useRolesTableColumns() {
+  return React.useMemo(
+    () => [
+      {
+        id: 'name',
+        Header: intl.get('roles.column.name'),
+        accessor: 'name',
+        className: 'name',
+        width: '80',
+        textOverview: true,
+      },
+      {
+        id: 'description',
+        Header: intl.get('roles.column.description'),
+        accessor: 'description',
+        className: 'description',
+        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/RolesList.js b/src/containers/Preferences/Users/RolesList.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/containers/Preferences/Users/Users.js b/src/containers/Preferences/Users/Users.js
index ed5e9a806..4f453d0b6 100644
--- a/src/containers/Preferences/Users/Users.js
+++ b/src/containers/Preferences/Users/Users.js
@@ -26,11 +26,18 @@ function UsersPreferences({ openDialog }) {
       <div className={classNames(CLASSES.CARD)}>
         <div className={classNames(CLASSES.PREFERENCES_PAGE_TABS)}>
           <Tabs animate={true} onChange={onChangeTabs}>
-            <Tab id="users" title={intl.get('users')} />
-            <Tab id="roles" title={intl.get('roles')} />
+            <Tab
+              id="users"
+              title={intl.get('users')}
+              panel={<PreferencesSubContent preferenceTab="users" />}
+            />
+            <Tab
+              id="roles"
+              title={intl.get('roles')}
+              panel={<PreferencesSubContent preferenceTab="roles" />}
+            />
           </Tabs>
         </div>
-        <PreferencesSubContent preferenceTab="users" />
       </div>
     </div>
   );
diff --git a/src/containers/Preferences/Users/UsersActions.js b/src/containers/Preferences/Users/UsersActions.js
index ada5c76af..3575b6ee9 100644
--- a/src/containers/Preferences/Users/UsersActions.js
+++ b/src/containers/Preferences/Users/UsersActions.js
@@ -1,40 +1,41 @@
 import React from 'react';
-import {
-  Button,
-  Intent,
-} from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
+
+import { Button, Intent } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'components';
 
 import Icon from 'components/Icon';
 import withDialogActions from 'containers/Dialog/withDialogActions';
-import {compose} from 'utils';
+import { compose } from 'utils';
 
-function UsersActions({
-  openDialog,
-  closeDialog,
-}) {
+function UsersActions({ openDialog, closeDialog }) {
+  const history = useHistory();
   const onClickNewUser = () => {
     openDialog('invite-user');
   };
 
+  const onClickNewRole = () => {
+    history.push('/preferences/roles');
+  };
+
   return (
     <div className="preferences-actions">
       <Button
-        icon={<Icon icon='plus' iconSize={12} />}
+        icon={<Icon icon="plus" iconSize={12} />}
         onClick={onClickNewUser}
-        intent={Intent.PRIMARY}>
+        intent={Intent.PRIMARY}
+      >
         <T id={'invite_user'} />
       </Button>
 
       <Button
-        icon={<Icon icon='plus' iconSize={12} />}
-        onClick={onClickNewUser}>
+        icon={<Icon icon="plus" iconSize={12} />}
+        onClick={onClickNewRole}
+      >
         <T id={'new_role'} />
       </Button>
     </div>
   );
 }
 
-export default compose(
-  withDialogActions,
-)(UsersActions);
\ No newline at end of file
+export default compose(withDialogActions)(UsersActions);
diff --git a/src/containers/Preferences/Users/components.js b/src/containers/Preferences/Users/components.js
index 853852a61..65eeb0e7f 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,11 +130,17 @@ export const useUsersListColumns = () => {
         width: 150,
       },
       {
-        id: 'phone_number',
-        Header: intl.get('phone_number'),
-        accessor: 'phone_number',
+        id: 'role_name',
+        Header: intl.get('roles.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',
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/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/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/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/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/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/TransactionsLocking/TransactionsLockingList.js b/src/containers/TransactionsLocking/TransactionsLockingList.js
new file mode 100644
index 000000000..6163b8daf
--- /dev/null
+++ b/src/containers/TransactionsLocking/TransactionsLockingList.js
@@ -0,0 +1,86 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import clsx from 'classnames';
+import { TransactionsLockingProvider } from './TransactionsLockingProvider';
+import { TransactionLockingContent } from './components';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import { compose } from 'utils';
+
+const DataTest = [
+  {
+    name: 'sales',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do',
+  },
+  {
+    name: 'purchases',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do',
+  },
+  {
+    name: 'financial',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do',
+  },
+];
+
+function Paragraph({ className, children }) {
+  return <p className={clsx('paragraph', className)}>{children}</p>;
+}
+
+/**
+ * Transactions locking list.
+ */
+function TransactionsLockingList({
+  // #withDialogActions
+  openDialog,
+}) {
+  // Handle switch transactions locking.
+  const handleSwitchTransactionsLocking = () => {
+    openDialog('transactions-locking', {});
+  };
+
+  return (
+    <TransactionsLockingProvider>
+      <TransactionsLocking>
+        <TransactionsLockingParagraph>
+          <TransLockingDesc>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </TransLockingDesc>
+          Lock All Transactions At Once. {' '}
+          <Link to={'/'}> {''}Lock All Transactions At Once →</Link>
+        </TransactionsLockingParagraph>
+
+        {DataTest.map(({ name, description }) => (
+          <TransactionLockingContent
+            name={name}
+            description={description}
+            onSwitch={handleSwitchTransactionsLocking}
+          />
+        ))}
+      </TransactionsLocking>
+    </TransactionsLockingProvider>
+  );
+}
+export default compose(withDialogActions)(TransactionsLockingList);
+
+const TransactionsLocking = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 32px;
+  max-width: 700px;
+`;
+
+const TransactionsLockingParagraph = styled(Paragraph)`
+  margin-bottom: 30px;
+`;
+
+const TransLockingTitle = styled.h2`
+  margin-bottom: 12px;
+`;
+
+const TransLockingDesc = styled.p``;
diff --git a/src/containers/TransactionsLocking/TransactionsLockingProvider.js b/src/containers/TransactionsLocking/TransactionsLockingProvider.js
new file mode 100644
index 000000000..33f1b855c
--- /dev/null
+++ b/src/containers/TransactionsLocking/TransactionsLockingProvider.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+
+const TransactionsLockingContext = React.createContext();
+
+/**
+ * Transactions locking data provider.
+ */
+function TransactionsLockingProvider({ ...props }) {
+  // Provider
+  const provider = {};
+
+  return (
+    <DashboardInsider
+    // loading={}
+    >
+      <TransactionsLockingContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useTransactionsLockingContext = () =>
+  React.useContext(TransactionsLockingContext);
+
+export { TransactionsLockingProvider, useTransactionsLockingContext };
diff --git a/src/containers/TransactionsLocking/components.js b/src/containers/TransactionsLocking/components.js
new file mode 100644
index 000000000..bd6825f41
--- /dev/null
+++ b/src/containers/TransactionsLocking/components.js
@@ -0,0 +1,79 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Switch, FormGroup, Position } from '@blueprintjs/core';
+import { Hint, Icon, FormattedMessage as T } from 'components';
+
+export const TransactionLockingContent = ({ name, description, onSwitch }) => (
+  <TransactionLockingWrapp>
+    <TransactionsLockingcontent>
+      <TransLockingIcon>
+        <Icon icon="lock" iconSize={22} />
+      </TransLockingIcon>
+
+      <div className="block">
+        <TransLockingItemTitle>
+          <T id={name} />{' '}
+          <Hint
+            content={
+              'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do'
+            }
+            position={Position.BOTTOM_LEFT}
+          />
+        </TransLockingItemTitle>
+        <TransLockingItemDesc>{description}</TransLockingItemDesc>
+      </div>
+      <FormGroup>
+        <Switch
+          large={true}
+          defaultChecked={false}
+          minimal={true}
+          className="ml2"
+          onChange={onSwitch}
+        />
+      </FormGroup>
+    </TransactionsLockingcontent>
+  </TransactionLockingWrapp>
+);
+
+const TransactionLockingWrapp = styled.div`
+  display: flex;
+  align-items: center;
+  border-radius: 6px;
+  border: 1px solid #d1dee2;
+  padding: 14px 18px;
+  margin-bottom: 25px;
+  background: #fff;
+
+  div.block {
+    flex: 1 1 0;
+    margin-left: 20px;
+    width: 100%;
+  }
+`;
+
+const TransactionsLockingcontent = styled.div`
+  display: flex;
+  align-items: center;
+  flex: 1 1 0;
+`;
+
+const TransLockingItemTitle = styled.h1`
+  font-size: 18px;
+  margin: 0 0 8px;
+  line-height: 1;
+  font-weight: 600;
+`;
+const TransLockingItemDesc = styled.p`
+  margin-bottom: 0;
+  opacity: 0.8;
+`;
+
+const TransLockingIcon = styled.div`
+  border: 1px solid #d2dde2;
+  height: 50px;
+  width: 50px;
+  text-align: center;
+  line-height: 50px;
+  border-radius: 5px;
+  color: #8190ac;
+`;
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/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/index.js b/src/hooks/query/index.js
index ca18d976d..e73c09307 100644
--- a/src/hooks/query/index.js
+++ b/src/hooks/query/index.js
@@ -29,3 +29,4 @@ export * from './GenericResource';
 export * from './jobs';
 export * from './misc';
 export * from './cashflowAccounts'
+export * from './roles'
diff --git a/src/hooks/query/roles.js b/src/hooks/query/roles.js
new file mode 100644
index 000000000..3d76429d7
--- /dev/null
+++ b/src/hooks/query/roles.js
@@ -0,0 +1,111 @@
+import { useMutation, useQueryClient } from 'react-query';
+import { useRequestQuery } from '../useQueryRequest';
+import useApiRequest from '../useRequest';
+import t from './types';
+
+// Common invalidate queries.
+const commonInvalidateQueries = (queryClient) => {
+  queryClient.invalidateQueries(t.ROLE);
+  queryClient.invalidateQueries(t.ROLES);
+  queryClient.invalidateQueries(t.ROLES_PERMISSIONS_SCHEMA);
+};
+
+/**
+ * Edit role .
+ */
+export function useEditRolePermissionSchema(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(([id, values]) => apiRequest.post(`roles/${id}`, values), {
+    onSuccess: () => {
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Create a new roles
+ */
+export function useCreateRolePermissionSchema(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((values) => apiRequest.post(`roles`, values), {
+    onSuccess: () => {
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Delete the given role.
+ */
+export function useDeleteRole(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.delete(`roles/${id}`), {
+    onSuccess: (res, id) => {
+      // Invalidate specific role.
+      queryClient.invalidateQueries(t.ROLE, id);
+
+      commonInvalidateQueries(queryClient);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Retrive the roles permissions schema.
+ */
+export function usePermissionsSchema(query, props) {
+  return useRequestQuery(
+    [t.ROLES_PERMISSIONS_SCHEMA, query],
+    { method: 'get', url: 'roles/permissions/schema', params: query },
+    {
+      select: (res) => res.data.data,
+      defaultData: {
+        roles: [],
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve the role permisstion schema.
+ * @param {number} role_id - role id.
+ */
+export function useRolePermission(role_id, props, requestProps) {
+  return useRequestQuery(
+    [t.ROLE, role_id],
+    { method: 'get', url: `roles/${role_id}`, ...requestProps },
+    {
+      select: (res) => res.data.role,
+      defaultData: {
+        permission: [],
+      },
+      ...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/types.js b/src/hooks/query/types.js
index 1aebbd8e1..edec96183 100644
--- a/src/hooks/query/types.js
+++ b/src/hooks/query/types.js
@@ -102,6 +102,12 @@ const USERS = {
   USER: 'USER',
 };
 
+const ROLES = {
+  ROLE: 'ROLE',
+  ROLES: 'ROLES',
+  ROLES_PERMISSIONS_SCHEMA: 'ROLES_PERMISSIONS_SCHEMA',
+};
+
 const SETTING = {
   SETTING: 'SETTING',
   SETTING_INVOICES: 'SETTING_INVOICES',
@@ -177,4 +183,5 @@ export default {
   ...LANDED_COSTS,
   ...CONTACTS,
   ...CASH_FLOW_ACCOUNTS,
+  ...ROLES,
 };
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 9731ca8ad..913afc98d 100644
--- a/src/lang/ar/index.json
+++ b/src/lang/ar/index.json
@@ -1479,5 +1479,6 @@
   "sms_notification.estimate_details.type": "تفاصيل فاتورة عرض الاسعار",
   "sms_notification.payment_details.type": "شكر علي عملية الدفع",
   "sms_notification.receipt_details.type": "تفاصيل إيصال البيع",
-  "personal": "المحمول"
+  "personal": "المحمول",
+  "list.create":"إضافة {value}"
 }
\ No newline at end of file
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index a13f1b07c..b8127c3bf 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1400,7 +1400,7 @@
   "cash_flow_drawer.label_transaction_type": "Transaction type",
   "cash_flow.drawer.label_transaction_no": "Transaction number",
   "cash_flow.drawer.label_transaction": "Cash flow Transaction {number}",
-  "cash_flow.transactions.no_results": "There are no deposit/withdrawal transactions on the current account.",
+  "cash_flow.account_transactions.no_results": "There are no deposit/withdrawal transactions on the current account.",
   "cash_flow_balance_in": "Balance in {name}",
   "cash_flow.accounts.no_results": "There are no cashflow accounts with current filter criteria.",
   "cash_flow_money_in": "Money In",
@@ -1466,5 +1466,22 @@
   "sms_notification.estimate_details.type": "Sale estimate details",
   "sms_notification.payment_details.type": "Payment receive thank you.",
   "sms_notification.receipt_details.type": "Sale receipt details",
-  "personal": "Personal"
+  "personal": "Personal",
+  "list.create":"Create {value}",
+  "roles.label":"Roles",
+  "roles.column.name":"Name",
+  "roles.column.description":"Description",
+  "roles.column.role_name":"Role Name",
+  "roles.edit_roles":"Edit Roles",
+  "roles.delete_roles":"Delete Roles",
+  "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.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?"
 }
\ No newline at end of file
diff --git a/src/routes/dashboard.js b/src/routes/dashboard.js
index f0c2097b1..dd9764664 100644
--- a/src/routes/dashboard.js
+++ b/src/routes/dashboard.js
@@ -785,6 +785,13 @@ export const getDashboardRoutes = () => [
     subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
     defaultSearchResource: RESOURCES_TYPES.ACCOUNT,
   },
+  {
+    path: `/transactions-locking`,
+    component: lazy(() =>
+      import('../containers/TransactionsLocking/TransactionsLockingList'),
+    ),
+    pageTitle: intl.get('sidebar.transactions_locaking'),
+  },
   // Homepage
   {
     path: `/`,
diff --git a/src/routes/preferences.js b/src/routes/preferences.js
index 98ff2e46b..9fc454ddd 100644
--- a/src/routes/preferences.js
+++ b/src/routes/preferences.js
@@ -1,5 +1,6 @@
 import General from 'containers/Preferences/General/General';
-import Users from 'containers/Preferences/Users/Users';
+import Users from '../containers/Preferences/Users/Users';
+import Roles from '../containers/Preferences/Users/Roles/RolesForm/RolesFormPage';
 import Accountant from 'containers/Preferences/Accountant/Accountant';
 // import Accounts from 'containers/Preferences/Accounts/Accounts';
 import Currencies from 'containers/Preferences/Currencies/Currencies';
@@ -20,6 +21,16 @@ export default [
     component: Users,
     exact: true,
   },
+  {
+    path: `${BASE_URL}/roles`,
+    component: Roles,
+    exact: true,
+  },
+  {
+    path: `${BASE_URL}/roles/:id`,
+    component: Roles,
+    exact: true,
+  },
   {
     path: `${BASE_URL}/currencies`,
     component: Currencies,
diff --git a/src/routes/preferencesTabs.js b/src/routes/preferencesTabs.js
index 48537aa24..32b377899 100644
--- a/src/routes/preferencesTabs.js
+++ b/src/routes/preferencesTabs.js
@@ -1,30 +1,20 @@
 // import AccountsCustomFields from "containers/Preferences/AccountsCustomFields";
-import UsersList from 'containers/Preferences/Users/UsersList';
-import RolesList from 'containers/Preferences/Users/RolesList';
+import UsersList from '../containers/Preferences/Users/UsersList';
+import RolesList from '../containers/Preferences/Users/Roles/RolesLanding/RolesList';
 
 export default {
-  accounts: [
-    // {
-    //   path: '',
-    //   component: AccountsCustomFields,
-    //   exact: true,
-    // },
-    // {
-    //   path: 'custom_fields',
-    //   component: AccountsCustomFields,
-    //   exact: true,
-    // },
-  ],
   users: [
     {
       path: '',
       component: UsersList,
       exact: true,
     },
+  ],
+  roles: [
     {
-      path: '/roles',
+      path: '',
       component: RolesList,
       exact: true,
     },
   ],
-} 
\ No newline at end of file
+};
diff --git a/src/static/json/icons.js b/src/static/json/icons.js
index fc6ffe780..45bbfb4e6 100644
--- a/src/static/json/icons.js
+++ b/src/static/json/icons.js
@@ -509,11 +509,17 @@ export default {
     ],
     viewBox: '0 0 24 24',
   },
-  "sms-message-preview": {
+  'sms-message-preview': {
     path: [
       'M8.341,375.3573H399.3271v-.0015l-390.9861-.07ZM363.2382,0H44.43A44.4508,44.4508,0,0,0,0,44.371V375.284l8.341.0016V44.371A36.0651,36.0651,0,0,1,44.43,8.33H90.7089a4.6454,4.6454,0,0,1,4.6482,4.6423v1.9718a23.8588,23.8588,0,0,0,23.8742,23.843H288.9146a23.8586,23.8586,0,0,0,23.8741-23.843V12.972A4.6456,4.6456,0,0,1,317.4372,8.33h45.801A36.0651,36.0651,0,0,1,399.3271,44.371V375.3558l8.341.0015V44.371A44.4508,44.4508,0,0,0,363.2382,0Z',
-      "M1199.9485,803.1623"
+      'M1199.9485,803.1623',
     ],
-    viewBox: "0 0 407.6681 375.3573",
-  }
+    viewBox: '0 0 407.6681 375.3573',
+  },
+  lock: {
+    path: [
+      'M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z',
+    ],
+    viewBox: '0 0 24 24',
+  },
 };
diff --git a/src/style/pages/Preferences/Roles/Form.scss b/src/style/pages/Preferences/Roles/Form.scss
new file mode 100644
index 000000000..916d611c2
--- /dev/null
+++ b/src/style/pages/Preferences/Roles/Form.scss
@@ -0,0 +1,58 @@
+//  Roles Form page
+//---------------------------------
+.preferences-page__inside-content--roles-form {
+  .card {
+    padding: 25px;
+
+    .card__footer {
+      padding-top: 16px;
+      border-top: 1px solid #e0e7ea;
+      margin-top: 30px;
+
+      .bp3-button {
+        min-width: 65px;
+
+        + .bp3-button {
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+
+  .bp3-form-group {
+    max-width: 500px;
+    margin-bottom: 14px;
+
+    &.bp3-inline {
+      .bp3-label {
+        min-width: 100px;
+      }
+    }
+    .bp3-form-content {
+      width: 100%;
+    }
+  }
+  .form-group--description {
+    textarea {
+      width: 100%;
+      min-width: 100%;
+      font-size: 14px;
+    }
+  }
+  .bp3-control.bp3-checkbox {
+    .bp3-control-indicator {
+      border: 1px solid #c2c2c2;
+      cursor: auto;
+
+      &,
+      &:hover {
+        height: 15px;
+        width: 15px;
+      }
+      &:before {
+        width: 15px;
+        height: 15px;
+      }
+    }
+  }
+}
diff --git a/src/style/pages/Preferences/Users.scss b/src/style/pages/Preferences/Users.scss
index 9046fb9f1..c9a3726e7 100644
--- a/src/style/pages/Preferences/Users.scss
+++ b/src/style/pages/Preferences/Users.scss
@@ -1,12 +1,9 @@
-
 // Users/Roles List.
 // ---------------------------------
-.preferences-page__inside-content--users{
-
-.bigcapital-datatable {
-
-    .td{
-      .avatar{
+.preferences-page__inside-content--users {
+  .bigcapital-datatable {
+    .td {
+      .avatar {
         display: block;
         height: 28px;
         width: 28px;
@@ -23,8 +20,13 @@
       text-transform: uppercase;
     }
 
-    .tr:last-child .td{
+    .tr:last-child .td {
       border-bottom: 0;
     }
   }
+  .bp3-tabs {
+    .bp3-tab-panel {
+      margin-top: 0;
+    }
+  }
 }
diff --git a/src/style/pages/TransactionsLocking/TransactionsLockingDialog.scss b/src/style/pages/TransactionsLocking/TransactionsLockingDialog.scss
new file mode 100644
index 000000000..b1aed0430
--- /dev/null
+++ b/src/style/pages/TransactionsLocking/TransactionsLockingDialog.scss
@@ -0,0 +1,27 @@
+.dialog--transaction--locking {
+  max-width: 400px;
+  .bp3-form-group {
+    margin-bottom: 15px;
+    margin-top: 15px;
+
+    label.bp3-label {
+      font-size: 13px;
+      margin-bottom: 3px;
+    }
+  }
+
+  .form-group {
+    &--reason {
+      .bp3-form-content {
+        textarea {
+          width: 100%;
+          min-width: 100%;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+  .bp3-dialog-footer {
+    padding-top: 10px;
+  }
+}
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;